/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child),
    .dropdown .dropbtn {
      display: none;
    }
  
    .head {
      display: block !important;
    }
  
    .topnav a.icon {
      float: right;
      display: block;
    }
    .movieIframe {
      width: 100%;
      height: fit-content !important;
      padding: 4px;
    }
    /* PRELOADER ANIMATION CSS CODE  */
  
    #preloader {
      position: fixed;
      /* background: #fff url(../Spin-1s-200px.svg) no-repeat center center; */
      opacity: 0.9;
      background: #fff url(../Images/gigslogo.png) no-repeat center center;
      background-size: 50%;
      height: 100vh;
      width: 100%;
      z-index: 100;
    }  
  
  
    /* WAVE DISPLAY  */
    .ocean{
      display: none;
   }
  
  /* ABOUT IMG  */
  #aboutimg{
    width: 100%;
    height: fit-content;
  }
  #simplethingtext{
    font-size: 8vw;
}
.main-h1{
  font-size: 15vw;
  padding: 10px;
  margin: 10px 0;
}
.main-h1::after{
  width: 60vw;
}
  }
  /* ===================================================================================================
  =================================================================================================== */
  /* MEDIA QUERY FROM SCREEN 0 TO 380PX  */
  
  @media only screen and (max-width: 380px) {
   
    .body{
      overflow-x: hidden !important;
    }
    .head {
      display: inline-block !important;
      font-size: 20px !important;
    }
  
    .brand {
      position: absolute;
      padding-left: 20px;
      float: left;
      line-height: 55px;
      text-transform: uppercase;
    }
  
    .textsize {
      position: relative;
      float: left;
      line-height: 30px;
      text-transform: uppercase;
      font-size: 1.8em !important;
    }
  
    /* PRELOADER ANIMATION CSS CODE  */
  
    #preloader {
      position: fixed;
      opacity: 0.9;
      background: #ffffff url(../Images/gigslogo.png) no-repeat center center;
      background-size: 50%;
      height: 100vh;
      width: 100%;
      z-index: 100;
    }
  
    .movieIframe {
      width: 100%;
      height: fit-content !important;
      padding: 4px;
    }
    /* PRELOADER ANIMATION CSS CODE  */
  
    #preloader {
      position: fixed;
      /* background: #fff url(../Spin-1s-200px.svg) no-repeat center center; */
      opacity: 0.9;
      background: #fff url(../Images/gigslogo.png) no-repeat center center;
      background-size: 50%;
      height: 100vh;
      width: 100%;
      z-index: 10000;
    }
  
    /* MOVIES  */
  
    .movie-heading {
      align-items: center;
      justify-content: center;
      padding: 20px 10px;
    }
  
    .movie-h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4em;
      position: relative;
      background: linear-gradient(0deg, rgb(178, 98, 217), rgb(69, 163, 235));
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      background-clip: none;
    }
    .movie-h1::after {
      content: "";
      align-self: center;
      background: linear-gradient(45deg, #f06, #3cf, #f06);
      width: 4em;
      height: 10px;
      border-radius: 5px;
      position: absolute;
      bottom: -20px;
      /* left: 18%; */
      /* transform: translateX(-50%); */
    }
  
    /* MOVIE IMAGE GAP LESS  */
    .rounded-lg{
      position: relative;
      top: 10%;
    }
  /* ------------------------------------------------------- */
  /* WAVE DISPLAY  */
  .ocean{
     display: none;
  }
  
  /* ABOUT IMG  */
  #aboutimg{
    width: 100%;
    height: fit-content;
  }
  
.steps{
  margin-left: 50px;
}


.main-h1{
  font-size: 15vw;
  padding: 10px;
  margin: 10px 0;
}
.main-h1::after{
  width: 60vw;
}

#simplethingtext{
    font-size: 8vw;
}

.simpleImg{
 display: grid;
 margin-left: -10px !important;
 border-radius: 5px;
}
  
.workdivtxt{
  padding: 10px 100px !important;

}

.workdivtxt p{
  padding: 10px 20px;
  text-align: center;
}


.workdivtxt .btndiv2{
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: auto;
  align-items: center;
  justify-content: center;

}

.textBig{
  background: linear-gradient(90deg, rgb(204, 103, 255), rgb(69, 163, 235));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: none;
}

.textSmall{
  color:  rgb(143, 255, 229);
}

.btndiv2 button{
  margin-bottom: 25px;
}

.footerdivmove{
  margin-right: 80px;
}

.footerdivmove:last-child{
  margin-right: 50px;
}

.faqdiv p{
  background: #ffffff !important;
  color: black !important;
}

.flex-grow p{
  color: #555 !important;
}

.footerdivmovehomepage li{
  margin-left: 15px;
}
  }
  
  /* ===================================================================================================
  =================================================================================================== */
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {
      position: relative;
    }
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {
      float: none;
    }
    .topnav.responsive .dropdown-content {
      position: relative;
    }
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  
    .movieIframe {
      width: 100%;
      height: fit-content !important;
      padding: 4px;
    }
  
  /* ABOUT IMG  */
  #aboutimg{
    width: 100%;
    height: fit-content;
  }
  
    /* WAVE DISPLAY  */
    .ocean{
      display: none;
   }
   
   #simplethingtext{
    font-size: 8vw;
}
  }
  
  @media only screen and (max-width : 1023) {
    .ocean{
      display: none;
    }
  /* ABOUT IMG  */
  #aboutimg{
    width: 100%;
    height: fit-content;
  }
    
  }
  /* FOR BIG DEVICES  */
  
  @media only screen and (max-width : 1200px) {
  
    .ocean{
      display: none;
    }
    /* ABOUT IMG  */
  #aboutimg{
    width: 100%;
    height: fit-content;
  }
  }