/* ================================
           RESET
        ================================= */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            background: #ffffff;
        }

        /* ================================
           TOP BAR
        ================================= */
        .therapy-topbar {
            width: 100%;
            background: linear-gradient(
                90deg,
                #294f8f 0%,
                #3d70ae 50%,
                #397e9f 100%
            );
            color: #ffffff;
            padding: 9px 0;
            position: relative;
            overflow: hidden;
        }

        /* Soft decorative glow */
        .therapy-topbar::before {
            content: "";
            position: absolute;
            width: 180px;
            height: 180px;
            background: rgba(255, 255, 255, 0.07);
            border-radius: 50%;
            left: 20%;
            top: -140px;
        }

        .therapy-topbar::after {
            content: "";
            position: absolute;
            width: 130px;
            height: 130px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
            right: 12%;
            bottom: -110px;
        }

        /* Main container */
        .topbar-container {
            width: 100%;
            max-width: 1450px;
            margin: 0 auto;

            /* Padding on both sides */
            padding-left: 50px;
            padding-right: 50px;

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

            position: relative;
            z-index: 2;
        }

        /* ================================
           LEFT CONTACT AREA
        ================================= */
        .topbar-contact {
            display: flex;
            align-items: center;
            gap: 28px;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 9px;

            color: #ffffff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;

            transition: 0.25s ease;
        }

        .contact-item i {
            width: 27px;
            height: 27px;

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

            background: rgba(255,255,255,0.12);
            border-radius: 50%;

            color: #bdf1df;
            font-size: 12px;

            transition: 0.25s ease;
        }

        .contact-item:hover {
            color: #d7fff2;
        }

        .contact-item:hover i {
            background: #ffffff;
            color: #2d6597;
            transform: scale(1.05);
        }

        /* Divider */
        .contact-divider {
            width: 1px;
            height: 18px;
            background: rgba(255,255,255,0.25);
        }

        /* ================================
           RIGHT SOCIAL AREA
        ================================= */
        .topbar-right {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .follow-text {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(255,255,255,0.8);
        }

        .social-icons {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .social-icons a {
            width: 30px;
            height: 30px;

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

            border-radius: 50%;

            color: #ffffff;
            text-decoration: none;

            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.18);

            font-size: 13px;

            transition: all 0.25s ease;
        }

        /* Facebook */
        .social-icons .facebook:hover {
            background: #ffffff;
            color: #1877f2;
            transform: translateY(-2px);
        }

        /* Instagram */
        .social-icons .instagram:hover {
            background: #ffffff;
            color: #e1306c;
            transform: translateY(-2px);
        }

        /* Google */
        .social-icons .google:hover {
            background: #ffffff;
            color: #4285f4;
            transform: translateY(-2px);
        }

        /* YouTube */
        .social-icons .youtube:hover {
            background: #ffffff;
            color: #ff0000;
            transform: translateY(-2px);
        }

      
        /* ================================
           TABLET
        ================================= */
        @media (max-width: 900px) {

            .topbar-container {
                padding-left: 25px;
                padding-right: 25px;
            }

            .topbar-contact {
                gap: 15px;
            }

            .follow-text {
                display: none;
            }
        }

        /* ================================
           MOBILE
        ================================= */
        @media (max-width: 700px) {

            .therapy-topbar {
                padding: 10px 0;
            }

            .topbar-container {
                padding-left: 15px;
                padding-right: 15px;

                flex-direction: column;
                justify-content: center;

                gap: 9px;
            }

            .topbar-contact {
                justify-content: center;
                flex-wrap: wrap;
                gap: 7px 15px;
            }

            .contact-divider {
                display: none;
            }

            .contact-item {
                font-size: 12px;
            }

            .contact-item i {
                width: 24px;
                height: 24px;
                font-size: 10px;
            }

            .topbar-right {
                justify-content: center;
            }

            .social-icons a {
                width: 28px;
                height: 28px;
            }
        }

        /* ================================
           VERY SMALL MOBILE
        ================================= */
        @media (max-width: 420px) {

            .topbar-contact {
                flex-direction: column;
                gap: 5px;
            }

            .topbar-container {
                padding-left: 10px;
                padding-right: 10px;
            }
        }
        
        
        
        
        
    /* ==================================================
   STICKY HEADER
================================================== */

.main-header {

    position: sticky;

    top: 0;

    z-index: 9999;

    background:
        rgba(255,255,255,.98);

    box-shadow:
        0 5px 25px
        rgba(35,65,95,.09);

    backdrop-filter: blur(12px);
}


/* ==================================================
   HEADER CONTAINER
================================================== */

.header-container {

    max-width: 1450px;

    margin: auto;

    padding: 0 50px;

    min-height: 96px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* ==================================================
   LOGO
================================================== */

.site-logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;
}


/*
 Actual logo image supplied by you.
 Put the image inside:

 images/unique-mind-logo.jpg
*/

.site-logo img {

    width: 250px;

    height: 78px;

    object-fit: contain;

    display: block;
}


/* ==================================================
   NAVIGATION WRAPPER
================================================== */

.navigation-wrapper {

    display: flex;

    align-items: center;

    gap: 21px;
}

.main-navigation {

    display: flex;

    align-items: center;
}


/* ==================================================
   MAIN MENU
================================================== */

.main-menu {

    list-style: none;

    display: flex;

    align-items: center;

    gap: 2px;
}

.main-menu > li {

    position: relative;
}

.main-menu > li > a {

   height: 96px;

    display: flex;
    align-items: center;

    position: relative;

    padding: 0 14px;

    /* Stylish font */
    font-family: "Nunito Sans", sans-serif;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 0.2px;

    color: #34495e;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


/* UNDERLINE */

/* ELEGANT UNDERLINE */

.main-menu > li > a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 24px;

    width: 0;

    height: 3px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #345995,
        #47a596
    );

    transform: translateX(-50%);

    transition: width 0.3s ease;
}

