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

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

body{
    font-family:'Poppins',sans-serif;
    background:#ffffff;
    color:#222;
}

/* 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;
}

.logo img{
    height:100px;
}

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

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

nav ul li a:hover{
    color:#d4af37;
}

.quote-btn{
    background:#D5B368;
    color:#fff;
    padding:12px 28px;
    border-radius:40px;
    text-decoration:none;
    transition:.3s;
}

.quote-btn:hover{
    background:#b9983d;
}

/* 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:#fff;
    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:#D5B368;
    letter-spacing:3px;
    margin-bottom:15px;
}

.hero-content h1{
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

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

.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:#D5B368;
    color:#fff;
}

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

.white-btn{
    background:#fff;
    color:#222;
}

.white-btn:hover{
    background:#D5B368;
    color:#fff;
}

/* 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:#f8f8f8;
}

.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:#d4af37;
    font-weight:700;
    letter-spacing:3px;
   font-size:20px;
}

.about-content h2{
    font-size:52px;
   // margin:20px 0;
    color:#222;
   line-height:1.2;
   font-weight:700;
}

.about-content p {
	font-size: 20px;
	color: #555;
	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:#333;
}

.about-btn{
    display:inline-block;
    padding:15px 35px;
    background:#d4af37;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

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

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

.about-image img:hover{
    transform: scale(1.03);
}
.fa-circle-check{
   color:#d4af37;
   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:#ffffff;
}

.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 #D4AF37;
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.founder-content{
    flex:1;
}

.founder-content h2{
    font-size:42px;
    margin:15px 0;
    color:#222;
}

.founder-content h4{
    color:#D4AF37;
    margin-bottom:20px;
    font-size:22px;
}

.founder-content p{
    color:#555;
    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:#f8f8f8;
    padding:15px 20px;
    border-left:5px solid #D4AF37;
    border-radius:10px;
    font-weight:600;
    color:#333;
}
.detail-box img{
    width:24px;
    height:24px;
    margin-right:12px;
}
blockquote{
    margin-top:20px;
    padding-left:20px;
    border-left:4px solid #D4AF37;
    color:#666;
    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,#ffffff,#faf8f2);
}

.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 #d4af37;
    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:#d4af37;
    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:#d4af37;
    margin-bottom:20px;
    font-size:24px;
}

.founder-content p {
	color: #666;
	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:#fff;
    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:#fff;
    border-left:5px solid #d4af37;
    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:#f8f8f8;
}


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


.services-header h1{
    font-size:45px;
    color:#c89b3c;
}


.services-header p{
    max-width:700px;
    margin:15px auto;
    color:#666;
    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:#d89b22;
    margin-bottom:20px;
	transition:0.4s;

}


.service-card h2{

    font-size:22px;
    margin-bottom:15px;
    color:#222;

}


.service-card p{

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

}


.service-card a{

    display:inline-block;
    margin-top:20px;
    color:#d89b22;
    text-decoration:none;
    font-weight:600;
  transition:0.3s;
}

.service-card:hover a{
    letter-spacing:1px;
    color:#c89b3c;
}

.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:#c89b3c;
}


/* 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:#fff;
}

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

.section-title span{
    color:#D4AF37;
    font-size:42px;
    font-weight:600;
    letter-spacing:2px;
}

.section-title h2{
    font-size:32px;
    margin:15px 0;
    color:#222;
}

.section-title p{
    color:#666;
    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:#fff;
    border-radius:18px;
    padding:35px;
    text-align:center;
    border:1px solid #eee;
    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:#f8f8f8;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:25px;
}

.icon i{
    font-size:34px;
    color:#D4AF37;
}

.why-card h3{
    font-size:24px;
    margin-bottom:15px;
    color:#222;
}

.why-card p{
    color:#666;
    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:#f8f9fa;
}

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

.project-card{
    background:#fff;
    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:#222;
}

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

.project-content a{
    color:#d4a017;
    font-weight:600;
    text-decoration:none;
}

.swiper-button-next,
.swiper-button-prev{
    color:#d4a017;
}

.swiper-pagination-bullet-active{
    background:#d4a017;
}

/* 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:#fff;
}

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

/*.testimonial-card{
    background:#fff;
    border:1px solid #eee;
    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: #fff;
    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:#c89b3c;
    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:#666;
    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:#222;
}*/
.client h4{
    transition:.3s;
}

.testimonial-card:hover .client h4{
    color:#c89b3c;
}

