:root{
    --navy:#172d55;
    --navy-dark:#102443;
    --orange:#0CA684;
    --light:#f4f8ff;
    --white:#ffffff;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#fff;
}



.roof-navbar{
    padding:14px 0;
    background:#fff;
}

.logo{
    color:var(--navy);
    font-size:20px;
    font-weight:900;
    text-decoration:none;
}

.logo span{
    color:var(--orange);
}

.nav-pill{
    background:#f3f6fb;
    border-radius:40px;
    padding:7px 10px;
}

.nav-pill .nav-link{
    color:var(--navy) !important;
    font-size:13px;
    font-weight:800;
    padding:9px 17px !important;
    border-radius:30px;
}

.nav-pill .nav-link.active,
.nav-pill .nav-link:hover{
    background:#fff;
}

.quote-btn{
    background:var(--orange);
    color:#fff;
    text-decoration:none;
    padding:12px 22px;
    border-radius:30px;
    font-size:13px;
    font-weight:900;
}

.phone-btn{
    background:var(--navy);
    color:#fff;
    text-decoration:none;
    padding:12px 18px;
    border-radius:30px;
    font-size:13px;
    font-weight:900;
    margin-left:8px;
}

.hero-section{
    padding:0 26px 28px;
}

.hero-box{
    min-height:calc(100vh - 95px);
    border-radius:18px;
    overflow:hidden;
    position:relative;
    background:
        linear-gradient(90deg, rgba(18,34,60,.85) 0%, rgba(18,34,60,.62) 45%, rgba(18,34,60,.12) 100%),
        url("../images/hero-section-image.webp") center center/cover no-repeat;
}

.hero-content{
    padding:120px 0 0 48px;
    color:#fff;
    max-width:650px;
}

.rating{
    font-size:15px;
    font-weight:700;
    margin-bottom:18px;
}

.rating span{
    color:var(--orange);
}

.hero-content h1{
    font-size:64px;
    line-height:.98;
    font-weight:900;
    letter-spacing:-2.5px;
    margin-bottom:24px;
}

.hero-content p{
    max-width:520px;
    font-size:16px;
    line-height:1.7;
    font-weight:600;
    margin-bottom:26px;
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:14px;
}

.main-btn{
    background:var(--orange);
    color:#fff;
    text-decoration:none;
    padding:14px 24px;
    border-radius:30px;
    font-size:22px;
    font-weight:900;
}

.video-btn{
    width:50px;
    height:50px;
    background:#fff;
    color:var(--navy);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:13px;
    font-weight:900;
}

.watch-text{
    color:#fff;
    font-size:13px;
    font-weight:800;
}
.float-icon{
    width:45px;
    height:45px;
    background:#f5f8ff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0CA684;
    font-size:20px;
    margin-bottom:10px;
}

.float-icon i{
    display:block;
    color:#0CA684;
    font-size:20px;
    line-height:1;
}

.float-card{
    display:flex;
    align-items:center;
    gap:12px;
    
    background:#fff;
    padding:15px 18px;
    border-radius:10px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);

    font-size:14px;
    font-weight:700;
    color:#122D40;
}

.float-icon{
    width:45px;
    height:45px;
    min-width:45px;

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

    border-radius:50%;
    background:#F5F8FC;
    color:#0CA684;
    font-size:18px;
}

.float-card span{
    line-height:1.4;
}





/* floating cards */
.float-card{
    position:absolute;
    background:#fff;
    color:var(--navy);
    border-radius:10px;
    box-shadow:0 12px 35px rgba(0,0,0,.15);
    padding:15px;
    font-size:16px;
    font-weight:900;
    z-index:3;
}

.float-card img,
.float-icon{
    width:34px;
    height:34px;
    border-radius:50%;
    background:#f5f8ff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:8px;
    color:var(--orange);
}

.card-1{
    right:120px;
    top:95px;
}

.card-2{
    right:285px;
    top:230px;
}

.card-3{
    right:135px;
    bottom:95px;
}

.card-4{
    right:100px;
    bottom:300px;
}

