@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

*{

box-sizing: border-box;

padding: 0;

margin: 0;

font-family: "Inter", sans-serif;

}



audio,

canvas,

embed,

iframe,

img,

object,

svg,

video {

display: block;

height: auto;

max-width: 100%;

width: 100%;

}



summary {

display: list-item;

}



body,

html {

height: 100%;

}



html {

font-size: 100%;

scroll-behavior: smooth;

}



body {

line-height: 1.4;



-webkit-overflow-scrolling: touch;



-ms-overflow-style: scrollbar;



background-color: #ffffff;

}



body::-webkit-scrollbar {

width: 10px;

}



body::-webkit-scrollbar-track {

background-color: #e7e7e7;

}



body::-webkit-scrollbar-thumb {

background-color: #013daa;



border: 1px solid #9f6300;



border-radius: 10px;

}



p { 

font-size: 15px;

color: #1c1c1c;

line-height: 1.55;

margin-bottom: 1rem;

font-weight: 500;

}

a, a:hover, a:focus, button:hover, button:focus, input:focus{outline:none!important; text-decoration: none !important;}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {color: #000;  }



/*------Parallax Css----------*/

.parallax {

    background-attachment: fixed;

    background-repeat: no-repeat;

    background-size: cover;

    background-position-x: center;

}

.animation {

    animation-duration: 0.5s;

    animation-timing-function: linear;

    animation-delay: 0s;

    animation-iteration-count: 1;

    animation-direction: normal;

    animation-fill-mode: forwards;

    animation-play-state: running;

}

@keyframes slide-up {

    from {opacity:0; top:100px;}

    to {opacity:1; top:0;}

}

.animation_slide-up {

    animation-name: slide-up;

}

@keyframes slide-down {

    from {opacity:0; bottom:100px;}

    to {opacity:1; bottom:0;}

}

.animation_slide-down {

    animation-name: slide-down;

}

@keyframes slide-left {

    from {opacity:0; left:100px;}

    to {opacity:1; left:0;}

}

.animation_slide-left {

    animation-name: slide-left;

}

@keyframes slide-right {

    from {opacity:0; right:100px;}

    to {opacity:1; right:0;}

}

.animation_slide-right {

    animation-name: slide-right;

}

@keyframes flip-x {

    from {opacity:0;transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -180deg);}

    to {opacity:1;transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);}

}

.animation_flip-x {

    backface-visibility: visible;

    animation-name: flip-x;

}

@keyframes flip-y {

    from {opacity: 0;transform: perspective(400px) rotate3d(1, 0, 0, 90deg);}

    to {opacity:1;transform: perspective(400px);}

}

.animation_flip-y {

    backface-visibility: visible !important;

    animation-name: flip-y;

}

@keyframes zoom {

    from {opacity: 0;transform: scale3d(0.3, 0.3, 0.3);}

    to {opacity: 1;}

}

.animation_zoom {

    animation-name: zoom;

}

/*-----Custome Css Area----*/



.sec_padding{padding:30px 0}



/*------Main Header--------*/



.main_header{
position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 9;

 -webkit-animation: smoothScroll 1s forwards;

animation: smoothScroll 1s forwards; 

box-shadow: var(--bs-box-shadow) !important;

background-color: #fff;

}

.main_header.sticky{

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 9;

 -webkit-animation: smoothScroll 1s forwards;

animation: smoothScroll 1s forwards; 

box-shadow: var(--bs-box-shadow) !important;

}



@-webkit-keyframes smoothScroll {

0% {

-webkit-transform: translateY(-40px);

transform: translateY(-40px);

}

100% {

-webkit-transform: translateY(0px);

transform: translateY(0px);

}

}



@keyframes smoothScroll {

0% {

-webkit-transform: translateY(-40px);

transform: translateY(-40px);

}

100% {

-webkit-transform: translateY(0px);

transform: translateY(0px);

}

}



.main_header .navbar-brand{



margin-top: 8px;

padding: 5px 10px 0;

background-color: #fff;

z-index: 0;

-webkit-transition: all 500ms ease-in-out;

-o-transition: all 500ms ease-in-out;

transition: all 500ms ease-in-out;

}

.main_header .navbar-brand .logo-2{display:none}



.main_header.sticky .navbar-brand{

padding: 5px 10px 0;

background-color: #fff;

z-index: 0;

-webkit-box-shadow: none;

box-shadow: none;

-webkit-transition: all 500ms ease-in-out;

-o-transition: all 500ms ease-in-out;

transition: all 500ms ease-in-out;

}

.main_header.sticky .navbar-brand .logo-1{display:none}

.main_header.sticky .navbar-brand .logo-2{display:block}

.main_header.sticky .navbar-brand::after{display: none;}



/* .main_header .navbar-brand::after{

content: '';

position: absolute;

left: 0;

bottom: -38%;

width: 100%;

height: 46px;

background: url(../images/bg/logo-shape.png);

background-position: bottom center;

background-size: cover;

background-repeat: no-repeat;

} */



.main_header .quote_btn{

display: -webkit-box;

display: -ms-flexbox;

display: flex;

vertical-align: middle;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

}

.main_header .quote_btn a{ 

background-color: #00379C;

width:auto;

padding: 0px 5px; 

color: #fff;

text-align: center;

text-transform: uppercase;

font-weight: 600;

font-size: 25px;

-webkit-transition: all 500ms ease-in-out;

-o-transition: all 500ms ease-in-out;

transition: all 500ms ease-in-out;

border-radius: 50px;

}



.main_header .quote_btn a:hover{ 

    background-color: #5085e7;

    -webkit-transition: all 500ms ease-in-out;

-o-transition: all 500ms ease-in-out;

transition: all 500ms ease-in-out;

}

/*---------Home Main Video------*/



.home_video_sec{

width: 100%;

position: relative;

}

.slider_capction{
    position: absolute;
    top: 0; bottom: 0;  left: 0;right: 0;   margin: auto;    display: flex;

    align-items: center;

    color: #fff;

    font-size: 88px;

    font-weight: 800;

    padding: 0 22% 0 18%;

line-height: 115.99999999999999%;

letter-spacing: -1%;



}



/* .home_video_sec::after{

content:'';

background: url(../js/videooverlay1.png);

background-repeat: repeat;

background-size: initial;

opacity: 0.4;

height: 100%;

width: 100%;

position: absolute;

top: 0;

left: 0;

z-index: 1;

display: block;

} */

/*---------About Us Area------*/

