/* ========================= */
/* START GLOBAL CSS */
/* ========================= */

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

body{
    line-height: 1.5;
    
}
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body{
    font-family: "Poppins", sans-serif;
    background-color: #0B0B0B;
}

a{
    text-decoration: none;
    color: var(--text-color);
}

li{
    list-style: none;
}

img{
    width: 100%;
    display: block;
}

#menu a:hover {
    color: var(--primary-color);

}

/* ========================= */
/* ROOT VARIABLES */
/* ========================= */

:root{
    --bg-color:#0B0B0B;
    --white-color:#ffffff;
    --text-color:#CFCFCF;

    --primary-color:#C58B45;
    --primary-hover:#d89a50;

    --whatsapp-color:#0D9AA5;

    --navbar-bg:rgba(0,0,0,0.35);
    --border-color:rgba(255,255,255,0.08);
}

/* ========================= */
/* COMMON CLASSES */
/* ========================= */

.container{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.btn{
    display: inline-flex;
    align-items: center;
    gap: 1rem;

    padding: 1.4rem 2.4rem;

    border-radius: 5rem;

    font-size: 1.5rem;
    font-weight: 500;

    color: white;

    transition: 0.3s ease;
}

.btn i{
    font-size: 1.4rem;
}

/* ========================= */
/* START NAVBAR */
/* ========================= */

.section-navbar{
    width: 100%;

    position: fixed;
    top: 0;
    left: 0;

    z-index: 999;
}

.section-navbar{
    background-color: var(--navbar-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

.navbar-container{
    height: 9rem;

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

   

    border-bottom: 1px solid var(--border-color);
}

.navbar-brand img{
    width: 14rem;
}

.navbar ul{
    display: flex;
    align-items: center;
    gap: 3rem;
}

.navbar a{
    color: white;
    font-size: 1.6rem;
    font-weight: 500;

    transition: 0.3s;
}

.navbar a:hover{
    color: var(--primary-color);
   
}

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

    
}

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

/* ========================= */
/* START HERO SECTION */
/* ========================= */

.section-hero{
    width: 100%;
    
    min-height: 100vh;

    position: relative;

    overflow: hidden;
    
}

.hero-image{
    width: 100%;
    height: 100vh;
}

.hero-image img{
    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* DARK OVERLAY */

.hero-overlay{
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,0.45);

    z-index: 1;
}

/* HERO CONTENT */

.hero-content{
    width: 100%;
    max-width: 1400px;
    position: absolute;
    top: 50%;
    left: 50%;

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

    z-index: 2;
}

.hero-subheading{
    color: var(--primary-color);

    font-size: 2rem;
    font-weight: 500;

    margin-bottom: 2rem;
}

.hero-content h1{
    color: white;

    font-size: 7rem;
    line-height: 1.1;

    margin-bottom: 2.5rem;
}

.hero-description{
    color: var(--text-color);

    font-size: 1.9rem;
    line-height: 1.7;

    max-width: 70rem;

    margin-bottom: 4rem;
}

.hero-buttons{
    display: flex;
    align-items: center;
    gap: 2rem;
}

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

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

.whatsapp-btn{
    background-color: var(--whatsapp-color);

    box-shadow: 0 1rem 2rem rgba(13,154,165,0.35);
}
.footer-section .container{
    width:100%;
    
}
.footer-section .container {
    display: flex;
    flex-direction: column;
   align-items: center;
   
   
}
    .footer-section .container h2{
    color: #d89a50;
    margin-top: 0.5rem;
    

}
.footer-section .container h1{
    color: white;
    font-size: 3rem;
}
.grid{
    display: grid;
    
    
}

.grid-five--cols{
    grid-template-columns:repeat(5,1fr);
    gap: 2rem;
    padding: 2rem;
    
}

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

.grid-three--cols{
    grid-template-columns: repeat(3,1fr);
    gap: 2rem;
}
 h2{
color: #d89a50;
padding-left: 2rem;
}
.fa-map-marker-alt,.fa-phone,.fa-envelope{
    color: #d89a50;
  
    

  font-size: 2.5rem;
  
   
}


.footer-address h3{
    color: white;
    padding-left: 2rem;
}

.social-links{
    padding: 2rem;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.3s;
}
.social-links a:hover{
    rotate: 360deg;

}



.footer-link img{
    width: 65%;
   margin-top: -2rem;
   

}
.footer-link{
 padding-left: 2rem;
}

.footer-link  p{
    color:var(--text-color);
    font-size: 1.3rem;
    margin-top: -4rem;
    padding-left: 1.7rem;
}

.footer-product--link li{
   color:var(--text-color);
    font-size: 1.5rem;
    margin-top: .5rem;
    padding-left: 2rem;
}
.footer-address p {
    color: var(--text-color);
    padding-left: 5.1rem;
    font-size: 1.3rem
}


.social-links{
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: 3rem;
    padding-left: 2rem;
    margin-top: 2rem;
   
}

.social-links a{
    transition: 0.3s;
}

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


.footer-dev{
    display: flex;
    justify-content: center;
    gap: 4rem;

    padding-top: 3rem;
    margin-top: 5rem;

    border-top: 1px solid rgba(255,255,255,0.08);
}


/*====start about section ===*/

.section-title{
    width: 100%;
    max-width:1400px;
    margin-top: 13rem;
    display: flex;
    flex-direction:column;
    align-items: center;
    
    
}

.section-title h1{
 color: #C58B45;
    font-size:  42px;
    font-weight: bold;
    letter-spacing: 2px;
     font-family: "Cinzel", serif;

    
}
.section-title p{

    color:var(--text-color);
    font-size: 1.5rem;
}

.hero-section--circle{
    width: 350px;
    height: 350px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 5px solid #d4af37;
    background: radial-gradient(circle,rgba(212,175,55,0.4) 0% ,transparent 70%);
    box-shadow: 0 0 20px 20px rgba(212,175,55,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
   

}
.hero-section--circle img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  object-fit: cover;
 
}
.one-circle{

    width: 370px;
    height: 370px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 2px solid #d4af37;
    background: radial-gradient(circle,rgba(212,175,55,0.4) 0% ,transparent 70%);
    box-shadow: 0 0 20px  rgba(212,175,55,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
 

}
.circle-wrapeer{
    padding: 2rem;
    margin: 1rem;
}

.stiching img{
  width:65%;
 
 
 

 
}

.stiching{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stiching-section{
    width: 100%;
  
     display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 2rem;
  
   
  
   
 
  
    
}
.stiching-section h2{
      font-family: "Cinzel", serif;
      font-size: 2rem;
      text-align: center;
    
      

}

/*====end about section ===*/

/*====start contact section ===*/



.contact-section{

    width: 100%;
    max-width: 1400px;
    padding: 3rem;
}

.contact{
    width: 100%;
}

.map-section{
    margin-top: 10rem;
}
.map-section h2{
    font-family: "Cinzel", serif;
      font-size: 4rem;
    


}
.map-section h3{
    color: #C58B45;
    font-size: 2rem;
    font-family: century gothic;
    padding-left: 2rem;
   
    
}


.map-section p{
    color: white;
   font-size: 1.3rem;
     padding-left: 2rem;
 
}

.map-box {
    padding-top: 2rem;
    padding-left: 1rem;
}
.map-box iframe{
    border-radius: 1.5rem;
    -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
    -ms-border-radius: 1.5rem;
    -o-border-radius: 1.5rem;
}

.form-address{
    background: linear-gradient(145deg,#1e1e1e 0%,#111111 100%);
    border: 1px solid rgba(212, 175, 55, 0.15);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
   
   
}

.form-address h2{
    text-align: center;
    font-size: 4rem;
    padding: 1.5rem;
}
.form-address hr{
   
    width: 82%;
    margin: auto;
    border:1px solid #C58B45 ;
    
}
#Phone{
 border: 2px solid #C58B45;
 width: 82%;
 color: white;
 height: 40px;
 padding: 1rem;
 font-size: 2rem;
 background: transparent;
 display: block;
 margin: 3rem auto;
 border-radius: 1rem;
 -webkit-border-radius: 1rem;
 -moz-border-radius: 1rem;
 -ms-border-radius: 1rem;
 -o-border-radius: 1rem;
}
#sub-btn{
 background-color: #C58B45;
 color: white;
 width: 80%;
 height: 40px;
 border: none;
 display: block;
 margin: 3rem auto;
 border-radius:3rem ;
 -webkit-border-radius:3rem ;
 -moz-border-radius:3rem ;
 -ms-border-radius:3rem ;
 -o-border-radius:3rem ;
 font-size: 2rem;
}

/*====end contact section ===*/

/*====start gallery section ===*/
.gallery-section{
    width: 100%;
    max-width: 1400px;
}

.gallery-heading h2{
    font-family: "Cinzel", serif;
      font-size: 4rem;
     text-align: center;

}

.gallery-heading{
    margin-top: 10rem;
}

.main-section img{
    width: 100%;
    background-size: cover;
}
.gallery{
    margin: 2rem;
}
#shadow img{
                 border: 1px solid #d4af37;
                 border-radius:12px;
                 -webkit-border-radius:12px;
                 -moz-border-radius:12px;
                 -ms-border-radius:12px;
                 -o-border-radius:12px;
                 box-shadow: 0 0 15px 5px rgba(244,231,161,0.7),0 0 30px 10px rgba(212,175,55,0.4);
                 transition: all 0.3s ease-in-out;
                 -webkit-transition: all 0.3s ease-in-out;
                 -moz-transition: all 0.3s ease-in-out;
                 -ms-transition: all 0.3s ease-in-out;
                 -o-transition: all 0.3s ease-in-out;
                 -webkit-border-radius:12px;
}

.gallery :nth-child(2) img:hover{
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
    box-shadow: 0 0 20px 8px rgba(244, 231,161, 0.95),0 0 35px 20px rgba(212,175, 55, 0.6);
}
.gallery-blind img{
    width:60%;
    background-size: cover;
    display: block;
  margin: 0 auto;
}

/*====end gallery section ===*/


/*==== start responsive media query ====*/


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

@media(max-width:1024px)
{
.grid-five--cols{
    grid-template-columns: repeat(3,1fr);
}
.contact-section .grid-two--cols{
   gap: 3rem;
}

}


/*==== tablet Responsive====*/
@media(max-width:768px)
{

    .hero-subheading{
       margin-top: 4rem;
    }
.contact-section .grid-two--cols{
    grid-template-columns:1fr;
   display: grid;
   place-items: center;
    
   
 
}

.hero-content h1{
    font-size:4.8rem;
}
.map-section{
   display: flex;
 flex-direction: column;
   justify-content: center;
   align-items: center;
}
}

/*==== mobile Responsive====*/
@media(max-width:425px)
{
    

.hero-content h1{
    font-size:3.2rem;
}
}




/* ================= MOBILE RESPONSIVE 425px ================= */

@media (max-width:425px){

    html{
        font-size: 50%;
    }

    body{
        overflow-x: hidden;
    }

    .container{
        padding: 0 1.5rem;
    }

    /* ===== NAVBAR ===== */

    .navbar-container{
        flex-direction: column;
        height: auto;
        gap: 1.5rem;
        padding: 1.5rem 0;
    }

    .navbar ul{
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
    }

    .navbar a{
        font-size: 1.4rem;
    }

    .navbar-brand img{
        width: 11rem;
    }

    .nav-btn{
        display: inline-flex;
        width: auto;
        padding: 1rem 2rem;
        font-size: 1.4rem;
    }

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

    .hero-content{
        text-align: center;
        padding: 0 2rem;
    }

    .hero-subheading{
        font-size: 1.5rem;
    }

    .hero-content h1{
        font-size: 3.2rem;
        line-height: 1.3;
    }

    .hero-description{
        font-size: 1.5rem;
    }

    .hero-buttons{
        flex-direction: column;
        gap: 1.5rem;
    }

    .btn{
        width: 100%;
        justify-content: center;
    }

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

    .grid-five--cols{
        grid-template-columns: 1fr;
    }

    .footer-section .container h1{
        font-size: 2.5rem;
        text-align: center;
    }

    .footer-dev{
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    /* ===== ABOUT PAGE ===== */

    .section-title h1{
        font-size: 3rem;
        text-align: center;
    }

    .section-title p{
        text-align: center;
        padding: 0 1rem;
    }

    .stiching-section{
        grid-template-columns: 1fr;
    }

    .one-circle{
        width: 280px;
        height: 280px;
    }

    .hero-section--circle{
        width: 250px;
        height: 250px;
    }

    /* ===== GALLERY PAGE ===== */

    .grid-three--cols{
        grid-template-columns: 1fr;
    }

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

    .gallery-blind img{
        width: 100%;
    }

    /* ===== CONTACT PAGE ===== */

    .grid-two--cols{
        grid-template-columns: 1fr;
    }

    .map-box iframe{
        width: 100%;
        height: 350px;
    }

    .form-address h2{
        font-size: 3rem;
    }

    #Phone{
        width: 90%;
    }

    #sub-btn{
        width: 90%;
    }
    .section-hero{
        margin-top: 7rem;
    }
    .nav-btn{
        width: 50%;
    }
    .gallery-section{
        margin-top: 25rem;
    }
    .gallery-blind{
        gap: 2rem;
        width: 90%;
        margin: 0 auto;
    }
    .section-title{
        margin-top: 25rem;
    }
    .contact-section{
        margin-top: 15rem;
    }


}

/* ===== ABOUT PAGE MOBILE FIX ===== */

@media(max-width:425px){

    .stiching-section{
        display: grid;
        grid-template-columns: 1fr;
        gap: 4rem;
        padding: 2rem 1rem;
    }

    .stiching{
        width: 100%;
        align-items: center;
    }

    .stiching img{
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .stiching h2{
        text-align: center;
        padding-left: 0;
        margin-bottom: 2rem;
    }

}

/*==== end responsive media query  ===*/