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

body{
    font-family: Arial, Helvetica, sans-serif;
    background: rgb(197, 212, 205);
    overflow-x: hidden;
}

.header{
    background: beige;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo img{
    width: 7%;
    min-width: 60px;
}


.nav-bar{
    display: grid;
    grid-template-columns: 2fr 1fr 0.5fr 0.5fr;
    
}

ul{
    display: flex;
    list-style: none;
    gap: 20px;
    padding-top: 15px;
    
}

li a{
    text-decoration: none;
    color: #0f1f1a;
    font-weight: bold;
    transition: 0.5s;
}

li a:hover{
    border-bottom: 2px solid #0f1f1a;
}


.cart-button{
    cursor: pointer;
    position:relative; 
    font-size:20px; 
    border: none;
    background: beige;
    color: #1e3a2f;
    width:70px; 
    height:50px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
   
    left: 80%;
}

.menu-btn{
    display: none;
    padding: 10px;
    font-weight: bold;
    border: none;
    font-size: 35px;
    cursor: pointer;
}


#backMenu {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
  display: none;
}
#backMenu.active { 
    display: block; 
}

#sideBar {
  position: fixed ;
  top: 0; 
  right: -100% ;
  width: 70%;
  max-width: 300px;
  height: 100% ;
  background: white ;
  z-index: 9999 ;
  transition: right 0.3s ease ;
  display: block ;
}

#sideBar.active { 
    right: 0 ; 
}

/* FORCE SIDE LIST TO SHOW */
#sideBar .modal {
  display: block;
}

#sideBar .sideUl {
  display: block ;
  list-style: none;
  padding: 20px ;
  margin-top: 50px ;
}

#sideBar .sideUl li {
  display: block;
  padding: 15px 0 ;
  border-bottom: 1px solid #eee ;
}

#sideBar .sideUl li a {
  display: block ;
  text-decoration: none;
  color: #1e3a2f;
  font-size: 18px;
}


/* THIS IS HERO SECTION */


.hero img{
    position: relative;
    width: 100%;
    height: 70vh;
}

.hero-text{
    background: rgba(0, 0, 0, 0.555);
    padding: 80px;
    position: absolute;
    top: 2%;
    left: 0;
    width: 100%;
    text-align: justify;
    height: 65vh;
}

.hero-h3{
    font-size: 25px;
    font-weight: bold;
    color: orangered;
    margin-bottom: 10px;
}

.hero-text h1{
    line-height: 70px;
    font-size: 78px;
    font-weight: bold;
}
.first-h1{
    color: white;
}

.second-h1{
    color:orangered;
    margin-bottom: 20px;
}

.hero p{
    text-align: justify;
    font-size: 20px;
    color: white;
    margin-bottom: 20px;
}


.menu-list{
    background: none;
    color: white;
    font-weight: bold;
    padding: 10px;
    border-radius: 20px;
    border: 2px solid white;
}






/* THE ABOUT US SECTION */


.aboutUs{
    margin-top: 30px;
    padding: 0 90px;

}

.about-us{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.about-us img{
    border-radius: 30%;
    width: 100%;
    max-height: 250px;
}

.about-text{
    width: 100%;
    color: #1e3a2f;
}

.about-h3{
    color: orangered;
    font-style: italic;
    font-size: 15px;
    margin-bottom: 10px;
}

.about-h2{
    font-size: 35px;
    font-weight: bolder;
    line-height: 30px;
    margin-bottom: 10px;
}

.about-text p{
    font-style: italic;
    font-size: 18px;
    margin-bottom: 20px;
}

.about-btn{
    background: orangered;
    color: white;
    padding: 10px;
    border: none;  
    border-radius: 20px;
    font-weight: bold;
}

.about2{
    background: #1e3a2f;
    color: white;
    width: 100%;
    padding: 20px 0;
}

.about2 h2{
    text-align: center;
    padding-bottom: 15px;
    font-weight: bold;
}

.box-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0 20px;
    text-align: center;
}

