:root {
  --step--2: clamp(0.6588rem, 0.6108rem + 0.4039vw, 1.5802rem);
  --step--1: clamp(0.7029rem, 0.647rem + 0.4712vw, 1.7778rem);
  --step-0: clamp(0.75rem, 0.6849rem + 0.5479vw, 2rem);
  --step-1: clamp(0.8003rem, 0.7248rem + 0.6355vw, 2.25rem);
  --step-2: clamp(0.8539rem, 0.7666rem + 0.7353vw, 2.5313rem);
  --step-3: clamp(0.9111rem, 0.8103rem + 0.8489vw, 2.8477rem);
  --step-4: clamp(0.9721rem, 0.856rem + 0.9782vw, 3.2036rem);
  --step-5: clamp(1.0372rem, 0.9036rem + 1.1252vw, 3.6041rem);

  --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-2);
}

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

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

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

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

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

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




@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;
    overflow: hidden; /* Prevent the body from scrolling directly */
    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 */
    height: 100vh; /* 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;
}






    .viewport-border {

        width: 100%; /* Occupy 100% of the viewport width */
        height: auto; /* 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 */

    }




    .header {
        width: 100%;
        height: 18vh;
        border: var(--border_size) solid blue;
        border: 2px solid black;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        text-align: center;
    }

    


    .logo {
        width: 40%;
        height: auto;
        border: var(--border_size) solid black;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #00000080;     
        padding: 2vw;   
    }

    .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;
    }

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



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

  
.button {
  width: 100%;
  height: auto;
  opacity: 100%;
  border: 1.7px solid black;
  box-sizing: border-box;
  background-color: #a3a3a380;
  display: flex;
  justify-content: center;
}


.button img {
  width: 100%;
  height: auto;
}

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

.button a:hover {
  background-color: #a3a3a3bb;
}

.active_button a {
  background-color: #a3a3a380;
}




    .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;
    }


    .main-text-1 {
        border: var(--border_size) solid black;
        border-top: 1.7px solid black;
        border-bottom: 1.7px solid black;
        padding: 2vh;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: #000000BB;
        color: white;
    }

    .main-text-2 {
        border: var(--border_size) solid black;
        border-top: 1.7px solid black;
        border-bottom: 1.7px solid black;
        padding: 2vh;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: #00000099;
        color: #a3a3a3ff;
    }





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

    .main-section-1 {
      border: 1.7px solid black;
      box-sizing: border-box;
      background-color: #00000099;
      width: 100%;
      height: auto;
      padding: 3vh;
      margin: 0px;
      text-align: center;
      color: white;
    }

    .main-section-2 {
      border: 1.7px solid black;
      box-sizing: border-box;
      background-color: #000000BB;
      width: 100%;
      height: auto;
      padding: 3vh;
      margin: 0px;
      text-align: center;
      color: white;
    }


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



    


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

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

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

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

    .page-section-2 {
        width: 100%;
        height: auto;
        border: 0px solid red;
        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: 64%; /* Ensures image fits within the container */
        border: var(--border_size) solid blue;
        box-sizing: border-box;
    }




    .bottom-contain {
        width: 100%;
        height: 12.3vh;
        border: var(--border_size) solid green;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
    }




    .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: 100%;
    height: 12vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  border: var(--border_size) solid white;
  border: 1.7px solid black;
  box-sizing: border-box;
background-color: #000000CC;
}

.social_link_contain img {
  height: auto;
  min-width: 3vw;
  max-width: 4vw;
border: 0px;
}

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




.actionbar {  
  background-color: #000000BB;
  width: 100%;
  height: 12vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border: var(--border_size) solid white;
  border: 1.7px solid black;
  box-sizing: border-box;
  padding: 0%;
}

.actionbar a {
  background-color: #2a6bccAA;
  color: black;
  padding: 1.2vh 2vw 1vh 2vw;
  border: var(--border_size) solid black;
  border-radius: 0.5vh;
  text-decoration: none;
  text-align: center;
  font-family: 'AvenirNextLTProBold';
}

.actionbar a:hover {
  background-color: #2a6bccCC;
  color: white;
}


.bottom_seven_contain {
    width: 100%;
    height: 12vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  border: var(--border_size) solid white;
  border: 1.7px solid black;
  box-sizing: border-box;
  background-color: #000000CC;
}

.bottom_seven_contain img {
  height: auto;
  min-width: 4vw;
  max-width: 5vw;
  border: 0px;
}

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










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

    .contact-text-2 {
        border: var(--border_size) solid white;
        width: 100%;
        height: 15vh;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #00000099;
        color: white;
    }




  .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;
    }




    .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: 18vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  border: var(--border_size) solid white;
  box-sizing: border-box;
background-color: #000000BB;
}

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

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




