#viewport {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    background: #444;
    color: #ddd;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 25px;
}

/* =========================================================
   INTRO
   ========================================================= */

.intro-area {  
    padding: 0 0 30px;
    background: #fff; 
}
.intro-top {
    position: relative;
}
.intro-top .intro-bg {
    width: 100%;
    max-height: 168px;
    margin-bottom: 20px; 
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
}
.intro-top .site-logo {
    width: 100%;
    height: auto;
    max-width: 55px;
    border-radius: 10px;
    position: absolute;
    left: 3%;
    top: 6%;
}
.profile-box {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    z-index: 2;
}

.profile-img {
    position: relative;
    display: block;
    width: 110px;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
} 

.profile-box a::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 25px;
    height: 25px;
    background-color: #4daf47;
    box-shadow: 0 1px 5px rgb(0 0 0 / 50%);
    border-radius: 50%;
    content: '\F26E';
    color: #fff;
    font-family: 'bootstrap-icons';
    font-size: 12px;
    line-height: 25px;
    text-align: center;
    transform: translate(0%, 20%);
}
 
.text-box {
    text-align: center;
    padding-top: 55px;
}

.intro-content h4 {
    margin-bottom: 8px;
    color: #333;
    font-size: 16px;
    font-style: italic;
    text-transform: capitalize;
    text-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}

.intro-content ul li {
    position: relative;
    display: inline-block;
    color: #333;
    font-size: 18px;
    font-weight: 800;
    margin: 0 5px;
}

.intro-content p {
    padding: 0;
    margin: 10px 0 20px;
    color: #333;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    text-shadow: 0 1px 2px rgb(0 0 0 / 10%);
} 

.btn-actions a {
    display: block;
    padding: 13px 5px;
    color: #fff;
    background-color: #333;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgb(255 255 255 / 30%);
    font-size: 14px;
    letter-spacing: 2px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.5s ease;
}

