/* rem and em  do not depend of HTML font size in media query 
1rem = 1em = 16px */
/* -------- Responsive Design -------- */
@media (max-width: 768px) {
/**************************/
/*********GENERAL*********/
/***********************/
  .heading-home{
    font-size: 5.4rem;
    line-height: 1;
    margin-bottom: 2.2rem;
    font-weight: 900;
    letter-spacing: 0.9px;
    text-transform: uppercase;
  }
  .heading-primary{
    font-size: 4.2rem;
    line-height: 1.2;
    margin-bottom: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: capitalize;
  }
  .heading-secondary {
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 4rem;
    line-height: 1.3;
    text-transform: capitalize;
  }
  .heading-tertiary {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 4.4rem;
    line-height: 1.6;
    text-transform: capitalize;
  }
  .sub-heading {
    display: block;
    font-size: 1.6rem;
    text-transform: uppercase;
    color: #2D60FF;
    font-weight: 700;
    margin-bottom: 1.6rem;
    letter-spacing: 0.75px;
  }
  .sub-heading-grn {
    display: block;
    font-size: 1.6rem;
    text-transform: uppercase;
    color: #00D8A6;
    font-weight: 700;
    margin-bottom: 1.6rem;
    letter-spacing: 0.75px;
  }
  .copy1{
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: 1.2px;
    margin-bottom: 4.4rem;
    line-height: 1.6;
  }
  .copy2{
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 0.9px;
    line-height: 1.6;
  }
  .copy3{
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 0.9px;
    line-height: 1.4;
  }
  .check-list li{
    font-size: 1.4rem;
  }
/******END GENERAL*****/
  .why-box {
    flex: 1 1 100%; /* Stack all boxes vertically */
  }
/**************************/
/*********HOME HERO*********/
/***********************/
      .hero .section {
        flex-direction: column !important; /* override alternating */
        text-align: center;
        padding: 40px 6%;
      }

      .hero .section img {
        max-width: 100%;
      }

      .hero .content h2 {
        font-size: 22px;
      }
      .btn-mobile-nav {
        display: block;
      }
  /**************************/
  /*********NAVBAR*********/
  /***********************/
      .main-nav {
        position: absolute;
        top: 64px;
        right: 0;
        background: #F5F8FF;
        width: 100%;
        height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease-in-out;
      }

      .main-nav.open {
        height: calc(100vh - 70px);
        opacity: 1;
        pointer-events: auto;
      }

      .main-nav-list {
        flex-direction: column;
        align-items: center;
        gap: 3.5rem;
        padding-top: 2rem;
        z-index:2;

      }
      .main-nav-link{
         font-size:2.2rem;
         line-height:1.4;
         
      }
     
      .dropdown-menu a {
      display: block;
      padding: 12px 20px;
      color: #04121f;
      font-size: 2rem;
      font-weight: 500;
      text-decoration: none;
      transition: background 0.2s ease, color 0.2s ease;
      position: relative;
      line-height:1.4;

    }
    .dropdown-menu a:hover{
      background:#ffffff;
     }
     .nav-item:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }


    .nav-item:hover .dropdown-menu {
      display: block;
      left:250px;
    }

    .main-nav{
      z-index: 99;
    }
    /**************************/
  /*********HOME*********/
  /***********************/
    .carousel{
      width:100%;
      flex-direction: row;;
    }
    .slide-content{
      width:100%;
      margin:0 4rem;

    }
    .home-btns{
      display:flex;
      flex-direction: column;
      }
      .sec1{
    display:flex;
   flex-direction: column;
  }  
  .sec2{
    display:flex;
   flex-direction: column;
  }
  .sec3{
    display:flex;
   flex-direction: column;
  }
  .sec4{
    display:flex;
   flex-direction: column;
  }
  .top { order: 1; }   /* push left below */
  .bottom { order: 2; }  /* bring right on top */
   /**************************/
  /*********SERVICES*********/
  /***********************/
    .services-healine-bg{
      margin-bottom:4.4rem;
    }
    .step-text-box{
      width:100%;
      margin:0px 4rem;
    }
    .step-img-box{
      width:100%;
      margin:0px 4rem;
    }
    .step-img-box img{
      width:100%;
    }
    .service-mob{
      width:80%;
      display:block;
      margin:0 auto;
    }
    .step-img-box{
      margin:0 0;
    }
    .step-text-box{
      margin:0 0;
    }
    /**************************/
  /*********PRODUCT*********/
  /***********************/
    .product-box{
      display:flex;
      flex-direction: column;
  }
  .prod-top { order: 1; }   /* push left below */
  .prod-bottom { order: 2; }  /* bring right on top */
  .prod-img1, .prod-img2, .prod-img3, .prod-img4, .prod-img5{
    width:100%;
  }
  .product-headline-bg{
    padding-top:2rem;
    padding-bottom:2rem;
  }
  .product-feature{
    padding-top:0;
  }
  .left{
    padding-top:2rem;
    padding-bottom:2rem;
  }
  /**************************/
  /*********CAREER*********/
  /***********************/
    .jobs {
    grid-template-columns: 1fr;
    }
}
/******************/
/* BELOW 1344px = 1344/16 (smaler desktops) */
/****************************/

