/* ===========================
   BALAJI CONSTRUCTION
   Premium Theme
=========================== */

:root{
    --primary:#7CBBAE;
    --secondary:#192523;
    --background:#F4FBF9;
    --text:#192523;
    --white:#FFFFFF;
}

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

body{
    font-family:'Poppins',sans-serif;
    background:var(--white);
    color:var(--text);
}


/* ===========================
   TOP CONTACT BAR
   =========================== */

.top-contact-bar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:38px;
    background:var(--secondary);
    color:var(--white);
    z-index:1001;
}

.top-contact-inner{
    width:100%;
    height:100%;
    padding:0 4%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.top-contact-inner a{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--white);
    text-decoration:none;
    font-size:13px;
    font-weight:500;
    transition:.3s;
}

.top-contact-inner a:hover{
    color:var(--primary);
}

.top-contact-inner i{
    color:var(--primary);
    font-size:13px;
}

/* Move the main fixed header below the contact bar */
.header{
    top:38px;
}

/* Keep the mobile menu aligned below the shifted header */
@media(max-width:768px){
    .top-contact-bar{
        height:34px;
    }

    .top-contact-inner{
        padding:0 15px;
    }

    .top-contact-inner a{
        font-size:11px;
        gap:5px;
    }

    .top-contact-inner i{
        font-size:11px;
    }

    .header{
        top:34px;
    }

    .nav-links{
        top:95px;
    }
}

/* HEADER */

.header{
    /*position:fixed;*/
    width:100%;
    top:0;
    left:0;
    /* padding:18px 8%; */
    display:flex;
    justify-content:space-between;
    align-items:center;
    /*background:rgba(255,255,255,.95);
    backdrop-filter:blur(12px);*/
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    z-index:999;
    min-height:84px;
	margin-top:40px;
}

.logo img{
    height:100px;
    width:auto;
    display:block;
}

nav ul{
    display:flex;
    list-style:none;
    gap:35px;
}

nav ul li a{
    text-decoration:none;
    color:var(--text);
    font-weight:500;
    transition:.3s;
}

nav ul li a:hover{
    color:var(--primary);
}

.quote-btn{
    background:var(--primary);
    color:var(--white);
    padding:12px 28px;
    border-radius:40px;
    text-decoration:none;
    transition:.3s;
}

.quote-btn:hover{
    background:var(--secondary);
}

/* HERO */

.hero{
    height:90vh;
    background:url("../images/bcbanner.png") center center/cover no-repeat;
    display:flex;
    align-items:center;
  //  position:relative;
   min-height:650px;
}

.overlay{
    position:absolute;
    width:100%;
    height:100%;
  //  background:rgba(0,0,0,.55);
}

.hero-content{
    position:relative;
    z-index:2;
    color:var(--white);
    padding-left:8%;
    max-width:700px;
     animation: fadeUp 1s ease;
}
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.hero::before{
    content:"";
    position:absolute;
    inset:0;
  /*  background:rgba(0,0,0,0.45);*/
}
/*
.hero{
    position:relative;
    height:100vh;
    overflow:hidden;
}

.hero-video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
}

.hero-content{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:white;
    text-align:center;
}*/

.hero-content h3{
    color:var(--primary);
    letter-spacing:3px;
    margin-bottom:15px;
}

.hero-content h1{
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--white);
}

.hero-content h1 span{
    color:var(--primary);
}

.hero-content p{
   font-size: 1.2rem;
    line-height: 1.8;
    max-width: 600px;
    color: rgba(255,255,255,0.9);
}

.hero-buttons{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 45px;
}

.gold-btn,
.white-btn{
    text-decoration:none;
    padding:15px 35px;
    border-radius:40px;
    transition:.3s;
    font-weight:600;
}

.gold-btn{
    background:var(--primary);
    color:var(--white);
}

.gold-btn:hover{
    transform:translateY(-4px);
   box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

.white-btn{
    background:var(--white);
    color:var(--text);
}

.white-btn:hover{
    background:var(--primary);
    color:var(--white);
}

/* MOBILE */

@media(max-width:768px){

.header{
  //  flex-direction:column;
    gap:15px;
   padding:10px 0px;
}

nav ul{
    gap:15px;
}

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

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

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

.about{
    padding:100px 0;
    background:var(--background);
}

.about-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    max-width:1200px;
    margin:auto;
}

.about-image{
    flex:1;
}

.about-image img{
    width:100%;
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.about-content{
    flex:1;
}

.section-tag{
    color:var(--primary);
    font-weight:700;
    letter-spacing:3px;
   font-size:20px;
}

.about-content h2{
    font-size:52px;
   // margin:20px 0;
    color:var(--text);
   line-height:1.2;
   font-weight:700;
}

.about-content p {
	font-size: 20px;
	color: #52635F;
	line-height: 1.8;
	margin-bottom: 30px;
	text-align: justify;
	margin-top: 10px;
}

.about-features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin-bottom:35px;
}

.about-features div{
    font-weight:600;
    color:var(--text);
}

.about-btn{
    display:inline-block;
    padding:15px 35px;
    background:var(--primary);
    color:var(--white);
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

.about-btn:hover{
    background:var(--secondary);
    transform:translateY(-3px);
}

.about-image img{
    transition: .4s ease;
}

.about-image img:hover{
    transform: scale(1.03);
}
.fa-circle-check{
   color:var(--primary);
   margin-right:10px;
}
/* Mobile */

@media(max-width:768px){

    .about-container{
        flex-direction:column;
    }

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

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

}
/* ===========================
   Founder Section
=========================== 

.founder{
    padding:50px 8%;
    background:var(--white);
}

.founder-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
}

.founder-image{
    flex:1;
    text-align:center;
}

.founder-image img{
    width:360px;
    height:360px;
    object-fit:cover;
    border-radius:50%;
    border:8px solid var(--primary);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.founder-content{
    flex:1;
}

.founder-content h2{
    font-size:42px;
    margin:15px 0;
    color:var(--text);
}

.founder-content h4{
    color:var(--primary);
    margin-bottom:20px;
    font-size:22px;
}

.founder-content p{
    color:#52635F;
    line-height:1.9;
    font-size:17px;
    margin-bottom:30px;
}

.founder-details{
    display:flex;
    flex-direction:column;
    gap:15px;
    margin-bottom:30px;
}

.detail-box{
    background:var(--background);
    padding:15px 20px;
    border-left:5px solid var(--primary);
    border-radius:10px;
    font-weight:600;
    color:var(--text);
}
.detail-box img{
    width:24px;
    height:24px;
    margin-right:12px;
}
blockquote{
    margin-top:20px;
    padding-left:20px;
    border-left:4px solid var(--primary);
    color:#52635F;
    font-style:italic;
    line-height:1.8;
}

@media(max-width:768px){

    .founder-container{
        flex-direction:column;
        text-align:center;
    }

    .founder-image img{
        width:260px;
        height:260px;
    }

    .detail-box{
        text-align:left;
    }

}*/

/* Founder */

.founder-section{
   // padding:100px 0;
    background:linear-gradient(to bottom,var(--white),var(--background));
}

.founder-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
}

.founder-image{
    flex:1;
    text-align:center;
  // padding-top:30px;
}

.founder-image img{
    width:100%;
    max-width:420px;
    border:6px solid var(--primary);
    border-radius:24px;
    box-shadow:0 25px 50px rgba(0,0,0,.18);
   margin-top:25px;
}

.founder-image img:hover{
    transform:scale(1.03);
}

.founder-content{
    flex:1;
}

.section-tag{
    color:var(--primary);
    font-weight:700;
    letter-spacing:4px;
   font-size:20px;
}

.founder-content h2 {
	font-size: 40px;
	line-height: 1.2;
	margin: 15px 0;
}

.founder-content h4{
    color:var(--primary);
    margin-bottom:20px;
    font-size:24px;
}

.founder-content p {
	color: #52635F;
	line-height: 1.9;
	font-size: 18px;
	text-align: justify;
	margin-right: 30px;
}

.founder-features{
    margin:35px 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.founder-card{
    background:var(--white);
    border-radius:16px;
    padding:16px 20px;
    min-height:70px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.founder-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.founder-quote{
    background:var(--white);
    border-left:5px solid var(--primary);
    padding:20px;
   margin-top:25px;
    border-radius:15px;
    font-style:italic;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
	margin-right:30px;
}
@media(max-width:768px){

.founder-container{
    flex-direction:column;
    text-align:center;
}

.founder-image img{
    width:260px;
    height:320px;
}

.founder-content h2{
    font-size:26px;
}

.founder-content h4{
    font-size:18px;
}

.founder-content p {
	font-size: 16px;
	text-align: justify;
	margin-left: 20px;
	margin-right: 20px;
}

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

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

.founder-quote {
	text-align: justify;
	margin-left: 20px;
	margin-right: 20px;
}

}
.reveal-left,
.reveal-right,
.reveal-up{
    opacity:0;
    transition:all .9s ease;
}

.reveal-left{
    transform:translateX(-80px);
}

.reveal-right{
    transform:translateX(80px);
}

.reveal-up{
    transform:translateY(50px);
}

.show{
    opacity:1;
    transform:translate(0,0);
}

.delay1{transition-delay:.2s;}
.delay2{transition-delay:.3s;}
.delay3{transition-delay:.4s;}
.delay4{transition-delay:.5s;}
.delay4{transition-delay:.6s;}

.founder-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:30px;
}
/* about as*/

@media (max-width: 768px) {

    .about {
        padding: 60px 20px;
    }

    .about-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .about-image {
        width: 100%;
    }

    .about-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: 20px;
    }

    .about-content {
        width: 100%;
        text-align: justify; /* center-க்கு பதிலா left */
    }

    .about-content h2 {
        font-size: 2rem;
        line-height: 1.3;
        margin-bottom: 15px;
    }

    .about-content p {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 20px;
    }

    .about-features div {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        margin-bottom: 15px;
    }

    .about-btn {
        display: inline-block;
        margin-top: 20px;
    }
}
/* ==========================
   MOBILE RESPONSIVE
========================== */

@media (max-width: 768px) {

    header{
        padding: 12px 20px;
    }

    nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo img{
        height: 100px;
       width: 350px;
    }

    

}
@media (max-width: 768px) {

    .hero{
        height: 85vh;
        padding: 40px 20px;
    }

    .hero-content{
        text-align: center;
        width: 90%;
       max-width:500px;
       margin-top:100px;
    }

    .hero-content h1{
       font-size: clamp(2rem, 8vw, 4rem);
  line-height: 1.1;
    }

    .hero-content p{
        font-size: clamp(1rem, 4vw, 1.3rem);
  line-height: 1.6;
    }

    .hero-buttons{
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .hero-buttons a{
        width: 100%;
        text-align: center;
       max-width:350px;
       margin:auto;
    }

    video{
        object-fit: cover;
    }

}
@media (max-width: 768px){

    
   .quote-btn{
      display: none;
   }
}
/* Service code */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}


.services-page{
    padding:80px 8%;
    background:var(--background);
}


.services-header{
    text-align:center;
    margin-bottom:50px;
}


.services-header h1{
    font-size:45px;
    color:var(--primary);
}


.services-header p{
    max-width:700px;
    margin:15px auto;
    color:#52635F;
    line-height:1.7;
}



.services-container{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}



.service-card{

    background:white;
    padding:35px 25px;
    text-align:center;
    border-radius:15px;
    transition:0.4s ease;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}


.service-card i{

    font-size:45px;
    color:var(--primary);
    margin-bottom:20px;
	transition:0.4s;

}


.service-card h2{

    font-size:22px;
    margin-bottom:15px;
    color:var(--text);

}


.service-card p{

    color:#52635F;
    line-height:1.6;
    font-size:15px;

}


.service-card a{

    display:inline-block;
    margin-top:20px;
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
  transition:0.3s;
}

.service-card:hover a{
    letter-spacing:1px;
    color:var(--primary);
}

.service-card:hover{

    transform:translateY(-12px);
    box-shadow:0 20px 40px rgba(0,0,0,0.15);

}
.service-card:hover i{
    transform:scale(1.2) rotate(8deg);
    color:var(--primary);
}


/* Mobile */

@media(max-width:992px){

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

}



@media(max-width:600px){

.services-page{
    padding:50px 20px;
}


.services-header h1{
    font-size:32px;
}


.services-container{
    grid-template-columns:1fr;
}


}
/* service mobile responsive */
@media (max-width:768px){

.service-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 20px rgba(0,0,0,0.12);
}

.service-card:hover img,
.service-card:hover i{
    transform:scale(1.08);
}

}

