/* <!-- //////////.container1//////// --> */




  .container_bg{
    position: fixed;
z-index: -1;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
opacity: .7;
height: 100vh;

  }

  .container_bg img{
width: 100%;
  }



  #container1 {
      overflow: hidden;
      position: relative;
      width: 100%;
      max-height: 600px;
      display: flex;
  }

  #container1 img {
    display: flex;
      width: 100%;
      height: auto;
      object-fit: cover;
      object-position: center;

  }


  .text-overlay {
    background-color: rgb(56, 56, 56, .2);
          position: absolute;
          top: 35%;
          left: 50%;
          transform: translate(-50%, -50%);
          color:rgb(255, 255, 255);
          font-size: 24px;
          font-weight: bold;
          text-align: center;
          padding: 10px;
       font-family: 'Cinzel', serif;;
       font-size: 80px;
       border-radius: 80px;
  }


  @media (min-width:0px) and (max-width:600px)
{    .text-overlay{
font-size: 37px;
border-radius: 40px;
}}





/* <!-- //////////.container2boxup/////// --> */

  .container2boxup{
    display: flex;
    flex-direction: column;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
margin-top: -150px;
width: 80%;
max-width: 500px;
height: 270px;
background-color: olive;
margin-top: -100px;
z-index: 10000;
position: relative;
border-radius: 40px;
background-color: white;
box-shadow: 2px 3px 7px 2px rgb(203, 203, 203);
  }


  .container2boxup:hover{
    box-shadow: 2px 3px 7px 2px rgb(221, 221, 221);
  }

  @media (min-width:0px) and (max-width:600px)
{    .container2boxup{
  height: 220px;
  margin-top: -70px;
}}


  .container2boxup .l1{
    font-family: 'Satisfy', cursive;
font-size: 40px;
color: maroon;

  }

  @media (min-width:0px) and (max-width:600px)
{     .container2boxup .l1{
  font-size: 30px;
}}


  .container2boxup img{
    width: 80%;
  }


  .container2boxup .l2{
  color: black;
  font-family: 'Cinzel', serif;;
  margin-top: 20px;
  font-size: 20px;
  }


  @media (min-width:0px) and (max-width:600px)
{      .container2boxup .l2{
  font-size: 15px;
}}


 




/* <!-- ///////book_btn_style////// --> */


    #wap_btn   {
      margin-top: 30px;
            padding: 0.6em 2em;
            border: none;
            outline: none;
            color: rgb(255, 255, 255);
    background-color: maroon;
            cursor: pointer;
            position: relative;
            z-index: 0;
            border-radius: 10px;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
            font-size: 20px;
          }
    
          @media (min-width:0px) and (max-width:700px)
      {     #wap_btn{
        font-size: 15px;
      }}
    
          
         
    





/* <!-- //////image_gallery////////// --> */

.image_gallery{
  margin-top: 60px;
  display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;

margin-left: 10%;
margin-right: 10%;
  gap: 100px 150px ;
}


@media (min-width:0px) and (max-width:700px)
      { .image_gallery{
        gap: 40px;
        margin-top: 40px;
      }}
    


.image_gallery .img {
  width: 90%;
max-width: 370px;
padding: 10px;
border-radius:  30px;
border: 4px solid rgb(255, 255, 255);
/* box-shadow: 2px 3px 7px 2px rgb(215, 215, 215); */
}

@media (min-width:0px) and (max-width:700px)
      {.image_gallery .img{
        padding: 5px;
      }}

.image_gallery .img   img{
 border-radius:  30px;
width: 100%;
}

#img_landscape{
  border: 2px solid red;
  width: 500px;
}


/* <!-- //////////////container_services_css////////// --> */

  .container_services{
    margin-top: 120px;
  display: flex;
  flex-direction: column;
  padding-bottom: 50px;



  
  }

@media (min-width:0px) and (max-width:600px)
{    .container_services{
  margin-top: 40px;
  padding-bottom: 30px;

}}


  .container_services .l1{
  display: flex;
margin-left: auto;
margin-right: auto;
text-transform: capitalize;
font-size: 45px;

font-weight: 400;
font-family: 'Dancing Script', cursive;
  
  }

  @media (min-width:0px) and (max-width:600px)
{  .container_services .l1{
  font-size: 35px;
}}


#con_ser_head{

border-bottom: 3px solid maroon;

padding: 0px 30px 7px 30px;

}

@media (min-width:0px) and (max-width:600px)
{  #con_ser_head{
  padding: 0px 10px 5px 10px;
}}


.service_categories{
margin-top: 40px;
padding-left: 7%;
padding-right: 7%;
display: flex;
flex-wrap: wrap;
gap: 70px;
justify-content: center;



}

@media (min-width:0px) and (max-width:600px)
{  .service_categories{
  gap: 50px;
}}


.services{
border-radius: 20px;





}

@media (min-width:0px) and (max-width:600px)
{  .services{

}}



.services img{
  width: 350px;
  height: 370px;

border-top-right-radius: 20px;
border-top-left-radius: 20px;



}

@media (min-width:0px) and (max-width:600px)
{  .services img{
  width: 290px;
  height: 330px;

}}


.service_description{
 height: 150px;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 15px;
background-color: white;
box-shadow: 2px 3px 7px 2px rgb(207, 207, 207);


}

@media (min-width:0px) and (max-width:600px)
{  .service_description{
  height: 140px;
  margin-top: 10px;

}}

.service_description .l1{
text-transform: uppercase;
font-family:sans-serif;
font-size: 13px;
color: rgb(148, 148, 148);
display: flex;
margin-top: 10px;
font-weight: 300;


}

@media (min-width:0px) and (max-width:600px)
{  .service_description .l1{
  font-size: 11px;
}}


.service_description .l2{
margin-top: 10px;
color: black;
font-family: 'Cinzel', serif;;
font-size: 27px;
border-bottom: 2px solid maroon;

}

@media (min-width:0px) and (max-width:600px)
{  .service_description .l2{
  font-size: 22px;
}}



#services_view_btn{
margin-top: 20px;
font-size: 17px;
padding: 7px 14px ;
background-color: maroon;
border: 2px solid maroon;
color: rgb(255, 255, 255);
border-radius: 7px;
}

@media (min-width:0px) and (max-width:600px)
{  #services_view_btn{
  font-size: 15px;
}}

#services_view_btn:hover{
background-color: white;
color: maroon;
}












#wap_btn{
    display: flex;
    margin-left: auto;
    margin-right: auto;
  }







  .footer{
  margin-top: 30px;
  
  }