*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
body{
  overflow-x: hidden ;
}
a{
  text-decoration: underline;
}

/*------=============Montserrat font family============---*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/*-----========Raleway font family===============---*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');


$caption: 30px;
$small:22px;
$large:48px;

$black: #404041;
$white: #ffffff;
$lightWhite: #dfa38d;
$brown: #d48365;
$lightBrown: #dc9b84;

$montserrat: "Montserrat", sans-serif;
$raleway:"Raleway", sans-serif;

@mixin paraFont{
  font-size: $caption;
  color: $lightWhite;
  margin-bottom: 0;
}

@mixin paraContent{
  font-family:$montserrat;
  font-size: $large;
  color: $white;
}

@mixin headingFont{
  font-family: $raleway;
  font-size: $large;
  color: $brown;
}

.hidden {
  display: none;
}

/*_______________COMMON CSS FOR MENUS FOR ALL PAGES_______________*/



/*______SVG ANIMATION_____*/


.main{
  background-color: #d48365;
  position: relative;
  height: 100vh;
  overflow: hidden;
  svg{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
  }
}

#EARTH{
  transform: translate(0, -50%);
  opacity: .4;
  transition: .5s;
  cursor: pointer;
  animation: EARTH 2s linear forwards;
  @keyframes EARTH {
    0%{
      transform: translate(0, -50%);
    }100%{
      transform: translate(0, 0);
    }
  }
}


#AIR{
  transform: translate(50%, 0);
  opacity: .4;
  transition: .5s;
  cursor: pointer;
  animation: AIR 2s linear forwards;
  @keyframes AIR {
    0%{
      transform: translate(50%, 0);
    }100%{
      transform: translate(0, 0);
    }
  }
}


#WATER{
  transform: translate(-50%, 0);
  opacity: .4;
  transition: .5s;
  cursor: pointer;
  animation: WATER 2s linear forwards;
  @keyframes WATER {
    0%{
      transform: translate(-50%, 0);
    }100%{
      transform: translate(0, 0);
    }
  }
}

#UNIVERSE{
  transform: translate(50%, 50%);
  opacity: .4;
  transition: .5s;
  cursor: pointer;
  animation: UNIVERSE 2s linear forwards;
  @keyframes UNIVERSE {
    0%{
      transform: translate(50%, 50%);
    }100%{
      transform: translate(0, 0);
    }
  }
}


#FIRE{
  transform: translate(-50%, 50%);
  opacity: .4;
  transition: .5s;
  cursor: pointer;
  animation: FIRE 2s linear forwards;
  @keyframes FIRE {
    0%{
      transform: translate(-50%, 50%);
    }100%{
      transform: translate(0, 0);
    }
  }
}


/*______SVG ANIMATION END_____*/

.nav_wrap{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5% 3%;
  position: fixed;
  top: 0;
  z-index: 16;
  transition: .5s;
  background: $lightBrown;
  box-shadow: 2px 3px 7px rgba(0,0,0,0.4);
  .logo{
      width: 5%;
      img{
          width: 100%;
          margin-bottom: 4%;
      }
  }
  .contact-no{
    width: fit-content;
    color: $white;
    font-family: $montserrat;
    font-size: $small;
    position: absolute;
    right: 9%;
    cursor: pointer;
    transition: .6s;
    &:hover{
      color: $black;
    }
  }
    .menu_icon{
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: .5em;
        cursor: pointer;
        span{
          display: block;
          height: 2px;
          width: 50px;
          background-color: $white;
          transition: 0.5s;
        }
    }

}


.menu-items-container{
  position: fixed;
  z-index: 13;
  overflow: hidden;
  
    .menu-list{
      position: fixed;
      top: 0;
      left: 100%;
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      z-index: 10;
      overflow: hidden;
      transition: .8s ease;
      display: flex;
      flex-direction: column;
      align-items: end;
      justify-content: center;
      gap: 1em;
      padding-left: 4%;
      background: $brown;
      overflow: hidden;
      svg{
        position: absolute;
        width: 100%;
        //height: 100vh;
        left: 0;
        top: 0;
        //opacity: 0.2;
        //opacity: 1;
        .group{
          // content: '';
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 100%;
          background-color: yellow;
        }
      }
      ul{
      width: 25%;
      transition: .4s;
      // overflow: hidden;
        li{
            margin-bottom: 2%;
            list-style-type: none;
            width: 100%;
            transition: 0.5s;
            position: relative;
            display: flex;
            flex-direction: column;
            &:hover{
                a{
                  color: #b87b2d;
                  margin-left: 3%;
                  color:$black;
                }
                .fa-greater-than{
                  // margin-left: 67.5%;
                  left: -10%;
                  opacity: 1;
                  color:$black;
                }
                .fa-caret-down{
                    transform: rotate(180deg);
                }
            }
            .fa-greater-than{
              position: absolute;
              left: -100%;
              //left: 67%;
              font-size: $caption;
              opacity: 0;
              transition: 0.5s;
              top: 10px;
            }
            a{
              color: $white;
              font-size: $caption;
              text-decoration: none;
              font-family: $montserrat;
              margin-left: 0;
              transition: .5s;
              margin-left: 60%;
              .fa-caret-down{
                font-size: $small;
                transition: .2s;
              }
            }
            .menu-1-style{
                animation: fade_left_1 .4s ease .5s forwards;
                @keyframes fade_left_1{
                  0%{
                    margin-left: 50%;
                  
                  }
                  100%{
                    margin-left: 0%;
                    
                  }
                }
            }
            .menu-2-style{
                animation: fade_left_2 .5s ease .5s forwards;
                @keyframes fade_left_2{
                  0%{
                    margin-left: 50%;
                  
                  }
                  100%{
                    margin-left: 0%;
                    
                  }
                }
            }
            .menu-3-style{
                animation: fade_left_3 .6s ease .5s forwards;
                @keyframes fade_left_3{
                  0%{
                    margin-left: 50%;
                  
                  }
                  100%{
                    margin-left: 0%;
                    
                  }
                }
            }
            .menu-4-style{
                animation: fade_left_4 .7s ease .5s forwards;
                @keyframes fade_left_4{
                  0%{
                    margin-left: 50%;
                  
                  }
                  100%{
                    margin-left: 0%;
                    
                  }
                }
            }
            .menu-5-style{
                animation: fade_left_5 .8s ease .5s forwards;
                @keyframes fade_left_5{
                  0%{
                    margin-left: 50%;
                  
                  }
                  100%{
                    margin-left: 0%;
                    
                  }
                }
            }
            .menu-6-style{
                animation: fade_left_6 .9s ease .5s forwards;
                @keyframes fade_left_6{
                  0%{
                    margin-left: 50%;
                  
                  }
                  100%{
                    margin-left: 0%;
                    
                  }
                }
            }
              .menu-7-style{
                animation: fade_left_7 1s ease .5s forwards;
                @keyframes fade_left_7{
                  0%{
                    margin-left: 50%;
                  
                  }
                  100%{
                    margin-left: 0%;
                    
                  }
                }
            }
              .menu-8-style{
                animation: fade_left_8 1.1s ease .5s forwards;
                @keyframes fade_left_8{
                  0%{
                    margin-left: 50%;
                  
                  }
                  100%{
                    margin-left: 0%;
                    
                  }
                }
            }
            .menu-9-style{
              animation: fade_left_9 1.2s ease .5s forwards;
              @keyframes fade_left_9{
                0%{
                  margin-left: 50%;
                
                }
                100%{
                  margin-left: 0%;
                  
                }
              }
          }
            .menu-10-style{
              animation: fade_left_10 1.3s ease .5s forwards;
              @keyframes fade_left_10{
                0%{
                  margin-left: 50%;
                
                }
                100%{
                  margin-left: 0%;
                  
                }
              }
          }

            .menu-11-style{
              animation: fade_left_10 1.4s ease .5s forwards;
              @keyframes fade_left_11{
                0%{
                  margin-left: 50%;
                
                }
                100%{
                  margin-left: 0%;
                  
                }
              }
            }

            .dropdown{
              width: fit-content;
             // display: none;
              height: 0;
              overflow: hidden;
              margin: 0;
              display: flex;
              flex-direction: column;
              align-items: start;
              justify-content: start;
              transition: .7s;
              //transition-delay: .5s;
              li{
                list-style: none;
                margin: 0;
                margin-bottom: 1%;
                &:hover{
                  a{
                    color: $white;
                  }
                }
                a{
                   margin-left: 0;
                   font-size: $small;
                   text-transform: uppercase;
                }
              }
            }
            &:hover{
              .dropdown{
                //display: block;
                height: 180px;
                padding: 2% 0;
              }
            }
        }
    }
    }
  
}