.main-menu > li:hover > a {

    color: #347d75;

    transform: translateY(-1px);
}


.main-menu > li:hover > a::after,
.main-menu > li.active > a::after {

    width: 28px;
}


/* ARROW */


/* SERVICES ARROW */

.menu-arrow {

    margin-left: 7px;

    font-size: 9px;

    color: #55978e;

    transition: transform 0.25s ease;
}


.services-menu:hover .menu-arrow {

    transform: rotate(180deg);
}

/* ==================================================
   WHATSAPP BUTTON
================================================== */

.whatsapp-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px 18px;

    border-radius: 40px;

    background: #25D366;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    box-shadow:
        0 8px 20px
        rgba(37,211,102,.25);

    transition: .25s;
}

.whatsapp-btn i {

    font-size: 20px;
}

.whatsapp-btn:hover {

    background: #1fbd5a;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(37,211,102,.35);
}


/* ==================================================
   SERVICES MEGA MENU
================================================== */

.mega-menu {

    position: fixed;

    top: 96px;

    left: 50%;

    transform:
        translateX(-50%)
        translateY(12px);

    width:
        min(
            1330px,
            calc(100vw - 60px)
        );

    background: #ffffff;

    border-radius: 18px;

    padding: 22px;

    display: grid;

    /*
     Three categories +
     one image section
    */

    grid-template-columns:
        1fr
        1fr
        1fr
        330px;

    gap: 18px;

    border:
        1px solid
        rgba(38,77,110,.08);

    box-shadow:
        0 25px 70px
        rgba(25,55,80,.17);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: .22s ease;
}


/* Hover Bridge */

.mega-menu::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 25px;

    top: -25px;

    left: 0;
}


/* SHOW MEGA MENU */

.services-menu:hover .mega-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* ==================================================
   CATEGORY
================================================== */

.mega-category {

    padding: 5px;
}

/* Mega Menu Category Heading */

.mega-category-title {

    font-family: "Nunito Sans", sans-serif;

    color: #3a8d82;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    margin-bottom: 12px;

    padding-left: 10px;

    display: flex;

    align-items: center;

    gap: 8px;
}
.mega-category-title i {

    width: 28px;

    height: 28px;

    border-radius: 8px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #edf7f5;

    font-size: 12px;
}


