@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");
/* ===( CODE SHUBH )=== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}


body {
  font-family: "Mulish", sans-serif;
  width: 100vw;
  min-height: 100vh;
  font-size: 1.4rem;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

main {
  width: 100vw;
  min-height: 100vh;
}

nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 10;
  background: url("images/cover-bg.png") no-repeat;
  background-position: top;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav .container{
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 3rem 0;
}

nav .logo img {
  width: 12rem;
  scale: 1.1;
}

nav .logo {
  margin-right: auto;
}

nav a {
  font-weight: bold;
}

section.cover {
  background: url("images/cover-bg.png") no-repeat;
  background-size: cover;
  min-height: 100vh;
  width: 100vw;
  padding-top: 13rem;
}

.cover .container{
    position: relative;
}

.btn {
  padding: 1.4rem 2.6rem;
  border-radius: 3rem;
  font-weight: normal;
  font-size: 1.2rem;
  outline: none;
  border: none;
  color: #fff;
}

.btn-dark {
  background: #000;
}

.btn-circle{
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    outline: none;
    border: none;
    display: grid;
    place-content: center;
    font-size: 2.1rem;
    color: #fff;
}

.btn-yellow{
    background: #FEB143;
}

.intro {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.gradient-heading {
  font-size: 8rem;
  font-weight: 1000;
  background: linear-gradient(to right, #B545C9, #FEB143 68%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heading {
  font-size: 8rem;
  font-weight: 1000;
  color: #000;
}

.circle-images {
  display: flex;
}

.circle-image {
  height: 5.5rem;
  width: 5.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
}

.circle-image:nth-child(2) {
  transform: translateX(-30%);
}

.circle-image:nth-child(3) {
  transform: translateX(-70%);
  background: #fef4e4;
  display: grid;
  place-content: center;
  font-size: 2rem;
  color: #fdb757;
}

.circle-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.intro-detail{
    font-size: 1.8rem;
    width: 40%;
    min-width: 40rem;
    margin-block: 2rem;
    color: #323234;
    position: relative;
    line-height: 1.5;
}

.intro-detail .btn-circle{
    scale: 1.8;
    font-size: 2.3rem;
    position: absolute;
    right: -20%;
    top: 0;
}

.intro-footer{
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
}

.intro-footer-top{
    display: flex;
    gap: 2rem;
}

.intro-footer .share{
    display: flex;
    gap: 1rem;
}

.cover-image{
    position: absolute;
    width: 100%;
    max-width: 60rem;
    max-height: 40rem;
    right: 0;
    top: 60%;
    transform: translateY(-35%);
    overflow: hidden;
    border-radius: 1rem;
    border: 5px solid #ebdd97;
}

.cover-image img{
    width: 100%;
    object-fit: cover;
}

.show-mobile{
    display: none;
}

.cta{
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%);
    z-index: 2;
}

.cta p{
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.cta span{
    display: inline-block;
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.cta .download{
    min-width: 35rem;
    z-index: 10;
    position: relative;
    padding: 2rem;
    border-radius: 1rem;
    background: #000;
    color: #fff;
    border: 5px solid #fff;
}

.cta::before{
    content: "";
    background: url('images/pattern.png') no-repeat;
    position: absolute;
    width: 20rem;
    height: 10rem;
    left: -30%;
    top: -20%;
    background-size: contain;
    transform: rotate(315deg);
    z-index: -1;
    opacity: 0.8;
}

.cta-btn{
    display: flex;
    padding-right: 1rem;
    align-items: center;
    gap: 2rem;
    background: #fff;
    color: #000;
    font-size: 1.7rem;
    font-weight: 800;
    border-radius: 1rem;
    overflow: hidden;
}

.cta-btn .rating{
    height: 6rem;
    width: 7rem;
    background: #FEB143;
    display: grid;
    place-content: center;
    color: #fff;
    font-size: 2.2rem;
    position: relative;
}

.cta-btn .rating::before,.cta-btn .rating::after{
    content: "";
    position: absolute;
    height: 1.5rem;
    width: 1.5rem;
    transform: translate(50%, -50%);
    border-radius: 50%;
    background: #000;
}

.cta-btn .rating::before{
    top: 0;
    right: 0;
}

.cta-btn .rating::after{
    top: 100%;
    right: 0;
}

.cta-btn small{
    background: red;
    height: 5rem;
    width: 5rem;
    display: grid;
    place-content: center;
    background: #000;
    color: #fff;
    font-size: 2.5rem;
    border-radius: 0.5rem;
    margin-left: auto;
}

.about{
    padding: 6rem 0;
}

.about p{
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2rem;
}

.courses{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 8rem;
}

.course{
    background: #FCFAF8;
    height: 5rem;
    width: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.course img{
    width: 100%;
    object-fit: contain;
}

.section-heading{
    font-size: 3.6rem;
    font-weight: 900;
    position: relative;
    z-index: 2;
}

.about span{
    font-size: 1.2rem;
    display: block;
    margin: 1rem 0;
    line-height: 1.5;
    color: #323234;
}

.about a{
    margin-bottom: 4rem;
    display: inline-block;
}

.card-border{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 3rem;
}

.card-border .border{
    width: 100%;
    height: 0.15rem;
    background: rgba(0,0,0,0.1);
}

.card-border span, .card-border p{
    margin: 0;
}

.card-border p{
    margin: 1rem 0;
    font-size: 1.6rem;
}

.card-border span{
    line-height: 1.5;
}

.index{
    font-weight: 800;
}

.txt-purple{
    color: #a531f2 !important;
}

.txt-green{
    color: #22895b !important;
}

.txt-blue{
    color: #18bafa !important;
}

.txt-yellow{
    color: #eba57f !important;
}

.services{
    padding: 6rem 0;
    text-align: center;
    background: linear-gradient(to right, #a6d4eb, #d1a04b);
}

.services p{
    font-size: 1.3rem;
    color: rgba(0,0,0,0.5);
    font-weight: 700;
}

.services span{
    font-size: 1.2rem;
    display: block;
    width: 100ch;
    max-width: 90%;
    margin: auto;
    margin-block: 1rem;
    margin-bottom: 5rem;
}

.card-service{
    width: 100%;
    height: 25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 5rem;
    background: #fff;
    border-radius: 2rem;
    position: relative;
    margin-bottom: 5rem;
}

.card-service span{
    width: 100%;
    margin: 0;
    text-align: start;
    margin-block: 1rem;
}

.card-service p{
    font-size: 1.8rem;
    text-align: start;
    color: #000;
}

.card-service .icon{
    margin-bottom: 1rem;
}

.card-service .icon img{
    width: 5rem;
    object-fit: contain;
}

.card-service .arrow{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-content: center;
    font-size: 2rem;
    color: #6D31F2;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.05);
}

.clients{
    padding: 6rem 0;
}

.clients span{
    font-size: 1.2rem;
    color: #323234;
    width: 25ch;
    display: inline-block;
    margin-top: 1rem;
}

.awards{
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.award{
    width: 25%;
    height: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.award img{
    height: 8rem;
    object-fit: contain;
    max-width: 90%;
}

.swiper{
    width: 100%;
    margin-top: 5rem;
}

.swiper-wrapper{
    padding: 0 !important;
}

.swiper .swiper-slide{
    max-width: 100%;
    background: #fff;
}

.clients-swiper .swiper-slide .col-md-6{
    margin-block: 1rem;
    position: relative;
}

.clients-swiper .swiper-slide .col-md-6 img{
    width: 95%;
    object-fit: contain;
}

.clients-swiper p{
    font-size: 1.8rem;
    line-height: 1.7;
    width: 50ch;
    max-width: 90%;
    margin-top: 5rem;
}

.slide-icon{
    font-size: 15rem;
    position: absolute;
    top: -5rem;
    left: 0;
    z-index: -1;
    color: rgba(0,0,0,0.1);
}

.clients-swiper span{
    font-size: 1.6rem;
    font-weight: 600;
    display: block;
    margin-block: 2rem;
}

.clients-swiper a{
    font-weight: 600;
    color: #B545C9;
}

.swiper-pagination{
    display: flex;
    height: 5rem;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    width: 20rem !important; 
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
    transform: scale(1);
}

.swiper-pagination-bullet{
    height: 1.5rem !important;
    width: 1.5rem !important;
    border-radius: 50%;
    background: #fdb757;
}

.features{
    padding: 6rem 0;
}

.features span{
    font-size: 1.2rem;
    display: block;
    margin: 1rem 0;
    line-height: 1.5;
    color: #323234;
}

.feature-card{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 1rem;
    height: 10rem;
    gap: 2rem;
    transition: 0.3s ease;
    cursor: pointer;
}

.feature-card .feature-card-icon{
    height: 6rem;
    width: 6rem;
    border-radius: 50%;
    display: grid;
    place-content: center;
    font-size: 2.5rem;
}

.feature-card .feature-card-content{
    width: 70%;
    text-align: left;
}

.feature-card .feature-card-content p{
    font-size: 1.6rem;
    font-weight: 700;
}

.features .col-md-6{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
}

.feature-card:nth-child(1) .feature-card-icon{
    background: rgba(181, 69, 201, 0.2);
    color: #B545C9;
}

.feature-card:nth-child(2) .feature-card-icon{
    background: rgba(34, 137, 116, 0.2);
    color: #228974;
}

.feature-card:nth-child(3) .feature-card-icon{
    background: rgba(24, 134, 250, 0.2);
    color: #1886FA;
}

.feature-card:nth-child(4) .feature-card-icon{
    background: rgba(253, 183, 87, 0.2);
    color: #fdb757;
}

.feature-card:hover{
    box-shadow: 0.5rem 0.5rem 2rem rgba(0,0,0,0.1);
}

.features img{
    max-width: 90%;
    box-shadow: 0.5rem 0.5rem 5rem rgba(0,0,0,0.1);
    margin: 0 auto;
}

.features .section-heading{
    margin-top: 2rem;
}

.reports{
    padding: 6rem 0;
    background: linear-gradient(to right, #fff, #FFFBF4 30%);
    position: relative;
}

.reports::after{
    content: "";
    position: absolute;
    height: 50%;
    width: 50%;
    background: #FFF0DA;
    right: 0;
    top: 10%;
    border-radius: 1rem;
}

.reports p{
    font-size: 1.3rem;
    font-weight: 500;
}

.reports .swiper-slide{
    background: transparent;
}

.report-card{
    width: 90%;
    overflow: hidden;
    height: 20rem;
    border-radius: 1rem;
    background: #fff;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 1rem 1rem 0 #FFF0DA;
    margin-bottom: 2rem;
}

.report-card span{
    font-size: 1.4rem;
    width: 30ch;
    line-height: 1.6;
    max-width: 90%;
    color: #323234;
}

.report-card img{
    width: 10rem;
}

.report-card a{
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 1rem;
}

footer{
    padding-top: 20rem;
    position: relative;
    color: #fff;
}

footer a.btn{
    color: #000 !important;
    font-weight: 600 !important;
}

footer::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 60%;
    bottom: 0;
    left: 0;
    background: #000;
    z-index: -1;
}

.footer-card{
    width: 90%;
    height: 32rem;
    border-radius: 1rem;
    margin: 0 auto;
    text-align: center;
    background: url(images/footer.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    display: grid;
    place-content: center;
    margin-bottom: 6rem;
}

.footer-card-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.footer-card-content span{
    width: 50ch;
    max-width: 80%;
}

footer .logo img{
    width: 12rem;
    scale: 1.1;
    object-fit: contain;
}

footer .col-md-3{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

footer .col-md-3 span, footer .col-md-3 a{
    font-size: 1.2rem;
    color: rgba(255,255,255,0.6);
}

.copyright{
    border-top: 1px solid rgba(255,255,255,0.2);
    padding: 2rem 0;
}

.copyright .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255,255,255,0.6);
}

.copyright .container a{
    font-size: 2rem;
}

@media (max-width: 1400px){
    .cover-image{
        right: -5%
    }
}

@media (max-width: 1300px){
    .cover-image{
        right: -2%;
        max-width: 58rem;
    }
}

@media (max-width: 1200px){
    .cover-image{
        top: 72%;
        right: 0%;
        max-width: 50rem;
    }
    .intro{
        flex-wrap: wrap;
    }
    .gradient-heading,.heading{
        font-size: 6rem;
    }
    .intro-detail .btn-circle{
        top: -70%;
        right: -25%;
    }
}

@media (max-width: 992px){
    .intro{
        flex-wrap: wrap-reverse;
    }
    .cover-image{
        top: auto;
        left: auto;
        position: relative;
        margin-top: 18rem;
        max-width: 100%;
    }
    .cta{
        top: 80%;
    }
    .intro-detail{
        width: 100%;
    }
    .intro-detail .btn-circle{
        top: -150%;
        right: 30%;
    }
    .intro-footer{
        flex-direction: row;
    }
}

@media (max-width: 768px){
    html{
        font-size: 55%;
    }
    .intro-detail .btn-circle{
        display: none;
    }
    .intro-detail{
        min-width: 100%;
    }
    .about span{
        font-size: 1.4rem;
    }
    .services span{
        font-size: 1.4rem;
    }
    .features span{
        font-size: 1.4rem;
    }
    .feature-card{
        height: 14rem;
    }
}

@media (max-width: 575px){
    nav{
        padding-inline: 2rem !important;
    }
    nav .logo img{
        width: 10rem;
    }

    .heading,.gradient-heading{
        font-size: 5rem;
    }
    .cover-image{
        display: none;
    }
    .cta{
        display: none;
    }
    .btn{
        font-size: 1.4rem;
    }
    .intro-footer{
        flex-direction: column;
    }
    .show-mobile{
        display: inline-block;
    }
    section, footer .row, .copyright .container{
        padding-inline: 2rem !important;
    }
    .card-service{
        padding: 0 2rem;
        height: 18rem;
    }
}
/* ===( CODE SHUBH )=== */