input, ul.submenu {
  display: none;
}

/*position the label*/
label {
  position: relative;
  display: block;
  cursor: pointer;
  font-size: 25px;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  color: #ffffff;
  transition: 0.5s;
}

/*show the submenu when input is checked*/
input:checked~ul.submenu {
  display: block;
  padding: 0;
  margin: 0;
}

/*------directle linked with js------*/
.top_line{
  transform: rotate(45deg);
  //background-color:#040037;
}
.middle_line{
 display: none;
}
.bottom_line{
  transform: rotate(-45deg) translate(7px, -7px);
  //background-color:#040037;
}

/*-------End---------*/

/*_______END OF MENU________*/

.tatva-container{
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  z-index: 10;
  transition: 0.8s;
   h4{
    position: absolute;
    right: 0;
    top: 45vh;
    width: 5%;
    right: 1%;
    height: fit-content;
    //transform: translate(0,-50%);
    //transform: translate(0,-50%);
    font-weight: lighter;
    font-size: 40px;
    color: $white;
    z-index: 20;
    cursor: pointer;
    animation: rightArrow 3s linear alternate infinite;
    @keyframes rightArrow {
      0%{
        transform: translateX(0);
      }50%{
        transform: translateX(10%);
      }100%{
        transform: translateX(0);
      }
    }
    img{
      width: 100%;
      transform: rotate(349deg);
    }
  }
  h3{
    position: absolute;
    left: 0;
    top: 45vh;
    height: fit-content;
    //transform: translate(0,-50%);
    width: 5%;
    left: 1%;
    font-weight: lighter;
    font-size: 40px;
    color: $white;
    z-index: 20;
    cursor: pointer;
    animation: leftArrow 3s linear alternate infinite;
    @keyframes leftArrow {
      0%{
        transform: translateX(0);
      }50%{
        transform: translateX(-10%);
      }100%{
        transform: translateX(0);
      }
    }
    // svg{
    //   width: 100%;
    //   rect{
    //     width: 100%;
    //   }
    // }
    img{
      width:100%;
      transform: rotate(11deg);
    }
  }
  .common{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #404041;
    transition: 0.7s;
    overflow: hidden;
   /* svg{
      width: 100%;
      height: 100%;
    }*/
   p{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      @include paraContent;
      text-align: center;
      line-height: 1.1;
      .touch{
        display: block;
        font-size: 21px;
        margin-top: 5%;
        color: $brown;
        text-decoration: none;
        cursor: pointer;
        svg{
         animation: rightFade 2s ease infinite;
         @keyframes rightFade {
            0%{
              transform: translateX(0);
            }50%{
              transform: translateX(10%);
            }100%{
              transform: translateX(0);
            }
          }
        }
        a{
          display: inline;
         font-size: $small;
         cursor: pointer;
         text-decoration: none;
         color: $brown;
        }
      }

       a{
         display: inline;
         font-size: $large;
         cursor: pointer;
         text-decoration: none;
         color: $brown;
        // @include paraContent;
       }
      
   }

}
}

.tatva-container .common p a:hover{
  color: #fff;
}


/*___Earth PAGE ANIMATION____*/

.tree1{
  animation: Tree1 25s linear alternate infinite;
  @keyframes Tree1 {
    0%{
      transform: translateX(0);
    }
    25%{
      transform: translateX(-10%);
    }
    50%{
      transform: translateX(0);
    }
    75%{
      transform: translateY(5%)
    }
    100%{
      transform: translateY(0)
    }
  }
}
.tree2{
  animation: Tree2 30s linear alternate infinite;
  @keyframes Tree2 {
    0%{
      transform: translateY(0);
    }
    50%{
      transform: translateY(-50%);
    }
    100%{
      transform: translateY(0);
    }
    
  }
}
.tree3{
  animation: Tree3 22s linear 1s alternate infinite;
  @keyframes Tree3 {
    0%{
      transform: translateY(0);
    }
    50%{
      transform: translateY(-27%);
    }
    100%{
      transform: translateY(0);
    }
  }
}
.tree4{
  animation: Tree4 25s linear 3s alternate infinite;
  @keyframes Tree4 {
    0%{
      transform: translateY(0);
    }
    50%{
      transform: translateY(-18%);
    }
    100%{
      transform: translateY(0);
    }
  }
}
.tree5{
  animation: Tree5 12s linear 3s alternate infinite;
  @keyframes Tree5 {
    0%{
      transform: translateY(0);
    }
    50%{
      transform: translateY(-9%);
    }
    100%{
      transform: translateY(0);
    }
  }
}
.tree6{
  animation: Tree6 23s linear 2s alternate infinite;
  @keyframes Tree6 {
    0%{
      transform: translateX(0);
    }
    25%{
      transform: translateX(-5%);
    }
    50%{
      transform: translateX(0);
    }
    75%{
      transform: translateY(12%)
    }
    100%{
      transform: translateY(0)
    }
  }
}
.tree7{
  animation: Tree7 19s linear 5s alternate infinite;
  @keyframes Tree7 {
    0%{
      transform: translateY(0);
    }
    50%{
      transform: translateY(-15%);
    }
    100%{
      transform: translateY(0);
    }
  }
}

/*____Earth page animation end here___*/


/*____AIR PAGE ANIMATION____*/

.cloud-1{
  animation: CLOUD_1 24s ease-in .5s alternate infinite;
  @keyframes CLOUD_1 {
    0%{
      transform: translateX(0);
    }
    50%{
      transform: translateX(-18%);
    }
    100%{
      transform: translateX(0);
    }
  }
}
.cloud-2{
  animation: CLOUD_2 15s ease-in-out 1s alternate infinite;
  @keyframes CLOUD_2 {
    0%{
      transform: translateX(0);
    }
    50%{
      transform: translateX(-15%);
    }
    100%{
      transform: translateX(0);
    }
  }
}
.cloud-3{
  animation: CLOUD_3 27s ease-in-out 1.2s alternate infinite;
  @keyframes CLOUD_3 {
    0%{
      transform: translateX(0);
    }
    50%{
      transform: translateX(-25%);
    }
    100%{
      transform: translateX(0);
    }
  }
}
.cloud-4{
  animation: CLOUD_4 25s ease-in-out .4s alternate infinite;
  @keyframes CLOUD_4 {
    0%{
      transform: translateX(0);
    }
    50%{
      transform: translateX(-20%);
    }
    100%{
      transform: translateX(0);
    }
  }
}
.cloud-5{
  animation: CLOUD_5 20s ease-in-out alternate infinite;
  @keyframes CLOUD_5 {
    0%{
      transform: translateX(0);
    }
    50%{
      transform: translateX(-20%);
    }
    100%{
      transform: translateX(0);
    }
  }
}
.cloud-6{
  animation: CLOUD_5 22s ease-in-out alternate infinite;
  @keyframes CLOUD_5 {
    0%{
      transform: translateX(0);
    }
    50%{
      transform: translateX(20%);
    }
    100%{
      transform: translateX(0);
    }
  }
}

/*____AIR PAGE ANIMATION____*/

/*___UNIVERSE PAGE____*/

.big-star{
  animation: BIG_STAR 10s linear .2s alternate infinite;
   @keyframes BIG_STAR {
    0%{
      opacity: 0;
      transform: translateX(0);
    }
    50%{
      opacity: 1;
      transform: translateX(-5%);
    }
    100%{
      opacity: 0;
      transform: translateX(0);
    }
  }
}
.star-1,.star-14{
  animation: STAR_1 4s linear .2s alternate infinite;
   @keyframes STAR_1 {
    0%{
      opacity: 0;
    }
    50%{
      opacity: 1;
    }
    100%{
      opacity: 0;
    }
  }
}

.star-2,.star-13,.star-15{
  animation: STAR_2 15s linear  alternate infinite;
   @keyframes STAR_2 {
    0%{
      opacity: 0;
    }
    50%{
      opacity: 1;
    }
    100%{
      opacity: 0;
    }
  }
}

