@media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
        left: -90%;
    }

    .navbar .dropdown .dropdown:hover>ul {
        left: -100%;
    }
}

@media (max-width: 1200px) {
    #hero {
        min-height: 560px;
        padding-top: 120px;
    }

    #hero h1 {
        font-size: 42px;
    }

    #hero .container {
        margin-left: 50px;
        margin-right: 50px;
    }
}

@media (min-width: 1024px) {

    #hero .carousel-control-prev,
    #hero .carousel-control-next {
        width: 5%;
    }
}

@media (max-width: 992px) {
    #hero {
        height: 100vh;
        min-height: auto;
        padding-top: 150px;
        padding-bottom: 50px;
    }

    #hero h1 {
        font-size: 36px;
    }

    #hero .container {
        margin-top: 0 !important;
    }


    #hero .container .banner-content h1 {
        padding-bottom: 12px !important;
    }

    #hero .container .banner-content .mt-3 {
        margin-top: 16px !important;
        align-content: center;
        justify-content: center;
    }

    #hero .container img,
    #hero .hero-img img {
        max-width: 320px;
        margin: 30px auto 0;
        display: block;
    }

    .mobile-nav-toggle {
        display: block;
    }

    .navbar ul {
        display: none;
    }

    #header {
        padding: 15px 0;
    }

    .breadcrumbs {
        margin-top: 70px;
    }

    .breadcrumbs h2 {
        margin: 0 0 10px 0;
    }

    .cource-details-tabs .nav-link {
        border: 0;
        padding: 15px;
    }

    .cource-details-tabs .nav-link.active {

        background: #5fcf80;
    }

    .gallery .swiper-wrapper {
        padding: 40px 0;
    }

    .gallery .swiper-slide-active {
        border: 6px solid #3fbbc0;
        padding: 4px;
        background: #fff;
        z-index: 1;
        transform: scale(1.2);
        margin-top: 10px;
    }

    .testimonials .swiper-wrapper,
    .gallery .swiper-wrapper,
    #fecol.partners .swiper-wrapper,
    #about-re .swiper-wrapper {
        padding-bottom: 10px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 36px;
        height: 36px;
    }
}

@media(max-width:900px) {
    .sg-menu {
        gap: 13px
    }

    .sg-menu a {
        font-size: .77rem !important
    }

    .sg-nav .sg-primary {
        padding: 10px 14px
    }

    .sg-grid-4 {
        grid-template-columns: repeat(2, 1fr)
    }

    .sg-hero-grid,
    .sg-feature-split,
    .sg-contact-grid {
        grid-template-columns: 1fr
    }

    .sg-visual {
        min-height: 390px
    }

    .sg-search {
        grid-template-columns: 1fr
    }

    .sg-search label {
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .sg-stat-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .sg-stat:nth-child(2) {
        border-right: 0
    }

    .sg-stat:nth-child(-n+2) {
        border-bottom: 1px solid var(--line)
    }

    .sg-course-layout {
        grid-template-columns: 1fr
    }

    .sg-footer-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:680px) {
    .sg-container {
        width: min(100% - 28px, 1180px)
    }

    .sg-top {
        display: none
    }

    .sg-nav {
        height: 68px
    }

    .sg-mobile-toggle {
        display: block
    }

    .sg-menu {
        display: none;
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 14px 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 0
    }

    .sg-menu.open {
        display: flex
    }

    .sg-menu a {
        padding: 12px 0 !important
    }

    .sg-nav>.sg-primary {
        display: none
    }

    .sg-hero {
        padding: 52px 0 44px
    }

    .sg-hero h1 {
        font-size: 2.65rem
    }

    .sg-visual {
        min-height: 330px
    }

    .sg-hero-image {
        left: 26px;
        width: calc(100% - 26px)
    }

    .sg-section {
        padding: 58px 0
    }

    .sg-grid-3,
    .sg-grid-4 {
        grid-template-columns: 1fr
    }

    .sg-stat-grid {
        grid-template-columns: 1fr
    }

    .sg-stat {
        border-right: 0 !important;
        border-bottom: 1px solid var(--line)
    }

    .sg-stat:last-child {
        border: 0
    }

    .sg-trust-row {
        display: block
    }

    .sg-trust-logos {
        margin-top: 12px;
        gap: 14px;
        font-size: .86rem
    }

    .sg-footer-grid {
        grid-template-columns: 1fr
    }

    .sg-footer-bottom {
        display: block
    }

    .sg-footer-bottom span {
        display: block;
        margin-bottom: 8px
    }

    .sg-filter,
    .sg-form-grid {
        grid-template-columns: 1fr
    }

    .sg-quote {
        padding: 28px
    }

    .sg-page-hero {
        padding: 55px 0
    }

    .sg-course-hero {
        padding: 40px 0
    }

    .sg-feature-split img {
        height: 300px
    }
}

@media only screen and (max-width: 767px) {
    #hero .banner-content {
        margin-top: 0;
    }

    #hero .image-holder {
        opacity: 0.4;
        max-height: 300px;
    }

    #hero .swiper-arrow {
        top: 400px;
    }

    .login-banner {
        display: none;
    }

    .loginn-i {
        width: 100%;
    }

}

