@media only screen and (max-width: 991px) {
    html {
      font-size: 56.25%;
    }
    .row {
      flex-direction: column;
    }
    section {
      padding: 7.5rem 5rem;
    }
    header {
      padding: 2.2rem 5rem;
    }
    section.hero {
      grid-template-columns: 1fr;
      background: linear-gradient(rgba(0,0, 0, 0.7), rgba(0,0, 0, 0.7)), url('images/Girl-School.png') no-repeat top center;
    }
    #header-shape {
      display: none;
    }
    .hero-img {
      grid-row: 1;
    }
    nav ul a,
    nav a#logo {
      color: var(--white-shade-1);
    }
    .hero-content h1,
    .hero-content p {
      text-align: center;
    }
    .hero-content h1 {
      color: var(--white-shade-1);
    }
    .hero-content p {
      color: var(--white-shade-1);
    }
    .hero-content .primary-btn {
      background-color: var(--white-shade-1);
      color: var(--base-shade-1);
    }
    .hero-content .secondary-btn {
      color: var(--white-shade-1);
      border-color: var(--white-shade-1);
    }
    .btn-container {
      justify-content: center;
    }
    .secondary-btn{
      text-align: center;
    }
    .download-app img {
      width: 30%;
    }
    .app-feature div {
      justify-content: center;
    }
    .app-feature p {
      text-align: center;
    }
    .download-app a img {
      width: 50%;
    }
    .objtext{
      background: #E0C097;
      text-align: left;
      padding: 0 10rem;
    }
  }
  
  @media only screen and (max-width: 767px) {
    html {
      font-size: 50%;
    }
    header {
      padding: 2rem 4rem;
    }
    #ham-menu {
      display: block;
      color: var(--white-shade-1);
    }
    nav a#logo,
    #ham-menu {
      font-size: var(--heading-font-size-2);
    }
    nav ul {
      background-color: #024126;;
      position: fixed;
      left: -100vw;
      top: 70.4px;
      height: calc(100vh - 70.4px);
      width: 100vw;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      transition: 1s;
      gap: 0;
    }
    nav ul a {
      font-size: var(--heading-font-size-3);
    }
    .sticky nav ul a {
      color: var(--white-shade-1);
    }
    nav ul a:hover {
      color: var(--base-shade-1);
    }
    #scroll-top {
      height: 6rem;
      width: 6rem;
    }
    .objtext{
      background: #E0C097;
      text-align: left;
      padding: 0rem 10rem;
    }
  }
  @media only screen and (max-width: 575px) {
    html {
      font-size: 46.87%;
    }
    header {
      padding: 2rem 3rem;
    }
    section,
    footer {
      padding: 7.5rem 3rem;
    }
    .features .column {
      padding: 4rem 2rem;
    }
    nav ul {
      top: 65.18px;
      height: calc(100vh - 65.18px);
    }
    .objtext{
      background: #E0C097;
      text-align: left;
      padding: 0rem 10rem;
    }
  }
  
  @media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
  }
  
  @media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
  }
  
  
  @media only screen and (max-width: 700px) {
    .icon-cont img,
    .textbox-cont{
      width:100%;
      height:200px;
     }
  }
  
  
  /*Footer*/
  @media(max-width:786px)
  {
      .firstfooter{
          justify-content: center;
          align-items: center;
      }
      .footer{
         
          width: 100vw;
      }
      .firstfooter .second-footer{
          flex-direction: column;
          /* border: 1px solid red !important; */
          align-items: center;
          margin: 20px 0;
  
          /* justify-content: space-around; */
      }
      .firstfooter{
          flex-direction: column;
          justify-content: center;
      }
      .paragraph .firstfooter{
          /* margin-bottom: 10px; */
          margin: 20px 40px ;
          /* border: 1px solid red; */
      }
      .icon{
          margin: 13px !important;
      }
  
      .workshop-input{
        padding-top: 200px;
      }
      
  }
  
  
  @media(max-width:578px)
  {
      .footer{
          
          width: 100vw;
      }
      .firstfooter .updates, .second-footer .paragraph{
        align-items: center;
          flex-direction: column;
        
      }
      .boxes .box{
          margin-bottom: 10px;
      }
  
      .workshop-input{
        padding-top: 200px;
      }
  
  
  }
  
  
  
  
  /*deliverables for pc/large screen view*/
  @media (min-width: 600px) {
    .deliverables{ grid-template-columns: repeat(2, 1fr); }
  }
  
  @media (min-width: 900px) {
    .deliverables{ grid-template-columns: repeat(2, 1fr); }
  }
  
  /*objectives for pc/large screen view */
  
  @media (min-width: 600px) {
    .objectives{ grid-template-columns: repeat(2, 1fr); }
  }
  
  @media (min-width: 900px) {
    .objectives{ grid-template-columns: repeat(2, 1fr); }
  }
  
  /*objectives text section for mobile view*/
  @media (max-width: 578px){
    .objtext{
      background: #E0C097;
      text-align: left;
      padding: 0 5rem;
    }
  }
  
  @media (max-width: 786px){
    .objtext{
      background: #E0C097;
      text-align: left;
      padding: 0 5rem;
    }
  }