@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Marcellus&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&display=swap');

html {
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  overflow-x:hidden;
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-size:15px;
  overflow-x:hidden;
  color:#333;
  letter-spacing:1px;
}
p {  font-weight:400;}
article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}
audio,
canvas,
progress,
video,a,span {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
progress {
  vertical-align: baseline;
}
template, /* 1 */
[hidden] {
  display: none;
}
a,button {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
  transition: all 0.3s ease;
}
a:active,
a:hover {
  outline-width: 0;
}
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}
b,
strong {
  font-weight: inherit;
}
b,
strong {
  font-weight: bolder;
}
dfn {
  font-style: italic;
}
h1,h2,h3,h4,h5 {
  margin: 0 0 15px;
}
mark {
  background-color: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img,i ,a,span{
  border-style: none;
  transition: all 0.3s ease;
}
svg:not(:root) {
  overflow: hidden;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
button,
input,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}
optgroup {
  font-weight: bold;
}
button,
input { /* 1 */
  overflow: visible;
}
button,
select { /* 1 */
  text-transform: none;
}
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
} 
a {color:#111111;}
a:hover {color:#222; text-decoration:none;}
.img-responsive {width:100%; height:auto;}
.mb-8 {margin-bottom:80px;}
.mt-8 {margin-top:80px;}
.pt-8  {padding-top:80px;}
.pb-8 {padding-bottom:80px;}
.owl-carousel .owl-item img  {width:auto; display:inherit;}
/******** Start Home Page CSS **********************************************************/
header {
    position: relative;
}

#myHeader {position: absolute; width: 100%;}

.navbar {padding:20px 0; margin-bottom:10px; z-index: 100;}

a.navbar-brand {position:absolute; z-index:10;}
a.navbar-brand img {width:250px;}

ul.navbar-nav {}
ul.navbar-nav li a { font-size:15px;}

.actions ul {padding:0px; list-style:none; margin-bottom: 0;}
.actions ul li {display:inline-block; padding-left:10px;}
.actions ul li img {width:20px;}
a.action { font-size: 14px; padding: 10px 15px; color: #fff; background: #0d7864; border-radius: 5px;  }
a.action:hover {background:#f1592a; }

a.action2 { font-size: 14px; padding: 10px 15px; color: #222; border: 1px solid #0d7864; border-radius: 5px;  }
a.action2:hover {background:#0d7864; border: 1px solid #0d7864; color:#FFF;}
a i.fa-whatsapp {    font-size: 42px; vertical-align: middle; color: #37bd69;}

.navbar-expand-xl .nav-item {padding-left:1rem; padding-right:1rem;}
.navbar-expand-xl .navbar-nav .nav-link {padding:10px  0;}

@keyframes myAnimation {
  from {color:#CCC;} to {color:#222;}
}

.valuetxt { }

.menu-main-menu-container {width:100%; text-align:right; }

ul.menu {
    position: relative;
    list-style: none;
    padding: 0px;
    margin-bottom: 0px;
    z-index:100;
    text-transform:uppercase;
}

ul.menu ul {margin:auto; text-align:right;}
.menu-main-menu-container ul.menu li a {font-size: 15px; font-weight: 400;}

ul.menu:focus::before {
  content: "";
  height: 4px;
  background: #0d7864;
  position: absolute;
  bottom: -20px;
  left: 10px;
  right: 10px;
  transition: all 0.3s ease;
}

ul.menu li {display:inline-block; margin-left:15px; margin-right:15px;}
.menu-footer-menu-container ul.menu li {margin:0px; width: 100%;}

ul.menu li.page_item a {position:relative; padding: 10px 0px;}

ul.menu li.page_item a::before {
  content: "";
  height: 4px;
  background: #0d7864;
  position: absolute;
  bottom: 0px;
  transition: all 0.5s ease;
  width: 0px;
  left: 10px;
  margin: auto;
}

ul.menu li.current_page_item a::before {
  transition: all 0.5s ease;
  width: 20px;
  left: 0;
  margin: auto;
}

ul.menu li.page_item a:hover::before {
  transition: all 0.5s ease;
  width: 100%;
  left: 0;
  margin: auto;
}

h2 {
    font-size: 38px;
    font-weight:200;
}
h2 span {font-weight:400; display:inline;}

h4 {
    font-size: 25px;
    margin-bottom:0px;
    font-weight:400;
    letter-spacing:1px;
    line-height:40px;
}

.mainBanner {position:relative;}
.mainBanner picture {width:auto; position:absolute; right:0; bottom:0;} 
.mainBanner .captionBox {width:45%; margin-top:150px;}
.mainBanner .captionBox h2 {font-size:42px; font-weight:300; text-transform:uppercase; line-height: 50px;}
.mainBanner .captionBox h2 span.g {color:#0d7864; font-weight:700;}
.mainBanner .captionBox h2 span.o {color:#f1592a; font-weight:700;}
.mainBanner .carousel-item { min-height:559px;}

.inner-banner {position:relative; background: #fbf6f5; height:559px;}
.inner-banner picture {width:100%; display:inline-block; text-align:right; height: 100%; overflow: hidden;} 
.inner-banner .inner-caption {width:45%; position: absolute; top: 150px; left: 50px;}
.inner-banner .inner-caption h1 {font-size:17px; font-weight:300;}
.inner-banner .inner-caption h2 {font-size:42px; font-weight:300; text-transform:uppercase;}
.inner-banner .inner-caption h2 span.g {color:#0d7864; font-weight:700;}
.inner-banner .inner-caption h2 span.o {color:#f1592a; font-weight:700;}

a.gbutton {background:#0d7864; border: 2px solid #0d7864; border-radius:5px; outline:none; padding:10px 15px; color:#FFF; cursor:pointer; font-size:15px;}
a.gbutton:hover {background:#f1592a; color:#FFF;  border: 2px solid #f1592a;}
a.obutton {background:#none; border-radius:5px; border:2px solid #f1592a; outline:none; padding:10px 15px; cursor:pointer;}
a.obutton:hover {background:#f1592a; color:#FFF;}

.boxs {margin-top:120px;}
.belowbanner {background:#0d7864; color:#FFF; padding:80px 0 140px 0;}
.belowbanner h1 {font-size:32px;}
.videoimg::before {content: ''; background: url(../images/educanvas-brand-icon.png) no-repeat; width: 407px; height: 481px; z-index: 0; position: absolute; top: -50px; left: -10px; background-size: 370px;}
.videoimg img {z-index:1;position:relative;}
.numberarea {text-align:center; box-shadow: -1px 1px 29px -4px rgba(0,0,0,0.46); -webkit-box-shadow: -1px 1px 29px -4px rgba(0,0,0,0.46);
-moz-box-shadow: -1px 1px 29px -4px rgba(0,0,0,0.46); background: #FFF; border-radius: 20px; position: relative; top: -80px; padding: 30px 0px;}
.numberarea ul {padding:0px; list-style:none; }
.numberarea ul li {display:inline-block; margin-right:-5px; vertical-align:top; width:25%;}
.numberarea img.icon {height:60px; width:auto; margin-bottom:10px;}
.numberarea h3, .numberarea p {margin-bottom:0px;}

.coursesection {text-align:center; margin-bottom:80px;}
.heading h2 {font-weight:600; color:#ff0000; font-size:32px; }
.heading h2 span {color:#0d7864; font-weight:600;}
ul.course { display: inline-flex; gap: 40px; margin-bottom:30px; list-style: none; padding: 0px; text-align: center;}
ul.course li {margin:0 auto; font-weight:500; text-transform:uppercase; font-size:25px; width:170px;}
ul.course li img {width:65px; height:65px; margin-bottom:10px; }
ul.course li a {display:block; border:3px solid #a798ff; border-radius:20px; padding:20px; }
ul.course li a:hover {border:3px solid #ff0000;}

.appblockarea, .connectarea {margin-bottom:80px;}
.appblock {background:#ebe8fd; padding:50px 50px 0px 50px; border-radius:30px; transform: translateZ(0);}
.appblock h2 {font-weight:600;}

ul.connect {display: flex; gap: 20px; padding: 0px; list-style: none;}
ul.connect li {margin:0 auto; font-size:27px;}
ul.connect li a {color:#333;}
ul.connect li picture {width: 70px; height: 70px; border-radius: 100px; background: #28ad94; display: inline-block; text-align: center; vertical-align: middle;  padding-top: 10px;}
footer {background: #f2f2f2; padding: 50px 0;}
footer ul {padding:0px; list-style:none;}

.socialicon a { background: #000; color: #FFF; padding: 6px; width: 35px; border-radius: 100px; text-align: center; margin-right:10px;}
.socialicon a:hover {background:#f16841;}
.greensection {background:#0d7864; color:#FFF; padding:50px;}
.centerwhitesection {padding-top:80px; text-align:center;}
.creamsection {background:#fff5e3; padding:50px;}

.greensection h2 {font-size:22px; font-weight:400; line-height:30px;} 
.greensection h4, .centerwhitesection h4, .creamsection h4, .whychoose h4, .contentarea h4 {font-size:15px;  font-weight:300; text-transform:uppercase;}
.centerwhitesection h2 {font-size:32px; color:#0d7864; font-weight:400; width: 70%; margin: 0 auto;}
.creamsection h2, .contentarea h2 {font-size:22px; font-weight:400; color:#f1592a; line-height:30px;} 
.whychoose h2  {font-size:32px; color:#0d7864; font-weight:500;}

.lastline {width:70%;}
.lastline h2 {font-size:22px; font-weight:400; line-height:30px; color:#0d7864; text-align:center;} 
.lastline p {text-align:center;}

.contentarea {padding-top:80px; padding-bottom:30px;}
.coursebox {background:#edeff1; border-radius:20px; padding:40px 40px 20px 40px; margin-bottom:30px;}
.coursebox h2 {font-size:28px; color:#f1592a; font-weight:500; margin-bottom:0px;}
.validarea {background: #FFF; padding: 8px 20px; border-radius: 100px; margin-bottom: 20px;}
.off {font-size:22px; font-weight:400; color:#0d7864;}
.off span {text-decoration: line-through; color:#999;}
.courseinfo ul {padding: 0px; list-style: none;}
.courseinfo ul li { width: 33.333%; display: inline-block; vertical-align: top; margin-right: -5px; margin-bottom: 30px;}
.courseinfo ul li span {font-size:25px; color:#0d7864;}
.accordian {padding:20px;}
.wp-block-pb-accordion-item { border-radius: 10px; border: 1px solid #f1592a; padding: 20px; margin-bottom:20px;}
.wp-block-pb-accordion-item h3 {font-size:18px; color:#f1592a; font-weight:400; margin-bottom:0px;}
figure.wp-block-image {margin-bottom:0px;}

.centerwhitesection h3 {font-size:15px; }
.teamarea { background: #131e1f; color: #ccc;}
.teamarea2 { background: #162727; color: #ccc; margin-bottom:70px; }
.teamarea .team-text, .teamarea2 .team-text {padding:70px 40px 40px 40px;}
.teamarea .team-text h3, .teamarea2 .team-text h3{font-size:28px; color:#f1592a;}
.teamarea .team-text ul, .teamarea2 .team-text ul {list-style:none; padding:0px;}
.teamarea .team-text ul li, .teamarea2 .team-text ul li {font-size:22px; display:inline-block; margin-right:10px;}
.teamarea .team-text ul li a, .teamarea2 .team-text ul li a { color:#FFF; text-align: center; padding-top: 8px; width:50px; height:50px; border-radius:100px; background:#0d7864; }

.contactarea {padding:70px 0; background:#0d7864; color:#FFF; margin-bottom:70px;}
.formarea {border-radius:10px; background:#FFF; padding:40px 30px; color:#272727;}
.formarea h2 {font-size:28px; color:#f1592a; font-weight:400; margin-bottom:10px;}
.formarea form p {display:inline-block; margin-right:-5px; width:50%; padding:10px; margin-bottom:0px;}  
.formarea form p:nth-child(5n+1), .formarea form p:nth-child(5n+1) label, .formarea form p:nth-child(5n+1) span {width:100%;}
.formarea form p span input {width:100%; background:#fafafa; border:1px solid #d7d7d7; height:50px; padding:0 10px; }
.formarea form p span textarea {width:100%; background:#fafafa; border:1px solid #d7d7d7; height:150px; padding:10px; }
.formarea input[type=submit] {text-transform:uppercase; background:#0d7864; border-radius:5px; border:none; outline:none; padding:10px 20px; color:#FFF; cursor:pointer; font-size:15px;}
.formarea input[type=submit]:hover {background:#f1592a; color:#FFF;}
span.round { border: 1px solid #fff; width: 40px; height: 40px; border-radius: 100px; text-align: center; padding-top: 7px; margin-right: 10px; margin-bottom: 10px;}
.contactarea a {color:#FFF;}
.footer-logo {width:100%; height:auto;}

footer ul.menu {text-transform:inherit;}
footer ul.menu li {display: block; margin-bottom:10px;}
footer ul.menu li.page_item a {padding:0px;}
footer ul.menu li.page_item a::before {content:inherit;}

.modal-dialog {max-width:800px;}
.modal-content {background:#000; border-radius:20px;}

.video-popup{
    display:none;
    position:fixed;
    z-index:9999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
}

.popup-content{
    position:relative;
    width:80%;
    max-width:900px;
    margin:5% auto;
}

.popup-content iframe{
    width:100%;
    height:500px;
    border-radius:10px;
}

.close-btn{
    position:absolute;
    top:-40px;
    right:0;
    color:#fff;
    font-size:40px;
    cursor:pointer;
}

@media(max-width:768px){

    .popup-content{
        width:95%;
        margin-top:20%;
    }

    .popup-content iframe{
        height:250px;
    }
}

/******** End Media CSS **********************************************************/
@media only screen and (min-width: 1200px) {
.container {
        max-width: 1280px;
    }
.container-fluid {
        padding-left:30px;
        padding-right:30px;}
}

@media only screen and (max-width: 1280px) {
    .main-banner .banner-caption h1 {font-size: 40px; line-height: 57px;}
    .main-banner .banner-caption p {font-size: 18px;}
    h2 {font-size: 32px; line-height: 47px;}
}

@media only screen and (max-width: 1199px) {
.main-banner .banner-caption  {max-width:100%;}
.services h2 {font-size:22px; line-height:30px; height:88px;}
.actions {position: absolute; right: 90px;}
.navbar {height: 80px; padding:0px 20px; z-index:100; }
.navbar-toggler {border-radius: 5px; position:absolute; right:20px; top:20px; background:url(../images/toggle-icon.png) no-repeat center; background-size:contain;}
.navbar-collapse {padding-top: 20px; background: #1b483f; width: 300px; z-index: 1000; position: absolute; top: 0px; left: 0px; height: 100vh;}
.navbar-expand-xl .navbar-nav .nav-link {color:#FFF; padding: 12px 20px;}
.menu-main-menu-container {text-align:left;}
ul.menu li {width: 100%; margin: 0px; padding: 15px 20px;}
footer ul.menu li {padding:0px;}
footer ul.menu li a {color:#272727; text-transform: inherit;}
ul.menu li a {color:#FFF; width:100%; text-transform: uppercase;}
ul.menu li.page_item a {padding:0px;}
ul.menu li.current_page_item a::before {bottom:-15px;}
.mapcaption  { width: 100%; position: inherit;}
.maparea picture img {width:100%; height:auto;}
.inner-banner::before {width: 481px; height: 482px; top: -50px; right: 0px; background-size: cover;}
.boxs {margin-top:30px;}
.coursebox {text-align:center;}
.courseinfo ul li {font-size:11px;}
.courseinfo ul li span {font-size:18px;}
.validarea {font-size:13px;}
.off {font-size:18px;}
}


@media only screen and (max-width: 1024px) {
    .main-banner .banner-caption h1  { font-size: 32px; line-height: 45px;}
    .mainBanner .captionBox {width:46%;}
    .mainBanner .captionBox h2 {font-size: 35px; line-height:40px;}
    .mainBanner picture {width:55%;}
    .inner-banner  {height:auto; position:inherit;}
    .inner-banner .inner-caption {width:75%; position: inherit;}
    .inner-banner .inner-caption h2 {font-size:35px; line-height: 35px;}
    .inner-banner {position:inherit;}
    .inner-banner .inner-caption { margin-left: 40px; padding-top: 120px;}
    img.innerb-img {width:100%; height:auto;}
}

@media only screen and (max-width: 768px) {
    #myHeader {position:inherit;}
    .mainBanner .captionBox  { width: 80%; text-align: center; margin: 50px auto 0 auto;}
    .mainBanner picture {position:inherit;}
    .belowbanner h1 {font-size:27px;}
    .appblock .icon {width:115px;}
    .appblock h2 { font-size: 22px; margin-bottom: 0px;}
    img.mobile {width:100%;}
    .heading h2 {font-size:28px; margin-bottom:10px; line-height: 38px;}
    ul.connect li {font-size:18px;}
    img.face-img {float:left; margin-right:4px;}
    .numberarea ul li {width:50%; margin-bottom:30px;}
    .footer-logo {height:auto;}
    .inner-banner .inner-caption { padding-top: 40px;}
    .centerwhitesection h2 {width:100%; font-size:22px; line-height:30px;}
    
    .coursebox {padding: 30px 20px 20px 20px;}
    .off a.gbutton {width: 100%; margin-bottom: 10px;}
    .courseinfo ul li {
        font-size: 11px;
        width: 50%;
        text-align: left;
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 767px) {
    img.mobile {margin-top:30px;}
    .numberarea {padding: 30px 0px 0px}
    .connectarea {display:none;}
    .footer-logo {width:200px; height:auto;}
    
    .valuetxt {margin-bottom:30px;}
    .usps{height:150px;}
    .white-btn {margin-top:30px;}
    h3 {font-size:18px; line-height:26px;}
    .teams {margin-bottom: 30px;}
    footer {text-align:center;}
    
}

@media only screen and (max-width: 680px) {
    .spheretxt {font-size:90px;}
    .actions {
        bottom: 0;
        z-index: 10000;
        position: fixed;
        background: #ededed;
        text-align: center;
        padding: 15px 0;
        right: 0px;
        left: 0px;
    }
    .inner-banner::before {display:none;}
    .inner-banner .inner-caption { width: 100%; padding: 40px 40px 0 40px; margin-left: 0px; } 
    .inner-banner .inner-caption h2 {font-size:30px;}
    .greensection, .creamsection, .lastline {padding-left:0px; padding-right:0px; width:100%;}
    .whychoose h2 {font-size:22px; line-height: 30px;}
}

@media only screen and (max-width: 512px) {
    .mainBanner .captionBox {width:100%;}
    .mainBanner .captionBox h2 { font-size: 30px; line-height: 35px;}
}

@media only screen and (max-width: 425px) {
    .mainBanner .captionBox h2 { font-size: 25px; line-height: 35px;}
}