/* ==================================================
   SERVICES
================================================== */

.service-list {

    display: flex;

    flex-direction: column;

    gap: 3px;
}

.service-item {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 10px;

    border-radius: 11px;

    color: #495964;

    transition: .22s;
}

.service-item:hover {

    background: #f0f8f7;

    transform: translateX(4px);
}


/* SERVICE ICON */

.service-icon {

    width: 36px;

    height: 36px;

    border-radius: 10px;

    flex-shrink: 0;

    background: #edf6f5;

    color: #388c80;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    transition: .25s;
}

.service-item:hover .service-icon {

    background: #3f8f85;

    color: #ffffff;
}


/* SERVICE NAME */

.service-info strong {

    display: block;

    font-family: "Nunito Sans", sans-serif;

    font-size: 14px;

    font-weight: 700;

    color: #344b5e;

    margin-bottom: 2px;

    transition: color 0.2s ease;
}

.service-info span {

    font-family: "Nunito Sans", sans-serif;

    font-size: 11px;

    font-weight: 500;

    line-height: 1.4;

    color: #89949d;
}


/* ==================================================
   RIGHT SERVICE IMAGE
================================================== */

.service-preview {

    position: relative;

    min-height: 390px;

    border-radius: 16px;

    overflow: hidden;

    background: #eaf3f4;
}


/* IMAGE */

.service-preview img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0;

    transform: scale(1.06);

    transition:
        opacity .35s ease,
        transform .55s ease;
}

.service-preview img.active {

    opacity: 1;

    transform: scale(1);
}


/* IMAGE OVERLAY */

.preview-overlay {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    z-index: 5;

    color: #ffffff;

    padding:
        60px 20px
        20px;

    background:
        linear-gradient(
            transparent,
            rgba(22,51,68,.92)
        );
}

.preview-overlay h3 {

    font-size: 20px;

    margin-bottom: 6px;
}

.preview-overlay p {

    font-size: 12px;

    line-height: 1.5;

    color:
        rgba(255,255,255,.9);
}

.service-item:hover .service-info strong {

    color: #347d75 !important;
}

/* ==================================================
   MOBILE HAMBURGER
================================================== */

.mobile-menu-button {

    display: none;

    width: 44px;

    height: 44px;

    border: none;

    border-radius: 10px;

    background: #f1f7f7;

    color: #345995;

    font-size: 21px;

    cursor: pointer;
}


/* ==================================================
   MOBILE NAV
================================================== */

.mobile-navigation {

    display: none;

    background: #ffffff;

    padding:
        5px 20px
        25px;

    border-top:
        1px solid #edf0f2;

    max-height:
        calc(100vh - 75px);

    overflow-y: auto;
}

.mobile-navigation.active {

    display: block;
}

.mobile-menu {

    list-style: none;
}

.mobile-menu > li {

    border-bottom:
        1px solid #edf0f2;
}

.mobile-menu > li > a,
.mobile-dropdown-button {

    width: 100%;

    padding: 15px 6px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #3e4f5e;

    background: transparent;

    border: none;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;
}


/* MOBILE SERVICE MENU */

.mobile-services-menu {

    display: none;

    background: #f7faf9;

    padding: 10px;

    margin-bottom: 12px;

    border-radius: 12px;
}

.mobile-services-menu.active {

    display: block;
}

.mobile-category-title {

    padding: 12px 9px 7px;

    color: #378a7e;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .8px;

    text-transform: uppercase;
}

.mobile-service-link {

    padding: 10px;

    display: flex;

    gap: 11px;

    align-items: center;

    color: #485865;

    font-size: 13px;

    border-radius: 8px;
}

.mobile-service-link:hover {

    background: #ffffff;

    color: #345995;
}

.mobile-service-link i {

    width: 24px;

    text-align: center;

    color: #3c9084;
}

.mobile-whatsapp {

    margin-top: 18px;
}

