:root {
  --greentLight: #16a085;
  --greentLightAlt: #1abc9c;
}

html {
  scroll-behavior: smooth;
}

#coursesList {
  scroll-margin-top: 85px;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  /*text-transform: capitalize;*/
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  /* font-family: 'Roboto', sans-serif; */
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a,
a:hover,
a:focus {
  text-decoration: none;
  transition: 0.3s;
}
button { transition: 0.3s; }

/* Let's get this party started */
body::-webkit-scrollbar {
  width: 10px;
}
/* Track */
body::-webkit-scrollbar-track {
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
/* Handle */
body::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: var(--greentLight);
}
body::-webkit-scrollbar-thumb:window-inactive {
  background: var(--greentLightAlt);
}


/* START => Header */
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100000;
}
header a {
  text-transform: capitalize;
}
.reset__btns {
  border: 0 !important;
  outline: unset !important;
  box-shadow: unset !important;
  background-color: transparent !important;
}

.main-menu {
  position: relative;
  background-color: rgba(0, 0, 0, .3);
  box-shadow: 0 2px 10px rgba(160, 28, 69, 0.22);
  z-index: 100000;
  transition: 0.3s;
}
.main-menu.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  transition: 0.3s;
  z-index: 100001;
}
.brand-logo img {
  max-height: 90px ;
  padding: 5px;
  transition: 0.3s;
}
.main-menu.fixed .brand-logo img {
  max-height: 50px;
  padding: 0px;
}
.brand-logo strong {
  color: var(--greentLightAlt);
  font-size: 40px;
}
.brand-logo strong span {
  color: var(--greentLight);
}
.menu-tabs>ul>li {
  position: relative;
}
.menu-tabs>ul>li>a {
  padding: 30px 20px;
  display: inline-block;
  color: #fff;
  font-weight: 300;
  font-size: 1rem;
  display: block;
}
.main-menu.fixed .menu-tabs>ul>li>a {
  padding: 20px;
  color: var(--greentLightAlt);
  font-size: 14px;
}
.main-menu.fixed .menu-tabs>ul>li>a:hover,
.menu-tabs>ul>li>a:hover,
.menu-tabs>ul>li.active>a {
  color: var(--greentLight);
}
.p-relative {
  position: relative;
}
.toggle-dropdown {
  position: relative;
  padding-right: 5px;
}
.cert::after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 5px;
  position: relative;
  top: 3px;
  transition: .3s;
}
.currents::after {
  content: "\f106";
}
.dropdown-m {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  min-width: 15rem;
  width: max-content;
  border-top: 3px solid var(--greentLightAlt);
  z-index: 99;
  display: none;
}
.dropdown-m.show {
  display: block;
}
.dropdown-m li {
  margin: auto;
  border-bottom: 1px solid #eee;
}
.dropdown-m li:last-child {
  border-bottom: unset;
}
.dropdown-m li a {
  padding: 8px 15px;
  display: block;
  color: #555;
  font-weight: 300;
  font-size: 14px;
  white-space: nowrap;
}
.dropdown-m li a:hover {
  background-color: var(--greentLight);
  color: #fff;
}

.remove-x {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #F00;
  cursor: pointer;
}

.mega__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: var(--greentLightAlt);
  width: 90%;
  margin: auto;
  border-top: 3px solid var(--greentLight);
  /* border-bottom: 1px solid var(--greentLight);
    border-left: 1px solid var(--greentLight);
    border-right: 1px solid var(--greentLight); */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: none;
}
.mega__menu::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0px 15px 15px 15px;
  border-style: solid;
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: var(--greentLight);
  z-index: 9;
}
.mega__menu strong.h6 {
  color: var(--greentLight);
}
.mega__menu ul {
  padding-left: .5rem;
  max-height: 230px;
  overflow: hidden;
  overflow-y: scroll;
}
.mega__menu ul::-webkit-scrollbar {
  width: 3px;
}
.mega__menu ul::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(160, 28, 70, 0.2);
}
.mega__menu ul::-webkit-scrollbar-thumb {
  background-color:var(--greentLight);
  outline: 0;
}

.mega__menu ul li:not(:last-child) {
  border-bottom: 1px solid #ddd;
}
.mega__menu ul li a {
  color: #eee;
  font-size: 12px;
  display: block;
  padding: 3px 0;
}
.mega__menu ul li a:hover {
  color: var(--greentLight);
  transform: translateX(5px);
}
.close-menu,
.btn__mobile,
.menu-backdrop {
  display: none;
}
/* //END => Header */

/* START => Home Sliders */
.sec-slider {
  position: relative;
}
.sec-slider .home-slider {
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}
.home-slider,
.home-slider .owl-stage-outer,
.home-slider .owl-stage,
.home-slider .owl-item,
.home-slider .item {
  height: 100vh;
}
.home-slider .item {
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: relative;
}
.home-slider .item::after {   /* Edit New */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
}
.home-slider .item-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.btn-style1 {
  display: inline-block;
  background: var(--greentLightAlt);
  color: #FFF;
  padding: 15px 20px;
  margin: auto;
  margin-top: 30px;
  border-radius: 30px;
  text-align: center;
  transition: all .5s;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}
.btn-style1:hover {
  background: var(--greentLight);
  color: #FFF;
}
.home-slider .owl-nav {
  position: absolute;
  bottom: 50px;
  lefT: 200px;
  z-index: 9;
}
.home-slider.owl-theme .owl-nav [class*=owl-] {
  padding: 5px 20px !important;
  color: #FFF;
  background-color: var(--greentLight);
  outline: none;
  transition: all .5s;
}
.home-slider.owl-theme .owl-nav [class*=owl-]:hover {
  background-color: var(--greentLightAlt);
  border: 0;
  outline: unset;
  box-shadow: unset;
}

/* Custom Carousels Nav Styling */
.owl-theme .owl-nav {
  margin-top: 10px;
  text-align: center;
}
.owl-theme .owl-nav [class*=owl-] {
  color: #FFF !important;
  font-size: 14px;
  margin: 5px;
  padding: 4px 10px !important;
  background: var(--greentLight) !important;
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
}
.owl-theme .owl-nav [class*=owl-]:hover {
  background: var(--greentLightAlt) !important;
  text-decoration: none;
}
.owl-theme .owl-dots .owl-dot span {
  background: #ccc;
}
.owl-theme .owl-dots .owl-dot.active span {
  background: var(--greentLight);
}