.btn-action-2nd {
    background: linear-gradient(90deg, #000, #a7a7a7);
}
  
.btn-call {
    display: inline-block;
    width: 100%;
    padding: 13px 5px;
    margin: 0 auto;
    color: #333;
    background-color: #f3f3f3;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
    font-size: 14px;
    letter-spacing: 2px;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    text-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}

.intro-actions {
    display: grid;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}

/* Call button - full width */
.direct-call,
.btn-call {
    width: 100%;
    text-align: center;
}

/* Two buttons - equal width */
.btn-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.btn-action {
    width: 100%;
}

/* Arrow - centered below buttons */
.arrow-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.arrow-icon a {
    display: inline-flex;
}
 
.arrow-icon {
    text-align: center;
}

.arrow-icon img {
    display: block;
    width: 30px;
    height: 30px;
    margin-top: 10px;
    cursor: pointer;
    border: 2px solid #ddd;
    border-radius: 50%;
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
}

.btn-site {
    display: inline-block;
    padding: 13px 20px;
    color: #fff;
    background: var(--primary-gradient);
    border-radius: 10px;
    font-size: 14px;
    letter-spacing: 2px;
    text-decoration: none;
    text-shadow: 0 1px 3px rgb(0 0 0 / 20%);
}

@media (max-width: 768px) {
    .intro-top .intro-bg {
        max-height: 140px;
        margin-bottom: 10px;
    }
    .intro-content ul li {
        font-size: 16px;
            margin: 0 3px;
    }
    
    .intro-content p {
        font-size: 15px;
    }
    .btn-actions a {
        padding: 13px 5px;
    }
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.heading {
    padding: 10px 15px;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #000, #a7a7a7);
    border-radius: 5px;
}

.heading h2 {
    position: relative;
    margin-bottom: 3px;
    color: #fff;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: capitalize;
}

.heading p {
    margin-bottom: 0;
    color: var(--secondary);
    font-size: 11px;
    font-style: italic;
    letter-spacing: 1px;
}


/* =========================================================
   SERVICES
   ========================================================= */

.service-card {
    padding: 10px;
    background: #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 1px 15px rgb(0 0 0 / 20%);
}

.service-wrap {
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
}

.service-icon,
.service-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-card .icon {
    padding: 5px;
    background: var(--primary-gradient);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
}

.service-card img {
    max-width: 38px;
}

.service-card .title span {
    color: #444;
    font-size: 16px;
    font-style: italic;
}

.service-card .service-title {
    min-width: 0;
    margin-bottom: 0;
    color: #333;
    font-size: 22px;
    font-weight: 800;
    line-height: 26px;
    overflow-wrap: break-word;
}

.service-card p {
    padding: 9px 0 5px;
    margin-bottom: 0;
    color: #444;
    font-size: 16px;
    line-height: 28px;
}

.service-card ul {
    margin-left: 3px;
}

.service-card ul li {
    position: relative;
    display: inline-block;
    padding-left: 19px;
    margin-right: 8px;
    color: #444;
    font-size: 15px;
    line-height: 1;
}

.service-card ul li::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '\F141';
    color: var(--tertiary);
    font-family: 'bootstrap-icons';
    font-size: 15px;
}


/* =========================================================
   PROJECTS
   ========================================================= */

.project-card {
    position: relative;
    margin-bottom: 10px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 9px rgb(0 0 0 / 20%);
    text-align: left;
}

.project-card img {
    width: 100%;
}

.project-card .info {
    padding: 10px 15px 20px;
}

.project-card .info h3 {
    margin-bottom: 15px;
    color: #333;
    font-size: 22px;
    font-weight: 600;
}

.project-card p {
    margin: 8px 0 0;
    font-size: 15px;
}

.stack span {
    display: inline-block;
    padding: 4px 8px;
    color: #333;
    border: 1px dashed #ddd;
    border-radius: 25px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
    font-size: 12px;
    letter-spacing: 1px;
}

.project-card .btn-site {
    position: relative;
    display: inline-block;
    min-width: 136px;
    margin-top: 5px;
    color: #fff;
}

.my-projects .btn-site::after {
    position: absolute;
    top: 12px;
    right: 10px;
    content: '\F141';
    color: #fff;
    font-family: 'bootstrap-icons';
    font-size: 15px;
}


/* =========================================================
   HIRE BOX
   ========================================================= */

.hire-box {
    position: relative;
    z-index: 1;
    margin-top: 120px !important;
    padding: 85px 0 50px;
    background-color: #323a24;
    background-image: url(../images/texture.jpg);
    text-align: center;
}

.hire-box::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 70%);
    content: '';
}

.hire-box .profile {
    position: absolute;
    top: 0;
    left: 50%;
    width: 150px;
    height: auto;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.profile img {
    position: relative;
    width: 130px;
    height: auto;
    border-radius: 50%;
    border: 4px solid #ddd;
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
}

.hire-box .profile::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 25px;
    height: 25px;
    background-color: #4daf47;
    box-shadow: 0 1px 5px rgb(0 0 0 / 50%);
    border-radius: 50%;
    content: '\F26E';
    color: #fff;
    font-family: 'bootstrap-icons';
    font-size: 12px;
    line-height: 25px;
    text-align: center;
    transform: translate(-50%, 30%);
}

.hire-box p {
    padding: 10px 0;
    margin-bottom: 10px;
    color: #333;
    font-size: 20px;
    text-transform: uppercase;
    text-shadow: 0 -3px 3px #fff;
} 