.star-3,.star-12,.star-20{
  animation: STAR_3 8s linear alternate infinite;
   @keyframes STAR_3 {
    0%{
      opacity: 0;
      transform: translateY(0);
    }
    50%{
      opacity: 1;
      transform: translateY(-8%);
    }
    100%{
      opacity: 0;
      transform: translateY(0);
    }
  }
}
.star-4,.star-11,.star-16{
  animation: STAR_4 5s linear alternate infinite;
   @keyframes STAR_4 {
    0%{
      opacity: 0;
    }
    50%{
      opacity: 1;
    }
    100%{
      opacity: 0;
    }
  }
}
.star-5,.star-10,.star-17{
  animation: STAR_5 12s linear .2s  alternate infinite;
   @keyframes STAR_5 {
    0%{
      opacity: 0;
      transform: translateY(0);
    }
    50%{
      opacity: 1;
      transform: translateY(-10%);
    }
    100%{
      opacity: 0;
      transform: translateY(0);
    }
  }
}
.star-6,.star-9,.star-18{
  animation: STAR_6 10s linear alternate infinite;
   @keyframes STAR_6 {
    0%{
      opacity: 0;
      transform: translateY(0);
    }
    50%{
      opacity: 1;
      transform: translateY(10%);
    }
    100%{
      opacity: 0;
      transform: translateY(0);
    }
  }
}

.star-7,.star-8,.star-19{
  animation: STAR_7 3s linear .2s alternate infinite;
   @keyframes STAR_7 {
    0%{
      opacity: 0;
    }
    50%{
      opacity: 1;
    }
    100%{
      opacity: 0;
    }
  }
}



/*____UNIVERSE PAGE____*/

/*___WATER PAGE__________*/

.circle-1,.circle-5,.circle-6,.circle-7,.circle-23,.circle-31{
  animation: CIRCLE_1 40s ease .2s infinite;
  @keyframes CIRCLE_1 {
    0%{
      transform: scale(0);
      opacity:0;
    }50%{
      transform: scale(1);
      opacity:1;
    }100%{
      transform: scale(0);
     opacity:0;
    }
   
  }
}
.circle-2,.circle-8,.circle-9,.circle-29,.circle-28{
  animation: CIRCLE_2 30s ease .2s  infinite;
  @keyframes CIRCLE_2 {
    0%{
      transform: scale(0);
      opacity:0;
    }50%{
      transform: scale(1);
      opacity:1;
    }100%{
      transform: scale(0);
     opacity:0;
    }
  }
}

.circle-3,.circle-13,.circle-14,.circle-15,.circle-30{
  animation: CIRCLE_3 35s ease 1s  infinite;
  @keyframes CIRCLE_3{
    0%{
      transform: scale(0);
      opacity:0;
    }50%{
      transform: scale(1);
      opacity:1;
    }100%{
      transform: scale(0);
     opacity:0;
    }
  } 
}
.circle-4,.circle-10,.circle-11,.circle-12,.circle-16{
  animation: CIRCLE_4 27s ease .5s infinite;
  @keyframes CIRCLE_4{
    0%{
      transform: scale(0);
      opacity:0;
    }50%{
      transform: scale(1);
      opacity:1;
    }100%{
      transform: scale(0);
      opacity:0;
    }
  } 
}

.circle-18,.circle-25,.circle-26,.circle-27,.circle-22{
  animation: CIRCLE_5 23s ease .5s infinite;
  @keyframes CIRCLE_5{
    0%{
      transform: scale(0);
      opacity:0;
    }50%{
      transform: scale(1);
      opacity:1;
    }100%{
      transform: scale(0);
      opacity:0;
    }
  } 
}

.circle-24,.circle-19,.circle-20,.circle-21,.circle-17,.circle-32{
  animation: CIRCLE_6 30s ease .5s infinite;
  @keyframes CIRCLE_6{
    0%{
      transform: scale(0);
      opacity:0;
    }50%{
      transform: scale(1);
      opacity:1;
    }100%{
      transform: scale(0);
      opacity:0;
    }
  } 
}

/*_____WATER PAGE__________*/

/*____START OF FIRE PAGE_____*/

.sun{
  animation: SUN 15s ease .5s infinite;
 @keyframes SUN {
  0%{
   transform: translateY(-3%);
   opacity: 1;
  }50%{
    transform: translateY(30%);
    opacity: 0;
  }100%{
    transform: translateY(-3%);
    opacity: 1;
  }
 }
}

.mountain{
  animation: mountain 20s ease alternate infinite;
  @keyframes mountain {
    0%{
     opacity: .2;
    }50%{
     opacity: .7;
    }100%{
      opacity: .2;
    }
  }
}

/*____END OF FIRE PAGE_____*/

/*____START OF CONTACT PAGE___*/
.map-wrap{
  background-color: $black;
  margin-top: 6%;
   .map{
    width: 100%;
    img{
      width: 100%;
    }
  }
}
.map-details{
  background: $brown;
  h1{
    img{
      width: 3%;
    }
    margin-top: 3%;
    @include paraContent;
    text-transform: capitalize;
    font-weight: 300;
  }
  .details{
    float: right;
    width: 38%;
    padding-right: 5%;
    padding-bottom: 5%;
     h5{
       color: $white;
       text-transform: uppercase;
       margin-bottom: 4%;
     }
     ol{
      padding: 0;
      margin: 0;
      li{
        &::marker{
          color: $white;
        }
        padding-left: 3%;
        gap: 2%;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1%;
        p{
          margin: 0;
          font-size: 17px;
          color: $white;
          font-family: $montserrat;
          display: inline;
          &:nth-child(1){
            float: left;
          }
          &:nth-child(2){
            float: right;
          }
        }
      }
     }
  }
}

/*____END OF CONTACT PAGE_____*/



/*____AMENITIES PAGE________*/

.amenities-wrap{
  background-color: $black;
  margin-top: 6%;
  .heading{
    display: flex;
    align-items: start;
    gap: 2%;
    padding-top: 5%;
    img{
      width: 5%;
    }
    .caption{
      width: 25%;
      h1{
       @include headingFont;
       text-transform: capitalize;
      }
      p{
         font-size: $small;
         color: $white;
      }
    }
  }
  .pancha-tatvas{
    font-family: $montserrat;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 6%;
    .tatva{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 15%;
      a{
        text-decoration: none;
        position: relative;
        p{
          font-size: 60px;
          color: $brown;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          opacity: 0;
          transition: .5s;
          transform: translate 1s linear;
        }
      }
      &:hover{
        img{
          opacity: 0;
          cursor: pointer;
        }
        a p{
          opacity: 1;
          transform: translate(-3%,-50%);
        }
      }
      img{
        width: 100%;
        margin-bottom: 15%;
        transition: .5s;
      }
      h3{
        font-size: $caption;
        color: $brown;
        margin: 0;
      }
      p{
        font-size: $small;
        color: $white;
        margin: 0;
      }
      
    }
  }
}

/*_____AMENITIES PAGE______*/

/*____EARTH PAGE_____*/

.earth-sec-1{
  background: #d48365;
  padding-top: 6%;
  //padding-bottom: 9%;
  .img-1{
    width: 100%;
   // margin: 0 auto;
    position: relative;
    img{
      width: 100%;
    }
    p{
      position: absolute;
      font-size: $caption;
      color: $white;
      bottom: 5%;
      padding: 0 25%;
      text-align: center;
      width: 100%;
    }
  }
}

.earth-sec-2{
  background: $black;
  padding: 10%;
  .parent{
    display: flex;
    align-items: end;
    justify-content: space-between;
    .left{
      width: 15%;
      margin-bottom: -11%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      img{
        width: 100%;
      }
      p{
        color: $brown;
        font-size: $caption;
      }
    }
    .right{
      width: 60%;
      img{
        width: 100%;
      }
      p{
        color: $brown;
        font-size: $caption;
        margin-bottom: 0;
      }
      span{
        font-size: $small;
        color: $white;
      }
    }
  }
}

.earth-sec-3{
  background-color: #f4e0d9;
  padding: 6% 0;
  p{
    font-size: $small;
    color: $brown;
    margin-left: 10%;
  }
  .img-3{
    width: 80%;
    margin: 0 auto;
    img{
      width: 100%;
    }
  }
}

/*___EARTH PAGE____*/

/*_____ABOUT US PAGE____*/

.about-banner-wrap{
  padding-top: 6%;
  .about-banner{
    width: 100%;
    position: relative;
    img{
      width: 100%;
    }
    .caption{
      position: absolute;
      left: 5%;
      top: 5%;
      span{
        color: $brown;
        font-size: $small;
        font-family: $montserrat;
      }
      p{
        color: $brown;
        font-size: $large;
        font-family: $montserrat;
      }
    }
  }
}