.home-slider.owl-theme .owl-dots {
  position: absolute;
  top: 50%;
  right: 50px;
  transform: translate(-50%, -50%);
  border: 0 !important;
  outline: unset !important;
  box-shadow: unset !important;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.home-slider.owl-theme .owl-dots .owl-dot {
  display: block;
}
.home-slider.owl-theme .owl-dots .owl-dot:focus,
.home-slider.owl-theme .owl-dots .owl-dot:hover {
  border: 0 !important;
  outline: unset !important;
  box-shadow: unset !important;
}
.home-slider.owl-theme .owl-dots .owl-dot span {
  width: 15px;
  height: 25px;
  border: 2px solid var(--greentLightAlt);
  background-color: #fff;
}
.home-slider.owl-theme .owl-dots .owl-dot.active span,
.home-slider.owl-theme .owl-dots .owl-dot:focus span,
.home-slider.owl-theme .owl-dots .owl-dot:hover span {
  border: 0 !important;
  outline: unset !important;
  box-shadow: unset !important;
  background-color: var(--greentLight);
}

.home-slider .item .item-txt {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  /* transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%); */
  width: 600px;
  z-index: 1;
}
.home-slider .item .item-txt h1,
.home-slider .item .item-txt h2 {  /* Edit New */
  color: #fff;
  text-transform: capitalize;
  text-shadow: 0px 1px 3px #8a8a8a;
  font-size: 2.5rem;
  /* font-family: 'Nunito Sans', sans-serif !important; */
  font-weight: 500;
}
.home-slider .item .item-txt p {  /* Edit New */
  letter-spacing: 1px;
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  text-shadow: 0px 1px 3px #8a8a8a;
  text-transform: capitalize;
  /* font-family: 'Nunito Sans', sans-serif !important; */
  font-weight: 400 !important;
}

.box-requests {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 8;
  /*width: 550px;*/
  width: 450px;
  background-color: #fff;
  padding: 2.5rem .5rem 1rem .5rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
.box-requests .title {
  text-align: center;
  font-weight: 500;
  display: block;
  margin-bottom: 2rem;
  color: #444;
  font-size: 14px;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--greentLight);
  color: #fff;
  padding: .5rem .5rem;
  border-radius: 30px;
  width: 84%;
}
.box-requests form .row > div {
  padding: 0 .3rem;
}
.selectric {
  border: 0;
}
.selectric .button {
  right: 5px;
  top: 10px;
  width: 38px;
  height: 30px;
  line-height: initial;
}
.selectric .label,
.box-requests form .form-control {
  height: 30px;
  line-height: 2;
  padding: 0 .6rem;
  margin: auto;

  background-color: transparent;
  border: 1px solid #d4d4d4;
  outline: none;
  font-size: 14px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 3px;
  color: #454545;
  position: relative;
  z-index: 2;
}
.box-requests form .btn-submit {
    margin: auto;
    display: block;
    border: 0;
    outline: unset;
    background-color: var(--greentLightAlt);
    color: #fff;
    padding: 0.2rem 1rem;
    border-radius: 3px;
}
.box-requests form .btn-submit:hover {
  background-color: var(--greentLight);
}
.box-requests form .form-group:not(:last-child) {
  position: relative;
  margin-bottom: 1.5rem;
}
.box-requests form label {
  color: #666;
  position: absolute;
  top: 4px;
  left: 15px;
  z-index: 1;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.box-requests form .selectric .button {
    right: 0px;
    top: 0px;
    width: 38px;
    height: 30px;
    line-height: initial;
}

.box-requests form .selectric-wrapper + label,
.box-requests form label.up {
  z-index: 5;
  position: absolute;
  top: -10px !important;
  left: 5px !important;
  transform: translateY(0) scale(.9);
  background-color: var(--greentLight);
  padding: 0 .2rem;
  color: #fff;
  border-radius: 3px;
  font-size: 12px;
}
/* //END => Home Sliders */

/* START => Quran */
.sec-quran {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
  color: #fff;
  font-family: 'Tajawal', sans-serif;
  padding: 5rem 10rem;
  position: relative;
  z-index: 1;
}
.sec-quran::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: -1;
}

.sec-quran p {
  color: #fff;
}
.txt_ar { font-size: 1.3rem; font-weight: 600; }
.txt_en { font-size: 1rem; }
/* //END => Quran */

/* START => programmes */
.item-program {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.8rem;
  text-align: center;
}
.item-program .img {
  display: block;
  height: 300px;
  overflow: hidden;
}
.item-program .img img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  transition: .3s ease-in-out;
}
.item-program:hover .img img {
  transform: scale(1.05);
}
.item-program .info {
  /* position: absolute; */
  /* bottom: -50px; */
  /* left: 0; */
  /* width: 100%; */
  text-align: center;
  /* background-color: rgba(0, 0, 0, 0.4); */
  box-shadow: 0 -30px 50px rgb(0, 0, 0, 0.4);
  /* z-index: 1; */
  padding: 0.5rem;
  /* height: 90px; */
  transition: all .5s ease-in-out;
}
.item-program a.title {
  color: #444;
  font-weight: 400;
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}
.item-program a.title:hover {
  color: var(--greentLight);
}
.item-program .info p {
  color: #444;
  margin: 0;
  font-size: 16px;
}
/* //END => programmes */

/* START => About Us Full Layout */
.item-about-full {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}
.item-about-full:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.item-about-full .about-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-about-full .about-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}
.item-about-full:hover .about-image img {
  transform: scale(1.05);
}
.item-about-full .about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.item-about-full .about-content .title {
  color: #444;
  font-weight: 500;
  font-size: 1.3rem;
  transition: color 0.3s ease-in-out;
}
.item-about-full .about-content .title:hover {
  color: var(--greentLight);
  text-decoration: none;
}
.item-about-full .about-content p {
  color: #666;
  font-size: 16px;
  line-height: 1.6;
}
/* //END => About Us Full Layout */

/* START => Why Us */
.sec-title {
  position: relative;
}
.sec-title strong,
.sec-title h2 {
  padding-bottom: .5rem;
}
.blr {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  width: 10%;
  height: 5px;
}
.blr::before,
.blr::after {
  content: "";
  position: absolute;
  top: -3px;
  height: 10px;
  width: 10px;
  background-color: var(--greentLight);
  border-radius: 10px;
}
.blr::before { left: -2px; }
.blr::after { right: -2px; }

