html, body {
    width: 100%;
    overflow-x: hidden;
}
.us {
    color: rgb(218, 98, 0);
}
.mr-2 {
    margin-right: 1.5em;
}
.space1 {
    margin-top: 3em;
    margin-bottom: 5em;
}
.space2 {
    margin-top: 1.5em;
    margin-bottom: 1em;
}
.note {
    font-size: 12px;
}
.price-fig {
    font-family: 'Abril Fatface';
    font-size: 1.2em;
}
h1, h3 {
    font-family: 'Abril Fatface';
}
/* h5 {
    color: rgb(218, 98, 0);
    font-weight: bold;
} */
#fiftyperc {
    border-color: #555555;
    cursor: pointer;
}
.red {
    color: white;
    background-color: red;
}
.cta {
    background-image: linear-gradient(to right, rgb(245, 131, 0), rgb(30, 0, 165));
    color: white;
    padding-top: 0.3em;
    padding-bottom: 1em;
    font-size: 14px;
    position: fixed;
    z-index: 3;
}
.cta a {
    color: white;
    text-decoration: none;
}
.cta span {
    position: absolute;
    top: 0.2em;
    right: 4em;
    cursor: pointer;
}
.fa-chevron-down {
    font-size: 0.8em;
}
.green {
    color: green;
}
.cartCont, .favCont {
    position: relative;
    text-align: center;
    padding: 2px;
}
.cartInner, .favInner {
    position: absolute;
    font-size: 12px;
    top: -0.8em;
    left: -1.1em;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    
}
.button {
    padding: 0.5em 1em;
    background-image: linear-gradient(to right, rgb(218, 98, 0),rgb(255, 0, 0));
    color: white !important;
    text-decoration: none;
    border-radius: 0;
    cursor: pointer;
} 
.button:hover {
    background-image: linear-gradient(to right, rgb(114, 114, 114), rgb(165, 165, 165));
}
.bg-green { /*Note: This must come after the .button class */
    background-image: linear-gradient(to right, green,green);
    color: white;
}
.button-gray {
    padding: 0.5em 1em;
    background-image: linear-gradient(to right, gray,gray);
    color: white;
    text-decoration: none;
    border-radius: 0;
} 
.disable-btn {
    background-image: linear-gradient(to right, gray,gray);
    color: white;
    cursor: not-allowed;
    pointer-events: none;
 }
.button-del {
    padding: 0.2em 0.5em;
    background-color: rgb(255, 186, 186);
    color: red;
    text-decoration: none;
    border-radius: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 1px;
} 
.button-del:hover {
    border-color: rgb(255, 186, 186);
}  
#chkt {
    width: 100%;
}
.ripple {
    background-position: center;
    transition: background 1.2s;
    border-style: solid;
    border-radius: 1px;
    border-color: transparent;
}
.ripple:hover {
    background: transparent radial-gradient(circle, transparent 1%, rgb(218, 98, 0) 1%) center/15000%;
    border-color: rgb(218, 98, 0);
}
.ripple:active {
    background-color: #6eb9f7;
    background-size: 100%;
    transition: background 0s;
}
.atc { /*atc means add to cart*/
    color: white;
    text-decoration: none;
}
.atc-cont:hover {
    cursor: pointer;
}
/*
button {
    padding: 12px 18px;
    font-size: 16px;
    text-transform: uppercase;
    padding: 0.5em 1em;
    background: rgb(218, 98, 0);
    color: white;
    box-shadow: 0 0 4px #555555;
    outline: none;
} */
.no-result {
    background-color: rgb(245, 245, 245);
    text-align: center;
    margin-top: 1em;
    padding-top: 1.5em;
    height: 5em;
}
#navigations {
    margin-top: 2em;
    z-index: 3;
    width: 100%;
}
#navigations .container-fluid {
    padding: 0 0.5em 0.5em 0.5em;
}
#navigations .mainc {
    background: white;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 0.5em;
    padding-bottom: 0.8em;
    box-shadow: 0 10px 10px #2c2c2c;
}
#navigations img {
    max-width: 100%;
}