/* why choose */
.why-choose{
    padding:100px 8%;
    background:var(--white);
}

.section-title{
    text-align:center;
    max-width:700px;
    margin:auto;
    margin-bottom:60px;
}

.section-title span{
    color:var(--primary);
    font-size:42px;
    font-weight:600;
    letter-spacing:2px;
}

.section-title h2{
    font-size:32px;
    margin:15px 0;
    color:var(--text);
}

.section-title p{
    color:#52635F;
    line-height:1.8;
}
.why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	gap: 30px;
	margin-left: 30px;
	margin-right: 30px;
}

.why-card{
    background:var(--white);
    border-radius:18px;
    padding:35px;
    text-align:center;
    border:1px solid #D7E7E3;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.4s ease;
}

.why-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.icon{
    width:80px;
    height:80px;
    margin:auto;
    border-radius:50%;
    background:var(--background);
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:25px;
}

.icon i{
    font-size:34px;
    color:var(--primary);
}

.why-card h3{
    font-size:24px;
    margin-bottom:15px;
    color:var(--text);
}

.why-card p{
    color:#52635F;
    line-height:1.8;
}

@media(max-width:768px){

.why-choose{
    padding:70px 20px;
}

.section-title h2{
    font-size:32px;
}

}
/*why choose end
//project gallery*/
/* ===== Projects Carousel ===== */

.projects-section{
    padding:80px 20px;
    background:var(--background);
}

.projectSwiper{
    padding:20px 10px 60px;
}

.project-card{
    background:var(--white);
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    transition:.4s;
}

.project-card:hover{
    transform:translateY(-10px);
}

.project-card img{
    width:100%;
    height:250px;
    object-fit:cover;
    transition:.4s;
}

.project-card:hover img{
    transform:scale(1.08);
}

.project-content{
    padding:20px;
}

.project-content h3{
    font-size:22px;
    margin-bottom:10px;
    color:var(--text);
}

.project-content p{
    color:#52635F;
    margin-bottom:15px;
}

.project-content a{
    color:var(--primary);
    font-weight:600;
    text-decoration:none;
}

.swiper-button-next,
.swiper-button-prev{
    color:var(--primary);
}

.swiper-pagination-bullet-active{
    background:var(--primary);
}

/* Tablet */
@media(max-width:768px){

    .project-card img{
        height:220px;
    }

    .project-content h3{
        font-size:20px;
    }

}

/* Mobile */
@media(max-width:480px){

    .projects-section{
        padding:60px 15px;
    }

    .project-card img{
        height:200px;
    }

    .project-content{
        padding:15px;
    }

    .project-content h3{
        font-size:18px;
    }

}
/* gallery end
//testimonials */
.testimonials{
    padding:100px 8%;
    background:var(--white);
}

.testimonial-grid {
	 display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1400px;
    margin: 60px auto;
    padding: 0 20px;
}

/*.testimonial-card{
    background:var(--white);
    border:1px solid #D7E7E3;
    border-radius:20px;
    padding:35px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.4s;
}

.testimonial-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}
*/
.testimonial-card{
    background: var(--white);
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.testimonial-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}
.quote{
   position:absolute;
    top:-28px;
    left:30px;
    width:60px;
    height:60px;
    background:var(--primary);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(200,155,60,.35);
    transition:.4s ease;
}

.testimonial-card p{
    color:#52635F;
    line-height:1.8;
    margin-bottom:25px;
}

.client{
    display:flex;
    align-items:center;
    gap:15px;
}

.client img{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
	transition:.4s ease;
}
.testimonial-card:hover .client img{
    transform:scale(1.1);
}
/*.client h4{
    margin-bottom:5px;
    color:var(--text);
}*/
.client h4{
    transition:.3s;
}

.testimonial-card:hover .client h4{
    color:var(--primary);
}

.client span{
    color:#888;
    font-size:14px;
}
.stars{
    color:var(--primary);
    margin-bottom:15px;
}

.stars i{
    margin-right:3px;
    font-size:16px;
}
.quote i{
    color:var(--white);
    font-size:24px;
}
.testimonial-card:hover .quote{
    background:var(--primary);
     transform:rotate(-10deg) scale(1.08);
}

.testimonial-card:hover .quote i{
    color:var(--white);
}
/*
@media(max-width:768px){
    .testimonials{
        padding:70px 20px;
    }
}*/
@media (max-width:768px){

    .testimonials{
        padding:60px 20px;
    }

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

    .section-title p{
        font-size:15px;
        line-height:1.7;
    }

    .testimonial-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:20px;
		
    }

    .testimonial-card{
         padding:55px 20px 25px;
    }

    .quote{
       width:50px;
        height:50px;
        top:-25px;
        left:20px;
    }

    .quote i{
        font-size:20px;
    }

    .stars{
        font-size:15px;
        margin-bottom:12px;
    }

    .testimonial-card p{
        font-size:15px;
        line-height:1.8;
        margin-bottom:20px;
    }

    .client{
        display:flex;
        align-items:center;
        gap:12px;
    }

    .client img{
        width:55px;
        height:55px;
        border-radius:50%;
        object-fit:cover;
    }

    .client h4{
        font-size:17px;
        margin-bottom:3px;
    }

    .client span{
        font-size:13px;
    }

}
/* /tes end
//contact form */
.contact{
    padding:100px 8%;
    background:var(--background);
    margin-top:40px;
}

.contact-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	margin-left: -15px;
	margin-right: -15px;
}
.info-box{
    display:flex;
    gap:20px;
    margin-bottom:30px;
}

.info-box i{
    width:60px;
    height:60px;
    background:var(--primary);
    color:var(--white);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.contact-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact-form input,
.contact-form textarea{
    padding:16px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:16px;
}

.contact-form button{
    padding:16px;
    background:var(--primary);
    color:var(--white);
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
}

.contact-form button:hover{
    background:var(--secondary);
}

.whatsapp-btn{
    display:inline-block;
    text-align:center;
    padding:16px;
    background:#25D366;
    color:var(--white);
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
}

.whatsapp-btn:hover{
    background:#1da851;
}


//end contact

//map
.map-section{
    padding:100px 8%;
    background:var(--white);
}

.map-container{
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.1);
}

.map-container iframe{
    width:100%;
    height:450px;
    display:block;
}

@media(max-width:768px){
    .map-section{
        /*padding:70px 20px;*/
		margin-top:-80px;
    }

    .map-container iframe{
        height:300px;
    }
}
//map
//compaby about
.story-image{
    position:relative;
}

.story-image img{
    width:100%;
    border-radius:20px;
}

.experience-box{
    position:absolute;
    bottom:20px;
    right:20px;
    background:var(--primary);
    color:var(--white);
    padding:20px 25px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.2);
}

.experience-box h2{
    font-size:42px;
    font-weight:700;
    margin:0;
}

.experience-box p{
    margin:0;
    font-size:15px;
}

.section-subtitle{
    color:var(--primary);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
}

.story-content h2{
    margin:15px 0 20px;
    font-size:42px;
    font-weight:700;
    color:var(--text);
}

.story-content p{
    color:#52635F;
    line-height:1.8;
    margin-bottom:18px;
}
//about end


//mobile nav

.hamburger{
    display:none;
    font-size:30px;
    cursor:pointer;
}

@media(max-width:768px){

    .hamburger{
        display:block;
    }

    .nav-links{
        display:none;
    }

    .nav-links.active{
        display:block;
    }

    .nav-links ul{
        flex-direction:column;
    }
}
/* mobilenav end
 header responsive */

.menu-btn {
    display:none;
    background:none;
    border:none;
    font-size:28px;
    cursor:pointer;
}

@media (max-width:768px){

.header{
    padding:8px 20px;
    min-height:78px;
}

.logo img{
    height:70px;
    width:auto;
    display:block;
}

.menu-btn{
   /* display:block;*/
	display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border:none;
    border-radius:12px;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    color:var(--primary);
    font-size:22px;
    cursor:pointer;
    transition:.3s;
}
.menu-btn hover{
	 background:var(--primary);
    color:var(--white);
    transform:scale(1.05);
}
.quote-btn{
    display:none;
}

.nav-links{
    position:absolute;
    top:95px;
    left:0;
    width:100%;
    background:var(--white);
    display:none;
    box-shadow:0 10px 20px rgba(0,0,0,.1);
}

.nav-links.active{
    display:block;
}

.nav-links ul{
    flex-direction:column;
    padding:20px;
    gap:20px;
    text-align:center;
}

}

/* CONTACT MOBILE FIX */

@media (max-width:768px){

.contact{
    padding:70px 20px;
}

.contact-wrapper{
    display:grid;
    grid-template-columns:1fr;
    gap:35px;
    margin:0;
}

.contact-info{
    width:100%;
}

.info-box{
    display:flex;
    align-items:flex-start;
    gap:15px;
}

.info-box i{
    width:55px;
    height:55px;
    min-width:55px;
}

.info-box div{
    flex:1;
}

.contact-form{
    width:100%;
}

.contact-form input,
.contact-form textarea,
.contact-form button,
.whatsapp-btn{
    width:100%;
}
.section-title span {
	color: var(--primary);
	font-size: 35px;
	font-weight: 600;
	letter-spacing: 2px;
}
.cdiv{
	height: 50px !important;
}
}

