@import url('https://fonts.googleapis.com/css?family=Lato');

:root {
    --creamy: #f7f5f1;
    --creamy-dark: rgba(0,0,0,0.025);
    --sdf : #000000;
    --white: #ffffff; 
    --greenish-theme : #123b38;
    --orange : #e6b72b;
    --color-mint:#6fdcbf;
    --color-lilac: hsl(264, 51%, 71%);
    --color-mint-dark: hsl(316, 30%, 36%);
    --color-sherbet: hsl(257, 8%, 18%);
}
/* Background Colors */
.body{
  background-color: var(--color-mint);
}
.bg-white{
  background-color:var(--white);
}
.bg-creamy{
  background-color:var(--creamy);
}
.bg-creamy-dark{
  background-color:var(--creamy-dark);
}
/* .bg-orange{
  background-color:var(--orange);
} */

/* Navbar Responsive Styles */

.nav-position{
  background-color: var(--creamy);
  
  padding: 0px 105px 10px 105px;
}
.box{
 /* padding:0.3% 10% 0.5% 10%; top right bottom left*/
 background-color: var(--white);
  position: relative;
  z-index: 1;
  min-height: 100vh;
}
.box::after{
  content: "";
  position: absolute;
  width: 68%;
  height: 100%;
  /* top: 0; */
  right: 0;
  bottom: 0;
  background-color: var(--color-mint);
  z-index: 0;
  max-width: 1800px;
}
.col{
  float: left;
  width: 50%;
  position: relative;
  z-index: 1;
  padding: 10px;
  height: inherit; /* Should be removed. Only for demonstration */
}
.row{
  display: flex;
}
.mar-t-5{
  padding-top: 3%;
}
/* Navbar Responsive Styles */
.img-left{
  background-color: var(--raj-light);
}

.hamburger{
  display: none;
}
.right-half{
   width: 50%;
   float: right;
}
.left-half{
   width: 50%;
   float: left;
}
/* Typewrite Css */
.typewrite > .wrap {
   font-size:3vw; 
   border-right: 0.08em solid #fff;
  }
  /* End */
.sub-head{
  font-size: 1.8vw;
  font-weight: 300;
  color: var(--greenish-theme);
}

.font-main{
    margin-top: 10px;
    /* margin-left: 6%; */
    font-size: 3vw;
    font-weight: 500;
    
    color: var(--greenish-theme);
}

.img-girl-google{
    width: 80%;
    height: 80%;
    margin: 7rem 0rem 0rem 1.5rem;

}
.bar1, .bar2, .bar3 {
  width: 30px;
  height: 4px;
  background-color: #333;
  margin: 4px 0;
  transition: 0.4s;
}

 
.box-btm-20{
    background: var(--creamy-dark);
    /* margin-top: 35%; */
    height: 60px;
    width: 100%;
}
 .box-btm-20 p{
    padding: 17px 0% 0% 10%;
    
 }
 /* fds */

  .checkbox {
    opacity: 0;
    position: absolute;
  }
  
  .label {
    top:13px;
    left:15px;
    width: 40px;
    height: 16px;
    background-color:#111;
    display: flex;
    border-radius:50px;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    position: relative;
    transform: scale(1.5);
  }
  
  .ball {
    width: 17px;
    height: 17px;
    background-color: white;
    position: absolute;
    top: -0.5px;
    left: -0.5px;
    border-radius: 50%;
    transition: transform 0.2s linear;
  }
  h2 {
    color: #fff;
    position: absolute;
    top: 20px;
  }
  
 

  /* Scroable Css  */
::-webkit-scrollbar {
  width: 11px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: var(--raj-light);
  border-radius: 20px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {

  background:var(--color-mint);
  border-radius: 7px;
}

/* Handle on hover */
/* ::-webkit-scrollbar-thumb:hover {
  background:
} */
/* End */


  /* Media Queries Only Starts From Here */
  @media screen and (min-width: 480px) {
    .nav-position{
      background-color: var(--creamy);
      
      padding: 0px 105px 10px 105px;
    }
    }

  @media (max-width: 992px) {
   


  }
  @media (max-width: 400px) {
   
    
      }
  @media screen and (max-width: 786px) {
    .box{
      padding:5%;
 }
 .font-main{
   font-size: 7vw;
 }
 .sub-head{
font-size: 5vw;
 }
 .img-girl-google {
   width: 100%;
    height: 100%; 
   margin: 0 0 0 4%;
}
.mar-t-5{
 padding-top: 1.5%;
}

  }
  /* End Queries */