.about2-grid{
    border-right: 1px solid white;
    padding: 0 15px;
}


/* FOOD SHOWCASE AREA */

.dishes-text{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 15px;
}

.dishes-text h3{
    color: orangered;
    font-size: 16px;
    font-style: italic;
}

.dishes-text h2{
    color:#1e3a2f;
    font-size: 28px;
}

.dishes-gird{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 0 90px;
}

.dishes-box{
    position: relative;
}

.dishes-p{
    position: absolute;
    background: #1e3a2f;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 100%;
    top: 75%;
    left: 0;
    text-align: center;
    color: white;
    padding: 2px;
    font-weight: bold
}

.dishes-gird img{
    width: 100%;
    height: 80%;
    border-radius: 20px;
}

.works{
    background: #77807c;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 ;
    margin-top: 20px;
    gap: 20px;
}

.openings{
    background: #1e3a2f;
    color: white;
    padding: 30px;
}

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

.opening-p{
    font-size: 18px;
    font-weight: bold;
}
.opening-gird p{
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

.opening-h2{
    font-size: 20px;
    margin-top: 10px;
    text-align: center;
}

.address{
    padding: 10px;
    color: orangered;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    font-size: 14px;
}

.address-h2{
    font-size: 25px;
    padding: 10px 0;
}

/* FOOTER AREA */

footer{
    margin-top: 20px;
    padding: 20px 50px;
    background: #1e3a2f;
    color: white;
    text-align: center;
    line-height: 30px;
}

.footer-gird{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-bottom: 20px;
}

footer img{
    width: 40%;
    max-width: 50px;
}

.copyright{
    padding-top: 20px;
    text-align: center;
    font-weight: bold;
}







/* RESPONSIVENSS FOR TABLET */

@media (max-width:768px) {

    .menu-btn{
        display: block;
        margin-left: 90%;
    }

     .cta{
        display: none;
    }

    ul{
        display: none;
    }

    .hero{
        width: 100%;
        height: 50vh;
    }

    .hero img{
        height: 50vh;
    }

    .hero h1{
        line-height: 40px;
        font-size: 50px;
        text-align: center;
    }

    .hero-h3{
        font-size: 16px;
    }

    .hero p{
        text-align: center;
        font-size: 16px;
    }

    .hero-text{
    background: rgba(0, 0, 0, 0.555);
    position: absolute;
    width: 100%;
    height: 54vh;
    top: 1%;
    left: 0;
    text-align: center;
}

.aboutUs{
    padding: 0 40px;
}

.aboutSecond{
    border-right: none;
}


.about-us{
    text-align: center;
    grid-template-columns: 1fr;
    width: 100%;
    padding: 0;

}



.about-us img{
    width: 100%;
    border-radius: 0;
    max-width: 500px;
    gap: 5px;
}

.about-h3{
    margin-bottom: 10px;
    border-bottom: 2px solid orangered;
    padding-bottom: 10px;
    font-size: 25px;
}


.about-us p{
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
}

.about2 h2{
    font-size: 23px;
    font-weight: bolder;
    
}

    .footer-gird{
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-bottom: 20px;
}

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

.box-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0 20px;
    text-align: center;
}

.dishes-gird{
    grid-template-columns: 1fr 1fr;
    padding: 0 70px;
}
    
}








/* RESPONSIVENSS FOR MOBILE */

