/* ---- General Body Section Start -----*/

* {
    margin: 0;
    padding: 0;
   
}

.row>* {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

p, img, a, button, hr, i ,h1, h2, span{
    user-select: none !important;
    -webkit-user-drag: none !important;
}

.firefly {
    position: absolute;
    background-color: black;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    width: 100vw;
    overflow: hidden;
}

.main-section {
    position: relative;
    overflow: hidden;
}

::-webkit-scrollbar {
    display: none;
}

/* ---- General Body Section End -----*/

/* ---- Floating Button -----*/
@media only screen and (min-width: 992px) {
    .messenger-box {
        position: fixed;
        bottom: 70px;
        right: 20px;
        cursor: pointer;
        z-index: 1000;
    }

    .messenger-box .arrow-container {
        position: absolute;
        top: -60px; /* Adjust based on the arrow and circle size */
        left: 50%;
        transform: translateX(-50%);
        width: 55px;
        height: 55px;
        background-color: black;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .messenger-box .arrow-up {
        width: 20px;
        height: 20px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid white; /* White arrow */
    }
}

@media only screen and (max-width: 991px) {
    .messenger-box {
        display: none;
    }
}


/* ---- Main  Section Start -----*/
.main-section-container .main-image-banner {
    height: auto;
    width: 100%;
}

.main-left-box p {
    margin-bottom: 0;
}

/* Button Hover */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.001);
    }

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

.main-left-button button:hover {
    animation: pulse 1s infinite;
}