.login {
    border-style: solid;
    border-width: 1px;
    padding: 0.5em;
}
.logout {
    border-color: red;
    border-style: solid;
    border-width: 1px;
    padding: 0.5em 1em;
}
.logout a {
    color: red !important;
}
.signup {
    border-style: solid;
    border-width: 1px;
    padding: 0.5em 1em;
    background: black;
}
.signup a {
    color: white !important;
}
.fa-heart, .fa-cart-shopping {
    font-size: 1.3em;
    cursor: pointer;
}
#navigations {
    position: fixed;
}
#navigations .navs-right {
    float: inline-end;
}
#banner-home {
    height: 110dvh;
    background-image: linear-gradient(to right, rgb(30, 0, 165), rgb(245, 131, 0));
    color: white;
}
.fa-star {
    font-size: 0.8em;
    color: rgb(218, 98, 0);
}
#why-us {
    background: #eff3f8;
    position: relative;
    padding-bottom: 10em;
}
#why-us p {
    font-size: 20px;
    font-family: 'Open Sans display';
}
#why-us .container {
    padding: 1em;
}
#why-us .svg-area svg {
    position: absolute;
    bottom: -0.5em;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
#courses {
    position: relative;
    padding-top: 2em;
    padding-bottom: 10em;
}
#courses .dd {
    box-shadow: -5px 10px 10px #d4d4d4;
    padding: 0;
    margin-top: 1.5em;
}
#courses .dd img {
    width: 100%;
}
#courses .cont {
    padding: 1em;
}
#courses .cont > p {
    font-size: 20px;
    font-family: 'Abril Fatface'
}
#courses .bk span {
    float: inline-end;
}
#courses .bk .fa-heart {
    font-size: 1em;
    margin-right: 1em;
}
#courses .bk .fa-heart:hover, #courses .bk span .fa-cart-shopping:hover {
    color: green;
}
#courses .bk span .fa-cart-shopping {
    font-size: 1em;
}
#courses .papers p {
    font-size: 0.8em;
    float: inline-end;
}
#courses .svg-area svg {
    position: absolute;
    bottom: -0.5em;
}
#testimonials {
    background: #eff3f8;
    padding-bottom: 15em;
    position: relative;
}
#testimonials h1 {
    margin-bottom: 1em;
}
#testimonials .te {
    box-shadow: -5px 10px 10px #d4d4d4;
    padding: 1em;
    background: white;
    border-end-end-radius: 3em;
}
#testimonials .name {
    font-weight: bold;
    font-size: 12px;
}
#testimonials .name p {
    float: inline-end;
    margin-right: 1em;
}
#testimonials .word {
    margin-bottom: 2em;
    font-style: italic;
}
#testimonials .svg-area svg {
    position: absolute;
    bottom: -0.5em;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
#learn {
    text-align: center;
    padding-top: 1em;
    position: relative;
}
#learn .svg-area svg {
    rotate: 180deg;
    position: absolute;
    margin-top: -0.5em;
    display: block;       /* Can't tell why this is needful*/
}
footer {
    background-image: linear-gradient(to right, rgb(30, 0, 165), rgb(245, 131, 0));
    color: white;
    padding-top: 10em;
    padding-bottom: 1.5em;
}
footer .links a {
    display: block;
    text-decoration: none;
    color: white;
    padding: 0.5em 1em 0.5em 0;
}
footer img {
    width: 100%;
}
footer .copyright, footer .privacy {
    font-size: 14px;
    padding-top: 0.5em;
}
footer #developer a {
    text-decoration: none;
    color: rgb(255, 128, 128);
}
footer #developer a:hover {
    text-decoration: underline;
}
footer .privacy a {
    float: inline-end;
    color: white;
    text-decoration: none;
}

/* ABOUT PAGE */
#banner-about {
    height: 100dvh;
    background-image: url('assets/about.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
#banner-about .cont {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
    background: white;
    right: 5em;
    padding: 1em;
    width: 30%;
}
#banner-about p {
    padding-top: 0.5em;
    padding-bottom: 1.5em;
    font-family: 'Open Sans display';
    font-size: 20px;
}
#banner-about .svg-area svg {
    bottom: 1em;
    position: absolute;
    z-index: 2;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