.about-sec-2{
  background: #f4e0d9;
  padding-top: 5%;
   .logo{
    width: 15%;
    margin: 1% auto;
     img{
      width: 100%;
     }
   }
  .mid-image{
    width: 100%;
    margin: 0 auto;
    padding: 1% 10%;
    position: relative;
    background: linear-gradient(180deg, #f4e0d9 0%, #f4e0d9 50%, $brown 50%, $brown 100%);
    img{
      width: 100%;
    }
    .owl-nav{
      position: absolute;
      width: 80%;
      top: 50%;
      transform: translate(0,-50%);
      // z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .owl-next{
        margin-right: -4%;
        i{
          color: $white;
          font-size: $large;
        }
      }
      .owl-prev{
        margin-left: -4%;
        i{
          color: $white;
          font-size: $large;
        }
      }
    }
    
  }
  .desc{
    background-color: $brown;
    padding: 0 20%;
    padding-bottom: 5%;
    h1{
    font-size: $large;
    color: $white;
    font-family: $montserrat;
    text-align: center;

    }
    p{
      color: $white;
      font-family: $raleway;
      font-size: $small;
      text-align: center;
    }
    .all-container{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 7%;
      .small-card{
        width: 26%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 2%;
        img{
           width: 40%;
        }
        p{
         width: 100%;
        }
      }
      .line{
        height: 15vh;
        width: 1px;
        background-color: #404041;
      }
    }
  }
}

.about-sec-3{
  background-color: #f4e0d9;
  .img{
    width: 100%;
    img{
      width: 100%;
    }
  }
  .pattern{
    width: 100%;
    img{
      width: 100%;
      opacity: .4;
    }
  }
  .contents{
    padding: 3% 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // gap: .5em;
    span{
      font-size: $small;
      text-align: center;
      font-family: $montserrat;
    }
    h1{
      font-size: $large;
      color: $brown;
      text-align: center;
      font-family: $montserrat;
    }
    p{
      font-size: $small;
      text-align: center;
      font-family: $raleway;
    }
    .res-icons{
      display: grid;
      grid-template-columns: repeat(5,18%);
      align-items: start;
      justify-content: space-between;
      padding: 3% 0 0 0;
      width: 100%;
      div{
         display: flex;
         flex-direction: column;
         align-items: center;
         width: 100%;
         img{
           width: 55%;
           padding-bottom: 7%;
         }
         span{
          line-height: 1.3;
         }
      }
    }
  }
  .middle{
    width: 80%;
    margin: 0 auto;
    img{
      width: 100%;
    }
  }

  .earth-icons{
    margin-top: 10%;
    display: flex;
    align-items: end;
    justify-content: space-between;
    position: relative;
    .one{
      width: 15%;
    }
    .two{
      width: 25%;
    }
    .three{
      width: 20%;
    }
    .four{
      width: 30%;
    }
    .five{
      width: 30%;
      width: 10%;
      position: absolute;
      top: -5%;
      left: 10%;
    }
    .six{
      width: 10%;
      position: absolute;
      top: -18%;
      right: 24%;
    }
  }
}

/*____ABOUT US PAGE____*/


/*_____NEW EARTH PAGE_________*/

.earth-items-container{
  position: relative;
  .content{
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    h1{
      @include headingFont;
      text-align: center;
      font-family: $montserrat;
      margin-bottom: 3%;
    }
    p{
      font-size: $small;
      color: $white;
      font-family: $montserrat;
      display: block;
      text-align: center;
      margin-bottom: 3%;
      text-transform: uppercase;
    }
    .items{
      display: grid;
      grid-template-columns: repeat(6,11%);
      align-items: start;
      justify-content: center;
      gap: 2%;
      row-gap: 2em;
      margin-bottom: 3%;
      div{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .5em;
        img{
          width: 60%;
        }
        span{
          display: block;
          text-align: center;
          font-size: 18px;
          line-height: 24px;
          color: $brown;
          line-height: 1.5;
          //padding: 0 2%;
        }
      }
       
    }
  }
}

.full-img-section{
  width: 100%;
  overflow: hidden;
  .img{
    width: 100%;
    position: relative;
    img{
      width: 100%;
    }
    .big-a{
      position: absolute;
      width: 45%;
      right: -8%;
      bottom: 0;
      height: 100%;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  
  span{
    font-size: $small;
    color: $brown;
    font-family: $montserrat;
    background-color: #f4e0d9;
    display: block;
    padding: 10px 0 0 10%;
    // position: absolute;
    // bottom: -10px;
    // left: 10%;
  }
 
}

.earth-mid-section {
  background-color: #f4e0d9;
  .mid-image {
    width: 100%;
    margin: 0 auto;
    padding: 6% 10%;
    position: relative;
    background: linear-gradient(180deg, #f4e0d9 0%, #f4e0d9 50%, #d48365 50%, #d48365 100%);
    img{
      width: 100%;
    }
    span{
      font-size: $small;
      color: $white;
      font-family: $montserrat;
    }
    .owl-nav {
      position: absolute;
      width: 80%;
      top: 50%;
      transform: translate(0, -50%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .owl-next i,.owl-prev i {
        color: #ffffff;
        font-size: 48px;
      }
      .owl-prev {
        margin-left: -4%;
      }
      .owl-next {
        margin-right: -4%;
      }
    }
    .item{
      span{
        font-size: $caption;
        color: $white;
        font-family: $montserrat;
      }
      p{
        font-size: $small;
        color: $black;
        font-family: $raleway;
      }
    }
  }
  .parellel-imgs{
    background-color: $brown;
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding: 0 10%;
    padding-bottom: 6%;
    margin-top: -1px;
    div{
      width: 32%;
      img{
        width: 100%;
      }
      span{
        font-size: $small;
        color: $white;
        font-family: $montserrat;
      }
    }
  }


  .full-img{
    width: 100%;
    margin-bottom: 3%;
    img{
      width: 100%;
    }
    span{
      color:$brown;
      font-size: $small;
      font-family: $montserrat;
      margin-left: 10%;
    }
    .desc{
      display: flex;
      align-items: start;
      justify-content: space-between;
      padding: 1% 10%;
      .left{
        width: 40%;
        h4{
           font-size: $large;
           color: $brown;
           font-family: $montserrat;
        }

        p{
            font-size: $small;
            color: $brown;
            font-family: $montserrat;
        }
      }
      .right{
        width: 40%;
        font-size: $small;
        color: $brown;
        font-family: $montserrat;
      }
    }
  }

  .parellel-imgs-2{
    display: grid;
    grid-template-columns: repeat(3,32%);
    align-items: start;
    justify-content: space-between;
    padding:5% 10%;
    row-gap: 1em;
    div{
      width: 100%;
      img{
        width: 100%;
      }
      span{
        font-size: $small;
        color: $brown;
        font-family: $montserrat;
      }
    }
  }
.btn-container{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4%;
  #viewMoreBtn{
    outline: 0;
    font-size: $small;
    border: none;
    background: transparent;
    font-family: $montserrat;
    color: $brown;
  }
}

  /*______________DIRECTLY LINKED WITH JAVASCRIPT_____________*/

  .image-hidden{
    display: none;
  }

  
  .earth-icons{
    margin-top: 5%;
    display: flex;
    align-items: end;
    justify-content: space-between;
    position: relative;
    .one{
      width: 15%;
    }
    .two{
      width: 25%;
    }
    .three{
      width: 20%;
    }
    .four{
      width: 30%;
    }
    .five{
      width: 30%;
      width: 10%;
      position: absolute;
      top: -5%;
      left: 10%;
    }
    .six{
      width: 10%;
      position: absolute;
      top: -18%;
      right: 24%;
    }
    .the-sun{
      width: 15%;
      position: absolute;
      left: 20%;
      top: 5%;
      img{
        width: 100%;
      }
      animation: theSun 10s linear alternate infinite;
      @keyframes theSun {
        0%{
          transform: rotate(0deg);
        }50%{
          transform: rotate(360deg);
        }100%{
          transform: rotate(0deg);
        }
      }
    }
    .cloudy{
      width: 100%;
    }
   
  }
}

.menu-items-container .menu-list ul li.tab-dis{
  display: none;
}

/*____END OF NEW EARTH PAGE_________*/


/*____START OF SPECIFICATION PAGE____*/

.specification-banner{
  width: 100%;
  padding-top: 6%;
  img{
    width:100%
  }
}

.specification-desc-wrap{
  background-color: $brown;
  overflow: hidden;
  .specification-grid{
    max-width: 80%;
    padding: 2% 0;
    .row{
      .desc{
       // padding: 0 3%;
        h3{
        font-size: $caption;
        color: $black;
        font-family: $montserrat;
        }
        ul{
         padding: 0;
          li{
            font-size: $small;
            color: $white;
            font-family: $montserrat;
            margin-bottom: 3%;
            line-height: 1.4;
          }
        }
      }
    }
  }
}

.specification-more-wrap{
  background-color: $black;
  .mid-image{
    width: 100%;
    margin: 0 auto;
    padding: 1% 10%;
    position: relative;
    background: linear-gradient(180deg, $brown 0%, $brown 50%, $black 50%, $black 100%);
    img{
      width: 100%;
    }
  }

  .specification-grid{
    max-width: 80%;
    padding: 3% 0;
    overflow: hidden;
    .row{
      .desc{
      //  padding: 0 3%;
        h3{
        font-size: $caption;
        color: $brown;
        font-family: $montserrat;
        }
        ul{
          padding: 0;
          li{
              font-size: $small;
              color: $white;
              font-family: $montserrat;
              margin-bottom: 1%;
           }
        }
      }
    }
  }
}

/*___END OF SPECIFICATION PAGE_____*/


/*______START OF PLAN IMAGES______*/

.plan-images-wrap{
  width: 100%;
  background: $brown;
  padding: 12% 10% 3% 10%;
  img{
    width: 100%;
  }
  .plan-info{
    padding-top: 3%;
    .row{
      .title{
        h1{
          @include headingFont;
          color: $white;
          img{
            width: 6%;
          }
        }
      }
      ol{
        padding: 0;
        margin: 0;
        li{
          font-size: $small;
          color: $white;
          font-family: $montserrat;
          margin-bottom: 3%;
        }
      }
      h5{
        font-size: $small;
        color: $white;
        font-size: $raleway;
        font-weight: 700;
      }
    }
  }
}

.plan-sec-2,.plan-sec-1{
  background-color: $lightBrown;
  overflow: hidden;
  .description{
    padding: 3% 3% 3% 5%;
    h1{
      font-size: $large;
      font-family: $raleway;
      color: $white;
      margin-bottom: 3%;
      img{
        width: 6%;
      }
    }
    h5{
      margin-bottom: 4%;
      color: $white;
      font-family: $raleway;
      letter-spacing: 1px;
      font-size: $small;
    }
    .row{
      ol{
        margin-bottom: 0;
        li{
          font-size: $small;
          color: $white;
          font-family: $montserrat;
          margin-bottom: 2%;
        }
      }
    }
  }
}

.plan-sec-1{
   background: $brown;
   padding-top: 6%;
}

.residential-plan-imgs{
  padding: 4% 10%;
  background: #f4e0d9;
  overflow: hidden;
  h1{
    font-size: $large;
    font-family: $montserrat;
    color: $brown;
    text-align: center;
    margin-bottom: 3%;
  }
  
  .row{
    position: relative;
    .full-img{
      width: 100%;
      position: relative;
      ::after {
        z-index: 10;
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: inline-block;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.1) 42%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.3) 100%);
      }
      img{
        border: 3px solid $brown;
        width: 100%;
      }
   }
    div{
      position: relative;
      padding: 0;
      .heading{
        display: flex;
        align-items: start;
        position: absolute;
        top: 3%;
        left: 0;
        gap: 1%;
        z-index: 10;
        width: 100%;
        img{
          border: none;
          width: 4%;
        }
        .head{
          width: 100%;
          h2{
            font-size: 35px;
            font-family: $montserrat;
            width: fit-content;
            color: $brown;
            margin: 0;
          }
          span{
            font-size: 17px;
            font-family: $montserrat;
            color: $white;
            //font-weight: lighter;
            font-weight: 200;
          }
        }
       
      }
      .icons{
        position: absolute;
        right: 5%;
        bottom: 2%;
        display: flex;
        align-items: start;
        justify-content: end;
        width: 50%;
        gap: 6%;
        z-index: 10;
        margin-bottom: 1%;
        div{
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 18%;
          gap: .4em;
          img{
            border: none;
            width: 90%;
            margin-right: 8px;
          }
          span{
            font-size: 17px;
            color: $white;
            text-align: center;
            line-height: 1.2;
          }
        } 
      }
    }
  }
  .button{
    font-size: $small;
    font-family: $raleway;
    margin-top: 4%;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    a{
      text-decoration: none;
      color: $black;
      width: fit-content;
    }
    i{
      color: $brown;
      margin-left: -6px;
      opacity: 0;
      transition: .5s;
    }
    &:hover{
      i{
        margin-left: 6px;
        opacity: 1;
      }
    }
  }
}

