@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto:wght@400;700;900&display=swap');

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

.btnOutline {
    box-shadow: 1px 1px 5px #400d6b;
    background-color: #eb9e14;
    color: #400d6b;
    padding: 15px;
    border-radius: 100px;
    font-size: 18px;
    font-weight: bold;
    width: 220px;
    display: block;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
}

nav li a.nav-link {
    font-size: 18px;
}

.hero-wrap {
    font-family: Roboto;
    padding: 72px 0;     
    background: rgba(64,12,107,1) url("../img/bg-pattern.png") repeat;
    background: linear-gradient(61deg, rgba(64,12,107,1) 26%, rgb(117, 54, 168, 1) 69%, rgba(160, 85, 222, 1) 100%);
    /* color: #45a9ff; */
    color: #eff4f8;
    width: 100%;
    height: auto;
    margin: 0;
}
.hero-wrap-2 {
    font-family: Roboto;
    padding: 72px 0;
    background: rgba(64,12,107,1) url("../img/bg-pattern.png") repeat;
    color: #eff4f8;
    width: 100%;
    margin: 0;
    height: auto;
}

.hero-wrap h1 {
    font-size: 7em;
    font-weight: 700;
}

span.colored {
    color: #fdbf00;
}

.hero-wrap h1.colored { 
    color: #fdbf00;
    font-weight:900;
}
.hero-wrap span {
    display: block;
    font-size: 25px;
}

.hero-wrap p {
    font-size: 20px;
}

.hero-wrap .hero, .hero-wrap-2  {
    text-align: center;
}

.about-wrap, .features-wrap, .courses-wrap, .pricing-wrap, .testimonial-wrap, .footer-wrap { 
    padding: 65px 0;
    width: 100%;
    font-family: Roboto;
}

.features-wrap, .pricing-wrap { 
    background-color: #e8cdff;
}

.about-wrap h2,
.testimonial-wrap h2,
.pricing-wrap h2,
.courses-wrap h2 {
    font-family: Pacifico;
    font-size: 46px;
    text-align: center;
    padding-bottom: 25px;
}

 
.about-wrap img {
    border-radius: 20px;
    margin: 0 auto;
}

.about-wrap p,
.testimonial-wrap p, 
.pricing-wrap p  {
    text-align: center; 
    font-size: 20px;
}

.features-wrap p {
    text-align: center;
    padding: 28px;
}

.about-wrap .feature-header {
    padding: 25px 15px;
    width: 95%;
    margin: 0 auto;
}
.courses-wrap .course-header,
.testimonial-wrap .testimonial-header,
.pricing-wrap .pricing-header {
    padding: 25px 5px;
    width: 90%;
    margin: 0 auto;
}

.features-wrap .features { 
    background: rgba(64,12,107,1);
    background:linear-gradient(61deg, rgba(64,12,107,1) 26%, rgb(117, 54, 168, 1) 69%, rgba(160, 85, 222, 1) 100%);
    width: 95%;
    box-shadow: 1px 1px 5px #400d6b;
    padding: 20px 5px;
    border-radius: 10px;
    margin: 0 auto;
}

.features-wrap .features .iconTop,
.features-wrap .features .iconText,
.features-wrap .features p {
    text-align: center;
    color: #d1e9ff;
}

.features-wrap .features .iconText h3 {
    font-weight: bold;
    font-size: 25px;
    padding: 12px;
}

.features-wrap .features .iconText p { font-size: 15px; }

.courses-wrap {
    background: #fcfdfe url("../img/bg-pattern.png") repeat;
}

.courses-wrap .courses {
    font-family: Roboto;
    display: block;
    width: 90%;
    /* width: 70%; */
    box-shadow: 1px 1px 30px #d1e9ff;
    border-radius: 10px;
    padding: 35px;
    margin: 10px auto;
    /* color: #45a9ff; */
    border-left: 20px solid #400d6b;
    background-color: #fcfdfe;
}

.courses-wrap .courses h4 { font-weight: bold; font-size: 28px; }

.testimonial-wrap .testimonials {    
    font-family: Roboto;
    display: block;
    width: 90%;
    box-shadow: 1px 1px 30px #d1e9ff;
    border-radius: 10px;
    padding: 20px;
    margin: 10px auto; 
    border-right: 5px solid #400d6b; 
}

.testimonial-wrap .testimonials p {
    font-size: 16px;
}    

.testimonial-wrap .testimonials .test-img { width: 100%; border-radius: 0; border: none; margin: 0px;}
.testimonial-wrap .testimonials img {
    width: 100px;
    height: auto;
    border-radius: 100px;
    border-right: 10px solid #400d6b;
    margin: 10px auto;
    display: block;
}

.testimonial-wrap .testimonials .name-box {
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    padding-bottom: 0px;
}

.testimonial-wrap .testimonials .name-title { 
    text-align: center;
    font-size: 12px;
    font-weight: normal;
    margin-top: -20px;
}

.footer-wrap {
    text-align: center;
    background: rgba(64,12,107,1) url("../img/bg-pattern.png") repeat;
    color: #d1e9ff;
    display: block;
    padding: 20px 5px; 
}

header .regform {
    width: 85%;
    margin: 10px auto;
    padding: 30px 30px;
    background-color: rgba(1, 24, 74, .3);
    border-radius: 10px;
    text-align: left;
}

label {
    float: left;
    font-size: 16px; 
    padding-bottom: 10px; 
}


@media (max-width: 600px) {
    .hero-wrap h1 {
        font-size: 3em; 
    }

    header .regform {
        width: 320px;
        margin: 10px auto;
        padding: 0;
    }

    .pricing-header .btnOutline{
        width: 200px;
    }

}
@media (max-width: 300px) {
    .hero-wrap h1 {
        font-size: 2.2em; 
    }
    .btnOutline { width: 210px;}

    header .regform {
        width: 250px;
        margin: 10px auto;
    }
    .pricing-header .btnOutline{
        width: 250px;
    }

}

@media (max-width: 280px) {
    .hero-wrap h1 {
        font-size: 4em; 
    }
    .btnOutline { width: 200px;}

    header .regform {
        width: 200px;
        margin: 10px auto;
        padding: 10px auto;
        background-color: rgba(1, 24, 74, .3);
        border-radius: 10px;
        text-align: left;
    }
    .pricing-header .btnOutline{
        width: 200px;
    }
}