:root {
    --primary-color: #FF6A00;
}

body {
    font-family: Plus Jakarta Sans;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.main-container {
    background-color: #000;
}

.section-padding {
    padding-top: 60px;
    /* padding-bottom: 60px; */
}

.section-padding-bottom {
    padding-bottom: 90px;
}

/* common */
.container {
    position: relative !important;
}

.banner-heading {
    font-weight: 700;
    font-size: 78px;
    line-height: 78px;
    background: linear-gradient(252.92deg, #FFFFFF 53.44%, #FF6A00 91.31%);
    -webkit-background-clip: text;
    color: transparent;
}

.heading {
    font-weight: 700;
    font-size: 50px;
    line-height: 65px;
    background: linear-gradient(252.92deg, #FFFFFF 53.44%, #FF6A00 91.31%);
    -webkit-background-clip: text;
    color: transparent;
    text-transform: capitalize;
    padding-top: 10px;
}

/* .heading-top {
    color: var(--primary-color);
    font-size: 12px;
    position: relative;
    padding-left: 45px;
    height: 25px;
    font-weight: 800;
}

.heading-top::before {
    content: "";
    display: block;
    width: 35px;
    height: 8px;
    background: linear-gradient(270deg, #FF6A00 0%, rgba(153, 64, 0, 0) 100%);
    position: absolute;
    top: 5px;
    left: 0;
} */


.heading-top {
    color: var(--primary-color);
    font-size: 12px;
    position: relative;
    padding: 0 45px;
    font-weight: 800;
    display: inline-block;
    white-space: nowrap;
    width: fit-content;
}

.heading-top::before {
    content: "";
    display: block;
    width: 35px;
    height: 8px;
    background: linear-gradient(270deg, #FF6A00 0%, rgba(153, 64, 0, 0) 100%);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.heading-top::after {
    content: "";
    display: block;
    width: 35px;
    height: 8px;
    background: linear-gradient(87deg, #FF6A00 0%, rgba(153, 64, 0, 0) 100%);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}


.heading-mini {
    font-weight: 700;
    font-size: 18px;
    background: linear-gradient(252.92deg, #FFFFFF 53.44%, #FF6A00 91.31%);
    -webkit-background-clip: text;
    color: transparent;
}

.paragraph {
    font-size: 17px;
    line-height: 30px;
    font-weight: normal;
    color: #fff;
    margin: 0;
}

.btn {
    /* padding: 1.1em 2em;
    background: none;
    border: none;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ;
    background-color: var(--primary-color);
    font-weight: bolder;
    border-radius: 0; */


    padding: 1.1em 2em;
    background: none;
    border: none;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.6s ease;
    background-color: var(--primary-color);
    font-weight: bolder;
    border-radius: 0;
}

.btn:before {
    /* content: "";
    position: absolute;
    width: 100px;
    height: 120%;
    background-color: #e98f54;
    top: 50%;
    transform: skewX(30deg) translate(-150%, -50%);
    transition: all 0.5s; */


    content: "";
    position: absolute;
    width: 100px;
    height: 120%;
    background-color: rgba(255, 255, 255, 0.3);
    /* light transparent white */
    top: 0;
    left: 0;
    transform: translateX(-120%);
    transition: transform 0.9s ease, background-color 0.9s ease;
    pointer-events: none;
}

.btn:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.btn:hover::before {
    transform: translateX(250%);

    transition-delay: 0.1s;
}

.btn:active {
    transform: scale(0.9);
}

.btn-arrow {
    width: 25px;
    padding-left: 7px;
}

.next-prev-btn {
    display: flex;
    align-items: center;
    justify-content: end;
}

.next-prev-btn .prev-btn,
.next-prev-btn .next-btn {
    padding: 20px;
    border: 0.6px solid #3F3F3F;
    transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out;
    /* Smooth transition */
}

.next-prev-btn .prev-btn:hover,
.next-prev-btn .next-btn:hover {
    background-color: var(--primary-color);
    border: 0.6px solid transparent;
}

.next-prev-btn-1 {
    display: flex;
    align-items: center;
}

.next-prev-btn-1 .prev-btn,
.next-prev-btn-1 .next-btn {
    padding: 20px;
    border: 0.6px solid #3F3F3F;
    transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out;
    /* Smooth transition */
}

.next-prev-btn-1 .prev-btn:hover,
.next-prev-btn-1 .next-btn:hover {
    background-color: var(--primary-color);
    border: 0.6px solid transparent;
}


.swiper-button-next:after,
.swiper-button-prev:after {
    display: none;
}

.swiper-button-next,
.swiper-button-prev {
    position: unset !important;
    top: unset !important;
    width: unset !important;
    height: unset !important;
    margin-top: unset !important;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: unset !important;
}

.swiper-button-next-tech:after,
.swiper-button-prev-tech:after {
    display: none;
}

.swiper-button-next-tech,
.swiper-button-prev-tech {
    position: unset !important;
    top: unset !important;
    width: unset !important;
    height: unset !important;
    margin-top: unset !important;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: unset !important;
}

.top-banner {
    position: relative;
    padding-top: 130px;
    padding-bottom: 60px;
    background-size: cover;
    background-position: center center !important;
    background-repeat: no-repeat;
    z-index: 1;
    height: 65vh;
    display: flex;
    align-items: center;

    /* Ensure content stays above */
}

/* common end */

/* navbar */
.navbar {
    padding: 8px 0px;
    /* border-bottom: 0.5px solid rgba(255, 255, 255, 1); */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(100px);
    background: linear-gradien t(180deg, rgba(255, 255, 255, 0.0372) 0%, rgba(255, 255, 255, 0.06) 100%);
    /* position: relative; */
}

.navbar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    /* Thickness of the border */
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 103.23%);
}

.navbar-nav li a {
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 14px;
}

.navbar-nav li .nav-link.active {
    color: var(--primary-color);
}

.navbar-nav .nav-item {
    padding-right: 20px;
}

.navbar-nav .nav-item:last-child {
    padding-right: 0px;
}

.navbar-logo {
    width: 100%;
    height: 60px;
}

.nav-link:focus,
.nav-link:hover {
    color: var(--primary-color);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--primary-color);
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--primary-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}

.dropdown-menu li a {
    color: #ffffff;
    border: 1px solid #ffffff5c;
    padding: 10px 20px;
}

.dropdown-menu.show {
    top: 62px;
    padding: 0;
    margin: 0
}

.dropdown-menu.show li {
    background: #000;
    color: #fff;
}

.navbar-brand {
    position: relative;
    padding-left: 32px;
    /* border-left: 1px solid rgb(255, 255, 255); */
    padding: 10px 10px 10px 30px;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--primary-color) !important;
    background-color: #000000;
}

/* .navbar-brand::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 10.7vh;
        background: #fff;


    } */


/* navbar end */

/* vertical navbar */

/* Top Navbar */
.navbar {
    /* background-color: #333; */
    padding: 0px;
}


/* hero */
.hero-img {
    width: 100%;
}

.hero-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    gap: 22px;
    padding-left: 10px;
    position: relative;
}

/* .hero-top-padding {
    padding-top: 60px;
    position: relative;
} */

@media (max-width:576px){
    .hero-top-padding {
    padding-top: 35px;
    }
}

.hero-text-content {
    text-transform: uppercase;
    position: absolute;
    bottom: 10px;
    right: 25px;


}

.hero-text-content h6 {
    font-size: 90px;
    font-weight: 700;
    color: #fff;
}

.hero-text-content span {
    color: #53535370;
}

/* hero end */


/* Adjust based on your design */




/* about  */

.about-content {
    /* display: flex; */
    /* flex-direction: column; */
    height: 100%;
    justify-content: center;
    gap: 22px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.about-content .main-heading h3 {
    font-size: 58px;
    line-height: 60px;
}

.about-content .main-heading span {
    background: linear-gradient(252.92deg, #FFFFFF 53.44%, #FF6A00 91.31%);
    -webkit-background-clip: text;
    color: transparent;
}

.about-cards .card-main {
    display: flex;
    align-items: center;
    gap: 15px;
}

.about-cards .card-main h5 {
    color: #fff;
    margin: 0;
    line-height: 33px;
}

.about-cards .card-main img {
    width: 52px;
}

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

.img-group {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

/* Right Image */
.img-group .img-right {
    position: absolute;
    right: 0;
    top: 0;
    /* width: 400px; */
    overflow: hidden;
    z-index: 1;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* .img-group .img-right:hover {
    transform: scale(1.05);
    filter: brightness(20%);
} */
.img-group .img-right .hero-img,
.img-group .img-left .hero-img {
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;


}

.img-group .img-right:hover .hero-img,
.img-group .img-left:hover .hero-img {
    transform: scale(1.2);
    filter: brightness(70%);

}

/* Left Image */
.img-group .img-left {
    position: absolute;
    left: 0px;
    bottom: 40px;
    /* width: 300px; */
    overflow: hidden;
    z-index: 2;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    border: 10px solid #000000;
}

/* .img-group .img-left:hover {
    transform: scale(1.05);
    filter: brightness(20%);
} */

/* Ensuring the images are responsive */
.img-group .hero-img {
    width: 100%;
    max-width: 270px;
}

/* Text Styling */
.text-group {
    position: absolute;
    bottom: 50px;
    right: 35px;

    z-index: 3;
}

@media (min-width:1024px) and (max-width:1310px)
{
.text-group{
    right: -70px;
}
    
}

.text-group h3 {
    background: linear-gradient(252.92deg, #FFFFFF 53.44%, #FF6A00 91.31%);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 70px;
}

.bg-vector-about {
    /* background-color: #191919; */
    background-image: url(../images/about-section-bg-vector.svg);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
}

/* about end */

/* service */

.service-section-background {
    position: relative;
    background: url('../images/service-bg.png') no-repeat center center/cover;
    /* Set your background image */
}

.service-section-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(16 16 16 / 93%);
    /* #101010 with 70% opacity */
}


.swiper-slide {
    color: white;
}

.service-card {
    border: 0.8px solid #3F3F3F;
    border-top: none;
    border-bottom: none;
    border-radius: 0;
    background-color: transparent;
    color: #fff;
    position: relative;
    overflow: hidden;
    /* Ensures the image doesn't overflow */
    transition: transform 0.3s ease-in-out;
}

.service-card .card-body {
    padding: 10px 30px 0;
    min-height: 156px;
}

.service-card .card-img-bottom {
    padding-top: 30px;
}

.service-card .card-img-bottom {
    transition: transform 0.3s ease-in-out;

    /* Smooth movement */
}

.service-card .card-img-bottom {
    transform: translateY(80px);
    /* Moves image up by 10px */
}

.service-card:hover .card-img-bottom {
    transform: translateY(0px);
    /* Moves image up by 10px */
}

.service-btn .know-more-btn {
    opacity: 0;
    /* Initially hidden */
    transform: translateY(10px);
    /* Move slightly down */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.service-card:hover .service-btn .know-more-btn {
    opacity: 1;
    /* Fully visible on hover */
    transform: translateY(0);
    /* Moves back to original position */
}

.service-card.card .card-title {
    transition: color 0.3s ease-in-out;
}

.service-card.card:hover .card-title {
    color: var(--primary-color);
}

.know-more-btn {
    padding: 11px 70px;
    color: white;
    text-decoration: none;
    background-color: #000000;
    position: absolute;
    bottom: 30px;
    left: 38px;
    font-size: 14px;
}

.card-img,
.card-img-bottom {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.swiper-wrapper-padding-bottom {
    padding-bottom: 55px;
}

.mySwiperservices .swiper-pagination-bullet-active {
    width: 31px;
    height: 2px;
    display: inline-block;
    border-radius: 0px;
    background-color: var(--primary-color) !important;
}

.mySwiperservices .swiper-pagination-bullet {
    width: 31px;
    height: 2px;
    display: inline-block;
    border-radius: 0px;
    background-color: #C0C0C0;
    opacity: 1;
}

.service-content::before {
    content: "What We Offer" !important;
}

.service-card.card:hover {}


/* service end */

/* technology */

.technology-card-body .card-body-top {
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
}

.technology-card-body .card-body-top .card-title,
.technology-card-body .card-body-top h3 {
    margin: 0;
}

.technology-card-body .card-body-top h3 {
    color: #1F1F1F;
    font-size: 3.5rem;
    font-weight: 600;
}

.technology-card-body .tech-images {
    display: flex;
    /* justify-content: space-between; */
}

.technology-card-body .tech-images img {
    border: 0.6px solid #3F3F3F;
    width: 252px;
    height: 100px;
    padding: 8px;
    object-fit: contain;
}

.technology {
    background: transparent;
}

.heading-top-technology::before {
    left: 540px !important;
}

.heading-top-technology::after {
    right: 540px !important;
}

.technology {
    position: relative;
}

.technology .next-prev-btn {
    position: absolute;
    right: 16px;
    z-index: 999;
    background: #000;
}

.next-prev-btn-1 {
    position: absolute;
    right: 16px;
    z-index: 999;
    background: #000;
}

.technology-content::before {
    content: "Tech Stack" !important;
}

/* technology end */

/* why choose us  */

.accordion-button {
    background-color: transparent;
    color: #fff;
}

.accordion-item {
    background-color: transparent;
    border: 1px solid #545454;
    color: #fff;
    margin-bottom: 20px;
    padding: 10px 25px;
}

.accordion-item:not(:first-of-type) {
    border-top: 1px solid #545454;
}

.accordion-item:last-of-type {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.accordion-item:first-of-type>.accordion-header .accordion-button {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.accordion-button {
    padding: 0.5rem 1.5rem;
}

.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: transparent;
    box-shadow: none;
}

.accordion-body {
    padding: 1.5rem 1.5rem;
    position: relative;
    width: 65%;
}

.accor-button {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    margin-left: auto;
    content: "";
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);
    padding: 15px;
    border: 0.8px solid #545454;
    border-radius: 50%;
    font-weight: 900;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
}

.icon-toggle {

    margin-left: auto;
    /* Push icon to right */
    transition: opacity 0.3s ease;
}

.icon-open {
    display: none;
}

.accordion-button[aria-expanded="true"] .icon-open {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.8px solid #FFFFFF;
    background: #00000047;
}

.accordion-button[aria-expanded="true"] .icon-closed {
    display: none;
}

.accordion-button::after {
    display: none;
}

.accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: none;
}

.accordion-item:first-of-type {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.accordion-item {
    transition: background 0.3s ease-in-out;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.accordion-item.active {
    /* background-image: url('../images/faq-card-img.png'); */
    /* Background when opened */
    color: white;
    background:linear-gradient(144deg, #fff5ec 53.44%, #ef8032e0 91.31%);
    /* Optional: Adjust text color */
}

.accordion-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(92.48deg, #000000 52.62%, rgba(0, 0, 0, 0.82) 66.69%, rgba(0, 0, 0, 0.573529) 86.71%, rgba(0, 0, 0, 0) 97.53%);
    /* z-index: 1; */
}

.accordion-collapse .collapse .show {
    position: relative;
}

.why-choose-us-content {
    position: relative !important;
}

.why-choose-us-content::before {
    content: "Why Pick Us?" !important;
}


/* why choose us end  */


/* recent project */

.recent-project-section {
    background: linear-gradient(107.45deg, #1C0C00 0.93%, rgba(0, 0, 0, 0.96) 96.89%);

}

.project-content {
    display: flex;
    justify-content: space-between;
    position: absolute;
    padding: 0 70px;
    bottom: 50px;
    width: 100%;
    z-index: 999;
    align-items: flex-end;
}



.btn-explore-more {
    background-color: #000;
    backdrop-filter: blur(209px);

}

.recent-project-counter {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.recent-project-content .recent-project-heading {
    color: #fff;
    font-weight: 400;
    font-size: 25px;
    line-height: 40px;
    letter-spacing: 9%;
    margin-bottom: 30px;
}

.recent-project-counter .counter-text {
    font-weight: 600;
    font-size: 18px;
    color: #fff;
    width: 100%;
}

.recent-project-counter .number-counter {
    font-weight: 800;
    font-size: 95px;
    background: linear-gradient(270deg, rgba(255, 106, 0, 0.19) 9.73%, #FF6A00 90.39%);
    -webkit-background-clip: text;
    color: transparent;
    width: 472px;
    display: flex;
    justify-content: center;
}


/* Swiper slide */
/* Base styles */
.mySwiperworks .swiper-slide {
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease-out;
}

/* Create the gradient overlay with opacity 0 (hidden) */
.mySwiperworks .swiper-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(238.89deg, rgba(255, 106, 0, 0) 18.17%, rgba(255, 106, 0, 0.222648) 50.56%, #ff6a00b8 80.51%);
    opacity: 0;
    /* Hide initially */
    transition: opacity 0.6s ease-in-out;
    /* Smooth transition */
    z-index: 1;
}

/* On hover, smoothly show the gradient */
.mySwiperworks .swiper-slide:hover::before {
    opacity: 1;
}

.swiper-slide:hover .project-content .left-side {}


/* Initially hide .left-side below */
.left-side {
    position: absolute;
    bottom: -100%;
    left: 80px;
    opacity: 0;
    transition: bottom 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

/* Initially position .right-side off-screen to the right */
.right-side {
    position: absolute;
    right: -100%;
    /* Move it off-screen */
    bottom: 20px;
    opacity: 0;
    transition: right 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

/* On hover, bring .left-side up smoothly */
.swiper-slide:hover .left-side {
    bottom: 20px;
    opacity: 1;
}

/* On hover, bring .right-side in from the right */
.swiper-slide:hover .right-side {
    right: 100px;
    opacity: 1;
}


.left-side span {
    font-size: 16px;
}

.swiper-button-next {}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
}

.recent-project {
    text-align: start !important;
}

.recent-project .heading {
    margin: 0px !important;
}

.recent-project::before {
    content: "CREATIVE WORKS" !important;
}

.swiper.mySwiperworks {
    position: relative;
    z-index: 9;
}

.swiper.mySwiperworks::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10%;
    height: 100%;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    z-index: 2;
    /* Ensure the gradient is behind the content */
}

.swiper.mySwiperworks::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    z-index: 2;
    /* Ensure the gradient is behind the content */
}

/* recent project end */

/* blogs  */

.bg-grid-blog {
    background-image: url(../images/bg-grid.png);
    background-size: contain;
    /* background-position: top; */
    background-repeat: no-repeat;
    /* background-size: 570px 442px; */
    background-position-x: 378px;
    background-position-y: -45px;
    position: absolute;
    width: 100%;
    height: 286px;
}

.bg-blob-blog {
    background-image: url(../images/bg-blob.svg);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 720px 557px;
    background-position-y: -130px;
    background-position-x: 306px;
    width: 100%;
    height: 300px;
    position: absolute;
}

.hero-content .bg-grid-blog {
    background-image: url(../images/bg-grid.png);
    background-size: contain;
    /* background-position: center; */
    background-repeat: no-repeat;
    /* background-size: 570px 442px; */
    background-position-x: 45px;
    background-position-y: -45px;
    position: absolute;
    width: 562px;
    height: 259px;
    top: 65px;
    /* border: 1px solid red; */
}

.hero-content .bg-blob-blog {
    background-image: url(../images/bg-blob.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-position-x: 0px;
    height: 280px;
    width: 280px;
    position: absolute;
    top: 50px;
    /* border: 1px solid white; */
    right: 0;
    z-index: 10;
    display: block;
}


.blog-section-main {
    position: relative;
}

.bg-blog-blob {
    background-image: url(../images/blob-orange.png);
    background-size: 500px auto;
    background-position: left;
    background-repeat: no-repeat;
}

.blogs-content {
    position: relative;
    text-align: center;
    z-index: 1;
}

.blogs-content::before {
    content: "OUR BLOGS";
    /* Background text */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -36%);
    font-size: 140px;
    /* Adjust size */
    font-weight: bold;
    color: #dfdfdf14;
    /* Light/faded effect */
    z-index: -1;
    /* Ensure it stays behind */
    white-space: nowrap;
    /* Prevent text wrapping */
    text-transform: uppercase;
}


.heading-top-blogs {
    padding-left: 0px;
}

.heading-top-blogs::before {
    left: 550px;
}

.heading-top-blogs::after {
    content: "";
    display: block;
    width: 35px;
    height: 8px;
    background: linear-gradient(87deg, #FF6A00 0%, rgba(153, 64, 0, 0) 100%);
    position: absolute;
    top: 5px;
    right: 0;
}

.heading-top-blogs::after {
    right: 550px;
}

.blogs-content .heading {
    width: fit-content;
    font-weight: 700;
    font-size: 45px;
    line-height: 50px;
    background: linear-gradient(252.92deg, #FFFFFF 53.44%, #FF6A00 91.31%);
    -webkit-background-clip: text;
    color: transparent;
    margin: auto;
}



.blog-card {
    position: relative;
    overflow: hidden;
    /* Ensures the image does not overflow */
}

.blog-card .blog-btn svg path {
    transition: stroke 0.4s ease-out;
    /* Slows down the stroke color change */
}

.blog-card:hover .blog-btn svg path {
    stroke: var(--primary-color);
}

/* 
.blog-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.95) 100%);
} */

.card-img-overlay {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--bs-card-img-overlay-padding);
    border-radius: var(--bs-card-inner-border-radius);
}

.blogs-small-label {
    background-color: var(--primary-color);
    padding: 4px 13px;
    font-size: 13px;
}

.blogs-small-label {
    position: relative;
    display: inline-block;
    transform: translateX(-100%);
    /* Initially hidden to the left */
    opacity: 0;
    /* Hide it */
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    /* Smooth transition */
}

.blog-card:hover .blogs-small-label {
    transform: translateX(0);
    /* Move to original position */
    opacity: 1;
    /* Make it visible */
}


.blog-card .card-title {
    margin-top: 15px;
}

.card-date-auther {
    /* display: flex; */
    gap: 20px;
    padding-top: 20px;
}

.card-date-auther .blog-date,
.card-date-auther .blog-auther {
    display: flex;
    /* align-items: center; */
    gap: 8px;
}

.card-date-auther .blog-date img,
.card-date-auther .blog-auther img {
    height: 15px;
}

.card-date-auther .blog-date p,
.card-date-auther .blog-auther p {
    padding: 0;
    margin: 0;
    font-size: 13px;
}

.card-date-auther .blog-auther p {
    width: 80%;
}

.blog-btn-main {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 9;
}

.blog-btn-main .blog-btn {
    border: 1px solid white;
    padding: 20px;
    border-radius: 50%;
}

.arrow-right {
    transform: rotate(270deg);
    height: 9px;
    width: 24px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 17px;
    left: 9px;

}

.view-all-btn {
    text-align: end;
    margin: 0 0 10px;
}

.view-all-btn a {
    text-decoration: none;
    color: #fff;
}

.blog-card {
    position: relative;
    overflow: hidden;
    /* Ensures the image does not overflow */
}

.blog-card .card-img {
    transition: transform 0.8s ease-in-out;
    /* Smooth transition effect */
    display: block;
    height: 350px;
    width: 100%;
    object-fit: cover;
}
.blog-card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgb(0 0 0 / 30%); /* adjust darkness */
    z-index: 1;
}
.blog-card:hover .card-img {
    transform: scale(1.3);
    /* Zooms in the image */
}



/* Ensure the overlay remains fixed */
.top-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
  130deg,
  rgba(0, 0, 0, 0.70) 9%,
  rgba(61, 61, 61, 0.25) 64%,
  rgba(45, 42, 42, 0.8) 100%
);
    z-index: 1;
    /* Keeps the overlay above the image */
    transition: opacity 0.3s ease-in-out;
}

/* Optional: Ensure text content remains on top */
.card-img-overlay {
    position: absolute;
    z-index: 2;
    width: 100%;
    padding: 30px 30px 30px 0px;
    overflow: hidden;
    margin: 0 0 0 20px;
}

.team-img-wrapper {
    height: 420px;
}

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

/* Mobile responsive height */
@media (max-width: 768px) {
    .team-img-wrapper {
        height: 300px;
    }
}

.our-team-para {
    font-size: 17px;
    line-height: 30px;
    font-weight: normal;
    color: #fff;
    margin: 0;
}

.last-paragraph-no-margin {
    color: #b8b8b8;
}

/* blogs end */

/* contact */

.contact-content-top::before {
    content: "CONTACT US" !important;
}

.form-label {
    color: #fff;
}

.form-control,
.form-select {
    background-color: #232323;
    border: none;
    border-radius: 0px;
    padding: 11px 24px;
    color: #fff;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
    color: #ffffffa9 !important;
    opacity: 1;
    font-weight: 200;
    font-size: 16px;
}

.form-control:focus {
    color: #fff;
    background-color: #232323;
    border-color: none;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.form-select {
    color: #fff;
    -webkit-appearance: none;
    /* For Safari */
    -moz-appearance: none;
    /* For Firefox */
    appearance: none;
    /* For modern browsers */
    background-image: url('../images/arrow-down.svg');
    /* Your SVG */
    background-position: right 10px center;
    /* Position the icon */
    background-repeat: no-repeat;
    /* Don't repeat the image */
    padding-right: 30px;
    /* Space for the arrow */
    font-size: 16px;
    /* Optional: Adjust font size */
}

.contact-content {
    /* display: flex; */
    flex-direction: column;
    height: 100%;
    justify-content: center;
    gap: 22px;
    padding-left: 50px;

}

.bg-grid {
    background-image: url(../images/bg-grid.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 570px 442px;
    background-position-x: 318px;
}

.bg-blob {
    background-image: url(../images/bg-blob.svg);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 720px 557px;
    background-position-y: -57px;
    background-position-x: 698px;
}

.sm-text {
    font-size: 12px;
}

.contact-image {
    position: relative
}

.contact-image .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(196.43deg, rgba(0, 0, 0, 0) 25.47%, rgba(0, 0, 0, 0.5) 54.47%, rgba(0, 0, 0, 0.745901) 72.69%, rgba(0, 0, 0, 0.95) 90.73%);
    z-index: 1;
    /* Place the overlay above the image */
}

.on-image-text {
    position: absolute;
    z-index: 999;
    bottom: 40px;
    left: 47px;
    color: #fff;
}

.gradiant-text {
    background: linear-gradient(252.92deg, #FFFFFF 53.44%, #FF6A00 91.31%);
    -webkit-background-clip: text !important;
    color: transparent !important;
    font-size: 24px;
    font-weight: 600;
}

.on-image-text p {
    font-weight: lighter;
}

.contact-container-bg-color {
    background: linear-gradient(270deg, #101010 62%, #000000 100%);

}

.margin-top-bottom {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* contact end */

/* footer */

.footer-content .logo-footer {
    /* width: 100%; */
    height: 60px;
}

.footer-section {
    padding: 60px 0 10px;
}

.footer-content div p {
    line-height: 28px;
    font-size: 14px;
    text-align: justify;
}

.links ul,
.services-list ul,
.connect ul {
    list-style: none;
    padding: 0;
    line-height: 35px;
}

.links h4,
.services-list h4,
.connect h4 {
    font-size: 16px;
}

.links ul li a,
.services-list ul li a,
.connect ul li a {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
}

.links h4,
.services-list h4,
.connect h4 {
    position: relative;
    padding-bottom: 12px;
}

.links h4::after,
.services-list h4::after,
.connect h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30%;
    height: 3px;
    /* Thickness of the underline */
    background-color: #ff6a00;
    /* Color of the underline */
}


.footer-social-icons {
    display: flex;
    width: 100%;
    gap: 11px;
    flex-wrap: wrap;
}

.footer-social-icons img {
    width: 45px;
    height: 45px;
    padding: 4px;
    background-color: #2B2B2B;
    border-radius: 50%;
    object-fit: none;
    transition: 0.4s all ease-in-out;
}

.footer-social-icons img:hover {
    background-color: var(--primary-color);
}

/* .footer-container-bg-color {
    background-color: #191919;
} */

.footer-container-bg-color {
    background-color: #191919;
    /* Fallback background color */
    background-image: url('../images/footer-shape-1.png');
    /* Add your image URL */
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
}


.privacy-condition a,
.copyright-text p {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
}

.footer-bottom {
    border-top: 0.8px solid #313131
}

.footer-section ul li a {
    transition: 0.4s all ease-in-out;
}

.footer-section ul li a:hover {
    color: var(--primary-color);
}

.footer-bottom a {
    transition: 0.4s all ease-in-out;
}

.footer-bottom a:hover {
    color: var(--primary-color);
}

/* footer end */


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


/* blog-page */

.top-banner-blogs {
    background-image: url("../images/blog-banner.jpg");
}

/* Overlay Effect */
.top-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right top, #1f2021, #1b1d1c, #1b1d1c, #222523, #333c37);
    opacity: 0.5;
    /* Adjust overlay transparency */
    z-index: -1;
    /* Place below content */
}

.top-banner h2 {
    color: #fff;
    font-size: 3.2rem;
    line-height: 3.2rem;
}

.top-banner span {
    color: #fff;
    font-size: 1rem;
}

.blog-page-content {
    margin-bottom: 30px;
}

.blog-page-heading {
    color: #fff;
    font-size: 40px;
    margin-bottom: 15px;
}

.blog-page-subheading {
    color: #fff;
    font-size: 20px;
    margin-bottom: 15px;

}

.blog-page-text {
    color: #fff;
    font-size: 16px;
}

/* blog-page end */

/* blog details page */

.top-banner-blog-details {
    background-image: url("../images/mychoice.svg");
}

.top-blogs-banner-image {
    background-image: url("../images/blogs-banner-image.png");
}

.top-banner-watchlist-details {
    background-image: url("../images/watchlist.jpg");
}

.top-banner-ezysweep-details {
    background-image: url("../images/portfolio2.png");
}

.blog-details-page .card-date-auther {
    display: flex;
    gap: 20px;
    padding-top: 20px;
    justify-content: center;
    color: white;
}

.blog-details-page-cards {
    margin: 30px 0;
    color: #fff;
}

.blog-details-side-padding {
    padding: 0 100px;
}

.blog-category {
    color: #f8711e;
    font-size: 22px;
    font-weight: 600;
}

.blog-details-page .card-date-auther .blog-auther p {
    width: 100%;
}

/* blog details page end */

/* contact page */
.top-banner-contact {
    background-image: url("../images/content_us.jpg");
}

.top-about-banner {
    background-image: url("../images/portfolio6.jpg");
}

.blog-para-content {
    font-weight: 700;
    font-size: 30px;
    line-height: normal;
    /* background: linear-gradient(252.92deg, #FFFFFF 53.44%, #FF6A00 91.31%); */
    -webkit-background-clip: text;
    color: white;
    text-transform: capitalize;
    padding-top: 10px;
}

.map {
    padding: 0;
    margin: 0;
    line-height: 0;
}

.contact-cards .para {
    height: 100%;
    display: flex;
    align-items: center;
}

.contact-small-cards span {
    font-size: 14px;
    color: #fff;
    /* width: 75%; */
}

.contact-small-cards .contact-small-cards p,
.contact-small-cards a {
    font-size: 14px;
    text-decoration: none;
    color: #b8b8b8;
    line-height: 30px;
}

.contact-small-cards a:hover {
    .contact-small-cards p,
    .contact-small-cards a color: var(--primary-color);
}
/* Default stays same (desktop untouched) */


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

    .contact-small-cards .col-12 {
        margin-bottom: 15px;
    }

    .contact-small-cards .mb-5 {
        background: #1a1a1a;
        border: 1px solid #2e2e2e;
        border-radius: 10px;
        padding: 18px 16px !important;
        text-align: center !important;
        margin-bottom: 0 !important;
    }

    .contact-small-cards span {
        font-size: 15px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8px;
        border-bottom: 1px solid #333 !important;
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }

    .contact-small-cards p,
    .contact-small-cards a {
        font-size: 13px;
        line-height: 22px;
    }

    .contact-small-cards .card-desc div {
        font-size: 12px;
        color: #9a9a9a;
        margin-top: 5px;
    }
    .margin-top-bottom{
        padding-top: 0px;
    }
    
}
.our-team-images {
    height: 350px !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* contact page end */

/* privacy policy */
.privacy-policy {
    /* padding: 35px 30px;
    border: 1px solid #79797957; */
    margin: 0px;
}

.privacy-policy .list-item {
    padding-top: 20px;
    color: #fff;
}

.privacy-policy .list-item li {
    list-style: circle;
    font-size: 14px;
}

.privacy-policy .pp-page-heading {
    color: #fff;
    font-size: 2.2rem;
}


/* privacy policy end */

/* about page */

.about-content-top::before {
    content: "ABOUT US" !important;
}

.about-page .about-content {
    padding-left: 30px;
}

.feature-icon {
    color: white;
    font-size: 40px;
}

.about-small-cards {
    color: #fff;
}

.feature-box-content {
    margin-top: 20px;
}

.feature-box {
    text-align: center;
}


/* Style for the feature box */
.feature-box {
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px;
}

.feature-box:hover {
    transform: translateY(-10px);
    /* Slight hover effect */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    /* Darker shadow on hover */
}

/* Style for the icon */
.feature-box-icon {
    text-align: center;
    background-color: #007BFF;
    padding: 15px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
}

.feature-box-icon i {
    color: #fff;
    font-size: 15px;
}

/* Style for the content */
.feature-box-content {
    text-align: center;
    color: #333;
    font-size: 16px;
    font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .feature-box {
        padding: 15px;
    }

    .feature-box-icon {
        width: 40px;
        height: 40px;
    }

    .feature-box-content {
        font-size: 14px;
    }
}

.about-page .img-group {
    height: 550px;
}

.industry-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
}
.card-client {
        background: linear-gradient(181deg, #0f0f0f 0%, #222020 40%, #161515 75%, #2b2828 100%);
    padding: 24px 18px;
    border: 1px solid #2e2e2e;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    font-family: "Poppins", sans-serif;
    transition: all 0.3s ease;
    height: 100%;
}

.country-code {
    width: 70px;
    max-width: 95px;
    flex: 0 0 70px;
    font-size: 13px;
}

.card-client:hover {
    transform: translateY(-10px);
    border: 2px solid #ff6a0029;
}

.card-text {
    color: white;
}

.user-picture {
    overflow: hidden;
    object-fit: cover;
    width: 5rem;
    height: 5rem;
    border: 4px solid #fff;
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.user-picture svg {
    width: 2.5rem;
    fill: currentColor;
}

.name-client {
    margin: 0;
    margin-top: 20px;
    font-weight: 600;
    font-size: 18px;
    min-height: 110px;
}

.name-client span {
    display: block;
    font-weight: 200;
    font-size: 16px;
}

.name-client .sub-text {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #e6e3e3;
}

.card-client:hover .user-picture {
    overflow: hidden;
    object-fit: cover;
    width: 5rem;
    height: 5rem;
    border: 3px solid #c36726;
}

.our-team-content::before {
    content: "OUR TEAMS";
}

.teams-card .card figcaption {
    transition: background-color 0.4s ease;
}

.teams-card .card:hover figcaption {
    background-color: #000;
}

.teams-card .card:hover figcaption h4 {
    color: #fff;
}

.teams-card .card:hover figcaption p {
    color: rgb(214, 214, 214) !important;
}

.about-why-choose .accordion-item {
    padding: 11px 6px;
    margin-bottom: 23px;
    border: 1px solid #6e6e6e;
}

.accordion-flush>.accordion-item:first-child {
    border-top: 1px solid #6e6e6e;
}

.accordion-flush>.accordion-item:last-child {
    border-bottom: 1px solid #6e6e6e;
}

/* Style for the arrow image */
.top-arrow {
    width: 20px;
    /* Adjust size of the arrow */
    margin-right: 10px;
    /* Space between arrow and text */
    transition: transform 0.3s ease-in-out;
    /* Smooth transition for rotating the arrow */
}

/* Rotate arrow when the accordion is expanded */
.accordion-button:not(.collapsed) .top-arrow {
    transform: rotate(180deg);
}

/* Additional optional styling */
.accordion-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Align text and arrow */
}

/* about page end */


/* service-details start */

.service-details-left-card {
    background: #fff;
    padding: 45px;
    border-radius: 6px;
    margin-bottom: 25px;
}

.service-details-left-card h5 {
    font-size: 19px;
    font-weight: 700;
    color: #000;
    margin-bottom: 35px;
}

.service-details-left-card ul {
    list-style: none;
    padding: 0;
}

.service-details-left-card ul li {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}

.service-details-left-card ul li:last-child {
    padding-bottom: 0;
}

.service-details-left-card ul li a {
    text-decoration: none;
    color: #878898;
}

.service-details-left-card ul li a:hover {
    color: #000;
}

.service-details-left-card ul li a.active {
    color: #000;
}

.service-details-left-card ul li a i.active {
    color: #000;
}


.service-left-side-call-card .feature-box {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 15px 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.service-left-side-call-card .feature-box-icon {
    text-align: center;
    background-color: var(--primary-color);
    padding: 15px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-left-side-call-card .feature-box-content {
    margin-top: 0px;
}

.service-left-side-call-card .feature-box-content span:last-child a {
    text-decoration: none;
    color: #000;
}

.service-left-side-call-card .feature-box:hover {
    transform: translateY(-5px);
}

.service-detail-card-main .service-details-img {
    width: 100%;
    height: 100%;
    max-height: 550px; /* control max size */
    object-fit: cover;
}

.benifit-card-service-details .bg-light-color {
    background-color: #3f3f3f;
}

.benifit-card-service-details .border-bottom,
.benifit-card-service-details .border {
    border-color: #545454 !important;
}

.benifit-card-service-details .border {
    /* border-radius: 5px; */
}

.service-details-left-card i {
    color: #878898;
}

.sticky-bar-service-details {
    position: sticky;
    top: 100px;
    margin-bottom: 20px;
    /* adjust based on your header height or spacing */
    z-index: 1;
    /* ensure it stays above other content if needed */
}


/* Container for the cards */
.service-small-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
    gap: 20px;
    padding: 10px 0;
}



/* Individual service card styling */
.service-small-cards .service-card {
    border: 1px solid #898989;
    padding: 15px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: linear-gradient(341deg, rgba(0, 0, 0, 1) 0%, rgba(56, 56, 56, 1) 100%);
}

.service-small-cards .service-card h4 {
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 10px;
    min-height: 43px;
    padding-bottom: 10px;
    border-bottom: 1px solid #495057;
}

.service-small-cards .service-card p {
    font-size: 0.9rem;
    color: #c9c9c9;
}

/* Hover effect for cards */
.service-small-cards .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .service-small-cards .service-small-cards {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

.active-text {
    color: var(--primary-color) !important;
}

.service-details-tech-logo .tech-images .card-border {
    border: 0.6px solid #3F3F3F;
    /* margin-top: 20px; */
}

.service-details-tech-logo .tech-images img {
    height: 100px;
    width: 100%;
    padding: 5px;
    object-fit: contain;
}
.industries-section {
    padding: 20px 0;
    background-color: #000000;
    text-align: center;
}

.industries-section .section-title {
    font-size: 2rem;
    margin-bottom: 40px;
    color: #fff;
    font-weight: 600;
    text-align: start;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

/* CARD */
.industry-card {
    padding: 20px 16px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 500;
    color: #ffffff;
    transition: all 0.3s ease;
    cursor: default;
    background: linear-gradient(341deg, rgba(0, 0, 0, 1) 0%, rgba(56, 56, 56, 1) 100%);
    
    display: flex;
    align-items: center;
    gap: 15px; /* space between circle & text */
}

/* PERFECT CIRCLE */
.circle-number {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    /* background: #0d6efd; */
    color: #fff;

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

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

    flex-shrink: 0; /* prevents shrinking */
}

/* TEXT */
.industry-card p {
    margin: 0;
}

/* HOVER */
.industry-card:hover {
    transform: translateY(-5px);
    /* box-shadow: 0 8px 16px rgba(0, 123, 255, 0.2); */
}

.service-detail-card-main .heading {
    font-size: 32px;
    line-height: 45px;
}


.services-heading-top::before {
    content: "SERVICE" !important;
}


/* service-details end */

.service-1-top-banner-blog-details {
    background-image: url(../images/software-development.png);
}

.service-2-top-banner-blog-details {
    background-image: url(../images/App-Development.png);
}

.service-3-top-banner-blog-details {
    background-image: url(../images/Web-Development.png);
}

.service-4-top-banner-blog-details {
    background-image: url(../images/Ai-Servicess.png);
}

.service-5-top-banner-blog-details {
    background-image: url(../images/IOT-Solutions.png);
}

.service-6-top-banner-blog-details {
    background-image: url(../images/PM-IT-Consultancy.png);
}


.service-details-left-card {
    padding: 45px;
    border-radius: 0px;
    margin-bottom: 25px;
    border: solid #ffffff78 1px;
    background: linear-gradient(341deg, rgba(0, 0, 0, 1) 0%, rgba(56, 56, 56, 1) 100%);
}

.service-details-left-card h5 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 35px;
    background-color: #ff6a00;
    /* background: linear-gradient(252.92deg, #FFFFFF 53.44%, #FF6A00 91.31%); */
    -webkit-background-clip: text;
    color: transparent;
}

.service-details-left-card ul li a.active {
    color: #ff6a00;
}

.service-details-left-card ul li:hover a {
    color: #ff6a00;
}

.service-details-left-card ul li:hover i {
    color: #ff6a00 !important;
}

i.active-icon {
    color: #ff6a00;
}

.service-left-side-call-card .feature-box {
    border-radius: 0px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 15px 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(282deg, #FFFFFF -6.56%, #FF6A00 91.31%);
}

.service-left-side-call-card .feature-box-icon {
    text-align: center;
    background-color: #ffffff;
    padding: 15px;
    width: 40px;
    height: 40px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-box-icon i {
    color: #ff6a00;
    font-size: 15px;
}

.gradiant-effect {
    background: linear-gradient(341deg, rgba(0, 0, 0, 1) 0%, rgba(56, 56, 56, 1) 100%);
}

/* scroll to top start */
.scroll-to-top {
    position: fixed;
    bottom: 35px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 24px;
    color: white;
    background-color: #00000045;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    /* hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease-in-out;
}

.scroll-to-top:hover {
    background-color: #555;
}

/* scroll to top end */


/* for bugs */


.blob-image {
    position: absolute;
    top: -122px;
    left: -331px;
    width: 599px;
    height: 488px;
    background-image: url(../images/blob-orange.svg);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    z-index: 0;
}

.faq-bg-blob {
    position: absolute;
    top: 0;
    left: 0px;
    width: 48%;
    height: 200px;
    background-image: url(../images/faq-bg-blog.svg);
    background-size: cover;
    /* background-position: center; */
    background-repeat: no-repeat;
    z-index: 0;
}

/* for bugs end */

/* navbar toggler */
.navbar-toggler {
    background-color: transparent;
    border: var(--bs-border-width) solid #ffffff6e;
    border-radius: 0;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* navbar toggler */


.teams-card .card {
    border-radius: 0px !important;
}

.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none;
}

.blog-card {
    margin-bottom: 20px;
}

.country-code::-webkit-scrollbar {
    width: 2px;
}

@media (min-width:1200px) and (max-width:1600px)
{
.banner-heading
  {
    font-weight: 700;
    font-size: 60px;
    line-height: 60px;
    background: linear-gradient(252.92deg, #FFFFFF 53.44%, #FF6A00 91.31%);
    -webkit-background-clip: text;
    color: transparent;
}

.home-img{
    /* height: 90vh; */
}
 
}


.top-about-banner .overlay{
 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient( 325deg, rgba(0, 0, 0, 0.5) 9%, rgba(0, 0, 0, 0.5) 64%, rgba(0, 0, 0, 0.95) 100%);
  
  z-index: 1;
  transition: opacity 0.3s ease-in-out;

}

@media (max-width:576px){
    .service-small-cards {

    grid-template-columns: 1fr;
 
}

}


.card-desc{
    font-size: 14px;
}


.pt-112{
    padding-top: 112px !important;
}