/*______END OF PLAN IMAGES_____*/


/*____START OF WALKTHROUGH PAGE___*/
.walkthrough-sec-wrap{
  background: #d48365;
  padding-top: 12%;
  .youtube-video{
    width: 80%;
    height: 80vh;
    margin: 0 auto;
    position: relative;
    iframe{
      width: 100%;
      height: 100%;
    }
  }
  .content{
    width: 60%;
    margin: 4% auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    span{
      font-size: $caption;
      color: $black;
      font-family: $raleway;
    }
    h1{
      font-size: $large;
      color: $white;
      font-family: $raleway;
      text-align: center;
    }
    p{
      font-size: $small;
      color: $white;
      font-family: $raleway;
      text-align: center;
    }
  }
  .earth-mid-section{
    background-color: $brown;
    overflow: hidden;
     .earth-icons {
      margin-top: 12%;
      opacity: .5;
    }
  }
}


/*____END OF WALKTHROUGH PAGE_____*/

/*____START OF RESIDENTIAL INTERIOR START___*/

.interior-img-wrap{
  background: $black;
  overflow: hidden;
  .row{
    .left{
      position: relative;
      .flex{
        position: absolute;
        right: 0;
        bottom: 0;
        h1{
          font-size: $large;
          color: $white;
          font-family: $montserrat;
        }
        img{
          width: 5%;
        }
      }
    }
    .right{
      width: 80%;
      img{
        width: 100%;
      }
    }
    .flex{
      margin-top: 3%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 1%;
      h1{
        color: $brown;
        font-size: $caption;
        font-family: $raleway;
      }
      img{
         width: 6%;
      }
    }
  }
}
/*____START OF RESIDENTIAL INTERIOR END___*/

/*____CONATCT US PAGE START HERE____*/

.address-details-wrap{
  background-color: $black;
  overflow: hidden;
  .row{
    .contact-info{
      padding: 0 5% 0 10%;
      h1{
        font-size: $large;
        color: $brown;
        font-family: $raleway;
        margin-bottom: 5%;
      }
      p{
         font-size: $small;
         color: $white;
         font-family: $montserrat;
         margin-bottom: 4%;
         span{
          color: $brown;
          text-transform: uppercase;
         }
      }
      ul{
        margin: 0;
        padding: 0;
        li{
          list-style: none;
          display: inline-block;
          padding-right: 1%;
          a{
            text-decoration: none;
            i{
                font-size: $small;
                color: $white;
                height: 55px;
                width: 55px;
                border: 1px solid $brown;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: .6s;
                &:hover{
                  background: $brown;
                }
            }
          }
        }
      }
    }
    .blue-form{
        width: 100%;
        background-color: $brown;
        padding: 7% 10%;
        
        h1{
          font-size: $large;
          color: $white;
          font-family: $raleway;
          margin-bottom: 3%;
          text-align: center;
        }
    
    
        form{
            font-family: "Roboto", sans-serif;
            .field{
                display: flex;
                justify-content: space-between;
                margin-bottom: 2%;
              input{
                width: 49%;
                font-size: $small;
                font-family: $raleway;
                background:#f4e0d9;
                border: none;
                height: 65px;
                color: $black;
                letter-spacing: 1px;
                padding-left: 2%;
                &:focus{
                    outline: 0;
                }
              }
            }
            .msg-box{
                width: 100%;
                margin-bottom: 2%;
                textarea{
                    width: 100%;
                    background:#f4e0d9;
                    border: none;
                    color: $black;
                    font-size: $small;
                    letter-spacing: 1px;
                    padding: 2% 0 0 2%;
                    font-family: $raleway;
                    &:focus{
                        outline: 0;
                    }
                }
            }
            .last-line{
                display: flex;
                align-items: center;
                justify-content: end;
                button{
                    background-color: transparent;
                    font-size: $small;
                    font-family: $raleway;
                    color: $white;
                    letter-spacing: 1px;
                    float: right;
                    transition: 0.5s;
                    position: relative;
                    border: none;
                    i{
                      margin-left: -5px;
                      opacity: 0;
                      transition: .5s;
                    }
                    &:hover i{
                      opacity: 1;
                      margin-left: 6px;
                    }
                    span{
                        z-index: 2;
                        position: relative;
                    } 
                }
            }
        }
    }
  }
}
.modal-header{
  background: #f4e0d9;
  border-bottom: none;
  padding: 0 0;
  button{
    background-color: $brown;
    padding: 20px;
  }
}
.modal-body{
  background:#f4e0d9;
.blue-form{
  width: 100%;
  background-color:$white;
  padding: 3% 10%;
  border: 3px solid $brown;
  h1{
    font-size: $large;
    color: $black;
    font-family: $raleway;
    margin-bottom: 0%;
    text-align: center;
    margin-bottom: 1%;
  }
  p{
    text-align: center;
    font-size: $small;
    font-family: $montserrat;
    color: $brown;
    text-align: center;
    margin-bottom: 4%;
  }


  form{
      font-family: "Roboto", sans-serif;
      .field{
          display: flex;
          justify-content: space-between;
          margin-bottom: 2%;
        input{
          width: 49%;
          font-size: $small;
          font-family: $montserrat;
          background: transparent;
          border: 1px solid $brown;
          height: 55px;
          color: $black;
          letter-spacing: 1px;
          padding-left: 2%;
          &:focus{
              outline: 0;
          }
        }
      }
      .msg-box{
          width: 100%;
          margin-bottom: 2%;
          textarea{
              width: 100%;
              background:transparent;
              border: 1px solid $brown;
              color: $black;
              font-size: $small;
              letter-spacing: 1px;
              padding: 2% 0 0 2%;
              font-family: $montserrat;
              &:focus{
                  outline: 0;
              }
          }
      }
      .last-line{
          display: flex;
          align-items: center;
          justify-content: center;
          button{
              background-color: transparent;
              font-size: $small;
              font-family: $raleway;
              color: $black;
              padding: 10px 2% 10px 2%;
              letter-spacing: 1px;
              float: right;
              transition: 0.5s;
              position: relative;
              border: none;
              //padding: 20px;
              i{
                margin-left: -5px;
                opacity: 0;
                color: $brown;
                transition: .5s;
              }
              &:hover{
                i{
                  margin-left: 6px;
                  opacity: 1;
                }
              }
              span{
                  z-index: 2;
                  position: relative;
              } 
          }
      }
  }
}
}
.modal-dialog{
  width: 70%;
}


