/*
     Responsive Styling for Different Screen Sizes
*/

/* =========================================================
                    Minimum Width of 250 to 980 
     ========================================================= */

@media (min-width: 250px) and (max-width: 980px) {

/* =========================================================
                  Main 
     ========================================================= */

    body {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      overflow-x: hidden;
      max-width: 100%;
    }

     .area h1 {
      font-size: 30px;
      line-height:60px;
    }
  
    .area h3 {
      font-size: 20px;
      margin-top: 5px;
    }

    .main{
    width:100%;
    margin-top:0;
}

/* =========================================================
                  Question 
     ========================================================= */
  
    .quest {
      width: 80%;
      min-height: 75px;
      margin-left: 10px;
      margin-right: 10px;
    }

      .top span {
    font-size: 15px;
  }

    .answer {
    text-align: start;
    font-size: 12px;
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    padding: 0 25px;
    transition: max-height 0.4s ease, padding 0.4s ease;
  }

  .section-title{
  color:#fff;
  font-size:25px;
  font-weight:700;
  text-align:start;
  margin:0 0 24px;
}

/* =========================================================
                    Footer 
     ========================================================= */

  .contact-footer h3 {
    color: #fff;
    font-size: 25px;
    margin-bottom: 20px;
}

/* =========================================================
                    More Reason to Join
     ========================================================= */

  .more-reasonsT h2{
  color:#fff;
  font-size:25px;
  margin-bottom:24px;

  padding-inline:40px;
  text-align:start;
}

.card h3{

  color:#fff;

  font-size:20px;

  font-weight:700;

  margin:0 0 18px;

}

.card p{

  color:rgba(255,255,255,.72);

  font-size:15px;

  line-height:1.6;

  width:90%;
}


.icon{

  position:absolute;

  
    left:24px !important;
    right:auto !important;
  

    bottom: 24px;

    width:62px;
    height:62px;

    opacity:.95;
  
  }

  .reasons-inner{

    width:95%;
    margin:0 auto;

}

.reasons-inner h2{

    transform:none;
    padding-inline:0;
    text-align:right;

}

.cards{

    grid-template-columns:1fr;

    gap:18px;

}

.card{

    min-height:220px;

    padding:24px;

}

.card p{

    width:100%;

}


/* =========================================================
                  Platform
     ========================================================= */

  .platform h2{
  color:#fff;
  font-size:25px;
  font-weight:700;
  margin:0 0 25px;
  text-align:start;
}

.platform-grid{ 
  direction:ltr; 
  display:flex; 
  gap:12px; 
  overflow-x:auto; 
  overflow-y:hidden; 
  scroll-behavior:smooth; 
  scrollbar-width:none; 
  padding-bottom:15px; 
  flex-wrap:nowrap; 
  min-width:0; 
  contain:layout; 
  max-width:250px;
  justify-content: flex-start;
 
}
}

/* =========================================================
                    Max Width 320px 
     ========================================================= */

@media (max-width: 320px) {


  /* =========================================================
                Main
     ========================================================= */


    .banner-wrapper {
        align-self: center;
        margin-left: 0;
        margin-right: 0;
    }

    /* =========================================================
                  More Reason to Join 
     ========================================================= */

    .reasons-inner {
        width: 100%;
        margin: 0 auto;
    }

    .reasons-inner h2 {
        padding-inline: 10px;
    }

    .cards {
        width: 100%;
        gap: 12px;
    }

    .card {
        padding: 20px;
    }

}


/* =================================================================================
     Max width 700 to 980 FIXING NARROW CARDS AND ICON OVERLAPS WITH TEXT 
     ================================================================================= */

@media (min-width: 700px) and (max-width: 980px) {

  /* =========================================================
                  Platform
     ========================================================= */

    .platform-grid {
        max-width: 100%;
        overflow-x: hidden;
        justify-content: center;
        gap: 20px;
    }
}

/* =========================================================================
     Minimum Width 970 to Maximum 488px - FIXING SCROLLING CARDS  
     ========================================================================= */

@media (min-width: 970px) and (max-width: 488px) {

  /* =========================================================
                  Platform
     ========================================================= */


    .platform-grid {
        max-width: 100%;
        overflow-x: hidden;
        justify-content: center;
        gap: 20px;
    }
}

/* ============================================================================================
     Minimum Width 1024px to Maximum 1366px - FIXING NARROW CARDS AND ICON OVERLAPS WITH TEXT 
     ============================================================================================ */