.side-arrow{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:70px;
    background:var(--orange);
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:900;
}

@media(max-width:991px){
    .navbar-collapse{
        background:#f3f6fb;
        padding:18px;
        margin-top:12px;
        border-radius:15px;
    }

    .nav-pill{
        background:transparent;
        padding:0;
    }

    .nav-pill .nav-link{
        margin-bottom:6px;
    }

    .hero-section{
        padding:0 12px 25px;
    }

    .hero-box{
        min-height:auto;
    }

    .hero-content{
        padding:80px 25px;
    }

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

    .float-card,
    .side-arrow{
        display:none;
    }
}

@media(max-width:575px){
    .hero-content h1{
        font-size:38px;
    }

    .hero-actions{
        flex-wrap:wrap;
    }

    .top-bar{
        display:none;
    }
}


.roof-about{
    padding:90px 0 80px;
    background:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
}

.about-img-wrap{
    position:relative;
    max-width:360px;
    margin:auto;
}

.about-main-img{
    width:100%;
    height:420px;
    object-fit:cover;
    border-radius:18px;
    display:block;
}

.about-card{
    position:absolute;
    background:#fff;
    box-shadow:0 18px 40px rgba(0,0,0,.14);
    border-radius:12px;
}

.dark-card{
    left:-35px;
    top:95px;
    width:150px;
    background:#172d55;
    color:#fff;
    padding:22px 18px;
}

.dark-card p{
    margin:0;
    font-size:13px;
    line-height:1.5;
    font-weight:700;
}

.small-card{
    right:-38px;
    bottom:40px;
    width:120px;
    padding:18px;
    text-align:center;
    color:#172d55;
    font-weight:900;
}

.card-icon{
    width:42px;
    height:42px;
    background:#0CA684;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:12px;
}

.small-card .card-icon{
    margin:0 auto 10px;
}

.section-tag{
    color:#0CA684;
    font-size:13px;
    font-weight:900;
    letter-spacing:1px;
    display:block;
    margin-bottom:12px;
}

.about-content h2{
    color:#172d55;
    font-size:43px;
    line-height:1.05;
    font-weight:900;
    letter-spacing:-1px;
    margin-bottom:20px;
}

.about-content p{
    color:#5f6f86;
    font-size:15px;
    line-height:1.8;
    max-width:620px;
    margin-bottom:14px;
}

.about-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#0CA684;
    color:#fff;
    text-decoration:none;
    padding:13px 22px;
    border-radius:30px;
    font-size:13px;
    font-weight:900;
    margin-top:8px;
}

.about-btn span{
    width:25px;
    height:25px;
    background:#172d55;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
}

.stats-row{
    display:flex;
    gap:45px;
    margin-top:35px;
}

.stat-box h3{
    color:#172d55;
    font-size:31px;
    font-weight:900;
    margin-bottom:5px;
}

.stat-box p{
    color:#0CA684;
    font-size:12px;
    font-weight:800;
    margin:0;
}

@media(max-width:991px){
    .roof-about{
        padding:60px 0;
    }

    .about-content h2{
        font-size:34px;
    }

    .dark-card{
        left:10px;
    }

    .small-card{
        right:10px;
    }

    .stats-row{
        flex-wrap:wrap;
        gap:25px;
    }
}

@media(max-width:575px){
    .about-main-img{
        height:340px;
    }

    .about-card{
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        margin-top:15px;
        width:100%;
    }
}

.trust-services{
    padding:30px;
    background:#fff;
    font-family:Arial, Helvetica, sans-serif;
}

.trust-box{
    background:#172d55;
    border-radius:42px;
    padding:110px 80px 120px;
    width:100%;
    position:relative;
    overflow:hidden; 
    max-width:100%;
    margin:0 auto;
}

.trust-box::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(135deg, rgba(255,255,255,.025) 25%, transparent 25%) 0 0/180px 180px,
        linear-gradient(225deg, rgba(255,255,255,.025) 25%, transparent 25%) 0 0/180px 180px;
    opacity:.8;
}

.trust-box > *{
    position:relative;
    z-index:2;
}

