:root{

--primary:#0D6EFD;

--dark:#0F172A;

--orange:#FF6B00;

--white:#fff;

--light:#f8f9fa;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

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

font-size:16px;

color:#444;

line-height:1.7;

overflow-x:hidden;

}

h1,h2,h3,h4,h5{

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

font-weight:700;

color:#111;

}

a{

text-decoration:none;

transition:.3s;

}

img{

max-width:100%;

}

.section{

padding:80px 0;

}

.btn-primary{

background:var(--primary);

border:none;

padding:14px 28px;

border-radius:50px;

font-weight:600;

}

.btn-primary:hover{

background:#0057d8;

}

.container{

max-width:1200px;

}

/*=========================
HEADER
==========================*/

.main-header{

position:sticky;

top:0;

left:0;

z-index:9999;

background:#fff;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.navbar{

padding:18px 0;

}

.logo{

height:58px;

}

.nav-link{

font-size:16px;

font-weight:600;

color:#222;

margin:0 12px;

}

.nav-link:hover{

color:#0D6EFD;

}

.dropdown-menu{

border:none;

border-radius:12px;

box-shadow:0 10px 35px rgba(0,0,0,.08);

padding:10px 0;

}

.dropdown-item{

padding:10px 20px;

font-size:15px;

}

.dropdown-item:hover{

background:#0D6EFD;

color:#fff;

}

.call-btn{

padding:10px 18px;

border:1px solid #0D6EFD;

border-radius:40px;

color:#0D6EFD;

font-weight:600;

margin-right:15px;

}

.call-btn:hover{

background:#0D6EFD;

color:#fff;

}

.quote-btn{

background:#0D6EFD;

padding:11px 25px;

border-radius:40px;

color:#fff;

font-weight:600;

}

.quote-btn:hover{

background:#0a58ca;

color:#fff;

}

.navbar-toggler{

border:none;

font-size:28px;

}

.navbar-toggler:focus{

box-shadow:none;

}

/*==================================
HERO
==================================*/





.hero-btn .btn{

padding:15px 34px;

border-radius:50px;

margin-right:15px;

font-weight:600;

}

.hero-image{

text-align:center;

}



.hero-counter h2{

color:#0D6EFD;

font-size:40px;

font-weight:700;

margin-bottom:5px;

}

.hero-counter p{

margin:0;

font-size:15px;

color:#666;

}






.form-card{

background:#fff;

padding:45px;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.15);

}


.form-control,
.form-select{
    height:56px;
    border-radius:10px;
    font-size:16px;
}

textarea.form-control{
    height:120px;
}

.form-card .btn{
    height:58px;
    font-size:18px;
    font-weight:700;
    border-radius:10px;
}

.trust-section{
    background:#fff;
    margin-top:-50px;
    position:relative;
    z-index:5;
}

.trust-box{
    background:#fff;
    border-radius:15px;
    padding:30px 20px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
    height:100%;
}

.trust-box:hover{
    transform:translateY(-8px);
}

.trust-box i{
    font-size:42px;
    color:#0d6efd;
    margin-bottom:15px;
}

.trust-box h3{
    font-size:34px;
    font-weight:700;
    margin-bottom:5px;
}

.trust-box p{
    margin:0;
    color:#666;
    font-size:15px;
}

.trust-box span{
    color:#fbbc04;
    font-size:20px;
    letter-spacing:2px;
}

@media(max-width:768px){

.trust-section{
    margin-top:30px;
}

.trust-box{
    margin-bottom:20px;
}

}

.rating-stars{
    color:#FFC107;
    font-size:22px;
    letter-spacing:3px;
    display:block;
}


.hero-section{
    position:relative;
    display:flex;
    align-items:center;
    min-height:720px;
    padding:120px 0;

   background:url("../img/hero-bg.webp") no-repeat right center;
   background-size:cover;
    overflow:hidden;
}

.hero-section:before{

content:"";

position:absolute;

left:0;
top:0;

width:100%;
height:100%;

background:linear-gradient(
90deg,
rgba(6,22,52,.90) 0%,
rgba(6,22,52,.85) 45%,
rgba(6,22,52,.55) 100%
);

z-index:1;

}

.hero-section .container{

position:relative;

z-index:2;

}



.hero-content h1{

font-size:56px;
line-height:1.15;
font-weight:800;
color:#fff;

}

.hero-content p{

font-size:21px;
line-height:1.8;
color:#ddd;

}

.hero-tag{

display:inline-block;

padding:10px 20px;

background:#0d6efd;

color:#fff;

border-radius:40px;

font-weight:600;

margin-bottom:25px;

}

.hero-btn{

display:flex;

gap:15px;

margin-bottom:45px;

}

.hero-counter{

display:flex;

gap:40px;

}

.hero-counter h2{

font-size:42px;

color:#fff;

font-weight:800;

margin-bottom:5px;

}

.hero-counter p{

margin:0;

color:#ddd;

font-size:16px;

}



.form-card h3{

font-size:34px;

font-weight:700;

margin-bottom:10px;

}

.form-card p{

color:#666;

margin-bottom:25px;

}


textarea.form-control{

height:120px;

resize:none;

}

/*==================================
ABOUT SECTION
==================================*/

.about-section{
    padding:100px 0;
    background:#EEF6FF;
}

.section-tag{

display:inline-block;

background:#EAF3FF;

color:#0D6EFD;

padding:8px 18px;

border-radius:30px;

font-weight:600;

margin-bottom:20px;

font-size:14px;

letter-spacing:1px;

}

.about-content h2{

font-size:42px;

font-weight:700;

margin-bottom:20px;

color:#111827;

}

.about-content p{

font-size:17px;

color:#666;

line-height:1.9;

margin-bottom:25px;

}

.about-section .row{
    align-items:center;
}

.about-image{
    height:100%;
}

.about-image img{
    width:100%;
    height:540px;
    object-fit:cover;
    object-position:center;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.about-image{
    position:sticky;
    top:100px;
}


.about-list{

list-style:none;

padding:0;

margin:0;

}

.about-list li{

margin-bottom:16px;

font-size:17px;

font-weight:500;

color:#444;

}

.about-list i{

color:#0D6EFD;

margin-right:10px;

}

.about-btn .btn{

padding:14px 30px;

border-radius:50px;

font-weight:600;

}

.about-btn .btn-outline-primary{

border:2px solid #0D6EFD;

}

.about-btn .btn-outline-primary:hover{

background:#0D6EFD;

color:#fff;

}


/*==================================
OUR SERVICES
==================================*/

.services-section{
    padding:100px 0;
    background:#ffffff;
}

.section-tag{
    display:inline-block;
    background:#EAF3FF;
    color:#0D6EFD;
    padding:10px 22px;
    border-radius:50px;
    font-size:15px;
    font-weight:600;
    letter-spacing:.5px;
    margin-bottom:18px;
}

.section-title{
    font-size:46px;
    font-weight:800;
    color:#111827;
    margin-bottom:18px;
}

.section-text{
    font-size:18px;
    color:#666;
    line-height:1.8;
   
    margin:auto;
}

.service-box{

    background:#fff;
    border-radius:20px;
    padding:35px 30px;
    text-align:left;

    border:1px solid #eef2f7;

    box-shadow:0 12px 35px rgba(0,0,0,.06);

    transition:all .35s ease;

    height:100%;

    position:relative;

    overflow:hidden;

}

.service-box:before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:0;

    background:#0D6EFD;

    transition:.35s;

}

.service-box:hover{

    transform:translateY(-12px);

    box-shadow:0 22px 60px rgba(13,110,253,.15);

    border-color:#0D6EFD;

}

.service-box:hover:before{

    height:100%;

}

.service-icon{

    width:75px;

    height:75px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#0D6EFD,#4F9BFF);

    color:#fff;

    font-size:32px;

    margin-bottom:25px;

    transition:.35s;

}

.service-box:hover .service-icon{

    transform:rotate(-8deg) scale(1.08);

}

.service-box h3{

    font-size:24px;

    font-weight:700;

    margin-bottom:15px;

    color:#111;

    line-height:1.35;

}

.service-box p{

    font-size:16px;

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.service-box a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#0D6EFD;

    font-weight:700;

    font-size:16px;

    transition:.3s;

}

.service-box a i{

    transition:.3s;

}

.service-box:hover a{

    color:#0056d6;

}

.service-box:hover a i{

    transform:translateX(6px);

}

.services-section .btn{

    padding:15px 40px;

    border-radius:50px;

    font-size:17px;

    font-weight:700;

}


/*=========================
Responsive
==========================*/

@media(max-width:991px){

.section-title{

    font-size:38px;

}

.service-box{

    padding:30px 25px;

}

}

@media(max-width:767px){

.services-section{

    padding:70px 0;

}

.section-title{

    font-size:32px;

}

.section-text{

    font-size:16px;

}

.service-box{

    text-align:center;

}

.service-icon{

    margin:0 auto 25px;

}

}

/*==================================
WHY CHOOSE US
==================================*/

.why-section{
    padding:100px 0;
    background:#EEF6FF;
}

.why-image{
    max-width:90%;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.why-item{
    display:flex;
    align-items:center;
    margin-bottom:22px;
    font-size:18px;
    font-weight:600;
}

.why-item i{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#0D6EFD;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:15px;
    font-size:18px;
}

.why-item span{
    color:#222;
}

.why-section .btn{
    padding:16px 38px;
    border-radius:50px;
    font-weight:700;
}

@media(max-width:991px){

.why-image{
    margin-top:50px;
}

}

@media(max-width:767px){

.why-item{
    font-size:16px;
}

}


.portfolio-section{
    padding:100px 0;
    background:#ffffff;
}

.portfolio-box{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.4s;
}

.portfolio-box:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(13,110,253,.18);
}

.portfolio-box img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.4s;
}

.portfolio-box:hover img{
    transform:scale(1.08);
}

.portfolio-content{
    padding:25px;
}

.portfolio-content span{
    color:#0D6EFD;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
}

.portfolio-content h4{
    margin:12px 0 18px;
    font-size:24px;
    font-weight:700;
}

.portfolio-content a{
    color:#0D6EFD;
    font-weight:700;
}

.portfolio-content a i{
    margin-left:6px;
    transition:.3s;
}

.portfolio-box:hover a i{
    transform:translateX(6px);
}


/*==================================
OUR PROCESS
==================================*/

.process-section{
    padding:100px 0;
    background:#EEF6FF;
}

.process-box{

    position:relative;

    background:#fff;

    padding:40px 30px;

    border-radius:20px;

    text-align:center;

    border:1px solid #edf2f7;

    box-shadow:0 12px 35px rgba(0,0,0,.06);

    transition:.35s;

    overflow:hidden;

    height:100%;

}

.process-box:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(13,110,253,.15);

    border-color:#0D6EFD;

}

.process-number{

    position:absolute;

    top:20px;

    right:20px;

    font-size:48px;

    font-weight:800;

    color:#0D6EFD;

    opacity:.08;

    line-height:1;

}

.process-icon{

    width:85px;

    height:85px;

    margin:0 auto 25px;

    border-radius:50%;

    background:linear-gradient(135deg,#0D6EFD,#4F9BFF);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    transition:.35s;

}

.process-box:hover .process-icon{

    transform:rotate(-10deg) scale(1.08);

}

.process-box h4{

    font-size:24px;

    font-weight:700;

    margin-bottom:18px;

    color:#111827;

}

.process-box p{

    font-size:16px;

    color:#666;

    line-height:1.8;

    margin:0;

}

.process-box::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:0;

    background:#0D6EFD;

    transition:.35s;

}

.process-box:hover::before{

    height:100%;

}

/*=========================
Responsive
==========================*/

@media(max-width:991px){

.process-section{

    padding:80px 0;

}

.process-box{

    margin-bottom:25px;

}

}

@media(max-width:767px){

.process-box{

    padding:35px 25px;

}

.process-icon{

    width:70px;

    height:70px;

    font-size:28px;

}

.process-box h4{

    font-size:21px;

}

.process-number{

    font-size:38px;

}

}


/*==================================
FAQ SECTION
==================================*/

.faq-section{
    padding:100px 0;
    background:#EEF6FF;
}

.faq-image img{
    width:100%;
    border-radius:20px;
    box-shadow:0 20px 45px rgba(0,0,0,.10);
}

.accordion-item{
    border:none;
    margin-bottom:18px;
    border-radius:15px !important;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.accordion-button{
    background:#fff;
    font-size:18px;
    font-weight:700;
    color:#111;
    padding:22px 25px;
    box-shadow:none !important;
}

.accordion-button:not(.collapsed){
    background:#0D6EFD;
    color:#fff;
}

.accordion-button::after{
    filter:brightness(0);
}

.accordion-button:not(.collapsed)::after{
    filter:brightness(100);
}

.accordion-body{
    padding:22px 25px;
    font-size:16px;
    line-height:1.9;
    color:#666;
    background:#fff;
}

@media(max-width:991px){

.faq-section{
    padding:80px 0;
}

.faq-image{
    margin-bottom:40px;
}

}

@media(max-width:767px){

.accordion-button{
    font-size:16px;
    padding:18px;
}

.accordion-body{
    padding:18px;
}

}

/*==================================
PREMIUM CTA
==================================*/

.cta-section{
    position:relative;
    padding:100px 0;
    overflow:hidden;
    background:linear-gradient(135deg,#0B5ED7 0%,#0A3FA5 55%,#071D63 100%);
}

.cta-section:before{
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.10),transparent 35%),
    radial-gradient(circle at 80% 80%,rgba(255,255,255,.08),transparent 35%);
}

.cta-section .container{
    position:relative;
    z-index:2;
}

/* Floating Shapes */

.cta-shape{
    position:absolute;
    border-radius:50%;
    opacity:.15;
    animation:floatShape 8s ease-in-out infinite;
}

.shape1{
    width:170px;
    height:170px;
    background:#fff;
    left:-60px;
    top:70px;
}

.shape2{
    width:120px;
    height:120px;
    background:#00D4FF;
    right:8%;
    top:80px;
    animation-delay:2s;
}

