@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-transform: capitalize;
  text-decoration: none;
  outline: none;
  border: none;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear; }

 html {
  font-size: 62.5%; 
}
/* Style the Contact Us title */
.contact-title {
  text-align: center; /* Center the text horizontally */
  font-size: 7rem; /* Adjust the font size as needed */
  margin-bottom: 20px; /* Add some spacing below the title */
  color: #333; /* Change the color to your preferred text color */
  /* You can add more styling properties as per your design */
}

/* Define font-size for elements within the header with !important */
header .navbar li a {
  font-size: 18px !important; /* Adjust the font size as needed */
}



section, .footer .box-container {
  padding: 3rem 9%; }
  .btn {
    display: block; /* Change from inline-block to block to make it a block-level element */
    margin: 1rem auto; /* Center the button horizontally by setting left and right margins to auto */
    padding: 1rem 3rem;
    background: #e9edfb;
    color: #224bcf;
    cursor: pointer;
    border-radius: 0.5rem;
    font-size: 1.7rem;
    text-align: center; /* Center the text within the button */
  }
  
  .btn:hover {
    color: #fff;
    background: #224bcf;
  }

@media (max-width: 992px) {
  html {
    font-size: 55%; }
  section, .footer .box-container {
    padding: 3rem 2rem; } }

@media (max-width: 449px) {
  html {
    font-size: 50%; } }

