body {margin: 0%; height: auto;}
html {scroll-behavior: smooth;}

/*Loading spinner styles*/
#spinnerCntnr {
    position: fixed; /* Ensures it covers the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Centers the spinner */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensures it's on top of other content */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out; /* For fade-out effect */
}

/* Example CSS for a simple spinning circle */
.spinner {
    border: 8px solid #f3f3f3; /* Light grey border */
    border-top: 8px solid #008080; /* Blue border for the spinning part */
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: spin 1s linear infinite; /* Animation for spinning */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Class to hide the spinnerCntnr */
.spinnerCntnr-hidden {
    opacity: 0;
    visibility: hidden;
}

/*This creates background for navigation and styles how
elements would appear on it*/

nav { background: #008080; display: flex; justify-content: space-between; 
    align-items: center; position: sticky; top: 0; z-index: 4;}
nav * { box-sizing: border-box; margin: 0; padding: 0; }
/*This styles the site logo*/
.siteName { height: fit-content; }

/*This styles the menulist horizontally on the background*/
nav .menulist { display: flex; list-style: none; }

nav .menulist li a { display: inline-block; padding: 15px; text-decoration: 
    none; text-transform: uppercase; font-family: verdana; color: white; font-size: 12px;}

nav .menulist li a:hover { background: black;}

.menulist i { display: inline-block; font-size: 25px; margin-right: 10px; text-decoration: none; padding-top: 7px; }
.fa-facebook {color:rgb(71, 248, 189); } 
.fa-facebook:hover{ color: rgb(124, 124, 253);}
.fa-instagram {color: rgb(247, 102, 203)}
.fa-instagram:hover{ color: rgb(247, 104, 152);}
.fa-whatsapp {color: white;}
.fa-whatsapp:hover{ color: wheat;}
.fa-envelope { color: white;}
.fa-envelope:hover{ color: rgb(252, 164, 91) !important; }
.fa-phone {color: white;}
.fa-phone:hover {color: red;}

/*Styles hamburger menu bars and × for close button*/ nav .bar {
    width: 25px; height: 3px; background-color: white; margin: 6px 0;}
nav .openHamburger  { display: none; font-size: 16px; margin-right: 3.5%; cursor: pointer;}
nav .closeHamburger { display: none; cursor: pointer; font-size: 40px; color: white;}

/*Styles the hamburger menu for mobile phone display */
@media(max-width: 1600px){ nav .menulist {
    height: 100vh; width:70%; position: fixed; top: 0; right: 0; left: 0; 
    z-index: 10; flex-direction: column; justify-content: center; 
    align-items: center; 
    /*Transparent background*/ background-color:rgb(31, 30, 30, 0.95); 
    transform: top 1s ease; display: none; }
    nav .closeHamburger { display: block; position: absolute; 
    top: 12.5px; right: 20px}
    nav .openHamburger { display: block; }
    nav .menulist li a {  color: white; font-size: 14px;}}

@media screen and (max-width: 600px) {nav .openHamburger { margin-right: 5%;}
.siteName { max-width: 230px; }
}

@media screen and (max-width: 400px) {nav {height: 75px; padding-top: 2px;}}

/*Onload page top CSS animation styles*/ 
/*Top slidein animation { animation: logoTranslate 1s;}
@keyframes logoTranslate { 
    0% {transform: translateY(-100%); opacity: 0;}
    25% {opacity: 0;}
    50% { opacity: 0.1;}
    75% {opacity: 0.5;} 
    100% {transform: translateY(0); opacity: 1;}} */

.rightSlideIn {animation: rightSlideIn1 1.5s;}
@keyframes rightSlideIn1 { 
    0% {transform: translateX(100%); opacity: 0;}
    25% {opacity: 0;}
    50% { opacity: 0.1;}
    75% {opacity: 0.5;} 
    100% {transform: translateX(0); opacity: 1;}
}

/*--- Date and Time Styles ---*/
.dateAndTime {display: flex; width: 350px; gap: 15px; padding:1%; font-size: 18px; font-family: arial; color:white; 
    padding:2%; margin: 0 auto; }

@media screen and (max-width: 600px) {.dateAndTime {  
    font-size: 14px; width: 220px;}}

@media screen and (min-width: 768px) {.dateAndTime {font-size: 18px; 
    }}
/* Date and time styles end here */

/*-- Greetings styles --*/
article .greetings { font-size: 30px; font-weight: bold; color: #008080 ; margin-left: 5%; 
    margin-right: 5%; background-color: white; animation-name: greetings; animation-duration: 15s; 
    animation-delay: 7.5s; animation-iteration-count: infinite;}
@keyframes greetings{ 
    40% {background-color: red; color: white;}
    to {background-color: white; color: #008080;}}

@media screen and (max-width: 600px) {article .greetings {font-size: 20px;}
}

/*--- UnderNav Styles ---*/
/* underNav intro headings start here */
.underNavHeader { background-image: url('../images/header-image2.jpg'); background-repeat: no-repeat; 
    background-size: cover; background-position-x: center; }
    
.underNavIntroHeadings { padding:25px; margin-left:5%; margin-right: 5%;}

.underNavIntroHeadings {color:#fff; font-weight: bold; 
    font-family: 'verdana'; text-align: center; }
.underNavIntroHeadings h1 {font-size: clamp(0.8rem, 5vw, 2.9rem); animation: translate 1s; opacity: 2.5s both; }
.underNavIntroHeadings h3 {color: white;}
@keyframes translate { 
        0% {transform: translateX(-100%); opacity: 0;}
        25% {opacity: 0;}
        50% { opacity: 0.1;}
        75% {opacity: 0.5;} 
        100% {transform: translateX(0); opacity: 1;}
    }
.underNavIntroHeadings h3 {font-size: clamp(0.8rem, 3.12vw, 1.15rem);}
.underNavIntroHeadings h3, .zoomInAnim {animation: transform 1s ease-in; }
@keyframes transform {
    0% {transform: scale(.7); opacity: 0; }
    25% {opacity: 0; }
    50% { opacity: 0.1;}
    75% {opacity: 0.5;}
    100% {transform: scale(1); opacity: 1;}
/* underNav intro headings end here */}

/*-- flairHome styles start here -- */
.flairHome { font-family: Helvetica; font-weight: bold; text-align: center; 
    color: #CFCABE; margin-top: 5px; margin-left: 5%; 
    margin-right: 5%; 
    /* Fade in animation */
    animation: fadeIn 7s;  
    /* Fade in animation code repeat for cross-browser compatibility*/
    -webkit-animation: fadeIn 7s; 
    -moz-animation: fadeIn 72s;
    -o-animation: fadeIn 7s;
    -ms-animation: fadeIn 7s;}

/*Fade in animation keyframes */
    @keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}}

@-webkit-keyframes fadeIn { 
    0% {opacity: 0;}
    100% {opacity: 1;}}

@-moz-keyframes fadeIn { 
    0% {opacity: 0;}
    100% {opacity: 1;}}

@-o-keyframes fadeIn { 
    0% {opacity: 0;}
    100% {opacity: 1;}}

@-ms-keyframes fadeIn { 
    0% {opacity: 0;}
    100% {opacity: 1;}}

/* For mobile phone screen display */
@media only screen and (max-width: 800px) {
    .flairHome { font-size: 18px; }
.flairHome {margin-left: 0px; margin-right: 0px;}}

@media only screen and (min-width: 786px) {
    .flairHome { font-size: 28px; margin-left: 0px; margin-right: 0px;}
/* flairHome styles end here */}

/*--Section animation--*/
.secAnime1 .animate {opacity: 0; transition: 1s; 
    filter: blur(5px); /* Blurs element when not in view */}
.secAnime1.show-animate .animate {opacity: 1; 
    filter: blur(0); /* Unblurs element when in view */}

.sec1 .animate {transform: translateX(-200%);}
.sec1.show-animate .animate {transform: translateX(0);}

.sec2 .animate {transform: translateY(200%);}
.sec2.show-animate .animate {transform: translateX(0);}

.sec3 .animate {transform: scale(.7);}
.sec3.show-animate .animate {transform: scale(1);}

.sec4 .animate {transform: translateX(200%);}
.sec4.show-animate .animate {transform: translateX(0);}

.sec5 .images img { 
    transform: translateX(-200%); transition-delay: calc(.1s * var(--i));}
.sec5.show-animate .images img {transform: translateX(0);}
.sec5 .animate {transform: translateY(200%);}
.sec5.show-animate .animate {transform: translateX(0);}
/*End of section animation*/

/*--- Digital Banner and info-Hompage Styles ---*/
.hmTwoClmn1 {background: #fff; padding: 2%;}
.hmTwoClmn1Row::after {content: ""; display: table;
    clear: both;}
.leftCol {float: left; width: 70%; padding: 2%; padding-bottom: 3%; background: #f0e7d9;}
.leftCol h2 {color: #13a7a7; font-size: clamp(1.8rem, 6.25vw, 2.5rem);}
.RightClmnBar {float: right; width: 28%; padding: 1% 2%; padding-bottom: 3%; background: #13a7a7;}

.RightClmnBar h3 {font-size: clamp(1rem, 6.25vw, 1.5rem); font-family: arial black; 
    text-align: center; color: #fff; }
.dgtlBnnr {max-width: 100%; height: auto;}

@media screen and (max-width: 768px) {.leftCol {width: 60%;}
.twoClmnRight {width: 32%;}
.leftCol p {font-size: 1rem;}
.RightClmnBar {width: 35%;}}

@media screen and (max-width: 600px) {.leftCol {display: block; width: 100%;}
.RightClmnBar {display: block; width: 100%;}}

/*--Start of digital world style--*/
.digitalWorld {display: flex; position: relative; justify-content: center;}
.digitalWorld::before {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
    width: 100%; height: 100%; background-color: #008080; opacity: 40%;}

.digitalWorld { background-image: url('../images/AWT-digital-world.jpg'); 
    background-repeat: no-repeat; background-size: cover; background-position-x: center; 
    min-height: 80vh; margin: 0;}
    
.digtlWrldCntnt{position: absolute; margin-left: 3%; margin-right: 3%; }

.digtlWrldCntnt h1 {font-family: arial black; font-size: 2rem; color: white; text-align: center; }
.digtlWrldCntnt p {color: white; text-align: center;}

@media screen and (max-width: 600px) {.digtlWrldCntnt{margin-left: 5%; 
    margin-right: 5%;}
    .digtlWrldCntnt h1 {font-size: 1.2rem;}
    .digtlWrldCntnt p {font-size: 1.2rem !important;}
/* End of digital world style */}


/*--General left and right margins--*/
.generalMargins {margin-left: 10%; margin-right: 10%;}
@media only screen and (max-width: 800px) {.generalMargins {margin-left: 5%; margin-right: 5%;}}
/*General margin end here*/

/*Homepage article styles*/
.hmpageArticle {background-color: white; padding-top: 50px; padding-bottom: 50px;}
.artclBackground {background-color: #d9bc8b; margin-left: 10%; margin-right: 10%; 
    padding-top: 0px; padding-bottom: 38px;}
.artclContent {margin-left: 10%; margin-right: 10%;}
.hmpageArticle h1 {background-color: #13a7a7; font-size: 30px; color: white; 
    text-align: center; padding: 10px;}
.hmpageArticle img {max-width: 100%; height: 45%;}
.artclContent p {font-size: 25px; color:#444; font-family: arial; text-align: justify;}
.hmpageArticle button {cursor: pointer; background: #008080; border: 0; font-size: 25px;
    color: white; padding: 10px; text-align: center; margin: 0 auto; }

@media only screen and (max-width: 600px) { .hmpageArticle {padding-top: 20px; padding-bottom: 20px;}
.artclBackground { margin-left: 5%; margin-right: 5%; padding-top: 0px; padding-bottom: 20px;}
.artclContent p {font-size: 16px;}
.artclContent {margin-left: 5%; margin-right: 5%;}
.hmpageArticle img {max-width: 100%;}
.hmpageArticle h1 {font-size: 22px; padding: 5px !important;}
.hmpageArticle button { width: 100%; font-size: 20px; padding: 7px; }}

@media only screen and (min-width: 768px) {.artclContent p {font-size: 18px;}
.artclContent {margin-left: 5%; margin-right: 5%;}
.hmpageArticle h1 {font-size: 28px;}}

@media only screen and (min-width: 1024px) {.artclContent p {font-size: 25px;}
.hmpageArticle h1 {font-size: 38px;}}

/*HomeSection1 Styles*/
.homeSection1 {background-color: #CFCABE; padding-top: 20px; padding-bottom: 50px;}
.hmSection1Margin {margin-left: 10%; margin-right: 10%;}
 .imgTextContainer {display: flex;}
.homeSection1 h1 {color:#13a7a7; font-size: 33px;}
 .scaleDown {max-width: 50%; height:45%; margin-right: 20px;}
 .imageText, p {color: #444; font-family: arial; font-size: 25px; text-align: justify; }
 .blockLevel {display: block; }

@media only screen and (max-width: 600px) {.homeSection1 { padding-bottom: 20px;}
.hmSection1Margin {margin-left: 5%; margin-right: 5%;}
.imgTextContainer {display: block;}
.homeSection1 h1 {font-size: 21px !important;}
 .scaleDown {max-width: 100%;}
 .imageText, p {display:block; font-size: 16px !important; margin-top: 15px !important; }}

@media only screen and (min-width: 800px) {.homeSection1 .imgTextContainer {display: block;}
.homeSection1 h1 {font-size: 28px;}
.homeSection1 .scaleDown {max-width: 100%;}
.homeSection1 .imageText, p {display:block; font-size: 20px; margin-top: 15px !important;}}

@media only screen and (min-width: 1024px) {.homeSection1 .imgTextContainer {display: flex;}
.homeSection1 .scaleDown {max-width: 50%; height:45%;}
.homeSection1 h1 {font-size: 33px;}
.homeSection1 .imageText, p {font-size: 25px;}}

/*--Fund raising post styles start here--*/
.fundRaisingPostBackground {background-color: rgb(224, 214, 197); padding-top: 20px; 
    padding-bottom: 20px; }
.fundRaisingContent h1 {font-size: 45px; color: #008080; font-family: Arial black;}
.fundRaisingContent p {font-size: 25px; font-family: arial; color: #444;}
.fundRaisingContent #fndrsngFrmBtn { font-size: 25px; color: #008080; background-color: white; 
    padding: 5px; padding-left: 15px; padding-right: 15px; border: none; cursor: pointer; 
    border-radius: 5px;} 

    @media only screen and (max-width: 800px) {.fundRaisingContent p {font-size: 16px;}
    .fundRaisingContent h1 {font-size: 23px;}
    .fundRaisingContent #fndrsngFrmBtn { font-size: 16px; }}
/*--Fund raising post styles end here--*/

/*-- Photo gallery styles --*/ 

.gllry1 { background-color: white;  padding-bottom: 20px;
    justify-content: center; align-items: center; text-align: center;}

.gllry1CntntArea {margin: 0 7%; }

.gllry1HdngCntner {display: flex; justify-content: center; 
    align-items: center; text-align: center; }

.gllryHdng h1 {font-size: clamp(0.5rem, 5vw, 3rem); font-weight: bolder; color: #13a7a7;
    border-bottom: solid #13a7a7; padding-bottom: 10px; max-width: 100%; }
.gllryHdng h1 span {font-weight: 100;}

.gllry1ImgCntnr {width: 100%;  
    display: flex; align-items: center; 
    justify-content: center; padding: 20px 0;}

.gallery1 {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    grid-gap: 30px;}

.gallery1 img {width: 100%; border-radius: 5px;}

@media screen and (max-width: 470px) {
    .gallery1 {grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-gap: 15px;}
    .gllryHdng h1 {width: 100%; font-size: 1.2rem;}
}
/* Photo gallery styles end here */ 

/*-- Happy Holidays styles start here --*/
.happyHolidays { background-color: red; max-width: 100%; 
    padding-top: 50px; padding-bottom: 50px;}
.happyHolidays img { border-radius: 10px; width: 55%;}
.happyHolidays p {font-size: 35px; font-family: arial; color: white; }

@media screen and (max-width: 800px) {
.happyHolidays { max-width: 100%; padding-top: 40px; padding-bottom: 20px !important;}
.happyHolidays img {width: 100% !important;}
.happyHolidays p {font-size: 25px;}
/* Happy Holiday styles end here */}

/*LearnTocode styles start here*/
.learnToCode {background-color: rgb(233, 231, 231); padding-top: 20px; padding-bottom: 50px; }
.learnToCode h1 { background-color: burlywood; padding: 5px; border-radius: 10px; color: white;
    font-size: 33px !important; text-align: center !important; font-family: arial black;}
.learnToCode img { border-radius: 15px;}
.learnToCode p {font-size: 25px; font-family: arial; color: #444; }

@media screen and (max-width: 800px) {
.learnToCode {padding-top: 15px; padding-bottom: 20px; }
.learnToCode h1 { font-size: 20px !important; }
.learnToCode p { font-size: 16px;}
/* Learn to code styles end here */}

/* Learn to code apply button style */
.getStartedButton {font-size: 20px; font-weight: bold; color: white; background-color: #d9bc8b; 
    padding: 5px; padding-left: 15px; padding-right: 15px; border: none; cursor: pointer; 
    border-radius: 5px; }

/* Learn to code1 from us styles start here */
.learnToCode1 {background-color: white; max-width:100%; padding-top: 50px; padding-bottom: 50px;}
.learnToCode1 h1 { background-color: rgb(121, 118, 115); border-radius: 10px; font-family: verdana; 
    color: white;}
.learnToCode1 img { border-radius: 15px;}
.learnToCode1 p {font-family: arial; color: #444; margin-top: 20px;}
/* Floats the columns side by side */ .learnToCode1 .postColumn {float: left;}
/* Removes extra left and right margins created by paddding */ .learnToCode1 .postRow {margin: 0 -5px;}
/* Clears floats after the columns */ .postRow:after {content: ""; display: table; clear: both;}

@media screen and (max-width: 600px) {
.learnToCode1 .postColumn { width: 100%; padding-bottom: 5px; }
.learnToCode1 h1 { font-size: 20px;}
.learnToCode1 img {max-width: 100% !important;}
.learnToCode1 p {font-size: 16px;}
}
@media screen and (min-width: 768px) { .learnToCode1 .postColumn {float: left; width: 50%; 
    padding-right: 30px;}
    .learnToCode1 img {max-width: 100% !important;}
    .learnToCode1 p {font-size: 18px;}
}
@media screen and (min-width: 1024px) { 
    .learnToCode1 .postColumn {width: 50%; padding-right: 40px !important; }
    .learnToCode1 img {max-width: auto !important; }
    .learnToCode1 p {font-size: 25px;}
/* LearnToCode1 styles end here */}

/* About us page content styles code start here*/
.aboutUs { background-color: #c5c9c9; padding: 15px 0;}
.aboutUs h2 { font-family: arial; color:#008080; }
.aboutUs p {color:#444; text-align: justify; font-family: arial;}
.aboutUsSec2 {background: whitesmoke; padding: 10px 0;}
.aboutUsCntnt {margin-left: 3%; margin-right: 3%;}
/* About us page styles end here */

/* Products and Services styles start here */   
.pAndSBckgrnd {background: #f1f1e9; padding-top: 10px; 
    padding-bottom: 30px;}

.pAndSMargin {margin-left: 3%; margin-right: 3%;}
.pAndSGridCntnr {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    grid-gap: 40px;}

.pAndSColumn {background: #fff; box-shadow: 0 4px 8px 0 rgba(59, 59, 59, 0.904); 
    border-radius: 10px;}
.pAndSCardMrgn {padding: 15px; }
.pAndSColumn img {max-width: 100%;}
.pAndSColumn h3 {text-align: center;}
.pAndSColumn p {font-size: 1rem; text-align: left;}
.pAndSUl li {padding-bottom: 5px; font-size: 1rem; font-family: arial;}
.pAndSColumn a {text-decoration: none;}
.pAndSColumn button {display: block; margin: 0 auto;}


/* Products and services styles end here */

/*-- Courses Application styles --*/
.applctnPgBckgnd { background-image: url('../images/background.jpg'); background-repeat: no-repeat; 
    background-size: cover; background-position-x: center; padding-top: 10px; padding-bottom: 30px;}

.applctnPgCntntMargin { margin-left: 10%; margin-right: 10%;}
.applctnPgCntntMargin h1 {font-size: 39px; color: white;}
.applctnPgCntntMargin p {font-size: 20px; font-family: arial; color: white;}
.applctnPgCntntMargin button {font-size: 18px; color: white; border-radius: 5px; border:none;
    padding: 10px; background:#e9780e; text-transform: uppercase; font-weight: 500; 
    letter-spacing: 2px; cursor: pointer;}

@media screen and (max-width: 600px) {.applctnPgCntntMargin {margin-left:5%; margin-right: 5%;}
.applctnPgCntntMargin h1 {font-size: 25px;}
.applctnPgCntntMargin img {width: 100% !important;}
.applctnPgCntntMargin p {font-size: 16px;}
.applctnPgCntntMargin button { font-size: 14px; padding: 7px;}}

/*Start of two column layout*/
.twoClmnLayout {background:white; padding: 30px 0;}
/*Clear float when screen size change*/ .twoClmn1Row::after {content: ""; display: table;
     clear: both;}
.twoClmnLeft {float: left; width: 75%;}
.leftContCard {background: lightseagreen; margin: 0 5%;}
.leftCont {padding: 2rem;}
.twoClmnLeft h2 {font-size: clamp(2rem, 5vw, 2.9rem); color: white;}
.twoClmnLeft h3 {color: rgb(226, 222, 222); font-size: clamp(1.4rem, 3vw, 2rem);}
.twoClmnLeft li {color: white; font-size: clamp(1rem, 2vw, 1.3rem); font-family: arial black;}
.blogUl li {color: #444; font-family: arial; font-size: 25px;}
.twoClmnRightTop {font-size: 1rem; color: lightseagreen;}
.twoClmnRight {float: left; width: 23%;}
.rightClmnCardBckgrnd {background: rgb(248, 246, 246); padding: 1rem; margin-bottom: 5%;}
.rightClmnCard { background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3); 
    border-radius: 10px; margin: 5%;}
.rghtCrdCont {padding: 16px; text-align: center; }
.twoClmnRight p {font-size: 1rem; text-align: left;}
.moreCourse {margin-left: 5%; padding-top: 5%;}

@media screen and (max-width: 768px) {.twoClmnLeft {width: 65%;}
.twoClmnRight {width: 32%;}
.twoClmnLeft p {font-size: 1rem;}}

@media only screen and (max-width: 600px) {.twoClmnLeft {float: none; width: 100%;}
.leftCont {padding: 0.5rem;}
.twoClmnLeft h2 {font-size: 1.5rem;}
.twoClmnLeft li {font-size: 1rem; padding-top: 3%;}
.twoClmnRightTop {margin-left: 5%; font-size: 14px;}
.twoClmnRight {float: none; width: 100%;}
.rightClmnCardBckgrnd {margin-left: 5%; margin-right: 5%;}
.rightClmnCard {margin: 2%;}
/*End of two column layout*/}

/*-- Course card styles --*/
* {box-sizing: border-box;  }
.courseApplctnPage {background: #f0e7d9; padding: 0.5% 5%; text-align: center; }
.courseApplctnPage h1 {font-size: clamp(1.5rem, 5vw, 2.9rem);}
.courseApplctnPage h3 {font-size: clamp(1rem, 2vw, 1.5rem);}
.courseApplctnPage h1, h3 {color: #13a7a7;}
.courseCardBckgrnd {background-color: wheat; padding-top: 20px; padding-bottom: 20px;}
/* Creates left and right margins for the cards */ .courseCardMargin {margin: 0 10%;}
.courseCardMargin h1 {font-size: 40px; color: #008080;}
.courseCardMargin p {font-size: 20px; font-family: arial;}
/* Floats the columns side by side */ .courseCardColumn {float: left; width: 25%; 
    padding: 10px; }
/* Removes extra left and right margins created by paddding */ .courseCardRow {margin: 0 -5px;}
/* Clears floats after the columns */ .courseCardRow:after {content: ""; display: table; 
    clear: both;}
/* creates shadows effect for the cards */ .courseCard { background-color: white; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3); padding: 16px; text-align: center; 
    border-radius: 10px; }
.courseCard h3 {font-size: 28px; color: #008080;}
.courseCard p {font-size: 16px; font-family: arial; text-align: left;}
.courseCard button {font-size: 18px; color: white; border-radius: 5px; border:none;
    padding: 10px; background:#008080; letter-spacing: 2px; cursor: pointer;}
/* Makes the columns responsive on mobile phone screen */ @media screen and (max-width: 600px) {
.courseCardMargin {margin-left: 5%; margin-right: 5%;}
.courseCardMargin p {font-size: 16px; font-family: arial;}
.courseCardColumn {width: 100%; display: block; margin-bottom: 30px; }
.courseCard p {font-size: 16px; }
.courseCard button { font-size: 14px; padding: 7px;}
.courseCardMargin h1 {font-size: 25px;}}

@media screen and (min-width: 768px) {
    .courseCardMargin {margin-left: 5%; margin-right: 5%;}
    .courseCardColumn {width: 45% !important; margin-right: 25px;}}

@media screen and (min-width: 1024px) {
    .courseCardMargin {margin: 0 5%;}
    .courseCardColumn {float: left !important; width: 30% !important; margin-right:2%;}}

/* Contact form styles starts here*/
.formOneDisplay { display: grid; place-items: center;}
.formOne {/* This creates background for the form.formOne */
    background-image: url('../images/background.jpg'); background-repeat: no-repeat; 
    background-size: cover; background-position-x: center; padding-top: 10px; padding-bottom: 30px; 
    border-radius: 15px; padding: 25px; margin: 50px 25%;}

.textParagraph { font-size: clamp(1rem, 2.25vw, 1.5rem);
    color: #444; text-align: justify !important;}
.textParagraph a {margin-left: 15px; }

.bigIcons {background: rgb(60, 238, 60); padding: 1% 3%; border-radius: 5px; 
    margin-right: 2%; font-size: 2rem;}

.formOne form {width: 300px;}
.formOne .formOneAppText { font-size: 32px; color:wheat; text-align: justify; }
.formOne input, .formOne textarea { border: none; width: 100%; border-radius: 5px; 
    margin-top: 10px; outline: none; font-size: 16px;}
.formOne label {font-family: arial; color: white; font-size: 20px;}
.formOne input { height: 40px; font-family: tahoma; text-indent: 5px;}
.formOne input[type='radio'] {width: 20px; height: 20px; }
/*.formOne ::placeholder {padding: 5px;}*/
.formOne textarea {height: 180px; font-family: tahoma; padding-top: 12px;}
.formOne .required:before { content: '*'; color: #e9780e; font-weight: bold; 
    font-size: 25px; padding: 5px;}
.formOne button { display: block; text-align: center; padding: 10px; background:#e9780e; 
    text-transform: uppercase; letter-spacing: 2px; margin: 0 auto; border: none; color: white; 
    font-size: 18px; cursor: pointer; width: 100%; border-radius: 5px; height: 40px;}
.formOne button:hover {background-color: rgb(18, 219, 233);}
.formOne input, .formOne textarea, .formOne button { box-sizing: border-box;}
.formOne select, option { font-size: 16px; font-family: tahoma; padding: 5px !important;}

@media only screen and (max-width: 800px) { 
.formOne {max-width: 100%; margin-left: 2%; margin-right: 2%;}
.formOne h2 {font-size: 25px;}
.textParagraph {text-align: left !important; }
.formOne .formOneAppText { font-size: 25px !important; color:wheat !important; 
    text-align:left !important; }
.formOne form {width: 85%; align-items: center !important;}
.formOne input {margin-left: 0; margin-right: 0;}
.formOne input[type='radio'] {width: 7%; height: 20px; margin-right: 5px; }
.formOne textarea {margin-left: 0; margin-right: 0;}
/* form.formOne styles end here */}

/*--Message sent feedback page styles--*/
.mssgSentFeedback { background-color: #13a7a7;}

.popupCntnr {width: 100%; height: 100vh; display: flex; align-items: center; 
    justify-content: center ;}

.feedbackPopup {width: min(400px, 80%) /* 400px width for desktop screen, 
    and 80% for mobile phone screen */; background: white; border-radius: 6px; 
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%) scale(0.1); 
    text-align: center; padding: 30px 25px; visibility: hidden; 
    transition: transform 0.8s, top 0.8s; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);}

.show-popup {visibility: visible;  top: 60%; transform: translate(-50%, -50%) scale(1);}
.feedbackPopup h2 {font-size: 30px; font-weight: 500; margin: 30px 0 10px; color: #008080;}
.feedbackPopup p {font-size: 20px; text-align: center; color: #333;}

@media screen and (max-width: 600px) {.mssgSentFeedback .show-popup {top: 50%;}
/*Message sent feedback page styles end here*/}

/*--Form3 styles--*/
.form3Display {display: flex; justify-content: center; align-items: center;}
.form3 { background-image: url('../images/background.jpg'); background-repeat: no-repeat; 
    background-size: cover; background-position-x: center; border-radius: 10px; 
    outline: 5px solid #fff; }

.form3 { width: min(600px, 95%); padding: 20px; margin: 0% auto;}
.form3 h1 {color:#fff; text-align: center; font-size: clamp(1.3rem, 5vw, 1.8rem);}
.form3AppPTxt {font-size: 22px !important; font-weight: bold; color: #f0e7d9; text-align: left;}

.form3 label { font-size: 18px; color: #fff; }
.form3 label, input, textarea { font-family: tahoma;}
.form3 input {width: 100%; color: #333; border:none; outline: none; background: transparent;  
    border-bottom: 1px solid #fff; padding: 8px 0; font-size: 1rem;}
.form3 ::placeholder {color: #444;}
.form3 .astrk { color: #f89a42 !important; font-weight: bold; font-size: 18px; 
    padding: 5px;}
.form3 .error {color: #f89a42; font-size: 16px; font-weight: bold; padding-top: 5px; 
    padding-bottom: 5px; }
.form3 textarea {width: 100%; height: 180px; font-family: tahoma; padding: 10px;
    border: none; border-radius: 5px; margin-top: 10px; outline: none; font-size: 16px;} 

.form3 button {background:#e9780e; 
    text-transform: uppercase; letter-spacing: 2px; margin: 0 auto; border: none; color: white; 
    font-size: 18px; cursor: pointer; width: 100%; height: 40px;; 
 cursor: pointer;}
.form3 button:hover {background: #f89a42;}

/* scnd2-column styles */
.scnd2-Colmn {padding: 0; display: grid;}
.scnd2-ColmnRow::after {content: ""; display: table;
    clear: both;}
.scnd2-Colmn .frstColmn p {font-size: 1.5rem; text-align: left;}
.scnd2-Colmn .frstColmn {width: 45%; float: left; padding: 3% 5%; }
.scnd2-Colmn .scndColmn {width: 55%; float: right; padding: 3%;}

@media screen and (max-width: 768px) {.scnd2-Colmn p {font-size: 1rem !important;}}
@media screen and (max-width: 600px) {.scnd2-Colmn .frstColmn {display: block; width: 100%;}
.scnd2-Colmn .scndColmn { width: 100%;}}
/*End of scnd2-column styles*/

/*HomeCard styles*/
* {box-sizing: border-box;  }
.homeCard2Background { background-color: white; 
    animation-name: changingBackgrounds; /*animation-name creates for the background-color*/
    animation-duration: 5s; /*Specifies how long animation takes to complete*/ 
    animation-delay: 3s; /*Defines a wait time before animation starts*/ 
    animation-timing-function: ease-in; 
    animation-iteration-count: infinite; /*Defines endless repetition for the animation*/
    padding-top: 20px; padding-bottom: 20px;}
@keyframes changingBackgrounds /*Defines styles the element changes to at given times*/{ 
    25% {background-color: rgb(206, 197, 166); }
    50% {background-color: rgb(252, 223, 191); }
    100% {background-color: rgba(218, 216, 216, 0.904); }}

/*homeCard2 styles*/
.homeCard2Background {background-color: rgb(234, 235, 216); padding-top: 50px; 
    padding-bottom: 30px;}
.homeCard2Background .homeCard2Margin {margin-left: 5%; margin-right: 5%;}
.homeCard2Background h1 {color: #008080; font-size: clamp(0.5rem, 5vw, 2.9rem) /*The clamp function 
    contains smallest font-side for mobile phone from the left*/;}
.homeCard2Background h2 {color:#13a7a7; text-align: center; font-size: clamp(1rem, 6.25vw, 1.3rem);}
.homeCard2Background p {font-size: 16px;}
.homeCard2-GridCntnr {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    grid-gap: 40px; }
.homeCard2-Cntnt {background: transparent; outline: solid 5px white; box-shadow: 0 4px 8px 0 rgba(59, 59, 59, 0.904);}
.homeCard2-Cntnt-Margin {padding: 0 20px 20px;}
.homeCard2-Cntnt img {max-width: 100%; height: auto; }
.homeCard2Date {font-size: 12px; letter-spacing: 1px; font-family: arial;}
.homeCard2Background a {text-decoration: none; }
.homeCard2Background .homeCard2Btn {display: block; letter-spacing: 2px; background: #f0a00c; 
    width: 40%; padding: 8px; margin: 0 auto; border: none; font-size: 18px; cursor: pointer;}
.homeCard2-Cntnt li {font-family: arial; font-size: 18px; padding-top: 7px;}

@media screen and (max-width: 600px) {.homeCard2Btn {width: 60% !important;}
.homeCard2-GridCntnr {grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));}}
/*HomeCard2 styles end*/

/*HomeCard1 styles*/
* {box-sizing: border-box;  }
.hmpgCard1Background { background-color: #5a9e9e; padding-top: 20px; padding-bottom: 50px;}
.cardContentArea {margin-left: 7%; margin-right: 7%;}
.hmpgCard1Background h1  {font-size: clamp(0.5rem, 5vw, 2rem); color: white; background-color: #d9bc8b; 
    font-family: arial black; text-align: center; padding: 10px;}

.homeCard1-GridCntnr {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    grid-gap: 50px; }
.homeCard1-Cntnt { box-shadow: 0 4px 8px 0 rgba(218, 216, 216, 0.904); }
.homeCard1-Cntnt img {max-width: 100%; height: auto; }
.homeCard1Date {font-size: 12px; letter-spacing: 1px; font-family: arial; text-align: center;}
.homeCard1-Cntnt a {text-decoration: none; }
.homeCard1-Cntnt h2 { font-size: 25px; text-align: center; color:white; padding: 16px;}
.hmpgCard1 p {font-size: 16px; font-family: arial; text-align: justify; color: #444; padding: 16px;}

.homeCard1-Cntnt .homeReadMore { cursor: pointer; background: #008080; border: 0; font-size: 18px;
    color: white; padding: 10px; width: 40%; display: block;  text-align: center; 
    margin: 0 auto; margin-bottom: 15px;}

@media screen and (max-width: 600px) {.homeCard1-GridCntnr {grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
    .homeCard1-Cntnt h2 {font-size: 16px;}
}
/*End of homeCard1 styles*/

/*blgsHome*/
.blgsHomeBackground {background-color: white; padding-top: 10px; 
    padding-bottom: 30px;}
.blgsHomeBackground .blgsHmMargin {margin-left: 5%; margin-right: 5%;}
.blgsHomeBackground h1 {color: #008080; font-size: clamp(0.5rem, 7vw, 2.9rem) /*The clamp function 
    contains smallest font-side for mobile phone from the left*/;}
.blgsHm-GridCntnr {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    grid-gap: 40px; }
.blgsHm-Cntnt img {max-width: 100%; height: auto; }
.blgGridDate {font-size: 12px; letter-spacing: 1px; font-family: arial;}
.blgsHomeBackground a {text-decoration: none; }
.blgsHm-GridCntnr .readMoreBtn {letter-spacing: 2px; width: 50%; padding: 5px; background: #f0a00c; 
    font-size: 16px; border: 0; cursor: pointer; }

/*Blog page styles start here*/
/* Main blog post style */.blogPostBackground {background-color: #f0e7d9; padding-top: 20px; 
    padding-bottom: 20px;}

/*Code for blogPost2*/
.blogPost2Background {background-color: #d9bc8b; padding-top: 20px; padding-bottom: 20px;}
.blogPost2 {margin-left: 10%; margin-right: 10%;}
.blogPost2 h1 { color:#008080; font-size: 31px;}
.blogPost2 h2 { color: #008080; font-size: 28px;}
.blogPost2 p { font-family: 'verdana'; font-size: 20px; color: #444; text-align: justify;}
.blogPost2 li {margin-bottom: 5px; font-family: 'verdana' !important; font-size: 20px; color: #444;}
.blogPost2ButtonBackgroundContent {font-family: 'verdana'; font-size: 20px; color: #444; text-align: justify}


@media only screen and (max-width: 700px) { .blogPost2 { margin-left: 5% !important; 
    margin-right: 5% !important;}
.blogPost2 h1 {font-size: 27px !important;}
.blogPost2 h2 {font-size: 25px !important;}
.blogPost2 p, ul { font-size: 16px !important; }}

/** Social Button CSS **/  
.shareLikeButtons {display: inline-block; justify-content: center; }
.shareLikeButtons a { font-size: 30px; color: #fff; text-decoration: none; padding: 5px 12px; 
    border-radius: 5px; line-height: 40px;}
.shareLikeText {font-size: 16px; padding-bottom: 5px; font-weight: bold;}
.shareLikeButtons a:hover {opacity: 1;}
.shareLikeButtons .facebook { background: #3b5998;}
.shareLikeButtons .whatsapp {background: rgb(91, 228, 91); }
.shareLikeButtons .whatsapp2 {background: rgb(91, 228, 91);}
.shareLikeButtons .call {background: rgb(6, 218, 6); color: white;}
.shareLikeButtons .instagram {background: white;}
.shareLikeButtons .twitter { background: black;}
.shareLikeButtons .email { background: #064141; }

/* Floats the columns side by side */ .shareLikeButtonsColumn {float: left; width: auto; margin-right: 5%;
   margin-bottom: 1.5%; padding: 5px; }
/* Removes extra left and right margins created by paddding */ .shareLikeButtonsRow {margin: 0 -5px; }
/* Clears floats after the columns */ .shareLikeButtonsRow:after {content: ""; display: table; 
    clear: both;}
@media only screen and (max-width: 700px) { .shareLikeButtons a {font-size: 20px;}
.shareLikeButtonsColumn {float: left; width: auto;  margin-right: 7%;}
}
/*End of social media share buttons

/* Creates separate background for blogPost2 button */ 
.blogPost2ButtonBackground {background-color: #f1f1e9; padding-top: 20px; padding-bottom: 20px; }
.blogPost2ButtonBackgroundContent{margin-left: 3%; margin-right: 3%;}
.blogPost2ButtonBackground button {display: block;  text-align: center; 
    padding: 10px; background:#e9780e; text-transform: uppercase; font-weight: 500; 
    letter-spacing: 2px; border:none; color: white; font-size: 18px; cursor: pointer; 
    width: 30%; }
.blogPost2ButtonBackground a {text-decoration: none;}
@media only screen and (max-width: 700px) {.blogPost2ButtonBackground button {
    width: 80%; font-size: 12px;}
    .blogPost2ButtonBackgroundContent{margin-left: 5%; margin-right: 5%;}
    .blogPost2 img {width:100% !important;}
/*blogPost2 styles end here*/}

/* Author's img and name */ .authorImgContainer {display: flex; align-items: center; }
.authorImgContainer .authorImg { max-width: 15%; border-radius: 50%; margin-right: 10px; }
.authorImgContainer .authorImgText { font-size: 16px;}
@media screen and (max-width: 700px) { 
    .authorImgText { font-size: 11.5px !important;}}


/*blogPost1 style code start here*/
.blgTwoClmn1Row::after {content: ""; display: table;
    clear: both;}

.blgTwoClmn1 {background: #cfcecc;}
.blgLftCol1 {float: left; width: 70%; padding: 3%; background: #f3f2f0;}
.blgLftCol1 h1 {color: #111; font-size: clamp(1.5rem, 6.25vw, 2.5rem);}
.blgLftCol1 h2 {font-size: clamp(1rem, 6.25vw, 1.8rem);}
.blgLftCol1 p {font-size: 20px;}
.blogUlVrtclSpc li {color: #444; font-family: arial; font-size: 20px; padding-bottom: 10px;}

.blgTwoClmn1Rght {float: right; width: 28%; padding: 0 3%; padding-bottom: 3%;}
.blgTwoRghtBck {background: #fff; border-radius: 10px;}
.blgTwoClmn1Rght h2 {font-size: clamp(1.8rem, 6.25vw, 2rem);}
.blgTwoClmn1Rght p {font-size: 1rem; text-align: left;}
.blgLftColDate {font-size: 15px !important; text-align: left;}
.twoColRghtDate {text-align: center; font-size: 14px;}
.moreBlogsBtn {background: #13a7a7; color: #fff; padding: 2%; border: none; 
    font-size: 1rem; margin: 20px 0; cursor: pointer;}

.chatUs {max-width: 250px; justify-content: center; align-items: center; background: #fff; 
    border-radius: 5px; margin: 10% 0; padding-bottom: 2%; cursor: pointer;}
.hvChatTxt1 {font-size: clamp(1.8rem, 4.25vw, 2rem); font-family: arial black; 
    text-align: center; margin: -2% 0; color: #e9780e;}
.hvChatTxt2 {font-size: 1rem; text-align: center !important; color: #e9780e;}
.chatUs a {text-decoration: none;}
.chatUs .fa-whatsapp {background: chartreuse; padding: 1% 3%; border-radius: 5px; font-size: 2rem; 
    margin: 0 42%;}

@media screen and (max-width: 768px) {.blgLftCol1 {width: 60%;}
.blgTwoClmn1Rght {width: 32%;}
.blgLftCol1 p {font-size: 1rem;}
.blgTwoClmn1Rght {width: 35%;}}

@media screen and (max-width: 600px) {.blgLftCol1 {display: block; width: 100%; 
    padding-left: 5%; padding-right: 5%;}
.blgTwoClmn1Rght {display: block; width: 100%; padding-left: 5%; padding-right: 5%;}
.blgLftColDate {font-size: 12px !important;}
.blogUlVrtclSpc li {font-size: 1rem;}}

.BlgPst4List li { padding-top: 7px; font-family: arial; color: #333; font-size: 25px;}
@media screen and (max-width: 600px) {.BlgPst4List li {font-size: 1rem;}} 

.blogPost1Background {background-color: #cfcecc; padding-top: 20px; 
    padding-bottom: 20px;}
.blogPost1 {margin-left: 10%; margin-right: 10%;}
.blogPost1 h1 { color:#008080; font-size: 31px;}
.blogPost1 p { font-family: 'verdana'; font-size: 20px; color: #444; text-align: justify;}
.blogPost1 .update {margin-left: 25px;}

.otherBlogPost {font-family:tahoma; font-size:16; border:5px solid #008080; padding:10px 25px;}
.jumpUpBtn1 {font-size: 18px; border-radius: 5px; background: #008080; color: white;
    cursor: pointer; padding: 2px 20px; border-color: #c5c9c9;}

@media only screen and (max-width: 700px) { .blogPost1 { margin-left: 5% !important; 
    margin-right: 5% !important;}
.blogPost1 h1 {font-size: 18px !important;}
.blogPost1 p { font-size: 16px !important; }
.blogPost1 img {width:100% !important;}
/*Blog page styles end here*/}

/*--Styles for programmes page--*/
.schlCoding2Background {background: #ffffffea; padding-top: 20px; padding-bottom: 20px; }
.schlCoding2Background .pText {font-size: 25px !important;}
.cntntBforeModal#blurEffect.active /*Blur effect for popup elements blurs applied 
elements*/ {filter: blur(5px); pointer-events: none; user-select: none;}

/*Start of Modal styles*/
.cntntBforeModalBackground {background: #fff; padding: 20px;}

#thePopup {position: absolute; left: 50%; transform: translate(-50%, -50%); 
    width: min(800px, 100%); padding: 30px 30px; border-radius: 10px; box-shadow: 0 5px 30px rgba(0,0,0,.30); 
    background: rgb(228, 227, 227); visibility: hidden; opacity: 0; transition: 0.5s; font-family: 
    arial; z-index: 4;}

#thePopup.active { visibility: visible; opacity: 1; transition: 0.5s;}
#thePopup .algnCntr {text-align: center; color: #13a7a7}
#thePopup .modalImage {max-width: 20%; border-radius: 100%; margin-left: 50% auto;}
#thePopup p {color: #444; font-size: 1rem;}
#thePopup .modalCntntCntnr i {padding-right: 5px; margin: 0; font-size: 30px;}

.applyBtn, .closeBtn, .enquiryBtn {padding: 10px 12px; margin-right: 15px; outline: none; border: none; 
    color: white; cursor: pointer; font-size: 16px;}
.applyBtn {background: #008080;}
.closeBtn {background: red;}
.enquiryBtn {background: #f0a00c;}
@media screen and (max-width: 600px) { #thePopup .modalImage {max-width: 40%;}
.schlCoding2Background .pText {font-size: 16px !important;}
}
/*End of Modal styles*/

/*schlCoding*/
.schlCodingBackground { background-color: #f7f4d7; padding-top: 20px; padding-bottom: 20px; }
.schlCoding {margin-left: 10%; margin-right: 10%;}
.schlCoding h1 { font-size: 35px; color: #008080; font-family: Cambria;}
.schlCoding p { font-family: arial; color: #444; font-size: 20px !important; text-align: justify;}
@media only screen and (max-width: 800px) {.schlCoding {margin-left: 5%; margin-right: 5%;}
.schlCoding h1 {font-size: 22px;}
.schlCoding p {font-size: 16px;}}

/*forSchlCodingDontn*/
.forSchlCodingDontnBckgrnd {position: relative; }
.forSchlCodingDontnBckgrnd::before {content: ""; position: absolute; width: 100%; height: 100%; 
    background-color: rgba(36, 33, 31, 0.6); z-index: 1;}

.forSchlCodingDontnBckgrnd { background-image: url('../images/AWT-coding-class-image.jpg'); 
    background-repeat: no-repeat; background-size: cover; background-position-x: center; padding-bottom: 20px;}

.forSchlCodingDontn {margin-left: 10%; margin-right: 10%; position:relative; z-index: 2; padding-top: 10px;}
.forSchlCodingDontn h2 {font-size: 35px; color: white; font-family: Cambria; }
.forSchlCodingDontn p { font-family: arial; font-size: 20px !important; color: white; text-align: justify;}
.forSchlCodingDontn button { font-size: 25px; color: #008080; background-color: white; 
    padding: 5px; padding-left: 15px; padding-right: 15px; border: none; cursor: pointer; 
    border-radius: 5px;} 
.forSchlCodingDontn .underPostForm {position: relative; z-index: 4;}
@media only screen and (max-width: 800px) {.forSchlCodingDontn {margin-left: 5%; margin-right: 5%;}
.forSchlCodingDontn h2 {font-size: 25px;}
.forSchlCodingDontn p {font-size: 16px;}
.forSchlCodingDontn button { font-size: 18px;}}

.scndTermSchlCodingBackground { background-color: #13a7a7; padding-top: 20px; padding-bottom: 20px;}
.scndTermSchlCodingBackground .scndTermSchlCoding {margin-left: 10%; margin-right: 10%;}
.scndTermSchlCoding h1 { font-size: 35px; color: wheat; font-family: Cambria;}
.scndTermSchlCoding p { font-family: arial; color: rgb(211, 209, 209); font-size: 20px !important; text-align: justify;}
@media only screen and (max-width: 800px) {.scndTermSchlCodingBackground .scndTermSchlCoding {
    margin-left: 5%; margin-right: 5%;}
.scndTermSchlCoding h1 {font-size: 22px;}
.scndTermSchlCoding p {font-size: 16px;}}
/*Programe page styles end here*/

/*--underPostForm styles start here--*/
.underPostForm {display: grid; place-items: center; padding-top: 10px; padding-bottom: 30px; 
    margin-left: 25%; margin-right: 25%; margin-bottom: 0;}
.underPostForm h2 {color: #d9bc8b; font-size: 34.5px; text-align: center; }
.schlCodingInfo {color: #444}
.underPostForm .pText {font-size: 25px; color: #008080; font-family: verdana; text-align:justify;}
.underPostForm form {width: 100%;}
.underPostForm label { font-weight: bold; font-size: 20px; color:#e9780e;}
.underPostForm input {height: 40px; text-indent: 5px;}
.underPostForm input, .underPostForm textarea { border-color: #008080; background: transparent; margin-top: 10px; 
    outline: none; color: white; font-size: 16px; width: 100%; }
.underPostForm textarea { height: 180px; padding-top: 12px;}
.underPostForm .required:before { content: '*'; color: red; font-weight: bold; 
    font-size: 25px; padding: 5px;}
.underPostForm button { display: block;  text-align: center; padding: 10px; background:#e9780e; 
    text-transform: uppercase; font-weight: 500; letter-spacing: 2px; margin: 0 auto;
    border:none; color: white; font-size: 18px; cursor: pointer; width: 100%;}
.underPostForm input, .underPostForm textarea, .underPostForm button { box-sizing: border-box;}

@media only screen and (max-width: 800px) {.underPostForm { margin-left: 1%; margin-right: 1%;}
.schlCodingInfo {margin: 0 7%;}
    .underPostForm h2 {font-size: 25px;}
    .underPostForm .pText {font-size: 16px; color: #008080; margin-left: 7%; margin-right: 7%;}
    .underPostForm form, .underPostForm h2 {width: 85%; align-items: center !important;}
    .underPostForm input {margin-left: 0; margin-right: 0;}
    .underPostForm textarea {margin-left: 0; margin-right: 0;}  
/*Second term school coding styles end here*/}
/*Styles for programmes page end here*/

/*404 error page styles*/
.errorPgCntnr {margin-top: 12%;}
.errorPgText {margin-left: 12%; margin-right: 12%; font-size: 25px; color: wheat; text-align: center;}

/*General gallery styles*/
.generalGllry-GridCntnr {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    grid-gap: 40px; }
.generalGllry-Cntnt img {max-width: 100%; height: auto; }
.gllry1CntntArea #imgtext {position: relative; color: white; font-size: 25px; 
    font-family: arial; background-color: #008080; text-align: center; }

.gllry1CntntArea .container { display: none; position: absolute; margin-top: -25%; left: 50%; transform: translate(-50%, -50%); 
    width: min(800px, 100%); padding: 30px 30px; border-radius: 10px; box-shadow: 0 5px 30px rgba(0,0,0,.30); 
    background: rgb(253, 252, 250); z-index: 50; }

/* Close button inside the expanded image */
.gllry1CntntArea .closebtn { position: absolute; top: -7px; right: 27px; font-family: arial; 
    color: red; font-size: 45px;  cursor: pointer; }

    @media screen and (max-width: 600px) { 
    .generalGllry-GridCntnr {grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-gap: 15px;}
    .gllry1CntntArea .container {margin-top: -50%;}
    .gllry1CntntArea #imgtext {font-size: 16px;}
    /* General gallery styles end here */ }

footer {background-color: #13a7a7; padding-top: 20px; padding-bottom: 20px;}

.footerRow {display: grid; gap: 5%; margin: 0 5%;}
.footerRow h3 { color: white; font-size: 20px; margin-bottom: -2%;}
.footerRow p {font-family: verdana; font-size: 14px; color: whitesmoke;}
.footerRow a {margin-left: 0; margin-right: 5%; font-family: verdana; 
    font-size: 16px; text-decoration: none; color: whitesmoke; }

.copyRight {display: block; padding-top: 5%; font-size: 14px; font-family: 'verdana'; 
    text-align: center; color: white; margin: 0 5%;}

    @media (max-width: 600px) { 
        .footerRow {display: block;}}

    @media (min-width: 768px) {
        .footerRow {grid-template-columns: 60% 30%;}}

    @media (min-width: 920px) {
        .footerRow {grid-template-columns: 23% 15% 23% 15%;}}