.enquire-btn{
  z-index: 10;
  position: fixed;
  width: fit-content;
  right: 1%;
  bottom: .5%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: .5s;
  gap: .3em;
  span{
    font-size: 17px;
    color: $black;
    font-family: $raleway;
    width: fit-content;
    margin-top: -15%;
    opacity: 0;
    transition: .5s;
  }
  div{
    width: 40%;
    height: 120px;
    width: 120px;
    background-color: $white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      width: 50%;
    }
  }
  
  &:hover{
    span{
      opacity: 1;
      margin-top: 0%;
    }
  }
}



/*____CONTACT US PAGE END HERE___*/


/*_____START OF CONSTRUCTION UPDATE PAGE_____*/

.multiple-plan-imgs{
  overflow: hidden;
  padding: 5% 10%;
  background-color: #f4e0d9;
   h1{
      font-size: $large;
      color: $white;
      text-align: center;
      font-family: $montserrat;
      margin-bottom: 3%;
   }
   div{
    img{
      border: 3px solid $brown;
    }
   }
   button{
    background-color: transparent;
    font-size: $small;
    font-family: $raleway;
    color: $white;
    letter-spacing: 1px;
    float: right;
    transition: 0.5s;
    position: relative;
    border: none;
    width: 100%;
    i{
      margin-left: -5px;
      opacity: 0;
      transition: .5s;
    }
    &:hover i{
      opacity: 1;
      margin-left: 6px;
    }
    span{
        z-index: 2;
        position: relative;
    } 
}
}

/*____END OF CONSTRUCTION UPDATE PAGE___*/

@media(max-width:1600px){
   $large: 40px;
   $small: 17px;
   $medium: 25px;
  
   .enquire-btn div {
    width: 40%;
    height: 60px;
    width: 60px;
   }
  .nav_wrap .contact-no {
    font-size: $small;
  }
  .about-sec-3 .contents span {
    font-size: $small;
  }
  .earth-items-container .content p {
    font-size: $small;
  }
  .plan-sec-2 .description h1, .plan-sec-1 .description h1{
     font-size: $large;
  }
  .plan-sec-2 .description h5, .plan-sec-1 .description h5 {
    font-size: $small;
  }
  .interior-img-wrap .row .left .flex h1 {
    font-size: $caption;
  }
  .residential-plan-imgs h1 {
    font-size: $large;
  }
  .residential-plan-imgs .button {
    font-size: $small;
  }
  .residential-plan-imgs .row div .heading .head h2 {
    font-size: $medium;
  }
  .residential-plan-imgs .row div .heading .head span {
    font-size: 16px;
  }
  .residential-plan-imgs .row div .icons div span {
    font-size: 15px;
  }
  .multiple-plan-imgs button {
    font-size: $small;
  }
  .menu-items-container .menu-list ul li:hover{
     .dropdown{
       height: 150px;
     }
  }
 
  .menu-items-container .menu-list ul li .dropdown li a {
    font-size: $small;
  }
  .menu-items-container .menu-list ul li .fa-greater-than {
    top: 5px;
  }
    
  .nav_wrap .menu_icon span{
    width: 40px;
  }
 
  .menu-items-container .menu-list ul {
    gap: .1em;
  }
  .menu-items-container .menu-list ul li a {
    font-size: $small;
  }
  .menu-items-container .menu-list ul li .fa-greater-than {
    font-size: $small;
  }
  .tatva-container .common p {
    font-size: $large;
  }
  .tatva-container .common p a {
    font-size: $large;
  }

  .tatva-container .common p span a {
    font-size: $large;
  }
  .about-sec-2 .desc h1 {
    font-size: $large;
  }
  .about-sec-2 .desc p {
    font-size: $small;
  }
  .about-sec-3 .contents p {
    font-size: $small;
  }
  .about-sec-3 .contents h1 {
    font-size: $large;
  }
  .about-sec-3 .contents span {
    font-size: $small;
  }
  .about-banner-wrap .about-banner .caption p {
    font-size: $large;
  }
  
  .about-banner-wrap .about-banner .caption span {
    font-size: $small;
  }
  .map-details h1 {
    font-size: $large;
  }
  .amenities-wrap .heading .caption h1 {
    font-size: $large;
  }
  .amenities-wrap .heading .caption p {
    font-size: $small;
  }
  .amenities-wrap .pancha-tatvas .tatva p {
    font-size: $small;
  }
  .earth-sec-2 .parent .left p {
    font-size: $small;
  }
  .earth-sec-1 .img-1 p {
    font-size: $medium;
  }
  .earth-sec-2 .parent .right p {
    font-size: $medium;
  }
  .earth-sec-2 .parent .right span {
    font-size: $small;
  }
  .earth-sec-3 p {
    font-size: $small;
  }
  .amenities-wrap .pancha-tatvas .tatva h3 {
    font-size: $medium;
  }

  .earth-items-container .content .items div span {
    font-size: 15px;
  }
  .full-img-section span {
    font-size: $small;
  }
  .earth-mid-section .mid-image .item span {
    font-size:$medium;
  }
  .earth-mid-section .mid-image .item p {
    font-size:$small;
  }
  .earth-mid-section .parellel-imgs div span {
    font-size: $small;
  }
  .earth-mid-section .full-img span {
    font-size: $small;
  }
  .earth-mid-section .parellel-imgs-2 div span {
    font-size: $small;
  }
  .earth-mid-section .full-img .desc .right {
    font-size: $small;
  }
  .earth-mid-section .full-img .desc .left h4 {
    font-size: $caption;
  }
  .earth-mid-section .full-img .desc .left p {
    font-size: $small;
  }
  .earth-items-container .content h1 {
    font-size: $large;
  }
  .earth-mid-section .mid-image span {
    font-size: $small;
  }
  .earth-mid-section .btn-container #viewMoreBtn {
    font-size: $small;
  }
  /*___SPECIFICATION PAGE START____*/

  .specification-desc-wrap .specification-grid .row .desc h3 {
    font-size: $medium;
  }
 .specification-desc-wrap .specification-grid .row .desc ul li {
   font-size: $small;
 }
 