.shape3{
    width:70px;
    height:70px;
    background:#FFC107;
    left:45%;
    bottom:50px;
    animation-delay:4s;
}

@keyframes floatShape{

0%,100%{
    transform:translateY(0);
}

50%{
    transform:translateY(-25px);
}

}

/* Tag */

.cta-tag{

    display:inline-block;
    padding:10px 22px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(12px);
    color:#fff;
    border-radius:50px;
    font-weight:600;
    font-size:14px;
    margin-bottom:25px;
    letter-spacing:.5px;

}

/* Heading */

.cta-section h2{

    font-size:56px;
    font-weight:800;
    line-height:1.2;
    color:#fff;
    margin-bottom:25px;

}

.cta-section h2 span{

    color:#FFD54A;

}

.cta-section p{

    font-size:19px;
    line-height:1.9;
    color:rgba(255,255,255,.88);
    max-width:620px;
    margin-bottom:40px;

}

/* Buttons */

.cta-btns{

    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:35px;

}

.cta-call,
.cta-quote{

    display:flex;
    align-items:center;
    gap:18px;
    padding:18px 30px;
    border-radius:18px;
    text-decoration:none;
    transition:.35s;

}

.cta-call{

    background:#FFC107;
    color:#111;
    box-shadow:0 18px 40px rgba(255,193,7,.35);

}

.cta-call:hover{

    transform:translateY(-8px);
    color:#111;

}

.cta-quote{

    background:rgba(255,255,255,.15);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.20);
    color:#fff;

}

.cta-quote:hover{

    background:#fff;
    color:#0D6EFD;
    transform:translateY(-8px);

}

.cta-call i,
.cta-quote i{

    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;

}

.cta-call i{

    background:#fff;
    color:#F39C12;

}

.cta-quote i{

    background:rgba(255,255,255,.20);

}

.cta-call small,
.cta-quote small{

    display:block;
    font-size:13px;
    opacity:.9;

}

.cta-call strong,
.cta-quote strong{

    display:block;
    font-size:21px;
    font-weight:700;

}

/* Features */

.cta-features{

    display:flex;
    flex-wrap:wrap;
    gap:25px;

}

.cta-features div{

    color:#fff;
    font-weight:600;
    font-size:16px;

}

.cta-features i{

    color:#FFD54A;
    margin-right:8px;

}

/* Image */

.cta-image{

    max-width:100%;
    animation:floatImage 5s ease-in-out infinite;
    filter:drop-shadow(0 30px 60px rgba(0,0,0,.30));

}

@keyframes floatImage{

0%,100%{

    transform:translateY(0);

}

50%{

    transform:translateY(-18px);

}

}

/* Responsive */

@media(max-width:991px){

.cta-section{

    text-align:center;
    padding:80px 0;

}

.cta-section h2{

    font-size:42px;

}

.cta-btns{

    justify-content:center;

}

.cta-features{

    justify-content:center;

}

.cta-image{

    margin-top:50px;
    max-width:85%;

}

}

@media(max-width:767px){

.cta-section{

    padding:70px 0;

}

.cta-section h2{

    font-size:34px;

}

.cta-section p{

    font-size:16px;

}

.cta-call,
.cta-quote{

    width:100%;
    justify-content:center;

}

.cta-call strong,
.cta-quote strong{

    font-size:18px;

}

.cta-features{

    flex-direction:column;
    gap:15px;

}

.shape1,
.shape2,
.shape3{

    display:none;

}

}

.cta-tag i{
    margin-right:8px;
    color:#FFD54A;
    font-size:15px;
}

/*==================================
TECHNOLOGY SECTION
==================================*/

.technology-section{

    padding:100px 0;

    background:#ffffff;

}

.tech-card{

    background:#fff;

    border-radius:20px;

    padding:35px 20px;

    text-align:center;

    border:1px solid #edf2f7;

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

    transition:.35s;

    height:100%;

}

.tech-card:hover{

    transform:translateY(-10px);

    border-color:#0D6EFD;

    box-shadow:0 20px 50px rgba(13,110,253,.15);

}

.tech-card img{

    width:70px;

    height:70px;

    object-fit:contain;

    margin-bottom:20px;

    transition:.35s;

}

.tech-card:hover img{

    transform:scale(1.12) rotate(5deg);

}

.tech-card h5{

    font-size:20px;

    font-weight:700;

    color:#111827;

    margin:0;

}

/* Responsive */

@media(max-width:991px){

.tech-card{

    padding:30px 20px;

}

}

@media(max-width:767px){

.technology-section{

    padding:80px 0;

}

.tech-card img{

    width:60px;

    height:60px;

}

.tech-card h5{

    font-size:18px;

}

}


/*==================================
INDUSTRY SECTION
==================================*/

.industry-section{

padding:100px 0;

background:#F3F8FF;

}

.industry-card{

background:#fff;

padding:35px 25px;

text-align:center;

border-radius:20px;

border:1px solid #edf2f7;

box-shadow:0 10px 35px rgba(0,0,0,.05);

transition:.35s;

height:100%;

position:relative;

overflow:hidden;

}

.industry-card:hover{

transform:translateY(-10px);

border-color:#0D6EFD;

box-shadow:0 20px 45px rgba(13,110,253,.18);

}