.mobile-whatsapp .whatsapp-btn {

    width: 100%;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media(max-width:1200px) {

    .header-container,
    .top-bar-container {

        padding-left: 25px;
        padding-right: 25px;
    }

    .main-menu > li > a {

        padding-left: 8px;
        padding-right: 8px;

        font-size: 12px;
    }

    .site-logo img {

        width: 220px;
    }
}


/* MOBILE */

@media(max-width:1000px) {

    .header-container {

        min-height: 80px;
    }

    .main-navigation,
    .desktop-whatsapp {

        display: none;
    }

    .mobile-menu-button {

        display: flex;

        align-items: center;

        justify-content: center;
    }

    .site-logo img {

        width: 200px;

        height: 65px;
    }
}


@media(max-width:700px) {

    .top-bar-container {

        flex-direction: column;

        padding: 8px 15px;

        gap: 8px;
    }

    .top-contact {

        flex-wrap: wrap;

        justify-content: center;

        gap: 12px;
    }

    .header-container {

        padding-left: 14px;

        padding-right: 14px;
    }
}


@media(max-width:480px) {

    .site-logo img {

        width: 175px;

        height: 60px;
    }

    .top-contact {

        font-size: 11px;
    }

}


/* ==================================================
   DEMO PAGE
================================================== */

.demo-section {

    min-height: 650px;

    padding: 80px 25px;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f2f8f7,
            #edf4fa
        );
}

.demo-section h1 {

    color: #31598a;

    font-size: 42px;

    margin-bottom: 16px;
}

.demo-section p {

    color: #76858f;

    max-width: 700px;

    margin: auto;

    line-height: 1.8;
}



/* =========================================================
   ABOUT SECTION
========================================================= */

.about-unique-clinic {
    position: relative;
    overflow: hidden;
    padding: 50px 0;
    font-family: "DM Sans", sans-serif;

    background:
        linear-gradient(
            135deg,
            #fbfefd 0%,
            #f4faf9 48%,
            #f1f7fb 100%
        );

    isolation: isolate;
}


/* =========================================================
   ANIMATED BACKGROUND
========================================================= */

.about-animated-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}


/* GREEN BLOB */

.about-bg-blob-one {
    position: absolute;

    width: 430px;
    height: 430px;

    left: -180px;
    top: -160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(62, 158, 143, 0.16),
            rgba(62, 158, 143, 0.03) 65%,
            transparent 70%
        );

    animation: aboutBlobOne 10s ease-in-out infinite alternate;
}


/* BLUE BLOB */

.about-bg-blob-two {
    position: absolute;

    width: 500px;
    height: 500px;

    right: -220px;
    bottom: -230px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(52, 89, 149, 0.13),
            rgba(52, 89, 149, 0.02) 65%,
            transparent 70%
        );

    animation: aboutBlobTwo 13s ease-in-out infinite alternate;
}


@keyframes aboutBlobOne {

    from {
        transform: translate(0,0) scale(1);
    }

    to {
        transform: translate(70px,55px) scale(1.12);
    }

}


@keyframes aboutBlobTwo {

    from {
        transform: translate(0,0) scale(1);
    }

    to {
        transform: translate(-60px,-45px) scale(1.1);
    }

}


/* DOTS */

.about-bg-dots {
    position: absolute;

    width: 170px;
    height: 170px;

    right: 5%;
    top: 8%;

    opacity: .22;

    background-image:
        radial-gradient(
            #41978b 1.5px,
            transparent 1.5px
        );

    background-size: 18px 18px;

    animation: aboutDots 8s ease-in-out infinite alternate;
}


@keyframes aboutDots {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(35px);
    }

}


/* =========================================================
   CONTAINER
========================================================= */

.about-unique-container {

    width: 100%;
    max-width: 1380px;

    margin: auto;

    padding: 0 50px;

    display: grid;

    grid-template-columns:
        minmax(350px, .95fr)
        minmax(450px, 1.05fr);

    align-items: center;

    gap: 90px;
}


/* =========================================================
   LEFT IMAGE AREA
========================================================= */

