:root {
    --primary-color: #1b6661;
    --accent-color: #c49a34;
    --third-color: #967643;
    --white-color: #ffffff;
    --black-color: #000000;
    --text-color: #3f3f3f;
    --grey-color: #6e6e6e;
    --border-color: #6d8583dc;
    --border-grey-color: #dee2e6;
    --lightprimary-color: #f0fbfc;
    --headding-font: 'Urbanist', sans-serif;
    --accent-font: "Nunito", sans-serif;
    --text-font: 'Roboto', sans-serif;
    --secondary-color: #22c5ad;
}


@media (max-width: 1200px) {
    #card-pricing .card-body {
        padding: 2rem 1.5rem;
    }

    .plans-items .plan-item {
        font-size: 15px;
    }
}

@media (max-width: 991px) {
    /* #website-logo{
    position: static;
    top: auto;
    left: auto;
    background: transparent !important;
    border-radius: 0;
 } */
    .page-title .content-page-title h6 {
        font-size: calc(1rem + 1vw);
    }

    #nav {
        padding: 1.5rem;
    }

    #website-logo {
        position: absolute;
        top: -25px;
        left: 0;
        left: auto;
        background: var(--white-color);
        border-radius: 0 0 10px 10px;
        margin: 0;
    }

    #navbarSupportedContent:not(.show) {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        transform: translateX(-100%);
        top: 0;
        background: var(--white-color);
        height: 100vh;
        overflow: auto;
    }

    #navbarSupportedContent {
        /* display: block !important; */
        flex-direction: column;
        position: fixed;
        top: 0;
        width: 320px;
        transition: transform 0.4s, visibility 0.4s;
        will-change: transform, visibility;
        background: var(--white-color);
        height: 100vh;
        overflow: auto;
        overflow-x: hidden !important;
        left: 0;
        transform: translateX(0);
        padding: 0 1rem 1rem;
        z-index: 1;
        -webkit-box-shadow: 0.5px -0.5px 8px 4px rgba(56, 56, 56, 0.05);
        -moz-box-shadow: 0.5px -0.5px 8px 4px rgba(56, 56, 56, 0.05);
        box-shadow: 0.5px -0.5px 8px 4px rgba(56, 56, 56, 0.05);
    }

        #navbarSupportedContent::before {
            content: "";
            position: absolute;
            top: -80px;
            left: -80px;
            width: 170px;
            height: 170px;
            background: var(--primary-color);
            border-radius: 250px;
            z-index: -1;
        }

        #navbarSupportedContent #website-logo {
            position: static;
            top: auto;
            left: auto;
            width: 80px;
            box-shadow: none;
        }

    #all-department {
        color: var(--white-color);
        font-size: 16px;
        font-weight: 400;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0.8rem;
        border-radius: 8px 8px 0 0;
        background: linear-gradient(145deg, #FFD700, #DAA520, #B8860B, #FFD700);
        font-family: var(--accent-font);
        margin: 0.3rem;
        letter-spacing: 1px;
    }

    #nav-item, #nav-item-language {
        height: 46px;
        line-height: inherit;
        padding: 0.6rem;
        border-bottom: 1px solid var(--border-grey-color);
    }
        #nav-item i {
            margin-right: auto !important;
            margin-left: 0 !important;
        }
    .language #nav-item i {
        margin-left: 0.3rem !important;
        margin-right: 0 !important;
    }
    #navbarSupportedContent #Btnnav-toggler {
        margin-left: 6px;
        margin-top: 22px;
    }

    #dropdown-menu {
        border-radius: 8px;
        -webkit-box-shadow: 0.5px -0.5px 8px 4px rgba(56, 56, 56, 0.05);
        -moz-box-shadow: 0.5px -0.5px 8px 4px rgba(56, 56, 56, 0.05);
        box-shadow: 0.5px -0.5px 8px 4px rgba(56, 56, 56, 0.05);
        margin-top: 0.6rem;
        padding: 0.3rem;
    }

    #home {
        padding: 0px 0;
        min-height: 75vh;
    }

    .content-home {
        padding: 1rem 0.2rem;
    }

    #btn-free {
        height: 46px;
        line-height: inherit;
        padding: 0.6rem;
        border-bottom: 1px solid var(--border-grey-color);
        background: none;
        box-shadow: none;
        color: var(--primary-color);
        height: 61px;
        font-size: 16px;
        font-weight: 600;
        width: 100%;
        text-align: justify;
    }
}