.client span{
    color:#888;
    font-size:14px;
}
.stars{
    color:#c89b3c;
    margin-bottom:15px;
}

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

.testimonial-card:hover .quote i{
    color:#fff;
}
/*
@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:#f8f9fa;
    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:#D4AF37;
    color:#fff;
    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:#D4AF37;
    color:#fff;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
}

.contact-form button:hover{
    background:#b89020;
}

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

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


//end contact
//footer
/*.footer{

    background: linear-gradient(135deg,#111111,#1d1d1d,#2a2a2a);
    color:#fff;
    padding:70px 8% 20px;

}*/
.footer{

background:#171717;
position:relative;

}

.footer::before{

content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;

background:linear-gradient(
90deg,
transparent,
#d4af37,
#ffd86b,
#d4af37,
transparent
);

}

.footer-container {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.5fr;
	gap: 50px;
	margin-left: 30px;
	margin-right: 30px;
}

.footer-logo{

    width:350px;
   /* margin-bottom:20px;*/
   margin-left:-25px;

}

.footer-box p{

    color:#111;
    line-height:1.8;
    margin-bottom:15px;

}

.footer-box h3{

    color:#D4AF37;
    margin-bottom:20px;
    font-size:24px;

}

.footer-box a{

    display:block;
    color:#111;
    text-decoration:none;
    margin-bottom:14px;
    transition:.3s;

}

.footer-box a:hover{

    color:#D4AF37;
    padding-left:10px;

}

.footer-box i{

    color:#D4AF37;
 /*   margin-right:10px;*/

}

.social-links{

    display:flex;
    gap:15px;
    margin-top:25px;

}

.social-links a{

    width:45px;
    height:45px;
    background:#222;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    transition:.4s;

}

.social-links a:hover{

    background:#D4AF37;
    color:#111;
    transform:translateY(-6px);

}

.footer-bottom{

    text-align:center;
    border-top:1px solid rgba(255,255,255,.1);
    margin-top:50px;
    padding-top:20px;
    color:#111;

}


/* Mobile */

@media(max-width:992px){

.footer-container{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:600px){

.footer-container{

grid-template-columns:1fr;
text-align:center;

}

.social-links{

justify-content:center;

}

}
//end footer
//map
.map-section{
    padding:100px 8%;
    background:#fff;
}

.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:#d4af37;
    color:#fff;
    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:#d4af37;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
}

.story-content h2{
    margin:15px 0 20px;
    font-size:42px;
    font-weight:700;
    color:#222;
}

.story-content p{
    color:#666;
    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:12px 20px;
}

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

.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:#D4AF37;
    font-size:22px;
    cursor:pointer;
    transition:.3s;
}
.menu-btn hover{
	 background:#D4AF37;
    color:#fff;
    transform:scale(1.05);
}
.quote-btn{
    display:none;
}

.nav-links{
    position:absolute;
    top:95px;
    left:0;
    width:100%;
    background:#fff;
    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: #D4AF37;
	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:#fff;
}

.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:#c89b3c;
    font-size:42px;
    font-weight:700;
    letter-spacing:3px;
}

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

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

.story-content strong{
    color:#c89b3c;
}

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

.story-btn:hover{
    background:#222;
    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: #fff;
    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: #d5b368;
    margin-bottom: 15px;
}

.service-content h2{
    font-size: 42px;
    color: #222;
    margin-bottom: 20px;
}

.service-content p{
    font-size: 17px;
    line-height: 1.9;
    color: #666;
    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: #d5b368;
    margin-right: 10px;
}

.btn{
    display: inline-block;
    padding: 14px 35px;
    background: #d5b368;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: .3s;
}

.btn:hover{
    background: #222;
    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:#d5b368;
    color:#fff;
    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:#666;
    line-height:1.8;
}

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

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

.project-info i{
    color:#d5b368;
    margin-right:10px;
}

.project-btn{
    display:inline-block;
    background:#d5b368;
    color:#fff;
    padding:15px 35px;
    border-radius:50px;
    text-decoration:none;
    transition:.3s;
}

.project-btn:hover{
    background:#222;
}