.blr i {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  background-color: var(--greentLight);
  width: 25px;
  height: 25px;
  line-height: 28px;
  vertical-align: middle;
  color: #fff;
  border-radius: 30px;
  transition: .5s;
}
section:hover .blr i {
  transform: translateX(-50%) rotate(0deg);
}

.items-whyus {
  padding-top: 4rem;
}
.item-whyus {
  text-align: center;
  position: relative;
  border: 1px solid #ddd;
  border-radius: 15px;
  padding-left: .5rem;
  padding-right: .5rem;
  padding-top: 7rem;
  min-height: 255px;
  box-shadow: 0 5px 10px rgb(0, 0, 0, .1);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.item-whyus:hover {
  box-shadow: 0 3px 10px rgb(0, 0, 0, .2);
  transform: scale(1.1);
}
.item-whyus .img {
  width: 60%;
  margin: auto;
  background-color: #fff;
  box-shadow: 0 0 10px #ddd;
  border-radius: 50%;
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem;
}
.item-whyus .img img {
  width: 100%;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: rotate(0deg) scale(0.8);
}
.item-whyus:hover .img img {
  transform: rotate(360deg) scale(0.9);
}
.item-whyus .info .title {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: .5rem;
  color: var(--greentLight);
}
/* //END => Why Us */

/* START => How It Works */
.sec-howit-works {
  background-color: #f9f9f9;
}
.sec-howit-works .txt {
  text-align: center;
  margin: auto;
  margin-top: 3rem;
  max-width: 800px;
}
.sec-howit-works .txt p {
  color: #666;
}
.btn-moredetails {
  /* background-color: #fff;
  color: var(--greentLight); */
  border: 2px solid var(--greentLightAlt);
  color: var(--greentLight);
  font-weight: 500;
  border-radius: 10px;
  padding: .8rem 1rem;
  display: inline-block;
  margin-top: 1rem;
}
.btn-moredetails:hover {
  background-color: var(--greentLightAlt);
  color: #fff;
  border-color: var(--greentLightAlt);
}
/* //END => How It Works */

/* START => About Us */
.sec-aboutus {
  /* background-color: #f9f9f9; */
}
/* //END => About Us */

/* START => Footer */
footer {
  background-color: var(--greentLight);
}
footer p,
footer li a,
footer .wedget-footer strong {
  color: #fff;
}

footer .wedget-footer strong {
  position: relative;
  padding-bottom: .5rem;
}
footer .wedget-footer strong::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--greentLightAlt);
  width: 100%;
  height: 1px;
}

footer li a {
  display: block;
  padding: .3rem 0;
}
footer li a:hover {
  color: #666;
}
footer li a i {
  width: 20px;
  text-align: center;
}
footer li a i.fa-whatsapp {
  height: 20px;
  line-height: 20px;
  border-radius: 50px;
}


.payments-imgs .img-pym {
  height: 27px;
  margin: auto .2rem;
}
.payments-imgs img {
  height: 100%;
}

.copyrights {
  border-top: 1px dashed #fff;
}
/* //END => Footer */

/* START =>  */
/* //END =>  */


/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/

.breadcrumb-page {
  background-size: cover;
  background-attachment: fixed;
  padding: 10rem 0 5rem 0;
  text-align: center;
  position: relative;
  z-index: 1;
}
.breadcrumb-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1;
}
.breadcrumb-page strong,
.breadcrumb-page h1 {
    font-size: 1.5rem;
    color: #fff;
    font-weight: bold;
    text-transform: capitalize;
    max-width: 1000px;
    margin: auto;
}
.breadcrumb-page ul li {
  margin: auto .3rem;
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
}
.breadcrumb-page ul li span {
  font-size: 1.5rem;
}
.breadcrumb-page ul li a {
  color: #eee;
}

/* START Page => Videos */
#videos-carousel .owl-nav [class*=owl-] {
  padding: 5px 20px !important;
  color: #FFF;
  background-color: var(--greentLight);
  outline: none;
  transition: all .5s;
}
#videos-carousel .owl-nav [class*=owl-]:hover {
  background-color: var(--greentLightAlt);
  border: 0;
  outline: unset;
  box-shadow: unset;
}

.item-video {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.8rem;
}
.item-video a {
  display: block;
}
.item-video .img {
  height: 250px;
}
.item-video .img img {
  transition: 1s;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.item-video:hover .img img {
  transform: scale(1.1);
}
.item-video .img i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
}
.pulse-effect {
  display: block;
  width: 50px !important;
  height: 50px !important;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  background-color: var(--greentLight);
  animation: shadow-pulse 1s infinite;
  font-size: 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: .3s;
}
@keyframes shadow-pulse {
  0% { box-shadow: 0 0 0 0px rgba(22, 160, 132, 0.4); }
  100% { box-shadow: 0 0 0 30px rgba(22, 160, 132, 0); }
}
.item-video:hover .img i.pulse-effect {
  background-color: var(--greentLightAlt);
  color: #fff;
}

.item-video .title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 -30px 50px rgb(0, 0, 0, 0.4);
  z-index: 1;
  padding: 0.5rem;
  transition: all .5s ease-in-out;
  color: #fff;
  font-weight: 500;
  display: block;
  font-size: 1rem;
  margin: 0;
}
.item-video .title:hover {
  color: var(--greentLight);
}
/* //END Page => Videos */