/* Button Group */
.site-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.hire-box .btn-site {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 44px;
    padding: 10px 15px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.btn-alt {
    background: #444 !important;
}
/* Pricing Button */

.hire-box .btn-site:not(.btn-alt)::after {
    content: "\F138";
    font-family: "bootstrap-icons";
    font-size: 16px;
}


/* Message Button */

.hire-box .btn-alt::after {
    content: "\F618";
    font-family: "bootstrap-icons";
    font-size: 16px;
}
.count-badge {
    display: inline-block;
    padding: 8px 18px;
    margin: 10px auto;
    color: #fff;
    background: #000;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
    font-size: 14px;
    font-weight: 600;
}
 
/* =========================================================
   TESTIMONIALS / REVIEWS
   ========================================================= */

.tsm-slide {
    position: relative;
    height: 100%;
    padding: 30px 20px 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
    text-align: center;
}

.tsm-slide::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50px;
    height: 50px;
    content: '\F6B0';
    color: #fff;
    background: var(--primary-gradient);
    border-radius: 25px;
    font-family: 'bootstrap-icons';
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    transform: translate(-50%, -50%);
}

.tsmSwiper {
    padding: 30px 0 50px;
    margin-bottom: 30px;
}

.tsm-slide p {
    padding: 10px 9%;
    font-size: 16px;
    margin-bottom: 0;
    color: #444;
    font-style: italic;
}

.tsm-slide h6 {
    position: relative;
    margin-top: 5px;
    font-size: 15px;
    font-weight: 800;
}

.tsm-slide .stars i {
    color: #ffa500;
    font-size: 10px;
}

.tsmSwiper .swiper-pagination {
    color: #333;
    font-size: 14px;
}

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

.tsmSwiper .swiper-navigation-icon {
    display: none !important;
}

.tsmSwiper .swiper-button-next::before {
    content: '\F285';
}

.tsmSwiper .swiper-button-prev::before {
    content: '\F284';
}

.tsmSwiper .swiper-button-next::before,
.tsmSwiper .swiper-button-prev::before {
    color: #666;
    font-family: 'bootstrap-icons';
    font-size: 23px;
}


/* =========================================================
   COURSES
   ========================================================= */

.my-courses {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.course-box {
    width: calc(50% - 15px);
    padding: 25px 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
    position: relative;
}
.course-box > span {
    position: absolute;
    top: 13px;
    right: 10px;
    padding: 4px 8px;
    color: #666;
    font-size: 12px;
    background: #eee;
    border-radius: 25px;
}
.course-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.course-top .title h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 0;
    color: #333;
    line-height: 26px;
    min-width: 0;
    overflow-wrap: break-word;
}
.course-top .title span {
    color: #444;
    font-size: 16px;
    font-style: italic;
}

.course-box img {
    max-width: 50px;
}

.course-info {
    margin-top: 5px;
}

.my-courses p {
    padding: 9px 0 5px;
    color: #333;
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 0;
}

.my-courses .price {
    font-size: 16px;
    font-weight: 600;
    padding: 0 0 5px;
}

.my-courses .price del {
    margin-right: 5px;
    color: #333;
    opacity: 0.5;
}
 
.my-courses a {
    position: relative;
    display: inline-block;
    min-width: 136px;
    margin-top: 5px;
    color: #fff;
}
.my-courses a::after {
    position: absolute;
    top: 12px;
    right: 10px;
    content: '\F141';
    color: #fff;
    font-family: 'bootstrap-icons';
    font-size: 15px;
}
@media (max-width: 768px) {
    .course-box {
        width: 100%;
    }
}


/* =========================================================
   EXCLUSIONS
   ========================================================= */

.exclusions ul li {
    padding: 10px 20px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 25px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
    font-size: 17px;
    line-height: 40px;
}

.exclusions ul li i {
    margin-right: 3px;
    color: #ff4b4b;
}
 /* =========================================================
    Pricing Page
    ========================================================= */

.pricing-page {
    width: 100%;

    padding: 70px 20px 80px;
}


.pricing-container {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
}


/* =========================================================
   Intro
   ========================================================= */

.pricing-intro {
    max-width: 700px;
    
    margin: 0 auto 50px;

    text-align: center;
}


.pricing-label {
    display: inline-block;
    color: var(--tertiary);
    margin-bottom: 12px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.5px;
    text-transform: uppercase;
}


.pricing-intro h1 {
    margin: 0 0 15px;

    font-size: 38px;
    line-height: 1.3;

    font-weight: 800;
}