/* Main Image Floating */
@keyframes float {
    0% {
        transform: translateY(0);
    }

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

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

.main-image-box img {
    animation: float 2s ease-in-out infinite;
}

/* Main Shadow */
@keyframes shadow {
    0% {
        width: 100%;
    }

    50% {
        width: 50%;
    }

    100% {
        width: 100%;
    }
}

.shadow-box img {
    animation: shadow 2s ease-in-out infinite;
}

@media only screen and (min-width: 1853px) {
    .main-section-container .card {
        background: rgba(255, 255, 255, 0);
        padding-bottom: 50px;
    }

    /*Left Main Side */
    .main-section-container .main-left-box {
        padding-top: 250px;
    }
    /*Right Main Side */
    .main-right-box {
        padding-top: 130px;
    }
    .main-left-box {
        opacity: 0;
        transform: translateX(-100px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-left-box.visible {
        opacity: 1;
        transform: translateX(0);
    }
    .main-right-box {
        opacity: 0;
        transform: translateX(100px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-right-box.visible {
        opacity: 1;
        transform: translateX(0);
    }
    .main-section-container .main-left-title {
        text-transform: uppercase;
        color: white;
        font-size: 27px;
        font-weight: 600;
        display: flex;
        justify-content: start;
        margin-left: 0px;
    }

    .main-section-container .main-left-second-title {
        text-transform: capitalize;
        color: white;
        font-size: 60px;
        font-weight: bold;
        display: flex;
        justify-content: start;
        margin-left: 0px;
    }

    .main-section-container .main-left-description {
        color: white;
        font-size: 17px;
        text-align: start;
        padding-right: 50px;
        margin-left: 0px;
    }

    .main-section-container .main-left-button {
        width: 40%;
        height: auto;
        margin-top: 5%;
        margin-right: 0px;
        margin-left: 0px;
        display: flex;
        justify-content: start;
    }

    .main-section-container .main-left-button .btn-icon {
        width: 15px;
        height: 15px;
        margin-left: 5%;
        margin-top: -2px;
    }

    .main-section-container .main-left-button button {
        width: 100%;
        height: 100%;
        padding: 10px;
        font-size: 18px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }


    /* Slime BG */
    .slime-bg {
        height: auto;
        width: 85%;
        aspect-ratio: 1;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 100%;
        animation: l1 10s infinite linear;
        align-self: center;
    }
    @keyframes l1{
        12.5% {border-radius: 37% 63% 70% 30% / 30% 62% 38% 70%}
        25%   {border-radius: 50% 50% 70% 30% / 52% 62% 38% 48%}
        37.5% {border-radius: 33% 67% 18% 82% / 52% 75% 25% 48%}
        50%   {border-radius: 73% 27% 18% 82% / 52% 32% 68% 48%}
        62.5% {border-radius: 73% 27% 74% 26% / 64% 32% 68% 36%}
        75%   {border-radius: 84% 16% 15% 85% / 55% 79% 21% 45%}
        87.5% {border-radius: 12% 88% 69% 31% / 10% 66% 34% 90%}
    }

    .main-section-container .main-image-box img {
        margin-top: 60px;
        max-width: 660px;
        min-width: auto;
    }

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

    .main-section-container .shadow-box img {
        max-width: 660px;
        min-width: auto;
    }
}

@media only screen and (max-width: 1852px) {
    .main-section-container .card {
        background: rgba(255, 255, 255, 0);
        padding-bottom: 50px;
    }

    /*Left Main Side */
    .main-section-container .main-left-box {
        padding-top: 230px;
    }
    /*Right Main Side */
    .main-right-box {
        padding-top: 130px;
    }
    .main-left-box {
        opacity: 0;
        transform: translateX(-100px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-left-box.visible {
        opacity: 1;
        transform: translateX(0);
    }
    .main-right-box {
        opacity: 0;
        transform: translateX(100px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-right-box.visible {
        opacity: 1;
        transform: translateX(0);
    }
    .main-section-container .main-left-title {
        text-transform: uppercase;
        color: white;
        font-size: 25px;
        font-weight: 600;
        display: flex;
        justify-content: start;
        padding-left: 20px;
    }

    .main-section-container .main-left-second-title {
        text-transform: capitalize;
        color: white;
        font-size: 50px;
        font-weight: bold;
        display: flex;
        justify-content: start;
        padding-left: 20px;
    }

    .main-section-container .main-left-description {
        color: white;
        font-size: 16px;
        text-align: start;
        padding-right: 50px;
        padding-left: 20px;
    }

    .main-section-container .main-left-button {
        width: 40%;
        height: auto;
        margin-top: 5%;
        margin-right: 0px;
        margin-left: 2%;
        display: flex;
        justify-content: start;
    }

    .main-section-container .main-left-button .btn-icon {
        width: 15px;
        height: 15px;
        margin-left: 5%;
        margin-top: -2px;
    }

    .main-section-container .main-left-button button {
        width: 100%;
        height: 100%;
        padding: 10px;
        font-size: 18px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }

    /* Slime BG */
    .slime-bg {
        height: auto;
        width: 70%;
        aspect-ratio: 1;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 100%;
        animation: l1 10s infinite linear;
        align-self: center;
    }
    @keyframes l1{
        12.5% {border-radius: 37% 63% 70% 30% / 30% 62% 38% 70%}
        25%   {border-radius: 50% 50% 70% 30% / 52% 62% 38% 48%}
        37.5% {border-radius: 33% 67% 18% 82% / 52% 75% 25% 48%}
        50%   {border-radius: 73% 27% 18% 82% / 52% 32% 68% 48%}
        62.5% {border-radius: 73% 27% 74% 26% / 64% 32% 68% 36%}
        75%   {border-radius: 84% 16% 15% 85% / 55% 79% 21% 45%}
        87.5% {border-radius: 12% 88% 69% 31% / 10% 66% 34% 90%}
    }

    .main-section-container .main-image-box img {
        margin-top: 50px;
        max-width: 610px;
        min-width: auto;
        margin-left: 20px;
    }

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

    .main-section-container .shadow-box img {
        max-width: 610px;
        min-width: auto;
        margin-left: 20px;
    }
}

@media only screen and (max-width: 1676px) {
    .main-section-container .card {
        background: rgba(255, 255, 255, 0);
        padding-bottom: 50px;
    }

    /*Left Main Side */
    .main-section-container .main-left-box {
        padding-top: 200px;
    }
    /*Right Main Side */
    .main-right-box {
        padding-top: 130px;
    }
    .main-left-box {
        opacity: 0;
        transform: translateX(-100px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-left-box.visible {
        opacity: 1;
        transform: translateX(0);
    }
    .main-right-box {
        opacity: 0;
        transform: translateX(100px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-right-box.visible {
        opacity: 1;
        transform: translateX(0);
    }
    .main-section-container .main-left-title {
        text-transform: uppercase;
        color: white;
        font-size: 23px;
        font-weight: 600;
        display: flex;
        justify-content: start;
        padding-left: 80px;
    }

    .main-section-container .main-left-second-title {
        text-transform: capitalize;
        color: white;
        font-size: 40px;
        font-weight: bold;
        display: flex;
        justify-content: start;
        padding-left: 80px;
    }

    .main-section-container .main-left-description {
        color: white;
        font-size: 15px;
        text-align: start;
        padding-right: 50px;
        padding-left: 80px;
    }

    .main-section-container .main-left-button {
        width: 40%;
        height: auto;
        margin-top: 5%;
        margin-right: 0px;
        margin-left: 12%;
        display: flex;
        justify-content: start;
    }

    .main-section-container .main-left-button .btn-icon {
        width: 15px;
        height: 15px;
        margin-left: 5%;
        margin-top: -2px;
    }

    .main-section-container .main-left-button button {
        width: 100%;
        height: 100%;
        padding: 10px;
        font-size: 18px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }

    /* Slime BG */
    .slime-bg {
        height: auto;
        width: 60%;
        aspect-ratio: 1;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 100%;
        animation: l1 10s infinite linear;
        align-self: center;
    }
    @keyframes l1{
        12.5% {border-radius: 37% 63% 70% 30% / 30% 62% 38% 70%}
        25%   {border-radius: 50% 50% 70% 30% / 52% 62% 38% 48%}
        37.5% {border-radius: 33% 67% 18% 82% / 52% 75% 25% 48%}
        50%   {border-radius: 73% 27% 18% 82% / 52% 32% 68% 48%}
        62.5% {border-radius: 73% 27% 74% 26% / 64% 32% 68% 36%}
        75%   {border-radius: 84% 16% 15% 85% / 55% 79% 21% 45%}
        87.5% {border-radius: 12% 88% 69% 31% / 10% 66% 34% 90%}
    }

    .main-section-container .main-image-box img {
        margin-top: 30px;
        max-width: 550px;
        min-width: auto;
        margin-left: 30px;
    }

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

    .main-section-container .shadow-box img {
        max-width: 550px;
        min-width: auto;
        margin-left: 0px;
    }
}

@media only screen and (max-width: 1463px) {
    .main-section-container .card {
        background: rgba(255, 255, 255, 0);
        padding-bottom: 50px;
    }

    /*Left Main Side */
    .main-section-container .main-left-box {
        padding-top: 150px;
    }
    /*Right Main Side */
    .main-right-box {
        padding-top: 130px;
    }
    .main-left-box {
        opacity: 0;
        transform: translateX(-100px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-left-box.visible {
        opacity: 1;
        transform: translateX(0);
    }
    .main-right-box {
        opacity: 0;
        transform: translateX(100px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-right-box.visible {
        opacity: 1;
        transform: translateX(0);
    }
    .main-section-container .main-left-title {
        text-transform: uppercase;
        color: white;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        justify-content: start;
        padding-left: 120px;
    }

    .main-section-container .main-left-second-title {
        text-transform: capitalize;
        color: white;
        font-size: 40px;
        font-weight: bold;
        display: flex;
        justify-content: start;
        padding-left: 120px;
    }

    .main-section-container .main-left-description {
        color: white;
        font-size: 15px;
        text-align: start;
        padding-right: 50px;
        padding-left: 120px;
    }

    .main-section-container .main-left-button {
        width: 40%;
        height: auto;
        margin-top: 5%;
        margin-right: 0px;
        margin-left: 18%;
        display: flex;
        justify-content: start;
    }

    .main-section-container .main-left-button .btn-icon {
        width: 15px;
        height: 15px;
        margin-left: 5%;
        margin-top: -2px;
    }

    .main-section-container .main-left-button button {
        width: 100%;
        height: 100%;
        padding: 10px;
        font-size: 18px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }

    /* Slime BG */
    .slime-bg {
        height: auto;
        width: 50%;
        aspect-ratio: 1;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 100%;
        animation: l1 10s infinite linear;
        align-self: center;
    }
    @keyframes l1{
        12.5% {border-radius: 37% 63% 70% 30% / 30% 62% 38% 70%}
        25%   {border-radius: 50% 50% 70% 30% / 52% 62% 38% 48%}
        37.5% {border-radius: 33% 67% 18% 82% / 52% 75% 25% 48%}
        50%   {border-radius: 73% 27% 18% 82% / 52% 32% 68% 48%}
        62.5% {border-radius: 73% 27% 74% 26% / 64% 32% 68% 36%}
        75%   {border-radius: 84% 16% 15% 85% / 55% 79% 21% 45%}
        87.5% {border-radius: 12% 88% 69% 31% / 10% 66% 34% 90%}
    }

    .main-section-container .main-image-box img {
        margin-top: 20px;
        max-width: 480px;
        min-width: auto;
        margin-left: 30px;
    }

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

    .main-section-container .shadow-box img {
        max-width: 480px;
        min-width: auto;
        margin-left: 0px;
    }
}

@media only screen and (max-width: 1200px) {
    .main-section-container .card {
        background: rgba(255, 255, 255, 0);
        padding-bottom: 50px;
    }

    /*Left Main Side */
    .main-section-container .main-left-box {
        padding-top: 150px;
    }
    /*Right Main Side */
    .main-right-box {
        padding-top: 130px;
    }
    .main-left-box {
        opacity: 0;
        transform: translateX(-100px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-left-box.visible {
        opacity: 1;
        transform: translateX(0);
    }
    .main-right-box {
        opacity: 0;
        transform: translateX(100px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-right-box.visible {
        opacity: 1;
        transform: translateX(0);
    }
    .main-section-container .main-left-title {
        text-transform: uppercase;
        color: white;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        justify-content: start;
        padding-left: 30px;
    }

    .main-section-container .main-left-second-title {
        text-transform: capitalize;
        color: white;
        font-size: 40px;
        font-weight: bold;
        display: flex;
        justify-content: start;
        padding-left: 30px;
    }

    .main-section-container .main-left-description {
        color: white;
        font-size: 15px;
        text-align: start;
        padding-right: 50px;
        padding-left: 30px;
    }

    .main-section-container .main-left-button {
        width: 40%;
        height: auto;
        margin-top: 5%;
        margin-right: 0px;
        margin-left: 5%;
        display: flex;
        justify-content: start;
    }

    .main-section-container .main-left-button .btn-icon {
        width: 12px;
        height: 12px;
        margin-left: 5%;
        margin-top: -2px;
    }

    .main-section-container .main-left-button button {
        width: 100%;
        height: 100%;
        padding: 10px;
        font-size: 16px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }

    /* Slime BG */
    .slime-bg {
        height: auto;
        width: 50%;
        aspect-ratio: 1;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 100%;
        animation: l1 10s infinite linear;
        align-self: center;
    }
    @keyframes l1{
        12.5% {border-radius: 37% 63% 70% 30% / 30% 62% 38% 70%}
        25%   {border-radius: 50% 50% 70% 30% / 52% 62% 38% 48%}
        37.5% {border-radius: 33% 67% 18% 82% / 52% 75% 25% 48%}
        50%   {border-radius: 73% 27% 18% 82% / 52% 32% 68% 48%}
        62.5% {border-radius: 73% 27% 74% 26% / 64% 32% 68% 36%}
        75%   {border-radius: 84% 16% 15% 85% / 55% 79% 21% 45%}
        87.5% {border-radius: 12% 88% 69% 31% / 10% 66% 34% 90%}
    }

    .main-section-container .main-image-box img {
        margin-top: 0px;
        max-width: 400px;
        min-width: auto;
        margin-left: 30px;
    }

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

    .main-section-container .shadow-box img {
        max-width: 400px;
        min-width: auto;
        margin-left: 0px;
    }
}

@media only screen and (max-width: 1066px) {
    .main-section-container .card {
        background: rgba(255, 255, 255, 0);
        padding-bottom: 50px;
    }

    /*Left Main Side */
    .main-section-container .main-left-box {
        padding-top: 110px;
    }
    /*Right Main Side */
    .main-right-box {
        padding-top: 110px;
    }
    .main-left-box {
        opacity: 0;
        transform: translateX(-100px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-left-box.visible {
        opacity: 1;
        transform: translateX(0);
    }
    .main-right-box {
        opacity: 0;
        transform: translateX(100px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-right-box.visible {
        opacity: 1;
        transform: translateX(0);
    }
    .main-section-container .main-left-title {
        text-transform: uppercase;
        color: white;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        justify-content: start;
        padding-left: 50px;
    }

    .main-section-container .main-left-second-title {
        text-transform: capitalize;
        color: white;
        font-size: 40px;
        font-weight: bold;
        display: flex;
        justify-content: start;
        padding-left: 50px;
    }

    .main-section-container .main-left-description {
        color: white;
        font-size: 15px;
        text-align: start;
        padding-right: 50px;
        padding-left: 50px;
    }

    .main-section-container .main-left-button {
        width: 40%;
        height: auto;
        margin-top: 5%;
        margin-right: 0px;
        margin-left: 10%;
        display: flex;
        justify-content: start;
    }

    .main-section-container .main-left-button .btn-icon {
        width: 12px;
        height: 12px;
        margin-left: 5%;
        margin-top: -2px;
    }

    .main-section-container .main-left-button button {
        width: 100%;
        height: 100%;
        padding: 7px;
        font-size: 14px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }

    /* Slime BG */
    .slime-bg {
        height: auto;
        width: 50%;
        aspect-ratio: 1;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 100%;
        animation: l1 10s infinite linear;
        align-self: center;
    }
    @keyframes l1{
        12.5% {border-radius: 37% 63% 70% 30% / 30% 62% 38% 70%}
        25%   {border-radius: 50% 50% 70% 30% / 52% 62% 38% 48%}
        37.5% {border-radius: 33% 67% 18% 82% / 52% 75% 25% 48%}
        50%   {border-radius: 73% 27% 18% 82% / 52% 32% 68% 48%}
        62.5% {border-radius: 73% 27% 74% 26% / 64% 32% 68% 36%}
        75%   {border-radius: 84% 16% 15% 85% / 55% 79% 21% 45%}
        87.5% {border-radius: 12% 88% 69% 31% / 10% 66% 34% 90%}
    }
    
    .main-section-container .main-image-box img {
        margin-top: 0px;
        max-width: 350px;
        min-width: auto;
        margin-left: 30px;
    }

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

    .main-section-container .shadow-box img {
        max-width: 350px;
        min-width: auto;
        margin-left: 0px;
    }
}

@media only screen and (max-width: 992px) {
    .main-section-container .card {
        background: rgba(255, 255, 255, 0);
        padding-bottom: 40px;
    }

    /*Left Main Side */
    .main-section-container .main-left-box {
        padding-top: 400px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%) translateY(-100px); 
        text-align: center;
        opacity: 0;
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-left-box.visible {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0); 
    }
    .main-section-container .main-left-title {
        text-transform: uppercase;
        color: white;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        text-align: center;
        padding-left: 0px;
    }

    .main-section-container .main-left-second-title {
        text-transform: capitalize;
        color: white;
        font-size: 40px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        padding-left: 0px;
    }

    .main-section-container .main-left-description {
        color: white;
        font-size: 15px;
        text-align: center;
        padding-right: 0px;
        padding-left: 0px;
    }

    .main-section-container .main-left-button {
        width: 100%;
        height: auto;
        margin-top: 5%;
        margin-right: 0px;
        margin-left: 0px;
        display: flex;
        justify-content: center;
    }

    .main-section-container .main-left-button .btn-icon {
        width: 12px;
        height: 12px;
        margin-left: 5%;
        margin-top: -2px;
    }

    .main-section-container .main-left-button button {
        width: 40%;
        height: 100%;
        padding: 7px;
        font-size: 14px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }

    /*Right Main Side */
    .main-right-box {
        display: none !important;
    }
}

@media only screen and (max-width: 991px) {
    .main-section-container .card {
        background: rgba(255, 255, 255, 0);
        padding-bottom: 40px;
    }

    /*Left Main Side */
    .main-section-container .main-left-box {
        padding-top: 400px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%) translateY(-100px); 
        text-align: center;
        opacity: 0;
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-left-box.visible {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0); 
    }

    .main-section-container .main-left-title {
        text-transform: uppercase;
        color: white;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        text-align: center;
        padding-left: 0px;
    }

    .main-section-container .main-left-second-title {
        text-transform: capitalize;
        color: white;
        font-size: 40px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        padding-left: 0px;
    }

    .main-section-container .main-left-description {
        color: white;
        font-size: 15px;
        text-align: center;
        padding-right: 0px;
        padding-left: 0px;
    }

    .main-section-container .main-left-button {
        width: 100%;
        height: auto;
        margin-top: 5%;
        margin-right: 0px;
        margin-left: 0px;
        display: flex;
        justify-content: center;
    }

    .main-section-container .main-left-button .btn-icon {
        width: 12px;
        height: 12px;
        margin-left: 5%;
        margin-top: -2px;
    }

    .main-section-container .main-left-button button {
        width: 40%;
        height: 100%;
        padding: 7px;
        font-size: 14px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }

    /*Right Main Side */
    .main-right-box {
        display: none !important;
    }
}

@media only screen and (max-width: 733px) {
    .main-section-container .card {
        background: rgba(255, 255, 255, 0);
        padding-bottom: 30px;
    }

    /*Left Main Side */
    .main-section-container .main-left-box {
        padding-top: 370px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%) translateY(-100px); 
        text-align: center;
        opacity: 0;
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-left-box.visible {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0); 
    }

    .main-section-container .main-left-title {
        text-transform: uppercase;
        color: white;
        font-size: 15px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        padding-left: 0px;
    }

    .main-section-container .main-left-second-title {
        text-transform: capitalize;
        color: white;
        font-size: 25px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        padding-left: 0px;
    }

    .main-section-container .main-left-description {
        color: white;
        font-size: 13px;
        text-align: center;
        padding-right: 0px;
        padding-left: 0px;
    }

    .main-section-container .main-left-button {
        width: 100%;
        height: auto;
        margin-top: 2%;
        margin-right: 0px;
        margin-left: 0px;
        display: flex;
        justify-content: center;
    }

    .main-section-container .main-left-button .btn-icon {
        width: 8px;
        height: 8px;
        margin-left: 5%;
        margin-top: -2px;
    }

    .main-section-container .main-left-button button {
        width: 40%;
        height: 100%;
        padding: 10px;
        font-size: 12px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }

    /*Right Main Side */
    .main-right-box {
        display: none;
    }
}

@media only screen and (max-width: 575px) {
    .main-section-container .card {
        background: rgba(255, 255, 255, 0);
        padding-bottom: 20px;
    }

    /*Left Main Side */
    .main-section-container .main-left-box {
        padding-top: 290px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%) translateY(-100px); 
        text-align: center;
        opacity: 0;
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-left-box.visible {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0); 
    }

    .main-section-container .main-left-title {
        text-transform: uppercase;
        color: white;
        font-size: 13px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        padding-left: 0px;
    }

    .main-section-container .main-left-second-title {
        text-transform: capitalize;
        color: white;
        font-size: 20px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        padding-left: 0px;
    }

    .main-section-container .main-left-description {
        color: white;
        font-size: 12px;
        text-align: center;
        padding-right: 20px;
        padding-left: 20px;
    }

    .main-section-container .main-left-button {
        width: 100%;
        height: auto;
        margin-top: 2%;
        margin-right: 0px;
        margin-left: 0px;
        display: flex;
        justify-content: center;
    }

    .main-section-container .main-left-button .btn-icon {
        width: 8px;
        height: 8px;
        margin-left: 5%;
        margin-top: -2px;
    }

    .main-section-container .main-left-button button {
        width: 40%;
        height: 100%;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }

    /*Right Main Side */
    .main-right-box {
        display: none;
    }
}

@media only screen and (max-width: 477px) {
    .main-section-container .card {
        background: rgba(255, 255, 255, 0);
        padding-bottom: 10px;
    }

    /*Left Main Side */
    .main-section-container .main-left-box {
        padding-top: 230px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%) translateY(-100px); 
        text-align: center;
        opacity: 0;
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-left-box.visible {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0); 
    }

    .main-section-container .main-left-title {
        text-transform: uppercase;
        color: white;
        font-size: 13px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        padding-left: 0px;
    }

    .main-section-container .main-left-second-title {
        text-transform: capitalize;
        color: white;
        font-size: 20px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        padding-left: 0px;
    }

    .main-section-container .main-left-description {
        display: none;
    }

    .main-section-container .main-left-button {
        width: 100%;
        height: auto;
        margin-top: 1%;
        margin-right: 0px;
        margin-left: 0px;
        display: flex;
        justify-content: center;
    }

    .main-section-container .main-left-button .btn-icon {
        width: 8px;
        height: 8px;
        margin-left: 5%;
        margin-top: -2px;
    }

    .main-section-container .main-left-button button {
        width: 40%;
        height: 100%;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }

    /*Right Main Side */
    .main-right-box {
        display: none;
    }
}

@media only screen and (max-width: 380px) {
    .main-section-container .card {
        background: rgba(255, 255, 255, 0);
        padding-bottom: 10px;
    }

    /*Left Main Side */
    .main-section-container .main-left-box {
        padding-top: 210px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%) translateY(-100px); 
        text-align: center;
        opacity: 0;
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .main-left-box.visible {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0); 
    }

    .main-section-container .main-left-title {
        text-transform: uppercase;
        color: white;
        font-size: 13px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        padding-left: 0px;
    }

    .main-section-container .main-left-second-title {
        text-transform: capitalize;
        color: white;
        font-size: 20px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        padding-left: 0px;
    }

    .main-section-container .main-left-description {
        display: none;
    }

    .main-section-container .main-left-button {
        width: 100%;
        height: auto;
        margin-top: 1%;
        margin-right: 0px;
        margin-left: 0px;
        display: flex;
        justify-content: center;
    }

    .main-section-container .main-left-button .btn-icon {
        width: 8px;
        height: 8px;
        margin-left: 5%;
        margin-top: 0px;
    }

    .main-section-container .main-left-button button {
        width: 40%;
        height: 100%;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }

    /*Right Main Side */
    .main-right-box {
        display: none;
    }
}
/* ---- Main  Section End -----*/

/* ---- Second  Section Start -----*/
/* Second Container */
.second-section-container {
    padding-bottom: 100px;
}

/* Slider */
.slider-container .wrapper {
    width: 100%;
    position: relative;
}

.slider-container .carousel .card {
    scroll-snap-align: start;
    height: 100%;
    width: 100%;
    list-style: none;
    cursor: pointer;
    flex-direction: column;
    display: flex;
    flex-direction: row;
    border: none;
}

/* Slider Hover*/
.slider-container .hover-image {
    display: none;
}

.slider-container .card:hover .default-image {
    display: none;
}

.slider-container .card:hover .hover-image {
    display: block;
}

.slider-container .card:hover .service-name {
    color: black;
    font-weight: 600;
}

/* Card */
.card-column-first-container .second-card-first-box {
    background: #fa6f10;
    cursor: pointer;
}

.card-column-first-container .second-card-second-box,
.card-column-second-container .second-card-third-box {
    background: white;
    cursor: pointer;
}

.card-column-second-container .second-card-fourth-box {
    background: #1f2835;
    cursor: pointer;
}

.title-container .card img {
    transition: transform 0.5s ease;
}

.title-container .card:hover img {
    transform: rotateY(360deg);
}


/* Slider/Title/Card/Process Responsive */
@media only screen and (min-width: 993px) {

    /* Slider */
    .slider-container {
        margin-bottom: 20px;
    }

    .slider-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 5) - 6px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        margin-left: 20px;
        margin-right: 10px;
    }

    .slider-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .slider-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .slider-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .slider-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .slider-container .card img {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
        user-select: none;
    }

    .slider-container .card p {
        color: #808080;
        font-size: 17px;
        margin-top: 10px;
        margin-left: 15px;
        user-select: none;
    }

    /* Second Section Title */
    .main-title-container hr {
        background: #808080;
        height: 2px;
        width: 43%;
        margin-top: 12px;
    }

    .main-title-container .second-title {
        color: black;
        font-size: 20px;
    }

    /* Second Section Main Title */
    .title-container {
        padding-top: 50px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .title-container .second-title-first-box {
        color: black;
        font-size: 50px;
        font-weight: bold;
        margin-bottom: -15px;
        display: flex;
        justify-content: start;
    }

    .title-container .second-title-second-box {
        color: #fa6f10;
        font-size: 50px;
        font-weight: bold;
        text-transform: uppercase;
        display: flex;
        justify-content: start;
    }

    .title-container .second-description-box {
        color: #808080;
        font-size: 17px;
        text-align: start;
        padding-right: 30px;
        padding-left: 0px;
    }

    .title-container .second-checklist-box {
        display: flex;
        justify-content: start;
    }

    .title-container .second-checklist-box i {
        color: #fa6f10;
        font-size: 21px;
    }

    .title-container .second-checklist-box p {
        color: #808080;
        font-size: 17px;
        margin-left: 20px;
        cursor: pointer;
    }

    .title-container .second-checklist-box p:hover {
        font-weight: bold;
    }

    /* Second Card */
    .card-column-first-container {
        padding-top: 0px;
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 20px;
    }

    .card-column-second-container {
        padding-top: 30px;
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 20px;
    }

    .card-column-first-container .card,
    .card-column-second-container .card {
        height: 100%;
        max-height: 230px;
        width: 100%;
        border: none;
        border-radius: 25px;
        padding-top: 30px;
        padding-bottom: 30px;
        padding-right: 40px;
        padding-left: 40px;
        box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
    }

    .card-column-first-container img,
    .card-column-second-container img {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
    }

    .second-card-first-box span,
    .second-card-fourth-box span {
        color: white;
        font-size: 45px;
        font-weight: 900;
    }

    .second-card-second-box span,
    .second-card-third-box span {
        color: black;
        font-size: 45px;
        font-weight: 900;
    }

    .second-card-first-box p,
    .second-card-fourth-box p {
        color: white;
        font-size: 18px;
    }

    .second-card-second-box p,
    .second-card-third-box p {
        color: black;
        font-size: 18px;
    }

    /* Process */
    .process-container {
        padding-top: 120px;
    }

    .process-container .card {
        border: none;
        z-index: 50;
        max-width: 100%;
        max-height: auto;
        cursor: pointer;
    }

    .process-container .card-box {
        height: 50px;
        width: 230px;
        padding-top: 12px;
        padding-bottom: 10px;
        padding-left: 50px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 1px;
        border-radius: 10px;
        transition: transform 0.3s ease;
    }
    .process-container .card-box:hover {
        
        transform: translateY(-5px);
    }

    .process-container .card-circle {
        width: 100%;
        max-width: 50px;
        height: 100%;
        max-height: 50px;
        background: #1f2835;
        border-radius: 100%;
        position: absolute;
        top: 0;
        left: -15px;
    }

    .process-container .card-box h2 {
        color: white;
        text-align: center;
        margin-top: 7px;
        font-weight: 800;
        font-size: 30px;
    }

    .process-container .card-box p {
        color: black;
        font-size: 17px;
    }
}
/* Slider/Title/Card/Process Responsive */
@media only screen and (max-width: 992px) {
    /* Slider */
    .slider-container {
        margin-bottom: 0px;
    }

    .slider-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 3) + 10px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 10px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        margin-left: 40px;
        margin-right: 40px;
    }

    .slider-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .slider-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .slider-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .slider-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .slider-container .card img {
        width: 30px;
        height: 30px;
        margin-bottom: 10px;
        user-select: none;
    }

    .slider-container .card p {
        color: #808080;
        font-size: 13px;
        margin-top: 0px;
        margin-left: 15px;
        user-select: none;
    }

    /* Second Section Title */
    .main-title-container hr {
        background: #808080;
        height: 2px;
        width: 34%;
        margin-top: 12px;
    }

    .main-title-container .second-title {
        color: black;
        font-size: 15px;
    }

    /* Second Section Main Title */
    .title-container .title-container {
        padding-top: 0px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .title-container .second-title-first-box {
        color: black;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: -15px;
        display: flex;
        justify-content: center;
    }

    .title-container .second-title-second-box {
        color: #fa6f10;
        font-size: 20px;
        font-weight: bold;
        text-transform: uppercase;
        display: flex;
        justify-content: center;
    }

    .title-container .second-description-box {
        color: #808080;
        font-size: 12px;
        text-align: center;
        padding-right: 20px;
        padding-left: 20px;
    }

    .title-container .second-checklist-box {
        display: flex;
        justify-content: center;
    }

    .title-container .second-checklist-box i {
        color: #fa6f10;
        font-size: 15px;
    }

    .title-container .second-checklist-box p {
        color: #808080;
        font-size: 12px;
        margin-left: 20px;
        cursor: pointer;
    }

    .title-container .second-checklist-box p:hover {
        font-weight: bold;
    }

    /* Second Section Card */
    .card-column-first-container {
        padding-top: 20px !important;
        padding-left: 70px !important;
        padding-right: 10px !important;
        gap: 20px;
    }

    .card-column-second-container {
        padding-top: 20px !important;
        padding-left: 10px !important;
        padding-right: 70px !important;
        gap: 20px;
    }

    .card-column-first-container .card,
    .card-column-second-container .card {
        height: 100%;
        max-height: 135px;
        width: 100%;
        border: none;
        border-radius: 25px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 30px;
        padding-left: 30px;
        box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
    }

    .card-column-second-container {
        padding-top: 0px;
    }

    .card-column-first-container img,
    .card-column-second-container img {
        width: 25px;
        height: 25px;
        margin-bottom: 10px;
    }

    .second-card-first-box span,
    .second-card-fourth-box span {
        color: white;
        font-size: 17px;
        font-weight: 900;
    }

    .second-card-second-box span,
    .second-card-third-box span {
        color: black;
        font-size: 17px;
        font-weight: 900;
    }

    .second-card-first-box p,
    .second-card-fourth-box p {
        color: white;
        font-size: 9px;
    }

    .second-card-second-box p,
    .second-card-third-box p {
        color: black;
        font-size: 9px;
    }

    /* Process */
    .process-container {
        padding-top: 40px;
    }
    .process-container .card {
        border: none;
        z-index: 50;
        max-width: 100%;
        max-height: 100%;
        cursor: pointer;
    }
    .process-container .card-box {
        height: 34px;
        width: 170px;
        padding-top: 7px;
        display: flex;
        justify-content: center;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 1px;
        border-radius: 10px;
        transition: transform 0.3s ease;
    }
    .process-container .card-box:hover {
        transform: translateY(-5px);
    }
    .process-container .card-circle {
        display: none;
    }
    .process-container .card-box h2 {
        display: none;
    }
    .process-container .card-box p {
        color: black;
        font-size: 13px;
    }
}
/* Card/Process Responsive */
@media only screen and (max-width: 991px) {
     /* Second Section Card */
     .card-column-first-container {
        padding-top: 20px !important;
        padding-left: 70px !important;
        padding-right: 10px !important;
        gap: 20px;
    }

    .card-column-second-container {
        padding-top: 20px !important;
        padding-left: 10px !important;
        padding-right: 70px !important;
        gap: 20px;
    }

    .card-column-first-container .card,
    .card-column-second-container .card {
        height: 100%;
        max-height: 135px;
        width: 80%;
        border: none;
        border-radius: 25px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 30px;
        padding-left: 30px;
        box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
    }

    .card-column-second-container {
        padding-top: 0px;
    }

    .card-column-first-container img,
    .card-column-second-container img {
        width: 35px;
        height: 35px;
        margin-bottom: 10px;
    }

    .second-card-first-box span,
    .second-card-fourth-box span {
        color: white;
        font-size: 21px;
        font-weight: 900;
    }

    .second-card-second-box span,
    .second-card-third-box span {
        color: black;
        font-size: 21px;
        font-weight: 900;
    }

    .second-card-first-box p,
    .second-card-fourth-box p {
        color: white;
        font-size: 13px;
    }

    .second-card-second-box p,
    .second-card-third-box p {
        color: black;
        font-size: 13px;
    }
   /* Process */
   .process-container {
        padding-top: 40px;
    }
    .process-container .card {
        border: none;
        z-index: 50;
        max-width: 100%;
        max-height: 100%;
        cursor: pointer;
    }
    .process-container .card-box {
        height: 34px;
        width: 130px;
        padding-top: 7px;
        display: flex;
        justify-content: center;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 1px;
        border-radius: 10px;
        transition: transform 0.3s ease;
    }
    .process-container .card-box:hover {
        transform: translateY(-5px);
    }
    .process-container .card-circle {
        display: none;
    }
    .process-container .card-box h2 {
        display: none;
    }
    .process-container .card-box p {
        color: black;
        font-size: 13px;
    }
}
/* Slider/Card/Process Responsive */
@media only screen and (max-width: 767px) {
    /* Slider */
    .slider-container {
        margin-bottom: 0px;
    }

    .slider-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 2) + 5px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        margin-left: 30px;
        margin-right: 30px;
    }

    .slider-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .slider-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .slider-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .slider-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .slider-container .card img {
        width: 30px;
        height: 30px;
        margin-bottom: 10px;
        user-select: none;
    }

    .slider-container .card p {
        color: #808080;
        font-size: 13px;
        margin-top: 0px;
        margin-left: 15px;
        user-select: none;
    }
     /* Second Section Card */
     .card-column-first-container {
        padding-top: 20px !important;
        padding-left: 70px !important;
        padding-right: 10px !important;
        gap: 20px;
    }

    .card-column-second-container {
        padding-top: 20px !important;
        padding-left: 10px !important;
        padding-right: 70px !important;
        gap: 20px;
    }

    .card-column-first-container .card,
    .card-column-second-container .card {
        height: 100%;
        max-height: 135px;
        width: 100%;
        border: none;
        border-radius: 25px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 30px;
        padding-left: 30px;
        box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
    }

    .card-column-second-container {
        padding-top: 0px;
    }

    .card-column-first-container img,
    .card-column-second-container img {
        width: 30px;
        height: 30px;
        margin-bottom: 10px;
    }

    .second-card-first-box span,
    .second-card-fourth-box span {
        color: white;
        font-size: 18px;
        font-weight: 900;
    }

    .second-card-second-box span,
    .second-card-third-box span {
        color: black;
        font-size: 18px;
        font-weight: 900;
    }

    .second-card-first-box p,
    .second-card-fourth-box p {
        color: white;
        font-size: 12px;
    }

    .second-card-second-box p,
    .second-card-third-box p {
        color: black;
        font-size: 12px;
    }
    /* Process */
    .process-container {
        padding-top: 40px;
    }
    .process-container .card {
        border: none;
        z-index: 50;
        max-width: 100%;
        max-height: 100%;
        cursor: pointer;
    }
    .process-container .card-box {
        height: 34px;
        width: 100px;
        padding-top: 7px;
        display: flex;
        justify-content: center;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 1px;
        border-radius: 10px;
        transition: transform 0.3s ease;
    }
    .process-container .card-box:hover {
        transform: translateY(-5px);
    }
    .process-container .card-circle {
        display: none;
    }
    .process-container .card-box h2 {
        display: none;
    }
    .process-container .card-box p {
        color: black;
        font-size: 13px;
    }
}
/* Slider/Process Responsive */
@media only screen and (max-width: 575px) {

    /* Slider */
    .slider-container {
        margin-bottom: 0px;
    }

    .slider-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 2) + 5px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        margin-left: 20px;
        margin-right: 20px;
    }

    .slider-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .slider-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .slider-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .slider-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .slider-container .card img {
        width: 30px;
        height: 30px;
        margin-bottom: 10px;
        user-select: none;
    }

    .slider-container .card p {
        color: #808080;
        font-size: 13px;
        margin-top: 0px;
        margin-left: 15px;
        user-select: none;
    }
    /* Process */
    .process-container {
        padding-top: 40px;
    }
    .process-container .card {
        border: none;
        z-index: 50;
        max-width: 100%;
        max-height: 100%;
        cursor: pointer;
    }
    .process-container .card-box {
        height: 28px;
        width: 90px;
        padding-top: 7px;
        display: flex;
        justify-content: center;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 1px;
        border-radius: 10px;
        transition: transform 0.3s ease;
    }
    .process-container .card-box:hover {
        transform: translateY(-5px);
    }
    .process-container .card-circle {
        display: none;
    }
    .process-container .card-box h2 {
        display: none;
    }
    .process-container .card-box p {
        color: black;
        font-size: 10px;
    }
}
/* Card/Process Responsive */
@media only screen and (max-width: 467px) {
/* Second Section Card */
.card-column-first-container {
    padding-top: 20px !important;
    padding-left: 40px !important;
    padding-right: 10px !important;
    gap: 20px;
}

.card-column-second-container {
    padding-top: 20px !important;
    padding-left: 10px !important;
    padding-right: 40px !important;
    gap: 20px;
}

.card-column-first-container .card,
.card-column-second-container .card {
    height: 100%;
    max-height: 120px;
    width: 100%;
    border: none;
    border-radius: 25px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 30px;
    padding-left: 30px;
    box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
}

.card-column-second-container {
    padding-top: 0px;
}

.card-column-first-container img,
.card-column-second-container img {
    width: 25px;
    height: 25px;
    margin-bottom: 10px;
}

.second-card-first-box span,
.second-card-fourth-box span {
    color: white;
    font-size: 18px;
    font-weight: 900;
}

.second-card-second-box span,
.second-card-third-box span {
    color: black;
    font-size: 17px;
    font-weight: 900;
}

.second-card-first-box p,
.second-card-fourth-box p {
    color: white;
    font-size: 10px;
}

.second-card-second-box p,
.second-card-third-box p {
    color: black;
    font-size: 10px;
}
/* Process */
.process-container {
    padding-top: 40px;
}
.process-container .card {
    border: none;
    z-index: 50;
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
}
.process-container .card-box {
    height: 28px;
    width: 80px;
    padding-top: 7px;
    display: flex;
    justify-content: center;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 1px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}
.process-container .card-box:hover {
    transform: translateY(-5px);
}
.process-container .card-circle {
    display: none;
}
.process-container .card-box h2 {
    display: none;
}
.process-container .card-box p {
    color: black;
    font-size: 10px;
}
}
/* Card/Process Responsive */
@media only screen and (max-width: 415px) {
    /* Second Section Card */
    .card-column-first-container {
        padding-top: 20px !important;
        padding-left: 30px !important;
        padding-right: 10px !important;
        gap: 20px;
    }

    .card-column-second-container {
        padding-top: 20px !important;
        padding-left: 10px !important;
        padding-right: 30px !important;
        gap: 20px;
    }

    .card-column-first-container .card,
    .card-column-second-container .card {
        height: 100%;
        max-height: 120px;
        width: 100%;
        border: none;
        border-radius: 25px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 30px;
        padding-left: 30px;
        box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
    }

    .card-column-second-container {
        padding-top: 0px;
    }

    .card-column-first-container img,
    .card-column-second-container img {
        width: 25px;
        height: 25px;
        margin-bottom: 10px;
    }

    .second-card-first-box span,
    .second-card-fourth-box span {
        color: white;
        font-size: 18px;
        font-weight: 900;
    }

    .second-card-second-box span,
    .second-card-third-box span {
        color: black;
        font-size: 17px;
        font-weight: 900;
    }

    .second-card-first-box p,
    .second-card-fourth-box p {
        color: white;
        font-size: 10px;
    }

    .second-card-second-box p,
    .second-card-third-box p {
        color: black;
        font-size: 10px;
    }
    /* Process */
    .process-container {
        padding-top: 40px;
    }
    .process-container .card {
        border: none;
        z-index: 50;
        max-width: 100%;
        max-height: 100%;
        cursor: pointer;
    }
    .process-container .card-box {
        height: 26px;
        width: 70px;
        padding-top: 7px;
        display: flex;
        justify-content: center;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 1px;
        border-radius: 10px;
        transition: transform 0.3s ease;
    }
    .process-container .card-box:hover {
        transform: translateY(-5px);
    }
    .process-container .card-circle {
        display: none;
    }
    .process-container .card-box h2 {
        display: none;
    }
    .process-container .card-box p {
        color: black;
        font-size: 9px;
    }
}
/* Card/Process Responsive */
@media only screen and (max-width: 365px) {
    /* Second Section Card */
    .card-column-first-container {
        padding-top: 20px !important;
        padding-left: 20px !important;
        padding-right: 10px !important;
        gap: 20px;
    }

    .card-column-second-container {
        padding-top: 20px !important;
        padding-left: 10px !important;
        padding-right: 20px !important;
        gap: 20px;
    }

    .card-column-first-container .card,
    .card-column-second-container .card {
        height: 100%;
        max-height: 120px;
        width: 100%;
        border: none;
        border-radius: 25px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 20px;
        padding-left: 20px;
        box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
    }

    .card-column-second-container {
        padding-top: 0px;
    }

    .card-column-first-container img,
    .card-column-second-container img {
        width: 25px;
        height: 25px;
        margin-bottom: 10px;
    }

    .second-card-first-box span,
    .second-card-fourth-box span {
        color: white;
        font-size: 18px;
        font-weight: 900;
    }

    .second-card-second-box span,
    .second-card-third-box span {
        color: black;
        font-size: 17px;
        font-weight: 900;
    }

    .second-card-first-box p,
    .second-card-fourth-box p {
        color: white;
        font-size: 10px;
    }

    .second-card-second-box p,
    .second-card-third-box p {
        color: black;
        font-size: 10px;
    }
    /* Process */
    .process-container {
        padding-top: 40px;
    }
    .process-container .card {
        border: none;
        z-index: 50;
        max-width: 100%;
        max-height: 100%;
        cursor: pointer;
    }
    .process-container .card-box {
        height: 26px;
        width: 65px;
        padding-top: 7px;
        display: flex;
        justify-content: center;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 1px;
        border-radius: 10px;
        transition: transform 0.3s ease;
    }
    .process-container .card-box:hover {
        transform: translateY(-5px);
    }
    .process-container .card-circle {
        display: none;
    }
    .process-container .card-box h2 {
        display: none;
    }
    .process-container .card-box p {
        color: black;
        font-size: 9px;
    }
}

/* ---- Second  Section End -----*/

/* ---- Third  Section Start -----*/
/* Third  Title Responsive */
.third-section-container {
    z-index: 1;
}

@media only screen and (min-width: 1193px) {

    /* Third Banner Responsive*/
    .third-section-container .third-image-banner {
        height: 100%;
        width: 45%;
        margin-top: -15%;
        z-index: -1;
    }

    /* Third Card*/
    .third-section-container .card-img-overlay {
        margin-top: 8%;
    }

    /* Third Title*/
    .third-left-container {
        padding-top: 5%;
    }

    .third-section-container .third-title-box {
        display: flex;
        justify-content: center;
    }

    .third-section-container .third-title-box p {
        color: white;
        text-transform: uppercase;
        font-size: 17px;
    }

    .third-section-container .circle-black {
        height: 8px;
        width: 8px;
        background: #1f2835;
        border-radius: 100%;
        margin-top: 7px;
        margin-right: 20px;
    }

    .third-section-container .circle-white {
        height: 8px;
        width: 8px;
        background: white;
        border-radius: 100%;
        margin-top: 7px;
        margin-left: 20px;
    }

    .third-section-container .third-title-second-box {
        display: flex;
        justify-content: center;
        color: white;
        font-size: 50px;
        text-transform: capitalize;
        font-weight: bold;
        margin-top: -10px;
    }
}
@media only screen and (max-width: 1192px) {

    /* Third Banner Responsive*/
    .third-section-container .third-image-banner {
        height: 100%;
        width: 50%;
        margin-top: -15%;
        z-index: -1;
    }

    /* Third Card*/
    .third-section-container .card-img-overlay {
        margin-top: 8%;
    }

    /* Third Title*/
    .third-left-container {
        padding-top: 5%;
    }

    .third-section-container .third-title-box {
        display: flex;
        justify-content: center;
    }

    .third-section-container .third-title-box p {
        color: white;
        text-transform: uppercase;
        font-size: 17px;
    }

    .third-section-container .circle-black {
        height: 8px;
        width: 8px;
        background: #1f2835;
        border-radius: 100%;
        margin-top: 7px;
        margin-right: 20px;
    }

    .third-section-container .circle-white {
        height: 8px;
        width: 8px;
        background: white;
        border-radius: 100%;
        margin-top: 7px;
        margin-left: 20px;
    }

    .third-section-container .third-title-second-box {
        display: flex;
        justify-content: center;
        color: white;
        font-size: 40px;
        text-transform: capitalize;
        font-weight: bold;
        margin-top: -10px;
    }
}
@media only screen and (max-width: 992px) {

    /* Third Banner Responsive*/
    .third-section-container .third-image-banner {
        height: 100%;
        width: 50%;
        margin-top: -18%;
        z-index: -1;
    }

    /* Third Card*/
    .third-section-container .card-img-overlay {
        margin-top: 2%;
    }

    /* Third Title*/
    .third-left-container {
        padding-top: 8%;
    }

    .third-section-container .third-title-box {
        display: flex;
        justify-content: center;
    }

    .third-section-container .third-title-box p {
        color: white;
        text-transform: uppercase;
        font-size: 15px;
    }

    .third-section-container .circle-black {
        height: 8px;
        width: 8px;
        background: #1f2835;
        border-radius: 100%;
        margin-top: 5px;
        margin-right: 10px;
    }

    .third-section-container .circle-white {
        height: 8px;
        width: 8px;
        background: white;
        border-radius: 100%;
        margin-top: 5px;
        margin-left: 10px;
    }

    .third-section-container .third-title-second-box {
        display: flex;
        justify-content: center;
        color: white;
        font-size: 26px;
        text-transform: capitalize;
        font-weight: bold;
        margin-top: -10px;
    }
}
@media only screen and (max-width: 639px) {

    /* Third Banner Responsive*/
    .third-section-container .third-image-banner {
        height: 100%;
        width: 50%;
        margin-top: -23%;
        z-index: -1;
    }

    /* Third Card*/
    .third-section-container .card-img-overlay {
        margin-top: -2%;
    }

    /* Third Title*/
    .third-left-container {
        padding-top: 8%;
    }

    .third-section-container .third-title-box {
        display: flex;
        justify-content: start;
    }

    .third-section-container .third-title-box p {
        color: white;
        text-transform: uppercase;
        font-size: 10px;
    }

    .third-section-container .circle-black {
        height: 8px;
        width: 8px;
        background: #1f2835;
        border-radius: 100%;
        margin-top: 3px;
        margin-right: 5px;
    }

    .third-section-container .circle-white {
        height: 8px;
        width: 8px;
        background: white;
        border-radius: 100%;
        margin-top: 3px;
        margin-left: 5px;
    }

    .third-section-container .third-title-second-box {
        display: flex;
        justify-content: start;
        color: white;
        font-size: 18px;
        text-transform: capitalize;
        font-weight: bold;
        margin-top: -10px;
    }
}
@media only screen and (max-width: 528px) {

    /* Third Banner Responsive*/
    .third-section-container .third-image-banner {
        height: 100%;
        width: 50%;
        margin-top: -23%;
        z-index: -1;
    }

    /* Third Card*/
    .third-section-container .card-img-overlay {
        margin-top: -2%;
    }

    /* Third Title*/
    .third-left-container {
        padding-top: 7%;
    }

    .third-section-container .third-title-box {
        display: flex;
        justify-content: start;
    }

    .third-section-container .third-title-box p {
        color: white;
        text-transform: uppercase;
        font-size: 10px;
    }

    .third-section-container .circle-black {
        height: 8px;
        width: 8px;
        background: #1f2835;
        border-radius: 100%;
        margin-top: 3px;
        margin-right: 5px;
    }

    .third-section-container .circle-white {
        height: 8px;
        width: 8px;
        background: white;
        border-radius: 100%;
        margin-top: 3px;
        margin-left: 5px;
    }

    .third-section-container .third-title-second-box {
        display: flex;
        justify-content: start;
        color: white;
        font-size: 18px;
        text-transform: capitalize;
        font-weight: bold;
        margin-top: -10px;
    }
}
@media only screen and (max-width: 452px) {

    /* Third Banner Responsive*/
    .third-section-container .third-image-banner {
        height: 100%;
        width: 50%;
        margin-top: -27%;
        z-index: -1;
    }

    /* Third Card*/
    .third-section-container .card-img-overlay {
        margin-top: -5%;
    }

    /* Third Title*/
    .third-left-container {
        padding-top: 5%;
    }

    .third-section-container .third-title-box {
        display: flex;
        justify-content: start;
    }

    .third-section-container .third-title-box p {
        color: white;
        text-transform: uppercase;
        font-size: 8px;
    }

    .third-section-container .circle-black {
        height: 5px;
        width: 5px;
        background: #1f2835;
        border-radius: 100%;
        margin-top: 3px;
        margin-right: 5px;
    }

    .third-section-container .circle-white {
        height: 5px;
        width: 5px;
        background: white;
        border-radius: 100%;
        margin-top: 3px;
        margin-left: 5px;
    }

    .third-section-container .third-title-second-box {
        display: flex;
        justify-content: start;
    }

    .third-section-container .third-title-second-box {
        color: white;
        font-size: 14px;
        text-transform: capitalize;
        font-weight: bold;
    }
}
@media only screen and (max-width: 360px) {

    /* Third Banner Responsive*/
    .third-section-container .third-image-banner {
        height: 100%;
        width: 50%;
        margin-top: -33%;
        padding-bottom: 30px;
        z-index: -1;
    }

    /* Third Card*/
    .third-section-container .card-img-overlay {
        margin-top: -12%;
    }

    /* Third Title*/
    .third-left-container {
        padding-top: 7%;
    }
    .third-section-container .third-title-box {
        display: flex;
        justify-content: start;
    }

    .third-section-container .third-title-box p {
        color: white;
        text-transform: uppercase;
        font-size: 7px;
    }

    .third-section-container .circle-black {
        height: 5px;
        width: 5px;
        background: #1f2835;
        border-radius: 100%;
        margin-top: 3px;
        margin-right: 5px;
    }

    .third-section-container .circle-white {
        height: 5px;
        width: 5px;
        background: white;
        border-radius: 100%;
        margin-top: 3px;
        margin-left: 5px;
    }

    .third-section-container .third-title-second-box {
        display: flex;
        justify-content: start;
    }

    .third-section-container .third-title-second-box {
        color: white;
        font-size: 13px;
        text-transform: capitalize;
        font-weight: bold;
    }
}

/* Third  Card Responsive Services*/
.third-section-container .wrapper {
    width: 100%;
    position: relative;
}

.third-section-container .card a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media only screen and (min-width: 1745px) {
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 130px;
        max-height: 130px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 25px;
        padding-top: 20px;
    }

    .third-section-container .carousel .card span {
        color: black;
        font-size: 17px;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 60px;
        height: 60px;
        font-size: 18px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 3) - 12px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 60px;
        line-height: 60px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 1744px) {
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 130px;
        max-height: 130px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 25px;
        padding-top: 20px;
    }

    .third-section-container .carousel .card span {
        color: black;
        font-size: 16px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 60px;
        height: 60px;
        font-size: 18px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 3) - 12px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 60px;
        line-height: 60px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 1581px) {
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 130px;
        max-height: 120px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 21px;
        padding-top: 20px;
    }

    .third-section-container .carousel .card span {
        color: black;
        font-size: 15px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 60px;
        height: 60px;
        font-size: 18px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 3) - 12px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 60px;
        line-height: 60px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 1498px) {
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 130px;
        max-height: 120px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 21px;
        padding-top: 20px;
    }

    .third-section-container .carousel .card span {
        color: black;
        font-size: 14px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 60px;
        height: 60px;
        font-size: 18px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 3) - 12px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 60px;
        line-height: 60px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 1416px) {
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 130px;
        max-height: 120px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 21px;
        padding-top: 20px;
    }

    .third-section-container .carousel .card span {
        color: black;
        font-size: 13px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 60px;
        height: 60px;
        font-size: 18px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 3) - 12px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 60px;
        line-height: 60px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 1333px) {
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 100px;
        max-height: 120px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 18px;
        padding-top: 20px;
    }

    .third-section-container .carousel .card span {
        color: black;
        font-size: 12px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 60px;
        height: 60px;
        font-size: 18px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 3) - 12px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 60px;
        line-height: 60px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 1250px) {
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 80px;
        max-height: 100px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 16px;
        padding-top: 20px;
    }

    .third-section-container .carousel .card span {
        color: black;
        font-size: 11px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 50px;
        height: 50px;
        font-size: 16px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 3) - 12px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 60px;
        line-height: 60px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 1168px) {
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 80px;
        max-height: 100px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 15px;
        padding-top: 20px;
    }

    .third-section-container .carousel .card span {
        color: black;
        font-size: 10px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 50px;
        height: 50px;
        font-size: 16px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 3) - 12px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 60px;
        line-height: 60px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 1085px) {
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 80px;
        max-height: 100px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 18px;
        padding-top: 20px;
    }

    .third-section-container .carousel .card span {
        color: black;
        font-size: 13px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 50px;
        height: 50px;
        font-size: 16px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 2) - 5px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 60px;
        line-height: 60px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 1038px) {
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 80px;
        max-height: 100px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 18px;
        padding-top: 20px;
    }

    .third-section-container .carousel .card span {
        color: black;
        font-size: 12px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 50px;
        height: 50px;
        font-size: 16px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 2) - 5px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 60px;
        line-height: 60px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 972px) {
    .third-section-container{
        padding-bottom: 70px;
    }
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 80px;
        max-height: 100px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 18px;
        padding-top: 20px;
    }

    .third-section-container .carousel .card span {
        color: black;
        font-size: 13px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 45px;
        height: 45px;
        font-size: 16px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 2) - 5px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 50px;
        line-height: 50px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 887px) {
    .third-section-container{
        padding-bottom: 130px;
    }
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 80px;
        max-height: 100px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 18px;
        padding-top: 20px;
    }

    .third-section-container .carousel .card span {
        color: black;
        font-size: 12px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 45px;
        height: 45px;
        font-size: 16px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 2) - 5px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 50px;
        line-height: 50px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 833px) {
    .third-section-container{
        padding-bottom: 130px;
    }
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 80px;
        max-height: 100px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 16px;
        padding-top: 20px;
    }

    .third-section-container .carousel .card span {
        color: black;
        font-size: 11px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 45px;
        height: 45px;
        font-size: 16px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 2) - 5px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 50px;
        line-height: 50px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 776px) {
    .third-section-container{
        padding-bottom: 130px;
    }
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 80px;
        max-height: 100px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 15px;
        padding-top: 20px;
    }

    .third-section-container .carousel .card span {
        color: black;
        font-size: 10px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 40px;
        height: 40px;
        font-size: 13px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 2) - 5px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 45px;
        line-height: 45px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 721px) {
    .third-section-container{
        padding-bottom: 100px;
    }
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 80px;
        max-height: 100px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 18px;
        padding-top: 20px;
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 10px;
    }

    .third-section-container .carousel .card span {
        display: none;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -20px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 40px;
        height: 40px;
        font-size: 13px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 2) - 5px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 45px;
        line-height: 45px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 651px) {
    .third-section-container{
        padding-bottom: 100px;
    }
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 80px;
        max-height: 100px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 17px;
        padding-top: 20px;
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 10px;
    }

    .third-section-container .carousel .card span {
        display: none;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -20px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 40px;
        height: 40px;
        font-size: 13px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 2) - 5px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 45px;
        line-height: 45px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 630px) {
    .third-section-container{
        padding-bottom: 100px;
    }
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 80px;
        max-height: 100px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 17px;
        padding-top: 20px;
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 10px;
    }

    .third-section-container .carousel .card span {
        display: none;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -20px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 40px;
        height: 40px;
        font-size: 13px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 1) + 20px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
        margin-top: -20px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 45px;
        line-height: 45px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 528px) {
    .third-section-container{
        padding-bottom: 100px;
    }
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 80px;
        max-height: 100px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 17px;
        padding-top: 20px;
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 10px;
    }

    .third-section-container .carousel .card span {
        display: none;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -20px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 40px;
        height: 40px;
        font-size: 13px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 1) + 20px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
        margin-top: -40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 45px;
        line-height: 45px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 30px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 467px) { 
    .third-section-container{
        padding-bottom: 110px;
    }
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 70px;
        max-height: 90px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 14px;
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 10px;
    }

    .third-section-container .carousel .card span {
        display: none;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -20px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 40px;
        height: 40px;
        font-size: 13px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 1) + 20px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
        margin-top: -40px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 40px;
        line-height: 40px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 20px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 452px) { 
    .third-section-container{
        padding-bottom: 100px;
    }
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 70px;
        max-height: 80px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 14px;
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 10px;
    }

    .third-section-container .carousel .card span {
        display: none;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -20px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 35px;
        height: 35px;
        font-size: 13px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 1) + 20px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
        margin-top: -50px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 40px;
        line-height: 40px;
        cursor: pointer;
        font-size: 1.25rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 10px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