@media (max-width: 480px) {
    .menu-btn{
        display: block;
        margin-left: 90%;
    }

    .home-ul{
        display: none;
    }

    .hero-text{
        background: rgba(0, 0, 0, 0.726);
        position: absolute;
        width: 100%;
        height: 58vh;
        top: 0%;
        left: 0;
}

.hero-text h3{
    font-size: 14px;
    margin-bottom: 0;
}

.hero-text h1{
    line-height: 30px;
    font-weight: bolder;
    font-size: 28px;
    margin-bottom: 10px;
}

.hero-text p{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 7px;
}

.order-btn{
    font-size: 14px;
    margin-bottom: 5px;
}

.menu-list{
    font-size: 14px;
}



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


.second{
    border-right: none;
}

.about-us{
    text-align: center;
    grid-template-columns: 1fr;

}


.about-h3{
    margin-bottom: 5px;
    border-bottom: 2px solid orangered;
    padding-bottom: 5px;
    font-size: 16px;
}

.about-h2{
    font-size: 24px;
    font-weight: bolder;
}

.about-p{
    font-size: 20px;
    line-height: 20px;
    font-style: normal;
    font-weight: bolder;
}

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

.about2-grid{
    border-right: none;
    border-bottom: 2px solid #1e3a2f;
    padding-bottom: 10px;
}

.second{
    border-bottom: 2px solid #1e3a2f;
}


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

.footer-gird{
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-bottom: 20px;
}
    
}






















/* THIS IS FOR MENU LIST */

.banner-box{
    position: sticky;
    top: 0;
    z-index: 1000;
}



.menu-nav{
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    background: #1e3a2f;
    
}
.menu-ul{
    display: flex;
    padding: 15px;
}

.menu-ul li a{
    color: white;
    font-size: 20px;
    transition: 0.3s;
}

.menu-ul li a:hover{
    background: orangered;
    border: none;
    color: white;
    padding: 0 5px;
    border-radius: 10px;
}

.menu-main{
    padding: 0 70px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
}

.grid-box{
    box-shadow: 0px 15px 15px 10px rgb(172, 166, 132);
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 10px;
    height: fit-content;
}

.grid-box img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 20px;
}

.box-text h2{
    color: #1e3a2f;
    font-weight: bold;
    margin-bottom: 5px;
}

.box-text p{
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
    margin-bottom: 10px;
}

.box-text h3{
    color: orangered;
    margin-bottom: 10px;
}

.box-text button{
    color: white;
    background: #1e3a2f;
    border: none;
    border-radius: 10px;
    padding: 5px;
    width: 90%;
    font-size: 14px;
    font-weight: bold;
}

/* CART MODAL */
.cart-modal-overlay{
  display: none;
  position:fixed; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  background:rgba(0,0,0,0.5); 
  z-index:1000; 
  justify-content:center; 
  align-items:center; 
  padding:15px;
}

.cart-modal-overlay.active{
    display:flex;
    
}

.cart-modal{
  background:beige; 
  width:100%; 
  max-width:1050px; 
  max-height:92vh; 
  overflow-y:auto; 
  border-radius:16px; 
  padding:20px;
}

.cart-header{
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  border-bottom:1px solid black; 
  padding-bottom:15px;
}

.cart-header-left{
    display:flex; 
    gap:22px; 
    align-items:center;
}

.cart-icon-circle{
  background:orangered;
  color: white; 
  padding:8px 8px; 
  border-radius:50%; 
  font-size:18px;
}

.cart-header h2{
    color: #1e3a2f;
    font-size:20px;
}

.cart-header p{ 
    color:#1e3a2f; 
    font-size:12px;
    font-style: italic;
}

.close-btn{
  background:none; 
  border:none; 
  font-size:24px; 
  cursor:pointer;
}

.cart-body{
    display:grid; 
    grid-template-columns: 1.2fr 0.8fr;
    gap:20px; 
    margin-top:20px;
}

.cart-items{
    flex:2;
}

.order-summary{
  flex:1; 
  background:rgb(71, 104, 71);
  color: white;
  font-weight: bold; 
  padding:20px; 
  border-radius:12px; 
  height:fit-content; 
  border:1px solid white;
}

.summary-line{
  display:flex; 
  justify-content:space-between; 
  margin:12px 0; 
  font-size:14px;
}

.total-line{
  font-weight:bold; 
  font-size:18px; 
  color:orangered; 
  border-top:1px solid #ddd; 
  padding-top:12px;
}

.cart-item{
  display:flex; 
  gap:12px; 
  padding:15px; 
  border:1px solid #f0f0f0; 
  border-radius:12px; 
  margin-bottom:12px; 
  align-items:center; 
  background:white;
}