@media screen and (max-width: 768px) {
    .elementor-background-overlayyyyii .section-title {
        padding-top: 115px;
    }
}

@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0.2s !important;
    }

}

@media (max-width: 768px) {
    #hero {
        height: 90vh;
        min-height: auto;
        padding-top: 130px;
        padding-bottom: 40px;
        text-align: center;
    }

    #hero h1 {
        font-size: 30px;
        line-height: 1.2;
    }

    #hero h2 {
        font-size: 24px;
    }

    #hero p {
        margin-left: auto;
        margin-right: auto;
    }




    #hero .container {
        margin-top: 200px;
    }

    #hero .container img {
        height: 300px;
    }

    #hero .container img,
    #hero .hero-img img {
        max-width: 260px;
        height: auto;
    }

    #hero .btn-get-started,
    #hero .btn-get-quote {
        padding: 12px 22px;
        font-size: 14px;
    }

    #hero .carousel-control-next-icon,
    #hero .carousel-control-prev-icon {
        width: 34px;
        height: 34px;
        font-size: 22px;
    }

    .appointment-btn {
        margin: 0 0 0 12px;
        padding: 6px 10px;
    }

    .loginn-i {
        width: 100% !important;
    }

    .breadcrumbs .d-flex {
        display: block !important;
    }

    .breadcrumbs ol {
        display: block;
    }

    .breadcrumbs ol li {
        display: inline-block;
    }

    .departments .tab-pane img {
        float: none;
        padding: 0 0 15px 0;
        max-width: 100%;
    }

    .testimonials .swiper-slide,
    .gallery .swiper-slide,
    .partners .swiper-slide {
        width: 88% !important;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    .swiper-pagination {
        position: relative;
        margin-top: 14px;
    }
}