#banner-about .svg-area svg:nth-child(2) {
    margin-bottom: 1em;
} 
#mission, #story {
    padding-bottom: 7em;
}
#mission p, #story p {
    font-size: 18px;
    margin-top: 1em;
    margin-bottom: 2em;
}
#mission img, #story img, #impact img {
    width: 100%;
}
#story img {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
#impact {
    padding-bottom: 7em;
}
#impact p {
    font-size: 18px;
}
#impact .glass {
    width: 30%;
    padding: 1em 2em;
    text-align: center;
    background-image: linear-gradient(to right, rgb(218, 98, 0),rgb(255, 0, 0));
    color: white;
    display: inline-block;
    margin: 1em;
}
#impact .bp {
    text-align: center;
}
#impact .glass-cont { 
    width: 100%;
    display: block;
    margin: auto;
}
#impact .glass span:nth-child(2) {
    font-size: 14px;
}
#impact .a {
    border-end-start-radius: 3em;
    border-start-end-radius: 3em;
}
#impact .b {
    border-start-start-radius: 3em;
    border-end-end-radius: 3em;
}
#impact .c {
    border-start-start-radius: 3em;
    border-end-end-radius: 3em;
}
#impact .d {
    border-end-start-radius: 3em;
    border-start-end-radius: 3em;
}
#impact .glass span:nth-child(1) {
    font-size: 3em;
    display: block;
    font-weight: bold;
}
#team {
    position: relative;
}
#team .container {
    padding-bottom: 5em;
}
#team .dd {
    box-shadow: -5px 10px 10px #d4d4d4;
    padding: 0;
    margin-top: 2em;
}
#team .cont {
    text-align: center;
    padding-top: 1em;
    padding-bottom: 2em;
}
#team .cont span {
    font-size: 14px;
}
#team img {
    width: 100%;
}
#team hr {
    margin: 0;
}
#team .bio {
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
}
#team a {
    text-decoration: none;
    color: rgb(75, 75, 75);
    padding-bottom: 1em;
    font-weight: bold;
}
#team .svg-area svg {
    position: absolute;
    rotate: 180deg;
    margin-top: -0.5em;
}

/* COURSES PAGE */
#banner-courses {
    height: 100dvh;
    background-image: url('assets/course.jpg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
#banner-courses .cont {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
    background: white;
    margin-left: 2em;
    padding: 1em;
    width: 30%;
}
#banner-courses p {
    padding-top: 0.5em;
    padding-bottom: 1.5em;
    font-family: 'Open Sans display';
    font-size: 20px;
}
#banner-courses .svg-area svg {
    bottom: 1em;
    position: absolute;
    z-index: 2;
    z-index: 1;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
#banner-courses .svg-area svg:nth-child(2) {
    margin-bottom: 1em;
} 
#all-courses {
    position: relative;
}
#all-courses .container {
    padding-bottom: 3em;
}
#all-courses .dd {
    box-shadow: -5px 10px 10px #d4d4d4;
    padding: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #eff3f8;
    margin-bottom: 1em;
}
#all-courses .dd img {
    width: 100%;
}
#all-courses .cont {
    padding: 1em 1em 0 1em;
}
#all-courses .cont > p {
    font-size: 20px;
    font-family: 'Abril Fatface'
}
#all-courses .bk .fa-heart {
    float: inline-end;
}
#all-courses .papers p {
    font-size: 0.8em;
    float: inline-end;
}
#all-courses .right {
    padding-top: 1em;
    padding-right: 1em;
}
#all-courses .course-space {
    margin-top: 2em;
}
#all-courses .svg-area svg {
    position: absolute;
    rotate: 180deg;
    margin-top: -0.5em;
}

/* LOGIN, SIGN UP , REGISTER*/
#login, #register {
    position: relative;
}
#login .container, #register .container {
    width: 80%;
    padding-top: 10em;
    padding-bottom: 5em;
}
#login form, #register form {
    width: 50%;
    display: block;
    margin: auto;
}
#login input, #register input, #register select {
    color: black;
    margin-bottom: 1em;
    border-radius: 0;
}
#login label, #register label {
    font-family: 'Open Sans display';
}
#login .fpwd, #register .fpwd {
    display: block;
    text-align: center;
    margin-top: 0.5em;
    text-decoration: none;
    color: black;
}
#login .fpwd:hover, #register .fpwd:hover {
    text-decoration: underline;
}
#login form hr, #register form hr {
    margin-top: 3em;
}
#register .cts , #login .cts {
    background: #d4d4d4;
    padding: 3em 5em;
}
#register .me-2 {
    margin-left: 2em;
}
#register .d-grid {
    margin-top: 2em;
}
#register h3, #login h3 {
    text-align: center;
    margin-bottom: 1em;
}
#login .svg-area svg, #register .svg-area svg {
    rotate: 180deg;
    position: absolute;
    margin-top: -0.5em;
}

