* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Manrope', sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

/* VIEW BUTTON */
.primary-btn {
    display: inline-block;
    padding: 12px 28px;
    background: #3F68AE;
    color: #fff;
    border-radius: 30px;
    border: none;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease;
}

.primary-btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: #000000;
    border-radius: 50px;
    z-index: -1;
    transition: width 0.4s ease;
}

/* On Hover */
.primary-btn:hover::before {
    width: 100%;
    left: 0;
    right: auto;
}

.primary-btn:hover {
    color: #fff;
    box-shadow: 0 4px 6px 0px #0d6efd59;
}

/* btn 2 */
.secondary-btn {
    display: inline-block;
    padding: 12px 28px;
    font-weight: 600;
    background: #000000;
    color: #fff;
    border-radius: 30px;
    border: none;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease;
}

.secondary-btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: #ffffff;
    border-radius: 50px;
    z-index: -1;
    transition: width 0.4s ease;
}

/* On Hover */
.secondary-btn:hover::before {
    width: 100%;
    left: 0;
    right: auto;
}

.secondary-btn:hover {
    color: #000000;
    box-shadow: 0 4px 6px 0px #0d6efd59;

}

/* ==============================
 NAVBAR 
 ================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 5%;
    z-index: 999;
    transition: all 0.4s ease;
    background-color: #fff;
}


/* Solid when scrolled */
.navbar.scrolled {
    background: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    padding: 10px 5%;
}

/* Menu */
.navbar-nav .nav-link {
    position: relative;
    display: inline-block !important;
    /* Override Bootstrap block */
    color: #000 !important;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Underline element */
.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 0%;
    height: 2px;
    background: #4476B9;
    transition: width 0.3s ease;
}

/* Hover effect */
.navbar-nav .nav-link:hover {
    color: #050505 !important;
}

.navbar-nav .nav-link:hover::after {
    width: 100%;
}

.navbar-brand h4 {
    color:#4461B1;
    font-weight:600;
}

/* ================= NAVBAR REGISTER BUTTON ================= */

.nav-register-btn {
    position: relative;
    padding: 10px 26px;
    border-radius: 50px;
    text-decoration: none;
    border: none;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s ease;
    background: linear-gradient(135deg, #4461B1, #4A87C5);
}

/* Sliding hover layer */
.nav-register-btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(135deg, #d2d2d2, #ffffff);
    z-index: -1;
    transition: width 0.4s ease;
    border-radius: 50px;
}

/* Hover */
.nav-register-btn:hover::before {
    width: 100%;
    left: 0;
    right: auto;
}

.nav-register-btn:hover {
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(65, 97, 174, 0.5);
}
@media (max-width: 992px) {

    .navbar-collapse {
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        margin-top: 10px;
    }

    .navbar-nav .nav-link {
        padding: 10px 0;
    }

    .nav-register-btn {
        width: max-content;
        text-align: center;
    }
}
/* =================================
   HOME
==================================== */
.banner-section {
    background: linear-gradient(135deg, #0c1e2c, #212121);
    padding: 164px 0 80px;
    color: #fff;
    overflow: hidden;
    position: relative;
}

/* Make images safer */
.banner-section img {
    max-width: 100%;
    height: auto;
}

.banner-section .banner-bg1 {
    position: absolute;
    right: 0;
    top: 0;
}

.banner-section .banner-bg2 {
    position: absolute;
    left: 0;
    top: 20%;
}

.banner-section .banner-bg3 {
    position: absolute;
    left: 20px;
    top: 33%;
}

.banner-section .banner-bg4 {
    position: absolute;
    right: 0;
    top: 30%;
}

.banner-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
}

.banner-content h1 span {
    color: #4982C3;
    text-decoration: underline;
}

.banner-content p {
    font-size: 16px;
    margin-bottom: 30px;
    color: #ddd;
}

.hero-title {
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 18px;
    border-radius: 25px;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 20px;
}

.hero-cta-buttons {
    display: flex;
    gap: 14px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

/* base button */

.hero-btn {
    padding: 14px 26px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.demo-btn {
    display: inline-block;
    padding: 12px 26px;
    font-weight: 600;
    background: transparent;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    border-radius: 30px;
    border: 2px solid #fff;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease;
}

.demo-btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: #ffffff;
    border-radius: 50px;
    z-index: -1;
    transition: width 0.4s ease;
}

/* On Hover */
.demo-btn:hover::before {
    width: 100%;
    left: 0;
    right: auto;
}

.demo-btn:hover {
    color: #000000;
    box-shadow: 0 4px 6px 0px #0d6efd59;

}

.count-content h5 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 2px;
}

.count-content p {
    margin-bottom: 0;
}

.counter-wrapper {
    display: flex;
    gap: 40px;
}

.counter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
}