@media (max-width: 576px) {
    #hero {
        padding-top: 120px;
        height: 60vh !important;
    }

    #hero h1 {
        font-size: 26px;
    }

    #hero p {
        font-size: 15px;
    }

    #hero .btn-get-started,
    #hero .btn-get-quote {
        display: block;
        width: 100%;
        margin: 0 0 12px 0;
        text-align: center;
    }

    #hero .container img,
    #hero .hero-img img {
        max-width: 220px;
    }

    #hero .carousel-indicators li {
        width: 7px;
        height: 7px;
    }

    #hero .carousel-indicators li.active {
        width: 18px;
    }

    #header .appointment-btn {
        background: #e21d26;
        color: #fff;
        border-radius: 50px;
        white-space: nowrap;
        transition: 0.3s;
        font-size: 10px;
        display: inline-block;
        position: relative;
        margin: 0 4px 0 21px;
    }

    #header .me-auto {
        margin: 0 !important;
    }

    .navbar {
        width: 100%;
    }



    #courses .col-sm-2 {
        margin-bottom: 10px;
    }

    .card .col-3 {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 10px;
    }

    .select2-container {
        width: 100% !important;
    }

    .card .form-group {
        margin-bottom: 0;
    }

    .testimonials .testimonial-item {
        box-sizing: content-box;
        min-height: 320px;
        background: #fff;
        border-radius: 5px;
        padding: 25px 0;
        text-align: center;
        text-align: -webkit-center;
        padding-bottom: 30px;
    }

    #testimonials {
        max-height: 100% !important;
        margin-bottom: 60px;
        /* padding-bottom: 20px; */
    }

    #fecol.partners {
        max-height: 404px;
        margin-bottom: 60px;
        padding: 0;
    }

    #fecol .section-title {
        text-align: center;
        padding-bottom: 0;
    }

    #testimonials .section-title h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 20px;
        padding-bottom: 20px;
        position: relative;
        line-height: 31px;
        color: #0C4CA3;
        font-family: 'Montserrat', sans-serif;
    }

    #fecol .section-title h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 0;
        padding-bottom: 35;
        position: relative;
        line-height: 30px;
        color: #0C4CA3;
        font-family: 'Montserrat', sans-serif;
    }

    #about-re {
        height: auto !important;
    }

    #hero .order-2 {
        position: absolute;
        top: 0;
        left: 0;
    }

    .hero-img {
        position: absolute;
        top: 52%;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }



    #header .logo {
        font-size: 28px;
        margin: 0;
        padding: 0;
        line-height: 1;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        display: block;
        width: 32%;
    }

    #header .align-items-center {
        align-items: center !important;
        flex-wrap: wrap;
    }

    #header .logo img {
        max-height: 46px;
        /* width: 100%; */
        margin: 0 auto;
        display: block;
        margin-bottom: 5px;
    }

    .login-banner .login-banner-wrap {
        position: static !important;
    }

    .bd-example.pp {
        flex-wrap: wrap;
    }

    .bd-example.pp .login-banner {
        width: 100% !important;
        height: 320px;
    }

    .testimonials .swiper-slide,
    .gallery .swiper-slide,
    .partners .swiper-slide {
        width: 96% !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }

    #hero .container img,
    #hero .hero-img img,
    #hero .hero-img::before,
    #hero .banner-content h1,
    #hero .banner-content h2,
    #hero .banner-content p,
    #hero .banner-content .mt-3 {
        animation: none !important;
    }
}

@media (min-width:40rem) {
    .sm\:inline {
        display: inline
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sm\:text-5xl {
        font-size: var(--text-5xl);
        line-height: var(--tw-leading, var(--text-5xl--line-height))
    }

    .sm\:text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }
}

@media (min-width:48rem) {
    .md\:flex {
        display: flex
    }

    .md\:h-72 {
        height: calc(var(--spacing) * 72)
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .md\:flex-row {
        flex-direction: row
    }

    .md\:items-center {
        align-items: center
    }

    .md\:p-8 {
        padding: calc(var(--spacing) * 8)
    }

    .md\:p-10 {
        padding: calc(var(--spacing) * 10)
    }

    .md\:px-12 {
        padding-inline: calc(var(--spacing) * 12) !important
    }

    .md\:py-20 {
        padding-block: calc(var(--spacing) * 20) !important
    }

    .md\:text-3xl {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height))
    }

    .md\:text-4xl {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading, var(--text-4xl--line-height))
    }

    .md\:text-5xl {
        font-size: var(--text-5xl);
        line-height: var(--tw-leading, var(--text-5xl--line-height))
    }

    .md\:text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height))
    }
}