@media only screen and (max-width: 360px) { 
    .third-section-container{
        padding-bottom: 50px;
    }
    .third-section-container .carousel-box {
        margin-top: -5%;
    }

    .third-section-container .carousel-button-box {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-right: 15px;
    }

    .third-section-container .carousel .card img {
        width: 100%;
        height: 100%;
        max-width: 70px;
        max-height: 80px;
        padding-top: 30px;
    }

    .third-section-container .carousel .card h2 {
        color: #fa6f10;
        font-size: 13px;
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 10px;
    }

    .third-section-container .carousel .card span {
        display: none;
    }

    .third-section-container .carousel .arrowup-box {
        display: flex;
        justify-content: center;
        margin-bottom: -20px;
    }
    .third-section-container .carousel .arrowup-box i{
        background: #1f2835;
        color: white;
        width: 30px;
        height: 30px;
        font-size: 10px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .third-section-container .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 1) + 20px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 25px;
        border-radius: 8px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-top: 40px;
        padding-bottom: 40px;
        margin-top: -50px;
    }

    .third-section-container .carousel::-webkit-scrollbar {
        display: none;
    }

    .third-section-container .carousel.no-transition {
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .third-section-container .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .third-section-container .wrapper .carousel-button {
        width: 35px;
        line-height: 35px;
        cursor: pointer;
        font-size: 1.05rem;
        text-align: center;
        background: #1f2835;
        color: white;
        border-radius: 40%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        transform: translateY(-50%);
        transition: transform 0.1s linear;
        padding-top: 0px !important;
        margin-top: 10px;
    }

    .third-section-container .wrapper .carousel-button:active {
        transform: translateY(-50%) scale(0.85);
    }

    .third-section-container .carousel .card {
        max-height: 100%;
        max-width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        border: none;
    }
    .third-section-container .carousel .services-card-box {
        scroll-snap-align: start;
        height: 100%;
        width: 100%;
        list-style: none;
        background: #fff;
        flex-direction: column;
        border-radius: 15px;
        border: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: transform 0.3s ease;
    }
    .third-section-container .carousel .services-card-box:hover {
        transform: translateY(-5px);
    } 
}
/* ---- Third  Section End ----- */