.cart-item-info{
    flex:1;
}

.cart-item-info h4{
    margin:0 0 4px 0; 
    font-size:15px;
}

.cart-item-info p{
    margin:0 0 5px 0; 
    font-size:12px; 
    color:#666;
}

.qty-controls{
  display:flex; 
  align-items:center; 
  gap:8px; 
  border:1px solid #ddd; 
  border-radius:20px; 
  padding:4px 8px; 
  width:fit-content;
}

.qty-controls button{
  border:none; 
  background:white; 
  width:26px; 
  height:26px; 
  border-radius:50%; 
  cursor:pointer; 
  font-size:16px;
}


.whatsapp-btn{
  width:100%; 
  background:orangered; 
  border:1.5px solid orangered; 
  color:white; 
  padding:12px; 
  border-radius:10px; 
  margin-top:10px; 
  cursor:pointer; 
  font-weight:bold;
}

.secure-text{
    font-size:11px; 
    color:white; 
    text-align:center; 
    margin-top:10px;
}

.continue-btn{
  margin-top:20px; 
  background:none; 
  border:1.5px solid orangered; 
  padding:10px 20px; 
  border-radius:10px; 
  cursor:pointer; 
  color:#0a4d3c;
}






/*  MENU FOR TABLET*/

@media (max-width: 1032px) {

    .banner img{ 
    width: 100%;
    height: 20vh;
}

    .banner-text{
    left: auto;
    width: 100%; 
    height: 80%;
    text-align: center;
    line-height: 35px;
}

.banner-text h3{
    font-size: 20px;
}

.banner-text h1{
    font-size: 70px;
}

.banner-text p{
    font-size: 18px;
    line-height: 20px;
    margin-top: 30px;
}

    .menu-ul li a{
    color: black;
    font-size: 16px;
}

.menu-main{
    padding: 0 70px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.box-text h2{
    font-size: 20px;
}

.cart-body{
    display:grid; 
    grid-template-columns: 1.2fr 0.8fr;
    gap:20px; 
    margin-top:20px;
}
  
}





/* MENU FOR MOBILE */

@media (max-width: 560px) {

    .banner-text{
        width: 100%; 
        height: 80%;
        line-height: 20px;
        top: 1%;
    }

    .banner-text h3{
    color: orangered;
    font-size: 14px;
    font-style: italic;
    margin-bottom: 10px;
}

.banner-text h1{
    font-weight: bold;
    font-size: 45px;
    margin-bottom: 5px;
}

.banner-text p{
    margin-top: 10px;
    font-size: 14px;
    color: white;
    font-weight: bold;
}

    .menu-ul li a{
        font-weight: bolder;
        font-size: 12px;
    }

    .menu-main{
        grid-template-columns: 1fr;
    }

    .cart-body{
    grid-template-columns: 1fr;
    
}
    
}









/* STYLING FOR ABOUT PAGE */


.about-hero img{
    width: 100%;
    height: 60vh;
    position: relative;
}

.sec-text{
    position: absolute;
    top: 20%;
    background: rgba(0, 0, 0, 0.342);
    padding: 70px;
    width: 50%;
}

.sec-text h3{
    color: orangered;
    font-size: 18px;
    font-style: italic;
}

.sec-text h2{
    color: white;
    font-weight: bold;
    font-size: 50px;
}

.sec-text h1{
    color: #1e3a2f;
    font-size: 60px;
    font-weight: bold;
    line-height: 30px;
    margin-bottom: 15px;
}

.sec-text p{
    color: white;
    font-weight: bold;
}

.main{
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 50px;
    padding: 0 70px;
    margin: 30px 0;
}

.main img{
    width: 100%;
    border-radius: 45%;
    border: 2px solid orangered;
}

.main-text h3{
    color: orangered;
    font-style: italic;
    margin-bottom: 10px;
}

.main-text h2{
    color: #1e3a2f;
    font-size: 40px;
    line-height: 35px;
    margin-bottom: 15px;
}

.main-text p{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.main-text h4{
    color: #1e3a2f;
    font-weight: bold;
    font-style: italic;
    border-bottom: 2px dotted orangered;
    width: 40%
}

.aboutPage h3{
    color: orangered;
    font-size: 16px;
    text-align: center;
}

.article{
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 50px;
    padding: 0 70px;
    margin: 30px 0;
}

.article img{
    width: 100%;
    height: 100%;
    border-radius: 10%;
    border: 2px solid #1e3a2f;
}

.art-text h3{
    color: orangered;
    font-size: 16px;
    margin-bottom: 8px;
}

.art-text h2{
    color: #1e3a2f;
    font-size: 35px;
    font-weight: bold;
    line-height: 30px;
    margin-bottom: 10px;
}

.art-text p{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

ol{
    padding-left: 20px;

}

ol li{
    list-style: circle;
    color: #1e3a2f;
    font-weight: bold;
}

.sec-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 15px 70px;
    background: #1e3a2f;
    color: white;
    padding: 10px 55px;
    border-radius: 10px;
}

.sec-grid h1{
    font-size: 18px;
    text-align: center;
}

.sec-grid p{
    text-align: center;
    font-size: 15px;
}

.sec-box{
    border-right: 1px solid white;
}

.last{
    border: none;
}






/* ABOUT PAGE FOR TABLET */

@media (max-width: 768px) {

    .sec-text{
        width: 100%;
        height: auto;
    }
    .sec-text h3{
        font-size: 24px;
    }

    .sec-text h2{
        font-size: 40px;
    }

    .sec-text h1{
        font-size: 50px;
    }

    .sec-text p{
        font-size: 20px;
        font-weight: 100;
    }

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

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

    .main-text h4{
        width: 100%;
    }

    .theSecond, .theLast{
        border-right: none;
    }

    .article{
        grid-template-columns: 1fr;
        padding: 0 40px;
    }

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

    ol li{
        list-style: inside;
    }

    .sec-grid{
        gap: 30px;
        grid-template-columns: 1fr 1fr;
        margin: 0 40px;
    }


.text{
    grid-template-columns: 1fr;
    gap: 10px;
}
    

}





/* ABOUT PAGE FOR MOBILE */

@media (max-width:480px) {
    .sec-text h3{
        font-size: 16px;
    }

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

    .sec-text h1{
        font-size: 35px;
    }

    .sec-text p{
        font-size: 18px;
        font-weight: 100;
    }

    .main h2{
        font-size: 30px;
    }

    .main p{
        font-size: 14px;
    }

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

    .art-text p{
        font-size: 14px;
    }


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

    .sec-box{
        border-right: none;
        border-bottom: 2px solid white;
        padding-bottom: 20px;

    }


    .text{
    grid-template-columns: 1fr;
    gap: 0;
    top: 0;
    width: 100%;
}

.text-p{
    line-height: 23px;
}
    
}








/* STYLING FOR CONTACT PAGE */
.heroSection img{
    position: relative;
    width:  100%;
    height: 30vh;
}

.heroText{
    position: absolute;
    top: 26%;
    background: rgba(0, 0, 0, 0.603);
    width: 100%;
    height: 30vh;
    text-align: center;
    line-height: 38px;
}

.heroText h3{
    color: orangered;
    font-size: 18px;
    font-style: italic;
}

.heroText h1{
    color: white;
    font-size: 50px;
    font-weight: bold;
}

.heroText h2{
    color: #1e3a2f;
    font-size: 50px;
    font-weight: bold;
}

.heroText p{
    font-size: 14px;
    color: white;
    font-weight: bold;
}

.orderBtn{
    background: #1e3a2f;
    padding: 10px;
    color: white;
    border: none;
    font-weight: bold;
    font-size: 14px;
    border-radius: 20px;
}

.orderBtn2{
    margin-left: 10px;
    background: none;
    color: white;
    padding: 10px;
    border-radius: 20px;
    border: 2px solid white;
    font-weight: bold;
}


.mainGird1{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 20px 90px;
    color: #1e3a2f;
    text-align: center;
}

.girdBox{
    line-height: 25px;
    border-right: 2px solid #1e3a2f;
    padding: 0 20px;
}

.theLast{
    border-right: none;
}

.mainGird2{ 
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.formSection{
    background: #1e3a2f;
    color: white;
    padding: 20px 30px;
    border-radius: 20px;
}

.formSection h3{
    color: orangered;
    font-size: 16px;
    font-style: italic;
}

.formSection h2{
    font-size: 30px;
}

.formSection p{
    padding-bottom: 20px;
}


input{
    width: 100%;
    padding: 5px;
    border-radius: 10px;
    border: none;
    margin-bottom: 20px;
}

#messageFilter{
    width: 100%;
    padding: 5px;
    border: none;
    margin-bottom: 20px;
}

.message{
    padding-bottom: 170px;
}

.formBtn{
    background: orangered;
    border-radius: 10px;
    border: none;
    text-align: center;
    width: 100%;
    color: white;
    padding: 7px;
    font-weight: bold;
}

.mapSection{
    border: 1px solid #1e3a2f;
    border-radius: 20px;
    padding: 10px 30px;
    color: #1e3a2f;
}

.mapSection p{
    line-height: 30px;
}

.mapBtn{
    margin-bottom: 20px;
    padding: 7px;
    background: orangered;
    color: white;
    border: none;
    border-radius: 20px;
    margin-top: 10px;
}

.mapSection h4{
    margin: 10px 0;
}

.mapSection2{
    margin-top: 20px;
    background: #1e3a2f;
    padding: 20px;
    color: white;
    border-radius: 20px;
    line-height: 30px;
}

.mapBtn2{
    background: orangered;
    padding: 8px;
    border: none;
    border-radius: 20px;
    color: white;
    font-weight: bold;
    margin-top: 10px;
}

.footerSection{
    position: relative;
    padding: 20px 100px;
}

.footerSection img{
    width: 100%;
    height: 30vh;
}

.sectionText{
    background: rgba(0, 0, 0, 0.363);
    padding: 10px;
    position: absolute;
    top: 10%;
    left: 10%;
}

.sectionText h3{
    color: orangered;
    font-size: 16px;
    font-style: italic;
    margin-bottom: 10px;
}

.sectionText h2{
    color: rgb(2, 107, 2);
    font-size: 40px;
    font-weight: bolder;
    line-height: 35px;
    margin-bottom: 10px;
}

.sectionText p{
    color: white;
    margin-bottom: 20px;
}






/* CONTACT PAGE FOR TABLET */
@media (max-width: 768px) {
    .heroText{
        height: 25vh;
    }

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

    .second{
        border-right: none;
    }

    .girdBox{
      
        padding: 0 20px;
    }

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

    .footerSection img{
        height: 20vh;
    }

    .sectionText{
        left: 18%;
        top: 15%;
    }

   
    
}



/* CONTACT PAGE FOR MOBILE */
@media (max-width: 480px) {

    .heroText{
        line-height: 30px;
        height: 25vh;
    }
    .heroSection h1{
        font-size: 30px;
    }

    .heroSection h2{
        font-size: 30px;
    }

    .heroSection h3{
        font-size: 14px;
    }

    .heroSection p{
        line-height: 20px;
        font-size: 12px;
    }

    .heroSection button{
        font-size: 12px;
        font-weight: bold;
    }



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

    .girdBox{
        border: none;
    }

    .mainGird2{
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

   

    .formSection{
        margin: 0 20px;
    }

    .mapSection{
        margin: 0 20px;
    }

    .footerSection{
        padding: 10px 20px;
    }


    .sectionText{
        top: 10%;
        left: 6%;
        padding: 0px;
        line-height: 10px;

    }
    .sectionText h3{
        font-size: 18px;
        margin-bottom: 5px;
    }

    .sectionText h2{
        font-size:  30px;
        margin-bottom: 2px;
    }

    .sectionText p{
        margin-bottom: 10px;
        font-size: 12px;
    }
    
    
}