:root {
--step-0: clamp(0.31rem, 0.24vi + 0.25rem, 0.83rem);
--step-1: clamp(0.39rem, 0.33vi + 0.31rem, 1.11rem);
--step-2: clamp(0.49rem, 0.46vi + 0.37rem, 1.48rem);
--step-3: clamp(0.61rem, 0.63vi + 0.45rem, 1.97rem);
--step-4: clamp(0.76rem, 0.87vi + 0.55rem, 2.63rem);
--step-5: clamp(0.95rem, 1.19vi + 0.66rem, 3.51rem);
--step-6: clamp(1.19rem, 1.62vi + 0.79rem, 4.67rem);

--border_size:  0px;

}









*[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}


@media (hover: none) {
  .button a:hover {
    background-color: transparent; /* Or your default background */
    opacity: 1; /* Or whatever your default opacity is */
  }
}



h1 {
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-4);
}

h3 {
  font-size: var(--step-3);
}

h4 {
  font-size: var(--step-2);
}

h5 {
  font-size: var(--step-1);
}

p {
  font-size: var(--step-4);
}

a {
  font-size: var(--step-4);
}




@font-face {
  font-family: 'AvenirNextLTPro'; /* Choose a descriptive name */
  src: url('AvenirNextLTProRegular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AvenirNextLTProBold'; /* Choose a descriptive name */
  src: url('AvenirNextLTProBold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}


html, body {
    height: 100%;
    margin: 0;
    padding: 0;

    background-color: #2a6bccAA; 
    font-family: 'AvenirNextLTPro', sans-serif, verdana, arial, tahoma, garamond;
    background-image: url("liora_site_background.webp"); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;


}







.fixed-background {
    background-image: url('liora_site_background.webp'); /* Replace with your image */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed; /* Stays fixed in the viewport on all devices */
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1; /* Ensures it stays behind other content */
}

.content-wrapper {
    position: relative; /* Position content above the background */
    z-index: 1; /* Make sure content is above the fixed-background */
    width: auto;
    height: 100dvh; /* Viewport height for mobile compatibility */
    overflow-y: auto; /* Enable vertical scrolling within this div */
    /* Add transparent or semi-transparent background to your content sections */
    background-color: rgba(255, 255, 255, 00); /* Semi-transparent white overlay */
    padding: 0.0vw;
    border: 0px solid blue;
    object-fit: contain;
  }







    .viewport-border {

        width: 100vdw; /* Occupy 100% of the viewport width */
        height: 100vdh; /* Occupy 100% of the viewport height */
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
        border: var(--border_size) solid red; /* Example border style */

    }


    #title_color {
      background-color: #2a6bccAA;
      color: black;
    }


    .header {
        width: auto;
        height: 14dvh;
        border: var(--border_size) solid blue;
        border: 2px solid black;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        text-align: center;
        background-color: #00000080;
        border: 0px solid red;
        object-fit: contain;
        align-items: center;
        justify-content: space-evenly;
    }

    


    .logo {
        width: 22dvw;
        height: 14dvh;
        border: var(--border_size) solid black;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #00000000;
        object-fit: contain;
        border: 0px solid grey;
      }
    

    .logo img {
        height: 100%;
        width: 100%;
        max-width: 100%; /* Ensures image fits within the container */
        max-height: 100%; /* Ensures image fits within the container */
        border: var(--border_size) solid green;
        box-sizing: border-box;
        padding: 0;
    }

    .logo a {
        font-size: 0px;
    }



    .button-contain {
        width: 75dvw;
        height: auto;        
        border: var(--border_size) solid green;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        object-fit: contain;
        border: 0px solid white;
    }

  
.button {
  width: 14dvw;
  height: auto;
  opacity: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.button a {
  padding: 0px;
  text-decoration: none;
  text-align: center;
  font-size: 0px;
  border: .1rem solid #ffffff60;
  border-radius: .3rem;
  box-sizing: border-box;
}

.button a:hover {
  border: .3rem solid white;
  border-radius: .3rem;
}

.button a:focus {
  border: .3rem solid white;
  border-radius: .3rem;
}

.button a:active {
  border: .17rem solid white;
  border-radius: .3rem;
}

.active_button a {
  border: .17rem solid white;
  border-radius: .3rem;
}




    .section-contain {
        width: 100%;
        height: auto;   /* important controls body height */
        border: var(--border_size) solid blue;
        border: 0px solid black;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        margin-top: 14dvh;
        margin-bottom: 12dvh;
        border: 0px solid red;
        object-fit: contain;
    }


    .main-text-1 {
        border: var(--border_size) solid black;
        border-top: .1rem solid black;
        border-bottom: .1rem solid black;
        box-sizing: border-box;
        padding: 3dvh;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: #000000BB;
        color: white;
        object-fit: contain;
      }


    .main-text-2 {
        border: var(--border_size) solid black;
        border-top: .1rem solid black;
        border-bottom: .1rem solid black;
        box-sizing: border-box;
        padding: 3dvh;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: #00000099;
        color: #a3a3a3;
        object-fit: contain;
        border: 0px solid white;
    }





    .main-section-contain {
        border: 0px solid red;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        background-color: #00000000;
        display: flex;
        flex-direction: column;
        object-fit: contain;
      }






      


.gallery-container {
  display: flex;             /* Aligns images in a horizontal row */
  overflow-x: scroll;        /* Enables horizontal scrolling */
  scroll-snap-type: x mandatory; /* Enforces snapping to each image */
  scroll-behavior: smooth;   /* Makes scrolling smooth when using navigation */
  width: auto;               /* Adjust container width as needed */
  height: 74dvh;             /* Set a fixed height for the gallery */
  object-fit: contain;
  box-sizing: border-box;
  border: 0px solid blue;
  background-color: #00000080;
  color: white;
}



.gallery-container img {
  flex: 0 0 100%;            /* Each image takes up the full width of the container */
  width: 100%;               /* Ensures image scales within its flex container */
  height: 100%;              /* Ensures image scales within its flex container */
  object-fit: contain;         /* Ensures images cover the area nicely */
  scroll-snap-align: center; /* Snaps the center of the image to the center of the container */
  border: 0px solid purple;
  object-fit: contain;
  
}




.hide-scrollbars {
  overflow-x: scroll; /* Allows horizontal scrolling */
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

/* For WebKit browsers (Chrome, Safari, Opera) */
.hide-scrollbars::-webkit-scrollbar {
  display: none;
}





    .main-section-1 {
      border: .1rem solid black;
      box-sizing: border-box;
      background-color: #00000040;
      width: 100%;
      height: auto;
      padding: 0dvh;
      margin: 0px;
      text-align: center;
      color: white;
      object-fit: contain;
    }

    .main-section-2 {
      border: .1rem solid black;
      box-sizing: border-box;
      background-color: #00000099;
      width: 100%;
      height: auto;
      padding: 0dvh;
      margin: 0px;
      text-align: center;
      color: white;
      object-fit: contain;
    }


    .title-bold {
      font-family: 'AvenirNextLTProBold';
      font-weight: bold;
    }



    


    .text-1 {
        border: var(--border_size) solid black;
        border: .7px solid black;
        width: 100%;
        height: 7.4vh;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #000000BB;
        color: white;
        object-fit: contain;
    }

    .text-2 {
        border: var(--border_size) solid white;
        border: .7px solid black;
        width: 100%;
        height: 7.4dvh;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #00000080;
        color: white;
        object-fit: contain;
    }

    
    .section-2 {
        width: 100%;
        height: auto;
        border: 0px solid white;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        flex-direction: column;

    }


    .section-2 img {

        max-width: 100%; /* Ensures image fits within the container */
        max-height: 100%; /* Ensures image fits within the container */
        border: var(--border_size) solid blue;
        box-sizing: border-box;
    }




    .bottom-contain {
        width: 100%;
        height: 12dvh;
        border: var(--border_size) solid green;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        border: 0px solid red;
        align-items: center;
    }




    .bottom-1 {
        width: 100%;
        height: auto;
        border: var(--border_size) solid purple;
        box-sizing: border-box;
    }

    .bottom-2 {
        width: 100%;
        height: auto;
        border: var(--border_size) solid purple;
        box-sizing: border-box;
    }

    .bottom-3 {
        width: 100%;
        height: auto;
        border: var(--border_size) solid purple;
        box-sizing: border-box;
    }




.social_link_contain {
    width: 24dvw;
    height: 12dvh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  border: var(--border_size) solid white;
  border: .1rem solid black;
  box-sizing: border-box;
background-color: #00000080;
object-fit: contain;
}

.social_link_contain img {
  height: auto;
  width: 50%;
  object-fit: contain;
border: 0px;
}

.social_link_contain a {
  font-size: 0px;
    border: var(--border_size) solid black;
}








.actionbar {
  width: 52dvw;
  height: 12dvh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: var(--border_size) solid green;
  border: .1rem solid black;
  box-sizing: border-box;
  background-color: #00000080;
  object-fit: contain;
}

.actionbar_button {
  width: 25dvw;
  height: auto;
  opacity: 100%;

  display: flex;
  justify-content: center;

}


.actionbar_button img {
width: 100%;
height: 100%;
  padding: 0px;
}

.actionbar_button a {
  padding: 0px;
  text-decoration: none;
  text-align: center;
  font-size: 0px;
  border: .1rem solid #ffffff60;
  border-radius: .3rem;
  box-sizing: border-box;
    background-color: #00000060;
}

.actionbar_button a:hover {
  border: .3rem solid white;
  border-radius: .3rem;
}







.bottom_seven_contain {
    width: 24dvw;
    height: 12dvh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  border: var(--border_size) solid white;
  border: .1rem solid black;
  box-sizing: border-box;
background-color: #00000080;
object-fit: contain;
}

.bottom_seven_contain img {
  height: auto;
  width: 60%;
  object-fit: contain;
border: 0px;
}

.bottom_seven_contain a {
  font-size: 0px;
  border: var(--border_size) solid black;
}


    .contact_header {
        width: 100%;
        height: 33.333dvh;
        border: var(--border_size) solid blue;
        border: 10px solid black;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        text-align: center;
        background-color: #000000AA
    }


    .contact_logo {
        width: 36dvw;
        height: auto;
        border: var(--border_size) solid black;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #00000000;     
        padding: 2vw;   
    }

    .contact_logo img {

        height: auto;
        max-width: 100%; /* Ensures image fits within the container */
        max-height: 100%; /* Ensures image fits within the container */
        border: var(--border_size) solid green;
        box-sizing: border-box;
    }

    .contact_logo a {
        font-size: 0px;
    }


    .contact-button-contain {
        width: 100%;
        height: 33.333dvh;        
        border: var(--border_size) solid green;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-color: #00000000;
    }

  
.contact_button {
  width: 100%;
  height: auto;
  opacity: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}


.contact_button img {
  width: 13dvw;
  height: auto;
}

.contact_button a {
  padding: 0px;
  text-decoration: none;
  text-align: center;
  font-size: 0px;
    border: .1rem solid #ffffff60;
  border-radius: .3rem;
  box-sizing: border-box;
  background-color: #00000060;
}

.contact_button a:hover {
  border: .3rem solid white;
  border-radius: .3rem;
}

.contact_active_button a {
  border: .17rem solid white;
  border-radius: .3rem;
}


  .contact-section-contain {
        width: 100%;
        height: auto;   /* important controls body height */
        border: var(--border_size) solid red;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        margin-top: 33.333dvh;
    }


    .contact-section-2 {
        width: 100%;
        height: auto;
        border: 0px solid blue;
        box-sizing: border-box;
        display: flex;

        align-items: center;
        flex-direction: column;
    }


    .contact-bottom-contain {
        width: 100%;
        height: auto;
        border: var(--border_size) solid black;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }  


.contact_social_link_contain {
    width: 100%;
    height: 33.333dvh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  border: 10px solid black;
  box-sizing: border-box;
background-color: #000000BB;
}

.contact_social_link_contain img {
  height: auto;
  min-width: 3dvw;
  max-width: 6dvw;
border: 0px;
}

.contact_social_link_contain a {
  font-size: 0px;
    border: var(--border_size) solid black;
}


.contact_actionbar {
  width: 100%;
  height: 33.333dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  border: var(--border_size) solid green;
  border-left: 10px solid black;
  border-right: 10px solid black;
  box-sizing: border-box;
  background-color: #000000CC;
}

.contact_actionbar_button {
  width: 100%;
  height: auto;
  opacity: 100%;

  background-color: #00000000;
  display: flex;
  justify-content: center;

}

.contact_actionbar_button img {
  height: auto;
  min-width: 20dvw;
  max-width: 28dvw;
  padding: 5px;
}

.contact_actionbar_button a {
  padding: 0px;
  text-decoration: none;
  text-align: center;
  font-size: 0px;
  border: .1rem solid #ffffff80;
  border-radius: .3rem;
  box-sizing: border-box;
}

.contact_actionbar_button a:hover {
  border: .3rem solid white;
  border-radius: .3rem;
}



.header_stick {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #00000080; /* Example background */
  color: white;
  text-align: center;
  padding: 0px; /* Adjust as needed */
  object-fit: contain;
}

.footer_stick {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #00000080; /* Example background */
  color: white;
  text-align: center;
  padding: 0px; /* Adjust as needed */
  object-fit: contain;
}























/* iPad vertical - same as iPhone vertical with iphone horizontal in between*/

@media (max-width: 1050px) {


   .main-section-contain {
        flex-direction: column;
    }

    .section-contain {
        margin-top: 21dvh;
        margin-bottom: 21dvh;
    }
  

    .header {
        flex-direction: column;
        height: 21dvh;
    }
  

    .logo {
        width: 100%;
        height: 100%;
    }

    .logo img {
        width: auto;
        height: 14dvh;
        object-fit: contain;
    }

    
    .button-contain {
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: space-evenly;        
    }

  
.button {
  width: 17dvw;
  height: 100%;
}


.button img {
  width: 17dvw;
  height: auto;
  object-fit: contain;
}

    .section-contain {
        margin-top: 21dvh;
        margin-bottom: 21dvh;
    }


    .main-text-1 {
        width: 100%;
        height: auto;
    }

    .main-text-2 {
        width: 100%;
        height: auto;
    }

    

.gallery-container {
  display: flex;             /* Aligns images in a horizontal row */
  overflow-x: scroll;        /* Enables horizontal scrolling */
  scroll-snap-type: x mandatory; /* Enforces snapping to each image */
  scroll-behavior: smooth;   /* Makes scrolling smooth when using navigation */
  width: 100dvw;               /* Adjust container width as needed */
  height: 58dvh;             /* Set a fixed height for the gallery */
  object-fit: contain;
  box-sizing: border-box;
  
}

.gallery-container img {
  flex: 0 0 100%;            /* Each image takes up the full width of the container */
  width: 100%;               /* Ensures image scales within its flex container */
  height: 100%;              /* Ensures image scales within its flex container */
  object-fit: contain;         /* Ensures images cover the area nicely */
  scroll-snap-align: center; /* Snaps the center of the image to the center of the container */
}




    .bottom-contain {
        width: 100%;
        height: 21dvh;
        flex-direction: column;
    }



.social_link_contain {
    width: 100%;
    height: 7dvh;
}

.social_link_contain img {
  height: 5.5dvh;
  width: auto;
  object-fit: contain;
}





.actionbar {
  width: 100%;
  height: 7dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  border: var(--border_size) solid green;
  border: .1rem solid black;
  box-sizing: border-box;
  background-color: #00000080;
}

.actionbar_button {
  width: 100%;
  height: auto;
  opacity: 100%;

  display: flex;
  justify-content: space-evenly;

}


.actionbar_button img {
  height: auto;
  min-width: 7dvw;
  max-width: 27dvw;
  padding: 5px;
}

.actionbar_button a {
  padding: 0px;
  text-decoration: none;
  text-align: center;
  font-size: 0px;
}






.bottom_seven_contain {
    width: 100%;
    height: 7dvh;
}


.bottom_seven_contain img {
  height: 6dvh;
  width: auto;
  object-fit: contain;
}



.text-1 {
  height: 5.8dvh;
}

.text-2 {
  height: 5.8dvh;
}



    .contact_header {
        width: 100%;
        height: 33.333dvh;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }


    .contact_logo {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;    
    }

    .contact_logo img {
        padding: 0;
        height: auto;
        width: 100%;
    }

    

    .contact-button-contain {
        width: 100%;
        height: 8dvh;        
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
  
.contact_button {
  width: 100%;
  height: auto;
  opacity: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.contact_button img {
  width: 18dvw;
  height: auto;
  padding-top: 0.5dvh;
  padding-bottom: 0.5dvh;
}


  .contact-section-contain {
        width: 100%;
        height: auto;   /* important controls body height */
        display: flex;
        flex-direction: column;
        margin-top: 33.333dvh;
    }


    .contact-section-2 {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        flex-direction: column;
    }


    .contact-bottom-contain {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
    }  


.contact_actionbar {
  width: 100%;
  height: 33.333dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact_actionbar_button {
  width: 100%;
  height: auto;
  opacity: 100%;
  display: flex;
  justify-content: center;

}

.contact_actionbar_button img {
  height: auto;
  min-width: 20dvw;
  max-width: 36dvw;
  padding: 5px;
}



.contact_social_link_contain {
    width: 100%;
    height: 33.333dvh;
}

.contact_social_link_contain img {
  height: auto;
  min-width: 6dvw;
  max-width: 9dvw;
}


}


















@media (max-width: 1050px) and (max-height: 768px) {



    .header {
        width: auto;
        height: 14dvh;
        border: var(--border_size) solid blue;
        border: 2px solid black;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        text-align: center;
        background-color: #00000080;
        border: 0px solid red;
        object-fit: contain;
        align-items: center;
        justify-content: space-evenly;
    }

    


    .logo {
        width: 22dvw;
        height: 14dvh;
        border: var(--border_size) solid black;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #00000000;
        object-fit: contain;
        border: 0px solid grey;
      }
    

    .logo img {
        height: 100%;
        width: 100%;
        max-width: 100%; /* Ensures image fits within the container */
        max-height: 100%; /* Ensures image fits within the container */
        border: var(--border_size) solid green;
        box-sizing: border-box;
        padding: 0;
    }

    .logo a {
        font-size: 0px;
    }



    .button-contain {
        width: 75dvw;
        height: auto;        
        border: var(--border_size) solid green;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        object-fit: contain;
        border: 0px solid white;
    }

  
.button {
  width: 14dvw;
  height: auto;
  opacity: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.button a {
  padding: 0px;
  text-decoration: none;
  text-align: center;
  font-size: 0px;
  border: .1rem solid #ffffff60;
  border-radius: .3rem;
  box-sizing: border-box;
}

.button a:hover {
  border: .3rem solid white;
  border-radius: .3rem;
}

.active_button a {
  border: .17rem solid white;
  border-radius: .3rem;
}




    .section-contain {
        width: 100%;
        height: auto;   /* important controls body height */
        border: var(--border_size) solid blue;
        border: 0px solid black;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        margin-top: 14dvh;
        margin-bottom: 12dvh;
        border: 0px solid red;
        object-fit: contain;
    }


    .main-text-1 {
        border: var(--border_size) solid black;
        border-top: .1rem solid black;
        border-bottom: .1rem solid black;
        box-sizing: border-box;
        padding: 3dvh;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: #000000BB;
        color: white;
        object-fit: contain;
      }


    .main-text-2 {
        border: var(--border_size) solid black;
        border-top: .1rem solid black;
        border-bottom: .1rem solid black;
        box-sizing: border-box;
        padding: 3dvh;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: #00000099;
        color: #a3a3a3;
        object-fit: contain;
        border: 0px solid white;
    }





    .main-section-contain {
        border: 0px solid red;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        background-color: #00000000;
        display: flex;
        flex-direction: column;
        object-fit: contain;
      }




.gallery-container {
  display: flex;             /* Aligns images in a horizontal row */
  overflow-x: scroll;        /* Enables horizontal scrolling */
  scroll-snap-type: x mandatory; /* Enforces snapping to each image */
  scroll-behavior: smooth;   /* Makes scrolling smooth when using navigation */
  width: auto;               /* Adjust container width as needed */
  height: 74dvh;             /* Set a fixed height for the gallery */
  object-fit: contain;
  box-sizing: border-box;
  border: 0px solid blue;
}



.gallery-container img {
  flex: 0 0 100%;            /* Each image takes up the full width of the container */
  width: 100%;               /* Ensures image scales within its flex container */
  height: 100%;              /* Ensures image scales within its flex container */
  object-fit: contain;         /* Ensures images cover the area nicely */
  scroll-snap-align: center; /* Snaps the center of the image to the center of the container */
  border: 0px solid purple;
  object-fit: contain;
}




.hide-scrollbars {
  overflow-x: scroll; /* Allows horizontal scrolling */
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

/* For WebKit browsers (Chrome, Safari, Opera) */
.hide-scrollbars::-webkit-scrollbar {
  display: none;
}





    .main-section-1 {
      border: .1rem solid black;
      box-sizing: border-box;
      background-color: #00000040;
      width: 100%;
      height: auto;
      padding: 0dvh;
      margin: 0px;
      text-align: center;
      color: white;
      object-fit: contain;
    }

    .main-section-2 {
      border: .1rem solid black;
      box-sizing: border-box;
      background-color: #00000099;
      width: 100%;
      height: auto;
      padding: 0dvh;
      margin: 0px;
      text-align: center;
      color: white;
      object-fit: contain;
    }


    .title-bold {
      font-family: 'AvenirNextLTProBold';
      font-weight: bold;
    }



    


    .text-1 {
        border: var(--border_size) solid black;
        border: .7px solid black;
        width: 100%;
        height: 7.4vh;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #000000BB;
        color: white;
        object-fit: contain;
    }

    .text-2 {
        border: var(--border_size) solid white;
        border: .7px solid black;
        width: 100%;
        height: 7.4dvh;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #00000080;
        color: white;
        object-fit: contain;
    }

    
    .section-2 {
        width: 100%;
        height: auto;
        border: 0px solid white;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        flex-direction: column;

    }


    .section-2 img {

        max-width: 100%; /* Ensures image fits within the container */
        max-height: 100%; /* Ensures image fits within the container */
        border: var(--border_size) solid blue;
        box-sizing: border-box;
    }




    .bottom-contain {
        width: 100%;
        height: 12dvh;
        border: var(--border_size) solid green;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        border: 0px solid red;
        align-items: center;
    }




    .bottom-1 {
        width: 100%;
        height: auto;
        border: var(--border_size) solid purple;
        box-sizing: border-box;
    }

    .bottom-2 {
        width: 100%;
        height: auto;
        border: var(--border_size) solid purple;
        box-sizing: border-box;
    }

    .bottom-3 {
        width: 100%;
        height: auto;
        border: var(--border_size) solid purple;
        box-sizing: border-box;
    }




.social_link_contain {
    width: 24dvw;
    height: 12dvh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  border: var(--border_size) solid white;
  border: .1rem solid black;
  box-sizing: border-box;
background-color: #00000080;
object-fit: contain;
}

.social_link_contain img {
  height: auto;
  width: 50%;
  object-fit: contain;
border: 0px;
}

.social_link_contain a {
  font-size: 0px;
    border: var(--border_size) solid black;
}








.actionbar {
  width: 52dvw;
  height: 12dvh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: var(--border_size) solid green;
  border: .1rem solid black;
  box-sizing: border-box;
  background-color: #00000080;
  object-fit: contain;
}

.actionbar_button {
  width: 25dvw;
  height: auto;
  opacity: 100%;

  display: flex;
  justify-content: center;

}


.actionbar_button img {
width: 100%;
height: 100%;
  padding: 0px;
}

.actionbar_button a {
  padding: 0px;
  text-decoration: none;
  text-align: center;
  font-size: 0px;
  border: .1rem solid #ffffff60;
  border-radius: .3rem;
  box-sizing: border-box;
    background-color: #00000060;
}

.actionbar_button a:hover {
  border: .3rem solid white;
  border-radius: .3rem;
}







.bottom_seven_contain {
    width: 24dvw;
    height: 12dvh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  border: var(--border_size) solid white;
  border: .1rem solid black;
  box-sizing: border-box;
background-color: #00000080;
object-fit: contain;
}

.bottom_seven_contain img {
  height: auto;
  width: 60%;
  object-fit: contain;
border: 0px;
}

.bottom_seven_contain a {
  font-size: 0px;
  border: var(--border_size) solid black;
}





    .contact_header {
        width: 100%;
        height: 33.333dvh;
        border: var(--border_size) solid blue;
        border: 10px solid black;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        text-align: center;
        background-color: #000000AA
    }


    .contact_logo {
        width: 36dvw;
        height: auto;
        border: var(--border_size) solid black;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #00000000;     
        padding: 2vw;   
    }

    .contact_logo img {

        height: auto;
        max-width: 100%; /* Ensures image fits within the container */
        max-height: 100%; /* Ensures image fits within the container */
        border: var(--border_size) solid green;
        box-sizing: border-box;
    }

    .contact_logo a {
        font-size: 0px;
    }


    .contact-button-contain {
        width: 100%;
        height: 33.333dvh;        
        border: var(--border_size) solid green;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-color: #00000000;
    }

  
.contact_button {
  width: 100%;
  height: auto;
  opacity: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}


.contact_button img {
  width: 13dvw;
  height: auto;
}

.contact_button a {
  padding: 0px;
  text-decoration: none;
  text-align: center;
  font-size: 0px;
    border: .1rem solid #ffffff60;
  border-radius: .3rem;
  box-sizing: border-box;
  background-color: #00000060;
}

.contact_button a:hover {
  border: .3rem solid white;
  border-radius: .3rem;
}

.contact_active_button a {
  border: .17rem solid white;
  border-radius: .3rem;
}


  .contact-section-contain {
        width: 100%;
        height: auto;   /* important controls body height */
        border: var(--border_size) solid red;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        margin-top: 33.333dvh;
    }


    .contact-section-2 {
        width: 100%;
        height: auto;
        border: 0px solid blue;
        box-sizing: border-box;
        display: flex;

        align-items: center;
        flex-direction: column;
    }


    .contact-bottom-contain {
        width: 100%;
        height: auto;
        border: var(--border_size) solid black;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }  


.contact_social_link_contain {
    width: 100%;
    height: 33.333dvh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  border: 10px solid black;
  box-sizing: border-box;
background-color: #000000BB;
}

.contact_social_link_contain img {
  height: auto;
  min-width: 3dvw;
  max-width: 6dvw;
border: 0px;
}

.contact_social_link_contain a {
  font-size: 0px;
    border: var(--border_size) solid black;
}


.contact_actionbar {
  width: 100%;
  height: 33.333dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  border: var(--border_size) solid green;
  border-left: 10px solid black;
  border-right: 10px solid black;
  box-sizing: border-box;
  background-color: #000000CC;
}

.contact_actionbar_button {
  width: 100%;
  height: auto;
  opacity: 100%;

  background-color: #00000000;
  display: flex;
  justify-content: center;

}

.contact_actionbar_button img {
  height: auto;
  min-width: 20dvw;
  max-width: 28dvw;
  padding: 5px;
}

.contact_actionbar_button a {
  padding: 0px;
  text-decoration: none;
  text-align: center;
  font-size: 0px;
  border: .1rem solid #ffffff80;
  border-radius: .3rem;
  box-sizing: border-box;
}

.contact_actionbar_button a:hover {
  border: .3rem solid white;
  border-radius: .3rem;
}




.header_stick {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #00000080; /* Example background */
  color: white;
  text-align: center;
  padding: 0px; /* Adjust as needed */
  object-fit: contain;
}

.footer_stick {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #00000080; /* Example background */
  color: white;
  text-align: center;
  padding: 0px; /* Adjust as needed */
  object-fit: contain;
}

}  
















@media (max-width: 768px) {


   .main-section-contain {
        flex-direction: column;
    }

    .section-contain {
        margin-top: 21dvh;
        margin-bottom: 21dvh;
    }
  

    .header {
        flex-direction: column;
        height: 21dvh;
    }
  

    .logo {
        width: 100%;
        height: 100%;
    }

    .logo img {
        width: auto;
        height: 14dvh;
        object-fit: contain;
    }

    
    .button-contain {
        width: 100dvw;
        height: 5dvh;        
    }

  
.button {
  width: 20dvw;
  height: auto;
}


.button img {
  width: 17dvw;
  height: auto;
  object-fit: contain;
}

    .section-contain {
        margin-top: 21dvh;
        margin-bottom: 21dvh;
    }


    .main-text-1 {
        width: 100%;
        height: auto;
    }

    .main-text-2 {
        width: 100%;
        height: auto;
    }

    

.gallery-container {
  display: flex;             /* Aligns images in a horizontal row */
  overflow-x: scroll;        /* Enables horizontal scrolling */
  scroll-snap-type: x mandatory; /* Enforces snapping to each image */
  scroll-behavior: smooth;   /* Makes scrolling smooth when using navigation */
  width: 100dvw;               /* Adjust container width as needed */
  height: 58dvh;             /* Set a fixed height for the gallery */
  object-fit: contain;
  box-sizing: border-box;
  
}

.gallery-container img {
  flex: 0 0 100%;            /* Each image takes up the full width of the container */
  width: 100%;               /* Ensures image scales within its flex container */
  height: 100%;              /* Ensures image scales within its flex container */
  object-fit: contain;         /* Ensures images cover the area nicely */
  scroll-snap-align: center; /* Snaps the center of the image to the center of the container */
}




    .bottom-contain {
        width: 100%;
        height: 21dvh;
        flex-direction: column;
    }



.social_link_contain {
    width: 100%;
    height: 7dvh;
}

.social_link_contain img {
  height: 5.5dvh;
  width: auto;
  object-fit: contain;
}





.actionbar {
  width: 100%;
  height: 7dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  border: var(--border_size) solid green;
  border: .1rem solid black;
  box-sizing: border-box;
  background-color: #00000080;
}

.actionbar_button {
  width: 100%;
  height: auto;
  opacity: 100%;

  display: flex;
  justify-content: space-evenly;

}


.actionbar_button img {
  height: auto;
  min-width: 7dvw;
  max-width: 27dvw;
  padding: 5px;
}

.actionbar_button a {
  padding: 0px;
  text-decoration: none;
  text-align: center;
  font-size: 0px;
}






.bottom_seven_contain {
    width: 100%;
    height: 7dvh;
}


.bottom_seven_contain img {
  height: 6dvh;
  width: auto;
  object-fit: contain;
}



.text-1 {
  height: 5.8dvh;
}

.text-2 {
  height: 5.8dvh;
}



    .contact_header {
        width: 100%;
        height: 33.333dvh;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }


 
    .contact_logo {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;    
    }

    .contact_logo img {
        padding: 0;
        height: auto;
        width: 100%;
    }


    .contact-button-contain {
        width: 100%;
        height: 8dvh;        
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
  
.contact_button {
  width: 100%;
  height: auto;
  opacity: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.contact_button img {
  width: 18dvw;
  height: auto;
  padding-top: 0.5dvh;
  padding-bottom: 0.5dvh;
}


  .contact-section-contain {
        width: 100%;
        height: auto;   /* important controls body height */
        display: flex;
        flex-direction: column;
        margin-top: 33.333dvh;
    }


    .contact-section-2 {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        flex-direction: column;
    }


    .contact-bottom-contain {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
    }  


.contact_actionbar {
  width: 100%;
  height: 33.333dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact_actionbar_button {
  width: 100%;
  height: auto;
  opacity: 100%;
  display: flex;
  justify-content: center;

}

.contact_actionbar_button img {
  height: auto;
  min-width: 20dvw;
  max-width: 36dvw;
  padding: 5px;
}



.contact_social_link_contain {
    width: 100%;
    height: 33.333dvh;
}

.contact_social_link_contain img {
  height: auto;
  min-width: 6dvw;
  max-width: 9dvw;
}

}
























@media (max-width: 340px) {

.logo img {
  width: 21dvh;
  height: auto;
}



.gallery-container {
  display: flex;             /* Aligns images in a horizontal row */
  overflow-x: scroll;        /* Enables horizontal scrolling */
  scroll-snap-type: x mandatory; /* Enforces snapping to each image */
  scroll-behavior: smooth;   /* Makes scrolling smooth when using navigation */
  width: 100dvw;               /* Adjust container width as needed */
  height: 74dvh;             /* Set a fixed height for the gallery */
  object-fit: contain;
  box-sizing: border-box;
  
}

.gallery-container img {
  flex: 0 0 100%;            /* Each image takes up the full width of the container */
  width: 100%;               /* Ensures image scales within its flex container */
  height: 100%;              /* Ensures image scales within its flex container */
  object-fit: contain;         /* Ensures images cover the area nicely */
  scroll-snap-align: center; /* Snaps the center of the image to the center of the container */
}




}