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

* {
    padding: 0;
    margin: 0;
}

html {
    overflow-x: hidden !important;
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {
    font-family: "Instrument Sans", system-ui !important;
    overflow-x: clip;
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

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

/* .space_bg{
    background-image: url(../images/space-bg.png);
    height: 100dvh;
    position: relative;
} */

/* ---------------------- NAV BAR ------------------------------------------------------------------------------------------------------ */

@section content {
    margin-top: 100px;
}

header {
    /* background-color: rgb(0 0 0); */
    background-color: rgba(0, 0, 0, 0);
    /* background-color: #000000; */
    /* padding: 1rem 0rem; */
    z-index: 9999;
    width: 100%;
    position: fixed;
    /* position: relative; */
    transition: all 0.3s ease-in-out;
    /* top: -46px; */
    top: 0px;
    color: #ffffff;
}

header.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgb(255, 255, 255);
    /* z-index: 999999; */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    color: #000000;
}

.logo-dark {
    display: none;
    transition: all 0.3s ease-in-out;
}

header.fixed .logo-white {
    display: none;
    transition: all 0.3s ease-in-out;
}

header.fixed .logo-dark {
    display: block;
    transition: all 0.3s ease-in-out;
}

/* header {
    background-color: rgb(255, 255, 255);
    padding: 0;
    position: relative;
    z-index: 9999;
    width: 100%;
    background: #ffffff6e;
    position: fixed;
    color: white;
    backdrop-filter: blur(30px);
} */
.head_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.right_flex {
    display: flex;
    align-items: center;
    gap: 5em;
    font-size: 16px;
}

.logo span {
    font-size: 40px;
    font-weight: 500;
}

.logo span img {
    width: 150px;
    /* transition: all 0.3s ease;
    background-color: #222222;
    border-radius: 0px 0px 13px 13px; */
}

header.fixed .logo span img {
    width: 150px;
    transition: all 0.3s ease;
    background-color: transparent;
    border-radius: 0px 0px 0px 0px;
}

.menu ul {
    display: inline-flex;
    padding: 0;
    margin: 0;
    gap: 1rem;
}

.menu ul li {
    list-style: none;
    padding: 32px 10px;
}

.menu ul li a {
    text-decoration: none;
    color: black;
    transition: 0.3s all;
}

.menu ul li a:hover,
.menu ul li.active a,
.menu_list ul li.active a {
    /* background-image: linear-gradient(45deg, #ffb427, #db93ff) !important; */
    color: #ffb427 !important;
    background-clip: text;
}

.left_flex {
    display: flex;
    align-items: center;
    gap: .5em;
}

.contact_btn button {
    /* background-color: #ffffff08; */
    background-color: #ffffff29;
    backdrop-filter: blur(10px);
    border: 1px solid #ffffff6b;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    transition: all ease 0.5s;
    /* color: #ffd150; */
    color: white;
}

.contact_btn button:hover {
    background-color: #000;
    background-color: #000;
    color: #fff;
}

header.fixed .contact_btn button {
    background-color: #000000;
    color: #fff;
    transition: 0.3s all ease;
    /* background-color: #ffffff29; */
}

header.fixed .toggle_btn span {
    background-color: #000000;
}

header .toggle_btn.toggle_active span {
    background-color: #ffffff;
}

header.fixed .contact_btn button:hover {
    background-color: #272727;
    color: #fff;
}

header.fixed .toggle_btn:hover {
    background-color: transparent;
    color: #000000;

}

.toggle_btn {
    background-color: transparent;
    /* backdrop-filter: blur(10px); */
    padding: 15px 14px;
    border-radius: 50px;
    display: block;
    z-index: 999999;
    cursor: pointer;
}

.toggle_btn span:nth-child(1) {
    display: block;
    width: 25px;
    height: 2px;
    background-color: #ffffff;
    margin: 6px 0;
    border-radius: 5px;
    transition: all ease 0.5s;
}

.toggle_btn span:nth-child(2) {
    display: block;
    width: 25px;
    height: 2px;
    background-color: #ffffff;
    margin: 6px 0;
    border-radius: 5px;
    transition: all ease 0.5s;
}

.toggle_active span:nth-child(1) {
    transform: rotate(45deg) translate(0px, 0px);
    margin: 0;
}

.toggle_active span:nth-child(2) {
    transform: rotate(-45deg) translate(1px, -2px);
    margin: 0;
}






.toggle_menu {
    background: #000;
    height: 100vh;
    color: #fff;
    position: absolute;
    width: 100%;
    opacity: 0;
    left: 0;
    top: 0;
    transform: translateY(-100%);
    transition: all ease 0.8s;
    overflow: hidden !important;
    display: grid;
    align-content: space-evenly;
    z-index: 99999;
}

.toggle_active {
    opacity: 1;
    transform: translateY(0%);
    padding: 23px 13px;
}

.toggle_menu::after {
    content: "";
    background: rgb(214, 182, 10);
    background: linear-gradient(131deg, rgba(214, 182, 10, 1) -26%, rgba(180, 25, 25, 1) -12%, rgba(116, 12, 157, 1) 46%, rgba(23, 113, 123, 1) 107%);
    height: 186px;
    width: 395px;
    position: absolute;
    border-radius: 100%;
    top: 39%;
    left: 24%;
    filter: blur(135px);
    transform: rotate3d(1, 1, 1, 45deg);
    -webkit-animation: rotate 10s normal linear infinite;
    animation: rotate 10s normal linear infinite;
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }

    25% {
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
    }

    50% {
        -webkit-transform: rotate3d(0, 0, 1, 180deg);
        transform: rotate3d(0, 0, 1, 180deg);
    }

    75% {
        -webkit-transform: rotate3d(0, 0, 1, 270deg);
        transform: rotate3d(0, 0, 1, 270deg);
    }

    100% {
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

.toggle_column {
    display: grid;
    grid-template-columns: 2fr 1fr;
    padding: 3rem 8rem;
    z-index: 1;
}

.get_quote {
    width: 69%;
}

.get_quote h3 {
    font-size: 55px;
    font-weight: 400;
}

.get_quote button {
    background-color: #00000000;
    color: #fff;
    border: 1px solid #fff;
    padding: 13px 35px;
    border-radius: 20px;
    font-size: 22px;
    margin-top: 1rem;
}

.menu_list {}

.menu_list ul {
    list-style: none;
    padding: 0;
    line-height: 2.3;
}

.menu_list ul li {}

.menu_list ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 32px;
    white-space: nowrap;
}

.social_links ul {
    list-style: none;
    display: inline-flex;
    gap: 2.5rem;
    padding-left: 8rem;
    z-index: 1;
}

.hide_desc {
    display: none;
}

/* --------------------------------- */

.hero_video {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}

.video_container {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}

.video_container {
    width: 100%;
    height: 100%;
    position: relative;
}

.video_container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(224deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%),
        linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 40%);
    z-index: 1;
}

.video_container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.hero_container {
    height: 100%;
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 10;
    padding-bottom: 100px;
}

.hero_content {
    text-align: left;
    width: 100%;
}

.hero_content h1 {
    font-weight: 400;
    font-size: 59px;
    color: #fff;
    /* font-family: "Montserrat Alternates", sans-serif; */
    /* font-weight: 200; */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    margin: 0;
    /* line-height: 1.3; */
    letter-spacing: 3.4px;
    /* animation: fadeInUp 1.2s ease-out forwards; */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.hero_sub_link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff !important;
    font-size: 18px;
    font-weight: 400;
    margin-top: 40px;
    text-decoration: none;
    transition: all 0.3s ease;
    opacity: 0.9;
}

.hero_sub_link i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.hero_sub_link:hover {
    opacity: 1;
    letter-spacing: 0.5px;
}

.hero_sub_link:hover i {
    transform: translateX(8px);
}

/* 
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* --------------------------------- */

.space_bg {
    overflow: hidden;
    background: #000000 url(../images/space-bg.png) repeat 0 0;
    width: 100%;
    height: 100dvh;
    margin: 0;
    text-align: center;
    box-sizing: border-box;
    -webkit-animation: slide 130s linear infinite;
    position: relative;
}

@-webkit-keyframes slide {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -512px -512px;
    }
}

.world_position {
    position: absolute;
    bottom: 10%;
    right: 10%;
    width: 200px;
    z-index: 999;
}

.world_slider {
    color: aliceblue;
    font-size: 50px;
    width: 200px;
}

/* .world_slider>div {
    text-align: center;
} */
.counter_section {
    padding-top: 5rem;
    background: #000;
}

.counter_box {
    text-align: center;
}

.slide_num {
    font-size: 50px;
    color: #FED57F;
    font-weight: 400;
}

.counter_box p {
    font-size: 25px;
    color: #fff;
}

/* .world_slider button {
    display: block;
    width: 5px;
    height: 5px;
    padding: 0;
    border: none;
    border-radius: 2px;
    background-color: #d7d7d7;
    text-indent: -9999px;
    transition: 0.3s all ease-in;
} */

/* .world_slider .slick-active button {
    display: block;
    width: 20px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 2px;
    background-color: #FFE0A0;
    text-indent: -9999px;
    transition: 0.3s all ease-in;
} */

.world_slider .slick-dots li {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 3px;
    padding: 0;
    cursor: pointer;
    background-color: #626262;
    border-radius: 50px;
}

.world_slider .slick-dots li.slick-active {
    width: 20px;
    height: 10px;
    background: #FFE0A0;
}

.world_slider .slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    content: '';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.world_slider .slick-dots {
    bottom: -25px;
    right: 0px !important;
    z-index: 6;
}

.astronaut {
    animation: anim 30s linear infinite;
    position: absolute;
    z-index: 100;
}

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

    10% {
        transform: translateY(30px) rotate(10deg);
    }

    20% {
        transform: translateY(60px) rotate(20deg);
    }

    30% {
        transform: translateY(90px) rotate(30deg);
    }

    40% {
        transform: translateY(120px) rotate(20deg);
    }

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

    60% {
        transform: translateY(120px) rotate(40deg);
    }

    70% {
        transform: translateY(90px) rotate(10deg);
    }

    80% {
        transform: translateY(60px) rotate(20deg);
    }

    90% {
        transform: translateY(30px) rotate(10deg);
    }

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

.ulcca1 {
    animation: fall-diagonal 5s linear infinite;

}

.ulcca2 {
    animation: fall-diagonal 6s linear infinite;

}

.ulcca3 {
    animation: fall-diagonal 7s linear infinite;

}

.ulcca4 {
    animation: fall-diagonal 8s linear infinite;

}

@keyframes fall-diagonal {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }

    10% {
        opacity: 0.5;
        transform: translate(25px, 25px);
    }

    95% {
        opacity: 1;
        transform: translate(480px, 480px);
    }

    100% {
        opacity: 0;
        transform: translate(500px, 500px);
    }
}

.arrow_fix {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.arrow_fix p {
    font-size: 15px;
    margin-top: 10px;
    color: #FFE0A0;
}

.scroll_circle {
    cursor: pointer;
    width: 60px;
    height: 60px;
    box-shadow: 0px 1.5px 4px 0px #FFE0A0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.scroll_arrow img {
    width: 10px;
    transition: all 0.3s ease;
}

.scroll_circle:hover {
    box-shadow: 0px 2.5px 4px 0px #FFE0A0;
    transition: all 0.3s ease;
}

.scroll_circle:hover img {
    transition: all 0.3s ease;
    transform: translateY(3px);
}

.scroll_circle p {
    text-align: center;
}

.banner_text {
    position: absolute;
    bottom: 10%;
    left: 10%;
    z-index: 100;
    color: #fff;
}

.banner_text p {
    font-size: 18px;
    text-align: start;
    width: 70%;
}

.space_bg {
    display: block;
}

.mobile_banner {
    display: none;
}



/* ---------------------------------------------------------------------------------------------------------------------------//////// */


.menu ul li.active a {
    color: #fab73c !important;
    font-weight: 500 !important;
}

/* .contact_btn.active button {
    background-color: #ffffff;
    color: #000;
} */

.bg_elements>div {
    position: absolute;
}

.ulcca1 {
    top: 3%;
    left: 27%;
}

.ulcca2 {
    top: 25%;
    left: 5%;
}

.ulcca3 {
    top: 14%;
    right: 11%;
}

.ulcca4 {
    top: 42%;
    right: 23%;
}

.astronaut {
    top: 35%;
    left: 21%;
}

.headings {
    display: grid;
    height: 100%;
    place-items: center;
    align-items: start;
}

.heading_items {
    display: grid;
    justify-items: center;
    line-height: 0.99;
    position: relative;
    top: 20%;
    z-index: 2;
}

.heading_items h1 {
    text-align: center;
    color: #fff;
    font-size: 40px;
    font-family: "Instrument Sans", sans-serif;
    font-weight: 200;
    margin-top: 1rem;
}

.heading_items h1 span {
    font-weight: 500;
    color: #fab73c;
    font-size: 64px;
}

.heading_items p {
    color: #fff;
    font-family: "Instrument Sans", sans-serif;
    font-size: 15px;
    text-align: center;
    width: 70%;
    margin: 8px auto 0 auto;
    display: none;
}

.animated-text {
    animation-fill-mode: both;
    animation-duration: 1s;
}

.fadeInDown {
    animation-name: fadeInDown;
    visibility: visible;
}



.year {
    font-size: 25px;
    color: #fff;
    font-family: "Montserrat Alternates", sans-serif;
    position: absolute;
    right: 17%;
    top: 49%;
    font-weight: 500;
}

.celebrating {
    color: #fff;
    font-size: 80px;
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 600;
    margin-top: 1rem;
}

.success {
    color: #fff;
    font-size: 70px;
    font-family: "Montserrat Alternates", sans-serif;
}

.world {
    background-image: url(../images/earth1.webp);
    display: block;
    width: calc(100% - 0%);
    height: calc(100% - 50%);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -10.5%;
    background-position: top;
    z-index: 1;
    left: 0;
}


/* -------------------map points---------------- */

.map_points>div {
    position: absolute;
}

.map_points img {
    width: 13px;
    filter: drop-shadow(0px 2px 6px #fca84b);
}

.india_loc {
    top: 34%;
    right: 36.99%;
}

.india_loc::after {
    content: "INDIA";
    position: absolute;
    left: -14px;
    top: -17px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
}

.india_loc:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.india_loc:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.india_loc:hover .map_points {
    opacity: 0;
}

.oman_loc {
    top: 29%;
    right: 41.5%;
    transition: all ease 0.3s;
}

.oman_loc::after {
    content: "OMAN";
    position: absolute;
    left: -14px;
    top: -17px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
}

.oman_loc:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.oman_loc:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.oman_loc:hover .map_points {
    opacity: 0;
}

.dubai_loc {
    top: 26.6%;
    right: 42%;
    transition: all ease 0.3s;
}

.dubai_loc::after {
    content: "DUBAI";
    position: absolute;
    left: -14px;
    top: -17px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
}

.dubai_loc:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.dubai_loc:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.dubai_loc:hover .map_points {
    opacity: 0;
}


.saudi {
    top: 26.5%;
    right: 44.5%;
    transition: all ease 0.3s;
}

.saudi::after {
    content: "SAUDI ARABIA";
    position: absolute;
    left: -13px;
    top: -28px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
    z-index: 9999
}

.saudi:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.saudi:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.saudi:hover .map_points {
    opacity: 0;
}


.china {
    top: 22.5%;
    right: 33%;
    transition: all ease 0.3s;
}

.china::after {
    content: "CHINA";
    position: absolute;
    left: -14px;
    top: -17px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
}

.china:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.china:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.china:hover .map_points {
    opacity: 0;
}


.australia {
    top: 52.5%;
    right: 24%;
    transition: all ease 0.3s;
}

.australia::after {
    content: "AUSTRALIA";
    position: absolute;
    left: -14px;
    top: -17px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
}

.australia:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.australia:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.australia:hover .map_points {
    opacity: 0;
}

.thailand {
    top: 30.5%;
    right: 32.88%;
    transition: all ease 0.3s;
}

.thailand::after {
    content: "THAILAND";
    position: absolute;
    left: -14px;
    top: -17px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
}

.thailand:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.thailand:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.thailand:hover .map_points {
    opacity: 0;
}

.bahrain {
    top: 25.5%;
    left: 56.55%;
    transition: all ease 0.3s;
}

.bahrain::after {
    content: "BAHRAIN";
    position: absolute;
    left: -14px;
    top: -17px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
}

.bahrain:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.bahrain:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.bahrain:hover .map_points {
    opacity: 0;
}


.UK {
    top: 12.5%;
    left: 47.55%;
    transition: all ease 0.3s;
}

.UK::after {
    content: "UK";
    position: absolute;
    left: -1px;
    top: -17px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
}

.UK:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.UK:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.UK:hover .map_points {
    opacity: 0;
}


.east_africa {
    left: 53%;
    bottom: 55%;
    transition: all ease 0.3s;
}

.east_africa::after {
    content: "EAST AFRICA";
    position: absolute;
    left: -14px;
    top: -17px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
}

.east_africa:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.east_africa:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.east_africa:hover .map_points {
    opacity: 0;
}


.qatar {
    top: 27%;
    left: 56.8%;
    transition: all ease 0.3s;
}

.qatar::after {
    content: "QATAR";
    position: absolute;
    left: -14px;
    top: -17px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
}

.qatar:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.qatar:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.qatar:hover .map_points {
    opacity: 0;
}


.kuwait {
    top: 25%;
    left: 55.8%;
    transition: all ease 0.3s;
}

.kuwait::after {
    content: "KUWAIT";
    position: absolute;
    left: -14px;
    top: -17px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
}

.kuwait:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.kuwait:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.kuwait:hover .map_points {
    opacity: 0;
}


.hongkong {
    top: 30%;
    left: 69.8%;
    transition: all ease 0.3s;
}

.hongkong::after {
    content: "HONGKONG";
    position: absolute;
    left: -14px;
    top: -17px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
}

.hongkong:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.hongkong:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.hongkong:hover .map_points {
    opacity: 0;
}


.netherlands {
    top: 13%;
    left: 48.8%;
    transition: all ease 0.3s;
}

.netherlands::after {
    content: "NETHERLANDS";
    position: absolute;
    left: -14px;
    top: -17px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
}

.netherlands:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.netherlands:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.netherlands:hover .map_points {
    opacity: 0;
}


.finland {
    top: 7%;
    left: 52.8%;
    transition: all ease 0.3s;
}

.finland::after {
    content: "FINLAND";
    position: absolute;
    left: -14px;
    top: -17px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
}

.finland:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.finland:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.finland:hover .map_points {
    opacity: 0;
}


.brunie {
    bottom: 55%;
    right: 27.8%;
    transition: all ease 0.3s;
}

.brunie::after {
    content: "BRUNEI";
    position: absolute;
    left: -14px;
    top: -17px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.3s;
    transform: scale(1);
}

.brunie:hover {
    transform: scale(1.5);
    cursor: pointer;
}

.brunie:hover::after {
    opacity: 1;
    visibility: visible;
    transition: all ease-in 0.3s;
    font-size: 10px;
}

.brunie:hover .map_points {
    opacity: 0;
}


/* ----------location-points_end------------------ */



.lights>div {
    position: absolute;
}

.bg_light {
    position: absolute;
    background-color: #FF9900;
    width: 70%;
    height: 90px;
    border-radius: 50%;
    top: calc(100% - 35%);
    left: 15%;
    filter: blur(200px);

}

.shiny_light {
    background: rgb(255, 210, 143);
    background: radial-gradient(circle, rgb(255 175 56) 0%, rgba(192, 131, 46, 1) 100%);
    width: 27%;
    height: 123px;
    top: 67.8%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    filter: blur(20px);
}

.flash_light {
    top: 34%;
    left: 50%;
    transform: translateX(-50%);
}

.flash_light img {
    width: 100%;
    height: 600px;
    pointer-events: none;
}



/* ----------------------------------------------------------------
--------------intro_section_css------------------------------------
------------------------------------------------------------------- */

.into_section {
    background-color: #000;
    color: #fff;
    /* padding-top: 6rem;
    padding-bottom: 6rem; */
}

.align_cntr {
    display: flex;
    align-items: center;
    height: 100%;
}

.intro_left_cnt {
    margin-bottom: 3rem;
}

.intro_left_cnt h2 {
    font-size: 60px;
    font-weight: 400;
}

.intro_left_cnt h5 {
    font-size: 30px;
    font-weight: 300;
}

.intro_right {
    font-size: 30px;
    line-height: 40px;
}

.dfine_best span {
    /* border: 2px solid #ffffff52; */
    border: 2px solid #fab73c33;
    padding: 7px 10px;
    color: #fff;
    border-radius: 50px;
    /* margin-left: 0.4rem; */
    /* margin-right: 0.5rem; */
    position: relative;
    /* width: 100%; */
    display: inline-block;
    margin: 3px;
    transition: all 0.3s ease;
    line-height: 1.4;
}

.dfine_best span:hover {
    /* background-color: #fff; */
    background-color: #FAB73C;
    color: #000;
    transition: all 0.3s ease;
    transform: translateY(-3px);
}

.dfine_best h6 {
    font-size: 18px;
    font-weight: 300;
    line-height: 51px;
    /* display: flex; */
    flex-wrap: wrap;
    gap: 0 5px;
    line-height: 2.5;
}

.service_phone {
    display: none;
}

/* ----------------------------------=== */



.servi_section {
    margin-bottom: 5rem;
}

.service_card {
    background-color: #e2da6003;
    border: 1px solid #ECECEC;
    border-radius: 24px;
    min-height: 579px;
    margin: 1rem;
    transition: all 0.2s ease-in;
}

.service_card:hover {
    box-shadow: 0px 4px 25px -6px #0000002d;
    transform: translateY(-3px);
}

.service_head {
    margin-top: 5rem;
    margin-bottom: 3rem;
}

.service_head h3 {
    font-size: 60px;
    font-weight: 400;
}

.service_head p {
    font-size: 20px;
}

.servi_more button {
    border: 1.5px solid #0000001f;
    font-size: 14px;
    border-radius: 50px;
    padding: 26px 12px;
    line-height: 0;
    background-color: #ffffff00;
    transition: all 0.3s ease;
}


.servi_more button:hover {
    background-color: #000;
    color: #fff;
    transition: all 0.3s ease;
}

.servi_head_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: 1.5rem; */
}

.servi_head span {
    font-size: 25px;
}

.servi_head h3 {
    font-size: 45px;
    font-weight: 400;
}

.servi_img img {
    width: 100%;
}

.servi_cnt {
    padding: 1.5rem;
    /* height: 100%; */
}

.servi_cnt h4 {
    font-size: 20px;
    font-weight: 500;
}

.servi_cnt p {
    font-size: 16px;
    margin-bottom: 1.9rem;
    font-weight: 400;
    color: #000000c7;
}

.servi_items {
    gap: 9px;
    display: flex;
    flex-wrap: wrap;
}

.servi_items span a {
    font-size: 14px;
    border-radius: 50px;
    border: 1px solid #eeeeee;
    padding: 8px 16px;
    color: #545454;
    background-color: #eeeeee;
    background-color: #ffffff;
    display: inline-block;
    transition: all 0.2s ease-in;
    cursor: pointer;
    position: relative;
    bottom: 0;
}

.servi_items span a:hover {
    /* background: #3b005e30; */
    /* border: solid 1px #ffffff82; */
    /* color: #3b005e;
    background-image: linear-gradient(45deg, #ffe89c, transparent);
    color: #000578 !important; */
    transform: translateY(-3px);
    background: #FED57F;
    border: 1px solid #FED57F;
    transition: all 0.2s ease-in;
    box-shadow: 7px 8px 20px -15px;
}

.servi_img {
    overflow: hidden;
}

.servi_img img {
    height: 238px;
    object-fit: cover;
    object-position: center;
    transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
    transition: transform 500ms;
    border-radius: 15px;
    margin: 15px;
    width: calc(100% - 30px);
}

.service_card:hover .servi_img img {
    transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.15) scaleY(1.15);
    /* border-radius: 15px; */
}

