@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Parisienne&family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel&family=Pacifico&family=Parisienne&family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Kalam:wght@300&family=Pacifico&family=Parisienne&family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Dancing+Script&family=Kalam:wght@300&family=Pacifico&family=Parisienne&family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Dancing+Script&family=Kalam:wght@300&family=Open+Sans:wght@300&family=Pacifico&family=Parisienne&family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Dancing+Script&family=Gabarito&family=Kalam:wght@300&family=Open+Sans:wght@300&family=Pacifico&family=Parisienne&family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Dancing+Script&family=Gabarito&family=Kalam:wght@300&family=Nunito:wght@200&family=Open+Sans:wght@300&family=Pacifico&family=Parisienne&family=Satisfy&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Dancing+Script&family=Gabarito&family=Kalam:wght@300&family=Nunito:wght@200&family=Open+Sans:wght@300&family=Pacifico&family=Parisienne&family=Poppins:wght@200&family=Satisfy&display=swap');



*{
    margin: 0;
    padding: 0;
}

.html{
  color: black;
}

a{
  text-decoration: none;
}
body{
  overflow-x: hidden;
}


.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_box1/////////// */



  .big_screen_menu{
    box-shadow: 1px 1px 10px 1px rgb(197, 197, 197);
    position: fixed;
    width: 100%;
    top: 0;

  }
  


  .big_screen_menu img{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    left: 20px;
    top: 6px;
  
    position: absolute;
  
   

  }

  .big_screen_menu img:hover{
border-bottom: 1px solid white;
  }



  /* <!-- ////////header//////// --> */

  
  
  

  .container_hmb{
    background-color: #ffffff;
    display: none;
    max-height: 55px;
padding: 7px 15px;
gap: 10px;
align-items: center;
box-shadow: 1px 1px 10px 1px rgb(176, 176, 176);
  }

  @media (min-width:0px) and (max-width:800px)
{     .container_hmb{
  display: flex;
}}


  

#hmb_menu_icon{
  width: 40px;
}

#img_menu_icon{
  width: 40px;
  height: 40px;
}
     
  .bar1, .bar2, .bar3 {
    width: 30px;
    height: 3px;
    background-color: maroon;
    margin: 6px 0;
    transition: 0.4s;
  }
  
  .change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
  }
  
  .change .bar2 {opacity: 0;}
  
  .change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
  }

  
  
  
  
  /* <!-- //////////small_screen_menu///////// --> */

  .small_screen_menu{
  display: none;
              width: 100%;
              height: 100vh;
              background: transparent;
              z-index: 1;
              overflow: hidden;
    
        
          }

        
  
  
      
  
  
  .s_navbar{
      margin-top: 70px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
  gap: 40px;
   animation: fadeIn 1.7s ease-in-out forwards;
   color: black;
   font-size: 22px;
   font-family: 'Cinzel', serif;
   list-style: none;
   text-decoration: none;
  
  }
  
  

  .s_navbar a{
    text-decoration: none;
    color: black;

  
  }
  .s_navbar a:hover{
 
      color: maroon;
  
  }
  
  
  #s_back_button{
   font-size: 30px;
   color: maroon;
  position: absolute;
  top: 5px;
  right: 20px;
  }
  
  
  #s_contact_us{
    border-bottom: 3px solid maroon;
    padding: 2px 10px;
  }
  
  
  
  .bottom_decor{
      width: 100vw;
      height: 15px;
      background-color: maroon;
      bottom: 0;
      position: absolute;
  
  }
  
  
  


  /* <!-- /////big-screen//menu////// --> */

  .big_screen_menu {
      display: flex;
      flex-direction: row;
      justify-content: center;
      background-color: #ffffff; /* Background color for the navigation bar */
      padding: 15px; /* Add some padding for better spacing */
  }


  @media (min-width:00px) and (max-width:800px)
  {  .big_screen_menu{
display: none;
  }}
   

  .b_navbar {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
  }

  .b_navbar li {
      margin: 0 15px;
  }

  .b_navbar a {
      text-decoration: none;
      color: #000000; /* Text color */
      font-size: 21px;
      font-family: 'Cinzel', serif;

      padding: 5px 15px;
      transition: background-color 0.3s ease; /* Smooth transition for background color */
  }


  @media (min-width:00px) and (max-width:1000px)
  {  .b_navbar a{
    font-size: 15px;
    padding: 5px 8px;
  }}

  .b_navbar a:hover {
     border-bottom: 3px solid maroon;
  }

  #maroon{
    color: maroon;
  }


  










  /* <!-- ////fixed-buttons//////////// --> */

  .contact_logos{
    display: flex;
    z-index: 10000000;
  }
    #whatsapp-button, #call-button, #map-button {
position: fixed;
box-shadow: 2px 3px 5px 2px rgb(220, 220, 220);
transition: opacity 1s ease-in-out;
width: 50px;
height: 50px;
border-radius: 10px;
background-color: rgb(255, 255, 255);
border: 0px;
border-radius: 50%;


}

#map-button{
  bottom: 25px;
right: 30px;
  
}



#call-button{
  right: 30px;
  bottom: 90px;
}

#whatsapp-button{
  right: 30px;
  bottom: 155px
  
}


@media (min-width:0px) and (max-width:600px)
{  #whatsapp-button, #call-button, #map-button {
width: 40px;
height: 40px;


}}


@media (min-width:0px) and (max-width:600px)
{#map-button {

right: 15px;

bottom: 15px;

}}

@media (min-width:0px) and (max-width:600px)
{#whatsapp-button {

right: 15px;

bottom: 65px;

}}