/* 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:#fff;
    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:#f8f9fa;
}

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

.section-title h2{
    font-size:36px;
    color:#222;
    margin-bottom:10px;
}

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

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

.stat-card{
    background:#fff;
    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:#d4a017;
    margin-bottom:15px;
}

.stat-card h3{
    font-size:42px;
    color:#222;
    margin-bottom:10px;
}

.stat-card p{
    color:#666;
    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,#0f172a,#1e293b);
    color:#fff;
    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:#d4a017;
    color:#fff;
}

.btn-primary:hover{
    background:#b8860b;
}

.btn-whatsapp{
    background:#25D366;
    color:#fff;
}

.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: #ffffff;
    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: #ffffff;
}

.breadcrumb a{
    color: #d4af37;
    text-decoration: none;
    transition: 0.3s;
}

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

.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:#fff;
    text-align:center;
}

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

.section-tag{
    display:inline-block;
    color:#d4af37;
    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:#666;
    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:#f8f8f8;
}

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

.section-title span{
    color:#d4af37;
    letter-spacing:3px;
    font-size:42px;
    font-weight:600;
}

.section-title h2{
    font-size:42px;
    margin:15px 0;
    color:#222;
}

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

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

.service-box{
    background:#fff;
    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:#d4af37;
    margin-bottom:20px;
}

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

.service-box p{
    color:#666;
    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:#fff;
}

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

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

.tab-btn:hover{
    background:#d4af37;
    color:#fff;
}

.tab-btn.active{
    background:#d4af37;
    color:#fff;
}

.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:#222;
    margin-bottom:20px;
}

.tab-text p{
    color:#666;
    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:#d4af37;
    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:#f8f9fa;
}

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

.quality-card{
    background:#fff;
    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:#d4af37;
    margin-bottom:20px;
}

.quality-card h3{
    margin-bottom:15px;
    color:#222;
}

.quality-card p{
    color:#666;
    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:#ffffff;
}

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

.brand-card{
    background:#fff;
    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:#f8f9fa;
}

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

.faq-item{
    background:#fff;
    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:#fff;
    padding:22px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    text-align:left;
    font-size:18px;
    font-weight:600;
    color:#222;
}

.faq-question:hover{
    color:#d4af37;
}

.faq-icon{
    color:#d4af37;
    font-size:18px;
}

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

.faq-answer p{
    padding:0 30px 25px;
    color:#666;
    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:#fff;
}

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

.process-card{
    background:#fff;
    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:#d4af37;
    color:#fff;
    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:#666;
    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:#fff;
    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:#fff;
}

.projects-hero-breadcrumb a{
    color:#d4af37;
    text-decoration:none;
}

.projects-hero-breadcrumb a:hover{
    color:#fff;
}

/* 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:#fff;
    text-align:center;
}

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

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

.projects-intro-title{
    font-size:42px;
    color:#222;
    line-height:1.3;
    margin-bottom:25px;
}

.projects-intro-description{
    font-size:18px;
    color:#666;
    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:#fff;
}

.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 #d4af37;
    background:#fff;
    color:#222;
    font-size:15px;
    font-weight:600;
    border-radius:50px;
    cursor:pointer;
    transition:.4s ease;
}

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

.featured-project-card{
    display:block;
    background:#fff;
    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:#d4af37;
    color:#fff;
    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:#666;
    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:#f8f9fa;
}

.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:#d4af37;
    color:#fff;
    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:#666;
    margin-bottom:18px;
}

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

.project-btn{
    display:inline-block;
    padding:12px 25px;
    background:#d4af37;
    color:#fff;
    text-decoration:none;
    border-radius:30px;
    transition:.3s;
}

.project-btn:hover{
    background:#222;
}*/

/* ===========================
   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:#fff;
}

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

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

.projects-video-header span{
    color:#d4af37;
    font-weight:700;
    letter-spacing:2px;
}

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

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

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

.projects-video-card{
    background:#fff;
    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:#666;
}

/* 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:#f8f9fa;
}

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

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

.section-title span{
    color:#d4af37;
    font-weight:700;
    letter-spacing:2px;
}

.section-title h2{
    font-size:42px;
    margin:15px 0;
    color:#222;
}

.section-title p{
    color:#666;
    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:#fff;
    font-size:26px;
    margin-bottom:15px;
}

.gallery-btn{
    width:max-content;
    padding:12px 24px;
    border:none;
    border-radius:30px;
    background:#d4af37;
    color:#fff;
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

.gallery-btn:hover{
    background:#fff;
    color:#222;
}

/* Swiper */

.gallerySwiper .swiper-button-next,
.gallerySwiper .swiper-button-prev{
    color:#d4af37;
}

.gallerySwiper .swiper-pagination-bullet-active{
    background:#d4af37;
}

/* ===========================
   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: #fff;
    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: #fff;
    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:#555;
}

.gallery-modal-content h4{
    color:#222;
}

/* ===========================
   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;
}

}