.industry-icon{

width:85px;

height:85px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

background:linear-gradient(135deg,#0D6EFD,#4F9BFF);

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:#fff;

box-shadow:0 15px 35px rgba(13,110,253,.30);

transition:.35s;

}

.industry-card:hover .industry-icon{

transform:rotate(10deg) scale(1.1);

}

.industry-card h4{

font-size:24px;

font-weight:700;

margin-bottom:15px;

color:#111827;

}

.industry-card p{

color:#666;

line-height:1.8;

margin:0;

}

@media(max-width:768px){

.industry-section{

padding:70px 0;

}

.industry-card{

padding:30px 20px;

}

.industry-icon{

width:70px;

height:70px;

font-size:28px;

}

}

/*==================================
CLIENT LOGOS
==================================*/

.clients-section{

    padding:100px 0;

    background:#fff;

}

.logo-slider{

    overflow:hidden;

    position:relative;

    margin-top:20px;

}

.logo-track{

    display:flex;

    align-items:center;

    width:max-content;

    animation:logoScroll 35s linear infinite;

}

.logo-slider:hover .logo-track{

    animation-play-state:paused;

}

.logo-item{

    width:220px;

    height:120px;

    margin:0 18px;

    background:#fff;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #eef2f7;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

    transition:.35s;

}

.logo-item:hover{

    transform:translateY(-8px);

    border-color:#0D6EFD;

    box-shadow:0 20px 45px rgba(13,110,253,.15);

}

.logo-item img{

    max-width:140px;

    max-height:65px;

    object-fit:contain;

    filter:grayscale(100%);

    transition:.35s;

}

.logo-item:hover img{

    filter:none;

    transform:scale(1.08);

}

@keyframes logoScroll{

    0%{

        transform:translateX(0);

    }

    100%{

        transform:translateX(-50%);

    }

}

@media(max-width:768px){

.logo-item{

    width:170px;

    height:90px;

}

.logo-item img{

    max-width:110px;

    max-height:50px;

}

}

/*==============================
BLOG SECTION
==============================*/

.blog-section{

background:#F3F8FF;

}

.blog-card{

background:#fff;

border-radius:20px;

overflow:hidden;

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

transition:.35s;

height:100%;

}

.blog-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.blog-img{

position:relative;

overflow:hidden;

}

.blog-img img{

width:100%;

height:240px;

object-fit:cover;

transition:.5s;

}

.blog-card:hover img{

transform:scale(1.08);

}

.blog-category{

position:absolute;

top:20px;

left:20px;

background:#0d6efd;

color:#fff;

padding:8px 18px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

.blog-content{

padding:30px;

}

.blog-meta{

display:flex;

gap:20px;

margin-bottom:15px;

font-size:14px;

color:#666;

}

.blog-meta i{

color:#0d6efd;

margin-right:5px;

}

.blog-content h3{

font-size:24px;

font-weight:700;

line-height:1.4;

margin-bottom:15px;

}

.blog-content h3 a{

color:#111;

text-decoration:none;

}

.blog-content h3 a:hover{

color:#0d6efd;

}

.blog-content p{

color:#666;

line-height:1.8;

margin-bottom:20px;

}

.read-more{

color:#0d6efd;

font-weight:600;

text-decoration:none;

}

.read-more i{

margin-left:8px;

transition:.3s;

}

.read-more:hover i{

transform:translateX(6px);

}

/*=========================
FOOTER
=========================*/

.footer{
    background:#081b3b;
    color:#fff;
    padding:90px 0 30px;
}

.footer-logo{
    font-size:38px;
    font-weight:700;
    color:#fff;
}

.footer-logo span{
    color:#4da3ff;
}

.footer-about{
    color:#c9d5eb;
    line-height:1.9;
}

.footer h4{
    color:#fff;
    margin-bottom:30px;
}

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

.footer ul li{
    margin-bottom:16px;
}

.footer ul li a{
    color:#c9d5eb;
    text-decoration:none;
    transition:.3s;
}

.footer ul li a:hover{
    color:#fff;
    padding-left:8px;
}

.footer-social{
    display:flex;
    gap:15px;
}

.footer-social a{

    width:52px;
    height:52px;

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

    border-radius:50%;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    color:#fff;

    font-size:20px;

    transition:.35s;

}

.footer-social a:hover{

    background:#0d6efd;

    transform:translateY(-5px);

}

.footer-contact div{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:18px;

}

.footer-contact i{

    color:#4da3ff;

    font-size:20px;

    min-width:22px;

}

.footer-contact a{

    color:#c9d5eb;

}

.footer-contact a:hover{

    color:#fff;

}

.footer hr{

    margin:55px 0 30px;

    border-color:rgba(255,255,255,.1);

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

}

.footer-bottom p{

    margin:0;

    color:#9fb2d2;

}

.footer-bottom a{

    color:#9fb2d2;

    text-decoration:none;

}

.footer-bottom a:hover{

    color:#fff;

}







































































/*=========================================================
ABOUT HERO SECTION
Part 1 : Base Layout + Background + Typography
=========================================================*/

.about-hero{
    position:relative;
    overflow:hidden;
    padding:120px 0 80px;
    background:#06142d;
    background:
        radial-gradient(circle at top left,#0f4fd115 0%,transparent 35%),
        radial-gradient(circle at bottom right,#00d4ff15 0%,transparent 40%),
        linear-gradient(135deg,#06142d 0%,#08254d 50%,#051224 100%);
    color:#fff;
    z-index:1;
}

/* Container */

.about-hero .container{
    position:relative;
    z-index:5;
}

/*=========================================================
Background Decorative Circles
=========================================================*/

.hero-circle{
    position:absolute;
    border-radius:50%;
    filter:blur(3px);
    opacity:.45;
    animation:heroFloat 8s ease-in-out infinite;
}

.hero-circle-1{
    width:420px;
    height:420px;
    top:-180px;
    left:-140px;
    background:#0d6efd20;
}

.hero-circle-2{
    width:320px;
    height:320px;
    right:-80px;
    top:120px;
    background:#00d4ff15;
    animation-delay:2s;
}

.hero-circle-3{
    width:220px;
    height:220px;
    bottom:-80px;
    left:45%;
    background:#ffffff08;
    animation-delay:4s;
}

@keyframes heroFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-25px);
    }

    100%{
        transform:translateY(0px);
    }

}

/*=========================================================
Breadcrumb
=========================================================*/

.hero-breadcrumb{
    margin-bottom:45px;
}

.hero-breadcrumb .breadcrumb{
    margin:0;
    padding:0;
    background:none;
}

.hero-breadcrumb .breadcrumb-item{
    font-size:14px;
    color:#d8e4ff;
}

.hero-breadcrumb .breadcrumb-item a{
    color:#ffffff;
    text-decoration:none;
    transition:.3s;
}

.hero-breadcrumb .breadcrumb-item a:hover{
    color:#00d4ff;
}

.hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before{
    color:#b8c6df;
}

/*=========================================================
Left Content
=========================================================*/

.hero-content{
    max-width:620px;
}

.hero-subtitle{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(15px);

    margin-bottom:25px;

    font-size:15px;

    font-weight:600;

    color:#d8ebff;

}

.hero-subtitle i{

    color:#ffc107;

}

.hero-content h1{

    font-size:58px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:25px;

    letter-spacing:-1px;

    color:#fff;

}

.hero-content p{

    font-size:18px;

    line-height:1.9;

    color:#d6dff2;

    margin-bottom:35px;

}

.hero-content strong{

    color:#00d4ff;

    font-weight:700;

}

/*=========================================================
Buttons Wrapper
=========================================================*/

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:18px;

    margin-bottom:40px;

}

/*=========================================================
Feature List
=========================================================*/

.hero-features{

    display:grid;

    grid-template-columns:repeat(2,minmax(180px,1fr));

    gap:18px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    border-radius:16px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.feature-item:hover{

    transform:translateY(-6px);

    background:rgba(255,255,255,.08);

    border-color:#00d4ff55;

}

.feature-item i{

    font-size:20px;

    color:#22c55e;

}

.feature-item span{

    font-size:15px;

    font-weight:600;

    color:#f4f7fb;

}

/*=========================================================
Spacing
=========================================================*/

.about-hero .row{

    align-items:center;

  
}

/*=========================================================
ABOUT HERO
Part 2 : Hero Image + Floating Cards + Buttons
=========================================================*/

/*==============================
Primary Button
==============================*/

.hero-buttons .btn-primary{

    background:linear-gradient(135deg,#00c6ff,#0072ff);

    border:none;

    color:#fff;

    font-weight:700;

    padding:16px 36px;

    border-radius:60px;

    font-size:16px;

    box-shadow:0 20px 40px rgba(0,114,255,.30);

    transition:.4s;

}

.hero-buttons .btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:0 30px 50px rgba(0,114,255,.45);

    background:linear-gradient(135deg,#009dff,#0059ff);

}

/*==============================
Outline Button
==============================*/

.hero-buttons .btn-outline-light{

    padding:16px 34px;

    border-radius:60px;

    border:2px solid rgba(255,255,255,.25);

    color:#fff;

    font-weight:700;

    transition:.4s;

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(10px);

}

.hero-buttons .btn-outline-light:hover{

    background:#fff;

    color:#08254d;

    transform:translateY(-6px);

}

/*=========================================================
Hero Image Wrapper
=========================================================*/

.hero-image-wrapper{

    position:relative;

    max-width:560px;

    margin:auto;

}

/* Glow Behind Image */

.hero-image-wrapper::before{

    content:"";

    position:absolute;

    width:430px;

    height:430px;

    background:radial-gradient(circle,#00d4ff40 0%,transparent 70%);

    left:50%;

    top:50%;

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

    z-index:0;

    animation:glowPulse 5s infinite ease-in-out;

}

/*==============================
Main Image
==============================*/

.hero-image{

    position:relative;

    z-index:5;

    overflow:hidden;

    border-radius:30px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(12px);

    padding:18px;

    box-shadow:0 30px 70px rgba(0,0,0,.35);

}

.hero-image img{

    width:100%;

    border-radius:20px;

    display:block;

    transition:.5s;

}

.hero-image:hover img{

    transform:scale(1.04);

}

/*=========================================================
Floating Cards
=========================================================*/

.floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    min-width:220px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(18px);

    padding:18px 20px;

    border-radius:20px;

    box-shadow:0 20px 40px rgba(0,0,0,.25);

    z-index:20;

    transition:.4s;

}

.floating-card:hover{

    transform:translateY(-8px);

}

.floating-card .icon{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#00c6ff,#0072ff);

    color:#fff;

    font-size:22px;

    flex-shrink:0;

}

.floating-card h4{

    margin:0;

    font-size:26px;

    font-weight:800;

    color:#fff;

}

.floating-card p{

    margin:0;

    color:#d8e4ff;

    font-size:14px;

}

/*=========================================================
Card Positions
=========================================================*/

.card-one{

    left:-70px;

    top:40px;

    animation:floatCard1 6s infinite ease-in-out;

}

.card-two{

    right:-70px;

    top:210px;

    animation:floatCard2 7s infinite ease-in-out;

}

.card-three{

    left:20px;

    bottom:15px;

    animation:floatCard3 5.5s infinite ease-in-out;

}

/*=========================================================
Experience Badge
=========================================================*/

.experience-badge{

    position:absolute;

    right:20px;

    bottom:-30px;

    width:150px;

    height:150px;

    border-radius:50%;

    background:linear-gradient(135deg,#00c6ff,#0072ff);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

    font-weight:700;

    z-index:30;

    box-shadow:0 20px 50px rgba(0,114,255,.45);

    animation:badgeRotate 10s linear infinite;

}

.experience-badge span{

    font-size:42px;

    line-height:1;

    font-weight:800;

}

.experience-badge small{

    display:block;

    margin-top:8px;

    font-size:13px;

    letter-spacing:.5px;

}

/*=========================================================
Animations
=========================================================*/

@keyframes glowPulse{

    0%{

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

        opacity:.5;

    }

    50%{

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

        opacity:.9;

    }

    100%{

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

        opacity:.5;

    }

}

@keyframes floatCard1{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

@keyframes floatCard2{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(18px);

    }

}

@keyframes floatCard3{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

@keyframes badgeRotate{

    0%{

        transform:rotate(0deg);

    }

    100%{

        transform:rotate(360deg);

    }

}

/*=========================================================
ABOUT HERO
Part 3 : Bottom Strip + Responsive + Final Polish
=========================================================*/

/*==============================
Bottom Trust Strip
==============================*/

.hero-bottom{

    margin-top:90px;

    position:relative;

    z-index:10;

}

.bottom-box{

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    backdrop-filter:blur(18px);

    padding:30px 20px;

    text-align:center;

    transition:.35s;

    height:100%;

}

.bottom-box:hover{

    transform:translateY(-8px);

    border-color:rgba(0,212,255,.45);

    box-shadow:0 18px 40px rgba(0,0,0,.25);

}

.bottom-box h3{

    margin:0 0 10px;

    font-size:38px;

    font-weight:800;

    color:#00d4ff;

}

.bottom-box span{

    display:block;

    color:#d8e4ff;

    font-size:15px;

    font-weight:500;

}

/*==============================
Experience Badge Animation
==============================*/

.experience-badge{

    animation:badgeFloat 5s ease-in-out infinite;

}

@keyframes badgeFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==============================
Image Hover
==============================*/

.hero-image{

    transition:.4s;

}

.hero-image:hover{

    transform:translateY(-10px);

}

/*==============================
Button Active
==============================*/

.hero-buttons .btn{

    position:relative;

    overflow:hidden;

}

.hero-buttons .btn:focus{

    box-shadow:none;

}

/*==============================
Tablet
==============================*/

@media (max-width:991px){

    .about-hero{

        padding:90px 0 70px;

        text-align:center;

    }

    .hero-content{

        max-width:100%;

        margin-bottom:60px;

    }

    .hero-content h1{

        font-size:44px;

    }

    .hero-content p{

        font-size:17px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-features{

        grid-template-columns:1fr 1fr;

    }

    .hero-image-wrapper{

        max-width:500px;

    }

    .card-one{

        left:0;

        top:-25px;

    }

    .card-two{

        right:0;

    }

    .card-three{

        left:25px;

        bottom:-10px;

    }

    .experience-badge{

        right:0;

        bottom:-25px;

    }

    .hero-bottom{

        margin-top:80px;

    }

    .bottom-box{

        margin-bottom:24px;

    }

}

/*==============================
Mobile
==============================*/

@media (max-width:767px){

    .about-hero{

        padding:70px 0 50px;

    }

    .hero-breadcrumb{

        margin-bottom:25px;

    }

    .hero-content h1{

        font-size:34px;

        line-height:1.25;

    }

    .hero-content p{

        font-size:16px;

        line-height:1.8;

    }

    .hero-subtitle{

        font-size:13px;

        padding:10px 18px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-features{

        grid-template-columns:1fr;

    }

    .hero-image{

        padding:12px;

    }

    .floating-card{

        position:relative;

        left:auto !important;

        right:auto !important;

        top:auto !important;

        bottom:auto !important;

        margin:18px auto;

        width:100%;

        min-width:auto;

    }

    .experience-badge{

        position:relative;

        right:auto;

        bottom:auto;

        margin:30px auto 0;

        width:120px;

        height:120px;

    }

    .experience-badge span{

        font-size:32px;

    }

    .experience-badge small{

        font-size:11px;

    }

    .hero-bottom{

        margin-top:45px;

    }

    .bottom-box{

        padding:22px 15px;

    }

    .bottom-box h3{

        font-size:30px;

    }

}

/*==============================
Small Mobile
==============================*/

@media (max-width:480px){

    .hero-content h1{

        font-size:29px;

    }

    .hero-content p{

        font-size:15px;

    }

    .bottom-box{

        margin-bottom:18px;

    }

}

/*==============================
Reduce Motion
==============================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

    }

}


/*=========================================================
ABOUT COMPANY SECTION
Premium UI
=========================================================*/

.about-company{

    position:relative;

    padding:110px 0;

    background:#ffffff;

    overflow:hidden;

}

.about-company::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:radial-gradient(circle,#0d6efd10 0%,transparent 70%);

    top:-120px;

    right:-120px;

}

.about-company::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:radial-gradient(circle,#00d4ff10 0%,transparent 70%);

    left:-120px;

    bottom:-120px;

}

/*==============================
Image
==============================*/

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:30px;

    transition:.45s;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.about-image:hover img{

    transform:translateY(-10px);

}

/*==============================
Experience Card
==============================*/

.experience-card{

    position:absolute;

    left:-30px;

    bottom:40px;

    width:170px;

    padding:25px;

    border-radius:24px;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.45);

    box-shadow:0 25px 45px rgba(0,0,0,.15);

    text-align:center;

    transition:.35s;

}

.experience-card:hover{

    transform:translateY(-8px);

}

.experience-card h2{

    font-size:52px;

    font-weight:800;

    color:#0d6efd;

    margin-bottom:5px;

}

.experience-card p{

    margin:0;

    color:#555;

    font-weight:600;

}

/*==============================
Content
==============================*/

.section-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:#eef5ff;

    color:#0d6efd;

    font-size:15px;

    font-weight:700;

    margin-bottom:20px;

}

.about-content h2{

    font-size:46px;

    line-height:1.25;

    font-weight:800;

    color:#16213e;

    margin-bottom:25px;

}

.about-content p{

    font-size:17px;

    line-height:1.9;

    color:#666;

    margin-bottom:20px;

}

.about-content strong{

    color:#0d6efd;

}

/*==============================
Feature List
==============================*/

.about-list{

    list-style:none;

    padding:0;

    margin:0;

}

.about-list li{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 0;

    font-size:16px;

    color:#333;

    font-weight:600;

    transition:.3s;

}

.about-list li:hover{

    transform:translateX(6px);

    color:#0d6efd;

}

.about-list i{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#0d6efd;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:14px;

}

/*==============================
Button
==============================*/

.about-btn .btn{

    background:linear-gradient(135deg,#00c6ff,#0072ff);

    border:none;

    border-radius:50px;

    padding:16px 38px;

    font-weight:700;

    transition:.35s;

    box-shadow:0 15px 35px rgba(13,110,253,.25);

}

.about-btn .btn:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 45px rgba(13,110,253,.35);

}

/*==============================
Responsive
==============================*/

@media(max-width:991px){

.about-company{

padding:80px 0;

}

.about-content{

margin-top:35px;

text-align:center;

}

.about-content h2{

font-size:36px;

}

.about-list li{

justify-content:center;

}

.experience-card{

left:20px;

bottom:20px;

}

}

@media(max-width:767px){

.about-content h2{

font-size:30px;

}

.about-content p{

font-size:16px;

}

.section-tag{

font-size:14px;

}

.about-list li{

justify-content:flex-start;

}

.experience-card{

position:relative;

left:0;

bottom:0;

margin-top:20px;

width:100%;

}

.about-btn .btn{

width:100%;

}

}

/*==========================================
OUR JOURNEY
==========================================*/

.journey-section{

padding:110px 0;

background:#EEF6FF;

}

.journey-content h2{

font-size:46px;

font-weight:800;

line-height:1.25;

margin-bottom:25px;

color:#16213e;

}

.journey-content p{

font-size:17px;

line-height:1.9;

color:#666;

margin-bottom:20px;

}

.achievement-card{

background:#fff;

padding:40px 30px;

border-radius:25px;

box-shadow:0 20px 45px rgba(0,0,0,.06);

transition:.4s;

height:100%;

position:relative;

overflow:hidden;

}

.achievement-card::before{

content:"";

position:absolute;

width:100%;

height:5px;

left:0;

top:0;

background:linear-gradient(90deg,#0d6efd,#00c6ff);

transform:scaleX(0);

transition:.4s;

}

.achievement-card:hover::before{

transform:scaleX(1);

}

.achievement-card:hover{

transform:translateY(-10px);

}

.achievement-card .icon{

width:70px;

height:70px;

border-radius:18px;

background:#eef5ff;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:25px;

}

.achievement-card .icon i{

font-size:28px;

color:#0d6efd;

}

.achievement-card h3{

font-size:46px;

font-weight:800;

color:#0d6efd;

margin-bottom:8px;

}

.achievement-card h5{

font-weight:700;

margin-bottom:15px;

}

.achievement-card p{

color:#666;

margin:0;

line-height:1.8;

}

@media(max-width:991px){

.journey-content{

margin-bottom:40px;

text-align:center;

}

.journey-content h2{

font-size:36px;

}

}

@media(max-width:767px){

.journey-section{

padding:80px 0;

}

.journey-content h2{

font-size:30px;

}

.achievement-card{

padding:30px 25px;

}

}

/*==========================================
MISSION SECTION
==========================================*/

.mission-section{

    position:relative;

    padding:90px 0 100px;

    overflow:hidden;

}

.mission-card{

    background:#fff;

    border-radius:25px;

    padding:45px 35px;

    text-align:center;

    box-shadow:0 20px 45px rgba(0,0,0,.06);

    transition:.4s;

    height:100%;

    position:relative;

    overflow:hidden;

    border:1px solid #edf2f7;

}

.mission-card:hover{

    transform:translateY(-12px);

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

}

.active-card{

    background:linear-gradient(135deg,#0d6efd,#00c6ff);

    color:#fff;

}

.active-card h3,

.active-card p{

    color:#fff;

}

.mission-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#eef5ff;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    transition:.4s;

}

.active-card .mission-icon{

    background:rgba(255,255,255,.20);

}

.mission-icon i{

    font-size:36px;

    color:#0d6efd;

}

.active-card .mission-icon i{

    color:#fff;

}

.mission-card h3{

    font-size:28px;

    font-weight:700;

    margin-bottom:20px;

    color:#16213e;

}

.mission-card p{

    font-size:16px;

    color:#666;

    line-height:1.9;

}

.mission-card:hover .mission-icon{

    transform:rotate(12deg) scale(1.08);

}

/* Responsive */

@media(max-width:991px){

.mission-section{

padding:80px 0;

}

.mission-card{

margin-bottom:25px;

}

}

@media(max-width:767px){

.mission-card{

padding:35px 25px;

}

.mission-card h3{

font-size:24px;

}

}

.mission-section .container{

    max-width:1320px;

}

.mission-section .section-title{

   

    margin:0 auto 50px;

}

.mission-section .section-title h2{

    font-size:52px;

    font-weight:800;

    line-height:1.2;

    color:#0d1b3e;

    margin-bottom:20px;

}

.mission-section .section-title p{

    font-size:22px;

    line-height:1.8;

    color:#6c757d;

    margin:0 auto;

    max-width:850px;

}


/*==========================================
WHY CHOOSE
==========================================*/

.why-choose{

position:relative;

padding:120px 0;

overflow:hidden;

background:

radial-gradient(circle at top left,#1e40af15 0%,transparent 35%),

radial-gradient(circle at bottom right,#06b6d415 0%,transparent 35%),

linear-gradient(
135deg,
#f8fbff,
#eef5ff,
#f8fbff
);

}



.why-content{

padding-right:50px;

}

.why-content h2{

font-size:52px;

font-weight:800;

line-height:1.2;

margin-bottom:25px;

}

.why-content p{

font-size:18px;

line-height:1.9;

color:#666;

margin-bottom:35px;

}

/* GRID */

.feature-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

}

/* BOX */

.feature-box{

background:#fff;

padding:40px;

border-radius:25px;

text-align:center;

box-shadow:0 20px 45px rgba(0,0,0,.06);

transition:.4s;

border:1px solid #edf2f7;

}

.feature-box:hover{

transform:translateY(-12px);

background:linear-gradient(135deg,#0d6efd,#00c6ff);

color:#fff;

}

.feature-box i{

font-size:42px;

margin-bottom:25px;

color:#0d6efd;

transition:.4s;

}

.feature-box:hover i{

color:#fff;

}

.feature-box h4{

font-size:22px;

font-weight:700;

}

/* Zig Zag */

.feature-box:nth-child(2){

margin-top:45px;

}

.feature-box:nth-child(4){

margin-top:45px;

}

.feature-box:nth-child(6){

margin-top:45px;

}

/* Responsive */

@media(max-width:991px){

.feature-grid{

grid-template-columns:1fr 1fr;

margin-top:50px;

}

.why-content{

padding-right:0;

text-align:center;

}

}

@media(max-width:767px){

.feature-grid{

grid-template-columns:1fr;

}

.feature-box:nth-child(2),

.feature-box:nth-child(4),

.feature-box:nth-child(6){

margin-top:0;

}

}

/*====================================================
TECHNOLOGY NETWORK
Premium CSS - Part 1
====================================================*/

.technology-network{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,#1d4ed830 0%,transparent 28%),
    radial-gradient(circle at bottom right,#06b6d430 0%,transparent 30%),
    linear-gradient(135deg,#071529,#0b2348,#071529);

}

/*---------------------------------
Background Glow
---------------------------------*/

.technology-network::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-300px;

    top:-220px;

    border-radius:50%;

    background:rgba(0,162,255,.08);

    filter:blur(120px);

}

.technology-network::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    right:-250px;

    bottom:-180px;

    border-radius:50%;

    background:rgba(13,110,253,.10);

    filter:blur(120px);

}

/*---------------------------------
Section Heading
---------------------------------*/

.technology-network .section-title{

    max-width:850px;

    margin:auto;

    margin-bottom:70px;

    position:relative;

    z-index:20;

}

.technology-network .section-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.08);

    color:#6ec7ff;

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    margin-bottom:25px;

    font-weight:600;

}

.technology-network h2{

    color:#fff;

    font-size:54px;

    font-weight:800;

    margin-bottom:20px;

}

.technology-network p{

    color:#d6dff2;

    font-size:18px;

    line-height:1.9;

}

/*---------------------------------
Wrapper
---------------------------------*/

.network-wrapper{

    position:relative;

    width:900px;

    height:900px;

    margin:80px auto;

}

/*---------------------------------
Globe
---------------------------------*/

.digital-globe{

    position:absolute;

    left:50%;

    top:50%;

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

    width:260px;

    height:260px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*---------------------------------
Center Core
---------------------------------*/

.globe-core{

    width:150px;

    height:150px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #0d6efd,
        #00c6ff
    );

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:58px;

    position:relative;

    z-index:10;

    box-shadow:
    0 0 30px rgba(13,110,253,.45),
    0 0 80px rgba(0,198,255,.35);

}

/*---------------------------------
Orbit Rings
---------------------------------*/

.globe-ring{

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.12);

}

.ring1{

    width:180px;

    height:180px;

}

.ring2{

    width:230px;

    height:230px;

}

.ring3{

    width:280px;

    height:280px;

}

/*---------------------------------
SVG Orbit
---------------------------------*/

.orbit-svg{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

}

.orbit-line{

    fill:none;

    stroke:rgba(255,255,255,.08);

    stroke-width:2;

}

/*---------------------------------
Connection Lines
---------------------------------*/

.connection-svg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.connection-line{

    stroke:#4dc9ff55;

    stroke-width:2;

    stroke-dasharray:8;

}

/*====================================================
TECH NODES
====================================================*/

.tech-node{

    position:absolute;

    width:150px;

    height:150px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.10);

    border-radius:30px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.45s ease;

    cursor:pointer;

    z-index:20;

    overflow:hidden;

}

/* Glow Border */

.tech-node::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

    padding:1px;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.35),
        rgba(0,198,255,.25)
    );

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}

/* Hover */

.tech-node:hover{

    transform:scale(1.15);

    background:#0d6efd;

    box-shadow:

    0 0 25px rgba(13,110,253,.35),

    0 0 60px rgba(0,198,255,.30);

}

/* Icon */

.tech-icon{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:15px;

}

.tech-icon img{

    width:58px;

    transition:.4s;

}

.tech-node:hover img{

    transform:rotate(10deg) scale(1.15);

}

.tech-node span,

.tech-node h5{

    color:#fff;

    font-size:17px;

    font-weight:700;

    margin:0;

}

/*=========================================
NODE POSITION
=========================================*/

.node1{

    top:0;

    left:50%;

    transform:translateX(-50%);

}

.node2{

    top:120px;

    right:70px;

}

.node3{

    top:380px;

    right:0;

}

.node4{

    bottom:120px;

    right:70px;

}

.node5{

    bottom:0;

    left:50%;

    transform:translateX(-50%);

}

.node6{

    bottom:120px;

    left:70px;

}

.node7{

    top:380px;

    left:0;

}

.node8{

    top:120px;

    left:70px;

}

/*=========================================
PARTICLES
=========================================*/

.particles{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.particles span{

    position:absolute;

    width:7px;

    height:7px;

    border-radius:50%;

    background:#4dc9ff;

    opacity:.5;

    animation:particleFloat 8s infinite ease-in-out;

}

.particles span:nth-child(1){

top:8%;

left:28%;

}

.particles span:nth-child(2){

top:18%;

right:25%;

}

.particles span:nth-child(3){

top:50%;

left:8%;

}

.particles span:nth-child(4){

top:52%;

right:6%;

}

.particles span:nth-child(5){

bottom:18%;

left:18%;

}

.particles span:nth-child(6){

bottom:12%;

right:28%;

}

.particles span:nth-child(7){

top:32%;

left:48%;

}

.particles span:nth-child(8){

bottom:35%;

right:48%;

}

/*=========================================
ANIMATION
=========================================*/

@keyframes particleFloat{

0%{

transform:translateY(0);

opacity:.4;

}

50%{

transform:translateY(-18px);

opacity:1;

}

100%{

transform:translateY(0);

opacity:.4;

}

}

@keyframes rotateRing{

from{

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

}

to{

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

}

}

.ring1{

animation:rotateRing 20s linear infinite;

}

.ring2{

animation:rotateRing 30s linear infinite reverse;

}

.ring3{

animation:rotateRing 40s linear infinite;

}

.globe-core{

animation:glowPulse 4s infinite ease-in-out;

}

@keyframes glowPulse{

0%{

box-shadow:
0 0 25px rgba(13,110,253,.45),
0 0 60px rgba(0,198,255,.35);

}

50%{

box-shadow:
0 0 45px rgba(13,110,253,.70),
0 0 100px rgba(0,198,255,.55);

}

100%{

box-shadow:
0 0 25px rgba(13,110,253,.45),
0 0 60px rgba(0,198,255,.35);

}

}

/*====================================================
PREMIUM TECHNOLOGY NETWORK
PART 3
Responsive + Premium Effects
====================================================*/

/*------------------------------
Network Glow
------------------------------*/

.network-glow{

    position:absolute;

    left:50%;

    top:50%;

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

    width:450px;

    height:450px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(0,198,255,.18) 0%,
    rgba(13,110,253,.12) 35%,
    transparent 75%);

    filter:blur(60px);

    animation:networkGlow 6s infinite ease-in-out;

}

/*------------------------------
Node Shadow
------------------------------*/

.tech-node{

    box-shadow:

    0 15px 40px rgba(0,0,0,.25);

}

.tech-node:hover{

    z-index:100;

}

/*------------------------------
Blue Energy Effect
------------------------------*/

.tech-node::after{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    transition:.45s;

}

.tech-node:hover::after{

    width:250px;

    height:250px;

}

/*------------------------------
Image
------------------------------*/

.tech-icon{

    position:relative;

    z-index:5;

}

.tech-node h5{

    position:relative;

    z-index:5;

}

/*------------------------------
Animation
------------------------------*/

@keyframes networkGlow{

0%{

transform:translate(-50%,-50%) scale(.95);

opacity:.6;

}

50%{

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

opacity:1;

}

100%{

transform:translate(-50%,-50%) scale(.95);

opacity:.6;

}

}

/*------------------------------
Floating Animation
------------------------------*/

.node1{

animation:float1 6s infinite ease-in-out;

}

.node2{

animation:float2 5.5s infinite ease-in-out;

}

.node3{

animation:float3 6.2s infinite ease-in-out;

}

.node4{

animation:float4 5.2s infinite ease-in-out;

}

.node5{

animation:float5 6.4s infinite ease-in-out;

}

.node6{

animation:float6 5.8s infinite ease-in-out;

}

.node7{

animation:float7 6.1s infinite ease-in-out;

}

.node8{

animation:float8 5.6s infinite ease-in-out;

}

@keyframes float1{

50%{

transform:translate(-50%,-12px);

}

}

@keyframes float2{

50%{

transform:translateY(-14px);

}

}

@keyframes float3{

50%{

transform:translateX(10px);

}

}

@keyframes float4{

50%{

transform:translateY(12px);

}

}

@keyframes float5{

50%{

transform:translate(-50%,12px);

}

}

@keyframes float6{

50%{

transform:translateY(15px);

}

}

@keyframes float7{

50%{

transform:translateX(-10px);

}

}

@keyframes float8{

50%{

transform:translateY(-15px);

}

}

/*====================================================
MOBILE
====================================================*/

.mobile-tech-grid{

display:none;

}

@media(max-width:991px){

.network-wrapper{

display:none;

}

.mobile-tech-grid{

display:block;

margin-top:50px;

}

.mobile-tech-card{

background:rgba(255,255,255,.08);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.08);

padding:25px;

border-radius:22px;

text-align:center;

transition:.35s;

height:100%;

}

.mobile-tech-card:hover{

background:#0d6efd;

transform:translateY(-8px);

}

.mobile-tech-card img{

height:52px;

margin-bottom:15px;

}

.mobile-tech-card span{

display:block;

color:#fff;

font-weight:600;

}

}

