/*********** RESET ***********/
    /****************************/

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

      /*********** GLOBAL STYLES **************/
      /***************************************/

      :root {
        --p-font-size: 16px;
        --h1-font-size: 28px;
        --h2-font-size: 50px;
        --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }

      body {
        overflow-x: hidden;
        font-family: var(--font-family);
      }

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

      h1 {
        font-size: 5em;
      }

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

      .index-btn {
        border: none;
        border-radius:25px;
        padding: 10px 15px;
        font-size: var(--p-font-size);
      }

      .index-btn:hover {
        cursor: pointer;
      }


      /********** HEADER STYLES ***********/
      /*************************************/

      .main-container {
        display: flex;
        width: 100vw;
      }

      .nav-container {
        position:fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #ad5239;
        padding: 10px;
        z-index: 999;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
      }

      .nav-container nav {
        display: flex;
        justify-content: center;
      }

      .nav-container nav ul {
        display: flex;
      }

      .nav-container nav ul li {
        list-style-type: none;
      }

      .nav-container nav ul li a {
        text-decoration: none;
        color: #fff;
        margin-right: 20px;
        font-size: 20px;
      }

      .left-container {
        width:30%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }


      .left-container-top {
        /* height: 65vh; */
        /* width: 30%; */
      }

      .left-container-top img {
        height: 80%;
        position: absolute;
        bottom: 0;
      }


      .left-container-bottom {
        display: flex;
        justify-content: center;
        height: 35vh;
        width: 100%;
        background-color: #dfae8e;
      }

      .right-container {
        width: 70%;
      }

      .right-container-top {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 65vh;
        width: 100%;
        background-color: #dfae8e;
      }

      .right-container-top h1 {
        font-size: 8em;
        color: #fff;
      }

      .right-container-top p{
        font-size: 2em;
        color: #fff;
      }

      .right-container-bottom p,
      .right-container-bottom h1 {
        color: #fff;
      }

      .right-container-bottom {
      position: relative;
      z-index: 3; 
      color: white;
      text-align: center;
        }

        .right-container-bottom h1,
        .right-container-bottom p {
        position: absolute;
        color: #fff;
        z-index: 5;
        transform: translate(-75%, -50%);
        }

      .right-container-bottom {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 35vh;
        width: 100%;
      }


      /************* SERVICES STYLES **************/
      /*******************************************/

      #fade-imgs {
        /* border: 10px solid #ad5239; */
        padding: 10px;
        height: 65vh;
        width: 385.5px;
        position: relative;
        /* margin-top: 190px; */
        /* margin-bottom: 20px; */
        display: flex;
        justify-content: center;
        /* background-color: #dfae8e; */
        border-radius: 10px;
      }
      #fade-imgs img.fade-image {
        position: absolute;
        height: 70%;
        /* top: -249.5px; */
        opacity: 0;
        transition: opacity 1s ease-in-out;
      }

      #fade-imgs img.fade-image.active {
        opacity: 1;
        z-index: 1;
        filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.5));
      }

      .container {
        /* width: 1300px; */
        max-width: 2500px;
        margin: 0 auto;
      }

      .services-container {
        /* display: grid;
        grid-template-columns: 3fr 1fr; */
        display: flex;
        position:relative;
        height: calc(100vh - 100px);
        
      }

      .services {
        padding:40px 0 0 0;
        width: 100vw;
      }

      .scrolling-columns-container-1,
       .scrolling-columns-container-2 {
        display: flex;
        height: 520px;
        border-bottom: 10px solid #ad5239;
        overflow-y: scroll;
        scrollbar-width: none;         /* Firefox */
        -ms-overflow-style: none;
      }

      .scrolling-columns-container-1::-webkit-scrollbar,
       .scrolling-columns-container-1::-webkit-scrollbar {
        display: none;                 /* Chrome, Safari, Opera */
        }

        .scrolling-column-1 div img,
        .scrolling-column-2 div img {
        width: 100%;
        height: 280px;
        display: block;
        border-radius: 25px;
        }

      .scrolling-column-1 .scrolling-img-button-container,
      .scrolling-column-2 .scrolling-img-button-container {
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: center;
        margin: 1rem;
        position: relative;
        padding-bottom: 10px;
      }

      .scrolling-img-button-container {
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: center;
        margin: 1rem;
        position: relative;
        height: 280px;
        width: 200px;
      }

      .scrolling-column-1 .scrolling-img-button-container button,
      .scrolling-column-2 .scrolling-img-button-container button {
        position: absolute;
        padding: 5px 10px;
        background-color: transparent;
        font-size: 16px;
        border-radius: 10px;
        border:2px solid #fff;
        color: #fff;
        margin-bottom: 20px;
        z-index: 4;
      }

      .scrolling-column-1 div img,
      .scrolling-column-2 div img {
        border: 1px solid #ad5239;
        border-radius: 25px;
      }

    .scrolling-column-1 div button:hover,
    .scrolling-column-2 div button:hover {
        cursor: pointer;
    }

    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #ad5239;
        opacity: .2;
        z-index: 3;
        pointer-events: auto;
        z-index: 3;
        width: 100%;
        height: 100%;
        border-radius: 25px;
    }

    .wave-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 100px;
}

    /********** WHY US STYLES ************/
    /************************************/

    .why-us-container {
        height: 100vh;
    }

    /********* MEDIA QUERIES ********/

    @media screen and (max-width: 1440px) {
      .container {
        width:1100px;
      }

      #fade-imgs img.fade-image {
        height: 50%;
        /* top: -200px; */
        width: 100%;
      }

      #fade-imgs {
        height: 65vh;
        width: 285.5px;
      }
      
    }

        @media screen and (max-width: 1140px) {
      .container {
        width:900px;
      }
      .scrolling-column-1 div img,
        .scrolling-column-2 div img {
        width: 80%;
        height: auto;
        }
        
        .services {
          margin-bottom: 20px;
        }
    }