/* ---- Fourth  Section Start -----*/
.fourth-section-container{
    width: 100%;
    height: 100%;
    z-index: 1;
    padding-bottom: 50px;
}
.fourth-section-container .fourth-link-box .nav-link.active{
    background: #fa6f10;
    color: white;
}
/* Responsive Tab & Title*/
@media only screen and (min-width: 1534px) {
    .fourth-section-container .fourth-title{
        color: black;
        font-size: 50px;
        font-weight: bold;
        padding-top: 70px;
    }
    .fourth-section-container .fourth-link-box{
        margin-top: 10px;
        margin-bottom: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 30px;
        padding-right: 30px;
        background: white;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        border-radius: 10px;
    }
    .fourth-section-container .fourth-link-box ul{
        gap: 30px;
        justify-content: center;
    }
    .fourth-section-container .fourth-link-box button{
        color: black;
        font-size: 20px;
    }
}
@media only screen and (max-width: 1533px) {
    .fourth-section-container .fourth-title{
        color: black;
        font-size: 40px;
        font-weight: bold;
        padding-top: 20px;
    }
    .fourth-section-container .fourth-link-box{
        margin-top: 10px;
        margin-bottom: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 20px;
        padding-right: 20px;
        background: white;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        border-radius: 10px;
    }
    .fourth-section-container .fourth-link-box ul{
        gap: 20px;
        justify-content: center;
    }
    .fourth-section-container .fourth-link-box button{
        color: black;
        font-size: 17px;
    }
}
@media only screen and (max-width: 1059px) {
    .fourth-section-container .fourth-title{
        color: black;
        font-size: 35px;
        font-weight: bold;
        padding-top: 10px;
    }
    .fourth-section-container .fourth-link-box{
        margin-top: 10px;
        margin-bottom: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        background: white;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        border-radius: 10px;
    }
    .fourth-section-container .fourth-link-box ul{
        gap: 10px;
        justify-content: center;
    }
    .fourth-section-container .fourth-link-box button{
        color: black;
        font-size: 16px;
    }
}
@media only screen and (max-width: 932px) {
    .fourth-section-container .fourth-title{
        color: black;
        font-size: 30px;
        font-weight: bold;
        padding-top: 0px;
    }
    .fourth-section-container .fourth-link-box{
        margin-top: 10px;
        margin-bottom: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        background: white;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        border-radius: 10px;
    }
    .fourth-section-container .fourth-link-box ul{
        gap: 10px;
        justify-content: center;
    }
    .fourth-section-container .fourth-link-box button{
        color: black;
        font-size: 15px;
    }
}
@media only screen and (max-width: 775px) {
    .fourth-section-container .fourth-title{
        color: black;
        font-size: 20px;
        font-weight: bold;
        padding-top: -10px;
    }
    .fourth-section-container .fourth-link-box{
        margin-top: 5px;
        margin-bottom: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
        background: white;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        border-radius: 10px;
    }
    .fourth-section-container .fourth-link-box ul{
        gap: 0px;
        justify-content: center;
    }
    .fourth-section-container .fourth-link-box button{
        color: black;
        font-size: 12px;
    }
}
@media only screen and (max-width: 575px) {
    .fourth-section-container .fourth-title{
        color: black;
        font-size: 20px;
        font-weight: bold;
        padding-top: -10px;
    }
    .fourth-section-container .fourth-link-box{
        margin-top: 5px;
        margin-bottom: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
        background: white;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        border-radius: 10px;
    }
    .fourth-section-container .fourth-link-box ul{
        gap: 5px 15px;
        justify-content: center;
    }
    .fourth-section-container .fourth-link-box button{
        color: black;
        font-size: 12px;
    }
}
@media only screen and (max-width: 402px) {
    .fourth-section-container .fourth-title{
        color: black;
        font-size: 15px;
        font-weight: bold;
        padding-top: 28px;
    }
    .fourth-section-container .fourth-link-box{
        margin-top: 5px;
        margin-bottom: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
        background: white;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        border-radius: 10px;
    }
    .fourth-section-container .fourth-link-box ul{
        gap: 5px 10px;
        justify-content: center;
    }
    .fourth-section-container .fourth-link-box button{
        color: black;
        font-size: 12px;
    }
}