.about-unique-image-side {
    position: relative;
    padding: 25px 20px 35px 25px;
}


/* MORPHING SHAPE */

.about-unique-image-side::before {

    content: "";

    position: absolute;

    width: 87%;
    height: 87%;

    left: -5px;
    bottom: 0;

    background:
        linear-gradient(
            135deg,
            rgba(63, 155, 141, .17),
            rgba(53, 93, 154, .10)
        );

    border-radius:
        45% 55% 42% 58% /
        54% 42% 58% 46%;

    animation: aboutMorph 8s ease-in-out infinite alternate;

    z-index: -1;
}


@keyframes aboutMorph {

    from {

        border-radius:
            45% 55% 42% 58% /
            54% 42% 58% 46%;

        transform: rotate(-3deg);
    }

    to {

        border-radius:
            56% 44% 58% 42% /
            43% 58% 42% 57%;

        transform: rotate(3deg);
    }

}


/* =========================================================
   IMAGE
========================================================= */

.about-image-frame {

    position: relative;

    max-width: 530px;

    margin: auto;

    padding: 9px;

    border-radius:
        32px 100px 32px 100px;

    background: #ffffff;

    box-shadow:
        0 30px 70px
        rgba(38, 78, 99, .17);

    animation: aboutImageFloat 5s ease-in-out infinite;
}


@keyframes aboutImageFloat {

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

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

}


.about-image-frame img {

    width: 100%;
    height: 520px;

    display: block;

    object-fit: cover;

    border-radius:
        25px 92px 25px 92px;

    transition:
        transform .6s ease,
        filter .6s ease;
}


.about-image-frame:hover img {

    transform: scale(1.025);

    filter: saturate(1.05);
}


/* =========================================================
   FLOATING PUZZLE
========================================================= */

.about-puzzle-icon {

    position: absolute;

    left: -5px;
    top: 65px;

    width: 62px;
    height: 62px;

    border-radius: 18px;

    display: flex;

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

    color: #438f84;

    background:
        rgba(255,255,255,.95);

    box-shadow:
        0 15px 35px
        rgba(40,78,96,.12);

    font-size: 23px;

    z-index: 5;

    animation: aboutPuzzle 5s ease-in-out infinite;
}


@keyframes aboutPuzzle {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-10deg);
    }

    50% {
        transform:
            translateY(14px)
            rotate(5deg);
    }

}


/* =========================================================
   FLOATING CARD
========================================================= */

.about-floating-card {

    position: absolute;

    right: -25px;
    bottom: 55px;

    width: 190px;

    padding: 17px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 18px 45px
        rgba(40,78,98,.16);

    z-index: 5;

    animation: aboutCardFloat 4.5s ease-in-out infinite;
}


@keyframes aboutCardFloat {

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

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

}


.about-floating-card-header {

    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 8px;
}


.about-floating-card-icon {

    width: 42px;
    height: 42px;

    border-radius: 12px;

    display: flex;

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

    background:
        linear-gradient(
            135deg,
            #41998c,
            #487c9c
        );

    color: #ffffff;
}


.about-floating-card strong {

    color: #304d63;

    font-size: 13px;
}


.about-floating-card p {

    margin: 0;

    color: #89969e;

    font-size: 10px;

    line-height: 1.5;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.about-unique-content {
    position: relative;
}


/* SMALL LABEL */

.about-small-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 15px;

    margin-bottom: 18px;

    border-radius: 50px;

    color: #398c80;

    background:
        rgba(255,255,255,.85);

    border:
        1px solid
        rgba(63,145,132,.15);

    box-shadow:
        0 7px 22px
        rgba(44,84,101,.06);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.about-small-label span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #4ba295;

    position: relative;
}


.about-small-label span::after {

    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border:
        1px solid
        rgba(75,162,149,.40);

    animation: aboutPulse 1.8s ease-out infinite;
}


@keyframes aboutPulse {

    from {
        transform: scale(.5);
        opacity: 1;
    }

    to {
        transform: scale(1.5);
        opacity: 0;
    }

}


/* =========================================================
   MAIN HEADING
========================================================= */

