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

html,body{
    background-color:#fff;
    color: black;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    font-family: roboto;
    font-weight: 300;
}

.header{
    background-color: #fff;
}

/**** NAVIGATION ****/
.main-nav{
    list-style: none;
    float: right;
    margin-top: 50px;
}

.main-nav li{
    display: inline-block;
    margin-right: 60px;
    text-transform: uppercase;
    font-weight: 400;
}

.main-nav li a:link,.main-nav li a:visited{
    text-decoration: none;
    color: #fff;
    -webkit-transition: border-bottom 0.2s;
    transition: border-bottom 0.2s;
}

.main-nav li a:hover,.main-nav li a:active{
    border-bottom: 3px solid #ed07b7;
}

.logo{
    height: 120px;
    width: auto;
    float: left;
    margin-left: 3%;
}

.sticky-nav{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 3px 6px #00000029;
    z-index: 999;
}

.sticky-nav .logo{
    height: 60px;
    margin-top: 3px;
}

.sticky-nav .main-nav{
    margin-top: 20px;
}

.sticky-nav .main-nav li a:link,.sticky-nav .main-nav li a:visited{
    color: #6F8B99;
    padding: 5px 0;
}


/* HEART IT OUT SECTION */

.heart-it-out-section{
    background-color: #fff;
    /* border-bottom-right-radius: 50%; */
} 

.heart-heading{
    width: 18%;
    text-align: center;
    margin-top: 13%;
    margin-left: 14%;
    font-size: 200%;
    color: #01818c;
    font-weight: 100;
}

.heart-para{
    width: 18%;
    margin-left: 14.2%;
    margin-top: 2%;
    text-align: center;
    letter-spacing: 3px;
    word-spacing: px;
    font-size: 130%;
    color: #383a3ab7;
    font-weight:lighter;
    
}

.person-image{
    margin-top: -10%;
    margin-left: 7%;
}

.elephant-image{
    text-align: right;
    margin-top: -9%;
    margin-left: 41%;
    background: transparent;
    width: 60%;
}

.heart-buttons{
    text-align: right;
    overflow: visible;
    margin-right: 35%;
    margin-top: -10%;
    border-radius: 1%;
    box-shadow: 4px 6px 8px #00000029;
    margin-left: 55%;
    width: 12%;
    padding: 1%;
    text-align: center;
}

.heart-buttons a{
    color: #02808b;
    text-decoration: none;
    font-size: 120%;
    width: 15%;
}

.heart-buttons2{
    text-align: right;
    overflow: visible;
    margin-right: 35%;
    margin-top: -8%;
    border-radius: 1%;
    box-shadow: 4px 6px 8px #00000029;
    margin-left: 55%;
    width: 12%;
    padding: 1%;
    text-align: center;
}

.heart-buttons2 a{
    color: #02808b;
    text-decoration: none;
    font-size: 120%;
    width: 15%;
}

.heart-it-out-section{
    height: 50vh;
}

.what-we-can-help-with-section{
    background-color: #AED5E8;
    margin-bottom: 5%;
    margin-top: 3%;
    height: 105vh;
    box-shadow: -4px -6px 15px #00000029;
    /* border-bottom-right-radius: 50%;*/
} 

.what-we-can-help-with-heading{
    text-align: center;
    font-size: 200%;
    color: #04547B;
    font-weight: 100;
    padding: 3%;
}

.circle{
    width: 50%;
    height: 90%;
    background: #FFFFFF ;
    border-radius: 50%;
    font-size: 250%;
    color: #6F8B99;
    font-weight: 100;
}

.circles{
    text-align: center;
}

.dot1 {
    margin-top: 5%;
    height: 45vh;
    width: 45vh;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5%;
    /* box-shadow: 6px 6px 20px #00000029;
     */animation: fade1 10s infinite;
    opacity: .6;
}

.dot2 {
    margin-top: 5%;
    height: 50vh;
    width: 50vh;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5%;
    box-shadow: 6px 6px 20px #00000029;
    animation: fade2 10s infinite;
}

.dot3 {
    margin-top: 5%;
    height: 45vh;
    width: 45vh;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5%;
    /* box-shadow: 6px 6px 20px #00000029;
     */animation: fade3 10s infinite;
    opacity: .6;
}

/* .dot2-animate {
    margin-top: 5%;
    height: 50vh;
    width: 50vh;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5%;
    box-shadow: 6px 6px 20px #00000029;
    animation: fade2 45s infinite;
}

.dot3-animate {
    margin-top: 5%;
    height: 50vh;
    width: 50vh;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5%;
    box-shadow: 6px 6px 20px #00000029;
    animation: fade3 8s infinite;
} */

.dot3:last-child{
      margin-right: 0;
}

.dot1-heading{
    margin-top: 12%;
    font-weight: 100;
    color: #6F8B99;
    margin-bottom: 5%;
}

.dot1-para{
    text-align: center;
    width: 70%;
    margin-left: 15%;
    margin-top: 10%;
    margin-bottom: 3%;
}