@media(max-width:576px){

.technology-network{

padding:80px 0;

}

.technology-network h2{

font-size:34px;

}

.technology-network p{

font-size:16px;

}

.mobile-tech-card{

padding:20px;

}

.mobile-tech-card img{

height:42px;

}

}

/*==================================================
 INDUSTRIES BENTO GRID
 PART 1
==================================================*/

.industry-bento-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:ffffff;
}

/*--------------------------------*/

.industry-heading{

    max-width:850px;

    margin:auto;

    margin-bottom:80px;

    position:relative;

    z-index:5;

}

.industry-heading h2{

    color:#fff;

    font-size:54px;

    font-weight:800;

    line-height:1.2;

    margin:20px 0;

}

.industry-heading p{

    color:#c9d6ea;

    font-size:18px;

    line-height:1.9;

}

/*--------------------------------*/

.industry-grid{

    display:grid;

    gap:25px;

    grid-template-columns:

    repeat(4,1fr);

    grid-auto-rows:230px;

}

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

.industry-item{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:28px;

    text-decoration:none;

    background:#111;

    box-shadow:

    0 15px 40px rgba(0,0,0,.30);

}

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

.industry-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

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

.industry-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    180deg,

    rgba(0,0,0,.15),

    rgba(0,0,0,.75)

    );

}

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

.industry-info{

    position:absolute;

    left:35px;

    right:35px;

    bottom:35px;

    z-index:3;

}

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

.industry-icon{

    width:75px;

    height:75px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

    background:

    rgba(255,255,255,.15);

    backdrop-filter:blur(18px);

}

.industry-icon i{

    font-size:30px;

    color:#fff;

}

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

.industry-info h3{

    color:#fff;

    font-size:30px;

    font-weight:700;

    margin-bottom:12px;

}

.industry-info p{

    color:#d7e3f5;

    line-height:1.8;

    margin-bottom:20px;

}

.industry-info span{

    color:#59c4ff;

    font-weight:600;

}

/*==================================================
BENTO SIZE
==================================================*/

.retail{

grid-column:span 2;

grid-row:span 2;

}

.healthcare{

grid-column:span 1;

grid-row:span 1;

}

.education{

grid-column:span 1;

grid-row:span 1;

}

.corporate{

grid-column:span 1;

grid-row:span 1;

}

.manufacturing{

grid-column:span 2;

grid-row:span 1;

}

.realestate{

grid-column:span 1;

grid-row:span 1;

}

.restaurant{

grid-column:span 1;

grid-row:span 1;

}

.services{

grid-column:span 2;

grid-row:span 1;

}

/*==================================================
INDUSTRY BENTO
PART 2
Hover + Glass + Premium Effects
==================================================*/

/* Smooth Animation */

.industry-item{

    transition:all .45s cubic-bezier(.22,.61,.36,1);

}

/* Image */

.industry-item img{

    transition:transform .8s ease;

}

/* Hover */

.industry-item:hover{

    transform:translateY(-12px);

    box-shadow:

    0 25px 80px rgba(0,0,0,.45);

}

/* Image Zoom */

.industry-item:hover img{

    transform:scale(1.12);

}

/* Overlay */

.industry-overlay{

    transition:.5s;

}