.pin-spacer {
    overflow: hidden !important;
    height: 1400px !important;
}

.factsContainer_sm {
    padding-left: 5% !important;
}




.servi_slider .next_btn {
    position: absolute;
    top: -15%;
    right: 0px;
    background-color: #000;
    border: none;
    padding: 19px 8px;
    border-radius: 50px;
    color: #fff;
    line-height: 0;
}

.servi_slider .next_btn span {
    font-size: 30px;
}

.servi_slider .prev_btn span {
    font-size: 30px;
}

.servi_slider .prev_btn {
    position: absolute;
    right: 60px;
    top: -15%;
    border: 0;
    background-color: #f7f7f7;
    border: none;
    padding: 19px 8px;
    border-radius: 50px;
    color: #b7b7b7;
    line-height: 0;
    z-index: 2;
}




.servi_slider .next_btn1 {
    position: absolute;
    top: -15%;
    right: 2%;
    background-color: #000;
    border: none;
    padding: 19px 8px;
    border-radius: 50px;
    color: #fff;
    line-height: 0;
}

.servi_slider .next_btn1 span {
    font-size: 30px;
}

.servi_slider .prev_btn1 span {
    font-size: 30px;
}

.servi_slider .prev_btn1 {
    position: absolute;
    right: 6.6%;
    top: -15%;
    border: 0;
    background-color: #f1f1f1;
    border: none;
    padding: 19px 8px;
    border-radius: 50px;
    color: #b7b7b7;
    line-height: 0;
    z-index: 11;

}

.slick-slider .next_btn1::after {
    position: absolute;
    content: "";
    border: 1px solid #000;
    height: 50px;
    width: 110px;
    border-radius: 50px;
    right: -4px;
    top: -4px;
}





.depart_logo img {
    width: 130px;
    /* display: none; */
    margin-left: 30px;
    margin-top: 23px;
}

.depart_logo1 img {
    width: 130px;
    margin-bottom: 1.7rem !important;
}

.apps_logo img {
    width: 75px;
    /* display: none; */
    margin-left: 30px;
    margin-top: 23px;
}

.apps_logo {
    /* margin-left: 30px; */
    margin-top: 23px;
}

.apps_logo1 img {
    width: 75px;
    margin-bottom: 1.7rem !important;
}

/* ------------------------------ */


.partner_bg {
    position: relative;
    z-index: 0;
    background-color: #f6f6f6;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.partner_head {
    margin-bottom: 4rem;
}

.partner_head h3 {
    font-size: 60px;
    font-weight: 400;
}

.partner_head p {
    font-size: 20px;
}

.partner_logo ul {
    list-style: none;
    display: inline-flex;
}

.partner_logo img {
    width: 150px;
    height: 70px;
    object-fit: contain;
}

.study_main {
    margin-top: 7rem;
}

.case_study {
    width: calc(100% - 1rem);
    height: 450px;
    border-radius: 24px;
    position: relative;
    border: 1px solid #c2c2c229;
    margin: auto;
    overflow: hidden;
}

.case_study::after {
    content: "";
    position: absolute;
    background: rgb(0, 0, 0);
    background: linear-gradient(180deg, #00000029 0%, rgba(0, 0, 0, 1) 135%);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.case_study img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms;
    transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
}

.case_study:hover img {
    transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.15) scaleY(1.15);
}

.tags span {
    border: 1px solid #ffffff1c;
    padding: 5px 11px;
    border-radius: 50px;
    margin-bottom: 1rem;
    display: block;
    width: fit-content;
    font-size: 14px;
    background: #ffffff26;
    backdrop-filter: blur(2px);
}

.case_study_cnt {
    position: absolute;
    bottom: 8%;
    left: 8%;
    color: #fff;
    z-index: 1;
}

.case_study_cnt h5 {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 5px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.case_study_cnt h6 {
    font-size: 18px;
    font-weight: 400;
}

.testi_card {
    box-shadow: 1px 4px 15px -1px #6666664a;
    border-radius: 20px;
    padding: 1.5rem;
    height: 100%;
    display: grid;
    align-content: space-between;
    margin: 0rem 0.5rem;
    height: 415px;
    opacity: 0.4;
    transform: scale(0.9);
    transition: all 0.3s ease-in;
}

.testi-slider .slick-active .testi_card {
    opacity: 1;
    transform: scale(1);
    transition: all 0.3s ease-in;
}

.test_cnt img {
    margin-bottom: 1.5rem;
}

.test_cnt p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
}

.testi_author {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.testi_author h6 {
    font-size: 18px;
    font-weight: 500;
    margin: 0px;
}

.testi_author img {
    max-width: 50px;
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.testi_author span {
    font-size: 16px;
    color: #535353;
}

.testi_video {
    position: relative;
    /* height: 100%; */
    height: 415px;
    z-index: 2;
    position: relative;
    margin: 0rem 0.5rem;
}

/* .testi_video::before {
    content: "";
    position: absolute;
    background: rgb(0, 0, 0);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 105%);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 20px;
} */
.testi_video iframe {
    border: 0;
    z-index: 3;
    position: relative;
    border-radius: 20px;
}

/* .testi_video img {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

.testi_main {
    margin-bottom: 5rem;
    padding-bottom: 3rem;
}

.testi_main .service_head {
    margin-top: 8rem;
    margin-bottom: 1rem;
}

.play_btn {
    position: absolute;
    bottom: 10%;
    left: 34%;
    z-index: 1;
}

.play_btn button {
    color: #fff;
    background-color: #00000000;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 50px;
}


.testi-slider .slick-list {
    padding: 1.5rem 0rem;
}

.testi-slider .slick-dots li {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 3px;
    padding: 0;
    cursor: pointer;
    background-color: #ddd;
    border-radius: 50px;
}

.testi-slider .slick-dots li.slick-active {
    width: 20px;
    height: 10px;
    background: #fab73c;
}

.testi-slider .slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    content: '';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.testi-slider .slick-dots {
    bottom: -25px;
    right: 0px !important;
    z-index: 6;
}

.testi-video-slider .slick-list {
    padding: 1.5rem 0rem;
}

.testi-video-slider .slick-dots li {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 3px;
    padding: 0;
    cursor: pointer;
    background-color: #ddd;
    border-radius: 50px;
}

.testi-video-slider .slick-dots li.slick-active {
    width: 20px;
    height: 10px;
    background: #fab73c;
}

.testi-video-slider .slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    content: '';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.testi-video-slider .slick-dots {
    bottom: -25px;
    right: 0px !important;
    z-index: 6;
}


/* *************************popup css************************** */
.popup-video-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    /* Black overlay */
    z-index: 1000;
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
    background: #000;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.popup-content iframe {
    width: 100%;
    height: 450px;
    border: none;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* *************************popup css************************** */




/* ------------footer-css------------------------------- */

footer {
    background-color: #000;
    color: #fff;
    padding-top: 5rem;
    padding-bottom: 3rem;
    position: relative;
    /* z-index: 99999; */
}

.ftr_quote {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5rem;
}

.quote_cnt h3 {
    font-size: 60px;
    font-weight: 400;
}

.quote_cnt p {
    width: 70%;
    margin-top: 1rem;
}

.quote_button button {
    background: none;
    border: 2px solid #fff;
    color: #fff;
    font-size: 18px;
    padding: 18px 35px;
    border-radius: 50px;
    background-color: #000000;
    transition: all 0.5s;
}

/* .inner_career button {
    font-size: 19px;
    margin-top: 30px;
    padding: 15px 30px;
    border-radius: 100px;
    background-color: #fff;
    border: 1px solid #000;
    transition: all 0.5s;
} */
.quote_button button:hover {
    color: #000000;
    background-color: #ffffff;
    transition: all 0.5s;
    font-weight: 500;
}

.adrs_flex {
    display: flex;
    gap: 1.5rem;
    position: relative;
    height: 100%;
    align-items: center;
}

.adrs_flex img {
    border-radius: 8px;
}

.adrs_flex::after {
    content: "";
    position: absolute;
    background: rgb(255, 255, 255);
    background: radial-gradient(circle, rgb(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.44021358543417366) 100%);
    height: 100%;
    width: 1px;
    right: 0;
}

.after_dubai::after {
    opacity: 0;
}

.adrs_flex h6 {
    font-size: 19px;
    font-weight: 400;
    margin-top: 10px;
}

.adrs_flex p {
    font-size: 15px;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.india,
.oman,
.dubai {
    /* display: grid; */
    justify-items: center;
}

.india img,
.oman img,
.dubai img {
    border: 1px solid #ffffff2b;
}

.india_cnt,
.adrs_oman,
.adrs_dubai {
    padding: 0rem 1rem;
}

.ftr_menu {
    display: grid;
    grid-template-columns: repeat(5, 22%);
    grid-column-gap: 10px;
    margin-top: 4rem;
    border-top: 1px solid #ffffff38;
    padding-top: 4rem;
}

.ftr_menu_items h6 {
    font-size: 22px;
    font-weight: 400;
}

.ftr_menu_items ul {
    list-style: none;
    line-height: 2.5;
    margin-top: 1rem;
    font-size: 16px;
    color: #e7e7e7;
    padding: 0;
}

.ftr_menu_items ul li a {
    color: #e7e7e7;
    text-decoration: none;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
}

.ftr_menu_items ul li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: #f4a200;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.ftr_menu_items ul li a:hover {
    color: #f4a200;
    transform: translateX(5px);
}

.ftr_menu_items ul li a:hover::after {
    width: 100%;
}

.cpy_ftr {
    padding-top: 4rem;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 40px;
}

.cpy_ftr p {
    margin-bottom: 0px;
}

.cpy_ftr_icon {
    display: flex;
    gap: 20px;
}




/* ------------------------------------------------------------ */


/* ----------------------------------------------------------------
------------------ ABOUT US PAGE CSS --------------------------- */

.head-banner {
    position: relative;
    height: 537px !important;
}

.head-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: transparent;
}

/* Dark gradient */
.head-banner::before {
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.3));
}

.abt_banner {
    background: url(../images/consultation-banner.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
    color: #fff;
    display: grid;
    align-items: end;
    padding-bottom: 6rem;
}

.about_title h2 {
    font-size: 65px;
    font-weight: 400;
    margin-bottom: 1rem;
}

.about_title p {
    font-size: 18px;
}

.about_cnt {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.about_cnt p {
    font-size: 22px;
    width: 60%;
    line-height: 35px;
}

.video_slide {
    text-align: center;
    margin: 7rem;
    border-radius: 15px;
}

.about_content {
    margin: 100px 0px;
}

.about_content h1 {
    font-size: 80px;
    font-weight: 400;
}

.about_content span {
    font-size: 18px;
    margin-bottom: 20px;
    width: 60%;
}

.about_content p {
    font-size: 20px;
    margin-top: 30px;
}

.about_content img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.about_content video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.video_about {
    position: relative;
    height: 100%;
}

.video_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* padding: 30px; */
    border: 1px solid #fff;
    border-radius: 100px;
    height: 100px;
    width: 100px;
    line-height: 100px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    transition: all 0.5s ease;
}

.video_play span {
    color: #fff;
    transition: all 0.5s ease;
}

.video_play:hover {
    /* background-color: #ffffff76;
    backdrop-filter: blur(2px); */
    background-color: #fff;
    transition: all 0.5s ease;
}

.video_play:hover span {
    color: #000;
    transition: all 0.5s ease;
}





/* .image {
    height: 100vh;
    width: 70%;
    margin: auto;
    background-image: url("https://images.pexels.com/photos/16972133/pexels-photo-16972133/free-photo-of-aube-amour-table-feuille.jpeg");
    background-position: center center;
    background-size: cover;
    background-repeat: no;
  } */



.count h3 {
    font-size: 60px;
    font-weight: 400;
}

.count h6 {
    font-size: 20px;
    font-weight: 400;
}

.count_main {
    margin-top: 5rem;
    margin-bottom: 10rem;
}


.mission_bg {
    /* background: url(../images/mission_bg.png); */
    background-color: #000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 7rem 0rem;
    color: #fff;
    /* margin-bottom: 5rem; */
    position: relative;
}

.mission_bg::after {
    content: "";
    position: absolute;
    background: rgb(215, 180, 89);
    background: linear-gradient(300deg, rgb(253, 196, 50) 0%, rgb(255, 50, 50) 33%, rgb(106, 41, 218) 66%, rgb(39, 223, 159) 100%);
    height: 300px;
    width: 300px;
    /* border-radius: 40px; */
    top: 30%;
    left: 40%;
    transform: translate(-50%, -50%);
    z-index: 1;
    filter: blur(170px);
    opacity: 0.7;
    -webkit-animation: rotate 10s normal linear infinite;
    animation: rotate 10s normal linear infinite;
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }

    25% {
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
    }

    50% {
        -webkit-transform: rotate3d(0, 0, 1, 180deg);
        transform: rotate3d(0, 0, 1, 180deg);
    }

    75% {
        -webkit-transform: rotate3d(0, 0, 1, 270deg);
        transform: rotate3d(0, 0, 1, 270deg);
    }

    100% {
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

.mission_bg .container {
    position: relative;
    z-index: 2;
}

.mission_cnt {
    padding: 20px;
}

.mission_cnt h4 {
    font-size: 45px;
    font-weight: 400;
    margin-bottom: 2rem;
}

.mission_cnt p {
    font-size: 18px;
    width: 90%;
}

.corevalue_section {
    padding: 6em 0em;
}

.corevalue_section h3 {
    font-size: 58px;
    font-weight: 400;
}

.corevalue_section p {
    font-size: 18px;
}

.case_study_home .slick-list {
    border-radius: 25px;
}



/* ------------------------------------------------------------- */

.service_main_page {
    padding: 2rem 0rem;
}

.servi_main {
    display: flex;
    margin: 3rem 0rem;
    border: 1px solid #EFEFEF;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.inner_srvice_items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.inner_srvice_items a {
    text-decoration: none;
    display: inline-flex;
}

a.view_more_btn {
    padding: 5px 10px;
    /* background: black; */
    border-radius: 100px;
    border: solid 1px transparent;
    transition: all 0.3s ease;
    width: fit-content;
}

a.view_more_btn:hover {
    background: #000;
    color: #fff !important;
}

.inner_srvice_items span {
    font-size: 16px;
    border-radius: 50px;
    padding: 7px 13px;
    color: #545454;
    font-weight: 400;
    transition: all 0.3s ease;
    background-color: #d4dce054;
}

.inner_srvice_items span:hover {
    color: #fff;
    background-color: #545454;
}

.service_details {
    padding: 7rem 5rem;
}

.service_details h2 {
    font-size: 60px;
    font-weight: 400;
    margin-bottom: 2rem;
}

.service_details h3 {
    font-size: 30px;
    margin-bottom: 10px;
}

.service_details p {
    font-size: 18px;
    margin-bottom: 1.5rem;
    margin-top: .5rem;
}

.servi_side_img {
    position: relative;
    overflow: hidden;
    height: 550px;
    border-radius: 0px 20px 20px 0px;
}


.servi_side_img img {
    height: 100%;
    border-radius: 0px 20px 20px 0px;
    width: 100%;
    object-fit: cover;
    transition: transform 500ms;
    transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
}

.servi_main:hover {
    box-shadow: 0px 4px 25px -6px #0000002d;
    transform: translateY(-3px);
    transition: all 0.3s ease;
}

.servi_main:hover .servi_side_img img {
    transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.15) scaleY(1.15);
}

.servi_side_img::before {
    height: 100%;
    border-radius: 0px 20px 20px 0px;
    width: 100%;
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.055) 0%, rgba(0, 0, 0, 0.531) 100%);
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;

}

