/*
@File: Template Styles

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

/*--------------------------------
=========Table Of Contents========

1.  General Styles 
2.  Back To Top Button CSS
3.  Preloader CSS
4.  Button & Link CSS
5.  Section Title, Overlay & Shape CSS
6.  Pagination CSS
7.  Breadcrumb CSS
8.  Hero CSS
----------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&&display=swap');

:root {
    --primaryFont: "Inter", serif;
    --secondaryFont: "Urbanist", serif;
    --primaryColor: #001aa7;
    --secondaryColor: #0cbfe6;
    --optionalColor: #FF5A39;
    --titleColor: #000D44;
    --paraColor: #555555;
    --darkColor: #18251B;
    --grayColor: #f9f9f9;
    --ashColor: #F5F7FA;
    --whiteColor: #fff;
    --offwhiteColor: #DDE7E8;
    --aztechColor: #111828;
    --codColor: #12131B;
    --mildColor: #222;
    --fontSize: 16px;
    --transition: all ease 300ms;
}

/*---------------------------------
    General Styles
-----------------------------------*/
* {
    box-sizing: border-box;
}

html,
body {
    scroll-behavior: smooth;
    height: fit-content;
    font-size: 16px;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Fluid scaling for consistent visual proportions on larger monitors */
@media only screen and (min-width: 1400px) {
    html {
        font-size: calc(16px + (18 - 16) * ((100vw - 1400px) / (1920 - 1400)));
    }
}

@media only screen and (min-width: 1921px) {
    html {
        font-size: 18px;
        /* Cap scaling on ultra-wide monitors */
    }
}

.form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}

.hospital-img.home-hospital-img.position-relative.round-10 {
    height: 250px;
}

iframe#\:2\.container {
    display: none;
}

div#navbar {
    height: 80px;
    display: flex;
    align-items: center;
}

.VIpgJd-ZVi9od-ORHb-OEVmcd {
    display: none;
}

a,
button,
input[type="submit"] {
    cursor: pointer;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

a {
    text-decoration: none;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

a:hover,
a:focus {
    text-decoration: none;
    box-shadow: none;
}

img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--titleColor);
    font-family: var(--secondaryFont);
}

body {
    color: var(--paraColor);
    font-size: var(--fontSize);
    font-family: var(--primaryFont);
    font-weight: 400;
    line-height: 26px;
}

.text_primary {
    color: var(--primaryColor);
}

.text_secondary {
    color: var(--secondaryColor);
}

.text-title {
    color: var(--titleColor);
}

.text-red {
    color: var(--redColor);
}

.text-para {
    color: var(--paraColor);
}

.text-offwhite {
    color: var(--offwhiteColor);
}

.text-optional {
    color: var(--optionalColor);
}

.font-primary {
    font-family: var(--primaryFont);
}

.font-secondary {
    font-family: var(--secondaryFont);
}

.bg_primary {
    background-color: var(--primaryColor);
}

.bg_secondary {
    background-color: var(--secondaryColor);
}

.bg-ash {
    background-color: var(--ashColor);
}

.bg-optional {
    background-color: var(--optionalColor);
}

.bg-mauve {
    background-color: #ECB2FF;
}

.bg-yellow {
    background-color: #F0DA69;
}

.bg-melanine {
    background-color: #E7C2D4;
}

.bg-flower {
    background-color: #A3DAC2;
}

.bg-chard {
    background-color: #FEC091;
}

.bg-jordyBlue {
    background-color: #92BDF6;
}

.bg-morning {
    background-color: #A0E1E1;
}

.bg-berylGreen {
    background-color: #CBE2AE;
}

.bg-mailbu {
    background-color: #8A89FF;
}

/* Professional Healthcare Category Colors */
.bg-doctor-blue {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
}

.bg-doctor-blue .text-title,
.bg-doctor-blue h3,
.bg-doctor-blue span,
.bg-doctor-blue a {
    color: #ffffff !important;
}

.bg-hospital-cyan {
    background: linear-gradient(135deg, #50d5ec 0%, #0891b2 100%);
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.2);
}

.bg-hospital-cyan .text-title,
.bg-hospital-cyan h3,
.bg-hospital-cyan span,
.bg-hospital-cyan a {
    color: #ffffff !important;
}

.bg-ambulance-red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
}

.bg-ambulance-red .text-title,
.bg-ambulance-red h3,
.bg-ambulance-red span,
.bg-ambulance-red a {
    color: #ffffff !important;
}

.bg-blood-coral {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.2);
}

.bg-blood-coral .text-title,
.bg-blood-coral h3,
.bg-blood-coral span,
.bg-blood-coral a {
    color: #ffffff !important;
}

.bg-pharmacy-teal {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.2);
}

.bg-pharmacy-teal .text-title,
.bg-pharmacy-teal h3,
.bg-pharmacy-teal span,
.bg-pharmacy-teal a {
    color: #ffffff !important;
}

.bg-diagnostic-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

.bg-diagnostic-purple .text-title,
.bg-diagnostic-purple h3,
.bg-diagnostic-purple span,
.bg-diagnostic-purple a {
    color: #ffffff !important;
}

.fs-12 {
    font-size: 12px;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px;
}

.fs-16 {
    font-size: 16px;
}

.fs-17 {
    font-size: 17px;
}

.fs-18 {
    font-size: 18px;
}

.fs-20 {
    font-size: 20px;
}

.fs-22 {
    font-size: 22px;
}

.fs-24 {
    font-size: 24px;
}

.fs-25 {
    font-size: 25px;
}

.fs-30 {
    font-size: 30px;
}

.fs-36 {
    font-size: 36px;
}

.ls-15 {
    letter-spacing: 0.15em;
}

.lh-23 {
    line-height: 23px;
}

.ht-40 {
    height: 40px;
}

.ht-50 {
    height: 50px;
}

.ht-54 {
    height: 54px;
}

.ht-56 {
    height: 56px;
}

.ht-60 {
    height: 60px;
}

.ht-150 {
    height: 150px;
}

.ht-200 {
    height: 200px;
}

.fw-extrabold {
    font-weight: 800;
}

.fw-black {
    font-weight: 900;
}

.resize-0 {
    resize: none;
}

.round-5 {
    border-radius: 5px;
}

.round-10 {
    border-radius: 10px;
}

.round-12 {
    border-radius: 12px;
}

.round-15 {
    border-radius: 15px;
}

.round-20 {
    border-radius: 20px;
}

.pt-90 {
    padding-top: 90px;
}

.pt-95 {
    padding-top: 95px;
}

.pt-110 {
    padding-top: 110px;
}

.pt-120 {
    padding-top: 120px;
}

.pb-10 {
    padding-bottom: 10px !important;
}

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

.pb-95 {
    padding-bottom: 95px;
}

.pb-120 {
    padding-bottom: 120px;
}

.ptb-120 {
    padding-top: 120px;
    padding-bottom: 120px;
}

.mb-6 {
    margin-bottom: 6px;
}