.about-unique-content h2 {

    margin: 0 0 22px;

    color: #294c69;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(39px, 4vw, 58px);

    font-weight: 700;

    line-height: 1.12;

    letter-spacing: -1.2px;
}


/* HIGHLIGHT CLINIC NAME */

.about-unique-content h2 span {

    color: #3d9185;

    position: relative;
}


/* UNDERLINE */

.about-unique-content h2 span::after {

    content: "";

    position: absolute;

    left: 2%;
    bottom: 1px;

    width: 96%;
    height: 9px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            rgba(71,164,150,.24),
            rgba(71,164,150,.03)
        );

    z-index: -1;
}


/* =========================================================
   TEXT
========================================================= */

.about-lead {

    margin-bottom: 16px;

    color: #617481;

    font-size: 16px;

    line-height: 1.85;
}


.about-text {

    margin-bottom: 28px;

    color: #7b8b95;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   FEATURE CARDS
========================================================= */

.about-feature-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;

    margin-bottom: 30px;
}


.about-feature-card {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px;

    border-radius: 14px;

    background:
        rgba(255,255,255,.75);

    border:
        1px solid
        rgba(57,110,117,.08);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.about-feature-card:hover {

    transform: translateY(-4px);

    background: #ffffff;

    box-shadow:
        0 12px 30px
        rgba(38,78,96,.09);
}


.about-feature-icon {

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #e8f6f3,
            #eef5fa
        );

    color: #3d9185;

    font-size: 16px;
}


.about-feature-card strong {

    display: block;

    margin-bottom: 2px;

    color: #365266;

    font-size: 13px;
}


.about-feature-card small {

    color: #8b989f;

    font-size: 10px;
}


/* =========================================================
   BUTTONS
========================================================= */

.about-buttons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;
}


.about-read-btn,
.about-contact-btn {

    min-height: 52px;

    padding: 0 22px;

    border-radius: 50px;

    display: inline-flex;

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

    gap: 9px;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.about-read-btn {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #345a91,
            #3f8f86
        );

    box-shadow:
        0 11px 26px
        rgba(51,91,132,.19);
}


.about-read-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 16px 32px
        rgba(51,91,132,.27);
}


.about-contact-btn {

    background: #ffffff;

    color: #329863;

    border:
        1px solid
        rgba(37,211,102,.18);
}


.about-contact-btn i {

    color: #25d366;

    font-size: 18px;
}


.about-contact-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px
        rgba(46,113,81,.11);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px) {

    .about-unique-clinic {
        padding: 80px 0;
    }


    .about-unique-container {

        padding: 0 30px;

        grid-template-columns: 1fr;

        gap: 70px;
    }


    .about-unique-image-side {

        width: 100%;

        max-width: 650px;

        margin: auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px) {

    .about-unique-clinic {

        padding: 60px 0;
    }


    .about-unique-container {

        padding: 0 18px;

        gap: 55px;
    }


    .about-unique-image-side {

        padding: 10px 8px;
    }


    .about-image-frame {

        border-radius:
            25px 65px 25px 65px;
    }


    .about-image-frame img {

        height: 400px;

        border-radius:
            20px 58px 20px 58px;
    }


    .about-puzzle-icon {

        width: 50px;
        height: 50px;

        font-size: 18px;

        left: 0;

        top: 35px;
    }


    .about-floating-card {

        right: 0;

        bottom: 25px;

        width: 165px;
    }


    .about-unique-content h2 {

        font-size: 39px;
    }


    .about-feature-grid {

        grid-template-columns: 1fr;
    }


    .about-buttons {

        flex-direction: column;

        align-items: stretch;
    }


    .about-read-btn,
    .about-contact-btn {

        width: 100%;
    }

}


/* REDUCE MOTION */

@media(prefers-reduced-motion: reduce) {

    .about-bg-blob-one,
    .about-bg-blob-two,
    .about-bg-dots,
    .about-image-frame,
    .about-puzzle-icon,
    .about-floating-card,
    .about-unique-image-side::before {

        animation: none !important;
    }

}