/*
	Theme Name:   Jannah Child
	Theme URI:    http://jannah.tielabs.com/
	Description:  Jannh Child Theme
	Author:       TieLabs
	Author URI:   https://tielabs.com
	Template:     jannah
	Version:      1.0.2
	License:      license purchased
	License URI:  http://themeforest.net/licenses/regular_extended
	Tags:         Tags: two-columns, buddypress, left-sidebar, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, microformats, rtl-language-support, sticky-post, threaded-comments, translation-ready
	Text Domain:  jannah-child
*/


/* write custom css after this line */



/* Front Page */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'IRANSansWeb', sans-serif;
}

body {
    background-color: #f7f9fc;
    color: #001663;
    overflow-x: hidden;
    direction: rtl;
}

.section-wrapper {
    width: 100%;
    max-width: 1600px;
    margin: 200px auto;
    padding: 0 20px;
}

.section-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.section-header.between {
    justify-content: space-between;
}

.section-header .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-title {
    color: #00197E;
    font-size: 24px;
    font-weight: 800;
}

.title-icon-svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.hero-section {
    width: 100%;
    height: 720px;
    background-color: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    margin-bottom: 200px;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background-image: url("./inc/assets/vectors/phero.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
    z-index: 1;
}

.hero-container {
    z-index: 10;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

.hero-container::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 442px;
    background-image: url('./inc/assets/vectors/rshape.svg');
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
}

.hero-container::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 442px;
    background-image: url("./inc/assets/vectors/lshape.svg");
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
}

.hero-content-side {
    flex: 1;
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 20;
}

.main-heading {
    color: #00197E;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.5;
}

.main-heading .bold-blue {
    color: #0024B3;
    display: block;
    margin-top: 4px;
}

.hero-description {
    color: #00197E;
    font-size: 18px;
    line-height: 1.8;
    max-width: 600px;
}

.search-card {
    background: #ffffff;
    padding: 8px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    box-shadow: 0 15px 35px rgba(0, 34, 161, 0.08);
    position: relative;
    z-index: 30;
}

.input-wrapper {
    background-color: #f2f4f7;
    border-radius: 14px;
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    color: #00197E;
    font-size: 14px;
}

.search-input-box {
    flex: 1.3;
}

.search-input-box input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 14px;
    color: #1f2937;
    font-weight: 600;
}

.search-input-box input::placeholder {
    color: #6b7280;
    font-weight: 500;
}

.city-select-box {
    flex: 1;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.city-select-box .city-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #00197E;
}

.city-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 22, 99, 0.15);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    border: 1px solid #e5e7eb;
}

.city-select-box.active .city-dropdown {
    max-height: 250px;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
}

.city-option {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #001663;
    transition: background-color 0.2s, color 0.2s;
}

.city-option:hover {
    background-color: #f2f4f7;
    color: #0022a1;
}

.search-btn {
    background-color: #ECDD23;
    color: #001663;
    border: none;
    border-radius: 14px;
    height: 52px;
    padding: 0 36px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.search-btn:hover {
    background-color: #ECDD23;
}

.blue-card-wrapper {
    flex: 1;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
}

.hero-price-swiper {
    width: 100%;
    border-radius: 28px;
    box-shadow: 0 20px 40px rgba(0, 34, 190, 0.25);
}

.blue-card {
    background-color: #0022be;
    padding: 36px 32px 24px 32px;
    width: 100%;
    color: #ffffff;
}

.card-title {
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 35px;
}

.range-container {
    position: relative;
    margin-bottom: 25px;
}

.tooltip {
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ECDD23;
    color: #001663;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
}

.tooltip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: #ECDD23 transparent transparent transparent;
}

.range-bar {
    height: 7px;
    background-color: #ffffff;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.range-fill {
    position: absolute;
    height: 100%;
    background-color: #ECDD23;
    right: 50% !important;
    width: 40% !important;
    transform: translateX(50%);
}

.price-labels {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.price-item .number {
    font-size: 24px;
    font-weight: 800;
    display: block;
}

.price-item.highlight .number {
    color: #ECDD23;
}

.price-item .label {
    font-size: 16px;
    opacity: 0.85;
    margin-top: 4px;
    display: block;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    font-size: 12px;
}

.clinic-badge {
    background-color: #ECDD23;
    color: #001663;
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 400;
    font-size: 15px;
}

.update-status {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.9;
}

.update-status span {
    font-size: 15px;
}

.yellow-dot {
    width: 8px;
    height: 8px;
    background-color: #ECDD23;
    border-radius: 50%;
    flex-shrink: 0;
}

.hero-swiper-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
}