//  .specification-more-wrap .specification-grid .row .desc h3 {
//    font-size: $medium;
//  }
//  .specification-more-wrap .specification-grid .row .desc p {
//   font-size: $small;
//  }

  /*_____SPECIFICATION PAGE END____*/

  /*_____START OF WALKTHROUGH PAGE____*/

  .walkthrough-sec-wrap .content span {
    font-size: $medium;
  }
  .walkthrough-sec-wrap .content h1 {
    font-size: $large;
  }
  .walkthrough-sec-wrap .content p {
    font-size: $small;
  }

  /*_____END OF WALKTHROUGH PAGE______*/

  /*____START OF PLAN PAGE_____*/
  .plan-images-wrap .plan-info .row .title h1 {
    font-size: $large;
  }
  .plan-images-wrap .plan-info .row ol li {
    font-size: $small;
  }
  .plan-sec-2 .description h1 {
    font-size: $large;
  }
  .plan-sec-2 .description .row ol li,.plan-sec-1 .description .row ol li {
    font-size: $small;
  }
  .multiple-plan-imgs h1 {
    font-size: $large;
  }
  .plan-images-wrap .plan-info .row h5 {
    font-size: $small;
  }
  /*____END OF PLAN PAGE____*/

  /*____START OF RESIDENTIAL INTERIOR PAGE____*/
  .interior-img-wrap .row .flex h1 {
    font-size: $medium;
  }
  .multiple-plan-imgs .button {
    font-size: $small;
  }
  /*____END OF RESIDENTIAL INTERIOR PAGE_____*/

  /*____START OF CONTACT PAGE_____*/
  .address-details-wrap .row .blue-form form .field input {
    font-size: $small;
  }
  .address-details-wrap .row .blue-form form .msg-box textarea{
    font-size: $small;
  }
  .address-details-wrap .row .blue-form form .last-line button {
    font-size: $small;
  }
  .address-details-wrap .row .blue-form h1{
    font-size: $large;
  }
  .address-details-wrap .row .contact-info h1 {
    font-size: $large;
  }
  .address-details-wrap .row .contact-info p {
    font-size: $small;
  }
  .address-details-wrap .row .contact-info p {
    font-size: $small;
  }
  .address-details-wrap .row .contact-info ul li a i {
    font-size: $small;
    height: 45px;
    width: 45px;
  }
  .address-details-wrap .row .blue-form form .field input {
    height: 55px;
  }
  /*____END OF CONTACT PAGE_____*/
  .modal-body .blue-form h1 {
    font-size: $large;
  }
  .modal-body .blue-form p {
    font-size: $small;
  }
  .modal-body .blue-form form .field input {
    font-size: $small;
  }
  .modal-body .blue-form form .msg-box textarea {
    font-size: $small;
  }
  .modal-body .blue-form form .last-line button {
    font-size: $small;
  }
}
@media(max-width:1250px){
 
}

@media(max-width:1150px){

  .residential-plan-imgs .row div .icons {
    width: 100%;
    gap: 3%;
  }
  .residential-plan-imgs .row div .icons div {
    width: 16%;
  }

  // .enquire-btn {
  //   width: 18%;
  // }

  .tatva-container .common p{
    font-size: 30px;
  }
  .tatva-container .common p a{
     font-size: 30px;
  }
  .menu-items-container .menu-list svg{
    height: 100vh;
  }
  .nav_wrap .logo {
    width: 10%;
  }
  .menu-items-container .menu-list ul li.tab-dis{
    display: block;
  }
  .tab-desk-dis{
    display: none !important;
  }
  input:checked ~ ul.submenu{
    width: 100%;
    margin-top: 25px;
    padding-left: 15px;
  }
  label {
    font-size: 17px;
  }

  .submenu li{
    margin-bottom: 3% !important;
  }

  .submenu li a{
    margin-left: 0 !important;
  }

  .menu-items-container .menu-list ul {
    width: 30%;
  }
  .about-sec-2 .desc {
    padding: 0 8%;
  }
  .amenities-wrap .heading .caption {
    width: 50%;
  }
  .earth-sec-1 .img-1 p {
    padding: 0 16%;
  }
  .map-details .details {
    width: 45%;
  }
  .earth-items-container{
    background: $black;
    padding: 5% 0;
  }
  .earth-items-container .content .items {
    display: grid;
    grid-template-columns: repeat(5, 15%);
  }
  .earth-items-container .content {
    position: static;
    transform: translate(0, 0);
    margin-top: -50%;
    padding: 4% 0;
  }
  .earth-items-container .content .items div{
    width: 100%;
  }
  .earth-sec-1 {
    background: #d48365;
    padding-top: 12%;
  }
  .map-wrap,.amenities-wrap{
    margin-top: 12%;
  }
  .about-banner-wrap, .specification-banner{
    padding-top: 12%;
  }
  .about-sec-3 .contents .res-icons {
    display: grid;
    grid-template-columns: repeat(3, 30%);
    row-gap: 2em;
  }
  .plan-sec-1 {
    background: #d48365;
    padding-top: 11%;
 }
}