.counter-item h4 {
    font-size: 22px;
    margin: 0;
}


.text-skyblue {
    color: #0DCAF0 !important;
    opacity: 1;
}

.text-pink {
    color: #FD3995 !important;
}

.text-purple {
    color: #AB47BC !important;
}

/* CARD DESIGN */

.banner-image {
    position: relative;
    margin-left: 0px;
}

.course-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    padding: 14px;
    width: 100%;
    max-width: 360px;
    margin: auto;
    transition: all 0.3s ease-in-out;
}

.course-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 18px 18px 0 0;
}
.course-card:hover{
    transform: scale(1.02);
}
.card-content {
    padding: 20px;
}

.card-content h6 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #222;
}

.card-content p {
    font-size: 14px;
    color: #777;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.price {
    color: #4982C3;
    font-weight: 600;
}

.swiper {
    width: 100%;
    padding-bottom: 20px;
}

/* ===============================
   TABLET (≤ 991px)
================================ */
@media (min-width: 1400px) {
    .banner-content h1 {
        font-size: 56px;
    }
}

@media (max-width: 991px) {

    .banner-section {
        padding: 120px 0 60px;
        text-align: center;
    }

    .banner-content h1 {
        font-size: 34px;
    }

    .banner-image {
        margin-top: 40px;
    }

    .counter-item {
        justify-content: center;
    }
}

/* ===============================
   MOBILE (≤ 768px)
================================ */

@media (max-width: 768px) {

    .banner-section {
        padding: 120px 0 50px;
    }

    .banner-content h1 {
        font-size: 28px;
        line-height: 1.4;
    }

    .banner-content p {
        font-size: 14px;
    }

    .hero-title {
        font-size: 12px;
        padding: 5px 14px;
    }

    .hero-cta-buttons {
        align-items: center;
        width: max-content;
        margin: auto;
        margin-bottom: 30px;
    }

    .hero-btn {
        justify-content: center;
    }

    .counter-item {
        flex-direction: column;
        text-align: center;
    }
}

/* ===============================
   SMALL MOBILE (≤ 480px)
================================ */

@media (max-width: 480px) {

    .banner-content h1 {
        font-size: 24px;
    }

    .course-card {
        max-width: 100%;
    }

    .price-row {
        flex-direction: column;
        gap: 10px;
    }

    .price-row button {
        width: 100%;
    }
}

.trusted-section {
    padding: 100px 0;
    position: relative;
}

.trusted-image {
    margin: 0 100px;
    margin-bottom: -104px;
    z-index: 1;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    z-index: 2;
    margin-bottom: -80px;
}

.trusted-image img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 15px;
    transition: all 0.3s ease-in-out;
}

.trusted-image img:hover {
    transform: scale(1.02);
}

/* PLAY BUTTON */

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    transition: 0.3s;
    border: none;
}

.play-btn span {
    font-size: 24px;
    color: #4982C3;

}

.play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

/* PURPLE BOX */