.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 9%;
  background-color: #224bcf; }
  .header .logo {
    font-size: 2.5rem;
    font-weight: bolder;
    color: #fff; }
    .header .logo i {
      color: #fa1d86; }
  .header ul {
    list-style: none; }
    .header ul li {
      position: relative;
      float: left; }
      .header ul li:hover ul {
        display: block; }
      .header ul li a {
        padding: 2rem;
        display: block;
        font-size: 1.7rem;
        color: #fff; }
        .header ul li a:hover {
          background: #fa1d86; }
        .header ul li a i {
          font-size: 1.4rem; }
      .header ul li ul {
        position: absolute;
        left: 0;
        width: 20rem;
        background-color: #224bcf;
        display: none; }
        .header ul li ul li {
          width: 100%; }

#menu-btn {
  cursor: pointer;
  color: #fff;
  font-size: 2.5rem;
  display: none; }

@media (max-width: 768px) {
  .header {
    padding: 2rem; }
    .header .navbar {
      position: absolute;
      top: 100%;
      left: 0;
      width: 300px;
      background: #224bcf;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
              clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
      .header .navbar.active {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
      .header .navbar ul li {
        width: 100%; }
        .header .navbar ul li ul {
          width: 100%;
          position: relative; }
  #menu-btn {
    display: inline-block; } }

.footer {
  background: #e9edfb; }
  .footer .box-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1.5rem; }
    .footer .box-container .box h3 {
      font-size: 2.2rem;
      padding: 1rem 0;
      color: #302851;
      

    }
    .footer .box-container .box a {
      display: block;
      font-size: 1.4rem;
      padding: 1rem 0;
      color: #666; }
      .footer .box-container .box a:hover {
        color: #fa1d86; }
        .footer .box-container .box a:hover i {
          padding-right: 2rem; }
      .footer .box-container .box a i {
        padding-right: 0.5rem; }
  .footer .credit {
    text-align: center;
    margin-top: 2rem;
    padding: 2.5rem 2rem 2rem;
    font-size: 2rem;
    color: #666;
    border: 0.2rem solid rgba(0, 0, 0, 0.1); }
    .footer .credit span {
      color: #fa1d86; }

.home {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem; }
  .home .image {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 42rem;
            flex: 1 1 42rem; }
    .home .image img {
      width: 100%; }
  .home .content {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 42rem;
            flex: 1 1 42rem; }
    .home .content h3 {
      color: #302851;
      font-size: 5rem; }
    .home .content p {
      font-size: 1.4rem;
      color: #666;
      padding: 1rem 0;
      line-height: 2.5; }

.category {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(16rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem; }
  .category .box {
    border-radius: 1rem;
    background: #e9edfb;
    padding: 4rem 3rem;
    text-align: center; }
    .category .box:hover {
      -webkit-transform: scale(1.1);
              transform: scale(1.1); }
    .category .box img {
      height: 7rem;
      margin-bottom: 2rem; }
    .category .box h3 {
      font-size: 1.7rem;
      color: #302851; }

.heading {
  background: url(../../images/heading-bg.png) no-repeat;
  background-size: cover;
  background-position: center; }
  .heading h3 {
    font-size: 3.5rem;
    color: #302851; }
  .heading p {
    font-size: 1.6rem;
    color: #666;
    padding-top: 0.5rem; }
    .heading p a {
      padding-right: 0.5rem;
      color: #fa1d86; }
      .heading p a:hover {
        color: #224bcf; }

.about {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem; }
  .about .image {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 42rem;
            flex: 1 1 42rem; }
    .about .image img {
      width: 100%; }
  .about .content {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 42rem;
            flex: 1 1 42rem; }
    .about .content h3 {
      color: #302851;
      font-size: 4.5rem; }
    .about .content p {
      font-size: 1.4rem;
      padding: 1rem 0;
      color: #666;
      line-height: 2.5; }

@media (max-width: 992px) {
  .about .content h3 {
    font-size: 3rem; } }

.contact .icons-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(30rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 1.5rem; }
  .contact .icons-container .icons {
    text-align: center;
    padding: 2rem;
    border-radius: 1rem;
    background: #f5f5f5;
    margin-bottom: 2rem; }
    .contact .icons-container .icons i {
      height: 6.5rem;
      width: 6.5rem;
      line-height: 6.5rem;
      font-size: 2.5rem;
      color: #224bcf;
      background: #e9edfb;
      border-radius: 50%;
      text-align: center;
      margin-bottom: 0.5rem; }
    .contact .icons-container .icons h3 {
      font-size: 2rem;
      color: #302851;
      padding: 0.7rem 0; }
    .contact .icons-container .icons p {
      line-height: 2;
      font-size: 1.4rem;
      color: #666; }

.contact .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.5rem; }
  .contact .row form {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 42rem;
            flex: 1 1 42rem;
    border-radius: 1rem;
    background: #f5f5f5;
    padding: 2rem; }
    .contact .row form h3 {
      font-size: 2.5rem;
      color: #302851;
      margin-bottom: 0.5rem; }
    .contact .row form .box,
    .contact .row form textarea {
      width: 100%;
      padding: 1rem 1.2rem;
      font-size: 1.6rem;
      color: #666;
      text-transform: none;
      margin: 1rem 0;
      border-radius: 0.5rem;
      background: #fff; }
    .contact .row form textarea {
      height: 15rem;
      resize: none; }
  .contact .row .map {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 42rem;
            flex: 1 1 42rem;
    width: 100%;
    min-height: 300px;
    border-radius: 1rem; }

.blog {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(31rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
  gap: 1.5rem; }
  .blog .box .image {
    height: 25rem;
    width: 100%;
    overflow: hidden; }
    .blog .box .image img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      border-radius: 0.5rem; }
  .blog .box .content {
    padding: 2rem;
    background: #f5f5f5; }
    .blog .box .content .icons {
      padding: 1.5rem 0;
      margin-bottom: 1rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; }
      .blog .box .content .icons a {
        font-size: 1.4rem;
        color: #666; }
        .blog .box .content .icons a:hover {
          color: #224bcf; }
        .blog .box .content .icons a i {
          padding-right: 0.5rem;
          color: #224bcf; }
    .blog .box .content h3 {
      font-size: 1.7rem;
      padding: 0.5rem 0;
      color: #302851; }
    .blog .box .content p {
      padding: 1rem 0;
      font-size: 1.4rem;
      line-height: 2.5;
      color: #666; }

.teachers {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(27rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
  gap: 1.5rem; }
  .teachers .box {
    text-align: center;
    overflow: hidden; }
    .teachers .box:hover .image .share {
      -webkit-transform: translateY(0);
              transform: translateY(0); }
      .teachers .box:hover .image .share a {
        -webkit-transform: translateY(-1rem);
                transform: translateY(-1rem);
        opacity: 1;
        -webkit-transition: -webkit-transform 0.2s 0.2s;
        transition: -webkit-transform 0.2s 0.2s;
        transition: transform 0.2s 0.2s;
        transition: transform 0.2s 0.2s, -webkit-transform 0.2s 0.2s; }
    .teachers .box .image {
      overflow: hidden;
      height: 32rem;
      width: 100%;
      position: relative;
      border-radius: 1rem; }
      .teachers .box .image .share {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.7);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        z-index: 10;
        overflow: hidden;
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%); }
        .teachers .box .image .share a {
          font-size: 2.5rem;
          margin: 2rem 1.5rem;
          color: #fff;
          -webkit-transform: translateY(5rem);
                  transform: translateY(5rem);
          opacity: 0; }
          .teachers .box .image .share a:hover {
            color: #fa1d86; }
      .teachers .box .image img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover; }
    .teachers .box .content {
      padding-top: 1rem; }
      .teachers .box .content h3 {
        font-size: 2rem;
        color: #302851; }
      .teachers .box .content span {
        color: #666;
        font-size: 1.5rem; }

.course-1 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(31rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
  gap: 1.5rem; }
  .course-1 .box {
    background: #f5f5f5;
    border-radius: 1rem;
    text-align: center;
    padding: 3rem 2rem; }
    .course-1 .box .img {
      margin-bottom: 1rem;
      height: 8rem; }
    .course-1 .box h3 {
      font-size: 2rem;
      color: #302851; }
    .course-1 .box p {
      font-size: 1.4rem;
      color: #666;
      line-height: 2.5;
      padding: 1rem 0; }

.course-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(31rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
  gap: 1.5rem; }
  .course-2 .box {
    padding: 2rem;
    border-radius: 1rem;
    background: #f5f5f5; }
    .course-2 .box .image {
      margin-bottom: 2rem;
      text-align: center; }
      .course-2 .box .image img {
        height: 22rem; }
    .course-2 .box .content span {
      font-size: 1.4rem;
      color: #fa1d86;
      background: #ffeaf4;
      padding: 0.5rem 1rem; }
    .course-2 .box .content h3 {
      color: #302851;
      line-height: 2;
      margin-top: 1.5rem;
      font-size: 2rem; }
    .course-2 .box .content p {
      font-size: 1.4rem;
      color: #666;
      line-height: 2.5;
      padding: 1rem 0; }
    .course-2 .box .content .btn {
      padding: 1rem 5rem 1rem 1rem; }
    .course-2 .box .content .icons {
      margin-top: 2rem;
      padding-top: 2rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      border-top: 0.2rem solid rgba(0, 0, 0, 0.1); }
      .course-2 .box .content .icons a {
        font-size: 1.4rem;
        color: #666; }
        .course-2 .box .content .icons a:hover {
          color: #fa1d86; }
        .course-2 .box .content .icons a i {
          padding-right: 0.5rem;
          color: #fa1d86; }

.course-3 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(31rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
  gap: 1.5rem; }
  .course-3 .box {
    text-align: center;
    overflow: hidden; }
    .course-3 .box:hover .video video {
      -webkit-transform: scale(1.1);
              transform: scale(1.1); }
    .course-3 .box .video {
      position: relative;
      height: 25rem;
      width: 100%;
      overflow: hidden;
      border-radius: 0.5rem; }
      .course-3 .box .video video {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        cursor: pointer; }
      .course-3 .box .video i {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        font-size: 2rem;
        height: 5rem;
        width: 5rem;
        line-height: 5rem;
        border-radius: 50%;
        background: #fff;
        color: #302851;
        pointer-events: none;
        z-index: 10; }
    .course-3 .box .content {
      padding-top: 1rem; }
      .course-3 .box .content h3 {
        font-size: 1.7rem;
        color: #302851;
        padding: 0.5rem 0; }
      .course-3 .box .content p {
        font-size: 1.5rem;
        color: #666; }

.main-video {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  width: 100%;
  display: none; }
  .main-video.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .main-video #close-vid {
    position: absolute;
    top: 1.5rem;
    right: 2.5rem;
    font-size: 4rem;
    color: #fff;
    cursor: pointer; }
  .main-video video {
    width: 80%;
    border: 0.5rem solid #fff;
    border-radius: 0.5rem; }

@media (max-width: 992px) {
  .main-video video {
    width: 95%;
    border-width: 0.2rem; } }