.hero-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: #0022be;
    opacity: 0.3;
    border-radius: 50%;
    transition: all 0.3s;
}

.hero-swiper-pagination .swiper-pagination-bullet-active {
    background-color: #0022be;
    opacity: 1;
    width: 20px;
    border-radius: 10px;
}

.services-section {
    background-color: #EFEFEF;
    border-radius: 32px;
    padding: 45px 36px 45px 36px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    margin-top: 30px;
}

.services-section::before {
    content: '';
    position: absolute;
    top: -47px;
    left: 50%;
    transform: translateX(-50%);
    width: 442px;
    max-width: 90%;
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg width='442' height='48' viewBox='0 0 442 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M221 0C266.372 0 309.568 48 354.941 48H442H0H87.0592C132.432 48 175.628 0 221 0Z' fill='%23EFEFEF'/%3E%3Cpath d='M223.756 41.6696C223.763 42.887 222.782 43.8681 221.564 43.8608C220.347 43.8535 219.354 42.8607 219.347 41.6432L219.341 40.6985C219.334 39.481 220.315 38.5 221.532 38.5073C222.75 38.5145 223.743 39.5074 223.75 40.7248L223.756 41.6696Z' fill='%230024B3'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M220.9 6.38333C229.178 6.4328 235.93 13.264 235.98 21.6413C236.03 30.0186 229.36 36.7696 221.081 36.7201C212.802 36.6706 206.05 29.8394 206 21.4621C205.95 13.0849 212.621 6.33385 220.9 6.38333ZM220.926 10.8446C215.082 10.8097 210.374 15.5751 210.409 21.4885C210.444 27.4018 215.21 32.2239 221.054 32.2588C226.898 32.2937 231.607 27.5283 231.571 21.615C231.536 15.7016 226.77 10.8795 220.926 10.8446Z' fill='%230024B3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 2;
}

