styles*/
html {
scroll-behavior: smooth;
}
body {
overflow-x: hidden;
font-family: 'PT Sans', sans-serif;
font-size: 18px;
}
body.active {
overflow-y: hidden;
}
.container {
max-width: 1500px;
}
.container.sml {
max-width: 1300px;
}
.container-fluid {
max-width: 100%;
padding: 0;
}
.aos-animate {
z-index: 999;
}
.icon {
background: transparent;
}
a {
color: black;
}
.block ul li {
margin: 10px 0;
}
.heading-main {
font-size: 40px;
z-index: 99;
position: relative;
font-weight: bold;
}
.heading-mini {
font-size: 22px;
}
p {
font-size: 18px;
margin-bottom: 0px;
}
/* Header */
.header {
position: fixed;
padding: 10px 0px;
width: 100%;
top: 0;
left: 0;
/*background-color: #d0eaf9;*/
z-index: 9999;
transition: all .5s ease;
}
.header.stuck {
background-color: #65b0db;
top: 0;
left: 0;
width: 100%;
}
.header.stuck .nav-logo img {
max-height: 70px;
}
.header .nav-logo img {
max-height: 90px;
transition: all .5s ease;
}
.header .menu-hold {
height: 100%;
}
.header .menu {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin-bottom: 0;
padding-left: 0;
/*float: left;*/
}
.header .menu li {
position: relative;
/*display: inline-block;*/
list-style-type: none;
font-size: 20px;
font-weight: bold;
}
.header .menu li .sub-menu {
position: absolute;
top: 40px;
left: 0;
width: 250px;
padding: 20px;
background: white;
opacity: 0;
visibility: hidden;
margin-left: 0;
}
.header .menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.header .menu li .sub-menu li a {
color: black;
padding: 5px;
display: block;
}
.header .menu li .sub-menu li::after {
display: none;
}
.header .menu li a {
position: relative;
padding: 15px 30px;
list-style-type: none;
color: white;
}
.menu li a::before {
position: absolute;
content: "";
left: 50%;
transform: translate(-50%);
width: 100%;
height: 2px;
bottom: 0px;
/*background-color: #d9dc35;*/
transition: all 0.4s ease;
opacity: 0;
border: .5px dashed #d9dc35;
}
.menu li a:hover::before {
opacity: 1;
}
.menu li::after {
border: 1px dashed #d0eaf9;
content: "";
height: 0;
width: 40%;
align-self: flex-start;
display: inline;
}
.social-icons {
padding-left: 0;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0;
height: 100%;
width: 100%;
}
.social-icons li {
margin: 0px 10px;
list-style-type: none;
}
.social-icons li .fa {
font-size: 30px;
color: #F7F7F7;
}
.menu li a:hover,
.social-icons li a .fa:hover {
color: #d9dc35;
text-decoration: none;
transition: .4s ease;
}
/*Hero image*/
.hero {
/*background-image: url(../img/hero-shop.jpg);*/
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
background-size: cover;
background-position: center;
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
}
.hero.small {
height: 50vh;
}
.hero.small .hero-overlay {
color: white;
}
.hero-overlay {
position: absolute;
padding: 20px;
width: 100%;
top: 50%;
transform: translateY(-50%);
z-index: 999;
text-align: center;
}
.hero-overlay .hero-text {
color: #fafafa;
}
.learn-btn {
padding: 14px 40px;
background-color: #65b0db;
color: white;
}
.learn-btn:hover,
.learn-btn:hover {
background-color: #f5f296;
color: black;
transition: .4s ease;
}
.hero-text .heading-main {
font-size: 60px;
font-weight: bold;
}
.hero-text .heading-mini {
font-size: 35px;
margin-bottom: 20px;
font-weight: 600;
}
/*Home learn banner*/
.home-learn {
/*position: relative;*/
background-color: #d9dc35;
/*display: flex;*/
align-items: center;
text-align: center;
padding: 40px 0px;
}
.learn-text {
position: relative;
color: black;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.heading {
font-size: 42px;
line-height: 40px;
font-weight: bold;
}
.home-learn p {
margin-bottom: 0;
}
.learn-btn {
display: inline-block;
padding: 14px 80px;
border-radius: 40px;
/* color: black;*/
/* background-color: #F7F7F7;*/
font-size: 22px;
}
.button-hold .learn-btn:hover {
cursor: pointer;
background-color: #65b0db;
transition: .4s ease;
color: white;
}
.button-hold {
position: relative;
align-items: center;
justify-content: center;
height: 100%;
display: flex;
}
/*Home about*/
.home-about {
padding: 80px 0px;
}
.background-about {
background-color: #fafafa;
display: flex;
height: 100%;
position: relative;
}
.home-about .learn-btn {
background-color: #d0eaf9;
}
.info-hold {
position: relative;
display: flex;
align-items: center;
height: 100%;
padding: 10px 20px;
text-align: center;
}
.about-img {
width: 100%;
height: 100%;
min-height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
border-radius: 5px;
border: solid 2px #d0eaf9;
}
.square-icon {
position: absolute;
top: 0;
left: 0;
}
/*Home lesson blocks*/
.home-lessons {
background-color: white;
padding: 100px 0px;
text-align: center;
}
.home-lessons .heading-main {
text-align: center;
}
.block-banner-img {
position: relative;
height: 60px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 200px;
display: block;
border-radius: 50%;
}
.block-hold {
position: relative;
text-align: center;
margin: 20px;
display: flex;
justify-content: center;
}
.block-img {
position: relative;
height: 200px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 200px;
display: block;
border-radius: 50%;
}
.home-lessons h3 {
font-size: 36px;
}
/*.block-hold .panel {
position:absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #f5f296;
overflow: hidden;
height: 100%;
width: 100%;
transition: .5s ease;
opacity: 0;
border-radius: 50%;
}
.block-hold:hover .panel {
opacity: .4;
border-radius: 50%;
transition: .4s ease;
}
*/
.block-text {
position: relative;
text-align: center;
margin-top: 2px;
padding: 10px;
/*height: 100%;*/
}
/*Home banner image*/
.home-banner-img {
position: relative;
padding: 40px 0px;
color: black;
background-size: cover;
background-position: center;
z-index: 9;
overflow: hidden;
}
/*.home-banner-img::before {
content: "";
position: absolute;
top: 10%;
left: 10%;
width: 100%;
height: 300px;
background-image: url(../img/logo.png);
background-size: contain;
background-repeat: no-repeat;
background-position: left;
opacity: 0.7;
z-index: -1;
}*/
.banner-img-text {
text-align: center;
color: black;
}
.banner-img-text p,
.banner-img-text h2 {
margin-bottom: 0;
}
.home-lessons .learn-btn {
margin-top: 20px;
position: relative;
background-color: #d0eaf9;
}
.home-lessons .learn-btn:hover {
cursor: pointer;
background-color: #f5f296;
color: black;
transition: .4s ease;
}
/*Learning icons*/
.home-learning-icons {
padding: 120px 0px;
text-align: center;
background-color: #fafafa;
}
.home-learning-icons .heading-main {
margin-bottom: 40px;
}
/*.icon i {
font-size: 40px;
padding: 20px;
}
.icon-text p {
position: relative;
padding: 10px;
}*/
/*Available lessons*/
/*.blog-page {
background-color: #fafafa;
padding: 80px;
}
.blog-page .heading-main {
text-align: center;
padding-bottom: 20px;
}
.card-blog {
width: 100%;
background-color: white;
border-radius: 20px;
}
.card-hold-blog {
height: 300px;
width: 100%;
overflow: hidden;
}
.card-img {
height: 300px;
width: 100%;
background-size: cover;
background-position: center;
overflow: hidden;
transition: all .4s ease-in-out;
}
.card-text-blog {
padding: 20px;
color: black;
text-align: center;
}
.card-text-blog p{
min-height: 50px;
}
.card-text-blog a {
color: black;
}
.card-text-blog a:hover {
color: #65b0db;
cursor: pointer;
text-decoration: none;
transition: .4s ease;
}
.card-img:hover {
transform: scale(1.2);
cursor: pointer;
transition: .4s ease;
}*/
/*Testimonials*/
.review {
background-image: url(../img/pencils.jpg);
background-size: cover;
background-position: left;
padding: 100px 0px;
color: white;
position: relative;
}
.review::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
}
.review .heading-main {
text-align: center;
margin-bottom: 45px;
}
.testimonials p {
text-align: center;
font-size: 25px;
}
.testimonials span p {
color: #d9dc35;
font-size: 18px;
}
.slick-dots li button {
background-color: white;
border-radius: 10px;
}
.slick-dots li button:before {
color: white;
}
.slick-dots li.slick-active button:before {
color: #d9dc35;
opacity: .8;
background-color: #d9dc35;
border-radius: 10px;
}
.block {
padding: 80px 0px;
}
.block.two {
background-color: #F7F7F7;
}
.block.three {
background-color: #d0eaf9;
}
.text-body-hold {
height: 100%;
}
.image {
min-height: 250px;
width: 100%;
height: 100%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
position: relative;
}
.block .text-body-hold .sub-heading {
font-size: 30px;
}
.block .text-body-hold p {
/* font-size: 24px;*/
}
.block .text-body-hold .body-text {
/* font-size: 24px;*/
}
/*Contact Page*/
.contact {
padding: 120px 0px;
/*text-align: center;*/
background-color: #fafafa;
z-index: 9;
}
.contact .icon-hold {
text-align: center;
background-color: #65b0db;
border-radius: 50%;
height: 200px;
width: 200px;
position: relative;
justify-content: center;
transform: translateX(50%);
margin: 20px;
display: flex;
}
.contact .fa {
position: relative;
color: white;
font-size: 100px;
top: 20%;
left: 0;
text-align: center;
justify-content: center;
display: block;
}
.contact .heading-main,
.contact .body-text {
text-align: center;
}
.contact .body-text {
margin-bottom: 20px;
font-size: 25px;
}
.contact .icon-hold a:hover,
.contact .icon-hold .fa:hover {
color: #d9dc35;
text-decoration: none !important;
}
/*.contact .icon-hold .fa:hover {
color: red;
}
*/
textarea {
height: 150px;
}
.content .heading-main {
color: white;
}
.director {
padding: 40px 0px;
}
.director .contact-text {
font-size: 50px;
text-align: center;
}
.contact-img {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
border-radius: 20px;
height: 500px;
width: 100%;
}
.form .learn-btn {
margin-top: 5px;
}
.form .learn-btn:hover {
background-color: #d9dc35;
cursor: pointer;
}
.herobanner {
position: relative;
padding: 80px 0;
background-position: center;
background-size: cover;
z-index: 9;
}
.herobanner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -9;
/*background: #ee2e24;*/
background: rgba(0,0,0,0.5);
}
.form-control {
border-radius: 5px;
box-shadow: none;
margin: 10px 0;
background-color: #fafafa;
}
.form .btn {
display: block;
width: 100%;
}
.btn:not(:disabled):not(.disabled) {
background-color: #65b0db;
padding: 10px 30px;
}
/*Events-page*/
.hero.small.two {
height: 100vh;
background-position: left;
/*background-size: contain;*/
}
.events-intro {
padding: 80px;
background-color: #d9dc35;
text-align: center;
color: white;
font-size: 30px;
}
.events {
background-image: url(../img/xmas-events.jpg);
background-size: cover;
background-position: center;
padding: 40px 0px;
color: white;
position: relative;
text-align: center;
}
.events::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
}
.event-title {
font-size: 30px;
}
.event-dates ul li {
list-style-type: none;
}
.events .learn-btn:hover {
background-color: #d9dc35;
cursor: pointer;
}
/*News*/
.post {
border: 1px solid #f7f7f7;
padding: 20px;
text-align: center;
}
.post .post-image {
position: relative;
left: 50%;
transform: translateX(-50% );
height: 200px;
width: 200px;
border-radius: 50%;
background-position: center;
background-size: cover;
}
.post .title {
margin-top: 40px;
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.post .date {
margin-bottom: 20px;
}
p a {
font-weight: bold;
}
/*Footer*/
.footer {
background-color: #fafafa;
padding: 80px 0px;
/* z-index: -99;*/
}
.links .heading-main {
text-align: left;
font-size: 24px;
padding: 5px 10px;
background-color: #65b0db;
border-radius: 4px;
color: white;
}
.footer-img {
width: 100%;
height: 100%;
min-height: 100px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
margin-bottom: 10px;
}
.links li,
.links p
{
color: black;
list-style-type: none;
text-align: left;
font-size: 20px;
font-weight: bold;
padding: 4px;
}
.links a {
color: black;
}
.links a:hover {
text-decoration: none;
color: #d9dc35;
transition: .4s ease;
}
.footer-bottom {
background: #d9dc35;
padding: 30px 0;
color: white;
z-index: 9;
position: relative;
text-align: center;
}
.footer-bottom a {
color: white;
}
/*Responsive*/
@media (max-width: 1250px) {
.about-intro {
margin: 15px;
}
}
@media only screen and (min-width : 1200px) {
.menu-toggle {
display: none;
}
.dropdown-toggle {
display: none;
}
}
@media only screen and (max-width : 1200px) {
body.active {
overflow-y: hidden;
}
.header .menu-hold ul li::before {
display: none;
}
.menu-toggle {
position: absolute;
width: 40px;
height: 30px;
cursor: pointer;
display: inline-block;
vertical-align: top;
margin: 0;
appearance: none;
border: 0;
background: none;
overflow: visible;
z-index: 999999;
text-decoration: none;
top: 40%;
transform: translateY(-54%);
right: -63px;
}
.menu-toggle:focus {
outline: none;
}
.menu-toggle span {
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 2px;
background: #d9dc35;
}
.menu-toggle span:nth-of-type(1) {
transition: all 0.3s 0.3s, transform 0.3s 0s;
}
.menu-toggle span:nth-of-type(2) {
top: 50%;
margin-top: -1px;
left: 0;
transition: all 0.3s 0.3s;
}
.menu-toggle span:nth-of-type(3) {
bottom: 0;
top: auto;
left: 0;
transition: all 0.3s 0.3s, transform 0.3s 0s;
}
.menu-toggle.active {
transform: translateY(-50%), rotate(135deg);
transition: all 0.5s 0.3s;
}
.menu-toggle.active span:nth-of-type(1) {
top: 50%;
margin-top: -1px;
transform: rotate(90deg);
transition: all 0.3s, transform 0.3s 0.3s;
}
.menu-toggle.active span:nth-of-type(2) {
opacity: 0;
transition: all 0.3s, opacity 0.3s 0s;
}
.menu-toggle.active span:nth-of-type(3) {
bottom: 50%;
margin-bottom: -1px;
transform: rotate(0deg);
transition: all 0.3s, transform 0.3s 0.3s;
}
.header .menu-hold {
top: unset;
transform: unset;
height: 100%;
}
.header .menu-hold ul {
height: 100vh;
width: 100vw;
position: fixed;
z-index: 99999;
display: none;
left: 0;
top: 0;
background: #65b0db;
text-align: center;
padding-top: 100px;
overflow-y: scroll;
margin-left: 0;
padding-left: 0;
}
.header .menu-hold ul li {
display: block !important;
position: relative;
float: none;
height: unset;
padding: 0;
}
.header .menu-hold ul li a {
padding: 22px;
text-decoration: none;
font-size: 22px;
display: block;
transition: 0.3s;
border-left: none;
width: 75%;
margin: 0 auto;
color: white;
background: transparent;
border: none;
}
}
@media (max-width: 991px) {
.learn-text {
margin: 20px;
}
.card-blog {
margin: 20px 0px;
}
.background-about {
padding: 10px 0px;
}
}
@media (max-width:768px) {
.home-learn .button-hold .learn-btn {
margin: 10px;
}
.menu-toggle {
transform: translateY(-150%);
right: 20px;
}
}
@media (max-width: 481px) {
.hero-overlay {
margin-top: 20px;
}
.events-intro {
font-size: 20px;
}
}
@media (max-width: 365px) {
.card-text-blog h3 {
font-size: 20px;
}
}