.trusted-content {
    background: linear-gradient(135deg, #4985C4, #3E64AB);
    padding: 128px 60px 70px;
    border-radius: 15px;
    color: #fff;
    position: relative;
}

.trusted-content h2 {
    font-size: 28px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.trusted-content .user-goal {
    border-radius: 12px;
}

.trusted-buttons {
    display: flex;
    gap: 15px;
}

.avatar img {
    width: 45px;
    height: 100%;
    border-radius: 4px;
}

.stat-box h3 {
    font-size: 32px;
    margin-bottom: 10px;
}

.stat-box p {
    color: #ddd;
    font-size: 14px;
}

/* TESTIMONIAL */

.testimonial-box {
    margin-top: 50px;
    background: #fff;
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #333;
    max-width: 600px;
}

.testimonial-box img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .trusted-section {
        padding: 80px 0;
    }

    .trusted-image {
        margin: 0;
    }

    .trusted-image img {
        max-height: 350px;
    }

    .trusted-content {
        margin-top: 30px;
        /* 🔥 remove overlap */
        padding: 60px 25px;
    }

    .trusted-title {
        font-size: 20px;
    }

    .user-goal {
        flex-direction: column;
        text-align: center;
    }
}

/* ===============================
   MOBILE (≤ 768px)
================================ */

@media (max-width: 768px) {

    .trusted-section {
        padding: 60px 0;
    }

    .trusted-image img {
        max-height: 250px;
    }

    .play-btn {
        width: 55px;
        height: 55px;
    }

    .play-btn span {
        font-size: 18px;
    }

    .trusted-content {
        padding: 40px 20px;
    }

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

/* ===============================
   SMALL MOBILE (≤ 480px)
================================ */

@media (max-width: 480px) {

    .trusted-title {
        font-size: 16px;
    }

    .trusted-content {
        padding: 30px 15px;
    }

    .trusted-image img {
        max-height: 200px;
    }
}

.featured-section {
    padding: 0;
}

.section-header h2 {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 20px;
}

.section-header span {
    color: #3E62AE;
    text-decoration: underline;
}

.section-header p {
    color: #555;
    font-size: 16px;
}

/* COURSE GRID */

.course-wrapper {
    position: relative;
}

.feature-course-card {
    background: #fff;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
    border: 1px solid #cecece;
    display: flex;
    flex-direction: column;
}

.feature-course-card:hover {
    transform: translateY(-5px);

}

/* IMAGE */

.course-img {
    position: relative;
    padding: 15px;
}

.course-img img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.course-img .price {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
}

/* BODY */

.course-body {
    padding: 10px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.course-batch {
    color: #4A87C5 !important;
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 500;
}

.category {
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.uiux {
    background: #eae4ff;
    color: #5a4bff;
}

.productivity {
    background: #ffe4e4;
    color: #ff4b4b;
}

.management {
    background: #e6d9ff;
    color: #7b3fff;
}

.art {
    background: #d9f7e5;
    color: #22a559;
}

.course-body h5 {
    font-size: 20px;
    margin-bottom: 15px;
}

/* INSTRUCTOR */

.instructor-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.instructor {
    display: flex;
    align-items: center;
    gap: 8px;
}

.instructor img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

/* BUTTON */

.buy-btn {
    margin-top: auto;
    width: 100%;
    padding: 10px;
    border-radius: 30px;
    cursor: pointer;
    color: #000;
    border: 1px solid #acacac;
    background: #e2e2e2;
    border: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease, border-color 0.4s ease;
}

/* Sliding background */
.buy-btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50px;
    width: 0%;
    height: 100%;
    background: #4161AE;
    z-index: -1;
    transition: width 0.4s ease;
}

/* Hover Effect */
.buy-btn:hover::before {
    width: 100%;
    left: 0;
    right: auto;
}

.buy-btn:hover {
    color: #fff;
    border-color: #4161AE;
}


.featuredSwiper {
    position: relative;
    padding: 40px 10px;
}

.swiper-slide {
    height: auto;
}

.swiper-button-next,
.swiper-button-prev {
    color: #ffffff;
    width: 30px;
    height: 30px;
    background: #3f68aeb3;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all 0.3s ease;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    transition: 0.3s ease;
}

/* Position */
.swiper-button-prev {
    left: 0px;
}

.swiper-button-next {
    right: 0px;
}

/* Hover Effect */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #3F68AE;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(63, 104, 174, 0.35);
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
    color: #fff;
}

/* RESPONSIVE */
/* ===============================
   TABLET (≤ 991px)
================================ */

@media (max-width: 991px) {

    .section-header h2 {
        font-size: 32px;
    }

    .featuredSwiper {
        padding: 30px 0;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
        /* 🔥 hide arrows */
    }
}

/* ===============================
   MOBILE (≤ 768px)
================================ */

@media (max-width: 768px) {

    .featured-section {
        padding: 60px 0;
    }

    .section-header h2 {
        font-size: 26px;
    }

    .section-header p {
        font-size: 14px;
    }

    .course-body h5 {
        font-size: 16px;
    }

    .course-batch {
        font-size: 15px;
    }
}

/* ===============================
   SMALL MOBILE (≤ 480px)
================================ */

@media (max-width: 480px) {

    .section-header h2 {
        font-size: 22px;
    }

    .buy-btn {
        padding: 8px;
        font-size: 14px;
    }
}

/* =============================
   PROGRAM SECTION
============================= */

.program-section {
    padding: 100px 0;
}


.program-content h2 {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
}

.program-content h2 span {
    color: #3E62AE;
    text-decoration: underline;
}

.program-content p {
    color: #666;
    margin-bottom: 40px;
}

/* ICON GRID */
.tech-icons {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.tech-icons img {
    width: 60px;
    max-width: 100%;
    transition: 0.3s ease;
}

.tech-icons img:hover {
    transform: scale(1.1);
}

.form-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 20px;
    text-align: center;
    color: #3E62AE;
}

/* FORM CARD */
.program-form {
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    border: 1px solid #4982C3;
    border-bottom: 6px solid #4982C3;
}

.program-form input,
.program-form textarea,
.program-form select {
    width: 100%;
    padding: 14px 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    outline: none;
    transition: 0.3s;
}

.program-form textarea {
    max-height: 200px;
}

.program-form input:focus,
.program-form textarea:focus,
.program-form select:focus {
    border-color: #4982C3;
}

.checkbox-group {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.checkbox-group label {
    display: flex;
    gap: 6px;
    font-size: 14px;
    color: #444;
}

.subscribe-btn {
    width: max-content;
    padding: 14px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: #4982C3;
    transition: color 0.4s ease;
}

/* Sliding Layer */
.subscribe-btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    /* Start from RIGHT */
    width: 0%;
    height: 100%;
    background: #000000;
    /* Hover color (you can change) */
    z-index: -1;
    transition: width 0.4s ease;
}

/* On Hover */
.subscribe-btn:hover::before {
    width: 100%;
    left: 0;
    right: auto;
}

.subscribe-btn:hover {
    color: #fff;
}

.privacy-text {
    font-size: 13px;
    color: #777;
    margin-top: 15px;
}

.privacy-text a {
    color: #333;
    text-decoration: underline;
}

/* Responsive */
/* =============================
   TABLET (≤ 992px)
============================= */

@media (max-width: 992px) {

    .program-section {
        padding: 80px 0;
    }

    .program-content {
        text-align: center;
    }

    .program-content h2 {
        font-size: 32px;
    }

    .program-content p {
        font-size: 14px;
    }

    .tech-icons {
        grid-template-columns: repeat(4, 1fr);
        justify-items: center;
    }

    .program-form {
        margin-top: 40px;
        padding: 30px;
    }
}

/* =============================
   MOBILE (≤ 768px)
============================= */

@media (max-width: 768px) {

    .program-section {
        padding: 60px 0;
    }

    .program-content h2 {
        font-size: 26px;
    }

    .tech-icons {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .tech-icons img {
        width: 50px;
    }

    .program-form {
        padding: 25px 20px;
    }

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

    .program-form input,
    .program-form textarea,
    .program-form select {
        padding: 12px;
        font-size: 13px;
    }
}

/* =============================
   SMALL MOBILE (≤ 480px)
============================= */

@media (max-width: 480px) {

    .program-content h2 {
        font-size: 22px;
    }


    .tech-icons img {
        width: 46px;
    }

    .program-form {
        padding: 20px 15px;
    }

    .subscribe-btn {
        padding: 12px;
        font-size: 14px;
    }
}


.expertise-section {
    padding: 0;
}

/* LEFT MEDIA */

.expertise-media {
    display: flex;
    gap: 25px;
    position: relative;
}

.media-img img {
    width: 100%;
    border-radius: 15px;
    object-fit: cover;
}

/* LEFT TALL IMAGE */
.media-left {
    width: 50%;
}

.media-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
    transition: all 0.3s ease-in-out;
}

.media-left img:hover {
    transform: scale(1.02);
}

/* RIGHT COLUMN */
.media-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* VIDEO */
.media-video video {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
    transition: all 0.3s ease-in-out;
}

.media-video video:hover {
    transform: scale(1.02);
}

/* BOTTOM IMAGE */
.media-bottom img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
    transition: all 0.3s ease-in-out;
}

.media-bottom img:hover {
    transform: scale(1.02);
}

.media-video {
    position: relative;
    grid-column: span 1;
}

.media-video video {
    width: 100%;
    border-radius: 15px;
}

.video-label {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
}

.bottom-img {
    grid-column: span 2;
}

/* Mentor Badge */

.mentor-badge {
    position: absolute;
    bottom: -20px;
    left: 20px;
    background: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.avatars img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-left: -10px;
    border: 2px solid #fff;
}

/* RIGHT CONTENT */
.expertise-content {
    padding: 0 20px;
}


.expertise-content h2 {
    font-size: 44px;
    margin-bottom: 20px;
    font-weight: 700;
}

.expertise-content h2 span {
    color: #4982C3;
    text-decoration: underline;
}

.expertise-content p {
    color: #555;
    margin-bottom: 30px;
}

/* FEATURES */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 26px;
}