.trust-tag{
    color:#0CA684;
    font-size:13px;
    font-weight:900;
    display:block;
    margin-bottom:18px;
}

.trust-box h2{
    color:#fff;
    font-size:54px;
    line-height:1.08;
    font-weight:900;
    letter-spacing:-1.5px;
    margin:0;
}

.trust-text{
    color:#fff;
    font-size:18px;
    line-height:1.55;
    font-weight:700;
    border-left:4px solid #0CA684;
    padding-left:30px;
    max-width:650px;
}

.roof-service-card{
    height:470px;
    border-radius:28px;
    overflow:hidden;
    position:relative;
    background:#08192f;
}

.roof-service-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.service-content{
    position:absolute;
    left:0;
    right:0;
    bottom:52px;
    margin:0 22px;
    background:rgba(0,0,0,.52);
    border-radius:20px;
    padding:48px 28px 40px; /* زودنا الـ padding-bottom */
    color:#fff;
}

.service-icon{
    width:64px;
    height:64px;
    background:#0CA684;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    position:absolute;
    top:-32px;
    right:36px;
}

.service-content h4{
    font-size:21px;
    font-weight:900;
    margin-bottom:10px;
}

.service-content p{
    font-size:14px;
    line-height:1.5;
    font-weight:700;
    margin:0;
}

.service-bottom{
    position:absolute;
    left:22px;
    right:22px;
    bottom:0;
    height:70px;
    background:#07172b;
    border-radius:0 0 20px 20px;
    padding:20px 28px;
}

.service-bottom a{
    color:#0CA684;
    font-size:16px;
    font-weight:900;
    text-decoration:underline;
}

@media(max-width:991px){
    .trust-box{
        padding:70px 25px;
        border-radius:28px;
    }

    .trust-box h2{
        font-size:38px;
        margin-bottom:25px;
    }

    .trust-text{
        font-size:15px;
    }

    .roof-service-card{
        height:430px;
    }
}

.pricing-section{
    padding:80px 0;
    background:#fff;
}

.pricing-box{
    background:#f5f7fc;
    border-radius:40px;
    padding:90px 50px;
}

.pricing-tag{
    color:#0CA684;
    font-size:13px;
    font-weight:900;
    letter-spacing:1px;
    display:block;
    margin-bottom:15px;
    text-align:center;
}

.pricing-box h2{
    text-align:center;
    color:#122D40;
    font-size:52px;
    line-height:1.1;
    font-weight:900;
    margin-bottom:15px;
}

.pricing-box p{
    text-align:center;
    color:#6b7a90;
    font-size:15px;
    margin-bottom:60px;
}

.pricing-card{
    background:#fff;
    border-radius:25px;
    padding:30px 22px;
    height:100%;
    transition:.3s;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.pricing-card:hover{
    transform:translateY(-8px);
}

.featured-card{
    background:var(--navy);
    color:#fff;
}

.featured-card h4,
.featured-card li{
    color:#fff;
}

.pricing-icon{
    width:60px;
    height:60px;
    background:var(--navy);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
    font-size:22px;
}

.featured-card .pricing-icon{
    background:#0CA684;
}

.pricing-card h4{
    color:var(--navy);
    font-size:20px;
    font-weight:800;
    margin-bottom:20px;
    min-height:55px;
}

.offer-price{
    color:#0CA684;
    font-size:42px;
    font-weight:900;
    margin-bottom:20px;
}

.offer-price span{
    font-size:18px;
    font-weight:700;
}

.pricing-card ul{
    list-style:none;
    padding:0;
    margin:0 0 25px;
}

.pricing-card ul li{
    font-size:14px;
    color:#5f6f86;
    margin-bottom:10px;
    line-height:1.6;
}

.pricing-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#0CA684;
    color:#fff;
    text-decoration:none;
    padding:12px 18px;
    border-radius:30px;
    font-size:13px;
    font-weight:900;
}

.pricing-btn span{
    width:24px;
    height:24px;
    background:var(--navy);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
}