/* START Page => Program Details */
.slides-program .gallery-programmes .swiper-slide {
  border: 1px solid #ddd;
  height: 348px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slides-program .gallery-programmes .swiper-slide img {
  margin: auto;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-button-next.swiper-button-white,
.swiper-button-prev.swiper-button-white {
  outline: none;
  background-color: var(--greentLightAlt);
  width: 60px;
  height: 60px;
  color: #fff;
  border-radius: 10px;
}
.swiper-button-next.swiper-button-white:hover,
.swiper-button-prev.swiper-button-white:hover {
  background-color: var(--greentLight);
}

.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  font-size: 1.5rem;
}

.programe-details .txt {
  margin-top: 2rem;
}

.contact-us-form-request.box-requests {
  width: auto;
  position: static;
  transform: translate(0);
}
.contact-us-form-request.box-requests .row > div {
  margin-bottom: .5rem;
}
.contact-us-form-request.box-requests textarea {
  height: 100px;
  resize: none;
  line-height: initial;
}
/* //END Page => Program Details */

/* START Page => Pricing */
.box-pricing {
  margin-bottom: 3rem;
  margin-top: 3rem;
}
.title-pricing {
  background-color: var(--greentLight);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 30px;
}
.item-price {
  border: 1px solid #eee;
  margin-left: .4rem;
  margin-right: .4rem;
  max-width: calc(100% / 6);
  flex: 0 0 calc(100% / 6);
  overflow: hidden;
  padding-bottom: .5rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.item-price:hover {
  transform: scale(1.02);
}
.item-price .length-days {
  text-align: center;
  background-color: var(--greentLight);
  color: #fff;
  display: block;
  margin: auto;
  padding: 1rem .5rem;
  font-size: 1rem;
  font-weight: 500;
}
.item-price .per-monthe {
  padding: 1rem 0;
}
.item-price .per-monthe strong.h6 {
  color: #444;
}
.item-price .per-monthe strong.h2 {
  color: var(--greentLight);
  font-weight: bold;
}
.item-price .per-monthe strong.h4 {}
.item-price .price-details {
  background-color: var(--greentLight);
}
.item-price .price-details li {
  padding: .5rem .2rem;
  color: #fff;
  font-size: 13px;
}
.item-price .price-details li:not(:last-child) {
  border-bottom: 1px dashed var(--greentLightAlt);
}
.btn-request-price {
  text-align: center;
  background-color: var(--greentLightAlt);
  color: #fff;
  padding: .5rem;
  font-weight: 500;
  margin: auto;
  margin-top: 1rem;
  display: block;
  width: 150px;
  border-radius: 30px;
}
.btn-request-price:hover {
  background-color: var(--greentLight);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
  transform: translateY(-2px);
  color: #fff;
}
/* //END Page => Pricing */

/* START Page => Courses */
.item-course {
  margin-bottom: 1.8rem;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.item-course .img {
  overflow: hidden;
}
.item-course .img img {}
.item-course .info {
  text-align: center;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  background-color: rgba(22, 160, 132, 0.7);
  padding: 1rem 0;
  border-radius: 30px;
}
.item-course .info a.title {
  color: #fff;
  display: block;
  font-weight: 600;
  font-size: 1rem;
}
.item-course .info .btn-readmore {
  display: inline-block;
  padding: 5px 10px;
  background-color: var(--greentLight);
  color: #fff;
  border-radius: 30px;
  font-size: 13px;
  margin-top: .5rem;
  border: 1px solid #fff;
}
.item-course .info .btn-readmore:hover {
  background-color: var(--greentLightAlt);
  color: #fff;
  border: 1px solid var(--greentLightAlt);
}
/* //END Page => Courses */

/* START Page => Courses Details */
.course-details {
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
}
.course-videos iframe {
  width: 100% !important;
  height: 200px !important;
}
.page-course-details .txt strong {
  font-size: 1rem;
}
.page-course-details .txt p {
  font-size: 14px;
}
/* //END Page => Courses Details */


/* Start => Blogs */
.sec-blogs {}
.sec-blogs .blog-items {
}
.sec-blogs .blog-items .item {
  padding: 5px;
  margin-bottom: 1.5rem;
}
.sec-blogs .blog-items .item .img-blog {
  position: relative;
  overflow: hidden;
}
.sec-blogs .blog-items .item .img-blog a {
  display: block;
  height: 300px;
}
.sec-blogs .blog-items .item .img-blog img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}
.sec-blogs .blog-items .item .img-blog span.date {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 24px;
  color: #FFF;
  background-color: var(--greentLight);
  padding: 10px;
  border-radius: 0 20px 0 0;
}
.sec-blogs .blog-items .item .txt-info a.title {
  color: var(--greentLight);
  margin: 10px auto;
  display: block;
  font-size: 1rem;
  font-weight: 600;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}
.sec-blogs .blog-items .item .txt-info p {
    color: #666;
    height: 60px;
    overflow: hidden;
}
.sec-blogs .blog-items .item .txt-info a.btn-read-more {
  font-size: 14px;
  background-color: var(--greentLight);
  color: #fff;
  padding: 5px 10px;
  display: inline-block;
}
.sec-blogs .blog-items .item .txt-info a.btn-read-more:hover {
  background-color: var(--greentLightAlt);
  color: #fff;
}
.title-blog {
  position: relative;
  border-left: 5px solid var(--greentLight);
  padding-left: 20px;
}
.title-blog p {
  color: #555;
}
.txt-detail-blog p {
    color: #444;
    font-size: 14px;
}

.box-chating p {
    display: inline;
    padding: 6px;
    background-color: #0c901f;
    border-radius: 10px;
    font-size: 12px;
    color: #ffffff;
    margin-right: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

#picturesCarousel .owl-item img{height: 300px;}

.sec-home-videos p, .sec-home-pictures p{
    color: #1abc9c;
    font-weight: bold;
    font-size: larger;
}

.paypal-plan-wrap {
  padding: 10px;
  padding-bottom: 0;
}

.item-price .paypal-plan-wrap .paypal-buttons-context-iframe {
  min-width: auto !important;
}

.socail-sharing strong {
  color: #444;
}
.socail-sharing * {
  margin: auto .3rem;
}
.socail-sharing a i {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  transition: .3s;
}
.socail-sharing a:hover i {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
/* //END => Blogs */

/* Start => About Us */
.txt-about p {
  font-size: 1rem;
  color: #777;
}
/* //END => About Us */


/* START => Page Contact Us */
.page-contact {}

.page-contact .box-contact {
  max-width: 80%;
}
.page-contact .box-contact {
  margin: auto;
  background-color: #fff;
  padding: 30px 50px 50px 50px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.br-0 {
  border-radius: 0 !important;
}
.inf-contact h3 {
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--greentLight);
}
.inf-contact p {
  margin-bottom: 20px;
}
.inf-contact p a {
  color: #666;
  display: block;
}
.inf-contact p a:hover {
  color: var(--greentLight);
}
.inf-contact p a i {
  width: 30px;
  color: var(--greentLightAlt);
}

.page-contact .box-contact form textarea {
  height: 150px;
  resize: none;
}
.page-contact .box-contact form .btn-submit {
  background-color: var(--greentLightAlt);
  color: #fff;
  border: 0;
  box-shadow: unset;
  outline: none;
  display: block;
  width: 100%;
  padding: 1rem;
}
.page-contact .box-contact form .btn-submit:hover {
  background-color: var(--greentLight);
  color: #fff;
}

.social-footer {
  margin-top: 40px;
}
.social-footer li {
  display: inline-block;
}
.social-footer li i {
  color: #FFF;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
}
.fa-facebook-f {
  background-color: #3b5998;
}
.fa-twitter,
.fa-x-twitter {
  background-color: #000;
}
.fa-google-plus-g {
  background-color: #dd4b39;
}
.fa-instagram {
  background-color: #e95950;
}
.fa-tiktok {
  background-color: #000;
}
.fa-whatsapp {
  background-color: #4dc247;
}
.fa-linkedin-in {
  background-color: #007bb5;
}
.fa-youtube {
  background-color: #ff0000;
}

/* Official X (Twitter) icon rendering */
.fa-x-twitter:before,
.fa-x:before {
  content: "" !important;
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E") no-repeat center / contain;
  vertical-align: -0.1em;
}
/* //END => Page Contact Us */


.realted-boxes {
  background-color: #201313;
}
.box-realting {
  text-align: center;
  background-size: cover;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.title-relating {
  display: block;
  padding: .5rem;
  font-size: 1.2rem;
  font-weight: 500;
  background-color: var(--greentLight);
  color: #fff;
  border-radius: 15px 15px 0 0;
}
.box-realting ul {
  padding: 0;
  margin: 0;
}
.box-realting ul li {
  margin: 0;
}
.box-realting a {
  display: block;
  padding: .8rem;
  color: #333;
  font-weight: 500;
  border-bottom: 1px dotted #bbb;
  background-color: rgba(255, 255, 255, 0.9);
  transition: 0.3s;
}
.box-realting li:last-of-type a {
  border-bottom: 0;
  border-radius: 0 0 15px 15px;
}
.box-realting a:hover {
  color: #fff;
  background-color: rgba(26, 188, 156, 0.8);
  border-bottom: 1px dotted var(--greentLightAlt);
}

.btn-hlep-chat {
  line-height: 60px;
  text-align: center;
  /* background-color: var(--redColorAlt); */
  border: 0;
  outline: 0;
  display: block;
  position: fixed;
  right: 40px;
  bottom: 40px;
  border-radius: 50%;
  z-index: 990;
  transition: .5s;
}
.btn-hlep-chat img {
  width: 60px;
  height: 60px;
  transition: .5s;
}
.btn-hlep-chat:hover img {
  transform: scale(1.1) rotate(360deg);
}



.notes-pricing {
  border: 1px solid #ddd;
}
.notes-txt strong {
  color: var(--greentLight);
  font-size: 20px;
}
.notes-txt p {
  position: relative;
  font-size: 18px;
}
.notes-txt p i {
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--greentLight);
}






/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/
/*** New Edit: 08-12-2020 | 09:30 pm ***/

.item-program .info p {
    overflow: hidden;
    height: 120px;
}
.item-whyus {
    margin-bottom: 6rem;
}

.brand-logo img {
    max-height: 80px;
    /* position: absolute; */
    top: 0;
}

.fb_dialog.fb_dialog_advanced .fb_dialog_content iframe {
    bottom: 40px !important;
}

/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/
/*** New Edit: 12-12-2020 | 09:30 pm ***/






.box-requests {
    top: 55%;
  }
  
  .top-header {
    border-bottom: 1px solid rgba(255,255,255,0.5);
    background-color: rgba(0, 0, 0, .3);
    padding: 3px 0;
  }
  .top-header .left-top a {
    display: inline-block;
    color: #fff;
    font-weight: 500;
    padding: 0rem .5rem;
    border-right: 1px solid rgba(255,255,255,0.5);
  }
  .top-header .left-top a i {
    color: var(--greentLight);
  }
  .top-header .left-top a:hover {
    color: var(--greentLightAlt);
  }
  .social-top {
    border-right: 1px solid rgba(255,255,255,0.5);
    padding: 0rem .5rem;
  }
  .social-top a {
    margin: auto .2rem;
    display: block;
  }
  .social-top a i {
    transition: 0.5s;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
  }
  .social-top a:hover i {
    transform: scale(1.1);
  }
  .social-top a i.fa-facebook-f {
    background-color: #3b5998;
  }
  .social-top a i.fa-twitter,
  .social-top a i.fa-x-twitter {
    background-color: #000;
  }
  .social-top a i.fa-instagram {
    background-color: #e95950;
  }
  .social-top a i.fa-tiktok {
    background-color: #000;
  }
  .social-top a i.fa-whatsapp {
    background-color: #4dc247;
  }
  .social-top a i.fa-linkedin-in {
    background-color: #007bb5;
  }
  .social-top a i.fa-youtube {
    background-color: #ff0000;
  }
  .social-top a i.fa-telegram-plane {
    background-color: #0088cc;
  }
  .social-top a i.fa-pinterest-p {
    background-color: #cb2027;
  }
  .social-top a i.fa-envelope {
    background-color: #444;
  }
  
  .langs {
    padding: 0rem .5rem;
    border-right: 1px solid rgba(255,255,255,0.5);
  }
  .langs a {
    color: var(--greentLight);
    font-weight: 700;
  }
  .langs a:hover {
    color: var(--greentLightAlt);
  }
  
  
  .sec-videos .item-video iframe {
    height: 250px;
    width: 100%;
  }
  

.item-price {
  position: relative;
}
.item-price .length-days {
  padding-top: 4rem;
}
.img-discounting {
  background-image: url('../imgs/discount-bg.png');
  background-repeat: no-repeat;
  width: 60px;
  height: 60px;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
}
.img-discounting span {
    color: #fff;
    display: inline-block;
    position: absolute;
    top: 16px;
    width: 100%;
    transform: rotate(30deg);
    left: 0px;
    font-weight: 600;
    text-align: center;
}



.blog-recent-post {
  margin-top: 30px;
  border-radius: 6px;
  -webkit-filter: drop-shadow(0 0 12.5px rgba(0, 0, 0, 0.04));
  filter: drop-shadow(0 0 12.5px rgba(0, 0, 0, 0.04));
  background-color: #ffffff;
  border: 2px solid #ecf6ff;
  padding: 15px;
}
.blog-recent-post h3 {
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  padding-bottom: 35px;
}
.blog-recent-post-item {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}
.blog-recent-post-item img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
}
.blog-recent-post-item-text {
  padding-left: 10px;
}
.blog-recent-post-item-text a {
  font-size: 14px;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  color: var(--blackColor);
}
.blog-recent-post-item-text a:hover {
  color: var(--greenColor);
}
.blog-recent-post-date {}
.blog-recent-post-date i {}
.blog-recent-post-date span {
  font-size: 11px;
}

.img-blog-side {
    width: 127px;
    height: 80px;
}
.blog-recent-post-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}


@media (max-width: 767px) {
    .top-header {
      flex-direction: column;
    }
    .top-header > div:first-child {
      margin-bottom: .5rem;
    }
    .top-header .left-top a {
      display: inline-block;
      color: #fff;
      font-weight: 500;
      padding: 0rem .5rem;
      border-right: 1px solid rgba(255,255,255,0.5);
      font-size: 12px;
    }
    
    .breadcrumb-page strong,
    .breadcrumb-page h1 {
        font-size: 12px !important;
        max-width: 100%;
    }
    
    .breadcrumb-page {
        padding: 9rem 0 .2rem 0 !important;
    }
    
    .brand-logo img {
        max-height: 60px !important;
    }

}
  
/* START => Nav login link (green pill, inverts on hover) */
/* Vertical padding is reduced by the span's own padding + border (7+1 = 8px)
   so the link keeps the exact same height as the other nav links. */
.menu-tabs > ul > li > a.nav-login {
  padding-top: 22px;
  padding-bottom: 22px;
}
.main-menu.fixed .menu-tabs > ul > li > a.nav-login {
  padding-top: 12px;
  padding-bottom: 12px;
}
.menu-tabs > ul > li > a.nav-login > span,
.main-menu.fixed .menu-tabs > ul > li > a.nav-login > span {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 30px;
  background-color: var(--greentLightAlt);
  border: 1px solid var(--greentLightAlt);
  color: #fff;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.menu-tabs > ul > li > a.nav-login:hover > span,
.main-menu.fixed .menu-tabs > ul > li > a.nav-login:hover > span {
  background-color: #fff;
  border-color: #fff;
  color: var(--greentLightAlt);
}
/* //END => Nav login link */

/* START Page => Recorded Courses */
.sec-recorded-courses .course-card,
.course-more .course-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sec-recorded-courses .course-card:hover,
.course-more .course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
}
.course-card-img {
  display: block;
  position: relative;
  background-color: #eee;
}
.course-card-img img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}
.course-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  background-color: rgba(26, 188, 156, .9);
  opacity: 0;
  transition: opacity .2s ease;
}
.course-card:hover .course-card-play {
  opacity: 1;
}
.course-card-body {
  padding: 1rem;
}
.course-card-title {
  color: #333;
}
.course-card-title:hover {
  color: var(--greentLight);
}
.course-card-body p {
  color: #777;
  margin-bottom: .5rem;
}
.course-card-meta {
  color: var(--greentLight);
  font-size: 13px;
}