/* CART */
#cart {
    position: relative;
}
#cart .container {
    margin-bottom: 2em;
}
#cart .duru {
    padding-top: 10em;
}
#cart h1, #cart h3 {
    display: inline-block;
}
#cart .fa-cart-shopping {
    font-size: 1em;
}
#cart .d-add {
    float: inline-end;
    font-size: 1.5em;
    margin-right: 0.5em;
}
#cart .hd2 {
    background-color: #d4d4d4;
    padding: 0.5em 1em;
}
#cart .hd3 {
    margin-top: 1em;
    padding: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #eff3f8;
}
#cart .hd3 img {
    width: 80%;
}
#cart .hd3 p {
    font-size: 24px;
}
#cart .summary {
    box-shadow: -5px 10px 10px #d4d4d4;
    padding: 1em;
    background: white;
}
#cart .tt {
    display: flex;
}
#cart .tt p:nth-child(1) {
    flex: 2;
}
#cart .tt p:nth-child(2) {
    flex: 1;
}
#cart .svg-area svg {
    rotate: 180deg;
    position: absolute;
    margin-top: -0.5em;
}
.rg {
    display: inline-block;
}
.rg:nth-child(1), .rg:nth-child(3) {
    width: 20%;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: #a0a0a0;
    padding: 0.1em;
    background-color: #a0a0a0;
    cursor: pointer;
}
.rg:nth-child(3) {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.rg:nth-child(1) {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.rg:nth-child(2) {
    width: 55%;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: #555555;
    padding: 0.1em;
}

/* SUCCESS */
#success {
    position: relative;
}
#success .container {
    height: 30em;
    width: 80%;
    text-align: center;
}
#success .duru {
    padding-top: 10em;
}
#success .cont .row:nth-child(3) {
    margin-top: 3em;
}
#success .cont .row:nth-child(3) a {
    color: black;
}
#success .svg-area svg {
    rotate: 180deg;
    position: absolute;
    margin-top: -0.5em;
}

/* SUCCESS OR FAILURE POP UP*/
.success {
    background-color: rgba(0, 128, 0, 0.7);
}
.failed {
    background-color: rgba(255, 0, 0, 0.7);
}
.alert-pop {
    position: absolute;
    margin-top: 0.5em;
    right: 0;
    padding: 1.2em;
    color: white;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s; 
}
.fadeIn {
    opacity: 1;
}
/***************************
*** WhatsApp Floating Icon with Text
****************************/
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: white;
  border-radius: 50px;
  padding: 10px 15px;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-weight: 500;
  display: flex;
  align-items: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: transform 0.2s ease-in-out;
}

.whatsapp-float:hover {
  transform: scale(1.05);
}

.whatsapp-float img {
  width: 28px;
  height: 28px;
  margin-right: 10px;
}

.wa-text {
  font-size: 16px;
  color: white;
  white-space: nowrap;
}

/* Optional: Make it more compact on smaller screens */
@media (max-width: 576px) {
  .wa-text {
    display: none;
  }

  .whatsapp-float {
    border-radius: 50%;
    padding: 12px;
  }

  .whatsapp-float img {
    margin-right: 0;
  }
}
/***************************
*** FADE IN SCROLL 
****************************/
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}
.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}
/***************************
*** TYPING EFFECT
****************************/
.typing {
    color: #ffeb3b;
    display: inline-block;
    animation: blinkCursor 0.7s step-end infinite;
}