.mb-8 {
    margin-bottom: 8px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-13 {
    margin-bottom: 12px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-18 {
    margin-bottom: 18px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-22 {
    margin-bottom: 22px;
}

.mb-23 {
    margin-bottom: 23px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mb-28 {
    margin-bottom: 28px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-32 {
    margin-bottom: 32px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-38 {
    margin-bottom: 38px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-45 {
    margin-bottom: 45px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-55 {
    margin-bottom: 55px;
}

.mb-120 {
    margin-bottom: 120px;
}

.top-n2 {
    top: -2px;
}

.top-n1 {
    top: -1px;
}

.top-1 {
    top: 1px;
}

.top-2 {
    top: 2px;
}

.top-3 {
    top: 3px;
}

.btn {
    z-index: 1;
    font-weight: 400;
    padding: 17px 29px 16px 26px;
    border: none;
    overflow: hidden;
    transition: var(--transition);

    &:before,
    &:after {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 0;
        transition: var(--transition);
    }

    &:before {
        z-index: -1;
    }

    &:after {
        z-index: -2;
        opacity: 0;
    }

    span {
        position: relative;
        padding-right: 30px;
        display: inline-block;

        .icon-left {
            position: absolute;
            top: 6px;
            right: 0;

        }
    }

    .icon-right {
        position: absolute;
        right: 58px;
        top: 22px;
        opacity: 0;
        transition: var(--transition);
    }

    &:hover {
        padding-left: 21px;
        padding-right: 34px;

        &:before {
            width: 46px;
            height: 100%;
            border-radius: 6px 0 0 6px;
        }

        &:after {
            opacity: 1;
        }

        span {
            .icon-left {
                right: 0%;
                opacity: 0;
            }
        }

        .icon-right {
            right: 14px;
            opacity: 1;
        }
    }

    &.style-one {
        color: var(--whiteColor);

        &:before {
            background: var(--primaryColor);
        }

        &:after {
            background-color: var(--secondaryColor);
        }
    }

    &.style-two {
        color: var(--whiteColor);

        &:before {
            background: var(--secondaryColor);
        }

        &:after {
            background-color: var(--primaryColor);
        }
    }

    &.style-three {
        color: var(--primaryColor);

        &:before {
            background: var(--ashColor);
        }

        &:after {
            background-color: var(--primaryColor);
        }

        &:hover {
            color: var(--whiteColor);
        }
    }
}

.tt-btn {
    z-index: 1;
    font-weight: 400;
    padding: 17px 27px 16px;

    i {
        font-size: 24px;
        line-height: 0.8;
        margin-right: 10px;
        position: relative;
        top: 2px;
        transition: var(--transition);
    }

    &.style-one {
        color: #3B5998;

        &:hover {
            background-color: var(--secondaryColor);
            color: var(--whiteColor);

            i {
                color: var(--whiteColor);
            }
        }
    }

    &.style-two {
        color: var(--optionalColor);

        i {
            color: var(--optionalColor);
        }

        &:hover {
            background-color: var(--secondaryColor);
            color: var(--whiteColor);

            i {
                color: var(--whiteColor);
            }
        }
    }
}

.link {
    height: 20px;
    display: inline-flex;

    .link-container {
        position: relative;
        padding: 0;
        overflow: hidden;
        transition: transform 0.4s ease;

        .title {
            display: block;
            line-height: 1;
            transition: transform 0.4s ease;
        }

        .link-title1 {
            transform: translateY(0px);
        }

        .link-title2 {
            transform: translateY(5px);
        }
    }

    .link-icon {
        position: relative;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: start;
        align-items: center;
        margin-left: 10px;
        overflow: hidden;

        i,
        .icon {
            display: block;
            position: absolute;
            transition: transform 0.4s ease;

            &:nth-child(2) {
                transform: translate(-25px);
            }
        }
    }

    &:hover {
        .link-container {
            .link-title1 {
                transform: translateY(-26px);
            }

            .link-title2 {
                transform: translateY(-15px);
            }
        }

        i,
        .icon {
            &:first-child {
                transform: translate(25px);
            }

            &:last-child {
                transform: translate(0px);
            }
        }

        .link-icon {
            &.style-two {

                .icon,
                i {
                    &:nth-child(2) {
                        transform: translate(0px);
                    }
                }
            }
        }
    }
}

.hover-text-primary {
    &:hover {
        color: var(--primaryColor) !important;
    }
}

.hover-text-secondary {
    &:hover {
        color: var(--secondaryColor);
    }
}

.hover-text-white {
    &:hover {
        color: var(--whiteColor);
    }
}

.link-hover-white,
.link-hover-primary,
.link-hover-secondary,
.link-hover-title {
    position: relative;
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.6s;

    &:hover {
        background-size: 100% 2px;
    }
}

.link-hover-title {
    &:hover {
        background-image: linear-gradient(var(--titleColor), var(--titleColor));
    }
}

.link-hover-primary {
    &:hover {
        background-image: linear-gradient(var(--primaryColor), var(--primaryColor));
    }
}

.link-hover-secondary {
    &:hover {
        background-image: linear-gradient(var(--secondaryColor), var(--secondaryColor));
    }
}

.link-hover-white {
    &:hover {
        background-image: linear-gradient(var(--whiteColor), var(--whiteColor));
    }
}

.btn-wrap {
    .google-ratings {
        margin-left: 30px;
    }
}

.google-ratings {
    padding-left: 75px;

    img {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    h6 {
        margin-bottom: 6px;
    }
}

.img-hover {
    &:before {
        position: absolute;
        top: 0;
        left: -75%;
        z-index: 2;
        display: block;
        content: "";
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
        transform: skewX(-25deg);
    }
}

.blog-card,
.location-card,
.directory-card {
    &:hover {
        .img-hover {
            img {
                transform: scale(1.05);
            }

            &:before {
                animation: shine 0.75s;
            }
        }
    }
}

.bg-f {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #ddd;
}

.bg-title {
    background-color: var(--titleColor);
}

.transition {
    -webkit-transition: all 350ms linear;
    transition: all 350ms linear;
}

.social-profile {
    li {
        display: inline-block;
        margin-right: 5px;

        &:last-child {
            margin-right: 0;
        }

        a {
            i {
                line-height: 0.8;
                transition: var(--transition);
            }
        }
    }

    &.style-one,
    &.style-two,
    &.style-three,
    &.style-four,
    &.style-five {
        li {
            a {
                width: 35px;
                height: 35px;

                i {
                    transition: var(--transition);
                }

                &:hover {
                    i {
                        transform: rotateY(360deg);
                    }
                }
            }
        }
    }

    &.style-one {
        li {
            a {
                background-color: rgba(123, 151, 162, 0.12);

                i {
                    color: var(--titleColor);
                }

                &:hover {
                    background-color: var(--secondaryColor);

                    i {
                        color: var(--whiteColor);
                    }
                }
            }
        }
    }

    &.style-two {
        li {
            a {
                width: 30px;
                height: 30px;

                i {
                    color: var(--titleColor);
                }

                &:hover {
                    background-color: var(--secondaryColor);

                    i {
                        color: var(--whiteColor);
                    }
                }
            }
        }
    }

    &.style-three {
        li {
            a {
                width: 38px;
                height: 38px;
                background-color: var(--ashColor);

                i {
                    color: var(--titleColor);
                }

                &:hover {
                    background-color: var(--primaryColor);

                    i {
                        color: var(--whiteColor);
                    }
                }
            }
        }
    }
}

.rating {
    li {
        display: inline-block;
    }

    &.style-one {
        li {
            i {
                color: #FFC700;
            }
        }
    }

    &.style-two {
        li {
            i {
                font-size: 18px;
                color: #FF9C00;
            }
        }
    }
}

.tb-btn {
    padding: 6px 16px;
    text-align: center;

    &.style-one {
        background-color: var(--primaryColor);

        &:hover {
            background-color: var(--secondaryColor);
        }
    }

    &.style-two {
        background-color: var(--secondaryColor);

        &:hover {
            background-color: var(--primaryColor);
        }
    }

    &.style-three {
        background-color: var(--ashColor);
        padding: 7px 15px;

        &:hover {
            background-color: var(--primaryColor);
        }
    }

    &.style-four {
        background-color: var(--primaryColor);
        width: 27px;
        height: 27px;
        padding: 3px 4px;

        &:hover {
            background-color: var(--secondaryColor);
        }
    }

    &.style-five {
        background-color: #FF5A39;
        padding: 6.5px 14px;
        line-height: 14px;

        &:hover {
            background-color: var(--secondaryColor);
        }
    }

    &.style-six {
        background-color: #FF5A39;
        width: 27px;
        height: 27px;
        padding: 3px 4px;

        &:hover {
            background-color: var(--secondaryColor);
        }
    }

    &.style-seven {
        background-color: transparent;
        border: 1px solid rgba(0, 13, 68, 0.3);

        &:hover {
            background-color: var(--primaryColor);
            color: var(--whiteColor);
        }
    }

    &.style-eight {
        background-color: transparent;
        border: 1px solid rgba(0, 13, 68, 0.3);
        padding: 8.5px 30px;

        &:hover {
            background-color: var(--primaryColor);
            color: var(--whiteColor);
        }
    }
}

.section-subtitle {
    padding: 0 19px;

    &:before,
    &:after {
        position: absolute;
        top: 5px;
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: var(--secondaryColor);
    }

    &:before {
        left: 0;
    }

    &:after {
        right: 0;
    }

    &.style-two {

        &:before,
        &:after {
            background-color: var(--primaryColor);
        }
    }
}

.section-title {
    font-size: 40px;
    line-height: 50px;
}

.slider-btn {

    .prev-btn,
    .next-btn {
        width: 50px;
        height: 50px;

        i,
        img {
            transition: var(--transition);
            position: relative;
        }
    }

    .prev-btn {
        i {
            left: -1px;
        }
    }

    .next-btn {
        i {
            right: -2px;
        }
    }

    .next-btn {
        width: 50px;
        height: 50px;

        i,
        img {
            transition: var(--transition);
        }
    }

    &.style-one {

        .prev-btn,
        .next-btn {
            background-color: var(--primaryColor);

            i {
                color: var(--whiteColor);
                font-size: 29px;
                line-height: 0.8;
            }

            &:hover {
                background-color: var(--secondaryColor);
            }
        }
    }

    &.style-two {

        .prev-btn,
        .next-btn {
            background-color: var(--whiteColor);

            i {
                color: var(--titleColor);
                font-size: 29px;
                line-height: 0.8;
            }

            &:hover {
                background-color: var(--primaryColor);

                i {
                    color: var(--whiteColor);
                }
            }
        }
    }

    &.style-three {

        .prev-btn,
        .next-btn {
            background-color: var(--ashColor);

            i {
                color: var(--primaryColor);
                font-size: 29px;
                line-height: 0.8;
            }

            &:hover {
                background-color: var(--primaryColor);

                i {
                    color: var(--whiteColor);
                }
            }
        }
    }
}

.page-nav {
    li {
        margin-right: 10px;

        &:last-child {
            margin-right: 0;
        }

        a {
            width: 40px;
            height: 40px;
            box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);
            border: none;
            color: var(--titleColor);
            font-family: var(--secondaryFont);
            font-weight: 600;
            transition: var(--transition);

            &.active,
            &:hover {
                background-color: var(--secondaryColor);
                color: var(--whiteColor);
            }

            i {
                font-size: 24px;
                font-weight: 300;
            }
        }
    }
}

/*---------------------------------
   Preloader Area CSS
----------------------------------*/
.stethoscope-icon {
    i {
        font-size: 60px;
        background: linear-gradient(90deg, #1F5FFF, #04CE78);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradientMove 3s infinite;
        margin: 0 auto 10px;
    }
}

@keyframes gradientMove {
    0% {
        background-position: 200% 0%;
    }

    100% {
        background-position: -200% 0%;
    }
}

.preloader-area {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    /* Ensure it's on top of all other content */
    position: fixed;
    text-align: center;
    overflow: hidden;
    background-color: var(--whiteColor);
    visibility: visible;
    /* Ensure it's visible initially */
    opacity: 1;
    /* Make sure it's fully visible */
    transition: opacity 0.3s ease, visibility 0s ease 0.3s;
    /* Smooth fade-out effect */
}

.preloader-hidden {
    visibility: hidden;
    /* Hide visibility when the preloader is removed */
    opacity: 0;
    /* Fade out the preloader */
    transition: opacity 0.3s ease, visibility 0s ease 0s;
    /* Smooth fade-out */
}

/*---------------------------------
    Back To Top CSS
----------------------------------*/
.progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.09);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;

    &::after {
        position: absolute;
        font-family: remixicon !important;
        content: "\ea76";
        text-align: center;
        line-height: 46px;
        font-size: 24px;
        left: 0;
        color: var(--primaryColor);
        top: 2px;
        height: 46px;
        width: 46px;
        cursor: pointer;
        display: block;
        z-index: 1;
        -moz-animation: float 1500ms infinite ease-in-out;
        -webkit-animation: float 1500ms infinite ease-in-out;
        animation: float 1500ms infinite ease-in-out;
        -webkit-transition: all 200ms linear;
        transition: all 200ms linear;
    }

    &.active-progress {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    svg {
        path {
            fill: none;
        }
    }
}

.progress-wrap:hover::before {
    opacity: 1;
}

.progress-wrap {
    svg.progress-circle path {
        stroke: var(--primaryColor);
        stroke-width: 4;
        box-sizing: border-box;
        -webkit-transition: all 200ms linear;
        transition: all 200ms linear;
        stroke: var(--primaryColor);
    }
}

/*---------------------------------
     Animation CSS
----------------------------------*/
.rotate {
    -webkit-animation: rotation 20s infinite linear;
    animation: rotation 20s infinite linear;
}

.bounce {
    -moz-animation: float 1500ms infinite ease-in-out;
    -webkit-animation: float 1500ms infinite ease-in-out;
    animation: float 1500ms infinite ease-in-out
}

.moveHorizontal {
    -moz-animation: moveHorizontal 3000ms infinite ease-in-out;
    -webkit-animation: moveHorizontal 3000ms infinite ease-in-out;
    animation: moveHorizontal 3000ms infinite ease-in-out;
}

.moveVertical {
    -moz-animation: moveVertical 3000ms infinite ease-in-out;
    -webkit-animation: moveVertical 3000ms infinite ease-in-out;
    animation: moveVertical 3000ms infinite ease-in-out;
}

.zoomIn {
    -moz-animation: zoom-in 3500ms infinite ease-in-out;
    -webkit-animation: zoom-in 3500ms infinite ease-in-out;
    animation: zoom-in 3500ms infinite ease-in-out;
}

.img-anim-top {
    animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 0;
}

.img-anim-right {
    animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
    opacity: 0;
}

.img-anim-left {
    animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
    opacity: 0;
}

[data-aos=fade-up] {
    transform: translate3d(0, 30px, 0)
}

.ripple {
    &:before {
        -webkit-animation-delay: 0.1s;
        -moz-animation-delay: 0.1s;
        -ms-animation-delay: 0.1s;
        -o-animation-delay: 0.1s;
        animation-delay: 0.1s;
        content: "";
        position: absolute;
    }

    &:after {
        -webkit-animation-delay: 0.1s;
        -moz-animation-delay: 0.1s;
        -ms-animation-delay: 0.1s;
        -o-animation-delay: 0.1s;
        animation-delay: 0.1s;
        content: "";
        position: absolute;
    }
}

.ripple,
.ripple:before,
.ripple:after {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform-origin: center;
    transform-origin: center center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 0 rgb(255, 255, 255, 0.5);
    -moz-box-shadow: 0 0 0 0 rgb(255, 255, 255, 0.5);
    -ms-box-shadow: 0 0 0 0 rgb(255, 255, 255, 0.5);
    -o-box-shadow: 0 0 0 0 rgb(255, 255, 255, 0.5);
    box-shadow: 0 0 0 0 rgb(255, 255, 255, 0.5);
    -webkit-animation: ripple 2s infinite;
    -moz-animation: ripple 2s infinite;
    -ms-animation: ripple 2s infinite;
    -o-animation: ripple 2s infinite;
    animation: ripple 2s infinite;
}

@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

@-webkit-keyframes slideLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
}

@-webkit-keyframes slideRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@keyframes slideRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@keyframes img-anim-top {
    0% {
        transform: translateY(-5%);
        -webkit-clip-path: inset(0 0 100% 0);
        clip-path: inset(0 0 100% 0);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes img-anim-right {
    0% {
        transform: translateX(5%);
        -webkit-clip-path: inset(0 0 0 100%);
        clip-path: inset(0 0 0 100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes img-anim-left {
    0% {
        transform: translateX(-5%);
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 80px, 0);
        transform: translate3d(0, 80px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 80px, 0);
        transform: translate3d(0, 80px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.reveal-text {
    visibility: hidden;
    max-width: 100%;

    .letter {
        position: relative;
        display: inline-block;
        will-change: transform;
        transform-style: preserve-3d;

        div {
            width: 100%;
            backface-visibility: hidden;
            transform-style: preserve-3d;
        }
    }

    .perspective {
        position: relative;
        display: inline-block;

        div {
            position: relative;
            display: inline-block;
        }
    }

    .word {
        display: inline-block;
    }
}

@-webkit-keyframes reveal {
    0% {
        transform: translate(0, 100%);
    }

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

@-webkit-keyframes reveal {
    0% {
        -webkit-transform: translate(0, 100%);
        transform: translate(0, 100%);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes reveal {
    0% {
        -webkit-transform: translate(0, 100%);
        transform: translate(0, 100%);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@-webkit-keyframes ripple {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    100% {
        -webkit-transform: scale(1.6);
        transform: scale(1.6);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}

@keyframes ripple {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    100% {
        -webkit-transform: scale(1.6);
        transform: scale(1.6);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}

@-webkit-keyframes zoom-in {
    0% {
        -webkit-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
    }

    50% {
        -webkit-transform: scale(1.07, 1.07);
        transform: scale(1.07, 1.07);
    }

    100% {
        -webkit-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
    }
}

@keyframes zoom-in {
    0% {
        -webkit-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
    }

    50% {
        -webkit-transform: scale(1.07, 1.07);
        transform: scale(1.07, 1.07);
    }

    100% {
        -webkit-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

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

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

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

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

@-webkit-keyframes moveHorizontal {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }

    50% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
}

@keyframes moveHorizontal {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }

    50% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
}

@-webkit-keyframes moveVertical {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }

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

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@keyframes moveVertical {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }

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

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@-webkit-keyframes animationFramesTwo {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    20% {
        -webkit-transform: translate(55px, -1px) rotate(36deg);
    }

    40% {
        -webkit-transform: translate(115px, 55px) rotate(72deg);
    }

    60% {
        -webkit-transform: translate(55px, 111px) rotate(108deg);
    }

    80% {
        -webkit-transform: translate(-30px, 55px) rotate(144deg);
    }

    100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
}

@keyframes animationFramesTwo {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    20% {
        -webkit-transform: translate(73px, -1px) rotate(36deg);
    }

    40% {
        -webkit-transform: translate(141px, 72px) rotate(72deg);
    }

    60% {
        -webkit-transform: translate(83px, 122px) rotate(108deg);
    }

    80% {
        -webkit-transform: translate(-40px, 72px) rotate(144deg);
    }

    100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
}

@-webkit-keyframes float {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

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

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes float {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

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

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@-webkit-keyframes ripple {
    70% {
        box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@keyframes ripple {
    70% {
        box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

/*-------------------------------
    Custom Cursor CSS
-------------------------------*/
.cursor {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    transition: all 150ms ease-out;
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    transform: translate(calc(-50% + 15px), -50%);
    z-index: 999;
    border: 1px solid var(--secondaryColor);
}

.cursor-inner {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    opacity: .9;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: width .3s, height .3s, opacity .3s;
    background-color: var(--secondaryColor);
    z-index: 999;
}

.hover {
    border-color: transparent;
    opacity: 0.8;
    width: 3px;
    height: 3px;
    z-index: 999;
    background-color: var(--auto_secondaryColor);
}

.cursorinnerhover {
    width: 15px;
    height: 15px;
    opacity: .5;
}

/*-------------------------------
        Breadcrumb CSS
-------------------------------*/
.breadcrumb-area {
    padding-bottom: 20px;

    .breadcrumb-wrap {
        margin: 0 12px;
        padding: 122px 0 125px;

        .br-shape-one {
            bottom: 70px;
            left: 50px;
        }

        .br-shape-two {
            top: 50px;
            right: 40px;
        }

        &.bg-1 {
            background-image: url(../img/breadcrumb/br-bg-1.jpg);
        }

        &.bg-2 {
            background-image: url(../img/breadcrumb/br-bg-2.jpg);
        }

        &.bg-3 {
            background-image: url(../img/breadcrumb/br-bg-3.jpg);
        }

        &.bg-4 {
            background-image: url(../img/breadcrumb/br-bg-4.jpg);
        }

        &.bg-5 {
            background-image: url(../img/breadcrumb/br-bg-4.jpg);
        }

        &.bg-6 {
            background-image: url(../img/breadcrumb/br-bg-4.jpg);
        }

        &.bg-7 {
            background-image: url(../img/breadcrumb/br-bg-4.jpg);
        }

        &.bg-8 {
            background-image: url(../img/breadcrumb/br-bg-4.jpg);
        }

        &.bg-9 {
            background-image: url(../img/breadcrumb/br-bg-4.jpg);
        }

        &.bg-10 {
            background-image: url(../img/breadcrumb/br-bg-4.jpg);
        }

        &:after {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 100%;
            height: 100%;
            background-color: rgba(0, 13, 68, 0.7);
            z-index: -1;
            border-radius: 20px;
        }

        .br-menu {
            li {
                margin-right: 5px;
                padding-right: 13px;
                font-weight: 500;
                color: var(--secondaryColor);

                &:after {
                    position: absolute;
                    top: 50%;
                    right: 0;
                    content: "|";
                    font-size: 13px;
                    color: rgba(255, 255, 255, 0.9);
                    transform: translateY(-50%) rotate(8deg);
                }

                &:last-child {
                    margin-right: 0;
                    padding-right: 0;

                    &:after {
                        display: none;
                    }
                }

                a {
                    color: var(--whiteColor);

                    &:hover {
                        color: var(--secondaryColor);
                    }
                }
            }
        }
    }
}

/*-------------------------------
         Hero CSS
-------------------------------*/
.hero-area {
    .search-directory-wrap {
        .search-directory-tablist {
            border-radius: 10px 10px 0 0;
            border: none;
            display: inline-flex;
            z-index: 2;
            position: relative;
            padding: 20px 20px 10px 20px;

            .nav-item {
                margin-right: 10px;

                &:last-child {
                    margin-right: 0;
                }

                .nav-link {
                    font-size: 15px;
                    line-height: 16px;
                    font-weight: 500;
                    color: var(--titleColor);
                    padding: 8.5px 10px;
                    border-radius: 5px;
                    background-color: var(--ashColor);
                    border: 1px solid var(--titleColor);
                    transition: var(--transition);

                    &:hover,
                    &.active {
                        background-color: var(--secondaryColor);
                        border-color: transparent;
                        color: var(--whiteColor);
                    }
                }
            }
        }

        .tab-content {
            border-radius: 0 10px 10px 10px;
        }

        .search-directory-form {
            margin-top: -25px;
            padding: 38px 20px 3px;

            z-index: 1;
            position: relative;

            .form-group {
                margin-bottom: 20px;
                width: calc(22.4% - 20px);
                margin-right: 15px;

                img {
                    position: absolute;
                    top: 50%;
                    left: 18px;
                    transform: translateY(-50%);
                }

                select {
                    padding: 12px 15px 12px 44px;
                    cursor: pointer;
                    background-size: 12px;

                    &:focus {
                        outline: 0;
                    }
                }
            }

            button {
                width: 119px;
                padding: 15px 15px;

                img {
                    position: relative;
                    top: -1px;
                    margin-left: 8px;
                }
            }
        }
    }

    &.style-one {
        margin: 0 15px;

        .hero-slider-one {
            margin-bottom: 30px;

            .slider-btn {
                z-index: 1;

                .prev-btn,
                .next-btn {
                    position: absolute;
                    top: 45%;
                    z-index: 1;
                    transform: translateY(-50%);

                    i {
                        font-size: 35px;
                    }
                }

                .prev-btn {
                    left: -10px;
                    border-radius: 0 50% 50% 0;
                }

                .next-btn {
                    right: -10px;
                    border-radius: 50% 0 0 50%;
                }
            }
        }

        .hero-slide-item {
            .hero-bg {
                &.bg-1 {
                    background-image: url(../img/hero/hero-slide-1.jpg);
                }

                &.bg-2 {
                    background-image: url(../img/hero/hero-slide-2.jpg);
                }

                &.bg-3 {
                    background-image: url(../img/hero/hero-slide-3.jpg);
                }

                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 20px;
                background-size: cover;
                background-attachment: fixed;
                background-repeat: no-repeat;
                -webkit-user-select: none;
                user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                -webkit-animation: zoomin 15s ease-in infinite;
                animation: zoomin 15s ease-in infinite;
                transition: all .5s ease-in-out;
                z-index: 0;

                &:after {
                    position: absolute;
                    top: 0;
                    left: 0;
                    content: "";
                    background-image: url(../img/hero/hero-overlay.png);
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    width: 100%;
                    height: 100%;
                    z-index: 0;
                }
            }

            padding: 131px 0 133px;
            border-radius: 20px;

            .hero-content {
                position: relative;
                z-index: 1;

                h1 {
                    font-size: 52px;
                    line-height: 62px;
                    margin-bottom: 19px;
                }

                p {
                    margin-bottom: 42px;
                }
            }
        }

        .search-directory-wrap {
            width: calc(100% + 80px);
        }
    }

    &.style-two {
        margin: 0 15px 30px;
        padding: 190px 0 630px;
        margin-top: -100px;
        position: relative;

        .hero-bg-top {
            background-image: url(../img/hero/hero-bg-top.jpg);
            height: 46.5%;
            border-radius: 20px 20px 0 0;

            &:after {
                position: absolute;
                top: 0;
                left: 0;
                content: "";
                width: 100%;
                height: 100%;
                border-radius: 20px 20px 0 0;
                background-color: rgba(0, 13, 68, 0.9);
            }
        }

        .hero-bg-bottom {
            background-image: url(../img/hero/hero-bg-bottom.jpg);
            height: 54.5%;
            border-radius: 0 0 20px 20px;
        }

        .hero-content {
            h1 {
                font-size: 62px;
                line-height: 69px;
                margin-bottom: 20px;
            }

            p {
                margin-bottom: 43px;
            }

            .search-directory-wrap {
                .tab-content {
                    border-radius: 10px;
                }

                .search-directory-form {
                    .form-group {
                        width: calc(22.4% - 20px);
                        margin-right: 16px;
                    }
                }
            }
        }

        .hero-scroling-text {
            position: absolute;
            bottom: 78px;
            left: -25px;
            overflow: hidden;
            height: 50px;
            z-index: 1;
            width: calc(100% + 50px);
            transform: rotate(-5deg);
            background-color: var(--secondaryColor);

            ul {
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                white-space: nowrap;
                -webkit-animation: mymove 16s linear infinite;
                animation: mymove 16s linear infinite alternate;

                li {
                    display: inline-block;
                    font-size: 30px;
                    font-weight: 600;
                    line-height: 30px;
                    font-family: var(--secondaryFont);
                    margin: 0 7px;
                    padding: 0 17px 0 0;
                    position: relative;

                    &:last-child {
                        &:after {
                            display: none;
                        }
                    }

                    &:after {
                        position: absolute;
                        bottom: 1px;
                        right: -10px;
                        content: "";
                        width: 16px;
                        height: 3px;
                        background: var(--whiteColor);
                    }
                }
            }
        }
    }

    &.style-three {
        padding: 120px 0 15px;
        position: relative;

        &:after {
            position: absolute;
            bottom: -3px;
            left: 0;
            content: "";
            width: 100%;
            height: 110px;
            background-image: url(../img/hero/hero-curve.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: top center;
            z-index: -1;
        }

        .hero-img-one {
            top: 8%;
            left: 2%;
            border-radius: 25px;
            transform: rotate(-5deg);
        }

        .hero-img-two {
            top: 32%;
            right: 2%;
            border-radius: 25px;
            transform: rotate(5deg);
        }

        .hero-shape-one {
            top: 7%;
            right: 10%;
        }

        .hero-shape-two {
            bottom: 30%;
            left: 9%;
        }

        .hero-content {
            h1 {
                font-size: 62px;
                line-height: 69px;
                margin-bottom: 18px;
            }

            p {
                margin-bottom: 30px;
            }

            .btn-wrap {
                margin-bottom: 150px;

                .btn {
                    margin-top: 10px;
                    margin-right: 30px;
                }

                .play-video {
                    margin-top: 10px;

                    .play-icon {
                        width: 56px;
                        height: 56px;
                        margin-right: 15px;

                        i {
                            font-size: 33px;
                            position: relative;
                            left: 2px;
                        }
                    }
                }
            }
        }

        .search-directory-wrap {
            .tab-content {
                box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);
                border-radius: 10px 10px 10px 10px;
            }

            .search-directory-form {
                justify-content: space-between;
                border-radius: 10px 10px 10px 10px;

                .form-group {
                    width: calc(22.4% - 9px);

                }
            }
        }
    }
}

/* Zoom in Keyframes */
@-webkit-keyframes zoomin {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.07);
    }

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

@keyframes zoomin {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.07);
    }

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

/*End of Zoom in Keyframes */

/* Zoom out Keyframes */
@-webkit-keyframes zoomout {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.90);
    }

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

@keyframes zoomout {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.90);
    }

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

/*-------------------------------
         Directory CSS
-------------------------------*/
.directory-card {
    &.style-one {
        padding: 25px 20px;

        .directory-img {
            width: 280px;
        }

        .directory-info {
            width: calc(100% - 300px);
            margin-left: auto;

            h2 {
                font-size: 48px;
                margin-bottom: 9px;
            }

            h3 {
                margin-bottom: 12px;
            }

            p {
                margin-bottom: 15px;
            }

            a {
                img {
                    position: relative;
                    margin-left: 5px;
                    top: -1px;
                }
            }
        }

        &:hover {
            transform: translateY(-5px);
        }
    }

    &.style-two,
    &.style-three {
        .directory-icon {
            width: 80px;
            height: 80px;
            position: relative;
            top: 3px;
            padding: 18px;
        }

        .directory-info {
            margin-left: auto;

            h3 {
                margin-bottom: 12px;
            }

            p {
                margin-bottom: 15px;
            }

            a {
                img {
                    position: relative;
                    margin-left: 5px;
                    top: -1px;
                }
            }
        }
    }

    &.style-two {
        padding: 28px 22px 30px;

        .directory-info {
            width: calc(100% - 100px);
        }
    }

    &.style-three {
        padding: 28px 22px 30px;

        .directory-info {
            width: calc(100% - 100px);
        }
    }
}


/*-------------------------------
         Category CSS
-------------------------------*/
.category-card {

    &.style-one,
    &.style-two {
        .cat-icon {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin-bottom: 26px;
            transition: var(--transition);

            i {
                font-size: 49px;
                position: relative;
                top: 3px;
                color: var(--titleColor);
                transition: var(--transition);
            }
        }

        h3 {
            margin-bottom: 8px;
        }

        &:hover {
            transform: translateY(-5px);

        }
    }

    &.style-one {
        padding: 35px 22px;

        &:hover {
            .cat-icon {
                background-color: var(--secondaryColor) !important;

                i {
                    color: var(--whiteColor);
                }
            }
        }
    }

    &.style-two {
        padding: 26px 22px;

        &:hover {
            .cat-icon {
                background-color: var(--secondaryColor) !important;

                i {
                    color: var(--whiteColor);
                }
            }
        }
    }

    &.style-three {
        padding: 30px;
        box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);

        .cat-icon {
            width: 100px;
            height: 100px;
            padding: 10px;
            transition: var(--transition);

            i {
                font-size: 49px;
                position: relative;
                top: 3px;
                color: var(--titleColor);
                transition: var(--transition);
            }
        }

        .cat-info {
            width: calc(100% - 130px);
            margin-left: auto;

            h3 {
                margin-bottom: 8px;
            }
        }

        &:hover {
            transform: translateY(-5px);
        }
    }

    &.style-four {
        padding: 30px 25px;
        box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);

        .category-title {
            margin-bottom: 21px;

            .category-icon {
                width: 80px;
                height: 80px;
                position: relative;
                top: -2px;

                img {
                    position: relative;
                    top: 2px;
                }
            }

            h3 {
                width: calc(100% - 100px);
                margin-left: auto;
            }
        }

        p {
            margin-bottom: 23px;
        }

        &:hover {
            transform: translateY(-5px);
        }
    }
}


button.btn.doctor-view-more.style-two.btn-sm.font-secondary.fw-semibold.position-relative.z-1.round-10 {
    padding: 10px;
}

/*-------------------------------
        About Us CSS
-------------------------------*/
.about-area {
    &.style-one {
        .about-img-wrap {
            .about-img {
                width: calc(50% - 17px);
                border-radius: 175px;

                img {
                    border-radius: 175px;
                }
            }

            .book-doctor {
                top: 25%;
                left: 35%;
                transform: translate(-50%, -50%);
                padding: 30px 26px;

                .doctor-img {
                    width: 80px;
                    height: 80px;
                    border: 2px solid var(--secondaryColor);
                    margin-bottom: 19px;
                }

                span {
                    margin-bottom: 20px;
                }

                .tb-btn {
                    padding: 10px 27px;
                }
            }
        }

        .about-content {
            .section-title {
                margin-bottom: 17px;
            }

            .counter-card-wrap {
                padding: 21px 30px 23px 0px;

                .counter-card {
                    width: 33.33%;
                    padding-left: 30px;

                    &:before {
                        position: absolute;
                        top: 50%;
                        left: 0px;
                        content: "";
                        width: 1px;
                        height: 60px;
                        background-color: rgba(0, 13, 68, 0.3);
                        transform: translateY(-50%) rotate(30deg);
                    }

                    &:nth-child(2) {
                        padding-left: 50px;

                        &:before {
                            left: 15px;
                        }
                    }

                    &:nth-child(3) {
                        padding-left: 65px;

                        &:before {
                            left: 25px;
                        }
                    }

                    &:first-child {
                        &:before {
                            display: none;
                        }
                    }

                    h4 {
                        font-size: 36px;
                        margin-bottom: 5px;
                    }
                }
            }

            .feature-list {
                margin: 43px 0 52px;

                li {
                    width: 50%;
                    padding-left: 31px;

                    img {
                        position: absolute;
                        top: 3px;
                        left: 0;
                        max-width: 20px;
                    }
                }
            }
        }
    }

    &.style-two {
        .about-img-wrap {
            .about-img {
                background-image: url(../img/about/about-img-3.jpg);
                height: 559px;
                width: 300px;
                margin-left: auto;
            }

            .booking-doctor {
                position: absolute;
                top: 5%;
                left: 0;
                width: 390px;
                transform: translateY(-50%);

                .book-doctor {
                    padding: 15px;
                    margin-top: 10px;

                    .doctor-img {
                        width: 80px;
                        height: 80px;
                        border: 2px solid var(--secondaryColor);
                    }

                    .doctor-info {
                        width: calc(100% - 208px);
                        margin-left: 25px;
                    }

                    .tb-btn {
                        width: 102px;
                        padding: 8px 9px;
                    }
                }

                .about-img-two {
                    margin: 30px 0;
                }
            }
        }

        .about-content {
            .section-title {
                margin-bottom: 16px;
            }

            .feature-item-wrap {
                margin-bottom: 34px;

                .feature-item {
                    margin-bottom: 28px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .feature-icon {
                        width: 80px;
                        height: 80px;
                    }

                    .feature-info {
                        width: calc(100% - 110px);
                        margin-left: auto;

                        h3 {
                            margin-bottom: 11px;
                        }
                    }

                    &:hover {
                        .feature-icon {
                            background-color: var(--primaryColor);

                            img {
                                filter: brightness(0) invert(1);
                            }
                        }
                    }
                }
            }

            .btn-wrap {

                .btn,
                .contact-card {
                    margin-top: 13px;
                }
            }
        }
    }

    &.style-three {
        .about-shape {
            bottom: 150px;
            right: 5%;
        }

        .about-img-wrap {
            .about-img {
                width: calc(50% - 15px);
            }

            .circle-text-wrap {
                top: 50%;
                left: 50%;
                width: 160px;
                height: 160px;
                padding: 10px;
                transform: translate(-50%, -50%);
            }
        }

        .about-content {
            p {
                margin-bottom: 38px;
            }

            .feature-list {
                margin: 0 0 7px;

                li {
                    padding-left: 31px;
                    margin-bottom: 28px;

                    img {
                        position: absolute;
                        top: 3px;
                        left: 0;
                        max-width: 20px;
                    }
                }
            }

            .btn-wrap {
                .btn {
                    margin-top: 15px;
                }

                .book-doctor-card {
                    margin-top: 15px;

                    .doc-img {
                        width: 56px;
                        height: 56px;
                        margin-right: 16px;
                        border: 2px solid var(--primaryColor);
                    }

                    .doc-info {
                        width: auto;
                    }
                }
            }
        }
    }
}

/*-------------------------------
    Funfact Section CSS
-------------------------------*/
.counter-area {
    margin: 0 12px;
}

.counter-card-wrap {
    &.style-one {
        .counter-card {
            width: 25%;
            position: relative;
            display: flex;
            justify-content: center;

            &:after {
                position: absolute;
                top: 50%;
                right: 0;
                content: "";
                width: 1px;
                height: 96%;
                background-color: rgba(0, 13, 68, 0.25);
                transform: translateY(-50%);
            }

            &:first-child {
                justify-content: flex-start;
            }

            &:last-child {
                &:after {
                    display: none;
                }
            }

            &:nth-child(1) {
                &:after {
                    right: 70px;
                }
            }

            &:nth-child(2) {
                padding-right: 70px;

                &:after {
                    right: 1px;
                }
            }

            &:nth-child(3) {
                padding-left: 30px;

                &:after {
                    right: -45px;
                }
            }

            &:nth-child(4) {
                padding-left: 110px;

                &:after {
                    right: -65px;
                }
            }

            .counter-icon {
                display: block;
                margin-bottom: 18px;
            }

            h4 {
                font-size: 60px;
                line-height: 1;
                margin-bottom: 12px;
            }
        }
    }

    &.style-two {
        .counter-card {
            width: 25%;

            .counter-icon {
                width: 70px;
                height: 70px;
            }

            .counter-text {
                width: calc(100% - 85px);
                margin-left: auto;

                h4 {
                    font-size: 48px;
                    line-height: 1;
                    margin-bottom: 8px;
                }
            }
        }
    }
}

/*-------------------------------
    Moving Text Section CSS
-------------------------------*/
.move-text {
    position: relative;
    overflow: hidden;
    height: 65px;

    ul {
        position: absolute;
        top: 0;
        left: 0;
        white-space: nowrap;
        white-space: nowrap;
        -webkit-animation: mymove 16s linear infinite;
        animation: mymove 16s linear infinite alternate;

        li {
            display: inline-block;
            font-size: 63px;
            font-weight: 900;
            line-height: 63px;
            font-family: var(--secondaryFont);
            color: transparent;
            margin: 0 9px;
            padding: 0 75px 0 0;
            -webkit-text-stroke: 1px rgba(0, 13, 68, 0.9);
            position: relative;

            &:last-child {
                &:after {
                    display: none;
                }
            }

            &:after {
                position: absolute;
                top: 50%;
                right: 0px;
                content: "";
                width: 47px;
                height: 45px;
                background-image: url(../img/heart-shape.svg);
                background-size: 47px 45px;
                background-repeat: no-repeat;
                background-position: center;
                transform: translateY(-50%);
            }
        }
    }
}

@-webkit-keyframes mymove {
    from {
        left: 0;
    }

    to {
        left: -100%;
    }
}

@keyframes mymove {
    from {
        left: 0;
    }

    to {
        left: -100%;
    }
}

/*-------------------------------
        Why Choose Us CSS
-------------------------------*/
.wh-area {
    &.style-one {
        .wh-content {
            .feature-item-wrap {
                margin-bottom: 42px;

                .feature-item {
                    margin-bottom: 28px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .feature-icon {
                        width: 65px;
                        top: 5px;
                    }

                    .feature-info {
                        width: calc(100% - 65px);
                        margin-left: auto;

                        h3 {
                            margin-bottom: 11px;
                        }
                    }
                }
            }
        }

        .wh-img-wrap {
            background-image: url(../img/why-choose-us/wh-img-1.jpg);
            height: 550px;

            .testimonial-slider-one {
                position: absolute;
                width: calc(100% - 40px);
                bottom: 20px;
                left: 50%;
                margin: 0;
                transform: translateX(-50%);

                .slider-btn {
                    position: absolute;
                    top: 50px;
                    right: 30px;
                    z-index: 1;

                    .prev-btn,
                    .next-btn {
                        background-color: rgba(255, 255, 255, 0.2);
                        border: 1px solid rgba(255, 255, 255, 0.45);

                        &:hover {
                            background-color: var(--primaryColor);
                            border-color: transparent;
                        }

                        i {
                            font-size: 29px;
                            font-weight: 300;
                            line-height: 1;
                            color: var(--whiteColor);
                        }
                    }

                    .prev-btn {
                        margin-right: 10px;
                    }

                    .next-btn {
                        margin-left: 10px;
                    }
                }
            }

            .circle-text-wrap {
                bottom: 0;
                left: 50%;
                width: 180px;
                height: 180px;
                padding: 10px;
                transform: translateX(-50%);
                border-radius: 10px 10px 0 0;
            }
        }
    }

    &.style-two {
        .wh-content {
            .feature-item-list {
                margin-bottom: 50px;
                max-width: 80%;

                li {
                    font-size: 20px;
                    padding: 19.5px 16px 19.5px 67px;
                    margin-bottom: 20px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    img {
                        position: absolute;
                        top: 17px;
                        left: 18px;
                        max-width: 30px;
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }

            .contact-card {
                &:hover {
                    .contact-icon {
                        background-color: var(--primaryColor) !important;

                        img {
                            filter: brightness(0) invert(1);
                        }
                    }
                }
            }
        }

        .wh-img-wrap {
            background-image: url(../img/why-choose-us/wh-img-2.jpg);
            height: 670px;

            .wh-img-one {
                display: inline-block;
                bottom: 123px;
                left: -50px;
                padding: 5px;
            }
        }
    }

    &.style-three {
        .wh-content {
            .feature-item-wrap {
                .feature-item {
                    margin-bottom: 30px;
                    padding: 26px 30px 26px;
                    box-shadow: 0 4px 15px rgba(0, 13, 68, 0.10);

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .feature-icon {
                        width: 80px;
                        height: 80px;
                    }

                    .feature-info {
                        width: calc(100% - 110px);
                        margin-left: auto;

                        h3 {
                            margin-bottom: 11px;
                        }
                    }

                    &:hover {
                        .feature-icon {
                            background-color: var(--primaryColor);

                            img {
                                filter: brightness(0) invert(1);
                            }
                        }
                    }
                }
            }
        }

        .wh-img-wrap {
            height: 732px;
            background-image: url(../img/why-choose-us/wh-img-4.jpg);

            .book-doctor {
                width: 433px;
                padding: 29px 25px;
                bottom: 30px;
                left: 50%;
                transform: translateX(-50%);

                .doc-img {
                    width: 80px;
                    height: 80px;
                    border: 2px solid var(--secondaryColor);
                }

                .doc-info {
                    width: calc(100% - 210px);
                    margin-left: 25px;
                }

                .tb-btn {
                    width: 102px;
                    padding: 8px 14px;
                }
            }
        }
    }

    &.style-four {
        .wh-content {
            .feature-item-list {
                margin-bottom: 55px;
                padding-right: 50px;

                li {
                    font-size: 20px;
                    padding: 0 0 0 47px;
                    margin-bottom: 34px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    img {
                        position: absolute;
                        top: -1px;
                        left: 0;
                        max-width: 30px;
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }

        .wh-img-wrap {
            background-image: url(../img/why-choose-us/wh-img-5.jpg);
            height: 510px;

            .wh-img-one {
                display: inline-block;
                bottom: 0;
                left: -50px;
                padding: 5px;
            }
        }
    }
}

.alert-box {
    padding: 24px 30px;
    box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;

    i {
        color: var(--optionalColor);
        font-size: 32px;
        line-height: 0.8;
    }

    p {
        width: calc(100% - 60px);
        margin-left: auto;
    }
}

.pay-feature-list {
    li {
        position: relative;
        padding-left: 28px;
        margin-bottom: 19px;

        &:last-child {
            margin-bottom: 0;
        }

        img {
            max-width: 18px;
            position: absolute;
            top: 5px;
            left: 0;
        }
    }
}

/*-------------------------------
        Location Section CSS
-------------------------------*/
.location-card {
    &.style-one {
        border: 1px solid rgba(0, 13, 68, 0.25);
        box-shadow: 0px 5px 0px #DDE2E2;
        padding: 15px;

        .wishlist-counter {
            top: 33px;
            left: 33px;
            padding: 7px 20px 7px;
            border-radius: 8px;

            i {
                font-size: 22px;
                line-height: 0.8;
                position: relative;
                top: 2px;
                margin-right: 8px;
            }
        }

        .location-info {
            width: calc(100% - 60px);
            bottom: 33px;
            left: 50%;
            padding: 21px 23px;
            transform: translateX(-50%);

            h3 {
                margin-bottom: 20px;
            }

            p {
                padding-left: 23px;

                img {
                    position: absolute;
                    top: 3px;
                    left: 0;
                }
            }
        }

        &:hover {
            border-color: var(--secondaryColor);
            box-shadow: 0px 5px 0px var(--secondaryColor);
        }
    }

    &.style-two {
        box-shadow: 0px 4px 15px rgba(0, 13, 68, 0.1);
        padding: 15px;

        .location-img {
            .wishlist-counter {
                top: 20px;
                left: 20px;
                padding: 7px 20px 7px;
                border-radius: 8px;

                i {
                    font-size: 22px;
                    line-height: 0.8;
                    position: relative;
                    top: 2px;
                    margin-right: 8px;
                }
            }
        }

        .location-info {
            padding: 35px 10px 20px;

            &>div {
                width: calc(100% - 60px);
            }

            h3 {
                margin-bottom: 16px;
            }

            p {
                padding-left: 23px;

                img {
                    position: absolute;
                    top: 3px;
                    left: 0;
                }
            }

            .location-link {
                width: 55px;
                height: 55px;

                i {
                    font-size: 25px;
                    line-height: 0.8;
                    transition: var(--transition);
                }

                &:hover {
                    background-color: var(--primaryColor);

                    i {
                        color: var(--whiteColor);
                    }
                }
            }
        }

        &:hover {
            border-color: transparent;
            box-shadow: 0 4px 25px rgba(0, 13, 68, 0.1);
        }
    }
}

/*------------------------------------
    Hospital & Hospital Details CSS
--------------------------------------*/
.hospital-card-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    column-gap: 24px;
}

.hospital-card {
    transition-delay: 0s !important;

    .hospital-category {
        padding: 3px 16px;

        &.style-one {
            &:hover {
                background-color: var(--secondaryColor);
                color: var(--whiteColor);
            }
        }

        &.style-two {
            &:hover {
                background-color: var(--primaryColor);
            }
        }
    }

    &.style-one,
    &.style-two,
    &.style-five {
        padding: 15px;

        .hospital-img {
            margin-bottom: 0px;
        }

        .hospital-info {
            padding: 0 5px 10px;

            .hospital-category,
            .ratings {
                margin-top: 8px;
            }

            .ratings {
                i {
                    color: #FF9C00;
                    font-size: 20px;
                }
            }

            .hospital-location {
                padding-left: 24px;
                position: relative;
                padding-bottom: 0px;
                margin-bottom: 30px;
                border-bottom: 1px solid rgba(0, 13, 68, 0.20);

                i,
                img {
                    top: 4px;
                    left: 0;
                    position: absolute;
                }
            }

            .booking-link {
                padding-left: 25px;
            }
        }
    }

    &.style-one {
        border: 1px solid rgba(0, 13, 68, 0.25);
        box-shadow: 0px 6px 0px #DDE2E2;

        .hospital-img {
            .share-action {
                top: 20px;
                left: 20px;
            }
        }

        .hospital-info {
            .ratings {
                li {
                    margin-left: -1px;

                    i {
                        color: #FF9C00;
                        font-size: 19px;
                    }
                }
            }

            .booking-link {
                padding-left: 27px;

                img {
                    top: 3px;
                }
            }

            .hospital-action-btn {
                &:after {
                    /* position: absolute;
                    top: calc(50% - 15px);
                    left: calc(50% + 28px);
                    content: "/";
                    font-size: 25px;
                    font-weight: 300;
                    color: rgba(0, 13, 68, 0.30);
                    transform: rotate(9deg) translateX(-50%); */
                }
            }
        }

        &:hover {
            transform: translateY(-5px);
            border-color: var(--secondaryColor);
            box-shadow: 0 6px 0px var(--secondaryColor);
        }
    }

    &.style-two,
    &.style-five {
        .hospital-img {
            margin-bottom: 29px;

            .share-action {
                top: 20px;
                right: 20px;
            }

            .hospital-category {
                bottom: 20px;
                left: 20px;
            }
        }

        .hospital-info {
            padding: 0 5px 15px;

            .ratings {
                margin-bottom: 15px;

                li {
                    margin-left: -1px;

                    i {
                        color: #FF9C00;
                        font-size: 20px;
                    }
                }
            }

            .hospital-metainfo {
                padding-bottom: 25px;
                margin-bottom: 30px;
                border-bottom: 1px solid rgba(0, 13, 68, 0.20);

                li {
                    padding-left: 27px;
                    margin-right: 22px;
                    display: inline-block;

                    &:last-child {
                        margin-right: 0;
                    }

                    img {
                        position: absolute;
                        top: 5px;
                        left: 0;
                    }
                }
            }

            .booking-link {
                padding-left: 25px;
            }
        }
    }

    &.style-two {
        border: 1px solid rgba(0, 13, 68, 0.25);
    }

    &.style-three,
    &.style-four {
        padding: 15px;

        .hospital-img {
            width: 320px;

            .share-action {
                top: 20px;
                left: 20px;
            }
        }

        .hospital-info {
            width: calc(100% - 345px);
            padding: 0 5px 10px;
            margin-left: auto;

            .hospital-category,
            .ratings {
                margin-top: 8px;
            }

            .ratings {
                i {
                    color: #FF9C00;
                    font-size: 20px;
                }

                span {
                    position: relative;
                    top: 2px;
                }
            }

            .hospital-location {
                padding-left: 24px;
                position: relative;
                margin-bottom: 27px;

                i,
                img {
                    top: 4px;
                    left: 0;
                    position: absolute;
                }
            }

            .booking-link {
                padding-left: 28px;

                img {
                    top: 3px;
                }
            }
        }
    }

    &.style-four,
    &.style-five {
        box-shadow: 0 4px 15px rgba(0, 13, 68, 0.10);
    }
}

.swiper-slide {
    .hospital-card {
        &:hover {
            transform: translateY(0);
        }
    }
}

.hospital-Image-slider {
    .slider-btn {

        .prev-btn,
        .next-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;

            i {
                font-size: 29px;
                line-height: 0.8;
            }
        }

        .prev-btn {
            left: 38px;
        }

        .next-btn {
            right: 38px;
        }
    }
}

.share-action {
    .share-btn {
        padding-bottom: 7px;
        margin-right: 10px;

        span {
            width: 40px;
            height: 40px;
            cursor: pointer;
            transition: var(--transition);

            i {
                transition: var(--transition);
            }
        }

        .social-profile {
            position: absolute;
            top: 100%;
            visibility: hidden;
            opacity: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;

            li {
                margin: 0 0 7px;
                transform: translateX(-10px);
                transition: var(--transition);
                visibility: hidden;
                opacity: 0;

                &:nth-child(2) {
                    transition-delay: 0.2s;
                }

                &:nth-child(3) {
                    transition-delay: 0.3s;
                }

                &:nth-child(4) {
                    transition-delay: 0.4s;
                }

                a {
                    width: 40px;
                    height: 40px;
                    background-color: var(--whiteColor);

                    i {
                        transition: var(--transition);
                        color: var(--titleColor);
                    }

                    &:hover {
                        background-color: var(--primaryColor);

                        i {
                            color: var(--whiteColor);
                        }
                    }
                }
            }
        }

        &:hover {
            span {
                &:hover {
                    background-color: var(--primaryColor) !important;

                    i {
                        color: var(--whiteColor);
                    }
                }
            }

            .social-profile {
                visibility: visible;
                opacity: 1;
                z-index: 1;

                li {
                    visibility: visible;
                    opacity: 1;
                    transform: translateX(0);
                }
            }
        }
    }

    .add-to-wishlist {
        width: 40px;
        height: 40px;

        i {
            transition: var(--transition);
        }

        &:hover {
            background-color: var(--primaryColor) !important;

            i {
                color: var(--whiteColor);
            }
        }
    }
}

.hospital-info-card {
    box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);
    padding: 15px;

    .hospital-img {
        width: 400px;

        .share-action {
            top: 30px;
            left: 30px;
        }
    }

    .hospital-info {
        width: calc(100% - 420px);
        margin-left: auto;

        h3 {
            font-size: 24px;
        }

        .ratings {
            margin-bottom: 15px;

            .rating {
                li {
                    margin-right: -2px;

                    &:last-child {
                        margin-right: 0;
                    }

                    i {
                        font-size: 20px;
                    }
                }
            }

            span {
                top: 1px;
            }
        }

        h3 {
            margin-bottom: 13px;
        }

        .contact-info {
            li {
                margin-bottom: 8px;
                padding-left: 30px;

                &:last-child {
                    margin-bottom: 0;
                }

                i {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    font-size: 20px;
                    color: var(--titleColor);
                    transform: translateY(-50%);
                }
            }
        }
    }
}

.hospital-search-form {
    .form-group {
        width: calc(50% - 105px);
        margin: 0 24px 0 0;
    }

    button {
        width: 162px;
        padding-left: 20px;
        padding-right: 20px;
    }

    &.style-two {
        .form-group {
            width: calc(33.33% - 78px);
            margin: 0 24px 0 0;
        }
    }
}

.filter-radio-group {
    li {
        margin-bottom: 10px;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

/*------------------------------------
    Doctor & Doctor Details Card CSS
------------------------------------*/
.single-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
}

.doctor-img.doctor-search-img.position-relative.round-10.mb-32.mb-md-0 {
    width: 190px;
    height: 190px;
}

.doctor-img.position-relative.round-10.top-doctors-img {
    width: 100%;
    height: 270px;
    overflow: visible;
}

.d-flex.flex-column.align-items-end.gap-2.w-60.doctor-view-more-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

button.btn.doctor-add-to-favorites.bg-ash.btn-sm.round-10.p-10.doctor-add-to-favorites-button {
    padding: 10px 20px;
}

span.fs-xx-14.text-para.d-flex.align-items-center.gap-1.single-line-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

span.fs-xx-14.text-para.round-5.d-inline-block.bg_primary.text-white.fw-bold {
    padding: 0px 5px;
}

.filter-box {
    padding: 30px 30px 20px;
    box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);

    .search-tag {
        li {
            display: inline-block;
            margin-right: 11px;
            margin-bottom: 11px;
            position: relative;

            &:last-child {
                margin-right: 0;
            }

            .input:checked+label:before {
                content: "";
                background-color: var(--primaryColor);
                border-color: transparent;
                position: absolute;
            }

            [type="radio"]:checked,
            [type="radio"]:not(:checked) {
                position: absolute;
                left: -9999px;
            }

            [type="radio"]:checked+label,
            [type="radio"]:not(:checked)+label {
                display: block;
                width: 100%;
                padding: 7px 15px;
                border-radius: 50px;
                position: relative;
                cursor: pointer;
            }

            [type="radio"]:checked+label:before,
            [type="radio"]:not(:checked)+label:before {
                position: absolute;
                top: 0;
                left: 0;
                content: "";
                width: 100%;
                height: 100%;
                border: 1px solid rgba(0, 13, 68, 0.15);
                border-radius: 50px;
                background-color: transparent;
                transition: var(--transition);
            }

            [type="radio"]:checked+label:after,
            [type="radio"]:not(:checked)+label:after {
                position: absolute;
                top: 0;
                left: 0;
                content: "";
                width: 100%;
                height: 100%;
                background-color: var(--primaryColor);
                border-radius: 50px;
                transition: var(--transition);
                z-index: -1;
            }

            [type="radio"]:not(:checked)+label:after {
                opacity: 0;
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            [type="radio"]:checked+label {
                color: var(--whiteColor);
            }

            [type="radio"]:checked+label:after {
                opacity: 1;
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }
    }
}

.doctor-card {
    transition-delay: 0s !important;

    .doctor-category {
        padding: 3px 16px;

        &.style-one {
            &:hover {
                background-color: var(--secondaryColor);
                color: var(--whiteColor);
            }
        }

        &.style-two {
            &:hover {
                background-color: var(--primaryColor);
            }
        }
    }

    &.style-one,
    &.style-two,
    &.style-five {
        transition: var(--transition);
        padding: 15px;

        .doctor-img {
            margin-bottom: 32px;
        }

        .doctor-info {
            padding: 0 5px 10px;

            .ratings {
                i {
                    color: #FF9C00;
                    font-size: 20px;
                }
            }

            .doctor-degree {
                li {
                    position: relative;
                    padding-right: 3px;
                    margin-right: 1px;

                    &:after {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        content: ",";
                        font-size: 14px;
                    }

                    &:last-child {
                        margin-right: 0;
                        padding-right: 0;

                        &:after {
                            display: none;
                        }
                    }
                }
            }

            .doctors-location {
                padding-left: 24px;
                position: relative;
                padding-bottom: 27px;
                margin-bottom: 30px;
                border-bottom: 1px solid rgba(0, 13, 68, 0.20);

                i,
                img {
                    top: 4px;
                    left: 0;
                    position: absolute;
                }
            }

            .booking-link {
                padding-left: 25px;
            }
        }
    }

    &.style-one {
        border: 1px solid rgba(0, 13, 68, 0.25);
        box-shadow: 0px 6px 0px #DDE2E2;

        .doctor-img {
            .share-action {
                top: 20px;
                left: 20px;
            }
        }

        &:hover {
            border-color: var(--secondaryColor);
            box-shadow: 0px 6px 0px var(--secondaryColor);
        }
    }

    &.style-two,
    &.style-five {
        transition: var(--transition);

        .doctor-img {
            .share-action {
                top: 20px;
                right: 20px;
            }

            .doctor-category {
                bottom: 20px;
                left: 20px;
            }
        }

        .doctor-info {
            padding: 0 5px 10px;

            .ratings {
                margin-bottom: 15px;

                li {
                    margin-left: -1px;

                    i {
                        color: #FF9C00;
                        font-size: 20px;
                    }
                }
            }

            .doctor-degree {
                li {
                    position: relative;
                    padding-right: 3px;
                    margin-right: 1px;

                    &:after {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        content: ",";
                        font-size: 14px;
                    }

                    &:last-child {
                        margin-right: 0;
                        padding-right: 0;

                        &:after {
                            display: none;
                        }
                    }
                }
            }

            .doctors-location {
                padding-left: 24px;
                position: relative;
                padding-bottom: 27px;
                margin-bottom: 30px;
                border-bottom: 1px solid rgba(0, 13, 68, 0.20);

                i,
                img {
                    top: 4px;
                    left: 0;
                    position: absolute;
                }
            }

            .booking-link {
                padding-left: 25px;
            }
        }
    }

    &.style-three {
        padding: 15px;
        box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);

        .doctor-img {
            .social-profile {
                position: absolute;
                bottom: 25px;
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
                text-align: center;

                li {
                    margin-right: 5px;
                    transform: translateY(10px);
                    visibility: hidden;
                    opacity: 0;
                    transition: var(--transition);

                    &:nth-child(2) {
                        transition-delay: 0.2s;
                    }

                    &:nth-child(3) {
                        transition-delay: 0.3s;
                    }

                    &:nth-child(4) {
                        transition-delay: 0.4s;
                    }

                    &:nth-child(5) {
                        transition-delay: 0.5s;
                    }

                    &:last-child {
                        margin-right: 0;
                    }

                    a {
                        width: 38px;
                        height: 38px;
                        border-radius: 50%;
                        background-color: var(--titleColor);

                        i {
                            color: var(--whiteColor);
                        }

                        &:hover {
                            background-color: var(--secondaryColor);
                        }
                    }
                }
            }

            &:hover {
                .social-profile {
                    li {
                        visibility: visible;
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            }
        }

        .doctor-info {
            padding: 0 10px 9px;
        }
    }

    &.style-four {
        box-shadow: 0 4px 15px rgba(0, 13, 68, 0.04);

        .doctor-img {
            border-radius: 20px 20px 0 0;

            img {
                border-radius: 20px 20px 0 0;
            }
        }

        .doctor-info {
            padding: 0 20px 33px 35px;
        }
    }

    &.style-five {
        box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);

        .doctor-info {
            padding: 0 8px 5px;
        }
    }
}

.features-list {
    li {
        padding-left: 40px;
        margin-top: 15px;

        &:first-child {
            margin-top: 0;
        }

        i {
            color: var(--primaryColor);
            position: absolute;
            top: 3.5px;
            left: 0;
            font-size: 25px;
            line-height: 0.8;
            font-weight: 300;
        }
    }
}

.address-box-wrap {
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);

    .address-box {
        padding: 30px 25px 15px;

        .contact-card-wrap {
            .contact-card {
                margin-bottom: 20px;

                .contact-icon {
                    width: 50px;
                    height: 50px;
                    margin-right: 0;
                }

                .contact-info {
                    width: calc(100% - 70px);
                    margin-left: auto;
                }
            }
        }
    }
}

.review-card-wrap {
    .review-card {
        box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);
        margin-bottom: 30px;
        padding: 25px 25px 24px;

        .review-author {
            margin-bottom: 24px;

            .review-author-img {
                width: 90px;
                height: 90px;
                border: 2px solid var(--primaryColor);
            }

            .review-author-info {
                width: calc(100% - 115px);
                margin-left: auto;

                .ratings {
                    .rating {
                        li {
                            i {
                                font-size: 21px;
                            }
                        }
                    }
                }
            }
        }
    }
}

.department_selection {
    border: 1px solid rgba(0, 13, 68, 0.16);
    box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);
    padding: 10px 20px;
    background-image: url(../img/icons/down-arrow-1.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 19px) 50%;
    background-size: 12px;
    appearance: none;
}

.availability-table {
    border-left: 1px solid rgba(0, 13, 68, 0.15);
    border-bottom: 1px solid rgba(0, 13, 68, 0.15);
    border-right: 1px solid rgba(0, 13, 68, 0.15);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

    thead {
        tr {
            th {
                background-color: var(--primaryColor);
                padding: 17px 30px;
                border: none;

                &:first-child {
                    border-radius: 15px 0 0 0;
                }

                &:last-child {
                    border-radius: 0 15px 0 0;
                }
            }
        }
    }

    tbody {
        tr {
            td {
                background-color: var(--ashColor);
                padding: 19px 30px;
                border-top: none;
                border-left: none;
                border-right: 1px solid rgba(0, 13, 68, 0.15);
                border-bottom: 1px solid rgba(0, 13, 68, 0.15);

                &:last-child {
                    border-right: none;
                }

                a {
                    visibility: hidden;
                    opacity: 0;
                    z-index: -1;
                    padding: 5px 15px;
                }

                &:hover {
                    a {
                        visibility: visible;
                        opacity: 1;
                        z-index: 1;
                    }
                }
            }

            &:last-child {
                td {
                    border-bottom: none;
                }
            }
        }
    }

    &.style-two {
        tr {

            th,
            td {
                padding: 30px 30px;

                &:first-child {
                    width: 88%;
                }

                &:last-child {
                    width: 22%;
                    text-align: center;
                }

                .promo-table-data {
                    padding-left: 22px;

                    &:before {
                        position: absolute;
                        top: 5px;
                        left: 0;
                        content: "";
                        width: 10px;
                        height: 10px;
                        border-radius: 50%;
                        background-color: var(--titleColor);
                    }
                }
            }
        }
    }
}

.doctor-tablist {
    .nav-item {
        display: inline-block;
        margin: 10px 4px 0px 0px;
        margin-right: 12px;

        &:last-child {
            margin-right: 0;
        }

        .nav-link {
            display: inline-block;
            line-height: 15px;
            padding: 10.5px 21px 10.5px;
            border: 1px solid rgba(0, 13, 68, 0.25);
            border-radius: 50px;
            color: var(--paraColor);
            background-color: transparent;
            transition: var(--transition);

            &.active,
            &:hover {
                background-color: var(--primaryColor);
                color: var(--whiteColor);
                border-color: transparent;
            }
        }
    }

    &.style-two {
        .nav-item {
            .nav-link {

                &.active,
                &:hover {
                    background-color: #FEC091;
                    color: var(--titleColor);
                    border-color: transparent;
                }
            }
        }
    }
}

/*-------------------------------
        Testimonial Section CSS
-------------------------------*/
.testimonial-bg {
    &.style-one {
        height: 592px;
        background-image: url(../img/testimonial-bg.jpg);

        .circle-text-box {
            bottom: -1px;
            padding: 20px 20px 0 0;
            border-radius: 0 20px 0;

            &:before {
                position: absolute;
                top: -34px;
                left: 0px;
                content: "";
                width: 35px;
                height: 35px;
                border-radius: 50%;
                background-color: transparent;
                box-shadow: -12px -12px #fff;
                transform: rotate(-90deg);
            }

            &:after {
                position: absolute;
                bottom: 1px;
                right: -34px;
                content: "";
                width: 35px;
                height: 35px;
                border-radius: 50%;
                background-color: transparent;
                box-shadow: -12px -12px #fff;
                transform: rotate(-82deg);
            }

            .circle-text-wrap {
                width: 160px;
                height: 160px;
            }
        }
    }
}

.testimonial-content {
    &.style-one {
        .section-title {
            margin-bottom: 16px;
        }

        p {
            margin-bottom: 37px;
        }

        .testimonial-slider-one {
            border: 1px solid rgba(0, 13, 68, 0.25);
            border-radius: 15px;
            padding: 25px 25px 30px;

            .slider-btn {
                position: absolute;
                bottom: 55px;
                right: 20px;
                z-index: 1;

                .prev-btn {
                    margin-right: 10px;
                }

                .next-btn {
                    margin-left: 10px;
                }
            }
        }
    }
}

.testimonial-card {
    .client-info-wrap {
        .client-img {
            width: 90px;
            height: 90px;
        }

        .client-info {
            width: calc(100% - 115px);
        }
    }

    &.style-one {
        padding: 30px;

        .client-info-wrap {
            margin-bottom: 34px;

            .client-img {
                width: 90px;
                height: 90px;
                border: 2px solid var(--secondaryColor);
            }

            .client-info {
                width: calc(100% - 115px);
                position: relative;
                top: 2px;
            }
        }

        .rating {
            margin-bottom: 20px;

            li {
                margin-right: 3px;

                i {
                    font-size: 22px;
                    color: #FF9C00;
                    line-height: 0.8;
                }
            }
        }

        p {
            padding-right: 60px;
        }

        .quote-icon {
            bottom: 30px;
            right: 30px;
        }
    }

    &.style-two,
    &.style-four {

        h4,
        .rating {
            margin-top: 12px;
        }

        .rating {
            li {
                i {
                    font-size: 24px;
                    line-height: 0.8;
                }
            }
        }

        p {
            margin: 20px 0 29px;
        }

        .client-info-wrap {
            .client-img {
                width: 90px;
                height: 90px;
                border: 2px solid var(--secondaryColor);
            }

            .client-info {
                width: calc(100% - 115px);
                margin-left: auto;
            }
        }
    }

    &.style-three {
        padding: 15px;

        .client-img {
            width: 250px;
        }

        .client-info {
            width: calc(100% - 270px);
            margin-left: auto;
            padding-right: 15px;

            .quote-icon {
                position: absolute;
                bottom: 25px;
                right: 30px;
            }

            p {
                margin-top: 15px;
                padding-right: 20px;
                padding-bottom: 5px;
            }

            .rating {
                li {
                    i {
                        font-size: 20px;
                    }
                }
            }
        }
    }

    &.style-four {
        border: none;
        box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);
        padding: 25px 25px 35px 25px;

        .rating {
            position: relative;
            top: 2px;

            li {
                i {
                    font-size: 22px;
                }
            }
        }

        .client-info-wrap {
            .client-img {
                width: 90px;
                height: 90px;
                border: 2px solid var(--primaryColor);
                transition: var(--transition);
            }

            .client-info {
                width: calc(100% - 185px);
                margin-left: 20px;
            }
        }

        &:hover {
            .client-info-wrap {
                .client-img {
                    border: 2px solid var(--secondaryColor);
                }
            }
        }
    }
}

.testimonial-slider-two {
    .slider-btn {

        .prev-btn,
        .next-btn {
            position: absolute;
            top: calc(50% - 10px);
            transform: translateY(-50%);
            bottom: auto;
            z-index: 1;
            visibility: hidden;
            opacity: 0;
            z-index: 1;
            transition: var(--transition);
        }

        .prev-btn {
            left: 0;
        }

        .next-btn {
            right: 0;
        }
    }

    &:hover {
        .slider-btn {

            .prev-btn,
            .next-btn {
                visibility: visible;
                opacity: 1;
            }
        }
    }
}

.testimonial-slider-four {
    .slider-btn {

        .prev-btn,
        .next-btn {
            box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);
            position: absolute;
            top: 50%;
            z-index: 1;
            transform: translateY(-50%);
        }

        .prev-btn {
            left: 5px;
        }

        .next-btn {
            right: 5px;
        }
    }
}

.testimonial-card-wrap {
    padding: 30px;
}

/*------------------------------------
        Work process Section CSS
------------------------------------*/
.work-process-area {
    &.style-two {
        &:before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 100%;
            height: 82%;
            background-color: var(--titleColor);
            z-index: -1;
        }

        &:after {
            position: absolute;
            top: 75%;
            left: 0;
            content: "";
            width: 100%;
            height: 110px;
            background-image: url(../img/hero/hero-curve.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: top center;
            z-index: -1;
        }
    }
}

.work-process-wrap {
    &.style-one {
        .process-card {
            width: 33.33%;
        }
    }
}

.process-card {
    &.style-one {
        .process-img {
            width: 180px;
            height: 180px;
            margin: 0 auto 58px;
            border: 2px solid var(--primaryColor);

            .process-counter {
                position: absolute;
                bottom: -25px;
                left: 50%;
                width: 50px;
                height: 50px;
                transform: translateX(-50%);
            }
        }

        .right-arrow {
            position: absolute;
            top: 67px;
            right: -20px;
        }

        &:hover {
            transform: translateY(-5px);
        }
    }

    &.style-two {
        .process-icon {
            width: 180px;
            height: 180px;
            margin: 0 auto 58px;

            .process-counter {
                position: absolute;
                bottom: -25px;
                left: 50%;
                width: 50px;
                height: 50px;
                transform: translateX(-50%);
            }
        }

        .right-arrow {
            position: absolute;
            top: 67px;
            right: -55px;
        }
    }
}

/*-------------------------------
        Promo Video Section CSS
-------------------------------*/
.promo-video {
    .play-video {
        width: 86px;
        height: 86px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: var(--transition);

        i {
            position: relative;
            left: 2px;
            top: 1px;
            transition: var(--transition);
        }
    }

    &.style-one {
        background-image: url(../img/video/promo-video-bg-1.jpg);
        height: 500px;

        .play-video {
            width: 90px;
            height: 90px;

            i {
                font-size: 28px;
                line-height: 0.8;
                color: var(--secondaryColor);
            }

            &:hover {
                background-color: var(--secondaryColor) !important;

                i {
                    color: var(--whiteColor);
                }
            }
        }
    }

    &.style-two {
        background-image: url(../img/video/promo-video-bg-2.jpg);
        height: 500px;

        .play-video {
            width: 90px;
            height: 90px;

            i {
                font-size: 28px;
                line-height: 0.8;
                color: var(--secondaryColor);
            }

            &:hover {
                background-color: var(--secondaryColor) !important;

                i {
                    color: var(--whiteColor);
                }
            }
        }
    }

    &.style-three,
    &.style-four {
        .play-video {
            i {
                font-size: 28px;
                line-height: 0.8;
                color: var(--secondaryColor);
            }

            &:hover {
                background-color: var(--secondaryColor) !important;

                i {
                    color: var(--whiteColor);
                }
            }
        }
    }

    &.style-three {
        background-image: url(../img/hospitals/single-hospital-4.jpg);
        height: 515px;
    }

    &.style-four {
        background-image: url(../img/telemedicine/telesales.jpg);
        height: 500px;
    }

    &.style-five {
        background-image: url(../img/video/promo-video-bg-3.jpg);
        height: 750px;

        .play-video {
            i {
                font-size: 28px;
                line-height: 0.8;
                color: var(--primaryColor);
            }

            &:hover {
                background-color: var(--primaryColor) !important;

                i {
                    color: var(--whiteColor);
                }
            }
        }
    }
}

/*-------------------------------
        Appointment Section CSS
-------------------------------*/
.appointment-area {
    &.style-one {
        margin: 0 10px 30px;
        background-image: url(../img/appointment-bg.jpg);

        .book-doctor {
            max-width: 288px;
            padding: 6px;
            border: 1px solid rgba(0, 13, 68, 0.25);

            .doctor-img {
                width: 56px;
                height: 56px;
                border: 2px solid var(--primaryColor);
            }

            .doctor-info {
                width: calc(100% - 76px);
                margin-left: auto;
            }
        }

        .appointment-content {
            p {
                margin-bottom: 23px;
                padding-right: 10px;
            }

            .btn-wrap {
                .btn {
                    margin-top: 10px;
                    margin-right: 30px;
                }

                .play-video {
                    margin-top: 10px;

                    .play-icon {
                        width: 56px;
                        height: 56px;
                        margin-right: 15px;

                        i {
                            font-size: 30px;
                            position: relative;
                            left: 2px;
                        }
                    }
                }
            }
        }

    }
}

/*---------------------------------
       FAQ & Appointment CSS 
-----------------------------------*/
.faq-content {
    p {
        margin-bottom: 27px;
    }

    .btn-wrap {
        .btn {
            margin-right: 13px;
        }

        .btn,
        .contact-card {
            margin-top: 10px;
        }
    }

    .faq-shape {
        margin-top: 75px;
        padding-right: 20px;
    }
}

.accordion {

    &.style-one,
    &.style-two {
        .accordion-item {
            margin: 0 0 30px;
            border: none;
            padding: 0 0 10px;
            border-radius: 10px;

            &:last-child {
                margin: 0;
            }

            .accordion-header {
                margin-bottom: 0;
                position: relative;
                z-index: 3;
                border-radius: 0;

                .accordion-button {
                    display: flex;
                    align-items: flex-start !important;
                    margin: 0;
                    font-size: 20px;
                    font-family: var(--secondaryFont);
                    font-weight: 900;
                    line-height: 28px;
                    color: var(--titleColor);
                    text-align: left;
                    align-items: center;
                    padding: 20px 55px 10px 28px;
                    border-radius: 10px;
                    background-color: transparent;
                    box-shadow: none;
                    transition: var(--transition);

                    &:after {
                        display: none;
                    }

                    &:focus {
                        outline: none;
                        box-shadow: none;
                    }

                    .accord-arrow {
                        display: inline-block;
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        position: absolute;
                        top: 24px;
                        right: 25px;
                        text-align: center;

                        i {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            font-size: 14px;
                            font-weight: 500;
                            line-height: 0.9;
                            display: block;
                            margin: 0 auto;
                            color: #5F6368;
                            transform: translate(-50%, -50%);

                            &.minus {
                                visibility: hidden;
                                opacity: 0;
                                top: 50%;
                            }
                        }
                    }
                }
            }

            &.collapsed {
                .accordion-button {
                    color: var(--titleColor);

                    .accord-arrow {
                        border: 1px solid var(--primaryColor);

                        i {
                            color: var(--primaryColor);
                        }
                    }
                }
            }

            &:not(.collapsed) {
                box-shadow: none;

                .accordion-button {
                    .accord-arrow {
                        border: 1px solid var(--secondaryColor);

                        i {
                            color: var(--secondaryColor);
                        }
                    }
                }
            }

            .accordion-body {
                padding: 0px 45px 15px 28px;
                border-top: none;

                p {
                    margin: 0;
                    color: var(--paraColor);
                    font-weight: 400;
                }
            }
        }
    }

    &.style-one {
        .accordion-item {
            background-color: transparent;
            border: 1px solid rgba(0, 13, 68, 0.25);
        }
    }

    &.style-two {
        .accordion-item {
            background-color: var(--ashColor);
        }
    }
}

.accordion-item:not(.collapsed) {
    .accordion-button {
        span {
            .plus {
                visibility: hidden;
                opacity: 0;
            }

            .minus {
                visibility: visible !important;
                opacity: 1 !important;
            }
        }
    }
}

.appointment-box {
    &.style-one {
        background-color: #EFE4E0;
        padding: 47px 40px 50px;
    }

    &.style-two {
        background-color: #EFE4E0;
        padding: 47px 40px 50px;
    }

    .appointment-form {
        .form-group {
            margin-bottom: 14px;

            select {
                background-image: url(../img/icons/down-arrow-1.svg);
                background-size: 10px;
                background-repeat: no-repeat;
                background-position: calc(100% - 15px) 50%;
            }

            img {
                top: 17px;
                right: 15px;
            }

            textarea {
                height: 119px;
            }
        }
    }
}

.error-wrap {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.account-wrap {
    .section-shape {
        bottom: 30px;
        left: 20%;
    }
}

.account-box {
    box-shadow: 0 4px 15px rgba(0, 13, 68, 0.10);
    padding: 36px 40px 40px;

    .or-text {
        margin: 15px 0;

        &:after {
            position: absolute;
            top: 50%;
            left: 0;
            content: "";
            width: 100%;
            height: 1px;
            background-color: rgba(0, 13, 68, 0.20)
        }

        span {
            padding: 5px 14px;
            background-color: var(--whiteColor);
            display: inline-block;
            z-index: 2;
            position: relative;
        }
    }
}

/*-------------------------------
        Blog CSS
-------------------------------*/
.blog-card {
    transition-delay: 0s !important;

    &.style-one {
        padding: 15px;
        border: 1px solid rgba(0, 13, 68, 0.25);
        box-shadow: 0px 5px 0px #DDE2E2;
        transition: var(--transition);

        &:hover {
            border-color: var(--secondaryColor);
            box-shadow: 0px 5px 0px var(--secondaryColor);
        }

        .blog-info {
            padding: 0 10px 10px;

            .blog-date {
                position: relative;
                margin: -30px 15px 0 auto;
                width: 60px;
                height: 60px;
                line-height: 22px;
                padding-top: 2px;

                &:hover {
                    background-color: var(--primaryColor);
                }
            }

            h3 {
                line-height: 30px;
            }

            .blog-metainfo {
                margin-top: 10px;
            }
        }
    }

    &.style-two,
    &.style-four {
        transition: var(--transition);
        padding: 15px;

        .blog-img {
            margin-bottom: 38px;

            .blog-date {
                bottom: 20px;
                left: 20px;
                width: 60px;
                height: 60px;
                line-height: 22px;
                position: absolute;
                padding-top: 2px;
            }
        }

        .blog-info {
            padding: 0 10px 10px;

            .blog-metainfo {
                margin-bottom: 13px;
            }

            h3 {
                line-height: 30px;
            }
        }
    }

    &.style-two {
        border: 1px solid rgba(0, 13, 68, 0.25);

        &:hover {
            border-color: transparent;
            box-shadow: 0 4px 25px rgba(0, 13, 68, 0.1);
        }
    }

    &.style-three {
        padding: 15px;
        box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);
        transition: var(--transition);
        transition-delay: 0;

        .blog-info {
            margin: 20px 0 0;
            padding: 0 15px 15px;
        }
    }

    &.style-four {
        box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);

        .blog-info {
            padding: 0 15px 25px;
        }

        &:hover {
            box-shadow: 0 10px 35px rgba(0, 13, 68, 0.1);
        }
    }
}

.blog-metainfo {
    li {
        padding-left: 25px;
        margin-right: 10px;
        padding-right: 16px;

        &:after {
            position: absolute;
            top: 0;
            right: 0;
            content: "/";
            font-size: 15px;
        }

        &:last-child {
            margin-right: 0;
            padding-right: 0;

            &:after {
                display: none;
            }
        }

        img {
            position: absolute;
            top: calc(50% - 1px);
            transform: translateY(-50%);
            left: -2px;
        }

        a {
            margin-left: 3px;
        }
    }
}

/*-------------------------------
         Pricing Plan CSS
-------------------------------*/
.pricing-card {
    box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);
    padding: 20px 15px 30px;

    &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 35px rgba(0, 13, 68, 0.1);
    }

    .pricing-header {
        padding: 20px 20px;

        .pricing-icon {
            width: 75px;
            height: 75px;

            i {
                font-size: 38px;
                line-height: 0.8;
                padding-top: 3px;
                color: var(--titleColor);
            }
        }

        .pricing-header-text {
            width: calc(100% - 90px);
            margin-left: auto;

            h6 {
                font-weight: 900;
            }

            h2 {
                font-size: 36px;
                line-height: 1;
            }
        }
    }

    p {
        padding: 31px 10px 18px;
        margin-bottom: 0;
    }

    .pricing-features {
        padding: 0 10px;
        margin-bottom: 23px;

        li {
            margin-bottom: 14px;

            &:last-child {
                margin-bottom: 0;
            }

            i {
                float: right;
                position: relative;
                top: 7px;
                font-size: 18px;
                line-height: 0.8;
            }

            &.checked {
                i {
                    color: var(--secondaryColor);
                }
            }

            &.unchecked {
                text-decoration: line-through;

                i {
                    color: #FF0000;
                }
            }
        }
    }

    .btn {
        width: calc(100% - 20px) !important;
        margin: 0 auto;
    }
}

/*----------------------------------------
    Online Consultation & Telemedicine
-----------------------------------------*/
.telesales-content {
    p {
        margin-bottom: 35px;
    }

    .feature-item-list {
        li {
            display: inline-block;
            padding-left: 29px;
            margin-right: 50px;
            margin-bottom: 28px;

            &:last-child {
                margin-right: 0;
            }

            img {
                position: absolute;
                top: 3px;
                left: 0;
                max-width: 20px;
            }
        }
    }
}

/*-------------------------------
         Promo CSS
-------------------------------*/
.promo-area {
    margin: 0 12px;
}

.promo-card {
    .promo-icon {
        width: 80px;
        height: 80px;
        position: relative;
        top: 5px;
        padding: 22px;
    }

    .promo-info {
        width: calc(100% - 100px);
        margin-left: auto;

        h3 {
            margin-bottom: 16px;
        }
    }
}

/*-------------------------------
        Brand Partner CSS
-------------------------------*/
.brand-logo {
    &.style-two {
        box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);
        padding: 20px;
        min-height: 130px;
    }
}

/*-------------------------------
        Contact CSS
-------------------------------*/
.outline-0 {
    &:focus {
        outline: 0;
    }
}

.contact-info-card {
    padding: 50px 15px 50px;

    &.style-two {
        padding: 55px 15px 55px;
    }

    .contact-icon {
        width: 120px;
        height: 120px;
        margin-bottom: 28px;
    }

    h3 {
        margin-bottom: 17px;
    }

    p {
        margin-bottom: 24px;
    }

    .btn {
        .icon-left {
            &.style-one {
                top: 3px;
            }
        }

        .icon-right {
            &.style-one {
                top: 19px;
            }
        }
    }
}

.comp-map {
    iframe {
        width: 100%;
        height: 100%;
    }

    &.style-one {
        height: 500px;
    }

    &.style-two {
        height: 577px;
    }
}

.contact-form {
    textarea {
        height: 206px;
    }
}

.contact-card-wrap {
    &.style-one {
        padding: 47px 0 22px;

        .contact-card {
            width: 33.33%;
            margin-bottom: 25px;
            position: relative;

            &:after {
                position: absolute;
                top: 50%;
                right: 50px;
                content: "";
                width: 1px;
                height: 60px;
                background-color: rgba(0, 13, 68, 0.3);
                transform: translateY(-50%);
            }

            &:last-child {
                &:after {
                    display: none;
                }
            }
        }
    }

    &.style-two {
        .contact-card {
            margin-right: 50px;

            &:last-child {
                margin-right: 0;
            }

            .contact-icon {
                width: 50px;
                height: 50px;
            }

            .contact-info {
                width: auto;
                margin-left: 20px;
            }

            &:hover {
                .contact-icon {
                    background-color: var(--secondaryColor) !important;
                }
            }
        }
    }
}

.contact-card {
    .contact-icon {
        width: 56px;
        height: 56px;
        margin-right: 20px;
    }

    &:hover {
        .contact-icon {
            background-color: var(--primaryColor) !important;

            img {
                filter: brightness(0) invert(1);
            }
        }
    }
}

.form-wrapper {
    .form-group {

        input,
        textarea {
            padding: 13px 20px;
            height: 60px;

            &::placeholder {
                opacity: 1;
                color: var(--paraColor);
            }

            &:focus {
                outline: 0;
            }
        }

        select {
            padding: 10px 15px;
            background-image: url(../img/icons/down-arrow-1.svg);
            background-size: 12px;
            background-repeat: no-repeat;
            appearance: none;
            background-position: calc(100% - 18px) 50%;
        }

        /* Icon styling - only applies when form-group has 'has-icon' class or image is in icon container */
        &.has-icon>img,
        &.position-relative>img,
        .input-icon img,
        .form-icon img,
        .icon-wrapper img {
            position: absolute;
            top: calc(50% - 8px);
            right: 13px;
            transform: translateX(-50%);
        }
    }

    &.style-two {
        .form-group {

            input,
            select,
            textarea {
                border: 1px solid rgba(0, 13, 68, 0.25);
                padding: 6px 14px;
            }
        }
    }
}

.form-box {
    box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);

    &.style-one {
        padding: 30px 30px;
    }

    &.style-two {
        padding: 35px 30px 30px;
    }
}

.checkbox {
    display: block;

    &.form-check {
        padding-left: 0;
    }

    input {
        padding: 0;
        height: initial;
        width: initial;
        margin-bottom: 0;
        display: none;
        cursor: pointer;
    }

    label {
        position: relative;
        cursor: pointer;
        color: var(--titleColor);
        padding-left: 26px;

        &:before {
            content: "";
            -webkit-appearance: none;
            appearance: none;
            background-color: transparent;
            display: inline-block;
            position: absolute;
            vertical-align: middle;
            cursor: pointer;
            margin-right: 5px;
            position: absolute;
            left: 0;
            top: 6px;
        }
    }

    &.style-one {
        label {
            &:before {
                width: 16px;
                height: 16px;
                border: 1px solid rgba(217, 216, 216, 0.93);
                top: 6px;
                border-radius: 5px;
            }
        }
    }

    &.style-two {
        label {
            padding-left: 30px;

            &:before {
                width: 20px;
                height: 20px;
                border: 1px solid rgba(0, 13, 68, 0.2);
                top: 3px;
                border-radius: 5px;
            }
        }
    }

    &.style-three {
        label {
            padding-left: 26px;
            color: var(--paraColor);

            &:before {
                width: 16px;
                height: 16px;
                border: 1px solid rgba(0, 13, 68, 0.2);
                top: 5px;
                border-radius: 0;
            }
        }
    }

    &.style-four {
        label {
            padding-left: 30px;

            &:before {
                width: 20px;
                height: 20px;
                border: 1px solid rgba(0, 13, 68, 0.2);
                top: 3px;
                border-radius: 5px;
            }
        }
    }

    &.style-five {
        label {
            padding-left: 30px;

            &:before {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                border: 1px solid rgba(0, 13, 68, 0.3);
                top: 3px;
            }
        }
    }
}

.checkbox.style-one input:checked+label:before,
.checkbox.style-two input:checked+label:before {
    border-color: transparent;
}

.checkbox input:checked+label:after {
    content: "";
    display: block;
    position: absolute;
}

.checkbox.style-one input:checked+label:after {
    top: 6px;
    left: 0px;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: var(--primaryColor);
}

.checkbox.style-two input:checked+label:after {
    top: 3px;
    left: 0px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--primaryColor);
}

.checkbox.style-three input:checked+label:before,
.checkbox.style-four input:checked+label:before {
    background: var(--primaryColor);
}

.checkbox.style-three input:checked+label:after {
    top: 9px;
    left: 2px;
    width: 20px;
    height: 20px;
    content: "\eb7b";
    font-family: remixicon !important;
    font-size: 12px;
    line-height: 0.8;
    color: var(--whiteColor);
}

.checkbox.style-four input:checked+label:after {
    top: 9px;
    left: 4px;
    width: 20px;
    height: 20px;
    content: "\eb7b";
    font-family: remixicon !important;
    font-size: 12px;
    line-height: 0.8;
    color: var(--whiteColor);
}

.checkbox.style-five input:checked+label:after {
    top: 3px;
    left: 0px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primaryColor);
}

/*-------------------------------
        Blog Details CSS
-------------------------------*/
.blog-desc,
.hospital-desc,
.doctor-desc,
.terms-wrap {
    p {
        margin-bottom: 22px;

        strong,
        b {
            color: var(--titleColor);
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-bottom: 14px;
        font-weight: 800;
        line-height: 1.3;
    }

    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 34px;
    }

    h3 {
        font-size: 32px;
    }

    h4 {
        font-size: 30px;
    }

    h5 {
        font-size: 28px;
    }

    h6 {
        font-size: 24px;
    }

    p {
        &:last-child {
            margin-bottom: 0;
        }
    }

    ol {
        margin-top: 20px;
        margin-bottom: 30px;

        li {
            margin-bottom: 15px;
            padding-left: 3px;
        }
    }

    .wp-blockquote {
        padding: 32px 30px 32px 40px;
        margin-bottom: 30px;

        .quote-icon {
            width: 90px;
        }

        p {
            width: calc(100% - 90px);
            margin-left: auto;
            font-size: 18px;
            line-height: 28px;
        }
    }

    .single-para {
        margin-bottom: 35px;

        &:last-child {
            margin-bottom: 0;
        }

        p {
            margin-bottom: 16px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .single-img {
        .blog-date {
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            line-height: 22px;
            position: absolute;
            padding-top: 2px;
        }
    }

    .promo-video {
        background-image: url(../img/blog/single-blog-2.jpg);
        height: 400px;

        .play-video {
            width: 90px;
            height: 90px;

            i {
                font-size: 28px;
                line-height: 0.8;
                color: var(--secondaryColor);
            }

            &:hover {
                background-color: var(--secondaryColor) !important;

                i {
                    color: var(--whiteColor);
                }
            }
        }
    }

    .feature-item-list {
        &.style-one {
            li {
                padding: 0 0 0 32px;
                margin-bottom: 15px;

                &:last-child {
                    margin-bottom: 0;
                }

                img {
                    position: absolute;
                    top: 2px;
                    left: 0px;
                    max-width: 21px;
                }

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}

.post-metaoption {
    padding: 14px 20px;
    margin-top: 40px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);

    .post-tag {
        span {
            width: 30px;
            height: 30px;
        }
    }

    .tag-list {
        li {
            display: inline-block;

            a {
                color: var(--paraColor);

                &:hover {
                    color: var(--primaryColor);
                }
            }
        }
    }
}

.post-tag,
.post-share {
    span {
        margin-right: 5px;
    }
}

.post-share {
    ul {
        position: relative;
        top: 1px;
    }
}

.author-box {
    box-shadow: 0 4px 15px rgba(0, 13, 68, 0.10);
    padding: 35px 40px 40px;

    .author-img {
        width: 100px;
        height: 100px;
    }

    .author-info {
        width: calc(100% - 128px);
        margin-left: auto;

        h3 {
            margin-bottom: 13px;
        }

        p {
            margin-bottom: 18px;
        }

        .social-profile {
            li {
                a {
                    width: 30px;
                    height: 30px;

                    &:hover {
                        background-color: var(--secondaryColor);

                        i {
                            color: var(--whiteColor);
                        }
                    }
                }
            }
        }
    }
}

.comment-form {
    box-shadow: 0 4px 15px rgba(0, 13, 68, 0.10);
    padding: 35px 40px 40px;
}

.comment-item-wrap {
    .comment-item {
        box-shadow: 0 4px 15px rgba(0, 13, 68, 0.10);
        padding: 34px 40px 31px;
        margin-bottom: 30px;

        &.reply {
            margin-left: 60px;
        }

        &:last-child {
            margin-bottom: 0;
        }

        .comment-author-img {
            width: 80px;
            height: 80px;
            position: relative;
            top: 5px;
        }

        .comment-author-info {
            width: calc(100% - 110px);
            margin-left: auto;
        }

        .comment-text {
            margin-top: 10px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

/*-------------------------------
        Sidebar Widget CSS
-------------------------------*/
.sidebar {
    .sidebar-widget {
        padding: 26px 30px 34px;
        margin-bottom: 30px;
        box-shadow: 0 4px 15px rgba(0, 13, 68, 0.1);

        &:last-child {
            margin-bottom: 0;
        }

        &.style-two {
            padding: 20px 20px 24px;
        }

        &.style-three {
            padding: 0;
        }

        .sidebar-widget-title {
            &.style-two {
                padding-bottom: 13px;
                border-bottom: 1px solid rgba(0, 13, 68, 0.10);
                position: relative;

                &:after {
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                    content: "";
                    width: 20px;
                    height: 3px;
                    background-color: var(--primaryColor);
                }
            }
        }
    }
}

/* //Search Widget CSS  */
.search-widget {
    input {
        height: 50px;
        padding: 10px 55px 10px 15px;

        &::placeholder {
            opacity: 1;
            color: var(--paraColor);
        }
    }

    button {
        position: absolute;
        width: 50px;
        border-radius: 0 10px 10px 0;
        background-color: var(--secondaryColor);
        transition: var(--transition);

        i {
            font-size: 18px;
            color: var(--whiteColor);
            transition: var(--transition);
        }

        &:hover {
            background-color: var(--primaryColor);
        }
    }
}

/* //Category Widget CSS  */
.category-widget {
    ul {
        li {
            margin-bottom: 20px;
            position: relative;

            &:last-child {
                margin-bottom: 0;
            }

            a {
                color: var(--paraColor);
                background-color: var(--ashColor);
                padding: 12px 20px;
                border-radius: 10px;
                display: block;
                width: 100%;
                position: relative;
                transition: var(--transition);

                i,
                img {
                    position: absolute;
                    top: 50%;
                    right: 20px;
                    transform: translateY(-50%);
                    transition: var(--transition);
                }

                &.active,
                &:hover {
                    color: var(--whiteColor);
                    background-color: var(--secondaryColor);

                    img {
                        filter: brightness(0) invert(1);
                    }
                }
            }

            span {
                width: 50%;

                &:last-child {
                    text-align: right;
                }
            }
        }
    }

    &.style-two {
        ul {
            li {
                margin-bottom: 8px;

                &:last-child {
                    margin-bottom: 0;
                }

                a {
                    font-weight: 500;
                    padding-left: 0;

                    &::before {
                        display: none;
                        padding-left: 0;
                    }

                    &:hover {
                        color: var(--primaryColor);

                        span {
                            i {
                                color: var(--primaryColor);
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }
    }

    .social-profile {
        li {
            padding-right: 10px;
            margin-right: 10px;
            border-right: 1px solid var(--paraColor);

            &:last-child {
                margin-right: 0;
                padding-right: 0;
                border-right: none;
            }

            a {
                i {
                    font-family: 15px;
                    color: var(--paraColor);
                }

                &:hover {
                    i {
                        color: var(--primaryColor);
                    }
                }
            }
        }
    }
}

.booking-list {
    li {
        border-bottom: 1px solid rgba(0, 13, 68, 0.15);
        padding: 20px 0;
        margin-bottom: 0 !important;

        &:first-child {
            padding-top: 0;
        }

        &:last-child {
            border-bottom: none;
        }
    }
}

/* //Recent Post Widget CSS  */
.rp-post-wrap {
    .rp-post-card {
        margin-bottom: 30px;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.rp-post-card {
    .rp-post-img {
        width: 83px;
    }

    .rp-post-info {
        width: calc(100% - 108px);
        margin-left: auto;
        position: relative;
        top: -5px;

        h5 {
            line-height: 24px;
        }
    }

    &.style-two {
        .rp-post-img {
            padding: 18px 15px;
        }

        .rp-post-info {
            .rating {
                li {
                    i {
                        color: #FFB62E;
                        font-family: 15px;
                    }
                }
            }
        }
    }
}

/* //Tags Widget CSS  */
.tags-widget {
    ul {
        margin-top: -8px;

        li {
            display: inline-block;
            margin: 10px 4px 0px 0px;

            a {
                display: inline-block;
                line-height: 15px;
                padding: 8.5px 15px 8.5px;
                border-radius: 5px;
                color: var(--paraColor);
                background-color: var(--ashColor);
                border-radius: 5px;
                transition: var(--transition);

                &:hover {
                    background-color: var(--secondaryColor);
                    color: var(--whiteColor);
                }
            }
        }
    }

    &.style-two {
        ul {
            li {
                a {
                    font-size: 16px;
                    padding: 8px 14px 8px;
                    border-radius: 5px;
                    transition: var(--transition);
                }
            }
        }
    }
}

/* //Doctor Info Widget */
.single-doctor-info-widget {
    .contact-info {
        margin-bottom: 24px;

        li {
            margin-bottom: 16px;
            padding-left: 30px;

            &:last-child {
                margin-bottom: 0;
            }

            i,
            img {
                position: absolute;
                top: 5px;
                left: 0;
                font-size: 20px;
                color: var(--titleColor);
            }
        }
    }
}

/* //Skills Widget */
.progressbar-wrap {
    .progress-item {
        margin-bottom: 19px;

        &:last-child {
            margin-bottom: 0;
        }

        .progress-title {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 7px;

            p {
                width: 70%;
                margin: 0;
            }
        }

        .progress {
            height: 9px;
            background: #E6E7EC;
            border-radius: 50px;

            .progress-bar {
                height: 9px;
                border-radius: 50px;
                background-color: var(--secondaryColor);
            }
        }
    }
}

.progress-bar {
    width: 0;
    animation: progress 1.5s ease-in-out forwards;

    .title {
        opacity: 0;
        animation: show 0.35s forwards ease-in-out 0.5s;
    }
}

@keyframes progress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes show {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* //Hospital Contact Widget */
.hospital-contact-widget {
    .hospital-bg {
        background-image: url(../img/hospitals/hospital-card-2.jpg);
        height: 267px;
        border-radius: 20px 20px 0 0;
    }

    .hospital-info {
        padding: 40px 0 40px;
        border-radius: 0 0 20px 20px;
    }
}

/* Availability Calendar Styles */
.availability-calendar {
    width: 100%;
}

.availability-calendar .date-section {
    margin-bottom: 30px;
}

.availability-calendar .time-section {
    margin-top: 30px;
    padding: 25px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 15px;
    border: 2px solid rgba(12, 191, 230, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    animation: slideDownFade 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    position: relative;
}

.availability-calendar .time-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--secondaryColor), #0ab5d6);
    border-radius: 15px 15px 0 0;
}

@keyframes slideDownFade {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 10px;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    50% {
        opacity: 0.8;
        transform: translateY(-5px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        max-height: 1000px;
        padding-top: 25px;
        padding-bottom: 25px;
        margin-top: 30px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
}

.date-slot-btn,
.time-slot-btn {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    border: 2px solid rgba(0, 13, 68, 0.2);
    background-color: #ffffff;
    color: var(--paraColor);
    margin-right: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.date-slot-btn::before,
.time-slot-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.date-slot-btn:hover::before,
.time-slot-btn:hover::before {
    left: 100%;
}

.date-slot-btn:hover,
.time-slot-btn:hover {
    border-color: var(--secondaryColor);
    background-color: rgba(12, 191, 230, 0.08);
    color: var(--secondaryColor);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(12, 191, 230, 0.2);
}

.date-slot-btn.selected,
.time-slot-btn.selected {
    border-color: var(--secondaryColor);
    background-color: var(--secondaryColor);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(12, 191, 230, 0.3);
    transform: translateY(-2px);
}

.date-slot-btn.selected:hover,
.time-slot-btn.selected:hover {
    background-color: #0ab5d6;
    border-color: #0ab5d6;
    box-shadow: 0 6px 16px rgba(12, 191, 230, 0.4);
}

.time-slot-btn {
    min-width: 110px;
    text-align: center;
}

.availability-calendar label {
    font-weight: 600;
    color: var(--titleColor);
    margin-bottom: 15px;
    display: block;
}

.availability-calendar .time-section label {
    color: var(--titleColor);
    font-size: 16px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(12, 191, 230, 0.2);
}