/* Responsive Image*/
@media only screen and (min-width: 2560px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 948px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 30px;
        font-weight: bold;
        margin-top: 30%;
    }
    .tab-content .client-feedback{
        font-size: 20px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 18px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 18px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 17%;
        margin-right: -30%;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 18px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 15px;
        height: 15px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 2559px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 950px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 30px;
        font-weight: bold;
        margin-top: 30%;
    }
    .tab-content .client-feedback{
        font-size: 20px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 18px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 18px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 17%;
        margin-right: -30%;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 18px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 15px;
        height: 15px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 2400px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 840px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 30px;
        font-weight: bold;
        margin-top: 30%;
    }
    .tab-content .client-feedback{
        font-size: 20px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 18px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 18px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 17%;
        margin-right: -30%;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 18px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 15px;
        height: 15px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 2236px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 760px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 25px;
        font-weight: bold;
        margin-top: 25%;
    }
    .tab-content .client-feedback{
        font-size: 20px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 18px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 18px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 13%;
        margin-right: -20%;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 18px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 15px;
        height: 15px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 2072px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 690px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 25px;
        font-weight: bold;
        margin-top: 20%;
    }
    .tab-content .client-feedback{
        font-size: 20px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 18px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 18px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 8%;
        margin-right: -10%;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 18px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 15px;
        height: 15px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 1920px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 620px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 25px;
        font-weight: bold;
        margin-top: 15%;
    }
    .tab-content .client-feedback{
        font-size: 20px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 18px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 18px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 18px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 15px;
        height: 15px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 1820px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 575px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 25px;
        font-weight: bold;
        margin-top: 10%;
    }
    .tab-content .client-feedback{
        font-size: 20px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 18px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 18px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 4%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 18px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 15px;
        height: 15px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 1696px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 4%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 590px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 25px;
        font-weight: bold;
        margin-top: 10%;
    }
    .tab-content .client-feedback{
        font-size: 20px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 18px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 18px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 6%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 18px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 15px;
        height: 15px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 1411px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 10%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 605px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 22px;
        font-weight: bold;
        margin-top: 10%;
    }
    .tab-content .client-feedback{
        font-size: 17px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 16px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 16px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 18%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 16px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 15px;
        height: 15px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 1295px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 10%;
    }
    .fourth-section-container .tab-content .card{
        width: 90%;
        height: 100%; 
        min-height: 540px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 22px;
        font-weight: bold;
        margin-top: 10%;
    }
    .tab-content .client-feedback{
        font-size: 17px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 16px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 16px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 15%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 16px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 15px;
        height: 15px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 1190px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 10%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 480px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 18px;
        font-weight: bold;
        margin-top: 10%;
    }
    .tab-content .client-feedback{
        font-size: 16px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 14px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 14px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 10%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 14px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 15px;
        height: 15px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 1084px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 15%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 480px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 18px;
        font-weight: bold;
        margin-top: 10%;
    }
    .tab-content .client-feedback{
        font-size: 16px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 14px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 14px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 12%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 14px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 15px;
        height: 15px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 975px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 10%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 380px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 16px;
        font-weight: bold;
        margin-top: 10%;
    }
    .tab-content .client-feedback{
        font-size: 14px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 12px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 12px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 8%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 12px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 10px;
        height: 10px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 857px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 15%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 380px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 16px;
        font-weight: bold;
        margin-top: 10%;
    }
    .tab-content .client-feedback{
        font-size: 14px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 12px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 12px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 8%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 12px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 10px;
        height: 10px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 775px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 17%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 380px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 16px;
        font-weight: bold;
        margin-top: 10%;
    }
    .tab-content .client-feedback{
        font-size: 14px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 12px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 12px;
    }
    .tab-content .work-button{
        width: 50%;
        height: 100%;
        margin-top: 12%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 12px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 10px;
        height: 10px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 724px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 17%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 350px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 15px;
        font-weight: bold;
        margin-top: 10%;
    }
    .tab-content .client-feedback{
        font-size: 12px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 11px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 11px;
    }
    .tab-content .work-button{
        width: 50%;
        height: 100%;
        margin-top: 3%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 12px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 10px;
        height: 10px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 670px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 20%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 335px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 10%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 50%;
        height: 100%;
        margin-top: 15%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 10px;
        height: 10px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 622px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 20%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 305px;
        padding-top: 0px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 10%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 5%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 50%;
        height: 100%;
        margin-top: 10%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 10px;
        height: 10px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 575px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 54%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 260px;
        align-items: center;
        padding-top: 10px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 5%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 3%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 10px;
        height: 10px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 545px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 63%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 250px;
        align-items: center;
        padding-top: 10px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 5%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 3%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 10px;
        height: 10px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 515px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 71%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 250px;
        align-items: center;
        padding-top: 10px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 5%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 3%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 10px;
        height: 10px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 489px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 77%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 250px;
        align-items: center;
        padding-top: 10px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 5%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 3%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 10px;
        height: 10px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 467px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 71%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 200px;
        align-items: center;
        padding-top: 10px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 5%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 3%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 10px;
        height: 10px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 449px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 75%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 200px;
        align-items: center;
        padding-top: 10px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 5%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 3%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 10px;
        height: 10px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 431px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 79%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 200px;
        align-items: center;
        padding-top: 10px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 5%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 3%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 7px;
        height: 7px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 417px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 83%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 200px;
        align-items: center;
        padding-top: 10px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 5%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 3%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 7px;
        height: 7px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 402px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 92%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 200px;
        align-items: center;
        padding-top: 10px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 5%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 3%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 7px;
        height: 7px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 396px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 98%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 200px;
        align-items: center;
        padding-top: 10px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 5%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 3%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 7px;
        height: 7px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 380px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 90%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 150px;
        align-items: center;
        padding-top: 10px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 5%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 3%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 7px;
        height: 7px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 366px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 94%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 150px;
        align-items: center;
        padding-top: 10px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 5%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 3%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 7px;
        height: 7px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 354px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 98%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 150px;
        align-items: center;
        padding-top: 10px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 5%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 3%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 7px;
        height: 7px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 344px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 100%;
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 150px;
        align-items: center;
        padding-top: 10px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 5%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 3%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 7px;
        height: 7px;
        margin-left: 5%;
    }
}
@media only screen and (max-width: 320px) {
    .fourth-section-container .fourth-image-banner{
        padding-top: 390px;
    
    }
    .fourth-section-container .tab-content .card{
        width: 100%;
        height: 100%; 
        min-height: 150px;
        align-items: center;
        padding-top: 150px;
    }
    .fourth-section-container .tab-content .card  img{
        position: absolute;
        bottom: 0;
        max-width: 100%;
        max-height: 100%; 
    }
    .tab-content .client-company{
        font-size: 12px;
        font-weight: bold;
        margin-top: 5%;
    }
    .tab-content .client-feedback{
        font-size: 11px;
        margin-top: 5%;
    }
    .tab-content .client-name{
        font-size: 10px;
        font-style: italic;
        margin-top: 3%;
    }
    .tab-content .client-position{
        font-size: 10px;
    }
    .tab-content .work-button{
        width: 40%;
        height: 100%;
        margin-top: 5%;
        margin-right: 0px;
    }
    .tab-content .work-button button{
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 10px;
        border: none;
        background: white;
        border-radius: 30px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .tab-content .work-button img{
        width: 7px;
        height: 7px;
        margin-left: 5%;
    }
}
.work-button button:hover {
    animation: pulse 1s infinite;
}
  
@keyframes pulse {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.1);
}
100% {
    transform: scale(1);
}
}
/* ---- Fourth  Section End -----*/