.contact_actionbar {  
  background-color: #00000099;
  width: 100%;
  height: 18vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border: var(--border_size) solid white;
  box-sizing: border-box;
  padding: 0%;
}

.contact_actionbar a {
  background-color: #2a6bccAA;
  color: black;
  padding: 1.7vh 5vw 1.6vh 5vw;
  border: var(--border_size) solid black;

  text-decoration: none;
  text-align: center;
  font-family: 'AvenirNextLTProBold';
}

.contact_actionbar a:hover {
  background-color: #2a6bccCC;
  color: white;
}



.contact_bottom_seven_contain {
  width: 100%;
  height: 16vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  border: var(--border_size) solid white;
  box-sizing: border-box;
  background-color: #000000BB;
}

.contact_bottom_seven_contain img {
  height: auto;
  min-width: 4vw;
  max-width: 6vw;
  border: 0px;
}

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











@media (max-width: 1050px) {


      .logo {
        width: 50%;
        height: auto;
        padding: 2vw;
    }

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

    
    .section-contain {
        width: 100%;
        height: auto;   /* important controls body height */
    }


    .page-section-2 {
        width: 100%;
        height: auto;

    }


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

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

    .social_link_contain {
      width: 100%;
      height: 12.35vh;
    }

    .social_link_contain img {
        height: auto;
        width: 5vw;

    }

.actionbar {  
  width: 100%;
  height: 12.35vh;
}

.actionbar a {
  padding: 1.2vh 3vw 1vh 3vw;
}


    .bottom_seven_contain {
      width: 100%;
      height: 12.35vh;
    }

    .bottom_seven_contain img {
        height: auto;
        min-width: 4vw;
        max-width: 5.5vw;
    }

.text-1 {
  height: 6.96vh;

}

.text-2 {
  height: 6.96vh;

}


    .contact-text-1 {
        width: 100%;
        height: 16vh;
    }


    .contact-text-2 {
        width: 100%;
        height: 16vh;
    }


.contact_social_link_contain {
    width: 100%;
    height: 17vh;
}

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

.contact_actionbar {  
  width: 100%;
  height: 17vh;
}

.contact_actionbar a {
  padding: 1.2vh 5vw 1vh 5vw;
}


.contact_bottom_seven_contain {
  width: 100%;
  height: 16vh;
}

.contact_bottom_seven_contain img {
  height: auto;
  min-width: 5vw;
  max-width: 7vw;
  border: 0px;
}

}








@media (max-width: 768px) {

    .page-section-2 {
        width: 100%;
        height: auto;
    }

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

    .section-contain {
        width: 100%;
        height: auto;
    }
  
    .header {
        flex-direction: column;
        height: auto;
    }
  
    .logo {
        width: 100%;
        height: 18vh;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .logo img {
        width: 80%;
        height: auto;
    }

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

    .main-text-1 {

        width: 100%;
        height: auto;
        border-top: 2px solid black;
    }

    .main-text-2 {

        width: 100%;
        height: auto;
    }
    


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






.text-1 {
  height: 5.64vh;
}

.text-2 {
  height: 5.64vh;
}



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

 .social_link_contain {
      width: 100%;
      height: 7.37vh;

    }

    .social_link_contain img {
      height: auto;
        min-width: 7vw;
        max-width: 9vw;
          }

.actionbar {  
  width: 100%;
  height: 7.37vh;
}

.actionbar a {
  padding: 0.7vh 6vw 0.6vh 6vw;
}


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

    .bottom_seven_contain img {
        height: auto;
        min-width: 7vw;
        max-width: 10vw;
    }



  .contact-text-1 {
        width: 100%;
        height: 14.65vh;
    }


    .contact-text-2 {
        width: 100%;
        height: 14.6vh;
    }


.contact_social_link_contain {
    width: 100%;
    height: 18vh;
}

.contact_social_link_contain img {
  height: auto;
  min-width: 7vw;
  max-width: 10vw;
border: 0px;
}


.contact_actionbar {  
  width: 100%;
  height: 18vh;
}

.contact_actionbar a {
  padding: 1.2vh 5vw 1vh 5vw;
}


.contact_bottom_seven_contain {
  width: 100%;
  height: 13.4vh;
}

.contact_bottom_seven_contain img {
  height: auto;
  min-width: 9vw;
  max-width: 11.5vw;
  border: 0px;
}



}





@media (max-width: 340px) {


.actionbar {  
  background-color: #000000CC;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.actionbar a {
  padding: 10px 30px 10px 34px;
}

.text-1 {
  height: 3.5vh;
}

.text-2 {
  height: 3.5vh;
}




.contact_actionbar {  
  background-color: #000000CC;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.contact_actionbar a {
  padding: 10px 30px 10px 34px;
}

.contact-text-1 {
  height: 3.5vh;
}

.contact-text-2 {
  height: 3.5vh;
}




}