.pricing-intro p {
    margin: 0;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   Pricing Grid
   ========================================================= */

.pricing-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

    align-items: stretch;
}


/* =========================================================
   Pricing Card
   ========================================================= */

.pricing-card {
    position: relative;

    display: flex;

    flex-direction: column;

    padding: 30px 25px;

    border: 1px solid #e2e2e2;
    border-radius: 10px;

    background: #fff;
}


.pricing-card.featured {
    border-color: #222;
}


/* =========================================================
   Popular Badge
   ========================================================= */

.pricing-badge {
    position: absolute;

    top: 15px;
    right: 15px;

    padding: 5px 10px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   Card Header
   ========================================================= */

.pricing-card-header {
    min-height: 125px;
}


.pricing-card-header h2 {
    margin: 0 0 12px;

    font-size: 21px;
    line-height: 1.4;

    font-weight: 700;
}


.pricing-card-header p {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   Price
   ========================================================= */

.pricing-price {
    display: flex;

    align-items: baseline;

    gap: 7px;

    margin: 25px 0;

    padding-bottom: 20px;

    border-bottom: 1px solid #e8e8e8;
}


.pricing-price strong {
    font-size: 30px;
    line-height: 1;

    font-weight: 800;
}


.pricing-price span {
    font-size: 12px;
}


/* =========================================================
   Features
   ========================================================= */

.pricing-features {
    display: flex;

    flex-direction: column;

    gap: 12px;

    margin: 0 0 30px;

    padding: 0;

    list-style: none;
}


.pricing-features li {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    font-size: 14px;

    line-height: 1.6;
}


.pricing-features i {
    flex-shrink: 0;

    margin-top: 2px;

    font-size: 16px;
}


/* =========================================================
   Button
   ========================================================= */

.pricing-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    width: 100%;

    margin-top: auto;

    padding: 11px 18px;

    border: 1px solid #222;
    border-radius: 5px;

    color: inherit;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


.pricing-button:hover {
    background: #222;

    color: #fff;
}


/* =========================================================
   Custom Project Note
   ========================================================= */

.pricing-note {
    max-width: 750px;

    margin: 60px auto 0;

    padding: 35px 30px;

    border: 1px solid #e2e2e2;
    border-radius: 10px;

    text-align: center;
}


.pricing-note h2 {
    margin: 0 0 12px;

    font-size: 24px;
    line-height: 1.4;
}


.pricing-note p {
    margin: 0 auto 22px;

    max-width: 620px;

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   Contact Button
   ========================================================= */

.pricing-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    box-shadow: 0 1px 5px rgb(0 0 0 / 50%);
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    background: #444;
    color: #fff;
    transition: background-color 0.2s ease, color 0.2s ease;
}


.pricing-contact-button:hover {
    background: #222;

    color: #fff;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 900px) {

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

    .pricing-card:last-child {
        grid-column: 1 / -1;

        max-width: 430px;

        width: 100%;

        margin: 0 auto;
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {

    .pricing-page {
        padding: 50px 15px 60px;
    }


    .pricing-intro {
        margin-bottom: 35px;
    }


    .pricing-intro h1 {
        font-size: 29px;
    }


    .pricing-intro p {
        font-size: 14px;
    }


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

        gap: 20px;
    }


    .pricing-card:last-child {
        grid-column: auto;

        max-width: none;
    }


    .pricing-card {
        padding: 25px 20px;
    }


    .pricing-card-header {
        min-height: auto;
    }


    .pricing-note {
        margin-top: 40px;

        padding: 30px 20px;
    }


    .pricing-note h2 {
        font-size: 21px;
    }

}

 /* =========================================================
    Projects Page
    ========================================================= */

.projects-page {
    width: 100%;

    padding: 70px 20px 80px;
}


.projects-container {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
}


/* =========================================================
   Page Intro
   ========================================================= */

.projects-intro {
    max-width: 720px;

    margin: 0 auto 50px;

    text-align: center;
}


.projects-label {
    display: inline-block;
    color: var(--tertiary);
    margin-bottom: 12px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.5px;
    text-transform: uppercase;
}


.projects-intro h1 {
    margin: 0 0 15px;

    font-size: 38px;
    line-height: 1.3;

    font-weight: 800;
}


.projects-intro p {
    margin: 0;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   Project Grid
   ========================================================= */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}


/* =========================================================
   Project Card
   ========================================================= */

.project-card {
    overflow: hidden;

    border: 1px solid #e2e2e2;
    border-radius: 10px;

    background: #fff;
}


/* =========================================================
   Project Image
   ========================================================= */

.project-image {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #f3f3f3;
}


.project-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.3s ease;
}


.project-card:hover .project-image img {
    transform: scale(1.03);
}


/* =========================================================
   Project Category
   ========================================================= */

.project-category {
    position: absolute;

    top: 14px;
    left: 14px;

    padding: 5px 10px;

    border-radius: 4px;

    background: rgba(255, 255, 255, 0.92);

    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   Project Content
   ========================================================= */

.project-content {
    padding: 25px;
}


.project-content h2 {
    margin: 0 0 10px;

    font-size: 22px;
    line-height: 1.4;

    font-weight: 700;
}


.project-content > p {
    margin: 0 0 18px;

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   Project Tags
   ========================================================= */

.project-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 22px;
}


.project-tags span {
    display: inline-block;

    padding: 4px 9px;

    border: 1px solid #e1e1e1;
    border-radius: 4px;

    font-size: 11px;
    line-height: 1.4;
}


/* =========================================================
   Project Links
   ========================================================= */

.project-links {
    display: flex;

    align-items: center;

    padding-top: 16px;

    border-top: 1px solid #ededed;
}


.project-links a {
    display: inline-flex;

    align-items: center;
    color: var(--tertiary);
    gap: 7px;
 

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
}


.project-links a:hover {
    text-decoration: underline;
}


/* =========================================================
   Bottom Note
   ========================================================= */

.projects-note {
    margin-top: 50px;

    padding-top: 20px;

    border-top: 1px solid #e5e5e5;

    text-align: center;
    display: none;
}


.projects-note p {
    margin: 0;
    
    font-size: 13px;
    line-height: 1.7;
}




/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 700px) {

    .projects-page {
        padding: 50px 15px 60px;
    }


    .projects-intro {
        margin-bottom: 35px;
    }


    .projects-intro h1 {
        font-size: 30px;
    }


    .projects-intro p {
        font-size: 14px;
    }


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

        gap: 20px;
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 480px) {

    .project-content {
        padding: 20px;
    }


    .project-content h2 {
        font-size: 20px;
    }


    .project-content > p {
        font-size: 13px;
    }


    .projects-note {
        margin-top: 35px;
    }

}


 /* =========================================================
    LANDING PAGES / UI
    ========================================================= */

.landing-pages { 
    width: 100%;
    padding: 70px 20px 80px;
    border-top: 1px solid #ddd;
} 
/* ---------------------------------------------------------
   Section Intro
   --------------------------------------------------------- */

.landing-pages-intro {
    max-width: 700px;
    margin: 0 auto 35px;
    text-align: center;
}

.landing-pages-label {
    display: inline-block;
    margin-bottom: 8px;

    color: var(--tertiary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.landing-pages-intro h2 {
    margin-bottom: 10px;

    color: #222;
    font-size: 30px;
    font-weight: 700;
}

.landing-pages-intro p {
    margin: 0;

    color: #666;
    font-size: 16px;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   Landing Pages Grid
   --------------------------------------------------------- */

.landing-pages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* ---------------------------------------------------------
   Landing Page Card
   --------------------------------------------------------- */

.landing-page-card {
    overflow: hidden;

    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgb(0 0 0 / 15%);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.landing-page-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 18px rgb(0 0 0 / 15%);
}


/* ---------------------------------------------------------
   Image
   --------------------------------------------------------- */

.landing-page-image {
    position: relative;
    overflow: hidden;

    aspect-ratio: 16 / 9;
    background-color: #eee;
}

.landing-page-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 0.4s ease;
}

.landing-page-card:hover .landing-page-image img {
    transform: scale(1.03);
}


/* ---------------------------------------------------------
   Content
   --------------------------------------------------------- */

.landing-page-content {
    padding: 22px 20px 20px;
}

.landing-page-category {
    display: inline-block;
    margin-bottom: 7px;

    color: var(--tertiary);
    font-size: 13px;
    font-weight: 600;
}

.landing-page-content h3 {
    margin-bottom: 8px;

    color: #222;
    font-size: 21px;
    font-weight: 700;
}

.landing-page-content p {
    margin-bottom: 18px;

    color: #666;
    font-size: 15px;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   Link
   --------------------------------------------------------- */

.landing-page-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: var(--tertiary);
    font-size: 14px;
    font-weight: 600;

    transition: gap 0.3s ease;
}

.landing-page-link i {
    font-size: 14px;
}

.landing-page-link:hover {
    gap: 10px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

    .landing-pages {
        margin-top: 60px;
        padding: 45px 15px;
    }

    .landing-pages-intro {
        margin-bottom: 25px;
    }

    .landing-pages-intro h2 {
        font-size: 26px;
    }

    .landing-pages-intro p {
        font-size: 15px;
    }

    .landing-pages-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .landing-page-content {
        padding: 20px 17px;
    }

}

/* =========================================================
   Courses Page
   ========================================================= */

.courses-page {
    width: 100%;

    padding: 70px 20px 80px;
}


.courses-container {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
}


/* =========================================================
   Page Intro
   ========================================================= */

.courses-intro {
    max-width: 720px;

    margin: 0 auto 50px;

    text-align: center;
}


.courses-label {
    display: inline-block;

    margin-bottom: 12px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.5px;
    text-transform: uppercase;
}


.courses-intro h1 {
    margin: 0 0 15px;

    font-size: 38px;
    line-height: 1.3;

    font-weight: 800;
}


.courses-intro p {
    margin: 0;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   Course Grid
   ========================================================= */

.courses-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 25px;
}


/* =========================================================
   Course Card
   ========================================================= */

.course-card {
    display: flex;

    flex-direction: column;

    padding: 28px;

    border: 1px solid #e2e2e2;
    border-radius: 10px;

    background: #fff;
}


/* =========================================================
   Course Icon
   ========================================================= */

.course-icon {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border: 1px solid #ddd;
    border-radius: 8px;

    font-size: 21px;
}


/* =========================================================
   Course Content
   ========================================================= */

.course-content {
    flex: 1;
}


.course-status {
    display: inline-block;

    margin-bottom: 10px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.4px;
    text-transform: uppercase;
}


.course-content h2 {
    margin: 0 0 12px;

    font-size: 22px;
    line-height: 1.4;

    font-weight: 700;
}


.course-content p {
    margin: 0 0 20px;

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   Course Tags
   ========================================================= */

.course-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.course-tags span {
    display: inline-block;

    padding: 4px 9px;

    border: 1px solid #e1e1e1;
    border-radius: 4px;

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   Course Footer
   ========================================================= */

.course-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 25px;
    padding-top: 18px;

    border-top: 1px solid #ededed;
}


.course-type {
    font-size: 12px;
}


.course-footer a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: inherit;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
}


.course-footer a:hover {
    text-decoration: underline;
}


/* =========================================================
   Learning Note
   ========================================================= */

.courses-note {
    max-width: 750px;

    margin: 55px auto 0;

    padding: 35px 30px;

    border: 1px solid #e2e2e2;
    border-radius: 10px;

    text-align: center;
}


.courses-note h2 {
    margin: 0 0 12px;

    font-size: 24px;
    line-height: 1.4;
}


.courses-note p {
    max-width: 620px;

    margin: 0 auto;

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 700px) {

    .courses-page {
        padding: 50px 15px 60px;
    }


    .courses-intro {
        margin-bottom: 35px;
    }


    .courses-intro h1 {
        font-size: 30px;
    }


    .courses-intro p {
        font-size: 14px;
    }


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

        gap: 20px;
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 480px) {

    .course-card {
        padding: 22px 20px;
    }


    .course-content h2 {
        font-size: 20px;
    }


    .course-content p {
        font-size: 13px;
    }


    .course-footer {
        align-items: flex-start;

        flex-direction: column;
    }


    .courses-note {
        margin-top: 40px;

        padding: 30px 20px;
    }


    .courses-note h2 {
        font-size: 21px;
    }

}


/* =========================================================
   404 Error Page
   ========================================================= */

.error-page {
    width: 100%;
    min-height: 60vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 60px 20px;
}


/* =========================================================
   Wrapper
   ========================================================= */

.error-wrapper {
    width: 100%;
    max-width: 700px;

    margin: 0 auto;
}


/* =========================================================
   Content
   ========================================================= */

.error-content {
    padding: 50px 30px;

    text-align: center;

    border: 1px solid #e5e5e5;
    border-radius: 10px;

    background: #fff;
}


/* =========================================================
   Error Code
   ========================================================= */

.error-code {
    margin-bottom: 10px;

    font-size: 90px;
    line-height: 1;

    font-weight: 800;
}


/* =========================================================
   Title
   ========================================================= */

.error-content h1 {
    margin: 0 0 12px;

    font-size: 28px;
    line-height: 1.4;
}


/* =========================================================
   Description
   ========================================================= */

.error-content p {
    margin: 0 auto 25px;

    max-width: 500px;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   Home Link
   ========================================================= */

.error-home-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 11px 20px;

    border: 1px solid #222;
    border-radius: 5px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;
}


/* =========================================================
   Hover
   ========================================================= */

.error-home-link:hover {
    text-decoration: none;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {

    .error-page {
        min-height: 55vh;

        padding: 40px 15px;
    }

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

    .error-code {
        font-size: 70px;
    }

    .error-content h1 {
        font-size: 23px;
    }

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

}
/* =========================================================
   SITE FOOTER
   ========================================================= */

.site-footer {
    padding: 60px 0 80px;
    background-color: #253338;
}
.footer-info .site-logo {
    max-width: 70px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.about-txt {
    color: #ddd;
    font-size: 15px;
    margin-bottom: 20px;
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-bottom: 5px;
}

.contact-row .bi {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
}
 
.contact-row p {
    margin: 0;
    line-height: 1.5;
}
   
.footer-socials a {
    display: inline-block;
    padding: 9px 20px;
    color: #fff;
    background-color: transparent;
    border-radius: 5px;
    border: 1px solid #000;
    font-size: 13px;
    transition: all 0.5s ease;
    text-decoration: none;
}

.contact-box i {
    color: var(--secondary);
    font-size: 14px;
}

.contact-box p {
    margin-bottom: 0;
    color: #c1c1c1;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 18px;
    text-shadow: 0 1px 3px #000;
}

.contact-box p.label {
    color: #f3f3f3;
    font-size: 14px;
    letter-spacing: 1.5px;
}

@media (min-width: 768px) {
    .contact-info {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .contact-info h4 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .contact-info {
        display: block;
    }
}

.my-social ul {
    text-align: left;
}

.my-social ul li {
    display: inline-block;
    margin-right: 5px;
}

.my-social ul li a {
    display: inline-block;
    width: 35px;
    height: 35px;
    color: var(--secondary);
    background-color: transparent;
    border: 1px solid #404040;
    border-radius: 25px;
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
    font-size: 12px;
    line-height: 35px;
    text-align: center;
    transition: all 0.3s ease;
}

.copyright {
    padding: 20px 0;
    margin-bottom: 0;
    color: #c1c1c1;
    font-size: 12px;
    letter-spacing: 2px;
    text-align: left;
    text-shadow: 0 1px 3px #000;
}