@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&family=Roboto+Slab:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@100;200;300;400;500;600;700;800;900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');

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

body {
    margin: 0;
    font-family: 'Montserrat Alternates', sans-serif;
    font-family: 'Outfit', sans-serif;
    background-color: #d0dae933 !important;
    overflow: inherit !important;

}

:root {
    --primary: #006efe;
    --secondary: #30d1be;
    --light: #fff;
    --dark: #000;
    --button: linear-gradient(126deg, #2872d1, #35dbb7);
    --header: linear-gradient(#011230, #1071b6);
}

/* --- PRELOADER --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--header);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
}

#preloader video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: translateX(-100%);
}

.preloader-logo {
    position: relative;
    height: auto;
    width: 30%;
    z-index: 2;
    opacity: 1;
    animation: spin10 1s linear infinite;
}

@keyframes spin10 {
    0% {
        transform: translateY(-30px);
    }

    50% {
        transform: translateY(30px);
    }

    100% {
        transform: translateY(-30px);
    }
}

.btn-primary {
    padding: 13px 32px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: normal;
    font-size: 14px;
    letter-spacing: 1px;
    border: none;
    border-radius: 10px;
    color: var(--light);
    text-decoration: none;
    background: var(--button);
}

.side-menu-btn {
    position: fixed;
    top: 70%;
    left: -25px;
    background: var(--button);
    color: #fff;
    padding: 12px 16px;
    border-radius: 0 0 8px 8px;
    cursor: pointer;
    transform: translateY(-50%) rotate(-90deg);
    z-index: 1;
    transition: background 0.3s ease;
}

.side-menu-btn:hover {
    background: var(--button);
}

.container {
    max-width: 1250px;
}

.header-banner {
    overflow: hidden;
}

.animated-text {
    font-size: 35px;
    font-weight: 600;
    line-height: 1.5;
    overflow: hidden;
}

.heading,
.leftheading {
    margin-bottom: 20px;
    line-height: 1.2;
    font-family: 'Poppins', sans-serif;
    position: relative;
    text-align: start;
    color: var(--dark);
    font-size: 35px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: capitalize;
}

.heading strong,
.leftheading strong {
    font-size: 35px;
    color: var(--primary);
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}

/*--------------------------*/
        /*Cursor base*/
/*--------------------------*/

.cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease-out, width 0.3s, height 0.3s, background 0.3s, box-shadow 0.3s, border 0.3s;
    z-index: 9999;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    background-size: 200% 200%;
    animation: cursor-glow 3s infinite alternate ease-in-out,
        cursor-pulse 1.5s infinite alternate ease-in-out;
    box-shadow: 0 0 20px rgba(0, 110, 254, 0.7),
        0 0 40px rgba(48, 209, 190, 0.6);
}

.cursor.hover {
    width: 60px;
    height: 60px;
    background: transparent;
    border: 2px solid var(--light);
    box-shadow: 0 0 25px rgba(48, 209, 190, 1),
        0 0 50px rgba(0, 110, 254, 0.9);
    transform: translate(-50%, -50%) scale(1.2);
}

@keyframes cursor-glow {
    0% {
        background-position: left top;
    }

    50% {
        background-position: right center;
    }

    100% {
        background-position: left bottom;
    }
}

@keyframes cursor-pulse {
    from {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 15px rgba(0, 110, 254, 0.6),
            0 0 30px rgba(48, 209, 190, 0.4);
    }

    to {
        transform: translate(-50%, -50%) scale(1.3);
        box-shadow: 0 0 30px rgba(0, 110, 254, 1),
            0 0 60px rgba(48, 209, 190, 0.9);
    }
}

/*--------------------------*/
        /*Header*/
/*--------------------------*/

.header {
    padding: 25px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}

.header-left {
    display: flex;
    width: 50%;
    align-items: center;
    gap: 20px;
}

.logo {
    width: 40%;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
}

.support {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #fff;
}

.support a {
    text-decoration: none;
    color: #fff;
}

.support-call {
    height: 55px;
    width: 55px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
}

.support-call i {
    font-size: 20px;
}

.consult-btn {
    background: #fff;
    color: #0b1535 !important;
    padding: 15px 35px;
    border-radius: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.consult-btn:hover {
    background: #1f7aff;
    color: #fff !important;
}

.menu-icon {
    width: 60px;
    height: 60px;
    position: relative;
    border-radius: 100%;
    background-color: #fff;
    cursor: pointer;
    transition: all 500ms ease-in-out;
    align-items: center;
    justify-content: center;
    display: flex;
}

.menu-icon::before,
.menu-icon::after {
    top: 23px;
    left: -32px;
    width: 16px;
    height: 16px;
    content: "";
    border-radius: 100%;
    position: absolute;
    background-color: #fff;
}

.menu-icon::after {
    top: 27px;
    width: 8px;
    height: 8px;
    left: -12px;
}

.menu-icon button {
    gap: 5px;
    padding: 0;
    width: 25px;
    display: -webkit-box;
    display: flex;
    border: none;
    flex-wrap: wrap;
    justify-content: center;
    background-color: transparent;
}

.menu-icon button span {
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background-color: #161714;
    -webkit-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
/*--------------------------*/
        /* Side Navbar */
/*--------------------------*/

.side-navbar {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100%;
    background: #161c33;
    transition: all 0.4s ease;
    padding: 40px;
    z-index: 2000;
}

.side-navbar.active {
    left: 0;
    animation: slideIn 0.5s ease;
}

@keyframes slideIn {
    from {
        left: -320px;
    }

    to {
        left: 0;
    }
}

.side-navbar ul {
    list-style: none;
    padding: 0;
}


.side-navbar ul li {
    margin: 30px 0;
}

.side-navbar ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
}

#closeBtn {
    font-size: 18px;
    color: #fff;
    position: absolute;
    top: 25px;
    right: 10% !important;
    cursor: pointer;
}

.side-navbar .dropdown-menu {
    position: absolute !important;
    background: #182440;
    top: -30px !important;
    left: 250px !important;
    border: none;
    box-shadow: none;
    padding-top: 10px;
    display: none;
}

.side-navbar .dropdown-menu li {
    margin: 0px !important;
}

.side-navbar .dropdown-menu::before {
    content: "";
    position: absolute;
    top: 12px;
    left: -30px;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid #182440;
}

.side-navbar .dropdown-menu li a {
    padding: 15px 50px !important;
}

.nav-link {
    display: inline-block !important;
}

.nav-link:hover {
    color: #fff !important;
}

.side-navbar .dropdown-menu li a:hover {
    background: var(--button);
    color: var(--light);
}

.side-navbar .dropdown {
    width: 250px;
}

.side-navbar .dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu1 {
    position: absolute !important;
    background: #182440;
    top: -30px !important;
    left: 350px !important;
    border: none;
    box-shadow: none;
    padding-top: 10px;
    display: none;
}

.side-navbar .dropdown-menu1::before {
    content: "";
    position: absolute;
    top: 12px;
    left: -30px;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid #182440;
}

.dropdown-submenu:hover .dropdown-menu1 {
    display: block;
}

/*--------------------------*/
        /* Banner Section */
/*--------------------------*/


.banner {
    padding-top: 15rem;
    padding-bottom: 5rem;
}

.carousel-item h1 {
    font-size: 3rem;
    font-weight: 700;
    animation: text3D 1s ease;
}

.carousel-item p {
    font-size: 1.1rem;
    margin: 15px 0;
}

.carousel-item .btn {
    padding: 10px 22px;
    border-radius: 50px;
    background: #1f7aff;
    border: none;
    font-weight: 600;
    color: #fff;
}

.header-banner .carousel-control-prev,
.header-banner .carousel-control-next {
    position: absolute;
    bottom: -15% !important;
    top: auto !important;
    transform: translateY(0);
    background-color: #fff !important;
    border-radius: 50%;
    height: 50px !important;
    width: 50px !important;
    color: #000;
    font-size: 28px;
    opacity: 1;
}

.header-banner .carousel-control-prev i,
.header-banner .carousel-control-next i {
    color: #0000005c;
}

.header-banner .dot-left {
    position: absolute;
    left: 20%;
}

nav {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
    background: transparent !important;
    transition: background-color 0.3s ease;
}


.banner .carousel-item {
    position: relative;
    transition: opacity 0.6s ease-in-out;
    transform: translateX(0) !important;
}

.header-banner .carousel-control-prev:hover,
.header-banner .carousel-control-next:hover,
.header-banner .carousel-control-prev:active,
.header-banner .carousel-control-next:active {
    color: #000;
}

.header-banner .carousel-control-prev {
    left: 0 !important;
}

.header-banner .carousel-control-next {
    left: 60px !important;
}

.header-banner {
    background: #1a1b1d url("../images/header-bg.webp") no-repeat center center / cover;
    position: relative;
    z-index: 1;
}

.banner .dot-shape {
    top: -15%;
    right: 6%;
}

.banner .line {
    right: 32%;
}

.box-image-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.box-image-wrapper .main-image {
    width: 470px;
    height: 580px;
    overflow: hidden;
}

.box-image-wrapper .main-image img {
    width: 100%;
    height: 100%;
    border-radius: 15px 150px 15px 15px;
    object-fit: cover;
    position: relative;
}

.box-image-wrapper .small-img {
    max-width: 220px;
    height: auto;
    overflow: hidden;
    position: absolute;
}

.box-image-wrapper .small-img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.box-image-wrapper .small-img.top {
    top: 20%;
    right: 0;
}

.small-img-text {
    color: #fff;
    font-size: 30px;
    bottom: 15%;
    position: absolute;
    right: 7%;
    font-weight: 700;
}

.banner .heading span {
    color: #2563eb;
}

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

.btn-custom {
    background: #2563eb;
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 500;
    transition: 0.3s;
}

/* Animation */

.dot-left,
.dot-shape,
.line {
    opacity: 0;
    transition: all 0.8s ease-out;
    position: absolute;
}

.dot-left {
    transform: translateX(100px);
}

.dot-shape {
    transform: translateX(120px);
}

.line {
    transform: translateY(300px);
}

.main-img {
    transition: all 0.6s ease-in-out;
    overflow: hidden;
    transform: scale(1.5);
}

.small-img {
    transition: all 0.6s ease-in-out;
    overflow: hidden;
    transform: scale(1.5);
}

.small-img.animate {
    transform: scale(1);
}

.main-img.animate {
    transform: scale(1);
}

.dot-left.animate {
    transform: translateX(0);
    opacity: 1;
}

.dot-shape.animate {
    transform: translateX(0);
    opacity: 1;
}

.line.animate {
    transform: translateY(0);
    opacity: 1;
}

.split-line1,
.split-line2,
.split-line3,
.split-line4,
.split-line5,
.split-line6,
.split-line7,
.split-line8,
.split-line9,
.split-line10,
.split-line11,
.split-line12,
.split-line13,
.split-line14,
.split-line15,
.split-line16,
.split-line17 {
    display: block;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: scaleY(0) translateY(100px);
    transform: scaleY(0) translateY(100px);
    opacity: 0;
    -webkit-transition: 1.5s cubic-bezier(0.5, -0.75, 0.3, 1.5), opacity 1.5s;
    transition: 1.5s cubic-bezier(0.5, -0.75, 0.3, 1.5), opacity 1.5s;
}

.split-line1.animate,
.split-line2.animate,
.split-line3.animate,
.split-line4.animate,
.split-line5.animate,
.split-line6.animate,
.split-line7.animate,
.split-line8.animate,
.split-line9.animate,
.split-line10.animate,
.split-line11.animate,
.split-line12.animate,
.split-line13.animate,
.split-line14.animate,
.split-line15.animate,
.split-line16.animate,
.split-line17.animate {
    -webkit-transform: scaleY(1) translateY(0);
    transform: scaleY(1) translateY(0);
    opacity: 1;
}

/*--------------------------*/
        /*About Section*/
/*--------------------------*/

.about {
    background: url(https://diegosevilla.dev/assets/intro-bg-pattern-hd-BMM9W6Yv.webp);
    padding: 40px 0;
}

.about-contain {
    padding: 40px 0;
}

.about-container {
    display: flex;
}

#aboutText {
    font-size: 5rem;
    font-weight: 900;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.349);
    text-stroke: 1px var(--light) !important;
    letter-spacing: 10px;
    transition: transform 0.2s linear;
    position: relative;
    z-index: 0;
    margin-bottom: 15px;
}