.feature-item {
    display: flex;
    gap: 15px;
}

.feature-item i {
    font-size: 28px;
    color: #4982C3;
}

.feature-item h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.feature-item p {
    font-size: 16px;
    color: #444;
    margin: 5px 0 0;
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .bottom-img {
        grid-column: span 1;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .expertise-content {
        padding: 50px 0px;
    }

    .expertise-content h2 {
        font-size: 32px;
    }
}

@media(max-width:568px) {
    .expertise-media {
        flex-direction: column;
    }

    .media-left {
        width: 100%;
    }

    .media-left img {
        height: 300px;
    }

    .media-right {
        width: 100%;
    }
}

/* ================================
   BLOG SECTION DESIGN
================================= */

.latest-blog-five {
    padding: 100px 0;
}

.latest-blog-five .section-header p {
    color: #555;
    margin-bottom: 50px;
}

/* Blog Card */
.event-blog-three {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    transition: 0.4s ease;
}

/* Blog Image */
.blog-img-three {
    position: relative;
}

.blog-img-three img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s ease;
}

.event-blog-three:hover img {
    transform: scale(1.05);
}

/* Dark Gradient Overlay */
.latest-blog-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.2));
    color: #fff;
}

/* Category + Date */
.event-span-three {
    gap: 12px;
    font-size: 12px;
    margin-bottom: 10px;
}