@keyframes fade1{
    0%{
        opacity: 1;
    }

    33.3%{
        opacity: 0.6;
    }

    66.6%{
        opacity: 0.6;
    }

    100%{
        opacity: 1;
    }
}

@keyframes fade2{
    0%{
        opacity: 0.6;
    }

    33.3%{
        opacity: 1;
    }

    66.6%{
        opacity: 0.6;
    }

    100%{
        opacity: 0.6;
    }
}

@keyframes fade3{
    0%{
        opacity: 0.6;
    }

    33.3%{
        opacity: 0.6;
    }

    66.6%{
        opacity: 1;
    }

    100%{
        opacity: 0.6;
    }
}


/* .learn-more{
    padding-top: 5%;
    font-size: 190%;
} */

.learn-more-para{
    font-size: 90%;
    color: #9C7777;
}

.learn-more {
    width: 0; 
    height: 0; 
    font-size: 5%;
    margin-left: 2%;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #9C7777;
}
  
.online-test-heading{
    text-align: center;
    padding-top: 3%;
    color: #04547B;
    font-weight: 100;
  }

.go-button{
    text-align: center;
    margin-top: 3%;
    border-radius: 20%;
    width: 3%;
    background-color: #E1EDF3;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    /* border-left: 30px solid #fff; */
    margin-left: 48.5%;
    color: #9C7777;
    box-shadow: 3px 6px 10px #00000029;
}

/* .go-button-span{
    text-align: center;
    width: 0; 
    height: 0; 
    font-size: 50%;
    background: transparent;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #fff;
    border-radius: 15px;
    overflow: auto;
} */

.go-para{
    text-align: center;
}

.testimonials{
    height: 30vh;
}

.testimonials-heading{
    text-align: center;
    font-size: 210%;
    color: #01818c;
    font-weight: 400;
}

#comment-box{
    width: 30%;
    letter-spacing: 1px;
}

.sudershan{
    color: #9C7777;
    font-size: 120%;
}

#comment-box {
	background-color: #FFFFFF;;
	position: relative;
	padding: 20px;
    text-align: c;
	box-shadow: 3px 6px 10px #00000029;
    border-radius: 13%;
    font-size: 140%;
    width: 40%;
    padding: 2%;
    margin-top: -25%;
    margin-left: 40%;
}

#comment-box::after {
	content: "";
	position: absolute;
	height: 45px;
	width: 45px;
	bottom: -25px;
	right: 90%;
	background-color: rgba(202, 199, 199, 0.699);
	clip-path: polygon(20% 30%, 100% 60%, 10% 70%);
    box-shadow: 3px 6px 10px #00000029;
}

.mic-img{
    width: 20%;
    margin-left: 15%;
    margin-top: 10%;
}

.testimonial-button-left{
    width: 0; 
    height: 0; 
    /* font-size: 50%;
     */margin-left: 2%;
    border-top: 30px solid #FFFFFF;
    border-bottom: 30px solid #fff;
    border-left: 30px solid #04547B;
    border-radius: 10%;
    margin-top: -200%;
}

/* Statistics section */

.statistics{
    background-color: #e4f2f88a;
    margin-top: 20%;
    height: 25vh;
    box-shadow: 0 3px 6px #00000029;
}

.statistics-row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    text-align: center;
    padding-top: 3%;
}

#value {
    padding-top: 3%;
    font-size: 50px;
    color: #036696;
    font-weight: 400;
    text-shadow: 0 3px 6px #00000029;
    margin-left: 10%;
}


#value2 {
    padding-top: 3%;
    font-size: 50px;
    color: #036696;
    font-weight: 400;
    text-shadow: 0 3px 6px #00000029;
    margin-left: 10%;
}

#value3 {
    padding-top: 3%;
    font-size: 50px;
    color: #036696;
    font-weight: 400;
    text-shadow: 0 3px 6px #00000029;
    margin-left: 10%;
}

#value4 {
    padding-top: 3%;
    font-size: 50px;
    color: #036696;
    font-weight: 400;
    text-shadow: 0 3px 6px #00000029;
    margin-left: 10%;
}

.statistics-caption{
    color: #036696;
    font-weight: 400;
    text-shadow: 0 3px 6px #00000029;
    margin-left: 10%;
}

/* FAQ SECTION */

.faq-section{
    height: 115vh;
    background-color: #e2f4fcd5;
    box-shadow: 3px 6px 10px #00000029;
}

.faq-heading{
    text-align: center;
    font-size: 210%;
    color: #01818c;
    font-weight: 400;
    padding-top: 5%;
    padding-bottom: 2%;
}

.faq-img{
    width: 20%;
    margin-right: 10%;
}

.faq-circle {
    margin-top: -2%;
    margin-left: 20%;
    height: 70vh;
    width: 70vh;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5%;
    box-shadow: 6px 6px 20px #00000029;
}

.faq-circle-heading{
    margin-top: 18%;
    font-weight: 100;
    font-size: 190%;
    color: #036696;
    margin-bottom: 5%;
    text-align: center;
}

