:root {
  --primary: #06a3da; /* Primary color */
  --secondary: #f57e57; /* Secondary color */
  --light: #eef9ff; /* Light color */
  --dark: #091e3e; /* Dark color */
}

/* Font weight classes */
h1,
h2,
.font-weight-bold {
  font-weight: 700 !important; /* Bold text */
}

h3,
h4,
.font-weight-semi-bold {
  font-weight: 600 !important; /* Semi-bold text */
}

h5,
h6,
.font-weight-medium {
  font-weight: 500 !important; /* Medium weight text */
}

/* btn styles */
.btn {
  font-family: "Jost", sans-serif; /* Font for btns */
  font-weight: 600; /* Font weight for btns */
  transition: 0.5s; /* Smooth transition effect */
}

/* Primary and secondary btn styles */
.btn-primary,
.btn-secondary {
  color: #ffffff; /* White text color */
}

.btn-primary:hover {
  background: var(--secondary); /* Background color on hover */
  border-color: var(--secondary); /* Border color on hover */
}

.btn-secondary:hover {
  background: var(--primary); /* Background color on hover */
  border-color: var(--primary); /* Border color on hover */
}

/* btn sizes */
.btn-square {
  width: 36px; /* Width for square btns */
  height: 36px; /* Height for square btns */
}

.btn-sm-square {
  width: 28px; /* Width for small square btns */
  height: 28px; /* Height for small square btns */
}

.btn-lg-square {
  width: 46px; /* Width for large square btns */
  height: 46px; /* Height for large square btns */
}

/* Square btn padding and text alignment */
.btn-square,
.btn-sm-square,
.btn-lg-square {
  padding-left: 0; /* No left padding */
  padding-right: 0; /* No right padding */
  text-align: center; /* Center text alignment */
}

/* Spinner styles */
#spinner {
  opacity: 0; /* Hidden spinner by default */
  visibility: hidden; /* Hidden spinner by default */
  transition: opacity 0.5s ease-out, visibility 0s linear 0.5s; /* Transition for visibility and opacity */
  z-index: 99999; /* High z-index to overlay on other content */
}

#spinner.show {
  transition: opacity 0.5s ease-out, visibility 0s linear 0s; /* Transition for showing spinner */
  visibility: visible; /* Make spinner visible */
  opacity: 1; /* Make spinner fully opaque */
}

/* Back to top btn styles */
.back-to-top {
  position: fixed; /* Fixed position on the screen */
  display: none; /* Hidden by default */
  right: 45px; /* Distance from the right edge */
  bottom: 45px; /* Distance from the bottom edge */
  z-index: 99; /* Z-index for stacking context */
}

/* Top shape decoration */
.top-shape::before {
  position: absolute; /* Absolute positioning */
  content: ""; /* Empty content for shape */
  width: 35px; /* Width of the shape */
  height: 100%; /* Full height */
  top: 0; /* Top edge */
  left: -17px; /* Distance from the left edge */
  background: var(--primary); /* Background color */
  transform: skew(40deg); /* Skew transformation */
}

/* Navbar link styles */
.navbar-light .navbar-nav .nav-link {
  font-family: "Jost", sans-serif; /* Font for navbar links */
  padding: 35px 15px; /* Padding for navbar links */
  font-size: 18px; /* Font size for navbar links */
  color: var(--dark); /* Text color */
  outline: none; /* Remove outline */
  transition: 0.5s; /* Smooth transition */
}

/* Sticky navbar link styles */
.sticky-top.navbar-light .navbar-nav .nav-link {
  padding: 20px 15px; /* Reduced padding for sticky navbar */
}

/* Navbar link hover and active state */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--primary); /* Change text color on hover/active */
}

/* Navbar responsiveness */
@media (max-width: 991.98px) {
  .navbar-light .navbar-nav .nav-link,
  .sticky-top.navbar-light .navbar-nav .nav-link {
    padding: 10px 5px; /* Reduced padding for smaller screens */
  }
}

/* Carousel caption styles */
.carousel-caption {
  top: 0; /* Top edge */
  left: 0; /* Left edge */
  right: 0; /* Right edge */
  bottom: 0; /* Bottom edge */
  background: rgba(9, 30, 62, 0.85); /* Dark background with opacity */
  z-index: 1; /* Ensure caption is above carousel images */
  display: flex; /* Flex container */
  flex-direction: column; /* Column layout */
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically */
}

/* Responsive carousel caption */
@media (max-width: 576px) {
  .carousel-caption h5 {
    font-size: 14px; /* Smaller font size for h5 */
    font-weight: 500 !important; /* Medium weight for h5 */
  }

  .carousel-caption h1 {
    font-size: 30px; /* Smaller font size for h1 */
    font-weight: 600 !important; /* Semi-bold weight for h1 */
  }
}