.event-span-three .category {
    /* background: rgba(255, 255, 255, 0.2); */
    border: 1px solid #fff;
    padding: 4px 10px;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
}

.blog-date {
    color: #ddd;
    font-size: 14px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.event-three-title {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    padding: 20px 20px;
}

/* Title */
.event-three-title h5 {
    color: #fff;
    font-size: 24px;
    margin: 0;
}

.event-three-title h5 a {
    color: #fff;
    text-decoration: none;
}

/* Author Badge */
.blog-user-top {
    position: absolute;
    top: 15px;
    left: 15px;
}

.blog-user-top a {
    background: #5a4bff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blog-user-top img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

/* Large Left Card Height */
.blog-three-one:first-child {
    height: 100%;
}

.blog-three-one:first-child img {
    height: 100%;
}

/* Responsive */
@media (max-width: 991px) {
    .latest-blog-five {
        padding: 70px 0;
    }
}

.custom-footer {
    background: #172027;
    color: #fff;
    padding: 80px 0 40px;
}

/* TOP BUTTONS */
.footer-top-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.footer-top-buttons p {
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.footer-top-buttons p:hover {
    background: #fff;
    color: #0D1E2C;
}

/* GRID */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}

.footer-about h2 {
    font-size: 34px;
    margin-bottom: 20px;
    line-height: 1.3;
}

.footer-about p {
    color: #cfcfcf;
    margin-bottom: 25px;
}

.contact-link {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

.contact-link i {
    margin-left: 10px;
}

.footer-grid h5 {
    margin-bottom: 20px;
    font-size: 18px;
}

.footer-grid ul {
    list-style: none;
    padding: 0;
}

.footer-grid ul li {
    margin-bottom: 12px;
}

.footer-grid ul li a {
    position: relative;
    display: inline-block;
    color: #cfcfcf;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-grid ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background: #4982C3;
    transition: width 0.3s ease;
}

.footer-grid ul li a:hover {
    color: #fff;
}

.footer-grid ul li a:hover::after {
    width: 100%;
}

/* DIVIDER */
.footer-divider {
    border-color: rgba(255, 255, 255, 0.2);
    margin: 50px 0;
}

/* BOTTOM */
.footer-bottom {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.footer-logo {
    font-size: 32px;
    margin-bottom: 20px;
}

.footer-links {
    display: flex;
    justify-content: space-evenly;
    gap: 26px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.footer-links a {
    color: #cfcfcf;
    text-decoration: none;
    transition: all 0.3s ease-in-out
}

.footer-links a:hover {
    color: #fff;
    transform: translateY(-3px);
}

.copyright {
    color: #cfcfcf;
    text-align: center;
}

/* ===============================
   TABLET (≤ 991px)
================================ */

@media (max-width: 991px) {

    .footer-grid {
        grid-template-columns: 1fr 1fr;

    }

    .footer-about {
        grid-column: span 2;
    }

    .footer-about h2 {
        font-size: 26px;
    }
}

/* ===============================
   MOBILE (≤ 768px)
================================ */

@media (max-width: 768px) {

    .custom-footer {
        padding: 60px 0 30px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 10px;
    }

    .footer-about {
        grid-column: span 1;
    }

    .footer-about h2 {
        font-size: 22px;
    }

    .footer-top-buttons a {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* ===============================
   SMALL MOBILE (≤ 480px)
================================ */

@media (max-width: 480px) {

    .footer-about h2 {
        font-size: 20px;
    }

    .footer-about p {
        font-size: 14px;
    }

    .copyright {
        font-size: 12px;
    }
}

/* HERO */

.legal-hero-modern {
    margin-top: 70px;
    position: relative;
    padding: 130px 20px 120px;
    background: linear-gradient(135deg, #0c1e2c, #212121);
    overflow: hidden;
    color: #fff;
}

/* Glass overlay */
.legal-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.15), transparent 40%);
    pointer-events: none;
}

/* Content */
.legal-hero-content {
    position: relative;
    text-align: center;
    z-index: 2;
}

.legal-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 14px;
    margin-bottom: 20px;
}

.legal-hero-modern h1 {
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 20px;
}

.legal-hero-modern p {
    font-size: 18px;
    opacity: 0.9;
    max-width: 600px;
    margin: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .legal-hero-modern h1 {
        font-size: 34px;
    }
}

/* CONTENT */
.legal-simple-section {
    padding: 80px 20px;
    background: #f5f7fb;
}

.legal-box {
    max-width: 900px;
    background: #fff;
    padding: 40px 60px;
    margin: auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
}

/* Each Item */
.legal-item {
    display: flex;
    margin-bottom: 25px;
    position: relative;
}

.legal-item:last-child {
    margin-bottom: 0;
}

/* Number */
.legal-count {
    font-size: 20px;
    font-weight: 700;
    color: #3E62AF;
    min-width: 50px;
}

/* Title */
.legal-item h4 {
    font-size: 20px;
    margin-bottom: 6px;
    font-weight: 600;
    color: #3E62AF;
}

/* Text */
.legal-item p {
    color: #555;
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 768px) {
    .legal-box {
        padding: 30px;
    }

    .legal-item h4 {
        font-size: 18px;
    }

    .legal-item {
        flex-direction: column;
        gap: 10px;
    }

    .legal-count {
        font-size: 16px;
    }

    .legal-simple-section {
        padding: 60px 0px;
    }
}

/* ===================================
About Us
====================================== */
.about-hero {
    background: url('../images/abt-banner.jpg') center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 66px;
    padding: 100px 30px;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.hero-content {
    position: relative;
    color: #fff;
}

.hero-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin: 20px auto;
}

/* Responsive */
@media (max-width: 768px) {
    .about-hero {
        padding: 70px 15px;
    }

    .hero-content h1 {
        font-size: 28px;
    }

    .hero-content h5 {
        font-size: 14px;
    }
}

/* ABOUT PLATFORM */

.about-platform {
    padding: 0;
}

.about-images {
    position: relative;
}

.about-images img {
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

.about-images img:hover {
    transform: translateY(-5px);
}

.img1 {
    width: 240px;
}

.img2 {
    width: 294px;
    position: absolute;
    right: 80px;
    top: -40px;
}

.img3 {
    width: 330px;
    position: absolute;
    bottom: -35px;
    right: 80px;
}

@media(max-width: 1200px) {
    .img1 {
        width: 100%;
    }

    .img2,
    .img3 {
        display: none;
    }
}

@media (max-width: 991px) {

    .about-images {
        display: none;
    }
}

/* FEATURES */
.career-section {
    padding: 100px 0;
}

.about-feature {
    display: flex;
    gap: 15px;
    margin: 20px 0;
}

.about-feature .icon {
    width: 50px;
    min-width: 50px;
    height: 50px;
    background: #2f57ef21;
    display: flex;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.about-feature i {
    color: #5a6af0;
    font-size: 20px;
}

.about-feature h5 {
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
}

/* CAREER */
.video-box {
    padding: 20px;
}

.video-wrapper {
    border-radius: 10px;
    overflow: hidden;
}

.video-wrapper img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease-in-out;
}

.video-wrapper:hover img {
    transform: scale(1.04);
}

.student-review-wrapper {
    padding: 20px 0;
}

.student-video-review {
    padding: 100px 0;
}

.video-review-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    transition: .3s;
}

.video-review-card:hover {
    transform: translateY(-5px);
}

.video-thumbnail {
    position: relative;
}

.video-thumbnail img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}

.play-btn:hover {
    background: #3E62AE;
    color: #fff;
}

.student-info {
    padding: 12px 5px;
}


.student-info h6 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.student-info span {
    font-size: 14px;
    color: #777;
}

/* navigation */

.review-navigation {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.review-prev,
.review-next {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #3E62AE;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.review-prev:hover,
.review-next:hover {
    background: #fff;
    color: #3E62AE;
    border: 1px solid #3E62AE;
}

/* video modal */

.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.video-modal-content {
    width: 70%;
    max-width: 900px;
    position: relative;
}

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

.faq-section {
    padding: 0 0 100px;
}

/* IMAGE */
.faq-image {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.faq-image img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 20px;
    transition: transform 0.4s ease;
}

.faq-image:hover img {
    transform: scale(1.04);
}

.faq-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ffb800;
    width: 70px;
    height: 70px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #000;
}

/* FAQ */

.faq-container {
    margin-top: 20px;
}

.faq-item {
    background: #fff;
    border-radius: 14px;
    padding: 20px 25px;
    margin-bottom: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 18px;
}

.faq-answer {
    margin-top: 15px;
    color: #666;
    display: none;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-toggle {
    font-size: 20px;
}

@media (max-width: 991px) {
    .faq-image img {
        max-height: 400px;
        object-fit: cover;
    }

    .faq-section .row {
        flex-direction: column;
    }

    .faq-image {
        margin-bottom: 30px;
    }

    .faq-question {
        font-size: 16px;
    }
}

/* ======================================
Contact Us
========================================= */
/* HERO */

.contact-hero {
    background: url('../images/contact-bg.jpg') center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 70px;
    padding: 100px 0px;
}

.contact-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.721);
}

/* CONTACT SECTION */

.contact-section {
    padding: 100px 0;
    background: #f9fafb;
}

.contact-tag {
    font-size: 14px;
    color: #4982C3;
    letter-spacing: 2px;
}

.contact-title {
    font-size: 40px;
    font-weight: 700;
    margin: 10px 0 40px;
}

.contact-title span {
    text-decoration: underline;
    color: #4982C3;
}


/* FORM */

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 12px 5px;
    margin-bottom: 30px;
    background: none;
    outline: none;
}

.contact-form textarea {
    height: 100px;
    resize: none;
}

.privacy {
    margin-top: 20px;
    font-size: 14px;
    color: #555;
}

.contact-form .privacy input {
    width: auto !important;
}

/* SUPPORT CARD */

.support-card {
    background: #4982C3;
    color: #fff;
    padding: 35px;
    border-radius: 10px;
}

.support-card h4 {
    font-size: 28px;
    margin-bottom: 15px;
}

.support-image {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}

.support-image img {
    width: 100%;
    display: block;
    transition: all 0.3s ease-in-out;
}
.support-image:hover img{
    transform: scale(1.04);
}
/* GREEN GRADIENT OVERLAY */

.support-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top,
            rgba(17, 53, 78, 0.95),
            rgba(17, 50, 78, 0.7),
            rgba(17, 78, 55, 0.0));

    display: flex;
    align-items: flex-end;
    padding: 20px;
}