.industry-item:hover .industry-overlay{

    background:

    linear-gradient(

        180deg,

        rgba(13,110,253,.05),

        rgba(13,110,253,.70),

        rgba(5,15,40,.90)

    );

}

/*========================================
Glass Border
========================================*/

.industry-item::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    padding:1px;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.18),

        rgba(0,198,255,.25)

    );

    -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.45s;

    z-index:5;

}

.industry-item:hover::before{

    opacity:1;

}

/*========================================
Icon
========================================*/

.industry-icon{

    transition:.45s;

}

.industry-item:hover .industry-icon{

    background:#fff;

    transform:rotate(12deg) scale(1.1);

}

.industry-item:hover .industry-icon i{

    color:#0d6efd;

}

/*========================================
Heading
========================================*/

.industry-info h3{

    transition:.35s;

}

.industry-item:hover h3{

    transform:translateY(-5px);

}

/*========================================
Paragraph
========================================*/

.industry-info p{

    transition:.35s;

    opacity:.85;

}

.industry-item:hover p{

    opacity:1;

}

/*========================================
Arrow
========================================*/

.industry-info span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    transition:.35s;

}

.industry-info span i{

    transition:.35s;

}

.industry-item:hover span{

    color:#fff;

}

.industry-item:hover span i{

    transform:translateX(8px);

}

/*========================================
Blue Glow
========================================*/

.industry-item::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(0,198,255,.22),

        transparent 70%

    );

    top:-150px;

    right:-150px;

    opacity:0;

    transition:.5s;

}

.industry-item:hover::after{

    opacity:1;

}

/*========================================
Floating Animation
========================================*/

@keyframes floatingCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-5px);

}

100%{

transform:translateY(0);

}

}

.industry-item{

animation:floatingCard 7s ease-in-out infinite;

}

.industry-item:nth-child(2){

animation-delay:.3s;

}

.industry-item:nth-child(3){

animation-delay:.6s;

}

.industry-item:nth-child(4){

animation-delay:.9s;

}

.industry-item:nth-child(5){

animation-delay:1.2s;

}

.industry-item:nth-child(6){

animation-delay:1.5s;

}

.industry-item:nth-child(7){

animation-delay:1.8s;

}

.industry-item:nth-child(8){

animation-delay:2.1s;

}
/*==================================================
INDUSTRY BENTO GRID
PART 3
Responsive + Final Premium Polish
==================================================*/

/*=============================
Section Decoration
=============================*/

.industry-bento-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-250px;

    left:-250px;

    border-radius:50%;

    background:rgba(37,99,235,.10);

    filter:blur(130px);

}

.industry-bento-section::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:rgba(6,182,212,.10);

    filter:blur(130px);

}

/*=============================
Card Shine Effect
=============================*/

.industry-item{

    isolation:isolate;

}

.industry-item .shine{

    display:none;

}

.industry-item::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:45%;

    height:250%;

    background:linear-gradient(

        rgba(255,255,255,0),

        rgba(255,255,255,.20),

        rgba(255,255,255,0)

    );

    transform:rotate(25deg);

    transition:1s;

    z-index:3;

}

.industry-item:hover::after{

    left:140%;

}

/*=============================
Glass Blur
=============================*/

.industry-info{

    backdrop-filter:blur(4px);

}

/*=============================
Image Animation
=============================*/

.industry-item img{

    animation:imageZoom 12s linear infinite alternate;

}

@keyframes imageZoom{

0%{

transform:scale(1);

}

100%{

transform:scale(1.08);

}

}





























































/*==================================================
 GOOGLE ADS HERO SECTION
==================================================*/

.google-hero{
    position:relative;
    overflow:hidden;
    padding:110px 0 90px;
    background:linear-gradient(135deg,#07142f 0%,#0d2d67 50%,#0d6efd 100%);
}

.google-hero::before{
    content:"";
    position:absolute;
    top:-220px;
    right:-220px;
    width:520px;
    height:520px;
    background:rgba(255,255,255,.05);
    border-radius:50%;
}

.google-hero::after{
    content:"";
    position:absolute;
    left:-180px;
    bottom:-180px;
    width:420px;
    height:420px;
    background:rgba(255,255,255,.04);
    border-radius:50%;
}

.google-hero .container{
    position:relative;
    z-index:2;
}

/*====================================
Breadcrumb
====================================*/

.breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:40px;
    font-size:15px;
}

.breadcrumb a{
    color:#ffffff;
    text-decoration:none;
    transition:.3s;
}

.breadcrumb a:hover{
    color:#ffc107;
}

.breadcrumb span{
    color:rgba(255,255,255,.75);
}

/*====================================
Layout
====================================*/

.google-hero-wrapper{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:70px;
    align-items:center;
}

/*====================================
Left Content
====================================*/

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 22px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.15);
    border-radius:50px;
    color:#fff;
    font-size:14px;
    font-weight:600;
    margin-bottom:30px;
}

.hero-badge i{
    color:#ffc107;
    font-size:16px;
}

.google-hero-content h1{
    color:#fff;
    font-size:58px;
    line-height:1.15;
    font-weight:800;
    margin-bottom:25px;
}

.google-hero-content h1 span{
    color:#ffc107;
}

.google-hero-content p{
    color:rgba(255,255,255,.85);
    font-size:18px;
    line-height:1.9;
    margin-bottom:35px;
    max-width:650px;
}

/*====================================
Features
====================================*/

.hero-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:40px;
}

.feature-box{
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 22px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    transition:.35s;
}

.feature-box:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.14);
}

.feature-box i{
    color:#22c55e;
    font-size:22px;
}

.feature-box span{
    color:#fff;
    font-size:15px;
    font-weight:600;
}

/*====================================
Buttons
====================================*/

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-bottom:45px;
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:17px 34px;
    background:#ffc107;
    color:#111;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
    transition:.35s;
}

.btn-primary:hover{
    transform:translateY(-4px);
    background:#ffcd38;
}

.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:17px 34px;
    border:2px solid rgba(255,255,255,.35);
    color:#fff;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
    transition:.35s;
}

.btn-secondary:hover{
    background:#fff;
    color:#0d6efd;
}

/*====================================
Rating
====================================*/

.hero-rating{
    display:flex;
    align-items:center;
    gap:20px;
}

.rating-stars{
    font-size:26px;
    color:#ffc107;
    letter-spacing:3px;
}

.rating-text strong{
    display:block;
    color:#fff;
    font-size:18px;
    margin-bottom:4px;
}

.rating-text span{
    color:rgba(255,255,255,.75);
    font-size:14px;
}

/*====================================
Lead Form
====================================*/

.lead-form-card{
    background:#fff;
    padding:40px;
    border-radius:24px;
    box-shadow:0 25px 70px rgba(0,0,0,.18);
}

.form-head{
    text-align:center;
    margin-bottom:28px;
}

.form-head h3{
    font-size:30px;
    color:#111827;
    margin-bottom:10px;
    font-weight:700;
}

.form-head p{
    color:#6b7280;
    line-height:1.7;
    font-size:15px;
}

.lead-form-card form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.lead-form-card input,
.lead-form-card select,
.lead-form-card textarea{
    width:100%;
    padding:16px 18px;
    border:1px solid #d8dce4;
    border-radius:12px;
    outline:none;
    font-size:15px;
    transition:.3s;
    background:#fff;
}

.lead-form-card textarea{
    resize:none;
}

.lead-form-card input:focus,
.lead-form-card select:focus,
.lead-form-card textarea:focus{
    border-color:#0d6efd;
    box-shadow:0 0 0 4px rgba(13,110,253,.12);
}

.lead-form-card button{
    border:none;
    cursor:pointer;
    padding:18px;
    border-radius:12px;
    background:linear-gradient(135deg,#0d6efd,#0b57d0);
    color:#fff;
    font-size:16px;
    font-weight:700;
    transition:.35s;
}

.lead-form-card button:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px rgba(13,110,253,.25);
}

/*====================================
Responsive
====================================*/

@media(max-width:1200px){

.google-hero-content h1{
    font-size:48px;
}

.google-hero-wrapper{
    gap:45px;
}

}

@media(max-width:991px){

.google-hero{
    padding:80px 0;
}

.google-hero-wrapper{
    grid-template-columns:1fr;
}

.google-hero-content{
    text-align:center;
}

.google-hero-content p{
    margin:auto auto 35px;
}

.hero-features{
    margin:0 auto 35px;
}

.hero-buttons,
.hero-rating{
    justify-content:center;
}

}

@media(max-width:768px){

.google-hero-content h1{
    font-size:38px;
}

.hero-features{
    grid-template-columns:1fr;
}

.hero-buttons{
    flex-direction:column;
}

.btn-primary,
.btn-secondary{
    width:100%;
}

.lead-form-card{
    padding:30px;
}

}

@media(max-width:576px){

.google-hero{
    padding:70px 0;
}

.hero-badge{
    font-size:13px;
    padding:10px 18px;
}

.google-hero-content h1{
    font-size:32px;
}

.google-hero-content p{
    font-size:16px;
}

.rating-stars{
    font-size:20px;
}

.hero-rating{
    flex-direction:column;
    gap:12px;
}

.lead-form-card{
    padding:25px;
}

.form-head h3{
    font-size:24px;
}

}

/*==================================================
 WHY CHOOSE GOOGLE ADS SECTION
==================================================*/

.google-why-section{
    position:relative;
    padding:100px 0;
    background:#f8fbff;
    overflow:hidden;
}

.google-why-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    top:-180px;
    right:-150px;
    background:rgba(13,110,253,.05);
    border-radius:50%;
}

.google-why-section::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    bottom:-160px;
    left:-140px;
    background:rgba(255,193,7,.08);
    border-radius:50%;
}

.google-why-section .container{
    position:relative;
    z-index:2;
}

/*====================================
Section Heading
====================================*/

.section-heading{
    max-width:760px;
    margin:0 auto 70px;
}

.section-heading .section-badge{
    display:inline-block;
    padding:10px 22px;
    background:#e9f2ff;
    color:#0d6efd;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    margin-bottom:18px;
}

.section-heading h2{
    font-size:42px;
    font-weight:800;
    color:#1a1a1a;
    margin-bottom:18px;
    line-height:1.25;
}

.section-heading p{
    font-size:17px;
    line-height:1.9;
    color:#6b7280;
}

/*====================================
Cards
====================================*/

.why-google-card{
    background:#ffffff;
    border-radius:22px;
    padding:40px 32px;
    height:100%;
    text-align:left;
    transition:.4s;
    border:1px solid #edf2f7;
    box-shadow:0 12px 35px rgba(16,24,40,.06);
    position:relative;
    overflow:hidden;
}

.why-google-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#0d6efd,#3b82f6,#60a5fa);
    transform:scaleX(0);
    transition:.4s;
    transform-origin:left;
}

.why-google-card:hover{
    transform:translateY(-12px);
    box-shadow:0 30px 70px rgba(13,110,253,.15);
}

.why-google-card:hover::before{
    transform:scaleX(1);
}

/*====================================
Icons
====================================*/

.why-icon{
    width:78px;
    height:78px;
    border-radius:20px;
    background:linear-gradient(135deg,#0d6efd,#0056d6);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:30px;
    margin-bottom:28px;
    transition:.4s;
    box-shadow:0 15px 35px rgba(13,110,253,.25);
}

.why-google-card:hover .why-icon{
    transform:rotate(-8deg) scale(1.08);
}

/*====================================
Typography
====================================*/

.why-google-card h3{
    font-size:24px;
    color:#111827;
    font-weight:700;
    margin-bottom:18px;
    line-height:1.4;
}

.why-google-card p{
    color:#6b7280;
    font-size:16px;
    line-height:1.9;
    margin:0;
}

/*====================================
Bottom CTA Box
====================================*/

.google-highlight-box{
    margin-top:70px;
    background:linear-gradient(135deg,#0d6efd,#0047b3);
    border-radius:24px;
    padding:55px 60px;
    color:#fff;
    box-shadow:0 30px 60px rgba(13,110,253,.25);
}

.google-highlight-box h3{
    font-size:34px;
    font-weight:700;
    margin-bottom:18px;
}

.google-highlight-box p{
    font-size:17px;
    line-height:1.9;
    color:rgba(255,255,255,.92);
    margin:0;
}

.highlight-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 34px;
    background:#fff;
    color:#0d6efd;
    font-weight:700;
    border-radius:50px;
    text-decoration:none;
    transition:.35s;
    white-space:nowrap;
}

.highlight-btn:hover{
    background:#ffc107;
    color:#111;
    transform:translateY(-4px);
}

/*====================================
Responsive
====================================*/

@media (max-width:1200px){

.section-heading h2{
    font-size:38px;
}

.google-highlight-box{
    padding:45px;
}

}

@media (max-width:991px){

.google-why-section{
    padding:80px 0;
}

.section-heading{
    margin-bottom:50px;
}

.section-heading h2{
    font-size:34px;
}

.google-highlight-box{
    text-align:center;
}

.google-highlight-box h3{
    font-size:30px;
}

.highlight-btn{
    margin-top:30px;
}

}

@media (max-width:767px){

.why-google-card{
    padding:35px 25px;
}

.why-icon{
    width:70px;
    height:70px;
    font-size:28px;
}

.why-google-card h3{
    font-size:22px;
}

.google-highlight-box{
    padding:35px 25px;
}

.google-highlight-box h3{
    font-size:26px;
}

.google-highlight-box p{
    font-size:16px;
}

}

@media (max-width:575px){

.google-why-section{
    padding:70px 0;
}

.section-heading h2{
    font-size:30px;
}

.section-heading p{
    font-size:16px;
}

.why-google-card{
    text-align:center;
}

.why-icon{
    margin:0 auto 25px;
}

.highlight-btn{
    width:100%;
    padding:16px;
}

}

/*==================================================
 OUR GOOGLE ADS SERVICES
==================================================*/

.google-services-section{
    position:relative;
    padding:110px 0;
    background:#ffffff;
    overflow:hidden;
}

.google-services-section::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    top:-220px;
    left:-180px;
    background:rgba(13,110,253,.05);
    border-radius:50%;
}