@media (min-width:0px) and (max-width:600px)
{#call-button{

right: 15px;

bottom: 110px;

}}






#whatsapp-button img, #call-button img, #map-button img{
width: 100%;
height: 100%;
border-radius: 50%;

}















    /* /////////////////////       ///////////.footer////////// /////////////////////    ///////////////////// */
.footer{
  z-index: 10000;
  width: 100%;
  border-bottom: 10px solid maroon;
overflow: hidden;
transform: rotate(-.1deg);
background-color: white;

}

.footer .box1{
  width: 100vw;
  display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 50px;
background-color: maroon;



}


@media (min-width:0px) and (max-width:500px)
{.footer .box1 {
  gap: 20px;
}}

.footer .box1 img{
 height: 47px;
 width: 47px;
 border-radius: 50%;
 border: 2px solid white;
 margin-top: 10px;
 margin-bottom: 10px;
}


@media (min-width:0px) and (max-width:500px)
{.footer .box1 img{
height: 30px;
 width: 30px;
 margin-top: 5px;
 margin-bottom: 5px;
}}


.footer .box1 .l1{
font-family: 'Cinzel', serif;
font-size: 40px;
color: white;
}


@media (min-width:0px) and (max-width:700px)
{.footer .box1 .l1{
font-size: 20px;
}}


#decor_con{
width: 100%;
display: flex;
justify-content:center;
align-items: center;
max-height: 50px;

}

#decor_con img{
width: 100%;
height: 100%;

}


/* <!-- //////////style_footer//////// --> */



.footer .box2{
padding-top: 20px;
display: flex;
width: 100%;



  }



  @media (min-width:0px) and (max-width:700px)
{.footer .box2{
flex-wrap: wrap;
padding-top: 10px;
}}


.footer .box2 .box2_1 {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
justify-content: center;
border-bottom: 2px solid rgb(216, 216, 216);
padding-bottom: 20px;

  }


  @media (min-width:0px) and (max-width:700px)
{.footer .box2 .box2_1{
justify-content: unset;
width: 100%;
padding-bottom: 10px;

}}


.footer .box2 .box2_1 .box2_1_1{
display: flex;
justify-content: center;
align-items: center;
gap: 30px;

  }

  @media (min-width:0px) and (max-width:700px)
{.footer .box2 .box2_1 .box2_1_1{
gap: 20px;

}}


.footer .box2 .box2_1 #symbol{
font-size: 35px;
color: #002368;

  }


  @media (min-width:0px) and (max-width:700px)
{.footer .box2 .box2_1 #symbol{
font-size: 27px;
}}

.footer .box2 .box2_1 .l1{
font-size: 20px;
font-family: 'Nunito', sans-serif;

  }


  @media (min-width:0px) and (max-width:700px)
{.footer .box2 .box2_1 .l1{
font-size: 15px;

}}

#blue{
  color: rgb(0, 70, 175);
}


.footer .box2 .box2_1 .a1{
font-size: 22px;
font-family: 'Nunito', sans-serif;


  }


  @media (min-width:0px) and (max-width:700px)
{.footer .box2 .box2_1  .a1{
font-size: 18px;
margin: 10px;
}}



#adderss{
border-right: 2px solid rgb(206, 206, 206);
}

@media (min-width:0px) and (max-width:700px)
{#adderss{
border-bottom: 2px solid rgb(206, 206, 206);
border-right: 0px solid rgb(206, 206, 206);
}}

@media (min-width:0px) and (max-width:700px)
{#contact_details{
margin-top: 20px;
}}



.map_box{
  display: flex;


  width: 100%;
  justify-content: center;
  margin: 20px;
  padding: 20px;
  gap: 80px;
}

@media (min-width:0px) and (max-width:700px)
{  .map_box{
margin: 10px;
padding: 10px;
gap: 00px;

}}


.map_img{
  display: flex;
  width: 230px;  
    height:230px;
  border-radius: 40px;
}

@media (min-width:0px) and (max-width:700px)
{  .map_img{
width: 150px;
height: 150px;
margin-right: 20px;
border-radius: 30px;
}}




.locate_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

@media (min-width:0px) and (max-width:700px)
{  .locate_box  {

}}



.locate_box img {
width: 70px;
}

@media (min-width:0px) and (max-width:700px)
{  .locate_box  img{
width: 50px;
}}





.locate_box button{
font-size: 24px;
padding: 4px 20px;
border: 2px solid #002368;
color: rgb(255, 255, 255);
background-color: #002368;
margin-top: 10px;
font-family: 'Nunito', sans-serif;
border-radius: 10px;

}

@media (min-width:0px) and (max-width:700px)
{  .locate_box button{
font-size: 17px;
padding: 2px 10px;
border-radius: 5px;
}}




.website_ad{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  transform: rotate(-.1deg);
background-color: white;

}


.button-55 {
  align-self: center;
  background-color: #000000;
  background-image: none;
  background-position: 0 90%;
  background-repeat: repeat no-repeat;
  background-size: 4px 3px;
  border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
  border-style: solid;
  border-width: 2px;
  box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-family: Neucha, sans-serif;
  font-size: 1.2rem;
  line-height: 23px;
  outline: none;
  padding: .9rem 1.2rem;
  text-decoration: none;
  transition: all 235ms ease-in-out;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  font-family: 'Poppins', sans-serif;
}

@media (min-width:0px) and (max-width:700px)
{  .button-55{
  padding: .6rem .8rem;
  font-size: .8rem;
}}

.button-55:hover {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  transform: translate3d(0, 2px, 0);
}

.button-55:focus {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
}