@media (min-width:64rem) {
    .lg\:flex {
        display: flex
    }

    .lg\:hidden {
        display: none
    }

    .lg\:h-\[520px\] {
        height: 520px
    }

    .lg\:max-w-none {
        max-width: none
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .lg\:grid-cols-\[1\.2fr_0\.8fr\] {
        grid-template-columns: 1.2fr .8fr
    }

    .lg\:grid-cols-\[1\.05fr_0\.95fr\] {
        grid-template-columns: 1.05fr .95fr
    }

    .lg\:grid-cols-\[280px_1fr\] {
        grid-template-columns: 280px 1fr
    }

    .lg\:py-16 {
        padding-block: calc(var(--spacing) * 16) !important
    }

    .lg\:text-6xl {
        font-size: var(--text-6xl);
        line-height: var(--tw-leading, var(--text-6xl--line-height))
    }
}

@media (hover:hover) {
    .hover\:-translate-y-1:hover {
        --tw-translate-y: calc(var(--spacing) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .hover\:-translate-y-1\.5:hover {
        --tw-translate-y: calc(var(--spacing) * -1.5);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .hover\:bg-accent-soft:hover {
        background-color: var(--accent-soft) !important
    }

    .hover\:bg-light:hover,
    .hover\:bg-light\/50:hover {
        background-color: var(--light) !important
    }

    @supports (color:color-mix(in lab, red, red)) {
        .hover\:bg-light\/50:hover {
            background-color: color-mix(in oklab, var(--light) 50%, transparent)
        }
    }

    .hover\:bg-primary-deep:hover {
        background-color: var(--primary-deep) !important
    }

    .hover\:bg-primary\/40:hover {
        background-color: var(--primary) !important
    }

    @supports (color:color-mix(in lab, red, red)) {
        .hover\:bg-primary\/40:hover {
            background-color: color-mix(in oklab, var(--primary) 40%, transparent)
        }
    }

    .hover\:bg-teal-soft:hover {
        background-color: var(--teal-soft) !important
    }

    .hover\:bg-white:hover {
        background-color: var(--color-white) !important
    }

    .hover\:bg-white\/15:hover {
        background-color: #ffffff26
    }

    @supports (color:color-mix(in lab, red, red)) {
        .hover\:bg-white\/15:hover {
            background-color: color-mix(in oklab, var(--color-white) 15%, transparent)
        }
    }

    .hover\:bg-white\/20:hover {
        background-color: #fff3
    }

    @supports (color:color-mix(in lab, red, red)) {
        .hover\:bg-white\/20:hover {
            background-color: color-mix(in oklab, var(--color-white) 20%, transparent)
        }
    }

    .hover\:text-accent:hover {
        color: var(--accent) !important
    }

    .hover\:text-primary:hover {
        color: var(--primary) !important
    }

    .hover\:text-teal-soft:hover {
        color: var(--teal-soft) !important
    }

    .hover\:text-blue-soft:hover {
        color: var(--blue-soft) !important
    }

    .hover\:opacity-90:hover {
        opacity: .9
    }

    .hover\:opacity-100:hover {
        opacity: 1
    }

    .hover\:grayscale-0:hover {
        --tw-grayscale: grayscale(0%);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }
}

@media (hover:hover) {
    .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
        --tw-translate-x: calc(var(--spacing) * .5);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .group-hover\:-translate-y-0\.5:is(:where(.group):hover *) {
        --tw-translate-y: calc(var(--spacing) * -.5);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .group-hover\:scale-105:is(:where(.group):hover *) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }

    .group-hover\:scale-110:is(:where(.group):hover *) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }

    .group-hover\:bg-primary:is(:where(.group):hover *) {
        background-color: var(--primary) !important
    }

    .group-hover\:bg-white:is(:where(.group):hover *) {
        background-color: var(--color-white) !important
    }

    .group-hover\:text-primary:is(:where(.group):hover *) {
        color: var(--primary) !important
    }

    .group-hover\:text-white:is(:where(.group):hover *) {
        color: var(--color-white) !important
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
        opacity: 1
    }
}

@media (min-width: 48rem) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .slider {
        flex-direction: column;
        height: auto;
    }

    .image-panel {
        width: 100%;
        height: 260px;
        clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    }

    .content-panel {
        width: 100%;
        padding: 40px 28px 70px;
    }

    .content-slide {
        left: 28px;
        right: 28px;
    }

    .headline {
        font-size: 30px;
    }

    .nav-arrows {
        left: 28px;
    }

    .dots {
        right: 28px;
    }

    .count {
        right: 28px;
        top: 20px;
    }
}