/* course details - player side */
.course-player-frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  background-color: #000;
}
.course-player-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.course-player-locked {
  border-radius: 8px;
  background-color: #2c3e50;
  color: #fff;
  text-align: center;
  padding: 3rem 1rem;
}
.course-player-locked i {
  font-size: 42px;
  margin-bottom: 1rem;
  display: block;
  color: var(--greentLightAlt);
}
.course-lesson-pane {
  padding-top: 1.2rem;
}
.course-lesson-heading {
  color: #333;
}
.course-lesson-duration {
  color: #999;
  font-size: 13px;
  font-weight: 400;
  margin: 0 .5rem;
}
.course-lesson-text {
  color: #666;
  line-height: 1.9;
}
.course-about .txt {
  color: #666;
  line-height: 1.9;
}

/* course details - curriculum side */
.course-curriculum {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.course-curriculum-head {
  padding: 1rem;
  background-color: #f7f7f7;
  border-bottom: 1px solid #e6e6e6;
}
.course-curriculum-head span {
  color: #888;
  font-size: 13px;
}
.course-curriculum-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 460px;
  overflow-y: auto;
}
.course-curriculum-list li + li {
  border-top: 1px solid #f0f0f0;
}
.course-lesson-item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: .6rem;
  padding: .8rem 1rem;
  background: none;
  border: 0;
  text-align: inherit;
  color: #444;
  transition: background-color .15s ease;
}
.course-lesson-item:hover {
  background-color: #f7fdfb;
  color: var(--greentLight);
  text-decoration: none;
}
.course-lesson-item.active {
  background-color: #e8f8f5;
  color: var(--greentLight);
  font-weight: 600;
}
.course-lesson-item.locked {
  color: #999;
}
.course-lesson-cover {
  flex: 0 0 64px;
  height: 44px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #eee;
}
.course-lesson-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-lesson-name {
  flex: 1 1 auto;
  line-height: 1.5;
}
.course-lesson-name small {
  display: block;
  color: #aaa;
  font-size: 11px;
  font-weight: 400;
}
.course-lesson-badge {
  display: inline-block;
  background-color: var(--greentLightAlt);
  color: #fff;
  border-radius: 10px;
  padding: 0 .5rem;
  font-size: 11px;
  margin: 0 .3rem;
}
.course-lesson-icon,
.course-lesson-time {
  flex: 0 0 auto;
  font-size: 12px;
  color: #aaa;
}
.course-curriculum-cta {
  padding: 1rem;
  border-top: 1px solid #e6e6e6;
  text-align: center;
}
.course-curriculum-cta p {
  color: #777;
  margin-bottom: 0;
}
/* //END Page => Recorded Courses */