.about_sec{



margin: 0rem 0 0;

padding-top: 80px;

padding-bottom: 30px; background:#fff;}

.about_right{position: relative;}

.about_right h1{ font-size: 48px; color: #242424; font-weight: 600; }



.what_wedo_main{ margin-top: 50px;}

.what_wedo_main .nav-tabs { border: none; margin-bottom: 40px ;}

.what_wedo_main .nav-tabs li button{font-size: 18px; font-weight: 700; border-radius: 40px!important; color: #838383; padding: 16px 36px;border: none;}

.what_wedo_main .nav-tabs li button:hover{border-radius: 40px!important; border: none;}

.what_wedo_main .nav-tabs li button.active{ background: #00459E; font-size: 18px; font-weight: 600; border-radius: 40px!important; color: #fff; padding: 16px 36px;border: none;

}

.whatwe_title{ border-bottom: solid 1px #ddd;}

.whatwe_title h2{ color: #242424; font-size: 48px; font-weight: 700; margin-bottom: 20px;}

.whatwe_title p{ color: #6E6E6E; font-size: 20px; font-weight: 500; margin-bottom: 20px;}

.customer_listmain{display: flex; justify-content: space-between; padding: 30px 0; border-bottom: solid 1px #ddd; }

.customer_listmain:last-child{ border-bottom:none;}

.customer_listleft{color: #242424; font-size: 40px; font-weight: 600;min-width: 578px;}

.customer_listright{}



.soluction_listmain{display: flex;  padding: 20px 12px; border-bottom: solid 1px #ddd;gap: 30px; margin-bottom: 15px; transition: all 0.8s ease;}

 /* .soluction_listmain:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);  background: rgba(255, 255, 255, 0.2); border-radius: 8px; 

    padding: 20px 12px;} */

.soluction_listleft{max-width: 82px;}

.soluction_listright{}

.soluction_title{ font-size: 24px;font-weight: 600; color: #242424; margin-bottom: 10px; display: inline-flex; gap: 10px;}

.soluction_title span{ font-size: 12px;font-weight: 700;background: #E2FFFB; color: #239F8E; border: solid 1px #239F8E; border-radius: 15px; padding: 3px 12px;

  display: inline-flex; align-items: center; justify-content: center;}

.soluction_dec{font-size: 20px; font-weight: 400; color: #474747;}

.soluction_dec h4{ margin-top: 15px; font-size: 18px; font-weight: 700; color: #474747;}

.soluction_dec ul{ padding: 0px;margin-left: 15px;}

.soluction_dec li{ margin-bottom: 8px;}

.button_list{}

.button_list a{ background: #F7F8FA; padding: 7px 16px; border-radius: 20px; border: solid 1px #00000033; font-size: 14px; font-weight: 500; color: #242424;display: inline-flex

; margin-bottom: 8px;}

.register_butt{ background: #00459E; padding: 18px 32px; border-radius: 40px; color: #fff; font-size: 16px; font-weight: 600;display: inline-flex; margin-top: 15px;}

.soluction_listmain:last-child{ border-bottom: none;}

.load_morese{border-bottom: solid 1px #ddd; text-align: center; padding: 15px 0;}

.load_morese button{ color: #242424; font-size: 20px; font-weight: 600; border: none; background: none;font-family: "Inter", sans-serif;}



.rounded-shape {clip-path: polygon(50% 2.45%, 100% 38.77%, 100% 100%, 0% 100%, 0% 38.77%);

background-color: #e0f4ff;-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-moz-border-radius-bottomright: 10px;

-moz-border-radius-bottomleft: 10px;

border-bottom-right-radius: 10px;

border-bottom-left-radius: 10px; transform: rotate(15deg);padding: 14px 8px;

    width: 82px;

    height: 82px;

}

.rounded-shape img{}



.my_youtub{color: rgba(255, 0, 0, 1); font-size: 30px;}

.my_instagram { font-size: 30px;

    font-weight: bold;

    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    color: transparent;

    display: inline-block;

}

.my_linkedin{color: rgba(10, 102, 194, 1); font-size: 30px;}

.my_facebook{color: rgba(24, 119, 242, 1); font-size: 30px;}



/*ecosystem start*/

.ecoystem_mainsection{background: linear-gradient(180deg, #E3F3FF 0%, #FFFFFF 64.34%);}

.ecosystem_title .sec_title .heading{font-weight: 600;font-style: Semi Bold;font-size: 36px;leading-trim: NONE;line-height: 100%; text-align: center;}

.ecosystem_title .sec_title span{ background: linear-gradient(90deg, #2563EA 0%, #0FA4E9 100%);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-clip: text;  color: transparent;   }

.ecosystem_title .sec_title p{font-family: Inter;

font-weight: 400;

font-style: Regular;

font-size: 18px;

leading-trim: NONE;

line-height: 26px;

letter-spacing: -1%;

text-align: center;

vertical-align: middle;

color:#4B5563;

    

}



/* Phone Section */

        .phone-mockup {

        }



        .phone-mockup::before {

        }



      



        /* Cards Layout */

        .ecosys_container{ display: grid;  grid-template-columns: 1fr 416px 1fr;        align-items: center;          padding: 20px;}

        .ecosys_container .card-column {

            display: flex;

            flex-direction: column;

            gap: 25px;

        }

 .mycard {

            background: white;

            padding: 20px;

            border-radius: 15px;

            display: flex;

            align-items: center;

            gap: 15px;

            box-shadow: 0px 6px 30.4px 0px rgba(0, 0, 0, 0.05);

            transition: transform 0.2s;

            cursor: pointer;

            border: 1px solid rgba(0, 0, 0, 0.1)

        }



        .mycard:hover {

            transform: translateY(-3px);

        }



        .icon-box {

            font-size: 30px;

            width: 50px;

            text-align: center;

        }



        .card-content h3 {

            font-family: Inter;

font-weight: 600;

font-style: Semi Bold;

font-size: 18px;

leading-trim: NONE;

line-height: 100%;

letter-spacing: -1%;

background: rgba(36, 36, 36, 1);

background-clip: text;

    color: transparent;

        }



        .card-content p {font-family: Inter;

font-weight: 400;

font-style: Regular;

font-size: 14px;

leading-trim: NONE;

line-height: 20px;

letter-spacing: -1%;

vertical-align: middle;

            background: rgba(110, 110, 110, 1);

            background-clip: text;

    color: transparent;

        }







/*-----we believe in Start-------*/

.bg_weblive{background: linear-gradient(to right, #003A84, #004DB0);overflow: hidden;

            height: 100%;}

            .wetitle{ color: #FCC020; font-size: 64px; font-weight: 800; text-align: center; position:absolute; top: 10%; right: 0;}

.unlockinggrowth__sliderwrap {

            position: relative;

            width: 100%;

            min-height: 100vh;

            overflow: hidden;

        }

        

        .unlockinggrowth__sliderwrap .slick-slide {

            display: flex;

            flex-wrap: wrap;

            align-items: center;

            position: relative;

            min-height: 100vh;

        }

        

        .unlockinggrowth__sliderwrap .img__wrap {

            width: 45vw;

            min-height: 80vh;

            overflow: clip;

            display: flex;

            flex-wrap: wrap;

            position: relative;

        }

        

        .unlockinggrowth__sliderwrap .img__wrap img {

            position: absolute;

            width: 100%;

            height: 100% !important;

            object-fit: cover;

            transform: scale(1.2);

            transform-origin: left;

        }

        

        .unlockinggrowth__sliderwrap .text__slider.change__triggered .img__wrap img {

            transition: all 20000ms linear;

        }

        

        /* Slides 1, 3, and 4 have transform-origin: right */

        .unlockinggrowth__sliderwrap .text__slider.change__triggered .slick-slide.slick-active.slick-current:nth-child(1) .img__wrap img,

        .unlockinggrowth__sliderwrap .text__slider.change__triggered .slick-slide.slick-active.slick-current:nth-child(3) .img__wrap img,

        .unlockinggrowth__sliderwrap .text__slider.change__triggered .slick-slide.slick-active.slick-current:nth-child(4) .img__wrap img {

            transform-origin: right;

        }

        

        /* Slide 2 has transform: scale(1) */

        .unlockinggrowth__sliderwrap .text__slider.change__triggered .slick-slide.slick-active.slick-current:nth-child(2) .img__wrap img {

            transform: scale(1);

        }

        

        .unlockinggrowth__sliderwrap .content {

            font-size: 40px;

            line-height: 1;

            padding: 80px 100px 80px 100px;

            max-width: 740px;

            min-height: 480px;

            float: right;

            position: absolute;

            right: 0;

            margin: auto;

            z-index: 1;

        }

        

        .unlockinggrowth__sliderwrap .content:after {

            position: absolute;

            content: "";

            top: 0;

            left: 0;

            width: 0%;

            height: 100%;

            background: #ffffff;

            z-index: -1;

            transition: all 1000ms 0.5s cubic-bezier(.48,.05,.21,.98);

        }

        

        .et_pb_section__believe.showWhiteBox .unlockinggrowth__sliderwrap .content:after {

            width: 100%;

        }

        

        .et_pb_section__believe.showWhiteBox .unlockinggrowth__sliderwrap .content {

            opacity: 1;

        }

        

        .unlockinggrowth__sliderwrap .content span.common {

            margin-bottom: 50px;

            display: block;

            letter-spacing: -1px;

            font-size: 40px;

            color: #242424;

            font-weight: 800;

            text-align: center;

            line-height: 1.2;

            opacity: 0;

            transform: translateY(30px);

            transition: all 1000ms 1s cubic-bezier(.48,.05,.21,.98);

        }

        

        .et_pb_section__believe.showWhiteBox .unlockinggrowth__sliderwrap .content span.common {

            opacity: 1;

            transform: translateY(0px);

        }

        

        .et_pb_section__believe .content span.dynamic {

            display: flex;

            flex-wrap: wrap;

            position: relative;

            padding-left: 6vw;

            opacity: 0;

            transform: translateY(30px);

            transition: all 1000ms 1.3s cubic-bezier(.48,.05,.21,.98);

        }

        

        .et_pb_section__believe.showWhiteBox .unlockinggrowth__sliderwrap .content span.dynamic {

            opacity: 1;

            transform: translateY(0px);

        }

        

        .et_pb_section__believe.showWhiteBox .text__slider.change__triggered .slick-slide:not(:first-of-type) .content span.dynamic {

            opacity: 0;

            transform: translateY(30px);

        }

        

        .et_pb_section__believe.showWhiteBox .text__slider.change__triggered .slick-slide:not(:first-of-type).slick-active.slick-current .content span.dynamic {

            opacity: 1;

            transform: translateY(0px);

            transition: all 1000ms 0.5s cubic-bezier(.48,.05,.21,.98);

        }

        

        .et_pb_section__believe .content span.number {

            color: #00459E;

            font-size: 40px; font-weight: 800;             

            position: absolute;

            left: 0;

            top: 0;

        }

        

        .unlockinggrowth__sliderwrap .content span.value {

            letter-spacing: -0.5px;

            color: #242424; font-size: 40px; font-weight: 700; margin-bottom: 15px;

        }

        .des_text{color: #555555; font-size: 20px; font-weight: 400;}

        



/* .slider-container {display: flex; width: 100%;    height: 100%;      margin: 5vh auto;  overflow: hidden; position: relative;        }



        .image-section {

            flex: 1;

            position: relative;

            overflow: hidden;

        }



        .image-slider {

            display: flex;

            width: 400%;

            height: 100%;

            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 

        }



        .image-slide {

            width: 25%;

            height: 100%;

            background-size: cover;

            background-position: center;border-radius: 4%;

            transition: all 20000ms linear;

        }



        .content-section {

            flex: 1;

            position: relative;

            overflow: hidden;

            padding: 0px 0 40px;

            display: flex;

            flex-direction: column;

            justify-content: center;

            margin-left: -100px;

        }



        .content-slider {

            display: flex;

            width: 400%;

            

            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

            

        }



        .content-slide {

            width: 25%;

            height: 100%;

            padding: 20px 50px;

            display: flex;

            flex-direction: column;

            justify-content: center;background: #fff; 

        }



        .content-slide h2 {

            font-size: 40px; font-weight: 800;

            text-align: center;

            margin-bottom: 80px;

            color: #242424;

        }

        .content-slide h3 {

            font-size: 40px; font-weight: 700;

            text-align: left;

            margin-bottom: 10px;

            color: #242424;

        }

        .content-slide h3 span{ color: #00459E; margin-right: 20px;}



        .content-slide p {

            font-size: 20px;

            line-height: 1.6;

            font-weight: 400;

            margin-top: 15px;

            color: #555;

            padding: 0 0 0 80px;

        }



       .slide-counter{ display: none;}



        .slide-indicators {

            position: absolute;

            right: 30px;

            top: 50%;

            transform: translateY(-50%);

            display: flex;

            flex-direction: column;

            gap: 15px;

            z-index: 10;

        }



        .indicator {

            width: 12px;

            height: 12px;

            border-radius: 50%;

            background: rgba(26, 42, 108, 0.4);

            cursor: pointer;

            transition: all 0.3s ease;

        }



        .indicator.active {

            background: #1a2a6c;

            transform: scale(1.3);

        }



        .scroll-indicator {

            position: absolute;

            bottom: 30px;

            left: 50%;

            transform: translateX(-50%);

            display: flex;

            flex-direction: column;

            align-items: center;

            z-index: 10;

        }



        .scroll-text {

            color: #1a2a6c;

            margin-bottom: 10px;

            font-size: 0.9rem;

            opacity: 0.8;

        }



        .mouse {

            width: 24px;

            height: 40px;

            border: 2px solid #1a2a6c;

            border-radius: 12px;

            position: relative;

        }



        .wheel {

            width: 4px;

            height: 8px;

            background: #1a2a6c;

            border-radius: 2px;

            position: absolute;

            top: 6px;

            left: 50%;

            transform: translateX(-50%);

            animation: scroll 1.5s infinite;

        }



        @keyframes scroll {

            0% {

                transform: translateX(-50%) translateY(0);

                opacity: 1;

            }

            100% {

                transform: translateX(-50%) translateY(16px);

                opacity: 0;

            }

        } */



        /*-------Our Online Community Forum and Knowledge base-------*/



.online_community_title h2{ color: #242424; font-size: 48px; font-weight: 700; margin-top: 30px;}

.online_community_title p{color: #555; font-size: 20px; font-weight: 400;}

 .image-cards-container {

            /*display: grid;*/

            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));

            gap: 30px;

        }

        

        .image-card {

            background: white;

            border-radius: 12px;

            overflow: hidden;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

            transition: transform 0.3s ease, box-shadow 0.3s ease;

            display: flex;

            align-items: center;

        }

        

        /* .image-card:hover {

            transform: translateY(-5px);

            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);

        } */

        

        .card-img {

            width: 100%;

            object-fit: cover;

            display: block; position: relative;

                max-width: 549px;

        }

        .card-img img{ width: 100%;}

        

        .card-img-1 {

            background: linear-gradient(45deg, #3498db, #2ecc71);

        }

        

        .card-img-2 {

            background: linear-gradient(45deg, #e74c3c, #f39c12);

        }

        

        .card-img-3 {

            background: linear-gradient(45deg, #9b59b6, #34495e);

        }

        

        .card-img-4 {

            background: linear-gradient(45deg, #1abc9c, #3498db);

        }

        .avarena{padding: 7px 16px; border-radius: 20px; position: absolute; background: #fff; top: 20px;  left: 20px; color: #239F8E; font-size: 16px; font-weight: 700;}

        

        .image-card-content {

            padding: 25px;

        }

        

        .image-card-title {

            font-size: 20px;

            font-weight: 700;

            margin-bottom: 10px;

            color: #242424;

        }

        

        .image-card-text {

            color: #555;

            font-size: 16px;

            font-weight: 400;

            margin-bottom: 20px;

        }

        .image-card-link {}

        .image-card-link a{ background: #F7F8FA; border: solid 1px #00000033; border-radius: 20px; padding: 7px 16px; display: inline-flex; gap: 8px; margin-bottom: 8px;

        color: #242424; font-size: 14px; font-weight: 500;}

        

        .image-card-btn {

            display: inline-block;

            color: #fff;

            text-decoration: none;

            font-weight: 600;

            transition: all 0.3s ease;

            font-size: 16px;

            background: #00459E; border-radius: 40px; padding: 10px 28px; margin: 10px 0px;

        }

        

        .image-card-btn:hover {

            color: #fff;

        }

        

        .image-card-btn i {

            margin-left: 5px;

            transition: transform 0.3s ease;

        }

        

        .image-card-btn:hover i {

            transform: translateX(5px);

        }



/*-------impact we make Area-------*/

.impact_title h2{ color: #242424; font-size: 48px; font-weight: 700; margin-top: 30px;     margin-bottom: 30px;}

 .testimonial-card { padding: 0px;  margin: 0;  transition: transform 0.3s ease;

    display: flex;  gap: 30px;  justify-content: center;   align-items: center;        }

        

        /* .testimonial-card:hover {

            transform: translateY(-5px);

        } */

        

        .client-info {

            display: flex;

            align-items: center;

            margin-bottom: 20px;

        }

        

        .client-avatar {

            width: 100%;           

            margin-right: 15px;

        }

        

        .client-avatar img {

            width: 100%;

            height: 100%;

            object-fit: cover; border-radius: 4%;

        }

        .testimonil_title{ color: #A3A3A3; font-size: 24px; font-weight: 500; margin-bottom: 30px; text-align: center;}

        .testimonil_title span{color: #242424; font-size: 24px; font-weight: 600; margin-right: 5px;}

        

        .testimonial-text {

            color: #555;

            line-height: 1.6;

            font-size: 16px;

            font-style: italic;

            position: relative;

             background: #F5F8FF;

            border-radius: 12px;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);

            padding: 50px 125px 112px;

                width: 60%;

        }

        

         .testimonial-text p {

            font-size: 20px;

            color: #242424;

            font-weight: 400;

            text-align: center;

        }

        .testimonial-text:before {

            content: "";

            position: absolute;

            left: 0;

            top: -10px;

            font-size: 40px;

            color: #4a6cf7;

            font-family: Georgia, serif;

        }

        

        .owl-dots {

            text-align: center;

            margin-top: 30px;

        }

        

        .owl-dot {

            display: inline-block;

            margin: 0 5px;

            width: 12px;

            height: 12px;

            border-radius: 50%;

            background: #ddd;

            transition: background 0.3s ease;

        }

        

        .owl-dot.active {

            background: #4a6cf7;

        }

        

        .owl-nav {

            display: flex;

            justify-content: center;

             margin-top: -110px!important;

    position: relative;

    left: -20%;

        }

        

        .owl-nav i{

            font-size: 33px;

        }

        

      /* COMMON *//* NEXT (Right) - Default Blue */

/* COMMON */

.owl-prev,

.owl-next {

    width: 64px;

    height: 64px;

    border-radius: 100% !important;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0 10px;

    font-size: 18px !important;

    transition: all 0.3s ease;

    color: #fff;

    background: #00459e40 !important;

}



/* DEFAULT */

.owl-next {

    background: #00379C;

}



.owl-prev {

    background: #00459E;

}



/* ACTIVE */

.owl-nav button.active {

    background: #00379C !important;

    opacity: 1 !important;

}



/* INACTIVE */

.owl-nav button.inactive {

    background: #00459E !important;

    opacity: 0.3 !important;

}    /*.owl-prev, .owl-next {*/

        /*    background: #C3C3C3 !important;*/

        /*    color: white !important;*/

        /*    width: 64px;*/

        /*    height: 64px;*/

        /*    border-radius: 100%!important;*/

        /*    display: flex;*/

        /*    justify-content: center;*/

        /*    align-items: center;*/

        /*    margin: 0 10px;*/

        /*    font-size: 18px !important;*/

        /*    transition: all 0.3s ease;*/

        /*}*/

        

        .owl-prev:hover, .owl-next:hover {

            background: #00379C !important;

            transform: scale(1.1);

        }

        

        /*========Get AVA App Start==========*/

        

        /*========QUALITY & ASSURANCE Start==========*/

        /* Top Section Layout */

        

        .quality_assurance_sec {padding-top: 80px;}

.top-section {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 40px;

    margin-bottom: 50px;

}



.info-content {

    flex: 1;

}



.badge {

    display: inline-block;

    background-color: #eef4ff;

    padding: 6px 12px;

    border-radius: 6px;

    margin-bottom: 20px;

}



.badge h5{

   

    font-size: 0.875rem;

    font-weight: 800;

    letter-spacing: 1px;

   background: linear-gradient(90deg, #2563EA 0%, #0FA4E9 100%);

  -webkit-background-clip: text;

  background-clip: text;

  margin: 0;

  -webkit-text-fill-color: transparent;

  color: transparent; 

}



.description {

    font-size: 1.1rem;

    color: #777;

    line-height: 1.6;

    margin-bottom: 30px;

}



.promise-tag {

       display: inline-flex;

    align-items: center;

    background-color: rgba(220, 252, 231, 1);

    color: rgba(22, 163, 74, 1);

    padding: 10px 18px;

    border-radius: 30px;

    border: 1px solid rgba(134, 239, 172, 1);

    font-size: 14px;

    font-weight: 600;

}



.check-icon {

    margin-right: 8px;

}



/* Expect Card */

.expect-card {

    flex: 0 0 592px;

    background: white;

    padding: 40px;

    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    border: 1px solid #eee;

}



.expect-card h2 {

    font-size: 1.6rem;

    margin-bottom: 10px;

}



.expect-card p {

    color: #888;

    font-size: 0.95rem;

    margin-bottom: 25px;

}



.features-list {

    list-style: none;

    padding:0px;

}



.features-list li {

    margin-bottom: 15px;

    display: flex;

    align-items: center;

    font-size: 1rem;

    color: #0047ab; /* Dark blue from image */

}



.check-green {

       color: #2ecc71;

    margin-right: 12px;

    font-weight: bold;

    width: 20px;

    height: 20px;

    background: rgba(240, 253, 244, 1);

    border-radius: 50%;

    text-align: center;

    line-height: 18px;

}



/* CTA Banner */

.cta-banner {

    background-color: #0047ab;

    border-radius: 15px;

    padding: 30px 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: white;

}



.cta-text h3 {

    font-size: 1.4rem;

    margin-bottom: 5px;

    color: #fff;

}



.cta-text p {

    font-size: 0.9rem;

    opacity: 0.8;

    color: #fff;

}



.cta-buttons {

    display: flex;

    gap: 15px;

}



.btn_planyour {

    text-decoration: none;

    padding: 12px 24px;

    border-radius: 30px;

    font-weight: 600;

    font-size: 0.9rem;

    transition: 0.3s;

}



.btn-yellow_planyour {
 
    background-color: #ffc107;

    border: none;

    color: #222;
 
}
 


.btn-yellow_planyour:hover {

    background-color: #e6af06;

}



.btn-outline_planyour {

    border: 1px solid white;

    color: white;

}



.btn-outline_planyour:hover {

    background-color: rgba(255,255,255,0.1);

}

.generate_email{font-weight: 500 !important;}



/* Responsive adjustment */

@media (max-width: 900px) {

    

     .ecosys_container {

                grid-template-columns: 1fr;

            }

            .phone-mockup {

                order: -1;

            }

            

    .top-section {

        flex-direction: column;

    }

    .expect-card {

        flex: 1 1 auto;

        width: 100%;

    }

    .cta-banner {

        flex-direction: column;

        text-align: center;

        gap: 20px;

    }

}



/*========QUALITY & ASSURANCE Start==========*/





.app-section {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 80px 0%;

  gap: 40px;

}



.app-content {

  flex: 1;

}



.app-content h2 {

  font-size: 64px;

  font-weight: 700;

  color: #242424;

  margin-bottom: 10px;

}



.app-content h3 {

  font-size: 26px;

  font-weight: 700;

  color: #242424;

  margin-bottom: 20px;

}



.app-content p {

  font-size: 20px;

  color: #242424;

  font-weight: 400;

  line-height: 1.6;

  margin-bottom: 30px;

  max-width: 556px;

}



.app-links {

  display: flex;

  align-items: center;

  gap: 20px;

}



.app-links img{ width: auto;}



.play-badge {

  width: 279px;

  cursor: pointer;

}



.qr-code {

  width: 109px;

}



.app-mockup {

  position: relative;

  flex: 1;

  display: flex;

  justify-content: center;

}



/* .blue-bg {

  position: absolute;

  top: 20%;

  right: 10%;

  width: 300px;

  height: 300px;

  background: #d8f0ff;

  border-radius: 50px;

  transform: rotate(15deg);

  z-index: 1;

} */



.mockup-img {

  width: 520px;

  max-width: 100%;

  z-index: 2;

}

.hero-actions a svg{width: 26px;}

.callout a svg{width: 26px;}



/*-------footer Area-------*/

.footer_section{ display: inline-block; width: 100%;}

.footer_bg{ background: #F3F4F6; padding-bottom: 0px;}

.footer_mainsection{  padding: 40px 0%;}

.footer_logo{ margin-bottom: 15px;}

.footer_contact h4 {font-size: 12px; font-weight: 700; color: #4B5563;  margin-bottom: 10px; line-height: 1.5;}

.footer_contact p {font-size: 14px; font-weight: 400; color: #4B5563;  margin-bottom: 10px;}

.footer_contact p a {font-size: 14px; font-weight: 600; color: #4B5563;  }

.footer_contact h5 {font-size: 14px; font-weight: 500; color: #4B5563;  margin-bottom: 10px; margin-top: 20px;}

.follow_us {display: flex; gap: 15px;}

.follow_us a{}

.follow_us a:hover img{ transform: scale(1.05) rotate(2deg);filter: brightness(1.1) contrast(1.1);   box-shadow: 0 5px 15px rgba(0,0,0,0.3);transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}

.footer_about h4 {font-size: 16px; font-weight: 700; color: #239F8E;  margin-bottom: 10px;}

.footer_about ul{ list-style: none; padding: 0;}

.footer_about li{}

.footer_about li a{ font-size: 14px; font-weight: 400; color: #4B5563; margin-bottom: 12px; display: block;transition: all 0.3s ease-in-out;}

.footer_about li a:hover{color: #239F8E; padding-left: 2px;}



.footer_quicklink h4 {font-size: 16px; font-weight: 700; color: #239F8E;  margin-bottom: 10px;}

.footer_quicklink ul{ list-style: none; padding: 0;}

.footer_quicklink li{}

.footer_quicklink li a{ font-size: 12px; font-weight: 400; color: #4B5563; margin-bottom: 12px; display: block;transition: all 0.3s ease-in-out;}

.footer_quicklink li a:hover{color: #239F8E;}

.boder_lefq { padding-left: 15px; border-left: solid 1px #d4d0d0;}

.partner li a{ color: #00379C; margin-bottom: 12px; display: block;transition: all 0.3s ease-in-out; border: solid 1px #00379C; border-radius: 20px; padding: 5px 10px;text-align: center;}





.footer_soluction h4 {font-size: 16px; font-weight: 700; color: #239F8E;  margin-bottom: 10px;}

.footer_soluction ul{ list-style: none; padding: 0;}

.footer_soluction li{}

.footer_soluction li a{ font-size: 14px; font-weight: 400; color: #4B5563; margin-bottom: 12px; display: block;transition: all 0.3s ease-in-out;}

.footer_soluction li a:hover{color: #239F8E;padding-left: 2px;}

.footer_soluction li a span{ display:block;}



.footer_community h4 {font-size: 16px; font-weight: 700; color: #239F8E;  margin-bottom: 10px;}

.footer_community ul{ list-style: none; padding: 0;}

.footer_community li{}

.footer_community li a{ font-size: 14px; font-weight: 400; color: #4B5563; margin-bottom: 12px; display: block;transition: all 0.3s ease-in-out;}

.footer_community li a:hover{color: #239F8E;}

.footer_community li a span{font-size: 11px; font-weight: 500; background: #E2FFFB; color: #239F8E; border: solid 1px #239F8E;  border-radius: 15px;  padding: 1px 8px;

    display: inline-flex; align-items: center;justify-content: center;}

.lang_but{ text-align: center;margin-bottom: 45px;}

.lang_but img{ width: auto; display: inline-block;}



.copy_main{ background: #0B1E48; padding: 16px 0; }

.copy_mainse{ display: flex; justify-content: space-between;}

.copy_left{display: flex; gap: 20px;}

.copy_left p{ font-size: 12px; font-weight: 400; color: #fff;  margin-bottom:0px;}

.copy_right{ gap: 15px; display: flex;}

.copy_right a{font-size: 12px; font-weight: 400; color: #fff; }

.copy_right a:hover{color: #239F8E;}

.latest_but{max-width: 150px;text-align: left;}

.apply_btn{max-width: 110px;text-align: left;}

/*.apply_btnew{max-width: 140px;text-align: left;}*/



/*-------Testimonial Sec------*/





/*-------Request Form Area----------*/



/*-----Srory Area--------*/



.myscroll{ position:absolute; bottom: 128px; right: -50px;}

    .spin-1 {

            animation: spin1 6s linear infinite;

        }



        .spin-2 {

            animation: spin2 3s ease-in-out infinite;

        }



        .spin-3 {

            animation: spin3 1.5s linear infinite;

        }



        .spin-4 {

            animation: spin4 2.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;

        }



        @keyframes rotate {

            from {

                transform: translate(-50%, -50%) rotate(0deg);

            }

            to {

                transform: translate(-50%, -50%) rotate(360deg);

            }

        }



        @keyframes pulse {

            from {

                transform: translate(-50%, -50%) scale(1);

            }

            to {

                transform: translate(-50%, -50%) scale(1.2);

            }

        }



        @keyframes orbit {

            from {

                transform: rotate(0deg) translateX(125px) rotate(0deg);

            }

            to {

                transform: rotate(360deg) translateX(125px) rotate(-360deg);

            }

        }



        @keyframes spin1 {

            from {

                transform: rotate(0deg);

            }

            to {

                transform: rotate(360deg);

            }

        }



        @keyframes spin2 {

            0%, 100% {

                transform: rotate(0deg);

            }

            50% {

                transform: rotate(180deg);

            }

        }

 



    /*========Scroll Top======*/



    .scrollToTop {

        width: 34px;

        height: 34px;

        border-radius: 25px;

        text-align: center;

        font-weight: bold;

        background: #fff;

        text-decoration: none;

        position: fixed;

        bottom: 20px;

        right: 0;

        z-index: 33;

        display: none;

    }





    /* Animation 1: Bounce */

        .animation-bounce .soluction_listmain:hover .soluction_listleft {

            animation: bounce 0.8s ease;

        }

        

        @keyframes bounce {

            0%, 20%, 60%, 100% {

                transform: translateY(0);

            }

            40% {

                transform: translateY(-15px);

            }

            80% {

                transform: translateY(-7px);

            }

        }

        

        /* Animation 2: Pulse */

        .animation-pulse .soluction_listmain:hover .soluction_listleft {

            animation: pulse 1s infinite;

        }

        

        @keyframes pulse {

            0% {

                transform: scale(1);

            }

            50% {

                transform: scale(1.1);

            }

            100% {

                transform: scale(1);

            }

        }

        

        /* Animation 3: Rotate */

        .animation-rotate .soluction_listmain:hover .soluction_listleft {

            animation: rotate 0.8s ease;

        }

        

        @keyframes rotate {

            0% {

                transform: rotate(0);

            }

            100% {

                transform: rotate(360deg);

            }

        }

        

        /* Animation 4: Color Change */

        .animation-color .soluction_listmain:hover .soluction_listleft {

            background: rgba(255, 255, 255, 0.2);

        }

        

        .animation-color .soluction_listmain:hover .soluction_listleft img {

            filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(180deg);

        }

        

        /* Animation 5: Shake */

        .animation-shake .soluction_listmain:hover .soluction_listleft {

            animation: shake 0.5s ease;

        }

        

        @keyframes shake {

            0%, 100% {

                transform: translateX(0);

            }

            20%, 60% {

                transform: translateX(-5px);

            }

            40%, 80% {

                transform: translateX(5px);

            }

        }

        

        /* Animation 6: Glow */

       .animation-glow .soluction_listmain:hover .soluction_listleft img {

    filter: drop-shadow(0 5px 15px rgba(28, 116, 202, 0.5));

}



        

        /* Animation 7: Slide Up */

        .animation-slide .soluction_listmain:hover .soluction_listleft img {

            transform: translateY(-10px);

        }

        

        /* Animation 8: Flip */

        .animation-flip .soluction_listmain:hover .soluction_listleft {

            animation: flip 0.8s ease;

        }

        

        @keyframes flip {

            0% {

                transform: perspective(400px) rotateY(0);

            }

            50% {

                transform: perspective(400px) rotateY(180deg);

            }

            100% {

                transform: perspective(400px) rotateY(360deg);

            }

        }

        

        .footer_logo img {

    width: 250px;


}

.lang_but {

    justify-content: normal !important;

}

/*Header Cta Button Start */

.get_in_touch_btn {

    position: fixed;

    left:-9.5%;

    top: 50%;

    transform: translateY(-50%) rotate(-90deg);

    background: #242424;

    color: #fff;

    padding: 8px 48px;

    font-weight: 700;

    font-size:28px;

    letter-spacing: 1px;

    text-decoration: none;

    z-index: 50;

    border-radius: 0px;

    display: inline-block;

    font-family: 'Inter', sans-serif;

}

.get_in_touch_btn:hover{ background: #00459E;}



/*Header Cta Button End*/



/*New Css Starts*/

.cb-scrolly-section {

    background-color: #00459E;

    font-family: 'Inter', sans-serif;

    position: relative;

    width: 100%;

}



/* --- THE TRACK & STICKY LOGIC --- */

.cb-scroll-track {

    width: 100%;

    position: relative;

    /* Height is inline in HTML */

}



.cb-sticky-viewport {

    position: -webkit-sticky;

    position: sticky;

    top: 40px;

    height: 100vh; /* Full viewport height */

    width: 100%;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



/* --- TITLE --- */

.cb-main-title {

    position: inherit;

    top: -78px;

    right: -117px;

    font-size: 64px;

    color: #FCC020;

    font-weight: 800;

    z-index: 999;

    line-height: 1;

    margin: 0;

}



/* --- LAYOUT WRAPPER --- */

.cb-content-wrapper {

    display: flex;

    height: 100%;

    align-items: center;

    position: relative;

}



/* --- IMAGE LAYERS --- */

/*.cb-images-container {*/

/*    position: relative;*/

/*    overflow: hidden;*/

    /* Desktop Default */

/*    width: 60%; */

/*    height: 70vh;*/

/*}*/



/*.cb-img-layer {*/

/*    position: absolute;*/

/*    top: 0;*/

/*    left: 0;*/

/*    width: 100%;*/

/*    height: 100%;*/

/*    opacity: 0;*/

/*    transform: scale(1.1);*/

/*    transition: opacity 0.6s ease, transform 0.8s ease;*/

/*    z-index: 1;*/

/*}*/



/*.cb-img-layer img {*/

/*    width: 100%;*/

/*    height: 100%;*/

/*    object-fit: cover;*/

/*    border-radius: 20px;*/

/*    overflow: clip;*/

/*}*/



/*.cb-img-layer.active {*/

/*    opacity: 1;*/

/*    transform: scale(1);*/

/*    z-index: 2;*/

/*    overflow: clip;*/

    /*transition: all 20000ms linear;*/

/*    transform: scale(1.2);*/

/*    transform-origin: right;*/

/*}*/



/* --- IMAGE LAYERS --- */

.cb-images-container {

    /* ... existing styles ... */

    position: relative;

    overflow: hidden;

    /* Desktop Default */

    width: 60%; 

    height: 70vh;

}



.cb-img-layer {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    /* Image starts zoomed slightly in, will be scaled up by JS */

    transform: scale(1.1); 

    transition: opacity 0.6s ease, transform 0.8s ease; 

    z-index: 1;

    border-radius: 20px;

    overflow: hidden; /* Ensure image zoom stays within the container */

}



.cb-img-layer img {

    /* Set transition for the smooth, slow zoom effect */

    transition: transform 20000ms linear; 

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 20px;

    overflow: clip;

    /* Image starts zoomed in relative to its container to create the pan/zoom effect */

    transform: scale(1.2); 

    transform-origin: right; /* This determines the direction of the "pan" effect */

}



.cb-img-layer.active {

    opacity: 1;

    /* Reset transform here to its initial state before JS takes over */

    transform: scale(1);

    z-index: 2;

    overflow: clip;

}

/*.cb-img-layer img.active {*/

/*    transform: scale(1.2);*/

/*    transform-origin: left;*/

    /*transform-origin: right;*/

/*        transition: all 20000ms linear;*/

/*}*/



/* --- CARD CONTAINER --- */

.cb-card-container {

    /* Desktop Default */

    width: 40%;

    position: relative;

    z-index: 20;

    display: flex;

    align-items: center;

}



.cb-white-card {

    background: white;

    box-shadow: 0 30px 60px rgba(0,0,0,0.15);

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    max-width: 740px;

    min-height: 480px;

    margin-left: -100px; /* Overlap */

    min-height: 400px;

}



.cb-card-header {

    font-weight: 800;

    color: #242424;

    line-height: 1.2;

    /* Desktop Default */

    font-size: 40px;

    margin-bottom: 70px;

    padding: 0px 60px 0px 100px;

}



/* --- TEXT LAYERS --- */

.cb-text-stack {

    position: relative;

    /* Desktop Default */

    min-height: 150px; 

}



.cb-text-layer {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    opacity: 0;

    transform: translateY(20px);

    transition: all 0.5s ease;

    pointer-events: none;

}



.cb-text-layer.active {

    opacity: 1;

    transform: translateY(0);

    pointer-events: all;

    transition: all 1500ms 0.5s cubic-bezier(.48, .05, .21, .98);

}



/* --- TEXT DETAILS --- */

.cb-meta-row { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }

.cb-num { font-weight: 800; color: #00459E; font-size: 40px;margin: 0 12px 0 32px; }

.cb-item-title { font-weight: 700; color: #242424; margin: 0; font-size: 40px; }

.cb-body-text{ padding: 0px 100px 0px 100px;}

.cb-body-text p { color: #555; line-height: 1.6; margin: 0; font-size: 16px; }



/* --- BADGE --- */

.cb-badge { position: fixed; bottom: 60px; right:80px; z-index: 50; }

.cb-badge img{opacity: 9!important;}

.spin { width: 100%; animation: spin 10s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }



/* =========================================

   MOBILE & TABLET ADJUSTMENTS (Max-width: 991px)

   ========================================= */

   @media (max-width:1350px) {

   .get_in_touch_btn {

  

    left: -6.5%;

    top: 57%;

    padding: 8px 26px;

    font-size: 18px;

}

}

@media (max-width: 991px) {

    

    .cb-main-title {

        font-size: 36px;

        top: 20px;

        width: 100%;

        text-align: center;

        right: 0;

    }



    .cb-content-wrapper {

        flex-direction: column; /* Stack vertically */

        justify-content: center;

        padding-top: 60px; /* Space for title */

    }



    /* Resize Images for Mobile */

    .cb-images-container {

        width: 100%;

        height: 40vh; /* Take top 40% of screen */

        border-radius: 12px 12px 0 0;

    }



    /* Resize Card for Mobile */

    .cb-card-container {

        width: 100%;

        margin-top: -30px; /* Slight overlap upwards */

        padding: 0 15px; /* Side padding */

    }



    .cb-white-card {

        margin-left: 0; /* Remove horizontal overlap */

        width: 100%;

        padding: 30px 25px;

        min-height: 250px;

        border-radius: 12px;

    }



    .cb-card-header {

        font-size: 22px;

        margin-bottom: 20px;

    }



    .cb-num { font-size: 32px; }

    .cb-item-title { font-size: 20px; }

    .cb-body-text p { font-size: 14px; }

    .cb-badge { width: 60px; bottom: 10px; right: 10px; }

    .spin { width: 60px; }

        .get_in_touch_btn {

        left: -7.5%;

        top: 67%;

        padding: 8px 15px;

        font-size: 18px;

    }

}



















/*New Css Ends*/





.get_in_touch_btn {

    animation: leftSideIn 1s ease forwards;

        opacity: 2 !important;

}



.faq {
    display: grid;
    gap: .8rem;
    margin: 10px 0;
}



















:root {
  --menu-text:     #111827;   /* heading ka dark colour */
  --menu-muted:    #6B7280;   /* description ka grey */
  --menu-line:     #E6E8EC;   /* divider line */
  --menu-active:   #F5F6F8;   /* active tab ka halka background */
  --menu-accent:   #0A3D91;   /* hover par AVA blue */
}

/* ---------------------------------------------------------
   PANEL
   --------------------------------------------------------- */

#menuContent {
  background: #FFFFFF !important;
  /*border-radius: 0 0 12px 12px;*/
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
  overflow: hidden;
}

#menuContent > .d-flex {
  align-items: stretch !important;
}

/* ---------------------------------------------------------
   BAAYI TARAF KE TABS
   Solutions / Quick Links / About / Partners / Community
   --------------------------------------------------------- */

#menuContent .my_navepil {
  flex: 0 0 260px !important;
  width: 260px !important;
  min-width: 260px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  border-right: 1px solid var(--menu-line) !important;
}

#menuContent .my_navepil .nav-link {
  width: 100% !important;
  display: block !important;
  text-align: left !important;
  padding: 20px 24px !important;
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--menu-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--menu-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease;
}

#menuContent .my_navepil .nav-link:last-child {
  border-bottom: 0 !important;
}

#menuContent .my_navepil .nav-link:hover {
  background: var(--menu-active) !important;
  color: var(--menu-accent) !important;
}

#menuContent .my_navepil .nav-link.active {
  background: var(--menu-active) !important;
  color: var(--menu-text) !important;
}

/* ---------------------------------------------------------
   DAAYI TARAF KA CONTENT — do column
   --------------------------------------------------------- */

#menuContent .tab-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 28px 32px !important;
  background: #FFFFFF !important;
}

#menuContent .tab-pane {
  padding: 0 !important;
}

#menuContent .smart_homesoluction ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 26px 48px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#menuContent .smart_homesoluction li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#menuContent .smart_homesoluction li a {
  display: block !important;
  margin: 0 0 6px 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--menu-text) !important;
  text-decoration: none !important;
}

#menuContent .smart_homesoluction li a:hover {
  color: var(--menu-accent) !important;
  text-decoration: none !important;
}

#menuContent .smart_homesoluction li a span {
  font-weight: 600 !important;
  color: inherit !important;
}

#menuContent .smart_homesoluction li p {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: var(--menu-muted) !important;
}

/* ---------------------------------------------------------
   TABLET — ek column
   --------------------------------------------------------- */

@media (max-width: 1199px) {
  #menuContent .my_navepil {
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
  }

  #menuContent .my_navepil .nav-link {
    padding: 16px 18px !important;
    font-size: 16px !important;
  }

  #menuContent .tab-content { padding: 22px 24px !important; }

  #menuContent .smart_homesoluction ul {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ---------------------------------------------------------
   PHONE — tabs upar, content neeche
   --------------------------------------------------------- */

@media (max-width: 767px) {
  #menuContent > .d-flex {
    flex-direction: column !important;
  }

  #menuContent .my_navepil {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--menu-line) !important;
  }

  #menuContent .my_navepil .nav-link {
    width: auto !important;
    white-space: nowrap !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    border-bottom: 0 !important;
  }

  #menuContent .tab-content { padding: 16px !important; }

  #menuContent .smart_homesoluction li a { font-size: 16px !important; }
  #menuContent .smart_homesoluction li p { font-size: 14px !important; }
}




@media (max-width: 767px) {
    #customer-support .grid{
            display: block;
    

    }
    
   #customer-support .grid .card {
    background: 
color-mix(in srgb, var(--surface) 96%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--s-6);
    margin-bottom: 15px;
}
   #customer-support .callout svg{
    font-size: 10px;
    height: 20px;
    width: 35px;
}
}
    
    
    i.fa-brands.fa-square-facebook {
    width: auto;
}
    
    
    
    .form-actions .apply_btnew svg
 {
    width: 26px;
}