/* ===== FOOTER MOBILE FIX ===== */

@media (max-width:768px){

/*.footer{
    padding:50px 20px 20px;
*/

.footer-container{
    display:grid;
    grid-template-columns:1fr;
    gap:35px;
    /*margin:0;*/
    text-align:justify;
}

.footer-logo{
    width:300px;
    /*margin:0 auto 20px;
    display:block;*/
	height:81px;
	margin-bottom:20px;
}

.footer-box h3{
    margin-bottom:15px;
}

.footer-box p,
.footer-box a{
    font-size:15px;
    line-height:1.8;
    word-break:break-word;
}

.social-links{
    justify-content:left;
}

.footer-bottom{
    margin-top:30px;
    font-size:14px;
}

}
/* ===== CONTACT PAGE MAP MOBILE FIX ===== */

@media (max-width:768px){

.map-section{
    padding:50px 20px;
}

.map-container{
    border-radius:15px;
    overflow:hidden;
}

.map-container iframe{
    width:100%;
    height:280px;
}

.section-title{
    margin-bottom:35px;
}

.section-title h2{
    font-size:28px;
}

.section-title p{
    font-size:15px;
    line-height:1.7;
}

}

/* Our story */
.our-story{
    padding:90px 8%;
    background:var(--white);
}

.story-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

.story-content{
    flex:1;
}

.story-tag{
    color:var(--primary);
    font-size:42px;
    font-weight:700;
    letter-spacing:3px;
}

.story-content h2{
    font-size:42px;
    color:var(--text);
    margin:18px 0;
    line-height:1.2;
	text-align:justify;
}

.story-content p{
    font-size:17px;
    color:#52635F;
    line-height:1.9;
    margin-bottom:20px;
	text-align:justify;
}

.story-content strong{
    color:var(--primary);
}

.story-btn{
    display:inline-block;
    margin-top:15px;
    padding:14px 34px;
    background:var(--primary);
    color:var(--white);
    text-decoration:none;
    border-radius:40px;
    font-weight:600;
    transition:.4s;
}

.story-btn:hover{
    background:var(--text);
    transform:translateY(-4px);
}

.story-image{
    flex:1;
    text-align:center;
}

.story-image img{
    width:100%;
    max-width:520px;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.18);
    animation:floatImage 5s ease-in-out infinite;
    transition:.4s;
}

.story-image img:hover{
    transform:scale(1.05);
}

@keyframes floatImage{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}
@media(max-width:768px){

.story-container{
    flex-direction:column-reverse;
    text-align:center;
}
.story-tag{
	font-size:32px;
}
.story-content h2{
    font-size:32px;
	text-align:center;
}

.story-content p{
    font-size:15px;
}

.story-image img{
    max-width:100%;
}

.story-btn{
    width:200px;
    text-align:center;
}

}
/* services page */
/* ===========================
   Desktop Services Layout
=========================== */

.service-section{
    max-width: 1300px;
    margin: 80px auto;
    padding: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
}

.service-section.reverse .service-image{
    order: 2;
}

.service-section.reverse .service-content{
    order: 1;
}

.service-image img{
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 20px;
    transition: .4s;
}

.service-image img:hover{
    transform: scale(1.03);
}

.service-content span{
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 15px;
}

.service-content h2{
    font-size: 42px;
    color: var(--text);
    margin-bottom: 20px;
}

.service-content p{
    font-size: 17px;
    line-height: 1.9;
    color: #52635F;
    margin-bottom: 25px;
}

.service-content ul{
    list-style: none;
    margin: 25px 0;
    padding: 0;
}

.service-content li{
    margin-bottom: 15px;
    font-size: 17px;
}

.service-content li i{
    color: var(--primary);
    margin-right: 10px;
}

.btn{
    display: inline-block;
    padding: 14px 35px;
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: .3s;
}

.btn:hover{
    background: var(--text);
    transform: translateY(-3px);
}
/* ===== Mobile Responsive ===== */
@media (max-width:768px){

    .service-section,
    .service-section.reverse{
        display: grid;
        grid-template-columns: 1fr;
        gap: 25px;
        width: 92%;
        padding: 20px;
        margin: 40px auto;
    }

    .service-section.reverse .service-image,
    .service-section.reverse .service-content{
        order: unset;
    }

    .service-image{
        width:100%;
    }

    .service-image img{
        display:block;
        width:100%;
        height:220px;
        object-fit:cover;
        border-radius:15px;
    }

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

    .service-content h2{
        font-size:28px;
    }

    .service-content p{
        font-size:15px;
        line-height:1.8;
    }

    .service-content ul{
        text-align:left;
        margin:20px 0;
    }

    .btn{
        display:inline-block;
        width:100%;
        max-width:220px;
        margin:20px auto 0;
    }
}

/* project page */
/* Featured Project */

.featured-project{
    max-width:1200px;
    margin:80px auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
    padding:0 20px;
}

.project-video video{
    width:100%;
    border-radius:15px;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.tag{
    background:var(--primary);
    color:var(--white);
    padding:8px 18px;
    border-radius:30px;
    display:inline-block;
    margin-bottom:20px;
}

.project-details h2{
    font-size:40px;
    margin-bottom:20px;
}

.project-details p{
    color:#52635F;
    line-height:1.8;
}

.project-info{
    margin:30px 0;
}

.project-info div{
    margin:15px 0;
}

.project-info i{
    color:var(--primary);
    margin-right:10px;
}

.project-btn{
    display:inline-block;
    background:var(--primary);
    color:var(--white);
    padding:15px 35px;
    border-radius:50px;
    text-decoration:none;
    transition:.3s;
}

.project-btn:hover{
    background:var(--text);
}

/* Gallery */

.project-gallery{
    padding:80px 8%;
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:40px;
}

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

.gallery-card{
    position:relative;
    overflow:hidden;
    border-radius:15px;
}

.gallery-card img{
    width:100%;
    height:300px;
    object-fit:cover;
    transition:.5s;
}

.gallery-card:hover img{
    transform:scale(1.1);
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.6);
    color:var(--white);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    opacity:0;
    transition:.4s;
}

.gallery-card:hover .overlay{
    opacity:1;
}

/* Mobile */

@media(max-width:768px){

.featured-project{
    grid-template-columns:1fr;
}

.project-details{
    text-align:center;
}

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

.project-details h2{
    font-size:30px;
}

}
.stats-section{
    padding:80px 20px;
    background:var(--background);
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:36px;
    color:var(--text);
    margin-bottom:10px;
}