.servi_side_img h4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* font-size: 250px; */
    font-size: 100px;
    text-align: center;
    font-weight: 500;
    color: rgba(255, 255, 255, 0);
    font-family: 'poppins', sans-serif;
    /* stroke: rgba(255, 255, 255,1); */
    -webkit-text-stroke: 1.5px rgb(255, 255, 255);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    paint-order: stroke fill;
    font-stretch: 0%;
    /* -webkit-text-fill-color: #fff; */
    stroke-width: 3px;
    z-index: 2;
}





/* ----------------------------------------------------------------
------------------UI UX DESIGN PAGE CSS --------------------------- */

.uiux_into {
    background-color: #fff;
    color: #000;
    padding-top: 6rem;
    padding-bottom: 1rem;
}

.uiux_into h2 {
    font-size: 70px;
    font-weight: 400;
    margin-bottom: 20px;
}

.uiux_into p {
    font-size: 18px;
    max-width: 800px;
    line-height: 1.5;
    width: 100%;
    opacity: 0.9;
}

/* ------------- */
.uiux_banner {
    background-image: url(../images/uiux-banner.png);
    height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* max-width: 1280px; */
    /* margin: auto; */
    border-radius: 20px;
    margin: 0 10px;
    text-align: center;
}

/* ---------- */
.uiux-role {
    background-color: #fff;
    color: #000;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.uiux-role h3 {
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 20px;
}

.uiux-role p {
    font-size: 18px;
    line-height: 1.7;
    opacity: 0.9;
}

/* ------------ */
.experts_section {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.expert_mainhead h2 {
    font-size: 60px;
    font-weight: 400;
    margin-bottom: 30px;
}

.expert_mainhead p {
    max-width: 750px;
    font-size: 18px;
}

.experts-type {
    padding: 40px 0px;
    border-bottom: 1.5px solid #000;
}

.experts-type img {
    aspect-ratio: 2 / 2;
    max-width: 50px;
}

.expert_head {
    font-size: 30px;
    font-weight: 400;
}

.expert_content p {
    font-size: 18px;
    line-height: 1.5;
    opacity: 0.9;
}

/* --------- */
.partners_bg {
    background: #F5F5F5;
    margin-top: 5rem;
}

.partners_bg .partner_logo {
    padding: 30px;
}

.partners_bg img {
    filter: brightness(0) saturate(100%) invert(28%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%);
}

.partners_bg .marquee {
    border: none;
    border-radius: 0px;
}

.partners_bg .marquee-content {
    padding: 0;
}

/* --------------- */
.case_study_ux {
    margin-top: 6rem;
    margin-bottom: 5rem;
}

.case_box {
    position: relative;
    border: 1px solid #EFEFEF;
    overflow: hidden;
    border-radius: 20px;
    margin: 10px;
    box-shadow: 0px 1px 15px 0px #0000000f;
}

.case_box img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center;
}

.case_box_content {
    height: 400px;
    width: 100%;
    object-fit: cover;
}

.page-project {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    overflow: hidden;
    height: 350px;
    border-radius: 20px;
    border: 1px solid #EFEFEF;
    /* margin-bottom: 24px; */
}

.page-project img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: transform 500ms;
    transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
}

/* .page-project:hover img {
    transform: scale(1.1);
} */

/* .page-project:hover img {
    transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.15) scaleY(1.15);
} */

.page-project-text {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}

.page-project-text:hover {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}

.page-project-text-content {
    color: #fff;
    bottom: 20px;
    left: 40px;
    right: 40px;
    position: absolute;
    border-radius: 5px;
    transform: translateY(50%);
    transition: all 0.5s ease-in-out;
}

.page-project-text h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-project-text p {
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.3s ease-in-out;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-project-text:hover p {
    opacity: 1;
    transform: translateY(0%);
    transition: all 0.3s ease-in-out;
}

.page-project-text:hover .page-project-text-content {
    transform: translateY(0%);
    transition: all 0.5s ease-in-out;
}

/* .slick-prev.slick-arrow {
    position: absolute;
    right: 100px;
    top: -50px;
} */

.slick-next.slick-arrow {
    position: absolute;
    right: 20px;
    top: -50px;
}

.case-text {
    padding: 0px 10px 10px 10px;
}

.text_box {
    padding: 32px 20px;
    border-radius: 0px 0px 20px 20px;
    background-color: #f1f1f1;
    color: #000000;
    margin-top: 0rem;
    /* background-image: linear-gradient(185deg, #000000fc, #000000fc, #000000d1); */
    height: 100%;
    min-height: 160px;
}

.text_box h3 {
    font-size: 25px;
    font-weight: 400;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.text_box p {
    font-size: 18px;
    margin-bottom: 0;
}

.process-steps {
    padding: 20px 30px;
    background: #ECECEC;
    margin: 10px;
    border-radius: 25px;
    height: 100%;
    min-height: 280px;
}

.process_num {
    font-size: 60px;
    font-weight: 800;
    color: #d4d4d4;
}

.process-steps h3 {
    font-size: 1.5rem;
}

.process-steps p {
    font-size: 17px;
}


.challenges {
    margin: 100px 0px;
}

.challenges h3 {
    margin-top: 40px;
    font-size: 50px;
    font-weight: 400;
}

.challenges p {
    font-size: 17px;
    line-height: 1.5;
}

.challenges img {
    width: 100%;
    border-radius: 33px;
    margin-top: 30px;
}

/* ---------- */
/* .slick-prev,
.slick-next {
    border-radius: 50px;
    border: 2px solid black;
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
} */


/* .slick-prev span,
.slick-next span {
    font-size: 20px;
    display: inline-block;
} */

.slick-prev {
    background-color: transparent;
}

.slick-prev span {
    color: gray;
}

/* .slick-next {
    background-color: black;
} */

/* .slick-next span {
    color: white;
    background-color: black;
    border-radius: 50%;
    padding: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
} */

.news {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.news_mainhead h2 {
    font-size: 60px;
    font-weight: 400;
    margin-bottom: 3rem;
}

.news_box {
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 13px 26px -4px #0000001f;
    height: calc(100% - 1.5rem);
    margin-bottom: 1rem;
    transition: 0.3s all;
}

.news_box:hover {
    box-shadow: 0px 2px 8px 0px #7a0eb129;
}

.news_box_image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.news_box img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    transition: transform 500ms;
    transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
}

.news_box:hover img {
    transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.15) scaleY(1.15);
}

.news_text_card {
    padding: 20px 15px;
}

.news_type {
    padding: 2px 7px;
    background-color: #EDEDED;
    color: #000;
    border-radius: 20px;
    font-size: 11px;
}

.news_date {
    color: #656565;
    font-size: 14px;
}

.news_text_card h6 {
    margin-top: 10px;
    font-size: 25px;
    font-weight: 500;
}

.news_text_card button {
    margin-top: 20px;
    padding: 7px 20px;
    border-radius: 30px;
    border: none;
    background-color: #000;
    color: #fff;
    font-size: 18px;
}

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

.news_text_card h5 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.news_text_card p {
    margin-top: 0.5rem;
    color: #717171;
    overflow: hidden;
    /* display: -webkit-box; */
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* -webkit-box-orient: vertical; */
}

.blog_img {
    height: 450px;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    margin-top: 10px;
    margin-bottom: 15px;
    background: #020B1A;
}

.blog_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms;
    transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
}

.blog_img:hover img {
    transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.15) scaleY(1.15);
}

/***** news side bar ******/

.news_side {
    margin-top: 10px;
}

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

.news_box_side {
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 13px 26px -4px #0000001f;
    /* height: calc(50% - 1.5rem); */
    margin-bottom: 1rem;
    display: flex;
    min-height: 113px;
}

.news_text_card_side p {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0px;
    font-size: 14px;
}

.news_text_card_side button {
    margin-top: 0px;
    padding: 4px 10px;
    border-radius: 30px;
    border: none;
    background-color: #000;
    color: #fff;
    font-size: 12px;
}

.news_text_card_side {
    padding: 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog_text {
    margin-bottom: 30px;
}

pre {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    font-size: .875em;
    background: #11073f;
    border-radius: 10px;
    padding: 10px;
    color: #a99aff;
    border: solid 1px;
    box-shadow: 1px 0px 3px -1px black;
}








/* GSAP-CSS */
section.horizontal {
    overflow-x: hidden;
}

section.horizontal .pin-wrap,
section.horizontal .animation-wrap {
    display: flex;
    position: relative;
    z-index: 1;
    height: 100vh;
}

section.horizontal .item {
    position: relative;
    padding: 30px 30px;
    flex: 0 0 500px;
    height: calc(100vh - 300px);
}

section.horizontal .animation-wrap.to-right {
    counter-reset: item;
    float: left;
}

section.horizontal .animation-wrap.to-left {
    counter-reset: item 11;
    float: right;
}

section.horizontal .animation-wrap .item:nth-child(2n+2) {
    align-items: flex-start;
}

section.horizontal .animation-wrap .item:nth-child(4n+4) {
    align-items: flex-end;
}




.animate {
    color: #ffffff;
    max-width: 800px;
    line-height: 40px;
    margin: 200px auto;
    font-size: 20px;
}


/* =========== APPZ Services ======= */


.appz_serv {
    background-color: #fff;
    color: #000;
    padding-top: 7rem;
    padding-bottom: 1rem;
}

.appz_serv h2 {
    font-size: 60px;
    font-weight: 400;
    margin: 20px 0;
    position: relative;
    margin-top: 7rem;
}

.registred {
    font-size: 40px;
    position: absolute;
    top: 10px;
    font-weight: 600;
}

.serv_box {
    background-color: #f6f6f6;
    border-radius: 20px;
    overflow: hidden;
    height: calc(100% - 3rem);
    margin-bottom: 4rem;
}

.serv_box img {
    /* width: 100%; */
    height: 130px;
    object-fit: cover;
}

.serv_box:hover .servi_img img {
    transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.15) scaleY(1.15);
}

/* .serv_box_head {
    padding: 35px 20px;
} */