/* TEXT AREA */

.support-info {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
}

.support-info i {
    font-size: 28px;
}

.support-info h6 {
    margin: 0;
    font-size: 18px;
}

.support-info span {
    font-size: 14px;
    opacity: .9;
}

.contact-info-section {
    padding: 0px 0 100px;
    background: #f9fafc;
}

/* TITLE */

.section-title h2 {
    font-size: 42px;
    font-weight: 700;
}

.section-title span {
    color: #ff4b6e;
}

.section-title p {
    color: #777;
    max-width: 600px;
    margin: auto;
}

/* CARD */

.info-card {
    background: #f9f9f9;
    padding: 35px;
    border-radius: 12px;
    transition: 0.3s;
    border: 1px solid #D7D7D7;
    height: 100%;
}

.info-card:hover {
    border-style: solid;
    border-color: #4982C3;
    box-shadow: 0px 4px 0px 0px #4982C3;
    transform: translateY(-5px);
}

/* CARD TITLE */

.info-card h4 {
    font-weight: 600;
    margin-bottom: 25px;
    position: relative;
}

.info-card h4::after {
    content: "";
    height: 1px;
    width: 50%;
    background: #5a5a5a;
    position: absolute;
    top: 50%;
    margin-left: 10px;
}

/* ITEMS */

