@font-face {
 font-family: "nawar";
 src: url('/assets/fonts/nawar.ttf') format('truetype');
}
@font-face {
 font-family: "yassin";
 src: url('/assets/fonts/yassin.ttf') format('truetype');
}
@font-face {
 font-family: "dubai";
 src: url('/assets/fonts/dubai.ttf') format('truetype');
}
:root {
 --primary-color: #009688;
 --secondary-color: #f50057;
 --pink-color: #ef2c92;
 
 /* --pink-color: #ff0057; */
 /* #fadee0 لون خفيف */
}

html{
    overflow-x: hidden;
}

* {
 /* font-family: "Nawar", serif; */
 
 font-family: "nawar";
 flex-shrink: 0;
 -webkit-tap-highlight-color: transparent;
 font-display: swap;
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
 /* font-family: "asmaa", serif; */
 font-family: "yassin", serif;
 font-weight: normal !important;
 margin: 0;
 padding: 0;
}
section {
 position: relative;
 width: 100%;
}
html {
 scroll-behavior: smooth;
}
body {
 overflow-x: hidden;
 font-family: "Rubik", serif;
 margin: 0;
 /* background: #ffffff; */
 /* background: #F5F5F5; */
 /* background: linear-gradient(45deg, #f1c3ce, #ffcfe8); */
 background: #fff2f3;
 /* background: #FFF5E1; */
 /* background: #A3BFFA; */
 /* background: #fdf5dd; */
 /* background: #d3f0ee; */
 /* background: #ced7ed; */
 /* background: #fadee0; */
 /* #ffe9ef */
}
a {
 text-decoration: none;
}

.manrope-two {
 font-family: "Manrope", sans-serif;
 font-optical-sizing: auto;
 font-weight: 400;
 font-style: normal;
}

.rubik-one {
 font-family: "Rubik", serif;
 font-optical-sizing: auto;
 font-weight: 400;
 font-style: normal;
}

/* Header Styles */
.header {
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 10px 20px;
 background-color: white;
 /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
 background: transparent;
 /* background: linear-gradient(45deg, #f1c3ce, #ffcfe8); */
 
 position: relative;
 z-index: 1000;
 font-weight: 600;
}
.header .left-h,
.header .right-h {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 height: 80%;
 z-index: 2;
}
.header .left-h {
 left: 15px;
}
.header .right-h {
 right: 15px;
}

/* Logo Styles */
.logo {
 position: relative;
 display: block;
}
.logo img {
width: 55px
}
/* .header::after {
 content: "";
 position: absolute;
 width: 130px;
 height: 130px;
 border-radius: 50%;
 background: #ffffff;
 z-index: -10;
 bottom: -28px;
 left: 50%;
 transform: translateX(-50%);
} */

/* Navigation Styles */
.nav {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-direction: row;
 gap: 6rem;
 transform: translateX(20px);
 z-index: 10001;
}

.nav-item {
 text-transform: uppercase;
 color: var(--pink-color);
 font-size: 20px;
 text-decoration: none;
 display: flex;
 direction: ltr;
 transition: color 0.3s ease, margin 0.3s ease;
 position: relative;
 justify-content: flex-end;
 margin-left: -45px;
 font-family: "yassin", serif;
 color: #fc3a9c;
}
.nav-item i {
 margin-left: 5px;
 color: #ee2c91;
}

.nav-item:hover {
 color: #d86376;
 /* transform: translateY(-2px); */
 margin-top: -5px;
}

/* Hamburger Icon Styles */
.hamburger {
 display: none;
 flex-direction: column;
 gap: 5px;
 cursor: pointer;
 z-index: 1001;
}

.hamburger span {
 width: 30px;
 height: 3px;
 background-color: #d86376;
 transition: all 0.3s ease;
}

.nav::before {
 pointer-events: none;
}

.nav.active::before {
 pointer-events: auto;
}

/* Mobile Menu Styles */
@media (max-width: 1000px) {
 .nav-item i {
 margin-left: 10px;
 }
 .nav-item::after {
 content: "|"; /* Dash breaker for larger screens */
 position: absolute;
 right: -10%;
 color: #d86376;
 font-size: 20px;
 }

 .nav-item:last-child::after {
 content: ""; /* Remove dash breaker for the last item */
 }
 .hamburger {
 display: flex;
 }

 .reel .text .title {
 font-size: 10px !important;
 }

 .nav {
 position: fixed;
 top: 0;
 right: -100%;
 width: 200px;
 height: -webkit-fill-available;
 background-color: white;
 flex-direction: column-reverse;
 /* align-items: flex-start; */
 justify-content: flex-end;
 padding: 60px 20px;
 box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
 transition: right 0.3s ease;
 z-index: 1003;
 gap: 20px;
 }

 .nav.active {
 right: 0;
 }

 .nav-item {
 font-size: 18px;
 padding: 15px 0;
 width: 100%;
 text-align: left;
 }

 .nav-item:last-child {
 border-bottom: none;
 }

 /* Backdrop Overlay */
 .nav::before {
 content: "";
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s ease, visibility 0.3s ease;
 z-index: -1;
 }

 .nav.active::before {
 opacity: 1;
 }
}

.nav-item:hover {
 color: #f50057;
}

/* Hero Section Styles */
.hero {
 position: relative;
 width: 100%;
 overflow: hidden;
}

.hero-content {
 position: relative;
 display: flex;
 justify-content: center;
}

.hero-container {
 width: 100%;
 position: relative;
}

.hero-image {
 position: relative;
 width: 100%;
}

.hero-image img {
 /* width: 100%; */
 height: 90vh;
 object-fit: cover;
}