.google-services-section::after{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    bottom:-180px;
    right:-160px;
    background:rgba(255,193,7,.08);
    border-radius:50%;
}

.google-services-section .container{
    position:relative;
    z-index:2;
}

/*=====================================
Service Card
=====================================*/

.google-service-card{
    position:relative;
    height:100%;
    background:#fff;
    border-radius:24px;
    padding:40px 35px;
    border:1px solid #edf2f7;
    box-shadow:0 12px 35px rgba(0,0,0,.05);
    overflow:hidden;
    transition:.40s;
}

.google-service-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#0d6efd,#00c6ff);
    transform:scaleX(0);
    transform-origin:left;
    transition:.4s;
}

.google-service-card:hover{
    transform:translateY(-12px);
    box-shadow:0 30px 70px rgba(13,110,253,.12);
}

.google-service-card:hover::before{
    transform:scaleX(1);
}

/*=====================================
Icon
=====================================*/

.service-icon{
    width:82px;
    height:82px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0d6efd,#0047b3);
    color:#fff;
    font-size:32px;
    margin-bottom:30px;
    transition:.35s;
    box-shadow:0 18px 35px rgba(13,110,253,.25);
}

.google-service-card:hover .service-icon{
    transform:rotate(-8deg) scale(1.08);
}

/*=====================================
Heading
=====================================*/

.google-service-card h3{
    font-size:26px;
    font-weight:700;
    color:#111827;
    margin-bottom:18px;
}

.google-service-card p{
    font-size:16px;
    line-height:1.9;
    color:#6b7280;
    margin-bottom:25px;
}

/*=====================================
List
=====================================*/

.google-service-card ul{
    padding:0;
    margin:0;
    list-style:none;
}

.google-service-card ul li{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 0;
    color:#374151;
    font-weight:500;
    border-bottom:1px dashed #ececec;
}

.google-service-card ul li:last-child{
    border-bottom:none;
}

.google-service-card ul li i{
    width:24px;
    height:24px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e8f5e9;
    color:#16a34a;
    font-size:12px;
    flex-shrink:0;
}

/*=====================================
Hover Accent
=====================================*/

.google-service-card::after{
    content:"";
    position:absolute;
    right:-80px;
    bottom:-80px;
    width:170px;
    height:170px;
    background:linear-gradient(135deg,
        rgba(13,110,253,.05),
        rgba(13,110,253,0));
    border-radius:50%;
    transition:.4s;
}

.google-service-card:hover::after{
    transform:scale(1.3);
}

/*=====================================
Bottom CTA
=====================================*/

.services-bottom-box{
    margin-top:80px;
    padding:50px 60px;
    border-radius:24px;
    background:linear-gradient(135deg,#07142f,#0d6efd);
    color:#fff;
    overflow:hidden;
    position:relative;
}

.services-bottom-box::before{
    content:"";
    position:absolute;
    right:-120px;
    top:-120px;
    width:280px;
    height:280px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
}

.services-bottom-box h3{
    font-size:34px;
    font-weight:700;
    margin-bottom:18px;
}

.services-bottom-box p{
    color:rgba(255,255,255,.90);
    font-size:17px;
    line-height:1.9;
    margin:0;
}

.service-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 34px;
    background:#ffc107;
    color:#111;
    text-decoration:none;
    font-weight:700;
    border-radius:50px;
    transition:.35s;
}

.service-btn:hover{
    background:#fff;
    color:#0d6efd;
    transform:translateY(-4px);
}

/*=====================================
Responsive
=====================================*/

@media(max-width:1200px){

.google-service-card{
    padding:35px 30px;
}

.services-bottom-box{
    padding:45px;
}

.services-bottom-box h3{
    font-size:30px;
}

}

@media(max-width:991px){

.google-services-section{
    padding:90px 0;
}

.services-bottom-box{
    text-align:center;
}

.service-btn{
    margin-top:30px;
}

}

@media(max-width:768px){

.google-service-card{
    padding:32px 25px;
}

.service-icon{
    width:72px;
    height:72px;
    font-size:28px;
}

.google-service-card h3{
    font-size:22px;
}

.services-bottom-box{
    padding:35px 25px;
}

.services-bottom-box h3{
    font-size:26px;
}

.services-bottom-box p{
    font-size:16px;
}

}

@media(max-width:576px){

.google-services-section{
    padding:70px 0;
}

.google-service-card{
    text-align:center;
}

.service-icon{
    margin:0 auto 25px;
}

.google-service-card ul li{
    justify-content:flex-start;
    text-align:left;
}

.service-btn{
    width:100%;
}

}

/*==================================================
 GOOGLE ADS PROCESS SECTION
==================================================*/

.google-process-section{
    position:relative;
    padding:110px 0;
    background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
    overflow:hidden;
}

.google-process-section::before{
    content:"";
    position:absolute;
    top:-220px;
    left:-180px;
    width:450px;
    height:450px;
    background:rgba(13,110,253,.05);
    border-radius:50%;
}

.google-process-section::after{
    content:"";
    position:absolute;
    bottom:-200px;
    right:-150px;
    width:380px;
    height:380px;
    background:rgba(255,193,7,.08);
    border-radius:50%;
}

.google-process-section .container{
    position:relative;
    z-index:2;
}

/*====================================
Process Grid
====================================*/

.process-wrapper{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:70px;
}

/*====================================
Card
====================================*/

.process-card{
    position:relative;
    background:#fff;
    border-radius:22px;
    padding:35px 28px;
    border:1px solid #edf2f7;
    box-shadow:0 12px 35px rgba(0,0,0,.05);
    transition:.35s;
    overflow:hidden;
    height:100%;
}

.process-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#0d6efd,#00c6ff);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}

.process-card:hover{
    transform:translateY(-12px);
    box-shadow:0 28px 60px rgba(13,110,253,.14);
}

.process-card:hover::before{
    transform:scaleX(1);
}

/*====================================
Step Number
====================================*/

.process-number{
    position:absolute;
    top:22px;
    right:22px;
    font-size:42px;
    font-weight:800;
    color:#eaf2ff;
    line-height:1;
}

/*====================================
Icon
====================================*/

.process-icon{
    width:74px;
    height:74px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0d6efd,#0057d8);
    color:#fff;
    font-size:28px;
    margin-bottom:28px;
    transition:.35s;
    box-shadow:0 18px 35px rgba(13,110,253,.20);
}

.process-card:hover .process-icon{
    transform:rotate(-8deg) scale(1.08);
}

/*====================================
Typography
====================================*/

.process-card h3{
    font-size:23px;
    font-weight:700;
    color:#111827;
    margin-bottom:16px;
    line-height:1.4;
}

.process-card p{
    margin:0;
    color:#6b7280;
    font-size:15px;
    line-height:1.9;
}

/*====================================
Stats
====================================*/

.process-stats{
    margin-top:80px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.stat-box{
    background:#fff;
    border-radius:22px;
    padding:35px;
    text-align:center;
    border:1px solid #edf2f7;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition:.35s;
}

.stat-box:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 45px rgba(13,110,253,.12);
}

.stat-box h3{
    font-size:42px;
    font-weight:800;
    margin-bottom:10px;
    background:linear-gradient(135deg,#0d6efd,#00b7ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.stat-box span{
    display:block;
    color:#6b7280;
    font-size:16px;
    font-weight:600;
}

/*====================================
Responsive
====================================*/

@media(max-width:1200px){

.process-wrapper{
    grid-template-columns:repeat(2,1fr);
}

.process-stats{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:991px){

.google-process-section{
    padding:90px 0;
}

.process-wrapper{
    gap:25px;
}

.process-card{
    padding:30px 25px;
}

}

@media(max-width:767px){

.process-wrapper{
    grid-template-columns:1fr;
}

.process-stats{
    grid-template-columns:1fr;
}

.process-number{
    font-size:34px;
}

.process-icon{
    width:68px;
    height:68px;
    font-size:25px;
}

.process-card h3{
    font-size:21px;
}

.stat-box h3{
    font-size:36px;
}

}

@media(max-width:576px){

.google-process-section{
    padding:70px 0;
}

.process-card{
    text-align:center;
}

.process-icon{
    margin:0 auto 25px;
}

.process-number{
    top:15px;
    right:18px;
    font-size:30px;
}

.stat-box{
    padding:28px;
}

}

/*==================================================
 GOOGLE ADS FEATURES SECTION
==================================================*/

.google-features-section{
    position:relative;
    padding:110px 0;
    background:#ffffff;
    overflow:hidden;
}

.google-features-section::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    top:-220px;
    right:-180px;
    background:rgba(13,110,253,.05);
    border-radius:50%;
}

.google-features-section::after{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    left:-150px;
    bottom:-170px;
    background:rgba(255,193,7,.08);
    border-radius:50%;
}

.google-features-section .container{
    position:relative;
    z-index:2;
}

/*=========================================
Feature Card
=========================================*/

.feature-card{
    position:relative;
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:22px;
    padding:35px 30px;
    height:100%;
    text-align:left;
    overflow:hidden;
    transition:.35s;
    box-shadow:0 12px 35px rgba(15,23,42,.05);
}

.feature-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#0d6efd,#00b8ff);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}

.feature-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(13,110,253,.14);
}

.feature-card:hover::before{
    transform:scaleX(1);
}

/*=========================================
Icon
=========================================*/

.feature-card i{
    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#fff;
    border-radius:18px;
    margin-bottom:25px;
    background:linear-gradient(135deg,#0d6efd,#0057d8);
    box-shadow:0 18px 35px rgba(13,110,253,.20);
    transition:.35s;
}

.feature-card:hover i{
    transform:rotate(-8deg) scale(1.08);
}

/*=========================================
Heading
=========================================*/

.feature-card h3{
    font-size:22px;
    color:#111827;
    font-weight:700;
    margin-bottom:15px;
    line-height:1.4;
}

.feature-card p{
    color:#6b7280;
    font-size:15px;
    line-height:1.8;
    margin:0;
}

/*=========================================
Hover Decoration
=========================================*/

.feature-card::after{
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    right:-70px;
    bottom:-70px;
    background:linear-gradient(
        135deg,
        rgba(13,110,253,.06),
        rgba(13,110,253,0)
    );
    border-radius:50%;
    transition:.4s;
}

.feature-card:hover::after{
    transform:scale(1.25);
}

/*=========================================
Responsive
=========================================*/

@media(max-width:1200px){

.feature-card{
    padding:32px 26px;
}

}

@media(max-width:991px){

.google-features-section{
    padding:90px 0;
}

.feature-card{
    padding:30px 24px;
}

.feature-card h3{
    font-size:20px;
}

}

@media(max-width:768px){

.google-features-section{
    padding:80px 0;
}

.feature-card{
    text-align:center;
}

.feature-card i{
    margin:0 auto 25px;
}

}

@media(max-width:576px){

.google-features-section{
    padding:70px 0;
}

.feature-card{
    padding:28px 22px;
}

.feature-card i{
    width:65px;
    height:65px;
    font-size:24px;
}

.feature-card h3{
    font-size:20px;
}

.feature-card p{
    font-size:15px;
}

}

/*==================================================
 GOOGLE ADS COMPARISON SECTION
==================================================*/

.google-comparison-section{
    position:relative;
    padding:110px 0;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    overflow:hidden;
}

.google-comparison-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    top:-180px;
    left:-180px;
    background:rgba(13,110,253,.05);
    border-radius:50%;
}

.google-comparison-section::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:-140px;
    bottom:-140px;
    background:rgba(255,193,7,.08);
    border-radius:50%;
}

.google-comparison-section .container{
    position:relative;
    z-index:2;
}

/*=====================================
Layout
=====================================*/

.comparison-wrapper{
    display:grid;
    grid-template-columns:1fr 120px 1fr;
    align-items:center;
    gap:35px;
    margin-top:70px;
}

/*=====================================
Cards
=====================================*/

.comparison-card{
    position:relative;
    background:#fff;
    border-radius:24px;
    padding:40px;
    height:100%;
    border:1px solid #edf2f7;
    box-shadow:0 15px 40px rgba(15,23,42,.06);
    transition:.35s;
    overflow:hidden;
}

.comparison-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 70px rgba(0,0,0,.10);
}

.comparison-negative{
    border-top:6px solid #ef4444;
}

.comparison-positive{
    border-top:6px solid #16a34a;
}

/*=====================================
Header
=====================================*/

.comparison-header{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:30px;
}

.comparison-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:28px;
    flex-shrink:0;
}