.info-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 15px;
}

.info-item i {
    font-size: 18px;
    color: #000;
    margin-top: 4px;
}

.info-item p {
    margin: 0;
    color: #333;
}

/* Responsive */
@media (max-width: 991px) {

    .contact-section {
        padding: 70px 0;
    }

    .support-card {
        margin-top: 30px;
    }

    .info-card {
        text-align: center;
    }

    .info-item {
        justify-content: center;
    }

    .info-card h4::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .contact-hero {
        padding: 70px 15px;
    }

    .contact-hero h1 {
        font-size: 28px;
    }

    .contact-hero h5 {
        font-size: 14px;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 10px 5px;
        margin-bottom: 20px;
    }

    .contact-title {
        font-size: 26px;
    }

    .support-card {
        padding: 25px;
    }

    .support-card h4 {
        font-size: 22px;
    }

    .info-card {
        padding: 25px;
    }
}

/* =====================================
Blogs
======================================== */
.blog-hero {
    background: url('../images/blog-bg.jpg') center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 70px;
    padding: 120px 30px;
}

.blog-grid-section {
    padding: 100px 0;
    background: #f9fafc;
}

.blog-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
    height: 100%;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-image {
    position: relative;
}

.blog-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.blog-category {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: #4982C3;
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 24px;
}