@keyframes blinkCursor {
    from, to { border-color: transparent; }
    50% { border-color: white; }
}
/***************************
*** BIG SCREEN MEDIA QUERY
****************************/
@media screen and (min-width: 769px) {
    #navigations .navs-left, #navigations .navs-right {
        padding: 1em;
    }
    #navigations .navs-right .side-space {
        margin-right: 0.5em;
    }
    #navigations .navs-right span a {
        text-decoration: none;
        padding: 0.5em;
        color: black;
    }
    #navigations .navs-left a  {
        text-decoration: none;
        padding: 1em;
        color: black;
        position: relative;
        text-align: center;
    }
    #navigations .navs-left a hr {
        position: absolute;
        width: 0;
        left: 0.5em;
        margin-top: 5px;
        margin-bottom: 5px;
        transition: width 0.5s;
    }
    #navigations .navs-left a:hover hr {
        width: 80%;
    }
    #navigations .menu {
        display: none;
    }
    #banner-home .container-fluid {
        position: absolute;
        top: 55%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 2;
        padding-top: 2em;
        padding-bottom: 2em;
    }
    #banner-home h1 {
        max-width: 60%;
        display: block;
        margin: auto;
    }
    #banner-home p {
        padding-top: 0.5em;
        padding-bottom: 1.5em;
        width: 40%;
        margin: auto;
        font-family: 'Open Sans display';
        font-size: 20px;
    }
    #banner-home .svg-area svg {
        position: absolute;
        bottom: -5em;
    }
}
/* SMALL SCREEN */
@media screen and (max-width: 768px) {
    #navigations .navs-left {
        margin-top: 2em;
    }
    #navigations .navs-left a  {
        display: block;
        text-decoration: none;
        padding: 0.5em 0;
        color: black;
        position: relative;
    }
    #navigations .navs-left a hr {
        left: 0.5em;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    #navigations .navs-right {
        margin-top: 1em;
        margin-bottom: 1em;
    }
    #navigations .navs-right span a {
        text-decoration: none;
        color: black;
    }
    #navigations .navs-right .side-space {
        margin-right: 0.5em;
    }
    #navigations .mobnav {
        display: none;
        height: 100dvh;
    }
    #navigations img {
        max-width: 50%;
        display: inline-block;
    }
    #navigations .menu {
        display: inline;
        float: right;
        cursor: pointer;
    }
    #banner-home .container-fluid {
        position: absolute;
        top: 55%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 2;
        padding-top: 4em;
        padding-bottom: 2em;
    }
    #banner-home p {
        padding-top: 0.5em;
        padding-bottom: 1.5em;
        width: 90%;
        margin: auto;
        font-family: 'Open Sans display';
    }
    #banner-home .svg-area svg {
        position: absolute;
        bottom: -4em;
    }
    #why-us {
        padding-top: 3em;
        padding-bottom: 7em;
    }
    #why-us img {
        max-width: 100%;
    }
    #why-us .button {
        display: none;
    }
    #courses {
        padding-top: 4em;
        padding-bottom: 4em;
    }
    #testimonials {
        padding-top: 2em;
        padding-bottom: 8em;
    }
    #testimonials .te {
        margin-bottom: 1em;
    }
    #learn {
        padding-top: 2em;
        padding-bottom: 2em;
    }
    #learn .svg-area svg {
        margin-top: 1.5em;
    }
    footer {
        padding-top: 5em;
    }
    footer img {
        max-width: 60%;
    }
    footer .privacy a {
        float: inline-start;
    }
    #banner-about, #banner-courses {
        height: 60dvh;
        position: relative;
    }
    #banner-about .cont {
        top: 50%;
        right: 1em;
        width: 50%;
    }
    #banner-courses .cont {
        top: 50%;
        width: 50%;
    }
    #banner-about h1 {
        font-size: 1.2em;
        text-align: right;
    }
    #banner-courses h1 {
        font-size: 1.2em;
    }
    #banner-about p, #banner-courses p {
        display: none;
    }
    #banner-about .svg-area svg, #banner-courses .svg-area svg {
        bottom: 5em;
    }
    #mission .button, #story .button {
        display: none;
    }
    #impact .glass {
        width: 30%;
        padding: 0.5em 1em;
        margin: 0.5em;
    }
    #impact .glass span:nth-child(1) {
        font-size: 1.2em;
    }
    #impact .a {
        border-end-start-radius: 1em;
        border-start-end-radius: 1em;
    }
    #impact .b {
        border-start-start-radius: 1em;
        border-end-end-radius: 1em;
    }
    #impact .c {
        border-start-start-radius: 1em;
        border-end-end-radius: 1em;
    }
    #impact .d {
        border-end-start-radius: 1em;
        border-start-end-radius: 1em;
    }
    #all-courses .right {
        padding-left: 2em;
        padding-right: 2em;
    }
    #login .container, #register .container, #login form, #register form {
        width: 100%;
    }
    #login .tab-content {
        padding: 2em;
        height: 20em;
    }
    #register .cts {
        padding: 2em;
    }
    #cart .duru {
        padding-top: 8em;
    }
    #cart .hd3 img {
        width: 100%;
    }
    #cart .hd3 .bps {
        padding: 0.5em 0.5em 1em 1.5em;
    }
    #cart .duru .summary {
        margin-top: 3em;
    }
    .cta span {
        right: 1.5em;
    }
}

@media only screen and (min-device-width: 511px) and (max-device-width: 768px) {
    #banner-about .svg-area svg {
        display: none;
    }
}