.sticky-title{
    position: fixed !important;
    top: 15%;
    width: 35%;
}

/* ---- Fifth  Section Start -----*/
@media only screen and (min-width: 1120px) {
    .fifth-section-container .stick-container{
        padding-top: 30px;
    }
    .fifth-section-container .fifth-title-box{
        display: flex;
        justify-content: start;
        flex-direction: row;
        gap: 20px;
    }
    .fifth-section-container .fifth-title-box span{
        font-size: 16px;
        text-transform: uppercase;
        color: #fa6f10;
    }
    .fifth-section-container .fifth-title-box .fifth-circle{
        background: #1f2835;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        margin-top: 7px;
    }
    .fifth-section-container .fifth-title-box .fifth-second-circle{
        background: #fa6f10;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        margin-top: 7px;
    }
    .fifth-section-container .fifth-main-title-box{
        font-size: 40px;
        font-weight: bold;
        color: black;
        display: flex;
        justify-content: start;
        margin-top: 10px;
    }
    .fifth-section-container .fifth-description-box{
        display: flex;
        text-align: start;
        font-size: 17px;
        color: #808080;
        padding-right: 15px;
        margin-top: 20px;
        justify-content: start;
    }
    .fifth-section-container .fifth-button-box{
        display: flex;
        justify-content: start;
        width: 100%;
        height: auto;
        margin-top: 30px;
        margin-left: 8px;
        text-decoration: none;
    }
    .fifth-section-container .fifth-button-box i{
        font-size: 16px;
        color: white;
        margin-left: 15px;
    }
    .fifth-section-container .fifth-button-box button{
        background: #fa6f10;
        width: 40%;
        height: auto;
        border: none;
        border-radius: 30px;
        padding: 10px;
        color: white;
        font-size: 17px;
        box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
    }
    .fifth-section-container .fifth-button-box button:hover{
        animation: pulse 1s infinite;
    }
    @keyframes pulse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1);
        }
    }
}
@media only screen and (max-width: 1119px) {
    .fifth-section-container .stick-container{
        padding-top: 30px;
    }
    .fifth-section-container .fifth-title-box{
        display: flex;
        justify-content: start;
        flex-direction: row;
        gap: 10px;
    }
    .fifth-section-container .fifth-title-box span{
        font-size: 12px;
        text-transform: uppercase;
        color: #fa6f10;
    }
    .fifth-section-container .fifth-title-box .fifth-circle{
        background: #1f2835;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        margin-top: 4px;
    }
    .fifth-section-container .fifth-title-box .fifth-second-circle{
        background: #fa6f10;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        margin-top: 4px;
    }
    .fifth-section-container .fifth-main-title-box{
        font-size: 30px;
        font-weight: bold;
        color: black;
        display: flex;
        justify-content: start;
        margin-top: 10px;
    }
    .fifth-section-container .fifth-description-box{
        display: flex;
        text-align: start;
        justify-content: start;
        font-size: 13px;
        color: #808080;
        padding-right: 15px;
        margin-top: 20px;
    }
    .fifth-section-container .fifth-button-box{
        display: flex;
        justify-content: start;
        width: 100%;
        height: auto;
        margin-top: 30px;
        margin-left: 10px;
        text-decoration: none;
    }
    .fifth-section-container .fifth-button-box i{
        font-size: 13px;
        color: white;
        margin-left: 15px;
    }
    .fifth-section-container .fifth-button-box button{
        background: #fa6f10;
        width: 40%;
        height: auto;
        border: none;
        border-radius: 30px;
        padding: 10px;
        color: white;
        font-size: 13px;
        box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
    }
    .fifth-section-container .fifth-button-box button:hover{
        animation: pulse 1s infinite;
    }
    @keyframes pulse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1);
        }
    }
}
@media only screen and (max-width: 992px) {
    .fifth-section-container .stick-container{
        padding-top: 0px;
    }
    .fifth-section-container .fifth-title-box{
        display: flex;
        justify-content: start;
        flex-direction: row;
        gap: 10px;
    }
    .fifth-section-container .fifth-title-box span{
        font-size: 12px;
        text-transform: uppercase;
        color: #fa6f10;
    }
    .fifth-section-container .fifth-title-box .fifth-circle{
        background: #1f2835;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        margin-top: 4px;
    }
    .fifth-section-container .fifth-title-box .fifth-second-circle{
        background: #fa6f10;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        margin-top: 4px;
    }
    .fifth-section-container .fifth-main-title-box{
        font-size: 30px;
        font-weight: bold;
        color: black;
        display: flex;
        justify-content: start;
        margin-top: 10px;
    }
    .fifth-section-container .fifth-description-box{
        display: flex;
        text-align: start;
        justify-content: start;
        font-size: 13px;
        color: #808080;
        padding-right: 15px;
        margin-top: 20px;
    }
    .fifth-section-container .fifth-button-box{
        display: flex;
        justify-content: start;
        width: 100%;
        height: auto;
        margin-top: 30px;
        margin-left: 10px;
        text-decoration: none;
    }
    .fifth-section-container .fifth-button-box i{
        font-size: 12px;
        color: white;
        margin-left: 15px;
    }
    .fifth-section-container .fifth-button-box button{
        background: #fa6f10;
        width: 40%;
        height: auto;
        border: none;
        border-radius: 30px;
        padding: 10px;
        color: white;
        font-size: 12px;
        box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
    }
    .fifth-section-container .fifth-button-box button:hover{
        animation: pulse 1s infinite;
    }
    @keyframes pulse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1);
        }
    }
}
@media only screen and (max-width: 767px) {
    .fifth-section-container .stick-container{
        padding-top: 0px;
    }
    .fifth-section-container .fifth-title-box{
        display: flex;
        justify-content: center;
        flex-direction: row;
        gap: 10px;
    }
    .fifth-section-container .fifth-title-box span{
        font-size: 12px;
        text-transform: uppercase;
        color: #fa6f10;
    }
    .fifth-section-container .fifth-title-box .fifth-circle{
        background: #1f2835;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        margin-top: 5px;
    }
    .fifth-section-container .fifth-title-box .fifth-second-circle{
        background: #fa6f10;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        margin-top: 5px;
    }
    .fifth-section-container .fifth-main-title-box{
        font-size: 25px;
        font-weight: bold;
        color: black;
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
    .fifth-section-container .fifth-description-box{
        display: flex;
        text-align: center;
        justify-content: center;
        font-size: 13px;
        color: #808080;
        padding-right: 0px;
        padding-left: 0px;
        margin-top: 10px;
    }
    .fifth-section-container .fifth-button-box{
        display: flex;
        justify-content: center;
        width: 100%;
        height: auto;
        margin-top: 20px;
        margin-left: 0px;
        text-decoration: none;
    }
    .fifth-section-container .fifth-button-box i{
        font-size: 13px;
        color: white;
        margin-left: 5px;
    }
    .fifth-section-container .fifth-button-box button{
        background: #fa6f10;
        width: 40%;
        height: auto;
        border: none;
        border-radius: 30px;
        padding: 10px;
        color: white;
        font-size: 13px;
        box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
    }
    .fifth-section-container .fifth-button-box button:hover{
        animation: pulse 1s infinite;
    }
    @keyframes pulse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1);
        }
    }
}
@media only screen and (max-width: 543px) {
    .fifth-section-container .stick-container{
        padding-top: 0px;
    }
    .fifth-section-container .fifth-title-box{
        display: flex;
        justify-content: center;
        flex-direction: row;
        gap: 10px;
    }
    .fifth-section-container .fifth-title-box span{
        font-size: 10px;
        text-transform: uppercase;
        color: #fa6f10;
    }
    .fifth-section-container .fifth-title-box .fifth-circle{
        background: #1f2835;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        margin-top: 5px;
    }
    .fifth-section-container .fifth-title-box .fifth-second-circle{
        background: #fa6f10;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        margin-top: 5px;
    }
    .fifth-section-container .fifth-main-title-box{
        font-size: 18px;
        font-weight: bold;
        color: black;
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
    .fifth-section-container .fifth-description-box{
        display: flex;
        text-align: center;
        justify-content: center;
        font-size: 11px;
        color: #808080;
        padding-right: 10px;
        padding-left: 10px;
        margin-top: 5px;
    }
    .fifth-section-container .fifth-button-box{
        display: flex;
        justify-content: center;
        width: 100%;
        height: auto;
        margin-top: 20px;
        margin-left: 0px;
        text-decoration: none;
    }
    .fifth-section-container .fifth-button-box i{
        font-size: 11px;
        color: white;
        margin-left: 10px;
    }
    .fifth-section-container .fifth-button-box button{
        background: #fa6f10;
        width: 40%;
        height: auto;
        border: none;
        border-radius: 30px;
        padding: 10px;
        color: white;
        font-size: 11px;
        box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
    }
    .fifth-section-container .fifth-button-box button:hover{
        animation: pulse 1s infinite;
    }
    @keyframes pulse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1);
        }
    }
}