/* Adjust font size for smaller screens */
@media (max-width: 1200px) {
  .carousel-caption h1 {
    font-size: 2.5rem; /* Smaller font size for medium screens */
  }
}

@media (max-width: 992px) {
  .carousel-caption h1 {
    font-size: 2rem; /* Smaller font size for tablets */
  }
}

@media (max-width: 768px) {
  .carousel-caption h1 {
    font-size: 1.5rem; /* Smaller font size for mobile screens */
  }
}

@media (max-width: 576px) {
  .carousel-caption h1 {
    font-size: 1.25rem; /* Smaller font size for very small screens */
  }
}

/* Carousel control styles */
.carousel-control-prev,
.carousel-control-next {
  width: 10%; /* Width for control btns */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 3rem; /* Width of the control icons */
  height: 3rem; /* Height of the control icons */
}

/* Banner styling for larger screens */
@media (min-width: 991.98px) {
  .banner {
    position: relative; /* Relative positioning for banner */
    margin-top: -90px; /* Negative margin to overlap content */
    z-index: 1; /* Ensure banner is above other content */
  }
}

/* Section title decoration */
.section-title h5::before {
  position: absolute; /* Absolute positioning */
  content: ""; /* Empty content for decoration */
  width: 45px; /* Width of the decoration */
  height: 3px; /* Height of the decoration */
  right: -55px; /* Distance from the right edge */
  bottom: 11px; /* Distance from the bottom edge */
  background: var(--primary); /* Primary color background */
}

.section-title h5::after {
  position: absolute; /* Absolute positioning */
  content: ""; /* Empty content for decoration */
  width: 15px; /* Width of the decoration */
  height: 3px; /* Height of the decoration */
  right: -75px; /* Distance from the right edge */
  bottom: 11px; /* Distance from the bottom edge */
  background: var(--secondary); /* Secondary color background */
}

/* Wrapper for 20/20 comparison */
.twentytwenty-wrapper {
  height: 100%; /* Full height */
}

/* Hero header styling */
.hero-header {
  background: linear-gradient(rgba(9, 30, 62, 0.85), rgba(9, 30, 62, 0.85)),
    url(../img/appointment\ img.jpg) center center no-repeat; /* Background image with gradient */
  background-size: cover; /* Cover the entire container */
}

/* Background styling for appointment section */
.bg-appointment {
  background: linear-gradient(rgba(9, 30, 62, 0.85), rgba(9, 30, 62, 0.85)),
    url(../img/SaudiMedicalStaffCarousel1.jpg) center center no-repeat; /* Background image with gradient */
  background-size: cover; /* Cover the entire container */
}

/* Appointment form background styling */
.appointment-form {
  background: rgba(6, 163, 218, 0.7); /* Background color with transparency */
}

/* Transition effects for service and team items */
.service-item img,
.service-item .bg-light,
.service-item .bg-light h5,
.team-item .team-text {
  transition: 0.5s; /* Smooth transition effect */
}

.service-item:hover img {
  transform: scale(1.15); /* Scale image on hover */
}

/* Overlay effects for team and service items */
.team-item .team-text::after,
.service-item .bg-light::after {
  position: absolute; /* Absolute positioning */
  content: ""; /* Empty content for overlay */
  top: 50%; /* Center vertically */
  bottom: 0; /* Bottom edge */
  left: 15px; /* Distance from the left edge */
  right: 15px; /* Distance from the right edge */
  border-radius: 100px / 15px; /* Rounded corners */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); /* Shadow effect */
  opacity: 0; /* Hidden by default */
  transition: 0.5s; /* Smooth transition effect */
  z-index: -1; /* Below content */
}

.team-item:hover .team-text::after,
.service-item:hover .bg-light::after {
  opacity: 1; /* Show overlay on hover */
}

/* Price carousel navigation */
.price-carousel .owl-nav {
  position: absolute; /* Absolute positioning */
  width: calc(100% + 45px); /* Full width with extra space */
  height: 45px; /* Height of navigation */
  top: calc(50% - 22.5px); /* Center vertically */
  left: -22.5px; /* Distance from the left edge */
  display: flex; /* Flex container */
  justify-content: space-between; /* Space out navigation btns */
  opacity: 0; /* Hidden by default */
  transition: 0.5s; /* Smooth transition effect */
}

.price-carousel:hover .owl-nav {
  opacity: 1; /* Show navigation on hover */
}