.about-heading h3 strong {
    font-size: 35px;
    color: var(--primary);
    font-weight: 700;
    font-family: 'Montserrat Alternates', sans-serif;
    line-height: 1.2;
}

.about-left {
    position: relative;
}

.main-image {
    border-radius: 20px;
    width: 100%;
    height: auto;
    padding-left: 2rem;
    position: relative;
    z-index: -2;
}

.experience-badge {
    position: absolute;
    top: 90px;
    z-index: -1;
    left: -7px;
    background: var(--header);
    color: #fff;
    padding: 15px 20px;
    border-radius: 15px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    animation-name: animate1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

.vertical-text {
    position: absolute;
    top: 80%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    font-weight: 600;
    letter-spacing: 2px;
    color: #555;
}

.small-image {
    position: absolute;
    bottom: 0;
    left: 58%;
    width: 230px;
    height: 200px;
    border-radius: 15px;
    overflow: hidden;
}

.small-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.award {
    display: flex;
    align-items: center;
    gap: 10px;
}

.award i {
    color: var(--light);
    font-size: 24px;
}

.award-icon {
    display: flex;
    height: 40px;
    width: 40px;
    background: var(--button);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.check-list {
    font-weight: 600;
}

.check-list i {
    color: var(--primary);
    margin-right: 10px;
}

.seo-rotate {
    width: 200px;
    height: 200px;
    animation: spin 15s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.circle-text {
    position: relative;
    width: 170px;
    height: 170px;
}

.circle-text svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    animation: spin 12s linear infinite;
}

@keyframes animate1 {
    0% {
        transform: translateY(40px);
    }

    100% {
        transform: translateY(0px);
    }
}

.circle-text textPath {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    fill: var(--primary);
}

.circle-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary);
    font-size: 28px;
}