@media (max-width: 84em) {
  .hero {
    max-width: 120rem;
  }
  .heading-primary {
    font-size: 4.4rem;
  }
}
/******************/
/* BELOW 1200px = 1200/16 (ipads) */
/****************************/

@media (max-width: 75em) {
  /* 9px/16px - 56.25% */
  html {
    font-size: 56.25%;
  }

  .heading-secondary {
    font-size: 3.6rem;
  }
  .heading-tertiary {
    font-size: 2.4rem;
  }
  .grid {
    row-gap: 6.4rem;
    column-gap: 4.8rem;
  }
  .header {
    padding: 0 3.2rem;
  }
  .hero {
    gap: 4.8rem;
  }
  .main-nav-list {
    gap: 3.2rem;
  }
  .testimonial-container {
    padding: 4.8rem 3.2rem;
  }
}
/******************/
/* BELOW 944px = 944/16 (tablets) */
/****************************/
@media (max-width: 59em) {
  /* Scaling down value of 1rem  (8px/16px = 0.5 or 50% */
  html {
    font-size: 50%;
  }
  .section-hero {
    padding: 6.4rem 0;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 0 6.4rem;
    gap: 6.4rem;
  }
  .hero-text-box,
  .hero-img-box {
    text-align: center;
  }
  .hero-img {
    width: 60%;
  }

  .step-number {
    font-size: 7.4rem;
  }
  
  .cta {
    grid-template-columns: 3fr 2fr;
  }
  .cta-form {
    grid-template-columns: 1fr;
  }
  .btn--form {
    margin-top: 1.2rem;
  }
  /*home**/
  .slide-content{
      width:100%;
      margin:0 6rem;

    }
  .sec1{
    display:flex;
   flex-direction: column;
  }  
  .sec2{
    display:flex;
   flex-direction: column !important;
  }
  .sec3{
    display:flex;
   flex-direction: column;
  }
  .sec4{
    display:flex;
   flex-direction: column !important;
  }
   .top { order: 1; width:100%;}   /* push left below */
  .bottom { order: 2;width:100%; }  /* bring right on top */
}
/*Services*/

/******************/
/* BELOW 700px = 700/16 (small tablets) */
/****************************/
@media (max-width: 44em) {
  .grid--4-col,
  .grid--3-col {
    grid-template-columns: repeat(2, 1fr);
  }
  .heading-secondary {
    margin-bottom: 4.8rem;
  }
  
  .grid--footer {
    grid-template-columns: repeat(6, 1fr);
  }
  .nav-col {
    grid-row: 1;
    grid-column: span 2;
    margin-bottom: 3.2rem;
  }
  .address-col,
  .logo-col {
    grid-row: 2;
    grid-column: span 3;
  }	
   .sec1{
    display:flex;
   flex-direction: column;
  }  
  .sec2{
    display:flex;
   flex-direction: column reverse;
  }
  .sec3{
    display:flex;
   flex-direction: column;
  }
  .sec4{
    display:flex;
   flex-direction: column;
  }
    .section-hero{
    padding-top:6.4rem;
  }
   .top { order: 1; width:100%;}   /* push left below */
  .bottom { order: 2;width:100%; }  /* bring right on top */
}
/******************/
/* BELOW 544px = 544/16 (small phone) */
/****************************/
@media (max-width: 34em) {
  .grid--2-col,
  .grid--3-col,
  .grid--4-col {
    grid-template-columns: repeat(1, 1fr);
  }
  .heading-primary {
    font-size: 3.4rem;
  }
  .section-hero {
    padding: 6.4rem 0 6.4rem 0;
  }
  .hero {
    padding: 0 3.2rem;
  }
  btn,
  .btn:link,
  .btn:visited {
    padding: 2.4rem 1.6rem;
  }
  .hero-img {
    width: 80%;
  }
  .logos img {
    height: 1.2rem;
  }
.step-img-box-l {justify-content: center;}	
.step-img-box-r {justify-content: center;}	
  .step-img-box:nth-child(2) {
    grid-row: 1;
  }
  .step-img-box:nth-child(6) {
    grid-row: 5;
  }
  .step-img-box {
    transform: translateY(2.4rem);
  }
 	
  .cta {
    grid-template-columns: 1fr;
  }
  .cta-img-box {
    height: 32rem;
    grid-row: 1;
  }
  .cta-text-box {
    padding: 3.2rem;
  }
   /**************************/
  /*********HOME*********/
  /***********************/
    .carousel{
      width:100%;
      flex-direction: row;;
    }
    .slide-content{
      width:90%;
      margin:0 4rem;

    }
    .heading-home{
    font-size: 3.8rem;
    line-height: 1;
    margin-bottom: 2.2rem;
    font-weight: 900;
    letter-spacing: 0.9px;
    text-transform: uppercase;
  }
}