.hero-text-overlay {
 position: absolute;
 top: 43%;
 right: 30%;
 transform: translateY(-50%);
 text-align: right;
 color: white;
 padding: 20px;
 max-width: 50%;
 z-index: 100;
 filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

.hero-text-overlay h1 {
 font-size: 3rem;
 font-weight: 900;
 color: #f50057;
 margin-bottom: 15px;
}

.hero-text-overlay p {
 font-size: 1.2rem;
 line-height: 1.5;
 color: #f8f8f8;
 margin-bottom: 10px;
 font-weight: 600;
}

.services-in-intro {
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 max-width: 1200px;
 padding: 10px 15px;
 text-align: right;
}

.services-in-intro p.service-point {
 flex: 1 1 calc(50% - 20px);
 color: white;
 font-size: 16px;
 text-align: right;
}

.services-in-intro p.service-point i {
 margin-left: 10px;
 color: #e19ca5;
 font-size: 16px;
}
@media (max-width: 768px) {
 .hero-text-overlay {
 top: 31%;
 right: 0;
 transform: none;
 max-width: 100%;
 text-align: center;
 padding: 20px;
 }
 .hero-text-overlay {
 position: static;
 transform: none;
 max-width: 100%;
 text-align: center;
 padding: 20px;
 }

 .hero-text-overlay h1 {
 font-size: 2rem;
 }

 .hero-text-overlay p {
 font-size: 1rem;
 color: #555;
 }

 .services-in-intro {
 float: right;
 display: ruby;
 color: #555;
 }

 .services-in-intro p.service-point {
 flex: 1 1 100%;
 text-align: center;
 color: #555;
 }
}

.social-links {
 background-color: var(--pink-color);
 position: fixed;
 left: 2%;
 top: 40%;
 /* display: flex; */
 display: none ;
 flex-direction: column;
 gap: 10px;
 z-index: 200;
 border-radius: 8px;
 padding: 10px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.social-icon {
 color: white;
 font-size: 2rem;
 transition: color 0.3s;
}

.social-icon:hover {
 color: #555;
}
.sidebar {
 display: none;
 position: fixed;
 right: 1%;
 top: 50%;
 transform: translateY(-50%);
 background-color: #ff4081;
 padding: 1rem;
 border-radius: 10px;
}

.sidebar-icon {
 display: block;
 color: white;
 margin: 1rem 0;
 font-size: 1.5rem;
}

.doctor-profile {
 width: 100%;
 padding: 2rem 0px;
 /* padding: 40px 20px; */
 border-radius: 20px;
 background: #fffeff; 
 padding-bottom: 3rem;
 /* margin: 20px auto; */
 font-family: "Tajawal", sans-serif;
}

.profile-container {
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 max-width: 1200px;

}
.profile-image {
 width: 36%;
}
.profile-image img {
 width: 432px;
 max-width: 95%;
 border-radius: 4px 160px;
}
.profile-content {
 width: 40%;
 max-width: 720px;
 flex: 1;
 text-align: right;
 color: #333;
 padding: 10px 20px;
 margin-top: 5px;
}

.profile-content h1 {
 margin-top: -10px;
 font-weight: 900;
 font-size: 2.8rem;
 color: var(--secondary-color);
 margin-bottom: 10px;
}

.profile-content .sub-heading {
 font-size: 1.2rem;
 line-height: 1.6;
 color: #555;
 margin-bottom: 20px;
 font-weight: 600;
 direction: rtl;
}

.services-list {
 list-style: none;
 padding: 0;
 margin: 20px 0;
 direction: rtl;
}

.services-list li {
 font-size: 1.2rem;
 line-height: 1.8;
 color: #666;
 margin-bottom: 10px;
 display: flex;
 align-items: center;
 font-family: "nawar";
}

.services-list li::before {
 content: "";
 background-image: url("../img/left-arrow.png");
 background-size: contain;
 background-repeat: no-repeat;
 width: 24px;
 height: 24px;
 margin-left: 10px;
 /* margin-top: 0.5rem; */
}

.profile-content p {
 font-size: 1rem;
 line-height: 1.8;
 color: #555;
 margin-bottom: 20px;
}

.book-now {
 display: inline-block;
 background-color: #f6d5db;
 color: #cc7c86;
 padding: 15px 40px;
 font-size: 1.3rem;
 font-weight: bold;
 border: 2px solid #cc7c86;
 border-radius: 30px;
 cursor: pointer;
 transition: all 0.3s ease;
 text-align: center;
}

.book-now:hover {
 color: white;
 background-color: var(--secondary-color);
 box-shadow: 0 6px 12px rgba(231, 82, 154, 0.5);
 transform: translateY(-3px);
}

@media (max-width: 768px) {
 .button2 {
 margin-left: 0% !important ;
 }
 .benefits-description .benefits-description-text ul {
 width: 100% !important;
 }
 .profile-content {
 text-align: center;
 }
 .profile-content h1 {
 font-size: 2rem;
 }

 .profile-content .sub-heading,
 .services-list li {
 font-size: 1rem;
 }

 .book-now {
 width: 75%;
 padding: 12px 20px;
 }
 .ivf-points ul {
 padding: 25px;
 margin: 7px;
 }
}

/* the Services Section */
.services-section {
 padding: 60px 0;
 padding-bottom: 0px;
 text-align: center;
 margin-top: -85px;
}
.services-section > .container {
 margin-top: 5rem;
}
.services-section > .container h2 {
 font-size: 3.5em;
}
.services-swiper {
 width: 100%;
 position: relative;
 overflow: hidden;
 padding: 10px;
}

.services-swiper .swiper-slide {
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
}

.service-card {
 position: relative;
 width: 340px;
 height: 220px;
 background: #fff;
 border: 4px solid #f7c8d1;
 border-radius: 30px;
 box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
 overflow: hidden;
 margin: 20px auto;
 cursor: pointer;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card1 {
 position: relative;
 width: 30 0px;
 height: 180px;
 background: #fff;
 border: 4px solid #f7c8d1;
 border-radius: 30px;
 box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
 overflow: hidden;
 margin: 20px auto;
 cursor: pointer;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
 transform: scale(1.1);
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.service-card1:hover {
 transform: scale(1.1);
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.service-image {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 26px;
 transition: filter 0.3s ease;
}
.service-image1 {
 width: 100%;
 height: 100%;
 object-fit: contain;
 border-radius: 26px;
 transition: filter 0.3s ease;
}

.service-card:hover .service-image {
 filter: blur(3px);
}
.service-card .overlay-text {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 font-size: 1.4rem;
 font-weight: bold;
 text-align: center;
 border-radius: 30px;
 opacity: 0;
 transition: opacity 0.3s ease;
 padding: 20px;
}
.service-card:hover .overlay-text {
 opacity: 1;
}

.services-next,
.services-prev {
 color: #f7c8d1;
 transition: color 0.3s ease;
}

.swiper-pagination-bullet {
 width: 14px;
 height: 14px;
 border-radius: 50%;
 margin-bottom: -9px !important;
}

.services-pagination {
 width: 30px;
 margin-top: 20px;
}

.services-pagination .swiper-pagination-bullet {
 background: #f7c8d1;
 opacity: 0.7;
 transition: opacity 0.3s ease;
}

.services-pagination .swiper-pagination-bullet-active {
 opacity: 1;
 background: #e09aa3;
}
.swiper-slide-active .service-card {
 /* transform: scale(1.05); */
 transform: scale(1.2);
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.swiper-slide-active .service-card .service-image {
 filter: blur(3px);
}

.swiper-slide-active .service-card .overlay-text {
 opacity: 1;
}
.swiper-slide-active .reel {
 transform: scale(1.2);
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.location-section {
 text-align: center;
 padding: 20px;
}

.section-title {
 font-size: 40px;
 /* margin-bottom: 20px; */
 color: var(--secondary-color);
 text-align: center;
 position: relative;
    z-index: 70;
    color: #f5004d;
}

.swiper-container {
 width: 100%;
 height: 100%;
}

iframe {
 border-radius: 10px;
 width: 100%;
 height: 100%;
}

.ivf-section {
 width: 100%;
 padding: 2rem;
 color: #333;
 border-radius: 8px;
 background: #fffeff;
}

.ivf-container {
 max-width: 1200px;
 margin: 0 auto;
}

.ivf-content {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 2rem;
}

.ivf-text {
 width: 100%;
 text-align: center;
}

.ivf-title {
 margin-right: 4%;
 font-size: 2.4rem;
 color: #d23669;
 margin-bottom: .5rem;
 font-weight: bold !important;
 text-align: start;
}

.ivf-description {
 margin-right: 4%;
 font-size: 1rem;
 color: #555;
 line-height: 1.8;
 margin-bottom: 1.5rem;
 font-weight: 700;
 text-align: start;
 width: 64%;
}

.ivf-main {
 display: flex;
 justify-content: space-between;
 width: 100%;
}

.ivf-image {
 width: 50%;
 text-align: center;
}

.ivf-image img {
 max-width: 100%;
 height: auto;
 border-radius: 30px;
 animation: moveDownUp 1s infinite alternate ease-in-out;
}
@keyframes moveDownUp {
 0% {
 transform: translateY(0);
 }
 100% {
 transform: translateY(5px);
 }
}

.ivf-points {
 width: 40%;
 text-align: right;
 display: flex;
 flex-direction: column;
}
.ivf-points .button {
 margin-right: auto;
 /* margin-right: 0; */
}

.ivf-points ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

.ivf-points li {
 position: relative;
 margin-bottom: 1.5rem;
 padding-left: 30px;
 font-size: 1.1rem;
 line-height: 1.8;
 color: #333;
 /* font-weight: 500; */
 font-family: "nawar";
}

.arrow-icon {
 width: 20px;
 height: auto;
 position: absolute;
 right: -6%;
 top: 60%;
 transform: translateY(-50%);
}

.ivf-slogan {
 font-size: 1.4rem;
 font-weight: bold;
 color: #d23669;
 margin-bottom: 1rem;
 text-align: start;
 margin-right: -25px;
}

/* Pregnancy Section */
.Pregnancy {
 width: 100%;
 /* max-width: 1200px; */
 margin: 0 auto;
 padding-bottom: 4rem;
 padding-top: 4rem;
 overflow: hidden;
}

.Pregnancy .container {
 /* padding: 50px;
 border-radius: 15px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 color: #fff;
 overflow: hidden;
 display: block; */
}

.Pregnancy .content {
 display: flex;
 border-radius: 15px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 color: #fff;
 background: #fff;
 padding: 1rem;
 border-radius: 15px;
 margin: 0px auto;
 position: relative;
 width: 90%;
 flex-direction: column;
}

.Pregnancy .image-container {
 width: 45%;
 height: 23rem;
 position: relative;
 border-radius: 15px;
 overflow: hidden;
 float: left;
}

.Pregnancy .image-container::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-image: url("/assets/img/clinic5.jpg");
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 filter: blur(5px);
 z-index: 1;
 border-radius: 15px;
}

.Pregnancy .image-container img {
 width: 100%;
 height: 100%;
 border-radius: 10px;
 object-fit: cover;
 animation: slideInLeft 1s ease-in-out;
 position: relative;
 z-index: 2;
}

.Pregnancy .slogan p .arrow {
 margin-left: 10px;
 width: 24px;
 height: auto;
}
.Pregnancy .text-content {
 width: 55%;
 float: left;
 padding-left: 5%;
}

.Pregnancy .slogan {
 animation: slideInRight 1s ease-in-out;
}

.Pregnancy .slogan h2 {
 font-size: 2rem;
 font-weight: bold !important;
 color: var(--secondary-color);
 margin-bottom: 1rem;
 text-align: right;
}

.Pregnancy .slogan p {
 direction: rtl;
 font-size: 1.6rem;
 /* font-weight: 800; */
 color: #555;
 line-height: 1.6;
 text-align: right;
 margin: 0;
}

.Pregnancy .additional-info {
 animation: fadeIn 1.5s ease-in-out;
}
.Pregnancy .additional-info .button {
 margin-left: auto;
 margin-right: 0px;
 float: right;
}
.Pregnancy .additional-info ul {
 list-style: none;
 padding: 0;
}

.Pregnancy .additional-info li {
 font-size: 1.1rem;
 color: #444;
 margin-bottom: 0.5rem;
 padding-left: 20px;
 position: relative;
 text-align: right;
 line-height: 1.6;
 margin-right: 20px;
 animation: fadeIn 1.5s ease-in-out;
 font-family: "nawar";
}

.Pregnancy .additional-info li span {
 color: var(--secondary-color);
}

.Pregnancy .additional-info li::before {
 content: "✔";
 position: absolute;
 right: -5%;
 color: #ee9ca7;
 font-size: 1.2rem;
}

@keyframes fadeIn {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
}

@keyframes slideInLeft {
 from {
 transform: translateX(-100%);
 opacity: 0;
 }
 to {
 transform: translateX(0);
 opacity: 1;
 }
}

@keyframes slideInRight {
 from {
 transform: translateX(100%);
 opacity: 0;
 }
 to {
 transform: translateX(0);
 opacity: 1;
 }
}

.button2 {
 margin-left: 64%;
}


@media (max-width: 991px) {
 .Pregnancy .image-container {
 margin: 0px auto;
 width: 100%;
 }
 .Pregnancy .text-content {
 width: 100%;
 margin-top: 2rem;
 }
}
@media (min-width: 992px) {
 .Pregnancy .content {
 flex-direction: row;
 padding: 50px;
 width: 70%;
 margin: 0px auto;
 }
 .Pregnancy .image-container{
 transform: translateX(-145px);
 }
}
/* oasis */

.benefits-description {
 
 background-image: url(/assets/img/clinic5.jpg);
 background-position: center;
 background-size: cover;
 background-attachment: fixed;
 position: relative;
 /* margin-bottom: 5.25rem; */
 height: 80vh;
 display: flex;
 justify-content: end;
 align-items: center;
 /* margin-top: 2.5rem; */
 margin-bottom: 55px;
 background-color: transparent;
}

.benefits-description-text {
 /* background-color: #000000ab; */
 color: white;
 padding: 2rem 0rem;
 border-radius: 8px;
 width: 39%;
 text-align: center;
 margin: 1rem 4rem;
 z-index: 1;
 direction: rtl;
 /* display: none; */
}

.benefits-description-text h2 {
 font-size: 2.7rem;
 margin-bottom: 20px;
 /* color: var(--primary-color); */
 color: #ff0057;
}

.benefits-description-text h4 {
 font-size: 21px;
 width: 75%;
 margin: auto;
 margin-bottom: 1rem;
 color: #e91e63;
}

.benefits-description-text p {
 font-weight: 600;
 font-size: 16px;
 line-height: 1.75;
 color: var(--primary-color);
 /* text-align: start; */
}
.benefits-description .opacity-layer {
 /* z-index: -1; */
 background-image: linear-gradient(270deg, #f7f9fcbf 50%, #f7f9fc00);
 width: 70%;
 position: absolute;
 inset: 0% 0% 0% auto;
}
.benefits-description .benefits-description-text .oasis-slogan {
 margin-left: auto;
 margin-right: auto;
 margin-top: 1.5rem;
 text-align: center;
 width: 80%;
 text-align: center;
 font-size: 18px;
 font-weight: 500;
 text-transform: capitalize;
 /* color: var(--logo-color); */
}

.benefits-description .benefits-description-text ul {
 width: 75%;
 margin: auto;
 text-align: center;
}
.benefits-description .benefits-description-text ul li {
 margin-bottom: 8px;
 list-style: none;
}

.benefits-description .benefits-description-text .reserve-btn a {
 background: var(--secondary-color);
 padding: 6px 25px;
 border-radius: 20px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 17px;
 color: #fff;
 font-weight: 600;
 transition: all 0.3s ease;
 width: 60%;
 margin: auto;
}

.benefits-description .benefits-description-text .reserve-btn a:hover {
 transform: scale(0.95);
}

.benefits-description .benefits-description-text .reserve-btn a img {
 width: 28px;
 margin-inline-end: 5px;
 transition: all 0.3s ease;
}

.benefits-description .benefits-description-text .reserve-btn a:hover img {
 transform: rotate(35deg);
}
.benefits-description .benefits-description-text .reserve-btn a i {
 margin-inline-end: 4px;
}

/* Location Section Styles */
.location-section {
 text-align: center;
 padding: 30px;
}

.tab-container {
 max-width: 100%;
 margin: 0 auto;
}

.tabs {
 display: flex;
 justify-content: center;
 gap: 15px;
 margin: 16px auto;
 margin-bottom: 20px;
}

.tab {
 padding: 10px 20px;
 font-size: 1.2rem;
 background-color: #e0e0e0;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 transition: background-color 0.3s;
 font-family: "Rubik";
}

.tab.active {
 background-color: var(--primary-color);
 color: white;
}

.locations-content {
 display: flex;
 justify-content: center;
 align-items: flex-start; /* Align items to the top */
 gap: 30px;
 width: 100%;
}

.location {
 display: none;
 flex: 1;
 justify-content: space-between;
 padding: 20px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 border-radius: 10px;
 background-color: white;
 max-width: 100%;
}

.location.active {
 display: flex;
 align-items: center;
}

.location-wrapper {
 display: flex;
 gap: 20px;
 width: 100%;
}

.map {
 flex: 0 0 75%;
 border-radius: 10px;
 overflow: hidden;
}

.info {
 flex: 0 0 20%;
 padding: 20px;
 border-radius: 10px;
 background-color: #f0f0f0;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 height: auto;
}

.info h3 {
 font-size: 1.5rem;
 color: #444;
 margin-bottom: 10px;
}

.info p {
 font-size: 1rem;
 color: #666;
 margin: 10px 0;
}

.address p {
 margin: 10px 0;
}

.calendar h4 {
 margin-top: 20px;
 font-size: 1.2rem;
 color: #444;
}
.calendar .button {
 margin-top: 1rem;
}
.calendar-content p {
 margin: 5px 0;
}

@media (max-width: 768px) {
 .location-wrapper {
 flex-direction: column;
 }

 .map,
 .info {
 flex: 1 1 100%;
 }

 .info {
 padding: 10px;
 }

 .info h3 {
 font-size: 1.2rem;
 }

 .info p {
 font-size: 0.9rem;
 }
}

/* reels */
/* Swiper container styles */
.swiper-container {
 width: 100%;
 height: auto;
 margin: auto;
 overflow: hidden;
 position: relative;
 padding: 2rem 0;
}

.services-section .swiper-container {
 padding-bottom: 4rem;
}

/* .swiper-wrapper {
 display: flex;
 align-items: center;
} */

.swiper-reels .swiper-slide {
 display: flex;
 width: 31% !important;
 justify-content: center;
 align-items: center;
}

/* Reel-specific styles */
.reel {
 width: 18%;
 position: relative;
 margin: 0 5%;
 cursor: pointer;
 -webkit-user-select: none;
 user-select: none;
 -webkit-user-drag: none;
 margin: auto;
}

.section-title1 {
 font-size: 2.5rem;
 font-weight: bold;
 color: #333;
 margin-bottom: 40px;
 text-align: center;
}
.reel.middle-reel {
 margin-top: -20%;
}

.reel i {
 color: #fff;
 border-radius: 50%;
 border: 1px dashed #fff;
 padding: 9px;
 position: absolute;
}

.reel i.fa-volume-xmark {
 top: 10%;
 right: 11%;
}

.reel i.fa-pause {
 top: 50%;
 right: -12%;
 transform: translate(50%, -50%);
 font-size: 35px;
 width: 55px;
 height: 55px;
 border: 1px solid #fff;
 justify-content: center;
 align-items: center;
}

.reel img.iphone-cover {
 margin-left: -8%;
 width: 240%;
 max-height: 500px;
 position: relative;
 z-index: 1;
}

.reel .text {
 width: 205%;
 left: 112%;
 transform: translateX(-50%);
 margin-left: auto;
 display: block;
 position: absolute;
 bottom: 4%;
 border-top-left-radius: 0;
 border-top-right-radius: 0;
 background-color: rgba(0, 0, 0, 0.488);
 background: linear-gradient(0deg, black, #00000042);
 padding: 1.25rem;
 padding-bottom: 1.75rem;
 color: #fff;
 font-family: system-ui, -apple-system, sans-serif;
 text-transform: capitalize;
}

.reel .text .title {
 font-size: 16px;
 font-weight: 500;
 text-align: center;
}

.reel .text .description {
 display: none;
}

.reel .video {
 width: 205%;
 height: 95%;
 position: absolute;
 top: 1%;
 left: 113%;
 transform: translate(-50%);
 overflow: hidden;
 border-radius: 25px;
}

.reel .video video {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
/* Swiper pagination styles */
.swiper-pagination {
 position: absolute;
 bottom: 15px;
 text-align: center;
 width: 100%;
 z-index: 10;
}

.swiper-pagination-bullet {
 background: #fff;
 opacity: 0.7;
}

.swiper-pagination-bullet-active {
 background: #007bff;
 opacity: 1;
}
/* Modal Background */
.modal {
 display: none;
 position: fixed;
 z-index: 1000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 background-color: rgba(0, 0, 0, 0.9);
}

/* Modal Content (Image) */
.modal-content {
 margin-top: 15%;
 margin-left: auto;
 margin-right: auto;
 display: block;
 max-width: 90%;
 max-height: 80%;
 border-radius: 15px;
}

/* Close Button */
.close-button {
 position: absolute;
 top: 20px;
 right: 35px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;
}

.close-button:hover,
.close-button:focus {
 color: #bbb;
 text-decoration: none;
 cursor: pointer;
}
/* Navigation Buttons */
.prev-button,
.next-button {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 font-size: 30px;
 font-weight: bold;
 color: #f1f1f1;
 border: none;
 background-color: transparent;
 cursor: pointer;
 transition: 0.3s;
}

.prev-button:hover,
.next-button:hover {
 color: #bbb;
}

.prev-button {
 left: 20px;
}

.next-button {
 right: 20px;
}

@media (max-width: 350px) {
 .modal-content {
 margin-top: 79% !important;
 max-width: 68% !important;
 }
 .swiper-reels .swiper-slide {
 margin-left: -5% !important;
 }
}
@media (min-width: 351px) and (max-width: 375px) {
 .swiper-reels .swiper-slide {
 margin-left: -8% !important;
 }
}
@media (max-width: 768px) {
 .modal-content {
 margin-top: 53%;
 max-width: 75%;
 }
 .section-title {
 margin-bottom: 10px;
 }
 .swiper-wrapper {
 margin-right: 10%;
 }
 .benefits-description-text p {
 color: #f50057b0;
 font-weight: 900;
 }
 .tabs {
 margin-bottom: 35px;
 flex-wrap: wrap;
 }
 .watermark-logo img {
 left: 110px !important;
 top: 59%;
 opacity: 0.2 !important;
 }
 .achievement-bubbles {
 flex-direction: column;
 }
 .hero-section {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 padding: 20px;
 }
 .hero-text-overlay {
 top: 31%;
 right: 0;
 max-width: 90%;
 margin: 10px 0;
 }

 .hero-text-overlay h1 {
 font-size: 1.6rem;
 line-height: 1.4;
 margin-bottom: 10px;
 }

 .hero-text-overlay p {
 font-size: 1rem;
 line-height: 1.5;
 }

 .hero-text-overlay ul {
 margin-top: 10px;
 padding-left: 0;
 list-style-type: none;
 }

 .hero-text-overlay ul li {
 font-size: 0.9rem;
 line-height: 1.4;
 margin-bottom: 5px;
 }

 .hero-image {
 width: 100%;
 height: auto;
 }

 .book-now {
 margin-top: 15px;
 padding: 10px 20px;
 font-size: 1rem;
 }

 .profile-container {
 flex-direction: column;
 align-items: center;
 }
 .button2 {
 float: inline-end;
 }

 .profile-image {
 width: 100%;
 margin-left: 0;
 margin-bottom: 20px;
 display: flex;
  justify-content: center;
 }

 .swiper-reels .swiper-button-prev {
 display: none;
 }
 .profile-content {
 width: 100%;
 text-align: center;
 }

 .services-list li {
 justify-content: center;
 font-size: 1rem;
 }

 .services-section {
 padding: 30px 0;
 margin-top: 0;
 }

 .section-title {
 font-size: 2rem;
 }

 .services-swiper .swiper-slide {
 flex-direction: column;
 padding: 10px;
 }

 .service-card,
 .service-card1 {
 width: 90%;
 margin: 10px auto;
 }
 /* .book-now2 {
 display: none;
 } */
 .reel .video {
 border-radius: 14px;
 width: 207%;
 left: 128%;
 }
 .reel .text {
 width: 207%;
 left: 129%;
 }
 .reel .text .title {
 font-size: 10px;
 }
 .benefits-description .benefits-description-text ul {
 width: 120%;
 }
 .info {
 padding: 10px;
 height: 50%;
 }
 .nav-item {
 font-size: 15px;
 font-family: 'Rubik';
 margin-inline-end: .5rem;
 }
 .ivf-image {
 width: 100%;
 }
 .ivf-main {
 flex-direction: column;
 }
 .arrow-icon {
 right: -8%;
 top: 34%;
 }
 .ivf-section {
 padding: 1rem;
 }
 .ivf-points {
 width: 100%;
 }
 .ivf-description {
 width: 100%;
 }
 .Pregnancy .text-content {
 width: 100%;
 }
 .Pregnancy .additional-info li::before {
 right: -10%;
 }
 .map {
 flex: 0 0 55%;
 }
 .info h3 {
 margin: 25px;
 }

 .reel img.iphone-cover {
 margin-left: 5px;
 }
 .reel {
 margin-left: -48%;
 }
 .location-wrapper {
 flex-direction: column;
 }

 .swiper-reels .swiper-slide {
 width: 375px !important;
 margin-left: 1%;
 }
 .Pregnancy .slogan h2 {
 font-size: 1.8rem;
 }

 .benefits-description-text {
 width: 95%;
 margin: 1rem AUTO;
 }
 /* .Pregnancy .image-container {
 width: 114%;
 margin-left: -23px;
 } */

 .Pregnancy .slogan p {
 display: none;
 }
 .Pregnancy .container {
 box-shadow: none;
 }
}

.swiper-button-next,
.swiper-button-prev {
 color: #fff;
 background: rgba(255, 192, 203, 0.7);
 border-radius: 50%;
 padding: 12px;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 z-index: 10;
 transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 display: flex;
 justify-content: center;
 align-items: center;
 width: 50px;
 height: 50px;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
 background-color: rgba(255, 105, 180, 0.8);
 transform: translateY(-50%) scale(1.1);
 box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

@keyframes blinkEffect {
 0% {
 opacity: 1;
 }
 50% {
 opacity: 0.7;
 }
 100% {
 opacity: 1;
 }
}
.swiper-button-next,
.swiper-button-prev {
 animation: blinkEffect 2s infinite;
}

.swiper-button-next::after,
.swiper-button-prev::after {
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 content: "\f061";
 color: #fff;
 font-size: 18px;
}

.swiper-button-prev::after {
 content: "\f060";
}

.swiper-button-next {
 right: 10px;
}

.swiper-button-prev {
 left: 10px;
}

/* Separator Section Styles */
.separator-section {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 /* margin: 20px 0; */
 position: absolute;
 /* transform: translateY(-50%); */
}

.separator-section .dash {
 flex: 1;
 height: 2px;
 background-color: #ccc;
 margin: 0 10px;
}

.separator-section .separator-logo {
width: 40px;
}
/* */
/* start blogs */

section.breadcrumb {
 padding: 15px;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 margin: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 width: 100%;
 color: #06529a;
 font-size: 16px;
 background: #dde2ec;
 width: 100%;
}

section.breadcrumb a {
 text-decoration: none;
 transition: color 0.35s;
 display: flex;
 align-items: center;
 gap: 5px;
 font-size: large;
 font-weight: bold;
 color: var(--pink-color);
}

section.breadcrumb a:hover {
 opacity: 0.8;
}

.navigation-banner i,
section.breadcrumb i {
 margin: 0 0.5rem;
 color: var(--pink-color);
 font-size: 1rem;
}
section.breadcrumb span,
.navigation-banner span {
 display: flex;
 align-items: center;
 font-weight: bold;
 font-size: 20px;
 color: #3c4a51;
}

section.breadcrumb .fw-500 {
 font-weight: 500;
 font-size: 16px;
 text-transform: uppercase;
}

@media only screen and (min-width: 600px) {
 section.breadcrumb {
 padding: 15px 30px;
 }
}
@media only screen and (min-width: 992px) {
 section.breadcrumb {
 padding: 15px 12.5%;
 }
}

section.breadcrumb a,
.navigation-banner a {
 text-decoration: none;
 transition: color 0.35s;
 display: flex;
 align-items: center;
 gap: 5px;
 font-size: large;
 font-weight: bold;
 color: var(--pink-color);
}
.navigation-banner i,
section.breadcrumb i {
 margin: 0 0.5rem;
 color: var(--pink-color);
 font-size: 1rem;
}
section.breadcrumb span,
.navigation-banner span {
 display: flex;
 align-items: center;
 font-weight: bold;
 font-size: 20px;
 color: #3c4a51;
}
.navigation-banner i,
section.breadcrumb i {
 margin: 0 0.5rem;
 color: var(--pink-color);
 font-size: 1rem;
}

section.blogs-container .blogs-search input:-ms-input-placeholder {
 color: #202124;
}
section.blogs-container .blogs-search input::-ms-input-placeholder {
 color: #202124;
}

.search-container .search .search-action .input-container button,
section.blogs-container .blogs-search button {
 cursor: pointer;
 background-color: transparent;
 color: #202124;
}

.search-container .search .search-action .input-container button img,
section.blogs-container .blogs-search button img {
 display: flex;
 height: 17px;
 width: auto;
}

section.blogs-container {
 padding: 30px 0;
 width: 85%;
}

section.blogs-container .blogs .blog {
 margin-bottom: 1rem;
 overflow: hidden;
 transition: 0.3s ease;
 background-color: #ffffff;
 border-radius: 4px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 position: relative;
}

section.blogs-container .blogs .blog:last-child {
 margin: 0;
}

section.blogs-container .blogs .blog .blog-img {
 position: relative;
 display: flex;
 width: 100%;
 height: 100%;
 overflow: hidden;
}

section.blogs-container .blogs .blog .blog-img::after {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 opacity: 1;
 padding-bottom: 10%;
 content: "";
 display: flex;
 align-items: center;
 justify-content: center;
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 color: #ffffff;
 font-size: 20px;
 font-weight: 600;
 transition: background 0.35s, opacity 0.35s, padding 0.35s;
 background-color: rgba(0, 0, 0, 0.4);
 padding: 0;
}

section.blogs-container .blogs .blog .blog-img:hover::after {
 background-color: rgba(0, 0, 0, 0.4);
 opacity: 1;
 padding: 0;
}

section.blogs-container .blogs .blog .blog-img img {
 display: flex;
 width: 100%;
 transition: transform 0.5s;
 object-fit: cover;
}

section.blogs-container .blogs .blog .blog-img:hover img {
 transform: scale(1.1);
}

section.blogs-container .blogs .blog .blog-text {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 width: 100%;
 text-align: start;
 pointer-events: none;
}

section.blogs-container .blogs .blog .blog-text a {
 font-size: 1.2rem;
 line-height: 1.2;
 text-decoration: none;
 transition: color 0.35s;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 overflow: hidden;
}

section.blogs-container.blogs-content .blogs .blog .blog-text a {
 font-weight: 700;
 margin-bottom: 0.5rem;
 font-size: 1.5rem;
 width: fit-content;
 border-bottom: 0.5px solid #ccc;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 overflow: hidden;
}
@media screen and (max-width: 576px) {
 section.blogs-container.blogs-content .blogs .blog .blog-text {
 padding: 0.5rem;
 }
 section.blogs-container.blogs-content .blogs .blog .blog-text a {
 font-size: 1.2rem;
 }
}

section.blogs-container.blogs-content .blogs .blog .blog-text p {
 margin: 0;
 line-height: 1.1;
 color: #ffffff;
 white-space: normal;
 text-wrap: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

section.blogs-container .blogs .blog .blog-info {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 width: 100%;
 padding: 8px 10px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 color: #eaf1ff;
 border-top: 1px solid rgba(0, 0, 0, 0.075);
 font-weight: 500;
}

@media screen and (max-width: 992px) {
 section.blogs-container .blogs .blog .blog-info {
 align-items: flex-end;
 }
}

section.blogs-container .blogs .blog .blog-info .b-i .calendar {
 text-align: start;
 width: fit-content;
 direction: ltr;
 padding-top: 0.1rem;
 display: inline-block;
 margin-right: -3px;
 font-size: 0.85rem;
 color: #ffffffd9;
 font-weight: bold;
}

section.blogs-container .blogs .blog .blog-info .b-i .author {
 text-align: start;
 display: flex;
 align-items: center;
}

section.blogs-container .blogs .blog .blog-info .b-i .author .text {
 font-size: 0.85rem;
 border-bottom: 1px solid #ccc;
 color: #ffffff;
 font-weight: 500;
}

section.blogs-container .blogs .blog .blog-info .b-i .author .image {
 width: 45px;
 height: 45px;
 border-radius: 50%;
 margin-bottom: 3px;
 overflow: hidden;
}

section.blogs-container .blogs .blog .b-i .author .image img {
 width: 100%;
 height: 45px;
 object-fit: cover;
}

section.blogs-container .blogs .blog .blog-info i {
 margin-right: 2.5px;
 font-size: 0.8rem;
 color: #ffffffd9;
}

section.blogs-container .blogs > p {
 opacity: 0.9;
 font-size: 14px;
 color: #071833;
}

section.blogs-container .blogs-actions {
 display: flex;
 flex-direction: column;
 width: 100%;
}

section.blogs-container .blogs-search input {
 font-size: 16px;
 flex-shrink: 1;
 min-width: 0;
}

section.blogs-container .blogs-search button img {
 height: 18px;
}

section.blogs-container .blogs-actions .b-e-i {
 margin-left: 30px;
 display: flex;
 flex-direction: column;
}

section.blogs-container .blogs-actions .b-e-i h3,
section.blogs-container .blogs h3 {
 margin: 0;
 margin-bottom: 16px;
 text-transform: capitalize;
 /* color: #3c4a51; */
 text-align: start;
 /* font-weight: 600; */
 border-bottom: 3px solid #d86376;
 padding-bottom: 0.5rem;
 color: var(--secondary-color);
 font-weight: bold !important;
 font-size: 2rem;
}
section.blogs-container .blogs h3 {
 margin-bottom: 1.5rem;

}

section.blogs-container .blogs-actions .b-e-i p {
 opacity: 0.9;
 margin: 0;
 line-height: 1.75;
 font-size: 14px;
 color: #3c4a51;
 text-align: start;
}

section.blogs-container .blogs-actions .b-e-i .sm-c {
 margin-top: 20px;
 display: flex;
}

section.blogs-container .blogs-actions .b-e-i .sm-c a i.fa-facebook {
 color: #17a9fd;
}

section.blogs-container .blogs-actions .b-e-i .sm-c a i.fa-instagram {
 background: #d86376;
 background: -moz-linear-gradient(
 45deg,
 #d86376 0%,
 #c34e65 25%,
 #a43f56 50%,
 #8f3150 75%,
 #7c2450 100%
 );
 background: -webkit-linear-gradient(
 45deg,
 #d86376 0%,
 #c34e65 25%,
 #a43f56 50%,
 #8f3150 75%,
 #7c2450 100%
 );
 background: linear-gradient(
 45deg,
 #d86376 0%,
 #c34e65 25%,
 #a43f56 50%,
 #8f3150 75%,
 #7c2450 100%
 );
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

section.blogs-container .blogs-actions .b-e-i .sm-c a:last-child {
 margin: 0;
}

section.blogs-container .blogs-actions .b-e-i .sm-c a:hover {
 opacity: 0.5;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs {
 display: flex;
 flex-direction: column;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b {
 color: #17d7b1;
 background-color: #ffffff;
 margin-top: 20px;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 width: 100%;
 display: flex;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
 flex-direction: row;
 padding: 0.5rem;
 border-radius: 4px;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b:first-child {
 margin: 0;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b .blog-img {
 display: flex;
 width: 125px;
 height: 110px;
 align-self: center;
 margin-left: 0.5rem;
 object-fit: cover;
 border-radius: 4px;
 overflow: hidden;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b .blog-img img {
 display: flex;
 width: 100%;
 height: auto;
 object-fit: cover;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b .blog-text {
 flex: 1;
 display: flex;
 flex-direction: column;
 flex-shrink: 1;
 justify-content: space-between;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b .blog-text a {
 padding-top: 0.5rem;
 font-size: 1.2rem;
 font-weight: 600;
 background: linear-gradient(to right, #d86376 55%, #b4465a);

 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 text-decoration: none;
 transition: color 0.35s;
 text-align: start;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

section.blogs-container
 .blogs-actions
 .b-e-i
 .side-blogs
 .s-b
 .blog-text
 a:hover {
 opacity: 0.9;
}

section.blogs-container
 .blogs-actions
 .b-e-i
 .side-blogs
 .s-b
 .blog-text
 .blog-info {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 flex-wrap: wrap-reverse;
 gap: 0.3rem;
}

section.blogs-container
 .blogs-actions
 .b-e-i
 .side-blogs
 .s-b
 .blog-text
 .blog-info
 .b-i {
 display: flex;
 align-items: center;
 justify-content: center;
 color: #aab0bc;
 font-size: 14px;
 font-weight: 500;
}

section.blogs-container
 .blogs-actions
 .b-e-i
 .side-blogs
 .s-b
 .blog-text
 .blog-info
 .dot {
 margin: 0 10px;
 width: 4px;
 height: 4px;
 background-color: #aab0bc;
 border-radius: 50%;
}

section.blogs-container
 .blogs-actions
 .b-e-i
 .side-blogs
 .s-b
 .blog-text
 .blog-info
 .b-i
 i {
 margin-right: 5px;
 margin-left: 5px;
}

section.blogs-container .blogs .blogs-pagination {
 padding: 7px 0.9rem;
}

section.blogs-container .blogs .blogs-pagination .page {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background-color: rgb(80 179 205 / 90%);
 color: #ffffff;
 font-size: 14px;
 font-weight: 700;
 box-shadow: 0px 1px 2px 0 #29435e, 1px 0px 2px #29435e;
 cursor: pointer;
 transition: 0.4s;
 user-select: none;
 -webkit-user-select: none;
}

section.blogs-container .blogs .blogs-pagination .page.current-page {
 background-color: #06c9fd;
 scale: 1.1;
 color: white;
 box-shadow: 0px 1px 2px 0 #7190b0, 1px 0px 2px #7190b0;
}
@media only screen and (min-width: 450px) {
 .blogs-container.blogs-content .blogs .blog .blog-info {
 padding: 12px 40px;
 }
}

.blogs-container.trand-blogs .blog .views,
section.blogs-container.blogs-content .blog .views {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 color: #ffffff;
 width: fit-content;
 z-index: 2;
}

.blogs-container.trand-blogs .blog-box {
 position: absolute;
 bottom: 0;
 z-index: 2;
 line-height: 1.6;
 align-items: flex-end;
 justify-content: space-between;
 pointer-events: none;
}
.blogs-container.trand-blogs .blog-box .blog-text {
 padding: 1rem 1rem 1rem 0.1rem;
 flex: 1;
}
.blogs-container.trand-blogs .blog-info {
 position: absolute;
 right: 0;
 top: 0;
}
.blogs-container.blogs-content .blog .blog-text {
 position: absolute;
 bottom: 45px;
 z-index: 2;
 padding: 1rem;
 line-height: 1.6;
}

section.blogs-container.blogs-content .vote-box,
.blog-head .vote-box {
 border: 0.5px solid #50b3cd;
 background-color: transparent;
 color: #fff;
 z-index: 2;
}
section.blogs-container.blogs-content .vote-box span,
.blog-head .vote-box span {
 border-left: 1px solid #50b3cd;
}

section.blogs-container .blogs .blogs-pagination {
 max-width: 215px;
 position: relative;
 overflow: hidden;
 border-radius: 50px;
 background-color: #e7e7e7cf;
}
section.blogs-container .blogs .blogs-pagination .swiper-slide.page-number {
 display: flex;
 justify-content: center;
}

@media (min-width: 992px) {
 section.blogs-container.trand-blogs .blogs {
 width: 100%;
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 grid-auto-rows: 240px;
 grid-auto-flow: dense;
 gap: 0.5rem;
 }

 section.blogs-container.trand-blogs .blogs .blog {
 margin-bottom: 0px;
 }
}
@media (max-width: 991px) {
 section.blogs-container.trand-blogs .blogs .blog {
 height: 400px;
 }
 section.blogs-container.trand-blogs .blogs .blog .blog-img img {
 height: 400px;
 }
}

@media (max-width: 450px) {
 section.blogs-container.trand-blogs .blogs .blog {
 height: 320px;
 }
 section.blogs-container.trand-blogs .blogs .blog .blog-img img {
 height: 320px;
 }
}
section.blogs-container.blogs-content .blog .views {
 padding: 1.2rem;
 display: none;
}

section.blogs-container.blogs-content .blogs .blog .blog-text a {
 font-weight: 700;
 margin-bottom: 0.5rem;
 font-size: 1.5rem;
 width: fit-content;
 border-bottom: 0.5px solid #ccc;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 /* background: linear-gradient(to right, #d86376 55%, #b4465a); */

 /* -webkit-background-clip: text; */
 /* -webkit-text-fill-color: transparent; */
 color: #ffffff;
 overflow: hidden;
}
@media screen and (max-width: 576px) {
 section.blogs-container.blogs-content .blogs .blog .blog-text {
 padding: 0.5rem;
 }
 section.blogs-container.blogs-content .blogs .blog .blog-text a {
 font-size: 1.2rem;
 }
}

section.blogs-container.blogs-content .blogs .blog .blog-text p {
 margin: 0;
 line-height: 1.1;
 color: #ffffff;
 white-space: normal;
 text-wrap: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
section.blogs-container.blogs-content {
 direction: rtl;
}

@media (max-width: 450px) {
 .blogs-container.blogs-content .blogs .blog .blog-info {
 padding: 12px 40px;
 }
 .breadcrumbs a {
 font-size: 1rem !important;
 }
 section.blog-head h1 {
 font-size: 1.2rem !important;
 }
}

@media only screen and (min-width: 992px) {
 section.blogs-container {
 width: calc(100% - 50px);
 }

 .blogs {
 margin-left: 5%;
 }
 section.blogs-container.blogs-content {
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 gap: 20px;
 }
 section.blogs-container.blogs-content div:first-of-type {
 grid-column: span 7;
 }
 section.blogs-container.blogs-content div:nth-of-type(2) {
 grid-column: span 1;
 }
 section.blogs-container.blogs-content div:nth-of-type(3) {
 grid-column: span 4;
 }
 section.blogs-container.blogs-content {
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 gap: 20px;
 }
 section.blogs-container.blogs-content div:first-of-type {
 grid-column: span 7;
 }
 section.blogs-container.blogs-content div:nth-of-type(2) {
 grid-column: span 1;
 }
 section.blogs-container.blogs-content div:nth-of-type(3) {
 grid-column: span 4;
 }
}

.blogs-container.trand-blogs .blog .views,
section.blogs-container.blogs-content .blog .views {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

.blogs-container.blogs-content .blog .blog-text {
 position: absolute;
 bottom: 45px;
 z-index: 2;
 padding: 1rem;
 line-height: 1.6;
}
section.blogs-container.blogs-content .vote-box,
.blog-head .vote-box {
 border: 0.5px solid #50b3cd;
 background-color: transparent;
 color: #fff;
 z-index: 2;
}
section.blogs-container.blogs-content .vote-box span,
.blog-head .vote-box span {
 border-left: 1px solid #50b3cd;
}
section.blogs-container.blogs-content .blog .views {
 padding: 1.2rem;
 display: none;
}
/**/
html[lang="en"] section.blog-head,
html[lang="en"] section.blog-head * {
 direction: ltr;
}

/* START BLOG PAGE */

.breadcrumbs a {
 display: flex;
 justify-content: center;
 font-size: 2rem;
 margin-top: 3rem;
}
section.blog-head {
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
 margin-top: 30px;
 margin-bottom: 50px;
 width: 100%;
}
@media (max-width: 768px) {
 section.blog-head {
 margin-bottom: 30px;
 }
 section.blogs-container.blogs-content {
 margin-left: 7%;
 }
 .blogs {
 margin-bottom: 5%;
 }
}
@media (max-width: 576px) {
 section.blog-head {
 margin-bottom: 20px;
 }
}
section.blog-head h1 {
 position: absolute;
 color: white;
 top: 50%;
 z-index: 111;
 transform: translateY(-50%);
 font-weight: bold;
 text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
 text-align: center;
 width: 100%;
}
.blog-img-container {
 width: 75%;
 height: 50vh;
 position: relative;
 box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
 border-radius: 15px;
}
.blog-img-container::after {
 background: rgba(0, 0, 0, 0.2);
}
@media (max-width: 1200px) {
 section.blog-head .blog-img-container {
 height: 40vh;
 width: 90%;
 }
}
section.blog-head .blog-img-container img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 7px;
 position: relative;
}
.blog-img-container::before {
 z-index: 2;
 backdrop-filter: blur(2px);
 border-radius: 7px;
 background: rgba(0, 0, 0, 0.2);
}
section.blog-head .blog-information {
 width: fit-content;
 padding: 0.5rem 2rem;
 background-color: #f4f4f4;
 position: absolute;
 bottom: 0;
 left: 50%;
 border-radius: 5rem;
 transform: translate(-50%, 50%);
 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
 display: flex;
 justify-content: center;
 align-items: center;
 color: #707a8f;
 font-size: 0.9rem;
 font-weight: 500;
 direction: ltr;
 gap: 15px;
 z-index: 4;
}

.breadcrumbs a:not(:last-of-type),
.breadcrumbs span {
 font-weight: bold;
 transition: color 0.5s;
 background: linear-gradient(to right, #dea420 55%, #af8012);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.breadcrumbs a:hover {
 color: #e94f84;
}

.breadcrumbs a.active,
.breadcrumbs i {
 /* color: #444; */
 color: var(--secondary-color);
 font-weight: bold;
}
section.b-container {
 direction: rtl;
 display: flex;
 width: 100%;
 justify-content: center;
 text-align: start;
 padding: 0 15px;
}
section.b-container .blog-content {
 width: 75%;
 margin-bottom: 30px;
}
section.b-container .blog-content .desc p {
 width: 100%;
 color: #3c4a51;
 font-weight: bold;
 font-size: 1.2rem;
}
section.b-container .blog-body {
 color: #3c4a51;
}
section.b-container .blog-body div {
 font-weight: bold;
 font-size: 1.2rem;
 margin: 1.5rem 0px;
 background: linear-gradient(to right, #d86376 55%, #a54357);

 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
section.b-container .blog-body ul {
 margin: 0.7rem 0px;
}

/* General Styles */
/* Blog Card Container */
.home-blog-card {
 border-radius: 8px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 overflow: hidden;
 transition: transform 0.3s ease;
 background: #fff;
 text-align: center;
}

/* Blog Image Container */
.home-blog-img {
 position: relative;
 display: block;
 overflow: hidden;
}

/* Blog Image */
.home-blog-img img.home-blog-image {
 width: 100%;
 height: 200px;
 object-fit: cover;
 border-radius: 8px 8px 0 0; /* Rounded corners only at the top */
 transition: transform 0.5s ease;
}

/* Hover Effect for Image */
.home-blog-img:hover img.home-blog-image {
 transform: scale(1.1);
}

/* Blog Title Below Image */
.home-blog-text {
 padding: 15px 10px;
}

.home-blog-title {
 font-size: 1.2rem;
 font-weight: bold;
 color: #d86376;
 text-decoration: none;
 display: block;
 line-height: 1.2;
 margin-bottom: 10px;
}

/* Blog Info */
.home-blog-info {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 0.8rem;
 color: #999;
 padding: 0 10px 10px;
}

.home-b-i i,
.home-calendar {
 color: #999;
}

/* Responsive Design */
@media (max-width: 425px) {
 .home-blog-card {
 margin-left: 5%;
 margin-right: 5%;
 }

 .home-blog-title {
 font-size: 1rem;
 }
}



/* START FOOTER */
footer {
 direction: rtl;
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 position: relative;
 overflow: hidden;
 /* background: #252a2f; */
 background: linear-gradient(45deg, #e2e9da1f, #ffecf6);
}
/* @media (max-width: 767px) {
 footer {
 padding-bottom: 81px;
 } 
} */
footer a:hover{
color: var(--pink-color) !important;
}
footer::before,
footer::after {
 width: 200px;
 height: 200px;
 content: "";
 background: rgba(255, 255, 255, 24%);
 position: absolute;
 z-index: 1;
 border-radius: 50%;
}
footer::before {
 right: -6%;
 top: -14%;
}
footer::after {
 left: -6%;
 bottom: -14%;
}

.about footer,
.contracts footer,
.blog footer,
.feedback footer,
.contact footer,
.media footer {
 box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
}

footer .f-m {
 box-sizing: border-box;
 padding: 20px 30px;
 padding-bottom: 0;
 width: 100%;
 display: flex;
 flex-direction: row;
 align-items: flex-start;
 justify-content: space-between;
}
@media (max-width: 768px) {
 footer .f-m {
 flex-wrap: wrap;
 justify-content: center;
 }
 footer .f-i:not(:last-child) {
 align-items: flex-start;
 }
 
}
footer .f-c {
 position: relative;
 color: var(--secondary-color);
 padding: 20px 0;
 font-size: 14px;
 font-weight: bold;
 z-index: 9;
}

footer .f-c::before {
 content: "";
 position: absolute;
 top: 15%;
 left: 50%;
 transform: translateX(-50%);
 width: 20%;
 height: 3px;
 background-color: var(--golden);
}

footer .f-i {
 margin-bottom: 50px;
 width: 100%;
 padding: 0;
 box-sizing: border-box;
 display: flex;
 flex-direction: column;
 position: relative;
}
footer .f-i:nth-of-type(3) {
 align-items: center;
}


footer .f-i.l {
 padding: 0;
 width: 100%;
}

footer .f-i.n {
 width: 100%;
}

footer .f-i .f-i-l {
 width: 100px;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 transition: opacity 0.5s;
}

footer .f-i .f-i-l img {
 width: 100%;
 height: auto;
}

footer .f-i .f-i-l:hover {
 opacity: 0.6;
}

footer .f-i .f-l-c {
 margin-top: 30px;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 
}

footer .f-i.l .f-i-s-m {
 margin-top: 10px;
 display: flex;
 flex-direction: row;
}

footer .f-i.l .f-i-s-m a {
 margin-right: 15px;
}

footer .f-i.l .f-i-s-m a:first-child {
 margin: 0;
}

footer .f-i .f-l {
 margin-top: 10px;
 /* color: #ffffff; */
 /* color: #af8012; */
 color: var(--secondary-color);
}

footer .f-i .f-l:first-child {
 margin: 0;
}

footer .f-i h2 {
 margin-top: 10px;
 color: var(--secondary-color);
 position: relative;
 margin: 0;
 margin-bottom: 1rem;
 line-height: 1;
 align-self: flex-start;
}

footer .f-i span {
 font-size: 15px;
 color: #4a484e;
}

footer .f-i h2::before {
 content: "";
 position: absolute;
 margin-top: 10px;
 top: 100%;
 right: 0;
 width: 40%;
 height: 3px;
 background-color: var(--golden);
}

footer .f-i .f-i-c {
 width: 100%;
 margin-top: 10px;
 display: flex;
 flex-direction: row;
}

footer .f-i .f-i-c input {
 flex-shrink: 1;
 min-width: 0;
 border: none;
 border-radius: 0 25px 25px 0;
 font-size: 16px;
 padding: 7.5px;
 padding-right: 25px;
 
 background-color: #ffffff;
 transition: background 0.5s;
}

footer .f-i .f-i-c input:focus {
 background-color: #efecf4;
}

footer .f-i .f-i-c button {
 font-size: 16px;
 padding: 7.5px 40px;
 border-radius: 25px 0 0 25px;
}

footer .f-r {
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
 justify-content: space-evenly;
}

footer a {
 
 transition: color 0.5s;
}

footer a:hover {
 color: var(--pink-color) !important;
}

footer .f-r a {
color: #a01d26;
}

footer .f-r a:hover {
 opacity: .8;
}
@media only screen and (min-width: 767px) {
 footer .f-i {
 width: unset;
 padding: 0 30px;
 display: flex;
 justify-content: center;
 }
 footer .f-i.l {
 width: 400px;
 padding: 0 30px;
 }

 footer .f-i.n {
 width: 400px;
 }
}

@media only screen and (min-width: 1250px) {
 footer .f-m {
 padding: 2rem 70px;
 padding-bottom: 0;
 }

 footer .f-i.n {
 width: 500px;
 }
}
footer .social-media,
.contact-us .social-media,
section.b-container .blog-content .social-media {
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}
section.b-container .blog-content .social-media {
 width: fit-content;
 height: auto;
 margin: 0px auto;

}
footer .social-media .child,
.contact-us .social-media .child,
section.b-container .blog-content .social-media .child {

 width: 50px;
 height: 50px;
 display: flex;
 justify-content: center;
 align-items: center;
 transform-style: preserve-3d;
 transition: all 0.3s cubic-bezier(0.68, 0.85, 0.265, 1.85);
 border-radius: 5px;
 margin: 0 5px;
 box-shadow:
 inset 1px 1px 2px #fff,
 0 0 5px #4442;
}

footer .social-media .child:hover,
.contact-us .social-media .child:hover,
section.b-container .blog-content .social-media .child:hover {
 background-color: white;
 background-position:
 -100px 100px,
 -100px 100px;
 transform: perspective(180px) rotateX(60deg) translateY(2px);
 -webkit-text-fill-color: unset;
}
footer .social-media .child-1 i,
.contact-us .social-media .child-1 i,
section.b-container .blog-content .social-media .child-1 i {
 color: #25D366;
 font-size: 1.5rem;
}
footer .social-media .child-1:hover,
.contact-us .social-media .child-1:hover,
section.b-container .blog-content .social-media .child-1:hover {
 box-shadow: 0px 10px 10px #25D366;
} 
footer .social-media .child-2 svg,
.contact-us .social-media .child-2 svg,
section.b-container .blog-content .social-media .child-2 svg{
 font-size: 1.5rem;
} 
footer .social-media .child-2:hover,
.contact-us .social-media .child-2:hover,
section.b-container .blog-content .social-media .child-2:hover {
 box-shadow: 0px 10px 10px #4267b2;
}
footer .social-media .child-3 svg,
.contact-us .social-media .child-3 svg,
section.b-container .blog-content .social-media .child-3 svg{
 font-size: 1.5rem;
} 
footer .social-media .child-3:hover,
.contact-us .social-media .child-3:hover,
section.b-container .blog-content .social-media .child-3:hover {
 box-shadow: 0px 10px 10px #E1306C;
}
footer .social-media .child-4 svg,
.contact-us .social-media .child-4 svg,
section.b-container .blog-content .social-media .child-4 svg{
 font-size: 1.5rem;
} 
footer .social-media .child-4:hover,
.contact-us .social-media .child-4:hover,
section.b-container .blog-content .social-media .child-4:hover {
 box-shadow: 0px 10px 10px #111111;
}


footer .social-media .button,
.contact-us .social-media .button,
section.b-container .blog-content .social-media .button {
 cursor: pointer;
 width: 100%;
 height: 100%;
 border: none;
 background: #fff;
 border-radius: 4px;
 font-size: 20px;
 transition-duration: transform 0.5s;
 transition-timing-function: cubic-bezier(0.68, -0.85, 0.265, 1.55);
 padding: 0px;
}

footer .social-media .child:hover > .button,
.contact-us .social-media .child:hover > .button,
section.b-container .blog-content .social-media .child:hover > .button {
 transform: translate3d(0px, 20px, 30px) perspective(80px) rotateX(-60deg)
 translateY(2px) translateZ(10px);
 background-color: transparent;
}

footer .tree img {
 position: absolute;
 top: -60%;
 left: 37px;
 width: 40px;
 transform: scale(0); 
 transition: transform .4s ease-in-out; 
}

footer .tree:hover img {
 transform: scale(1) rotate(360deg);
}

@keyframes rotate360 {
 from {
 transform: rotate(0deg); 
 }
 to {
 transform: rotate(360deg); 
 }
}



 .heroo {
  position: relative;
 display: flex;
 max-width: 1440px;
 gap: 2em;
 justify-content: space-between;
 padding: 2em 2em;
 /* background: linear-gradient(45deg, #e2e9da1f, #ffecf6); */
 /* background: linear-gradient(45deg, #f1c3ce, #ffcfe8); */


 /* linear-gradient(45deg, #f1c3ce, #ffcfe8) */
 /* background: linear-gradient(45deg, #e2e9da1f, #ffd6ec); */
}

.heroo .text {
 width: 40%;
 /* height: 500px; */
 display: flex;
 flex-direction: column;
 justify-content: center;
 font-family: sans-serif;
 /* margin-top: -10px; */
}

.heroo .text__short {
 /* text-transform: uppercase; */
 /* font-size: 0.75rem; */
 color: #479A7E;
}

.heroo .text__title {
 /* color: var(--pink-color); */
 color: var(--secondary-color);
 font-size: 2.4rem;
 line-height: 1;
 margin: 0;
 margin-bottom: 1.4rem;
}

.heroo .text__description {
 color: var(--pink-color);
 /* line-height: 145%; */
 /* font-size: 1em; */
 /* font-weight: 300; */
 padding-bottom: 1em;
 font-family: "nawar";
 font-size: 1.2rem;
 line-height: 1.4;
 max-width: 420px;
}

.heroo .text__button {
 max-width: 120px;
 text-align: center;
 display: inline-block;
 text-decoration: none;
 color: white;
 background-color: #479A7E;
 padding: 1em 2em;
 border-radius: 0.5em;
}

.heroo .grid__container {
 min-width: 60%;
 display: grid;
 grid-gap: .5em;
 grid-template-columns: repeat(8, 1fr);
}

.heroo .grid__item {
 border-radius: 0.5em;
 overflow: hidden;
}

.heroo .one {
 grid-column: 1 / 2;
 grid-row: 2 / 3;
 box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
 background-image: url("/assets/img/dr/front-view-doctor-holding-baby.jpg");
 background-position: center;
 background-size: cover;
 background-image: url("/assets/img/dr/dr-12.webp");
}

.heroo .two { 
 grid-column: 2 / 5;
 grid-row: 1 / 4;
 border-radius: 10px;
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
 overflow: hidden;
 width: 284px;
}
.heroo .grid__item img {
 position: relative;
 width: 100%;
 object-fit: cover;
 border-radius: 0.5em;
}


.heroo .three {
 grid-column: 5 / 6;
 grid-row: 1 / 2;
 background-image: url("/assets/img/dr/adult-taking-care-baby-weight (1).jpg");
 background-position: center;
 background-size: cover;
 background-image: url("/assets/img/dr/dr-10.webp");
}

.heroo .four {
 grid-column: 6 / 7;
 grid-row: 1 / 2;
 background-color: #ffa8a2;
 border-radius: 0 0 100px 0;
 -moz-border-radius: 0 0 100px 0;
 -webkit-border-radius: 0 0 100px 0;
}


.heroo .five {
 grid-column: 5 / 7;
 grid-row: 2 / 4;
 background-position: center;
 background-size: cover;
}

.heroo .six {
 grid-column: 7 / 8;
 grid-row: 2 / 3;
 background-color: #D3F0EE;
 border-radius: 0 100px 0 0;
 -moz-border-radius: 0 100px 0 0;
 -webkit-border-radius: 0 100px 0 0;
}

.heroo .seven {
 grid-column: 7 / 8;
 grid-row: 3 / 4;
 background-image: url("/assets/img/dr/side-view-happy-mother-holding-baby.jpg");
 background-position: center;
 background-size: cover;
}

.heroo .eight {
 grid-column: 6 / 7;
 grid-row: 4 / 6;
 border-radius: 50%;
 background-color: #CED7ED;
}

.heroo .nine {
 grid-column: 1 / 2;
 grid-row: 4 / 5;
 background-color: #ffa8ae;
 border-radius: 100px 0 0 0;
 -moz-border-radius: 100px 0 0 0;
 -webkit-border-radius: 100px 0 0 0;
}

.heroo .ten {
 grid-column: 2 / 3;
 grid-row: 4 / 5;
 background-image: url("/assets/img/dr/portrait-newborn-baby-swing.jpg");
 background-position: center;
 background-size: cover;
 background-image: url("/assets/img/dr/dr-15.webp");
}

.heroo .eleven {
 grid-column: 3 / 5;
 grid-row: 4 / 6;
 background-position: center;
 background-size: cover;
}

.heroo .twelve {
 grid-column: 5 / 6;
 grid-row: 4 / 5;
  background-image: url("/assets/img/dr/adult-taking-care-baby-weight.jpg");

 background-position: center;
 background-size: cover;
}
.heroo .one,
.heroo .three,
.heroo .four,
.heroo .six,
.heroo .seven,
.heroo .eight,
.heroo .nine,
.heroo .ten{
 width: 10.5vw;
 height: 12.1vh;
}

.heroo .two {
 height: 39vh;
 width: 36.5vw;
}
.heroo .five {
 width: 22vw;
 height: 25.6vh;
}
.heroo .eleven {
 height: 25.6vh;
 width: 24vw;
}
@media (min-width: 200px) {
    .heroo .two {
        height: 34vh;
    width: 36.5vw;
    }
    .heroo .one, .heroo .three, .heroo .four, .heroo .six, .heroo .seven, .heroo .eight, .heroo .nine, .heroo .ten {
        width: 10.5vw;
        height: 8.1vh;
    }
}

@media (min-width: 781px) {
 .heroo .one,
.heroo .three,
.heroo .four,
.heroo .six,
.heroo .seven,
.heroo .eight,
.heroo .nine,
.heroo .ten{
 height: 15.4vh;
 width: 6.5vw;
}

.heroo .two {
 height: 48.8vh;
 width: 20.8vw;
}
.heroo .five {
 height: 32.2vh;
 width: 13.7vw;
}
.heroo .eleven {
 height: 32.2vh;
 width: 13.7vw;
}
}

@media (min-height: 800px) {
    .heroo .two {
        height: 34vh;
    width: 36.5vw;
    }
    .heroo .one, .heroo .three, .heroo .four, .heroo .six, .heroo .seven, .heroo .eight, .heroo .nine, .heroo .ten {
        width: 10.5vw;
        height: 8.1vh;
    }
}

@media (min-width: 1111px) {
 .heroo .two img {
 top: -85px;
 }
 .heroo .five img {
 top: -50px;
 }
 .heroo .eleven img {
 top: -50px;
 }
 
}


.button {
 direction: ltr;
 width: fit-content;
 line-height: 1;
 text-decoration: none;
 display: inline-flex;
 border: none;
 cursor: pointer;
 align-items: center;
 gap: 0.75rem;
 background-color: #8c3acd;
 color: #fff;
 border-radius: 10rem;
 font-weight: 600;
 padding: 0.75rem 1.5rem;
 padding-left: 20px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 /* background: linear-gradient(135deg, #9b5fa0, #ef2c92); */
 /* background: linear-gradient(135deg, #9b5fa0, #ef2c92, #1a7366); */
 background: linear-gradient(135deg, #ef2c92, #f50057);
 transition: background 0.3s;
}

.button__icon-wrapper {
 flex-shrink: 0;
 width: 25px;
 height: 25px;
 position: relative;
 color: var(--clr);
 background-color: #fff;
 border-radius: 50%;
 display: grid;
 place-items: center;
 overflow: hidden;
}

.button:hover {
 /* background: #ef2c92; */
 /* color: #3c4a51; */
 background: linear-gradient(135deg, #f50057, #9b5fa0);
 
}

.button:hover .button__icon-wrapper {
 color: #000;
}

.button__icon-svg--copy {
 position: absolute;
 transform: translate(-150%, 150%);
}

.button:hover .button__icon-svg:first-child {
 transition: transform 0.3s ease-in-out;
 transform: translate(150%, -150%);
}

.button:hover .button__icon-svg--copy {
 transition: transform 0.3s ease-in-out 0.1s;
 transform: translate(0);
}


@media (max-width: 900px) {
 .heroo .grid__container {
 min-width: 50%;
 height: 59vh;
 margin-top: 1rem;
}
 
 @media (max-width: 780px) {
    .heroo .grid__container {
        background-image: url('/assets/img/مشروع جديد.png');
        background-size: 50%;
        background-repeat: repeat;
    }
       }
 .heroo {
 flex-direction: column-reverse;
 margin: 1rem;
 padding: 0px;
 }
 .heroo .text__description {
    margin: 0px auto;
 }
 .heroo .text {
 width: 100%;
 }
 }
 }

 /* social links */
 ul {
 list-style: none;
}

.example-1 {
margin-top: 3rem;
 display: flex;
 align-items: center;
}
.example-1 .icon-content {
 margin: 0 10px;
 position: relative;
}
.example-1 .icon-content .tooltip {
 position: absolute;
 top: -30px;
 left: 50%;
 transform: translateX(-50%);
 background-color: #000;
 color: #fff;
 padding: 6px 10px;
 border-radius: 5px;
 opacity: 0;
 visibility: hidden;
 font-size: 14px;
 transition: all 0.3s ease;
}
.example-1 .icon-content:hover .tooltip {
 opacity: 1;
 visibility: visible;
 top: -50px;
}
.example-1 .icon-content .link {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 color: var(--pink-color);
 background-color: #fff;
 transition: all 0.3s ease-in-out;
}


.example-1 .icon-content .link:hover {
 box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
.example-1 .icon-content .link svg {
 width: 30px;
 height: 30px;
}
.example-1 .icon-content .link[data-social="FaceBook"]:hover {
 color: #1877F2;
}
.example-1 .icon-content .link[data-social="intsa"]:hover {
 color: #C32AA3;
}
.example-1 .icon-content .link[data-social="tiktok"]:hover {
 color: #111111;

}
.example-1 .icon-content .link[data-social="youtube"]:hover {
 color: #FF0000;
}


/* START articles */
.last-articles {
 width: 100%;
 padding-top: 0;
 padding-bottom: 40px;
 background: #fffeff;
}
.last-articles h2 {
 color: var(--secondary-color);
 text-align: center;
 padding-top: 2rem;
}

.last-articles .l-a-s-c {
 position: relative;
 width: 90%;
 margin: 0px auto;
}

.last-articles .blog-swiper {
 z-index: 0;
 position: static;
 width: 100%;
 overflow: hidden;
}

.last-articles .swiper-wrapper {
 z-index: 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.last-articles .blog-swiper .card {
 width: 100%;
 height: 230px;
 border-radius: 15px;
 /* background: #c0c0c085; */
 background-color: rgba(247, 234, 234, 0.589);
 display: flex;
 flex-direction: column;
 position: relative;
 overflow: hidden;
}

.last-articles .blog-swiper .card::before {
 content: "";
 height: 100px;
 width: 100px;
 position: absolute;
 top: -20%;
 left: -12%;
 border-radius: 50%;
 border: 35px solid rgba(255, 255, 255, 24%);
 transition: all .8s ease;
 filter: blur(.5rem);
 z-index: 5;
 pointer-events: none;
}

.last-articles .blog-swiper .text {
 flex-grow: 1;
 padding: 15px;
 display: flex;
 flex-direction: column;
 color: aliceblue;
 font-weight: 900;
 font-size: 1.2em;
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
}
.last-articles .blog-swiper .text::after { 
 background: rgba(0, 0, 0, 0.2); 
}
.last-articles .blog-swiper .text::before {
 background: rgba(0, 0, 0, 0.3);
 z-index: 2;
}
.last-articles .blog-swiper .text .title {
 bottom: 7%;
 right: 5%;
 z-index: 3;
}
html[lang="en"] .last-articles .blog-swiper .text .title {
 direction: ltr;
 padding-left: .5rem;
}
.last-articles .blog-swiper .subtitle {
 font-size: .6em;
 font-weight: 300;
 color: rgba(240, 248, 255, 0.691);
}

.last-articles .blog-swiper .info {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin: 0px auto;
 padding: .3rem !important;
 flex: unset;
 height: auto !important;
 width: 250px;
 /* border-radius: 0px 0px 15px 15px; */
 overflow: hidden;
 background: transparent;
 color: var(--pink-color);
}
.last-articles .blog-swiper .info i {
 color: var(--secondary-color);
 margin-right: .4rem;
}
.last-articles .blog-swiper .card:hover::before {
 width: 190px;
 height: 190px;
 top: -19%;
 left: 62%;
 filter: blur(0rem);
}
.photo-overlay::after {
content: "";
background: rgba(0, 0, 0, 0.2);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
}


@media (max-width: 768px) {
 .heroo .text {
 text-align: center;
 }
 .arrow-icon {
 right: -12px;
 }
 .ivf-points li {
 padding-left: 0px;
 padding-right: 20px;
 }
}
.title-nav {
 display: none;
}

@media (max-width: 1000px) {
 .heroo .text {
 text-align: center;
 }
 .heroo .button,
 .heroo .example-1 {
 margin: 0px auto;
 }
 .heroo .example-1 {
 justify-content: center;
 margin-top: 2rem;
 }
 .nav-item {
 transform: none !important;
 }
 .logo {
 display: none;
 }
 .nav.active {
 padding: 1rem;

 }
 .title-nav {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 100%;
 }
 .title-nav .icon-x {
 padding: .3rem;
 color: var(--pink-color);
 cursor: pointer;
 }
 .title-nav .t-n {
 color: var(--pink-color);
 margin-right: 10px;
 }

}






/* start gallery */

/* gallery */
section.gallery-main,
section.gallery-main * {
 direction: rtl;
}
.gallery-main .popup-photo {
 width: 100%;
 height: 100%;
 background-color: #0000005e;
 display: flex;
 justify-content: center;
 align-items: center;
 position: fixed;
 top: 0;
 left: 0;
 user-select: none;
 -webkit-user-select: none;
 z-index: 4;
}
.display-none {
 display: none !important;
}
.gallery-main .popup-photo button {
 width: 70px;
 height: 45px;
 border-radius: 20px;
 background: var(--main-color);
 color: #fff;
 font-size: 30px;
 position: absolute;
 cursor: pointer;
 border: none;
 transition: 0.2s;
}
.gallery-main .popup-photo .left-btn {
 left: 10%;
 box-shadow: -2.5px 2px 1px;
}
.gallery-main .popup-photo .right-btn {
 right: 10%;
 box-shadow: 2.5px 2px 1px;
}
.gallery-main .popup-photo .right-btn:hover {
 transform: translateX(8px);
}
.gallery-main .popup-photo .left-btn:hover {
 transform: translateX(-8px);
}
.gallery-main .popup-photo .show-image {
 height: 75%;
 max-width: 89%;
 border: 1px solid var(--main-color);
 border-radius: 2px;
}
.gallery-main .popup-photo .show-image .description {
 display: none;
}
.gallery-main .popup-photo .show-image img {
 width: 100%;
 height: 100%;
 object-fit: contain;
 border-radius: 15px;
}

.group {
 display: flex;
 justify-content: center;
 align-items: center;
 width: fit-content;
 margin: 0 auto;
}
.group .item {
 background-color: #282828;
 color: white;
 padding: 12px 0px;
 width: 112px;
 border: none;
 cursor: pointer;
 font-size: 16px;
 text-decoration: none;
 flex: 1;
 text-align: center;
 border-radius: 0;
 position: relative;
}
.group .item.left {
 border-top-left-radius: 18px;
 border-bottom-left-radius: 18px;
}
.group .item.right {
 border-top-right-radius: 18px !important;
 border-bottom-right-radius: 18px !important;
}
.group .item.active {
 background: var(--pink-color);
}
section.gallery-main .gallery-title {
 display: flex;
 justify-content: center;
 align-items: center;
}
section.gallery-main .gallery-title h2 {
 font-size: 30px;
 font-family: "ash-font";
}

section.gallery-main {
 width: 100%;
 margin-bottom: 0px !important;
 background-color: transparent;
 margin-top: 5rem;
}


.gallery-main .gallery-body .gallery-image {
 /* max-width: 30%; */
 /* min-width: 30%; */
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: hidden;
 /* flex-grow: 1; */
 /* height: 400px; */
 margin: 1rem 0.6rem;
 cursor: pointer;
 border: 2px solid var(--main-color);
 border-radius: 15px;
 position: relative; 
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.gallery-main .gallery-body .gallery-image:hover {
 z-index: 4;
}
.gallery-main .gallery-body .gallery-image:hover img {
 transform: scale(1.35);
 -webkit-transform: scale(1.35);
}
.gallery-main .gallery-body .gallery-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.35s;
 border-radius: 15px;
 height: 500px;
 object-fit: cover;
}
@media (max-width: 768px) {
 .gallery-main .gallery-body .gallery-image {
 width: 95%;
 }
 .gallery-main .gallery-body .gallery-image img {
 width: 100%;
 }
}
@media (min-width: 769px) {
 .gallery-main .gallery-body .gallery-image {
 width: calc((100% / 3) - 3rem);
 }
 .gallery-main .gallery-body .gallery-image img {
 width: 100%;
 }
}
.gallery-main .gallery-body,
.gallery-main .vidoes {
 width: 100%;
 max-width: 100%;
 display: flex;
 flex-wrap: wrap;
 box-sizing: border-box;
 padding: 0rem;
 justify-content: center;
 align-items: center;
 overflow-x: hidden;
 padding-top: 0rem;
 /* transform: scale(0);
 opacity: 0;
 transition: transform 1s ease, opacity .4s ease; */
 gap: 1rem;
 /* position: absolute;
 top: 0;
 left: 0; */
}
.gallery-main .vidoes {
 margin-bottom: 3rem;
}
.gallery-main .sec-gallary,
.gallery-main .sec-videos {
 transform: scale(0);
 opacity: 0;
 transition: transform 1s ease, opacity .4s ease;
 position: absolute;
 top: 0;
 left: 0;
}
.gallery-main .vidoes {
 z-index: 5;
}
.gallery-show {
 position: relative !important;
 transform: scale(1) !important;
 opacity: 1 !important;
}
.gallery-main .vidoes .item {
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 18px;
 color: #333;
 border-radius: 10px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 width: 95%;
 overflow: hidden;
 position: relative;
 height: 668px;
}
.gallery-main .vidoes .item .box-img {
 position: absolute;
 width: 100%;
 height: 100%;
 background: transparent;
 z-index: 3;
}
@media (min-width: 768px) {
 .gallery-main .vidoes .item {
 width: 50%;
 }
 .gallery-main .gallery-body,
 .gallery-main .vidoes {
 padding: 0px 4rem;
 }
}
@media (min-width: 992px) {
 .gallery-main .vidoes .item {
 width: calc((100% / 3) - 1rem);
 }
 .gallery-main .gallery-body,
 .gallery-main .vidoes {
 padding: 0px 5rem;
 }
}
.gallery-main .vidoes .item .title {
 width: 100%;
 padding: 1rem .7rem;
 position: absolute;
 bottom: 0%;
 left: 50%;
 transform: translateX(-50%);
 color: #ffffff;
 font-weight: bold;
 z-index: 4;
 pointer-events: none;
 background: #00000061;
}
.gallery-main .vidoes .item video {
 /* display: none; */
}


@media (max-width: 768px) {
 .ivf-slogan {
 margin-right: 0px;
 }
 
}


@media (min-width: 768px) {
 .doctor-main-shape img[src="/assets/img/dr/dr-6.webp"] {
 position: relative;
 left: 66px;

 }
}

#services .swiper-container {
 width: 96%;
}

.doctor-reels {
 background: #fffeff;
 margin-top: 4rem;
}

.doctor-reels h2 {
 padding-top: 2rem;
}



/* ------- Osmo [https://osmo.supply/] ------- */
/* Osmo UI: https://slater.app/10324/23333.css */

html {
--color-black : #000;
--color-light : #fff;
--container-padding : 2em;
}


body {
/* background-color: var(--color-black); */
color: var(--color-light);
/* font-size: var(--size-font); */
/* font-family: arial, sans-serif; */
}

.cloneable {
padding: var(--container-padding);
padding-top: 3rem;
padding-bottom: 3rem;
justify-content: center;
align-items: center;
/* min-height: 100vh; */
display: flex;
position: relative;
font-size: 1.1vw;
}

.cloneable .tab-container {
grid-column-gap: 3em;
grid-row-gap: 3em;
flex-flow: column;
justify-content: space-between;
align-items: flex-start;
min-height: 100%;
padding-top: 0;
padding-bottom: 0;
padding-right: 2.5em;
display: flex;
}

.cloneable .tab-layout-container {
width: 100%;
max-width: 36em;
height: 100%;
margin-left: auto;
margin-right: 0;
padding-top: 1em;
padding-bottom: 2em;
}

.cloneable .tab-container-bottom {
grid-column-gap: 2em;
grid-row-gap: 2em;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
}

.cloneable .tab-container-top {
grid-column-gap: 2em;
grid-row-gap: 2em;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
}
@media (max-width: 767px) {
 .tab-container-top{
 justify-content: center !important;
 align-items: center !important;
 text-align: center !important;
 }
}

.cloneable .tab-layout-col {
width: 40%;
}

.cloneable .tab-content-wrap {
width: 100%;
min-width: 24em;
position: relative;
}

.cloneable .content-button__bg {
z-index: -1;
background-color: #efeeec;
border-radius: .25em;
position: absolute;
inset: 0%;
}

.cloneable .content-p {
margin: 0;
font-size: 1.25em;
line-height: 1.4;
transform: translate(0px, 1em) !important;
text-align: left;
}

.cloneable .tab-button__bg {
z-index: 0;
background-color: #efeeec0f;
border: 1px solid #efeeec14;
border-radius: .25em;
width: 100%;
height: 100%;
position: absolute;
inset: 0%;
}

.cloneable .tab-content-item {
color: var(--pink-color);
z-index: 1;
grid-column-gap: 1.25em;
grid-row-gap: 1.25em;
visibility: hidden;
flex-flow: column;
display: flex;
position: absolute;
inset: auto 0% 0%;
}

.cloneable .tab-content-item.active {
visibility: visible;
}

.cloneable .tab-layout {
z-index: 1;
grid-row-gap: 3em;
flex-flow: wrap;
width: 100%;
min-height: 37em;
display: flex;
justify-content: space-around;
position: relative;
}

.cloneable .filter-bar {
background-color: var(--pink-color);
border: 1px solid #efeeec14;
border-radius: .5em;
padding: .5em;
display: flex;
z-index: 99;
}

.cloneable .filter-button {
background-color: #0000;
border: 1px solid #efeeec00;
padding: 1.125em 1.5em;
transition: border-color .2s;
position: relative;
cursor: pointer;
}

.cloneable .filter-button.active {
border-color: #efeeec4d;
border-radius: .25em;
}

.cloneable .filter-button__p {
z-index: 1;
font-size: 1.125em;
position: relative;
color:var(--color-light);
}

.cloneable .tab-visual-wrap {
border-radius: .5em;
width: 100%;
height: 42em;
max-height: 80vh;
position: relative;
overflow: hidden;
}

.cloneable .tab-visual-item {
visibility: hidden;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 100%;
display: flex;
position: absolute;
}
.cloneable .tab-visual-item img {
width: 100%;
object-fit: cover;
border-radius: 15px;
}

.cloneable .tab-visual-item.active {
visibility: visible;
}

.cloneable .tab-image {
object-fit: cover;
border-radius: .5em;
width: 100%;
max-width: none;
height: 100%;
}

.cloneable .tab-content__heading {
letter-spacing: -.02em;
margin-top: 0;
margin-bottom: 0;
font-size: 1.75em;
font-weight: 500;
line-height: 1;
}

.cloneable .tab-layout-heading {
margin-top: 0;
margin-bottom: 0;
font-size: 4em;
font-weight: 500;
line-height: 1;
color: var(--secondary-color);
text-align: left;
}

.cloneable .tab-content__button {
color: #131313;
justify-content: center;
align-items: center;
height: 4em;
padding-left: 1.5em;
padding-right: 1.5em;
text-decoration: none;
display: flex;
position: relative;
}


@media (max-width: 767px) {
.tab-layout {
 flex-direction: column;
align-items: center;
}
.cloneable .tab-layout-col {
 width: 95%;
}
.cloneable .tab-layout-container {
 margin-left: auto;
 max-width: unset;
}
.cloneable .tab-layout {
 grid-row-gap: 3em;
}
}





.cloneable {
padding: var(--container-padding);
justify-content: center;
align-items: center;
/* min-height: 100vh; */
display: flex;
position: relative;
font-size: 1.1vw;
}

.cloneable .tab-layout {
flex-flow: wrap; 
width: 100%;
min-height: auto; 
display: flex;
position: relative;
}

.cloneable .tab-layout-col {
width: 50%; 
}

.cloneable .tab-visual-wrap {
border-radius: .5em;
width: 100%;
height: 42em;
max-height: 80vh;
position: relative;
overflow: hidden;
}
@media (max-width: 767px) {
    .cloneable .tab-layout-col .button  {
        margin: 0px auto;
        transform: translateX(-16px);
    }

    .cloneable .tab-layout-container,
    .cloneable .filter-bar {
        /* margin: 0px auto !important; */
    }
}
@media (max-width: 1024px) {
.cloneable {
font-size: 1.5vw; 
}

.cloneable .tab-layout {
flex-direction: column; 
}

.cloneable .tab-layout-col {
width: 100%; 
}

.cloneable .tab-visual-wrap {
height: 50vh; 
}

.cloneable .tab-layout-heading {
font-size: 3em;
}

.cloneable .tab-content__heading {
font-size: 1.5em;
}

.cloneable .content-p {
font-size: 1em;
}
}

@media (max-width: 768px) {
.cloneable {
font-size: 3vw;
padding: 1em;
}

.cloneable .tab-layout-container {
max-width: 100%;
padding: 0.5em;
}

.cloneable .tab-container {
padding-right: 0; 
}

.cloneable .tab-visual-wrap {
height: 40vh; 
}

.cloneable .tab-layout-heading {
font-size: 2em;
text-align: center;
}

.cloneable .filter-bar {
flex-wrap: wrap;
padding: 0.3em;
}

.cloneable .filter-button {
padding: 0.75em 1em; 
font-size: 0.9em;
}

.cloneable .tab-content__button {
height: 3em; 
}

.cloneable .content-p {
font-size: 0.9em;
padding-right: 1em;
transform: translate(0px, .3em) !important;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 94%;
}
}

@media (max-width: 480px) {
.cloneable {
font-size: 4vw;
}

.cloneable .tab-layout-heading {
font-size: 1.5em;
}

.cloneable .tab-content__heading {
font-size: 1.2em;
}

.cloneable .filter-button__p {
font-size: 0.8em;
}

.cloneable .tab-visual-wrap {
height: 30vh; 
}
}




 section.doctor-reels {
  /* background-image: url("/assets/img/Untitled.webp"); */
  background-image: url("/assets/img/still-life-positive-pregnancy-test.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
 }
 section.doctor-reels * {
 z-index: 2;
 }
 section.doctor-reels::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / .2);
  z-index: 1;
 }
 section.doctor-reels h2 {
  color: var(--secondary-color);
  /* color: #ffcfe0; */
  margin-top: 2rem;
  position: relative;
 }
 section.doctor-reels .swiper-reels1 {
  padding-top: 3rem !important;
  padding-bottom: 6rem !important;
 }
 .swiper-slide-active .reel1 {
  transform: scale(1.2);
 }
 .reel1 {
  display: flex;
 justify-content: center;
 align-items: center;
 }

 .box-video {
  overflow: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 220px;
 height: 430px;
 position: relative;
 }
 .iphone-cover1 {
  width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 20;
  
  

 }
 .iphone-cover1.active {
  pointer-events: none !important;
 }
 .box-video video {
  width: 95%;
 height: 95%;
 border-radius: 20px;
 object-fit: cover;
 }


.logo-mobile {
 display: none;
}

@media (max-width: 1000px) {
 .header {
 justify-content: space-between;
 }
 .logo-mobile {
 position: relative;
 display: block;
 
 }
 .logo-mobile img {
 width: 55px;
 }
}
@media (max-width: 500px) {
 .logo-mobile img {
 width: 45px;
 }
}


.patern-bg {
 position: absolute;
 /* width: 100%; */
 width: 100%;
 height: 134%;
 top: -54px;
 left: 50%;
 transform: translateX(-50%);
 background-image: url("/assets/img/مشروع جديد.png");
 /* background-repeat: no-repeat; */
 background-size: 32%;
 background-repeat: repeat;
}

.btr-bg {
 position: absolute;
 /* width: 100%; */
 width: 100%;
 height: 134%;
 top: -54px;
 left: 50%;
 transform: translateX(-50%);
 background-image: url("/assets/img/مشروع جديد.png");
 /* background-repeat: no-repeat; */
 background-size: 50%;
 background-repeat: repeat;
}