/* Navigation btn styles in price carousel */
.price-carousel .owl-nav .owl-prev,
.price-carousel .owl-nav .owl-next {
  position: relative; /* Relative positioning */
  width: 45px; /* Width of btns */
  height: 45px; /* Height of btns */
  display: flex; /* Flex container */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  color: #ffffff; /* White text color */
  background: var(--primary); /* Primary color background */
  border-radius: 2px; /* Rounded corners */
  font-size: 22px; /* Font size for icons */
  transition: 0.5s; /* Smooth transition effect */
}

.price-carousel .owl-nav .owl-prev:hover,
.price-carousel .owl-nav .owl-next:hover {
  background: var(--secondary); /* Change background on hover */
}

/* Testimonial section background styling */
.bg-testimonial {
  background: url(../img/testmonial\ 3.jpg) center center no-repeat; /* Background image */
  background-size: cover; /* Cover the entire container */
}

/* Testimonial carousel styling */
.testimonial-carousel {
  background: rgba(6, 163, 218, 0.85); /* Background color with transparency */
}

.testimonial-carousel .owl-nav {
  position: absolute; /* Absolute positioning */
  width: calc(100% + 46px); /* Full width with extra space */
  height: 46px; /* Height of navigation */
  top: calc(50% - 23px); /* Center vertically */
  left: -23px; /* Distance from the left edge */
  display: flex; /* Flex container */
  justify-content: space-between; /* Space out navigation btns */
  z-index: 1; /* Ensure navigation is above other content */
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
  position: relative; /* Relative positioning */
  width: 46px; /* Width of btns */
  height: 46px; /* Height of btns */
  display: flex; /* Flex container */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  color: #ffffff; /* White text color */
  background: var(--primary); /* Primary color background */
  border-radius: 2px; /* Rounded corners */
  font-size: 22px; /* Font size for icons */
  transition: 0.5s; /* Smooth transition effect */
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
  background: var(--secondary); /* Change background on hover */
}

.testimonial-carousel .owl-item img {
  width: 120px; /* Width of images in carousel */
  height: 120px; /* Height of images in carousel */
}

/* Carousel inner container */
.carousel-inner {
  position: relative; /* Relative positioning */
  width: 100%; /* Full width */
  overflow: hidden; /* Hide overflow */
  height: 100vh; /* Full viewport height */
}

/* Carousel item styling */
.carousel-item {
  height: 100vh; /* Full viewport height */
}

/* Carousel image styling */
.carousel-image {
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  object-fit: cover; /* Cover container without distortion */
  display: block; /* Block display */
}

/* Card image styling */
.card-img-top {
  border-radius: 50px; /* Rounded corners */
  padding: 20px; /* Padding around image */
  height: 250px; /* Fixed height */
  object-fit: cover; /* Cover container without distortion */
}

/* Card styling */
.card {
  border-radius: 30px; /* Rounded corners */
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
    /* Shadow effects */ rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
    rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  display: flex; /* Flex container */
}

/* Card body styling */
.card-body {
  padding: 25px; /* Padding inside card */
  margin-top: -15px; /* Negative margin to adjust position */
  max-height: 200px; /* Maximum height */
  display: grid; /* Grid layout */
  align-content: start; /* Align content to start */
  justify-items: center; /* Center items */
  text-align: center; /* Center text */
}

/* Heading color */
h3,
h5 {
  color: rgb(0, 91, 228); /* Blue color for headings */
}

/* Column styling */
.col {
  display: grid; /* Grid layout */
}

/* Custom card layout */
.card-custom {
  display: grid; /* Grid layout */
  grid-template-rows: auto 1fr auto; /* Stack image, content, and btn */
  height: 100%; /* Full height */
}

/* Section 4 styling */
.section4 {
  width: 100%; /* Full width */
  min-height: 100vh; /* Minimum height of viewport */
}

/* Container 7 styling */
.conatiner7 {
  width: 80%; /* Width of container */
  display: block; /* Block display */
  margin: auto; /* Center container */
  padding-top: 100px; /* Padding on top */
}

/* Content section 7 styling */
.content-section7 {
  float: left; /* Float to the left */
  width: 55%; /* Width of content section */
}

/* Image section styling */
.img-sect {
  float: right; /* Float to the right */
  width: 40%; /* Width of image section */
}

.img-sect img {
  width: 100%; /* Full width */
  height: auto; /* Auto height */
}

/* Title and content styling for section 7 */
.content-section7 title {
  text-transform: uppercase; /* Uppercase text */
  font-size: 28px; /* Font size */
}

.content-section7 content3 p {
  margin-top: 10px; /* Margin on top */
  font-family: sans-serif; /* Sans-serif font */
  font-size: 17px; /* Font size */
  line-height: 1.5; /* Line height */
}