@media(max-width:991px){

    .pricing-box{
        padding:60px 25px;
    }

    .pricing-box h2{
        font-size:36px;
    }

    .offer-price{
        font-size:34px;
    }
}

.reviews-section{
    padding:95px 0;
    background:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
}

.reviews-left{
    padding-top:65px;
}

.reviews-left h2{
    color:#122D40;
    font-size:30px;
    line-height:1.25;
    font-weight:900;
    margin-bottom:24px;
    max-width:390px;
}

.reviews-left p{
    color:#27384f;
    font-size:17px;
    line-height:1.8;
    margin-bottom:35px;
    max-width:420px;
}

.review-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#0CA684;
    color:#fff;
    padding:17px 34px;
    min-width:190px;
    border-radius:4px;
    text-decoration:none;
    font-size:14px;
    font-weight:900;
    letter-spacing:.3px;
}

.review-card{
    background:#f8f8f8;
    border-radius:6px;
    padding:38px 48px;
    display:flex;
    gap:38px;
    align-items:center;
    margin-bottom:32px;
}

.review-card img{
    width:245px;
    height:170px;
    object-fit:cover;
    border-radius:4px;
    flex-shrink:0;
}

.review-content{
    color:var(--navy);
}

.review-content p{
    font-size:24px;
    line-height:1.55;
    font-weight:500;
    color:var(--navy);
    margin-bottom:22px;
}

.quote-mark{
    color:var(--navy);
    font-size:36px;
    line-height:0;
    font-weight:900;
}

.review-content h4{
    color:var(--navy);
    font-size:18px;
    font-weight:900;
    margin-bottom:4px;
}

.review-content span{
    color:var(--navy);
    font-size:15px;
    font-weight:500;
}

@media(max-width:991px){
    .reviews-section{
        padding:70px 0;
    }

    .reviews-left{
        padding-top:0;
        margin-bottom:45px;
    }

    .reviews-left h2{
        font-size:28px;
    }

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

    .review-card img{
        width:210px;
        height:155px;
    }

    .review-content p{
        font-size:20px;
    }
}

@media(max-width:767px){
    .review-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .review-card img{
        width:100%;
        height:230px;
    }
}


.garage-split-section{
    padding:100px 0;
    background:#fff;
}

.split-box{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.split-item{
    background:#F5F8FC;
    padding:50px;
    border-radius:30px;
    border:2px solid transparent;
    transition:.4s;
}

.split-item:hover{
    border-color:#0CA684;
    transform:translateY(-5px);
}

.active-card{
    background:var(--navy);
    color:#fff;
}

.split-icon{
    width:75px;
    height:75px;
    border-radius:20px;
    background:#0CA684;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    margin-bottom:25px;
}

.split-item span{
    color:#0CA684;
    font-size:13px;
    font-weight:800;
    letter-spacing:1px;
    display:block;
    margin-bottom:15px;
}

.split-item h2{
    font-size:38px;
    font-weight:900;
    margin-bottom:20px;
    color:#122D40;
}

.active-card h2{
    color:#fff;
}

.split-item p{
    line-height:1.9;
    color:#64748B;
    margin-bottom:25px;
}

.active-card p{
    color:#dbe4ee;
}

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

.split-item ul li{
    margin-bottom:12px;
    padding-left:25px;
    position:relative;
    font-weight:600;
}

.split-item ul li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:#0CA684;
}

@media(max-width:991px){
    .split-box{
        grid-template-columns:1fr;
    }

    .split-item{
        padding:35px;
    }

    .split-item h2{
        font-size:30px;
    }
}

.contact-section{
    padding:100px 0;
    background:#fff;
}