@media(max-width:767px){
  $small:15px;
  $large:30px;
  $medium: 20px;

  .residential-plan-imgs .button {
    font-size: $small;
  }
  .enquire-btn span {
    font-size: $small;
  }
  .residential-plan-imgs h1 {
    font-size: $large;
 }
 .interior-img-wrap .row .left .flex h1 {
    font-size: $medium;
 }
 .about-sec-3 .contents .res-icons {
  row-gap: 1em;
 }

  .residential-plan-imgs .row div .heading .head h2 {
    font-size: $medium;
  }
  .residential-plan-imgs .row div .heading .head span {
    font-size: $small;
  }
 .residential-plan-imgs .row div .icons {
   width: 100%;
   display: none;
 }
 
  .nav_wrap .contact-no {
    left: 5%;
    display: none;
  }
  label{
    font-size: 18px;
  }
  input:checked ~ ul.submenu {
    margin-top: 5px;
  }
  .menu-items-container .menu-list ul li {
    margin-bottom: 7%;
  }
 .tatva-container .common p a {
  font-size: $medium;
 }
 .tatva-container .common p .touch a {
  font-size: $small;
 }
 .tatva-container .common p .touch {
  font-size: $small;
 }
 .tatva-container .common p a svg {
   height: 4vh;
 }
  .menu-items-container .menu-list ul li:hover{
    .dropdown{
      height: 130px;
    }
 }

  .main svg {
    width: 250%;
  }


  .menu-items-container .menu-list ul li .dropdown li a {
    font-size: $small;
  }
   /*___INDEX PAGE_____*/
  

  .mid-container>div{
    margin-bottom: -1%;
  }
  .nav_wrap .logo {
    width: 15%;
  }
  
  .nav_wrap {
    padding: 1.5% 5%;
  }
  .menu-items-container .menu-list ul {
    width:60%;
    transition: .5s;
    padding-left: 0;
 }
 .menu-items-container .menu-list ul li a {
  font-size: 18px; 
 }
 .menu-items-container .menu-list ul li .fa-greater-than {
  font-size: 20px;
 }

  /*_____END OF INDEX PAGE____*/

  /*___About us page____*/
  .about-banner-wrap {
    padding-top: 19%;
 }
 .about-banner-wrap .about-banner .caption span {
   font-size: $small;
 }
 .about-banner-wrap .about-banner .caption p {
  font-size: $large;
  line-height: 1;
 }
 .about-sec-2 .desc h1 {
  font-size: $large;
  padding: 2% 0;
 }
 .about-sec-2 .desc p {
  font-size: $small;
 }
 .about-sec-2 .desc {
  padding: 0 5%;
 }
 .about-sec-2 .desc .all-container {
  flex-direction: column-reverse;
  gap: 2em;
  padding: 5% 0;
 }
 .about-sec-2 .desc .all-container .small-card {
  width: 55%;
 }
 .about-sec-3 .contents {
  padding: 3% 10%;
 }
 .about-sec-3 .contents span {
  font-size: $small; 
  width: 100%;
 }
 .about-sec-3 .contents h1 {
  font-size: $large;
}

.about-sec-3 .contents p {
  font-size: $small;
  text-align: justify;
}
.about-sec-2 .desc .all-container .line{
  width: 100%;
  height: 1px;
}

  /*____END OF ABOUT US PAGE____*/

  /*___START of Amenities page___*/

  .amenities-wrap{
    margin-top: 19%;
  }
  .amenities-wrap .heading .caption {
    width: fit-content
 }
 .amenities-wrap .heading .caption h1 {
  font-size: $large;
 }
 .amenities-wrap .heading .caption p {
  font-size: $small;
  text-align: justify;
 }
 .amenities-wrap .pancha-tatvas {
  display: grid;
  grid-template-columns: repeat(2, 45%);
  row-gap: 2em;
}
.amenities-wrap .pancha-tatvas .tatva {
  width: 100%;
}
.amenities-wrap .pancha-tatvas .tatva img {
  width: 100%;
  margin-bottom: 5%;
}
.amenities-wrap .pancha-tatvas .tatva h3 {
  font-size: $medium;
}
.amenities-wrap .pancha-tatvas .tatva p {
  font-size: $small;
}
.amenities-wrap .heading {
  padding-top: 5%;
  padding-right: 5%;
}

  /*____END of Amenities page_____*/

  /*___CONTACT US PAGE START_____*/

  .map-wrap{
    margin-top: 19%;
  }
  .map-details .details {
    float: right;
    width: 100%;
    padding: 0 5% 5% 10%;
  }
  .map-details h1 {
    font-size: $large;
    margin-bottom: 6%;
  }
  .map-details .details ol li p {
    margin: 0;
    font-size: $small;
  }
  .map-details .details h5 {
    font-size: $small;
 }

 .tatva-container .common p {
  font-size: $medium;
  width: 100%;
  padding: 0 10%;
 }
 .tatva-container .common p span a {
  font-size: $medium;
 }

 .tatva-container ,.tatva-container h3 {
  font-size: 20px;
 }
 .tatva-container{
 h4{
  text-align: right;
  font-size: 20px;
  svg{
    width: 50%;
    rect{
      width: 100%;
    }
  }
 }
}
.tatva-container{
  h3{
    text-align: left;
    //top: 43vh;
  }

}
.tatva-container h3 svg {
  width: 50%;
}


  /*___END OF CONTACT US PAGE_____*/

  /*__EARTH PAGE START___*/

  .earth-sec-1 .img-1 p {
    position: absolute;
    font-size: $medium;
    padding: 0;
    line-height: 1.2;
  }
  .earth-sec-1 {
    padding-top: 18%;
  }
  
  .earth-sec-2 .parent .right p {
    font-size: $medium;
  }
  .earth-sec-2 .parent .right span {
    font-size: $small;
  }
  .earth-sec-2 .parent {
    display: flex;
    flex-direction: column-reverse;
  }
  .earth-sec-2 .parent .right {
    width: 100%;
 }
 .earth-sec-2 .parent .left {
  width: 50%;
  margin-bottom: 0;
 }
 .earth-sec-2 .parent .left p {
  //color: #d48365;
  font-size: $medium;
}
.earth-sec-3 p {
  font-size: $small;
}
.about-sec-2 .mid-image .owl-nav .owl-next i,.about-sec-2 .mid-image .owl-nav .owl-prev i {
  font-size: 30px;
}
  /*___EARTH PAGE END__*/
  .earth-mid-section .full-img .desc {
    flex-direction: column;
    padding: 5% 10%;
  }
  .earth-mid-section .full-img .desc .left {
    width: 100%;
  }
  .earth-mid-section .full-img .desc .right {
    width: 100%;
    text-align: justify;
  }
  .earth-mid-section .parellel-imgs {
    flex-direction: column;
    gap: 2em;
  }
  .earth-mid-section .parellel-imgs div {
    width: 100%;
  }
  .earth-mid-section .mid-image .owl-nav .owl-next i, .earth-mid-section .mid-image .owl-nav .owl-prev i {
    font-size: $large;
  }
  .earth-mid-section .parellel-imgs-2 {
    grid-template-columns: repeat(1,100%);
    //flex-direction: column;
    gap: 2em;
  }
  .earth-mid-section .parellel-imgs-2 div {
    width: 100%;
  }
  .earth-items-container .content h1 {
    font-size: $large;
  }
  
  .earth-items-container {
    background: $black;
    padding: 5% 0;
  }
  .earth-items-container .content {
    position: static;
    transform: translate(0,0);
    margin-top: -50%;
  }
  .earth-items-container .content .items {
    grid-template-columns: repeat(3, 30%);
    gap: 2%;
    row-gap: 2em;
  }
  .earth-items-container .content .items div span {
    font-size: 12px;
  }
 .earth-items-container .content h1 {
    margin-bottom: 5%;
  }

  .earth-mid-section .btn-container #viewMoreBtn {
    font-size: $small;
  }

  #mob-earth,#mob-air,#mob-fire,#mob-water, #mob-universe{
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 100%;
      transform: translate(-50%,-50%);
  }
  #desk-earth,#desk-air,#desk-fire,#desk-water, #desk-universe{
      display: none;
  }

  /*____Specification page start____*/
  .specification-desc-wrap .specification-grid .row .desc h3 {
    font-size: $medium;
  }
  .specification-desc-wrap .specification-grid .row .desc{
    padding-bottom: 6%;
  }
  // .specification-more-wrap .specification-grid .row .desc h3 {
  //   font-size: $medium;
  // }
  .specification-banner {
    padding-top: 18%;
  }
  

  /*____Specification page end___*/

  /*____Walkthrough page start here___*/
  .walkthrough-sec-wrap {
    padding-top: 19%;
 }
  .walkthrough-sec-wrap .content {
    width: 80%;
  }
  .walkthrough-sec-wrap .content span {
    font-size: $medium
  }
  .walkthrough-sec-wrap .content h1 {
    font-size: $large;
 }
 .walkthrough-sec-wrap .content p {
  text-align: justify;
  font-size: $small;
}
 .walkthrough-sec-wrap .youtube-video {
  width: 80%;
  height: 50vh;
 }
  /*____WAlkthrough page end here_____*/

  /*____Plan page start here___*/

  .plan-images-wrap .plan-info .row .title h1 {
    font-size: $large;
  }
  .plan-images-wrap .plan-info .row ol li {
    font-size: $small;
 }
 .plan-sec-2 .description h1 {
  font-size: $large;
 }
 .plan-sec-2 .description .row ol li,.plan-sec-1 .description .row ol li {
  font-size: $small;
}
.multiple-plan-imgs h1 {
  font-size: $large;
}
.multiple-plan-imgs .button {
  font-size: $small;
}
.plan-images-wrap {
  padding-top: 19%;
}
.interior-img-wrap .row .flex h1 {
  font-size: $medium;
}
.plan-sec-1 {
  background: #d48365;
  padding-top: 18%;
}
  /*____Plan page end here___*/

  /*____START OF CONTACT PAGE_____*/

  .address-details-wrap .row .blue-form form .field  {
    flex-direction: column;
    margin-bottom: 0;
  }
  .address-details-wrap .row .blue-form form .field input {
    width: 100%;
    margin-bottom: 4%;
    font-size: $small;
  }
  .address-details-wrap .row .blue-form form .msg-box textarea{
    font-size: $small;
  }
  .address-details-wrap .row .blue-form h1 {
     font-size: $large; 
 }
 .address-details-wrap .row .contact-info h1 {
   font-size: $large;
 }
 .address-details-wrap .row .contact-info p{
  font-size: $small;
 }
 .address-details-wrap .row .contact-info ul li a i{
  font-size: $small;
  height: 40px;
  width: 40px;
 }
 .address-details-wrap .row .contact-info{
  padding-left: 10%;
  overflow-y: hidden;
 }
  /*____END OF CONTACT PAGE____*/

  .earth-mid-section .mid-image .item span {
    font-size: $medium;
  }
  .earth-mid-section .mid-image .item p {
    font-size: $small;
  }

  .modal-body .blue-form h1 {
    font-size: $large;
  }
  .modal-body .blue-form p {
    font-size: $small;
    line-height: 1.3;
  }
  .modal-body .blue-form form .field input,.modal-body .blue-form form .msg-box textarea  {
    font-size: $small;
  }
  .modal-body .blue-form form .field {
    flex-direction: column;
    margin: 0;
  }
  .modal-body .blue-form form .field input{
    margin-bottom: 3%;
    height: 50px;
  }
  .modal-body .blue-form form .field input, .modal-body .blue-form form .msg-box textarea {
    font-size: 15px;
    width: 100%;
  }
  .modal-body .blue-form form .last-line button {
    font-size: $small;
  }
  .modal-body .blue-form {
    padding: 7% 3%;
  }
  .earth-items-container .content p {
    font-size: $small;
    margin: 6% 0;
 }
//  .enquire-btn {
//    width: 40%;
//  }
}

@media(min-width:768px){
  #desk-earth,#desk-air,#desk-fire,#desk-water, #desk-universe{
      display: block;
  }
  #mob-earth,#mob-air,#mob-fire,#mob-water, #mob-universe{
      display: none;
  }
}