.section-title p{
    color:#667873;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.stat-card{
    background:var(--white);
    padding:35px 20px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

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

.stat-card i{
    font-size:45px;
    color:var(--primary);
    margin-bottom:15px;
}

.stat-card h3{
    font-size:42px;
    color:var(--text);
    margin-bottom:10px;
}

.stat-card p{
    color:#52635F;
    font-size:17px;
}
/* ===============================
   Project Statistics Responsive
================================== */

@media (max-width:768px){

    .stats-section{
        padding:60px 15px;
    }

    .section-title h2{
        font-size:28px;
    }

    .section-title p{
        font-size:14px;
        line-height:1.6;
    }

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

    .stat-card{
        padding:25px 15px;
        border-radius:12px;
    }

    .stat-card i{
        font-size:35px;
    }

    .stat-card h3{
        font-size:30px;
    }

    .stat-card p{
        font-size:14px;
    }
}

@media (max-width:480px){

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

    .section-title h2{
        font-size:24px;
    }

    .stat-card{
        padding:22px 15px;
    }

    .stat-card i{
        font-size:32px;
    }

    .stat-card h3{
        font-size:28px;
    }

    .stat-card p{
        font-size:13px;
    }
}
/* CTA Section */

.cta-section{
    background:linear-gradient(135deg,var(--secondary),#263B37);
    color:var(--white);
    text-align:center;
    padding:80px 20px;
}

.cta-section h2{
    font-size:40px;
    margin-bottom:15px;
}

.cta-section p{
    max-width:700px;
    margin:0 auto 35px;
    line-height:1.8;
    color:#ddd;
    font-size:18px;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.btn-primary,
.btn-whatsapp{
    padding:15px 35px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.btn-primary{
    background:var(--primary);
    color:var(--white);
}

.btn-primary:hover{
    background:var(--secondary);
}

.btn-whatsapp{
    background:#25D366;
    color:var(--white);
}

.btn-whatsapp:hover{
    background:#1ebc59;
}

/* Responsive */

@media(max-width:768px){

    .cta-section{
        padding:60px 20px;
    }

    .cta-section h2{
        font-size:28px;
    }

    .cta-section p{
        font-size:15px;
    }

    .cta-buttons{
        flex-direction:column;
        align-items:center;
    }

    .btn-primary,
    .btn-whatsapp{
        width:240px;
        text-align:center;
    }

}
/* =====================================
   SERVICES HERO SECTION
===================================== */

.service-hero{
    position: relative;
    height: 70vh;
    min-height: 500px;
    background: url("../images/service-banner.jpeg") center center/cover no-repeat;
    display: flex;
    align-items: center;
}

.service-overlay{
    width: 100%;
    height: 100%;
   /* background: linear-gradient(
        rgba(0,0,0,0.65),
        rgba(0,0,0,0.55)
    );*/
    display: flex;
    align-items: center;
}

.service-hero .container{
    max-width: 1200px;
    width: 100%;
    margin: auto;
    padding: 0 20px;
}

.service-hero h1{
    color: var(--white);
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.service-hero p{
    color: #f5f5f5;
    font-size: 18px;
    line-height: 1.8;
    max-width: 700px;
    margin-bottom: 25px;
}

.breadcrumb{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--white);
}

.breadcrumb a{
    color: var(--primary);
    text-decoration: none;
    transition: 0.3s;
}

.breadcrumb a:hover{
    color: var(--white);
}

.service-hero h1,
.service-hero p,
.breadcrumb{
    animation: fadeUp 1s ease;
}

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

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

@media (max-width: 992px){

    .service-hero{
        height: 60vh;
        min-height: 420px;
    }

    .service-hero h1{
        font-size: 46px;
    }

    .service-hero p{
        font-size: 17px;
    }

}

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

@media (max-width: 768px){

    .service-hero{
        height: 55vh;
        min-height: 380px;
        text-align: center;
    }

    .service-hero h1{
        font-size: 36px;
    }

    .service-hero p{
        font-size: 16px;
        line-height: 1.6;
        margin: 0 auto 20px;
    }

    .breadcrumb{
        justify-content: center;
    }

}

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

@media (max-width: 480px){

    .service-hero{
        height: 50vh;
        min-height: 330px;
    }

    .service-hero h1{
        font-size: 30px;
    }

    .service-hero p{
        font-size: 15px;
    }

    .breadcrumb{
        font-size: 14px;
    }

}
/* ===========================
   Service Introduction
=========================== */

.service-intro{
    padding:90px 20px;
    background:var(--white);
    text-align:center;
}

.service-intro .container{
    max-width:900px;
    margin:auto;
}

.section-tag{
    display:inline-block;
    color:var(--primary);
    font-size:42px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.service-intro h2{
    font-size:42px;
    color:#1b1b1b;
    margin-bottom:25px;
    font-weight:700;
}

.service-intro p{
    font-size:18px;
    color:#52635F;
    line-height:1.9;
}

/* Tablet */

@media(max-width:768px){

.service-intro{
padding:70px 20px;
}

.service-intro h2{
font-size:34px;
}

.service-intro p{
font-size:16px;
}

}

/* Mobile */

@media(max-width:480px){

.service-intro{
padding:60px 20px;
}

.service-intro h2{
font-size:28px;
}

.service-intro p{
font-size:15px;
line-height:1.8;
}

}

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

.services-grid{
    padding:100px 20px;
    background:var(--background);
}

.section-title{
    text-align:center;
    max-width:750px;
    margin:auto;
    margin-bottom:60px;
}

.section-title span{
    color:var(--primary);
    letter-spacing:3px;
    font-size:42px;
    font-weight:600;
}

.section-title h2{
    font-size:42px;
    margin:15px 0;
    color:var(--text);
}

.section-title p{
    color:#52635F;
    line-height:1.8;
}

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

.service-box{
    background:var(--white);
    padding:40px;
    border-radius:18px;
    transition:.4s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.service-box:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.service-box i{
    font-size:45px;
    color:var(--primary);
    margin-bottom:20px;
}

.service-box h3{
    font-size:28px;
    margin-bottom:15px;
}

.service-box p{
    color:#52635F;
    line-height:1.8;
}

@media(max-width:768px){

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

.service-box{
padding:30px;
}

.section-title h2{
font-size:32px;
}

.service-box h3{
font-size:24px;
}

}
/* ===========================
   SERVICE TABS
=========================== */

.service-tabs{
    padding:100px 20px;
    background:var(--white);
}

.tab-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:50px;
}

.tab-btn{
    border:none;
    background:#f5f5f5;
    color:var(--text);
    padding:14px 30px;
    border-radius:50px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.tab-btn:hover{
    background:var(--primary);
    color:var(--white);
}

.tab-btn.active{
    background:var(--primary);
    color:var(--white);
}

.tab-content{
    display:none;
    align-items:center;
    gap:60px;
    animation:fade .5s ease;
}

.tab-content.active{
    display:flex;
}

.tab-image{
    flex:1;
}

.tab-image img{
    width:100%;
    border-radius:20px;
    display:block;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.tab-text{
    flex:1;
}

.tab-text h2{
    font-size:40px;
    color:var(--text);
    margin-bottom:20px;
}

.tab-text p{
    color:#52635F;
    line-height:1.8;
    margin-bottom:25px;
}

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

.tab-text ul li{
    margin-bottom:15px;
    color:#444;
    font-size:17px;
    position:relative;
    padding-left:28px;
}

.tab-text ul li::before{
    content:"✔";
    color:var(--primary);
    position:absolute;
    left:0;
    top:0;
}

@keyframes fade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

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

@media(max-width:992px){

.tab-content{
flex-direction:column;
}

.tab-text{
text-align:center;
}

.tab-text ul{
display:inline-block;
text-align:left;
}

}

@media(max-width:768px){

.tab-btn{
width:48%;
padding:12px;
font-size:15px;
}

.tab-text h2{
font-size:30px;
}

}

@media(max-width:480px){

.tab-btn{
width:100%;
}

.tab-text h2{
font-size:26px;
}

.tab-text p{
font-size:15px;
}

}
/*==========================
QUALITY STANDARDS
==========================*/

.quality-section{
    padding:100px 20px;
    background:var(--background);
}

.quality-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin-top:60px;
}

.quality-card{
    background:var(--white);
    padding:35px 25px;
    text-align:center;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.quality-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.quality-card i{
    font-size:48px;
    color:var(--primary);
    margin-bottom:20px;
}

.quality-card h3{
    margin-bottom:15px;
    color:var(--text);
}

.quality-card p{
    color:#52635F;
    line-height:1.7;
}

@media(max-width:992px){
    .quality-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .quality-grid{
        grid-template-columns:1fr;
    }
}
/*==========================
TRUSTED BRANDS
==========================*/

.brands-section{
    padding:100px 20px;
    background:var(--white);
}

.brands-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:60px;
}

.brand-card{
    background:var(--white);
    height:170px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #ececec;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
    transition:.35s;
}

.brand-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.brand-card img{
    width:170px;
    max-width:80%;
    object-fit:contain;
    /*filter:grayscale(100%);*/
    transition:.35s;
}

.brand-card:hover img{
    filter:grayscale(0%);
    transform:scale(1.08);
}

/* Tablet */

@media(max-width:992px){

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

}

/* Mobile */

@media(max-width:768px){

.brands-section{
padding:70px 20px;
}

.brands-grid{
grid-template-columns:1fr;
gap:20px;
}

.brand-card{
height:140px;
}

.brand-card img{
width:140px;
}

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

.faq-section{
    padding:100px 20px;
    background:var(--background);
}

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

.faq-item{
    background:var(--white);
    border-radius:15px;
    margin-bottom:20px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.faq-question{
    width:100%;
    border:none;
    background:var(--white);
    padding:22px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    text-align:left;
    font-size:18px;
    font-weight:600;
    color:var(--text);
}

.faq-question:hover{
    color:var(--primary);
}

.faq-icon{
    color:var(--primary);
    font-size:18px;
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
}

.faq-answer p{
    padding:0 30px 25px;
    color:#52635F;
    line-height:1.8;
}

.faq-item.active .faq-answer{
    max-height:300px;
}

/* Mobile */

@media(max-width:768px){

.faq-section{
padding:70px 20px;
}

.faq-question{
font-size:16px;
padding:18px 20px;
}

.faq-answer p{
padding:0 20px 20px;
font-size:15px;
}

}

@media(max-width:480px){

.faq-question{
font-size:15px;
padding:16px 18px;
}

.faq-answer p{
font-size:14px;
padding:0 18px 18px;
}

}
.process-section{
    padding:100px 20px;
    background:var(--white);
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:25px;
    margin-top:60px;
}

.process-card{
    background:var(--white);
    padding:30px 20px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.process-card:hover{
    transform:translateY(-10px);
}

.process-number{
    width:60px;
    height:60px;
    margin:auto;
    border-radius:50%;
    background:var(--primary);
    color:var(--white);
    font-size:24px;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
}

.process-card h3{
    margin-bottom:15px;
}

.process-card p{
    color:#52635F;
    line-height:1.7;
}

@media(max-width:992px){
    .process-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:576px){
    .process-grid{
        grid-template-columns:1fr;
    }
}
/* ===========================
   Process Section Responsive
=========================== */

/* Tablet */

@media (max-width: 992px){

    .process-section{
        padding:80px 20px;
    }

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

}

/* Mobile */

@media (max-width: 768px){

    .process-section{
        padding:70px 20px;
    }

    .process-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

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

    .process-number{
        width:55px;
        height:55px;
        font-size:22px;
        margin-bottom:18px;
    }

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

    .process-card p{
        font-size:15px;
        line-height:1.7;
    }

}

/* Small Mobile */

@media (max-width: 480px){

    .process-section{
        padding:60px 15px;
    }

    .process-card{
        padding:22px 18px;
        border-radius:15px;
    }

    .process-number{
        width:50px;
        height:50px;
        font-size:20px;
    }

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

    .process-card p{
        font-size:14px;
        line-height:1.6;
    }

}
/* ===========================
   PROJECTS HERO
=========================== */

.projects-hero-section{
    height:70vh;
    min-height:500px;
    background:url("../images/project-banner.jpeg") center/cover no-repeat;
    display:flex;
    align-items:center;
}

.projects-hero-overlay{
    width:100%;
    height:100%;
   background:rgba(0,0,0,.55);
    display:flex;
    align-items:center;
}

.projects-hero-container{
    width:1200px;
    max-width:90%;
    margin:auto;
}

.projects-hero-title{
    font-size:60px;
    color:var(--white);
    margin-bottom:20px;
}

.projects-hero-text{
    color:#f5f5f5;
    font-size:18px;
    line-height:1.8;
    max-width:650px;
    margin-bottom:20px;
}

.projects-hero-breadcrumb{
    display:flex;
    gap:8px;
    color:var(--white);
}

.projects-hero-breadcrumb a{
    color:var(--primary);
    text-decoration:none;
}

.projects-hero-breadcrumb a:hover{
    color:var(--white);
}

/* Tablet */

@media(max-width:768px){

.projects-hero-section{
height:55vh;
min-height:400px;
text-align:center;
}

.projects-hero-title{
font-size:40px;
}

.projects-hero-text{
font-size:16px;
margin:auto;
margin-bottom:20px;
}

.projects-hero-breadcrumb{
justify-content:center;
}

}

/* Mobile */

@media(max-width:480px){

.projects-hero-section{
height:50vh;
min-height:330px;
}

.projects-hero-title{
font-size:30px;
}

.projects-hero-text{
font-size:15px;
}

}
/* ===========================
   PROJECTS INTRO
=========================== */

.projects-intro-section{
    padding:100px 20px;
    background:var(--white);
    text-align:center;
}

.projects-intro-container{
    width:850px;
    max-width:90%;
    margin:auto;
}

.projects-intro-subtitle{
    display:inline-block;
    color:var(--primary);
    font-size:42px;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:15px;
}

.projects-intro-title{
    font-size:42px;
    color:var(--text);
    line-height:1.3;
    margin-bottom:25px;
}

.projects-intro-description{
    font-size:18px;
    color:#52635F;
    line-height:1.9;
    max-width:700px;
    margin:auto;
}

/* Tablet */

@media(max-width:768px){

.projects-intro-section{
padding:70px 20px;
}

.projects-intro-title{
font-size:34px;
}

.projects-intro-description{
font-size:16px;
}

}

/* Mobile */

@media(max-width:480px){

.projects-intro-section{
padding:60px 15px;
}

.projects-intro-title{
font-size:28px;
}

.projects-intro-description{
font-size:15px;
line-height:1.8;
}

.projects-intro-subtitle{
font-size:12px;
letter-spacing:2px;
}

}
/* ===========================
   PROJECT FILTER
=========================== */

.projects-filter-section{
    padding:40px 20px;
    background:var(--white);
}

.projects-filter-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.projects-filter-btn{
    padding:12px 28px;
    border:2px solid var(--primary);
    background:var(--white);
    color:var(--text);
    font-size:15px;
    font-weight:600;
    border-radius:50px;
    cursor:pointer;
    transition:.4s ease;
}

.projects-filter-btn:hover,
.projects-filter-btn.active{
    background:var(--primary);
    color:var(--white);
}
.featured-projects-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.featured-project-card{
    display:block;
    background:var(--white);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.4s;
}

.featured-project-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}
.featured-project-image{
    position:relative;
    overflow:hidden;
    border-radius:18px 18px 0 0;
}

.project-status{
    position:absolute;
    top:15px;
    right:15px;
    z-index:100;
    background:var(--primary);
    color:var(--white);
    padding:8px 18px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    line-height:1;
}
.featured-project-image img{
    width:100%;
    height:280px;
    object-fit:cover;
    display:block;
    transition:.5s;
}
.featured-project-content{
    padding:25px;
}

.featured-project-content h3{
    margin-bottom:10px;
}

.featured-project-content p{
    color:#52635F;
    margin-bottom:18px;
}

.featured-project-card:hover img{
    transform:scale(1.08);
}

@media(max-width:992px){
    .featured-projects-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .featured-projects-grid{
        grid-template-columns:1fr;
    }
}
/* ===========================
   FEATURED PROJECTS
=========================== 

.featured-projects-section{
    padding:80px 20px 100px;
    background:var(--background);
}

.featured-projects-container{
    max-width:1200px;
    margin:auto;
}

.featured-projects-grid{
    margin:0 -15px;
}

.featured-project-card{
    width:33.333%;
    padding:15px;
    box-sizing:border-box;
}


.featured-project-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.featured-project-image{
    position:relative;
    overflow:hidden;
}

.featured-project-image img{
    width:100%;
    height:280px;
    object-fit:cover;
    /*transition:.5s;
	display:block;
}

.featured-project-card:hover img{
    transform:scale(1.08);
}

.project-status{
    position:absolute;
    top:15px;
    right:15px;
    background:var(--primary);
    color:var(--white);
    padding:8px 16px;
    border-radius:30px;
    font-size:13px;
}

.featured-project-content{
    padding:25px;
}

.featured-project-content h3{
    margin-bottom:10px;
}

.featured-project-content p{
    color:#52635F;
    margin-bottom:18px;
}

.project-info{
    display:flex;
    justify-content:space-between;
    margin-bottom:20px;
    color:#667873;
    font-size:14px;
}

.project-btn{
    display:inline-block;
    padding:12px 25px;
    background:var(--primary);
    color:var(--white);
    text-decoration:none;
    border-radius:30px;
    transition:.3s;
}

.project-btn:hover{
    background:var(--text);
}*/

/* ===========================
   RESPONSIVE
=========================== 

@media(max-width:992px){

.featured-project-card{
width:50%;
}

}

@media(max-width:768px){

.projects-filter-section{
padding:30px 15px;
}

.projects-filter-btn{
padding:10px 18px;
font-size:14px;
}

.featured-project-card{
width:100%;
}

.project-info{
flex-direction:column;
gap:10px;
}

}

@media(max-width:480px){

.projects-filter-btn{
width:100%;
}

.featured-project-content{
padding:20px;
}

}*/
/* ===========================
   PROJECT VIDEOS
=========================== */

.projects-video-section{
    padding:100px 20px;
    background:var(--white);
}

.projects-video-container{
    max-width:1200px;
    margin:auto;
}

.projects-video-header{
    text-align:center;
    margin-bottom:60px;
}

.projects-video-header span{
    color:var(--primary);
    font-weight:700;
    letter-spacing:2px;
}

.projects-video-header h2{
    font-size:42px;
    margin:15px 0;
}

.projects-video-header p{
    color:#52635F;
}

.projects-video-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.projects-video-card{
    background:var(--white);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.4s;
}

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

.projects-video-card video{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
}

.projects-video-content{
    padding:25px;
}

.projects-video-content h3{
    margin-bottom:10px;
}

.projects-video-content p{
    color:#52635F;
}

/* Tablet */

@media(max-width:768px){

.projects-video-section{
padding:70px 20px;
}

.projects-video-grid{
grid-template-columns:1fr;
}

.projects-video-header h2{
font-size:32px;
}

.projects-video-card video{
height:250px;
}

}

/* Mobile */

@media(max-width:480px){

.projects-video-header h2{
font-size:28px;
}

.projects-video-card video{
height:220px;
}

.projects-video-content{
padding:20px;
}

}
/* ===========================
   PROJECT GALLERY
=========================== */

.project-gallery-section{
    padding:100px 20px;
    background:var(--background);
}

.project-gallery-section .container{
    max-width:1200px;
    margin:auto;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    color:var(--primary);
    font-weight:700;
    letter-spacing:2px;
}

.section-title h2{
    font-size:42px;
    margin:15px 0;
    color:var(--text);
}

.section-title p{
    color:#52635F;
    max-width:650px;
    margin:auto;
}

.gallerySwiper{
    padding-bottom:60px;
}

.gallery-card{
    position:relative;
    border-radius:20px;
    overflow:hidden;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.gallery-card img{
    width:100%;
    height:420px;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.gallery-card:hover img{
    transform:scale(1.08);
}

.gallery-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
    rgba(0,0,0,.85),
    rgba(0,0,0,.2),
    transparent);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:25px;
}

.gallery-overlay h3{
    color:var(--white);
    font-size:26px;
    margin-bottom:15px;
}

.gallery-btn{
    width:max-content;
    padding:12px 24px;
    border:none;
    border-radius:30px;
    background:var(--primary);
    color:var(--white);
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

.gallery-btn:hover{
    background:var(--white);
    color:var(--text);
}

/* Swiper */

.gallerySwiper .swiper-button-next,
.gallerySwiper .swiper-button-prev{
    color:var(--primary);
}

.gallerySwiper .swiper-pagination-bullet-active{
    background:var(--primary);
}

/* ===========================
   MODAL
=========================== */
.gallery-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
    overflow-y: auto;
}

.gallery-modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-modal-content {
    position: relative;
    background: var(--white);
    width: 90%;
    max-width: 1100px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 15px;
}

.gallery-close {
     position: absolute;
    top: 15px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.7);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 9999;
    transition: .3s;
}

@keyframes popup{
from{
transform:scale(.85);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}


.gallery-modal-content img{
    width:100%;
    height:420px;
    object-fit:cover;
}

.gallery-modal-content h2{
    padding:25px 30px 10px;
}

.gallery-modal-content p,
.gallery-modal-content h4{
    padding:0 30px 15px;
    color:#52635F;
}

.gallery-modal-content h4{
    color:var(--text);
}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:768px){

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

.gallery-card img{
height:300px;
}

.gallery-modal-content img{
height:250px;
}

.gallery-modal-content h2,
.gallery-modal-content p,
.gallery-modal-content h4{
padding-left:20px;
padding-right:20px;
}

}

@media(max-width:480px){

.project-gallery-section{
padding:70px 15px;
}

.gallery-card img{
height:250px;
}

.section-title h2{
font-size:26px;
}

.gallery-overlay h3{
font-size:20px;
}

.gallery-btn{
padding:10px 18px;
font-size:14px;
}

}
/* Formal Working Hours */
.working-hours{
    margin-top:22px;
}

.working-hours h4{
    color:var(--text);
    font-size:18px;
    font-weight:600;
    margin-bottom:10px;
}

.working-hours p{
    margin-bottom:6px;
}

.working-hours .hours-time{
    margin-left:28px;
    font-weight:500;
    color:var(--text);
}

@media(max-width:600px){
    .working-hours{
        margin-top:18px;
    }

    .working-hours h4{
        font-size:17px;
    }

    .working-hours .hours-time{
        margin-left:0;
    }
}

.working-hours i{
    color:var(--secondary);
    margin-right:10px;
}

.footer-box p a{
    color:var(--text);
    text-decoration:none;
}

.footer-box p a:hover{
    color:var(--secondary);
}

/* ===========================
   BALAJI CONSTRUCTION FOOTER
=========================== */

.footer{
    background:var(--primary);
    position:relative;
    padding:90px 0 0;
    overflow:hidden;
}

.footer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:var(--primary);
}

.footer-container{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:0 40px 85px;
    display:grid;
    grid-template-columns:1.45fr .8fr .95fr 1.25fr;
    align-items:start;
    column-gap:0;
}

.footer-box{
    min-width:0;
    padding:0 38px;
}

.footer-company{
    padding-left:0;
    padding-right:55px;
}

.footer-divider{
    border-left:1px solid rgba(255,255,255,.32);
    min-height:420px;
}

.footer-logo{
    width:100%;
    max-width:450px;
    height:auto;
    display:block;
    margin:0 0 25px;
}

.footer-box h3{
    color:var(--white);
    font-size:28px;
    font-weight:700;
    line-height:1.2;
    margin:0 0 38px;
}

.footer-company > p{
    color:var(--text);
    font-size:18px;
    line-height:1.8;
    margin:0 0 28px;
    max-width:500px;
}

.footer-box > a{
    display:block;
    color:var(--text);
    text-decoration:none;
    font-size:18px;
    line-height:1.5;
    margin-bottom:22px;
    transition:.3s ease;
}

.footer-box > a:hover{
    color:var(--white);
    padding-left:5px;
}

/* Social icons */
.social-links{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:18px;
}

.social-links a{
    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--secondary);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary);
    text-decoration:none;
    transition:.3s ease;
}

.social-links a i{
    color:var(--primary);
    font-size:24px;
    margin:0;
}

.social-links a:hover{
    background:var(--white);
    transform:translateY(-4px);
}

.social-links a:hover i{
    color:var(--secondary);
}

/* Contact / Working Hours */
.footer-info-row{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:28px;
}

.footer-icon{
    flex:0 0 48px;
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--secondary);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:0;
}

.footer-icon i{
    color:var(--primary);
    font-size:21px;
    margin:0;
}

.footer-info-row p{
    color:var(--text);
    font-size:17px;
    line-height:1.8;
    margin:0;
    overflow-wrap:anywhere;
}

.footer-info-row a{
    color:var(--text);
    text-decoration:none;
    display:inline;
    margin:0;
    font-size:17px;
}

.footer-info-row a:hover{
    color:var(--white);
}

.footer-label{
    font-weight:500;
    margin:0;
}

.footer-value{
    margin:8px 0 0 !important;
    font-weight:500;
}

/* Copyright bar */
.footer-bottom{
    width:100%;
    min-height:105px;
    background:var(--secondary);
    border-top:1px solid rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
    color:var(--white) !important;
    font-size:17px;
}

/* Tablet */
@media(max-width:1100px){
    .footer-container{
        grid-template-columns:1.3fr .8fr 1fr 1.2fr;
        padding-left:25px;
        padding-right:25px;
    }

    .footer-box{
        padding:0 25px;
    }

    .footer-company{
        padding-left:0;
        padding-right:35px;
    }

    .footer-box h3{
        font-size:24px;
    }

    .footer-company > p,
    .footer-box > a,
    .footer-info-row p,
    .footer-info-row a{
        font-size:16px;
    }
}

/* Mobile */
@media(max-width:768px){
    .footer{
        padding-top:55px;
    }

    .footer-container{
        grid-template-columns:1fr;
        padding:0 25px 50px;
        gap:38px;
    }

    .footer-box,
    .footer-company{
        padding:0;
        border-left:none;
        min-height:auto;
        text-align:left;
    }

    .footer-logo{
        width:100%;
        max-width:360px;
        margin:0 0 20px;
    }

    .footer-company > p{
        max-width:100%;
        font-size:15px;
        line-height:1.7;
    }

    .footer-box h3{
        font-size:22px;
        margin-bottom:22px;
    }

    .footer-box > a{
        font-size:16px;
        margin-bottom:15px;
    }

    .social-links{
        justify-content:flex-start;
        gap:12px;
    }

    .social-links a{
        width:48px;
        height:48px;
    }

    .social-links a i{
        font-size:20px;
    }

    .footer-info-row{
        gap:13px;
        margin-bottom:20px;
    }

    .footer-icon{
        flex-basis:42px;
        width:42px;
        height:42px;
    }

    .footer-icon i{
        font-size:18px;
    }

    .footer-info-row p,
    .footer-info-row a{
        font-size:15px;
        line-height:1.7;
    }

    .footer-bottom{
        min-height:80px;
        font-size:13px;
        padding:18px 15px;
    }
}

/* Small mobile */
@media(max-width:480px){
    .footer-container{
        padding-left:18px;
        padding-right:18px;
    }

    .footer-logo{
        max-width:100%;
    }

    .footer-company > p{
        font-size:14px;
    }

    .footer-info-row{
        align-items:flex-start;
    }

    .footer-info-row a{
        overflow-wrap:anywhere;
    }
}


/* =========================================================
   BALAJI CONSTRUCTION — FINAL FOOTER DESIGN
   Reference: supplied footer screenshot
========================================================= */

.footer{
    width:100%;
    background:#7CBBAE;
    padding:72px 0 0;
    position:relative;
    overflow:hidden;
}

.footer::before{
    display:none;
}

.footer-container{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:0 32px 70px;
    display:grid;
    grid-template-columns:1.55fr 1fr 1fr 1.35fr;
    gap:55px;
    align-items:start;
}

.footer-box,
.footer-company{
    min-width:0;
    padding:0;
    border:0;
    min-height:0;
}

.footer-company{
    padding-right:15px;
}

.footer-logo{
    display:block;
    width:100%;
    max-width:375px;
    height:auto;
    margin:0 0 24px;
}

.footer-company > p{
    max-width:430px;
    margin:0 0 28px;
    color:#192523;
    font-size:17px;
    line-height:1.75;
}

.footer-box h3{
    margin:4px 0 30px;
    color:#FFFFFF;
    font-size:27px;
    line-height:1.2;
    font-weight:700;
}

.footer-box > a{
    display:block;
    margin:0 0 20px;
    color:#192523;
    text-decoration:none;
    font-size:17px;
    line-height:1.55;
    transition:.25s ease;
}

.footer-box > a:hover{
    color:#FFFFFF;
    padding-left:4px;
}

/* Services / links text */
.footer-box ul{
    list-style:none;
    margin:0;
    padding:0;
}

.footer-box ul li{
    margin:0 0 20px;
}

.footer-box ul li a{
    color:#192523;
    text-decoration:none;
    font-size:17px;
    line-height:1.5;
    transition:.25s ease;
}

.footer-box ul li a:hover{
    color:#FFFFFF;
    padding-left:4px;
}

/* Social media */
.social-links{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:18px;
}

.social-links a{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#192523;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#7CBBAE;
    text-decoration:none;
    transition:.3s ease;
}

.social-links a i{
    color:#7CBBAE !important;
    font-size:20px;
    margin:0;
}

.social-links a:hover{
    background:#FFFFFF;
    transform:translateY(-4px);
}

.social-links a:hover i{
    color:#192523 !important;
}

/* Contact information */
.footer-info-row{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin:0 0 25px;
}

.footer-icon{
    flex:0 0 38px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    position:relative;
}

.footer-icon i{
    color:#192523 !important;
    font-size:21px;
    margin:0;
}

.footer-info-row p{
    margin:0;
    color:#192523;
    font-size:17px;
    line-height:1.7;
    overflow-wrap:anywhere;
}

.footer-info-row a{
    color:#192523;
    font-size:17px;
    text-decoration:none;
    margin:0;
}

.footer-info-row a:hover{
    color:#FFFFFF;
}

.footer-label{
    margin:0;
    font-weight:500;
}

.footer-value{
    margin:6px 0 0 !important;
    font-weight:500;
}

/* Working hours */
.working-hours{
    margin-top:0;
}

.working-hours h4{
    color:#FFFFFF;
    font-size:27px;
    line-height:1.2;
    font-weight:700;
    margin:4px 0 25px;
}

.working-hours p{
    color:#192523;
    font-size:17px;
    line-height:1.7;
    margin:0 0 8px;
}

.working-hours .hours-time{
    margin-left:52px;
    font-weight:500;
}

/* Copyright — same colour as top contact bar */
.footer-bottom{
    width:100%;
    min-height:36px;
    padding:18px 20px;
    background:#192523;
    border-top:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#FFFFFF !important;
    font-size:16px;
}

/* Tablet */
@media(max-width:1100px){
    .footer-container{
        grid-template-columns:1.35fr 1fr 1fr 1.2fr;
        gap:32px;
        padding-left:25px;
        padding-right:25px;
    }

    .footer-box h3,
    .working-hours h4{
        font-size:23px;
    }

    .footer-company > p,
    .footer-box > a,
    .footer-box ul li a,
    .footer-info-row p,
    .footer-info-row a,
    .working-hours p{
        font-size:15px;
    }
}

/* Mobile */
@media(max-width:768px){
    .footer{
        padding-top:50px;
    }

    .footer-container{
        grid-template-columns:1fr;
        gap:38px;
        padding:0 22px 45px;
    }

    .footer-company{
        padding:0;
    }

    .footer-logo{
        max-width:360px;
        margin-bottom:20px;
    }

    .footer-company > p{
        max-width:100%;
        font-size:15px;
        line-height:1.7;
    }

    .footer-box h3,
    .working-hours h4{
        font-size:22px;
        margin-bottom:20px;
    }

    .footer-box > a,
    .footer-box ul li a,
    .footer-info-row p,
    .footer-info-row a,
    .working-hours p{
        font-size:15px;
    }

    .footer-box > a,
    .footer-box ul li{
        margin-bottom:14px;
    }

    .social-links{
        gap:12px;
    }

    .social-links a{
        width:46px;
        height:46px;
    }

    .social-links a i{
        font-size:19px;
    }

    .footer-info-row{
        gap:11px;
        margin-bottom:18px;
    }

    .footer-icon{
        flex:0 0 36px;
        width:36px;
        height:36px;
    }

    .footer-icon i{
        font-size:19px;
    }

    .working-hours .hours-time{
        margin-left:47px;
    }

    .footer-bottom{
        min-height:36px;
        font-size:13px;
        padding:17px 12px;
    }
}

/* Small mobile */
@media(max-width:480px){
    .footer-container{
        padding-left:18px;
        padding-right:18px;
    }

    .footer-logo{
        max-width:100%;
    }

    .footer-company > p{
        font-size:14px;
    }

    .footer-info-row p,
    .footer-info-row a{
        font-size:14px;
    }

    .working-hours .hours-time{
        margin-left:47px;
    }
}


/* ===== FINAL FOOTER INFO SPACING / NO UNWANTED LINE BREAKS ===== */

.footer .footer-info-row{
    align-items:flex-start;
    gap:12px;
    margin-bottom:20px;
}

.footer .footer-info-row p,
.footer .footer-info-row a{
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:normal;
}

.footer .footer-info-row p{
    line-height:1.55;
}

.footer .footer-info-row a{
    display:inline-block;
    line-height:1.55;
}

.footer .working-hours{
    margin-top:0;
}

.footer .working-hours h4{
    margin-bottom:18px;
}

.footer .working-hours p{
    white-space:nowrap;
    line-height:1.55;
    margin-bottom:5px;
}

.footer .working-hours .hours-time{
    margin-left:0;
    padding-left:0;
}

.footer .footer-address{
    white-space:normal !important;
    line-height:1.65;
}

@media(max-width:768px){
    .footer .footer-info-row p,
    .footer .footer-info-row a,
    .footer .working-hours p{
        white-space:normal;
    }

    .footer .footer-address{
        white-space:normal !important;
    }
}


/* ===== FINAL FOOTER COLUMN BALANCE ===== */
@media(min-width:1101px){
    .footer-container{
        grid-template-columns:1.35fr .85fr 1.05fr 1.25fr;
        gap:28px;
        padding-left:32px;
        padding-right:32px;
    }

    .footer-company{
        padding-right:10px;
    }

    .footer-box:nth-child(2){
        padding-left:8px;
        padding-right:8px;
    }

    .footer-box:nth-child(3){
        padding-left:8px;
        padding-right:8px;
    }

    .footer-box:nth-child(4){
        padding-left:18px;
        padding-right:8px;
    }
}

@media(min-width:769px) and (max-width:1100px){
    .footer-container{
        grid-template-columns:1.3fr .9fr 1fr 1.2fr;
        gap:20px;
    }

    .footer-box{
        padding-left:10px;
        padding-right:10px;
    }
}


/* =========================================================
   FINAL FOOTER LAYOUT FIX — CLEAN 4 COLUMN GRID
========================================================= */

@media(min-width:769px){
    .footer-container{
        display:grid !important;
        grid-template-columns:1.35fr .90fr 1.05fr 1.35fr !important;
        column-gap:34px !important;
        row-gap:0 !important;
        align-items:start !important;
        padding-left:40px !important;
        padding-right:55px !important;
    }

    .footer-box,
    .footer-company{
        position:static !important;
        transform:none !important;
        min-width:0 !important;
    }

    /* Company column — social icons stay here */
    .footer-company .social-links{
        position:static !important;
        display:flex !important;
        width:max-content !important;
        max-width:100% !important;
        margin:24px 0 0 !important;
        padding:0 !important;
        justify-content:flex-start !important;
        align-items:center !important;
        gap:14px !important;
    }

    .footer-company .social-links a{
        position:static !important;
        width:50px !important;
        height:50px !important;
        flex:0 0 50px !important;
        margin:0 !important;
        padding:0 !important;
        background:#192523 !important;
        color:#7CBBAE !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:50% !important;
        transform:none !important;
    }

    .footer-company .social-links a i{
        color:#7CBBAE !important;
        font-size:20px !important;
        line-height:1 !important;
        margin:0 !important;
    }

    .footer-company .social-links a:hover{
        background:#FFFFFF !important;
        transform:translateY(-3px) !important;
    }

    .footer-company .social-links a:hover i{
        color:#192523 !important;
    }

    /* Keep the three information columns evenly spaced */
    .footer-container > .footer-box:nth-child(2){
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .footer-container > .footer-box:nth-child(3){
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .footer-container > .footer-box:nth-child(4){
        padding-left:0 !important;
        padding-right:0 !important;
        overflow:visible !important;
    }

    .footer-container > .footer-box:nth-child(2) h3,
    .footer-container > .footer-box:nth-child(3) h3,
    .footer-container > .footer-box:nth-child(4) h3{
        margin-top:4px !important;
    }

    /* No fake divider affecting column spacing */
    .footer-divider{
        border-left:none !important;
        min-height:0 !important;
    }

    /* Contact text must remain inside its column */
    .footer-container > .footer-box:nth-child(4) .footer-info-row{
        width:100% !important;
        max-width:100% !important;
    }

    .footer-container > .footer-box:nth-child(4) .footer-info-row p,
    .footer-container > .footer-box:nth-child(4) .footer-info-row a{
        max-width:100% !important;
    }

    .footer-container > .footer-box:nth-child(4) .footer-info-row a{
        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }
}

@media(max-width:768px){
    .footer-container{
        grid-template-columns:1fr !important;
        gap:32px !important;
        padding-left:22px !important;
        padding-right:22px !important;
    }

    .footer-company .social-links{
        position:static !important;
        display:flex !important;
        width:max-content !important;
        max-width:100% !important;
        margin:20px 0 0 !important;
        justify-content:flex-start !important;
        gap:12px !important;
    }

    .footer-company .social-links a{
        width:46px !important;
        height:46px !important;
        flex:0 0 46px !important;
    }

    .footer-divider{
        border-left:none !important;
        min-height:0 !important;
    }
}


/* =========================================================
   FINAL FOOTER — WORKING HOURS LEFT SPACING FIX
   Layout: Company | Quick Links | Working Hours | Contact Info
========================================================= */

@media (min-width: 769px) {

    .footer-container{
        display:grid !important;
        grid-template-columns: 1.38fr 0.82fr 1.02fr 1.30fr !important;
        column-gap: 34px !important;
        row-gap: 0 !important;
        align-items:start !important;
        padding-left:40px !important;
        padding-right:42px !important;
    }

    .footer-container > .footer-box,
    .footer-container > .footer-company{
        min-width:0 !important;
        padding:0 !important;
        border-left:none !important;
        min-height:0 !important;
    }

    /* Quick Links */
    .footer-container > .footer-box:nth-child(2){
        padding-left:4px !important;
    }

    /* Working Hours — give it its own clean left edge */
    .footer-container > .footer-box:nth-child(3){
        padding-left:4px !important;
        padding-right:8px !important;
    }

    .footer-container > .footer-box:nth-child(3) h3{
        margin-left:0 !important;
        margin-top:4px !important;
        margin-bottom:24px !important;
    }

    .footer-container > .footer-box:nth-child(3) .footer-info-row{
        margin-left:0 !important;
        padding-left:0 !important;
        gap:14px !important;
        width:100% !important;
    }

    .footer-container > .footer-box:nth-child(3) .footer-icon{
        flex:0 0 38px !important;
        width:38px !important;
        height:38px !important;
        margin:0 !important;
    }

    .footer-container > .footer-box:nth-child(3) .footer-label,
    .footer-container > .footer-box:nth-child(3) .footer-value{
        margin-left:0 !important;
        padding-left:0 !important;
        white-space:nowrap !important;
    }

    /* Social icons remain under Working Hours and align to its column */
    .footer-container > .footer-box:nth-child(3) .social-links{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:14px !important;
        margin:24px 0 0 0 !important;
        padding:0 !important;
        width:max-content !important;
    }

    .footer-container > .footer-box:nth-child(3) .social-links a{
        width:50px !important;
        height:50px !important;
        flex:0 0 50px !important;
        margin:0 !important;
        padding:0 !important;
        background:#192523 !important;
        color:#7CBBAE !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:50% !important;
        transform:none !important;
    }

    .footer-container > .footer-box:nth-child(3) .social-links a i{
        color:#7CBBAE !important;
        font-size:20px !important;
        line-height:1 !important;
        margin:0 !important;
    }

    .footer-container > .footer-box:nth-child(3) .social-links a:hover{
        background:#fff !important;
        transform:translateY(-3px) !important;
    }

    .footer-container > .footer-box:nth-child(3) .social-links a:hover i{
        color:#192523 !important;
    }

    /* Contact Info — starts after Working Hours with balanced gap */
    .footer-container > .footer-box:nth-child(4){
        padding-left:2px !important;
        padding-right:0 !important;
        overflow:visible !important;
    }

    .footer-container > .footer-box:nth-child(4) h3{
        margin-top:4px !important;
        margin-bottom:24px !important;
    }

    .footer-container > .footer-box:nth-child(4) .footer-info-row{
        width:100% !important;
        max-width:100% !important;
        gap:14px !important;
        margin-bottom:22px !important;
    }

    .footer-container > .footer-box:nth-child(4) .footer-info-row p,
    .footer-container > .footer-box:nth-child(4) .footer-info-row a{
        max-width:100% !important;
    }

    /* Do not let desktop contact email create horizontal overflow */
    .footer-container > .footer-box:nth-child(4) .footer-info-row a{
        white-space:nowrap !important;
        overflow-wrap:normal !important;
    }
}

@media (max-width: 768px){

    .footer-container{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:32px !important;
        padding-left:22px !important;
        padding-right:22px !important;
    }

    .footer-container > .footer-box,
    .footer-container > .footer-company{
        padding:0 !important;
        border-left:none !important;
        min-height:auto !important;
    }

    .footer-container > .footer-box:nth-child(3) .social-links{
        display:flex !important;
        justify-content:flex-start !important;
        gap:12px !important;
        margin-top:20px !important;
    }
}

/* ===== CONTACT EMAIL SINGLE LINE ===== */
@media (min-width:769px){
    .footer-container > .footer-box:nth-child(4) .footer-info-row:nth-of-type(2) p,
    .footer-container > .footer-box:nth-child(4) .footer-info-row:nth-of-type(2) a{
        white-space:nowrap !important;
        overflow:visible !important;
        overflow-wrap:normal !important;
        word-break:normal !important;
        font-size:16px !important;
    }

    .footer-container > .footer-box:nth-child(4) .footer-info-row:nth-of-type(2){
        white-space:nowrap !important;
    }
}


/* ===== FINAL HEADER NAV CLICK FIX ===== */
.header{
    position:relative !important;
    z-index:1000 !important;
}

.nav-links{
    position:relative;
    z-index:1002;
    pointer-events:auto !important;
}

.nav-links ul,
.nav-links li,
.nav-links a{
    pointer-events:auto !important;
}

.nav-links a{
    position:relative;
    z-index:1003;
    cursor:pointer;
}

.menu-btn{
    position:relative;
    z-index:1004;
}

@media(max-width:768px){
    .header{
        position:relative !important;
        z-index:1000 !important;
    }

    .nav-links{
        position:absolute !important;
        z-index:1005 !important;
    }
}


/* =========================================================
   ABOUT PAGE — PREMIUM ADDITIONS
========================================================= */

.about-story-section{
    padding:100px 20px;
    background:var(--white);
}

.about-story-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:center;
}

.about-story-content h2{
    font-size:44px;
    line-height:1.2;
    color:var(--text);
    margin:16px 0 22px;
}

.about-story-content p{
    color:#52635F;
    font-size:17px;
    line-height:1.9;
    margin-bottom:18px;
    text-align:justify;
}

.about-story-highlight{
    background:linear-gradient(145deg,var(--secondary),#263B37);
    border-radius:28px;
    padding:42px;
    box-shadow:0 25px 60px rgba(0,0,0,.15);
}

.experience-badge{
    width:170px;
    height:170px;
    border-radius:50%;
    background:var(--primary);
    color:var(--white);
    margin:0 auto 35px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.2);
}

.experience-badge strong{
    font-size:52px;
    line-height:1;
}

.experience-badge span{
    font-size:14px;
    line-height:1.4;
    margin-top:7px;
    font-weight:600;
}

.story-highlight-card{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:20px 0;
    border-top:1px solid rgba(255,255,255,.16);
}

.story-highlight-card i{
    color:var(--primary);
    font-size:28px;
    min-width:32px;
    margin-top:3px;
}

.story-highlight-card h3{
    color:var(--white);
    font-size:21px;
    margin-bottom:7px;
}

.story-highlight-card p{
    color:rgba(255,255,255,.78);
    font-size:14px;
    line-height:1.7;
    margin:0;
}

/* Vision & Mission */
.vision-mission{
    padding:100px 20px;
    background:var(--background);
}

.vision-mission-grid{
    max-width:1100px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.purpose-card{
    background:var(--white);
    border-radius:22px;
    padding:38px;
    display:flex;
    align-items:flex-start;
    gap:25px;
    border:1px solid #D7E7E3;
    box-shadow:0 12px 35px rgba(0,0,0,.07);
    transition:.4s ease;
}

.purpose-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 45px rgba(0,0,0,.12);
}

.purpose-icon{
    width:70px;
    height:70px;
    min-width:70px;
    border-radius:18px;
    background:var(--background);
    display:flex;
    align-items:center;
    justify-content:center;
}

.purpose-icon i{
    color:var(--primary);
    font-size:30px;
}

.purpose-card h3{
    color:var(--text);
    font-size:26px;
    margin-bottom:12px;
}

.purpose-card p{
    color:#52635F;
    line-height:1.8;
    font-size:16px;
}

/* Core Values */
.core-values{
    padding:100px 20px;
    background:var(--white);
}

.values-grid{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.value-card{
    background:var(--background);
    border-radius:20px;
    padding:35px 25px;
    text-align:center;
    border:1px solid #D7E7E3;
    transition:.4s ease;
}

.value-card:hover{
    transform:translateY(-8px);
    background:var(--white);
    box-shadow:0 20px 40px rgba(0,0,0,.1);
}

.value-card i{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    background:var(--white);
    color:var(--primary);
    font-size:28px;
}

.value-card h3{
    color:var(--text);
    font-size:22px;
    margin-bottom:10px;
}

.value-card p{
    color:#52635F;
    line-height:1.7;
    font-size:15px;
}

/* Process additions */
.process-section{
    background:var(--background);
}

.process-icon{
    display:block;
    color:var(--primary);
    font-size:28px;
    margin:0 auto 15px;
}

/* Quality */
.about-quality-section{
    padding:100px 20px;
    background:var(--white);
}

.about-quality-grid{
    max-width:1200px;
    margin:0 auto;
}

.about-quality-grid .quality-card{
    border:1px solid #D7E7E3;
}

/* Experience / stats */
.about-stats-section{
    padding:75px 20px;
    background:var(--background);
}

.about-stats-grid{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.about-stat-card{
    background:var(--white);
    min-height:190px;
    padding:30px 20px;
    border-radius:20px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 30px rgba(0,0,0,.07);
    border:1px solid #D7E7E3;
    transition:.35s ease;
}

.about-stat-card:hover{
    transform:translateY(-7px);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.about-stat-card i{
    color:var(--primary);
    font-size:32px;
    margin-bottom:14px;
}

.about-stat-card strong{
    color:var(--text);
    font-size:30px;
    line-height:1.2;
    margin-bottom:8px;
}

.about-stat-card span{
    color:#52635F;
    font-size:15px;
    line-height:1.5;
}

/* CTA */
.about-cta{
    margin-top:0;
}

.cta-eyebrow{
    display:block;
    color:var(--primary);
    letter-spacing:3px;
    font-size:15px;
    font-weight:700;
    margin-bottom:12px;
}

.about-cta .btn-primary,
.about-cta .btn-whatsapp{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
}

.about-cta .btn-primary:hover{
    background:var(--white);
    color:var(--text);
}

.about-cta .btn-whatsapp{
    background:var(--white);
    color:var(--text);
}

.about-cta .btn-whatsapp:hover{
    background:var(--primary);
    color:var(--white);
}

/* Responsive */
@media(max-width:992px){
    .about-story-container{
        grid-template-columns:1fr;
        gap:45px;
    }

    .about-story-content{
        max-width:850px;
        margin:auto;
    }

    .about-story-highlight{
        max-width:700px;
        width:100%;
        margin:auto;
    }

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

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

@media(max-width:768px){
    .about-story-section,
    .vision-mission,
    .core-values,
    .about-quality-section{
        padding:70px 20px;
    }

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

    .about-story-content p{
        font-size:15px;
        text-align:justify;
    }

    .about-story-highlight{
        padding:30px 24px;
        border-radius:22px;
    }

    .experience-badge{
        width:145px;
        height:145px;
    }

    .experience-badge strong{
        font-size:44px;
    }

    .vision-mission-grid{
        grid-template-columns:1fr;
    }

    .purpose-card{
        padding:28px 22px;
        gap:18px;
    }

    .purpose-icon{
        width:58px;
        height:58px;
        min-width:58px;
    }

    .purpose-icon i{
        font-size:24px;
    }

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

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

    .values-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .value-card{
        padding:30px 22px;
    }

    .about-stats-section{
        padding:60px 20px;
    }

    .about-stats-grid{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .about-stat-card{
        min-height:160px;
        padding:22px 12px;
    }

    .about-stat-card strong{
        font-size:23px;
    }

    .about-stat-card span{
        font-size:13px;
    }

    .about-cta{
        padding:65px 20px;
    }
}

@media(max-width:480px){
    .about-stats-grid{
        grid-template-columns:1fr;
    }

    .about-stat-card{
        min-height:145px;
    }

    .cta-buttons{
        width:100%;
    }

    .about-cta .btn-primary,
    .about-cta .btn-whatsapp{
        width:100%;
        max-width:280px;
    }
}


/* =========================================================
   ABOUT PAGE HERO — PREMIUM BACKGROUND
========================================================= */

.about-hero{
    position:relative;
    min-height:520px;
    height:65vh;
    background:url("../images/about-hero.png") center center/cover no-repeat;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.about-hero-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    background:linear-gradient(
        90deg,
        rgba(25,37,35,.78) 0%,
        rgba(25,37,35,.48) 48%,
        rgba(25,37,35,.18) 100%
    );
}

.about-hero-content{
    width:1200px;
    max-width:90%;
    margin:0 auto;
    padding-top:70px;
    color:var(--white);
    animation:aboutHeroFade 1s ease both;
}

.about-hero-content > span{
    display:inline-block;
    color:var(--primary);
    font-size:16px;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:14px;
}

.about-hero-content h1{
    max-width:760px;
    margin:0 0 22px;
    color:var(--white);
    font-size:56px;
    line-height:1.15;
    font-weight:700;
}

.about-breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--white);
    font-size:15px;
}

.about-breadcrumb a{
    color:var(--primary);
    text-decoration:none;
    transition:.3s;
}

.about-breadcrumb a:hover{
    color:var(--white);
}

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

@media(max-width:992px){
    .about-hero{
        min-height:460px;
        height:58vh;
    }

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

@media(max-width:768px){
    .about-hero{
        min-height:390px;
        height:52vh;
    }

    .about-hero-overlay{
        background:linear-gradient(
            180deg,
            rgba(25,37,35,.62),
            rgba(25,37,35,.50)
        );
    }

    .about-hero-content{
        max-width:92%;
        padding-top:75px;
        text-align:center;
    }

    .about-hero-content > span{
        font-size:12px;
        letter-spacing:2px;
    }

    .about-hero-content h1{
        font-size:34px;
        line-height:1.2;
        margin-bottom:18px;
    }

    .about-breadcrumb{
        justify-content:center;
        font-size:14px;
    }
}

@media(max-width:480px){
    .about-hero{
        min-height:350px;
        height:48vh;
    }

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


/* =========================================================
   SERVICES PAGE — PREMIUM MOTION & HOVER POLISH
   Subtle animation only: clean, professional, not distracting.
========================================================= */

.service-hero{
    overflow:hidden;
}

.service-hero::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,.08) 45%,
        transparent 70%
    );
    transform:translateX(-120%);
    animation:serviceHeroShine 8s ease-in-out infinite;
}

.service-overlay{
    position:relative;
    z-index:1;
}

.service-hero-title{
    animation:serviceHeroTitle 1s cubic-bezier(.2,.7,.2,1) both;
}

.service-hero p{
    animation:serviceHeroText 1s .15s cubic-bezier(.2,.7,.2,1) both;
}

.service-hero .breadcrumb{
    animation:serviceHeroText 1s .3s cubic-bezier(.2,.7,.2,1) both;
}

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

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

@keyframes serviceHeroShine{
    0%,55%{transform:translateX(-120%);}
    75%,100%{transform:translateX(120%);}
}

/* Service cards */
.service-box{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(124,187,174,.12);
}

.service-box::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:4px;
    height:0;
    background:var(--primary);
    transition:height .45s ease;
}

.service-box:hover::before{
    height:100%;
}

.service-box i{
    transition:transform .45s ease, color .3s ease;
}

.service-box:hover i{
    transform:translateY(-4px) scale(1.08);
}

/* Tabs */
.tab-image{
    overflow:hidden;
    border-radius:20px;
}

.tab-image img{
    transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}

.tab-image:hover img{
    transform:scale(1.045);
    filter:saturate(1.05);
}

.tab-btn{
    position:relative;
    overflow:hidden;
}

.tab-btn::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:0;
    height:3px;
    background:var(--secondary);
    transform:translateX(-50%);
    transition:width .3s ease;
}

.tab-btn:hover::after,
.tab-btn.active::after{
    width:45%;
}

/* Quality cards */
.quality-card{
    position:relative;
    overflow:hidden;
}

.quality-card i{
    transition:transform .45s ease;
}

.quality-card:hover i{
    transform:translateY(-5px) rotate(-5deg) scale(1.08);
}

/* Brand cards */
.brand-card{
    position:relative;
    overflow:hidden;
}

.brand-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:18px;
    border:1px solid transparent;
    transition:border-color .35s ease, box-shadow .35s ease;
    pointer-events:none;
}

.brand-card:hover::after{
    border-color:rgba(124,187,174,.45);
    box-shadow:inset 0 0 0 1px rgba(124,187,174,.12);
}

/* FAQ */
.faq-item{
    transition:transform .35s ease, box-shadow .35s ease;
}

.faq-item:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 32px rgba(0,0,0,.10);
}

.faq-icon{
    transition:transform .35s ease;
}

.faq-item.active .faq-icon{
    transform:rotate(180deg);
}

/* Respect reduced-motion accessibility preference */
@media (prefers-reduced-motion: reduce){
    .service-hero::after,
    .service-hero-title,
    .service-hero p,
    .service-hero .breadcrumb{
        animation:none !important;
    }

    .service-box,
    .quality-card,
    .brand-card,
    .faq-item,
    .tab-image img,
    .service-box i,
    .quality-card i,
    .faq-icon{
        transition:none !important;
        transform:none !important;
    }
}


/* =========================================================
   BRANDS WE TRUST — PREMIUM INFINITE CAROUSEL
   Added without changing the existing brand names/images.
========================================================= */

.brands-section{
    overflow:hidden;
}

.brands-carousel{
    position:relative;
    width:100%;
    margin-top:60px;
    overflow:hidden;
    padding:8px 0 18px;
    -webkit-mask-image:linear-gradient(
        to right,
        transparent 0,
        #000 5%,
        #000 95%,
        transparent 100%
    );
    mask-image:linear-gradient(
        to right,
        transparent 0,
        #000 5%,
        #000 95%,
        transparent 100%
    );
}

.brands-track{
    display:flex;
    align-items:center;
    gap:24px;
    width:max-content;
    animation:brandsInfiniteScroll 28s linear infinite;
    will-change:transform;
}

.brands-carousel:hover .brands-track{
    animation-play-state:paused;
}

.brands-carousel .brand-card{
    flex:0 0 210px;
    width:210px;
    height:145px;
    margin:0;
    background:var(--white);
    border:1px solid #E6EEEC;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.brands-carousel .brand-card:hover{
    transform:translateY(-7px);
    border-color:rgba(124,187,174,.55);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.brands-carousel .brand-card img{
    width:170px;
    max-width:80%;
    max-height:90px;
    object-fit:contain;
    display:block;
    transition:transform .35s ease, filter .35s ease;
}

.brands-carousel .brand-card:hover img{
    transform:scale(1.07);
    filter:grayscale(0%);
}

@keyframes brandsInfiniteScroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(calc(-50% - 12px));
    }
}

@media(max-width:992px){

    .brands-carousel .brand-card{
        flex-basis:190px;
        width:190px;
        height:135px;
    }

    .brands-track{
        gap:20px;
        animation-duration:25s;
    }
}

@media(max-width:768px){

    .brands-section{
        padding:75px 20px;
    }

    .brands-carousel{
        margin-top:40px;
        -webkit-mask-image:none;
        mask-image:none;
    }

    .brands-track{
        gap:14px;
        animation-duration:22s;
    }

    .brands-carousel .brand-card{
        flex-basis:155px;
        width:155px;
        height:115px;
        border-radius:15px;
    }

    .brands-carousel .brand-card img{
        width:125px;
        max-height:70px;
    }
}

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

    .brands-track{
        animation:none !important;
        transform:none !important;
        width:100%;
        flex-wrap:wrap;
        justify-content:center;
    }

    .brands-track .brand-card:nth-child(n+7){
        display:none;
    }
}