.comparison-icon.danger{
    background:linear-gradient(135deg,#ef4444,#dc2626);
}

.comparison-icon.success{
    background:linear-gradient(135deg,#16a34a,#15803d);
}

.comparison-header h3{
    margin:0;
    font-size:26px;
    line-height:1.4;
    font-weight:700;
    color:#111827;
}

/*=====================================
List
=====================================*/

.comparison-card ul{
    margin:0;
    padding:0;
    list-style:none;
}

.comparison-card ul li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:14px 0;
    border-bottom:1px dashed #ececec;
    font-size:16px;
    color:#4b5563;
    line-height:1.7;
}

.comparison-card ul li:last-child{
    border-bottom:none;
}

.comparison-negative ul li i{
    color:#ef4444;
    font-size:15px;
    margin-top:5px;
}

.comparison-positive ul li i{
    color:#16a34a;
    font-size:15px;
    margin-top:5px;
}

/*=====================================
VS Circle
=====================================*/

.comparison-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.vs-circle{
    width:90px;
    height:90px;
    border-radius:50%;
    background:linear-gradient(135deg,#0d6efd,#0057d8);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:800;
    box-shadow:0 20px 45px rgba(13,110,253,.25);
    animation:vsPulse 2.5s infinite;
}

@keyframes vsPulse{

0%{
    transform:scale(1);
}

50%{
    transform:scale(1.08);
}

100%{
    transform:scale(1);
}

}

/*=====================================
Bottom CTA
=====================================*/

.comparison-bottom{
    margin-top:80px;
    text-align:center;
    background:linear-gradient(135deg,#07142f,#0d6efd);
    border-radius:24px;
    padding:60px 40px;
    color:#fff;
    box-shadow:0 25px 60px rgba(13,110,253,.20);
}

.comparison-bottom h3{
    font-size:36px;
    font-weight:800;
    margin-bottom:18px;
}

.comparison-bottom p{
    max-width:760px;
    margin:0 auto 35px;
    color:rgba(255,255,255,.92);
    font-size:17px;
    line-height:1.9;
}

.comparison-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 38px;
    background:#ffc107;
    color:#111827;
    font-weight:700;
    text-decoration:none;
    border-radius:50px;
    transition:.35s;
}

.comparison-btn:hover{
    background:#fff;
    color:#0d6efd;
    transform:translateY(-4px);
}

/*=====================================
Responsive
=====================================*/

@media(max-width:1200px){

.comparison-wrapper{
    grid-template-columns:1fr;
}

.comparison-center{
    order:2;
}

.comparison-positive{
    order:3;
}

}

@media(max-width:991px){

.google-comparison-section{
    padding:90px 0;
}

.comparison-card{
    padding:35px 30px;
}

.comparison-header h3{
    font-size:22px;
}

.comparison-bottom{
    padding:45px 30px;
}

.comparison-bottom h3{
    font-size:30px;
}

}

@media(max-width:768px){

.comparison-card{
    padding:30px 24px;
}

.comparison-header{
    flex-direction:column;
    text-align:center;
}

.comparison-card ul li{
    font-size:15px;
}

.vs-circle{
    width:75px;
    height:75px;
    font-size:22px;
}

.comparison-bottom h3{
    font-size:26px;
}

.comparison-bottom p{
    font-size:16px;
}

}

@media(max-width:576px){

.google-comparison-section{
    padding:70px 0;
}

.comparison-card{
    padding:25px 20px;
}

.comparison-icon{
    width:60px;
    height:60px;
    font-size:24px;
}

.comparison-header h3{
    font-size:20px;
}

.comparison-btn{
    width:100%;
    padding:16px;
}

}
/*==================================================
 GOOGLE RESULTS SECTION
==================================================*/

.google-results-section{
    position:relative;
    padding:110px 0;
    background:#f8fbff;
    overflow:hidden;
}

.google-results-section::before{
    content:"";
    position:absolute;
    top:-220px;
    right:-180px;
    width:460px;
    height:460px;
    border-radius:50%;
    background:rgba(13,110,253,.05);
}

.google-results-section::after{
    content:"";
    position:absolute;
    left:-150px;
    bottom:-150px;
    width:340px;
    height:340px;
    border-radius:50%;
    background:rgba(255,193,7,.08);
}

.google-results-section .container{
    position:relative;
    z-index:2;
}

/*==================================
Left Content
==================================*/

.results-content{
    padding-right:35px;
}

.results-content h3{
    font-size:38px;
    font-weight:700;
    color:#111827;
    margin-bottom:22px;
}

.results-content>p{
    color:#6b7280;
    font-size:17px;
    line-height:1.9;
    margin-bottom:40px;
}

/*==================================
Result List
==================================*/

.result-list{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.result-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:22px;
    background:#fff;
    border-radius:18px;
    border:1px solid #edf2f7;
    box-shadow:0 10px 28px rgba(0,0,0,.05);
    transition:.35s;
}

.result-item:hover{
    transform:translateX(10px);
    box-shadow:0 20px 45px rgba(13,110,253,.12);
}

.result-item i{
    width:60px;
    height:60px;
    border-radius:16px;
    background:linear-gradient(135deg,#16a34a,#15803d);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    flex-shrink:0;
}

.result-item h4{
    font-size:22px;
    font-weight:700;
    color:#111827;
    margin-bottom:8px;
}

.result-item p{
    margin:0;
    color:#6b7280;
    line-height:1.8;
}

/*==================================
Right Grid
==================================*/

.results-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.metric-card{
    position:relative;
    background:#fff;
    border-radius:22px;
    padding:40px 30px;
    text-align:center;
    overflow:hidden;
    border:1px solid #edf2f7;
    box-shadow:0 12px 35px rgba(15,23,42,.05);
    transition:.35s;
}

.metric-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#0d6efd,#00b7ff);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}

.metric-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(13,110,253,.15);
}

.metric-card:hover::before{
    transform:scaleX(1);
}

.metric-card span{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:#eaf2ff;
    color:#0d6efd;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:18px;
}

.metric-card h3{
    font-size:28px;
    font-weight:700;
    color:#111827;
    line-height:1.35;
    margin-bottom:14px;
}

.metric-card small{
    display:block;
    color:#6b7280;
    font-size:15px;
    line-height:1.7;
}

/*==================================
Responsive
==================================*/

@media(max-width:1200px){

.results-content{
    padding-right:20px;
}

.metric-card{
    padding:35px 25px;
}

}

@media(max-width:991px){

.google-results-section{
    padding:90px 0;
}

.results-content{
    padding-right:0;
    margin-bottom:50px;
}

.results-grid{
    margin-top:10px;
}

}

@media(max-width:768px){

.results-grid{
    grid-template-columns:1fr;
}

.results-content h3{
    font-size:32px;
}

.result-item{
    padding:20px;
}

.result-item h4{
    font-size:20px;
}

.metric-card h3{
    font-size:24px;
}

}

@media(max-width:576px){

.google-results-section{
    padding:70px 0;
}

.results-content{
    text-align:center;
}

.result-item{
    flex-direction:column;
    text-align:center;
}

.result-item i{
    margin:0 auto;
}

.results-content h3{
    font-size:28px;
}

.results-content>p{
    font-size:16px;
}

.metric-card{
    padding:30px 20px;
}

.metric-card h3{
    font-size:22px;
}

}

/*==================================================
 GOOGLE REVIEWS SECTION
==================================================*/

.google-review-section{
    position:relative;
    padding:110px 0;
    background:#ffffff;
    overflow:hidden;
}

.google-review-section::before{
    content:"";
    position:absolute;
    top:-220px;
    left:-180px;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(13,110,253,.05);
}

.google-review-section::after{
    content:"";
    position:absolute;
    bottom:-180px;
    right:-180px;
    width:380px;
    height:380px;
    border-radius:50%;
    background:rgba(255,193,7,.08);
}

.google-review-section .container{
    position:relative;
    z-index:2;
}

/*=====================================
Review Card
=====================================*/

.google-review-card{
    position:relative;
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:24px;
    padding:35px;
    height:100%;
    overflow:hidden;
    transition:.35s;
    box-shadow:0 12px 35px rgba(15,23,42,.05);
}

.google-review-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#4285F4,#EA4335,#FBBC05,#34A853);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}

.google-review-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(13,110,253,.12);
}

.google-review-card:hover::before{
    transform:scaleX(1);
}

/*=====================================
Top Area
=====================================*/

.review-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.review-user{
    display:flex;
    align-items:center;
    gap:16px;
}

.review-avatar{
    width:62px;
    height:62px;
    border-radius:50%;
    background:linear-gradient(135deg,#0d6efd,#0057d8);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:700;
    flex-shrink:0;
}

.review-user h4{
    margin:0 0 5px;
    font-size:20px;
    color:#111827;
    font-weight:700;
}

.review-user span{
    color:#6b7280;
    font-size:14px;
}

.review-top img{
    width:42px;
    height:auto;
}

/*=====================================
Stars
=====================================*/

.review-stars{
    font-size:22px;
    color:#fbbc05;
    letter-spacing:2px;
    margin-bottom:20px;
}

/*=====================================
Review Text
=====================================*/

.google-review-card p{
    color:#6b7280;
    font-size:16px;
    line-height:1.9;
    margin:0;
}

/*=====================================
Summary
=====================================*/

.review-summary{
    margin-top:70px;
    background:linear-gradient(135deg,#07142f,#0d6efd);
    border-radius:24px;
    padding:45px 55px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#fff;
    gap:30px;
    box-shadow:0 25px 60px rgba(13,110,253,.18);
}

.summary-left h3{
    margin:0 0 10px;
    font-size:38px;
    font-weight:800;
    color:#ffc107;
}

.summary-left p{
    margin:0;
    color:rgba(255,255,255,.90);
    font-size:17px;
}

.review-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 36px;
    border-radius:50px;
    background:#ffc107;
    color:#111827;
    font-weight:700;
    text-decoration:none;
    transition:.35s;
    white-space:nowrap;
}

.review-btn:hover{
    background:#fff;
    color:#0d6efd;
    transform:translateY(-4px);
}

/*=====================================
Responsive
=====================================*/

@media(max-width:1200px){

.review-summary{
    padding:40px;
}

.summary-left h3{
    font-size:34px;
}

}

@media(max-width:991px){

.google-review-section{
    padding:90px 0;
}

.review-summary{
    flex-direction:column;
    text-align:center;
}

}

@media(max-width:768px){

.google-review-card{
    padding:30px 25px;
}

.review-top{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
}

.review-top img{
    width:38px;
}

.summary-left h3{
    font-size:30px;
}

.summary-left p{
    font-size:16px;
}

.review-btn{
    width:100%;
}

}

@media(max-width:576px){

.google-review-section{
    padding:70px 0;
}

.google-review-card{
    padding:25px 20px;
}

.review-user{
    align-items:flex-start;
}

.review-avatar{
    width:55px;
    height:55px;
    font-size:20px;
}

.review-user h4{
    font-size:18px;
}

.review-stars{
    font-size:20px;
}

.google-review-card p{
    font-size:15px;
}

.review-summary{
    padding:35px 20px;
}

.summary-left h3{
    font-size:26px;
}

}

/*=========================================
 GOOGLE FAQ SECTION
=========================================*/

.google-faq-section{
    position:relative;
    padding:110px 0;
    background:#f8fbff;
    overflow:hidden;
}

.google-faq-section::before{
    content:"";
    position:absolute;
    top:-180px;
    left:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(13,110,253,.05);
}

.google-faq-section::after{
    content:"";
    position:absolute;
    right:-150px;
    bottom:-150px;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(255,193,7,.08);
}

.google-faq-section .container{
    position:relative;
    z-index:2;
}

/*=========================================
Accordion
=========================================*/

.google-faq{
    max-width:950px;
    margin:60px auto 0;
}

.google-faq .accordion-item{
    border:none;
    margin-bottom:22px;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 30px rgba(15,23,42,.06);
    transition:.35s;
}

.google-faq .accordion-item:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 45px rgba(13,110,253,.10);
}

/*=========================================
Button
=========================================*/

.google-faq .accordion-button{
    background:#fff;
    color:#111827;
    font-size:18px;
    font-weight:700;
    padding:24px 30px;
    border:none;
    box-shadow:none;
}

.google-faq .accordion-button:not(.collapsed){
    background:linear-gradient(135deg,#0d6efd,#0057d8);
    color:#fff;
}

.google-faq .accordion-button:focus{
    box-shadow:none;
}

.google-faq .accordion-button::after{
    background-size:18px;
    transition:.35s;
}

.google-faq .accordion-button:not(.collapsed)::after{
    filter:brightness(0) invert(1);
}

/*=========================================
Body
=========================================*/

.google-faq .accordion-body{
    padding:28px 30px;
    font-size:16px;
    line-height:1.9;
    color:#6b7280;
    background:#fff;
}

/*=========================================
Active Item
=========================================*/

.google-faq .accordion-item:has(.accordion-button:not(.collapsed)){
    border-left:5px solid #0d6efd;
}

/*=========================================
Responsive
=========================================*/

@media(max-width:991px){

.google-faq-section{
    padding:90px 0;
}

.google-faq{
    margin-top:50px;
}

}

@media(max-width:768px){

.google-faq .accordion-button{
    font-size:17px;
    padding:22px;
}

.google-faq .accordion-body{
    padding:22px;
    font-size:15px;
}

}

@media(max-width:576px){

.google-faq-section{
    padding:70px 0;
}

.google-faq .accordion-item{
    border-radius:14px;
    margin-bottom:16px;
}

.google-faq .accordion-button{
    padding:18px;
    font-size:16px;
}

.google-faq .accordion-body{
    padding:18px;
    font-size:15px;
}

}

/*=========================================
 LOCATION SECTION
=========================================*/

.service-location-section{
    position:relative;
    padding:110px 0;
    background:#ffffff;
    overflow:hidden;
}

.service-location-section::before{
    content:"";
    position:absolute;
    top:-180px;
    left:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(13,110,253,.05);
}

.service-location-section::after{
    content:"";
    position:absolute;
    right:-160px;
    bottom:-160px;
    width:360px;
    height:360px;
    border-radius:50%;
    background:rgba(255,193,7,.08);
}

.service-location-section .container{
    position:relative;
    z-index:2;
}

/*=========================================
Location Card
=========================================*/

.location-card{
    background:#fff;
    height:100%;
    border-radius:22px;
    padding:35px;
    border:1px solid #edf2f7;
    box-shadow:0 12px 35px rgba(15,23,42,.05);
    transition:.35s;
    position:relative;
    overflow:hidden;
}

.location-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#0d6efd,#00b8ff);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}

.location-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(13,110,253,.12);
}

.location-card:hover::before{
    transform:scaleX(1);
}

/*=========================================
Heading
=========================================*/

.location-card h3{
    font-size:26px;
    font-weight:700;
    color:#111827;
    margin-bottom:25px;
    padding-bottom:15px;
    border-bottom:2px solid #edf2f7;
}

/*=========================================
List
=========================================*/

.location-card ul{
    list-style:none;
    margin:0;
    padding:0;
}

.location-card ul li{
    margin-bottom:12px;
}

.location-card ul li:last-child{
    margin-bottom:0;
}

.location-card ul li a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-decoration:none;
    color:#4b5563;
    font-size:16px;
    font-weight:500;
    padding:12px 16px;
    border-radius:12px;
    transition:.30s;
}

.location-card ul li a::after{
    content:"\f105";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    color:#0d6efd;
    transition:.30s;
}

