@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap');

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

}
:root{
--bg-color:#f1f1f1;
--bg-secondary:#fbfbfb;
--dark-gray:#333;
--light-brown:#c7a17a;
--black:#1f2226;
}
body{
  font-family: "Open Sans", sans-serif;

}
h1,h2,h3{
    font-family: "Oswald", sans-serif;
    color: var(--dark-gray);
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
/* utility classes */
.container{
    max-width: 1200px;
    margin: auto;
}
.text-primary{
    color: var(--light-brown);
}
.heading{
    text-align: center;
}
.heading span{
    font-size: 18px;
}
.heading h2{
    font-size: 40px;
    font-weight: 500;
    text-transform: uppercase;



}
/* <!-- header start --> */

#header{
    position: fixed;
    background-color:#fff ;
    width: 100%;
    border-bottom:1px solid #ccc ;
}
#header .navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: auto;
    height: 90px;
}
#header .navbar .logo{
    width: 300px;
}

#header .navbar ul{
    display: flex;
}

#header .navbar ul li a {
    color: var(--dark-gray);
    font-size:18px ;
    margin: 0 20px;
    font-weight: 500;
    transition: all 0.3 ease ;
}

#header .navbar ul li a:hover {
 color: var(--light-brown);
}

 /* <!-- header end --> */
 /* home start  */
#home{
    background: url("./imgs/home-bg\ \(1\).png") center no-repeat;
    background-size: 100%;
    background-color: var(--bg-color);

}

 #home .home-content{
display: grid;
grid-template-columns: repeat(2, 1fr);
min-height: 100vh;
gap: 3rem; 
align-items: center;
}

.home-content .content-txet h3{
    font-size: 24px;
    font-weight: 400;

}
 .home-content .content-txet h1 {
    font-size: 88px;
    margin: 20px 0;
    line-height: 1.3;
}

 .home-content .content-txet p{
    font-size: 18px;
    line-height: 1.5;

 }
  .home-content .content-txet .btn{
    display:inline-block ;
    margin: 2rem;
    background-color: var(--light-brown);
    color: #fff;
    padding: 15px 25px;
    border-radius: 30px;
    transition: all 0.3 ease;

  }

    .home-content .content-txet .btn i{
        margin-left:5px;

    }
  
    .home-content .content-txet .btn:hover{
        background-color: var(--dark-gray);

    }
        .home-content img{
            display: block;
            width: 100%;

        }

 /* home end */
 /* About start */


#about ,#menu ,#Testimonials ,#contact,
.fotter-top,
#fotter {
padding: 6rem 0;
}

#about .row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2 rem;
align-items: center;
}

#about.row.about-content h2 {
text-transform: uppercase;
font-size:28px;
margin-bottom: 10px;
}

#about .row .about-content .item{
margin: 2rem 0;
}

#about .row .about-content .item h3{
margin-bottom: 5px;
}
 /* About End */


 /* Menu start */
#menu{
    background-color: var(--bg-secondary);

}
#menu .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
    gap: 5rem;
    align-items: center
}

#menu .row .col .item {
display: flex;
justify-content: space-between;
margin: 30px 0;
border: 1px solid #ddd;
padding: 25px 20px;
}

#menu .row .col .item img {
width: 80px;
margin-left: -50px;
}

#menu .row .col .item .details {
margin-left: 20px;
}

#menu .row .col .item .details h3 {
font-size: 20px;
margin-bottom: 15px;
}

#menu .row .col .item .details p {
font-size: 14px;
line-height: 1.6;
}

#menu .row .col .item .price{

border-left: 1px solid #eee;
padding: 20px;
margin: auto;
}
#menu .row .col .item .price p{
    font-size: 20px;
    font-weight: 600;
}
 /* Menu End */

 /* Testimonials start  */

#testimonials .row { 
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 6rem;
gap: 2.5rem;
}

#testimonials .row .item {
background-color: var( --bg-color);
text-align: center;
padding: 25px 25px 35px;
}

#testimonials .row .item img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
border: 5px solid #fff;
margin-top: -50%;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

#testimonials .row .item h3 {
margin: 20px 0 10px;
}

#testimonials .row .item p {
line-height: 1.6;
}
 /* Testimonials End  */

 /* contact start  */
 #contact {
background-color:var(--bg-color);
} 

#contact .row {
display: grid;
grid-template-columns:2fr 1.4fr;
margin-top: 2rem;
}

#contact .row .contact-content {
background-color:#fff;
padding: 2.5rem;
}

#contact .row .contact-content h3 {
    font-size: 26px;
    text-transform: uppercase;
    font-weight: 500;
}
#contact .row .contact-content form input ,
#contact .row .contact-content form textarea {
    display:block;
    width: 100%;
    margin: 15px 0;
    padding: 15px;
    border: 1px solid #ccc;
}

.btn-submit{
background-color: var(--black);
width: 100%;
color: #fff;
padding: 20px;
text-transform: uppercase;
cursor: pointer;
border: none;
transition: all 0.3s ease;
}

.btn-submit:hover{
   background-color: var(--light-brown);

}

#contact .map iframe{
    width: 100%;
    height: 100%;
}
 /* contact End  */
 /* fotter-start */
#footer .fotter-top{
    background: url(./imgs/footer-bg\ \(1\).png);
    color: #fff;
 }
 
#footer .fotter-top .row{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
  }
  #footer .fotter-top .row .col h3 {
    color: #fff;
    margin-bottom: 15px;
  }
  #footer .footer-top .row .col p{
    width: 400px;
    line-height: 1.6;
  }
    #footer .footer-top .row .col ul li {
        margin:10px 0 ;
    }
     #footer .footer-top .row .col ul li i{
        margin-right: 10px;
     }
     #footer .footer-top .row .col ul li i a{
        color: #fff;
     }
     /* copyright start  */
     /* copyright End  */
    #footer .copyright{
        background: var(--dark-gray);
        padding: 30px 0;
        text-align: center;
        color: #fff;
    }
     #footer .copyright p a {
        color: #fff;
        transition: all 0.3s ease;

     }
        #footer .copyright p {
            font-weight:500 ;
        }
        #footer .copyright p a:hover{
        color: var(--light-brown);
     }
 /* fotter-End */