/* ---- Blog Card -----*/
@media only screen and (min-width: 1200px) {
    .blog-container{
        padding-top: 10px;
        padding-bottom: 20px;
    }
    .fifth-section-container .blog-box{
        display: flex;
        justify-content: end;
        gap: 25px;
    }
    .fifth-section-container .blog-card{
        width: 95%;
        height: auto;
        border-radius: 10px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 10px !important;
        padding-left: 10px !important;
        cursor: pointer;
        background: white;
    }
    .fifth-section-container .card{
        min-width: 210px;
        min-height: 150px;
    }
    .blog-box i{
        color: #fa6f10;
        font-size: 18px;
        display: flex;
        align-items: center;
    }
    .blog-box .blog-date{
        color: #808080;
        font-size: 16px;
        padding-left: 10px;
    }
    .blog-box .blog-title{
        color: black;
        font-size: 23px;
        font-weight: bold;
    }
    .blog-box .read-blog{
        color: #808080;
        font-size: 16px;
        text-decoration: underline;
    }
}
@media only screen and (max-width: 1199px) {
    .blog-container{
        padding-top: 10px;
        padding-bottom: 20px;
    }
    .fifth-section-container .blog-box{
        display: flex;
        justify-content: end;
        gap: 25px;
    }
    .fifth-section-container .blog-card{
        width: 95%;
        height: auto;
        border-radius: 10px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 10px !important;
        padding-left: 10px !important;
        cursor: pointer;
        background: white;
    }
    .fifth-section-container .card{
        min-width: 100px;
        min-height: 50px;
        border-radius: 10px;
    }
    .blog-box i{
        color: #fa6f10;
        font-size: 18px;
        display: flex;
        align-items: center;
    }
    .blog-box .blog-date{
        color: #808080;
        font-size: 16px;
        padding-left: 10px;
    }
    .blog-box .blog-title{
        color: black;
        font-size: 23px;
        font-weight: bold;
    }
    .blog-box .read-blog{
        color: #808080;
        font-size: 16px;
        text-decoration: underline;
    }
}
@media only screen and (max-width: 991px) {
    .blog-container{
        padding-top: 10px;
        padding-bottom: 20px;
        gap: 20px;
    }
    .blog-container .blog-box{
       display: flex;
       justify-content: end;
    }
    .fifth-section-container .blog-card{
        width: 99%;
        height: auto;
        border-radius: 10px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 20px;
        padding-left: 20px;
        background: white;
    }
    .fifth-section-container .card{
        width: 40%;
        height: 100px;
        border: none;
    }
    .blog-box i{
        color: #fa6f10;
        font-size: 15px;
        display: flex;
        align-items: center;
    }
    .blog-box .blog-date{
        color: #808080;
        font-size: 13px;
        padding-left: 10px;
    }
    .blog-box .blog-title{
        color: black;
        font-size: 16px;
        font-weight: bold;
    }
    .blog-box .read-blog{
        color: #808080;
        font-size: 13px;
        text-decoration: underline;
    }
}
@media only screen and (max-width: 767px) {
    .blog-container{
        padding-top: 10px;
        padding-bottom: 20px;
        gap: 20px;
    }
    .blog-container .blog-box{
       display: flex;
       justify-content: center;
    }
    .fifth-section-container .blog-card{
        width: 90%;
        height: auto;
        border-radius: 10px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 20px;
        padding-left: 20px;
        background: white;
    }
    .fifth-section-container .card{
        width: 40%;
        height: 130px;
        border: none;
    }
    .blog-box i{
        color: #fa6f10;
        font-size: 15px;
        display: flex;
        align-items: center;
    }
    .blog-box .blog-date{
        color: #808080;
        font-size: 13px;
        padding-left: 10px;
    }
    .blog-box .blog-title{
        color: black;
        font-size: 16px;
        font-weight: bold;
    }
    .blog-box .read-blog{
        color: #808080;
        font-size: 13px;
        text-decoration: underline;
    }
}
@media only screen and (max-width: 491px) {
    .blog-container{
        padding-top: 10px;
        padding-bottom: 20px;
        gap: 20px;
    }
    .blog-container .blog-box{
       display: flex;
       justify-content: center;
    }
    .fifth-section-container .blog-card{
        width: 90%;
        height: auto;
        border-radius: 10px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 20px;
        padding-left: 20px;
        background: white;
    }
    .fifth-section-container .card{
        width: 40%;
        height: 110px;
        border: none;
    }
    .blog-box i{
        color: #fa6f10;
        font-size: 15px;
        display: flex;
        align-items: center;
    }
    .blog-box .blog-date{
        color: #808080;
        font-size: 13px;
        padding-left: 10px;
    }
    .blog-box .blog-title{
        color: black;
        font-size: 16px;
        font-weight: bold;
    }
    .blog-box .read-blog{
        color: #808080;
        font-size: 13px;
        text-decoration: underline;
    }
}
@media only screen and (max-width: 405px) {
    .blog-container{
        padding-top: 10px;
        padding-bottom: 20px;
        gap: 20px;
    }
    .blog-container .blog-box{
       display: flex;
       justify-content: center;
    }
    .fifth-section-container .blog-card{
        width: 90%;
        height: auto;
        border-radius: 10px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 20px;
        padding-left: 20px;
        background: white;
    }
    .fifth-section-container .card{
        width: 40%;
        height: 100px;
        border: none;
    }
    .blog-box i{
        color: #fa6f10;
        font-size: 15px;
        display: flex;
        align-items: center;
    }
    .blog-box .blog-date{
        color: #808080;
        font-size: 13px;
        padding-left: 10px;
    }
    .blog-box .blog-title{
        color: black;
        font-size: 16px;
        font-weight: bold;
    }
    .blog-box .read-blog{
        color: #808080;
        font-size: 13px;
        text-decoration: underline;
    }
}
@media only screen and (max-width: 353px) {
    .blog-container{
        padding-top: 10px;
        padding-bottom: 20px;
        gap: 20px;
    }
    .blog-container .blog-box{
       display: flex;
       justify-content: center;
    }
    .fifth-section-container .blog-card{
        width: 90%;
        height: auto;
        border-radius: 10px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 20px;
        padding-left: 20px;
        background: white;
    }
    .fifth-section-container .card{
        width: 40%;
        height: 85px;
        border: none;
    }
    .blog-box i{
        color: #fa6f10;
        font-size: 15px;
        display: flex;
        align-items: center;
    }
    .blog-box .blog-date{
        color: #808080;
        font-size: 13px;
        padding-left: 10px;
    }
    .blog-box .blog-title{
        color: black;
        font-size: 16px;
        font-weight: bold;
    }
    .blog-box .read-blog{
        color: #808080;
        font-size: 13px;
        text-decoration: underline;
    }
}
@media only screen and (max-width: 320px) {
    .blog-container{
        padding-top: 10px;
        padding-bottom: 20px;
        gap: 20px;
    }
    .blog-container .blog-box{
       display: flex;
       justify-content: center;
    }
    .fifth-section-container .blog-card{
        width: 90%;
        height: auto;
        border-radius: 10px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-right: 20px;
        padding-left: 20px;
        background: white;
    }
    .fifth-section-container .card{
        width: 40%;
        height: 75px;
        border: none;
    }
    .blog-box i{
        color: #fa6f10;
        font-size: 11px;
        display: flex;
        align-items: center;
    }
    .blog-box .blog-date{
        color: #808080;
        font-size: 10px;
        padding-left: 10px;
    }
    .blog-box .blog-title{
        color: black;
        font-size: 13px;
        font-weight: bold;
    }
    .blog-box .read-blog{
        color: #808080;
        font-size: 10px;
        text-decoration: underline;
    }
}
/* ---- Fifth  Section End -----*/