.serv_box_head {
    /* padding: 30px 20px; */
    /* min-height: 50px; */
    height: 90px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.serv_box_head h4 {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 0;
}

.serv_text_card {
    padding: 20px;
    color: #000000bf;
}

.serv_text_card p {
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.serv_text_card button {
    border: none;
    margin-top: 3rem;
    transition: 0.2s all ease-in;
    margin-top: 20px;
    padding: 6px 20px;
    border-radius: 30px;
    border: none;
    background-color: #f0f0f0;
    color: #000000bf;
    font-size: 20px;
    /* border: #00000059 solid 1px; */
    font-size: 17px;
    text-decoration: none;
}

.serv_text_card button:hover {

    background-color: #000;
    color: #fff;
    /* font-size: 20px; */
}













.appz_banner {
    background: linear-gradient(to top right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%), url(../images/appz_main.avif) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.head-banner.inner-creative {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%), url(../images/creative_banner2.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.head-banner.inner-market {
    background: linear-gradient(to top right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%), url(../images/market360_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.head-banner.inner-labz {
    background: linear-gradient(to top right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%), url(../images/inner_labz.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.head-banner.inner-consultation {
    background: linear-gradient(to top right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%), url(../images/inner_consultation.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    position: relative;
}

/* .appz_banner::after{
    content: "";
    position: absolute;
    background: rgb(0, 0, 0);
    background: linear-gradient(189deg, rgba(0, 0, 0, 0) 0%, rgb(120 0 141 / 20%) 100%);
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
} */

.serv_head {
    align-items: center;
    margin-bottom: 15px;
    color: #ffffff;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.serv_sub_head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 700px;
    width: 100%;
}

.serv_head h1 {
    font-size: 50px;
    font-weight: 500;
    color: #fff;
}

.serv_head p {
    color: #fff;
}

.serv_head_cnt {
    padding: 0 20px;
    /* max-width: 800px; */
}

.serv_head_btn a {
    color: #ffffff;
    background-color: #a9a9a93b;
    backdrop-filter: blur(15px);
    padding: 6px 15px;
    border-radius: 100px;
    font-size: 19px;
    font-weight: 400;
    text-decoration: none;
    border: 1px solid #ffffff30;
    transition: 0.5s;
}

/* .serv_head_btn a:hover {
    background-color: #000000;
    color: #fff !important;
    border: 1px solid #ffffff;
} */

.serv_intro p {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.6;
    color: #000000;
    /* max-width: 1000px; */
    margin-bottom: 35px;
}

.contact_banner {
    background: url(../images/contact-bannerr.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.contact_banner::before {
    z-index: -1 !important;
}

.contact_head {
    align-items: center;
    margin-bottom: 15px;
    color: #ffffff;
    justify-content: space-between;
}

.contact_head h1 {
    font-size: 60px;
    font-weight: 500;
    /* margin-bottom: 15px; */
}

.contact-padding {
    padding-bottom: 100px;
}

.loca-img {
    display: grid;
    justify-items: center;
}

.loca-img img {
    margin-bottom: 10px;
}

.locations-box {
    background: #000;
    color: #fff;
    padding: 30px;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 10px;
    width: 100%;
    transition: all 0.35s ease;
    cursor: pointer;
}

.locations-box:hover {
    transform: translateY(-8px);
}

.contact_cnt {
    padding: 0px;
}

.contact_cnt p {
    width: 75%;
    margin-bottom: 7px;
    font-size: 14px;
}

.contact_form_box {
    padding: 50px 30px;
    color: #000;
    border-radius: 25px;
    box-shadow: 0px 4px 10px 2px #00000018;
    height: calc(100% - 13px);
}

.social {
    list-style: none;
    justify-content: end;
}

.social li {
    float: left;
    margin: 0 6px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social li:hover {
    background: #fab73c;
    transition: all 0.3s ease;
}

.social li img {
    /* margin-left: 15px; */
    border-radius: 50px;
    height: 28px;

}

.form-contents label {
    padding: 5px 15px;
    margin-top: 20px;
}

.form-contents input {
    width: 100%;
    padding: 22px 16px;
    border-radius: 15px;
    border: none;
    background: #F2F2F2;
    font-size: 14px;
    outline: none;
}

.form-contents textarea {
    width: 100%;
    padding: 22px 16px;
    border-radius: 15px;
    border: none;
    background: #F2F2F2;
    font-size: 14px;
    outline: none;
}

.form-contents button {
    margin-top: 25px;
    padding: 18px;
    width: 100%;
    border: none;
    background: #000;
    color: #fff;
    font-size: 18px;
    border-radius: 15px;
}


.study_details {
    overflow-x: hidden;
    margin: 5rem 0rem;
    width: 100%;
    padding-top: 2rem;
}

.study_details h2 {
    font-size: 70px;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.study_details p {
    font-size: 18px;
}

.bento img {
    height: 650px;
    margin-bottom: 1rem;
    border-radius: 15px;
    width: 100%;
    object-fit: cover;
}

.bento1 img,
.bento2 img,
.bento3 img,
.bento4 img,
.bento5 img,
.bento6 img {
    height: 350px;
    margin-bottom: 1rem;
    border-radius: 15px;
    width: 100%;
    object-fit: cover;
}

/* .bento1 img {
    width: 100%;
    height: 100%;
} */

/* .bento2 img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
} */

/* .bento4 img,
.bento5 img {
    height: calc(200px - 1rem);
    margin-bottom: 1rem;
}

.bento3 img,
.bento6 img {
    height: calc(250px - 1rem);
    margin-bottom: 1rem;
} */

/* .bento3 img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.bento4 img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
} */

/* .bento5 img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.bento6 img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
} */


.slick-slider .next_btn ::after {
    position: absolute;
    content: "";
    border: 1px solid #000;
    height: 50px;
    width: 110px;
    border-radius: 50px;
    right: -4px;
    top: -4px;
}

.next_btn {
    position: absolute;
    top: -15%;
    right: 0px;
    background-color: #000;
    border: none;
    padding: 19px 8px;
    border-radius: 50px;
    color: #fff;
    line-height: 0;
}

.next_btn span {
    font-size: 30px;
}

.prev_btn span {
    font-size: 30px;
}

.prev_btn {
    position: absolute;
    right: 60px;
    top: -15%;
    border: 0;
    background-color: #f7f7f7;
    border: none;
    padding: 19px 8px;
    border-radius: 50px;
    color: #b7b7b7;
    line-height: 0;
    z-index: 2;
}








.marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 200px;
    overflow-x: hidden;
}

.track {
    white-space: nowrap;
    will-change: transform;
    animation: marquee 32s linear infinite;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}



.about_banner {
    background: url(../images/about-us-banner.avif) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.web-banner {
    /* background: url(../images/coding_banner.png) no-repeat center center fixed; */
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/coding_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.corporate-banner {
    /* background: url(../images/coding_banner.png) no-repeat center center fixed; */
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/corporate_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.ecommrce-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/ecomrc_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.software-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/software.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.cms-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/cms_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.pwa-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/pwa.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.mobile-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/mobile2.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.brand-identity {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/brand.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.marketing-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/marketing.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.business-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/business_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.optimisation-banner {
    background:
        linear-gradient(to right, rgb(0 0 0 / 70%), rgb(0 0 0 / 69%)), url(../images/optimisation_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 464px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.social-media {
    background:
        linear-gradient(to right, rgb(0 0 0 / 70%), rgb(0 0 0 / 69%)), url(../images/social_media.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 464px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.google-adz {
    background:
        linear-gradient(to right, rgb(0 0 0 / 70%), rgb(0 0 0 / 69%)), url(../images/google_ads.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 464px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}



.head-banner.content-mrktng {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 62%)), url(../images/content_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.perfomance-banner {
    background: linear-gradient(to right, rgb(0 0 0 / 82%), rgb(0 0 0 / 34%)), url(../images/perfomance_mrktng.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.email-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 83%)), url(../images/email_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.market-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/marketplace.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.hardware-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/hardware.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.embedded-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/embedded_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.software-hardware {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/softaware_haedware.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.iot-development {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/iot_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.industry-solutions {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/industry_solutions.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.digital-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/digital_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.conversion-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/conversion_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.cloud-based {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/cloud_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.digital-index {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/index_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.reputation-managemnt {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/reputation_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;

}

.head-banner.auditing-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/auditing_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.inhouse-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/inhouse_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.event-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/event_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.motion-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/motion_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.head-banner.packaging-banner {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(0 0 0 / 33%)), url(../images/packaging_banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.service_banner {
    background: url(../images/services-banner.avif) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.service_banner1 {
    background: url(../images/services-banner1.avif) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.product_banner {
    background: url(../images/product-banner.avif) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.product_banner::before {
    z-index: -1 !important;
}

.product_banner_blog {
    background: url(../images/product-banner.avif) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    box-shadow: inset 0 0 0 2000px rgb(0 0 0 / 59%);
}



/* =============== Industry ================= */
.industry_banner {
    background: url(../images/industries-banner.avif) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
    background-position: right;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.industry_section {
    padding: 3em 0em;
}

.industry_section h1 {
    font-size: 80px;
    font-weight: 400;
}

.industry_section p {
    font-size: 18px;
}

.indusrty_slider {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;

}

.indusrty_slider::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 30px;
    margin: 0 300px !important;
}

.indusrty_slider::-webkit-scrollbar {
    border-radius: 30px;
    height: 8px;
    background-color: #ffffff;
}

.indusrty_slider::-webkit-scrollbar-thumb {
    border-radius: 30px;
    background-color: #d4d4d4;
}

.indusrty_slider::-webkit-scrollbar-button {
    background: #ccc;
    border-radius: 4px;
    height: 14px;
    width: 14px;
    background: url("data:image/svg+xml;utf8,<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'><polyline points='7,1 3,5 7,9' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' /></svg>") center no-repeat;
}


.indusrty_slider::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background: url("data:image/svg+xml;utf8,<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'><polyline points='7,1 3,5 7,9' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' /></svg>") center no-repeat;
    width: 0;
    display: none;
}

.indusrty_slider::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background: url("data:image/svg+xml;utf8,<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'><polyline points='7,1 3,5 7,9' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' /></svg>") center no-repeat;
    display: none;

}

.indusrty_slider::-webkit-scrollbar-button:single-button:horizontal:increment {
    background: url("data:image/svg+xml;utf8,<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'><polyline points='3,1 7,5 3,9' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' /></svg>") center no-repeat;
}

/* .indusrty_slider ::-webkit-scrollbar {
    width: 10px;
  } */

.marg_top {
    margin-top: 5rem;
}

/* --------------- */


/* html/css implementation */

.faq_section {
    margin-top: 2rem;
    margin-bottom: 5rem;
}

.accordion {
    width: 100%;
    margin-top: 3rem;
}

.accordion-header {
    padding: 1.5rem 0rem;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.accordion-content {
    padding: 30px 0px 30px 0px;
    background-color: #fff;
    border-top: none;
    position: relative;
}

.accordion-itemm {
    border-bottom: 1px solid #f4f4f4;
    margin-bottom: 5px;
}

.accordion-item {
    border: none;
}

/* Initially open the first section */
.accordion-content {
    display: none;
}

.accordion-itemm:first-child .accordion-content {
    display: block;
}

.arrow-none {
    height: 30px;
    width: 30px;
    background: #ffffff;
    position: absolute;
    bottom: 15px;
    left: -10px;
    z-index: 10;
}

/* Arrow styles */
.arrow {
    font-size: 30px;
    transition: transform 0.3s ease;
}

/* .arrow i {
    font-size: 30px;
    background: #F3F3F3;
    font-weight: 300;
    color: #3e3e3e;
    border-radius: 50px;
    padding: 5px;
} */
.arrow span {
    font-size: 30px;
    background: #F3F3F3;
    font-weight: 300;
    color: #3e3e3e;
    border-radius: 50px;
    padding: 5px 11px;
    transition: 0.3s ease;
    white-space: nowrap;
}

.arrow span:hover {
    background: #6e6e6e;
    color: #ffffff;
}

/* Rotating arrow when section is open */
.accordion-header.active .arrow {
    transform: rotate(90deg);
}

.proj_name {
    font-size: 45px;
    font-weight: 400;
}

.project-num {
    font-size: 25px;
    font-weight: 200;
    color: #7d7d7d;
    margin-bottom: 0px;
    margin-top: 14px;
}

.pro_discr {
    font-size: 18px;
    font-weight: normal;
    margin-top: 0.5rem;
}

.insustry_case_box {
    width: calc(100% - 2rem);
    height: calc(100% - 1rem);
    margin-bottom: 40px;
}

.insustry_case_box img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 10px;
}

.insustry_case_box h3 {
    font-size: 18px;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #2E2E2E !important;
}

.insustry_case_box p {
    font-size: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #2E2E2E !important;
}

.industry_more {
    font-size: 18px;
    color: #848484 !important;
}




/* ---------  Tarining  -------- */
.training_box {
    margin-bottom: 50px;
}

.training_box img {
    width: 100%;
    border-radius: 20px;
    height: 250px;
    object-fit: cover;
    /* margin-bottom: 20px; */
}

.training_texts {
    padding: 20px 10px;
}

.training_texts h3 {
    font-weight: 400;
    font-size: 35px;
    margin-bottom: 20px;
}

.training_texts p {
    font-size: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #2E2E2E !important;
    margin-bottom: 24px;
}

.training_readmore {
    font-size: 16px;
    color: #fff !important;
    padding: 12px 20px;
    border-radius: 50px;
    background: #000;
    background: linear-gradient(90deg, #424242 0%, #161616 100%);
    transition: 0.3s ease;
}

.training_readmore:hover {
    transition: 0.3s ease;
    background: linear-gradient(90deg, rgba(135, 89, 215, 1) 0%, rgba(87, 55, 146, 1) 100%);

}

.studentfeed {
    margin-top: 6rem;
    margin-bottom: 5rem;
}

.feedback_box {
    padding: 20px;
    margin: 10px;
    box-shadow: 0px 0px 15px 0px #00000010;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 450px;
}

/* .feeds{
    text-align: justify;
} */
.feedback_name {
    display: flex;
    align-items: center;
}

.feedback_name img {
    width: 57px;
    width: 57px;
    border-radius: 10px;
    object-fit: cover;
    margin-right: 20px;
}

.feedback_name h4 {
    font-size: 18px;
    margin-bottom: 2px;
    font-weight: 500;
}

.feedback_name p {
    font-size: 15px;
    margin-bottom: 0px;
    color: #5b5b5b;
    font-weight: 300;
}



/* --------Marquee------- */

:root {
    --marquee-width: 100%;
    --marquee-height: 60px;
    /* --marquee-elements: 12; */
    /* defined with JavaScript */
    --marquee-elements-displayed: 5;
    --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
    --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}

.marquee {
    width: var(--marquee-width);
    height: 100%;
    color: #000;
    overflow: hidden;
    position: relative;
    border: 0.5px solid #705c1bcf;
    border-radius: 87px;
    padding: 5px;
}

.marquee-content {
    list-style: none;
    height: 100%;
    display: flex;
    animation: scrolling var(--marquee-animation-duration) linear infinite;
    margin-bottom: 0;
    padding: 1.2rem;
}

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements)));
    }
}

.marquee-content li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: var(--marquee-element-width);
    max-height: 100%;
    font-size: calc(var(--marquee-height)*3/4);
    /* 5rem; */
    white-space: nowrap;
}

.marquee-content li img {
    max-width: 150px;
    max-height: 60px;
    /* height: 100%; */
    filter: grayscale(1);
    transition: all 0.3s ease-in-out;
}

.marquee-content li img:hover {
    filter: grayscale(0);
    /* transition: all 0.5s ease-in-out; */
}


@media (max-width: 600px) {
    :root {
        --marquee-width: 100vw;
        --marquee-height: 16vh;
        --marquee-elements-displayed: 3;
    }

    .marquee:before,
    .marquee:after {
        width: 5rem;
    }
}

@media (max-width: 500px) {
    :root {
        --marquee-width: 100vw;
        --marquee-height: 16vh;
        --marquee-elements-displayed: 2;
    }

    .marquee:before,
    .marquee:after {
        width: 5rem;
    }
}

/* --------Marquee end------- */

.counter_wrapper {
    width: 100%;
    padding-bottom: 50px;
}

.counter_wrapper .count_box {
    border: 1px solid #ffffff20;
    padding: 50px 20px;
    border-radius: 50px;
    text-align: center;
}

.counter_wrapper .count_box h3 {
    font-size: 60px;
    font-weight: 400;
    color: #fff;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.counter_wrapper .count_box h4 {
    font-size: 20px;
    font-weight: 300;
    color: #fff;
    padding-top: 10px;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.counter_wrapper .box_center {
    background-position: center 0;
    background-size: cover;
}

.counter_wrapper .box_center h3,
.counter_wrapper .box_center h4 {
    color: #fff;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.counter_wrapper .box_hover:hover h3,
.box_hover:hover h4 {
    color: #fff;
}

@media (max-width: 768px) {
    .counter_wrapper .col-md-4 {
        margin-bottom: 15px;
    }
}

.gradient_border {
    background: #fafafa;
    padding: 1.5px;
    border-radius: 22px;
    height: 100%;
    transition: all ease 0.5s;
}

.gradient_border:hover {
    /* background: linear-gradient(180deg, rgb(253, 196, 50) 0%, rgb(255, 50, 50) 33%, rgb(106, 41, 218) 66%, rgb(67, 175, 137) 100%); */
    background: linear-gradient(169deg, rgb(181 144 50) 20%, rgb(207 169 29) 50%, rgb(0 0 0) 70%, rgb(0 0 0) 100%);
    transition: all ease 0.5s;
    transform: translateY(-7px) scale(1.01);
}

.core_box {
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    height: 100%;
    border: 2px solid #66666612;

}

.core_box img {
    margin-bottom: 15px;
}

.core_box h5 {
    font-size: 18px;
}

.core_image {
    overflow: hidden;
    border-radius: 22px;
    height: 260px;
    width: 100%;
}

.core_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms;
    transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
}

.core_image:hover img {
    transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.15) scaleY(1.15);
}

/* -------- Career ------- */

.career_banner {
    background: url(../images/contact-banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    color: #fff;
}

.career_banner .serv_head_title {
    font-size: 80px;
}

.carrer-mission {
    color: #fff;
    font-size: 50px;
}

.career {
    padding: 100px 0px;
}

.career_box {
    padding: 40px;
    background: #dadada36;
    border-radius: 25px;
    width: 100%;
    height: calc(100% -5px);
    border: 1px solid #d6d6d6;
    margin-bottom: 25px;
}

.career_box h4 {
    font-size: 30px;
    font-weight: 500;
}

.career_box p {
    font-size: 17px;
}

.career_box i {
    margin-right: 5px;
}

.career_box button {
    margin-top: 15px;
    padding: 10px 20px;
    border-radius: 30px;
    background-color: #fff;
    border: 1px solid #000;
    transition: all 0.5s;
}

.career_box button:hover {
    color: #fff;
    background-color: #000;
    border: 1px solid #000;
    transition: all 0.5s;
}

.lifestyle {
    padding: 100px 0px;
    background-color: #f5f5f5;
    position: relative;
}

.lifestyle::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    top: 40%;
    transform: translate(-50%, -50%);
    left: 50%;
    background: rgb(237, 212, 74);
    background: linear-gradient(190deg, rgba(237, 212, 74, 1) 0%, rgba(219, 73, 73, 1) 30%, rgba(175, 65, 218, 1) 60%, rgba(50, 175, 189, 1) 88%);
    filter: blur(90px);
    opacity: 0.5;
}

.life_head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    position: relative;
}

.lifestyle h3 {
    text-align: center;
    font-size: 60px;
    font-weight: 400;
}

.lifestyle span {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    margin: 0px 300px 40px 300px;
}

.lifestyle_slider img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    padding: 10px;
    border-radius: 30px;
}


/* --------- inner career --------- */
.inner_career {
    padding: 100px 0px;
}

.inner_name {
    font-size: 45px;
    font-weight: 400;
}

.inner_career button {
    font-size: 19px;
    margin-top: 30px;
    padding: 15px 30px;
    border-radius: 100px;
    background-color: #fff;
    border: 1px solid #000;
    transition: all 0.5s;
}

.button_right {
    display: flex;
    justify-content: end;
}

.inner_career button:hover {
    color: #fff;
    background-color: #000;
    transition: all 0.5s;
}

.line-horiz {
    width: 100%;
    height: 1px;
    margin: 40px 0px;
    background: #00000020;
}

.about_role h3 {
    font-size: 20px;
    margin-top: 50px;
}

.about_role p {
    font-size: 16px;
    width: 70%;
}

.form_appli {
    margin-bottom: 100px;
}

.form_appli h3 {
    font-size: 30px;
    margin-bottom: 15px;
}

.form_appli p {
    font-size: 16px;
    width: 60%;
    margin-bottom: 50px;
}

.career_application input,
.career_application select {
    width: 100%;
    padding: 22px 16px;
    border-radius: 15px;
    border: none;
    background: #F2F2F2;
    font-size: 14px;
    outline: none;
    /* margin-top: 30px; */
}

.career_application select {
    margin-top: 8px;
}

.form_label {
    margin-top: 20px;
    margin-left: 10px;
}

.required-star {
    color: #e53e3e;
    margin-left: 2px;
    font-weight: bold;
}

.career_application textarea {
    width: 100%;
    padding: 22px 16px;
    border-radius: 15px;
    border: none;
    background: #F2F2F2;
    font-size: 14px;
    outline: none;
    /* margin-top: 30px; */
}

.career_application button {
    padding: 18px;
    /* width: 100%; */
    border: none;
    background: #000;
    color: #fff;
    font-size: 18px;
    border-radius: 15px;
    padding: 20px 70px;
}

input[type="file"] {
    display: none;
}

.custom-file-upload {
    width: 100%;
    padding: 10px 16px;
    border-radius: 15px;
    border: none;
    background: #F2F2F2;
    font-size: 14px;
    outline: none;
    margin-top: 30px;
    text-align: center;
}

.custom-file-upload p {
    margin: 0px;
    color: #6c6c6c;
    font-size: 15px;
    width: 100%;
}

.career-submit {
    margin-top: 30px;
}

/* Selected File Preview */
.selected-file-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    margin-top: 30px;
}

.selected-file-preview .file-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

.selected-file-preview .file-info i {
    font-size: 24px;
    color: #dc3545;
}

.selected-file-preview .file-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.selected-file-preview .file-size {
    font-size: 12px;
    color: #6c757d;
}

.selected-file-preview .remove-file-btn {
    background: #ff5667;
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
}

.selected-file-preview .remove-file-btn:hover {
    background: #c82333;
    transform: scale(1.1);
}

.selected-file-preview .remove-file-btn i {
    font-size: 14px;
    color: #fff;
}

/* File Upload Progress */
[x-cloak] {
    display: none !important;
}

.file-upload-progress {
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    margin-top: 30px;
}

.upload-progress-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.upload-spinner {
    font-size: 32px;
    color: #28a745;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

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

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

.upload-text {
    flex: 1;
}

.upload-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.upload-header span {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.upload-percent {
    font-weight: 600;
    color: #28a745;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #20c997);
    border-radius: 10px;
    transition: width 0.3s ease;
}

.products_banner {
    background: url(../images/contact-banner.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.products_banner .serv_head_title {
    font-size: 80px;
}




/* --------project css------- */

.project_banner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 5rem 0rem;
    padding-top: 1rem;
}

.project_left h2 {
    font-size: 80px;
    font-weight: 400;
}

.project_right {
    width: 50%;
}

.project_right p {
    font-size: 18px;
}

.project_left span {
    background-color: #ffa53a40;
    padding: 5px 19px;
    border-radius: 15px;
    display: block;
    margin-bottom: 2rem;
    width: max-content;
}

.project_section {
    margin-top: 8rem;
    margin-bottom: 5rem;
}

.products_section {
    margin: 5rem 0rem;
}

.product_slider .slick-dots {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin-top: 5px;
    gap: 8px;
}

.product_slider .slick-dots li {
    width: 10px;
    height: 10px;
    background: #626262;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product_slider .slick-dots li.slick-active {
    width: 25px;
    background: #FED57F;
    border-radius: 5px;
}

.product_slider .slick-dots li button {
    display: none;
}

.product_box {
    position: relative;
    border: 1px solid #EFEFEF;
    overflow: hidden;
    border-radius: 20px;
    margin: 10px;
    box-shadow: 0px 1px 15px 0px #0000000f;
}

.product_box img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center;
}

.product_width {
    max-width: 1000px;
    margin: 0 auto;
}

.product_finkey {
    position: relative;
    margin-bottom: 1.7rem;
}

.product_finkey img {
    width: 100%;
    /* border-radius: 30px; */
    position: relative;
    border-radius: 32px 32px 0px 0px;
    /* height: 823px; */
}

/* .product_finkey::after{
    content: "";
    position: absolute;
    height: 100%;
    background: #000;
    width: 100%;
    border-radius: 30px;
    z-index: 1;
    top: 0;
    left: 0;
} */

.product_head {
    margin-bottom: 3rem;
}

.product_head h3 {
    font-size: 60px;
    font-weight: 400;
    text-align: center;
}

.product_head p {
    font-size: 18px;
    width: 60%;
    margin: 0 auto;
    text-align: center;
}

.product_text {
    /* margin-top: 0.2rem; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f1f1f1;
    padding: 20px 20px;
    border-radius: 0px 0px 32px 32px;
}

.product_text h3 {
    font-size: 35px;
}

.product_text P {
    font-size: 18px;
    margin-bottom: 0;
}

.product_text button {
    border: 1px solid #e2e2e2;
    padding: 5px 20px;
    font-size: 18px;
    border-radius: 50px;
    background: #fff;
    font-weight: 500;
    transition: all 0.5s;
}

.product_text button:hover {
    background: #000;
    color: #fff;

}

.pro_text_box {
    padding: 25px 20px;
    border-radius: 0px 0px 20px 20px;
    background-color: #f6f6f6;
    color: #000;
    margin-top: 0rem;
}

.pro_head {
    font-size: 60px;
    font-weight: 400;
}

.heading_text {
    font-size: 18px;
    width: 60%;
    margin-bottom: 3rem;
}

.pro_text_box h3 {
    font-size: 30px;
    font-weight: 400;
}

.pro_text_box p {
    font-size: 16px;
    margin-bottom: 0;
}

.pro_text_box button {
    padding: 7px 15px;
    border-radius: 30px;
    border: 1px solid #000;
    margin-top: 20px;
    transition: all 0.5s;
}

.pro_text_box button:hover {
    background: #000;
    color: #fff;
    transition: all 0.5s;
}


/* .menu_services{
    transition: all ease 0.5s;
} */

.tabs {
    width: 650px;
    float: none;
    list-style: none;
    position: relative;
    text-align: left;
    display: flex;
    flex-direction: column;
    padding-top: 4rem;
}

.tabs li {
    float: left;
    display: block;
    line-height: 2;
}

.tabs input[type="radio"] {
    position: absolute;
    top: 0;
    left: -9999px;
}

.tabs label {
    display: block;
    border-radius: 2px 2px 0 0;
    font-size: 35px;
    font-weight: normal;
    cursor: pointer;
    position: relative;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color: #acacac;
}

/* Label hover effect */
.tabs label:hover {
    color: #fff;
}

.tabs .tab-content {
    z-index: 2;
    display: none;
    overflow: hidden;
    width: 100%;
    font-size: 17px;
    line-height: 25px;
    padding: 25px;
    position: absolute;
    top: 53px;
    left: 55%;
    /* background: #612e76; */
}

/* Show first tab content by default when mega menu is active */
.mega_menu_active .tabs li:first-child .tab-content {
    display: block;
}

.mega_menu_active .tabs li:first-child label {
    color: #fff;
}

/* Hide all tab content and reset label when any tab is hovered */
.tabs li:hover~li:first-child .tab-content {
    display: none;
}

/* Show tab content on hover (override default first tab) */
.tabs li:hover .tab-content {
    display: block;
}

/* Highlight label on hover */
.tabs li:hover label {
    color: #fff;
}

/* Reset first tab label color when another tab is hovered */
.tabs:has(li:hover) li:first-child:not(:hover) label {
    color: #acacac;
}

/* Reset first tab content when another tab is hovered */
.tabs:has(li:hover) li:first-child:not(:hover) .tab-content {
    display: none;
}

.mega_menu {
    background-color: #000000;
    height: 0vh;
    color: #fff;
    padding: 2.5rem 17rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 64%;
    width: 100%;
    backdrop-filter: blur(30px);
    display: none;
    opacity: 0;
    margin-top: 2rem;
    transition: all 0.8s ease;
}

.mega_menu::before {
    content: "";
    background: rgb(214, 182, 10);
    background: linear-gradient(131deg, rgba(214, 182, 10, 1) -26%, rgba(180, 25, 25, 1) -12%, rgba(116, 12, 157, 1) 46%, rgba(23, 113, 123, 1) 107%);
    height: 186px;
    width: 395px;
    position: absolute;
    border-radius: 100%;
    top: 39%;
    left: 50%;
    filter: blur(135px);
    transform: rotate3d(1, 1, 1, 45deg);
    -webkit-animation: rotate 10s normal linear infinite;
    animation: rotate 10s normal linear infinite;
}

.mega_menu_active {
    display: block;
    opacity: 1;
    min-height: 60vh;
    height: max-content;
    transition: all 0.8s ease;
}

.servi_tab ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: 16px;
}

.servi_tab ul li a {
    transition: 0.3s all;
}

.servi_tab ul li a:hover {
    color: #ffb427 !important;
}

.img-grid {
    /* columns: 300px; */
    column-gap: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.img-grid-item {
    height: 300px;
    margin-bottom: 10px;
    border-radius: 3px;
    border-radius: 20px;
    overflow: hidden;
}

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

.nodata {
    text-align: center;
    margin: auto;
    width: 100%;
}

.nodata img {
    max-width: 350px;

}


.accordion a {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    padding: 1rem 1rem 1rem 0rem;
    color: #7288a2;
    font-size: 18px;
    font-weight: 500;
    justify-content: center;
    /* border-bottom: 1px solid #e5e5e5 !important; */
}

.accordion a:hover,
.accordion a:hover::after {
    cursor: pointer;
    color: #fab73c;
}

.accordion a:hover::after {
    border: 1px solid #fab73c;
}

.accordion a.active {
    color: #fab73c;
    border-top: 1px solid #fab73c;
}

.accordion a::after {
    font-family: 'Ionicons';
    content: '\f218';
    position: absolute;
    float: right;
    right: 1rem;
    font-size: 1rem;
    color: #747474;
    padding: 5px;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #747474;
    text-align: center;
    line-height: 1.2;
}

.accordion a.active::after {
    font-family: 'Ionicons';
    content: '\f209';
    color: #fab73c;
    border: 1px solid #fab73c;
}

.accordion .content {
    display: none;
    padding: 1rem 0rem;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
}

.accordion .content p {
    font-size: 1rem;
    font-weight: 300;
    color: #525252;
}


.vdeo-slide {
    position: relative;
}

.vdeo-slide .slick-prev {
    position: absolute;
    top: 50% !important;
    background-color: #ffffff !important;
    left: -18px;
    z-index: 1;
    box-shadow: -1px 1px 6px 1px #6666663b;
    width: 35px;
    height: 35px;
    border-radius: 50px;
}

.vdeo-slide .slick-prev:before {
    color: #000 !important;
}

.vdeo-slide .slick-next {
    position: absolute;
    top: 50% !important;
    background-color: #ffffff !important;
    right: -18px;
    z-index: 1;
    box-shadow: 1px 1px 6px 1px #6666663b;
    width: 35px;
    height: 35px;
    border-radius: 50px;
}

.vdeo-slide .slick-next:before {
    color: #000 !important;
}




/* ================ */
:root {
    --color-text: #FED57F;
    --color-bg: papayawhip;
    --color-bg-accent: #ecdcc0;
    --size: clamp(10rem, -6rem + 40vmin, 30rem);
    --gap: calc(var(--size) / 14);
    --duration: 100s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-text: rgb(255, 255, 255);
        --color-bg: navy;
        --color-bg-accent: #eaa0003f;
    }
}


.marquee_home {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
    mask-image: linear-gradient(var(--mask-direction, to right),
            hsl(0 0% 0% / 0),
            hsl(0 0% 0% / 1) 7%,
            hsl(0 0% 0% / 1) 95%,
            hsl(0 0% 0% / 0));
}

.marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    animation: scroll-x var(--duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .marquee__group {
        animation-play-state: paused;
    }
}

.marquee--reverse .marquee__group {
    animation-direction: reverse;
    animation-delay: -3s;
}

.third-marquee .marquee__group {
    animation: scroll-x 65s linear infinite;
    animation-delay: -5s !important;
}

@keyframes scroll-x {
    from {
        transform: translateX(var(--scroll-start));
    }

    to {
        transform: translateX(var(--scroll-end));
    }
}




/* Element styles */
.marquee_home img {
    display: grid;
    place-items: center;
    width: var(--size);
    object-fit: contain;
    background: #ffffff;
    border: 1px solid #ffffff02;
    aspect-ratio: 16/7;
    padding: calc(var(--size) / 15);
    border-radius: 16px;

    /* filter: grayscale(1) brightness(2); */
    /* transition: all 0.3s ease-in-out; */

}

/* .marquee_home img:hover{
    filter: grayscale(0);
    transition: all 0.3s ease-in-out;
  } */


/* Parent wrapper */
.wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin: auto;
    max-width: 100vw;
}



@keyframes fade {
    to {
        opacity: 0;
        visibility: hidden;
    }
}




.need_help_bg {
    background-color: #bababa70;
    height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 22222;
    backdrop-filter: blur(5px);
    display: none;
    opacity: 0;
    transform: all ease 0.5s;
}

.active_help_bg {
    display: grid;
    opacity: 1;
}

.help_main {
    background-color: #fff;
    max-width: 650px;
    width: 90%;
    border-radius: 20px;
    box-shadow: 0px 2px 8px 4px #00000033;
    position: relative;
    overflow: hidden;
}

.help_head {
    background-color: #000;
    color: #fff;
    padding: 2rem 2rem .5rem 2rem;
    box-shadow: 0px 0px 10px 7px #6666661a;
    /* border-radius: 20px 20px 0px 0px; */
}

.help_head h3 {
    font-size: 25px;
}

.help_head span {
    font-size: 53px;
    color: #f9a93b;
    font-weight: 500;
}

.help_head p {
    font-size: 16px;
}

.help_form {
    padding: 2rem 2rem;
}

.help_form input {
    /* border: 1px solid #b8b8b8;
    width: 100%;
    padding: 0.5rem;
    margin: 0rem 0;
    border-radius: 7px; */
    /* margin-bottom: 16px; */
    width: 100%;
    padding: 18px 16px;
    border-radius: 15px;
    border: none;
    background: #F2F2F2;
    font-size: 14px;
    outline: none;
}

.help_form textarea {
    /* border: 1px solid #b8b8b8;
    width: 100%;
    padding: 0.5rem;
    margin: 0rem 0;
    border-radius: 7px; */
    /* margin-bottom: 16px; */
    width: 100%;
    padding: 18px 16px;
    border-radius: 15px;
    border: none;
    background: #F2F2F2;
    font-size: 14px;
    outline: none;
}

.help_form button {
    /* border: none;
    background-color: #000;
    color: #fff;
    padding: 1rem;
    margin: 1rem 0;
    width: 100%;
    border-radius: 8px; */
    padding: 14px;
    margin-top: 16px;
    width: 100%;
    border: none;
    background: #000;
    color: #fff;
    font-size: 18px;
    border-radius: 15px;
}

.help_form button:hover {
    background-color: #f9a93b;
    color: #000;
}

.close-btn {
    position: absolute;
    right: 19px;
    top: 12px;
    color: #000000;
    background: #fff;
    border-radius: 20px;
    padding: 1px 8px;
    cursor: pointer;
}

/* Quote Form Labels */
.quote_label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    margin-top: 16px;
    margin-left: 5px;
}

.quote_submit_btn {
    padding: 14px;
    width: 100%;
    border: none;
    background: #000;
    color: #fff;
    font-size: 18px;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quote_submit_btn:hover {
    background-color: #f9a93b;
    color: #000;
}

.quote_submit_btn:disabled {
    background-color: #666;
    cursor: not-allowed;
}

.help_form .text-danger {
    font-size: 12px;
    display: block;
    margin-top: 6px;
    margin-left: 5px;
}


.teatalk {
    position: fixed;
    bottom: 80px;
    z-index: 1;
    left: 25px;
    cursor: pointer;
}

.teatalk img {
    width: 50px;
    border: solid 1px #d4d4d4;
    border-radius: 100px;
}






.select-wrapper {
    position: relative;
    width: 400px;
}

.select-wrapper.open ul {
    display: block;
}

.select-wrapper ul {
    position: absolute;
    left: 0;
    top: calc(100% - 1px);
    display: none;
    width: 400px;
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 1;
}

.select-wrapper ul li {
    cursor: pointer;
    font-size: 12px;
    line-height: 16px;
    color: gray;
    padding: 5px 10px;
}

.select-wrapper ul li:hover {
    background: rgba(229, 229, 229, 0.5);
}

.select-checked {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    padding-left: 20px;
    border: 1px solid #ccc;
    font-size: 12px;
    line-height: 16px;
    color: black;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.item-body {
    display: none;
}

.item-body.active {
    display: block;
}





.warpper {
    display: flex;
    flex-direction: column;
}

.tab {
    cursor: pointer;
    padding: 10px 20px;
    margin: 3px 3px;
    font-weight: 500;
    background: #ededed;
    display: inline-block;
    color: #181818;
    border-radius: 30px;
    transition: all 0.3s ease-in-out;
}

.tab:hover {
    background: #696969;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.panels .page-project {
    margin-bottom: 24px;
}

.panel {
    display: none;
    animation: fadein .8s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.panel-title {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 1rem;
}

.radio {
    display: none;
}

#all:checked~.panels .panel,
#one:checked~.panels #one-panel,
#two:checked~.panels #two-panel,
#three:checked~.panels #three-panel,
#four:checked~.panels #four-panel,
#five:checked~.panels #five-panel {
    display: block
}

#all:checked~.tabss #all-tab,
#one:checked~.tabss #one-tab,
#two:checked~.tabss #two-tab,
#three:checked~.tabss #three-tab,
#four:checked~.tabss #four-tab,
#five:checked~.tabss #five-tab {
    background: #000;
    color: #fff;
}


.tabss {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4rem;

}

.select_industries select {
    padding: 0.6rem 1.5rem;
    border-radius: 9px;
    border: 1px solid #a8a8a821;
    background-color: #f3f3f3;
}


.case-tag {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

.case-tag span {
    border: 1px solid #6666663d;
    border-radius: 12px;
    display: block;
    width: fit-content;
    padding: 3px 10px;
    background-color: #ffffffd6;
}

.panel-title {
    font-size: 1.5em;
    font-weight: 500;
    padding-left: 0.8rem;
}


/* ========= Back to Top ============== */

#button {
    display: inline-block;
    background-color: #fab73c;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s,
        opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}

#button::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    line-height: 50px;
    color: #fff;
}

#button:hover {
    cursor: pointer;
    background-color: #333;
}

#button:active {
    background-color: #555;
}

#button.show {
    opacity: 1;
    visibility: visible;
}


/* ========== FLOATING BUTTONS ============== */

.floating_btn {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: auto;
    height: auto;
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

@keyframes pulsing {
    to {
        box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
    }
}

.whatsapp_icon {
    background-color: #42db87;
    color: #fff;
    width: 50px;
    height: 50px;
    font-size: 30px;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translatey(0px);
    animation: pulse 1.5s infinite;
    box-shadow: 0 0 0 0 #42db87;
    /* -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1); */
    font-weight: normal;
    font-family: sans-serif;
    text-decoration: none !important;
    transition: all 300ms ease-in-out;
}

/* .call_icon i {
    background-color: #0073ff;
    color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    border-radius: 50px;
    text-align: center;
} */
.call_icon {
    display: none;
}


.testi-slider .slick-prev:before,
.testi-slider .slick-next:before {
    font-family: 'FontAwesome';
    font-size: 15px;
    line-height: 1;
    opacity: 1;
    color: #666666;
    background: #fff;
}

.testi-slider .slick-prev:before {
    content: '\f053';
    border-radius: 50px;
    background: #ffffff00;
    transition: all 0.3s ease-in-out;
}

.testi-slider .slick-prev:hover:before {
    color: #fff;
    transition: all 0.3s ease-in-out;
}


.testi-slider .slick-next:before {
    content: '\f054';
    border-radius: 50px;
    background: #ffffff00;
    transition: all 0.3s ease-in-out;
}

.testi-slider .slick-next:hover:before {
    color: #fff;
    transition: all 0.3s ease-in-out;
}

/* .testi-slider .slick-prev,
.testi-slider .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 96%;
    display: block;
    width: 43px;
    height: 43px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: var(--bg-light);
    border-radius: 50px;
    z-index: 3;
} */

/* .testi-slider .slick-prev {
    left: 16% !important;
    top: 50%;
    transform: translateY(-50%) translateX(20px);
    transition: all 0.3s ease-in-out;
    opacity: 1;
    border: 1px solid #ddd;
    box-shadow: 0px 6px 16px #e2dada;
    background: white;
} */


.testi-slider .slick-prev:hover {
    /* background: var(--primary-color) !important; */
    background: rgb(250, 183, 60);
    border: 1px solid var(--primary-color);
}

.testi-slider .slick-next:hover {
    /* background: var(--primary-color) !important; */
    background: rgb(250, 183, 60);
    border: 1px solid var(--primary-color);
}

/* .testi-slider .slick-next {
    right: 16%;
    top: 50%;
    transform: translateY(-50%) translateX(-20px);
    transition: all 0.3s ease-in-out;
    opacity: 1;
    border: 1px solid #ddd;
    box-shadow: 0px 6px 16px #e2dada;
    background: white;
} */





/* =========================seo============================= */
/* body {
    font-family: 'Instrument Sans', sans-serif;
} */

#services {
    padding: 80px 0px;
    padding-bottom: 114px;
}

.servc-content h2 {
    font-weight: 500;
    margin-bottom: 20px;
    font-size: 36px;
}

.srvc-img {
    height: 350px;
    overflow: hidden;
    border-radius: 34px;
}

.srvc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}

.srvc-img:hover img {
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;
}

.servc-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
}

#why-choose {
    padding-bottom: 50px;
}

/* Why Choose */
.why-choose-bg {
    background: rgba(245, 244, 242, 1);
    padding: 3rem;
    border-radius: 42px;
}

.seo-service {
    display: flex;
    text-align: center;
    flex-direction: column;
    margin-bottom: 16px;
}

.seo-service h2 {
    font-size: 40px;
}

.seo-service h3 {
    font-size: 29px;
}

.seo-img1 {
    background: rgba(248, 210, 183, 1);
    padding: 12px 13px;
    border-radius: 23px;
    margin-bottom: 30px;
}

.seo-img2 {
    background: rgba(206, 245, 245, 1);
    padding: 12px 13px;
    border-radius: 23px;
    margin-bottom: 30px;
}

.seo-img3 {
    background: rgba(239, 247, 207, 1);
    padding: 12px 13px;
    border-radius: 23px;
    margin-bottom: 30px;
}

.seo-img4 {
    background: rgba(207, 221, 247, 1);
    padding: 12px 13px;
    border-radius: 23px;
    margin-bottom: 30px;
}

/* Our SEO Services*/
#seo-offerings {
    padding: 71px 0px;
}

.process-image img {
    border-radius: 16px;
    width: 100%;
}

.why-seo {
    background: rgba(255, 255, 255, 1);
    border: solid 2px rgba(226, 226, 226, 1);
    padding: 30px 26px;
    border-radius: 19px;
    /* min-height: 325px; */
    margin-bottom: 20px;
    height: calc(100% - 20px);
    transition: all 0.3s ease-in-out;
}

.why-seo:hover {
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
}

.why-seo p {
    margin-bottom: 0;
}

.seo-intro-text img {
    background: rgba(255, 255, 255, 1);
    margin-bottom: 25px;
    padding: 10px 10px;
    border-radius: 14px;
}

.seo-intro-text {
    background: rgba(245, 244, 242, 1);
    /* border: solid 1px rgba(184, 184, 184, 1); */
    padding: 25px 46px;
    border-radius: 22px;
    min-height: 350px;
    /* height: calc(100%); */
}


/* Our Proven SEO Process */
.seo-process-section {
    background-color: #ffffff;
    padding: 80px 0px;
}

.process-title {
    font-size: 2.9rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.process-desc {
    /* color: #555; */
    max-width: 480px;
    margin-bottom: 2/rem;
}

/* .process-image img {
    border-radius: 20px;
    padding: 20px;
} */

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


/* Timeline */
.process-timeline {
    position: relative;
    padding-left: 100px;
}

.timeline-item::after {
    content: "";
    position: absolute;
    left: -29px;
    /* align with dot center */
    top: 38px;
    /* starts after dot */
    width: 2px;
    height: calc(100% - 38px);
    background: #d1d1d1;
}

.timeline-item:last-child::after {
    display: none;
}

.timeline-item {
    position: relative;
    padding-bottom: 40px;
}

.timeline-item:last-child {
    padding-bottom: 0px;
}

.timeline-dot {
    position: absolute;
    left: -39px;
    top: 15px;
    width: 21px;
    height: 21px;
    background: #fff;
    border: 3px solid #f4a300;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0px 1px 12px #c9c9c9;
}

.timeline-content h3 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.timeline-content span {
    color: rgba(76, 76, 76, 1);
    font-weight: 600;
    margin-right: 10px;
    font-size: 32px;
}

.timeline-content p {
    /* font-size: 0.95rem; */
    color: #555;
    max-width: 400px;
}

/* Responsive */
@media (max-width: 991px) {
    .process-timeline {
        margin-top: 40px;
    }

    .sticky-content {
        position: static;
    }
}

/* WE SERVE */
#we-serve {
    background: rgba(27, 27, 27, 1);
    padding: 30px 0px;
    padding-bottom: 100px;
}

.seo-service2 {
    display: flex;
    text-align: center;
    flex-direction: column;
    padding: 73px;
    padding-bottom: 65px;
    color: white;
}

/* CARD */
.industry-card {
    height: 211px;
    border-radius: 50px;
    border: 1px solid transparent;
    text-align: center;
    padding: 25px 20px;
    color: #fff;
    background: linear-gradient(#141414, #141414) padding-box,
        linear-gradient(135deg, #a025ff, #febf11) border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    width: 100%;
}

.industry-card img {
    width: 56px;
    margin-bottom: 18px;
    filter: brightness(0) invert(1);
}

.industry-card h5 {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}

/* HOVER EFFECT */
.industry-card:hover {
    transform: translateY(-6px);
    background:
        linear-gradient(#1c1c1c, #1c1c1c) padding-box,
        linear-gradient(135deg, #febf11, #a025ff) border-box;
}

.seo-service2 h2 {
    font-size: 40px;
}


/* ========================ANIMATIONS================================ */
/*----- service section----- */
.fade-left,
.fade-right {
    opacity: 0;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

/* LEFT CONTENT */
.fade-left {
    transform: translateX(-40px);
    animation-name: fadeLeft;
}

/* RIGHT IMAGE */
.fade-right {
    transform: translateX(40px);
    animation-name: fadeRight;
}

/* KEYFRAMES */
@keyframes fadeLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}



.industry-card {
    position: relative;
    overflow: hidden;
}

/* Hover lift */
.industry-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Glow border effect */
.industry-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50px;
    /* background: linear-gradient(135deg, #a025ff, #febf11); */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.industry-card:hover::before {
    opacity: 0.35;
}

/* Icon animation */
.industry-card:hover img {
    transform: scale(1.12);
}

.industry-card img {
    transition: transform 0.3s ease;
}


.prjct-main .slick-prev:before,
.prjct-main .slick-next:before {
    font-family: 'FontAwesome';
    font-size: 15px;
    line-height: 1;
    opacity: 1;
    color: #666666;
    background: #fff;
}

.prjct-main .slick-prev:before {
    content: '\f053';
    border-radius: 50px;
    background: #ffffff00;
    transition: all 0.3s ease-in-out;
}

.prjct-main .slick-prev:hover:before {
    color: #fff;
    transition: all 0.3s ease-in-out;
}


.prjct-main .slick-next:before {
    content: '\f054';
    border-radius: 50px;
    background: #ffffff00;
    transition: all 0.3s ease-in-out;
}

.prjct-main .slick-next:hover:before {
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.prjct-main .slick-prev,
.prjct-main .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 39px;
    height: 39px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: var(--bg-light);
    border-radius: 50px;
    z-index: 3;
    /* box-shadow: 0 0px 15px 1px #00000020; */
}

.prjct-main .slick-prev {
    left: 16% !important;
    /* background: var(--bg-light) !important; */
    background: white;
    box-shadow: 0px 6px 16px rgb(102 102 102);
    top: 50% !important;
    transform: translateY(-50%) translateX(-20px) !important;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    /* border: 1px solid #585858; */
}


.prjct-main .slick-prev:hover {
    /* background: var(--primary-color) !important; */
    background: #fab73c;
    border: 1px solid var(--primary-color);
}

.prjct-main .slick-next:hover {
    /* background: var(--primary-color) !important; */
    background: #fab73c;
    border: 1px solid var(--primary-color);
}

.prjct-main .slick-next {
    background: white;
    box-shadow: 0px 6px 16px rgb(102 102 102);
    transform: translateY(-50%) translateX(20px) !important;
    /* transition: all 0.3s ease-in-out; */
    opacity: 1;
    /* border: 1px solid #ddd; */
    top: 50% !important;
    right: 16% !important;
}

.prjct-main .page-project {
    height: 450px;
}

.prjct-main .page-project img {
    height: 450px;
}

.prjct-main .slick-slide {
    transform: scale(0.95);
    opacity: 0.5;
    transition: all 0.3 ease-in;
}

.prjct-main .slick-active {
    transform: scale(1);
    opacity: 1;
    transition: all 0.3 ease-in;
}

.prjct-main .page-project-text p {
    width: 60%;
}

/* .more-btn {
    display: flex;
    align-items: center;
    border: solid 1px #cfc5c5;
    padding: 7px 15px;
    border-radius: 100px;
    font-size: 13px;
    height: 34px;
    color: #000;
    text-decoration: none;
} */

/* .more-btn:hover {
    background-color: #000;
} */

.more-btn a:hover {
    color: white;
}

.items {
    border: solid 1px #bfbfbf;
    border-radius: 100px;
    padding: 5px 10px;
    font-size: 14px;
    /* transition: background-color 0.3s ease, color 0.3s ease; */
    transition: all 0.3s ease;
}

.items:hover {
    background: #fab73c;
    border-color: #fab73c;
    transform: translateY(-4px);

}

.more-btn {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    font-weight: 500;
    font-size: 14px;
    background: antiquewhite;
    padding: 3px 12px 4px 13px;
    border-radius: 9px;
    text-align: center;
    /* width: 85px; */
    height: 35px;
}

/* ========== YouTube Video Popup Modal ========== */
.video-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.video-popup-container {
    position: relative;
    width: 90%;
    max-width: 1000px;
    transform: scale(0.8) translateY(50px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-popup-overlay.active .video-popup-container {
    transform: scale(1) translateY(0);
}

.video-popup-close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.3s ease;
    z-index: 10;
}

.video-popup-close:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    transform: rotate(90deg);
}

.video-popup-close svg {
    width: 20px;
    height: 20px;
}

.video-popup-content {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

.video-popup-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .video-popup-container {
        width: 95%;
    }

    .video-popup-close {
        top: -45px;
        right: 0;
        width: 38px;
        height: 38px;
    }

    .video-popup-close svg {
        width: 18px;
        height: 18px;
    }

    .video-popup-content {
        border-radius: 12px;
    }
}

/* Pulse animation for play button */
.video-popup-trigger .video_play {
    cursor: pointer;
    transition: all 0.3s ease;
}

.video-popup-trigger:hover .video_play {
    transform: scale(1.1) translate(-50%, -50%);
}

.video-popup-trigger .video_play::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: pulse-ring 2s infinite;
    z-index: -1;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.alert {
    margin-top: 1rem !important;
    border-radius: 15px !important;
    padding: 1rem;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* ========== Gallery Lightbox ========== */
.gallery-item {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    max-width: 90%;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox-overlay.active .lightbox-content img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
    left: 30px;
}

.lightbox-next {
    right: 30px;
}

.lightbox-counter {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 20px;
    border-radius: 30px;
}

@media (max-width: 768px) {
    .lightbox-nav {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }

    .lightbox-prev {
        left: 15px;
    }

    .lightbox-next {
        right: 15px;
    }

    .lightbox-close {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .lightbox-content {
        max-width: 95%;
    }
}

.video-mob {
    display: none;
}

.brand-btn {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    background: #0d0d0c;
    width: fit-content;
    padding: 10px 18px 10px 18px;
    border-radius: 100px;
    color: white;
}

/* ==================================brand inner page======================================= */
section#all-brands {
    padding: 80px 0px;
}

.inner-logo {
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 16px;
    padding: 20px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.inner-logo:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
    transform: translateY(-3px);
}

.inner-logo img {
    max-width: 100%;
    max-height: 55px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 575px) {
    section#all-brands {
        padding: 50px 0px;
    }

    .inner-logo {
        height: 80px;
        padding: 14px 10px;
        border-radius: 12px;
    }

    .inner-logo img {
        max-height: 43px;
    }
}

/* =============================gallery category page============================================ */
.filter_pills {
    display: flex;
    gap: 12px;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.filter_pill {
    background: #000000;
    color: #ffffff;
    border-radius: 50px;
    padding: 10px 35px;
    font-size: 15px;
    font-weight: 500;
    border: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.filter_pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
}

.filter_pill.active {
    background: #58564d !important;
    color: #ffffff;
}

.gallery_item_new {
    margin-bottom: 2rem;
}

.gallery_img_wrap {
    border-radius: 30px;
    overflow: hidden;
    background: #f8f8f8;
    transition: transform 0.4s ease;
}

.gallery_img_wrap:hover {
    transform: scale(1.02);
}

.gallery_img_wrap img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 30px;
}

@media (max-width: 767px) {
    .filter_pill {
        padding: 8px 25px;
        font-size: 14px;
    }

    .gallery_img_wrap img {
        height: 280px;
    }
}

/* ======================== */
.prdct-section {
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    padding: 25px;
    border-radius: 24px;
    transition: all 0.3s ease;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
}

.product_slider .prdct-section {
    /* margin-bottom: 10px; */
    margin: 10px 10px 0px 7px;
}

.d5n-prdct {
    background: #f1f1f1;
    border-radius: 18px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    height: 370px;
    overflow: hidden;
    position: relative;
}

.prdct-brand-logo {
    position: absolute;
    top: 16px;
    right: 16px;
    width: auto;
    /* height: 24px; */
    max-width: 110px;
    object-fit: contain;
    z-index: 2;
}

.d5n-prdct img:not(.prdct-brand-logo) {
    object-fit: contain;
    transition: transform 0.3s ease;
    width: 72%;
}

.prdct-section:hover .d5n-prdct img:not(.prdct-brand-logo) {
    transform: scale(1.05);
}

.prdct-body {
    padding: 10px 5px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.prdct-body h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
}

.prdct-body p {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

.view-site-btn {
    display: inline-block;
    background: #000;
    color: #fff !important;
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
    font-size: 16px;
}

.view-site-btn:hover {
    background: #333;
    transform: scale(1.05);
}

a.active-nav {
    color: #ecad39 !important;
}


/* ======================faq in inner page============================ */
.faq_section.inner-side {
    padding: 50px 0px !important;
}


/* ====================status section=========================== */
.seo-stats-section {
    padding: 10rem 0 3rem 0;
    margin-top: -60px;
    position: relative;
    z-index: 10;
}

.seo-stat-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 1.5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
}

.seo-stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.12);
    border-color: rgba(255, 255, 255, 1);
}

.stat-icon {
    background: linear-gradient(135deg, #f5b102 0%, #ae800b 100%);
    width: 59px;
    height: 59px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: rotate(-5deg);
    transition: transform 0.3s ease;
}

.seo-stat-card:hover .stat-icon {
    transform: rotate(0deg) scale(1.05);
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2.2rem;
    font-weight: 600;
    color: #111;
    margin: 0;
    line-height: 1.1;
    font-family: "Montserrat Alternates", sans-serif;
    letter-spacing: -1px;
}

.stat-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    margin: 0;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .seo-stats-section {
        margin-top: 20px;
        padding: 2rem 0;
    }

    .seo-stats-section .row {
        row-gap: 0.2rem;
    }
}

@media (max-width: 768px) {
    .seo-stat-card {
        padding: 1.25rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-icon {
        width: 55px;
        height: 55px;
    }
}


/* ==============================aeo geo section==================================== */
.ai-optimization-section {
    background: rgba(27, 27, 27, 1);
    position: relative;
    overflow: hidden;
    padding: 112px 0px 151px 0px;
    margin: 31px 0px 62px 0px;
}

.ai-optimization-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.05) 0%, rgba(15, 23, 42, 0) 50%);
    z-index: 1;
}

.ai-section-title {
    color: #f8fafc;
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
    letter-spacing: -0.5px;
}

.ai-section-title span {
    background: linear-gradient(135deg, #f1f8fc 0%, #f6c900 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ai-section-desc {
    color: #94a3b8;
    font-size: 1.15rem;
    max-width: 650px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    line-height: 1.6;
}

.ai-opt-card {
    background: linear-gradient(#141414, #141414) padding-box, linear-gradient(135deg, #a025ff, #febf11) border-box;
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 40px 32px;
    height: 100%;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-top: 25px;
}


.ai-opt-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

.ai-opt-card:hover .card-glow {
    transform: scale(2.5);
    background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
}

.ai-icon-wrapper {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #1c1d1d, #14181a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.05);
    position: relative;
}

.ai-icon-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.ai-icon {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.ai-opt-card h4 {
    color: #f8fafc;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
}

.ai-opt-card p {
    color: #94a3b8;
    line-height: 1.7;
    margin: 0;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .ai-optimization-section {
        padding: 60px 0;
    }

    .ai-section-title {
        font-size: 2.2rem;
    }

    .ai-opt-card {
        padding: 30px 24px;
    }
}

/* ---------------------- SEO CTA SECTION ---------------------------------- */

.seo-cta-section {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

.cta-inner-container {
    background-color: #f7ca45;
    padding: 70px 40px;
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(247, 202, 69, 0.2);
}

.cta-heading {
    font-size: 2.8rem;
    font-weight: 800;
    color: #111;
    letter-spacing: -0.5px;
}

.cta-subheading {
    font-size: 1.2rem;
    color: #333;
    font-weight: 500;
}

.cta-input {
    width: 100%;
    padding: 16px 25px;
    border: 1.5px solid #111;
    background: transparent;
    border-radius: 50px;
    font-size: 1rem;
    color: #111;
    font-weight: 500;
    transition: all 0.3s ease;
}

.cta-input::placeholder {
    color: #333;
    font-weight: 500;
}

.cta-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1);
    background: rgba(255, 255, 255, 0.3);
}

.cta-link-btn {
    display: inline-block;
    padding: 12px 27px;
    background-color: #474747;
    color: #ffffff !important;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background 0.3s ease;
}

.cta-link-btn:hover {
    background-color: #333;
}

@media (max-width: 768px) {
    .cta-heading {
        font-size: 2.2rem;
    }

    .cta-inner-container {
        padding: 50px 20px;
    }
}

/* ==============================cta section=================== */
.seo-cta-section {
    position: relative;
    overflow: hidden;
    padding: 71px 0;
}

.cta-inner-container {
    background-color: #f7ca45;
    /* Vibrant yellow/gold from the design */
    padding: 70px 40px;
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(247, 202, 69, 0.2);
}

.cta-heading {
    font-size: 43px;
    font-weight: 700;
    color: #272626;
    letter-spacing: -0.5px;
}

.cta-subheading {
    font-size: 1.2rem;
    color: #333;
    font-weight: 500;
}

.cta-form {
    margin-top: 2rem;
}

.cta-input {
    width: 100%;
    padding: 10px 23px;
    border: 1.5px solid #111;
    background: transparent;
    border-radius: 50px;
    font-size: 1rem;
    color: #111;
    font-weight: 500;
    transition: all 0.3s ease;
}

.cta-input::placeholder {
    color: #333;
    font-weight: 500;
}

.cta-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1);
    background: rgba(255, 255, 255, 0.3);
}

.cta-submit-btn {
    background-color: #8b5cf6;
    /* Vibrant purple from the design */
    color: #fff;
    padding: 18px 45px;
    font-size: 1.15rem;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4);
}

.cta-submit-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(139, 92, 246, 0.5);
    background-color: #7c3aed;
}

/* Responsive */
@media (max-width: 768px) {
    .cta-heading {
        font-size: 2.2rem;
    }

    .cta-input {
        margin-bottom: 10px;
    }
}

/* ---------------------- SEO HERO BANNER BUTTON --------------------------- */

.seo-hero-btn {
    display: inline-block;
    margin-top: 24px;
    padding: 10px 24px;
    background-color: #fff;
    color: #111 !important;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 50px;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.seo-hero-btn:hover {
    background-color: #111;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px);
}

/* ---------------------- SEARCH SUCCESS ALT DESIGN ---------------------------------- */

.search-success-alt {
    background-color: #f8fafc;
    /* very light soft grey/blue */
    overflow: hidden;
}

.search-success-badge {
    display: inline-block;
    padding: 6px 16px;
    background-color: #d4d5d9;
    color: #1d1d20;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 50px;
}

.search-success-alt-title {
    font-size: 46px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -1px;
}

.search-success-alt-desc {
    font-size: 1.15rem;
    color: #475569;
    line-height: 1.7;
}

.search-success-alt-desc strong {
    color: #0f172a;
    font-weight: 700;
}

.search-success-cta-card {
    background: #ffffff;
    border-radius: 30px;
    padding: 50px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
    z-index: 1;
}



.search-success-cta-card h3 {
    font-size: 2.2rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.alt-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #ebb439;
    color: #ffffff !important;
    padding: 18px 32px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.alt-cta-btn:hover {
    /* background: #4f46e5; */
    transform: translateX(5px);
    /* box-shadow: 0 10px 25px rgba(79, 70, 229, 0.3); */
}

@media (max-width: 991px) {
    .search-success-alt-title {
        font-size: 2.8rem;
    }

    .search-success-cta-card {
        padding: 40px 30px;
    }

    .search-success-cta-card h3 {
        font-size: 1.8rem;
    }
}

/* =============================seo testimonial============================= */
.seo-testimonial-slider .slick-dots {
    bottom: -40px;
}

.seo-testimonial-slider .slick-dots li button:before {
    font-size: 14px;
    color: #adb5bd;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.seo-testimonial-slider .slick-dots li.slick-active button:before {
    color: #0d6efd;
    opacity: 1;
}

.testimonial-slide {
    outline: none !important;
    padding-top: 15px;
    padding-bottom: 15px;
}

.seo-testimonial-slider .slick-track {
    display: flex !important;
}

.seo-testimonial-slider .slick-slide {
    height: inherit !important;
}

.seo-testimonial-slider {
    margin-bottom: 50px;
}

/* Equal Height CSS for Slick Slider */
.seo-testimonial-slider .slick-track {
    display: flex !important;
    align-items: stretch;
}

.seo-testimonial-slider .slick-slide {
    display: flex !important;
    height: auto !important;
}

.seo-testimonial-slider .slick-slide>div {
    display: flex;
    width: 100%;
}

.seo-testimonial-slider .testimonial-slide {
    display: flex;
    width: 100%;
}

.seo-testimonial-slider .testimonial-card {
    width: 100%;
}

/* Slick Dots Styling */
.seo-testimonial-slider .slick-dots {
    bottom: -40px;
}

.seo-testimonial-slider .slick-dots li button:before {
    font-size: 14px;
    color: #adb5bd;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.seo-testimonial-slider .slick-dots li.slick-active button:before {
    color: #0d6efd;
    opacity: 1;
}

.testimonial-slide {
    outline: none !important;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-right: 10px;
}

.seo-testimonial-slider {
    margin-bottom: 50px;
}

/* ---------------------- SEO BLOG SECTION ---------------------------------- */
.seo-testimonial-slider .slick-dots {
    bottom: -40px;
}

.seo-testimonial-slider .slick-dots li button:before {
    font-size: 14px;
    color: #adb5bd;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.seo-testimonial-slider .slick-dots li.slick-active button:before {
    color: #0d6efd;
    opacity: 1;
}

.testimonial-slide {
    outline: none !important;
    padding-top: 15px;
    padding-bottom: 15px;
}

.seo-testimonial-slider .slick-track {
    display: flex !important;
}

.seo-testimonial-slider .slick-slide {
    height: inherit !important;
}

.seo-testimonial-slider {
    margin-bottom: 50px;
}

.seo-blog-title {
    font-size: 2.8rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.seo-blog-desc {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 600px;
}

.view-all-blog-btn {
    display: inline-block;
    padding: 12px 28px;
    border: 2px solid #e2e8f0;
    color: #0f172a !important;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.view-all-blog-btn:hover {
    background-color: #0f172a;
    color: #ffffff !important;
    border-color: #0f172a;
}

.seo-blog-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #f1f5f9;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.seo-blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

.blog-img-wrapper {
    position: relative;
    overflow: hidden;
    height: 240px;
}

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

.seo-blog-card:hover .blog-img-wrapper img {
    transform: scale(1.05);
}

.blog-category {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #e7a833;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.blog-content {
    padding: 30px;
}

.blog-meta {
    font-size: 0.9rem;
    color: #94a3b8;
    font-weight: 600;
}

.blog-title {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 15px;
}

.blog-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-title a:hover {
    color: #4f46e5;
}

.blog-excerpt {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.read-more-link {
    display: inline-flex;
    align-items: center;
    color: #121211 !important;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.read-more-link svg {
    transition: transform 0.3s ease;
}


.read-more-link:hover svg {
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .seo-blog-title {
        font-size: 2.2rem;
    }
}

/* Content Marketing Benefits Section */
.benefits-section {
    background-color: #fcfcfc;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.benefits-container {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.benefits-header {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    justify-content: center;
}

.benefits-title {
    font-weight: 600;
    letter-spacing: -0.5px;
    color: #0b1a2b;
    margin-bottom: 2rem;
    line-height: 1.2;
    font-size: 40px;
}

.benefits-subtitle {
    color: #6c757d;
    font-size: 18px;
}

.benefits-grid {
    --bs-gutter-y: 1.5rem;
    --bs-gutter-x: 1.5rem;
}

.benefit-card {
    background-color: #fff;
    border: 1px solid rgb(247 194 0 / 23%);
    border-radius: 1rem;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    display: flex;
    align-items: center;
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.1);
}

.benefit-card .icon-wrapper {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 1rem;
}

.benefit-card-title {
    font-size: 1.1rem;
    color: #333;
    font-weight: 600;
    margin-bottom: 0;
}

.icon-primary {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.icon-success {
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.icon-purple {
    background-color: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
}

.icon-orange {
    background-color: rgba(253, 126, 20, 0.1);
    color: #fd7e14;
}

.icon-danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.icon-info {
    background-color: rgba(13, 202, 240, 0.1);
    color: #0dcaf0;
}

/* --- SEO Testimonial Section --- */
.seo-testimonial-section {
    background-color: #f4f7fb;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.seo-testimonial-section .container {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.seo-testimonial-header-row {
    justify-content: center;
    text-align: center;
    margin-bottom: 3rem;
}

.seo-testimonial-heading {
    color: #0b1a2b;
    font-size: calc(1.375rem + 1.5vw);
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.seo-testimonial-subheading {
    font-weight: 300;
    margin-bottom: 1rem;
    font-size: 18px;
}

.seo-testimonial-slider .testimonial-card {
    background-color: #fff;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    border-radius: 20px;
    height: 100%;
    width: 100%;
    padding: 1.5rem;
    text-align: center;
    margin: 0 0.5rem;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .seo-testimonial-slider .testimonial-card {
        margin: 0 1rem;
    }
}

.seo-testimonial-slider .quote-icon {
    margin-bottom: 1.5rem;
}

.seo-testimonial-slider .quote-text {
    color: #2c3e50;
    line-height: 1.6;
    font-size: 1rem;
    font-style: italic;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.seo-testimonial-slider .rating {
    margin-bottom: 1rem;
}

.seo-testimonial-slider .author-name {
    font-weight: 700;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.seo-testimonial-slider .author-role {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0;
}

.seo-testimonial-slider .testimonial-slide {
    display: flex;
    width: 100%;
    outline: none !important;
    padding-top: 15px;
    padding-bottom: 15px;
}

.seo-testimonial-slider .slick-track {
    display: flex !important;
    align-items: stretch;
}

.seo-testimonial-slider .slick-slide {
    display: flex !important;
    height: auto !important;
}

.seo-testimonial-slider .slick-slide>div {
    display: flex;
    width: 100%;
}

.seo-testimonial-slider .slick-dots {
    bottom: -40px;
}

.seo-testimonial-slider .slick-dots li button:before {
    font-size: 14px;
    color: #adb5bd;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.seo-testimonial-slider .slick-dots li.slick-active button:before {
    color: #0d6efd;
    opacity: 1;
}

.seo-testimonial-slider {
    margin-bottom: 50px;
}

/* --- Marketplace Platforms Section --- */
.platforms-section {
    padding: 80px 0;
    overflow: hidden;
}

.platforms-header {
    text-align: center;
    margin-bottom: 50px;
}

.platforms-badge {
    display: inline-block;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.platforms-title {
    font-size: 39px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 12px;
}

.platforms-subtitle {
    font-size: 1rem;
    color: #64748b;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

.platforms-slider {
    padding: 10px 0 20px;
}

.platform-slide {
    padding: 0 12px;
    outline: none;
}

.platform-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 28px 20px 18px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.08);
    border: 1.5px solid rgba(99, 102, 241, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: default;
}

.platform-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.35);
}

.platform-logo-wrap {
    width: 160px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.platform-logo-wrap img,
.platform-card>img {
    width: 160px;
    height: 70px;
    object-fit: contain;
    display: block;
    margin: 0 auto 10px;
}

.platform-svg {
    width: 100%;
    max-width: 160px;
    height: 70px;
}

.platform-name {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #6366f1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* --- SEO Case Studies Section --- */
.seo-case-studies-section {
    padding: 90px 0;
    background: #0f172a;
}

.seo-case-studies-header {
    text-align: center;
    margin-bottom: 56px;
}

.seo-case-badge {
    display: inline-block;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.seo-case-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #f1f5f9;
    margin-bottom: 14px;
}

.seo-case-subtitle {
    font-size: 1rem;
    color: #94a3b8;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Card Base */
.seo-case-card {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
}

.seo-case-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
    border-color: rgba(99, 102, 241, 0.4);
}

/* Featured variant */
.seo-case-card--featured {
    background: linear-gradient(145deg, #1e293b, #1a1f35);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
}

.seo-case-featured-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 50px;
    letter-spacing: 0.04em;
}

/* Card Top */
.seo-case-card-top {
    padding: 28px 28px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.seo-case-industry {
    display: inline-block;
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 50px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    white-space: nowrap;
}

.seo-case-metric {
    text-align: right;
}

.seo-case-metric-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #22c55e;
    line-height: 1;
}

.seo-case-metric-label {
    display: block;
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 4px;
    text-align: right;
}

/* Card Body */
.seo-case-card-body {
    padding: 24px 28px;
    flex-grow: 1;
}

.seo-case-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 12px;
    line-height: 1.4;
}

.seo-case-card-desc {
    font-size: 0.88rem;
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 20px;
}

.seo-case-results {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.seo-case-results li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #cbd5e1;
    font-weight: 500;
}

.seo-case-results li svg {
    flex-shrink: 0;
}

/* Card Footer */
.seo-case-card-footer {
    padding: 20px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.seo-case-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6366f1;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: gap 0.25s ease, color 0.25s ease;
}

.seo-case-link:hover {
    color: #818cf8;
    gap: 14px;
}


/* =========================brand slider============================ */
.brand-section {
    padding: 48px 0;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    overflow: hidden;
    margin-bottom: 100px;
}

.brand-section .section-label {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 28px;
}

.brand-logo-slide {
    padding: 0 18px;
    outline: none;
}

.brand-logo-slide img {
    max-height: 80px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: filter 0.3s ease, transform 0.3s ease;
    margin: 0 auto;
    display: block;
}

.brand-logo-slide img:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.07);
}

.brand-slider .slick-track {
    display: flex;
    align-items: center;
}

/* ======================================case studys================================ */
.seo-case-study-section {
    padding: 100px 0;
    background-color: #fafbfe;
}

.case-study-tag {
    display: inline-block;
    color: #f7ca45;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.case-study-main-title {
    font-size: 2.8rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 15px;
}

.case-study-main-desc {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

.seo-case-study-section {
    padding: 100px 0;
    background-color: #fafbfe;
}

.case-study-tag {
    display: inline-block;
    color: #f7ca45;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.case-study-main-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 15px;
}

.case-study-main-desc {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

.view-more-container {
    margin-top: 50px;
}

.view-more-btn {
    display: inline-block;
    padding: 14px 35px;
    background-color: #f7ca45;
    color: #111 !important;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 8px 20px rgba(247, 202, 69, 0.25);
    transition: all 0.3s ease;
    text-decoration: none;
}

.view-more-btn:hover {
    background-color: #111;
    color: #fff !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}


/* =================== UI/UX tools section ==========================================*/
.design-tools-section {
    padding: 90px 0;
    background-color: #fafbfe;
    /* Very soft premium background */
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

/* Subtle background accent blobs */
.design-tools-section::before,
.design-tools-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 188, 254, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.design-tools-section::before {
    top: -50px;
    left: -50px;
}

.design-tools-section::after {
    bottom: -50px;
    right: -50px;
}

.design-tools-section .container {
    position: relative;
    z-index: 2;
}

.tools-badge {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(26, 188, 254, 0.08);
    color: #1abcfe;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.tools-title {
    font-size: 2.8rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 18px;
}

.tools-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 650px;
    margin: 0 auto;
}

/* Card Styling */
.tool-card {
    background: #ffffff;
    border: 1px solid rgba(226, 226, 226, 0.5);
    border-radius: 20px;
    padding: 35px 30px;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tool-icon-wrapper {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 25px;
    background: #f8f9fa;
    transition: all 0.3s ease;
    padding: 12px;
}

.tool-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.tool-info h4 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #222;
}

.tool-info p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Tool specific accent styling on hover */
.tool-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}

.tool-card:hover .tool-svg {
    transform: scale(1.1);
}

/* Figma Accent */
.figma-card:hover {
    border-color: rgba(242, 78, 30, 0.2);
    box-shadow: 0 15px 35px rgba(242, 78, 30, 0.06);
}

.figma-card:hover .tool-icon-wrapper {
    background: rgba(242, 78, 30, 0.05);
}

/* Photoshop Accent */
.photoshop-card:hover {
    border-color: rgba(0, 200, 255, 0.2);
    box-shadow: 0 15px 35px rgba(0, 200, 255, 0.06);
}

.photoshop-card:hover .tool-icon-wrapper {
    background: rgba(0, 200, 255, 0.05);
}

/* Illustrator Accent */
.illustrator-card:hover {
    border-color: rgba(255, 154, 0, 0.2);
    box-shadow: 0 15px 35px rgba(255, 154, 0, 0.06);
}

.illustrator-card:hover .tool-icon-wrapper {
    background: rgba(255, 154, 0, 0.05);
}

/* FigJam Accent */
.figjam-card:hover {
    border-color: rgba(162, 89, 255, 0.2);
    box-shadow: 0 15px 35px rgba(162, 89, 255, 0.06);
}

.figjam-card:hover .tool-icon-wrapper {
    background: rgba(162, 89, 255, 0.05);
}

/* AI Accent */
.ai-card:hover {
    border-color: rgba(221, 36, 118, 0.2);
    box-shadow: 0 15px 35px rgba(221, 36, 118, 0.06);
}

.ai-card:hover .tool-icon-wrapper {
    background: rgba(221, 36, 118, 0.05);
}

/* Responsive */
@media (max-width: 991px) {
    .tools-title {
        font-size: 2.2rem;
    }

    .design-tools-section {
        padding: 60px 0;
    }

    .tool-card {
        padding: 30px 25px;
    }
}

@media (max-width: 575px) {
    .tools-title {
        font-size: 1.8rem;
    }

    .design-tools-section {
        padding: 50px 0;
    }
}


/* =============================ecommerce page===================================== */
/* Styling for the E-commerce Technologies section */
.ecom-tech-section {
    padding: 90px 0;
    background-color: #ffffff;
    /* Contrast with gray process background */
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

/* Subtle background accent blobs */
.ecom-tech-section::before,
.ecom-tech-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(247, 202, 69, 0.04) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.ecom-tech-section::before {
    top: -50px;
    left: -50px;
}

.ecom-tech-section::after {
    bottom: -50px;
    right: -50px;
}

.ecom-tech-section .container {
    position: relative;
    z-index: 2;
}

.tech-title {
    font-size: 2.8rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 18px;
}

.tech-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 750px;
    margin: 0 auto;
}

/* Tech Cards */
.ecom-tech-card {
    background: #ffffff;
    border: 1px solid rgba(226, 226, 226, 0.5);
    border-radius: 20px;
    padding: 35px 30px;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ecom-tech-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}

.ecom-icon-wrapper {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    padding: 12px;
}

/* Icon Colors */
.ecom-frontend-wrapper {
    background: rgba(79, 70, 229, 0.07);
}

.ecom-backend-wrapper {
    background: rgba(245, 158, 11, 0.07);
}

.ecom-design-wrapper {
    background: rgba(16, 185, 129, 0.07);
}

.ecom-payment-wrapper {
    background: rgba(239, 68, 68, 0.07);
}

.ecom-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ecom-tech-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #222;
}

/* Tech list tags */
.ecom-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.ecom-pill {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 50px;
    background: #f3f4f6;
    color: #4b5563;
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.ecom-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Specific pill hover styling */
/* Frontend */
.ecom-pill.html5:hover {
    background: rgba(227, 76, 38, 0.1);
    color: #e34c26;
    border-color: rgba(227, 76, 38, 0.2);
}

.ecom-pill.css3:hover {
    background: rgba(38, 77, 228, 0.1);
    color: #264de4;
    border-color: rgba(38, 77, 228, 0.2);
}

.ecom-pill.js:hover {
    background: rgba(247, 223, 30, 0.15);
    color: #cbb000;
    border-color: rgba(247, 223, 30, 0.2);
}

.ecom-pill.react:hover {
    background: rgba(97, 218, 251, 0.1);
    color: #00bcd4;
    border-color: rgba(97, 218, 251, 0.2);
}

.ecom-pill.vue:hover {
    background: rgba(65, 184, 131, 0.1);
    color: #41b883;
    border-color: rgba(65, 184, 131, 0.2);
}

/* Backend */
.ecom-pill.laravel:hover {
    background: rgba(255, 45, 32, 0.1);
    color: #ff2d20;
    border-color: rgba(255, 45, 32, 0.2);
}

.ecom-pill.wordpress:hover {
    background: rgba(33, 117, 155, 0.1);
    color: #21759b;
    border-color: rgba(33, 117, 155, 0.2);
}

/* Design */
.ecom-pill.figma:hover {
    background: rgba(242, 78, 30, 0.1);
    color: #f24e1e;
    border-color: rgba(242, 78, 30, 0.2);
}

/* Integrations */
.ecom-pill.razorpay:hover {
    background: rgba(10, 117, 235, 0.1);
    color: #0a75eb;
    border-color: rgba(10, 117, 235, 0.2);
}

.ecom-pill.stripe:hover {
    background: rgba(107, 95, 251, 0.1);
    color: #6b5ffb;
    border-color: rgba(107, 95, 251, 0.2);
}

.ecom-pill.easebuzz:hover {
    background: rgba(235, 87, 87, 0.1);
    color: #eb5757;
    border-color: rgba(235, 87, 87, 0.2);
}

/* Responsive */
@media (max-width: 991px) {
    .tech-title {
        font-size: 2.2rem;
    }

    .ecom-tech-section {
        padding: 60px 0;
    }

    .ecom-tech-card {
        padding: 30px 25px;
    }
}

@media (max-width: 575px) {
    .tech-title {
        font-size: 1.8rem;
    }

    .ecom-tech-section {
        padding: 50px 0;
    }
}



/* Horizontal Platforms We Build On section styling */
.platforms-build-section {
    padding: 90px 0;
    background-color: #fafbfe;
    /* Very soft light gray/blue background */
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.platforms-build-section::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(127, 84, 179, 0.03) 0%, rgba(255, 255, 255, 0) 70%);
    top: -100px;
    right: -100px;
    pointer-events: none;
}

.platforms-title {
    font-size: 2.8rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 18px;
}

.platforms-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 750px;
    margin: 0 auto;
}

/* Horizontal Platform Row */
.platform-row-card {
    background: #ffffff;
    border: 1px solid rgba(226, 226, 226, 0.5);
    border-left: 5px solid rgba(226, 226, 226, 0.8);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 40px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

.platform-row-card:last-child {
    margin-bottom: 0;
}

/* Shopify Customizations */
.shopify-row-card {
    border-left-color: #f5c200;
}

.shopify-row-card:hover {
    box-shadow: 0 15px 35px rgba(149, 191, 71, 0.05);
    transform: translateY(-5px);
}

.shopify-row-card .platform-row-icon {
    background: rgba(149, 191, 71, 0.08);
    color: #95BF47;
}

/* WooCommerce Customizations */
.woocommerce-row-card {
    border-left-color: #7F54B3;
}

.woocommerce-row-card:hover {
    box-shadow: 0 15px 35px rgba(127, 84, 179, 0.05);
    transform: translateY(-5px);
}

.woocommerce-row-card .platform-row-icon {
    background: rgba(127, 84, 179, 0.08);
    color: #7F54B3;
}

/* Icon Column */
.platform-row-icon {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    flex-shrink: 0;
    padding: 20px;
    transition: transform 0.3s ease;
}

.platform-row-card:hover .platform-row-icon {
    transform: scale(1.05);
}

.platform-row-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Content Column */
.platform-row-content {
    flex-grow: 1;
}

.platform-row-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #222;
}

.platform-row-content p {
    font-size: 0.98rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Features Column */
.platform-row-features {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 1px solid rgba(226, 226, 226, 0.6);
    padding-left: 40px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
}

.check-svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.shopify-row-card .check-svg {
    color: #95BF47;
}

.woocommerce-row-card .check-svg {
    color: #7F54B3;
}

/* Responsive */
@media (max-width: 991px) {
    .platforms-title {
        font-size: 2.2rem;
    }

    .platforms-build-section {
        padding: 60px 0;
    }

    .platform-row-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        padding: 30px;
    }

    .platform-row-features {
        width: 100%;
        border-left: none;
        padding-left: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 10px;
        border-top: 1px solid rgba(226, 226, 226, 0.6);
        padding-top: 20px;
    }
}

@media (max-width: 575px) {
    .platforms-title {
        font-size: 1.8rem;
    }

    .platforms-build-section {
        padding: 50px 0;
    }
}


/* ======================================= ecomerce page===================================== */
/* Styling for the E-commerce Technologies section */
.ecom-tech-section {
    padding: 90px 0;
    background-color: #ffffff;
    /* Contrast with gray process background */
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

/* Subtle background accent blobs */
.ecom-tech-section::before,
.ecom-tech-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(247, 202, 69, 0.04) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.ecom-tech-section::before {
    top: -50px;
    left: -50px;
}

.ecom-tech-section::after {
    bottom: -50px;
    right: -50px;
}

.ecom-tech-section .container {
    position: relative;
    z-index: 2;
}

.tech-title {
    font-size: 2.8rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 18px;
}

.tech-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 750px;
    margin: 0 auto;
}

/* Tech Cards */
.ecom-tech-card {
    background: #ffffff;
    border: 1px solid rgba(226, 226, 226, 0.5);
    border-radius: 20px;
    padding: 35px 30px;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ecom-tech-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}

.ecom-icon-wrapper {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    padding: 12px;
}

.ecom-icon-wrapper i {
    font-size: 24px;
    transition: transform 0.3s ease;
}

.ecom-tech-card:hover .ecom-icon-wrapper i {
    transform: scale(1.1);
}

/* Icon Colors */
.ecom-frontend-wrapper {
    background: rgba(79, 70, 229, 0.07);
}

.ecom-backend-wrapper {
    background: rgba(245, 158, 11, 0.07);
}

.ecom-design-wrapper {
    background: rgba(16, 185, 129, 0.07);
}

.ecom-payment-wrapper {
    background: rgba(239, 68, 68, 0.07);
}

.ecom-tech-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #222;
}

/* Tech list tags */
.ecom-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.ecom-pill {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 50px;
    background: #f3f4f6;
    color: #4b5563;
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.ecom-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Specific pill hover styling */
/* Frontend */
.ecom-pill.html5:hover {
    background: rgba(227, 76, 38, 0.1);
    color: #e34c26;
    border-color: rgba(227, 76, 38, 0.2);
}

.ecom-pill.css3:hover {
    background: rgba(38, 77, 228, 0.1);
    color: #264de4;
    border-color: rgba(38, 77, 228, 0.2);
}

.ecom-pill.js:hover {
    background: rgba(247, 223, 30, 0.15);
    color: #cbb000;
    border-color: rgba(247, 223, 30, 0.2);
}

.ecom-pill.react:hover {
    background: rgba(97, 218, 251, 0.1);
    color: #00bcd4;
    border-color: rgba(97, 218, 251, 0.2);
}

.ecom-pill.vue:hover {
    background: rgba(65, 184, 131, 0.1);
    color: #41b883;
    border-color: rgba(65, 184, 131, 0.2);
}

/* Backend */
.ecom-pill.laravel:hover {
    background: rgba(255, 45, 32, 0.1);
    color: #ff2d20;
    border-color: rgba(255, 45, 32, 0.2);
}

.ecom-pill.wordpress:hover {
    background: rgba(33, 117, 155, 0.1);
    color: #21759b;
    border-color: rgba(33, 117, 155, 0.2);
}

/* Design */
.ecom-pill.figma:hover {
    background: rgba(242, 78, 30, 0.1);
    color: #f24e1e;
    border-color: rgba(242, 78, 30, 0.2);
}

/* Integrations */
.ecom-pill.razorpay:hover {
    background: rgba(10, 117, 235, 0.1);
    color: #0a75eb;
    border-color: rgba(10, 117, 235, 0.2);
}

.ecom-pill.stripe:hover {
    background: rgba(107, 95, 251, 0.1);
    color: #6b5ffb;
    border-color: rgba(107, 95, 251, 0.2);
}

.ecom-pill.easebuzz:hover {
    background: rgba(235, 87, 87, 0.1);
    color: #eb5757;
    border-color: rgba(235, 87, 87, 0.2);
}

/* Horizontal Platforms We Build On section styling */
.platforms-build-section {
    padding: 90px 0;
    background-color: #fafbfe;
    /* Very soft light gray/blue background */
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.platforms-build-section::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(127, 84, 179, 0.03) 0%, rgba(255, 255, 255, 0) 70%);
    top: -100px;
    right: -100px;
    pointer-events: none;
}

.platforms-title {
    font-size: 2.8rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 18px;
}

.platforms-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 750px;
    margin: 0 auto;
}

/* Horizontal Platform Row */
.platform-row-card {
    background: #ffffff;
    border: 1px solid rgba(226, 226, 226, 0.5);
    border-left: 5px solid rgba(226, 226, 226, 0.8);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 40px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

.platform-row-card:last-child {
    margin-bottom: 0;
}

/* Shopify Customizations */
.shopify-row-card {
    border-left-color: #f4a301;
}

.shopify-row-card:hover {
    box-shadow: 0 15px 35px rgba(149, 191, 71, 0.05);
    transform: translateY(-5px);
}

.shopify-row-card .platform-row-icon {
    background: rgba(149, 191, 71, 0.08);
    color: #95BF47;
}

/* WooCommerce Customizations */
.woocommerce-row-card {
    border-left-color: #f4a301;
}

.woocommerce-row-card:hover {
    box-shadow: 0 15px 35px rgba(127, 84, 179, 0.05);
    transform: translateY(-5px);
}

.woocommerce-row-card .platform-row-icon {
    background: rgba(127, 84, 179, 0.08);
    color: #7F54B3;
}

/* Icon Column */
.platform-row-icon {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.platform-row-icon i {
    font-size: 32px;
}

.platform-row-card:hover .platform-row-icon {
    transform: scale(1.05);
}

/* Content Column */
.platform-row-content {
    flex-grow: 1;
}

.platform-row-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #222;
}

.platform-row-content p {
    font-size: 0.98rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Features Column */
.platform-row-features {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 1px solid rgba(226, 226, 226, 0.6);
    padding-left: 40px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
}

.check-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.shopify-row-card .check-icon {
    color: #f4a301;
}

.woocommerce-row-card .check-icon {
    color: #f4a301;
}

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

    .tech-title,
    .platforms-title {
        font-size: 2.2rem;
    }

    .ecom-tech-section,
    .platforms-build-section {
        padding: 60px 0;
    }

    .ecom-tech-card {
        padding: 30px 25px;
    }

    .platform-row-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        padding: 30px;
    }

    .platform-row-features {
        width: 100%;
        border-left: none;
        padding-left: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 10px;
        border-top: 1px solid rgba(226, 226, 226, 0.6);
        padding-top: 20px;
    }
}

@media (max-width: 575px) {

    .tech-title,
    .platforms-title {
        font-size: 1.8rem;
    }

    .ecom-tech-section,
    .platforms-build-section {
        padding: 50px 0;
    }
}


/* PWA Technologies Section */
.pwa-tech-section {
    padding: 90px 0;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.pwa-tech-section::before,
.pwa-tech-section::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.04) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.pwa-tech-section::before {
    top: -80px;
    left: -80px;
}

.pwa-tech-section::after {
    bottom: -80px;
    right: -80px;
}

.pwa-tech-section .container {
    position: relative;
    z-index: 1;
}

.pwa-tech-title {
    font-size: 2.8rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 14px;
}

.pwa-tech-subtitle {
    font-size: 1.05rem;
    color: #666;
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Tech Cards */
.pwa-tech-card {
    background: #ffffff;
    border: 1px solid rgba(226, 226, 226, 0.55);
    border-radius: 20px;
    padding: 32px 28px;
    height: 87%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.pwa-tech-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}

.pwa-icon-wrap {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 22px;
    transition: transform 0.3s ease;
}

.pwa-icon-wrap i {
    font-size: 22px;
    transition: transform 0.3s ease;
}

.pwa-tech-card:hover .pwa-icon-wrap i {
    transform: scale(1.12);
}

/* Category icon bg colours */
.pwa-icon-frontend {
    background: rgba(79, 70, 229, 0.07);
}

.pwa-icon-backend {
    background: rgba(245, 158, 11, 0.07);
}

.pwa-icon-core {
    background: rgba(16, 185, 129, 0.07);
}

.pwa-icon-database {
    background: rgba(239, 68, 68, 0.07);
}

.pwa-icon-performance {
    background: rgba(6, 182, 212, 0.07);
}

.pwa-tech-card h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 14px;
}

/* Pills */
.pwa-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.pwa-pill {
    display: inline-block;
    padding: 5px 13px;
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: 50px;
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

.pwa-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}



/* Responsive */
@media (max-width: 991px) {
    .pwa-tech-title {
        font-size: 2.1rem;
    }

    .pwa-tech-section {
        padding: 60px 0;
    }

    .pwa-tech-card {
        padding: 26px 22px;
    }
}

@media (max-width: 575px) {
    .pwa-tech-title {
        font-size: 1.75rem;
    }

    .pwa-tech-section {
        padding: 50px 0;
    }
}


/* CMS Platforms Section */
.cms-platforms-section {
    padding: 90px 0;
    background: #fafbfe;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.cms-platforms-section::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.03) 0%, rgba(255, 255, 255, 0) 70%);
    top: -100px;
    left: -100px;
    pointer-events: none;
}

.cms-platforms-section::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.03) 0%, rgba(255, 255, 255, 0) 70%);
    bottom: -80px;
    right: -80px;
    pointer-events: none;
}

.cms-platforms-section .container {
    position: relative;
    z-index: 1;
}

.cms-platforms-title {
    font-size: 2.8rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 14px;
}

.cms-platforms-subtitle {
    font-size: 1.05rem;
    color: #666;
    max-width: 780px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Platform Cards */
.cms-plat-card {
    background: #ffffff;
    border: 1px solid rgba(226, 226, 226, 0.5);
    border-top: 4px solid transparent;
    border-radius: 20px;
    padding: 36px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.cms-plat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
}

/* Category accent colours */
.cms-plat-opensource {
    border-top-color: #d9aa0e;
}

.cms-plat-opensource:hover {
    box-shadow: 0 16px 36px rgba(79, 70, 229, 0.06);
}

.cms-plat-opensource .cms-plat-icon {
    background: rgb(9 4 84 / 7%);
    color: #000000;
}

.cms-plat-ecommerce {
    border-top-color: #95BF47;
}

.cms-plat-ecommerce:hover {
    box-shadow: 0 16px 36px rgba(149, 191, 71, 0.06);
}

.cms-plat-ecommerce .cms-plat-icon {
    background: rgba(149, 191, 71, 0.08);
    color: #7a9c3b;
}

.cms-plat-visual {
    border-top-color: #06B6D4;
}

.cms-plat-visual:hover {
    box-shadow: 0 16px 36px rgba(6, 182, 212, 0.06);
}

.cms-plat-visual .cms-plat-icon {
    background: rgba(6, 182, 212, 0.07);
    color: #0891b2;
}

.cms-plat-custom {
    border-top-color: #F59E0B;
}

.cms-plat-custom:hover {
    box-shadow: 0 16px 36px rgba(245, 158, 11, 0.06);
}

.cms-plat-custom .cms-plat-icon {
    background: rgba(245, 158, 11, 0.07);
    color: #d97706;
}

/* Icon wrapper */
.cms-plat-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 22px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.cms-plat-icon i {
    font-size: 22px;
    transition: transform 0.3s ease;
}

.cms-plat-card:hover .cms-plat-icon i {
    transform: scale(1.12);
}

.cms-plat-card h4 {
    font-weight: 600;
    color: #222;
    margin-bottom: 6px;
    font-size: 22px;
}

.cms-plat-card .cms-category-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
    display: inline-block;
}



/* Pills */
.cms-plat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
}

.cms-plat-pill {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.83rem;
    font-weight: 500;
    border-radius: 50px;
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

/* Responsive */
@media (max-width: 991px) {
    .cms-platforms-title {
        font-size: 2.1rem;
    }

    .cms-platforms-section {
        padding: 60px 0;
    }

    .cms-plat-card {
        padding: 28px 24px;
    }
}

@media (max-width: 575px) {
    .cms-platforms-title {
        font-size: 1.75rem;
    }

    .cms-platforms-section {
        padding: 50px 0;
    }
}


/*================== Styling for the Platforms & Technologies section============== */
.tech-platforms-section {
    padding: 90px 0;
    background-color: #ffffff;
    /* Contrast with gray background */
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
}

.tech-title {
    font-size: 2.8rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 18px;
}

.tech-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 750px;
    margin: 0 auto;
}

/* Tech Cards */
.tech-card {
    background: #ffffff;
    border: 1px solid rgba(226, 226, 226, 0.5);
    border-radius: 20px;
    padding: 35px 30px;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tech-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}

.tech-icon-wrapper {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    padding: 12px;
}

/* Icon Colors */
.frontend-wrapper {
    background: rgba(79, 70, 229, 0.07);
}

.backend-wrapper {
    background: rgba(245, 158, 11, 0.07);
}

.design-wrapper {
    background: rgba(16, 185, 129, 0.07);
}

.integration-wrapper {
    background: rgba(239, 68, 68, 0.07);
}

.tech-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tech-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #222;
}

.tech-desc {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
    min-height: 42px;
}

/* Tech Pills Styling */
.tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.tech-pill {
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 50px;
    background: #f3f4f6;
    color: #4b5563;
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

/* Specific pill accents on hover */
.tech-pill:hover {
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 991px) {
    .tech-title {
        font-size: 2.2rem;
    }

    .tech-platforms-section {
        padding: 60px 0;
    }

    .tech-card {
        padding: 30px 25px;
    }
}

@media (max-width: 575px) {
    .tech-title {
        font-size: 1.8rem;
    }

    .tech-platforms-section {
        padding: 50px 0;
    }
}


/* Styling for the Technologies section */
.software-tech-section {
    padding: 90px 0;
    background-color: #fafbfe;
    /* Light premium background */
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

/* Subtle background accent blobs */
.software-tech-section::before,
.software-tech-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.04) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.software-tech-section::before {
    top: -50px;
    left: -50px;
}

.software-tech-section::after {
    bottom: -50px;
    right: -50px;
}

.software-tech-section .container {
    position: relative;
    z-index: 2;
}

.tech-section-badge {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(79, 70, 229, 0.08);
    color: #4f46e5;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.tech-section-title {
    font-size: 2.8rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 18px;
}

.tech-section-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 750px;
    margin: 0 auto;
}

/* Tech Cards */
.software-tech-card {
    background: #ffffff;
    border: 1px solid rgba(226, 226, 226, 0.5);
    border-radius: 20px;
    padding: 35px 30px;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.software-tech-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}

.soft-tech-icon-wrapper {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    padding: 12px;
}

/* Icon Colors */
.soft-frontend-wrapper {
    background: rgba(79, 70, 229, 0.07);
}

.soft-backend-wrapper {
    background: rgba(245, 158, 11, 0.07);
}

.soft-database-wrapper {
    background: rgba(16, 185, 129, 0.07);
}

.soft-cloud-wrapper {
    background: rgba(239, 68, 68, 0.07);
}

.soft-tech-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.software-tech-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #222;
}

/* Tech list tags */
.soft-tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.soft-tech-pill {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 50px;
    background: #f3f4f6;
    color: #4b5563;
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.soft-tech-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}


/* Responsive */
@media (max-width: 991px) {
    .tech-section-title {
        font-size: 2.2rem;
    }

    .software-tech-section {
        padding: 60px 0;
    }

    .software-tech-card {
        padding: 30px 25px;
    }
}

@media (max-width: 575px) {
    .tech-section-title {
        font-size: 1.8rem;
    }

    .software-tech-section {
        padding: 50px 0;
    }
}

.mega_menu {
    top: 100%;
    margin-top: 0;
    padding: 65px 5vw 65px;
    background: rgba(10, 10, 10, .98);
    border-top: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
}

.mega_menu_active {
    min-height: 0;
}

.mega_menu > div {
    width: 100%;
    max-width: none;
    margin: 0 auto;
}

.mega_menu .tabs {
    display: flex;
    width: 100%;
    gap: 7px;
    padding: 0;
}

.mega_menu .tabs li {
    position: static;
    width: 100%;
    float: none;
    line-height: 1.4;
}

.mega_menu .tabs label {
    width: 210px;
    padding: 13px 16px;
    border-radius: 8px;
    color: #aaa;
    font-size: 18px;
    font-weight: 500;
    transition: background-color .2s ease, color .2s ease;
}

.mega_menu .tabs label:hover,
.mega_menu .tabs li:hover label {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.mega_menu .tabs .tab-content {
    top: 0;
    left: 245px;
    width: calc(100% - 245px);
    min-height: 154px;
    padding: 8px 10px 8px 32px;
    border-left: 1px solid rgba(255, 255, 255, .16);
}

.mega_menu .servi_tab ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 30px;
    margin: 0;
    padding: 0;
    font-size: 15px;
}

.mega_menu .servi_tab ul li a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    color: #ddd !important;
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.mega_menu .servi_tab ul li a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .08);
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .mega_menu {
        position: fixed;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        padding: 100px 24px 30px;
    }

    .mega_menu .tabs {
        gap: 4px;
    }

    .mega_menu .tabs .tab-content {
        position: static;
        width: 100%;
        min-height: 0;
        padding: 10px 0 18px 16px;
        border-left: 2px solid rgba(255, 255, 255, .16);
    }

    .mega_menu .tabs label {
        width: 100%;
        font-size: 20px;
    }
}

@media (max-width: 575px) {
    .mega_menu .servi_tab ul {
        grid-template-columns: 1fr;
    }
}

.mega_menu .tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 48px;
}

.mega_menu .tabs li {
    width: auto;
}

.mega_menu .tabs li:hover~li:first-child .tab-content,
.mega_menu .tabs:has(li:hover) li:first-child:not(:hover) .tab-content {
    display: block;
}

.mega_menu .tabs label,
.mega_menu .tabs li:hover label,
.mega_menu .tabs label:hover {
    width: auto;
    margin-bottom: 18px;
    padding: 0 0 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 20px;
}

.mega_menu .tabs .tab-content,
.mega_menu .tabs li:hover .tab-content {
    position: static;
    display: block !important;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
}

.mega_menu .servi_tab ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.mega_menu .servi_tab ul li {
    overflow: hidden;
    border-radius: 8px;
    transition: background-color .2s ease;
}

.mega_menu .servi_tab ul li:hover {
    background: rgba(255, 255, 255, .1);
}

.mega_menu .servi_tab ul li a {
    display: block;
    width: 100%;
    position: relative;
    padding: 9px 10px;
    border-radius: inherit;
    color: #d5d5d5 !important;
    transition: color .2s ease;
}

.mega_menu .servi_tab ul li a:hover {
    color: #fff !important;
    background: transparent;
    transform: none;
}

.mega_menu .tabs label {
    position: relative;
    transition: color .2s ease, border-color .2s ease;
}

.mega_menu .tabs label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 2px;
    border-radius: 4px;
    background: #f4a200;
    transition: width .25s ease;
}

.mega_menu .tabs li:hover label::after,
.mega_menu .tabs label:hover::after {
    width: 42px;
}

@media (max-width: 991px) {
    .mega_menu .tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 22px;
    }
}

@media (max-width: 575px) {
    .mega_menu .tabs {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}