.service-card{
    height:auto !important;
}
.slide-background {
    justify-content: normal !important;
}
.help-list hr {
    border-top: 1px solid #ffffff52 !important;
}
.service-section-title {
    font-size: 33px !important;
    margin-bottom: 8% !important;
}
.service-highlights-list{
    gap:10px !important
}
.service-highlight-item {
    padding: 15px 24px !important;
}
.cta-button {
    background: linear-gradient(to right, #e0eaec, #fcfcfc);
    color: #0b5c6f !important;
    border: none;
    padding: 17px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: .2s;
    margin-top: auto;
}
    .cta-button:hover {
        background: #0000004a;
        color: #fff !important;
        border: 2px solid #fff;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgb(15 122 140 / .3);
    }
.container-small {
    width: 100%;
    max-width: 1200px !important;
    margin: 0 auto;
    padding: 0 20px
}
___________________
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .logo, .nav-menu {
        align-items: center;
        display: flex
    }

        .logo img {
            height: 40px
        }

    .nav-menu {
        list-style: none;
        font-size: 17px
    }

    .nav-item {
        margin-left: 50px
    }

    .nav-link {
        text-decoration: none;
        color: var(--dark-color);
        font-weight: 500;
        transition: color .3s
    }

        .agenda-icon, .nav-link:hover, .reel-btn i, .section-heading, .service-icon, .service-title {
            color: var(--primary-color)
        }

    .whatsapp-icon {
        background-color: #25d366;
        color: #fff;
        width: 120px;
        height: 50px;
        border-radius: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
        transition: transform .3s;
        text-decoration: none
    }

    .btn-default-icon-call, .btn-default-icon-whatsapp {
        padding: 15px;
        margin: 10px;
        text-decoration: none !important
    }

    .cta-button, .cta-button:hover {
        text-decoration: none;
        color: #fff
    }

    .contactsec {
        display: flex;
        gap: 18px
    }

        .contactsec img {
            vertical-align: middle
        }

    .btn-default-icon-whatsapp {
        border-radius: 15px;
        background-color: #4ec95c;
        border: 2px solid #4ec95c;
        color: #fff !important
    }

    .btn-default-icon-call {
        border-radius: 15px;
        background-color: #fff;
        border: 2px solid #0076bf;
        color: #0072b9 !important
    }

        .btn-default-icon-call:hover, .btn-default-icon-whatsapp:hover {
            border: 2px solid #1f7b93;
            color: #1f7b93 !important;
            background-color: #fff0;
            text-decoration: none
        }

    .mobile-menu-btn {
        display: none;
        background: 0 0;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--primary-color)
    }

    .hero-section {
        background: linear-gradient(to right,rgb(7 65 79 / .9),rgb(7 65 79 / .8)) center/cover,url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1350&q=80) center/cover;
        padding: 50px 0;
        color: #fff
    }

    .hero-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center
    }

    .hero-content {
        flex: 1;
        min-width: 300px;
        padding: 20px;
        margin-bottom: 10%
    }

    .hero-headline {
        font-size: 30px;
        margin-bottom: 20px
    }

    .hero-subtext, .reel-btn i {
        font-size: 18px
    }

    .hero-subtext {
        margin-bottom: 30px;
        max-width: 500px
    }

    .btn-primary {
        font-size: 1rem;
        width: 100%
    }

    .booking-form {
        background-color: #fff;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgb(0 0 0 / .2);
        color: var(--dark-color)
    }

    .form-group {
        margin-bottom: 10px
    }

    .form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: var(--primary-color)
    }

    .form-input {
        font-size: 15px;
        width: 100%;
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        transition: border-color .3s
    }

        .form-input:focus {
            border-color: var(--primary-color);
            outline: 0;
            box-shadow: 0 0 0 2px rgb(7 65 79 / .2)
        }

    .btn-primary {
        background: linear-gradient(45deg,#0e3f4c,#045a72);
        color: #fff;
        border: none;
        padding: 12px 25px;
        border-radius: 4px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color .3s
    }

    .reel-btn, .reel-controls {
        display: flex;
        transition: .3s
    }

    .btn-primary:hover {
        background: #ffff !important;
        border: 2px solid #0e3f4c;
        color: #0e3f4c
    }

    .hero-media {
        flex: 1;
        min-width: 300px;
        padding: 20px;
        position: relative;
        margin-bottom: 11%
    }

    .reel-container {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgb(0 0 0 / .3);
        height: 740px;
        max-height: 200vh
    }

    .reel-controls, .reel-progress {
        position: absolute;
        left: 0;
        right: 0
    }

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

    .reel-controls {
        position: absolute;
        bottom: 12px;
        right: 12px;
        left: auto;
        gap: 10px;
        opacity: 0;
        visibility: hidden
    }

    .reel-container:hover .reel-controls {
        opacity: 1;
        visibility: visible
    }

    .reel-btn {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: rgb(255 255 255 / .8);
        align-items: center;
        justify-content: center;
        cursor: pointer
    }

        .reel-btn:hover, .section-light {
            background-color: #fff
        }

    .agenda-item:hover, .feature-item:hover, .service-card:hover {
        transform: translateY(-5px)
    }

    .reel-progress {
        bottom: 0;
        height: 4px;
        background-color: rgb(255 255 255 / .3)
    }

    .reel-progress-inner {
        height: 100%;
        width: 0%;
        background-color: var(--accent-color);
        transition: width .3s
    }

    .agenda-item, .feature-item, .service-card {
        border-radius: 8px;
        transition: transform .3s
    }

    .section {
        padding: 80px 0
    }

    .section-dark {
        background-color: #f9f9f9
    }

    .theme-dark {
        background-color: #e1f3f8
    }

    .agenda-item, .service-card {
        background-color: #fff;
        padding: 30px;
        box-shadow: 0 5px 15px rgb(0 0 0 / .05)
    }

    .section-heading {
        margin-bottom: 50px
    }
        .section-heading{
            text-align:center !important;
        }
        .section-title {
            font-size: 2.2rem;
            margin-bottom: 15px;
            text-align: center !important;
        }

    .agenda-items {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
        gap: 30px
    }

    .agenda-icon, .service-icon {
        font-size: 32px;
        margin-bottom: 20px
    }

    .agenda-text {
        font-size: 1.1rem
    }

    .services-container {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
        gap: 30px
    }

    .service-title {
        font-size: 18px !important;
        margin-bottom: 15px
    }

    .company-section {
        background-color: var(--primary-color);
        color: #fff;
        padding: 60px 0;
        font-size: 18px
    }

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

    .company-features {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
        gap: 20px;
        margin-top: 40px
    }

    .feature-item {
        background-color: rgb(255 255 255 / .1);
        padding: 25px 20px;
        backdrop-filter: blur(5px);
        border: 1px solid;
        margin-top: 25px;
        display: flex;
        height: 130px
    }

        .feature-item:hover {
            background-color: rgb(255 255 255 / .15)
        }

        .feature-item .icon {
            flex-shrink: 0
        }

    .cta-section {
        background: linear-gradient(to right,var(--primary-color),var(--secondary-color));
        color: #f9fafa;
        border-radius: 30px;
        padding: 46px;
        margin: 4%
    }

    .cta-heading {
        font-size: 2rem;
        margin-bottom: 25px
    }

  

    .footer {
        background-color: #07414fd9;
        color: #fff;
        padding: 30px 0
    }

    @media (max-width:992px) {
        .hero-headline {
            font-size: 2rem
        }

        .section-title {
            font-size: 1.8rem
        }

        .reel-container {
            height: 500px
        }
    }

    @media (min-width:992px) {
        .btn-default-icon, .btn-default-icon-whatsapp {
            display: inline-block
        }
    }

    .commonfooter {
        display: none
    }

    #contactform {
        scroll-margin-top: 200px
    }

    :root {
        --primary-color: #07414f;
        --secondary-color: #0c6377;
        --accent-color: #0c6377;
        --light-color: #f5f5f5;
        --dark-color: #565353;
        --primary-teal: #1a7a8e;
        --primary-dark: #0f4c5c;
        --accent-gold: #d4a574;
        --text-primary: #1a2332;
        --text-secondary: #4a5568;
        --text-light: #718096;
        --background-cream: #fdfbf7;
        --background-white: #ffffff;
        --border-subtle: #e8e5df;
        --success-green: #059669
    }

    .mark, mark {
        background-color: #f2ecccb5 !important;
        padding: 1px !important
    }

    .contact-form-wrapper, .custom-checkbox-input, .form-input-field {
        background: var(--background-white)
    }

    .date-info {
        display: flex;
        gap: 20px;
        font-weight: 500;
        font-size: 17px;
        justify-content: center
    }

    .expert-registration-section {
        max-width: 1400px;
        margin: 0 auto;
        padding: 80px 24px;
        position: relative;
        overflow: hidden
    }

        .expert-registration-section::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle,rgb(26 122 142 / .08) 0,transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            animation: 20s ease-in-out infinite float-gentle
        }

        .expert-registration-section::after {
            content: '';
            position: absolute;
            bottom: -50px;
            left: -50px;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle,rgb(212 165 116 / .06) 0,transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            animation: 15s ease-in-out infinite reverse float-gentle
        }

    @keyframes float-gentle {
        0%,100% {
            transform: translate(0,0) scale(1)
        }

        50% {
            transform: translate(30px,-30px) scale(1.1)
        }
    }

    .registration-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        position: relative;
        z-index: 1
    }

    .contact-form-wrapper {
        padding: 48px;
        border-radius: 24px;
        box-shadow: 0 4px 6px rgb(0 0 0 / .02),0 20px 40px rgb(26 122 142 / .08),inset 0 1px 0 rgb(255 255 255 / .9);
        border: 1px solid var(--border-subtle);
        position: relative;
        overflow: hidden;
        animation: .8s cubic-bezier(.16,1,.3,1) slide-in-left
    }

    @keyframes slide-in-left {
        from {
            opacity: 0;
            transform: translateX(-40px)
        }

        to {
            opacity: 1;
            transform: translateX(0)
        }
    }

    .contact-form-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg,var(--primary-teal),#11b0d1)
    }

    .form-header-section {
        margin-bottom: 36px
    }

    .form-headline {
        font-size: 26px;
        font-weight: 700;
        color: var(--primary-dark);
        margin-bottom: 12px;
        line-height: 1.2
    }

    .form-subheadline {
        font-size: 16px;
        color: var(--text-secondary);
        font-weight: 400
    }

    .registration-form-grid {
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .form-row-dual {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px
    }

    .input-group {
        display: flex;
        flex-direction: column;
        gap: 0
    }

    .input-label {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        letter-spacing: .3px
    }

    .form-input-field {
        padding: 8px 18px;
        border: 2px solid var(--border-subtle);
        border-radius: 4px;
        font-size: 15px;
        color: var(--text-primary);
        transition: .3s cubic-bezier(.4,0,.2,1);
        outline: 0
    }

        .form-input-field:focus {
            border-color: var(--primary-teal);
            box-shadow: 0 0 0 4px rgb(26 122 142 / .1);
            transform: translateY(-1px)
        }

        .form-input-field::placeholder {
            color: var(--text-light)
        }

    .textarea-field {
        min-height: 120px;
        resize: vertical
    }

    .checkbox-container {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-top: 8px
    }

    .custom-checkbox-wrapper {
        position: relative;
        display: flex;
        align-items: center
    }

    .custom-checkbox-input {
        width: 22px;
        height: 22px;
        border: 2px solid var(--primary-dark);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        flex-shrink: 0;
        transition: .3s;
        appearance: none;
        -webkit-appearance: none
    }

        .custom-checkbox-input:checked {
            background: var(--primary-dark);
            border-color: var(--primary-dark)
        }

            .custom-checkbox-input:checked::after {
                content: '✓';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                color: #fff;
                font-size: 14px;
                font-weight: 700
            }

    .checkbox-label-text {
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.5;
        cursor: pointer
    }

    .submit-button-primary {
        padding: 16px 40px;
        background: linear-gradient(135deg,var(--primary-teal) 0,var(--primary-dark) 100%);
        color: #fff;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: .4s cubic-bezier(.4,0,.2,1);
        box-shadow: 0 4px 12px rgb(26 122 142 / .3);
        position: relative;
        overflow: hidden;
        margin-top: 12px
    }

        .submit-button-primary::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgb(255 255 255 / .2);
            transform: translate(-50%,-50%);
            transition: width .6s,height .6s
        }

        .submit-button-primary:hover::before {
            width: 300px;
            height: 300px
        }

        .submit-button-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgb(26 122 142 / .4)
        }

        .submit-button-primary:active {
            transform: translateY(0)
        }

    .expert-info-wrapper {
        animation: .8s cubic-bezier(.16,1,.3,1) .2s both slide-in-right
    }

    @keyframes slide-in-right {
        from {
            opacity: 0;
            transform: translateX(40px)
        }

        to {
            opacity: 1;
            transform: translateX(0)
        }
    }

    .expert-main-headline {
        font-size: 28px;
        font-weight: 700;
        color: var(--primary-dark);
        line-height: 1.15;
        margin-bottom: 24px;
        letter-spacing: -.5px
    }

    .expert-subtitle-emphasis {
        font-size: 20px;
        color: #212224;
        margin-bottom: 32px;
        line-height: 1.6
    }

        .expert-subtitle-emphasis strong {
            color: var(--primary-teal);
            font-weight: 600
        }

    .certification-badge-container {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: linear-gradient(135deg,rgb(26 122 142 / .08),rgb(212 165 116 / .08));
        padding: 16px 24px;
        border-radius: 12px;
        margin-bottom: 40px;
        border: 1px solid
    }

    .cert-icon-badge {
        width: 40px;
        height: 40px;
        background: var(--primary-teal);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 700;
        font-size: 18px
    }

    .cert-text-content {
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.4
    }

        .cert-text-content strong {
            display: block;
            color: var(--primary-dark);
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 2px
        }

    .benefits-showcase-list {
        list-style: none;
        display: grid;
        gap: 20px;
        margin-top: 36px
    }

    .benefit-item-row {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
        background: var(--background-white);
        border-radius: 12px;
        border-left: 4px solid var(--primary-teal);
        box-shadow: 0 2px 8px rgb(0 0 0 / .04);
        transition: .3s
    }

        .benefit-item-row:hover {
            transform: translateX(8px);
            box-shadow: 0 4px 16px rgb(26 122 142 / .12)
        }

    .benefit-checkmark-icon {
        width: 22px;
        height: 22px;
        background: linear-gradient(135deg,#16687a,#073e4a);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        flex-shrink: 0
    }

    .benefit-text-content {
        flex: 1
    }

    .benefit-title-text {
        font-weight: 600;
        color: #4a5568;
        font-size: 18px;
        margin-bottom: 4px
    }

    .benefit-description-text {
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.5
    }

    .btn-default-icon {
        padding: 15px;
        border-radius: 15px;
        margin: 10px;
        background-color: #1f7b93;
        border: 1px solid #1f7b93;
        color: #fff;
        width: 100%
    }

    .btn-close {
        width: 50px;
        height: 50px;
        background: #fff0;
        color: #000;
        position: absolute;
        top: -12px;
        right: -8px;
        margin: 10px;
        border: none
    }

    .modal-header {
        border-bottom: unset !important
    }

    @media (max-width:1024px) {
        .registration-container {
            grid-template-columns: 1fr;
            gap: 48px
        }

        .expert-main-headline {
            font-size: 40px
        }
    }

    @media (max-width:768px) {
        .modal-dialog {
            top: 50px
        }
        .schedule-meet {
            display: grid;
             margin-left:0 !important; 
        }

        .header-container, .hero-section {
            padding: 10px 0
        }

        .nav-menu {
            display: none;
            flex-direction: column;
            position: absolute;
            top: 70px;
            left: 0;
            width: 100%;
            background-color: #fff;
            box-shadow: 0 5px 10px rgb(0 0 0 / .1);
            padding: 20px;
            z-index: 99
        }

            .nav-menu.active {
                display: flex
            }

        .nav-item {
            margin: 10px 0;
            font-size: 12px
        }

        .mobile-menu-btn {
            display: block
        }

        .hero-content, .hero-media {
            flex: 100%;
            margin: 0 0 -25px
        }

        .section {
            padding: 60px 0
        }

        .cta-heading, .expert-subtitle-emphasis {
            font-size: 18px
        }

        .cta-button {
            font-size: 12px
        }
        .cta-section{
            padding:25px;
        }
        .sub-heading-content h4 {
            font-size: 25px !important;
        }
        .item .slider-card:first-child, .slide-background {
            padding: 10px;
            height: auto !important;
        }
        .slide-background {
            border-radius: 22px !important;
        }
            .slide-background p {
                font-size: 15px !important;
                line-height: 25px;
                text-align: start !important
            }
            .ctafont {
                font-size: 15px !important;
            }
        .section-space {
            margin : 0 0;
        }
        .footer-bg h4{
            font-size:15px !important;
        }
        .reel-container {
            height: 400px;
            border-radius: 12px
        }

        .service-icon {
            text-align: center;
            font-size: 20px
        }

        .expert-registration-section {
            padding: 48px 20px
        }

        .contact-form-wrapper {
            padding: 32px 24px
        }

        .form-headline {
            font-size: 28px
        }

        .form-row-dual {
            grid-template-columns: 1fr;
            gap: 24px
        }

        .expert-main-headline {
            font-size: 32px
        }

        .benefits-showcase-list {
            gap: 16px
        }

        .benefit-item-row:hover {
            transform: translateX(4px)
        }
    }

    @media (max-width:480px) {
        .hero-headline, .section-title {
            font-size: 20px
        }

        .agenda-item, .booking-form, .service-card {
            padding: 20px
        }

        .reel-container {
            height: 350px
        }

        .office-main-title {
            font-size: 30px !important
        }

        .service-title {
            font-size: 15px !important;
        }
        .sub-heading-content h4 {
            font-size: 25px !important;
        }
        .reel-controls {
            flex-direction: row;
            right: 4px;
            bottom: 12px
        }
        .owl-dots{
            display:none !important;
        }
        .reel-btn {
            width: 30px;
            height: 30px
        }
        .dynamicsFont {
            font-size: 20px !important;
        }
            .hero-subtext, .reel-btn i {
                font-size: 14px
            }

        .expert-registration-section {
            padding: 32px 16px
        }

        .contact-form-wrapper {
            padding: 24px 20px
        }

        .form-headline {
            font-size: 24px
        }

        .expert-main-headline {
            font-size: 22px
        }

        .submit-button-primary {
            width: 100%
        }
    }

    .faq-container {
        max-width: 1200px;
        margin: 50px auto;
        padding: 20px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgb(0 0 0 / .1)
    }

        .faq-container h2 {
            color: #00788c;
            margin-bottom: 40px
        }

    .faq-item {
        background-color: #f7fafc;
        border-radius: 8px;
        margin-bottom: 15px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgb(0 0 0 / .05)
    }

    .faq-question {
        background-color: #edf2f7;
        padding: 18px 20px;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background .3s;
        font-size: 18px;
        cursor: pointer
    }

        .faq-question:hover {
            background-color: #e2e8f0
        }

    .arrow {
        font-size: 30px;
        color: #00788c;
        transition: transform .3s;
        font-weight: 700
    }

    .faq-answer {
        height: 0;
        overflow: hidden;
        transition: max-height .4s,padding .4s;
        background: #f9fafb;
        padding: 0 20px;
        color: #4a5568
    }

        .faq-answer p {
            font-size: 18px;
            color: #000
        }

    .faq-item.active .faq-answer {
        padding: 15px 20px 20px
    }

    .faq-item.active .arrow {
        transform: rotate(90deg)
    }

    .box-container, .office-addins-container {
        max-width: 1200px;
        margin: 0 auto
    }

    .service-body {
        line-height: 1.6;
        color: #333;
        background-color: #07414f;
        padding: 40px 20px
    }

    .office-main-title {
        text-align: center;
        font-size: 40px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 20px
    }

    .office-subtitle {
        text-align: center !important;
        font-size: 18px !important;
        color: #fff;
        margin-bottom: 30px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto
    }

    .office-section-title {
        font-size: 1.8rem;
        font-weight: 600;
        color: #0f7a95;
        margin-bottom: 30px;
        text-align: center
    }

    .office-services-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 25px;
        margin: 0 auto;
        max-width: 1100px;
        padding: 20px;
        justify-content: center
    }

    .office-service-card {
        background: #fff;
        border-radius: 30px;
        padding: 30px;
        width: 100%;
        min-height: 200px;
        box-shadow: 0 6px 20px rgb(0 0 0 / .08);
        border-bottom: 10px solid #0f7a95;
        transition: .3s
    }

        .office-service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgb(0 0 0 / .12)
        }

    .office-service-title {
        font-size: 18px !important;
        font-weight: 600;
        color: #0f7a95;
        margin-bottom: 12px;
        line-height: 1.3
    }

    .office-service-description {
        color: #272424;
        font-size: 18px !important;
        line-height: 1.5;
        text-align: left !important;
        margin-top: 20px
    }

    @media (max-width:1200px) {
        .office-services-grid {
            grid-template-columns: repeat(auto-fit,minmax(280px,320px));
            gap: 20px
        }
    }