/* course details - overview above the lessons */
.sec-course-intro {
  background-color: #fafafa;
}
.course-intro-img img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
}
.course-intro-title {
  color: #333;
}
.course-intro-lead {
  color: #666;
  font-size: 15px;
  line-height: 1.9;
}
.course-intro-meta {
  margin-bottom: 1rem;
}
.course-intro-meta span {
  display: inline-block;
  color: var(--greentLight);
  font-size: 13px;
  margin-inline-end: 1rem;
}
.course-intro-txt {
  color: #666;
  line-height: 1.9;
}

/* course overview - gallery, price and actions */
.course-gallery-main {
  border-radius: 8px;
  overflow: hidden;
  background-color: #eee;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
}
.course-gallery-main img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.course-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin-top: .6rem;
}
.course-gallery-thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: none;
  line-height: 0;
}
.course-gallery-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.course-gallery-thumb.active,
.course-gallery-thumb:hover {
  border-color: var(--greentLightAlt);
}
.course-buy {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 1.5rem;
}
.course-price {
  font-size: 30px;
  font-weight: 700;
  color: #333;
  margin-bottom: 1rem;
}
.course-price-sm {
  font-size: 20px;
  margin-bottom: .5rem;
}
.course-owned {
  color: var(--greentLight);
  font-weight: 600;
  margin-bottom: 1rem;
}
.btn-course-primary,
.btn-course-secondary {
  display: block;
  width: 100%;
  text-align: center;
  padding: .7rem;
  border-radius: 30px;
  font-weight: 500;
  margin-top: .6rem;
  transition: all .2s ease;
}
.btn-course-primary {
  background-color: var(--greentLightAlt);
  color: #fff;
}
.btn-course-primary:hover {
  background-color: var(--greentLight);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
  transform: translateY(-2px);
}
.btn-course-secondary {
  border: 1px solid var(--greentLightAlt);
  color: var(--greentLight);
}
.btn-course-secondary:hover {
  background-color: #e8f8f5;
  color: var(--greentLight);
}
.course-back-link {
  display: inline-block;
  color: #888;
  margin-bottom: 1.2rem;
}
.course-back-link:hover {
  color: var(--greentLight);
}