/* ---- Animation  Section Start -----*/
/* First/Second Section */
.main-image-banner{
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.main-image-banner.visible{
    opacity: 1;
    transform: translateY(0);
}
.slider-container,
.main-title-container{
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.main-title-container.visible,
.slider-container.visible{
    opacity: 1;
    transform: translateY(0);
}
.title-left-container{
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.title-left-container.visible {
    opacity: 1;
    transform: translateX(0);
}
.title-right-container{
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.title-right-container.visible{
    opacity: 1;
    transform: translateX(0);
}
.process-container{
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.process-container.visible{
    opacity: 1;
    transform: translateY(0px);
}
/* Third Section */
.third-image-banner,
.third-left-container{
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.third-image-banner.visible,
.third-left-container.visible {
    opacity: 1;
    transform: translateX(0);
}
.carousel-box {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.carousel-box.visible {
    opacity: 1;
    transform: translateX(0);
}
/* Fourth/Fifth Section */
.fourth-title,
.fourth-link-box,
.fourth-image-banner{
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.fourth-title.visible,
.fourth-link-box.visible,
.fourth-image-banner.visible {
    opacity: 1;
    transform: translateX(0);
}
.tab-pane-left-1,
.tab-pane-left-2,
.tab-pane-left-3,
.tab-pane-left-4,
.stick-container {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.tab-pane-left-1.visible,
.tab-pane-left-2.visible,
.tab-pane-left-3.visible,
.tab-pane-left-4.visible,
.stick-container.visible {
    opacity: 1;
    transform: translateX(0);
}
.tab-pane-right-1,
.tab-pane-right-2,
.tab-pane-right-3,
.tab-pane-right-4,
.blog-box {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.tab-pane-right-1.visible,
.tab-pane-right-2.visible,
.tab-pane-right-3.visible,
.tab-pane-right-4.visible,
.blog-box.visible {
    opacity: 1;
    transform: translateX(0);
}
/* ---- Animation  Section Start -----*/