.contact-box{
    overflow:hidden;
    border-radius:35px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.contact-map{
    height:100%;
    min-height:650px;
}

.contact-map iframe{
    width:100%;
    height:100%;
    border:0;
}

.contact-form-side{
    background:#172d55;
    padding:70px;
    height:100%;
}

.contact-tag{
    color:#0CA684;
    font-size:13px;
    font-weight:800;
    letter-spacing:1px;
    display:block;
    margin-bottom:15px;
}

.contact-form-side h2{
    color:#fff;
    font-size:42px;
    font-weight:900;
    margin-bottom:15px;
}

.contact-form-side p{
    color:#d8e1ea;
    margin-bottom:35px;
    line-height:1.8;
}

.contact-form-side input,
.contact-form-side textarea{
    width:100%;
    border:none;
    outline:none;
    margin-bottom:18px;
    padding:16px 20px;
    border-radius:12px;
    background:#fff;
}

.contact-form-side button{
    background:#0CA684;
    color:#fff;
    border:none;
    padding:16px 35px;
    border-radius:50px;
    font-weight:800;
    transition:.3s;
}

.contact-form-side button:hover{
    background:#08906f;
}

@media(max-width:991px){

    .contact-form-side{
        padding:40px 30px;
    }

    .contact-form-side h2{
        font-size:34px;
    }

    .contact-map{
        min-height:400px;
    }

}

.contact-heading{
    max-width:850px;
    margin:0 auto 60px;
}

.contact-subtitle{
    display:inline-block;
    color:#0CA684;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
    margin-bottom:15px;
}

.contact-heading h2{
    color:#122D40;
    font-size:52px;
    font-weight:900;
    line-height:1.15;
    margin-bottom:20px;
}

.contact-heading p{
    color:#64748B;
    font-size:17px;
    line-height:1.9;
    max-width:750px;
    margin:auto;
}

@media(max-width:991px){

    .contact-heading h2{
        font-size:36px;
    }

}

.why-garage-section{ padding:100px 0; background:#F5F8FC; } .section-title{ max-width:850px; margin:0 auto 60px; } .section-title span{ color:#0CA684; font-size:13px; font-weight:800; letter-spacing:2px; } .section-title h2{ color:#122D40; font-size:48px; font-weight:900; margin:15px 0 20px; } .section-title p{ color:#64748B; line-height:1.8; } .why-card{ background:#fff; padding:40px; border-radius:25px; height:100%; transition:.3s; box-shadow:0 15px 40px rgba(0,0,0,.06); } .why-card:hover{ transform:translateY(-8px); } .featured{ background:#172d55; } .featured h4, .featured p{ color:#fff !important; } .why-icon{ width:75px; height:75px; border-radius:20px; background:#0CA684; color:#fff; display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:25px; } .why-card h4{ color:#122D40; font-size:24px; font-weight:800; margin-bottom:18px; } .why-card p{ color:#64748B; line-height:1.9; margin:0; }


.service-area-section{ padding:90px 0; background:#F5F8FC; } .service-card-area{ background:#fff; padding:40px; border-radius:25px; box-shadow:0 15px 40px rgba(0,0,0,.06); height:100%; } .service-card-area h4{ color:#122D40; font-size:24px; font-weight:800; margin-bottom:25px; } .service-card-area h4 i{ color:#0CA684; margin-right:10px; } .service-card-area ul{ list-style:none; padding:0; margin:0; } .service-card-area ul li{ padding:10px 0; border-bottom:1px solid #edf2f7; color:#475569; font-weight:600; } .zip-note{ margin-top:20px; color:#64748B; line-height:1.8; }

.stats-section{ padding:90px 0; background:#ffffff; } .stats-box{ background:#172d55; border-radius:35px; padding:70px 40px; overflow:hidden; position:relative; } .stats-box::before{ content:""; position:absolute; top:-100px; right:-100px; width:280px; height:280px; background:rgba(12,166,132,.08); border-radius:50%; } .stat-item{ position:relative; z-index:2; } .stat-icon{ width:85px; height:85px; margin:0 auto 25px; border-radius:50%; background:#0CA684; color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; } .stat-item h2{ color:#fff; font-size:56px; font-weight:900; margin-bottom:10px; } .stat-item p{ color:#d6e1ea; font-size:17px; font-weight:600; margin:0; } @media(max-width:991px){ .stat-item{ margin-bottom:40px; } .stats-box{ padding:50px 25px; } .stat-item h2{ font-size:42px; } }
.section-heading{
    max-width:800px;
    margin:0 auto 60px;
}

.section-tag{
    display:inline-block;
    color:#0CA684;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.section-heading h2{
    color:#172d55;
    font-size:48px;
    font-weight:900;
    line-height:1.2;
    margin-bottom:18px;
}

.section-heading p{
    color:#64748B;
    font-size:17px;
    line-height:1.8;
    margin:0;
}

@media(max-width:991px){
    .section-heading h2{
        font-size:34px;
    }
}


.faq-brands-section{
    padding:100px 0;
    background:#F5F8FC;
    overflow:hidden;
}

.section-heading{
    max-width:850px;
    margin:0 auto 60px;
}

.section-heading span{
    color:#0CA684;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
}

.section-heading h2{
    color:#122D40;
    font-size:46px;
    font-weight:900;
    margin:15px 0;
}

.section-heading p{
    color:#64748B;
    line-height:1.8;
}

.faq-box,
.brands-box{
    animation:fadeUp .9s ease both;
}

.brands-box{
    animation-delay:.2s;
}

.faq-item{
    background:#fff;
    padding:25px 30px;
    border-radius:18px;
    margin-bottom:18px;
    border-left:5px solid #0CA684;
    box-shadow:0 12px 35px rgba(0,0,0,.05);
    transition:.3s;
}

.faq-item:hover{
    transform:translateX(8px);
}

.faq-item h4{
    color:#122D40;
    font-size:20px;
    font-weight:800;
    margin-bottom:10px;
}

.faq-item p{
    color:#64748B;
    line-height:1.7;
    margin:0;
}

.brands-box{
    background:#172d55;
    border-radius:28px;
    padding:40px;
    color:#fff;
    position:sticky;
    top:30px;
}

.brands-box h3{
    font-size:30px;
    font-weight:900;
    margin-bottom:25px;
}

.brands-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin-bottom:30px;
}

.brands-grid div{
    background:#172d55;
    border:1px solid rgba(255,255,255,.12);
    padding:15px;
    border-radius:14px;
    text-align:center;
    font-weight:800;
    transition:.3s;
}

.brands-grid div:hover{
    background:#0CA684;
    transform:translateY(-5px);
}

.brands-btn{
    display:inline-block;
    background:#0CA684;
    color:#fff;
    text-decoration:none;
    padding:15px 28px;
    border-radius:40px;
    font-weight:800;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:991px){
    .section-heading h2{
        font-size:34px;
    }

    .brands-box{
        position:relative;
        top:0;
    }
}


.copyright-info{ background:#172d55; padding:70px 0 25px; } .copyright-card{ text-align:center; color:#fff; padding:30px; } .copyright-card i{ width:70px; height:70px; background:#0CA684; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:24px; } .copyright-card h4{ font-size:22px; font-weight:800; margin-bottom:15px; } .copyright-card p{ color:#dbe5ee; line-height:1.9; margin:0; } .copyright-bottom{ margin-top:40px; padding-top:25px; border-top:1px solid rgba(255,255,255,.1); text-align:center; color:#cbd5e1; font-size:14px; }

.services-links-section{
    padding:90px 0;
    background:#F5F8FC;
}

.services-title{
    max-width:800px;
    margin:0 auto 40px;
}

.services-title span{
    color:#0CA684;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
}

.services-title h2{
    color:var(--navy);
    font-size:48px;
    font-weight:900;
    margin:15px 0;
}

.services-title p{
    color:#64748B;
    font-size:17px;
    line-height:1.8;
}

.service-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.service-links a{
    background:var(--navy);
    color:#fff;
    text-decoration:none;
    padding:15px 25px;
    border-radius:50px;
    font-weight:700;
    transition:.3s;
}

.service-links a:hover{
    background:#0CA684;
    transform:translateY(-4px);
}

@media(max-width:991px){
    .services-title h2{
        font-size:34px;
    }
}


.contact-links{
    margin:0;
}

.contact-links a{
    color:#dbe5ee;
    text-decoration:none;
    display:inline-block;
    margin-bottom:12px;
    transition:.3s;
    font-weight:600;
}

.contact-links a i{
    color:#0CA684;
    margin-right:10px;
    width:20px;
}

.contact-links a:hover{
    color:#0CA684;
    padding-left:5px;
}


  /* RESET */
*, *::before, *::after {
    box-sizing: border-box;
}

/* FORM WRAPPER */
form.CUS {
    max-width: 900px;
    width: 100%;
    margin: 20px auto;
    padding: 20px;
    background: #f9fafb;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: system-ui, sans-serif;
}

/* FLEX FIELDSET */
form.CUS fieldset {
    display: flex;
    flex-wrap: wrap;
    border: none;
    padding: 0;
    margin: 0;
}

/* BASE BLOCK STYLE */
form.CUS fieldset > p {
    width: 100%;
    padding: 10px;
    margin: 0;
    font-size: 0.95rem;
    color: #444;
}

/* Universal input/select styling */
form.CUS input,
form.CUS select,
form.CUS textarea {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

/* ===============================
   ROW 1: Name, Phone, Address
=============================== */
form.CUS fieldset > p:nth-of-type(1),
form.CUS fieldset > p:nth-of-type(2),
form.CUS fieldset > p:nth-of-type(3) {
    width: 33.333%;
}

/* ===============================
   ROW 2: City, State, Zip Code
=============================== */
form.CUS fieldset > p:nth-of-type(4),
form.CUS fieldset > p:nth-of-type(5),
form.CUS fieldset > p:nth-of-type(6) {
    width: 33.333%;
}

/* ===============================
   SERVICE NEEDED TEXTAREA
=============================== */
form.CUS fieldset > p:nth-of-type(7) {
    width: 100%;
}

/* ===============================
   SERVICE DATE (Month, Day, Year)
   → ALL 3 IN ONE ROW
=============================== */

/* Make the 8th <p> (Service Date block) a flex row */
form.CUS fieldset > p:nth-of-type(8) {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: flex-start;
}

/* Month, Day, Year = 3 equal flex columns */
form.CUS fieldset > p:nth-of-type(8) select#service_date,
form.CUS fieldset > p:nth-of-type(8) select#service_day,
form.CUS fieldset > p:nth-of-type(8) input#service_year {
    flex: 1 1 0;
    width: auto;          /* flex handles width */
    margin-top: 6px;
}

/* ===============================
   SERVICE TIME (Full width)
=============================== */
form.CUS fieldset > p:nth-of-type(9) {
    width: 100%;
}

/* ===============================
   SUBMIT BUTTON (Full width)
=============================== */
form.CUS fieldset > p:nth-of-type(10) {
    width: 100%;
}

form.CUS input[type="submit"] {
    width: 100%;
    background: #0CA684;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

form.CUS input[type="submit"]:hover {
    background: #0CA684;
}

/* Hide honeypot */
form.CUS input.subject {
    display: none;
}

/* ===============================
   MOBILE RESPONSIVE (stack fields)
=============================== */
@media (max-width: 600px) {

    form.CUS fieldset > p {
        width: 100%;
        padding: 6px 0;
    }

    /* Month, Day, Year full width stacked on mobile */
    form.CUS fieldset > p:nth-of-type(8) {
        flex-direction: column;
        gap: 6px;
    }

    form.CUS fieldset > p:nth-of-type(8) select#service_date,
    form.CUS fieldset > p:nth-of-type(8) select#service_day,
    form.CUS fieldset > p:nth-of-type(8) input#service_year {
        flex: none;
        width: 100% !important;
    }
/* ===============================
   ROW 1: Name, Phone, Address
=============================== */
form.CUS fieldset > p:nth-of-type(1),
form.CUS fieldset > p:nth-of-type(2),
form.CUS fieldset > p:nth-of-type(3) {
    width: 100%;
}

/* ===============================
   ROW 2: City, State, Zip Code
=============================== */
form.CUS fieldset > p:nth-of-type(4),
form.CUS fieldset > p:nth-of-type(5),
form.CUS fieldset > p:nth-of-type(6) {
    width: 100%;
}
}