/*Header*/
    .nav-menu>li>a{
        color: var(--secondary-color) !important;
    }
    /*End of Header*/
    section.services-section.e-side-space.animated.fadeInUp {
        animation-duration: 2s;
        animation-delay: 10s;
    }
    .home-page {
        width: 100%;
        overflow: hidden;
    }
    .home-page p {
        color: #717171;
    }
    .e-side-space {
        margin-left: 17%;
        margin-right: 17%;
    }
    .home-page .side-space {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .description .svg-icon {
        width: 24px;
        height: 24px;
    }
    section .header{
        margin-bottom: 20px;
    }
    .header{
        display:grid;
        justify-items: center;
        gap:10px;
    }   
    .section-title {
        text-align:center;
    }
    .section-title h2{
        margin:0 !important;
    }
    .first-section-card {
        margin-top: 100px;
        background: linear-gradient(90deg, rgb(154, 217, 251), rgb(243, 243, 243), rgb(219, 183, 255));
        height: 500px;
        width: 100%;
        border-radius: 20px;
        position: relative;
        display: grid;
        align-items: center;
        justify-items: center;
        align-content: center;
    }
    .first-section-card .white-section {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgb(255, 255, 255));
        width: 100%;
        height: 500px;
        position: absolute;
        bottom: 0;
    }
    .first-section-card .content {
        display: grid;
        justify-items: center;
        z-index: 100;
        gap: 20px;
        margin: 0 8%
    }
    .first-section-card .content-center {
        display: grid;
        justify-items: center;
    }
    .first-section-card .web-count {
        padding: 0 30px;
        border: 1px solid gray;
        color: gray;
        border-radius: 10px;
    }
    .first-section-card .tag-line {
        font-size: 40px;
        max-width: 100%;
        text-align: center;
        color: black;
        font-weight: 800;
    }
    .first-section-card .tilted-box {
        font-size: 30px;
        min-width: 250px;
        border: 3px solid #a2d5f6;
        background-color: blue;
        text-align: center;
        font-weight: 800;
        color: white;
        border-radius: 10px;
        padding: 3px 25px;
        transform: rotate(-4deg);
        transform-origin: center;
        /* Adjust the rotation point */
    }
    /* Fade-in animation */
    @keyframes fade-in {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .first-section-card .content-center.fade-in {
        animation: fade-in 1s ease forwards;
    }
    .first-section-card .text-box.fade-in {
        animation: fade-in 1s ease forwards;
    }
    .first-section-card p {
        width: 50%;
        text-align: center;
    }
    .first-section-card .quote-btn span {
        background: #c8cad0;
        color: #707070;
        border-radius: 4px;
        padding: 2px 8px;
    }
    .first-section-card .quote-btn:hover span {
        background: rgb(255, 255, 255);
        color: rgb(0, 0, 0);
    }
    /* second section css (cards) */
    .second-section {
        display: flex;
        align-items: center;
        gap: 20px; 
    }
    .second-section .cards-container {
        display: flex;
        scroll-behavior: smooth;
        padding-bottom: 10px;
        --bs-gutter-x: unset;
        --bs-gutter-y: 15px;
        cursor: grab;
    }
    .second-section .card {
        width: 100%;
        height: 360px;
        background: #f3f3f5;
        border: 1px solid #c8cad0;
        border-radius: 15px;
        padding: 20px 20px 0 20px;
        gap: 6px;
        position: relative;
        flex: 0 0 auto;
        overflow: hidden;
        transition: all 0.5s ease-in;
    }
    .second-section .text-box {
        min-height: 90px;
        margin-bottom: 8px;
    }
    /* link button css */
    .second-section .link-btn{
        position: relative;
        border: 2px solid #c8cad0;
        background:transparent;
        display:flex;
        align-items:center;
        color: #707070;
        border-radius: 5px;
        cursor: pointer;
        height:30px;
        width:28px;
        transition:all 1s ease;
        overflow:hidden;
    }
    .second-section .link-btn span{
        position:absolute;
        left:-80px;
        opacity:0;
        width:90px;
        text-align:left;
        transition:all 1s ease;
    }
    .second-section .link-btn svg{
        position: absolute;
        right:3px;
        width:18px;
        height:18px;
    }
    .second-section .link-btn svg path{
        fill:#707070;
    }
    .second-section .card .url{
        width:fit-content;
    }
    .second-section .card .url:hover .link-btn{
        background:#c8cad0;
    }
    .second-section .card .url:hover .link-btn span{
        font-weight:500px;
        color:#fff;
    }
    .second-section .card .url:hover .link-btn svg path{
        fill:#fff;
    }
    .second-section .card:hover .link-btn{
        width:100px;
    }
    .second-section .card:hover .link-btn span{ 
        left:4px;
        opacity:1;
    }
    /* web-dev card css */
    .second-section .first-card {
        padding-bottom: 0;
    }
    .second-section .first-card .img-container {
        position: relative;
        height: 200px;
        z-index: 100;
        overflow: hidden;
    }
    .second-section .first-card .img-container img{
        position: absolute;
        top: 0px;
        width: 100%;
        transition:all 3s ease;
    }
    .second-section .first-card:hover .img-container img{
        transform: translateY(-65%);
    }
    /* smm card css */
    .second-section .smm-card img {
        position: absolute;
        bottom: 0;
        max-height: 170px;
        left: 50%;
        translate: -50%;
        transition:opacity 0.3s ease;
    }
    .second-section .smm-card .smm-img2 {
        opacity:0;
    }
    .second-section .smm-card:hover .smm-img2 {
        opacity:1;
    }
    .second-section .smm-card:hover .smm-img1 {
        opacity:0;
    }
    /* third card */
    .second-section .third-card img {
        max-height: 210px;
    }
    .second-section .third-card .img-container {
        position: relative;
    }
    .second-section .third-card .img-container img {
        position: absolute;
        width: 95%;
        height: 120px;
        transition: all 0.4s ease;
        transform-origin: center;
    }
    .second-section .third-card .img-container .img1 {
        z-index: 1;
        transform: translate(-5px, 0px);
    }
    .second-section .third-card .img-container .img2 {
        z-index: 0;
        transform: translate(20px, 20px);
    }
    .second-section .third-card:hover .img-container .img1 {
        z-index: 0;
        transform: translate(20px, 20px);
    }
    .second-section .third-card:hover .img-container .img2 {
        z-index: 10;
        transform: translate(-5px, 0px);
    }
    /* fourth card */
    .second-section .fourth-card .img-container img {
        width: 100%;
        height: 175px;
        transition: all 0.4s ease;
        transform-origin: center;
    }
    .second-section .fourth-card .img-container {
        position: relative;
    }
    .second-section .fourth-card .img-container .img1 {
        position: absolute;
        transform: translateX(-7%);
    }
    .second-section .fourth-card .img-container .img2 {
        position: absolute;
        transform: translateX(95%);
    }
    .second-section .fourth-card:hover .img-container .img1 {
        transform: translateX(-97%);
    }
    .second-section .fourth-card:hover .img-container .img2 {
        transform: translateX(7%);
    }
    /* backlink-card */
    .second-section .backlink-card img {
        position: absolute;
        bottom: 0;
        height: 235px;
        left: 25px;
        transition:opacity 0.3s ease;
    }
    .second-section .backlink-card .bl1{
        left:32px;
    }
    .second-section .backlink-card .bl2{
        opacity:0;
    }
    .second-section .backlink-card:hover .bl1{
        opacity:0;
    }
   .second-section .backlink-card:hover .bl2{
        opacity:1;
    }
    /* cloud card css */
    .second-section .cloud-card img {
        position: absolute;
        bottom: 10px;
        left: 50%;
        translate: -50%;
        width:95%;
        opacity:0;
        max-height: 235px;
        transition: opacity 1s ease;    
    }
    .img-container img.active {
        opacity: 1; /* Only the active image is visible */
    }
    /* Gmb cards */
    .second-section .gmb-card .img-container {
        position: relative;
        height: 180px;
        z-index: 100;
        overflow: hidden;
    }
      /* third section css */
    .third-section .page-subtitle {
        display: flex;
        justify-content: center;
    }
    .client-sec {
        position: relative;
    }
    .client-sec .owl-carousel .owl-item img {
        width: 70%;
        height: auto;
        cursor: pointer;
        filter: grayscale(100%) contrast(200%);
        transition: all 0.5s ease;
    }
    .client-sec .owl-carousel .owl-item img:hover {
        filter: none;
        transform: scale(1.1);
    }
    .client-sec .left-blur {
        position: absolute;
        background: linear-gradient(90deg, #ffffff, #ffffff00, #ffffff00);
        width: 100px;
        height: 100%;
        z-index: 98;
        left:-1px
    }
    .client-sec .right-blur {
        position: absolute;
        background: linear-gradient(90deg, #ffffff00, #ffffff00, #ffffff);
        opacity: 1;
        width: 100px;
        height: 100%;
        z-index: 98;
        right: -2px;
        top: 0;
    }
    /* feedback section css */
    .feedback-section .header {
        display: grid;
        justify-items: Center;
    }
    .feedback-section .header p {
        width: 500px;
        text-align: center;
        color:var(--primary-color) !important;
    }
    .feature-section .header p {
        color:var(--primary-color) !important;
    }
    .feedback-section .cards-container {
        display: flex;
    }
    .cards-container .feedback-cards {
        padding: 30px;
        height: 400px;
        width: 500px;
        border: 1px solid #cecece75;
        border-radius: 15px;
        display: grid;
        align-content: space-between;
        margin-right: 20px;
    }
    .cards-container .feedback-cards .content p {
        margin-bottom: 5px;
    }
    /* Define gradients */
    .gradient1 {
        background: linear-gradient(180deg, #f1f4f8, #ffff);
    }
    .gradient2 {
        background: linear-gradient(180deg, #fbf5f4, #ffff);
    }
    .gradient3 {
        background: linear-gradient(180deg, #fdfbf2, #ffff);
    }
    .gradient4 {
        background: linear-gradient(180deg, #f2fbf7, #ffff);
    }
    .gradient5 {
        background: linear-gradient(180deg, #fbf4fd, #ffff);
    }
    .gradient6 {
        background: linear-gradient(180deg, #f5ecec, #ffff);
    }
    .feedback-cards .user-detail {
        display: grid;
    }
    .feedback-cards .user-detail p {
        margin: 0;
    }
    .feedback-section #feedback-carousel-new.cards-container {
        display: flex;
    }
    .feedback-section #feedback-carousel-new.cards-container .feedback-cards {
        min-width: 500px;
    }
    div#testimonial-slide {
        overflow-x: hidden;
    }
    /* table animation section */
    .table-animation .bg-table {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        overflow: hidden;
        position: relative
    }
    .table-animation table {
        width: 100%;
        border-collapse: collapse;
        height: 100%;
        table-layout: fixed;
    }
    .table-animation .first-row {
        color: transparent;
    }
    .table-animation .bg-table td {
        border: 1px solid #ccc;
        vertical-align: middle;
        padding: 8px;
        height: 40px;
        opacity: 0.3;
        color: #595b60;
        font-size: 12px;
        width: 250px;
        transition: opacity 0.3s ease;
    }
    .table-animation .bg-table .fixed-col {
        width: 250px;
    }
    .table-animation .bg-table .dynamic-col {
        width: auto;
        color: transparent;
    }
    .bg-table .modal-overlay {
        width: 100%;
        height: 100%;
        background: #ffffff00;
        position: absolute;
        display: grid;
        align-items: center;
        justify-items: center;
    }
    .bg-table .modal-overlay .text-box {
        width: 498px;
        background: #fff;
        height: 240px;
        display: grid;
        padding: 30px;
        justify-items: center;
        gap: 10px;
        align-content: center;
    }
    .modal-overlay .text-box h2 {
        font-size: 32px;
        text-align: center;
        line-height: 37px;
    }
    .modal-overlay .text-box p {
        text-align: center;
        color: #575655;
    }
    /* country slider css */
    .country-slider {
        position: relative;
    }
    .country-slider .slider-box {
        display: flex;
        align-items: center; /* Vertically align flags */
        gap: 20px;
        white-space: nowrap;
        transform:translateX(-95%);
    }
    .country-slider .arrow-box {
        flex-shrink: 0; /* Prevents arrow box from shrinking */
        width: 100%; 
        background:#9ad9fb;
        display:flex;
        height: 90px;
        align-items:center;
        justify-content:flex-end;
        border-radius: 0 50rem 50rem 0;
        position:relative;
    }
    .country-slider .arrow-box span{
        font-size: 25px;
        font-weight: 500;
        margin-right: 100px;
    }
    .country-slider .arrow-icon{
        position:absolute;
        right:0;
        top:0;
        width:90px;
    }
    .country-slider .country-container {
        display: flex;
        gap: 10px;
        overflow-x: visible;
    }
    .country-slider .flag {
        width: 90px;
        height: 90px;
        flex-shrink: 0;
    }
    /* fourth (counter section) */
    .fourth-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    .counter-section p {
        max-width: 300px;
        padding-bottom: 30px;
    }
    .counter-section .counters {
        display: grid;
        padding-bottom: 20px;
    }
    .counter-section .counters .sub-title {
        font-size: 25px;
        font-weight: 700px;
        color: gray;
    }
    .counter-section .counters .counter-count {
        font-size: 40px;
        color: #fb923c;
    }
    /* feature section */
    .feature-section {
        display: grid;
        justify-items: center;
    }
    .feature-section .header {
        display: grid;
        justify-items: Center;
    }
    .feature-section .header p {
        width: 400px;
        text-align: center;
    }
    .feature-section .content-box {
        background: linear-gradient(90deg, rgb(154, 217, 251), rgb(243, 243, 243), rgb(219, 183, 255));
        padding: 50px 50px 0 50px;
        border-radius: 20px;
        position: relative;
        display: flex;
        gap: 20px;
        width:100%;
    }
    .feature-section .content-box .white-section {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgb(255, 255, 255));
        width: 100%;
        height:100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index:1;
    }
    .feature-section .content-box .points-container{
        z-index:10;
    }
    .feature-section .content-box .card-details{
        padding:10px;
    }
    .feature-section .description .svg-icon {
        width: 24px;
        height: 24px;
    }
    .second-section .gmb-card .gmb1 {
        position: absolute;
        opacity: 1;
        top: 0px;
        height: 160px;
        width: 100%;
        object-fit: contain;
    }
    @media screen and (min-width: 0px) and (max-width: 480px) {
        .second-section .first-card:hover .img-container img {
                transform: translateY(-80%);
            }
        }
    @media only screen and (min-width: 0px) and (max-width: 550px) {
        .second-section .first-card:hover .img-container img {
            transform: translateY(-83%);
        }
        .second-section .fourth-card .img-container img {
            height: 235px;
        }
        .second-section .smm-card img {
            bottom: 20px;
            max-height: 200px;
        }
        .second-section .first-card .img-container {
            height: 230px;
        }
        .second-section .third-card .img-container img {
            height: 200px;
        }
        .second-section .gmb-card .gmb1 {
            height: 200px;
        }
        .second-section .gmb-card .img-container {
            height: 200px;
        }
    }
    @media only screen and (min-width: 240px) and (max-width: 551px) {
        .e-side-space {
            margin-left: 5%;
            margin-right: 5%;
        }
        .section-title h2{
            font-size:22px;
        }
        .first-section-card .tag-line {
            font-size: 25px;
        }
        .first-section-card .tilted-box{
            font-size: 18px;
            min-width:150px;
            padding: 3px 10px;
        }
        .first-section-card p {
            width: 90%;
        }
        .fourth-section {
            flex-direction: column;
        }
        .client-sec .left-blur {
            left:-1px;
        }
        .client-sec .right-blur {
            right:-2px;
        }
        .client-sec .owl-carousel .owl-item img {
            width: auto;
            margin: auto;
            height: 90px;
        }
        .table-animation .bg-table td{
            font-size:10px;
        }
        .table-animation .bg-table .fixed-col {
            width: 150px;
        }
        .bg-table .modal-overlay .text-box {
            width: 299px;
            height: fit-content;
            padding: 15px;
            gap:5px;
        }
        .modal-overlay .text-box h2 {
            font-size: 23px;
            line-height: 28px;
        }
        .modal-overlay .text-box p {
            text-align: center;
            color: #575655;
        }
        .fourth-section .counter-section{
            display:grid;
            justify-items:center;
        }
        .fourth-section .counter-section p {
            width:100%;
            padding-bottom:10px;
            text-align:center;
        }
        .counter-section .counter-container{
            display:grid;
            justify-items:center;
            gap:20px;
        }
        .counter-section .counters {
            display: grid;
            justify-items:center;
        }
        .country-slider .slider-box {
            gap:10px;
        }
        .country-slider .country-container {
            gap: 5px;
        }
        .country-slider .arrow-box{
            height:50px
        }
        .country-slider .arrow-icon{
            width:50px;
        }
        .country-slider .flag {
            width: 50px;
            height: 50px;
        }
        .country-slider .arrow-box span {
            font-size:15px;
            font-weight:400;
            margin-right:55px;
        }
        .feature-section {
            justify-content: center;
        }
        .feature-section .header p {
            width: 80%;
            text-align: center;
        }
        .feature-section .content-box {
            padding: 20px 20px 0 20px;
        }
        .feature-section .content-box .white-section {
            height: 100%;
        }
        .feedback-section .section-title {
            width:80%;
        }
        .feedback-section .header p {
            width: 80%;
        }                   
        .feedback-section #feedback-carousel-new.cards-container .feedback-cards {
            min-width: 320px !important;
            width: 320px;
            padding: 10px
        }
    }
    @media only screen and (min-width: 1300px) {
        .home-page .side-space {
            margin-left: 8%;
            margin-right: 8%;
        }
        .second-section .fourth-card .img-container img {
            height: 220px;
        }
        .second-section .smm-card img {
            max-height: 240px;
        }
        .second-section .first-card .img-container {
            height: 230px;
        }
        .second-section .third-card .img-container img {
            height: 190px;
        }
        .second-section .gmb-card .gmb1 {
            height: 200px;
        }
        .second-section .first-card:hover .img-container img {
            transform: translateY(-72%);
        }
    }
    @media only screen and (min-width:1400px) {
        .home-page .side-space {
            margin-left: 12%;
            margin-right: 12%;
        }
    }
    @media only screen and (min-width:1600px) {
        .home-page .side-space {
            margin-left: 17%;
            margin-right: 17%;
        }
    }
.second-section .url{
    width:fit-content;
    text-decoration: none;
}
@media screen and (min-width: 992px){
    .second-section .cards-container {
        --bs-gutter-x: 20px;
        --bs-gutter-y: 20px;
    }
}