@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;700&family=Poppins:wght@200;400;500;800&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html{
    font-size: 62.5%;

}

.nav-link{
    font-size: 20px;
    font-weight: 700;
    color: black;
}
.taglinecontainer{
    background-color: #282435;
    padding: 10rem;
}
.headingthree,.headingone,.headingfour{

    color: white;

}
.headingone{
    font-size: 50px;
}
.headingthree,.headingfour,placeholder{
    font-size: 20px;
    padding: 2rem;
}

.sectioncontainer {
    box-sizing: content-box;
  }

  .sectionheading{
      font-size:90px;
      font-weight: 600;
  }
  .sectionpara{
      font-size: 25px;
  }
  .tut-button,.yellowbutton,.blackbutton{
      
      font-size: 20px;
      margin-bottom: 1.5rem;
      border-radius: 25px;
      display: block;
      margin: auto;
      margin-top: 2rem;

  } 
  .bg-lightblue {
    background-color: var(--lightblue);
  }
  .languagetitle{
      font-size: 40px;
      font-weight: 700;
  }
  .languagepara{
      font-size: 15px;
      font-weight: 500;
  }
  
  .card-title{
      font-size: 25px;
      font-weight: 700;
      padding-left:13rem   ; 
      padding-right: 13rem  ;
      padding-top: 4rem ;
      padding-bottom: 4rem ;
      
  }

  li{
      text-decoration: none;
  }

  .mega{
      text-decoration: none;
      color: white;
      font-size: 1.5rem;
  }

  .cards-title{
    padding-left:8rem   ; 
    padding-right: 8rem  ;
    padding-top: 5rem ;
    padding-bottom: 5rem ;
  }

  .block-title{
      padding: 4rem;
      
      text-align: center;
      font-size: 40px;
      font-weight: 500;
      
  }
  .block-body{
      margin: 4rem;
      border-radius: 25px;
  }
  .roundeds-pill{
      padding: 1.5rem 3rem 1.5rem 3rem;
      margin-bottom: 5rem;
      border-radius: 25px;
  }
  /* .card-title{
      margin-top: 1.5rem;
  } */

  @media only screen and (max-width: 500px) {
    .input-group {
      width: 80%;
    }
  }
  
  @media (min-width: 750px) and (max-width: 1080px) {
    .jscard {
      width: 45vw !important;
    }
  }

  @media only screen and (max-width: 829px){

    .block-body{
        width: 200px;
    }

  }
  @media only screen and (max-width: 579px){

    .block-body{
        width: 70vw;
        margin-left: 5rem;
    }
    body{
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
    }
    .card-block{
        width: 50vw;
    }
    .card-block-title{
        position: relative;
        right: 6rem;
    }

    @media (max-width:400px){

        .sectionheading{
            font-size:40px;
        }
        .card-block{
            width: 50vw;
            text-align: center;
            
        }
        .card-block-title{
            text-align: center;
            position: relative;
            right: 6rem;

        }
        


    }


    



  }