.location-card ul li a:hover{
    background:#eef5ff;
    color:#0d6efd;
    padding-left:22px;
}

.location-card ul li a:hover::after{
    transform:translateX(5px);
}

/*=========================================
Responsive
=========================================*/

@media(max-width:991px){

.service-location-section{
    padding:90px 0;
}

.location-card{
    padding:30px;
}

}

@media(max-width:768px){

.location-card{
    padding:25px;
}

.location-card h3{
    font-size:22px;
}

.location-card ul li a{
    font-size:15px;
}

}

@media(max-width:576px){

.service-location-section{
    padding:70px 0;
}

.location-card{
    padding:22px;
}

.location-card h3{
    font-size:20px;
}

.location-card ul li a{
    padding:10px 14px;
}

}

/*==================================================
 FINAL CTA SECTION
==================================================*/

.google-final-cta{
    position:relative;
    padding:120px 0;
    background:linear-gradient(135deg,#07142f 0%,#0d2d67 45%,#0d6efd 100%);
    overflow:hidden;
}

.google-final-cta::before{
    content:"";
    position:absolute;
    top:-220px;
    left:-220px;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
}

.google-final-cta::after{
    content:"";
    position:absolute;
    right:-180px;
    bottom:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
}

.google-final-cta .container{
    position:relative;
    z-index:2;
}

/*====================================
Left Content
====================================*/

.final-cta-content .section-badge{
    display:inline-block;
    padding:10px 22px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(12px);
    color:#fff;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    margin-bottom:25px;
}

.final-cta-content h2{
    color:#fff;
    font-size:48px;
    line-height:1.2;
    font-weight:800;
    margin-bottom:25px;
}

.final-cta-content p{
    color:rgba(255,255,255,.88);
    font-size:17px;
    line-height:1.9;
    margin-bottom:35px;
}

/*====================================
Features
====================================*/

.cta-feature-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:40px;
}

.cta-feature{
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(10px);
    border-radius:14px;
}

.cta-feature i{
    color:#22c55e;
    font-size:22px;
}

.cta-feature span{
    color:#fff;
    font-weight:600;
    font-size:15px;
}

/*====================================
Contact Boxes
====================================*/

.contact-action{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.call-box,
.whatsapp-box{
    flex:1;
    display:flex;
    align-items:center;
    gap:18px;
    text-decoration:none;
    padding:22px;
    border-radius:18px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.15);
    transition:.35s;
}

.call-box:hover,
.whatsapp-box:hover{
    background:#fff;
    transform:translateY(-5px);
}

.call-box i,
.whatsapp-box i{
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:#0d6efd;
    font-size:24px;
}

.whatsapp-box i{
    color:#16a34a;
}

.call-box small,
.whatsapp-box small{
    display:block;
    color:rgba(255,255,255,.75);
    margin-bottom:6px;
}

.call-box strong,
.whatsapp-box strong{
    color:#fff;
    font-size:18px;
}

.call-box:hover small,
.call-box:hover strong,
.whatsapp-box:hover small,
.whatsapp-box:hover strong{
    color:#111827;
}

/*====================================
Form
====================================*/

.final-contact-form{
    background:#fff;
    padding:45px;
    border-radius:24px;
    box-shadow:0 30px 70px rgba(0,0,0,.18);
}

.form-title{
    text-align:center;
    margin-bottom:30px;
}

.form-title h3{
    font-size:34px;
    font-weight:700;
    color:#111827;
    margin-bottom:12px;
}

.form-title p{
    color:#6b7280;
    line-height:1.8;
}

.final-contact-form input,
.final-contact-form textarea{
    width:100%;
    border:1px solid #dbe3ef;
    border-radius:12px;
    padding:16px 18px;
    margin-bottom:20px;
    outline:none;
    transition:.3s;
    font-size:15px;
}

.final-contact-form textarea{
    resize:none;
}

.final-contact-form input:focus,
.final-contact-form textarea:focus{
    border-color:#0d6efd;
    box-shadow:0 0 0 4px rgba(13,110,253,.12);
}

.final-contact-form button{
    width:100%;
    border:none;
    padding:18px;
    border-radius:12px;
    background:linear-gradient(135deg,#0d6efd,#0057d8);
    color:#fff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:.35s;
}

.final-contact-form button:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(13,110,253,.25);
}

/*====================================
Responsive
====================================*/

@media(max-width:1200px){

.final-cta-content h2{
    font-size:42px;
}

}

@media(max-width:991px){

.google-final-cta{
    padding:90px 0;
}

.final-cta-content{
    margin-bottom:40px;
}

.final-cta-content h2{
    font-size:38px;
}

}

@media(max-width:768px){

.cta-feature-list{
    grid-template-columns:1fr;
}

.contact-action{
    flex-direction:column;
}

.final-contact-form{
    padding:35px 25px;
}

.form-title h3{
    font-size:28px;
}

}

@media(max-width:576px){

.google-final-cta{
    padding:70px 0;
}

.final-cta-content h2{
    font-size:30px;
}

.final-cta-content p{
    font-size:16px;
}

.call-box,
.whatsapp-box{
    padding:18px;
}

.call-box i,
.whatsapp-box i{
    width:50px;
    height:50px;
    font-size:20px;
}

.call-box strong,
.whatsapp-box strong{
    font-size:16px;
}

.final-contact-form{
    padding:25px 20px;
}

.form-title h3{
    font-size:24px;
}

}

/*==================================================
 SEO CONTENT SECTION
==================================================*/

.google-seo-content{
    position:relative;
    padding:100px 0;
    background:#f8fbff;
    overflow:hidden;
}

.google-seo-content::before{
    content:"";
    position:absolute;
    top:-180px;
    left:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(13,110,253,.05);
}

.google-seo-content::after{
    content:"";
    position:absolute;
    right:-180px;
    bottom:-180px;
    width:380px;
    height:380px;
    border-radius:50%;
    background:rgba(255,193,7,.08);
}

.google-seo-content .container{
    position:relative;
    z-index:2;
}

/*=========================================
Content Box
=========================================*/

.seo-content-box{
    background:#ffffff;
    border-radius:28px;
    padding:60px;
    border:1px solid #edf2f7;
    box-shadow:0 20px 60px rgba(15,23,42,.06);
    position:relative;
    overflow:hidden;
}

.seo-content-box::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:6px;
    background:linear-gradient(90deg,#0d6efd,#00b7ff,#ffc107);
}

/*=========================================
Heading
=========================================*/

.seo-content-box .section-heading{
    max-width:900px;
    margin:0 auto 40px;
}

.seo-content-box .section-heading h2{
    font-size:42px;
    font-weight:800;
    color:#111827;
    line-height:1.25;
    margin-bottom:18px;
}

.seo-content-box .section-heading p{
    margin-bottom:0;
}

/*=========================================
Paragraphs
=========================================*/

.seo-content-box p{
    color:#4b5563;
    font-size:17px;
    line-height:2;
    margin-bottom:28px;
    text-align:justify;
}

.seo-content-box p:last-of-type{
    margin-bottom:45px;
}

/*=========================================
Service Tags
=========================================*/

.service-tags{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.service-tags span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 22px;
    background:#eef5ff;
    border:1px solid #d7e7ff;
    border-radius:50px;
    color:#0d6efd;
    font-size:15px;
    font-weight:600;
    transition:.35s;
    cursor:default;
}

.service-tags span:hover{
    background:linear-gradient(135deg,#0d6efd,#0057d8);
    color:#fff;
    border-color:#0d6efd;
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(13,110,253,.20);
}

/*=========================================
Decorative Quote
=========================================*/

.seo-content-box::after{
    content:"GOOGLE ADS";
    position:absolute;
    right:-25px;
    bottom:15px;
    font-size:80px;
    font-weight:800;
    color:rgba(13,110,253,.03);
    letter-spacing:4px;
    pointer-events:none;
    user-select:none;
}

/*=========================================
Responsive
=========================================*/

@media(max-width:1200px){

.seo-content-box{
    padding:50px;
}

.seo-content-box .section-heading h2{
    font-size:38px;
}

}

@media(max-width:991px){

.google-seo-content{
    padding:90px 0;
}

.seo-content-box{
    padding:40px;
}

.seo-content-box .section-heading h2{
    font-size:34px;
}

.seo-content-box p{
    text-align:left;
}

}

@media(max-width:768px){

.google-seo-content{
    padding:80px 0;
}

.seo-content-box{
    padding:35px 28px;
}

.seo-content-box .section-heading h2{
    font-size:30px;
}

.seo-content-box p{
    font-size:16px;
    line-height:1.9;
}

.service-tags{
    gap:12px;
}

.service-tags span{
    font-size:14px;
    padding:10px 18px;
}

.seo-content-box::after{
    font-size:55px;
    right:-10px;
}

}

@media(max-width:576px){

.google-seo-content{
    padding:70px 0;
}

.seo-content-box{
    padding:25px 20px;
    border-radius:20px;
}

.seo-content-box .section-heading{
    margin-bottom:30px;
}

.seo-content-box .section-heading h2{
    font-size:26px;
}

.seo-content-box p{
    font-size:15px;
    margin-bottom:22px;
}

.service-tags{
    gap:10px;
}

.service-tags span{
    width:100%;
    justify-content:center;
    padding:12px;
}

.seo-content-box::after{
    display:none;
}

}
/*=========================================
 PREMIUM MOBILE STICKY CTA
=========================================*/

.mobile-sticky-cta{
    position:fixed;
    left:15px;
    right:15px;
    bottom:15px;
    z-index:9999;

    display:none;

    background:#ffffff;
    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 15px 40px rgba(0,0,0,.12),
        0 5px 15px rgba(0,0,0,.08);

    border:1px solid rgba(13,110,253,.08);
}

.mobile-sticky-cta a{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;

    text-decoration:none;

    padding:14px 8px;

    transition:.35s;

    position:relative;
}

.mobile-sticky-cta a:not(:last-child){
    border-right:1px solid #edf2f7;
}

/*=============================
Icons
==============================*/

.mobile-sticky-cta i{
    width:44px;
    height:44px;

    border-radius:50%;

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

    font-size:18px;

    transition:.35s;
}

.mobile-sticky-cta span{
    font-size:13px;
    font-weight:700;
}

/*=============================
Call
==============================*/

.sticky-call i{
    background:#eaf2ff;
    color:#0d6efd;
}

.sticky-call span{
    color:#0d6efd;
}

.sticky-call:hover{
    background:#f4f8ff;
}

.sticky-call:hover i{
    background:#0d6efd;
    color:#fff;
    transform:translateY(-4px);
}

/*=============================
WhatsApp
==============================*/

.sticky-whatsapp i{
    background:#e9f9ef;
    color:#25D366;
}

.sticky-whatsapp span{
    color:#16a34a;
}

.sticky-whatsapp:hover{
    background:#f5fff8;
}

.sticky-whatsapp:hover i{
    background:#25D366;
    color:#fff;
    transform:translateY(-4px);
}

/*=============================
Quote
==============================*/

.sticky-quote{
    background:linear-gradient(135deg,#0d6efd,#0057d8);
}

.sticky-quote i{
    background:rgba(255,255,255,.15);
    color:#fff;
}

.sticky-quote span{
    color:#fff;
}

.sticky-quote:hover{
    background:linear-gradient(135deg,#0057d8,#003e99);
}

.sticky-quote:hover i{
    transform:translateY(-4px);
}

/*=============================
Animation
==============================*/

.sticky-call,
.sticky-whatsapp{
    overflow:hidden;
}

.sticky-call::before,
.sticky-whatsapp::before{

    content:"";

    position:absolute;

    width:100%;

    height:100%;

    left:-100%;

    top:0;

    background:rgba(255,255,255,.25);

    transition:.45s;

}

.sticky-call:hover::before,
.sticky-whatsapp:hover::before{

    left:100%;

}

/*=============================
Pulse
==============================*/

.sticky-whatsapp i{

    animation:whatsappPulse 2s infinite;

}

@keyframes whatsappPulse{

0%{
    box-shadow:0 0 0 0 rgba(37,211,102,.45);
}

70%{
    box-shadow:0 0 0 12px rgba(37,211,102,0);
}

100%{
    box-shadow:0 0 0 0 rgba(37,211,102,0);
}

}

/*=============================
Responsive
==============================*/

@media(max-width:991px){

.mobile-sticky-cta{

    display:flex;

}

body{

    padding-bottom:95px;

}

}

@media(max-width:576px){

.mobile-sticky-cta{

    left:10px;

    right:10px;

    bottom:10px;

    border-radius:15px;

}

.mobile-sticky-cta a{

    padding:12px 5px;

}

.mobile-sticky-cta i{

    width:38px;

    height:38px;

    font-size:16px;

}

.mobile-sticky-cta span{

    font-size:12px;

}

}

/*=========================================
TRUSTED SECTION
=========================================*/

.trusted-section{

    padding:90px 0;

    background:#fff;

}

.trusted-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.trusted-header span{

    display:inline-block;

    padding:10px 22px;

    background:#eef5ff;

    color:#0d6efd;

    border-radius:40px;

    font-weight:600;

    margin-bottom:18px;

}

.trusted-header h2{

    font-size:42px;

    font-weight:800;

    margin-bottom:18px;

}

.trusted-header p{

    color:#6b7280;

    line-height:1.9;

}

.trusted-wrapper{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:25px;

}

.trusted-item{

    background:#fff;

    border:1px solid #edf2f7;

    border-radius:18px;

    height:120px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

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

}

.trusted-item:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(13,110,253,.12);

}

.trusted-item img{

    max-width:130px;

    max-height:55px;

    filter:grayscale(100%);

    transition:.35s;

}

.trusted-item:hover img{

    filter:none;

    transform:scale(1.05);

}

@media(max-width:991px){

.trusted-wrapper{

    grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:576px){

.trusted-wrapper{

    grid-template-columns:repeat(2,1fr);

}

.trusted-header h2{

    font-size:30px;

}

.trusted-item{

    height:100px;

}

}