/* on-site paypal checkout */
.course-checkout-box {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}
.course-checkout-head {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.course-checkout-head img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.course-checkout-note {
  color: #888;
  font-size: 13px;
  margin-top: 1rem;
}
.course-card-price {
  float: right;
  font-weight: 700;
  color: #333;
}
.course-checkout-error {
  color: #c0392b;
  font-size: 14px;
  margin-top: 1rem;
}

/* START Page => Recorded courses hero banner */
.courses-hero {
  position: relative;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* the header sits absolutely over the page, so the top padding has to clear it */
  padding: 11rem 0 5rem 0;
  text-align: center;
}
.courses-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* darker at the foot so the button keeps its contrast */
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .72) 100%);
  z-index: -1;
}
.courses-hero-inner {
  max-width: 820px;
  margin: auto;
}
.courses-hero-title {
  color: #fff;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: .75rem;
}
.courses-hero-tagline {
  display: inline-block;
  color: #fff;
  background-color: var(--greentLightAlt);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .3px;
  padding: .4rem 1.1rem;
  border-radius: 30px;
  margin-bottom: 1.5rem;
}
.courses-hero-text {
  color: rgba(255, 255, 255, .88);
  font-size: 1.05rem;
  line-height: 1.9;
  margin-bottom: 1rem;
}
.courses-hero-cta {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1.75rem;
}
.courses-hero-btn {
  display: inline-block;
  background-color: var(--greentLightAlt);
  color: #fff;
  font-weight: 500;
  padding: .7rem 2.2rem;
  border-radius: 30px;
  transition: all .2s ease;
}
.courses-hero-btn:hover {
  background-color: var(--greentLight);
  color: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .3);
  transform: translateY(-2px);
}
/* //END Page => Recorded courses hero banner */

/* START Page => Course Details Hero Slider */
.sec-course-hero {
  position: relative;
  overflow: hidden;
  background-color: #1a1a1a;
}
.sec-course-hero .home-slider,
.sec-course-hero .home-slider .owl-stage-outer,
.sec-course-hero .home-slider .owl-stage,
.sec-course-hero .home-slider .owl-item,
.sec-course-hero .home-slider .item {
  height: 72vh;
  min-height: 520px;
  max-height: 680px;
}
.sec-course-hero .home-slider .item {
  position: relative;
  background-color: #111;
  overflow: hidden;
}
.sec-course-hero .home-slider .item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.58) 55%, rgba(0, 0, 0, 0.75) 100%);
  z-index: 2;
}
.sec-course-hero .home-slider .item .img-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.sec-course-hero .home-slider .item .img-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sec-course-hero .home-slider .item .item-txt {
  position: absolute;
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
  width: 50%;
  max-width: 620px;
  z-index: 3;
  color: #fff;
  text-align: left;
}
.sec-course-hero .home-slider .item .item-txt h1,
.sec-course-hero .home-slider .item .item-txt h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: .85rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.sec-course-hero .home-slider .item .item-txt p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.25rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  font-weight: 400 !important;
}
.course-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}
.course-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem 1rem;
  border-radius: 20px;
  font-size: .88rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.course-badge i {
  color: var(--greentLightAlt);
}
.course-badge.course-badge-free {
  background: rgba(43, 182, 115, 0.3);
  border-color: var(--greentLightAlt);
  color: #a8f5d0;
}
.course-badge.course-badge-free i {
  color: #55efc4;
}

/* Floating Course Buy Card on the Hero */
.box-course-hero-buy {
  position: absolute;
  top: 50%;
  right: 6%;
  transform: translateY(-50%);
  z-index: 8;
  width: 375px;
  max-width: 90%;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  padding: 2.2rem 1.75rem 2rem 1.75rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.box-course-hero-buy .course-buy-header {
  margin-bottom: .85rem;
}
.box-course-hero-buy .course-price {
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--greentLight);
  margin-bottom: 0;
  line-height: 1.1;
  padding-top: .15rem;
}
.box-course-hero-buy .course-price-contact {
  font-size: 1.6rem;
  color: #333;
}
.box-course-hero-buy .course-owned {
  background: #e8f8f5;
  color: #16a085;
  padding: .6rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid #a3e4d7;
  display: block;
}
.box-course-hero-buy .course-quick-features {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0 0 0;
  border-top: 1px solid #edf0ee;
  padding-top: 1rem;
}
.box-course-hero-buy .course-quick-features li {
  font-size: .88rem;
  color: #555;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.box-course-hero-buy .course-quick-features li i {
  color: var(--greentLightAlt);
  font-size: .85rem;
  width: 16px;
  text-align: center;
}

