.csws-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    /* box-shadow:0 4px 20px rgba(0,0,0,.05); */
}

.csws-header-container {
    max-width: 1100px;
    margin: auto;
    padding: 15px 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.csws-logo img {
    height: 70px;
}

/* MENU */

.csws-menu {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.csws-menu li {
    position: relative;
}

.csws-menu li a {
    text-decoration: none;
    color: #2d2357;
    font-size: 15px;
    font-weight: 500;
    transition: .3s;
}

.csws-menu li a:hover {
    color: #c54bd9;
}

/* ACTIVE PAGE */

.csws-menu li a.active {
    color: #c54bd9;
    font-weight: 700;
}

.csws-menu li a.active::after {
    content: '';
    width: 100%;
    height: 2px;
    background: #c54bd9;

    position: absolute;
    left: 0;
    bottom: -8px;
}

/* DROPDOWN */

.csws-dropdown-menu {
    position: absolute;
    top: 120%;
    left: 0;

    min-width: 240px;

    background: #fff;
    border-radius: 12px;

    padding: 12px 0;

    opacity: 0;
    visibility: hidden;

    transition: .3s;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);

    list-style: none;
}

.csws-dropdown:hover .csws-dropdown-menu {
    opacity: 1;
    visibility: visible;
    top: 100%;
}

.csws-dropdown-menu li {
    width: 100%;
}

.csws-dropdown-menu a {
    display: block;
    padding: 12px 20px;
}

.csws-dropdown-menu a:hover {
    background: #faf6ff;
}

/* BUTTON */

.csws-quote-btn {
    text-decoration: none;

    background: linear-gradient(90deg,
            #c54bd9,
            #5e5ce6);

    color: #fff;

    padding: 12px 22px;

    border-radius: 50px;

    display: flex;
    align-items: center;
    gap: 10px;

    font-weight: 600;
}

.csws-arrow {
    width: 28px;
    height: 28px;

    background: rgba(255, 255, 255, .2);

    border-radius: 50%;

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

.csws-buttons {
    display: flex;
    gap: 20px;
    align-items: center;
}

.csws-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 16px 28px;

    background: linear-gradient(90deg,
            #f44fb5,
            #6d5cff);

    border-radius: 60px;

    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
}

.csws-arrows {
    width: 34px;
    height: 34px;

    background: rgba(255, 255, 255, .20);

    border-radius: 50%;

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

    flex-shrink: 0;
}

.csws-arrows i {
    color: #fff;
    font-size: 14px;
}

/* MOBILE */

.csws-toggle {
    display: none;
    border: none;
    background: none;
    font-size: 22px;
    color: #2d2357;
}

@media(max-width:991px) {

    .csws-toggle {
        display: block;
    }

    .csws-navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;

        display: none;
    }

    .csws-navbar.active {
        display: block;
    }

    .csws-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 20px;
    }

    .csws-menu li {
        width: 100%;
    }

    .csws-menu li a {
        display: block;
        padding: 12px 0;
    }

    .csws-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        display: none;
        box-shadow: none;
        padding-left: 15px;
    }

    .csws-dropdown:hover .csws-dropdown-menu {
        display: block;
    }

    .csws-quote-btn {
        display: none;
    }
}



.quote-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(90deg, #c54ca4, #4f56d6);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    transition: all .3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    white-space: nowrap;
}

.quote-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}

.arrow-circle {
    width: 28px;
    height: 28px;
    border: 1.5px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

/* Responsive */
@media (max-width:768px) {
    .quote-btn {
        padding: 10px 18px;
        font-size: 14px;
    }

    .arrow-circle {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}


.csws-hero {
    margin-top: 0px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 20px 10%;
    background:
        radial-gradient(circle at top right, #f5d6ff 0%, transparent 30%),
        linear-gradient(135deg, #ffffff, #faf7ff);
}

.csws-container {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: -36px;
    align-items: center;
}

/* LEFT SIDE */

.csws-content small {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #333333;
    margin-bottom: 20px;
}

.csws-content h1 {
    font-size: 45px;
    line-height: 55px;
    font-weight: 800;
    color: #17172b;
    margin-bottom: 25px;
}

.csws-content h1 span {
    background: linear-gradient(90deg, #AA3286, #6d5cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.csws-content p {
    font-size: 18px;
    line-height: 1.8;
    color: #333333;
    max-width: 550px;
    margin-bottom: 35px;
}

.csws-content p strong {
    color: #6d5cff;
}

.csws-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    margin-top: -22px;
}

.csws-btn-primary {
    background: linear-gradient(90deg, #ff58b7, #6d5cff);
    padding: 15px 28px;
    border-radius: 50px;
    text-decoration: none;
    color: white;
    font-weight: 600;
}

.csws-btn-secondary {
    border: 2px solid #d8ceff;
    padding: 15px 28px;
    border-radius: 50px;
    text-decoration: none;
    color: #6d5cff;
    font-weight: 600;
    background: white;
}

.csws-features {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    /* margin-top: -40px; */

}

.csws-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
}

.csws-feature i {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    color: #6d5cff;
}

/* RIGHT SIDE */

.csws-visual {
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 50;
}

.csws-image-box {
    width: 100%;
    max-width: 620px;
    height: 520px;
    /* background:url('../img/herobanner.png') center/cover; */
    border-radius: 120px 20px 120px 20px;
    /* position:relative; */
    overflow: hidden;
}


/* DASHBOARD */

/* RESPONSIVE */

@media(max-width:1100px) {

    .csws-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .csws-content p {
        margin: auto auto 35px;
    }

    .csws-buttons,
    .csws-features {
        justify-content: center;
    }

    .csws-content h1 {
        font-size: 48px;
    }
}

@media(max-width:768px) {

    .csws-hero {
        padding: 60px 25px;
    }

    .csws-content h1 {
        font-size: 38px;
    }

    .csws-image-box {
        height: 430px;
    }

    .csws-dashboard {
        width: 92%;
        grid-template-columns: 1fr;
    }

    .csws-donut-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
}


.csws-badge {
    position: absolute;
    left: 50px;
    bottom: 40px;
    background: #fff;
    padding: 12px 18px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
    font-size: 14px;
    line-height: 1.5;
    z-index: 20;
}

.csws-badge strong {
    color: #6d5cff;
}

.csws-dashboard {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);

    width: 95%;
    /* Increase width */
    max-width: 650px;
    /* Wider dashboard */

    padding: 14px;
    border-radius: 20px;

    display: grid;
    grid-template-columns: 2.5fr 1fr;

    gap: 12px;
    z-index: 9999;
}

.csws-card {
    padding: 12px;
}

.csws-graph {
    height: 90px;
    /* Reduce graph height */
}

.csws-side {
    gap: 10px;
}

.csws-mini {
    padding: 10px 12px;
}

.csws-mini h4 {
    font-size: 18px;
    margin: 5px 0;
}

/* .csws-donut{
    width:65px;
    height:65px;
} */

.csws-donut::after {
    width: 35px;
    height: 35px;
}


.csws-social {
    z-index: 10000;
}


.csws-stats-section {
    width: 100%;
    margin-top: 22px;
    padding: 0 20px;
}

.csws-stats-wrapper {
    max-width: 1100px;
    margin: auto;
    background: #fff;
    border: 1px solid #a75de196;
    border-radius: 18px;
    padding: 22px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    box-shadow: 0 8px 25px rgba(109, 92, 255, .06);
}

.csws-stats-item {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.csws-stats-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background: linear-gradient(135deg, #ff5db1, #6d5cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.csws-stats-content h3 {
    font-size: 32px;
    line-height: 1;
    margin: 0;
    color: #222;
    font-weight: 700;
}

.csws-stats-content p {
    margin-top: 4px;
    font-size: 13px;
    color: #333333;
    font-weight: 500;
}

@media(max-width:992px) {

    .csws-stats-wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }

    .csws-stats-item {
        flex: 0 0 calc(50% - 20px);
    }
}

@media(max-width:576px) {

    .csws-stats-wrapper {
        padding: 20px;
    }

    .csws-stats-item {
        flex: 0 0 100%;
        justify-content: center;
        text-align: center;
    }

    .csws-stats-content h3 {
        font-size: 26px;
    }

    .csws-stats-icon {
        font-size: 24px;
    }
}

.csws-solutions-section {
    position: relative;
    padding: 10px 10%;
    background: #fff;
    overflow: hidden;
}

.csws-solutions-heading {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.csws-solutions-heading span {
    font-size: 17px;
    font-weight: 700;
    color: #6d5cff;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.csws-solutions-heading h2 {
    font-size: 35px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 10px 0;
}

.csws-solutions-heading p {
    color: #333333;
    font-size: 15px;
    max-width: 700px;
    margin: auto;
}

.csws-service-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Grid */

.csws-solutions-grid {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 7px;
    position: relative;
    z-index: 2;
}

/* Cards */

.csws-service-box {
    background: #fff;
    border: 1px solid #a75de196;
    border-radius: 18px;
    padding: 30px 20px;
    text-align: center;
    transition: .35s;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .04);
    height: 320px;
}

.csws-service-box:hover {
    transform: translateY(-8px);
    border-color: #d5c6ff;
    box-shadow: 0 20px 40px rgba(109, 92, 255, .12);
}

.csws-service-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    border-radius: 16px;
    background: #f8f4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    color: #c14adf;
}

.csws-service-box h3 {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 15px;
    color: #1c1c2d;
    font-weight: 700;
}

.csws-service-box p {
    color: #333333;
    font-size: 14px;
    line-height: 1.8;
}

/* Background Graphics */

.csws-shape {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.csws-shape-one {
    width: 450px;
    height: 450px;
    background: rgba(109, 92, 255, .05);
    top: -200px;
    left: -150px;
}

.csws-shape-two {
    width: 500px;
    height: 500px;
    background: rgba(255, 93, 177, .05);
    bottom: -250px;
    right: -200px;
}

/* Responsive */

@media(max-width:1200px) {

    .csws-solutions-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media(max-width:768px) {

    .csws-solutions-heading h2 {
        font-size: 34px;
    }

    .csws-solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media(max-width:576px) {

    .csws-solutions-grid {
        grid-template-columns: 1fr;
    }

    .csws-service-box {
        padding: 10px;
        height: 150px;
    }

}



.csws-mission-sec {
    padding: 40px 10%;
    background: #fbfbfb;
    overflow: hidden;
    position: relative;
}

.csws-mission-container {
    max-width: 1350px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

/* LEFT */

.csws-mission-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #777;
    margin-bottom: 12px;
}

.csws-mission-left h2 {
    font-size: 37px;
    line-height: 1.1;
    font-weight: 800;
    color: #1c1c32;
    margin-bottom: 25px;
}

.csws-mission-left h2 span {
    background: linear-gradient(90deg, #ff5db1, #6d5cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.csws-mission-left p {
    color: #333333;
    line-height: 30px;
    font-size: 17px;
    margin-bottom: 30px;
}

.csws-mission-list {
    list-style: none;
    padding: 0;
    line-height: 12px;
    font-size: 15px;
}

.csws-mission-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: #333;
    font-weight: 500;
}

.csws-mission-list i {
    color: #7c5cff;
}

/* CENTER */

.csws-mission-center {
    position: relative;
    display: flex;
    justify-content: center;
}

.csws-mission-circle {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    border: 2px dashed #dacfff;
    padding: 10px;
}

.csws-mission-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.csws-mission-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top,
            rgba(181, 73, 255, .45),
            transparent);
}

.csws-mission-badge {
    position: absolute;
    bottom: 35px;
    left: 10px;
    background: #fff;
    padding: 16px 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
}

.csws-badge-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a5cff;
    border: 2px solid #ece4ff;
}

.csws-mission-badge h4 {
    margin: 0;
    color: #222;
    font-size: 15px;
    font-weight: 700;
}

.csws-mission-badge small {
    color: #777;
}

/* RIGHT CARD */

.csws-quote-card {
    background: linear-gradient(135deg, #d143a9, #4f46e5);
    padding: 45px;
    border-radius: 18px;
    color: #fff;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.csws-quote-icon {
    font-size: 42px;
    opacity: .9;
    margin-bottom: 25px;
}

.csws-quote-card h3 {
    font-size: 16px;
    line-height: 1.45;
    font-weight: 500;
    margin-bottom: 25px;
}

.csws-sign {
    font-family: cursive;
    font-size: 15px;
    margin-bottom: 35px;
    display: block;
}

.csws-quote-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.csws-brand-icon {
    font-size: 32px;
}

.csws-quote-brand strong {
    display: block;
    font-size: 28px;
}

.csws-quote-brand small {
    display: block;
    letter-spacing: 2px;
}

/* BACKGROUND GRAPHICS */

.csws-mission-sec::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(109, 92, 255, .03);
    top: -150px;
    right: -150px;
}

.csws-mission-sec::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255, 93, 177, .03);
    bottom: -150px;
    left: -150px;
}

/* TABLET */

@media(max-width:1100px) {

    .csws-mission-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .csws-mission-list li {
        justify-content: center;
    }

    .csws-mission-badge {
        left: 50%;
        transform: translateX(-50%);
    }

    .csws-quote-brand {
        justify-content: center;
    }

}

/* MOBILE */

@media(max-width:768px) {

    .csws-mission-left h2 {
        font-size: 38px;
    }

    .csws-mission-circle {
        width: 300px;
        height: 300px;
    }

    .csws-quote-card {
        padding: 30px;
        min-height: auto;
    }

    .csws-quote-card h3 {
        font-size: 15px;
    }

    .csws-sign {
        font-size: 20px;
    }

}

.csss img {
    margin-top: -70px;
    width: 130px;
}



.cswp-process-sec {
    padding: 25px 8%;
    background: #fff;
}

.cswp-heading {
    text-align: center;
    margin-bottom: 30px;
}

.cswp-heading span {
    color: #7b5cff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.cswp-heading h2 {
    font-size: 35px;
    font-weight: 800;
    color: #16162b;
    margin-top: 10px;
}

/* TIMELINE */

.cswp-timeline {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
}

.cswp-timeline::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 12%;
    width: 76%;
    border-top: 3px dotted #bda8ff;
}

.cswp-step {
    position: relative;
    text-align: left;
    padding: 0 20px;
}

.cswp-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 40px;
    border: 6px solid #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    position: relative;
    z-index: 2;
}

.pink {
    background: linear-gradient(135deg, #ea4bb8, #c13cff);
}

.purple {
    background: linear-gradient(135deg, #9a4dff, #7b5cff);
}

.blue {
    background: linear-gradient(135deg, #4b7cff, #3566ea);
}

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

.cswp-content i {
    display: block;
    font-size: 38px;
    color: #b04adf;
    margin-bottom: 18px;
}

.cswp-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin-bottom: 12px;
}

.cswp-content p {
    font-size: 15px;
    line-height: 1.8;
    color: #333333;
    max-width: 220px;
    margin: auto;
}

/* Tablet */

@media(max-width:991px) {

    .cswp-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .cswp-timeline::before {
        display: none;
    }
}

/* Mobile */

@media(max-width:576px) {

    .cswp-heading h2 {
        font-size: 32px;
    }

    .cswp-timeline {
        grid-template-columns: 1fr;
    }

    .cswp-content h3 {
        font-size: 24px;
    }
}


.csws-results-sec {
    padding: 30px 8%;
    background: #fbfbfb;
}

.csws-results-header span {
    color: #d946ef;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.csws-results-header h2 {
    font-size: 35px;
    margin-top: 10px;
    color: #15152d;
    font-weight: 800;
}

.csws-results-wrapper {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 30px;
    align-items: stretch;
}

.csws-results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.csws-result-card {
    position: relative;
    background: #fff;
    border: 1px solid #a75de196;
    border-radius: 20px;
    padding: 25px;
    /* min-height:260px; */
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .04);
}

.csws-result-card h3 {
    font-size: 18px;
    color: #7c3aed;
    margin-bottom: 10px;
    font-weight: 700;
}

.csws-result-card h4 {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #222;
}

.csws-result-card p {
    font-size: 12px;
    line-height: 15px;
    color: #404040;
    max-width: 150px;
}

/* GRAPH */
.csws-result-card svg {
    position: absolute;
    right: 15px;
    /* bottom:15px; */
    width: 95px;
    height: 60px;
    opacity: .9;
}

/* BAR CHART */
.csws-bars {
    position: absolute;
    right: 20px;
    /* bottom:15px; */
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.csws-bars span {
    width: 12px;
    border-radius: 3px;
    background: #b794f4;
}

.csws-bars span:nth-child(1) {
    height: 10px;
}

.csws-bars span:nth-child(2) {
    height: 28px;
}

.csws-bars span:nth-child(3) {
    height: 50px;
}

.csws-bars span:nth-child(4) {
    height: 35px;
}

.csws-bars span:nth-child(5) {
    height: 75px;
}

/* TARGET ICON */
.csws-result-card .fa-bullseye {
    position: absolute;
    right: 18px;
    /* bottom:18px; */
    font-size: 60px;
    color: #d946ef;
}

/* REVIEW CARD */

.csws-review-slider {
    position: relative;
    padding: 35px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #a75de196;

    background:
        radial-gradient(circle at top left,
            rgba(196, 154, 255, .20),
            transparent 45%),

        radial-gradient(circle at bottom right,
            rgba(255, 196, 230, .18),
            transparent 45%),

        linear-gradient(135deg,
            #ffffff 0%,
            #fcf9ff 50%,
            #f8f4ff 100%);

    box-shadow: 0 15px 40px rgba(109, 92, 255, .08);
}

.csws-review-slide {
    display: none;
}

.csws-review-slide.active {
    display: block;
}

.csws-review-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.csws-review-quote {
    font-size: 42px;
    color: #b76cff;
    line-height: 1;
}

.csws-stars {
    color: #fbbf24;
    font-size: 18px;
    letter-spacing: 2px;
    margin: 0;
}

.csws-review-slide p {
    font-size: 15px;
    line-height: 20px;
    color: #444;
}

.csws-review-user {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
}

.csws-review-user img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

/* ARROWS */

.csws-review-nav {
    position: absolute;
    right: 25px;
    bottom: 25px;
    display: flex;
    gap: 10px;
}

.csws-prev,
.csws-next {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #f6f3ff;
    color: #7c3aed;
    cursor: pointer;
    transition: .3s;
}

.csws-prev:hover,
.csws-next:hover {
    background: #7c3aed;
    color: #fff;
}

/* RESPONSIVE */

@media(max-width:1200px) {

    .csws-results-wrapper {
        grid-template-columns: 1fr;
    }

    .csws-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:768px) {

    .csws-results-grid {
        grid-template-columns: 1fr;
    }

    .csws-result-card {
        min-height: 220px;
    }
}

.csws-review-user h4 {
    margin: 0;
}

.csws-review-user span {
    color: #777;
    font-size: 14px;
}

/* RESPONSIVE */

@media(max-width:1200px) {

    .csws-results-wrapper {
        grid-template-columns: 1fr;
    }

    .csws-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media(max-width:768px) {

    .csws-results-grid {
        grid-template-columns: 1fr;
    }

    .csws-results-header h2 {
        font-size: 34px;
    }

}


.csws-review-slide {
    display: none;
}

.csws-review-slide.active {
    display: block;
    animation: fadeReview .5s ease;
}

@keyframes fadeReview {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.csws-review-slider {
    position: relative;
    margin-top: -30px;
    margin-bottom: 35px;
}

.csws-review-nav {
    position: absolute;
    right: 25px;
    bottom: 25px;
    display: flex;
    gap: 10px;
}

.csws-prev,
.csws-next {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #7c3aed;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    transition: .3s;
}

.csws-prev:hover,
.csws-next:hover {
    background: #7c3aed;
    color: #fff;
}


.csws-cta-section {
    padding: 20px 10%;
    background-color: #fbfbfb;
}

.csws-cta-wrapper {
    max-width: 1400px;
    margin: auto;

    background: linear-gradient(90deg,
            #4f46e5 0%,
            #7c3aed 35%,
            #a855f7 70%,
            #ec4899 100%);

    border-radius: 12px;

    padding: 20px 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    overflow: hidden;
    position: relative;
}

/* Background Glow */

.csws-cta-wrapper::before {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    top: -180px;
    right: -100px;
}

.csws-cta-wrapper::after {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    left: 35%;
    bottom: -140px;
}

/* IMAGE */

.csws-cta-image {
    flex-shrink: 0;
}

.csws-cta-image img {
    width: 168px;
    display: block;
}

/* CONTENT */

.csws-cta-content {
    flex: 1;
    color: #fff;
    position: relative;
    z-index: 2;
}

.csws-cta-content h2 {
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}

.csws-cta-content p {
    font-size: 15px;
    color: rgba(255, 255, 255, .92);
    line-height: 1.7;
    margin: 0;
}

/* BUTTONS */

.csws-cta-buttons {
    display: flex;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.csws-cta-btn-primary {
    background: #fff;
    color: #7c3aed;
    padding: 14px 28px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.csws-cta-btn-primary:hover {
    transform: translateY(-3px);
}

.csws-cta-btn-secondary {
    border: 1px solid rgba(255, 255, 255, .6);
    color: #fff;
    padding: 14px 28px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: .3s;
}

.csws-cta-btn-secondary:hover {
    background: rgba(255, 255, 255, .08);
}

/* RESPONSIVE */

@media(max-width:992px) {

    .csws-cta-wrapper {
        flex-direction: column;
        text-align: center;
        padding: 35px 25px;
    }

    .csws-cta-content h2 {
        font-size: 34px;
    }

    .csws-cta-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .csws-cta-image img {
        width: 120px;
    }
}

@media(max-width:576px) {

    .csws-cta-content h2 {
        font-size: 28px;
    }

    .csws-cta-content p {
        font-size: 15px;
    }

    .csws-cta-btn-primary,
    .csws-cta-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .csws-cta-buttons {
        width: 100%;
        flex-direction: column;
    }
}


.cswsf-footer {
    background: linear-gradient(90deg,
            #1a1240 0%,
            #22184f 35%,
            #2b1d60 70%,
            #311f69 100%);

    padding: 60px 10% 45px;
    position: relative;
    overflow: hidden;
}

/* Decorative Glow */

.cswsf-footer::before {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .03);
    top: -180px;
    left: -150px;
}

.cswsf-footer::after {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .02);
    bottom: -120px;
    right: -80px;
}

.cswsf-container {
    max-width: 1400px;
    margin: auto;

    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
    gap: 50px;

    position: relative;
    z-index: 2;
}

.cswsf-logo {
    max-width: 180px;
    margin-bottom: -28px;
    margin-top: -55px;
}

.cswsf-about p {
    color: rgba(255, 255, 255, .75);
    line-height: 1.8;
    font-size: 14px;
    margin-bottom: 25px;
}

/* Social */

.cswsf-social {
    display: flex;
    gap: 10px;
}

.cswsf-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: .3s;
}

.cswsf-social a:nth-child(1) {
    background: #1877f2;
}

.cswsf-social a:nth-child(2) {
    background: #e1306c;
}

.cswsf-social a:nth-child(3) {
    background: #0077b5;
}

.cswsf-social a:nth-child(4) {
    background: #ff0000;
}

.cswsf-social a:hover {
    transform: translateY(-3px);
}

/* Headings */

.cswsf-footer h4 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 22px;
    font-weight: 600;
}

/* Lists */

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

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

.cswsf-footer ul li a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    transition: .3s;
    font-size: 14px;
}

.cswsf-footer ul li a:hover {
    color: #c084fc;
    padding-left: 5px;
}

/* Contact */

.cswsf-contact li {
    color: rgba(255, 255, 255, .75);
    display: flex;
    gap: 10px;
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 14px;
}

.cswsf-contact i {
    color: #ffffff;
    margin-top: 4px;
    min-width: 15px;
}

/* Responsive */

@media(max-width:991px) {

    .cswsf-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

}

@media(max-width:576px) {

    .cswsf-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cswsf-social {
        justify-content: center;
    }

    .cswsf-contact li {
        justify-content: center;
        text-align: center;
        flex-direction: column;
        gap: 5px;
    }

}


.cswsc-copyright-bar {
    position: relative;

    background: linear-gradient(90deg,
            #2b1b68 0%,
            #3a2483 50%,
            #4b2f98 100%);

    padding: 14px 0;

    overflow: hidden;
}

/* Top Center Curve */
/* 
.cswsc-copyright-bar::before{
    content:'';
    position:absolute;

    width:120px;
    height:50px;

    background:#0d0824;

    left:50%;
    top:-25px;

    transform:translateX(-50%);

    border-radius:0 0 60px 60px;
} */

/* Container */

.cswsc-copyright-container {
    max-width: 1400px;
    margin: auto;

    padding: 0 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Left */

.cswsc-left {
    color: rgba(255, 255, 255, .90);
    font-size: 13px;
    font-weight: 400;
}

/* Right */

.cswsc-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cswsc-right a {
    color: rgba(255, 255, 255, .92);
    text-decoration: none;
    font-size: 13px;
    transition: .3s;
}

.cswsc-right a:hover {
    color: #ffffff;
}

.cswsc-right span {
    color: rgba(255, 255, 255, .40);
}

/* Mobile */

@media(max-width:768px) {

    .cswsc-copyright-container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .cswsc-right {
        justify-content: center;
        flex-wrap: wrap;
    }

    .cswsc-copyright-bar::before {
        width: 90px;
        height: 40px;
        top: -20px;
    }

}


@media (max-width: 768px) {
    .quote-btn {
        display: none !important;
    }
}


@media (max-width: 576px) {
    .quote-btn {
        display: none !important;
    }
}


.procx-section {
    padding: 25px 20px;
    background: #ffffff;
}

.procx-container {
    max-width: 1200px;
    margin: auto;
}

.procx-subtitle {
    text-align: center;
    color: #7c5cff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.procx-title {
    text-align: center;
    font-size: 42px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 30px;
}

/* ===== TIMELINE ===== */

.procx-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.procx-timeline::before {
    content: '';
    position: absolute;
    top: 26px;
    left: 12%;
    width: 76%;
    border-top: 2px dashed #d6c8ff;
    z-index: 1;
}

.procx-step {
    position: relative;
    z-index: 2;
}

/* ===== NUMBER CIRCLE ===== */

.procx-circle {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    margin: 0 auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
}

.procx-step:nth-child(1) .procx-circle {
    background: linear-gradient(135deg, #ff5bb0, #c94cff);
}

.procx-step:nth-child(2) .procx-circle {
    background: linear-gradient(135deg, #b060ff, #8657ff);
}

.procx-step:nth-child(3) .procx-circle {
    background: linear-gradient(135deg, #5d86ff, #5b6cff);
}

.procx-step:nth-child(4) .procx-circle {
    background: linear-gradient(135deg, #6a90ff, #4d6eff);
}

/* ===== CONTENT ===== */

.procx-content {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 35px;
    margin-left: 65px;
}

.procx-icon {
    flex-shrink: 0;
    font-size: 32px;
    color: #8b5cf6;
    /* margin-top:3px; */
}

.procx-text h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 10px;
    color: #111827;
}

.procx-text p {
    margin: 0;
    color: #6b7280;
    line-height: 1.8;
    font-size: 14px;
}




/* ===== TABLET ===== */

@media(max-width:991px) {

    .procx-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
    }

    .procx-timeline::before {
        display: none;
    }

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

    .procx-content p {
        max-width: 100%;
    }
}

/* ===== MOBILE ===== */

@media(max-width:767px) {

    .procx-title {
        font-size: 30px;
    }

    .procx-timeline {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    .procx-content p {
        max-width: 100%;
    }
}



.csws-industry-section {
    /* padding:30px 10%; */
    background: #fff;
    text-align: center;
    margin-top: 50px;
}

.csws-industry-header span {
    color: #8b5cf6;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
}

.csws-industry-header h2 {
    font-size: 40px;
    font-weight: 800;
    color: #15152d;
    margin: 10px 0;
}

.csws-industry-header p {
    max-width: 700px;
    margin: auto;
    color: #3a3a3a;
    FONT-SIZE: 15px;
}

.csws-industry-wrapper {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
}

.csws-industry-item {
    position: relative;
}

.csws-industry-item span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 12px;
}

.csws-industry-icon {
    width: 60px;
    height: 60px;
    margin: auto;

    border: 2px solid #4fd1c5;
    border-radius: 50%;

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

    color: #14b8a6;
    font-size: 24px;
}

.csws-industry-item::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 75px;

    width: 2px;
    height: 80px;

    transform: translateX(-50%);

    background:
        repeating-linear-gradient(to bottom,
            #14b8a6,
            #14b8a6 5px,
            transparent 5px,
            transparent 10px);
}

.csws-city-image {
    margin-top: 100px;
}

.csws-city-image img {
    width: 100%;
    max-width: 1400px;
    margin-top: -90px;
}




.fxncs-header-wrap {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

.fxncs-navbar-shell {
    max-width: 1300px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
}

.fxncs-logo-box img {
    max-width: 170px;
}

.fxncs-menu-holder {
    display: flex;
    align-items: center;
    gap: 35px;
    list-style: none;
}

.fxncs-menu-holder li {
    position: relative;
}

.fxncs-menu-holder li a {
    text-decoration: none;
    color: #2b2b2b;
    font-size: 15px;
    font-weight: 500;
    transition: .3s;
}

/* Active Menu */

.fxncs-menu-holder li.fxncs-current-page a {
    color: #c236d6;
}

.fxncs-menu-holder li.fxncs-current-page::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 3px;
    border-radius: 50px;
    background: #c236d6;
}

/* Hover Underline */

.fxncs-menu-holder li::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0%;
    height: 3px;
    background: #c236d6;
    transition: .4s;
}

.fxncs-menu-holder li:hover::before {
    width: 100%;
}

/* Dropdown */

.fxncs-drop-parent {
    position: relative;
}

.fxncs-dropdown-menu {
    position: absolute;
    top: 45px;
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transition: .4s;
}

.fxncs-drop-parent:hover .fxncs-dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.fxncs-dropdown-menu a {
    display: block;
    padding: 12px 18px;
    border-bottom: 1px solid #eee;
}

.fxncs-dropdown-menu a:last-child {
    border: none;
}

.fxncs-dropdown-menu a:hover {
    background: #f7f1ff;
    color: #c236d6;
}

.fxncs-quote-btn {
    background: linear-gradient(90deg, #d53ef2, #7b3eff);
    color: #fff;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    transition: .3s;
}

.fxncs-quote-btn:hover {
    transform: translateY(-3px);
}

/*=========================
HERO SECTION
=========================*/

.fxncs-hero-banner {

    background: url("../img/banner1.webp") center center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #f8f5ff;
    min-height: 100vh;
    margin-top: -65px;
}

.fxncs-hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .15);
}

.fxncs-hero-inner {
    max-width: 1300px;
    margin: auto;
    width: 100%;
    padding: 0px 30px 0px;
    position: relative;
}

.fxncs-left-content {
    max-width: 560px;
    margin-top: 100px;
}

.fxncs-mini-title {
    color: #666;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: 600;
}

.fxncs-main-heading {
    font-size: 40px;
    line-height: 1.15;
    color: #1e1e1e;
    font-weight: 800;
    margin-bottom: 20px;
}

.fxncs-main-heading span {
    color: #c236d6;
}

.fxncs-description {
    font-size: 17px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 35px;
}

.fxncs-btn-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.fxncs-primary-btn {
    background: #d63bf1;
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
}

.fxncs-secondary-btn {
    background: #fff;
    color: #7b3eff;
    border: 2px solid #e4d2ff;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
}

/*=========================
FEATURES
=========================*/

.fxncs-feature-strip {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 55px;
}

.fxncs-feature-card {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666;
    font-size: 14px;
    font-weight: 600;
}

.fxncs-feature-card i {
    color: #c236d6;
}

/*=========================
MOBILE MENU
=========================*/

.fxncs-mobile-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
}

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

@media(max-width:991px) {

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

    .fxncs-menu-holder {
        position: absolute;
        top: 90px;
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        padding: 20px;
        display: none;
        box-shadow: 0 15px 30px rgba(0, 0, 0, .08);
    }

    .fxncs-menu-holder.active {
        display: flex;
    }

    .fxncs-navbar-shell {
        padding: 20px;
    }

    .fxncs-main-heading {
        font-size: 42px;
    }

}

@media(max-width:768px) {

    .fxncs-hero-inner {
        padding-top: 120px;
    }

    .fxncs-main-heading {
        font-size: 34px;
    }

    .fxncs-description {
        font-size: 15px;
    }

    .fxncs-feature-strip {
        gap: 15px;
    }

}

@media(max-width:480px) {

    .fxncs-main-heading {
        font-size: 28px;
    }

    .fxncs-btn-row {
        flex-direction: column;
    }

    .fxncs-primary-btn,
    .fxncs-secondary-btn {
        text-align: center;
    }

}

































.csweb-logo img {
    max-height: 50px;
}

.csweb-nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.csweb-nav-menu a {
    text-decoration: none;
    color: #222;
    font-weight: 600;
    transition: .3s;
}

.csweb-nav-menu a:hover {
    color: #8e2de2;
}

.csweb-quote-btn {
    background: #8e2de2;
    color: #fff;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 40px;
    font-weight: 600;
}

.csweb-mobile-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
}

/* ===================
BANNER
=================== */

.csweb-banner-section {
    width: 100%;
    min-height: 100vh;
    position: relative;

    background: url("../img/banner1.webp") no-repeat center top;
    background-size: 100% auto;
    /* background-color:#f8f6fc; */

    display: flex;
    align-items: center;
}

/* .csweb-banner-overlay{
    position:absolute;
    inset:0;
    background:rgba(255,255,255,0.08);
} */

.csweb-banner-content {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 120px 5% 80px;
    position: relative;
    z-index: 2;
}

.csweb-left-content {
    max-width: 600px;
    margin-top: -20px;
}

.csweb-small-title {
    display: block;
    letter-spacing: 2px;
    font-size: 13px;
    color: #444;
    margin-bottom: 15px;
    font-weight: 700;
}

.csweb-left-content h1 {
    font-size: 35px;
    line-height: 1.2;
    /* margin-bottom:20px; */
    color: #111;
}

.csweb-left-content h1 span {
    color: #b100ff;
}

.csweb-left-content p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 500px;
}

.csweb-btn-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.csweb-primary-btn {
    background: #b100ff;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
}

.csweb-primary-btn:hover {
    background: #b100ff;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
}

.csweb-secondary-btn {
    border: 2px solid #b100ff;
    color: #b100ff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
}

.csweb-secondary-btn:hover {
    border: 2px solid #b100ff;
    color: #b100ff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
}

.csweb-feature-list {
    margin-top: 25px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.csweb-feature-list div {
    font-size: 17px;
    color: #333;
}

.csweb-feature-list i {
    color: #8e2de2;
    margin-right: 6px;
}

/* ===================
TABLET
=================== */

@media(max-width:992px) {

    .csweb-nav-menu {
        gap: 15px;
    }

    .csweb-left-content h1 {
        font-size: 45px;
    }

}

/* ===================
MOBILE
=================== */

@media(max-width:768px) {

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

    .csweb-nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        padding: 20px;
        display: none;
    }

    .csweb-nav-menu.active {
        display: flex;
    }

    .csweb-quote-btn {
        display: none;
    }

    .csweb-left-content {
        text-align: center;
    }

    .csweb-left-content h1 {
        font-size: 34px;
        margin-top: 35px;
    }

    .csweb-btn-group {
        justify-content: center;
    }

    .csweb-feature-list {
        justify-content: center;
    }
}

.csweb-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 6%;
    transition: .4s;
    background: transparent;
}

.csweb-navbar.csweb-sticky {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.csweb-dropdown {
    position: relative;
}

.csweb-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
    display: none;
    z-index: 9999;
}

.csweb-dropdown-menu li a {
    display: block;
    padding: 7px 12px;
    width: 279px;
    color: #222;
    text-decoration: none;
}

.csweb-dropdown-menu li a:hover {
    background: #f5f5f5;
    color: #8e2de2;
}

/* .csweb-dropdown:hover .csweb-dropdown-menu{
    display:block;
} */



@media(max-width:768px) {

    .csweb-dropdown-menu {
        display: none;
        position: static;
        width: 100%;
        background: #f8f8f8;
        box-shadow: none;
    }

    .csweb-dropdown.active .csweb-dropdown-menu {
        display: block;
    }

}


@media (min-width:769px) {

    .csweb-dropdown:hover .csweb-dropdown-menu {
        display: block;
    }

}

/* ==========================
   MOBILE RESPONSIVE BANNER
========================== */
@media (max-width:768px) {

    /* Navbar */
    .csweb-navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        /* background:#fff; */
        background: linear-gradient(90deg, #f9f9f9 0%, #f7f1f1 50%, #d2bfef 100%);
        padding: 6px 14px;
        z-index: 9999;
    }

    .csweb-mobile-toggle {
        display: block;
        font-size: 30px;
        cursor: pointer;
        color: #222;
    }

    .csweb-nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
    }

    .csweb-nav-menu.active {
        display: flex;
    }

    .csweb-nav-menu li {
        width: 100%;
        list-style: none;
    }

    .csweb-nav-menu li a {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
    }

    .csweb-quote-btn {
        display: none;
    }

    .csweb-logo img {
        max-height: 40px;
    }

    @media (max-width:768px) {

        .csweb-banner-section {
            position: relative;
            /* background:url("../img/banner2.png") center center no-repeat !important; */
            background-size: cover !important;
            min-height: 650px;
            display: flex;
            align-items: center;
            /* padding:100px 20px 50px; */
            z-index: 1;
        }

        .csweb-banner-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(0 0 0 / 75%);
            z-index: -1;
        }

        .csweb-banner-content {
            position: relative;
            z-index: 2;
        }

        .csweb-left-content h1 {
            color: #222;
        }

        .csweb-left-content p {
            color: #555;
        }

        .csweb-small-title {
            color: #666;
        }

    }

    .csweb-small-title,
    .csweb-left-content h1,
    .csweb-left-content p {
        color: #fff;
    }

    .csweb-left-content h1 span {
        color: #b100ff;
    }

    .csweb-btn-group {
        justify-content: center;
    }

    .csweb-feature-list {
        justify-content: center;
    }

    .csweb-feature-list div {
        color: #fff;
    }

    .csweb-feature-list i {
        color: #b100ff;
    }

}


/* =========================
   FAQ SECTION
========================= */
.csfaq-section {
    padding: 30px 15px;
    background: #f8f7fd;
}

.csfaq-container {
    max-width: 1200px;
    margin: auto;
}

.csfaq-heading {
    text-align: center;
    margin-bottom: 50px;
}

.csfaq-heading h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #1e1e2f;
}

.csfaq-heading p {
    color: #666;
    font-size: 17px;
}

.csfaq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.csfaq-item {
    background: #fff;
    border: 1px solid #a75de196;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(177, 0, 255, .06);
    transition: .3s;
}

.csfaq-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(177, 0, 255, .12);
}

.csfaq-question {
    width: 100%;
    border: none;
    background: #fff;
    padding: 22px 25px;
    text-align: left;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: #2a2a2a;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.csfaq-question span {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* background:linear-gradient(135deg,#c45eff,#8e2de2); */
    color: #8e2de2;
    font-size: 20px;
    font-weight: 700;
}

.csfaq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
    /* background: #fcfaff; */
}

.csfaq-answer p {
    padding: 0 25px 25px;
    color: #555;
    line-height: 1.8;
    margin: 0;
}

.csfaq-item.active .csfaq-answer {
    max-height: 200px;
}

.csfaq-item.active .csfaq-question {
    color: #8e2de2;
}

/* =========================
   MOBILE
========================= */
@media(max-width:768px) {

    .csfaq-heading h2 {
        font-size: 28px;
    }

    .csfaq-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .csfaq-question {
        font-size: 16px;
        padding: 18px;
    }

    .csfaq-answer p {
        padding: 0 18px 20px;
    }

}









/*=========================================
CS WEB SOLUTION PRICING CSS
PART-2
=========================================*/

.csws-price-section {
    padding: 90px 20px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.csws-price-section::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(139, 92, 246, .08);
    top: -120px;
    left: -120px;
    filter: blur(40px);
}

.csws-price-section::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(236, 72, 153, .08);
    right: -120px;
    bottom: -120px;
    filter: blur(40px);
}

.csws-price-title {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.csws-price-title span {
    display: inline-block;
    color: #8b5cf6;
    letter-spacing: 3px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.csws-price-title h2 {
    font-size: 50px;
    font-weight: 800;
    color: #222;
    margin-bottom: 12px;
    line-height: 1.2;
}

.csws-price-title h2 strong {
    background: linear-gradient(90deg, #6C4DFF, #F74CB8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.csws-price-title p {
    color: #777;
    font-size: 15px;
    line-height: 22px;
}

.csws-price-wrapper {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.csws-price-card {
    background: #fff;
    border-radius: 22px;
    padding: 38px 28px;
    border: 1px solid #8b5cf6;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .05);
    transition: .4s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.csws-price-card::before {
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf615, #ec489915);
    top: -70px;
    right: -70px;
}

.csws-price-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .12);
}

.active-card {
    transform: translateY(-12px);
    border: 1px solid #8b5cf6;
    box-shadow: 0 25px 60px rgba(108, 77, 255, .18);
}

.csws-card-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    background: linear-gradient(135deg, #6C4DFF, #F74CB8);
}

.csws-card-icon i {
    color: #fff;
    font-size: 28px;
}

.csws-price-card h3 {
    font-size: 23px;
    font-weight: 700;
    color: #6C4DFF;
    margin-bottom: 25px;
    line-height: 1.3;
}

.csws-price-card ul {
    padding: 0;
    margin: 0;
    list-style: none;
    flex: 1;
}

.csws-price-card ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: #444;
    margin-bottom: 14px;
    line-height: 1.6;
}

.csws-price-card ul li i {
    color: #8b5cf6;
    font-size: 18px;
    margin-top: 3px;
    min-width: 18px;
}

.csws-price {
    text-align: center;
    margin: 30px 0;
    font-size: 30px !important;
    font-weight: 800;
    background: linear-gradient(90deg, #000000, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.csws-btn {
    height: 56px;
    border-radius: 50px;
    background: linear-gradient(90deg, #6C4DFF, #F74CB8);
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 700;
    transition: .35s;
}

.csws-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(108, 77, 255, .35);
    color: #fff;
}

.csws-btn i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: #6C4DFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: .35s;
}

.csws-btn:hover i {
    transform: translateX(5px);
}

.csws-price-card:hover .csws-card-icon {
    transform: rotate(360deg);
    transition: .8s;
}

.csws-price-card:hover h3 {
    color: #F74CB8;
}


/*=========================================
CS WEB SOLUTION
PART-3 (RESPONSIVE CSS)
=========================================*/

/************** Large Laptop **************/
@media (max-width:1400px) {

    .csws-price-wrapper {
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
    }

    .csws-price-card {
        padding: 30px 22px;
    }

    .csws-price-title h2 {
        font-size: 44px;
    }

    .csws-price {
        font-size: 36px;
    }

}


/************** Laptop **************/
@media (max-width:1200px) {

    .csws-price-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .csws-price-card {
        padding: 35px 25px;
    }

    .csws-price-title h2 {
        font-size: 42px;
    }

}


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

    .csws-price-section {
        padding: 70px 18px;
    }

    .csws-price-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .csws-price-title {
        margin-bottom: 45px;
    }

    .csws-price-title h2 {
        font-size: 36px;
    }

    .csws-price-title p {
        font-size: 16px;
    }

    .csws-card-icon {
        width: 65px;
        height: 65px;
    }

    .csws-card-icon i {
        font-size: 24px;
    }

    .csws-price-card h3 {
        font-size: 24px;
    }

    .csws-price-card ul li {
        font-size: 14px;
    }

    .csws-price {
        font-size: 34px;
    }

    .csws-btn {
        height: 52px;
        font-size: 16px;
    }

}


/************** Mobile Landscape **************/
@media (max-width:768px) {

    .csws-price-section {
        padding: 60px 15px;
    }

    .csws-price-wrapper {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .csws-price-title span {
        font-size: 13px;
        letter-spacing: 2px;
    }

    .csws-price-title h2 {
        font-size: 32px;
        line-height: 1.3;
    }

    .csws-price-title p {
        font-size: 15px;
    }

    .csws-price-card {
        max-width: 500px;
        width: 100%;
        margin: auto;
    }

    .active-card {
        transform: none;
    }

    .csws-price-card:hover {
        transform: none;
    }

}


/************** Small Mobile **************/
@media (max-width:576px) {

    .csws-price-section {
        padding: 50px 12px;
    }

    .csws-price-title {
        margin-bottom: 35px;
        width: 250px;
        margin-left: auto;
        margin-right: auto;
    }

    .csws-price-title h2 {
        font-size: 28px;
    }

    .csws-price-title p {
        font-size: 14px;
        line-height: 24px;
    }

    .csws-price-card {
        padding: 28px 20px;
        border-radius: 18px;
    }

    .csws-card-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 18px;
    }

    .csws-card-icon i {
        font-size: 22px;
    }

    .csws-price-card h3 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .csws-price-card ul li {
        font-size: 14px;
        margin-bottom: 12px;
        line-height: 22px;
    }

    .csws-price {
        font-size: 32px;
        margin: 22px 0;
    }

    .csws-btn {
        height: 50px;
        font-size: 15px;
    }

    .csws-btn i {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

}


/************** Extra Small Mobile **************/
@media (max-width:400px) {

    .csws-price-title h2 {
        font-size: 25px;
    }

    .csws-price-card {
        padding: 25px 18px;
    }

    .csws-price-card h3 {
        font-size: 20px;
    }

    .csws-price-card ul li {
        font-size: 13px;
    }

    .csws-price {
        font-size: 28px;
    }

    .csws-btn {
        height: 48px;
        font-size: 14px;
    }

}


/************** Smooth Animation **************/

.csws-price-card {
    animation: cswsFadeUp .8s ease forwards;
}

.csws-price-card:nth-child(2) {
    animation-delay: .15s;
}

.csws-price-card:nth-child(3) {
    animation-delay: .30s;
}

.csws-price-card:nth-child(4) {
    animation-delay: .45s;
}

@keyframes cswsFadeUp {

    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}


/************** Button Ripple **************/

.csws-btn {
    position: relative;
    overflow: hidden;
}

.csws-btn::before {
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, .15);
    transition: .5s;
}

.csws-btn:hover::before {
    width: 100%;
}


/************** Card Hover Border **************/

.csws-price-card::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 4px;

    background: linear-gradient(90deg, #6C4DFF, #F74CB8);

    transition: .4s;

}

.csws-price-card:hover::after {

    width: 100%;

}



/*==============================
   WEBSITE PACKAGE CSS
===============================*/

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

.cswpkg-section {
    padding: 80px 20px;
    background: #f7f8fd;
}

.cswpkg-container {
    max-width: 1150px;
    margin: auto;
}

.cswpkg-title {
    text-align: center;
    margin-bottom: 55px;
}

.cswpkg-title span {
    display: inline-block;
    color: #6d3df5;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.cswpkg-title h2 {
    font-size: 42px;
    font-weight: 700;
    color: #222;
    margin-bottom: 12px;
}

.cswpkg-title p {
    color: #666;
    font-size: 16px;
}

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

.cswpkg-card {
    background: #fff;
    border-radius: 22px;
    padding: 35px 24px 25px;
    position: relative;
    overflow: hidden;
    transition: .35s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.cswpkg-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .15);
}

.cswpkg-corner {
    position: absolute;
    width: 72px;
    height: 72px;
    right: -8px;
    top: -8px;
    border-radius: 0 20px 0 100%;
}

/*============ Colors ============*/

.cswpkg-purple .cswpkg-corner,
.cswpkg-purple .cswpkg-icon,
.cswpkg-purple .cswpkg-btn {
    background: linear-gradient(135deg, #6b39f7, #9d4cff);
}

.cswpkg-blue .cswpkg-corner,
.cswpkg-blue .cswpkg-icon,
.cswpkg-blue .cswpkg-btn {
    background: linear-gradient(135deg, #2168ff, #4f9dff);
}

.cswpkg-pink .cswpkg-corner,
.cswpkg-pink .cswpkg-icon,
.cswpkg-pink .cswpkg-btn {
    background: linear-gradient(135deg, #ff2f7d, #ff5aa7);
}

.cswpkg-purple h3 {
    color: #5c33db;
}

.cswpkg-blue h3 {
    color: #2568ef;
}

.cswpkg-pink h3 {
    color: #ff2f7d;
}

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

.cswpkg-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
}

.cswpkg-card h3 {
    text-align: center;
    font-size: 22px;
    margin-bottom: 18px;
    font-weight: 700;
}

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

.cswpkg-desc {
    background: #f4f2ff;
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    color: #555;
    font-size: 15px;
    line-height: 26px;
    margin-bottom: 25px;
}

.cswpkg-blue .cswpkg-desc {
    background: #eef5ff;
}

.cswpkg-pink .cswpkg-desc {
    background: #fff0f6;
}

/*============ Feature List ============*/

.cswpkg-list {
    list-style: none;
    margin-bottom: 30px;
}

.cswpkg-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #444;
    line-height: 24px;
}

.cswpkg-purple .cswpkg-list i {
    color: #6b39f7;
    margin-top: 5px;
}

.cswpkg-blue .cswpkg-list i {
    color: #2f74ff;
}

.cswpkg-pink .cswpkg-list i {
    color: #ff2f7d;
}

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

.cswpkg-price {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin: 28px 0;
}

.cswpkg-purple .cswpkg-price {
    color: #5735d5;
}

.cswpkg-blue .cswpkg-price {
    color: #2568ef;
}

.cswpkg-pink .cswpkg-price {
    color: #ff2f7d;
}

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

.cswpkg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-decoration: none;
    color: #fff;
    height: 58px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    transition: .3s;
}

.cswpkg-btn:hover {
    transform: scale(1.03);
}

.cswpkg-btn span {
    width: 34px;
    height: 34px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cswpkg-purple .cswpkg-btn span {
    color: #6b39f7;
}

.cswpkg-blue .cswpkg-btn span {
    color: #2168ff;
}

.cswpkg-pink .cswpkg-btn span {
    color: #ff2f7d;
}


/*=============================
    HERO SECTION
==============================*/

.spdm_hero_section {
    position: relative;
    width: 100%;
    min-height: 650px;

    background: url("../img/digital-marketing-banner.png") center center/cover no-repeat;

    display: flex;
    align-items: center;
    overflow: hidden;
}



/* Tablet */
@media (max-width: 991px) {
    .spdm_hero_section {
        background-image: none;
        background-color: #f8f8f8;
        /* Change to your preferred background color */
    }
}

/* Mobile */
@media (max-width: 767px) {
    .spdm_hero_section {
        min-height: auto;
        padding: 80px 20px;
        background-image: none;
        background-color: #f8f8f8;
        /* Change to your preferred background color */
    }
}

/* .spdm_overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.90) 38%,
    rgba(255,255,255,.45) 60%,
    rgba(255,255,255,.05) 100%);
} */

.spdm_container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    /* padding:70px 20px; */
}

.spdm_content {
    width: 100%;
    max-width: 520px;
    position: relative;
    z-index: 2;
}

.spdm_tag {
    display: inline-block;
    padding: 8px 18px;
    background: #f2e9ff;
    color: #8d35ff;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-top: 25px;
}

.spdm_content h1 {
    font-size: 45px;
    line-height: 1.15;
    font-weight: 800;
    color: #181828;
    margin-bottom: 20px;
}

.spdm_content h1 span {
    color: #d341d8;
}

.spdm_content p {
    font-size: 17px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 35px;
}

.spdm_features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.spdm_feature_box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.spdm_icon {
    width: 46px;
    height: 46px;
    background: #faf4ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b03cff;
    font-size: 18px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
}

.spdm_feature_box span {
    font-size: 15px;
    color: #333;
    font-weight: 600;
}

.spdm_buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.spdm_btn_primary,
.spdm_btn_outline {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 10px;
    font-weight: 700;
    transition: .35s;
}

.spdm_btn_primary {
    background: linear-gradient(90deg, #8d35ff, #d241d8);
    color: #fff;
    box-shadow: 0 10px 25px rgba(176, 60, 255, .35);
}

.spdm_btn_primary:hover {
    transform: translateY(-4px);
}

.spdm_btn_outline {
    border: 2px solid #9c3fff;
    color: #8d35ff;
    background: #fff;
}

.spdm_btn_outline:hover {
    background: #8d35ff;
    color: #fff;
}

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

@media(max-width:991px) {

    .spdm_hero_section {
        min-height: auto;
        background-position: right center;
    }

    .spdm_overlay {
        background: rgba(255, 255, 255, .90);
    }

    .spdm_container {
        padding: 60px 25px;
    }

    .spdm_content {
        max-width: 100%;
    }

    .spdm_content h1 {
        font-size: 44px;
    }

}

@media(max-width:767px) {

    .spdm_container {
        padding: 00px 18px;
    }

    .spdm_content h1 {
        font-size: 25px;
    }

    .spdm_content p {
        font-size: 15px;
    }

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

    .spdm_buttons {
        flex-direction: column;
    }

    .spdm_btn_primary,
    .spdm_btn_outline {
        justify-content: center;
        width: 100%;
    }

}



/*==============================
 DIGITAL MARKETING SERVICES
===============================*/

.dmoffer_section {
    padding: 30px 20px;
    background: #f8f9fc;
}

.dmoffer_container {
    max-width: 1200px;
    margin: auto;
}

.dmoffer_heading {
    text-align: center;
    margin-bottom: 30px;
}

.dmoffer_subtitle {
    display: inline-block;
    color: #8d4dff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.dmoffer_heading h2 {
    font-size: 42px;
    color: #222;
    font-weight: 700;
    margin-bottom: 15px;
}

.dmoffer_heading h2 span {
    color: #c640d9;
}

.dmoffer_heading p {
    max-width: 650px;
    margin: auto;
    color: #666;
    line-height: 28px;
    font-size: 16px;
}

.dmoffer_grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}

.dmoffer_card {
    background: #fff;
    border-radius: 18px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    transition: .35s;
    border: 1px solid #eee;
}

.dmoffer_card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .12);
}

.dmoffer_icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: auto auto 25px;
}

.dmoffer_purple {
    background: #f2e9ff;
    color: #8b4cff;
}

.dmoffer_blue {
    background: #edf2ff;
    color: #4d6fff;
}

.dmoffer_pink {
    background: #ffeaf4;
    color: #ff4f93;
}

.dmoffer_orange {
    background: #fff2df;
    color: #ff9800;
}

.dmoffer_green {
    background: #e7fbf3;
    color: #11b87b;
}

.dmoffer_violet {
    background: #f3eaff;
    color: #9747ff;
}

.dmoffer_card h3 {
    font-size: 16px;
    color: #222;
    margin-bottom: 15px;
    line-height: 20px;
}

.dmoffer_card p {
    color: #666;
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 25px;
}

.dmoffer_card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #c640d9;
    font-weight: 600;
    text-decoration: none;
    transition: .3s;
}

.dmoffer_card:hover a {
    gap: 12px;
}

/*==========================
Responsive
==========================*/

@media(max-width:1200px) {

    .dmoffer_grid {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media(max-width:768px) {

    .dmoffer_heading h2 {
        font-size: 32px;
    }

    .dmoffer_grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media(max-width:576px) {

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

    .dmoffer_card {
        padding: 30px 20px;
    }

    .dmoffer_heading h2 {
        font-size: 28px;
    }

    .dmoffer_heading p {
        font-size: 15px;
    }

}



/*==============================
WHY CHOOSE SECTION
===============================*/

.cswhy_section {
    padding: 70px 25px;
    background: #f8f8fb;
}

.cswhy_container {

    max-width: 1215px;
    margin: auto;

    background: linear-gradient(135deg, #1d1672, #4721a7, #6826b8);

    border-radius: 18px;

    padding: 55px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;

    overflow: hidden;
    position: relative;
}

.cswhy_container:before {

    content: "";

    position: absolute;
    right: -100px;
    top: -100px;

    width: 320px;
    height: 320px;

    background: radial-gradient(rgba(255, 255, 255, .10), transparent 70%);

    border-radius: 50%;

}

.cswhy_left {

    flex: 0 0 32%;
    color: #fff;

}

.cswhy_subtitle {

    display: inline-block;

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

    letter-spacing: 1px;
    text-transform: uppercase;

    margin-bottom: 18px;

    color: #ddd;

}

.cswhy_left h2 {

    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 20px;

}

.cswhy_left h2 span {

    display: block;
    color: #ff6f8d;

}

.cswhy_left p {

    font-size: 16px;
    line-height: 25px;
    color: #d9d9e6;

}

.cswhy_right {

    flex: 1;

    display: grid;

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

    gap: 35px;

}

.cswhy_item {

    color: #fff;

}

.cswhy_icon {

    width: 72px;
    height: 72px;

    border-radius: 50%;

    border: 2px solid rgba(255, 255, 255, .25);

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

    font-size: 28px;

    margin-bottom: 22px;

    color: #fff;

    background: rgba(255, 255, 255, .05);

    transition: .35s;

}

.cswhy_item:hover .cswhy_icon {

    background: #ff5d8f;
    border-color: #ff5d8f;

    transform: translateY(-8px);

}

.cswhy_item h4 {

    font-size: 15px;
    margin-bottom: 12px;
    font-weight: 600;

}

.cswhy_item p {

    font-size: 15px;
    line-height: 21px;
    color: #d8d8ea;

}

/*====================
Responsive
====================*/

@media(max-width:1200px) {

    .cswhy_container {

        flex-direction: column;
        text-align: center;

    }

    .cswhy_left {

        max-width: 750px;

    }

    .cswhy_right {

        width: 100%;

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

    }

}

@media(max-width:768px) {

    .cswhy_container {

        padding: 45px 30px;

    }

    .cswhy_left h2 {

        font-size: 30px;

    }

    .cswhy_right {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .cswhy_icon {

        margin: 0 auto 20px;

    }

}

@media(max-width:576px) {

    .cswhy_container {

        padding: 35px 20px;

    }

    .cswhy_left h2 {

        font-size: 28px;

    }

    .cswhy_left p {

        font-size: 15px;

    }

}


/*==========================
DIGITAL PROCESS
===========================*/

.dmprocess_section {
    padding: 30px 20px;
    background: #ffffff;
}

.dmprocess_container {
    max-width: 1220px;
    margin: auto;
}

.dmprocess_heading {
    text-align: center;
    margin-bottom: 70px;
}

.dmprocess_heading span {
    color: #7a3cff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.dmprocess_heading h2 {
    margin: 12px 0;
    font-size: 42px;
    font-weight: 700;
    color: #1f1f1f;
}

.dmprocess_heading p {
    color: #666;
    font-size: 17px;
}

.dmprocess_wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0px;
}

.dmprocess_line {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 40px;
    height: 2px;
    background: #ece8ff;
    z-index: 1;
}

.dmprocess_item {
    position: relative;
    text-align: center;
    z-index: 2;
}

.dmprocess_icon {
    width: 80px;
    height: 80px;
    margin: auto;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ece8ff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #8a4dff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
    transition: .35s;
}

.dmprocess_item:hover .dmprocess_icon {
    background: #8a4dff;
    color: #fff;
    transform: translateY(-10px);
}

.dmprocess_number {
    display: block;
    margin: 18px 0 12px;
    color: #999;
    font-size: 14px;
    font-weight: 700;
}

.dmprocess_item h4 {
    font-size: 17px;
    color: #7a3cff;
    margin-bottom: 12px;
    line-height: 28px;
}

.dmprocess_item p {
    color: #666;
    font-size: 15px;
    line-height: 28px;
}

/*====================
Responsive
=====================*/

@media(max-width:1199px) {

    .dmprocess_wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

    .dmprocess_line {
        display: none;
    }

}

@media(max-width:768px) {

    .dmprocess_heading h2 {
        font-size: 32px;
    }

    .dmprocess_wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

}

@media(max-width:576px) {

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

    .dmprocess_heading h2 {
        font-size: 28px;
    }

    .dmprocess_heading p {
        font-size: 15px;
    }

    .dmprocess_icon {
        width: 75px;
        height: 75px;
        font-size: 26px;
    }

}



/*======================================
   DIGITAL MARKETING PACKAGE
======================================*/

.cswpkg_section {
    padding: 90px 20px;
    background: #f5f7fb;
}

.cswpkg_container {
    max-width: 1200px;
    margin: auto;
}

.cswpkg_heading {
    text-align: center;
    margin-bottom: 60px;
}

.cswpkg_subtitle {
    display: inline-block;
    color: #6c3cff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cswpkg_heading h2 {
    font-size: 42px;
    font-weight: 700;
    color: #1d1d1d;
    margin-bottom: 15px;
}

.cswpkg_heading h2 span {
    color: #ff3b8d;
}

.cswpkg_heading p {
    max-width: 650px;
    margin: auto;
    color: #666;
    font-size: 16px;
    line-height: 28px;
}

/*========================*/

.cswpkg_grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;

}

/*========================*/

.cswpkg_card {

    position: relative;

    background: #fff;

    border-radius: 28px;

    padding: 35px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .08);

    transition: .4s;

    display: flex;

    flex-direction: column;

    min-height: 630px;

}

.cswpkg_card:hover {

    transform: translateY(-12px);

    box-shadow: 0 35px 70px rgba(0, 0, 0, .15);

}

/*========================*/

.cswpkg_top {

    text-align: center;

    margin-bottom: 30px;

}

.cswpkg_top h3 {

    font-size: 34px;

    font-weight: 700;

    margin-bottom: 20px;

}

.cswpkg_desc {
    padding: 5px 22px;
    border-radius: 18px;
    line-height: 32px;
    font-size: 14px;
    color: #000000;
    font-weight: 700;

}

/*==========================
CARD COLORS
===========================*/

.cswpkg_basic h3 {

    color: #6d38ff;

}

.cswpkg_basic .cswpkg_desc {

    background: #f0ebff;

}

.cswpkg_btn_basic {

    background: linear-gradient(90deg, #6d38ff, #985dff);

}

.cswpkg_standard h3 {

    color: #2468ff;

}

.cswpkg_standard .cswpkg_desc {

    background: #edf4ff;

}

.cswpkg_btn_standard {

    background: linear-gradient(90deg, #2468ff, #4b8fff);

}

.cswpkg_premium h3 {

    color: #ff2f7b;

}

.cswpkg_premium .cswpkg_desc {

    background: #ffeef5;

}

.cswpkg_btn_premium {

    background: linear-gradient(90deg, #ff2f7b, #ff5a92);

}

/*========================*/

.cswpkg_popular {

    position: absolute;

    top: -10px;

    left: 50%;

    transform: translateX(-50%);

    background: linear-gradient(90deg, #ff4f92, #ff7a6c);

    color: #fff;

    padding: 8px 22px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .5px;

}

/*========================*/

.cswpkg_features {

    list-style: none;

    padding: 0;

    margin: 0;
    /* 
    flex:1; */

}

.cswpkg_features li {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 18px;

    font-size: 16px;

    line-height: 30px;

    color: #444;

}

.cswpkg_features i {

    color: #4a6dff;

    margin-top: 6px;

    font-size: 16px;

}

.cswpkg_premium .cswpkg_features i {

    color: #ff3b82;

}

/*========================*/

.cswpkg_price {

    margin-top: 20px;

    margin-bottom: 30px;

    text-align: center;

}

.cswpkg_price h2 {

    font-size: 30px;

    font-weight: 700;

    margin-bottom: 8px;

}

.cswpkg_basic .cswpkg_price h2 {

    color: #6d38ff;

}

.cswpkg_standard .cswpkg_price h2 {

    color: #2468ff;

}

.cswpkg_premium .cswpkg_price h2 {

    color: #ff2f7b;

}

.cswpkg_price span {

    color: #777;

    font-size: 15px;

}

/*========================*/

.cswpkg_btn {

    text-decoration: none;

    color: #fff;

    font-size: 18px;

    font-weight: 600;

    padding: 18px 30px;

    border-radius: 60px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    transition: .35s;

}

.cswpkg_btn span {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #fff;

    color: #444;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: .35s;

}

.cswpkg_btn:hover {

    transform: scale(1.02);

}

.cswpkg_btn:hover span {

    transform: translateX(8px) rotate(-45deg);

}

/*========================
Responsive
========================*/

@media(max-width:1199px) {

    .cswpkg_grid {

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

    }

}

@media(max-width:768px) {

    .cswpkg_grid {

        grid-template-columns: 1fr;

    }

    .cswpkg_heading h2 {

        font-size: 32px;

    }

    .cswpkg_card {

        min-height: auto;

        padding: 30px;

    }

    .cswpkg_price h2 {

        font-size: 40px;

    }

}

@media(max-width:576px) {

    .cswpkg_section {

        padding: 70px 15px;

    }

    .cswpkg_heading h2 {

        font-size: 28px;

    }

    .cswpkg_desc {

        font-size: 15px;

        line-height: 28px;

    }

    .cswpkg_features li {

        font-size: 15px;

    }

    .cswpkg_btn {

        font-size: 16px;

        padding: 16px 24px;

    }

}


/*=========================================
PREMIUM CARD ANIMATIONS
=========================================*/

.cswpkg_card {
    overflow: hidden;
}

.cswpkg_card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);
    transform: skewX(-25deg);
    transition: 1s;
}

.cswpkg_card:hover::before {
    left: 160%;
}

/*=========================================
TOP COLOR BAR
=========================================*/

.cswpkg_card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 8px;
}

/* .cswpkg_basic::after{
    background:#6d38ff;
}

.cswpkg_standard::after{
    background:#2468ff;
}

.cswpkg_premium::after{
    background:#ff2f7b;
} */

/*=========================================
PRICE ANIMATION
=========================================*/

.cswpkg_price h2 {
    transition: .35s;
}

.cswpkg_card:hover .cswpkg_price h2 {
    transform: scale(1.08);
}

/*=========================================
FEATURE ICON
=========================================*/

.cswpkg_features li {
    transition: .35s;
}

.cswpkg_features li:hover {
    transform: translateX(8px);
}

.cswpkg_features i {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eef3ff;
    color: #2468ff;
    flex-shrink: 0;
}

.cswpkg_basic .cswpkg_features i {
    background: #efe8ff;
    color: #6d38ff;
}

.cswpkg_standard .cswpkg_features i {
    background: #edf4ff;
    color: #2468ff;
}

.cswpkg_premium .cswpkg_features i {
    background: #ffeaf2;
    color: #ff2f7b;
}

/*=========================================
BUTTON EFFECT
=========================================*/

.cswpkg_btn {
    position: relative;
    overflow: hidden;
}

.cswpkg_btn::before {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background: rgba(255, 255, 255, .18);

    transition: .5s;

}

.cswpkg_btn:hover::before {

    left: 100%;

}

/*=========================================
POPULAR CARD
=========================================*/

.cswpkg_standard {

    /* border:3px solid #2468ff; */

    transform: scale(1.03);

}

.cswpkg_standard:hover {

    transform: translateY(-14px) scale(1.05);

}

/*=========================================
POPULAR BADGE
=========================================*/

.cswpkg_popular {

    /* box-shadow:0 15px 35px rgba(255,78,142,.35); */

}

/*=========================================
BOTTOM SHADOW
=========================================*/

.cswpkg_btn_basic {

    box-shadow: 0 15px 35px rgba(109, 56, 255, .28);

}

.cswpkg_btn_standard {

    box-shadow: 0 15px 35px rgba(36, 104, 255, .28);

}

.cswpkg_btn_premium {

    box-shadow: 0 15px 35px rgba(255, 47, 123, .28);

}

/*=========================================
CARD HOVER
=========================================*/

.cswpkg_card:hover {

    border-color: transparent;

}

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

@media(max-width:991px) {

    .cswpkg_standard {

        transform: none;

    }

    .cswpkg_standard:hover {

        transform: translateY(-10px);

    }

}

@media(max-width:576px) {

    .cswpkg_popular {

        font-size: 11px;

        padding: 7px 18px;

    }

    .cswpkg_price h2 {

        font-size: 34px;

    }

    .cswpkg_btn span {

        width: 38px;
        height: 38px;

    }

}


/*========================================
CALL TO ACTION
========================================*/

.cscta_section {

    padding: 50px 20px;

    background: #ffffff;

}

.cscta_container {

    max-width: 1200px;

    margin: auto;

    background: linear-gradient(90deg, #5c2dff 0%, #8d3dff 45%, #ff4c78 100%);

    border-radius: 16px;

    padding: 35px 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    position: relative;

    overflow: hidden;

}

/* Decorative Shapes */

.cscta_container::before {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    border: 1px solid rgba(255, 255, 255, .12);

    border-radius: 50%;

    top: -140px;

    right: -120px;

}

.cscta_container::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border: 1px solid rgba(255, 255, 255, .10);

    border-radius: 50%;

    bottom: -120px;

    left: -80px;

}

/* Left */

.cscta_left {

    position: relative;

    z-index: 2;

}

.cscta_left h2 {

    color: #fff;

    font-size: 38px;

    font-weight: 700;

    margin-bottom: 12px;

    line-height: 1.2;

}

.cscta_left p {

    color: rgba(255, 255, 255, .90);

    font-size: 17px;

}

/* Right */

.cscta_right {

    display: flex;

    align-items: center;

    gap: 18px;

    position: relative;

    z-index: 2;

}

/* Buttons */

.cscta_btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 16px 30px;

    background: #fff;

    border-radius: 10px;

    text-decoration: none;

    font-size: 16px;

    font-weight: 600;

    transition: .35s;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .10);

}

.cscta_btn i {

    font-size: 22px;

}

.cscta_whatsapp {

    color: #25D366;

}

.cscta_call {

    color: #6d38ff;

}

/* Hover */

.cscta_btn:hover {

    transform: translateY(-6px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, .18);

}

.cscta_whatsapp:hover {

    background: #25D366;

    color: #fff;

}

.cscta_call:hover {

    background: #6d38ff;

    color: #fff;

}

/*=====================================
Responsive
======================================*/

@media(max-width:991px) {

    .cscta_container {

        flex-direction: column;

        text-align: center;

        padding: 40px 30px;

    }

    .cscta_left h2 {

        font-size: 30px;

    }

}

@media(max-width:767px) {

    .cscta_right {

        flex-direction: column;

        width: 100%;

    }

    .cscta_btn {

        width: 100%;

        justify-content: center;

    }

    .cscta_left h2 {

        font-size: 26px;

    }

    .cscta_left p {

        font-size: 15px;

    }

}

@media(max-width:480px) {

    .cscta_container {

        padding: 30px 20px;

    }

    .cscta_left h2 {

        font-size: 22px;

    }

}


/*==================================
SEO HERO
==================================*/


.seobnr_section {

    /* min-height:780px; */

    background-image: url("../img/seo-banner.png");

    background-repeat: no-repeat;

    background-position: right center;

    background-size: contain;

    background-color: #f9f8ff;

}





.seobnr_container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1200px;

    margin: auto;

    padding: 80px 20px;

}

.seobnr_content {

    max-width: 560px;

}

.seobnr_subtitle {

    display: inline-block;

    color: #7a3cff;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-top: 20px;

}

.seobnr_content h1 {

    font-size: 45px;

    line-height: 1.15;

    color: #171735;

    font-weight: 800;

    margin-bottom: 25px;

}

.seobnr_content h1 span {

    display: block;

    color: #d83bb9;

}

.seobnr_content p {

    font-size: 17px;
    line-height: 26px;
    color: #666;
    margin-bottom: 35px;

}

/*========================*/

.seobnr_list {

    display: grid;

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

    gap: 18px 40px;

    margin-bottom: 45px;

}

.seobnr_item {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 17px;

    font-weight: 500;

    color: #333;

}

.seobnr_item i {

    color: #7a3cff;

    font-size: 20px;

}

/*========================*/

.seobnr_buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}

.seobnr_btn_fill,

.seobnr_btn_border {

    padding: 17px 32px;

    border-radius: 10px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    font-weight: 700;

    transition: .35s;

}

.seobnr_btn_fill {

    color: #fff;

    background: linear-gradient(90deg, #6d38ff, #ff4c84);

    box-shadow: 0 15px 35px rgba(109, 56, 255, .35);

}

.seobnr_btn_fill:hover {

    transform: translateY(-5px);

}

.seobnr_btn_border {

    border: 2px solid #7a3cff;

    color: #6d38ff;

    background: #fff;

}

.seobnr_btn_border:hover {

    background: #6d38ff;

    color: #fff;

}

/*=========================
Responsive
=========================*/

@media(max-width:992px) {

    .seobnr_overlay {

        background: rgba(255, 255, 255, .90);

    }

    .seobnr_section {

        min-height: auto;

    }

    .seobnr_content {

        max-width: 100%;

    }

    .seobnr_content h1 {

        font-size: 46px;

    }

}

@media(max-width:768px) {

    .seobnr_container {

        padding: 70px 20px;

    }

    .seobnr_content h1 {

        font-size: 36px;

    }

    .seobnr_content p {

        font-size: 16px;

        line-height: 30px;

    }

    .seobnr_list {

        grid-template-columns: 1fr;

    }

    .seobnr_buttons {

        flex-direction: column;

    }

    .seobnr_btn_fill,

    .seobnr_btn_border {

        width: 100%;

        justify-content: center;

    }

}

@media(max-width:480px) {

    .seobnr_content h1 {

        font-size: 30px;

    }

    .seobnr_subtitle {

        font-size: 12px;

    }

}


/* Tablet & Mobile hide*/
@media (max-width:992px) {

    .seobnr_section {
        background: none;
        min-height: auto;
    }

    .seobnr_mobile_image {
        display: block;
        text-align: center;
        margin-top: 40px;
    }

    .seobnr_mobile_image img {
        width: 100%;
        max-width: 650px;
        height: auto;
    }

    .seobnr_content {
        max-width: 100%;
        text-align: center;
    }

}


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

.csseo_service_section {

    padding: 50px 20px;

    background: #fff;

}

.csseo_service_container {

    max-width: 1200px;

    margin: auto;

}

.csseo_service_heading {

    text-align: center;

    margin-bottom: 55px;

}

.csseo_service_heading span {

    display: inline-block;

    color: #7b3cff;

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 12px;

}

.csseo_service_heading h2 {

    font-size: 42px;

    color: #1d2142;

    font-weight: 700;

    margin-bottom: 15px;

}

.csseo_service_heading p {

    color: #666;

    font-size: 17px;

    max-width: 700px;

    margin: auto;

    line-height: 28px;

}

/*========================*/

.csseo_service_grid {

    display: grid;

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

    gap: 28px;

}

/*========================*/

.csseo_service_card {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    background: #fff;

    padding: 28px;

    border-radius: 16px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .08);

    transition: .35s;

    border: 1px solid #f1f1f1;

}

.csseo_service_card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 45px rgba(123, 60, 255, .18);

}

/*========================*/

.csseo_service_icon {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    background: linear-gradient(135deg, #f3ebff, #efe9ff);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.csseo_service_icon i {

    font-size: 30px;

    color: #7b3cff;

}

.csseo_service_content h3 {

    font-size: 21px;

    margin-bottom: 10px;

    color: #1d2142;

    font-weight: 700;

}

.csseo_service_content p {

    color: #666;

    font-size: 15px;

    line-height: 27px;

}

/*=========================
Responsive
=========================*/

@media(max-width:991px) {

    .csseo_service_grid {

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

    }

    .csseo_service_heading h2 {

        font-size: 34px;

    }

}

@media(max-width:767px) {

    .csseo_service_grid {

        grid-template-columns: 1fr;

    }

    .csseo_service_card {

        padding: 22px;

    }

    .csseo_service_heading h2 {

        font-size: 28px;

    }

    .csseo_service_heading p {

        font-size: 15px;

    }

    .csseo_service_icon {

        width: 60px;

        height: 60px;

    }

    .csseo_service_icon i {

        font-size: 26px;

    }

    .csseo_service_content h3 {

        font-size: 18px;

    }

}


/*=============================
WHY CHOOSE SEO
==============================*/

.cswhyseo_section {

    padding: 10px 20px;

    background: #ffffff;

}

.cswhyseo_container {

    max-width: 1200px;

    margin: auto;

    background: linear-gradient(135deg, #0d1548 0%, #231d69 55%, #2d176d 100%);

    border-radius: 18px;

    padding: 30px 1px;

    overflow: hidden;

    position: relative;

}

/* Decorative Background */

.cswhyseo_container::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 50%;

    top: -180px;

    right: -120px;

}

.cswhyseo_container::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border: 1px solid rgba(255, 255, 255, .06);

    border-radius: 50%;

    left: -80px;

    bottom: -90px;

}

.cswhyseo_heading {

    text-align: center;

    margin-bottom: 40px;

    position: relative;

    z-index: 2;

}

.cswhyseo_heading h2 {

    color: #fff;

    font-size: 38px;

    font-weight: 700;

    margin: 0;

}

.cswhyseo_heading span {

    color: #ff4ea3;

}

/*=========================*/

.cswhyseo_wrapper {

    display: grid;

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

    position: relative;

    z-index: 2;

}

.cswhyseo_item {

    text-align: center;

    padding: 0 22px;

    border-right: 1px solid rgba(255, 255, 255, .12);

}

.cswhyseo_item:last-child {

    border-right: none;

}

/*=========================*/

.cswhyseo_icon {

    width: 70px;

    height: 70px;

    margin: auto;

    margin-bottom: 18px;

    border-radius: 50%;

    border: 2px solid rgba(180, 110, 255, .45);

    background: rgba(255, 255, 255, .05);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .35s;

}

.cswhyseo_icon i {

    font-size: 28px;

    color: #c26cff;

}

.cswhyseo_item:hover .cswhyseo_icon {

    background: #7b3cff;

    transform: translateY(-6px);

}

.cswhyseo_item:hover .cswhyseo_icon i {

    color: #fff;

}

.cswhyseo_item h3 {

    color: #fff;

    font-size: 20px;

    margin-bottom: 12px;

    font-weight: 600;

}

.cswhyseo_item p {

    color: rgba(255, 255, 255, .80);

    font-size: 15px;

    line-height: 26px;

    margin: 0;

}

/*=========================
Responsive
==========================*/

@media(max-width:991px) {

    .cswhyseo_wrapper {

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

        gap: 35px;

    }

    .cswhyseo_item {

        border-right: none;

        padding: 0 10px;

    }

    .cswhyseo_heading h2 {

        font-size: 32px;

    }

}

@media(max-width:767px) {

    .cswhyseo_container {

        padding: 35px 25px;

    }

    .cswhyseo_wrapper {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .cswhyseo_heading h2 {

        font-size: 28px;

        line-height: 1.4;

    }

    .cswhyseo_icon {

        width: 60px;

        height: 60px;

    }

    .cswhyseo_icon i {

        font-size: 24px;

    }

    .cswhyseo_item h3 {

        font-size: 18px;

    }

    .cswhyseo_item p {

        font-size: 14px;

        line-height: 24px;

    }

}


/*====================================
SEO PROCESS
=====================================*/

.csseoprocess_section {

    padding: 20px 20px;

    background: #fff;

}

.csseoprocess_container {

    max-width: 1200px;

    margin: auto;

}

.csseoprocess_heading {

    text-align: center;

    margin-bottom: 70px;

}

.csseoprocess_heading span {

    display: inline-block;

    color: #6d3df5;

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 10px;

}

.csseoprocess_heading h2 {

    font-size: 20px;

    color: #444;

    font-weight: 500;

}

/*============================*/

.csseoprocess_wrapper {

    display: grid;

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

    gap: 25px;

    position: relative;

}

.csseoprocess_wrapper::before {

    content: "";

    position: absolute;

    left: 10%;

    right: 10%;

    top: 36px;

    height: 2px;

    background: #ece8ff;

    z-index: 0;

}

/*============================*/

.csseoprocess_item {

    position: relative;

    text-align: center;

    z-index: 2;

}

.csseoprocess_item::after {

    content: "";

    position: absolute;

    top: 34px;

    right: -14px;

    width: 8px;

    height: 8px;

    background: #6d3df5;

    border-radius: 50%;

}

.csseoprocess_item:last-child::after {

    display: none;

}

/*============================*/

.csseoprocess_icon {

    width: 72px;

    height: 72px;

    margin: auto;

    border-radius: 50%;

    background: #6d3df5;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 28px;

    box-shadow: 0 15px 30px rgba(109, 61, 245, .25);

    transition: .35s;

}

.csseoprocess_item:hover .csseoprocess_icon {

    transform: translateY(-8px);

    background: #8b4bff;

}

.csseoprocess_number {

    display: block;

    margin-top: 18px;

    font-size: 14px;

    color: #999;

    font-weight: 600;

}

.csseoprocess_item h3 {

    margin: 8px 0 12px;

    font-size: 18px;

    color: #5b3ff5;

    font-weight: 700;

}

.csseoprocess_item p {

    color: #666;

    font-size: 15px;

    line-height: 26px;

    padding: 0 10px;

}

/*============================
Responsive
============================*/

@media(max-width:991px) {

    .csseoprocess_wrapper {

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

        gap: 50px 30px;

    }

    .csseoprocess_wrapper::before {

        display: none;

    }

    .csseoprocess_item::after {

        display: none;

    }

}

@media(max-width:767px) {

    .csseoprocess_section {

        padding: 70px 20px;

    }

    .csseoprocess_wrapper {

        grid-template-columns: 1fr;

    }

    .csseoprocess_heading h2 {

        font-size: 18px;

    }

    .csseoprocess_icon {

        width: 65px;

        height: 65px;

        font-size: 24px;

    }

    .csseoprocess_item h3 {

        font-size: 17px;

    }

    .csseoprocess_item p {

        font-size: 14px;

        line-height: 24px;

    }

}


/*==========================================
SEO HERO SECTION
==========================================*/

.cswseo_hero {

    position: relative;

    width: 100%;

    min-height: 760px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: url("images/seo-banner.webp") center center/cover no-repeat;


}

.cswseo_overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg,
            rgba(255, 255, 255, .97) 0%,
            rgba(255, 255, 255, .94) 28%,
            rgba(255, 255, 255, .88) 45%,
            rgba(255, 255, 255, .55) 62%,
            rgba(255, 255, 255, .18) 82%,
            rgba(255, 255, 255, .05) 100%);

}

.cswseo_container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1320px;

    margin: auto;

    padding: 90px 20px;

}

.cswseo_content {

    width: 100%;

    max-width: 560px;

}

/*====================*/

.cswseo_subtitle {

    display: inline-block;

    font-size: 14px;

    font-weight: 700;

    color: #7b3dff;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 18px;

}

/*====================*/

.cswseo_content h1 {

    font-size: 64px;

    line-height: 1.12;

    color: #1d2144;

    font-weight: 800;

    margin-bottom: 25px;

}

.cswseo_content h1 span {

    display: block;

    color: #b737df;

}

/*====================*/

.cswseo_content p {

    font-size: 19px;

    color: #5d6476;

    line-height: 1.9;

    margin-bottom: 40px;

}

/*====================*/

.cswseo_features {

    display: grid;

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

    gap: 18px 40px;

    margin-bottom: 45px;

}

.cswseo_feature {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 17px;

    color: #333;

    font-weight: 600;

}

.cswseo_feature i {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #f4edff;

    color: #7b3dff;

    font-size: 14px;

}

/*====================*/

.cswseo_buttons {

    display: flex;

    gap: 22px;

    flex-wrap: wrap;

}

/*====================*/

.cswseo_btn_primary {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 18px 34px;

    border-radius: 12px;

    text-decoration: none;

    color: #fff;

    font-weight: 700;

    font-size: 17px;

    background: linear-gradient(90deg, #6b38ff, #ff3d87);

    transition: .35s;

    box-shadow: 0 18px 40px rgba(110, 56, 255, .25);

}

.cswseo_btn_primary:hover {

    transform: translateY(-6px);

}

/*====================*/

.cswseo_btn_outline {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 18px 34px;

    border-radius: 12px;

    border: 2px solid #7b3dff;

    color: #7b3dff;

    background: #fff;

    text-decoration: none;

    font-size: 17px;

    font-weight: 700;

    transition: .35s;

}

.cswseo_btn_outline:hover {

    background: #7b3dff;

    color: #fff;

}

/*====================*/

.cswseo_btn_primary i,
.cswseo_btn_outline i {

    transition: .35s;

}

.cswseo_btn_primary:hover i,
.cswseo_btn_outline:hover i {

    transform: translateX(6px);

}

/*====================*/
/* Decorative Blur */
/*====================*/

.cswseo_hero::before {

    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    background: radial-gradient(rgba(138, 77, 255, .12), transparent 70%);

    right: 8%;
    top: 8%;

    z-index: 1;

}

.cswseo_hero::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: radial-gradient(rgba(255, 77, 150, .10), transparent 70%);

    left: -50px;
    bottom: -50px;

    z-index: 1;

}

/*=====================================
2560px / 2K / Ultra Wide Desktop
======================================*/

@media screen and (min-width:2200px) {

    .seobnr_section {

        height: 900px;

        background-size: cover;
        background-position: center center;

    }

    .seobnr_container {

        max-width: 1800px;

        margin: auto;

        padding: 0 60px;

        display: flex;
        align-items: center;

    }

    .seobnr_content {

        max-width: 720px;
        margin-top: 54px;

    }

    .seobnr_subtitle {

        font-size: 18px;

        margin-bottom: 20px;

    }

    .seobnr_content h1 {

        font-size: 70px;

        line-height: 1.08;

        margin-bottom: 30px;

    }

    .seobnr_content p {

        font-size: 24px;

        line-height: 42px;

        margin-bottom: 55px;

    }

    .seobnr_list {

        gap: 26px 70px;

        margin-bottom: 60px;

    }

    .seobnr_item {

        font-size: 22px;

    }

    .seobnr_item i {

        width: 36px;

        height: 36px;

        font-size: 18px;

    }

    .seobnr_buttons {

        gap: 30px;

    }

    .seobnr_btn_fill,
    .seobnr_btn_border {

        padding: 24px 42px;

        font-size: 20px;

        border-radius: 14px;

    }

}







.cwsseo-pricing-section {
    padding: 50px 0;
    background: linear-gradient(180deg, #f8fbff, #eef3ff);
    overflow: hidden;
    position: relative;
}

.cwsseo-container {
    width: 92%;
    max-width: 1200px;
    margin: auto;
}

/*==========================
Heading
==========================*/

.cwsseo-heading {
    text-align: center;
    margin-bottom: 70px;
}

.cwsseo-subtitle {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    background: #7234FF;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.cwsseo-heading h2 {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 18px;
    color: black;
}

.cwsseo-heading h2 span {
    color: #7234FF;
}

.cwsseo-heading p {
    font-size: 18px;
    color: #6b7280;
    max-width: 700px;
    margin: auto;
    line-height: 1.8;
}

/*==========================
Package Row
==========================*/

.cwsseo-package-row {
    margin-bottom: 90px;
}

.cwsseo-package-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
    padding-bottom: 18px;
    border-bottom: 2px solid #e5e7eb;
}

.cwsseo-package-title h3 {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
}

.cwsseo-package-title p {
    font-size: 17px;
    color: #64748b;
}

/*==========================
Cards Grid
==========================*/

.cwsseo-card-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    align-items: stretch;
}

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

.cwsseo-card {
    background: #fff;
    border-radius: 28px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: .45s;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .05);
}

/* Animated Gradient Border */

.cwsseo-card::before {

    content: "";

    position: absolute;

    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;

    background-color: #C044C3;

    background-size: 400%;
    z-index: -1;
    border-radius: 30px;
    opacity: 0;
    transition: .45s;

}

.cwsseo-card:hover::before {
    opacity: 1;
    animation: cwsborder 6s linear infinite;
}

@keyframes cwsborder {

    0% {
        background-position: 0%;
    }

    100% {
        background-position: 400%;
    }

}

.cwsseo-card:hover {

    transform: translateY(-14px);

    box-shadow: 0 25px 60px rgba(37, 99, 235, .18);

}

/*==========================
Featured Card
==========================*/

.cwsseo-featured {

    background: #7234FF;
    color: #fff;
    transform: scale(1.05);

}

.cwsseo-featured ul li {
    color: #f3f4f6;
}

.cwsseo-featured .cwsseo-plan-name {
    color: #fff;
}

.cwsseo-featured .cwsseo-price {
    color: #fff;
}

.cwsseo-featured span {
    color: #cbd5e1;
}

.cwsseo-featured .cwsseo-btn {

    background: #2563eb;
    color: #fff;

}

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

.cwsseo-badge {

    position: absolute;

    top: 22px;
    right: -40px;

    background: #f59e0b;

    color: #fff;

    padding: 10px 45px;

    font-size: 13px;

    font-weight: 700;

    transform: rotate(45deg);

    letter-spacing: 1px;

}

/*==========================
Plan Name
==========================*/

.cwsseo-plan-name {

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 20px;

}

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

.cwsseo-price {

    font-size: 52px;

    font-weight: 800;

    color: #2563eb;

    margin-bottom: 30px;

}

.cwsseo-price span {

    font-size: 16px;

    font-weight: 500;

    color: #64748b;

}

/*==========================
Feature List
==========================*/

.cwsseo-card ul {

    list-style: none;

    margin-bottom: 35px;

    flex: 1;

}

.cwsseo-card ul li {

    padding: 13px 0;

    font-size: 16px;

    border-bottom: 1px dashed #e5e7eb;

    color: #475569;

}


.csd ul li {
    color: white;
}

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

.cwsseo-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    padding: 16px;

    border-radius: 50px;

    background: #111827;

    color: #fff;

    text-decoration: none;

    font-weight: 700;

    transition: .35s;

    position: relative;

    overflow: hidden;

}

.cwsseo-btn::before {

    content: "";

    position: absolute;

    left: -100%;

    top: 0;

    width: 100%;

    height: 100%;

    background: rgba(255, 255, 255, .15);

    transform: skewX(-30deg);

    transition: .5s;

}

.cwsseo-btn:hover::before {

    left: 130%;

}

.cwsseo-btn:hover {

    background: #2563eb;

}

/*==========================
Responsive
==========================*/

@media(max-width:1200px) {

    .cwsseo-card-wrapper {

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

    }

}

@media(max-width:768px) {

    .cwsseo-heading h2 {

        font-size: 36px;

    }

    .cwsseo-package-title {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

    }

    .cwsseo-card-wrapper {

        grid-template-columns: 1fr;

    }

    .cwsseo-featured {

        transform: none;

    }

    .cwsseo-card {

        padding: 30px;

    }

    .cwsseo-price {

        font-size: 42px;

    }

}

@media(max-width:480px) {

    .cwsseo-pricing-section {

        padding: 70px 0;

    }

    .cwsseo-heading h2 {

        font-size: 30px;

    }

    .cwsseo-package-title h3 {

        font-size: 24px;

    }

    .cwsseo-price {

        font-size: 36px;

    }

    .cwsseo-card {

        padding: 25px;

    }

}


/* Change all content to white on hover */

.cwsseo-card:hover .cwsseo-plan-name,
.cwsseo-card:hover .cwsseo-price,
.cwsseo-card:hover .cwsseo-price span,
.cwsseo-card:hover ul li,
.cwsseo-card:hover .cwsseo-badge {
    color: #fff;
}

/* Tick icon color */
.cwsseo-card:hover ul li::marker {
    color: #fff;
}

/* If you're using a custom tick with ::before */
.cwsseo-card:hover ul li::before {
    color: #fff;
}

/* Button */
.cwsseo-card:hover .cwsseo-btn {
    background: #fff;
    color: #000;
    border-color: #fff;
}


/*=========================================
PACKAGE SECTION
=========================================*/

.cwspkg_section {

    padding: 90px 20px;

    background: #f7f8fc;

}

.cwspkg_container {

    max-width: 1200px;

    margin: auto;

}

.cwspkg_heading {

    text-align: center;

    margin-bottom: 60px;

}

.cwspkg_heading span {

    display: inline-block;

    color: #6d38ff;

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 12px;

}

.cwspkg_heading h2 {

    font-size: 44px;

    color: #222;

    margin-bottom: 15px;

    font-weight: 800;

}

.cwspkg_heading p {

    font-size: 17px;

    color: #666;

}

/*=========================================
GRID
=========================================*/

.cwspkg_grid {

    display: grid;

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

    gap: 32px;

}

/*=========================================
CARD
=========================================*/

.cwspkg_card {

    background: #fff;

    border-radius: 28px;

    padding: 28px;

    position: relative;

    box-shadow: 0 12px 35px rgba(0, 0, 0, .08);

    transition: .4s;

    display: flex;

    flex-direction: column;

    height: 100%;

}

.cwspkg_card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 60px rgba(0, 0, 0, .15);

}

/*=========================================
POPULAR
=========================================*/

.cwspkg_badge {

    position: absolute;

    top: -6px;

    left: 50%;

    transform: translateX(-50%);

    background: linear-gradient(90deg, #7d3cff, #ff4c86);

    color: #fff;

    padding: 8px 22px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 700;

}

/*=========================================
TITLE
=========================================*/

.cwspkg_title {

    text-align: center;

    font-size: 34px;

    font-weight: 700;

    margin-bottom: 22px;

}

.cwspkg_basic .cwspkg_title {

    color: #6d38ff;

}

.cwspkg_standard .cwspkg_title {

    color: #2468ff;

}

.cwspkg_premium .cwspkg_title {

    color: #ff2f7b;

}

/*=========================================
DESCRIPTION BOX
=========================================*/

.cwspkg_desc {

    text-align: center;

    padding: 25px;

    border-radius: 16px;

    margin-bottom: 30px;

    font-size: 17px;

    color: #555;

    line-height: 30px;

}

.cwspkg_basic .cwspkg_desc {

    background: #f2ecff;

}

.cwspkg_standard .cwspkg_desc {

    background: #edf4ff;

}

.cwspkg_premium .cwspkg_desc {

    background: #ffeaf2;

}

/*=========================================
FEATURE LIST
=========================================*/

.cwspkg_list {

    list-style: none;

    padding: 0;

    margin: 0;

    flex: 1;

}

.cwspkg_list li {

    position: relative;

    padding-left: 34px;

    margin-bottom: 18px;

    font-size: 17px;

    color: #444;

    line-height: 28px;

}

.cwspkg_list li::before {

    content: "✓";

    position: absolute;

    left: 0;

    top: 2px;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 11px;

}

.cwspkg_basic .cwspkg_list li::before {

    background: #6d38ff;

}

.cwspkg_standard .cwspkg_list li::before {

    background: #2468ff;

}

.cwspkg_premium .cwspkg_list li::before {

    background: #ff2f7b;

}

/*=========================================
PRICE
=========================================*/

.cwspkg_price {

    text-align: center;

    font-size: 30px;

    font-weight: 800;

    margin: 20px 0 28px;

}

.cwspkg_basic .cwspkg_price {

    color: #6d38ff;

}

.cwspkg_standard .cwspkg_price {

    color: #2468ff;

}

.cwspkg_premium .cwspkg_price {

    color: #ff2f7b;

}


/*=========================================
BUTTON
=========================================*/

.cwspkg_btn {
    width: 100%;
    height: 58px;
    border-radius: 60px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    transition: .35s;

}

.cwspkg_basic .cwspkg_btn {

    background: linear-gradient(90deg, #6d38ff, #8c47ff);

}

.cwspkg_standard .cwspkg_btn {

    background: linear-gradient(90deg, #2468ff, #4b8cff);

}

.cwspkg_premium .cwspkg_btn {

    background: linear-gradient(90deg, #ff2f7b, #ff5598);

}

/*=============================*/

.cwspkg_btn span {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: .35s;

}

.cwspkg_basic .cwspkg_btn span {

    color: #6d38ff;

}

.cwspkg_standard .cwspkg_btn span {

    color: #2468ff;

}

.cwspkg_premium .cwspkg_btn span {

    color: #ff2f7b;

}

/*=============================*/

.cwspkg_btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: rgba(255, 255, 255, .18);

    transition: .6s;

}

.cwspkg_btn:hover::before {

    left: 100%;

}

.cwspkg_btn:hover {

    transform: translateY(-5px);

}

.cwspkg_btn:hover span {

    transform: translateX(6px) rotate(-45deg);

}

/*=========================================
CARD HOVER
=========================================*/

.cwspkg_card {

    overflow: hidden;

}

.cwspkg_card::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 70%;

    height: 100%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    transform: skewX(-25deg);

    transition: 1s;

}

.cwspkg_card:hover::before {

    left: 170%;

}

.cwspkg_card:hover {

    transform: translateY(-12px);

}

.cwspkg_standard {

    transform: scale(1.03);

}

.cwspkg_standard:hover {

    transform: translateY(-12px) scale(1.05);

}

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

@media(max-width:1199px) {

    .cwspkg_grid {

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

    }

    .cwspkg_premium {

        grid-column: 1/3;

        max-width: 520px;

        margin: auto;

    }

}

@media(max-width:991px) {

    .cwspkg_section {

        padding: 70px 20px;

    }

    .cwspkg_heading h2 {

        font-size: 36px;

    }

    .cwspkg_title {

        font-size: 28px;

    }

    .cwspkg_price {

        font-size: 44px;

    }

    .cwspkg_standard {

        transform: none;

    }

    .cwspkg_standard:hover {

        transform: translateY(-10px);

    }

}

@media(max-width:767px) {

    .cwspkg_grid {

        grid-template-columns: 1fr;

    }

    .cwspkg_premium {

        grid-column: auto;

        max-width: 100%;

    }

    .cwspkg_card {

        padding: 25px;

    }

    .cwspkg_title {

        font-size: 26px;

    }

    .cwspkg_desc {

        font-size: 16px;

        line-height: 28px;

        padding: 20px;

    }

    .cwspkg_list li {

        font-size: 15px;

        margin-bottom: 15px;

    }

    .cwspkg_price {

        font-size: 40px;

        margin: 20px 0;

    }

    .cwspkg_btn {

        height: 60px;

        font-size: 18px;

    }

    .cwspkg_btn span {

        width: 36px;

        height: 36px;

    }

}

@media(max-width:480px) {

    .cwspkg_section {

        padding: 60px 15px;

    }

    .cwspkg_heading h2 {

        font-size: 30px;

    }

    .cwspkg_heading p {

        font-size: 15px;

    }

    .cwspkg_card {

        border-radius: 22px;

        padding: 22px;

    }

    .cwspkg_title {

        font-size: 24px;

    }

    .cwspkg_desc {

        font-size: 15px;

    }

    .cwspkg_price {

        font-size: 36px;

    }

    .cwspkg_badge {

        font-size: 11px;

        padding: 7px 18px;

    }

}


/*=========================================
LEADING SEO SECTION
=========================================*/

.cwsleadseo_section {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 40px 0;

    background: #f2f0fc url("../img/seo-company-bg.png") right center/contain no-repeat;

}


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

    .cwsleadseo_section {

        background: #f2f0fc;

    }

}

/* Mobile */
@media (max-width:767px) {

    .cwsleadseo_section {

        background: #f2f0fc;

        padding: 50px 0;

    }

}

/*===========================*/

.cwsleadseo_overlay {

    position: absolute;

    inset: 0;

    /* background:linear-gradient(
        90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.95) 38%,
        rgba(255,255,255,.82) 55%,
        rgba(255,255,255,.25) 78%,
        rgba(255,255,255,0) 100%
    ); */

    z-index: 1;

}

/*===========================*/

.cwsleadseo_container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1200px;

    margin: auto;

    padding: 0 20px;

}

/*===========================*/

.cwsleadseo_content {

    width: 100%;

    max-width: 620px;

}

/*===========================*/

.cwsleadseo_subtitle {

    display: inline-block;

    font-size: 13px;

    font-weight: 700;

    color: #7c3cff;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 18px;

}

/*===========================*/

.cwsleadseo_content h2 {

    font-size: 29px;

    font-weight: 800;

    line-height: 1.15;

    color: #18213b;

    margin-bottom: 24px;

}

.cwsleadseo_content h2 span {

    color: #a93cff;

}

/*===========================*/

.cwsleadseo_content p {

    font-size: 17px;

    color: #5b6477;

    line-height: 1.9;

    margin-bottom: 18px;

}

.cwsleadseo_content strong {

    color: #1b2340;

}

/*=================================
FEATURE GRID
=================================*/

.cwsleadseo_feature_wrap {

    display: grid;

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

    gap: 18px;

    margin-top: 45px;

}

/*===========================*/

.cwsleadseo_feature {

    background: #fff;

    border-radius: 16px;

    padding: 10px;

    display: flex;

    align-items: center;

    gap: 16px;

    box-shadow: 0 12px 35px rgba(0, 0, 0, .06);

    transition: .35s;

}

.cwsleadseo_feature:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 45px rgba(124, 60, 255, .15);

}

/*===========================*/

.cwsleadseo_icon {

    width: 30px;

    height: 30px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: linear-gradient(135deg, #7b3cff, #b53cff);

    color: #fff;

    font-size: 17px;

    flex-shrink: 0;

}

/*===========================*/

.cwsleadseo_text h4 {

    margin: 0 0 5px;

    font-size: 18px;

    color: #1d2144;

    font-weight: 700;

}

.cwsleadseo_text span {

    font-size: 14px;

    color: #6d7486;

}

/*=================================
DECORATION
=================================*/

.cwsleadseo_section::before {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background: radial-gradient(rgba(170, 90, 255, .08), transparent 70%);

    left: -120px;

    top: -100px;

}

.cwsleadseo_section::after {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    border-radius: 50%;

    background: radial-gradient(rgba(255, 80, 170, .08), transparent 70%);

    right: 120px;

    bottom: -100px;

}

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

.cwsserv_section {
    position: relative;
    padding: 70px 0;
    background: #f8f9ff;
}

.cwsserv_container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

/*=========================================
GRID
=========================================*/

.cwsserv_grid {
    display: grid;
    grid-template-columns: 340px repeat(3, 1fr);
    gap: 18px;
    align-items: stretch;
}

/*=========================================
LEFT TITLE CARD
=========================================*/

.cwsserv_left {

    background: #ffffff;

    border: 1px solid #ececff;

    border-radius: 16px;

    padding: 35px 30px;

    display: flex;

    align-items: flex-start;

    gap: 18px;

    min-height: 210px;

    grid-row: span 2;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);

    transition: .35s;

}

.cwsserv_left:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 40px rgba(124, 60, 255, .10);

}

.cwsserv_line {

    width: 4px;

    height: 85px;

    border-radius: 50px;

    background: linear-gradient(180deg, #6f42ff, #c43cff);

    flex-shrink: 0;

    margin-top: 3px;

}

.cwsserv_left h2 {

    margin: 0;

    font-size: 30px;

    line-height: 1.35;

    font-weight: 800;

    color: #1d2144;

}

/*=========================================
SERVICE BOX
=========================================*/

.cwsserv_box {

    background: #ffffff;

    border: 1px solid #ececff;

    border-radius: 16px;

    min-height: 96px;

    padding: 20px 24px;

    display: flex;

    align-items: center;

    gap: 18px;

    text-decoration: none;

    transition: .35s;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .04);

}

.cwsserv_box:hover {

    transform: translateY(-6px);

    border-color: #7b3cff;

    box-shadow: 0 20px 45px rgba(123, 60, 255, .15);

}

/*=========================================
ICON
=========================================*/

.cwsserv_icon {

    width: 58px;

    height: 58px;

    border-radius: 14px;

    background: #f5efff;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #7b3cff;

    font-size: 26px;

    transition: .35s;

    flex-shrink: 0;

}

.cwsserv_box:hover .cwsserv_icon {

    background: linear-gradient(135deg, #6f42ff, #b43dff);

    color: #fff;

    transform: rotate(-10deg);

}

/*=========================================
TEXT
=========================================*/

.cwsserv_box h3 {

    margin: 0;

    font-size: 19px;

    line-height: 1.4;

    color: #222;

    font-weight: 700;

}

/*=========================================
LAPTOP
=========================================*/

@media(max-width:1199px) {

    .cwsserv_grid {

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

    }

    .cwsserv_left {

        grid-row: span 3;

    }

    .cwsserv_left h2 {

        font-size: 30px;

    }

    .cwsserv_box {

        min-height: 90px;

    }

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px) {

    .cwsserv_grid {

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

    }

    .cwsserv_left {

        grid-column: 1/-1;

        grid-row: auto;

        min-height: auto;

        padding: 30px;

    }

    .cwsserv_left h2 {

        font-size: 28px;

    }

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:767px) {

    .cwsserv_grid {

        grid-template-columns: 1fr;

    }

    .cwsserv_left {

        grid-column: auto;

        padding: 25px;

        gap: 15px;

    }

    .cwsserv_line {

        height: 65px;

    }

    .cwsserv_left h2 {

        font-size: 24px;

    }

    .cwsserv_box {

        min-height: 80px;

        padding: 18px;

        gap: 15px;

    }

    .cwsserv_icon {

        width: 50px;

        height: 50px;

        font-size: 22px;

    }

    .cwsserv_box h3 {

        font-size: 17px;

    }

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px) {

    .cwsserv_section {

        padding: 50px 0;

    }

    .cwsserv_container {

        padding: 0 15px;

    }

    .cwsserv_left {

        padding: 20px;

    }

    .cwsserv_left h2 {

        font-size: 22px;

    }

    .cwsserv_line {

        height: 55px;

    }

    .cwsserv_box {

        padding: 16px;

    }

    .cwsserv_icon {

        width: 46px;

        height: 46px;

        font-size: 20px;

    }

    .cwsserv_box h3 {

        font-size: 16px;

    }

}


/*=====================================
MOBILE
=====================================*/

@media only screen and (max-width:767px) {

    .cwsleadseo_feature_wrap {

        grid-template-columns: 1fr !important;

        gap: 15px !important;

        margin-top: 25px;

    }

    .cwsleadseo_feature {

        width: 100% !important;

        display: flex;

        align-items: center;

        padding: 15px;

    }

    .cwsleadseo_icon {

        width: 45px;

        height: 45px;

        font-size: 18px;

    }

    .cwsleadseo_text h4 {

        font-size: 17px;

    }

    .cwsleadseo_text span {

        font-size: 14px;

    }

}


/*=========================================
SERVICE LOCATION SECTION
=========================================*/

.cwslocation_section {

    padding: 50px 0;

    background: #f8f9ff;

}

.cwslocation_container {

    max-width: 1250px;

    margin: auto;

    padding: 0 20px;

}

/*====================================*/

.cwslocation_heading {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin-bottom: 30px;

}

.cwslocation_heading span {

    width: 80px;

    height: 2px;

    /* background:#7b3cff; */

}

.cwslocation_heading h2 {

    margin: 0;

    font-size: 34px;

    color: #1d2144;

    font-weight: 800;

}

/*====================================*/

.cwslocation_tabs {

    display: flex;

    justify-content: center;

    gap: 0;

    margin-bottom: 35px;

}

.cwslocation_tab {

    border: none;

    background: #fff;

    color: #444;

    padding: 14px 45px;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition: .35s;

    border: 1px solid #ececff;

}

.cwslocation_tab:first-child {

    border-radius: 10px 0 0 10px;

}

.cwslocation_tab:last-child {

    border-radius: 0 10px 10px 0;

}

.cwslocation_tab.active {

    background: linear-gradient(90deg, #6d39ff, #a83cff);

    color: #fff;

}

/*====================================*/

.cwslocation_content {

    display: none;

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

    gap: 18px;

}

.cwslocation_content.active {

    display: grid;

}

/*====================================*/

.cwslocation_content a {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 18px;

    background: #fff;

    border-radius: 50px;

    text-decoration: none;

    color: #333;

    font-size: 14px;

    font-weight: 600;

    border: 1px solid #ececff;

    transition: .35s;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .04);

}

.cwslocation_content a:hover {

    background: #7b3cff;

    color: #fff;

    transform: translateY(-4px);

    box-shadow: 0 15px 30px rgba(123, 60, 255, .18);

}

/*=====================================
Laptop
=====================================*/

@media(max-width:1199px) {

    .cwslocation_content {

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

    }

}

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

@media(max-width:991px) {

    .cwslocation_heading h2 {

        font-size: 30px;

    }

    .cwslocation_content {

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

    }

    .cwslocation_tab {

        padding: 12px 35px;

        font-size: 16px;

    }

}

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

@media(max-width:767px) {

    .cwslocation_section {

        padding: 50px 0;

    }

    .cwslocation_heading {

        flex-direction: column;

        gap: 12px;

    }

    .cwslocation_heading span {

        display: none;

    }

    .cwslocation_heading h2 {

        font-size: 26px;

        text-align: center;

    }

    .cwslocation_tabs {

        width: 100%;

    }

    .cwslocation_tab {

        flex: 1;

        padding: 12px 10px;

        font-size: 15px;

    }

    .cwslocation_content {

        grid-template-columns: 1fr;

        gap: 12px;

    }

    .cwslocation_content a {

        font-size: 15px;

        padding: 14px 16px;

    }

}

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

@media(max-width:480px) {

    .cwslocation_container {

        padding: 0 15px;

    }

    .cwslocation_heading h2 {

        font-size: 22px;

    }

    .cwslocation_tab {

        font-size: 14px;

        padding: 11px;

    }

    .cwslocation_content a {

        font-size: 14px;

    }

}


/*=============================
FAQ SECTION
=============================*/

.cwsfaq_section {
    padding: 10px 0;
    background: #f8f9ff;
}

.cwsfaq_container {
    width: 100%;
    max-width: 900px;
    margin: auto;
    padding: 0 20px;
}

.cwsfaq_heading {
    text-align: center;
    margin-bottom: 40px;
}

.cwsfaq_heading h2 {
    font-size: 40px;
    font-weight: 800;
    color: #1c2343;
    margin-bottom: 10px;
}

.cwsfaq_heading p {
    color: #666;
    font-size: 17px;
}

.cwsfaq_item {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: .3s;
}

.cwsfaq_question {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 25px;
    font-size: 18px;
    font-weight: 700;
    color: #1b2144;
    text-align: left;
}

.cwsfaq_question i {
    color: #7b3cff;
    transition: .3s;
}

.cwsfaq_answer {
    max-height: 0;
    overflow: hidden;
    transition: .4s;
}

.cwsfaq_answer p {
    padding: 0 25px 22px;
    color: #666;
    line-height: 1.8;
}

.cwsfaq_item.active .cwsfaq_answer {
    max-height: 250px;
}

.cwsfaq_item.active .fa-plus {
    transform: rotate(45deg);
}

/*====================
Responsive
====================*/

@media(max-width:991px) {

    .cwsfaq_heading h2 {
        font-size: 34px;
    }

}

@media(max-width:767px) {

    .cwsfaq_section {
        padding: 60px 0;
    }

    .cwsfaq_heading h2 {
        font-size: 28px;
    }

    .cwsfaq_question {
        font-size: 16px;
        padding: 18px;
    }

    .cwsfaq_answer p {
        padding: 0 18px 18px;
        font-size: 15px;
    }

}


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

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

    .csws-stats-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .cswpkg-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

}

/* Mobile */
@media (max-width:767px) {

    .csws-stats-section {
        padding: 40px 15px;
    }

    .csws-stats-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .csws-stats-item {
        width: 100%;
    }

    .csws-stats-content h3 {
        font-size: 28px;
    }

    .csws-stats-content p {
        font-size: 15px;
    }

    .cswpkg-section {
        padding: 50px 15px;
    }

    .cswpkg-container {
        width: 100%;
        margin-top: 20px;
    }

    .csws-price-title h2 {
        font-size: 30px;
        line-height: 1.3;
    }

    .csws-price-title p {
        font-size: 15px;
    }

    .cswpkg-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .cswpkg-card {
        width: 100%;
        padding: 30px 22px;
    }

    .cswpkg-card h3 {
        font-size: 24px;
    }

    .cswpkg-desc {
        font-size: 15px;
        line-height: 1.7;
    }

    .cswpkg-list li {
        font-size: 15px;
        line-height: 1.8;
    }

    .cswpkg-price {
        font-size: 34px;
    }

    .cswpkg-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

}

/* Small Mobile */
@media (max-width:480px) {

    .csws-price-title h2 {
        font-size: 26px;
    }

    .cswpkg-card {
        padding: 25px 18px;
    }

    .cswpkg-price {
        font-size: 30px;
    }

    .cswpkg-list li {
        font-size: 14px;
    }

}


/*==============================
Mobile Floating Buttons
==============================*/
.cws-mobile-float-btns {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: none;
    z-index: 99999;
    gap: 8px;
    padding: 8px;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .15);
}

.cws-mobile-float-btns a {
    flex: 1;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 10px;
}

.cws-call-btn {
    background: #5a2ca0;
}

.cws-whatsapp-btn {
    background: #25D366;
}

.cws-mobile-float-btns i {
    font-size: 20px;
}

@media (max-width:767px) {
    .cws-mobile-float-btns {
        display: flex;
    }

    body {
        padding-bottom: 75px;
    }
}

@media (min-width:768px) {
    .cws-mobile-float-btns {
        display: none;
    }
}



/* Mobile Bottom Action Bar */
.cwsx_mobile_actionbar {
    position: fixed;
    bottom: 5px;
    left: 2px;
    right: 2px;
    z-index: 9999;

    display: flex;
    gap: 3px;
    padding: 8px;
    border-radius: 50px;
}

.cwsx_action_btn {
    flex: 1;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 7px;
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    transition: .3s;
    border: 1px solid rgba(255, 255, 255, .15);
}

.cwsx_action_btn i {
    font-size: 20px;
}

.cwsx_whatsapp {
    background: #940ef5;
}

.cwsx_whatsapp:hover {
    background: #940ef5;
}

.cwsx_map {
    background: #e94cc0;
}

.cwsx_map:hover {
    background: #e94cc0;
}

.cwsx_call {
    background: #492d95;
}

.cwsx_call:hover {
    background: #000;
}

/* Mobile */
@media(max-width:767px) {

    .cwsx_mobile_actionbar {
        display: flex;
    }

    .cwsx_action_btn {
        height: 40px;
        font-size: 13px;
    }

    .cwsx_action_btn i {
        font-size: 14px;
    }

}

/* Hide on Tablet/Desktop */
@media(min-width:768px) {
    .cwsx_mobile_actionbar {
        display: none;
    }
}














.cwspro_container {
    width: 90%;
    max-width: 1300px;
    margin: auto;
}

/*==========================
Section
==========================*/

.cwspro_services_section {
    padding: 90px 0;
    overflow: hidden;
    position: relative;
}

.cwspro_services_section::before {

    content: '';

    width: 350px;
    height: 350px;

    background: #eaf3ff;

    position: absolute;

    top: -120px;
    right: -120px;

    border-radius: 50%;

    z-index: -1;

}

.cwspro_services_section::after {

    content: '';

    width: 300px;
    height: 300px;

    background: #edf5ff;

    position: absolute;

    bottom: -100px;
    left: -100px;

    border-radius: 50%;

    z-index: -1;

}

/*==========================
Heading
==========================*/

.cwspro_heading {

    text-align: center;

    margin-bottom: 70px;

}

.cwspro_badge {

    display: inline-block;

    padding: 10px 25px;

    background: #e7f0ff;

    color: #0d5be1;

    font-size: 14px;

    font-weight: 600;

    border-radius: 40px;

    letter-spacing: 1px;

    margin-bottom: 20px;

}

.cwspro_heading h2 {

    font-size: 48px;

    font-weight: 700;

    color: #0b2559;

    margin-bottom: 20px;

    line-height: 1.2;

}

.cwspro_heading p {

    width: 750px;

    max-width: 100%;

    margin: auto;

    color: #666;

    font-size: 18px;

}

/*==========================
Service Card
==========================*/

.cwspro_service_card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;

    background: #fff;

    border-radius: 25px;

    padding: 50px;

    margin-bottom: 60px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .08);

    transition: .4s;

}

.cwspro_service_card:hover {

    transform: translateY(-8px);

    box-shadow: 0 30px 80px rgba(0, 0, 0, .12);

}

.cwspro_reverse_card {

    flex-direction: row-reverse;

}

.cwspro_service_content {

    flex: 1;

}

.cwspro_gallery {

    flex: 1;

}

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

.cwspro_icon_box {

    width: 75px;

    height: 75px;

    border-radius: 20px;

    background: linear-gradient(135deg, #8e2de2, #003ecb);

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 30px;

    margin-bottom: 25px;

    box-shadow: 0 15px 40px rgba(13, 110, 253, .25);

}

.cwspro_service_content h3 {

    font-size: 36px;

    color: #142850;

    margin-bottom: 18px;
    font-weight: 800;

}

.cwspro_service_content h3 span {

    color: #8e2de2;

}

.cwspro_service_content p {

    color: #666;

    font-size: 16px;

    margin-bottom: 30px;
    text-align: justify;

}


/*==========================================
Feature List
==========================================*/

.cwspro_feature_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 35px;
    margin-bottom: 40px;
}

.cwspro_feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #f8fbff;
    border: 1px solid #e8eefc;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #444;
    transition: .35s ease;
}

.cwspro_feature:hover {
    background: #8e2de2;
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(13, 110, 253, .18);
}

.cwspro_feature i {
    color: #8e2de2;
    font-size: 18px;
    transition: .35s;
}

.cwspro_feature:hover i {
    color: #fff;
}


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

.cwspro_btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 34px;
    background: linear-gradient(135deg, #8e2de2, #0047d8);
    color: #fff;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    transition: .35s;
    /* box-shadow:0 15px 35px rgba(13,110,253,.25); */
}

.cwspro_btn:hover {
    transform: translateY(-6px);
    /* box-shadow:0 20px 45px rgba(13,110,253,.35); */
}

.cwspro_btn i {
    transition: .35s;
}

.cwspro_btn:hover i {
    transform: translateX(8px);
}


/*==========================================
Gallery
==========================================*/

.cwspro_gallery_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.cwspro_gallery_item {
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
    transition: .35s;
}

.cwspro_gallery_item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: .45s;
}

.cwspro_gallery_item:hover img {
    transform: scale(1.08);
}

.cwspro_gallery_item:hover {
    transform: translateY(-8px);
}


/*==========================================
Scroll Animation
==========================================*/

.cwspro_service_card {
    opacity: 0;
    transform: translateY(60px);
    transition: 1s ease;
}

.cwspro_service_card.cwspro_show {
    opacity: 1;
    transform: translateY(0);
}


/*==========================================
Responsive
==========================================*/

@media(max-width:1200px) {

    .cwspro_service_card {
        gap: 40px;
        padding: 40px;
    }

    .cwspro_heading h2 {
        font-size: 40px;
    }

}


@media(max-width:992px) {

    .cwspro_service_card,
    .cwspro_reverse_card {
        flex-direction: column;
    }

    .cwspro_gallery,
    .cwspro_service_content {
        width: 100%;
    }

    .cwspro_heading h2 {
        font-size: 34px;
    }

    .cwspro_service_content h3 {
        font-size: 30px;
    }

}


@media(max-width:768px) {

    .cwspro_services_section {
        padding: 70px 0;
    }

    .cwspro_service_card {
        padding: 30px;
        border-radius: 20px;
    }

    .cwspro_heading {
        margin-bottom: 50px;
    }

    .cwspro_heading h2 {
        font-size: 30px;
    }

    .cwspro_heading p {
        font-size: 16px;
    }

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

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

    .cwspro_gallery_item img {
        height: 180px;
    }

    .cwspro_icon_box {
        width: 65px;
        height: 65px;
        font-size: 26px;
    }

    .cwspro_service_content h3 {
        font-size: 28px;
    }

}


@media(max-width:576px) {

    .cwspro_container {
        width: 94%;
    }

    .cwspro_services_section {
        padding: 60px 0;
    }

    .cwspro_service_card {
        padding: 22px;
        gap: 30px;
    }

    .cwspro_heading h2 {
        font-size: 26px;
    }

    .cwspro_heading p {
        font-size: 15px;
    }

    .cwspro_service_content h3 {
        font-size: 19px;
    }

    .cwspro_service_content p {
        font-size: 15px;
    }

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

    .cwspro_gallery_item img {
        height: 220px;
    }

    .cwspro_feature {
        font-size: 14px;
        padding: 12px 15px;
    }

    .cwspro_btn {
        width: 100%;
        justify-content: center;
    }

}


/*==========================================
Floating Background Animation
==========================================*/

@keyframes cwsproFloat {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-18px);
    }

    100% {
        transform: translateY(0px);
    }

}

.cwspro_icon_box {
    animation: cwsproFloat 4s ease-in-out infinite;
}


/*==========================================
Image Hover Glow
==========================================*/

.cwspro_gallery_item:hover {
    box-shadow: 0 25px 60px rgba(13, 110, 253, .18);
}



/*=====================================
Service Image
======================================*/

.cwspro_service_image {
    flex: 1;
}

.cwspro_service_image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .12);
    transition: .5s ease;
}

.cwspro_service_image img:hover {
    transform: scale(1.04);
}


@media(max-width:992px) {

    .cwspro_service_card,
    .cwspro_reverse_card {

        flex-direction: column;

    }

    .cwspro_service_image {

        width: 100%;

    }

    .cwspro_service_image img {

        height: 380px;

    }

}

@media(max-width:576px) {

    .cwspro_service_image img {

        height: 240px;

    }

}


/* ===========================
   Mobile Only Image
=========================== */

.cwspro_mobile_only_image {
    display: none;
}

.cwspro_mobile_only_image img {
    width: 100%;
    height: auto;
    display: block;
    /* border-radius:15px; */
    margin: 56px 0;
}

/* Show Only on Mobile */

@media only screen and (max-width:767px) {

    .cwspro_mobile_only_image {
        display: block;
        margin-top: -57px;
    }

}


/*==============================
Mobile CTA Buttons
===============================*/

.cwspro_mobile_cta {
    display: none;
}

@media only screen and (max-width:767px) {

    .cwspro_mobile_cta {

        /* display:flex;
    gap:5px;
            margin-top: -60px;
        background-color: #f7f3f9;
        height: 35px; */


        left: 15px;
        right: 15px;
        width: auto;
        height: 35px;
        margin-top: -60px;
        display: flex;
        gap: 5px;
        margin-left: 5px;
        margin-right: 5px;




    }

    .cwspro_mobile_btn {

        flex: 1;
        text-align: center;
        padding: 5px 12px;
        border-radius: 5px;
        font-size: 11px;
        font-weight: 600;
        text-decoration: none;
        transition: .3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;



    }

    .cwspro_mobile_cta {
        left: 15px !important;
        right: 15px !important;
        width: auto;
    }

    .cwspro_consult_btn {

        background: #6f06e9;
        color: #fff;

    }

    .cwspro_consult_btn:hover {

        background: #0049c7;

    }

    .cwspro_service_btn {

        background: #ee77cf;
        color: #ffffff;

    }

    .cwspro_service_btn:hover {

        background: #6f06e9;
        color: #fff;

    }

}



@media only screen and (max-width:767px) {



    /* Center Button */
    .cswpkg-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 180px;
        /* Button width */
        font-size: 17px;
        margin: 20px auto 0;
        /* Centers horizontally */
    }

}



/* ===============================
   Mobile Responsive (2 Columns)
================================= */
@media only screen and (max-width: 767px) {

    .csws-solutions-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .csws-service-box {
        padding: 20px 15px;
        text-align: center;
    }

    .csws-service-icon {
        width: 55px;
        height: 55px;
        margin: 0 auto 15px;
    }

    .csws-service-icon i {
        font-size: 24px;
    }

    .csws-service-box h3 {
        font-size: 11px;
        line-height: 1.4;
        margin-bottom: 0;
    }

}


@media (max-width:767px) {

    .cwspro_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 192px;
        font-size: 15px;
        margin: 25px auto 0;
    }

}



.cwspro_service_card {
    display: flex;
    align-items: center;
    gap: 50px;
}

@media (max-width:767px) {

    .cwspro_service_card {
        flex-direction: column-reverse;
    }

}



/* ============================
   Mobile Layout Order
============================ */

@media (max-width:767px) {

    .cwspro_service_card {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .cwspro_service_image {
        order: 1;
        width: 100%;
    }

    .cwspro_service_content {
        order: 2;
        width: 100%;
    }

    .cwspro_service_content h3 {
        margin-top: 5px;
        margin-bottom: 15px;
    }

    .cwspro_service_content p {
        margin-bottom: 20px;
    }

    .cwspro_feature_list {
        margin-bottom: 20px;
    }

    .cwspro_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 170px;
        margin: 0 auto;
        font-size: 12px;
    }

}



.cwspro_service_image {
    width: 100%;
}

.cwspro_slider_img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border: 8px solid #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
}

#cwsproImageCarousel {
    overflow: hidden;
    border-radius: 20px;
}

.carousel-control-prev,
.carousel-control-next {
    width: 45px;
    height: 45px;
    background: #ffffff;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
}

.carousel-control-prev {
    left: 15px;
}

.carousel-control-next {
    right: 15px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1);
}

@media(max-width:768px) {

    .cwspro_slider_img {
        height: 320px;
        border: 6px solid #fff;
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 38px;
        height: 38px;
    }

}


.cwspro_service_image {
    width: 100%;
}

#websitePortfolioSlider {
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    padding: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .15);
}

.cwspro_slider_img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 15px;
}

.carousel-control-prev,
.carousel-control-next {
    width: 35px;
    height: 35px;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
}

.carousel-control-prev {
    left: 15px;
}

.carousel-control-next {
    right: 15px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1);
    width: 1rem !important;
    height: 1rem !important;
}

.carousel-indicators {
    margin-bottom: 10px;
}

.carousel-indicators button {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
}

@media(max-width:768px) {

    .cwspro_slider_img {
        height: 300px;
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 36px;
        height: 36px;
    }

}


/* ===========================
   1024px Tablet Responsive
=========================== */
@media (min-width:992px) and (max-width:1024px) {

    .csweb-navbar {
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    .csweb-logo {
        flex: 0 0 180px;
    }

    .csweb-logo img {
        max-width: 180px;
        height: auto;
    }

    .csweb-nav-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 22px;
        margin: 0;
        padding: 0;
        flex: 1;
    }

    .csweb-nav-menu li {
        list-style: none;
    }

    .csweb-nav-menu li a {
        font-size: 17px;
        font-weight: 500;
        padding: 8px 0;
        white-space: nowrap;
    }

    .csweb-dropdown>a i {
        font-size: 12px;
        margin-left: 5px;
    }

    .csweb-dropdown-menu {
        min-width: 250px;
    }

    .csweb-quote-btn {
        padding: 13px 22px;
        font-size: 17px;
        border-radius: 40px;
        white-space: nowrap;
    }

    .csweb-mobile-toggle {
        display: none;
    }

}























/* =========================================
   SERVICE LOCATION SECTION
   RESPONSIVE CSS
========================================= */

.cwsloc_section {
    width: 100%;
    overflow: hidden;
}

.cwsloc_section .container {
    width: 100%;
    margin: 0 auto;
}


/* =========================================
   LOCATION GRID
========================================= */

.cwsloc_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: 100%;
}


/* =========================================
   LOCATION CARD
========================================= */

.cwsloc_card {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
    min-width: 0;

    padding: 16px 18px;

    box-sizing: border-box;

    text-decoration: none;

    background: #ffffff;

    border: 1px solid #e8e8e8;

    border-radius: 12px;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);

    color: #111111;

    font-size: 14px;
    line-height: 1.45;

    overflow: hidden;

    transition: all 0.3s ease;
}


/* LOCATION ICON */

.cwsloc_card i {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    background: linear-gradient(135deg, #a83ee8, #c75ae8);

    color: #ffffff;

    font-size: 17px;

    box-sizing: border-box;
}


/* CARD TEXT */

.cwsloc_card {
    overflow-wrap: break-word;
    word-break: normal;
}


/* HOVER */

.cwsloc_card:hover {
    transform: translateY(-3px);

    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.10);

    color: #8b35d9;
}


/* =========================================
   VIEW MORE BUTTON
========================================= */

.cwsloc_btnbox {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;

    margin-top: 30px;
}

.cwsloc_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 24px;

    border: none;
    border-radius: 6px;

    cursor: pointer;

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

    background: #8f3fe0;
    color: #ffffff;

    transition: all 0.3s ease;
}

.cwsloc_btn:hover {
    background: #7028bd;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1199px) {

    .cwsloc_section .container {
        max-width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
    }

    .cwsloc_grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

}


/* =========================================
   SMALL TABLET
========================================= */

@media (max-width: 767px) {

    .cwsloc_section .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .cwsloc_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .cwsloc_card {
        gap: 10px;

        padding: 13px 10px;

        border-radius: 11px;

        font-size: 13px;
        line-height: 1.35;
    }

    .cwsloc_card i {
        flex: 0 0 36px;

        width: 36px;
        height: 36px;

        font-size: 16px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 480px) {

    .cwsloc_section {
        width: 100%;
        overflow-x: hidden;
    }

    .cwsloc_section .container {
        width: 100% !important;

        max-width: 100% !important;

        padding-left: 10px !important;
        padding-right: 10px !important;

        box-sizing: border-box;
    }


    /* TWO CARDS PER ROW */

    .cwsloc_grid {
        display: grid;

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

        gap: 6px;

        width: 100%;

        box-sizing: border-box;
    }


    /* CARD */

    .cwsloc_card {
        display: flex;

        align-items: center;

        gap: 8px;

        width: 100%;
        min-width: 0;

        padding: 12px 8px;

        box-sizing: border-box;

        font-size: 12px;

        line-height: 1.35;

        border-radius: 10px;

        overflow: hidden;
    }


    /* ICON */

    .cwsloc_card i {
        flex: 0 0 34px;

        width: 34px;
        height: 34px;

        min-width: 34px;

        font-size: 14px;
    }


    /* TEXT */

    .cwsloc_card {
        overflow-wrap: anywhere;
    }


    /* BUTTON */

    .cwsloc_btnbox {
        margin-top: 22px;
    }

    .cwsloc_btn {
        padding: 10px 20px;

        font-size: 14px;
    }

}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 360px) {

    .cwsloc_section .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .cwsloc_grid {
        gap: 5px;
    }

    .cwsloc_card {
        gap: 6px;

        padding: 10px 6px;

        font-size: 11px;

        line-height: 1.3;
    }

    .cwsloc_card i {
        flex: 0 0 30px;

        width: 30px;
        height: 30px;

        min-width: 30px;

        font-size: 13px;
    }

}


















.cwsloc_section {
    padding: 50px 0;
    /* background:#f7f9fc; */
}

.cwsloc_heading {
    text-align: center;
    margin-bottom: 40px;
}

.cwsloc_heading h2 {
    font-size: 42px;
    font-weight: 700;
    color: #B053E7;
}

.cwsloc_heading p {
    color: #666;
}

.cwsloc_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.cwsloc_card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    padding: 16px 20px;
    border-radius: 14px;
    text-decoration: none;
    color: #222;
    font-weight: 500;
    border: 1px solid #ececec;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    transition: .35s;
    font-size: 13px;
}

.cwsloc_card i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #b053e7;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.cwsloc_card:hover {
    background: #b053e7;
    color: #fff;
    transform: translateY(-5px);
}

.cwsloc_card:hover i {
    background: #fff;
    color: #b053e7;
}

.cwsloc_btnbox {
    text-align: center;
    margin-top: 35px;
}

.cwsloc_btn {
    background: #b053e7;
    color: #fff;
    border: none;
    padding: 14px 36px;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

.cwsloc_btn:hover {
    background: #b053e7;
}

@media(max-width:991px) {
    .cwsloc_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:576px) {
    .cwsloc_grid {
        grid-template-columns: 1fr;
    }

    .cwsloc_heading h2 {
        font-size: 30px;
    }
}


.cwspro_btn_group {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.cwspro_btn_group .cwspro_btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 14px 20px;
    border-radius: 50px;
    font-weight: 600;
}

.cwspro_btn_outline {
    background: #e94dc0;
    color: white;
    border: 2px solid #e94dc0;
}

.cwspro_btn_outline:hover {
    background: #e94dc0;
    color: #fff;
}

@media (max-width:767px) {

    .cwspro_btn_group {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .cwspro_btn_group .cwspro_btn {
        flex: 1;
        font-size: 12px;
        padding: 10px 10px;
    }
}



.cwsgr_reviews_section {
    padding: 80px 20px;
    background: #f8f9fc;
}

.cwsgr_container {
    max-width: 1150px;
    margin: auto;
}

.cwsgr_heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 45px;
    flex-wrap: wrap;
    gap: 20px;
}

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

.cwsgr_title img {
    width: 55px;
}

.cwsgr_title h2 {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    color: #1b1b1b;
}

.cwsgr_rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.cwsgr_score {
    font-size: 30px;
    font-weight: 700;
}

.cwsgr_star {
    color: #FFC107;
    font-size: 17px;
    letter-spacing: 2px;
}

.cwsgr_rating p {
    margin: 0;
    color: #666;
}

.cwsgr_view_btn {
    padding: 14px 28px;
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.cwsgr_view_btn:hover {
    transform: translateY(-4px);
    color: #fff;
}

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

.cwsgr_card {
    background: #fff;
    padding: 25px;
    border-radius: 18px;
    border: 1px solid #ececec;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    transition: .35s;
}

.cwsgr_card:hover {
    transform: translateY(-8px);
}

.cwsgr_card_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.cwsgr_card_top h4 {
    margin: 0;
    font-size: 20px;
}

.cwsgr_card_top img {
    width: 22px;
}

.cwsgr_card p {
    color: #555;
    line-height: 1.8;
    margin: 15px 0;
}

.cwsgr_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.cwsgr_bottom span {
    font-size: 14px;
    color: #888;
}

.cwsgr_bottom a {
    text-decoration: none;
    font-weight: 600;
    color: #6a11cb;
}

.cwsgr_bottom a:hover {
    color: #2575fc;
}

@media(max-width:991px) {

    .cwsgr_grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media(max-width:767px) {

    .cwsgr_heading {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .cwsgr_title h2 {
        font-size: 18px;
    }

    .cwsgr_view_btn {
        width: 100%;
        text-align: center;
    }

}



.cswtab-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 40px 0;
}

.cswtab-btn {
    padding: 14px 30px;
    border: none;
    background: #f4f4f4;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

.cswtab-btn:hover {
    background: #7B4CF7;
    color: #fff;
}

.cswtab-btn.active {
    background: #7B4CF7;
    color: #fff;
    box-shadow: 0 10px 25px rgba(13, 110, 253, .25);
}

.cswtab-content {
    display: none;
    animation: fade .4s ease;
}

.cswtab-content.active {
    display: block;
}

@keyframes fade {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@media(max-width:768px) {

    .cswtab-nav {
        gap: 10px;
    }

    .cswtab-btn {
        font-size: 14px;
        padding: 10px 18px;
    }

}


/* ============================
   Desktop Floating Buttons
============================ */

.cws_desktop_float_contact {
    position: fixed;
    right: 25px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 99999;
}

/* Common Style */
.cws_desktop_float_contact a {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    transition: .3s ease;
}

.cws_desktop_float_contact a:hover {
    transform: translateY(-4px) scale(1.08);
}

/* Call */
.cws_desktop_call {
    background: #e94cc0;
}

/* WhatsApp */
.cws_desktop_whatsapp {
    background: #940ef5;
}

/* Hide on Mobile & Tablet */
@media (max-width:991px) {
    .cws_desktop_float_contact {
        display: none;
    }
}



/*==========================================================
 CS WEB SOLUTION PREMIUM FOOTER
 Part 1
 Unique Class Name : csws_
==========================================================*/

.csws_footer_main {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #170A45 0%, #12083D 100%);
    color: #fff;
    padding: 90px 0 0;
    z-index: 1;
}

/* Decorative Pattern */

.csws_footer_main::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(images/footer-pattern.png);
    background-size: cover;
    background-position: center;
    opacity: .08;
    pointer-events: none;
}

/* Temple Image */

.csws_footer_main::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 165px;
    width: 290px;
    height: 320px;
    background: url(images/footer-temple.png) no-repeat;
    background-size: contain;
    background-position: left bottom;
    opacity: .95;
}

/* Container */

.csws_footer_main .container {
    position: relative;
    z-index: 5;
}

/* Columns */

.csws_footer_column {
    position: relative;
    margin-bottom: 35px;
}

.csws_footer_column:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, .08);
}

/* Logo */

.csws_footer_logo img {
    max-width: 220px;
    margin-top: -65px;
}

/* About */

.csws_footer_about {
    color: #d9d5ff;
    line-height: 2;
    margin-top: -32px;
    font-size: 15px;
}

/* Social */

.csws_social {
    display: flex;
    gap: 14px;
    margin-top: 25px;
}

.csws_social a {

    width: 46px;
    height: 46px;

    border-radius: 50%;

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

    text-decoration: none;

    color: #fff;

    transition: .35s;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.csws_social a:nth-child(1) {

    background: #1877f2;

}

.csws_social a:nth-child(2) {

    background: #E1306C;

}

.csws_social a:nth-child(3) {

    background: #1DA1F2;

}

.csws_social a:nth-child(4) {

    background: #ff0000;

}

.csws_social a:hover {

    transform: translateY(-7px);

}

/* Title */

.csws_footer_title {

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 35px;

    position: relative;

    color: #fff;

}

.csws_footer_title::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -12px;

    width: 55px;

    height: 3px;

    background: linear-gradient(90deg, #ff7d1a, #ff3fc0);

    border-radius: 20px;

}

/* Lists */

.csws_footer_menu {

    padding: 0;

    margin: 0;

    list-style: none;

}

.csws_footer_menu li {

    /* margin-bottom:18px; */

}

.csws_footer_menu li a {

    text-decoration: none;

    color: #ece7ff;

    transition: .35s;

    display: inline-flex;

    align-items: center;

}

.csws_footer_menu li a::before {

    content: "›";

    font-size: 24px;

    margin-right: 10px;

    color: #ff8a18;

    font-weight: bold;

    transition: .35s;

}

.csws_footer_menu li a:hover {

    color: #fff;

    padding-left: 8px;

}

.csws_footer_menu li a:hover::before {

    margin-right: 15px;

}

/* Contact */

.csws_contact_list {

    list-style: none;

    padding: 0;

    margin: 0;

}

.csws_contact_list li {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 15px;

    color: #ece7ff;

    line-height: 1.8;

}

.csws_contact_list i {

    color: #ff8b17;

    font-size: 20px;

    width: 22px;

    margin-top: 4px;

}

/* Newsletter */

.csws_newsletter {

    position: relative;

    padding: 35px;

    border-radius: 25px;

    background: linear-gradient(160deg, #7a24f6, #ff4fcb);

    overflow: hidden;

    box-shadow: 0 25px 60px rgba(0, 0, 0, .25);

}

.csws_newsletter::before {

    content: "";

    position: absolute;

    right: -40px;

    top: -40px;

    width: 160px;

    height: 160px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .08);

}

.csws_newsletter::after {

    content: "";

    position: absolute;

    left: -60px;

    bottom: -60px;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .06);

}

.csws_newsletter h4 {

    font-size: 34px;

    font-weight: 700;

    margin-bottom: 18px;

    position: relative;

    z-index: 2;

}

.csws_newsletter p {

    color: #fff;

    opacity: .95;

    line-height: 2;

    position: relative;

    z-index: 2;

}

.csws_newsletter_box {

    position: relative;

    display: flex;

    margin-top: 28px;

    border: 1px solid rgba(255, 255, 255, .35);

    border-radius: 40px;

    overflow: hidden;

    background: rgba(255, 255, 255, .12);

    backdrop-filter: blur(10px);

    z-index: 2;

}

.csws_newsletter_box input {

    flex: 1;

    height: 54px;

    border: none;

    background: none;

    outline: none;

    padding: 0 20px;

    color: #fff;

}

.csws_newsletter_box input::placeholder {

    color: #f6f6f6;

}

.csws_newsletter_box button {

    width: 60px;

    border: none;

    background: none;

    color: #ffb347;

    font-size: 20px;

    cursor: pointer;

    transition: .3s;

}

.csws_newsletter_box button:hover {

    transform: scale(1.15);

}


/*==========================================================
 CS WEB SOLUTION PREMIUM FOOTER
 Part 2
==========================================================*/

/*=========================================
 Top Decorative Wave
=========================================*/

.csws_footer_wave {
    position: relative;
    width: 100%;
    margin-top: 70px;
    overflow: hidden;
    line-height: 0;
}

.csws_footer_wave svg {
    display: block;
    width: 100%;
    height: 110px;
}

/*=========================================
 Odisha Decorative Strip
=========================================*/

.csws_footer_pattern {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 255px;
    height: 75px;
    background: url(images/footer-border.png) repeat-x center;
    background-size: auto 75px;
    opacity: .8;
}

/*=========================================
 Festival Silhouette
=========================================*/

.csws_footer_silhouette {
    position: absolute;
    right: 280px;
    bottom: 240px;
    width: 420px;
    height: 90px;
    background: url(images/footer-silhouette.png) no-repeat center;
    background-size: contain;
    opacity: .9;
}

/*=========================================
 Jagannath Image
=========================================*/

.csws_footer_jagannath {
    position: absolute;
    left: 20px;
    bottom: 8px;
    width: 120px;
    z-index: 30;
}

.csws_footer_jagannath img {
    width: 100%;
}

/*=========================================
 Odissi Dancer
=========================================*/

.csws_footer_dancer {
    position: absolute;
    right: 10px;
    bottom: 0;
    width: 170px;
    z-index: 20;
}

.csws_footer_dancer img {
    width: 100%;
}

/*=========================================
 Feature Box
=========================================*/

.csws_feature_box {

    margin-top: 70px;

    background: rgba(34, 20, 89, .92);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 22px;

    padding: 35px;

    backdrop-filter: blur(10px);

    box-shadow: 0 25px 60px rgba(0, 0, 0, .35);

    position: relative;

    z-index: 5;

}

/* Divider */

.csws_feature_item {

    display: flex;

    align-items: center;

    gap: 18px;

    position: relative;

    padding: 0 15px;

}

.csws_feature_item::after {

    content: "";

    position: absolute;

    right: -15px;

    top: 8px;

    width: 1px;

    height: 65px;

    background: rgba(255, 255, 255, .08);

}

.csws_feature_box .col-lg-3:last-child .csws_feature_item::after {

    display: none;

}

/* Icon */

.csws_feature_item i {

    width: 72px;

    height: 72px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 28px;

    background: linear-gradient(135deg, #7b29f7, #d53ac9);

    border: 5px solid rgba(255, 255, 255, .08);

    flex-shrink: 0;

}

/* Text */

.csws_feature_item h5 {

    color: #fff;

    font-size: 16px;

    margin-bottom: 6px;

    font-weight: 700;

}

.csws_feature_item p {

    color: #d6d0ff;

    margin: 0;

    line-height: 1.8;

    font-size: 14px;

}

/* Hover */

.csws_feature_item:hover i {

    transform: rotate(360deg);

    transition: .8s;

}

.csws_feature_item:hover {

    transform: translateY(-6px);

    transition: .4s;

}

/*=========================================
 Bottom Section
=========================================*/

.csws_footer_bottom {

    margin-top: 55px;

    padding: 28px 0;

    position: relative;

    border-top: 1px solid rgba(255, 255, 255, .08);

    background: rgba(14, 8, 48, .95);

}

/* Decorative Line */

.csws_footer_bottom::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 2px;

    background: linear-gradient(90deg, #ff7b19, #d73dcf, #7c34f7);

}

/* Text */

.csws_footer_bottom p {

    margin: 0;

    color: #ddd6ff;

    font-size: 15px;

}

/* Links */

.csws_footer_bottom a {

    color: #ddd6ff;

    text-decoration: none;

    margin: 0 10px;

    transition: .3s;

}

.csws_footer_bottom a:hover {

    color: #fff;

}

/* Heart */

.csws_footer_heart {

    color: #ff4b8a;

    margin: 0 6px;

    animation: cswsHeart 1.2s infinite;

}

@keyframes cswsHeart {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.25);

    }

    100% {

        transform: scale(1);

    }

}

/*=========================================
 Bottom Border Pattern
=========================================*/

.csws_footer_bottom_pattern {

    position: absolute;

    left: 0;

    right: 0;

    top: -18px;

    height: 18px;

    background: url(images/footer-pattern-line.png) repeat-x center;

    background-size: auto 18px;

    opacity: .7;

}


/*==========================================================
 CS WEB SOLUTION PREMIUM FOOTER
 Part 3 (Responsive + Animation)
==========================================================*/

/*==============================
 Smooth Animation
==============================*/

.csws_footer_main * {
    transition: all .35s ease;
}

/* Hover Effects */

.csws_footer_menu li:hover {
    transform: translateX(6px);
}

.csws_contact_list li:hover {
    color: #ffffff;
    transform: translateX(5px);
}

.csws_contact_list li:hover i {
    color: #ff9c22;
    transform: scale(1.15);
}

.csws_newsletter {
    transition: .45s;
}

.csws_newsletter:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}

.csws_social a:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, .35);
}

.csws_newsletter_box input:focus {
    background: rgba(255, 255, 255, .05);
}

.csws_newsletter_box button:hover {
    color: #fff;
}

/*==============================
 Scroll Animation Ready
==============================*/

.csws_footer_column {
    animation: cswsFadeUp .8s ease;
}

@keyframes cswsFadeUp {

    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

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

@media(max-width:1199px) {

    .csws_footer_title {
        font-size: 24px;
    }

    .csws_newsletter {
        padding: 30px;
    }

    .csws_newsletter h4 {
        font-size: 28px;
    }

    .csws_feature_item {
        margin-bottom: 25px;
    }

    .csws_feature_item::after {
        display: none;
    }

    .csws_footer_main::after {
        width: 220px;
        height: 250px;
    }

    .csws_footer_dancer {
        width: 130px;
    }

    .csws_footer_silhouette {
        width: 300px;
        right: 180px;
    }

}

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

@media(max-width:991px) {

    .csws_footer_main {
        padding-top: 70px;
    }

    .csws_footer_column {
        margin-bottom: 40px;
        border: none !important;
    }

    .csws_footer_title {
        margin-top: 20px;
    }

    .csws_newsletter {
        margin-top: 20px;
    }

    .csws_feature_box {
        padding: 25px;
    }

    .csws_feature_item {
        margin-bottom: 30px;
    }

    .csws_footer_pattern,
    .csws_footer_silhouette {
        display: none;
    }

    .csws_footer_main::after {
        opacity: .20;
        width: 170px;
        bottom: 130px;
    }

    .csws_footer_dancer {
        display: none;
    }

}

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

@media(max-width:767px) {

    .csws_footer_main {

        padding: 55px 0 0;

        text-align: center;

    }

    .csws_footer_logo img {

        /* max-width:170px; */
        margin: auto;
        display: block;
        margin-bottom: -60px;
        margin-top: -80px;

    }

    .csws_footer_about {

        margin: 20px auto;

    }

    .csws_social {

        justify-content: center;
        margin-bottom: 10px;

    }

    .csws_footer_title {

        font-size: 22px;

    }

    .csws_footer_title::after {

        left: 50%;

        transform: translateX(-50%);

    }

    .csws_footer_menu li a {

        justify-content: center;

    }

    .csws_contact_list li {

        justify-content: center;

        text-align: center;

        flex-direction: column;

        gap: 8px;

    }

    .csws_contact_list i {

        margin: 0;

    }

    .csws_newsletter {

        padding: 25px;

        border-radius: 20px;

    }

    .csws_newsletter h4 {

        font-size: 28px;

    }

    .csws_newsletter_box {

        height: 50px;

    }

    .csws_newsletter_box input {

        font-size: 14px;

    }

    .csws_feature_box {

        padding: 20px;

        margin-top: 45px;

    }

    .csws_feature_item {

        flex-direction: column;

        text-align: center;

        /* padding:20px 10px; */

    }

    .csws_feature_item i {

        margin-bottom: 12px;

    }

    .csws_feature_item h5 {

        font-size: 20px;

    }

    .csws_footer_bottom {

        text-align: center;

    }

    .csws_footer_bottom .row>div {

        margin-bottom: 15px;

    }

    .csws_footer_jagannath {

        width: 80px;

        left: 10px;

        bottom: 5px;

    }

    .csws_footer_main::after {

        display: none;

    }

}

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

@media(max-width:480px) {

    .csws_footer_main {

        padding-top: 45px;

    }

    .csws_footer_title {

        font-size: 20px;

    }

    .csws_newsletter {

        padding: 20px;

    }

    .csws_newsletter h4 {

        font-size: 24px;

    }

    .csws_newsletter_box {

        height: 48px;

    }

    .csws_newsletter_box button {

        width: 50px;

    }

    .csws_social a {

        width: 42px;

        height: 42px;

    }

    .csws_feature_item i {

        width: 60px;

        height: 60px;

        font-size: 22px;

    }

    .csws_feature_item h5 {

        font-size: 18px;

    }

    .csws_feature_item p {

        font-size: 14px;

    }

}

/*==============================
 Backdrop Blur Support
==============================*/

@supports(backdrop-filter:blur(15px)) {

    .csws_feature_box {

        backdrop-filter: blur(15px);

    }

    .csws_newsletter {

        backdrop-filter: blur(12px);

    }

}

/*==============================
 Selection Color
==============================*/

::selection {

    background: #ff4fc8;

    color: #fff;

}

/*==============================
 Scrollbar
==============================*/

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #15093f;

}

::-webkit-scrollbar-thumb {

    background: linear-gradient(#6c3ef4, #ff4fc8);

    border-radius: 20px;

}

::-webkit-scrollbar-thumb:hover {

    background: linear-gradient(#7d4cff, #ff69d2);

}









/* Footer Graphic */
.csws_footer_graphic {
    text-align: center;
    margin-bottom: -12px;
    /* makes it touch the feature box */
    position: relative;
    z-index: 2;
}

.csws_footer_graphic img {
    max-width: 100%;
    width: 900px;
    margin-top: 30px;
    height: auto;
    display: inline-block;
}

/* Feature Box */
.csws_feature_box {
    position: relative;
    background: #26145d;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    padding: 40px 30px;
    z-index: 1;
}




.csws_footer_graphic {
    position: relative;
    text-align: center;
    margin-bottom: 0px;
    z-index: 5;
}

.csws_feature_box {
    margin-top: 0;
    padding-top: 45px;
}

.th-contact-link {
    color: inherit;
    text-decoration: none;
    transition: 0.3s ease;
}

.th-contact-link:hover {
    color: white;
    /* Change to your theme color */
}


.footer-phone-link {
    color: inherit;
    text-decoration: none;
    transition: 0.3s ease;
}

.footer-phone-link:hover {
    color: white;
    /* Change to your theme color */
}


.footer-email-link {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-email-link:hover {
    color: white;
    /* Change to your theme color */
}



.footer-address-link {
    color: inherit;
    text-decoration: none;
    line-height: 1.8;
    transition: all 0.3s ease;
}

.footer-address-link:hover {
    color: white;
    /* Change to your theme color */
}






/*=========================================
        CS ABOUT HERO SECTION CSS
=========================================*/

.csabout-hero-sec {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background: #ffffff;
    background-image:
        radial-gradient(circle at top left, #f5ebff 0%, transparent 35%),
        radial-gradient(circle at bottom right, #efe9ff 0%, transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #faf8ff 100%);
}

.csabout-hero-sec::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -250px;
    right: -180px;
    border-radius: 50%;
    background: rgba(132, 53, 255, .05);
}

.csabout-hero-sec::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    bottom: -180px;
    left: -120px;
    border-radius: 50%;
    background: rgba(214, 69, 252, .05);
}

/*============================*/

.csabout-container {
    width: 92%;
    max-width: 1400px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
    position: relative;
    z-index: 5;
}

/*============================*/

.csabout-left {
    width: 52%;
}

.csabout-subtitle {
    display: inline-block;
    color: #7c3aed;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.csabout-title {
    font-size: 58px;
    line-height: 1.15;
    color: #121826;
    font-weight: 800;
    margin-bottom: 22px;
}

.csabout-title span {
    display: block;
    background: linear-gradient(90deg, #ff4cb0, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.csabout-line {
    width: 90px;
    height: 5px;
    border-radius: 50px;
    margin-bottom: 30px;
    background: linear-gradient(90deg, #ff4cb0, #7c3aed);
}

.csabout-text {
    font-size: 18px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 28px;
}

/*============================*/

.csabout-counter-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 40px;
}

.csabout-counter-box {
    background: #fff;
    border-radius: 18px;
    padding: 30px 20px;
    text-align: center;
    transition: .35s;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
}

.csabout-counter-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 45px rgba(124, 58, 237, .18);
}

.csabout-counter-icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff4cb0, #7c3aed);
    color: #fff;
    font-size: 28px;
    margin-bottom: 20px;
}

.csabout-counter-box h3 {
    font-size: 38px;
    color: #121826;
    margin-bottom: 10px;
}

.csabout-counter-box p {
    font-size: 16px;
    color: #666;
}

/*============================*/

.csabout-right {
    width: 48%;
    position: relative;
}

/*============================*/

.csabout-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 220px 220px 220px 60px;
    padding: 12px;
    background: linear-gradient(135deg, #ff4cb0, #7c3aed);
    box-shadow: 0 30px 60px rgba(89, 40, 255, .18);
}

.csabout-image-wrap img {
    width: 100%;
    display: block;
    border-radius: 210px 210px 210px 55px;
}

/*============================*/

.csabout-card {
    position: absolute;
    background: #fff;
    border-radius: 20px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 240px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .10);
    transition: .35s;
}

.csabout-card:hover {
    transform: translateY(-6px);
}

.csabout-card-icon {
    width: 65px;
    height: 65px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff4cb0, #7c3aed);
    color: #fff;
    font-size: 25px;
}

.csabout-card strong {
    display: block;
    font-size: 22px;
    color: #111827;
    margin-bottom: 5px;
}

.csabout-card span {
    display: block;
    color: #666;
    font-size: 15px;
    line-height: 1.6;
}

/*============================*/

.csabout-card-one {
    top: 60px;
    left: -40px;
}

.csabout-card-two {
    top: 40px;
    right: -30px;
}

.csabout-card-three {
    bottom: 35px;
    left: 20px;
}

/*============================*/

.csabout-dot-one,
.csabout-dot-two {
    position: absolute;
    width: 120px;
    height: 120px;
    background-image: radial-gradient(#b065ff 2px, transparent 2px);
    background-size: 18px 18px;
    opacity: .35;
}

.csabout-dot-one {
    top: 140px;
    left: -60px;
}

.csabout-dot-two {
    bottom: 80px;
    right: -60px;
}



/*==========================================
      LARGE SCREEN (1400px)
==========================================*/

@media (max-width:1400px) {

    .csabout-title {
        font-size: 52px;
    }

    .csabout-container {
        gap: 50px;
    }

    .csabout-card {
        min-width: 220px;
    }

}


/*==========================================
        LAPTOP (1200px)
==========================================*/

@media (max-width:1200px) {

    .csabout-container {
        gap: 40px;
    }

    .csabout-title {
        font-size: 46px;
    }

    .csabout-text {
        font-size: 17px;
    }

    .csabout-counter-wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .csabout-card {
        min-width: 200px;
        padding: 15px 18px;
    }

    .csabout-card strong {
        font-size: 18px;
    }

    .csabout-card-icon {
        width: 55px;
        height: 55px;
        font-size: 20px;
    }

}


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

@media (max-width:992px) {

    .csabout-container {

        flex-direction: column;

        gap: 60px;

    }

    .csabout-left {

        width: 100%;

        order: 2;

    }

    .csabout-right {

        width: 100%;

        order: 1;

        max-width: 650px;

        margin: auto;

    }

    .csabout-title {

        font-size: 44px;

    }

    .csabout-counter-wrap {

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

    }

    .csabout-card-one {

        left: 0;

    }

    .csabout-card-two {

        right: 0;

    }

    .csabout-card-three {

        left: 20px;

    }

}


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

@media (max-width:768px) {

    .csabout-hero-sec {

        padding: 70px 0;

    }

    .csabout-title {

        font-size: 36px;

    }

    .csabout-title span {

        display: inline;

    }

    .csabout-text {

        font-size: 16px;

        line-height: 1.8;

    }

    .csabout-counter-wrap {

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

        gap: 18px;

    }

    .csabout-counter-box {

        padding: 22px 15px;

    }

    .csabout-counter-icon {

        width: 60px;

        height: 60px;

        font-size: 22px;

    }

    .csabout-counter-box h3 {

        font-size: 30px;

    }

    .csabout-card {

        position: relative;

        margin-top: 20px;

        left: auto !important;

        right: auto !important;

        top: auto !important;

        bottom: auto !important;

        width: 100%;

        min-width: 100%;

    }

    .csabout-right {

        display: flex;

        flex-direction: column;

    }

    .csabout-image-wrap {

        border-radius: 35px;

    }

    .csabout-image-wrap img {

        border-radius: 28px;

    }

    .csabout-dot-one,

    .csabout-dot-two {

        display: none;

    }

}


/*==========================================
          SMALL MOBILE (576px)
==========================================*/

@media (max-width:576px) {

    .csabout-container {

        width: 92%;

    }

    .csabout-title {

        font-size: 30px;

        line-height: 1.25;

    }

    .csabout-subtitle {

        font-size: 15px;

    }

    .csabout-line {

        width: 70px;

        height: 4px;

    }

    .csabout-text {

        font-size: 15px;

    }

    .csabout-counter-wrap {

        grid-template-columns: 1fr;

    }

    .csabout-counter-box {

        padding: 25px 20px;

    }

    .csabout-counter-icon {

        width: 58px;

        height: 58px;

        font-size: 20px;

    }

    .csabout-counter-box h3 {

        font-size: 28px;

    }

    .csabout-card {

        padding: 15px;

        gap: 12px;

    }

    .csabout-card-icon {

        width: 50px;

        height: 50px;

        font-size: 18px;

    }

    .csabout-card strong {

        font-size: 18px;

    }

    .csabout-card span {

        font-size: 14px;

    }

}


/*==========================================
        EXTRA SMALL MOBILE (400px)
==========================================*/

@media (max-width:400px) {

    .csabout-title {

        font-size: 26px;

    }

    .csabout-text {

        font-size: 14px;

    }

    .csabout-counter-box h3 {

        font-size: 24px;

    }

    .csabout-counter-box p {

        font-size: 14px;

    }

    .csabout-card {

        flex-direction: column;

        text-align: center;

    }

    .csabout-card-icon {

        margin-bottom: 8px;

    }

}

/*==============================================
        CS WEB SOLUTION ABOUT HERO CSS
==============================================*/

.cswabout_hero_section {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 7px 0;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 40%, #ffffff 100%);
}

.cswabout_hero_section::before {
    content: "";
    position: absolute;
    top: -200px;
    right: -150px;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, #8d3dff20 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.cswabout_hero_section::after {
    content: "";
    position: absolute;
    left: -180px;
    bottom: -180px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #ff4fa020 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.cswabout_container {
    width: 92%;
    max-width: 1400px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}

/*=====================
LEFT CONTENT
======================*/

.cswabout_content {
    width: 48%;
    position: relative;
    z-index: 2;
}

.cswabout_subtitle {
    display: inline-block;
    color: #6f3bff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.cswabout_heading {
    font-size: 45px;
    line-height: 1.15;
    font-weight: 800;
    color: #171b46;
    margin-bottom: 28px;
}

.cswabout_heading span {
    display: block;
    background: linear-gradient(90deg, #7b2ff7, #ff4d94);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cswabout_text {
    font-size: 17px;
    line-height: 29px;
    color: #555;
    margin-bottom: 20px;
    text-align: justify;
}

/*=====================
BUTTONS
======================*/

.cswabout_btn_group {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.cswabout_btn_primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    height: 58px;
    padding: 0 38px;
    border-radius: 14px;
    background: linear-gradient(90deg, #6f3bff, #ff4b90);
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    transition: .35s;
    box-shadow: 0 18px 35px rgba(112, 59, 255, .30);
}

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

.cswabout_btn_outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    height: 58px;
    padding: 0 38px;
    border: 2px solid #7a3eff;
    border-radius: 14px;
    color: #6f3bff;
    font-size: 17px;
    font-weight: 700;
    transition: .35s;
    background: #fff;
}

.cswabout_btn_outline:hover {
    background: #6f3bff;
    color: #fff;
}

/*=========================
RIGHT IMAGE AREA
==========================*/

.cswabout_image_area {
    position: relative;
    width: 52%;
    min-height: 700px;

    background: url("../img/abt.webp") center center/cover no-repeat;

    border-radius: 80px 0 0 80px;

    overflow: hidden;
    margin-top: 60px;
}

/* Purple overlay */

.cswabout_image_area::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background:linear-gradient(120deg,
    rgba(120,56,255,.08),
    rgba(255,78,148,.12)); */
}

/*==========================
FLOATING CARDS
===========================*/

.cswabout_card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 16px;

    background: #fff;
    border-radius: 18px;

    padding: 18px 22px;

    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);

    z-index: 5;

    transition: .4s;
}

.cswabout_card:hover {
    transform: translateY(-8px);
}

.cswabout_icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    background: linear-gradient(90deg, #7b2ff7, #ff4f92);
}

.cswabout_card h4 {
    font-size: 20px;
    color: #151a4d;
    margin-bottom: 5px;
}

.cswabout_card p {
    color: #666;
    font-size: 15px;
    line-height: 1.5;
}

/*=========================
CARD POSITIONS
==========================*/

.cswabout_card_one {
    top: 45px;
    left: -40px;
}

.cswabout_card_two {
    top: 60px;
    right: -30px;
}

.cswabout_card_three {
    bottom: 40px;
    left: 30px;
}

/*==========================
OPTIONAL DOTS
==========================*/

.cswabout_image_area::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: 40px;
    bottom: 30px;

}




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

@media only screen and (max-width:1200px) {

    .cswabout_container {

        width: 92%;
        gap: 40px;

    }

    .cswabout_heading {

        font-size: 50px;

    }

    .cswabout_text {

        font-size: 17px;

    }

    .cswabout_image_area {

        min-height: 600px;

    }

    .cswabout_card {

        transform: scale(.90);

    }

}



/*==========================================
            TABLET
==========================================*/

@media only screen and (max-width:991px) {

    .cswabout_hero_section {

        padding: 80px 0;

    }

    .cswabout_container {

        flex-direction: column;

    }

    .cswabout_content {

        width: 100%;
        order: 2;
        text-align: center;

    }

    .cswabout_image_area {

        width: 100%;
        order: 1;

        min-height: 500px;

        border-radius: 35px;

        background-position: center;

    }

    .cswabout_heading {

        font-size: 44px;

    }

    .cswabout_heading span {

        display: block;

    }

    .cswabout_btn_group {

        justify-content: center;
        flex-wrap: wrap;

    }

    .cswabout_card {

        transform: scale(.85);

    }

    .cswabout_card_one {

        left: 20px;
        top: 20px;

    }

    .cswabout_card_two {

        right: 20px;
        top: 25px;

    }

    .cswabout_card_three {

        left: 50%;
        transform: translateX(-50%);
        bottom: 25px;

    }

}



/*==========================================
            MOBILE
==========================================*/

@media only screen and (max-width:767px) {

    .cswabout_hero_section {

        padding: 60px 0;

    }

    .cswabout_container {

        width: 94%;

    }

    .cswabout_image_area {

        min-height: 320px;

        border-radius: 25px;

        background-position: center;
        background-size: cover;

    }

    .cswabout_subtitle {

        font-size: 14px;
        letter-spacing: 1px;

    }

    .cswabout_heading {

        font-size: 34px;
        line-height: 1.2;

    }

    .cswabout_text {

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

    }

    .cswabout_btn_group {

        flex-direction: column;
        gap: 15px;

    }

    .cswabout_btn_primary,
    .cswabout_btn_outline {

        width: 100%;
        max-width: 320px;
        height: 54px;

    }

    .cswabout_card {

        padding: 12px 15px;

        border-radius: 14px;

        gap: 12px;

    }

    .cswabout_icon {

        width: 46px;
        height: 46px;
        font-size: 20px;
        border-radius: 12px;

    }

    .cswabout_card h4 {

        font-size: 16px;
        margin-bottom: 2px;

    }

    .cswabout_card p {

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

    }

    .cswabout_card_one {

        left: 10px;
        top: 10px;

    }

    .cswabout_card_two {

        right: 10px;
        top: 10px;

    }

    .cswabout_card_three {

        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);

    }

}



/*==========================================
        SMALL MOBILE
==========================================*/

@media only screen and (max-width:480px) {

    .cswabout_heading {

        font-size: 28px;

    }

    .cswabout_text {

        font-size: 15px;

    }

    .cswabout_image_area {

        min-height: 260px;

    }

    .cswabout_card {

        display: none;

        /* Hide floating cards on very small devices */

    }

}



/*==========================================
        FLOATING ANIMATION
==========================================*/

@keyframes cswaboutFloatOne {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }

}

@keyframes cswaboutFloatTwo {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(12px);
    }

    100% {
        transform: translateY(0px);
    }

}

@keyframes cswaboutFloatThree {

    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0px);
    }

}


/*==========================================
        APPLY FLOATING
==========================================*/

.cswabout_card_one {

    animation: cswaboutFloatOne 4s ease-in-out infinite;

}

.cswabout_card_two {

    animation: cswaboutFloatTwo 5s ease-in-out infinite;

}

.cswabout_card_three {

    animation: cswaboutFloatThree 4.5s ease-in-out infinite;

}


/*==========================================
        IMAGE ZOOM EFFECT
==========================================*/

.cswabout_image_area {

    transition: .6s ease;

}

/* .cswabout_hero_section:hover .cswabout_image_area{

    background-size:108%;

} */


/*==========================================
        BUTTON HOVER
==========================================*/

.cswabout_btn_primary {

    position: relative;
    overflow: hidden;
    z-index: 1;

}

.cswabout_btn_primary::before {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background: rgba(255, 255, 255, .18);

    transition: .45s;

    z-index: -1;

}

.cswabout_btn_primary:hover::before {

    left: 100%;

}

.cswabout_btn_primary:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 45px rgba(111, 59, 255, .35);

}

.cswabout_btn_outline:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 35px rgba(111, 59, 255, .20);

}


/*==========================================
        TEXT ANIMATION
==========================================*/

.cswabout_subtitle {

    animation: cswaboutFadeUp .8s ease;

}

.cswabout_heading {

    animation: cswaboutFadeUp 1s ease;

}

.cswabout_text {

    animation: cswaboutFadeUp 1.2s ease;

}

.cswabout_btn_group {

    animation: cswaboutFadeUp 1.4s ease;

}

@keyframes cswaboutFadeUp {

    from {

        opacity: 0;
        transform: translateY(40px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}


/*==========================================
        CARD HOVER
==========================================*/

.cswabout_card {

    cursor: pointer;

}

.cswabout_card:hover {

    transform: translateY(-10px) scale(1.03);

    box-shadow: 0 25px 55px rgba(0, 0, 0, .18);

}


/*==========================================
        BACKGROUND SHAPES
==========================================*/

.cswabout_hero_section .cswabout_shape_one {

    position: absolute;

    top: 80px;
    right: 12%;

    width: 18px;
    height: 18px;

    background: #7d3cff;

    border-radius: 50%;

    animation: cswaboutFloatOne 4s infinite;

}

.cswabout_hero_section .cswabout_shape_two {

    position: absolute;

    left: 6%;
    bottom: 90px;

    width: 28px;
    height: 28px;

    border: 4px solid #ff4c92;

    border-radius: 50%;

    animation: cswaboutFloatTwo 5s infinite;

}

.cswabout_hero_section .cswabout_shape_three {

    position: absolute;

    top: 45%;

    right: 48%;

    width: 16px;
    height: 16px;

    background: #ff4c92;

    transform: rotate(45deg);

    animation: cswaboutFloatThree 4s infinite;

}


/*==========================================
        SMOOTH SCROLL
==========================================*/




.cswv_mission_vision_section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #4b1f74, #081d46);
    overflow: hidden;
}

.cswv_container {
    max-width: 1150px;
    margin: auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 50px;
}

.cswv_box {
    flex: 1;
    color: #fff;
    padding: 45px 35px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    backdrop-filter: blur(10px);
    position: relative;
    text-align: justify;
}

.cswv_box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(135deg, #b94cff, #ffffff20);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.cswv_icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #8b2ff7;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .2);
}

.cswv_box h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 25px;
    font-weight: 700;
    letter-spacing: 1px;
}

.cswv_box p {
    font-size: 16px;
    line-height: 1.9;
    color: #f1f1f1;
    margin-bottom: 18px;
}

.cswv_divider {
    width: 2px;
    background: rgba(255, 255, 255, .15);
    position: relative;
}

.cswv_divider span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 120px;
    border-radius: 30px;
    background: linear-gradient(#fff, #b94cff);
}

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

    .cswv_container {
        gap: 30px;
    }

    .cswv_box {
        padding: 35px 25px;
    }

    .cswv_box h2 {
        font-size: 26px;
    }

    .cswv_box p {
        font-size: 15px;
    }

}

/*----------------------*/
/* Mobile */
/*----------------------*/
@media(max-width:767px) {

    .cswv_container {
        flex-direction: column;
    }

    .cswv_divider {
        width: 100%;
        height: 2px;
    }

    .cswv_divider span {
        width: 120px;
        height: 6px;
    }

    .cswv_box {
        padding: 30px 20px;
    }

    .cswv_icon {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }

    .cswv_box h2 {
        font-size: 24px;
    }

    .cswv_box p {
        font-size: 15px;
        line-height: 1.8;
    }

}





.cswcert_section {
    padding: 40px 20px;
    background: #f8f9ff;
}

.cswcert_container {
    max-width: 1150px;
    margin: auto;
}

.cswcert_heading {
    text-align: center;
    margin-bottom: 60px;
}

.cswcert_heading span {
    color: #7a35ff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cswcert_heading h2 {
    font-size: 42px;
    margin: 15px 0;
    color: #1d1d1d;
    font-weight: 700;
}

.cswcert_heading p {
    max-width: 650px;
    margin: auto;
    color: #666;
    line-height: 1.8;
}

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

.cswcert_card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
    transition: .4s;
    border: 1px solid #eee;
}

.cswcert_card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(122, 53, 255, .18);
}

.cswcert_imgbox {
    padding: 20px;
    background: #fafafa;
}

.cswcert_imgbox img {
    width: 100%;
    /* height:320px; */
    object-fit: contain;
    display: block;
    border-radius: 10px;
}

.cswcert_card h3 {
    margin: 20px 15px;
    font-size: 22px;
    color: #222;
}

.cswcert_btn {
    display: inline-block;
    margin-bottom: 25px;
    padding: 12px 30px;
    background: linear-gradient(90deg, #7a35ff, #d74fd5);
    color: #fff;
    text-decoration: none;
    border-radius: 40px;
    font-weight: 600;
    transition: .3s;
}

.cswcert_btn:hover {
    transform: translateY(-3px);
}

/* Tablet */

@media(max-width:991px) {

    .cswcert_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cswcert_heading h2 {
        font-size: 34px;
    }

    .cswcert_imgbox img {
        height: 280px;
    }

}

/* Mobile */

@media(max-width:767px) {

    .cswcert_section {
        padding: 70px 15px;
    }

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

    .cswcert_heading {
        margin-bottom: 40px;
    }

    .cswcert_heading h2 {
        font-size: 28px;
    }

    .cswcert_imgbox img {
        height: 260px;
    }

    .cswcert_card h3 {
        font-size: 20px;
    }

    .cswcert_btn {
        width: 85%;
        padding: 13px;
    }

}



/*==========================
CS WEB SOLUTION SERVICES
==========================*/

.cswsv2_services {

    padding: 40px 20px;
    background: white;

}

.cswsv2_heading {

    text-align: center;
    margin-bottom: 65px;

}

.cswsv2_heading span {

    display: inline-block;
    padding: 10px 22px;
    border-radius: 40px;
    background: #efe7ff;
    color: #6B3CC9;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
    margin-bottom: 18px;

}

.cswsv2_heading h2 {

    font-size: 46px;
    font-weight: 700;
    color: #2b2b2b;
    line-height: 1.2;

}

.cswsv2_grid {

    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;

}

.cswsv2_card {

    background: #fff;
    padding: 15px 22px;
    border-radius: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: .45s;
    box-shadow: 0 12px 30px rgb(0 0 0 / 10%);

}

.cswsv2_card::before {

    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 24px;
    background: linear-gradient(135deg, #6B3CC9, #A56BEA);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;

    transition: .45s;

}

.cswsv2_card:hover::before {

    opacity: 1;

}

.cswsv2_card:hover {

    transform: translateY(-14px);

}

.cswsv2_icon {

    width: 90px;
    height: 90px;
    margin: auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #6B3CC9, #A56BEA);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: #fff;
    margin-bottom: 28px;
    transition: .45s;
    box-shadow: 0 15px 35px rgba(107, 60, 201, .25);

}

.cswsv2_card:hover .cswsv2_icon {

    transform: rotateY(180deg) scale(1.08);

}

.cswsv2_card h3 {

    font-size: 15px;
    font-weight: 600;
    color: #2b2b2b;
    margin-bottom: 12px;

}

.cswsv2_card p {

    font-size: 14px;
    line-height: 26px;
    color: #777;

}

@media(max-width:1200px) {

    .cswsv2_grid {

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

    }

}

@media(max-width:768px) {

    .cswsv2_heading h2 {

        font-size: 32px;

    }

    .cswsv2_grid {

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

    }

    .cswsv2_card {

        padding: 30px 18px;

    }

    .cswsv2_icon {

        width: 75px;
        height: 75px;
        font-size: 30px;

    }

}

@media(max-width:480px) {

    .cswsv2_grid {

        grid-template-columns: 1fr;

    }

    .cswsv2_heading h2 {

        font-size: 26px;

    }

}






.ajc_contact_area {

    width: 100%;
    padding: 90px 20px;

    background: url("../img/contact.png") center center;
    /* background-size:cover; */
    background-repeat: no-repeat;

    position: relative;
    overflow: hidden;


}


.ajc_container {

    max-width: 1100px;
    margin: auto;

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

    gap: 60px;

}

.ajc_left {

    width: 50%;

}

.ajc_subtitle {

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #e94cc0;

    display: block;

    margin-bottom: 18px;

}

.ajc_left h2 {

    font-size: 55px;
    line-height: 1.1;
    font-weight: 800;

    color: #222;

    margin-bottom: 25px;

}

.ajc_left h2 span {

    display: block;

    background: linear-gradient(90deg, #e94cc0, #b13fff);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.ajc_left p {

    font-size: 17px;
    line-height: 30px;

    color: #666;

    max-width: 500px;

    margin-bottom: 35px;

}

.ajc_btn {

    display: inline-block;

    padding: 15px 38px;

    background: linear-gradient(90deg, #566bff, #a335ff);

    color: #fff;

    text-decoration: none;

    border-radius: 40px;

    font-weight: 600;

    transition: .35s;

}

.ajc_btn:hover {

    transform: translateY(-3px);

}


.ajc_right {

    width: 50%;

    display: flex;

    justify-content: flex-end;

}

.ajc_phone_shape {

    width: 480px;
    height: 340px;

    background: #fff;


}

.ajc_phone_shape img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);

}


/* Tablet */

@media(max-width:991px) {

    .ajc_container {

        flex-direction: column;

    }

    .ajc_left,
    .ajc_right {

        width: 100%;
        text-align: center;

    }

    .ajc_left p {

        margin: auto auto 35px;

    }

    .ajc_right {

        justify-content: center;

    }

    .ajc_phone_shape {

        width: 420px;
        height: 300px;

    }

}

/* Mobile */

@media(max-width:767px) {

    .ajc_contact_area {

        padding: 60px 20px;

    }

    .ajc_left h2 {

        font-size: 34px;

    }

    .ajc_left p {

        font-size: 15px;

        line-height: 28px;

    }

    .ajc_phone_shape {

        width: 100%;
        max-width: 340px;
        height: 240px;

    }

}





.cswabout_image_areaa {
    position: relative;
    width: 52%;
    min-height: 450px;

    background: url("../img/contact.png") center center/cover no-repeat;

    border-radius: 80px 0 0 80px;

    overflow: hidden;
    margin-top: 60px;
}

/* Purple overlay */

.cswabout_image_areaa::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background:linear-gradient(120deg,
    rgba(120,56,255,.08),
    rgba(255,78,148,.12)); */
}








.cscnt_contact_section {

    padding: 80px 0;
    background: #f8f9ff;

}


.cscnt_info_box {

    background: #fff;
    padding: 22px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .06);
    height: 100%;
}


.cscnt_icon {

    width: 45px;
    height: 45px;
    color: #7a2cff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;

}


.cscnt_info_box h5 {

    margin: 0;
    font-size: 16px;
    color: #111;

}


.cscnt_info_box p {

    margin: 5px 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;

}


.cscnt_info_box span {

    font-size: 12px;
    color: #777;

}




.cscnt_card {

    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);

}


.cscnt_card h3 {

    font-size: 22px;
    margin-bottom: 25px;
    color: #15154b;
    font-weight: 700;

}


.cscnt_card .form-control {

    border-radius: 8px;
    padding: 12px;
    border: 1px solid #e5e5e5;

}


.cscnt_card .form-control:focus {

    box-shadow: none;
    border-color: #7a2cff;

}



.cscnt_btn {

    border: 0;
    padding: 12px 28px;
    border-radius: 30px;
    background: linear-gradient(90deg, #702cff, #d437d8);
    color: #fff;
    font-weight: 600;

}


.cscnt_map iframe {

    width: 100%;
    height: 280px;
    border: 0;
    border-radius: 10px;

}



.cscnt_follow {

    margin-top: 20px;

}


.cscnt_follow h5 {

    font-size: 16px;

}


.cscnt_follow a {

    width: 35px;
    height: 35px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #f1e9ff;
    color: #7a2cff;
    border-radius: 50%;
    margin-right: 8px;
    text-decoration: none;

}




/* Tablet */

@media(max-width:991px) {

    .cscnt_contact_section {

        padding: 60px 0;

    }

    .cscnt_card {

        padding: 25px;

    }

}



/* Mobile */

@media(max-width:767px) {


    .cscnt_contact_section {

        padding: 45px 15px;

    }


    .cscnt_info_box {

        padding: 18px;

    }


    .cscnt_card h3 {

        font-size: 20px;

    }


    .cscnt_map iframe {

        height: 220px;

    }


    .cscnt_btn {

        width: 100%;

    }


}



/* Mobile View - 2 Boxes Per Row */
@media (max-width: 767px) {

    .cswsv2_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .cswsv2_card {
        width: 100%;
    }

    .cswsv2_card h3 {
        font-size: 16px;
    }

    .cswsv2_icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 15px;
    }

    .cswsv2_icon i {
        font-size: 24px;
    }

}



.csabout-hero-section {
    padding: 90px 0;
    background: linear-gradient(90deg, #ffffff 0%, #f0edfa 100%);
    overflow: hidden;
}

.csabout-container {
    max-width: 1150px;
    margin: auto;
    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}

.csabout-left {
    flex: 0 0 48%;
}

.csabout-tag {
    display: inline-block;
    background: #F4ECFF;
    color: #7E3AF2;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 9px 18px;
    border-radius: 30px;
    margin-bottom: 22px;
}

.csabout-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    color: #17132E;
    margin-bottom: 25px;
}

.csabout-title span {
    color: #8A2EFF;
}

.csabout-left p {
    font-size: 16px;
    line-height: 27px;
    color: #555;
    margin-bottom: 18px;
    text-align: justify;
}

.csabout-btn-group {
    display: flex;
    gap: 18px;
    margin-top: 35px;
    flex-wrap: wrap;
}

.csabout-btn-primary {
    background: linear-gradient(135deg, #6C2EFF, #A33BFF);
    color: #fff;
    padding: 16px 34px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.csabout-btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(108, 46, 255, .35);
}

.csabout-btn-outline {
    border: 2px solid #8A2EFF;
    color: #8A2EFF;
    padding: 16px 34px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.csabout-btn-outline:hover {
    background: #8A2EFF;
    color: #fff;
}

.csabout-right {
    flex: 0 0 50%;
}

.csabout-image-box {
    position: relative;
}

.csabout-image-box img {
    width: 100%;
    border-radius: 45px;
    display: block;
}

.csabout-card {
    position: absolute;
    width: 150px;
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    text-align: center;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.csabout-card span {
    display: block;
    margin-top: 10px;
}

.card1 {
    left: -45px;
    top: 70px;
}

.card2 {
    left: -20px;
    bottom: 90px;
}

.card3 {
    right: -30px;
    top: 90px;
}

.card4 {
    right: -30px;
    bottom: 70px;
}

/*=========================
Responsive
==========================*/

@media(max-width:1200px) {

    .csabout-title {
        font-size: 48px;
    }

}

@media(max-width:991px) {

    .csabout-container {
        flex-direction: column;
    }

    .csabout-left,
    .csabout-right {
        flex: 100%;
    }

    .csabout-title {
        font-size: 42px;
    }

    .csabout-image-box {
        margin-top: 40px;
    }

    .card1 {
        left: 10px;
        top: 20px;
    }

    .card2 {
        left: 20px;
        bottom: 20px;
    }

    .card3 {
        right: 20px;
        top: 20px;
    }

    .card4 {
        right: 20px;
        bottom: 20px;
    }

}

@media(max-width:767px) {

    .csabout-hero-section {
        padding: 70px 0;
    }

    .csabout-title {
        font-size: 25px;
    }

    .csabout-left p {
        font-size: 15px;
        line-height: 1.8;
    }

    .csabout-card {
        width: 110px;
        padding: 12px;
        font-size: 13px;
    }

    .csabout-btn-primary,
    .csabout-btn-outline {
        width: 100%;
        text-align: center;
    }

}







.csabout-mv-section {
    position: relative;
    overflow: hidden;
    padding: 40px 50px;
    /* border-radius:20px; */
    background: linear-gradient(135deg, #6c2cf6 0%, #31145d 100%);
    color: #fff;
}

/* Background City */
.csabout-mv-section:before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1600") center bottom/cover no-repeat;
    opacity: .12;
    z-index: 0;
}

.csabout-mv-section:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(86, 38, 180, .15), rgba(25, 8, 55, .55));
    z-index: 0;
}

.csabout-mv-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 50px;
    align-items: flex-start;
}

.csabout-divider {
    width: 1px;
    background: rgba(255, 255, 255, .20);
    min-height: 100%;
}

.csabout-mv-box {
    position: relative;
}

.csabout-mv-icon {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7B3EFF;
    font-size: 34px;
    margin-bottom: 25px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .18);
}

.csabout-small-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #e7c9ff;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.csabout-mv-box p {
    font-size: 17px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .92);
    margin-bottom: 22px;
}

/* Decorative Curves */

.csabout-mv-section::before {
    background:
        radial-gradient(circle at bottom left, rgba(255, 255, 255, .10), transparent 35%),
        url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1600") center bottom/cover no-repeat;
    opacity: .15;
}

/* Responsive */

@media(max-width:991px) {

    .csabout-mv-section {
        padding: 45px 30px;
    }

    .csabout-mv-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .csabout-divider {
        display: none;
    }

    .csabout-mv-icon {
        margin: auto auto 25px;
    }

    .csabout-mv-box {
        text-align: center;
    }

}

@media(max-width:576px) {

    .csabout-mv-section {
        padding: 35px 20px;
        border-radius: 12px;
    }

    .csabout-mv-icon {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }

    .csabout-small-title {
        font-size: 14px;
    }

    .csabout-mv-box p {
        font-size: 15px;
        line-height: 1.8;
    }

}



.csabout-heading-wrap {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 30px;
}

.csabout-mv-icon {
    width: 85px;
    height: 85px;
    min-width: 85px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7B3EFF;
    font-size: 34px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .18);
}

.csabout-heading-content {
    flex: 1;
}

.csabout-small-title {
    display: block;
    color: white;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.csabout-heading-content p {
    margin: 0;
    color: #fff;
    line-height: 1.8;
    font-size: 15px;
}

/* Mobile */
@media (max-width:768px) {

    .csabout-heading-wrap {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .csabout-mv-icon {
        width: 70px;
        height: 70px;
        min-width: 70px;
        font-size: 28px;
    }

}





.cscontacthero-section {
    padding: 80px 0;
    background: linear-gradient(90deg, #eee9f9 0%, #efe9f9 100%);
    overflow: hidden;
}

.cscontacthero-container {
    max-width: 1150px;
    margin: auto;
    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}

.cscontacthero-content {
    flex: 0 0 46%;
}

.cscontacthero-image {
    flex: 0 0 50%;
}

.cscontacthero-image img {
    width: 100%;
    display: block;
}

.cscontacthero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    font-size: 15px;
}

.cscontacthero-breadcrumb a {
    text-decoration: none;
    color: #6f2cff;
    font-weight: 600;
}

.cscontacthero-breadcrumb span {
    color: #888;
}

.cscontacthero-tag {
    display: inline-block;
    background: white;
    color: #7D3CFF;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 8px 18px;
    border-radius: 30px;
    margin-bottom: 25px;
}

.cscontacthero-content h1 {
    font-size: 47px;
    line-height: 1.15;
    font-weight: 800;
    color: #17152F;
    margin-bottom: 25px;
}

.cscontacthero-content h1 span {
    display: block;
    background: linear-gradient(90deg, #7b2ff7, #ff4d94);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cscontacthero-content p {
    font-size: 18px;
    line-height: 1.9;
    color: #555;
    max-width: 540px;
}

.cscontacthero-buttons {
    display: flex;
    gap: 18px;
    margin-top: 35px;
    flex-wrap: wrap;
}

.cscontacthero-btn-primary,
.cscontacthero-btn-outline {

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 17px 34px;
    border-radius: 50px;

    text-decoration: none;
    font-weight: 600;
    transition: .35s;
}

.cscontacthero-btn-primary {

    color: #fff;

    background: linear-gradient(135deg, #6E2BFF, #A63DFF);

    box-shadow: 0 15px 35px rgba(110, 43, 255, .30);

}

.cscontacthero-btn-primary:hover {

    transform: translateY(-4px);

}

.cscontacthero-btn-outline {

    border: 2px solid #7A2FFF;

    color: #7A2FFF;

    background: #fff;

}

.cscontacthero-btn-outline:hover {

    background: #7A2FFF;

    color: #fff;

}

@media(max-width:1200px) {

    .cscontacthero-content h1 {

        font-size: 48px;

    }

}

@media(max-width:991px) {

    .cscontacthero-container {

        flex-direction: column-reverse;

        text-align: center;

    }

    .cscontacthero-content,
    .cscontacthero-image {

        flex: 100%;

    }

    .cscontacthero-content p {

        margin: auto;

    }

    .cscontacthero-buttons {

        justify-content: center;

    }

    .cscontacthero-breadcrumb {

        justify-content: center;

    }

}

@media(max-width:767px) {

    .cscontacthero-section {

        padding: 60px 0;

    }

    .cscontacthero-content h1 {

        font-size: 36px;

    }

    .cscontacthero-content p {

        font-size: 16px;

        line-height: 1.8;

    }

    .cscontacthero-btn-primary,
    .cscontacthero-btn-outline {

        width: 100%;

        justify-content: center;

    }

}


.cscnt_phone_link {
    text-decoration: none;
    display: inline-block;
    color: inherit;
}

.cscnt_email_link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: inherit;
}

.cscnt_email_link:hover {
    color: #6C4DFF;
}


.cscnt_location_link {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    text-decoration: none;
    color: inherit;
}

.cscnt_location_link:hover {
    color: #6C4DFF;
}






/*===============================
DIGITAL HERO CONTENT
================================*/

.csdghero-content {
    max-width: 600px;
}

.csdghero-tag {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 30px;
    background: white;
    color: #7b3cff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 7px;
}

.csdghero-content h1 {
    font-size: 40px;
    line-height: 1.12;
    font-weight: 800;
    color: #15152f;
    margin-bottom: 25px;
}

.csdghero-content h1 span {
    color: #d64cff;
}

.csdghero-content p {
    font-size: 16px;
    line-height: 1.5;
    color: #5d5d72;
    margin-bottom: 15px;
}

.csdghero-feature-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 45px;
}

.csdghero-feature {
    display: flex;
    align-items: center;
    gap: 18px;
}

.csdghero-icon {
    width: 40px;
    height: 40px;
    background: #f7f2ff;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #9146ff;
    font-size: 22px;
    box-shadow: 0 10px 25px rgba(145, 70, 255, .15);
}

.csdghero-feature span {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d36;
}

.csdghero-btns {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.csdghero-btn1,
.csdghero-btn2 {
    padding: 18px 34px;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: .35s;
}

.csdghero-btn1 {
    background: linear-gradient(90deg, #7d35ff, #df4cff);
    color: #fff;
    box-shadow: 0 18px 40px rgba(147, 62, 255, .35);
}

.csdghero-btn1:hover {
    transform: translateY(-5px);
    color: #fff;
}

.csdghero-btn2 {
    border: 2px solid #9146ff;
    color: #9146ff;
    background: #fff;
}

.csdghero-btn2:hover {
    background: #9146ff;
    color: #fff;
}

@media(max-width:991px) {

    .csdghero-content {
        text-align: center;
        max-width: 100%;
    }

    .csdghero-content h1 {
        font-size: 44px;
    }

    .csdghero-content p {
        font-size: 18px;
    }

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

    .csdghero-feature {
        justify-content: center;
    }

    .csdghero-btns {
        justify-content: center;
    }

}

@media(max-width:576px) {

    .csdghero-tag {
        font-size: 12px;
        padding: 8px 18px;
    }

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

    .csdghero-content p {
        font-size: 16px;
    }

    .csdghero-feature span {
        font-size: 16px;
    }

    .csdghero-icon {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .csdghero-btn1,
    .csdghero-btn2 {
        width: 100%;
        justify-content: center;
        padding: 15px 20px;
        font-size: 16px;
    }

}


.csdmintro_section {
    padding: 90px 0;
    background: #fff;
    overflow: hidden;
}

.csdmintro_content {
    padding-right: 25px;
}

.csdmintro_tag {
    display: inline-block;
    background: #f4ebff;
    color: #7a2cff;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 30px;
    margin-bottom: 18px;
    letter-spacing: .5px;
}

.csdmintro_content h2 {
    font-size: 35px;
    font-weight: 800;
    color: #1f2348;
    line-height: 1.3;
    margin-bottom: 18px;
}

.csdmintro_line {
    width: 80px;
    height: 4px;
    background: #8b3dff;
    border-radius: 50px;
    margin-bottom: 25px;
}

.csdmintro_content p {
    color: #555;
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 18px;
    text-align: justify;
}

.csdmintro_content strong {
    color: #2c2475;
    font-weight: 700;
}

.csdmintro_video {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    /* box-shadow: 0 18px 45px rgba(0, 0, 0, .12); */
}

.csdmintro_video img {
    width: 100%;
    display: block;
    border-radius: 20px;
    transition: .4s;
}

.csdmintro_video:hover img {
    transform: scale(1.04);
}

.csdmintro_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #fff;
    color: #7a2cff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    transition: .35s;
}

.csdmintro_play:hover {
    background: #7a2cff;
    color: #fff;
    text-decoration: none;
    transform: translate(-50%, -50%) scale(1.08);
}

@media(max-width:991px) {

    .csdmintro_section {
        padding: 60px 0;
    }

    .csdmintro_content {
        padding-right: 0;
    }

    .csdmintro_content h2 {
        font-size: 30px;
        text-align: center;
    }

    .csdmintro_tag {
        display: table;
        margin: 0 auto 18px;
    }

    .csdmintro_line {
        margin: 0 auto 25px;
    }

    .csdmintro_content p {
        font-size: 16px;
        text-align: justify;
    }

    .csdmintro_video {
        margin-top: 15px;
    }

    .csdmintro_play {
        width: 75px;
        height: 75px;
        font-size: 28px;
    }

}

@media(max-width:576px) {

    .csdmintro_content h2 {
        font-size: 26px;
    }

    .csdmintro_content p {
        font-size: 15px;
        line-height: 1.8;
    }

    .csdmintro_play {
        width: 65px;
        height: 65px;
        font-size: 24px;
    }

}


.cswhyv2_section {
    padding: 90px 20px;
    background: #f7f8fc;
    overflow: hidden;
}

.cswhyv2_container {
    max-width: 1150px;
    margin: auto;
    display: grid;
    grid-template-columns: 430px 1fr;
    gap: 70px;
    align-items: center;
}

.cswhyv2_left {
    position: sticky;
    top: 40px;
}

.cswhyv2_logoBox {
    width: 210px;
    height: 210px;
    margin-bottom: 35px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6f3df4, #e84393);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 25px 70px rgba(111, 61, 244, .30);
    position: relative;
}

.cswhyv2_logoBox::after {
    content: "";
    position: absolute;
    inset: 15px;
    background: #fff;
    border-radius: 50%;
}

.cswhyv2_logoBox img {
    width: 230px;
    position: relative;
    z-index: 2;
}

.cswhyv2_tag {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 40px;
    background: rgba(111, 61, 244, .08);
    color: #7d36ff;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.cswhyv2_left h2 {
    font-size: 46px;
    line-height: 1.25;
    font-weight: 800;
    color: #222;
}

.cswhyv2_left h2 span {
    background: linear-gradient(90deg, #7d36ff, #eb4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cswhyv2_right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.cswhyv2_card {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(15px);
    padding: 35px;
    /* border-radius:25px; */
    position: relative;
    transition: .35s;
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .06);
}

.cswhyv2_card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #7d36ff, #eb4899);
}

.cswhyv2_card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 60px rgba(111, 61, 244, .20);
}

.cswhyv2_icon {
    width: 75px;
    height: 75px;
    border-radius: 22px;
    background: linear-gradient(135deg, #7d36ff, #eb4899);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    margin-bottom: 25px;
}

.cswhyv2_card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #222;
}

.cswhyv2_card p {
    font-size: 16px;
    line-height: 1.9;
    color: #666;
}

@media(max-width:991px) {

    .cswhyv2_container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .cswhyv2_left {
        position: relative;
        top: auto;
        text-align: center;
    }

    .cswhyv2_logoBox {
        margin: auto auto 35px;
    }

    .cswhyv2_left h2 {
        font-size: 38px;
    }

}

@media(max-width:768px) {

    .cswhyv2_section {
        padding: 70px 15px;
    }

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

    .cswhyv2_left h2 {
        font-size: 30px;
    }

    .cswhyv2_logoBox {
        width: 170px;
        height: 170px;
    }

    .cswhyv2_logoBox img {
        width: 120px;
    }

    .cswhyv2_card {
        padding: 28px;
    }

    .cswhyv2_icon {
        width: 65px;
        height: 65px;
        font-size: 26px;
    }

}




.csdmsrv_section {
    padding: 50px 20px;
    background: #f8f9ff;
}

.csdmsrv_container {
    max-width: 1150px;
    margin: auto;
}

.csdmsrv_heading {
    text-align: center;
    margin-bottom: 60px;
}

.csdmsrv_heading span {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 40px;
    background: #f2e8ff;
    color: #8a2be2;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.csdmsrv_heading h2 {
    font-size: 42px;
    font-weight: 800;
    color: #222;
}

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

.csdmsrv_card {
    background: #fff;
    border-radius: 22px;
    padding: 35px;
    border: 1px solid #ececec;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .07);
    transition: .35s;
    position: relative;
    overflow: hidden;
}

.csdmsrv_card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #7d36ff, #e84ab4);
}

.csdmsrv_card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(125, 54, 255, .18);
}

.csdmsrv_icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7d36ff, #e84ab4);
    color: #fff;
    font-size: 28px;
    margin-bottom: 25px;
}

.csdmsrv_card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin-bottom: 20px;
    line-height: 1.4;
}

.csdmsrv_card ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.csdmsrv_card ul li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 14px;
    color: #555;
    line-height: 1.6;
    font-size: 15px;
}

.csdmsrv_card ul li i {
    color: #8a2be2;
    margin-top: 4px;
    font-size: 14px;
}

@media(max-width:991px) {

    .csdmsrv_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .csdmsrv_heading h2 {
        font-size: 34px;
    }

}

@media(max-width:768px) {

    .csdmsrv_section {
        padding: 70px 15px;
    }

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

    .csdmsrv_heading h2 {
        font-size: 28px;
    }

    .csdmsrv_card {
        padding: 28px;
    }

    .csdmsrv_icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .csdmsrv_card h3 {
        font-size: 20px;
    }

}



/*==============================
Website Information Section
Unique Class : cswebinfo_
===============================*/

.cswebinfo_section {
    padding: 25px 0;
    /* background: #f8fbff; */
}

.cswebinfo_heading {
    text-align: center;
    margin-bottom: 70px;
}

.cswebinfo_heading span {
    display: inline-block;
    background: #7a2cff;
    color: #fff;
    padding: 8px 22px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.cswebinfo_heading h2 {
    font-size: 42px;
    font-weight: 800;
    color: #0d1b3e;
    margin: 0;
}

.cswebinfo_heading strong {
    color: #7a2cff;
}

.cswebinfo_row {
    margin-bottom: 80px;
    align-items: center;
}

.cswebinfo_imgbox {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
}

.cswebinfo_imgbox img {
    width: 100%;
    border-radius: 22px;
    transition: .5s;
    display: block;
}

.cswebinfo_imgbox:hover img {
    transform: scale(1.05);
}

.cswebinfo_content {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
}

.cswebinfo_content h3 {
    font-size: 30px;
    color: #0d1b3e;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
}

.cswebinfo_line {
    width: 70px;
    height: 4px;
    background: #7a2cff;
    border-radius: 30px;
    margin-bottom: 25px;
}

.cswebinfo_content p {
    font-size: 16px;
    line-height: 1.9;
    color: #555;
    text-align: justify;
    margin-bottom: 0;
}

/* Contact */

.cswebinfo_contactbox {
    background: linear-gradient(135deg, #7a2cff, #001d62);
    padding: 35px;
    border-radius: 20px;
    margin: 20px 0 80px;
    color: #fff;
    box-shadow: 0 20px 45px rgba(13, 110, 253, .25);
}

.cswebinfo_contactitem {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.cswebinfo_contactitem i {
    width: 55px;
    height: 55px;
    background: #fff;
    color: #7a2cff;
    border-radius: 50%;
    text-align: center;
    line-height: 55px;
    font-size: 20px;
}

.cswebinfo_contactitem span {
    font-size: 20px;
    font-weight: 600;
}

/* Highlight */

.cswebinfo_highlight {
    background: #ffffff;
    padding: 45px;
    border-left: 6px solid #7a2cff;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
    margin-bottom: 50px;
}

.cswebinfo_highlight h3 {
    color: #0d1b3e;
    font-size: 25px;
    margin-bottom: 18px;
    font-weight: 700;
}

.cswebinfo_highlight p {
    color: #555;
    font-size: 17px;
    line-height: 1.9;
    margin: 0;
    text-align: justify;
}

/* Cards */

.cswebinfo_card {
    background: #fff;
    border-radius: 20px;
    padding: 35px;
    display: flex;
    gap: 22px;
    height: 100%;
    transition: .4s;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .07);
}

.cswebinfo_card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
}

.cswebinfo_icon {
    min-width: 70px;
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: linear-gradient(135deg, #7a2cff, #003d99);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.cswebinfo_card h4 {
    color: #0d1b3e;
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 15px;
}

.cswebinfo_card p {
    color: #555;
    line-height: 1.9;
    margin: 0;
    text-align: justify;
}

/* Animation */

.cswebinfo_imgbox,
.cswebinfo_content,
.cswebinfo_card,
.cswebinfo_contactbox,
.cswebinfo_highlight {
    transition: .4s ease;
}

.cswebinfo_imgbox:hover,
.cswebinfo_content:hover,
.cswebinfo_contactbox:hover,
.cswebinfo_highlight:hover {
    transform: translateY(-5px);
}

/* Tablet */

@media(max-width:991px) {

    .cswebinfo_section {
        padding: 70px 0;
    }

    .cswebinfo_heading h2 {
        font-size: 34px;
    }

    .cswebinfo_content {
        padding: 30px;
    }

    .cswebinfo_content h3 {
        font-size: 26px;
    }

    .cswebinfo_contactitem {
        justify-content: flex-start;
        margin: 15px 0;
    }

    .cswebinfo_contactitem span {
        font-size: 17px;
    }

    .cswebinfo_highlight {
        padding: 30px;
    }

    .cswebinfo_highlight h3 {
        font-size: 28px;
    }

    .cswebinfo_card {
        padding: 28px;
    }

}

/* Mobile */

@media(max-width:767px) {

    .cswebinfo_section {
        padding: 60px 0;
    }

    .cswebinfo_heading {
        margin-bottom: 45px;
    }

    .cswebinfo_heading h2 {
        font-size: 28px;
        line-height: 1.4;
    }

    .cswebinfo_heading span {
        font-size: 12px;
    }

    .cswebinfo_row {
        margin-bottom: 55px;
    }

    .cswebinfo_content {
        padding: 25px;
    }

    .cswebinfo_content h3 {
        font-size: 22px;
    }

    .cswebinfo_content p {
        font-size: 15px;
    }

    .cswebinfo_contactbox {
        padding: 25px;
    }

    .cswebinfo_contactitem {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .cswebinfo_contactitem span {
        font-size: 16px;
        word-break: break-word;
    }

    .cswebinfo_highlight {
        padding: 25px;
    }

    .cswebinfo_highlight h3 {
        font-size: 24px;
    }

    .cswebinfo_highlight p {
        font-size: 15px;
    }

    .cswebinfo_card {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }

    .cswebinfo_icon {
        margin: auto;
    }

    .cswebinfo_card h4 {
        font-size: 20px;
    }

    .cswebinfo_card p {
        font-size: 15px;
        text-align: justify;
    }

}










.wdspro-section {

    padding: 70px 20px;

    background:
        linear-gradient(135deg, #f7f9fc 0%, #eef5ff 100%);

    overflow: hidden;

 
}

.wdspro-container {

    max-width: 1150px;

    margin: auto;

    display: grid;

    grid-template-columns: 1.2fr .9fr;

    gap: 70px;

    align-items: center;

}

.wdspro-tag {

    display: inline-block;

    padding: 10px 22px;

    background: #eef4ff;

    color: #2563eb;

    font-weight: 700;

    border-radius: 40px;

    font-size: 14px;

    letter-spacing: .5px;

    margin-bottom: 25px;

}

.wdspro-content h2 {

    font-size: 46px;

    font-weight: 700;

    line-height: 1.2;

    color: #0f172a;

    margin-bottom: 30px;

}

.wdspro-content p {

    font-size: 17px;

    line-height: 1.9;

    color: #5b6475;

    margin-bottom: 22px;
    text-align: justify;

}


/* Right Side */

.wdspro-tools {

    position: relative;

    padding: 25px;

}

.wdspro-tools:before {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    background: linear-gradient(135deg, #2563eb, #4f46e5);

    border-radius: 50%;

    top: -80px;

    right: -100px;

    opacity: .08;

}

.wdspro-tools:after {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    background: #06b6d4;

    border-radius: 50%;

    bottom: -60px;

    left: -70px;

    opacity: .08;

}

.wdspro-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 18px;

}

.wdspro-item {

    background: rgba(255, 255, 255, .85);

    backdrop-filter: blur(15px);

    padding: 18px 20px;

    border-radius: 18px;

    font-weight: 600;

    font-size: 15px;

    color: #1f2937;

    border: 1px solid rgba(255, 255, 255, .8);

    box-shadow:

        0 15px 35px rgba(0, 0, 0, .07);

    transition: .35s;

}

.wdspro-item:nth-child(odd) {

    transform: translateY(-12px);

}

.wdspro-item:hover {

    transform: translateY(-8px) scale(1.05);

    background: linear-gradient(135deg, #2563eb, #4f46e5);

    color: #fff;

    box-shadow:

        0 25px 40px rgba(37, 99, 235, .35);

}


/* Responsive */

@media(max-width:991px) {

    .wdspro-container {

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .wdspro-content h2 {

        font-size: 36px;

    }

}

@media(max-width:767px) {

    .wdspro-section {

        padding: 70px 15px;

    }

    .wdspro-content h2 {

        font-size: 28px;

    }

    .wdspro-content p {

        font-size: 16px;

    }

    .wdspro-grid {

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

    }

    .wdspro-item {

        padding: 16px;

        font-size: 14px;

    }

}

@media(max-width:480px) {

    .wdspro-grid {

        grid-template-columns: 1fr;

    }

}



.cswswhychoose_section{
    padding:80px 0;
    background:#f8f9fc;
    overflow:hidden;
}

.cswswhychoose_box{
    display:flex;
    align-items:center;
    gap:60px;
}

/* .cswswhychoose_left{
    flex:0 0 35%;
} */

.cswswhychoose_logo{
    max-width:220px;
    margin-bottom:25px;
}

.cswswhychoose_left h2{
    font-size:40px;
    font-weight:700;
    margin-bottom:20px;
    color:#222;
    line-height:1.3;
}

.cswswhychoose_left h2 span{
    background:linear-gradient(90deg,#5d2de6,#d3138b);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.cswswhychoose_left p{
    color:#666;
    font-size:17px;
    line-height:1.9;
}

.cswswhychoose_right{
    flex:0 0 65%;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.cswswhychoose_card{
    background:#fff;
    border-radius:18px;
    padding:28px;
    display:flex;
    gap:20px;
    align-items:flex-start;
    box-shadow:0 10px 35px rgba(0,0,0,.07);
    transition:.35s;
    border:1px solid #eee;
}

.cswswhychoose_card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(93,45,230,.18);
}

.cswswhychoose_icon{
    width:70px;
    height:70px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#fff;
    flex-shrink:0;
    background:linear-gradient(135deg,#5d2de6,#d3138b);
}

.cswswhychoose_card h4{
    font-size:22px;
    font-weight:700;
    color:#222;
    margin-bottom:12px;
}

.cswswhychoose_card p{
    color:#666;
    line-height:1.8;
    margin:0;
    font-size:15px;
}

/* Responsive */

@media(max-width:991px){

.cswswhychoose_box{
flex-direction:column;
}

.cswswhychoose_left,
.cswswhychoose_right{
flex:100%;
width:100%;
}

.cswswhychoose_left{
text-align:center;
}

.cswswhychoose_logo{
margin:auto auto 25px;
}

}

@media(max-width:768px){

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

.cswswhychoose_left h2{
font-size:32px;
}

.cswswhychoose_card{
padding:22px;
}

.cswswhychoose_icon{
width:60px;
height:60px;
font-size:24px;
}

}


.cswsseo_services_sec{
    padding:30px 0;
    background:#f8f9fd;
}

.cswsseo_heading{
    text-align:center;
    margin-bottom:55px;
}

.cswsseo_heading h2{
    font-size:40px;
    font-weight:700;
    color:#222;
}

.cswsseo_heading span{
    background:linear-gradient(90deg,#5b2be0,#d31689);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

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

.cswsseo_card{
    background:#fff;
    border-radius:20px;
    padding:35px 30px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s;
    border:1px solid #ededed;
}

.cswsseo_card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(91,43,224,.18);
}

.cswsseo_icon{
    width:75px;
    height:75px;
    margin:auto;
    margin-bottom:22px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    color:#fff;
    background:linear-gradient(135deg,#5b2be0,#d31689);
}

.cswsseo_card h3{
    font-size:24px;
    margin-bottom:20px;
    color:#222;
    font-weight:700;
}

.cswsseo_card ul{
    padding:0;
    margin:0;
    list-style:none;
    text-align:left;
}

.cswsseo_card ul li{
    position:relative;
    padding-left:28px;
    margin-bottom:14px;
    color:#555;
    line-height:1.7;
    font-size:15px;
}

.cswsseo_card ul li:before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:#d31689;
    font-weight:bold;
}

@media(max-width:991px){

.cswsseo_grid{
grid-template-columns:repeat(2,1fr);
}

.cswsseo_heading h2{
font-size:34px;
}

}

@media(max-width:767px){

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

.cswsseo_heading h2{
font-size:28px;
}

.cswsseo_card{
padding:28px 22px;
}

.cswsseo_icon{
width:65px;
height:65px;
font-size:26px;
}

}




.cssoftsrv_section{
    padding:80px 15px;
    background:#f7f8fd;
}

.cssoftsrv_container{
    max-width:1180px;
    margin:auto;
}

.cssoftsrv_heading{
    text-align:center;
    margin-bottom:50px;
}

.cssoftsrv_heading h2{
    font-size:38px;
    color:#222;
    margin-bottom:12px;
    font-weight:700;
}

.cssoftsrv_heading h2 span{
    color:#7B3FE4;
}

.cssoftsrv_heading p{
    max-width:700px;
    margin:auto;
    color:#666;
    font-size:17px;
    line-height:28px;
}

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

.cssoftsrv_card{
    background:#fff;
    border-radius:18px;
    padding:38px 20px;
    text-align:center;
    text-decoration:none;
    transition:.35s;
    box-shadow:0 8px 30px rgba(25,25,25,.08);
    border:1px solid rgba(123,63,228,.08);
    position:relative;
    overflow:hidden;
}

.cssoftsrv_card::before{
    content:"";
    position:absolute;
    width:100%;
    height:4px;
    left:0;
    top:0;
    background:linear-gradient(90deg,#7B3FE4,#A56DFF);
    transform:scaleX(0);
    transition:.35s;
}

.cssoftsrv_icon{
    width:78px;
    height:78px;
    margin:auto auto 24px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#7B3FE4,#A56DFF);
    color:#fff;
    font-size:34px;
    transition:.35s;
    box-shadow:0 15px 30px rgba(123,63,228,.28);
}

.cssoftsrv_card h3{
    color:#222;
    font-size:20px;
    font-weight:600;
    line-height:1.4;
    margin:0;
    transition:.35s;
}

.cssoftsrv_card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(123,63,228,.22);
}

.cssoftsrv_card:hover::before{
    transform:scaleX(1);
}

.cssoftsrv_card:hover .cssoftsrv_icon{
    transform:rotate(8deg) scale(1.08);
}

.cssoftsrv_card:hover h3{
    color:#7B3FE4;
}

@media(max-width:991px){

.cssoftsrv_grid{
grid-template-columns:repeat(2,1fr);
gap:22px;
}

.cssoftsrv_heading h2{
font-size:32px;
}

.cssoftsrv_card{
padding:30px 18px;
}

.cssoftsrv_icon{
width:70px;
height:70px;
font-size:30px;
}

.cssoftsrv_card h3{
font-size:20px;
}

}

@media(max-width:576px){

.cssoftsrv_section{
padding:60px 15px;
}

.cssoftsrv_grid{
grid-template-columns:1fr;
gap:18px;
}

.cssoftsrv_heading h2{
font-size:28px;
}

.cssoftsrv_heading p{
font-size:15px;
line-height:26px;
}

.cssoftsrv_card{
padding:28px 16px;
}

.cssoftsrv_icon{
width:64px;
height:64px;
font-size:26px;
margin-bottom:18px;
}

.cssoftsrv_card h3{
font-size:18px;
}

}






.cswtrain_section{
    padding:80px 15px;
    background:#f7f8fc;
}

.cswtrain_container{
    max-width:1180px;
    margin:auto;
}

.cswtrain_heading{
    text-align:center;
    margin-bottom:45px;
}

.cswtrain_heading h2{
    font-size:38px;
    color:#222;
    margin-bottom:10px;
    font-weight:700;
}

.cswtrain_heading span{
    color:#6d3df5;
}

.cswtrain_heading p{
    max-width:700px;
    margin:auto;
    color:#666;
    line-height:28px;
    font-size:17px;
}

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

.cswtrain_card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    transition:.35s;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    border:1px solid #ececec;
}

.cswtrain_card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 45px rgba(109,61,245,.18);
}

.cswtrain_imgbox{
    position:relative;
    overflow:hidden;
}

.cswtrain_imgbox img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:.5s;
}

.cswtrain_card:hover img{
    transform:scale(1.08);
}

.cswtrain_badge{
    position:absolute;
    top:15px;
    left:15px;
    background:linear-gradient(135deg,#6d3df5,#9b6dff);
    color:#fff;
    padding:7px 15px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.cswtrain_content{
    padding:24px;
    text-align:center;
}

.cswtrain_content h3{
    font-size:18px;
    color:#222;
    margin-bottom:12px;
}

.cswtrain_content p{
    color:#666;
    line-height:26px;
    font-size:15px;
    min-height:78px;
}

.cswtrain_btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
    padding:13px 28px;
    border-radius:40px;
    background:linear-gradient(135deg,#6d3df5,#9b6dff);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.cswtrain_btn:hover{
    background:linear-gradient(135deg,#4f20d6,#6d3df5);
    color:#fff;
}

.cswtrain_btn i{
    transition:.35s;
}

.cswtrain_btn:hover i{
    transform:translateX(5px);
}

/* Tablet */

@media(max-width:991px){

.cswtrain_grid{
grid-template-columns:repeat(2,1fr);
}

.cswtrain_heading h2{
font-size:32px;
}

}

/* Mobile */

@media(max-width:576px){

.cswtrain_section{
padding:60px 15px;
}

.cswtrain_grid{
grid-template-columns:1fr;
gap:22px;
}

.cswtrain_heading h2{
font-size:28px;
}

.cswtrain_heading p{
font-size:15px;
}

.cswtrain_imgbox img{
height:210px;
}

.cswtrain_content h3{
font-size:22px;
}

}



.csw-logo-wrap{
    max-width:1200px;
    margin:60px auto;
    padding:0 20px;
     color:#2D2D2D;
}

.csw-logo-title{
    text-align:center;
    font-size:42px;
    font-weight:700;
    margin-bottom:15px;
    color:#2D2D2D;
}

.csw-logo-subtitle{
    text-align:center;
    max-width:850px;
    margin:auto;
    line-height:1.8;
    color:#666;
    font-size:17px;
    margin-bottom:50px;
}

.csw-logo-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.csw-logo-box{
    background:#fff;
    border-radius:18px;
    padding:30px;
    box-shadow:0 12px 35px rgba(0,0,0,.06);
    border-top:4px solid #7B4DCC;
    transition:.35s;
}

.csw-logo-box:nth-child(even){
    border-top:4px solid #D85AA3;
}

.csw-logo-box:hover{
    transform:translateY(-6px);
}

.csw-logo-number{
    width:55px;
    height:55px;
    border-radius:50%;
    background:linear-gradient(135deg,#7B4DCC,#D85AA3);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:bold;
    margin-bottom:20px;
}

.csw-logo-box h3{
    margin:0 0 15px;
    font-size:24px;
    color:#2D2D2D;
}

.csw-logo-box p{
    margin:0;
    line-height:1.9;
    color:#555;
    font-size:16px;
}

.csw-logo-process{
    margin-top:70px;
    background:linear-gradient(135deg,#7B4DCC,#D85AA3);
    border-radius:20px;
    padding:50px;
    color:#fff;
}

.csw-logo-process h2{
    font-size:36px;
    margin-bottom:20px;
}

.csw-logo-process p{
    line-height:1.9;
    font-size:17px;
    margin-bottom:18px;
}

.csw-logo-location{
    margin-top:60px;
    background:#fff;
    padding:45px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.csw-logo-location h2{
    color:#2D2D2D;
    margin-bottom:20px;
    font-size:34px;
}

.csw-logo-location p{
    line-height:1.9;
    color:#555;
    margin-bottom:18px;
}

.csw-logo-quote{
    margin-top:60px;
    background:#2D2D2D;
    color:#fff;
    border-radius:20px;
    text-align:center;
    padding:60px 30px;
}

.csw-logo-quote h2{
    font-size:38px;
    margin-bottom:20px;
}

.csw-logo-quote p{
    max-width:900px;
    margin:auto;
    line-height:1.9;
    color:#ddd;
    margin-bottom:35px;
}

.csw-logo-btn{
    display:inline-block;
    background:linear-gradient(135deg,#7B4DCC,#D85AA3);
    color:#fff;
    text-decoration:none;
    padding:16px 38px;
    border-radius:50px;
    font-weight:600;
    font-size:17px;
}

@media(max-width:768px){

.csw-logo-title{
font-size:30px;
}

.csw-logo-grid{
grid-template-columns:1fr;
}

.csw-logo-process{
padding:30px;
}

.csw-logo-location{
padding:30px;
}

.csw-logo-quote{
padding:40px 20px;
}

.csw-logo-process h2,
.csw-logo-location h2,
.csw-logo-quote h2{
font-size:28px;
}

}




.cswdpro_section{
    padding:90px 20px;
    background:#f5f8fc;
 }

.cswdpro_container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:45px;
    align-items:center;
}

.cswdpro_badge{
    display:inline-block;
    background:linear-gradient(90deg, #7d35ff, #df4cff);;
    color:#fff;
    padding:10px 22px;
    border-radius:40px;
    font-size:14px;
    font-weight:600;
    margin-bottom:18px;
}

.cswdpro_content h2{
    font-size:42px;
    line-height:1.25;
    color:#1c1c1c;
    margin-bottom:25px;
    font-weight:700;
}

.cswdpro_content p{
    font-size:17px;
    color:#555;
    line-height:1.9;
    margin-bottom:18px;
}

.cswdpro_content strong{
    color:#0d6efd;
}

.cswdpro_card{
    background:#fff;
    border-radius:20px;
    padding:35px;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
    position:relative;
}

.cswdpro_card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:6px;
    height:100%;
    background:linear-gradient(90deg, #7d35ff, #df4cff);;
    border-radius:20px 0 0 20px;
}

.cswdpro_card h3{
    margin-bottom:25px;
    font-size:28px;
    color:#222;
}

.cswdpro_item{
    display:flex;
    align-items:center;
    gap:15px;
    padding:15px 0;
    border-bottom:1px solid #ececec;
}

.cswdpro_item:last-child{
    border-bottom:none;
}

.cswdpro_item i{
    width:45px;
    height:45px;
    background:linear-gradient(90deg, #7d35ff, #df4cff);;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    font-size:18px;
}

.cswdpro_item span{
    font-size:16px;
    color:#444;
    font-weight:500;
}

@media(max-width:991px){

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

.cswdpro_content h2{
font-size:34px;
}

.cswdpro_card{
margin-top:10px;
}

}

@media(max-width:768px){

.cswdpro_section{
padding:60px 15px;
}

.cswdpro_content h2{
font-size:28px;
}

.cswdpro_content p{
font-size:15px;
}

.cswdpro_card{
padding:25px;
}

.cswdpro_card h3{
font-size:24px;
}

}
 

/* ==========================================
   WEBSITE DESIGNING PACKAGES
   PART 2 : CSS
   Theme : CS Web Solution
========================================== */

.csweb_pkg_section{
    padding:50px 20px;
    background:linear-gradient(180deg,#fbf8ff 0%,#f5efff 100%);
 }

.csweb_pkg_container{
    max-width:1200px;
    margin:auto;
}

.csweb_pkg_title{
    text-align:center;
    margin-bottom:60px;
}

.csweb_pkg_subtitle{
    display:inline-block;
    padding:10px 22px;
    background:linear-gradient(135deg,#6A0DAD,#E91E63);
    color:#fff;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
}

.csweb_pkg_title h2{
    font-size:42px;
    color:#222;
    margin:20px 0 12px;
    font-weight:700;
}

.csweb_pkg_title p{
    font-size:17px;
    color:#666;
}

.csweb_pkg_grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    align-items:stretch;
}

.csweb_pkg_card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    position:relative;
    box-shadow:0 15px 40px rgba(106,13,173,.10);
    transition:.35s ease;
    border:1px solid rgba(106,13,173,.08);
}

.csweb_pkg_card:hover{
    transform:translateY(-12px);
    box-shadow:0 30px 60px rgba(106,13,173,.18);
}

.csweb_pkg_featured{
    transform:scale(1.01);
    /* border:2px solid #E91E63; */
}

/* .csweb_pkg_featured:hover{
    transform:scale(1.05) translateY(-12px);
} */

.csweb_pkg_ribbon{
    position:absolute;
    top:18px;
    right:-38px;
    width:180px;
    text-align:center;
    background:linear-gradient(135deg,#6A0DAD,#E91E63);
    color:#fff;
    padding:10px 0;
    font-size:12px;
    font-weight:700;
    transform:rotate(45deg);
    letter-spacing:1px;
    box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.csweb_pkg_top{
    background:linear-gradient(135deg,#6A0DAD,#E91E63);
    color:#fff;
    padding:10px 30px;
    text-align:center;
}

.csweb_pkg_top h3{
    font-size:19px;
    font-weight:700;
    line-height:1.4;
    margin-bottom:12px;
}

.csweb_pkg_top p{
    font-size:15px;
    opacity:.95;
    margin-bottom:20px;
}

.csweb_pkg_price{
    font-size:30px;
    font-weight:800;
}

.csweb_pkg_body{
    padding:35px 30px;
}

.csweb_pkg_body ul{
    margin:0;
    padding:0;
    list-style:none;
}

.csweb_pkg_body li{
    position:relative;
    padding:13px 0 13px 34px;
    font-size:15px;
    color:#555;
    border-bottom:1px solid #f1f1f1;
    line-height:1.6;
}

.csweb_pkg_body li:last-child{
    border:none;
}

.csweb_pkg_body li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:13px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:linear-gradient(135deg,#6A0DAD,#E91E63);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
}

.csweb_pkg_footer{
    padding:0 30px 35px;
}

.csweb_pkg_footer a{
    display:block;
    text-align:center;
    text-decoration:none;
    background:linear-gradient(135deg,#6A0DAD,#E91E63);
    color:#fff;
    padding:16px;
    border-radius:14px;
    font-size:16px;
    font-weight:600;
    transition:.35s;
    box-shadow:0 12px 25px rgba(106,13,173,.25);
}

.csweb_pkg_footer a:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 35px rgba(106,13,173,.35);
}

@media(max-width:1100px){

.csweb_pkg_grid{
grid-template-columns:repeat(2,1fr);
}

.csweb_pkg_featured{
transform:none;
}

.csweb_pkg_featured:hover{
transform:translateY(-10px);
}

}

@media(max-width:768px){

.csweb_pkg_section{
padding:60px 15px;
}

.csweb_pkg_title{
margin-bottom:40px;
}

.csweb_pkg_title h2{
font-size:30px;
}

.csweb_pkg_title p{
font-size:15px;
}

.csweb_pkg_grid{
grid-template-columns:1fr;
gap:25px;
}

.csweb_pkg_card{
border-radius:20px;
}

.csweb_pkg_top{
padding:30px 22px;
}

.csweb_pkg_top h3{
font-size:23px;
}

.csweb_pkg_price{
font-size:40px;
}

.csweb_pkg_body{
padding:25px 22px;
}

.csweb_pkg_footer{
padding:0 22px 25px;
}

.csweb_pkg_footer a{
padding:14px;
font-size:15px;
}

.csweb_pkg_ribbon{
right:-45px;
width:170px;
font-size:11px;
}

}

@media(max-width:480px){

.csweb_pkg_title h2{
font-size:26px;
}

.csweb_pkg_top h3{
font-size:21px;
}

.csweb_pkg_price{
font-size:36px;
}

.csweb_pkg_body li{
font-size:14px;
padding-left:30px;
}

}


/*=========================================
  PREMIUM WEBSITE TRAINING SECTION
  CS WEB SOLUTION
==========================================*/

.csmaster_section{
    padding:50px 20px;
    background:linear-gradient(180deg,#faf7ff 0%,#f4efff 100%);
 }

.csmaster_container{
    max-width:1200px;
    margin:auto;
}

.csmaster_heading{
    text-align:center;
    margin-bottom:60px;
}

.csmaster_heading span{
    display:inline-block;
    padding:10px 22px;
    background:linear-gradient(135deg,#6A0DAD,#E91E63);
    color:#fff;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:20px;
}

.csmaster_heading h2{
    font-size:42px;
    font-weight:700;
    color:#222;
    line-height:1.3;
    margin:0;
}

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

.csmaster_grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
}

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

.csmaster_card{
    display:flex;
    align-items:flex-start;
    gap:28px;
    background:#fff;
    padding:35px;
    border-radius:22px;
    position:relative;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(106,13,173,.10);
    transition:.35s ease;
    border:1px solid rgba(106,13,173,.08);
}

.csmaster_card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:6px;
    height:100%;
    background:linear-gradient(#6A0DAD,#E91E63);
}

.csmaster_card:hover{
    transform:translateY(-10px);
    box-shadow:0 28px 60px rgba(106,13,173,.18);
}

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

.csmaster_icon{
    width:85px;
    height:85px;
    min-width:85px;
    border-radius:22px;
    background:linear-gradient(135deg,#6A0DAD,#E91E63);
    color:#fff;
    font-size:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 15px 35px rgba(233,30,99,.30);
}

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

.csmaster_content{
    width:100%;
}

.csmaster_content h3{
    font-size:24px;
    color:#222;
    margin:0 0 22px;
    font-weight:700;
}

.csmaster_content ul{
    margin:0;
    padding:0;
    list-style:none;
}

.csmaster_content ul li{
    position:relative;
    padding:12px 0 12px 34px;
    color:#555;
    font-size:15px;
    border-bottom:1px solid #f0f0f0;
    line-height:1.7;
}

.csmaster_content ul li:last-child{
    border-bottom:none;
}

.csmaster_content ul li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:13px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:linear-gradient(135deg,#6A0DAD,#E91E63);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
}

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

.csmaster_card:hover .csmaster_icon{
    transform:rotate(-8deg) scale(1.08);
    transition:.35s;
}

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

@media(max-width:992px){

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

.csmaster_heading h2{
    font-size:34px;
}

}

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

@media(max-width:768px){

.csmaster_section{
    padding:60px 15px;
}

.csmaster_heading{
    margin-bottom:40px;
}

.csmaster_heading h2{
    font-size:28px;
}

.csmaster_card{
    flex-direction:column;
    gap:20px;
    padding:28px 22px;
}

.csmaster_icon{
    width:70px;
    height:70px;
    min-width:70px;
    font-size:30px;
    border-radius:18px;
}

.csmaster_content h3{
    font-size:20px;
    margin-bottom:18px;
}

.csmaster_content ul li{
    font-size:14px;
    padding:10px 0 10px 30px;
}

}

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

@media(max-width:480px){

.csmaster_heading span{
    font-size:12px;
    padding:8px 16px;
}

.csmaster_heading h2{
    font-size:24px;
}

.csmaster_card{
    border-radius:18px;
}

.csmaster_icon{
    width:65px;
    height:65px;
    min-width:65px;
    font-size:28px;
}

.csmaster_content h3{
    font-size:18px;
}

.csmaster_content ul li{
    font-size:13.5px;
}

}



.csduration_section{
    padding:50px 20px;
    background:#f8f5fc;
}

.csduration_container{
    max-width:1200px;
    margin:auto;
}

.csduration_heading{
    text-align:center;
    margin-bottom:60px;
}

.csduration_heading span{
    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    background:linear-gradient(135deg,#6A0DAD,#E91E63);
    color:#fff;
    font-size:14px;
    font-weight:600;
    margin-bottom:18px;
    letter-spacing:1px;
}

.csduration_heading h2{
    font-size:48px;
    color:#222;
    font-weight:700;
}

.csduration_grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.csduration_card{
    background:#fff;
    border-radius:20px;
    padding:40px 25px;
    text-align:center;
    box-shadow:0 15px 40px rgba(106,13,173,.08);
    transition:.35s;
    position:relative;
    overflow:hidden;
}

.csduration_card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(135deg,#6A0DAD,#E91E63);
}

.csduration_card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 55px rgba(106,13,173,.18);
}

.csduration_icon{
    width:80px;
    height:80px;
    margin:auto;
    margin-bottom:25px;
    border-radius:20px;
    background:linear-gradient(135deg,#6A0DAD,#E91E63);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
}

.csduration_card h3{
    font-size:17px;
    color:#222;
    margin-bottom:10px;
    font-weight:700;
    line-height:1.4;
}

.csduration_card p{
    color:#666;
    font-size:15px;
    line-height:1.7;
}

@media(max-width:1100px){

.csduration_grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.csduration_section{
padding:60px 15px;
}

.csduration_heading h2{
font-size:36px;
}

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

.csduration_card{
padding:30px 20px;
}

.csduration_icon{
width:70px;
height:70px;
font-size:28px;
}

.csduration_card h3{
font-size:20px;
}

.csduration_card p{
font-size:14px;
}

}


/*=====================================================
 COURSE CURRICULUM - PREMIUM DESIGN
 Unique Class : cscourse_
 Theme : CS Web Solution
======================================================*/

.cscourse_section{
    padding:50px 20px;
  }

.cscourse_container{
    max-width:1200px;
    margin:auto;
}

.cscourse_heading{
    text-align:center;
    margin-bottom:60px;
}

.cscourse_heading span{
    display:inline-block;
    padding:10px 24px;
    background:linear-gradient(135deg,#6A0DAD,#E91E63);
    color:#fff;
    border-radius:40px;
    font-size:14px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:20px;
}

.cscourse_heading h2{
    font-size:42px;
    color:#222;
    font-weight:700;
    margin:0;
}

/*=========================
GRID
==========================*/

.cscourse_grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-bottom:70px;
}

/*=========================
CARD
==========================*/

.cscourse_card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
        box-shadow:0 25px 60px rgba(106,13,173,.18);
    transition:.35s;
    position:relative;
}

.cscourse_card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(106,13,173,.18);
}

/*=========================
NUMBER
==========================*/

.cscourse_number{
    position:absolute;
    right:18px;
    top:18px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:#fff;
    color:#6A0DAD;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:700;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

/*=========================
ICON
==========================*/

.cscourse_icon{
    width:100%;
    height:110px;
    background:linear-gradient(135deg,#6A0DAD,#E91E63);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:48px;
    color:#fff;
}

/*=========================
TITLE
==========================*/

.cscourse_card h3{
    padding:25px 25px 10px;
    margin:0;
    font-size:20px;
    color:#222;
    line-height:1.4;
}

/*=========================
DESCRIPTION
==========================*/

.cscourse_card p{
    padding:0 25px;
    margin:0;
    color:#666;
    line-height:1.8;
    font-size:15px;
}

/*=========================
PROJECT
==========================*/

.cscourse_project{
    margin:25px;
    padding:18px;
    background:#faf7ff;
    border-left:5px solid #E91E63;
    border-radius:12px;
}

.cscourse_project strong{
    display:block;
    color:#6A0DAD;
    font-size:16px;
    margin-bottom:10px;
}

.cscourse_project span{
    color:#555;
    line-height:1.8;
    display:block;
}

/*=========================
LIVE PROJECT
==========================*/

.cscourse_live{
    max-width:1200px;
    margin:0 auto;
    background:#fff;
    border-radius:25px;
    padding:45px;
    display:flex;
    justify-content:space-between;
    gap:50px;
    align-items:center;
    box-shadow:0 18px 50px rgba(106,13,173,.10);
}

@media(max-width:768px){

    .cscourse_live{
        padding:25px;
        flex-direction:column;
        gap:25px;
    }

}

.cscourse_live_left{
    display:flex;
    gap:25px;
    align-items:flex-start;
    flex:1;
}

.cscourse_live_icon{
    width:90px;
    height:90px;
    border-radius:22px;
    background:linear-gradient(135deg,#6A0DAD,#E91E63);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:42px;
    flex-shrink:0;
}

.cscourse_live_left h3{
    margin:0 0 15px;
    font-size:30px;
    color:#222;
}

.cscourse_live_left p{
    margin:0;
    color:#666;
    line-height:1.9;
    font-size:15px;
}

/*=========================
LIVE TAGS
==========================*/

.cscourse_live_right{
    flex:1;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.cscourse_live_right span{
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#6A0DAD,#E91E63);
    color:#fff;
    border-radius:12px;
    padding:15px;
    text-align:center;
    font-size:15px;
    font-weight:500;
    transition:.3s;
}

.cscourse_live_right span:hover{
    transform:translateY(-5px);
}

/*=========================
TABLET
==========================*/

@media(max-width:1100px){

.cscourse_grid{
grid-template-columns:repeat(2,1fr);
}

.cscourse_live{
flex-direction:column;
}

.cscourse_live_right{
width:100%;
}

}

/*=========================
MOBILE
==========================*/

@media(max-width:768px){

.cscourse_section{
padding:60px 15px;
}

.cscourse_heading{
margin-bottom:40px;
}

.cscourse_heading h2{
font-size:30px;
}

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

.cscourse_card h3{
font-size:21px;
padding:22px 20px 10px;
}

.cscourse_card p{
padding:0 20px;
font-size:14px;
}

.cscourse_project{
margin:20px;
}

.cscourse_live{
padding:25px;
gap:30px;
}

.cscourse_live_left{
flex-direction:column;
text-align:center;
align-items:center;
}

.cscourse_live_left h3{
font-size:24px;
}

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

}

/*=========================
SMALL MOBILE
==========================*/

@media(max-width:480px){

.cscourse_heading span{
font-size:12px;
padding:8px 18px;
}

.cscourse_heading h2{
font-size:25px;
}

.cscourse_icon{
height:90px;
font-size:40px;
}

.cscourse_number{
width:45px;
height:45px;
font-size:16px;
}

.cscourse_live_icon{
width:75px;
height:75px;
font-size:34px;
}

.cscourse_live_left h3{
font-size:22px;
}

}




.cswd_career_section{
    width:100%;
    padding:80px 20px;
    background:#f7f8fc;
}


.cswd_career_container{
    max-width:1200px;
    margin:auto;
}


.cswd_career_box{
    background:#ffffff;
    border-radius:25px;
    padding:55px;
    box-shadow:0 15px 45px rgba(0,0,0,0.08);
    position:relative;
    overflow:hidden;
}


.cswd_career_box:before{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    right:-80px;
    top:-80px;
    background:#6a0dad;
    opacity:.08;
    border-radius:50%;
}


.cswd_career_tag{
    display:inline-block;
    background:#6a0dad;
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}


.cswd_career_content h1{
    font-size:42px;
    line-height:1.25;
    color:#111;
    margin-bottom:20px;
    /* max-width:850px; */
    font-weight: 700;
}


.cswd_career_desc{
    font-size:18px;
    line-height:1.8;
    color:#555;
    max-width:900px;
}


.cswd_career_features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin:35px 0;
}


.cswd_career_feature{
    background:#f8f3ff;
    padding:15px 20px;
    border-radius:12px;
    color:#333;
    font-size:16px;
    font-weight:500;
}


.cswd_career_feature span{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:25px;
    height:25px;
    background:#6a0dad;
    color:white;
    border-radius:50%;
    margin-right:10px;
}


.cswd_career_content h2{
    font-size:28px;
    color:#111;
    margin-top:30px;
}


.cswd_career_course{
    font-size:17px;
    color:#555;
}


.cswd_career_info{
    margin-top:25px;
    display:flex;
    flex-direction:column;
    gap:12px;
    font-size:16px;
    color:#333;
}


.cswd_career_buttons{
    display:flex;
    gap:18px;
    margin-top:30px;
}


.cswd_career_buttons a{
    padding:15px 35px;
    border-radius:50px;
    text-decoration:none;
    font-size:16px;
    font-weight:600;
    transition:.3s;
}


.cswd_career_whatsapp{
    background:#25D366;
    color:#fff;
}


.cswd_career_call{
    background:#6a0dad;
    color:#fff;
}


.cswd_career_buttons a:hover{
    transform:translateY(-3px);
}


.cswd_career_bottom{
    margin-top:30px;
    padding-top:20px;
    border-top:1px solid #eee;
    font-weight:500;
}



/* Mobile Responsive */

@media(max-width:768px){

.cswd_career_section{
    padding:40px 15px;
}


.cswd_career_box{
    padding:30px 20px;
}


.cswd_career_content h1{
    font-size:30px;
}


.cswd_career_desc{
    font-size:16px;
}


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


.cswd_career_content h2{
    font-size:22px;
}


.cswd_career_buttons{
    flex-direction:column;
}


.cswd_career_buttons a{
    text-align:center;
    width:100%;
}


}


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

    .csdghero-feature-wrap{
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Left align all items */
        justify-content: flex-start;
        width: 100%;
    }

    .csdghero-feature{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        text-align: left;
        gap: 15px;
        margin-bottom: 15px;
    }

    .csdghero-feature span{
        text-align: left;
    }

    .csdghero-icon{
        flex: 0 0 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

}



/* Main Section */
.cs-career-cards {
    width: 100%;
    padding: 30px 20px;
    background: #f6f9fc;
    box-sizing: border-box;
}

.cs-career-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
}


/* Card */
.cs-career-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e5eb;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    transition: all 0.35s ease;
}

.cs-career-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(36, 20, 105, 0.15);
    border-color: #392080;
}


/* Image */
.cs-career-image {
    padding: 15px 15px 0;
}

.cs-career-image img {
    width: 100%;
    height: 210px;
    display: block;
    object-fit: cover;
    border-radius: 14px;
    transition: transform 0.4s ease;
}

.cs-career-card:hover .cs-career-image img {
    transform: scale(1.025);
}


/* Content */
.cs-career-content {
    padding: 14px 18px 18px;
    text-align: center;
    flex: 1;
}

.cs-career-content h3 {
    margin: 0 0 15px;
    color: #24126d;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 700;
}

.cs-career-content p {
    margin: 0;
    color: #222;
    font-size: 16px;
    line-height: 1.45;
}

.cs-career-content p strong {
    color: #111;
    font-weight: 700;
}


/* Button Area */
.cs-career-button-wrap {
    border-top: 1px solid #e5e5e5;
    padding: 9px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Button */
.cs-career-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 145px;
    height: 41px;
    padding: 0 25px;
    border-radius: 25px;
    background: #392080;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.cs-career-btn:hover {
    background: #291563;
    color: #ffffff !important;
    transform: translateY(-2px);
}


/* Tablet */
@media (max-width: 900px) {

    .cs-career-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .cs-career-image img {
        height: 200px;
    }
}


/* Mobile */
@media (max-width: 600px) {

    .cs-career-cards {
        padding: 20px 15px;
    }

    .cs-career-container {
        grid-template-columns: 1fr;
        gap: 22px;
        max-width: 420px;
    }

    .cs-career-image {
        padding: 14px 14px 0;
    }

    .cs-career-image img {
        height: 220px;
    }

    .cs-career-content {
        padding: 15px 15px 18px;
    }

    .cs-career-content h3 {
        font-size: 17px;
    }

    .cs-career-content p {
        font-size: 15px;
    }

    .cs-career-button-wrap {
        padding: 10px 15px;
    }

    .cs-career-btn {
        min-width: 145px;
        height: 42px;
    }
}



.cswc-portfolio-section {
    width: 100%;
    padding: 22px 20px;
    background: #ffffff;
    overflow: hidden;
}

.cswc-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.cswc-title {
    margin: 0 0 45px;
    text-align: center;
     font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: #07145c;
}


/* =========================================
   CAROUSEL
========================================= */

.cswc-carousel-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.cswc-carousel {
    width: 100%;
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 10px 5px 20px;
}

.cswc-carousel::-webkit-scrollbar {
    display: none;
}


/* =========================================
   CAROUSEL ITEM
========================================= */

.cswc-item {
    flex: 0 0 calc(25% - 19px);
    scroll-snap-align: start;
}

.cswc-image-box {
    position: relative;
    width: 100%;
    height: 330px;
    overflow: hidden;
    border-radius: 12px;
    background: #f5f5f5;
    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.12);

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

.cswc-image-box:hover {
    transform: translateY(-7px);

    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.20);
}


/* WEBSITE IMAGE */

.cswc-image-box img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: top center;

    transition: transform 0.5s ease;
}

.cswc-image-box:hover img {
    transform: scale(1.035);
}


/* =========================================
   CLICK / HAND OVERLAY
========================================= */

.cswc-click-overlay {
    position: absolute;
    inset: 0;

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

    background: rgba(4, 15, 65, 0.58);

    opacity: 0;

    transition: opacity 0.3s ease;

    pointer-events: none;
}

.cswc-image-box:hover .cswc-click-overlay {
    opacity: 1;
}

.cswc-click-overlay span {
    width: 60px;
    height: 60px;

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

    background: #ffffff;
    border-radius: 50%;

    font-size: 30px;

    box-shadow: 0 5px 20px rgba(0,0,0,0.20);

    animation: cswc-hand-bounce 1.2s infinite;
}

.cswc-click-overlay small {
    margin-top: 12px;

    padding: 7px 16px;

    border-radius: 30px;

    background: #ffffff;

    color: #07145c;

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

@keyframes cswc-hand-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

}


/* =========================================
   CAROUSEL ARROWS
========================================= */

.cswc-carousel-arrow {
    position: absolute;
    z-index: 5;

    width: 48px;
    height: 48px;

    border: none;
    border-radius: 50%;

    background: #ffffff;
    color: #07145c;

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

    cursor: pointer;

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

    box-shadow: 0 5px 20px rgba(0,0,0,0.18);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.cswc-carousel-arrow:hover {
    background: #07145c;
    color: #ffffff;
    transform: scale(1.08);
}

.cswc-prev {
    left: -24px;
}

.cswc-next {
    right: -24px;
}


/* =========================================
   LIGHTBOX
========================================= */

.cswc-lightbox {
    position: fixed;

    inset: 0;

    z-index: 999999;

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

    padding: 40px;

    background: rgba(0, 0, 0, 0.72);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.cswc-lightbox.cswc-active {
    opacity: 1;
    visibility: visible;
}


/* =========================================
   POPUP IMAGE
========================================= */

/* =========================================
   FULL IMAGE LIGHTBOX - NO SCROLL
========================================= */

.cswc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;

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

    padding: 70px 80px;

    background: rgba(0, 0, 0, 0.78);

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.3s ease,
                visibility 0.3s ease;
}

.cswc-lightbox.cswc-active {
    opacity: 1;
    visibility: visible;
}


/* IMAGE CONTAINER */

.cswc-lightbox-content {
    position: relative;

    width: auto;
    height: auto;

    max-width: 82vw;
    max-height: 88vh;

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

    overflow: hidden;

    background: #ffffff;

    border-radius: 10px;

    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
}


/* FULL WEBSITE IMAGE */

.cswc-lightbox-content img {
    display: block;

    width: auto;
    height: auto;

    max-width: 82vw;
    max-height: 88vh;

    object-fit: contain;

    border-radius: 8px;
}


/* CLOSE BUTTON */

.cswc-lightbox-close {
    position: fixed;

    top: 20px;
    right: 25px;

    z-index: 1000000;

    width: 48px;
    height: 48px;

    border: none;
    border-radius: 50%;

    background: #ffffff;
    color: #222;

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

    cursor: pointer;

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

    box-shadow: 0 5px 20px rgba(0,0,0,0.25);

    transition: all 0.3s ease;
}

.cswc-lightbox-close:hover {
    background: #07145c;
    color: #ffffff;
    transform: rotate(90deg);
}


/* PREVIOUS / NEXT */

.cswc-lightbox-arrow {
    position: fixed;

    top: 50%;
    transform: translateY(-50%);

    z-index: 1000000;

    width: 52px;
    height: 52px;

    border: none;
    border-radius: 50%;

    background: #ffffff;
    color: #07145c;

    font-size: 28px;

    cursor: pointer;

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

    box-shadow: 0 5px 25px rgba(0,0,0,0.25);

    transition: all 0.3s ease;
}

.cswc-lightbox-arrow:hover {
    background: #07145c;
    color: #ffffff;
    transform: translateY(-50%) scale(1.08);
}

.cswc-lightbox-prev {
    left: 20px;
}

.cswc-lightbox-next {
    right: 20px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .cswc-lightbox {
        padding: 60px 15px;
    }

    .cswc-lightbox-content {
        /* max-width: 92vw; */
        max-height: 82vh;

        border-radius: 7px;
    }

    .cswc-lightbox-content img {
        max-width: 92vw;
        max-height: 82vh;
    }

    .cswc-lightbox-close {
        top: 12px;
        right: 12px;

        width: 42px;
        height: 42px;

        font-size: 27px;
    }

    .cswc-lightbox-arrow {
        width: 42px;
        height: 42px;

        font-size: 22px;
    }

    .cswc-lightbox-prev {
        left: 8px;
    }

    .cswc-lightbox-next {
        right: 8px;
    }
}

.cswc-lightbox-content img {
    width: 100%;
    height: auto;

    display: block;

    object-fit: contain;
}


/* =========================================
   CLOSE BUTTON
========================================= */

.cswc-lightbox-close {
    position: fixed;

    top: 25px;
    right: 35px;

    z-index: 1000000;

    width: 50px;
    height: 50px;

    border: none;
    border-radius: 50%;

    background: #ffffff;

    color: #222;

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

    cursor: pointer;

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

    box-shadow: 0 5px 20px rgba(0,0,0,0.25);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.cswc-lightbox-close:hover {
    transform: rotate(90deg);
    background: #07145c;
    color: #ffffff;
}


/* =========================================
   LIGHTBOX ARROWS
========================================= */

.cswc-lightbox-arrow {
    position: fixed;

    top: 50%;

    transform: translateY(-50%);

    z-index: 1000000;

    width: 55px;
    height: 55px;

    border: none;
    border-radius: 50%;

    background: #ffffff;

    color: #07145c;

    font-size: 30px;

    cursor: pointer;

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

    box-shadow: 0 5px 25px rgba(0,0,0,0.25);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.cswc-lightbox-arrow:hover {
    background: #07145c;
    color: #ffffff;
}

.cswc-lightbox-prev {
    left: 25px;
}

.cswc-lightbox-next {
    right: 25px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .cswc-title {
        font-size: 36px;
    }

    .cswc-item {
        flex: 0 0 calc(33.333% - 17px);
    }

    .cswc-image-box {
        height: 300px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .cswc-portfolio-section {
        padding: 50px 15px;
    }

    .cswc-title {
        font-size: 30px;
        margin-bottom: 30px;
    }

    .cswc-item {
        flex: 0 0 calc(80% - 10px);
    }

    .cswc-image-box {
        height: 360px;
        border-radius: 10px;
    }

    .cswc-carousel-arrow {
        width: 42px;
        height: 42px;
        font-size: 21px;
    }

    .cswc-prev {
        left: 5px;
    }

    .cswc-next {
        right: 5px;
    }

    .cswc-lightbox {
        padding: 20px 10px;
    }

    .cswc-lightbox-content {
        /* width: 92vw; */
        height: 82vh;
        border-radius: 8px;
    }

    .cswc-lightbox-close {
        top: 12px;
        right: 12px;

        width: 42px;
        height: 42px;

        font-size: 28px;
    }

    .cswc-lightbox-arrow {
        width: 42px;
        height: 42px;

        font-size: 23px;
    }

    .cswc-lightbox-prev {
        left: 8px;
    }

    .cswc-lightbox-next {
        right: 8px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

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

    .cswc-item {
        flex: 0 0 88%;
    }

    .cswc-image-box {
        height: 330px;
    }

    .cswc-click-overlay span {
        width: 52px;
        height: 52px;
        font-size: 26px;
    }

}


 /* =====================================================
    INVITATION VIDEO LIGHTBOX
 ===================================================== */

.cswc-video-lightbox {
    position: fixed;
    inset: 0;

    z-index: 999999;

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

    padding: 30px;

    background: rgba(0, 0, 0, 0.82);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


/* OPEN */

.cswc-video-lightbox.cswc-video-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =====================================================
   VIDEO CONTAINER
 ===================================================== */

.cswc-video-lightbox-content {
    position: relative;

    width: auto;
    max-width: 90vw;
    max-height: 90vh;

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

    background: #000;

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.55);
}


/* =====================================================
   VIDEO
 ===================================================== */

.cswc-video-lightbox-content video {
    display: block;

    width: auto;
    height: auto;

    max-width: 90vw;
    max-height: 90vh;

    object-fit: contain;

    background: #000;
}


/* =====================================================
   CLOSE BUTTON
 ===================================================== */

.cswc-video-lightbox-close {
    position: fixed;

    top: 18px;
    right: 22px;

    z-index: 1000000;

    width: 50px;
    height: 50px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: #ffffff;
    color: #222222;

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

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

    cursor: pointer;

    box-shadow:
        0 5px 20px rgba(0,0,0,0.30);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.cswc-video-lightbox-close:hover {
    background: #07145c;
    color: #ffffff;

    transform: rotate(90deg);
}


/* =====================================================
   MOBILE
 ===================================================== */

@media (max-width: 700px) {

    .cswc-video-lightbox {
        padding: 50px 10px 20px;
    }


    .cswc-video-lightbox-content {
        max-width: 94vw;
        max-height: 82vh;

        width: 94vw;

        border-radius: 8px;
    }


    .cswc-video-lightbox-content video {
        max-width: 94vw;
        max-height: 82vh;

        width: 100%;
        height: auto;
    }


    .cswc-video-lightbox-close {
        top: 10px;
        right: 10px;

        width: 42px;
        height: 42px;

        font-size: 28px;
    }

}


/* =====================================================
   SMALL MOBILE
 ===================================================== */

@media (max-width: 480px) {

    .cswc-video-lightbox-content {
        max-width: 96vw;
        max-height: 80vh;

        width: 96vw;
    }


    .cswc-video-lightbox-content video {
        max-width: 96vw;
        max-height: 80vh;
    }

}


/* =========================================================
   PREMIUM PORTFOLIO HERO
   Unique Prefix: spxpf-
========================================================= */

.spxpf-portfolio-hero {
    position: relative;
    width: 100%;
    min-height: 520px;
    overflow: hidden;

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

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(174, 128, 232, 0.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 30%,
            rgba(245, 168, 211, 0.14),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f8f6ff 0%,
            #ffffff 48%,
            #fff9fc 100%
        );

    
}


/* =========================================================
   SOFT BACKGROUND ORBS
========================================================= */

.spxpf-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.spxpf-orb-left {
    width: 240px;
    height: 240px;

    left: -120px;
    top: 120px;

    background: rgba(167, 123, 226, 0.07);
}

.spxpf-orb-right {
    width: 280px;
    height: 280px;

    right: -140px;
    top: 20px;

    background: rgba(245, 158, 208, 0.08);
}


/* =========================================================
   DECORATIVE LEFT LINE ART
========================================================= */

.spxpf-line-art {
    position: absolute;
    pointer-events: none;
}

.spxpf-line-left {
    width: 230px;
    height: 220px;

    left: -30px;
    bottom: -30px;
}

.spxpf-line-left span:first-child {
    position: absolute;

    width: 160px;
    height: 100px;

    left: 0;
    bottom: 50px;

    border: 1px solid rgba(126, 111, 166, 0.13);
    border-radius: 35px 35px 0 35px;
}

.spxpf-line-left span:last-child {
    position: absolute;

    width: 70px;
    height: 70px;

    left: 110px;
    bottom: 0;

    border: 1px solid rgba(126, 111, 166, 0.11);
    border-radius: 50%;
}


/* =========================================================
   DECORATIVE RIGHT LINE ART
========================================================= */

.spxpf-line-right {
    width: 250px;
    height: 240px;

    right: -20px;
    top: 10px;
}

.spxpf-line-right span:first-child {
    position: absolute;

    width: 130px;
    height: 145px;

    right: 55px;
    top: 10px;

    border: 1px solid rgba(126, 111, 166, 0.11);
    border-radius: 30px 30px 0 30px;
}

.spxpf-line-right span:last-child {
    position: absolute;

    width: 90px;
    height: 155px;

    right: 5px;
    top: 70px;

    border: 1px solid rgba(126, 111, 166, 0.10);
    border-radius: 28px 28px 0 28px;
}


/* =========================================================
   INNER CONTAINER
========================================================= */

.spxpf-hero-inner {
    position: relative;
    z-index: 5;

    width: min(100% - 40px, 1000px);

    margin: 0 auto;

    padding: 80px 20px 65px;

    text-align: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.spxpf-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 20px;

    color: #9254bd;

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

    letter-spacing: 2.5px;
}

.spxpf-eyebrow-line {
    width: 30px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #b27bd0
    );
}

.spxpf-eyebrow-line:last-child {
    background: linear-gradient(
        90deg,
        #b27bd0,
        transparent
    );
}


/* =========================================================
   MAIN TITLE
========================================================= */

.spxpf-hero-title {
    margin: 0;

    color: #151625;

    font-size: clamp(42px, 5vw, 66px);

    font-weight: 750;

    line-height: 1.08;

    letter-spacing: -2.5px;
}

.spxpf-hero-title span {
    position: relative;

    color: #9653c1;
}


/* Elegant underline */

.spxpf-hero-title span::after {
    content: "";

    position: absolute;

    left: 4%;
    bottom: -4px;

    width: 92%;
    height: 7px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(170, 102, 207, 0.18),
            transparent
        );

    border-radius: 50%;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.spxpf-hero-text {
    max-width: 670px;

    margin: 24px auto 0;

    color: #555764;

    font-size: 16px;

    line-height: 1.75;

    font-weight: 400;
}


/* =========================================================
   CENTER ACCENT
========================================================= */

.spxpf-hero-accent {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    margin-top: 30px;
}

.spxpf-accent-line {
    width: 80px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #c493db
    );
}

.spxpf-accent-line:last-child {
    background: linear-gradient(
        90deg,
        #c493db,
        transparent
    );
}


/* =========================================================
   ABSTRACT CENTER SYMBOL
========================================================= */

.spxpf-accent-symbol {
    position: relative;

    width: 32px;
    height: 32px;

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

.spxpf-accent-symbol span {
    position: absolute;

    width: 14px;
    height: 14px;

    border: 1.5px solid #b16acb;

    border-radius: 50%;
}

.spxpf-accent-symbol span:nth-child(1) {
    transform: translateY(-6px);
}

.spxpf-accent-symbol span:nth-child(2) {
    transform: translateX(-6px);
}

.spxpf-accent-symbol span:nth-child(3) {
    transform: translateX(6px);
}


/* =========================================================
   CATEGORY PREVIEW
========================================================= */

.spxpf-category-preview {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    margin-top: 34px;

    color: #777887;

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

    letter-spacing: 0.4px;
}

.spxpf-category-preview i {
    width: 4px;
    height: 4px;

    display: block;

    border-radius: 50%;

    background: #b878ce;
}


/* =========================================================
   HOVER
========================================================= */

.spxpf-category-preview span {
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.spxpf-category-preview span:hover {
    color: #9251bb;

    transform: translateY(-2px);
}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .spxpf-portfolio-hero {
        min-height: 480px;
    }

    .spxpf-hero-inner {
        padding-top: 70px;
        padding-bottom: 55px;
    }

    .spxpf-hero-title {
        font-size: 56px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .spxpf-portfolio-hero {
        min-height: 450px;
    }

    .spxpf-hero-inner {
        padding-top: 65px;
    }

    .spxpf-hero-title {
        font-size: 48px;
        letter-spacing: -1.8px;
    }

    .spxpf-hero-text {
        font-size: 15px;
    }

    .spxpf-line-left {
        left: -90px;
        opacity: 0.7;
    }

    .spxpf-line-right {
        right: -90px;
        opacity: 0.7;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .spxpf-portfolio-hero {
        min-height: auto;
    }

    .spxpf-hero-inner {
        width: calc(100% - 24px);

        padding: 60px 12px 48px;
    }

    .spxpf-eyebrow {
        gap: 8px;

        margin-bottom: 16px;

        font-size: 10px;
        letter-spacing: 1.8px;
    }

    .spxpf-eyebrow-line {
        width: 20px;
    }

    .spxpf-hero-title {
        font-size: 35px;

        line-height: 1.12;

        letter-spacing: -1.2px;
    }

    .spxpf-hero-text {
        margin-top: 18px;

        font-size: 14px;

        line-height: 1.65;
    }

    .spxpf-desktop-break {
        display: none;
    }

    .spxpf-hero-accent {
        margin-top: 24px;

        gap: 10px;
    }

    .spxpf-accent-line {
        width: 55px;
    }

    .spxpf-category-preview {
        gap: 10px;

        margin-top: 27px;

        font-size: 10px;
    }

    .spxpf-category-preview i {
        width: 3px;
        height: 3px;
    }

    .spxpf-line-left {
        left: -120px;
        bottom: -70px;
        opacity: 0.5;
        transform: scale(0.75);
    }

    .spxpf-line-right {
        right: -120px;
        top: -20px;
        opacity: 0.5;
        transform: scale(0.75);
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .spxpf-hero-inner {
        padding-top: 80px;
        padding-bottom: 40px;
    }

    .spxpf-hero-title {
        font-size: 30px;
        letter-spacing: -0.8px;
    }

    .spxpf-hero-text {
        font-size: 13px;
    }

    .spxpf-category-preview {
        flex-wrap: wrap;
    }

    .spxpf-line-left,
    .spxpf-line-right {
        opacity: 0.3;
    }
}




.pfx-portfolio-section {
    width: 100%;
    padding: 50px 20px 70px;
     background: #F3F8FF;
     box-sizing: border-box;
}

.pfx-portfolio-section *,
.pfx-portfolio-section *::before,
.pfx-portfolio-section *::after {
    box-sizing: border-box;
}

.pfx-portfolio-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================================
   MAIN PORTFOLIO LAYOUT
========================================================= */

.pfx-portfolio-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}


/* =========================================================
   LEFT SIDEBAR
========================================================= */

.pfx-category-sidebar {
    width: 100%;
    position: sticky;
    top: 80px;
}

.pfx-category-box {
    width: 100%;
    border: 1px solid #e8e5ed;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(50, 30, 80, 0.03);
}

.pfx-category-heading {
    margin: 0;
    padding: 10px 12px;
    background: linear-gradient(90deg, #5b36c9, #9347bd);
    color: #ffffff;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2px;
}

.pfx-category-list {
    padding: 6px;
}

.pfx-category-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    background: transparent;
    color: #55515e;
    padding: 9px 8px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: all .25s ease;
}

.pfx-category-btn:hover {
    background: #f5efff;
    color: #6137c9;
}

.pfx-category-btn.pfx-active {
    background: #f1eaff;
    color: #5e35c6;
    font-weight: 700;
}

.pfx-category-icon {
    width: 15px;
    min-width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    font-size: 10px;
}


/* =========================================================
   SIDEBAR CONTACT BOX
========================================================= */

.pfx-sidebar-contact {
    margin-top: 12px;
    padding: 20px 12px 14px;
    border: 1px solid #eee9f3;
    border-radius: 10px;
    text-align: center;
    background: #ffffff;
}

.pfx-contact-icon {
    width: 34px;
    height: 34px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.pfx-contact-title {
    margin: 0 0 6px;
    color: #3e3948;
    font-size: 9px;
    font-weight: 700;
}

.pfx-contact-text {
    margin: 0 0 12px;
    color: #8a8590;
    font-size: 7px;
    line-height: 1.55;
}

.pfx-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 6px 13px;
    border: 0;
    border-radius: 5px;
    background: linear-gradient(90deg, #5c36c9, #8b42c0);
    color: #ffffff;
    font-size: 7px;
    font-weight: 600;
    text-decoration: none;
}


/* =========================================================
   RIGHT PORTFOLIO AREA
========================================================= */

.pfx-project-area {
    min-width: 0;
}


/* =========================================================
   PROJECT HEADER
========================================================= */

.pfx-project-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}

.pfx-project-heading-wrap {
    min-width: 0;
}

.pfx-project-heading {
    margin: 0 0 3px;
    color: #25212d;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.pfx-project-count {
    margin: 0;
    color: #8a8590;
    font-size:15px;
}

.pfx-sort-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pfx-sort-label {
    color: #8a8590;
    font-size: 7px;
}

.pfx-sort-select {
    min-width: 82px;
    height: 27px;
    padding: 0 7px;
    border: 1px solid #ddd7e4;
    border-radius: 5px;
    outline: none;
    background: #ffffff;
    color: #514c58;
    font-size: 7px;
    cursor: pointer;
}


/* =========================================================
   PROJECT GRID
========================================================= */

.pfx-project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}


/* =========================================================
   PROJECT CARD
========================================================= */

.pfx-project-card {
    min-width: 0;
    border: 1px solid #e9e5ed;
    border-radius: 9px;
    background: #ffffff;
    overflow: hidden;
    transition: transform .25s ease,
                box-shadow .25s ease,
                border-color .25s ease;
}

.pfx-project-card:hover {
    transform: translateY(-3px);
    border-color: #d9c8f2;
    box-shadow: 0 8px 25px rgba(76, 42, 122, 0.10);
}


/* =========================================================
   PROJECT IMAGE
========================================================= */

.pfx-project-image-wrap {
    position: relative;
    width: 100%;
    height:auto;
    overflow: hidden;
    background: #eee;
}

.pfx-project-image {
    width: 100%;
    /* height: 100%; */
    display: block;
    /* object-fit: cover; */
    transition: transform .5s ease;
}

.pfx-project-card:hover .pfx-project-image {
    transform: scale(1.05);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.pfx-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.08),
        rgba(0,0,0,.12) 45%,
        rgba(0,0,0,.48)
    );
    pointer-events: none;
}


/* =========================================================
   PROJECT CATEGORY BADGE
========================================================= */

.pfx-project-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 10px;
    background: rgba(25, 25, 25, .48);
    color: #ffffff;
    font-size:10px;
    line-height: 1;
    backdrop-filter: blur(4px);
}

.pfx-project-badge-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffffff;
}


/* =========================================================
   IMAGE TEXT
========================================================= */

.pfx-project-image-content {
    position: absolute;
    z-index: 2;
    left: 11px;
    right: 11px;
    bottom: 10px;
    color: #ffffff;
}

.pfx-project-tagline {
    margin: 0;
    max-width: 150px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.pfx-project-content {
    padding: 9px 10px 25px;
}

.pfx-project-title {
    margin: 0 0 8px;
    color: #332e3a;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
}

.pfx-project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 23px;
    padding: 4px 9px;
    border: 1px solid #8142d1;
    border-radius: 4px;
       background: #6b36c6;
    color: #ffffff;
        font-size: 15px;
    margin-top: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all .25s ease;
}

.pfx-project-btn:hover {
    background: #6b36c6;
    color: #ffffff;
}

.pfx-project-arrow {
    font-size: 9px;
    line-height: 1;
}


/* =========================================================
   NO RESULTS
========================================================= */

.pfx-no-results {
    display: none;
    grid-column: 1 / -1;
    padding: 50px 20px;
    border: 1px dashed #dcd4e7;
    border-radius: 10px;
    text-align: center;
}

.pfx-no-results-title {
    margin: 0 0 5px;
    color: #443d4d;
    font-size: 14px;
}

.pfx-no-results-text {
    margin: 0;
    color: #99929f;
    font-size: 9px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .pfx-portfolio-section {
        padding: 40px 18px 55px;
    }

    .pfx-portfolio-layout {
        grid-template-columns: 165px minmax(0, 1fr);
        gap: 15px;
    }

    .pfx-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pfx-project-image-wrap {
        height: 145px;
    }

    .pfx-project-heading {
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .pfx-portfolio-section {
        padding: 30px 12px 45px;
    }

    .pfx-portfolio-layout {
        display: block;
    }

    .pfx-category-sidebar {
        position: static;
        margin-bottom: 20px;
    }

    .pfx-category-box {
        overflow: visible;
    }

    .pfx-category-heading {
        border-radius: 9px 9px 0 0;
        padding: 11px 13px;
        font-size: 10px;
    }

    .pfx-category-list {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding: 8px;
        scrollbar-width: thin;
    }

    .pfx-category-list::-webkit-scrollbar {
        height: 3px;
    }

    .pfx-category-btn {
        width: auto;
        min-width: max-content;
        padding: 8px 10px;
        border: 1px solid #eee9f4;
        font-size: 15px;
        white-space: nowrap;
    }

    .pfx-category-icon {
        width: 13px;
        min-width: 13px;
    }

    .pfx-sidebar-contact {
        display: none;
    }

    .pfx-project-topbar {
        align-items: flex-start;
    }

    .pfx-sort-wrap {
        display: none;
    }

    .pfx-project-heading {
        font-size: 17px;
    }

    .pfx-project-count {
        font-size: 15px;
    }

    .pfx-project-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .pfx-project-image-wrap {
        height: 190px;
    }

    .pfx-project-content {
        padding: 11px 12px 12px;
    }

    .pfx-project-title {
        font-size: 20px;
        margin-bottom: 9px;
    }

    .pfx-project-btn {
        min-height: 28px;
        padding: 6px 11px;
        font-size: 12px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .pfx-portfolio-section {
        padding-left: 10px;
        padding-right: 10px;
        margin-top: -72px;
    }

    .pfx-project-image-wrap {
        height: 350px;
    }

    .pfx-project-heading {
        font-size: 30px;
    }
}



/* =========================================================
   PFX IMAGE LIGHTBOX
========================================================= */

.pfx-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(5, 10, 18, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pfx-lightbox.pfx-lightbox-show {
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* Image Container */
.pfx-lightbox-inner {
    position: relative;
    width: min(1100px, 92vw);
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.92);
    transition: transform 0.35s ease;
}

.pfx-lightbox.pfx-lightbox-show .pfx-lightbox-inner {
    transform: scale(1);
}

/* Large Image */
.pfx-lightbox-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* Close Button */
.pfx-lightbox-close {
    position: fixed;
    top: 22px;
    right: 25px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    transition: all 0.25s ease;
}

.pfx-lightbox-close:hover {
    background: #ffffff;
    color: #111111;
    transform: rotate(90deg);
}

/* Image Cursor */
.pfx-project-image-wrap {
    cursor: zoom-in;
}

/* Prevent body scroll when popup is open */
body.pfx-lightbox-open {
    overflow: hidden;
}


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

@media (max-width: 991px) {

    .pfx-lightbox {
        padding: 20px;
    }

    .pfx-lightbox-inner {
        width: 94vw;
        max-height: 88vh;
    }

    .pfx-lightbox-image {
        max-width: 94vw;
        max-height: 82vh;
        border-radius: 12px;
    }

    .pfx-lightbox-close {
        top: 15px;
        right: 15px;
        width: 44px;
        height: 44px;
        font-size: 27px;
    }
}


@media (max-width: 575px) {

    .pfx-lightbox {
        padding: 15px;
    }

    .pfx-lightbox-inner {
        width: 96vw;
        max-height: 85vh;
    }

    .pfx-lightbox-image {
        width: 100%;
        max-width: 96vw;
        max-height: 78vh;
        border-radius: 10px;
    }

    .pfx-lightbox-close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}


/* =========================================
   MOBILE CATEGORY DESIGN
========================================= */

@media (max-width: 767px) {

    /* Sidebar becomes full width */
    .pfx-category-sidebar {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .pfx-category-box {
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
    }

    /* Category heading */
    .pfx-category-heading {
        margin: 0;
        padding: 13px 15px;
        font-size: 13px;
        line-height: 1.2;
    }

    /* IMPORTANT:
       Remove horizontal scrolling */
    .pfx-category-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
        overflow: visible !important;
        white-space: normal !important;
    }

    /* Category buttons */
    .pfx-category-btn {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 40px;

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

        padding: 9px 8px;
        text-align: center;

        white-space: normal !important;
        overflow: visible;
        text-overflow: unset;

        font-size: 12px;
        line-height: 1.25;

        border-radius: 7px;
    }

    /* All Categories full width */
    .pfx-category-btn[data-filter="all"] {
        grid-column: 1 / -1;
    }

    /* Project area full width */
    .pfx-project-area {
        width: 100%;
        max-width: 100%;
    }

}

@media (max-width: 400px) {

    .pfx-category-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
    }

    .pfx-category-btn {
        min-height: 38px;
        padding: 8px 5px;
        font-size: 12px;
        font-weight: 700;
    }

    .pfx-category-heading {
        font-size: 12px;
        padding: 12px;
    }

}


/* =========================================
   CS BLOG GRID SECTION
========================================= */

.csbloggrid-section {
    width: 100%;
    padding: 80px 20px;
    background: #f7f9fc;
    box-sizing: border-box;
}

.csbloggrid-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


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

.csbloggrid-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 45px;
}

.csbloggrid-tag {
    display: inline-block;
    padding: 7px 17px;
    border-radius: 30px;
    background: #eeeaff;
    color: #3b237f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.csbloggrid-heading h2 {
    margin: 0;
    font-size: 38px;
    line-height: 1.2;
    color: #172033;
    font-weight: 800;
}

.csbloggrid-heading h2 span {
    color: #45258c;
}

.csbloggrid-heading p {
    margin: 15px auto 0;
    max-width: 650px;
    color: #687386;
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================
   BLOG GRID
========================================= */

.csbloggrid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}


/* =========================================
   BLOG CARD
========================================= */

.csbloggrid-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e8ebf2;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(30, 35, 55, 0.07);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.csbloggrid-card:hover {
    transform: translateY(-8px);
    border-color: #dcd3f5;
    box-shadow: 0 18px 45px rgba(48, 32, 100, 0.14);
}


/* =========================================
   IMAGE
========================================= */

.csbloggrid-image-wrap {
    position: relative;
    width: 100%;
    /* height: 225px; */
    overflow: hidden;
    background: #eef1f6;
}

.csbloggrid-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.csbloggrid-card:hover .csbloggrid-image {
    transform: scale(1.06);
}


/* =========================================
   CATEGORY
========================================= */

.csbloggrid-category {
    position: absolute;
    left: 16px;
    bottom: 15px;

    display: inline-flex;
    align-items: center;

    padding: 7px 13px;

    border-radius: 30px;

    background: #45258c;
    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;

    box-shadow: 0 5px 15px rgba(69, 37, 140, 0.25);
}


/* =========================================
   CONTENT
========================================= */

.csbloggrid-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 23px 22px 22px;
}


/* =========================================
   META
========================================= */

.csbloggrid-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 13px;

    font-size: 12px;
    color: #8a92a3;
}

.csbloggrid-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.csbloggrid-meta i {
    color: #45258c;
}


/* =========================================
   TITLE
========================================= */

.csbloggrid-content h3 {
    margin: 0 0 11px;

    color: #1c2434;

    font-size: 20px;
    line-height: 1.4;
    font-weight: 750;

    transition: color 0.3s ease;
}

.csbloggrid-card:hover .csbloggrid-content h3 {
    color: #45258c;
}


/* =========================================
   DESCRIPTION
========================================= */

.csbloggrid-content p {
    margin: 0 0 22px;

    color: #6d7687;

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


/* =========================================
   BUTTON
========================================= */

.csbloggrid-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: fit-content;

    margin-top: auto;

    padding: 11px 19px;

    border-radius: 30px;

    background: #45258c;
    color: #ffffff !important;

    text-decoration: none !important;

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

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

.csbloggrid-button i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.csbloggrid-button:hover {
    background: #30186c;
    color: #ffffff !important;
    transform: translateX(3px);
    box-shadow: 0 8px 18px rgba(69, 37, 140, 0.25);
}

.csbloggrid-button:hover i {
    transform: translateX(4px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .csbloggrid-section {
        padding: 65px 20px;
    }

    .csbloggrid-heading h2 {
        font-size: 34px;
    }

    .csbloggrid-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .csbloggrid-image-wrap {
        height: 215px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .csbloggrid-section {
        padding: 55px 15px;
    }

    .csbloggrid-heading {
        margin-bottom: 32px;
    }

    .csbloggrid-heading h2 {
        font-size: 29px;
    }

    .csbloggrid-heading p {
        font-size: 14px;
        line-height: 1.6;
    }

    .csbloggrid-wrapper {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .csbloggrid-image-wrap {
        height: 220px;
    }

    .csbloggrid-content {
        padding: 20px;
    }

    .csbloggrid-content h3 {
        font-size: 19px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .csbloggrid-section {
        padding: 45px 12px;
    }

    .csbloggrid-heading h2 {
        font-size: 26px;
    }

    .csbloggrid-tag {
        font-size: 11px;
        padding: 6px 14px;
    }

    .csbloggrid-image-wrap {
        height: 205px;
    }

    .csbloggrid-meta {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px 15px;
    }

    .csbloggrid-content h3 {
        font-size: 18px;
    }

}


/* =========================================
   CS REDESIGN ARTICLE SECTION
========================================= */

.csredesignarticle-section {
    width: 100%;
    padding: 25px 20px 10px;
    background: #ffffff;
    box-sizing: border-box;
}

.csredesignarticle-container {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
    gap: 38px;

    align-items: start;
}


/* =========================================
   LEFT CONTENT
========================================= */

.csredesignarticle-content {
    width: 100%;
    box-sizing: border-box;
}

.csredesignarticle-content h1 {
    margin: 0 0 17px;

    color: #292078;

 
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
}

.csredesignarticle-content p {
    margin: 0 0 17px;

    color: #111111;

 
    font-size: 17px;
    line-height: 1.8;
    font-weight: 400;
    text-align: justify;
}

.csredesignarticle-content ul {
    margin: 0;
    padding-left: 22px;

    color: #111111;

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

.csredesignarticle-content li {
    margin: 0 0 3px;
    padding-left: 1px;
    text-align: justify;
}


/* =========================================
   RIGHT IMAGE
========================================= */

.csredesignarticle-image {
    width: 100%;
    box-sizing: border-box;
}

.csredesignarticle-image img {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    border-radius: 10px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);

    box-sizing: border-box;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .csredesignarticle-section {
        padding: 30px 20px 15px;
    }

    .csredesignarticle-container {
        grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
        gap: 30px;
    }

    .csredesignarticle-content h1 {
        font-size: 27px;
    }

    .csredesignarticle-content p,
    .csredesignarticle-content ul {
        font-size: 16px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .csredesignarticle-section {
        padding: 25px 15px 10px;
    }

    .csredesignarticle-container {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .csredesignarticle-content {
        width: 100%;
    }

    .csredesignarticle-content h1 {
        font-size: 26px;
        line-height: 1.3;
        margin-bottom: 15px;
    }

    .csredesignarticle-content p {
        font-size: 16px;
        line-height: 1.75;
        margin-bottom: 15px;
    }

    .csredesignarticle-content ul {
        padding-left: 22px;

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

    .csredesignarticle-content li {
        margin-bottom: 6px;
    }

    .csredesignarticle-image {
        width: 100%;
    }

    .csredesignarticle-image img {
        width: 100%;
        height: auto;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .csredesignarticle-section {
        padding: 20px 12px 10px;
    }

    .csredesignarticle-container {
        gap: 20px;
    }

    .csredesignarticle-content h1 {
        font-size: 23px;
        line-height: 1.3;
    }

    .csredesignarticle-content p,
    .csredesignarticle-content ul {
        font-size: 15px;
        line-height: 1.7;
    }

    .csredesignarticle-content ul {
        padding-left: 20px;
    }

    .csredesignarticle-image img {
        border-radius: 8px;
    }

}



.csredesignnext-section {
    width: 100%;
    padding: 0 20px 25px;
    background: #ffffff;
    box-sizing: border-box;
}

.csredesignnext-container {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.45fr);
    gap: 38px;

    align-items: start;
}


/* =========================================
   LEFT SIDE
========================================= */

.csredesignnext-left {
    width: 100%;
}


/* =========================================
   MAP
========================================= */

.csredesignnext-map {
    width: 100%;
    overflow: hidden;
}

.csredesignnext-map iframe {
    display: block;

    width: 100%;
    height: 300px;

    border: 0;
}


/* =========================================
   CONTACT
========================================= */

.csredesignnext-contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 10px;
}

.csredesignnext-contact-item {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #111111 !important;

    text-decoration: none !important;

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

    white-space: nowrap;
}

.csredesignnext-contact-item i {
    color: #111111;
    font-size: 15px;
}

.csredesignnext-contact-item:hover {
    color: #292078 !important;
}


/* =========================================
   QUOTE BUTTON
========================================= */

.csredesignnext-quote {
    margin-top: 8px;
}

.csredesignnext-quote-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 15px;

    background: #302079;
    color: #ffffff !important;

    border-radius: 4px;

    text-decoration: none !important;

 
    font-size: 15px;
    font-weight: 500;

    transition: all 0.3s ease;
}

.csredesignnext-quote-btn:hover {
    background: #21145c;
    color: #ffffff !important;
    transform: translateY(-1px);
}


/* =========================================
   RIGHT CONTENT
========================================= */

.csredesignnext-right {
    width: 100%;
}

.csredesignnext-right ul {
    margin: 0;
    padding-left: 22px;

    color: #111111;

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

.csredesignnext-right li {
    margin: 0 0 3px;
    padding-left: 1px;
    text-align: justify;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .csredesignnext-section {
        padding: 0 20px 25px;
    }

    .csredesignnext-container {
        grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.2fr);
        gap: 30px;
    }

    .csredesignnext-right ul {
        font-size: 16px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .csredesignnext-section {
        padding: 0 15px 25px;
    }

    .csredesignnext-container {
        display: flex;
        flex-direction: column;

        gap: 25px;
    }

    .csredesignnext-left,
    .csredesignnext-right {
        width: 100%;
    }

    .csredesignnext-map iframe {
        height: 280px;
    }

    .csredesignnext-contact {
        gap: 10px 18px;
    }

    .csredesignnext-contact-item {
        font-size: 15px;
    }

    .csredesignnext-right ul {
        padding-left: 21px;

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

    .csredesignnext-right li {
        margin-bottom: 7px;
        text-align: justify;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .csredesignnext-section {
        padding: 0 12px 20px;
    }

    .csredesignnext-map iframe {
        height: 250px;
    }

    .csredesignnext-contact {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .csredesignnext-contact-item {
        font-size: 14px;
    }

    .csredesignnext-right ul {
        font-size: 15px;
        line-height: 1.7;
    }

}


/* =========================================
   CS REDESIGN FINAL CONTENT
========================================= */

.csredesignfinal-section {
    width: 100%;
    padding: 5px 20px 40px;
    background: #ffffff;
    box-sizing: border-box;
}

.csredesignfinal-container {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
}


/* =========================================
   LIST
========================================= */

.csredesignfinal-list {
    margin: 0 0 18px;
    padding-left: 22px;

    color: #111111;

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

.csredesignfinal-list li {
    margin: 0 0 5px;
    padding-left: 1px;
    text-align: justify;
}


/* =========================================
   PARAGRAPH CONTENT
========================================= */

.csredesignfinal-text {
    width: 100%;
}

.csredesignfinal-text p {
    margin: 0 0 2px;

    color: #111111;

 
    font-size: 17px;
    line-height: 1.75;
    text-align: justify;
}

.csredesignfinal-text p:last-child {
    margin-bottom: 0;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .csredesignfinal-section {
        padding: 5px 20px 35px;
    }

    .csredesignfinal-list,
    .csredesignfinal-text p {
        font-size: 16px;
        line-height: 1.75;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .csredesignfinal-section {
        padding: 5px 15px 30px;
    }

    .csredesignfinal-list {
        padding-left: 21px;
        margin-bottom: 18px;

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

    .csredesignfinal-list li {
        margin-bottom: 8px;
    }

    .csredesignfinal-text p {
        font-size: 16px;
        line-height: 1.75;
        margin-bottom: 12px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .csredesignfinal-section {
        padding: 5px 12px 25px;
    }

    .csredesignfinal-list,
    .csredesignfinal-text p {
        font-size: 15px;
        line-height: 1.7;
    }

    .csredesignfinal-list {
        padding-left: 20px;
    }

}



.cswsm-choice-section {
        width: 100%;
    padding: 15px 0;
    background: #ffffff;
}

.cswsm-choice-container {
    max-width: 1130px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 34px;
    align-items: start;
}

.cswsm-choice-left {
    width: 100%;
}

.cswsm-map-box {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.cswsm-map-box iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.cswsm-contact-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 22px;
}

.cswsm-contact-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #111111;
    font-size: 16px;
}

.cswsm-contact-item i {
    font-size: 15px;
}

.cswsm-quote-btn {
    display: inline-block;
    margin-top: 5px;
    padding: 10px 14px;
    background: #301577;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    border-radius: 3px;
    transition: 0.3s ease;
}

.cswsm-quote-btn:hover {
    background: #211052;
    color: #ffffff;
}

.cswsm-choice-right {
    width: 100%;
}

.cswsm-choice-right h2 {
    margin: 0 0 18px;
    color: #301577;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
}

.cswsm-choice-right p {
    margin: 0;
    color: #111111;
    font-size: 17px;
    line-height: 1.75;
    text-align: justify;
}

/* Tablet */
@media (max-width: 991px) {
    .cswsm-choice-container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 25px;
    }

    .cswsm-map-box {
        height: 320px;
    }

    .cswsm-choice-right h2 {
        font-size: 23px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .cswsm-choice-section {
        padding: 10px 0;
    }

    .cswsm-choice-container {
        padding: 0 15px;
        gap: 25px;
    }

    .cswsm-map-box {
        height: 280px;
    }

    .cswsm-contact-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-top: 18px;
    }

    .cswsm-contact-item {
        font-size: 15px;
    }

    .cswsm-choice-right h2 {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .cswsm-choice-right p {
        font-size: 15px;
        line-height: 1.7;
        text-align: left;
    }

    .cswsm-quote-btn {
        margin-top: 8px;
    }
}

a{
    text-decoration: none;
    color:#292078;
    font-weight: 700;
}


.csweb-why-choose {
       padding: 40px 20px;
    background: #fbfbfb;
}

.csweb-container {
    max-width: 1180px;
    margin: 0 auto;
}

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

.csweb-section-heading {
    max-width: 780px;
    margin: 0 auto 30px;
    text-align: center;
}

.csweb-section-heading span {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;

    /* CS WEB GRADIENT */
    background: linear-gradient(
        90deg,
        #7b1fa2 0%,
        #b000a8 50%,
        #e00087 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.csweb-section-heading h2 {
    margin: 0 0 15px;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;

    /* GRADIENT HEADING */
    background: linear-gradient(
        90deg,
        #15245a 0%,
        #7b1fa2 45%,
        #b000a8 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.csweb-section-heading p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: #626878;
}


/* =========================
   GRID
========================= */

.csweb-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}


/* =========================
   CARDS
========================= */

.csweb-why-card {
    position: relative;
    display: flex;
    gap: 22px;
    padding: 28px;

    background: #ffffff;

    border: 1px solid #e7e3ec;
    border-radius: 12px;

    transition: all 0.3s ease;
}


/* Gradient top border effect */

.csweb-why-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 25px;
    right: 25px;
    height: 3px;

    background: linear-gradient(
        90deg,
        #7b1fa2,
        #b000a8,
        #e00087
    );

    border-radius: 0 0 5px 5px;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.3s ease;
}

.csweb-why-card:hover::before {
    transform: scaleX(1);
}

.csweb-why-card:hover {
    border-color: #d9c9df;
    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(123, 31, 162, 0.10);
}


/* =========================
   NUMBER
========================= */

.csweb-number {
    flex-shrink: 0;

    width: 52px;
    height: 52px;

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

    border-radius: 10px;

    /* LOGO GRADIENT */
    background: linear-gradient(
        135deg,
        #15245a 0%,
        #6f239b 45%,
        #b000a8 75%,
        #e00087 100%
    );

    color: #ffffff;

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

    box-shadow:
        0 6px 15px rgba(176, 0, 168, 0.18);
}


/* =========================
   CARD CONTENT
========================= */

.csweb-card-content h3 {
    margin: 2px 0 10px;

    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;

    color: #15245a;
}

.csweb-card-content p {
    margin: 0;

    color: #666b78;

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


/* =========================
   LAST CARD
========================= */

.csweb-why-card:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 10px);
}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

    .csweb-why-choose {
        padding: 55px 18px;
    }

    .csweb-section-heading {
        margin-bottom: 35px;
    }

    .csweb-section-heading h2 {
        font-size: 30px;
    }

    .csweb-section-heading p {
        font-size: 15px;
    }

    .csweb-why-grid {
        grid-template-columns: 1fr;
    }

    .csweb-why-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    .csweb-why-card {
        padding: 23px;
        gap: 16px;
    }

    .csweb-card-content h3 {
        font-size: 19px;
    }

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




.cswb-brochure-section {

    --cswb-purple: #8d008d;
    --cswb-magenta: #d000b7;
    --cswb-dark: #18141a;
    --cswb-grey: #716c74;
    --cswb-border: #e8e3e9;

    width: 100%;

    padding: 75px 20px;

    box-sizing: border-box;

    

    /* font-family:
        Arial,
        Helvetica,
        sans-serif; */

}


/* =========================================================
   CONTAINER
========================================================= */

.cswb-brochure-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

}


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

.cswb-brochure-heading {

    max-width: 700px;

    margin: 0 auto 55px;

    text-align: center;

}


.cswb-brochure-eyebrow {

    display: inline-block;

    margin-bottom: 12px;

    color: var(--cswb-purple);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

}


.cswb-brochure-heading h2 {

    margin: 0;

    color: var(--cswb-dark);

    font-size:
        clamp(36px, 5vw, 55px);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2px;

}


.cswb-brochure-heading h2 span {

    background:
        linear-gradient(
            90deg,
            var(--cswb-purple),
            var(--cswb-magenta)
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.cswb-brochure-heading p {

    margin: 18px auto 0;

    max-width: 600px;

    color: var(--cswb-grey);

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   TOP BAR
========================================================= */

.cswb-brochure-top {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;

}


.cswb-brochure-title span {

    display: block;

    margin-bottom: 5px;

    color: var(--cswb-purple);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

}


.cswb-brochure-title h3 {

    margin: 0;

    color: var(--cswb-dark);

    font-size: 27px;

    font-weight: 800;

}


/* =========================================================
   ARROWS
========================================================= */

.cswb-brochure-arrows {

    display: flex;

    gap: 8px;

}


.cswb-brochure-arrow {

    width: 43px;

    height: 43px;

    padding: 0;

    border: 1px solid var(--cswb-border);

    border-radius: 50%;

    background: #fff;

    color: var(--cswb-dark);

    font-size: 20px;

    line-height: 1;

    cursor: pointer;

    transition:
        all .3s ease;

}


.cswb-brochure-arrow:hover {

    color: #fff;

    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--cswb-purple),
            var(--cswb-magenta)
        );

    transform:
        translateY(-2px);

}


/* =========================================================
   SLIDER
========================================================= */

.cswb-brochure-slider {

    width: 100%;

    overflow: hidden;

}


.cswb-brochure-track {

    display: flex;

    gap: 18px;

    transition:
        transform .5s
        cubic-bezier(.2,.7,.2,1);

    will-change: transform;

}


/* =========================================================
   CARD
========================================================= */

.cswb-brochure-card {

    flex:
        0 0
        calc(
            (100% - 54px) / 4
        );

    min-width: 0;

}


.cswb-brochure-image {

    position: relative;

    width: 100%;

    aspect-ratio: .72 / 1;

    overflow: hidden;

    border-radius: 16px;

    background: #f6f4f7;

    border: 1px solid var(--cswb-border);

    box-shadow:
        0 8px 28px
        rgba(30, 10, 35, .07);

}


.cswb-brochure-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform .6s
        cubic-bezier(.2,.7,.2,1);

}


.cswb-brochure-card:hover
.cswb-brochure-image img {

    transform:
        scale(1.05);

}


/* =========================================================
   OVERLAY
========================================================= */

.cswb-brochure-overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    min-height: 35%;

    padding: 20px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 10px;

    box-sizing: border-box;

    opacity: 0;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(20, 7, 22, .9)
        );

    transition:
        opacity .35s ease;

}


.cswb-brochure-card:hover
.cswb-brochure-overlay {

    opacity: 1;

}


.cswb-brochure-overlay > span {

    color: #f0a2e9;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


/* =========================================================
   VIEW BUTTON
========================================================= */

.cswb-brochure-view {

    flex: 0 0 auto;

    width: 43px;

    height: 43px;

    padding: 0;

    border: 1px solid
        rgba(255,255,255,.35);

    border-radius: 50%;

    background:
        rgba(141,0,141,.9);

    color: #fff;

    cursor: pointer;

    backdrop-filter:
        blur(8px);

    transition:
        all .3s ease;

}


.cswb-brochure-view span {

    display: block;

    font-size: 23px;

    line-height: 40px;

    transition:
        transform .3s ease;

}


.cswb-brochure-view:hover {

    background:
        var(--cswb-magenta);

    transform:
        translateY(-2px);

}


.cswb-brochure-view:hover span {

    transform:
        rotate(90deg);

}


/* =========================================================
   PROGRESS BAR
========================================================= */

.cswb-brochure-progress {

    width: 100%;

    /* height: 3px; */

    margin-top: 25px;

    overflow: hidden;

    border-radius: 10px;

    background: #eee9ef;

}


.cswb-brochure-progress-bar {

    width: 25%;

    height: 100%;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--cswb-purple),
            var(--cswb-magenta)
        );

    transition:
        width .45s ease;

}


/* =========================================================
   PDF MODAL
========================================================= */

.cswb-pdf-modal {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    box-sizing: border-box;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.cswb-pdf-modal.cswb-pdf-active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* =========================================================
   MODAL BACKDROP
========================================================= */

.cswb-pdf-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(15, 8, 16, .94);

    backdrop-filter:
        blur(5px);

}


/* =========================================================
   MODAL BOX
========================================================= */

.cswb-pdf-modal-box {

    position: relative;

    z-index: 2;

    width: min(1100px, 96vw);

    height: min(90vh, 900px);

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.45);

    transform:
        translateY(25px)
        scale(.97);

    transition:
        transform .35s ease;

}


.cswb-pdf-modal.cswb-pdf-active
.cswb-pdf-modal-box {

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   MODAL HEADER
========================================================= */

.cswb-pdf-modal-header {

    min-height: 65px;

    padding: 12px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    box-sizing: border-box;

    background:
        linear-gradient(
            110deg,
            #201520,
            #4b1749
        );

}


.cswb-pdf-modal-header span {

    display: block;

    margin-bottom: 3px;

    color: #d986d3;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;

}


.cswb-pdf-modal-header h3 {

    margin: 0;

    color: #fff;

    font-size: 18px;

    font-weight: 700;

}


.cswb-pdf-close {

    width: 40px;

    height: 40px;

    flex: 0 0 auto;

    border: 1px solid
        rgba(255,255,255,.25);

    border-radius: 50%;

    background:
        rgba(255,255,255,.1);

    color: #fff;

    font-size: 27px;

    line-height: 1;

    cursor: pointer;

    transition:
        all .25s ease;

}


.cswb-pdf-close:hover {

    border-color:
        var(--cswb-magenta);

    background:
        var(--cswb-magenta);

}


/* =========================================================
   PDF FRAME
========================================================= */

.cswb-pdf-frame-wrap {

    flex: 1;

    min-height: 0;

    background: #e9e7e9;

}


.cswb-pdf-frame-wrap iframe {

    display: block;

    width: 100%;

    height: 100%;

    border: 0;

}


/* =========================================================
   MODAL FOOTER
========================================================= */

.cswb-pdf-footer {

    min-height: 48px;

    padding: 8px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    box-sizing: border-box;

    border-top: 1px solid #e7e3e7;

    background: #fff;

}


.cswb-pdf-footer span {

    color: #777;

    font-size: 11px;

}


.cswb-pdf-footer a {

    color: var(--cswb-purple);

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

}


.cswb-pdf-footer a:hover {

    color: var(--cswb-magenta);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .cswb-brochure-card {

        flex:
            0 0
            calc(
                (100% - 36px) / 3
            );

    }

}


/* =========================================================
   MOBILE TABLET
========================================================= */

@media (max-width: 700px) {

    .cswb-brochure-section {

        padding:
            55px 16px;

    }


    .cswb-brochure-card {

        flex:
            0 0
            calc(
                (100% - 18px) / 2
            );

    }


    .cswb-brochure-top {

        align-items:
            center;

    }


    .cswb-brochure-title h3 {

        font-size:
            23px;

    }


    .cswb-pdf-modal {

        padding:
            10px;

    }


    .cswb-pdf-modal-box {

        width:
            96vw;

        height:
            92vh;

        border-radius:
            12px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

    .cswb-brochure-heading {

        margin-bottom:
            40px;

    }


    .cswb-brochure-heading h2 {

        font-size:
            36px;

    }


    .cswb-brochure-heading p {

        font-size:
            13px;

    }


    .cswb-brochure-top {

        margin-bottom:
            17px;

    }


    .cswb-brochure-title h3 {

        font-size:
            20px;

    }


    .cswb-brochure-arrow {

        width:
            36px;

        height:
            36px;

        font-size:
            17px;

    }


    .cswb-brochure-card {

        flex:
            0 0 100%;

    }


    .cswb-brochure-track {

        gap:
            14px;

    }


    .cswb-brochure-overlay {

        opacity:
            1;

    }


    .cswb-brochure-view {

        width:
            40px;

        height:
            40px;

    }


    .cswb-pdf-modal {

        padding:
            5px;

    }


    .cswb-pdf-modal-box {

        width:
            98vw;

        height:
            94vh;

        border-radius:
            10px;

    }


    .cswb-pdf-modal-header {

        min-height:
            58px;

        padding:
            8px 12px;

    }


    .cswb-pdf-modal-header h3 {

        font-size:
            15px;

    }


    .cswb-pdf-close {

        width:
            36px;

        height:
            36px;

        font-size:
            24px;

    }


    .cswb-pdf-footer {

        padding:
            8px 12px;

    }

}


/* =========================================
   VIDEO POPUP
========================================= */

.cswp-video-popup {
    position: fixed;
    inset: 0;

    z-index: 999999;

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

    padding: 20px;

    box-sizing: border-box;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.cswp-video-popup.cswp-video-active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* DARK BACKGROUND */

.cswp-video-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.92);
}


/* VIDEO BOX */

.cswp-video-box {
    position: relative;

    z-index: 2;

    width: min(850px, 92vw);

    max-height: 90vh;

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


/* VIDEO */

.cswp-video-box video {
    display: block;

    width: 100%;

    max-height: 85vh;

    background: #000;

    border-radius: 4px;

    object-fit: contain;
}


/* CLOSE BUTTON */

.cswp-video-close {
    position: absolute;

    top: -48px;
    right: 0;

    z-index: 5;

    width: 38px;
    height: 38px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: #8d008d;

    color: #fff;

    font-size: 27px;

    line-height: 38px;

    text-align: center;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.cswp-video-close:hover {
    background: #c600b5;

    transform: rotate(90deg);
}


/* =========================================
   VIDEO BUTTON
========================================= */

.cswp-video-button {
    cursor: pointer;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .cswp-video-popup {
        padding: 12px;
    }

    .cswp-video-box {
        width: 96vw;
    }

    .cswp-video-box video {
        max-height: 80vh;
    }

    .cswp-video-close {
        top: -45px;

        width: 34px;
        height: 34px;

        font-size: 23px;

        line-height: 34px;
    }

}



/* ==========================================
   INVITATION VIDEO POPUP
========================================== */

.cswp-video-popup {
    position: fixed;
    inset: 0;

    z-index: 999999;

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

    padding: 20px;

    box-sizing: border-box;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.cswp-video-popup.cswp-video-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* BACKGROUND */

.cswp-video-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, .92);
}


/* VIDEO CONTAINER */

.cswp-video-container {
    position: relative;

    z-index: 2;

    width: 900px;
    max-width: 92vw;

    max-height: 90vh;
}


/* VIDEO */

.cswp-video-container video {
    display: block;

    width: 100%;
    height: auto;

    max-height: 85vh;

    background: #000;

    border-radius: 5px;

    object-fit: contain;
}


/* CLOSE */

.cswp-video-close {
    position: absolute;

    right: 0;
    top: -48px;

    width: 38px;
    height: 38px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #8d008d;

    color: #fff;

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

    cursor: pointer;

    z-index: 5;

    transition:
        background .2s ease,
        transform .2s ease;
}


.cswp-video-close:hover {
    background: #c600b5;

    transform: rotate(90deg);
}


/* ==========================================
   VIDEO BUTTON
========================================== */

.cswp-video-button {
    cursor: pointer;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

    .cswp-video-popup {
        padding: 12px;
    }

    .cswp-video-container {
        width: 96vw;
    }

    .cswp-video-container video {
        max-height: 78vh;
    }

    .cswp-video-close {
        top: -45px;

        width: 34px;
        height: 34px;

        font-size: 23px;
        line-height: 34px;
    }

}


@media (max-width: 991px) {

    /* Main Navigation */
    .csweb-nav-menu {
        display: none;
    }

    .csweb-nav-menu.active {
        display: block;
    }


    /* Dropdown hidden by default */
    .csweb-dropdown-menu {
        display: none;
    }


    /* Dropdown opens when active */
    .csweb-dropdown.active > .csweb-dropdown-menu {
        display: block;
    }


    /* Rotate arrow */
    .csweb-dropdown > a i {
        transition: transform 0.3s ease;
    }

    .csweb-dropdown.active > a i {
        transform: rotate(180deg);
    }

}



.csw-repair-hero-2026 {
  --csw-purple: #7100f5;
  --csw-violet: #a100ff;
  --csw-navy: #07152f;
  --csw-text: #0b1533;

  position: relative;
  width: 100%;
  min-height: 396px;
  overflow: hidden;
  isolation: isolate;
  background-color: #f5f2ff;

  /* Replace with your uploaded background image URL */
  /* background-image: url("../img/laptop-repair-banner.png"); */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

   box-sizing: border-box;
}

@media (max-width: 767px) {
  .csw-repair-hero-2026 {
    background-image: none !important;
    background-color: #f5f2ff;
  }
}


@media (max-width: 767px) {
  .csw-repair-hero-2026,
  .csw-repair-hero-2026__overlay {
    background-image: none !important;
            margin-bottom: -140px;
  }

  .csw-repair-hero-2026 {
    background-color: #f5f2ff;
  }
}

.csw-repair-hero-2026 *,
.csw-repair-hero-2026 *::before,
.csw-repair-hero-2026 *::after {
  box-sizing: border-box;
}

.csw-repair-hero-2026__overlay {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 396px;
  padding: 25px 4.4%;
  background: linear-gradient(
    90deg,
    rgba(249, 247, 255, 0.18) 0%,
    rgba(249, 247, 255, 0.08) 39%,
    transparent 58%
  );
}

.csw-repair-hero-2026__content {
  position: relative;
  z-index: 2;
  width: 45%;
  max-width: 490px;
  margin-top: 0;
  color: var(--csw-text);
}

.csw-repair-hero-2026__eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #17213c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.5;
  margin-top: 75px;
}

.csw-repair-hero-2026__title {
  margin: 0 0 10px;
  color: var(--csw-text);
  font-size: clamp(30px, 3.55vw, 46px);
  font-weight: 800;
  line-height: 0.99;
  letter-spacing: -1.6px;
}

.csw-repair-hero-2026__title span {
  color: #7100ed;
}

.csw-repair-hero-2026__description {
 text-align:justify;
   margin: 0 0 17px;
  color: #39415b;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.48;
}

.csw-repair-hero-2026__platforms {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 50px;
  max-width: 435px;
  margin: 0 0 20px;
}

.csw-repair-hero-2026__platform {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--csw-text);
}

.csw-repair-hero-2026__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  margin-bottom: 3px;
  color: #6900ee;
  font-size: 23px;
}

.csw-repair-hero-2026__platform strong {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
}

.csw-repair-hero-2026__platform small {
  margin-top: 2px;
  color: #555b70;
  font-size: 9px;
  line-height: 1.3;
  white-space: nowrap;
}

.csw-repair-hero-2026__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.csw-repair-hero-2026__button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 19px;
  border: 1px solid #7100f5;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  transition: background-color 0.25s ease,
              color 0.25s ease,
              transform 0.25s ease,
              box-shadow 0.25s ease;
}

.csw-repair-hero-2026__button:hover {
  transform: translateY(-2px);
}

.csw-repair-hero-2026__button--primary {
  color: #fff !important;
  background: linear-gradient(110deg, #6500ed, #8500f5);
  box-shadow: 0 6px 16px rgba(113, 0, 245, 0.13);
}

.csw-repair-hero-2026__button--primary:hover {
  color: #fff !important;
  background: #5000c7;
  box-shadow: 0 8px 20px rgba(113, 0, 245, 0.23);
}

.csw-repair-hero-2026__button--secondary {
  color: #6500d9 !important;
  background: rgba(255, 255, 255, 0.76);
}

.csw-repair-hero-2026__button--secondary:hover {
  color: #fff !important;
  background: #7100ed;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .csw-repair-hero-2026,
  .csw-repair-hero-2026__overlay {
    min-height: 365px;
  }

  .csw-repair-hero-2026 {
    background-position: center;
  }

  .csw-repair-hero-2026__overlay {
    padding: 22px 3.5%;
    background: linear-gradient(
      90deg,
      rgba(249, 247, 255, 0.8) 0%,
      rgba(249, 247, 255, 0.56) 43%,
      rgba(249, 247, 255, 0.03) 75%
    );
  }

  .csw-repair-hero-2026__content {
    width: 53%;
  }

  .csw-repair-hero-2026__title {
    font-size: clamp(30px, 4vw, 39px);
  }

  .csw-repair-hero-2026__description {
    font-size: 12px;
  }

  .csw-repair-hero-2026__platforms {
    gap: 5px;
  }

  .csw-repair-hero-2026__platform strong,
  .csw-repair-hero-2026__platform small {
    font-size: 9px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .csw-repair-hero-2026 {
    min-height: auto;
    background-size: auto 285px;
    background-position: center bottom;
    background-color: #f8f6ff;
            margin-top: -70px;
  }

  .csw-repair-hero-2026__overlay {
    display: block;
    min-height: auto;
    padding: 27px 20px 300px;
    background: linear-gradient(
      180deg,
      #f8f6ff 0%,
      rgba(248, 246, 255, 0.98) 43%,
      rgba(248, 246, 255, 0.90) 61%,
      rgba(248, 246, 255, 0.04) 100%
    );
  }

  .csw-repair-hero-2026__content {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .csw-repair-hero-2026__eyebrow {
    margin-bottom: 10px;
    font-size: 9px;
    letter-spacing: 1.4px;
  }

  .csw-repair-hero-2026__title {
    margin-bottom: 13px;
    font-size: clamp(32px, 8.4vw, 43px);
    line-height: 1.03;
    letter-spacing: -1.2px;
  }

  .csw-repair-hero-2026__description {
    max-width: 460px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.55;
  }

  .csw-repair-hero-2026__platforms {
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 20px;
  }

  .csw-repair-hero-2026__icon {
    font-size: 21px;
  }

  .csw-repair-hero-2026__platform strong {
    font-size: 8px;
  }

  .csw-repair-hero-2026__platform small {
    font-size: 8px;
    white-space: normal;
  }

  .csw-repair-hero-2026__actions {
    gap: 9px;
  }

  .csw-repair-hero-2026__button {
    min-height: 43px;
    gap: 7px;
    padding: 0 13px;
    font-size: 11px;
  }
}

/* Small mobile */
@media (max-width: 380px) {
  .csw-repair-hero-2026__overlay {
    padding-right: 14px;
    padding-left: 14px;
  }

  .csw-repair-hero-2026__title {
    font-size: 31px;
  }

  .csw-repair-hero-2026__platforms {
    gap: 4px;
  }

  .csw-repair-hero-2026__platform strong,
  .csw-repair-hero-2026__platform small {
    font-size: 9px;
  }

  .csw-repair-hero-2026__button {
    padding: 0 10px;
    font-size: 10px;
  }
}



/* CS WEB SOLUTION | PREMIUM FEATURES SECTION */

.csw-premium-features-362,
.csw-premium-features-362 * {
  box-sizing: border-box;
}

.csw-premium-features-362 {
  --csw-pf-accent: #a22cff;
  --csw-pf-dark: #071a3e;
  --csw-pf-ink: #111b35;

  position: relative;
  overflow: hidden;
  padding: 48px 4%;
  color: #fff;
 
  background-color: #071a3e;
  background-image:
    linear-gradient(
      120deg,
      rgba(5, 20, 52, .97),
      rgba(9, 34, 78, .94)
    ),
    url("YOUR-UPLOADED-IMAGE-URL-HERE");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.csw-premium-features-362::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -110px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(181, 100, 255, .15);
  border-radius: 50%;
  box-shadow:
    0 0 0 35px rgba(181, 100, 255, .035),
    0 0 0 75px rgba(181, 100, 255, .025);
  pointer-events: none;
}

.csw-premium-features-362__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Heading */
.csw-premium-features-362__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 35px;
  margin-bottom: 28px;
}

.csw-premium-features-362__heading {
  flex: 1 1 50%;
}

.csw-premium-features-362__eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #d4b5ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
}

.csw-premium-features-362__heading h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(29px, 3.3vw, 43px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.2px;
}

.csw-premium-features-362__heading h2 span {
  color: #c15aff;
}

.csw-premium-features-362__intro {
  display: flex;
  flex: 1 1 50%;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.csw-premium-features-362__intro p {
  max-width: 370px;
  margin: 0;
  color: #d4def1;
  font-size: 13px;
  line-height: 1.7;
}

.csw-premium-features-362__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid rgba(204, 155, 255, .8);
  border-radius: 8px;
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .25s ease, border-color .25s ease;
}

.csw-premium-features-362__view:hover {
  border-color: #c15aff;
  background: #7300df;
}

.csw-premium-features-362__view span {
  font-size: 17px;
}

/* Three cards per row */
.csw-premium-features-362__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.csw-premium-features-362__card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 215px;
  flex-direction: column;
  padding: 23px 22px 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 15px;
  color: var(--csw-pf-ink);
  background: linear-gradient(145deg, #fff 0%, #f8f7ff 100%);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .10);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.csw-premium-features-362__card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #7d20f3, #d35bff);
  opacity: 0;
  transition: opacity .25s ease;
}

.csw-premium-features-362__card:hover {
  transform: translateY(-5px);
  border-color: #d7b6ff;
  box-shadow: 0 15px 34px rgba(0, 0, 0, .19);
}

.csw-premium-features-362__card:hover::after {
  opacity: 1;
}

.csw-premium-features-362__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 17px;
}

.csw-premium-features-362__icon {
  display: inline-flex;
  width: 49px;
  height: 49px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  font-size: 21px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .10);
}

.csw-premium-features-362__number {
  color: #d5d7e5;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.csw-pf-purple { background: linear-gradient(135deg, #a000f5, #6c16df); }
.csw-pf-blue { background: linear-gradient(135deg, #4594ff, #1556db); }
.csw-pf-green { background: linear-gradient(135deg, #2bdc91, #079956); }
.csw-pf-red { background: linear-gradient(135deg, #ff727a, #e82b48); }
.csw-pf-orange { background: linear-gradient(135deg, #ffc344, #f08a00); }
.csw-pf-cyan { background: linear-gradient(135deg, #28c4ec, #1763e7); }
.csw-pf-violet { background: linear-gradient(135deg, #ad70ff, #7028d9); }
.csw-pf-pink { background: linear-gradient(135deg, #ff66bd, #d81783); }

.csw-premium-features-362__card h3 {
  margin: 0 0 10px;
  color: #101a36;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}

.csw-premium-features-362__card p {
  margin: 0 0 18px;
  color: #586176;
  font-size: 13px;
  line-height: 1.65;
}

.csw-premium-features-362__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #eceaf5;
  color: #6e2ad7;
  font-size: 11px;
  font-weight: 700;
}

.csw-premium-features-362__bottom i {
  font-size: 12px;
  transition: transform .25s ease;
}

.csw-premium-features-362__card:hover
.csw-premium-features-362__bottom i {
  transform: translateX(4px);
}

.csw-premium-features-362__highlight {
  background: linear-gradient(145deg, #f9f3ff, #fff);
}

/* Closing call-to-action */
.csw-premium-features-362__footer {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: 25px;
  padding: 20px 24px;
  border: 1px solid rgba(203, 167, 255, .27);
  border-radius: 13px;
  background: linear-gradient(
    105deg,
    rgba(91, 34, 166, .36),
    rgba(13, 34, 74, .83)
  );
}

.csw-premium-features-362__footer-icon {
  display: flex;
  width: 49px;
  height: 49px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #8b20ed;
  color: #fff;
  font-size: 21px;
}

.csw-premium-features-362__footer-copy {
  flex: 1;
  min-width: 0;
}

.csw-premium-features-362__footer-copy h3 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.csw-premium-features-362__footer-copy p {
  margin: 0;
  color: #d6deef;
  font-size: 12px;
  line-height: 1.5;
}

.csw-premium-features-362__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 13px 19px;
  border-radius: 8px;
  color: #fff !important;
  background: linear-gradient(110deg, #7d19ed, #a326fa);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

.csw-premium-features-362__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(153, 38, 255, .3);
}

.csw-premium-features-362__cta span {
  font-size: 17px;
}

/* Tablet: 2 cards per row */
@media (max-width: 1000px) {
  .csw-premium-features-362 {
    padding: 38px 3%;
  }

  .csw-premium-features-362__header {
    align-items: flex-start;
    gap: 20px;
  }

  .csw-premium-features-362__intro {
    flex-direction: column;
    align-items: flex-start;
  }

  .csw-premium-features-362__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
  }

  .csw-premium-features-362__card {
    min-height: 195px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .csw-premium-features-362 {
    padding: 32px 15px;
  }

  .csw-premium-features-362__header {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 22px;
  }

  .csw-premium-features-362__heading h2 {
    font-size: 31px;
    letter-spacing: -.7px;
  }

  .csw-premium-features-362__intro {
    width: 100%;
    gap: 12px;
  }

  .csw-premium-features-362__intro p {
    font-size: 12px;
  }

  .csw-premium-features-362__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .csw-premium-features-362__card {
    min-height: 205px;
    padding: 15px 13px 13px;
    border-radius: 11px;
  }

  .csw-premium-features-362__top {
    margin-bottom: 14px;
  }

  .csw-premium-features-362__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 17px;
  }

  .csw-premium-features-362__number {
    font-size: 21px;
  }

  .csw-premium-features-362__card h3 {
    font-size: 13px;
    line-height: 1.4;
  }

  .csw-premium-features-362__card p {
    font-size: 13px;
    line-height: 1.55;
  }

  .csw-premium-features-362__bottom {
    font-size: 10px;
  }

  .csw-premium-features-362__footer {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 13px;
    padding: 17px;
  }

  .csw-premium-features-362__footer-copy {
    flex-basis: calc(100% - 65px);
  }

  .csw-premium-features-362__footer-copy h3 {
    font-size: 15px;
  }

  .csw-premium-features-362__footer-copy p {
    font-size: 11px;
  }

  .csw-premium-features-362__cta {
    width: 100%;
  }
}

/* Very small phones */
@media (max-width: 360px) {
  .csw-premium-features-362__grid {
    grid-template-columns: 1fr;
  }

  .csw-premium-features-362__card {
    min-height: 0;
  }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .csw-premium-features-362 *,
  .csw-premium-features-362 *::before,
  .csw-premium-features-362 *::after {
    transition: none !important;
  }
}



/* CS Web Solution - How It Works */
.csw-workflow-729,
.csw-workflow-729 * {
  box-sizing: border-box;
}

.csw-workflow-729 {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 23px 3.2% 27px;
  color: #fff;
 
  background-color: #080d2b;
  background-image:
    linear-gradient(
      90deg,
      rgba(5, 10, 38, .88),
      rgba(7, 12, 39, .82)
    ),
    url("YOUR-UPLOADED-IMAGE-URL-HERE");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.csw-workflow-729__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.csw-workflow-729__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 19px;
}

.csw-workflow-729__header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(27px, 3.2vw, 43px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
}

.csw-workflow-729__header h2 span {
  color: #a51cff;
  background: linear-gradient(90deg, #7e21ff, #d02cff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.csw-workflow-729__header p {
  margin: 0;
  color: #e1e4f0;
  font-size: clamp(11px, 1.2vw, 15px);
  line-height: 1.5;
  text-align: right;
}

/* Five-step horizontal workflow */
.csw-workflow-729__steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 7px;
}

.csw-workflow-729__step {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.csw-workflow-729__visual {
  position: relative;
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
}

.csw-workflow-729__number {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #8b20ff, #5412e6);
  box-shadow: 0 3px 12px rgba(104, 25, 255, .22);
  font-size: 14px;
  font-weight: 800;
}

.csw-workflow-729__circle {
  display: flex;
  width: 61px;
  height: 61px;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: #fff;
  color: #7114db;
  font-size: 27px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .18);
  transition: transform .25s ease, box-shadow .25s ease;
}

.csw-workflow-729__step:hover .csw-workflow-729__circle {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(126, 35, 255, .3);
}

.csw-workflow-729__step h3 {
  margin: 0 0 5px;
  color: #fff;
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 800;
  line-height: 1.35;
}

.csw-workflow-729__step p {
  margin: 0;
  color: #d8d9e7;
  font-size: clamp(10px, 1.1vw, 13px);
  line-height: 1.5;
}

.csw-workflow-729__arrow {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 15px;
  color: #f4f2ff;
  font-size: clamp(23px, 3vw, 36px);
  font-weight: 300;
  line-height: 1;
}

/* Tablet */
@media (max-width: 760px) {
  .csw-workflow-729 {
    padding: 25px 18px;
  }

  .csw-workflow-729__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .csw-workflow-729__header p {
    text-align: left;
  }

  .csw-workflow-729__steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px 5px;
  }

  .csw-workflow-729__visual {
    min-height: 55px;
  }

  .csw-workflow-729__number {
    width: 29px;
    height: 29px;
    font-size: 11px;
  }

  .csw-workflow-729__circle {
    width: 49px;
    height: 49px;
    font-size: 21px;
  }

  .csw-workflow-729__arrow {
    display: none;
  }

  .csw-workflow-729__step h3 {
    font-size: 11px;
  }

  .csw-workflow-729__step p {
    font-size: 10px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .csw-workflow-729 {
    padding: 25px 16px;
  }

  .csw-workflow-729__header h2 {
    font-size: 30px;
  }

  .csw-workflow-729__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
  }

  .csw-workflow-729__step {
    padding: 8px 5px;
  }

  .csw-workflow-729__visual {
    min-height: 61px;
    margin-bottom: 10px;
  }

  .csw-workflow-729__number {
    left: calc(50% - 43px);
    width: 31px;
    height: 31px;
    font-size: 11px;
  }

  .csw-workflow-729__circle {
    width: 57px;
    height: 57px;
    font-size: 24px;
  }

  .csw-workflow-729__step h3 {
    font-size: 13px;
  }

  .csw-workflow-729__step p {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csw-workflow-729__circle {
    transition: none;
  }
}


/* CS WEB SOLUTION - ROLE ACCESS AND PRICING */

.csw-access-pricing-841,
.csw-access-pricing-841 * {
  box-sizing: border-box;
}

.csw-access-pricing-841 {
  --csw-ap-purple: #6415d8;
  --csw-ap-bright: #8a27f5;
  --csw-ap-ink: #101936;
  --csw-ap-muted: #5c6377;

  position: relative;
  width: 100%;
  padding: 25px 4%;
  overflow: hidden;
  color: var(--csw-ap-ink);
 
  background-color: #faf9ff;
  background-image:
    linear-gradient(rgba(255,255,255,.91), rgba(250,248,255,.94)),
    url("YOUR-UPLOADED-IMAGE-URL-HERE");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.csw-access-pricing-841__container {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) 1px minmax(280px, 1.1fr);
  align-items: stretch;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Section headers */
.csw-access-pricing-841__section-head {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr);
  align-items: center;
  gap: 20px;
  margin-bottom: 17px;
}

.csw-access-pricing-841__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #6834bd;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
}

.csw-access-pricing-841__section-head h2,
.csw-access-pricing-841__pricing > h2 {
  margin: 0;
  color: #111a39;
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.6px;
}

.csw-access-pricing-841__section-head h2 span,
.csw-access-pricing-841__pricing > h2 span {
  color: #6d19d9;
}

.csw-access-pricing-841__section-head > p {
  margin: 12px 0 0;
  color: #50576d;
  font-size: 11px;
  line-height: 1.5;
}

/* Role cards */
.csw-access-pricing-841__role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.csw-access-pricing-841__role-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ece9f6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 13px rgba(43, 27, 93, .055);
  transition: transform .25s ease, box-shadow .25s ease;
}

.csw-access-pricing-841__role-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 23px rgba(43, 27, 93, .12);
}

.csw-access-pricing-841__photo {
  width: 100%;
  height: clamp(76px, 8.2vw, 112px);
  overflow: hidden;
  background: #e7e9f3;
}

.csw-access-pricing-841__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform .4s ease;
}

.csw-access-pricing-841__role-card:hover
.csw-access-pricing-841__photo img {
  transform: scale(1.05);
}

.csw-access-pricing-841__role-info {
  min-height: 89px;
  padding: 9px 4px 10px;
  text-align: center;
}

.csw-access-pricing-841__role-icon {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
}

.csw-access-pricing-841__purple { color: #6515df; }
.csw-access-pricing-841__gold { color: #d99b0c; }
.csw-access-pricing-841__green { color: #139c60; }
.csw-access-pricing-841__red { color: #e63760; }

.csw-access-pricing-841__role-info h3 {
  margin: 0 0 5px;
  color: #17203e;
  font-size:15px !important;
  font-weight: 800;
  line-height: 1.25;
}

.csw-access-pricing-841__role-info p {
  margin: 0;
  color: #5b6278;
  font-size: 13px;
  line-height: 1.45;
}

/* Divider */
.csw-access-pricing-841__divider {
  width: 1px;
  background: #e6e1f0;
}

/* Pricing area */
.csw-access-pricing-841__pricing {
  min-width: 0;
}

.csw-access-pricing-841__pricing > h2 {
  margin-bottom: 16px;
  font-size: clamp(16px, 1.65vw, 22px);
}

.csw-access-pricing-841__plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}

.csw-access-pricing-841__plan {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 14px 12px 12px;
  border-radius: 11px;
}

.csw-access-pricing-841__plan-light {
  border: 1px solid #e7e0f6;
  background: linear-gradient(160deg, #fff, #f7f4ff);
  box-shadow: 0 4px 12px rgba(54, 28, 105, .04);
}

.csw-access-pricing-841__plan-dark {
  border: 1px solid rgba(151, 103, 255, .5);
  color: #fff;
  background: linear-gradient(145deg, #4810a7, #281070 70%, #4d24b6);
  box-shadow: 0 7px 17px rgba(57, 18, 129, .15);
}

.csw-access-pricing-841__popular {
  position: absolute;
  top: -9px;
  right: 8px;
  padding: 4px 7px;
  border-radius: 20px;
  color: #5112a8;
  background: #f0dfff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .6px;
}

.csw-access-pricing-841__plan h3 {
  margin: 0 0 2px;
  color: #282054;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}

.csw-access-pricing-841__plan-dark h3 {
  color: #fff;
}

.csw-access-pricing-841__branches {
  margin: 0 0 3px;
  color: #e3d7ff;
  font-size: 10px;
  text-align: center;
}

.csw-access-pricing-841__price {
  margin: 7px 0 11px;
  color: #151c48;
  font-size: clamp(23px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  text-align: center;
  white-space: nowrap;
}

.csw-access-pricing-841__plan-dark .csw-access-pricing-841__price {
  margin-top: 4px;
  color: #fff;
}

.csw-access-pricing-841__plan ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csw-access-pricing-841__plan li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #525a70;
  font-size: 15px;
  line-height: 1.4;
}

.csw-access-pricing-841__plan li i {
  margin-top: 2px;
  color: #7620e7;
  font-size: 17px;
}

.csw-access-pricing-841__plan-dark li {
  color: #f2ecff;
}

.csw-access-pricing-841__plan-dark li i {
  color: #fff;
}

.csw-access-pricing-841__renewal {
  margin-top: 14px;
  padding: 8px 5px;
  border-radius: 6px;
  color: #291443;
  background: linear-gradient(100deg, #ffd96b, #ffbd25);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.csw-access-pricing-841__plan-link {
  display: block;
  margin-top: auto;
  padding: 10px 4px 0;
  color: #6515d8 !important;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  text-decoration: none !important;
}

.csw-access-pricing-841__plan-link span {
  padding-left: 5px;
}

.csw-access-pricing-841__plan-dark .csw-access-pricing-841__plan-link {
  color: #fff !important;
}

/* Tablet layout */
@media (max-width: 1050px) {
  .csw-access-pricing-841 {
    padding: 30px 3%;
  }

  .csw-access-pricing-841__container {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
  }

  .csw-access-pricing-841__divider {
    width: 100%;
    height: 1px;
  }

  .csw-access-pricing-841__photo {
    height: 145px;
  }

  .csw-access-pricing-841__role-info h3 {
    font-size: 13px;
  }

  .csw-access-pricing-841__role-info p {
    font-size: 11px;
  }

  .csw-access-pricing-841__pricing > h2 {
    font-size: 23px;
  }

  .csw-access-pricing-841__plans {
    max-width: 520px;
  }
}

/* Mobile layout */
@media (max-width: 560px) {
  .csw-access-pricing-841 {
    padding: 25px 14px;
  }

  .csw-access-pricing-841__section-head {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .csw-access-pricing-841__section-head h2 {
    font-size: 25px;
  }

  .csw-access-pricing-841__section-head > p {
    margin-top: 5px;
    font-size: 12px;
  }

  .csw-access-pricing-841__role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .csw-access-pricing-841__photo {
    height: 135px;
  }

  .csw-access-pricing-841__role-info {
    min-height: 90px;
    padding: 11px 5px;
  }

  .csw-access-pricing-841__role-info h3 {
    font-size: 12px;
  }

  .csw-access-pricing-841__role-info p {
    font-size: 11px;
  }

  .csw-access-pricing-841__pricing > h2 {
    font-size: 21px;
  }

  .csw-access-pricing-841__plans {
    gap: 10px;
  }

  .csw-access-pricing-841__plan {
    padding: 15px 10px 12px;
  }

  .csw-access-pricing-841__price {
    font-size: clamp(22px, 6vw, 30px);
  }

  .csw-access-pricing-841__plan li {
    font-size: 17px;
  }
}

@media (max-width: 350px) {
  .csw-access-pricing-841__plans {
    grid-template-columns: 1fr;
  }

  .csw-access-pricing-841__photo {
    height: 115px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csw-access-pricing-841 *,
  .csw-access-pricing-841 *::before,
  .csw-access-pricing-841 *::after {
    transition: none !important;
  }
}


/* CS Web Solution - Anywhere Access Banner */
.csw-anywhere-563,
.csw-anywhere-563 * {
  box-sizing: border-box;
}

.csw-anywhere-563 {
  position: relative;
  width: 100%;
  min-height: 260px;
  overflow: hidden;
  padding: 24px 4.8%;
   color: #11183e;

  background-color: #f4f2ff;
  /* background-image:
    linear-gradient(
      90deg,
      rgba(248, 247, 255, .98) 0%,
      rgba(248, 247, 255, .96) 49%,
      rgba(248, 247, 255, .60) 64%,
      rgba(248, 247, 255, 0) 79%
    ),
    url("../img/cta.png"); */

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.csw-anywhere-563__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
}

.csw-anywhere-563__content {
  width: 68%;
}

.csw-anywhere-563__content h2 {
  margin: 0 0 5px;
  color: #5420d9;
  font-size: clamp(23px, 2.3vw, 32px);
  font-weight: 800;
  letter-spacing: -.7px;
  line-height: 1.2;
}

.csw-anywhere-563__subtitle {
  margin: 0 0 17px;
  color: #535b73;
  font-size: clamp(11px, 1.1vw, 14px);
  line-height: 1.5;
}

/* White feature strip */
.csw-anywhere-563__features {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 15px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 5px 22px rgba(77, 47, 150, .06);
  backdrop-filter: blur(8px);
}

.csw-anywhere-563__feature {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.csw-anywhere-563__icon {
  display: flex;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #6d22eb;
  background: #eee6ff;
  font-size: 20px;
  transition: background .25s ease, transform .25s ease;
}

.csw-anywhere-563__feature:hover .csw-anywhere-563__icon {
  transform: translateY(-3px);
  background: #e0d0ff;
}

.csw-anywhere-563__feature h3 {
  margin: 0 0 4px;
  color: #151b3b;
  font-size:14px ;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

.csw-anywhere-563__feature p {
  margin: 0;
  color: #596078;
  font-size:  12px;
  line-height: 1.35;
  white-space: nowrap;
}

/* Tablet */
@media (max-width: 1000px) {
  .csw-anywhere-563 {
    min-height: 175px;
    padding: 24px 3%;
    background-position: center right;
  }

  .csw-anywhere-563__content {
    width: 78%;
  }

  .csw-anywhere-563__features {
    gap: 8px;
    padding: 11px 10px;
  }

  .csw-anywhere-563__feature {
    gap: 6px;
  }

  .csw-anywhere-563__icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

/* Mobile */
@media (max-width: 650px) {
  .csw-anywhere-563 {
    min-height: auto;
    padding: 27px 16px;
    background-image:
      linear-gradient(
        90deg,
        rgba(248, 247, 255, .97),
        rgba(248, 247, 255, .88)
      ),
      url("../img/cta.png");
    background-position: center;
  }

  .csw-anywhere-563__content {
    width: 100%;
  }

  .csw-anywhere-563__content h2 {
    font-size: 26px;
  }

  .csw-anywhere-563__subtitle {
    margin-bottom: 18px;
    font-size: 12px;
  }

  .csw-anywhere-563__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 10px;
    padding: 16px 12px;
    border-radius: 13px;
  }

  .csw-anywhere-563__feature {
    gap: 9px;
  }

  .csw-anywhere-563__icon {
    flex-basis: 37px;
    width: 37px;
    height: 37px;
    font-size: 18px;
  }

  .csw-anywhere-563__feature h3 {
    font-size: 11px;
  }

  .csw-anywhere-563__feature p {
    font-size: 9px;
  }
}

/* Very small mobile */
@media (max-width: 360px) {
  .csw-anywhere-563__features {
    grid-template-columns: 1fr;
  }

  .csw-anywhere-563__feature h3 {
    font-size: 12px;
  }

  .csw-anywhere-563__feature p {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csw-anywhere-563__icon {
    transition: none;
  }
}


 :root {
      --csdoc-purple: #8d168d;
      --csdoc-purple-dark: #590d62;
      --csdoc-purple-light: #f8eff9;
      --csdoc-black: #202027;
      --csdoc-white: #ffffff;
      --csdoc-bg: #f7f6f9;
      --csdoc-text: #484651;
      --csdoc-muted: #777481;
      --csdoc-border: #e9e4ed;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--csdoc-bg);
      color: var(--csdoc-text);
      font-family: "Segoe UI", Arial, sans-serif;
      line-height: 1.75;
    }

    .csdoc-page {
      overflow: hidden;
    }

    /* Header */
    .csdoc-header {
      position: relative;
      padding: 35px 0 75px;
      color: var(--csdoc-white);
     background: linear-gradient(120deg, #541b87, #8e2de2 70%, #35123d);
      isolation: isolate;
    }

    .csdoc-header::before {
      position: absolute;
      content: "";
      width: 380px;
      height: 380px;
      top: -210px;
      right: -100px;
      border: 1px solid rgba(192, 79, 198, .4);
      border-radius: 50%;
      box-shadow: 0 0 0 45px rgba(141, 22, 141, .08),
                  0 0 0 90px rgba(141, 22, 141, .05);
      z-index: -1;
    }

    .csdoc-header::after {
      position: absolute;
      content: "";
      bottom: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: #8e2de2;
    }

    .csdoc-brand {
      display: inline-flex;
      align-items: center;
      margin-bottom: 55px;
      padding: 10px 15px;
      background: var(--csdoc-white);
      border-radius: 10px;
    }

    .csdoc-logo {
      display: block;
      width: 175px;
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }

    .csdoc-eyebrow {
      display: inline-block;
      margin-bottom: 17px;
      color: #e58be8;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 2.3px;
      text-transform: uppercase;
    }

    .csdoc-main-title {
      max-width: 900px;
      margin: 0 0 24px;
      color: var(--csdoc-white);
      font-size: clamp(32px, 5vw, 56px);
      font-weight: 800;
      line-height: 1.17;
      letter-spacing: -1.4px;
    }

    .csdoc-main-title span {
      color: #d85bd9;
    }

    .csdoc-intro {
      max-width: 800px;
      margin: 0;
      color: #d3ced8;
      font-size: 16px;
    }

    /* Main content */
    .csdoc-main {
      padding: 30px 0 80px;
    }

    .csdoc-section-heading {
      margin-bottom: 32px;
    }

    .csdoc-section-heading h2 {
      margin: 0 0 12px;
      color: var(--csdoc-black);
      font-size: 29px;
      font-weight: 800;
    }

    .csdoc-heading-line {
      width: 65px;
      height: 4px;
      border-radius: 5px;
      background: #8e2de2;
    }

    /* Role cards */
    .csdoc-role-card {
      height: 100%;
      overflow: hidden;
      background: var(--csdoc-white);
      border: 1px solid var(--csdoc-border);
      border-radius: 16px;
      box-shadow: 0 8px 28px rgba(42, 24, 47, .045);
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .csdoc-role-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 17px 38px rgba(67, 25, 76, .11);
    }

    .csdoc-role-top {
      position: relative;
      display: flex;
      align-items: center;
      gap: 17px;
      padding: 26px 27px;
background: linear-gradient(115deg, #8e2de2, #8e2de2);      color: var(--csdoc-white);
    }

    .csdoc-role-top::after {
      position: absolute;
      content: "";
      bottom: 0;
      left: 0;
      width: 75px;
      height: 4px;
      background: #c83cc9;
    }

    .csdoc-role-icon {
      display: flex;
      flex: 0 0 54px;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 54px;
      color: white;
      font-size: 23px;
      background: rgba(141, 22, 141, .19);
      border: 1px solid rgba(214, 103, 218, .45);
      border-radius: 13px;
    }

    .csdoc-role-number {
      display: block;
      margin-bottom: 3px;
      color: #df7ce1;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.6px;
      text-transform: uppercase;
    }

    .csdoc-role-title {
      margin: 0;
      color: var(--csdoc-white);
      font-size: 23px;
      font-weight: 750;
    }

    .csdoc-role-body {
      padding: 27px;
    }

    .csdoc-purpose {
      margin-bottom: 27px;
      padding: 17px 18px;
      background: var(--csdoc-purple-light);
      border-left: 3px solid #8e2de2;
      border-radius: 0 9px 9px 0;
    }

    .csdoc-subtitle {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 15px;
      color: var(--csdoc-black);
      font-size: 16px;
      font-weight: 800;
    }

    .csdoc-subtitle i {
      color: #8e2de2;
    }

    .csdoc-purpose p {
      margin: 0;
      font-size: 14px;
      line-height: 1.8;
    }

    .csdoc-list {
      padding: 0;
      margin: 0 0 29px;
      list-style: none;
    }

    .csdoc-list li {
      position: relative;
      padding: 0 0 13px 25px;
      font-size: 14px;
      line-height: 1.75;
    }

    .csdoc-list li:last-child {
      padding-bottom: 0;
    }

    .csdoc-list li::before {
      position: absolute;
      top: 4px;
      left: 0;
      color: #8e2de2;
      content: "\f00c";
      font-family: "Font Awesome 6 Free";
      font-size: 12px;
      font-weight: 900;
    }

    /* Workflow */
    .csdoc-workflow {
      margin-bottom: 27px;
    }

    .csdoc-workflow-list {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .csdoc-workflow-list li {
      display: flex;
      align-items: flex-start;
      gap: 13px;
      padding-bottom: 15px;
      font-size: 14px;
      line-height: 1.7;
    }

    .csdoc-workflow-list li:last-child {
      padding-bottom: 0;
    }

    .csdoc-step-number {
      display: inline-flex;
      flex: 0 0 29px;
      align-items: center;
      justify-content: center;
      width: 29px;
      height: 29px;
      color: #8e2de2;
      background: var(--csdoc-purple-light);
      border: 1px solid #ead4eb;
      border-radius: 50%;
      font-size: 12px;
      font-weight: 800;
    }

    .csdoc-access {
      padding: 17px 18px;
      background: #faf7fb;
      border: 1px solid #eee2f0;
      border-radius: 10px;
      font-size: 14px;
      line-height: 1.75;
    }

    .csdoc-access strong {
      display: block;
      margin-bottom: 5px;
      color: var(--csdoc-black);
    }

    .csdoc-access strong i {
      margin-right: 6px;
      color: #8e2de2;
    }

    @media (max-width: 767.98px) {
      .csdoc-header {
        padding: 28px 0 55px;
      }

      .csdoc-brand {
        margin-bottom: 38px;
      }

      .csdoc-logo {
        width: 150px;
      }

      .csdoc-main-title {
        letter-spacing: -.7px;
      }

      .csdoc-intro {
        font-size: 15px;
      }

      .csdoc-main {
        padding: 42px 0 55px;
      }

      .csdoc-section-heading h2 {
        font-size: 25px;
      }

      .csdoc-role-top {
        padding: 22px;
      }

      .csdoc-role-body {
        padding: 22px;
      }

      .csdoc-role-title {
        font-size: 21px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .csdoc-role-card {
        transition: none;
      }
    }

    @media print {
      body {
        background: #fff;
      }

      .csdoc-header {
        padding: 25px 0;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
      }

      .csdoc-brand {
        margin-bottom: 20px;
      }

      .csdoc-main {
        padding: 25px 0;
      }

      .csdoc-role-card {
        box-shadow: none;
        break-inside: avoid;
      }

      .csdoc-role-top,
      .csdoc-purpose,
      .csdoc-access,
      .csdoc-step-number {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
      }
    }


    .csw-roles-952 {
  --csw952-blue: #2864b4;
  --csw952-navy: #173d70;
  --csw952-text: #202b3b;
  --csw952-muted: #667387;
  --csw952-border: #e1e8f1;

  padding: 40px 20px;
  background: #f5f8fc;
  font-family: "Segoe UI", Arial, sans-serif;
}

.csw-roles-952,
.csw-roles-952 * {
  box-sizing: border-box;
}

.csw-roles-952__container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

.csw-roles-952__heading {
  max-width: 760px;
  margin: 0 auto 45px;
  text-align: center;
}

.csw-roles-952__eyebrow {
  display: inline-block;
  margin-bottom: 13px;
  color: #8e2de2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
}

.csw-roles-952__heading h2 {
  margin: 0 0 15px;
  color: var(--csw952-text);
  font-size: clamp(29px, 4vw, 43px);
  font-weight: 800;
  line-height: 1.2;
}

.csw-roles-952__heading h2 span {
  color: #8e2de2;
}

.csw-roles-952__heading p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--csw952-muted);
  font-size: 15px;
  line-height: 1.8;
}

.csw-roles-952__line {
  width: 58px;
  height: 4px;
  margin: 22px auto 0;
  border-radius: 5px;
  background: #8e2de2;
}

.csw-roles-952__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.csw-roles-952__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--csw952-border);
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(28, 58, 99, .05);
  transition: transform .25s ease, box-shadow .25s ease;
}

.csw-roles-952__card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background: #8e2de2;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.csw-roles-952__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 35px rgba(28, 58, 99, .11);
}

.csw-roles-952__card:hover::before {
  transform: scaleX(1);
}

.csw-roles-952__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 175px;
  margin-bottom: 20px;
  overflow: hidden;
  /* background: #edf3fb; */
  border-radius: 11px;
}

.csw-roles-952__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius:10px;
  transition: transform .35s ease;
}

.csw-roles-952__card:hover .csw-roles-952__photo img {
  transform: scale(1.04);
}

.csw-roles-952__number {
  display: block;
  margin-bottom: 5px;
  color: #8e2de2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.csw-roles-952__card h3 {
  margin: 0 0 10px;
  color: var(--csw952-text);
  font-size: 21px;
  font-weight: 750;
}

.csw-roles-952__card p {
  flex-grow: 1;
  margin: 0 0 22px;
  color: var(--csw952-muted);
  font-size: 14px;
  line-height: 1.8;
}

.csw-roles-952__footer {
  padding-top: 15px;
  border-top: 1px solid #e9eef5;
  color: var(--csw952-navy);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1050px) {
  .csw-roles-952__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .csw-roles-952__photo {
    height: 210px;
  }
}

@media (max-width: 575px) {
  .csw-roles-952 {
    padding: 50px 16px;
  }

  .csw-roles-952__heading {
    margin-bottom: 30px;
  }

  .csw-roles-952__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .csw-roles-952__card {
    padding: 20px;
  }

  .csw-roles-952__photo {
    height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csw-roles-952__card,
  .csw-roles-952__photo img,
  .csw-roles-952__card::before {
    transition: none;
  }
}



.csw-pricing-963 {
  --cp-blue: #2864b4;
  --cp-navy: #173d70;
  --cp-light: #eef4fc;
  --cp-text: #202b3b;
  --cp-muted: #68768a;
  --cp-border: #dfe7f2;

  padding: 40px 20px;
  background: linear-gradient(180deg, #f8faff, #edf3fb);
  font-family: "Segoe UI", Arial, sans-serif;
}

.csw-pricing-963,
.csw-pricing-963 * {
  box-sizing: border-box;
}

.csw-pricing-963__container {
  max-width: 1080px;
  width: 100%;
  margin: auto;
}

.csw-pricing-963__heading {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}

.csw-pricing-963__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: #9060fc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.csw-pricing-963__heading h2 {
  margin: 0 0 15px;
  color: var(--cp-text);
  font-size: clamp(29px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.8px;
}

.csw-pricing-963__heading h2 span {
  color: #8e2de2;
}

.csw-pricing-963__heading p {
  max-width: 660px;
  margin: auto;
  color: var(--cp-muted);
  font-size: 15px;
  line-height: 1.85;
}

.csw-pricing-963__line {
  width: 58px;
  height: 4px;
  margin: 22px auto 0;
  background: #8e2de2;
  border-radius: 10px;
}

.csw-pricing-963__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 27px;
}

.csw-pricing-963__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px;
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  box-shadow: 0 12px 35px rgba(30, 62, 105, .07);
  transition: transform .25s ease, box-shadow .25s ease;
}

.csw-pricing-963__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 19px 42px rgba(30, 62, 105, .12);
}

.csw-pricing-963__card--featured {
  border: 2px solid #8e2de2;
  box-shadow: 0 15px 40px rgba(40, 100, 180, .13);
}

.csw-pricing-963__popular {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: -31px 0 23px;
  padding: 9px 15px;
  color: #fff;
  background: #8e2de2;
  border-radius: 0 0 8px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

.csw-pricing-963__plan-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.csw-pricing-963__plan-icon {
  display: flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color:#8e2de2;
  background: var(--cp-light);
  border-radius: 13px;
  font-size: 22px;
}

.csw-pricing-963__plan-icon--featured {
  color: #fff;
  background: #8e2de2;
}

.csw-pricing-963__plan-header h3 {
  margin: 0 0 5px;
  color: var(--cp-text);
  font-size: 21px;
  font-weight: 800;
}

.csw-pricing-963__plan-header p {
  margin: 0;
  color: var(--cp-muted);
  font-size: 12px;
  line-height: 1.6;
}

.csw-pricing-963__description {
  min-height: 76px;
  margin-bottom: 20px;
  color: var(--cp-muted);
  font-size: 13px;
  line-height: 1.85;
}

.csw-pricing-963__price-area {
  padding: 20px;
  background: #f7f9fc;
  border: 1px solid #e9eef6;
  border-radius: 12px;
}

.csw-pricing-963__price-area--featured {
  background: linear-gradient(135deg, #eaf2ff, #f6f9ff);
  border-color: #d6e5fa;
}

.csw-pricing-963__price-label {
  display: block;
  margin-bottom: 8px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 600;
}

.csw-pricing-963__price {
  color: #8e2de2;
  font-size: clamp(34px, 4vw, 42px);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -1px;
}

.csw-pricing-963__price-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: #8e2de2;
  font-size: 12px;
  font-weight: 750;
}

.csw-pricing-963__features-title {
  margin: 24px 0 15px;
  color: var(--cp-text);
  font-size: 14px;
  font-weight: 800;
}

.csw-pricing-963__features {
  display: grid;
  gap: 15px;
  padding: 0;
  margin: 0 0 22px;
  list-style: none;
}

.csw-pricing-963__features li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #8e2de2;
}

.csw-pricing-963__features li > i {
  flex-shrink: 0;
  margin-top: 3px;
  font-size: 15px;
}

.csw-pricing-963__features li span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.csw-pricing-963__features li strong {
  color: var(--cp-text);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

.csw-pricing-963__features li small {
  color: var(--cp-muted);
  font-size: 12px;
  line-height: 1.65;
}

.csw-pricing-963__summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: auto;
  margin-bottom: 20px;
  padding: 15px;
  background: #f6f8fc;
  border: 1px solid #e7edf6;
  border-radius: 10px;
}

.csw-pricing-963__summary > i {
  margin-top: 3px;
  color: #8e2de2;
  font-size: 18px;
}

.csw-pricing-963__summary div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.csw-pricing-963__summary strong {
  color: #8e2de2;
  font-size: 12px;
  line-height: 1.5;
}

.csw-pricing-963__summary span {
  color: var(--cp-muted);
  font-size: 11px;
  line-height: 1.7;
}

.csw-pricing-963__branch-highlight {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -3px 0 19px;
  padding: 13px 15px;
  color: #8e2de2;
  background: var(--cp-light);
  border: 1px solid #dce8f8;
  border-radius: 10px;
}

.csw-pricing-963__branch-highlight > i {
  font-size: 20px;
}

.csw-pricing-963__branch-highlight div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.csw-pricing-963__branch-highlight strong {
  color: #8e2de2;
  font-size: 13px;
}

.csw-pricing-963__branch-highlight span {
  color: var(--cp-muted);
  font-size: 11px;
}

.csw-pricing-963__renewal {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  margin-bottom: 20px;
  padding: 15px;
  background: #f4f7fc;
  border: 1px solid #dfe8f5;
  border-radius: 10px;
}

.csw-pricing-963__renewal-icon {
  display: flex;
  flex: 0 0 39px;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  color: #8e2de2;
  background: #e4edfa;
  border-radius: 9px;
}

.csw-pricing-963__renewal div:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.csw-pricing-963__renewal span {
  color: var(--cp-muted);
  font-size: 11px;
}

.csw-pricing-963__renewal strong {
  color: #8e2de2;
  font-size: 14px;
}

.csw-pricing-963__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 49px;
  margin-top: 0;
  padding: 13px 16px;
  border: 1px solid #8e2de2;
  border-radius: 9px;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  transition: background .2s ease, color .2s ease;
}

.csw-pricing-963__button--light {
  color: #8e2de2;
  background: #fff;
}

.csw-pricing-963__button--light:hover {
  color: #fff;
  background: #8e2de2;
}

.csw-pricing-963__button--primary {
  color: #fff;
  background: #8e2de2;
}

.csw-pricing-963__button--primary:hover {
  color: #fff;
  background: #8e2de2;
  border-color: #8e2de2;
}

.csw-pricing-963__button i {
  transition: transform .2s ease;
}

.csw-pricing-963__button:hover i {
  transform: translateX(4px);
}

@media (max-width: 760px) {
  .csw-pricing-963 {
    padding: 60px 16px;
  }

  .csw-pricing-963__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 500px;
    margin: 0 auto;
    gap: 30px;
  }

  .csw-pricing-963__card {
    padding: 25px 22px;
  }

  .csw-pricing-963__popular {
    margin-top: -26px;
  }

  .csw-pricing-963__description {
    min-height: 0;
  }

  .csw-pricing-963__heading {
    margin-bottom: 35px;
  }
}

@media (max-width: 380px) {
  .csw-pricing-963__card {
    padding: 22px 17px;
  }

  .csw-pricing-963__plan-header {
    gap: 10px;
  }

  .csw-pricing-963__plan-header h3 {
    font-size: 19px;
  }

  .csw-pricing-963__price {
    font-size: 35px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csw-pricing-963__card,
  .csw-pricing-963__button,
  .csw-pricing-963__button i {
    transition: none;
  }
}