@media (max-width: 768px) {
    .content-home p {
        font-size: 16px;
    }

    .title-section, .howToStart .title-section {
        font-size: 28px !important;
    }

    .card-price .card-body {
        padding: 1.25rem 0.5rem;
    }

    .btnUpTop {
        animation-play-state: paused !important;
    }

    #whatsapp-icon {
        bottom: 10px;
        left: 10px;
        width: 50px;
        height: 50px;
    }

        #whatsapp-icon img {
            width: 40px;
        }

    .btnUpTop.Show {
        bottom: 10px !important;
        right: 10px;
    }

    .content-home .slogan {
        font-size: 30px;
    }

    #buttoncarousel.carousel-control-next {
        bottom: 50px;
    }

    #buttoncarousel {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 767px) {
    #aboutus {
        padding: 100px 0 50px;
    }

    .item {
        flex-wrap: wrap;
    }
    /* #howToStart #img-steps1{
    display: none;
} */
    /* #howToStart #card-steps img{
    z-index: 2;
    position: absolute;
    max-width: 100px;
    left: 5px;
    top: 10px;
    display: block;
} */
    #footer .copyright-footer ul {
        justify-content: center;
        margin-top: 0.8rem;
    }

    .plans-items .plan-item {
        font-size: 17px;
    }
}

@media (max-width: 650px) {
    .event-details-list .list-wrap li {
        width: 100%;
    }

    .comment-area li {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

        .comment-area li .blog-thumb-info {
            width: auto;
            padding: 15px 0 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .comment-area li .blog-content {
            width: auto;
            padding: 0;
        }

    .single-blog .right .post-header blockquote {
        font-size: 15px;
        padding: 15px;
    }

    .single-blog .right .post-header .m-title {
        font-size: 20px;
    }
}

@media (max-width: 550px) {
    /* #howToStart #card-steps img{
      max-width: 70px;
  } */
    .plans-items .plan-item {
        font-size: 15px;
    }

    #howToStart .container {
        padding: 0.75rem;
    }

    .event-details-list .list-wrap li {
        width: 100%;
    }

    .single-blog .content {
        flex-direction: column;
    }

        .single-blog .content .left {
            width: auto;
            display: flex;
            align-items: center;
            justify-content: start;
            gap: 1.5rem;
        }

            .single-blog .content .left .meta-list {
                display: flex;
                align-items: start;
                justify-content: start;
                gap: 1rem;
            }

        .single-blog .content .right {
            width: auto;
        }

    .blog-author {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 30px 12px;
    }

        .blog-author .author-content {
            width: auto;
            padding: 0;
        }

            .blog-author .author-content p {
                font-size: 15px;
            }

    .comment-area li .blog-content p {
        font-size: 15px;
    }

    .who-are p, .strategy p {
        font-size: 15px;
    }

    .card-teacher {
        padding: 0.1rem 0.1rem !important;
    }

    #topimg-teachers {
        height: 300px;
    }

    .card-teacher p {
        font-size: 15px !important;
    }

    #fixed-video {
        left: auto;
        right: 0;
    }

        #fixed-video video {
            width: 200px !important;
            height: 200px !important;
        }

    .page-title {
        min-height: 40vh;
    }
}

@media (max-width: 425px) {
    .content-home p {
        font-size: 15px;
        font-weight: 400;
    }

    #btn-home {
        font-size: 15px;
        padding: 0.5rem 1.5rem;
        letter-spacing: 0;
        /* padding: ; */
    }

    .title-section {
        font-size: 22px !important;
    }

    .howToStart .title-section {
        font-size: 19px !important;
    }

    .title-form {
        font-size: 18px;
    }

    .about-imgs #website-logo img {
        width: 60px;
    }

    #card-steps {
        padding: 0.2rem;
    }

    .single-blog .content .left {
        margin-right: 30px;
    }

    .single-blog .content {
        padding: 30px 20px 19px;
    }

    #card-videos iframe {
        min-height: 280px;
    }
}