@media (min-width: 1024px) and (max-width: 1900px) {

/* =========================================================
                  Main
     ========================================================= */

  body {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      overflow-x: hidden;
      max-width: 100%;
    } 
  
  h4 {
    color:white;
  }

  .main{
    width:100%;
    margin-top:0;
}

/* =========================================================
                  Platform
     ========================================================= */




.platform .section-inner{
  max-width:1200px;
  margin:auto;
  padding:0 60px;
  user-select: none;

}


/* =========================================================
                  Footer
     ========================================================= */

  .contact-footer h3 {
    color: #fff;
    font-size: 25px;
    margin-bottom: 20px;
}

/* =========================================================
                  More Reason to Join 
     ========================================================= */


    .reasons-inner {
        width: 95%;
        max-width: 1200px;
        margin: 0 auto;
    }

    .reasons-inner .cards {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 20px;
    }

    .reasons-inner .card {
        min-width: 0;
        padding: 28px;
    }

    .reasons-inner .icon {
        left: 20px !important;
        right: auto !important;
    }

    /* =========================================================
                  Question 
     ========================================================= */


      .section-title{
      color:#fff;
       font-size:32px;
       font-weight:700;
       text-align:start;
       margin:0 0 24px;
       transform: translateX(-20px);
       user-select: none;
    }


        .quest {
      width: 85%;
      min-height: 75px;
      margin-left: 10px;
      margin-right: 10px;
    }

      .top span {
    font-size: 15px;
  }

    .answer {
    text-align: start;
    font-size: 12px;
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    padding: 0 25px;
    transition: max-height 0.4s ease, padding 0.4s ease;
  }


}

  /* ============================================================================================
     Minimum Width 768px to Maximum 1024px - FIXING COMMON QUESITON TEXT POSITION 
     ============================================================================================ */

@media (min-width: 768px) and (max-width: 1024px) {

  

    /* =========================================================
                  Question 
     ========================================================= */


      .section-title{
       transform: translateX(-20px);
    }
  }


  /* ============================================================================================
     Minimum Width 1366px to Maximum 4096px - FIXING COMMON QUESITON TEXT POSITION 
     ============================================================================================ */


     
  @media (min-width: 1366px) and (max-width: 1399px) {


      .quest {
      width: 80%;

    }

      .section-title{
       transform: translateX(1px);

    }
  }

@media (min-width: 1400px) and (max-width: 1540px) {
    .quest {
        width: 73%;
        max-width: 1200px;
    }
}

@media (min-width: 1550px) and (max-width: 1650px) {
    .quest {
        width: 68%;
        max-width: 1200px;
    }
}

@media (min-width: 1660px) and (max-width: 1690px) {
    .quest {
        width: 55%;
        max-width: 1200px;
    }
}


  @media (min-width: 1700px) and (max-width: 1790px) {

              .quest {
      width: 65%;

    }

      .section-title{
       transform: translateX(10px);

      }

    
  }

  @media (min-width: 1800px) and (max-width: 1850px) {
          .quest {
      width: 60%;

    }

      .section-title{
       transform: translateX(-20px);

      }
}

  @media (min-width: 1860px) and (max-width: 1890px) {
          .quest {
      width: 58%;

    }

      .section-title{
       transform: translateX(-20px);

      }
}

  @media (min-width: 1900px) and (max-width: 1999px) {
          .quest {
      width: 55%;

    }

      .section-title{
       transform: translateX(-20px);

      }
}

  @media (min-width: 2000px) and (max-width: 2160px) {
          .quest {
      width: 55%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 2200px) and (max-width: 2299px) {
          .quest {
      width: 50%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 2300px) and (max-width: 2349px) {
          .quest {
      width: 45%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 2350px) and (max-width: 2399px) {
          .quest {
      width: 45%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 2400px) and (max-width: 2449px) {
          .quest {
      width: 45%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 2450px) and (max-width: 2499px) {
          .quest {
      width: 45%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 2600px) and (max-width: 2649px) {
          .quest {
      width: 40%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 2650px) and (max-width: 2699px) {
          .quest {
      width: 40%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 2700px) and (max-width: 2799px) {
          .quest {
      width: 40%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 2800px) and (max-width: 2899px) {
          .quest {
      width: 40%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 2900px) and (max-width: 2949px) {
          .quest {
      width: 38%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 2950px) and (max-width: 2999px) {
          .quest {
      width: 38%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 3000px) and (max-width: 3249px) {
          .quest {
      width: 35%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 3250px) and (max-width: 3500px) {
          .quest {
      width: 32%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 3600px) and (max-width: 3699px) {
          .quest {
      width: 30%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 3700px) and (max-width: 3799px) {
          .quest {
      width: 30%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 3800px) and (max-width: 4066px) {
          .quest {
      width: 28%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

  @media (min-width: 3800px) and (max-width: 4096px) {
          .quest {
      width: 28%;

    }

      .section-title{
       transform: translateX(10px);

      }
}

@media (min-width: 981px) {

    .navbar {
        position: fixed !important;
        top: 20px !important;
        right: 50% !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        transform: translateX(50%) !important;
        z-index: 9999 !important;
    }

    .navbar .buttons {
        margin: 0 !important;
        transform: none !important;
    }

}