.cards-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.service-card {
    background-color: #ffffff;
    border-radius: 28px;
    padding: 48px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: -30px 30px 70px 0px rgba(0, 36, 179, 0.3);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.service-card:hover {
    box-shadow: -30px 30px 90px 0px rgba(0, 36, 179, 0.3);
}

.card-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.service-card .card-info {
    flex: 1;
    margin-right: 16px;
    margin-left: 12px;
    text-align: right;
}

.service-card .card-title {
    color: #00197E;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    text-align: right;
}

.service-card .card-price {
    color: #0024B3;
    font-size: 18px;
    font-weight: 700;
}

.card-arrow {
    color: #001663;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.city-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.city-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 26px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0, 22, 99, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.city-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 22, 99, 0.08);
}

.icon-badge {
    width: 70px;
    height: 70px;
    background-color: #F6F6F6;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.icon-badge img {
    width: 40%;
}

.city-name {
    color: #00197E;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 6px;
}

.clinic-count {
    color: #00197E;
    font-size: 15px;
    font-weight: 500;
    opacity: 0.8;
}

.view-all-card {
    background-color: #ECDD23;
    border-radius: 20px;
    padding: 26px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(236, 221, 35, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.view-all-card img {
    width: 52px;
    height: auto;
}

.view-all-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(236, 221, 35, 0.35);
}

.view-all-text {
    color: #001663;
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 16px;
}

.steps-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.steps-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background-image: url("./inc/assets/vectors/map.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
}

.chevrons-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.cards-wrapper {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex: 1;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 380px;
}

.step-card {
    background-color: #ffffff;
    border-radius: 40px;
    width: 100%;
    box-shadow: 0 44px 70px rgba(0, 125, 249, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
}

.card-banner {
    background-color: #F6F6F6;
    padding: 22px 18px;
    text-align: center;
    border-radius: 30px;
}

.step-title {
    color: #0024B3;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.4;
}

.step-card .card-body {
    padding: 22px 20px 28px 20px;
    text-align: center;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-desc {
    color: #00197E;
    font-size: 18px;
    line-height: 32px;
    font-weight: 500;
}

.connector-line {
    width: 2px;
    height: 24px;
    background-color: #ECDD23;
}

.number-badge {
    width: 50px;
    height: 50px;
    background-color: #ECDD23;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00197E;
    font-size: 28px;
    font-weight: 800;
    flex-shrink: 0;
}

.view-all-link {
    color: #001663;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    transition: opacity 0.2s;
}

.view-all-link:hover {
    opacity: 0.8;
}

.carousel-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.nav-btn {
    width: 48px;
    height: 48px;
    background-color: #ECDD23;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #001663;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(236, 221, 35, 0.35);
    transition: transform 0.2s, background-color 0.2s;
    z-index: 20;
    user-select: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.nav-btn-prev {
    right: -68px;
}

.nav-btn-next {
    left: -68px;
}

.nav-btn:hover {
    transform: translateY(-50%) scale(1.08);
    background-color: #ECDD23;
}

.yellow-frame {
    background-color: #ECDD23;
    border-radius: 36px;
    padding: 40px 24px 28px 24px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.yellow-frame::before {
    content: '';
    position: absolute;
    top: -46px;
    left: 50%;
    transform: translateX(-50%);
    width: 442px;
    max-width: 90%;
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 442 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M221 0C266.372 0 309.568 48 354.941 48H442H0H87.0592C132.432 48 175.628 0 221 0Z' fill='%23ECDD23'/%3E%3Cpath d='M223.756 43.2523C223.763 44.4698 222.782 45.4509 221.564 45.4436C220.347 45.4363 219.354 44.4435 219.347 43.226L219.341 42.2813C219.334 41.0638 220.315 40.0828 221.532 40.09C222.75 40.0973 223.743 41.0901 223.75 42.3076L223.756 43.2523Z' fill='%230024B3'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M220.9 7.96609C229.178 8.01557 235.93 14.8468 235.98 23.2241C236.03 31.6013 229.36 38.3523 221.081 38.3029C212.802 38.2534 206.05 31.4222 206 23.0449C205.95 14.6676 212.621 7.91661 220.9 7.96609ZM220.926 12.4274C215.082 12.3925 210.374 17.1579 210.409 23.0712C210.444 28.9846 215.21 33.8067 221.054 33.8416C226.898 33.8765 231.607 29.1111 231.571 23.1977C231.536 17.2844 226.77 12.4623 220.926 12.4274Z' fill='%230024B3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 2;
}

.clinics-swiper {
    width: 100%;
    padding: 10px 5px 15px 5px;
}

.swiper-slide {
    height: auto;
}

.doctor-card {
    background-color: #ffffff;
    border-radius: 44px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 12px 30px rgba(0, 22, 99, 0.06);
    height: 100%;
}

.card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.doctor-profile {
    display: flex;
    align-items: center;
    gap: 14px;
}

.card-arrow-btn {
    flex-shrink: 0;
    cursor: pointer;
}

.card-arrow-btn img {
    width: 36px;
    height: auto;
}

.avatar-wrapper {
    position: relative;
    width: 94px;
    height: 94px;
    border-radius: 50%;
    border: 5px solid #ECDD23;
    background-color: #ECDD23;
    flex-shrink: 0;
}

.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.verified-badge {
    position: absolute;
    bottom: -10px;
    right: 50%;
    transform: translateX(50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.doctor-info {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.doctor-name {
    color: #00197E;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
}

.doctor-specialty {
    color: #0024B3;
    font-size: 18px;
    font-weight: 700;
    margin-top: 4px;
}

.card-mid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.info-box {
    background-color: #EDEDED;
    border-radius: 20px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.info-box-top {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #00197E;
    font-size: 16px;
    font-weight: 800;
    direction: ltr;
}

.info-box-label {
    color: #0024B3;
    font-size: 16px;
    font-weight: 400;
    margin-top: 4px;
}

.card-bottom-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: right;
}

.address-title {
    color: #00197E;
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
}

.address-text {
    color: #0024B3;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    opacity: 0.9;
}

.clinics-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.clinics-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: #d1d5db;
    opacity: 1;
    border-radius: 50%;
    transition: all 0.2s;
}

.clinics-pagination .swiper-pagination-bullet-active {
    background-color: #ECDD23;
    width: 20px;
    border-radius: 10px;
}

.plans-container {
    display: flex;
    gap: 28px;
    width: 100%;
}

.plan-card {
    flex: 1;
    border-radius: 28px;
    padding: 40px 36px 32px 36px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.plan-card>* {
    position: relative;
    z-index: 2;
}

.plan-card.white-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 225px;
    height: 248px;
    background-image: url("data:image/svg+xml,%3Csvg width='225' height='248' viewBox='0 0 225 248' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.03'%3E%3Cpath d='M35.4018 241.677C29.7908 248.795 19.4396 250.058 12.2818 244.497C5.1239 238.936 3.86992 228.657 9.48092 221.538L13.835 216.014C19.446 208.896 29.7972 207.633 36.9551 213.194C44.113 218.755 45.3669 229.034 39.7559 236.153L35.4018 241.677Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M182.403 23.3597C231.077 61.1746 239.235 131.539 200.626 180.523C162.017 229.506 91.2609 238.56 42.5875 200.745C-6.08598 162.931 -14.2448 92.5664 24.3642 43.5827C62.9732 -5.40109 133.73 -14.4552 182.403 23.3597ZM161.842 49.4458C127.484 22.753 77.5385 29.1441 50.2851 63.7209C23.0317 98.2976 28.7909 147.966 63.1486 174.659C97.5063 201.352 147.452 194.961 174.705 160.384C201.959 125.808 196.2 76.1387 161.842 49.4458Z' fill='black'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

.plan-card.blue-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 225px;
    height: 248px;
    background-image: url("data:image/svg+xml,%3Csvg width='225' height='248' viewBox='0 0 225 248' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.1'%3E%3Cpath d='M35.4018 241.677C29.7908 248.795 19.4396 250.058 12.2818 244.497C5.1239 238.936 3.86992 228.657 9.48092 221.538L13.835 216.014C19.446 208.896 29.7972 207.633 36.9551 213.194C44.113 218.755 45.3669 229.034 39.7559 236.153L35.4018 241.677Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M182.403 23.3597C231.077 61.1746 239.235 131.539 200.626 180.523C162.017 229.506 91.2609 238.56 42.5875 200.745C-6.08598 162.931 -14.2448 92.5664 24.3642 43.5827C62.9732 -5.40109 133.73 -14.4552 182.403 23.3597ZM161.842 49.4458C127.484 22.753 77.5385 29.1441 50.2851 63.7209C23.0317 98.2976 28.7909 147.966 63.1486 174.659C97.5063 201.352 147.452 194.961 174.705 160.384C201.959 125.808 196.2 76.1387 161.842 49.4458Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

.plan-card.white-card {
    background-color: #ffffff;
    color: #001663;
    box-shadow: 0 15px 35px rgba(0, 22, 99, 0.06);
}

.plan-card.blue-card {
    background-color: #0022be;
    color: #ffffff;
    box-shadow: 0 15px 35px rgba(0, 34, 190, 0.2);
}

.top-badge {
    position: absolute;
    top: 0;
    left: 36px;
    background-color: #ECDD23;
    color: #001663;
    padding: 10px 20px;
    border-radius: 0 0 14px 14px;
    font-size: 16px;
    font-weight: 800;
    z-index: 3;
}

.card-heading-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 28px;
}

.yellow-bar {
    width: 5px;
    height: 22px;
    background-color: #ECDD23;
    border-radius: 4px;
    flex-shrink: 0;
}

.card-heading {
    font-size: 22px;
    font-weight: 800;
}

.white-card .card-heading {
    color: #00197E;
}

.blue-card .card-heading {
    color: #ffffff;
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 32px;
    list-style: none;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
}

.white-card .feature-item {
    color: #001663;
}

.blue-card .feature-item {
    color: #ffffff;
}

.check-icon {
    width: 24px;
    height: 24px;
}

.btn-action {
    background-color: #ECDD23;
    color: #001663;
    border: none;
    border-radius: 12px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    align-self: flex-start;
    transition: background-color 0.2s, transform 0.2s;
}

.btn-action:hover {
    background-color: #ECDD23;
    transform: translateY(-2px);
}

@media (max-width: 1720px) {
    .nav-btn-prev {
        right: -24px;
    }

    .nav-btn-next {
        left: -24px;
    }
}

@media (max-width: 1200px) {
    .section-wrapper {
        margin: 120px auto;
    }

    .hero-section {
        height: auto;
        min-height: auto;
        margin-bottom: 120px;
        padding: 60px 20px;
        border-bottom-left-radius: 60px;
        border-bottom-right-radius: 60px;
    }

    .hero-container {
        flex-direction: column-reverse;
        padding: 0 20px;
        gap: 40px;
    }

    .hero-container::before,
    .hero-container::after {
        display: none;
    }

    .hero-content-side,
    .blue-card-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .main-heading {
        font-size: 30px;
    }

    .header-title {
        font-size: 22px;
    }

    .step-title {
        font-size: 18px;
    }

    .doctor-name {
        font-size: 20px;
    }

    .city-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .cards-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-btn {
        display: none;
    }
}

@media (max-width: 960px) {
    .section-wrapper {
        margin: 80px auto;
    }

    .hero-section {
        margin-bottom: 80px;
    }

    .steps-container {
        flex-direction: column;
    }

    .chevrons-group {
        display: none;
    }

    .cards-wrapper {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .step-item {
        max-width: 100%;
        width: 100%;
    }

    .plans-container {
        flex-direction: column;
    }

    .city-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .section-wrapper {
        margin: 50px auto;
        padding: 0 16px;
    }

    .hero-section {
        margin-bottom: 50px;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
        padding: 40px 16px;
    }

    .hero-container {
        padding: 0;
        gap: 30px;
    }

    .main-heading {
        font-size: 22px;
        text-align: center;
    }

    .hero-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .search-card {
        flex-direction: column;
        padding: 14px;
        gap: 12px;
    }

    .search-card .input-wrapper,
    .search-card .search-btn {
        width: 100%;
        height: 54px;
        min-height: 54px;
    }

    .services-section {
        padding: 26px 14px 20px 14px;
        border-radius: 24px;
        margin-top: 100px;
    }
    
    .services-section::before {
        top: -42px;
    }

    .cards-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .service-card {
        padding: 20px 14px;
        border-radius: 20px;
    }

    .card-icon {
        width: 44px;
        height: 44px;
    }

    .service-card .card-info {
        margin-right: 10px;
        margin-left: 8px;
    }

    .service-card .card-title {
        font-size: 15px;
        margin-bottom: 4px;
    }

    .service-card .card-price {
        font-size: 14px;
    }

    .yellow-frame {
        padding: 10px 14px;
    }

    .card-arrow-btn img {
        width: 28px;
    }

    .view-all-card img {
        width: 52px;
    }

    .city-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .city-card,
    .view-all-card {
        padding: 18px 10px;
        border-radius: 16px;
    }

    .icon-badge {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }

    .city-name {
        font-size: 15px;
    }

    .clinic-count {
        font-size: 14px;
    }

    .header-title {
        font-size: 18px;
    }

    .step-desc {
        font-size: 14px;
        line-height: 26px;
    }

    .doctor-card {
        padding: 14px;
        border-radius: 28px;
    }

    .doctor-name {
        font-size: 18px;
    }

    .doctor-specialty {
        font-size: 14px;
    }

    .avatar-wrapper {
        width: 70px;
        height: 70px;
    }

    .info-box-top {
        font-size: 14px;
    }

    .info-box-label {
        font-size: 14px;
    }

    .address-title,
    .address-text {
        font-size: 14px;
    }

    .card-heading {
        font-size: 18px;
    }

    .feature-item {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .card-title {
    font-size: 24px;
    }
    .cards-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .price-item .number {
    font-size: 18px;
}

.price-item .label {
    font-size: 14px;
}

    .service-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 16px 12px;
        border-radius: 18px;
    }

    .card-icon {
        width: 36px;
        height: 36px;
        flex-basis: 100%;
        margin-bottom: 12px;
    }

    .service-card .card-info {
        margin-right: 0;
        margin-left: 0;
        flex: 1;
    }

    .service-card .card-title {
        font-size: 14px;
        margin-bottom: 2px;
    }

    .service-card .card-price {
        font-size: 14px;
    }

    .card-arrow svg {
        width: 16px;
        height: 16px;
    }
    
    .yellow-frame {
        padding: 4px 8px 2px;
    }
    .check-icon img {
    max-width: 20px !important;
}
}

@media (max-width: 390px) {
    .card-title {
    font-size: 20px;
}
.info-box-top img {
    width: 18px;
    height: 18px;
}
.services-section::before {
    top: -38px;
}
}



/* Footer */

.footer-wrapper {
    width: 100%;
    background-color: #0024B3;
    min-height: 440px;
    border-radius: 120px 120px 0 0;
    padding: 60px 40px 28px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.footer-container {
    color: #ffffff;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 40px;
}

.footer-brand {
    flex: 1.2;
    max-width: 380px;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    width: 200px;
}

.brand-logo img {
    width: 100%;
}

.brand-title {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
}

.brand-icon {
    width: 22px;
    height: 22px;
    border: 3.5px solid #ECDD23;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-icon::after {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #ECDD23;
    border-radius: 50%;
}

.footer-custom-logo {
    max-height: 48px;
    width: auto;
    object-fit: contain;
}

.brand-desc {
    font-size: 14px;
    line-height: 1.9;
    color: #ffffff;
    opacity: 0.95;
    font-weight: 400;
}

.column-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
}

.yellow-indicator {
    width: 12px;
    height: 4px;
    background-color: #ECDD23;
    border-radius: 3px;
    flex-shrink: 0;
}

.footer-links-col {
    flex: 0.9;
    max-width: 220px;
}

.dark-box {
    background-color: #0020A2;
    border-radius: 22px;
    padding: 20px 20px;
}

.links-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.link-item a {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    transition: 0.3s ease-in-out;
}

.link-item a:hover {
    color: #ECDD23;
}

.footer-cities-col {
    flex: 2;
}

.cities-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px 16px;
}

.city-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.city-item:hover {
    color: #ECDD23;
}

.yellow-dot {
    width: 8px;
    height: 8px;
    background-color: #ECDD23;
    border-radius: 50%;
    flex-shrink: 0;
}

.footer-search-col {
    flex: 1.1;
    max-width: 280px;
}

.yellow-search-card {
    background-color: #ECDD23;
    border-radius: 28px;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #001663;
    gap: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.yellow-search-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 253 224' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.3'%3E%3Cpath d='M227.09 13.1344C234.667 8.16 244.885 10.2416 249.913 17.7838C254.94 25.326 252.873 35.4728 245.296 40.4473L239.416 44.3074C231.839 49.2819 221.621 47.2003 216.593 39.658C211.566 32.1158 213.633 21.969 221.21 16.9946L227.09 13.1344Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.4964 173.635C-15.6898 122.347 -1.13638 53.023 51.0023 18.794C103.141 -15.4349 173.121 -1.60645 207.307 49.6807C241.494 100.968 226.94 170.292 174.801 204.521C122.663 238.75 52.6826 224.922 18.4964 173.635ZM46.2627 155.406C70.3942 191.609 119.792 201.37 156.596 177.208C193.399 153.047 203.672 104.112 179.541 67.9092C155.41 31.7065 106.012 21.9453 69.2081 46.1068C32.4043 70.2684 22.1313 119.203 46.2627 155.406Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    z-index: 1;
}

.search-card-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;
    position: relative;
    z-index: 2;
    color: #001663;
}

.search-input-wrapper {
    background-color: #ffffff !important;
    border-radius: 50px !important;
    width: 100% !important;
    height: 48px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 16px !important;
    justify-content: space-between !important;
    gap: 10px !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.search-input-wrapper input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 15px !important;
    color: #001663 !important;
    width: 100% !important;
    text-align: right !important;
    font-weight: 400 !important;
    height: 100% !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.search-input-wrapper input::placeholder {
    color: #001663 !important;
    opacity: 0.85 !important;
    font-weight: 400 !important;
}

.search-input-wrapper input:focus {
    background-color: transparent !important;
}

.footer-search-submit {
    background: transparent !important;
    background-color: transparent;
    border-radius: none !important;
    padding: 0 !important;
    border: none !important;
    line-height: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 24px;
    text-align: center;
}

.copyright-text {
    font-size: 14px;
    color: #ffffff;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

@media (max-width: 1400px) {
    .footer-wrapper {
        border-radius: 70px 70px 0 0;
        padding-left: 45px;
        padding-right: 45px;
    }
}

@media (max-width: 1200px) {
    .footer-wrapper {
        margin-top: 120px;
        border-radius: 60px 60px 0 0;
        padding-left: 35px;
        padding-right: 35px;
    }
}

@media (max-width: 992px) {
    .footer-wrapper {
        margin-top: 80px;
        border-radius: 50px 50px 0 0;
        padding: 50px 30px 24px 30px;
    }

    .footer-top {
        flex-direction: column;
    }

    .footer-brand,
    .footer-links-col,
    .footer-cities-col,
    .footer-search-col {
        max-width: 100%;
        width: 100%;
    }

    .cities-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .footer-wrapper {
        margin-top: 50px;
        border-radius: 36px 36px 0 0;
        padding: 40px 20px 20px 20px;
    }

    .cities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .brand-logo {
    width: 170px;
    }
}