/*--------------------------*/
        /*Result Section*/
/*--------------------------*/

.result-section {
    margin: 3rem 0;
    background: url(https://uprostim.com/wp-content/uploads/2021/04/image006-48.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 4rem 0;
}

.result-box {
    gap: 24px;
    position: relative;
    margin-bottom: 28px;
    padding: 15px 32px 15px;
    border: 1px solid transparent;
    background: linear-gradient(329.35deg, #57E8DF 0%, #6872FE 100%);
    margin-bottom: 20px;
    border-radius: 10px;
}

.result-box::before {
    left: -2px;
    top: 4px;
    border-radius: 10px;
    width: 99.2%;
    z-index: -1;
    height: 100%;
    content: "";
    position: absolute;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(329.35deg, #57E8DF 0%, #6872FE 100%) border-box;
}

.result-box h4 {
    color: var(--primary);
}

.result-icon img {
    height: auto;
    width: 90px;
}

.bg-image-section {
    background-image: url(../images/bg-result.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.overlay-text {
    padding: 20px;
    padding-left: 100px;
}

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

.result-icon {
    transition: transform 0.6s ease;
}

.result-img {
    width: 48%;
}

.result-img1 {
    width: 48%;
    border-radius: 10px;
}

.result-section .section-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
}

.result-section .subtitle {
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9cc4ff;
    font-weight: 600;
}

.result-section .info-tags {
    display: flex;
    gap: 30px;
    margin-top: 40px;
    font-weight: 500;
    color: #000000;
}

.result-section .progress-container {
    margin-top: 3rem;
}

.result-section .progress-label {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 5px;
}

.result-section .progress {
    height: 70px;
    background-color: transparent;
    margin-top: -10px;
}

.result-section .progress-bar {
    border-radius: 30px;
    width: 0;
    font-weight: 600;
    align-items: center;
    font-size: 0.85rem;
    flex-direction: row;
    text-align: right;
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    border-radius: 0 60px 60px 0;
}

.result-section .progress-bar p {
    font-size: 20px;
    font-width: 700px
}

.result-section .bar1 {
    background: #244cc9;
}

.result-section .bar2 {
    background: #8fc351;
}

.result-section .bar3 {
    background: #265c32;
}

.result-section .bar4 {
    background: #272441;
}

/*--------------------------*/
    /*Testimonial Section*/
/*--------------------------*/

.testimonial-section {
    position: relative;
    padding: 60px 0;
    margin: 0 20px;
    border-radius: 20px;
    background: url("../images/testimonial-banner.jpg") no-repeat center/cover;
}

.testimonial-section .overlay {
    position: absolute;
    border-radius: 20px;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.testimonial-section .left-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0.15;
    max-width: 400px;
    object-fit: cover;
}

.testimonial-section .container {
    position: relative;
    z-index: 0;
}

.rating-box {
    text-align: center;
    padding: 40px 20px;
}

.rating-box h1 {
    font-size: 4rem;
    font-weight: bold;
    color: #fff;
}

.rating-box p {
    color: #fff;
}

.rating-box .stars i {
    color: #fff;
    font-size: 1.5rem;
    margin: 0 3px;
}

.testimonial-box {
    background: #9e9e9e70;
    border-radius: 15px;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.testimonial-box::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    padding: 10px;
    background: linear-gradient(90deg, #6a11cb, #2575fc, #ff416c, #ff4b2b, #43cea2, #6a11cb);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderColor 1s linear infinite;
    z-index: -1;
}

.testimonial-box .rating i {
    color: var(--primary);
}

.testimonial-text {
    font-size: 1.1rem;
    margin: 20px 0;
    color: #fff;
}

.client-info {
    display: flex;
    align-items: center;
    color: #fff;
}

.client-info img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #a3e635;
    margin-right: 15px;
}

.carousel-control-prev,
.carousel-control-next {
    width: 45px !important;
    height: 45px !important;
    background: rgb(154, 173, 226) !important;
    border-radius: 50%;
    top: auto !important;
    bottom: 20px !important;
    transform: none;
    opacity: 1;
}

.carousel-control-prev {
    left: calc(50% - 60px) !important;
}

.carousel-control-next {
    right: calc(50% - 60px) !important;
}

.testimonial-arrow {
    position: absolute;
    left: 0;
    animation-name: animate1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

/*--------------------------*/
        /*service Section*/
/*--------------------------*/

.services-section {
    position: relative;
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.services-left {
    position: relative;
    height: 80vh;
    perspective: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card {
    position: absolute;
    border-radius: 20px;
    display: flex;
    padding: 20px;
    width: 100%;
    max-width: 420px;
    align-items: center;
    background-color: #fff;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    transform-origin: center center;
    transition: all 0.4s ease;
}

.service-card:nth-child(1) {
    border: 20px solid #00C6FF;
    z-index: 6;
}

.service-card:nth-child(2) {
    border: 20px solid #FF7E5F;
    transform: rotate(-11deg);
    z-index: 5;
}

.service-card:nth-child(3) {
    border: 20px solid #43E97B;
    transform: rotate(11deg);
    z-index: 4;
}

.service-card:nth-child(4) {
    border: 20px solid #0052D4;
    transform: rotate(-22deg);
    z-index: 3;
}

.service-card:nth-child(5) {
    border: 20px solid #F7971E;
    transform: rotate(22deg);
    z-index: 2;
}

.service-card:nth-child(6) {
    border: 20px solid #8E2DE2;
    transform: rotate(0deg);
    z-index: 1;
}

.service-card-content h2 {
    font-size: 28px;
    font-weight: 700;
}

.card-item-image img {
    border-radius: 20px;
}

.service-card-content p {
    font-size: 16px;
    margin-bottom: 15px;
}

.service-card a {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.services-right {
    position: relative;
    height: 80vh;
    display: flex;
    align-items: center;

}

.services-right-inner {
    position: sticky;
    top: 150px;
}

.services-right h1 {
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 40px;
}

.services-right ul {
    list-style: none;
    padding: 0;
    font-size: 1.2rem;
}

.services-right li {
    margin: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 5px;
    transition: 0.3s;
    font-size: 26px;
}

.services-right ul li small {
    font-size: 16px;
    margin-right: 10px;
}

.services-right li.active {
    color: var(--primary);
    font-size: 30px;
    font-weight: 700;
    padding-left: 10px;
    border-left: 4px solid var(--primary);
    transform: translateX(10px);
}

.spacer {
    height: 100vh;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #999;
    text-align: center;
    padding: 0 20px;
}

/*--------------------------*/
    /*Why Choose Us Section*/
/*--------------------------*/

.choose-section {
    padding: 100px 0;
    position: relative;
    background: url(../images/project-bg.jpg) no-repeat center / cover fixed;
}

.choose-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#011230, #09426aeb);
    z-index: 0;
}

.choose-section .container {
    position: relative;
    z-index: 0;
}

.sticky-col {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.choose-title {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--light);
}

.choose-title span {
    color: var(--primary);
    font-weight: 700;
}

.choose-btn {
    background: transparent;
    border: 1px solid var(--light);
    color: #fff;
    padding: 14px 28px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    margin-top: 30px;
    transition: 0.3s;
    height: 50px;
}

.choose-btn:hover {
    background: var(--primary);
    color: var(--light);
    border: 1px solid var(--primary);
}

.choose-box {
    position: relative;
    padding-left: 60px;
}

.choose-box::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 0;
    bottom: -30px;
    width: 2px;
    background: rgba(0, 89, 255, 0.4);
}

.choose-circle {
    position: absolute;
    left: 10px;
    top: 5px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: 0.4s ease;
    z-index: 2;
}

.choose-circle::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    transition: 0.4s ease;
}

.choose-circle.active {
    background: var(--primary);
    box-shadow: 0 0 15px var(--primary);
    transform: scale(1.3);
}

.choose-circle.active::after {
    background: #011230;
}

.choose-icon figure {
    height: 70px;
    width: 70px;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    transition: .5s;
}

.choose-box:hover figure {
    background: #fff;
    transform: rotate(360deg);
}

.choose-box:hover figure img {
    filter: invert(1);
}

.choose-box h5 {
    font-size: 25px;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--primary);
}

.choose-box p {
    font-size: 15px;
    color: var(--light);
    max-width: 450px;
    margin-bottom: 20px;
}

.choose-section .right-col::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(166, 255, 0, 0.18) 0%, transparent 70%);
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

/*--------------------------*/
    /* Expertise Section */
/*--------------------------*/


.expertise-section {
    padding: 80px 20px;
    background: url(https://static.vecteezy.com/system/resources/previews/009/449/462/non_2x/modern-white-abstract-background-design-vector.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.expertise-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #222;
}

.expertise-section h2 span {
    color: #32d296;
}

.expertise-section p {
    color: #555;
}

.btn-custom {
    background: #32d296;
    color: #fff;
    font-weight: 600;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block;
}

.coach-card {
    display: inline-flex;
    align-items: center;
    background: #c2cff546;
    border-radius: 50px;
    padding-right: 22px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    font-size: 15px;
    font-weight: 500;
    transition: transform 0.3s ease-in-out;
    margin: 10px;
}

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

.coach-card img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}

.cards-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.cards-row {
    display: flex;
    flex-wrap: nowrap;
}

.cards-row.center {
    justify-content: center;
}

.cards-row.right {
    justify-content: flex-end;
}

/*--------------------------*/
    /*StartUp Section*/
/*--------------------------*/

.startup-box {
    width: 15%;
    background-color: #fff;
    border-radius: 18px;

}

.startup-section {
    margin-top: -4rem !important;
    margin-bottom: 2rem;
}

.startup-box img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    box-shadow: 0 0 15px #cccccc7d;
    transition: all ease .5s;
    padding: 10px;
    border-radius: 18px;
}

/*--------------------------*/
        /*Skill Section*/
/*--------------------------*/

.skills {
    padding: 50px 0;
    background: url(../images/skill-bg.avif);
    background-repeat: no-repeat;
}

.about-skills h6 {
    font-size: 18px;
}

.about-skills h4 {
    font-size: 30px;
    margin: 20px 0;
}

.skills .skill-box {
    position: relative;
    background: #80808000;
    height: 300px;
    display: flex;
    border-radius: 90px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.skills .skill-box .about-skills {
    position: relative;
    z-index: -1;
    text-align: center;
}

.about-skills img {
    height: 80px;
    width: 80px;
    object-fit: cover;
}

.skills .skill-box:hover::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 90px;
    padding: 10px;
    background: linear-gradient(90deg, #6a11cb, #2575fc, #ff416c, #ff4b2b, #43cea2, #6a11cb);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderColor 1s linear infinite;
    z-index: -1;
}

@keyframes borderColor {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.skills .skill-box:hover {
    box-shadow: 0 0 20px rgba(0, 0, 255, 0.123), 0 0 40px #2574fc5e, 0 0 60px rgb(128, 128, 128);
}

.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee__content li {
    display: inline-flex;
    align-items: center;
    margin-right: 60px;
    list-style: none;
}

.marquee__content h2 {
    font-size: 65px;
    font-weight: bold;
    color: transparent !important;
    margin: 0;
    -webkit-text-stroke: 1px #000;
    letter-spacing: 2px;
    transition: color 0.3s ease;
}

.marquee:hover h2 {
    color: var(--primary);
    transition: color 0.3s ease;
}

.marquee__content {
    display: inline-block;
    animation: scroll-left 120s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-1000%);
    }

}

.marquee__content img {
    width: 100px;
    height: 100px;
    margin-right: 45px;
}

/*--------------------------*/
        /*SEO Section*/
/*--------------------------*/
.seo {
    padding: 3rem 0;
}

.image-stack {
    position: relative;
    width: 100%;
}

.image-stack img {
    width: 180px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    position: absolute;
    background: #fff;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.image-stack video {
    border-radius: 30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.image-stack .seo-img {
    width: 400px;
}

.image-stack img:nth-child(1) {
    bottom: 0;
    left: 0;
    z-index: -1;
}

.image-stack img:nth-child(2) {
    bottom: 0;
    right: 0;
    z-index: -1;
}

.image-stack img:nth-child(3) {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
    z-index: -2;
}

.show {
    transform: translateY(0);
    opacity: 1;
}

.contact-hero {
    position: relative;
    display: flex;
    padding: 3rem 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fff;
    overflow: hidden;
    background: url(https://dev251.kodesolution.com/digitaal/wp-content/uploads/2025/04/shape3.png);
}

.contact-circle {
    margin: 40px auto 0;
    width: 150px;
    height: 150px;
    border: 2px solid #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.4s ease;
    font-size: 1rem;
    z-index: 2;
    background: transparent;
    position: relative;
}

.contact-circle::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    border: 1px dashed #006efe;
    animation: rotateDashed 6s linear infinite;
}

.contact-circle:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: scale(1.1);
}

.contact-circle i {
    margin-top: 10px;
    font-size: 1.2rem;
    color: #000;
}

.trust {
    margin-top: 40px;
    font-size: 1rem;
    opacity: 0;
    color: #000;
    animation: fadeIn 1s ease-out forwards;
    animation-delay: 2s;
}

@keyframes underlineGrow {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes rotateDashed {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulseBorder {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/*--------------------------*/
        /*Footer Section*/
/*--------------------------*/

footer {
    background: url(../images/footer-bg.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
}

footer .footer-logo {
    width: 50%;
    padding: 1rem;
    background-color: #fff;
    margin-bottom: 2rem;
    border-radius: 10px;

}

.footer-first,
.footer-last {
    padding-top: 4rem;
}

.footer-first-contain h2 {
    font-family: "Urbanist", Sans-serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.1em;
    color: #FFFFFF;
}

.footer-first-contain ul li i {
    color: var(--primary);
    margin-right: 20px;
}

.footer-number {
    color: var(--primary);
    font-size: 45px;
    font-weight: 700;
}

.footer-number-about h4 {
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    padding-bottom: 10px;
}

.footer-number-about p {
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    max-width: 225px;
}

.footer-second {
    background: var(--light);
    color: black;
}

.footer-form {
    padding: 4rem 3rem 1rem;
}

.footer-form h3 {
    color: #06100d;
    font-size: 25px;
    font-weight: 600;
    padding-bottom: 10px;
}

.footer-form input {
    width: 100%;
    height: 64px;
    border: none;
    margin-bottom: 8px;
    border-radius: 15px;
    padding-left: 25px;
    background-color: #f2f2f2;
}

.footer-form button {
    color: #fff;
    width: 100%;
    height: 55px;
    border: none;
    margin-top: 10px;
    font-weight: 600;
    border-radius: 100px;
    background-color: #244cc9;
    transition: all 500ms ease-in-out;
}

.sector {
    margin-top: 7rem;
}

.img-review {
    padding: 2rem 0;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    position: relative;
}

.img-review::before {
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    content: "";
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: gray;
}

.footer-last ul li {
    margin-bottom: 10px;
    color: #c4c4c4;
}

.footer-last ul li i {
    color: var(--primary);
    margin-right: 10px;
}

.footer-last h3 {
    font-family: "Urbanist", Sans-serif;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.1em;
    color: #FFFFFF;
}


/*Workflow*/

.workflow video {
    max-width: 100%;
    height: auto;
}


/* Responsive  */

@media (max-width: 320px) {

    .hero .title {
        font-size: 35px;
    }

    .hero-img-wrapper::after {
        right: 0;
    }

    .image-stack .seo-img {
        width: 300px;
    }

    .result-div {
        padding: 20px 20px 20px;
        margin-top: 2rem;
        margin-left: 0;
    }

    .header-content {
        padding: 5px;
    }

    .hero .sec-element1 {
        top: -500px;
    }

    .about-contain {
        padding: 50px 0;
    }

    .circle-wrapper {
        top: 3rem;
    }

    .say2-img img {
        margin-top: 120px;
    }

    .say1-img {
        padding-top: 4rem;
    }

    .heading {
        font-size: 25px;
        margin-top: 1rem;
    }

    .heading strong {
        font-size: 25px;
    }

    .result-img2 {
        display: none;
    }

    .result {
        padding: 1rem 0;
    }

    .seo {
        padding: 1rem 0;
    }


}


/*--------------------------*/
    /*Breadcrumb Section*/
/*--------------------------*/

.breadcrumb-modern {
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #1a1b1d url("../images/header-bg.webp") no-repeat center center / cover;
    position: relative;
    z-index: 1;
}

.breadcrumb-modern nav {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.breadcrumb-heading {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--light);
    display: inline-block;
    position: relative;
    margin-bottom: 15px;
    opacity: 0;
    transform: scale(0.95);
    animation: fadeScale 0.8s ease-out forwards;
}

.breadcrumb-heading::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
    animation: underlineGrow 0.7s ease-out forwards;
    animation-delay: 0.5s;
}

@keyframes fadeScale {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes underlineGrow {
    to {
        width: 80px;
    }
}

.breadcrumb-item a {
    color: #ffffffcc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
    color: var(--primary);
}

.breadcrumb-item.active {
    color: var(--primary);
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #ffffff99;
}

/*Header & Footer Responsive*/

@media (max-width: 991px) {

    .breadcrumb-modern {
        height: 30vh;
    }

    .footer-second {
        border-radius: 20px;
        margin-top: 10px;
    }

    .sector {
        margin-top: 0;
    }

    .footer-last {
        display: flex;
        gap: 2rem;
    }

    .side-navbar {
        width: 500px;
        left: -520px;
    }

    .support p {
        margin-bottom: 0;
    }

}

@media (max-width: 767px) {
    .logo {
        width: 55%;
    }

    .side-navbar {
        width: 260px;
    }

    .side-navbar .dropdown-menu {
        left: 170px !important;
    }
}

@media (max-width: 479px) {
    .logo {
        width: 85%;
    }

    .menu-icon {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 479px) {
    .footer-last {
        display: block;
    }

    .breadcrumb-modern {
        height: 25vh;
    }


    .consult-btn {
        width: 85%;
        display: inline-block;
    }
}