.content-section7 social {
  margin: 40px; /* Margin around social section */
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .navbar {
    width: 100%; /* Full width for navbar */
    padding-left: 0; /* Remove left padding */
    padding-right: 0; /* Remove right padding */
  }

  .navbar-nav {
    display: flex; /* Flex container */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items */
    width: 100%; /* Full width */
  }

  .navbar-light .navbar-nav .nav-link {
    padding: 15px 10px; /* Adjust padding for smaller screens */
    text-align: center; /* Center text */
    width: 100%; /* Full width */
  }

  .conatiner7 {
    width: 80%; /* Width of container */
    display: block; /* Block display */
    margin: auto; /* Center container */
    padding-top: 50px; /* Padding on top */
  }

  .content-section7 {
    float: none; /* Remove float */
    width: 100%; /* Full width */
    display: block; /* Block display */
    margin: auto; /* Center container */
  }

  .img-sect {
    float: none; /* Remove float */
    width: 100%; /* Full width */
  }

  .img-sect img {
    width: 100%; /* Full width */
    height: auto; /* Auto height */
    display: block; /* Block display */
    margin-top: 40px; /* Margin on top */
  }

  .content-section7 title {
    text-align: center; /* Center text */
    font-size: 19px; /* Font size */
  }

  .content-section7 social {
    text-align: center; /* Center text */
  }

  .content-section7 soctitle {
    text-align: center; /* Center text */
  }

  .box2 {
    height: 60%; /* Height of box 2 */
  }

  .box1 {
    width: 516px; /* Width of box 1 */
    height: 300px; /* Height of box 1 */
  }
}

.testimonial-Letter p {
  color: white;
  font-weight: 500;
  font-style: italic;
}

.partners {
  display: flex;
  justify-content: center;
  color: white;
  text-decoration: none;
}

.partners .btn {
  background: var(--primary); /* Background color for the btn */
  border: none; /* Remove default border */
  color: white; /* Text color */
  padding: 10px 20px; /* btn padding */
  font-size: 16px; /* Font size */
  font-weight: 600;
  border-radius: 5px; /* Rounded corners */
  transition: background-color 0.3s ease; /* Smooth transition */
}

.partners:hover .btn {
  background: var(--secondary); /* Background color on hover */
}

.pharmix {
  object-fit: contain;
}

.prodcutsImage {
  object-fit: contain;
}

/* Extra Small Devices (Phones, up to 576px) */
@media (max-width: 576px) {
  .testimonial-Letter p {
    font-size: 14px; /* Smaller font size for small screens */
  }

  .partners .btn {
    padding: 8px 16px; /* Adjust padding */
    font-size: 14px; /* Smaller font size */
  }
}

/* Small Devices (Tablets, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .testimonial-Letter p {
    font-size: 16px; /* Adjust font size */
  }

  .partners .btn {
    padding: 10px 18px; /* Adjust padding */
    font-size: 15px; /* Adjust font size */
  }
}

/* Medium Devices (Tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .testimonial-Letter p {
    font-size: 18px; /* Adjust font size */
  }

  .partners .btn {
    padding: 12px 20px; /* Adjust padding */
    font-size: 16px; /* Adjust font size */
  }
}

/* Large Devices (Desktops, 992px and up) */
@media (min-width: 992px) {
  .testimonial-Letter p {
    font-size: 20px; /* Larger font size for larger screens */
  }

  .partners .btn {
    padding: 12px 24px; /* Adjust padding */
    font-size: 18px; /* Larger font size */
  }
}

.map-link {
  color: var(--light);
  text-decoration: none;
  font-weight: bold;
  transform: translateX(5px); /* Slightly shift the link to the right */
  transition: color 0.3s ease, transform 0.3s ease, text-decoration 0.3s ease;
}

.map-link:hover {
  color: var(--secondary);
  transition: color 0.3s ease, transform 0.3s ease, text-decoration 0.3s ease;
  transform: translateX(5px); /* Slightly shift the link to the right */
}

/* Base style for popular links */
.popLinks {
  transition: color 0.3s ease, transform 0.3s ease, text-decoration 0.3s ease;
  text-decoration: none;
}

.popLinks:hover {
  transition: color 0.3s ease, transform 0.3s ease, text-decoration 0.3s ease;
  text-decoration: none;
  color: var(--secondary);
}

/* Hover effect for popular links */
.popLinks:hover {
  color: var(
    --secondary
  ); /* Change to primary color or any color of your choice */
  text-decoration: none; /* Underline text on hover */
  transform: translateX(5px); /* Slightly shift the link to the right */
}

.popLinks i {
  transition: color 0.3s ease;
}

.popLinks:hover i {
  color: var(--secondary); /* Change icon color on hover */
}