.blog-content {
    padding: 20px;
}

.blog-content h5 {
    font-size: 18px;
    font-weight: 600;
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 14px;
    color: #777;
}

.blog-pagination .page-btn {
    display: inline-block;
    margin: 5px;
    padding: 6px 12px;
    background: #eee;
    border-radius: 50%;
    cursor: pointer;
}

.blog-pagination .active {
    background: #4982C3;
    color: #fff;
}

/* ------------ blog detail ------------ */
.blog-detail-section {
    margin: auto;
    max-width: 1100px;
    padding: 80px 0;
}

.blog-featured-image {
    position: relative;
}

.blog-featured-image img {
    width: 100%;
    border-radius: 10px;
}

.blog-title {
    font-size: 28px;
    font-weight: 700;
    margin-top: 30px;
}

.blog-text {
    color: #666;
    margin-top: 15px;
    line-height: 1.8;
}

.blog-subtitle {
    font-size: 20px;
    font-weight: 600;
}

.blog-inner-img {
    width: 100%;
    border-radius: 10px;
}

.blog-list {
    list-style: none;
    padding: 0;
}

.blog-list li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

.blog-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #4982C3;
}

/* =====================================
Course Detail
======================================== */
.course-detail-page {
    background: #f5f6fa;
    padding: 50px 0;
}

.course-detail-container {
    max-width: 900px;
    margin: auto;
}

/* cards */

.course-detail-card {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.124);
    margin-bottom: 25px;
}

.course-detail-image-card {
    margin: 20px 0;
}

.course-detail-image-card img {
    width: 100%;
    border-radius: 10px;
}

/* headings */

.course-detail-card h3 {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 15px;
}

.course-detail-card h4 {
    font-weight: 600;
    font-size: 16px;
    margin: 15px 0 10px;
}

.course-detail-card p {
    color: #666;
    line-height: 1.6;
}

.course-detail-card ul {
    padding-left: 18px;
    color: #555;
}

/* right price */

.course-detail-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: red;
    margin: 16px 0;
}

.price-free {
    color: #27ae60;
    font-size: 28px;
}

.price-old {
    text-decoration: line-through;
    color: #353535;
}

.price-off {
    color: #777;
    font-size: 14px;
}

.price-buttons {
    display: flex;
    gap: 10px;
    margin: 20px 0;
}


/* list */

.course-list {
    list-style: none;
    padding: 0;
}

.course-list li {
    padding: 8px 0;
    border-bottom: 1px solid #e5e5e5;
    color: #333;
}

/* accordion */

.course-acc-item {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.course-acc-btn {
    width: 100%;
    text-align: left;
    padding: 14px;
    background: #fafafa;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.course-acc-content {
    display: none;
    padding: 15px;
    border-top: 1px solid #e5e5e5;
}

/* instructor */

.course-instructor {
    display: flex;
    gap: 15px;
    align-items: center;
}

.course-instructor img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
}

.course-instructor-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 15px 0;
    font-size: 14px;
    color: #666;
}

/* responsive */

@media(max-width:900px) {

    .course-detail-container {
        grid-template-columns: 1fr;
    }

}