/* Hero Carousel Controls Styling */
.sec-course-hero .home-slider .owl-nav {
  display: none !important;
}
.sec-course-hero .home-slider.owl-theme .owl-dots {
  position: absolute !important;
  top: auto !important;
  bottom: 22px !important;
  left: 6% !important;
  right: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  z-index: 10 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
}
.sec-course-hero .home-slider.owl-theme .owl-dots .owl-dot {
  display: inline-block !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.sec-course-hero .home-slider.owl-theme .owl-dots .owl-dot span {
  width: 10px !important;
  height: 10px !important;
  margin: 0 4px !important;
  background: rgba(255, 255, 255, 0.45) !important;
  border: none !important;
  border-radius: 20px !important;
  transition: all .25s ease !important;
  display: block !important;
}
.sec-course-hero .home-slider.owl-theme .owl-dots .owl-dot.active span {
  background: var(--greentLightAlt) !important;
  width: 26px !important;
}

/* Course Details Body Cards */
.sec-course-details-body {
  background-color: #fbfcfa;
}
.course-section-card {
  background: #ffffff;
  border: 1px solid #e7ebe9;
  border-radius: 12px;
  padding: 2rem 2.2rem;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.04);
}
.course-section-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 1.3rem;
  border-bottom: 2px solid #f1f5f3;
  padding-bottom: .75rem;
}
.course-curriculum-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.curriculum-item {
  background: #f8faf9;
  border: 1px solid #e5ede9;
  border-radius: 8px;
  padding: .95rem 1.25rem;
  transition: all .2s ease;
}
.curriculum-item:hover {
  background: #f0f7f3;
  border-color: #c9e3d5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.curriculum-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e2efe8;
  color: var(--greentLight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .88rem;
  flex-shrink: 0;
}
.curriculum-title {
  font-size: 1rem;
  color: #2b2b2b;
  font-weight: 600;
  margin-bottom: 2px;
}
.btn-curriculum-play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--greentLightAlt);
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  transition: transform .2s ease, background-color .2s ease;
}
.btn-curriculum-play:hover {
  background: var(--greentLight);
  transform: scale(1.08);
}
.btn-curriculum-locked {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #edf0ee;
  color: #aaa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}

/* Sidebar Benefits Card */
.course-sidebar-card {
  background: #ffffff;
  border: 1px solid #e7ebe9;
  border-radius: 12px;
  padding: 1.8rem 1.6rem;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.04);
}
.sidebar-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 1.2rem;
  padding-bottom: .65rem;
  border-bottom: 2px solid #f1f5f3;
}
.sidebar-benefit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: 1.25rem;
}
.sidebar-benefit-list li i {
  color: var(--greentLightAlt);
  font-size: 1.25rem;
  margin-top: 3px;
  flex-shrink: 0;
}
.sidebar-benefit-list li strong {
  display: block;
  font-size: .95rem;
  color: #333;
  margin-bottom: 2px;
}
.sidebar-benefit-list li p {
  font-size: .84rem;
  color: #777;
  margin: 0;
  line-height: 1.45;
}
.btn-sidebar-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  padding: .75rem 1rem;
  background-color: #25d366;
  color: #fff !important;
  font-weight: 600;
  border-radius: 25px;
  transition: all .2s ease;
}
.btn-sidebar-whatsapp:hover {
  background-color: #1ebc59;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
  transform: translateY(-1px);
}
/* //END Page => Course Details Hero Slider */

/* All-Courses Subscription VIP Offer Banner */
.sec-all-courses-offer {
  background: #f4f8f6;
  position: relative;
}

.all-courses-offer-card {
  background: linear-gradient(135deg, #0b3d32 0%, #115746 55%, #187d65 100%);
  border-radius: 20px;
  padding: 3rem 2.8rem;
  box-shadow: 0 16px 40px rgba(11, 61, 50, 0.22);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.all-courses-offer-card::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(43, 182, 115, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.all-courses-offer-card::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: 20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(243, 156, 18, 0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.offer-badge-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}

.offer-vip-badge {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.35);
  letter-spacing: 0.5px;
}

.offer-discount-pill {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffeaa7;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 50px;
  letter-spacing: 0.3px;
}

.offer-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  margin-bottom: 0.9rem;
}

.offer-description {
  color: #d2ede2;
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.offer-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1.25rem;
}

.offer-features-list li {
  color: #eaf8f2;
  font-size: 0.96rem;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.45;
}

.offer-features-list li i {
  color: #2ecc71;
  font-size: 1.15rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.offer-pricing-box {
  background: #ffffff;
  border-radius: 16px;
  padding: 2.2rem 2rem;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  color: #222;
  position: relative;
  z-index: 2;
}

.offer-pricing-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #16a085;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
}

.offer-price-tag {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 0.35rem;
}

.offer-old-price {
  font-size: 1.4rem;
  color: #a0a0a0;
  text-decoration: line-through;
  font-weight: 500;
}

.offer-current-price {
  font-size: 2.8rem;
  font-weight: 900;
  color: #115746;
  line-height: 1;
}

.offer-period-hint {
  color: #777;
  font-size: 0.9rem;
  margin-bottom: 1.4rem;
  font-weight: 500;
}

.btn-offer-cta {
  background: linear-gradient(135deg, #2bb673 0%, #16a085 100%);
  color: #ffffff !important;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.9rem 1.6rem;
  border-radius: 50px;
  display: block;
  width: 100%;
  text-align: center;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(43, 182, 115, 0.4);
  text-decoration: none !important;
}

.btn-offer-cta:hover {
  background: linear-gradient(135deg, #239a60 0%, #12826c 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(43, 182, 115, 0.5);
  color: #ffffff !important;
}

.btn-offer-browse {
  background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%) !important;
  box-shadow: 0 6px 18px rgba(52, 73, 94, 0.35) !important;
}

.btn-offer-browse:hover {
  background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%) !important;
  box-shadow: 0 10px 24px rgba(52, 73, 94, 0.45) !important;
}

.offer-subscribed-badge {
  background: #e8f8f5;
  border: 1px solid #a3e4d7;
  color: #16a085;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 0.92rem;
}

.offer-guarantee-note {
  font-size: 0.83rem;
  color: #777;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Terms & Conditions Page */
.sec-terms {
  background-color: #fbfcfa;
}
.terms-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e7ebe9;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  padding: 3rem 2.8rem;
}
.terms-card h2,
.terms-card h3 {
  color: #222;
  font-weight: 700;
  margin-top: 1.6rem;
  margin-bottom: 0.75rem;
}
.terms-card p,
.terms-card li {
  color: #555;
  font-size: 0.98rem;
  line-height: 1.75;
}
.terms-card ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.2rem;
}
@media (max-width: 575px) {
  .terms-card {
    padding: 1.8rem 1.25rem;
    border-radius: 12px;
  }
}



/* Profile dropdown alignment to prevent page overflow */
.dropdown-profile {
    left: auto !important;
    right: 0 !important;
}
html[dir="rtl"] .dropdown-profile {
    right: auto !important;
    left: 0 !important;
}