.faq-circle-para{
    text-align: center;
    width: 70%;
    margin-left: 15%;
    margin-top: 10%;
    margin-bottom: 3%;
    color: #6F8B99;
    letter-spacing: 3px;
}

.faq-circle-para1{
    text-align: center;
    color: #9C7777;
}
.faq-question1{
    width: 30%;
    margin-top: -35%;
    margin-left: 60%;
    color: #383A3A;
    font-weight: 100;
    font-size: 220%;
}

.faq-question1::after{
    display: block;
    content: "";
    margin-top: 5%;
    width: 400px;
    height: 2px;
    background-color: #383a3a91;
}

.faq-question2{
    width: 30%;
    margin-left: 65%;
    margin-top: 3%;
    color: #383A3A;
    font-weight: 100;
    font-size: 220%;
}

.faq-question2::after{
    display: block;
    content: "";
    margin-top: 5%;
    width: 400px;
    height: 2px;
    background-color: #383a3a91;
}

.faq-question3{
    width: 30%;
    margin-left: 65%;
    margin-top: 3%;
    color: #383A3A;
    font-weight: 100;
    font-size: 220%;
}

.faq-question3::after{
    display: block;
    content: "";
    margin-top: 7%;
    width: 400px;
    height: 2px;
    background-color: #383a3a91;
}

.faq-question4{
    width: 30%;
    margin-left: 61%;
    margin-top: 3%;
    color: #383A3A;
    font-weight: 100;
    font-size: 220%;
}

.faq-question4::after{
    display: block;
    content: "";
    margin-top: 10%;
    width: 400px;
    height: 2px;
    background-color: #383a3a91;
}

/* UPCOMING EVENTS SECTION */
.l1-img{
    margin-top: 10%;
    margin-left: 33%;
}

.event-circle {
    /* margin-top: -19%; */
    margin-left: 20%;
    height: 50vh;
    width: 50vh;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5%;
    box-shadow: 6px 6px 20px #00000029;
}

.event-circle-heading{
    margin-top: 18%;
    font-weight: 100;
    font-size: 190%;
    color: #036696;
    margin-bottom: 5%;
    text-align: center;
}

.event-circle-para{
    text-align: center;
    width: 70%;
    margin-left: 15%;
    margin-top: 10%;
    margin-bottom: 3%;
    color: #6F8B99;
    letter-spacing: 3px;
}


.event-circle-para1{
    text-align: center;
    color: #036696;
    font-weight: 500;
}

.event1-circle {
    margin-left: 25%;
    margin-top: 5%;
    height: 52vh;
    width: 52vh;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5%;
    box-shadow: 6px 6px 20px #00000029;
}

.r1-img{
    /* margin-top: -50%; */
    margin-left: 25%;
    margin-top: 16%;
    width: 45%;
}

.vl{
    border-left: 3px solid #555;
    height: 100%; 
    width:1%;
    margin-left: 60%;
    overflow: auto;
}

.vl1{
    border-left: 5px solid #89C9E8;
    height: 100%; 
    width:1%;
    margin-left: 60%;
    overflow: auto;
}

/* NEWS SECTION */
.news-section{
    height: 130vh;
    background-color: #e4f2f88a;
}

.news-section-img{
    margin-left: 15%;
}

.news1{
    margin-top: -5%;
    background-color: #e2f4fcd5;
    width: 65%;
    margin-left: 20%;
    padding: 2%;
    padding-top: 6%;
    font-size: 150%;
    height: 90vh;
}

.news-para{
    margin-top: 3%;
    color: #343738;
}

.news1-row{
    display: grid;
    grid-template-columns: 2fr 5px 1fr;
}


.images3{
    margin-top: 5%;
    margin-left: 5%;
    margin-bottom: 3%;
} 

.images3-para{
    margin-left: 5%;
    font-size: 70%;
    margin-bottom: 3%;
}

.img-para{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 2%;
}

.img-para1{
    margin-left: -20%;
}

/* NEWS LETTER SECTION */
.news-letter-section{
    padding-top: 5%;
}

.news-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.first-fr{
    text-align: center;
    margin-top: 7%;
}

.subscribe-heading{
    margin-left: 30%;
    width: 40%;
    color: #036696;
    letter-spacing: .5px;
    font-weight: 400;
}

.form{
    font-size: 130%;
}

.sub-input{
    font-size: 20px;
    padding: 1%;
    border: none;
    border-radius: 10px;
    box-shadow: 3px 6px 10px #00000029;
}

.sub-btn{
    font-size: 20px;
    padding: 1%;
    border: none;
    color: white;
    background-color: #01818c;
    border-radius: 10px;
    box-shadow: 3px 6px 10px #00000029;
}

.news-img{
    margin-top: -10%;
    text-align: center;
}


/* EVENTS SECTION */
.events-row{
    display: grid;
    grid-template-columns: 1fr 5px 1fr;
}

/* FOOTER SECTION */
.footer-section{
    background-color: #023752;
    color: #AED5E8;
}
.footer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-color: #023752;
    color: #AED5E8;
    padding-left: 10%;
    padding-top: 5%;
}