/* ============================================================ */
/*
 * Mobile-Specific Stylesheet
 * File: mobile-functions.css
 * Path: /styles/mobile-functions.css
 * Purpose: This file contains all styles specifically for mobile and tablet devices (1199px and below).
 *          It controls responsive layout, typography, mobile-only components, and provides device-specific overrides.
 *          All styles are optimized for Flexbox and responsive design across desktop, laptop, tablet, and mobile devices.
 */
/* ============================================================ */

/* ============================================================ */
/* 💡 Block Separator: Global & Typography (Responsive) */
/* ============================================================ */
@media (max-width: 575px) {
  h2 {
    font-size: 24px; /* Adjusted for small mobile devices */
    /* Console Log: Applying font-size 24px to h2 for screens <= 575px */
  }
}

@media (max-width: 575px) {
  h3 {
    font-size: 26px; /* Adjusted for small mobile devices */
    /* Console Log: Applying font-size 26px to h3 for screens <= 575px */
  }
}

/* ============================================================ */
/* 💡 Block Separator: Helper Classes (Responsive) */
/* ============================================================ */
@media (max-width: 767px) {
  .fz-16 { font-size: 14px; /* Console Log: Reduced font size for screens <= 767px */ }
  .fz-18 { font-size: 16px; /* Console Log: Reduced font size for screens <= 767px */ }
  .fz-20 { font-size: 18px; /* Console Log: Reduced font size for screens <= 767px */ }
  .fz-24 { font-size: 20px; /* Console Log: Reduced font size for screens <= 767px */ }
  .fz-26 { font-size: 22px; /* Console Log: Reduced font size for screens <= 767px */ }
  .fz-30 { font-size: 26px; /* Console Log: Reduced font size for screens <= 767px */ }
  .fz-32 { font-size: 28px; /* Console Log: Reduced font size for screens <= 767px */ }
}

@media (max-width: 991px) { .p-24 { padding: 20px; /* Console Log: Adjusted padding for screens <= 991px */ } }
@media (max-width: 575px) { .p-24 { padding: 15px; /* Console Log: Further reduced padding for screens <= 575px */ } }

.pt-130 { padding-top: 130px; /* Console Log: Default padding-top for larger screens */ }
@media (max-width: 1199px) { .pt-130 { padding-top: 100px; /* Console Log: Reduced padding-top for screens <= 1199px */ } }
@media (max-width: 991px) { .pt-130 { padding-top: 80px; /* Console Log: Further reduced padding-top for screens <= 991px */ } }

.pb-130 { padding-bottom: 130px; /* Console Log: Default padding-bottom for larger screens */ }
@media (max-width: 1199px) { .pb-130 { padding-bottom: 100px; /* Console Log: Reduced padding-bottom for screens <= 1199px */ } }
@media (max-width: 991px) { .pb-130 { padding-bottom: 80px; /* Console Log: Further reduced padding-bottom for screens <= 991px */ } }

.pt-120 { padding-top: 120px; /* Console Log: Default padding-top for larger screens */ }
@media (max-width: 1199px) { .pt-120 { padding-top: 100px; /* Console Log: Reduced padding-top for screens <= 1199px */ } }
@media (max-width: 991px) { .pt-120 { padding-top: 80px; /* Console Log: Further reduced padding-top for screens <= 991px */ } }

.pb-120 { padding-bottom: 120px; /* Console Log: Default padding-bottom for larger screens */ }
@media (max-width: 1199px) { .pb-120 { padding-bottom: 100px; /* Console Log: Reduced padding-bottom for screens <= 1199px */ } }
@media (max-width: 991px) { .pb-120 { padding-bottom: 80px; /* Console Log: Further reduced padding-bottom for screens <= 991px */ } }

.pt-110 { padding-top: 110px; /* Console Log: Default padding-top for larger screens */ }
@media (max-width: 1199px) { .pt-110 { padding-top: 100px; /* Console Log: Reduced padding-top for screens <= 1199px */ } }
@media (max-width: 991px) { .pt-110 { padding-top: 80px; /* Console Log: Further reduced padding-top for screens <= 991px */ } }

.pb-110 { padding-bottom: 110px; /* Console Log: Default padding-bottom for larger screens */ }
@media (max-width: 1199px) { .pb-110 { padding-bottom: 100px; /* Console Log: Reduced padding-bottom for screens <= 1199px */ } }
@media (max-width: 991px) { .pb-110 { padding-bottom: 80px; /* Console Log: Further reduced padding-bottom for screens <= 991px */ } }

.pt-90 { padding-top: 90px; /* Console Log: Default padding-top for larger screens */ }
@media (max-width: 991px) { .pt-90 { padding-top: 80px; /* Console Log: Reduced padding-top for screens <= 991px */ } }

.pb-90 { padding-bottom: 90px; /* Console Log: Default padding-bottom for larger screens */ }
@media (max-width: 991px) { .pb-90 { padding-bottom: 80px; /* Console Log: Reduced padding-bottom for screens <= 991px */ } }

.pt-80 { padding-top: 80px; /* Console Log: Default padding-top for larger screens */ }
@media (max-width: 991px) { .pt-80 { padding-top: 60px; /* Console Log: Reduced padding-top for screens <= 991px */ } }

.pb-80 { padding-bottom: 80px; /* Console Log: Default padding-bottom for larger screens */ }
@media (max-width: 991px) { .pb-80 { padding-bottom: 60px; /* Console Log: Reduced padding-bottom for screens <= 991px */ } }

.pt-60 { padding-top: 60px; /* Console Log: Default padding-top for larger screens */ }
@media (max-width: 991px) { .pt-60 { padding-top: 50px; /* Console Log: Reduced padding-top for screens <= 991px */ } }

.pb-60 { padding-bottom: 60px; /* Console Log: Default padding-bottom for larger screens */ }
@media (max-width: 991px) { .pb-60 { padding-bottom: 50px; /* Console Log: Reduced padding-bottom for screens <= 991px */ } }

.pt-40 { padding-top: 40px; /* Console Log: Default padding-top for larger screens */ }
@media (max-width: 991px) { .pt-40 { padding-top: 30px; /* Console Log: Reduced padding-top for screens <= 991px */ } }

.pb-40 { padding-bottom: 40px; /* Console Log: Default padding-bottom for larger screens */ }
@media (max-width: 991px) { .pb-40 { padding-bottom: 30px; /* Console Log: Reduced padding-bottom for screens <= 991px */ } }

.pt-30 { padding-top: 30px; /* Console Log: Default padding-top for larger screens */ }
@media (max-width: 991px) { .pt-30 { padding-top: 20px; /* Console Log: Reduced padding-top for screens <= 991px */ } }

.pb-30 { padding-bottom: 30px; /* Console Log: Default padding-bottom for larger screens */ }
@media (max-width: 991px) { .pb-30 { padding-bottom: 20px; /* Console Log: Reduced padding-bottom for screens <= 991px */ } }

.pt-24 { padding-top: 24px; /* Console Log: Default padding-top for larger screens */ }
@media (max-width: 991px) { .pt-24 { padding-top: 15px; /* Console Log: Reduced padding-top for screens <= 991px */ } }

.pb-24 { padding-bottom: 24px; /* Console Log: Default padding-bottom for larger screens */ }
@media (max-width: 991px) { .pb-24 { padding-bottom: 15px; /* Console Log: Reduced padding-bottom for screens <= 991px */ } }

.pt-20 { padding-top: 20px; /* Console Log: Default padding-top for larger screens */ }
@media (max-width: 991px) { .pt-20 { padding-top: 15px; /* Console Log: Reduced padding-top for screens <= 991px */ } }

.pb-20 { padding-bottom: 20px; /* Console Log: Default padding-bottom for larger screens */ }
@media (max-width: 991px) { .pb-20 { padding-bottom: 15px; /* Console Log: Reduced padding-bottom for screens <= 991px */ } }

.pt-16 { padding-top: 16px; /* Console Log: Default padding-top for larger screens */ }
@media (max-width: 991px) { .pt-16 { padding-top: 10px; /* Console Log: Reduced padding-top for screens <= 991px */ } }

.pb-16 { padding-bottom: 16px; /* Console Log: Default padding-bottom for larger screens */ }
@media (max-width: 991px) { .pb-16 { padding-bottom: 10px; /* Console Log: Reduced padding-bottom for screens <= 991px */ } }

.pt-15 { padding-top: 15px; /* Console Log: Default padding-top for larger screens */ }
@media (max-width: 991px) { .pt-15 { margin-top: 10px; /* Console Log: Adjusted padding-top to margin-top for screens <= 991px */ } }

.pb-15 { padding-bottom: 15px; /* Console Log: Default padding-bottom for larger screens */ }
@media (max-width: 991px) { .pb-15 { margin-bottom: 10px; /* Console Log: Adjusted padding-bottom to margin-bottom for screens <= 991px */ } }

.mt-120 { margin-top: 120px; /* Console Log: Default margin-top for larger screens */ }
@media (max-width: 1199px) { .mt-120 { margin-top: 100px; /* Console Log: Reduced margin-top for screens <= 1199px */ } }
@media (max-width: 991px) { .mt-120 { margin-top: 80px; /* Console Log: Further reduced margin-top for screens <= 991px */ } }

.mb-120 { margin-bottom: 120px; /* Console Log: Default margin-bottom for larger screens */ }
@media (max-width: 1199px) { .mb-120 { margin-bottom: 100px; /* Console Log: Reduced margin-bottom for screens <= 1199px */ } }
@media (max-width: 991px) { .mb-120 { margin-bottom: 80px; /* Console Log: Further reduced margin-bottom for screens <= 991px */ } }

.mt-100 { margin-top: 100px; /* Console Log: Default margin-top for larger screens */ }
@media (max-width: 1199px) { .mt-100 { margin-top: 90px; /* Console Log: Reduced margin-top for screens <= 1199px */ } }
@media (max-width: 991px) { .mt-100 { margin-top: 80px; /* Console Log: Further reduced margin-top for screens <= 991px */ } }

.mb-100 { margin-bottom: 100px; /* Console Log: Default margin-bottom for larger screens */ }
@media (max-width: 1199px) { .mb-100 { margin-bottom: 90px; /* Console Log: Reduced margin-bottom for screens <= 1199px */ } }
@media (max-width: 991px) { .mb-100 { margin-bottom: 80px; /* Console Log: Further reduced margin-bottom for screens <= 991px */ } }

.mt-80 { margin-top: 80px; /* Console Log: Default margin-top for larger screens */ }
@media (max-width: 991px) { .mt-80 { margin-top: 60px; /* Console Log: Reduced margin-top for screens <= 991px */ } }

.mb-80 { margin-bottom: 80px; /* Console Log: Default margin-bottom for larger screens */ }
@media (max-width: 991px) { .mb-80 { margin-bottom: 60px; /* Console Log: Reduced margin-bottom for screens <= 991px */ } }

.mt-60 { margin-top: 60px; /* Console Log: Default margin-top for larger screens */ }
@media (max-width: 991px) { .mt-60 { margin-top: 50px; /* Console Log: Reduced margin-top for screens <= 991px */ } }

.mb-60 { margin-bottom: 60px; /* Console Log: Default margin-bottom for larger screens */ }
@media (max-width: 991px) { .mb-60 { margin-bottom: 50px; /* Console Log: Reduced margin-bottom for screens <= 991px */ } }

.mt-50 { margin-top: 52px; /* Console Log: Default margin-top for larger screens */ }
@media (max-width: 991px) { .mt-50 { margin-top: 40px; /* Console Log: Reduced margin-top for screens <= 991px */ } }

.mb-50 { margin-bottom: 52px; /* Console Log: Default margin-bottom for larger screens */ }
@media (max-width: 991px) { .mb-50 { margin-bottom: 40px; /* Console Log: Reduced margin-bottom for screens <= 991px */ } }

.mt-40 { margin-top: 40px; /* Console Log: Default margin-top for larger screens */ }
@media (max-width: 991px) { .mt-40 { margin-top: 30px; /* Console Log: Reduced margin-top for screens <= 991px */ } }

.mb-40 { margin-bottom: 40px; /* Console Log: Default margin-bottom for larger screens */ }
@media (max-width: 991px) { .mb-40 { margin-bottom: 30px; /* Console Log: Reduced margin-bottom for screens <= 991px */ } }

.mt-30 { margin-top: 30px; /* Console Log: Default margin-top for larger screens */ }
@media (max-width: 991px) { .mt-30 { margin-top: 20px; /* Console Log: Reduced margin-top for screens <= 991px */ } }

.mb-30 { margin-bottom: 30px; /* Console Log: Default margin-bottom for larger screens */ }
@media (max-width: 991px) { .mb-30 { margin-bottom: 20px; /* Console Log: Reduced margin-bottom for screens <= 991px */ } }

.mt-24 { margin-top: 24px; /* Console Log: Default margin-top for larger screens */ }
@media (max-width: 991px) { .mt-24 { margin-top: 15px; /* Console Log: Reduced margin-top for screens <= 991px */ } }
@media (max-width: 767px) { .mt-24 { margin-top: 10px; /* Console Log: Further reduced margin-top for screens <= 767px */ } }

.mb-24 { margin-bottom: 24px; /* Console Log: Default margin-bottom for larger screens */ }
@media (max-width: 991px) { .mb-24 { margin-bottom: 15px; /* Console Log: Reduced margin-bottom for screens <= 991px */ } }

.mt-20 { margin-top: 20px; /* Console Log: Default margin-top for larger screens */ }
@media (max-width: 991px) { .mt-20 { margin-top: 15px; /* Console Log: Reduced margin-top for screens <= 991px */ } }

.mb-20 { margin-bottom: 20px; /* Console Log: Default margin-bottom for larger screens */ }
@media (max-width: 991px) { .mb-20 { margin-bottom: 15px; /* Console Log: Reduced margin-bottom for screens <= 991px */ } }

.mt-16 { margin-top: 16px; /* Console Log: Default margin-top for larger screens */ }
@media (max-width: 991px) { .mt-16 { margin-top: 10px; /* Console Log: Reduced margin-top for screens <= 991px */ } }

.mb-16 { margin-bottom: 16px; /* Console Log: Default margin-bottom for larger screens */ }
@media (max-width: 991px) { .mb-16 { margin-bottom: 10px; /* Console Log: Reduced margin-bottom for screens <= 991px */ } }

.mt-15 { margin-top: 15px; /* Console Log: Default margin-top for larger screens */ }
@media (max-width: 991px) { .mt-15 { margin-top: 10px; /* Console Log: Reduced margin-top for screens <= 991px */ } }

.mb-15 { margin-bottom: 15px; /* Console Log: Default margin-bottom for larger screens */ }
@media (max-width: 991px) { .mb-15 { margin-bottom: 10px; /* Console Log: Reduced margin-bottom for screens <= 991px */ } }

@media (min-width: 992px) {
  .img__ending { justify-content: flex-end; /* Console Log: Aligning images to flex-end for screens >= 992px */ }
}

/* ============================================================ */
/* 💡 Block Separator: Section Title (Responsive) */
/* ============================================================ */
@media (max-width: 1199px) { .section__title h2 { font-size: 38px; /* Console Log: Reduced section title font-size for screens <= 1199px */ } }
@media (max-width: 767px) { .section__title h2 { font-size: 36px; /* Console Log: Reduced section title font size for screens <= 767px */ } }
@media (max-width: 575px) { .section__title h2 { font-size: 32px; /* Console Log: Reduced section title font size for screens <= 575px */ } }
@media (max-width: 500px) { .section__title h2 { font-size: 28px; /* Console Log: Reduced section title font size for screens <= 500px */ } }
@media (max-width: 432px) { .section__title h2 { font-size: 22px; /* Console Log: Reduced section title font size for screens <= 432px */ } }
@media (max-width: 375px) { .section__title h2 { font-size: 22px; /* Console Log: Reduced section title font size for screens <= 375px */ } }
@media (max-width: 200px) { .section__title h2 { font-size: 18px; /* Console Log: Reduced section title font size for screens <= 200px */ } }

/* ============================================================ */
/* 💡 Block Separator: Header & Main Menu (Responsive) */
/* ============================================================ */
@media (max-width: 991px) {
  .header__top { display: none; /* Console Log: Hiding header top for screens <= 991px */ }
  .header__two .logo__menuadjust .main__logo { display: block; /* Console Log: Displaying main logo for screens <= 991px */ }
  .main-menu {
    position: fixed;
    top: 55px;
    width: 100%;
    left: 0;
    display: block !important; /* Console Log: Ensuring main menu is block for mobile view */
    margin-top: 20px;
    z-index: 999;
    padding: 15px 15px;
    transition: all 0.4s !important; /* Console Log: Smooth transition for menu toggle */
    transform-origin: top;
    max-height: calc(100vh - 130px); /* Console Log: Limiting menu height to viewport */
    background: #2e0c5e; /* Primary Purple: #2e0c5e - Updated per user request for mobile menu background */
    overflow-y: auto; /* Console Log: Enabling scroll for long menus */
  }
  .main-menu:not(.active) {
    position: fixed;
    display: none !important; /* Console Log: Hiding inactive menu */
  }
  .main-menu li {
    width: 100%;
    border-radius: 2px;
    border-bottom: 1px solid rgba(170, 181, 200, 0.5); /* Light Gray with 50% opacity */
    /* Console Log: Adding border to menu items */
  }
  .main-menu li a {
    display: block;
    padding: 8px 10px 6px; /* Console Log: Adjusting padding for menu links */
  }
  .main-menu li .sub-menu { display: none; /* Console Log: Hiding sub-menu by default */ }
  .main-menu li .sub-menu li { border-bottom: unset; /* Console Log: Removing border for sub-menu items */ }
  .main-menu .active a { color: var(--white); /* White: #ffffff */ /* Console Log: Setting active link color */ }
}

/* ============================================================ */
/* 💡 Block Separator: Search and Sidebar (Responsive & Core Component) */
/* ============================================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .search-wrap .search-field-holder { width: 70%; /* Console Log: Adjusting search field width for screens 768px-991px */ }
}
@media (max-width: 575px) {
  .search-wrap .search-field-holder { width: 80%; /* Console Log: Adjusting search field width for screens <= 575px */ }
  .search-wrap .main-search-input { height: 50px; padding: 0 0; line-height: 50px; font-size: 18px; /* Console Log: Styling search input for small screens */ }
  input.main-search-input::placeholder { font-size: 18px; /* Console Log: Adjusting placeholder font size */ }
}

.side_bar {
  position: fixed;
  top: 0;
  right: 0px;
  width: 450px;
  height: 100%;
  background-color: var(--theme); /* Primary Purple: #2e0c5e */
  padding: 40px;
  padding-top: 45px;
  z-index: 9999;
  transition: all 0.3s ease-in-out; /* Console Log: Smooth transition for sidebar toggle */
  display: flex;
  flex-direction: column; /* Console Log: Using Flexbox for sidebar layout */
}
.side_bar p.text-justify {
  color: var(--white); /* White: #ffffff */ /* Console Log: Setting justified text color */
}
.side_bar .info li {
  font-size: 18px; /* Console Log: Setting info list font size */
}
.side_bar .info li a {
  color: var(--white); /* White: #ffffff */ /* Console Log: Setting info link color */
}
.side_bar .info li i {
  color: var(--white); /* White: #ffffff */
  margin-right: 5px; /* Console Log: Styling info list icons */
}
.side_bar button {
  position: absolute;
  right: 40px;
  top: 40px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  background-color: var(--white); /* White: #ffffff */
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  border: none; /* Console Log: Styling sidebar close button */
}
.side_bar button:hover {
  transform: rotate(90deg); /* Console Log: Adding hover rotation effect */
}
.side_bar button i {
  color: var(--theme); /* Primary Purple: #2e0c5e */ /* Console Log: Setting button icon color */
}
.side_bar .social__icon {
  display: flex;
  align-items: center;
  gap: 10px; /* Console Log: Using Flexbox for social icons layout */
}
.side_bar .social__icon li {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid var(--white); /* White: #ffffff */
  border-radius: 100%;
  transition: all 0.3s ease-in-out;
  cursor: pointer; /* Console Log: Styling social icon containers */
}
.side_bar .social__icon li a i {
  font-size: 16px;
  color: var(--white); /* White: #ffffff */
  transition: all 0.3s ease-in-out; /* Console Log: Styling social icon links */
}
.side_bar .social__icon li:hover {
  background-color: var(--white); /* White: #ffffff */ /* Console Log: Hover effect for social icons */
}
.side_bar .social__icon li:hover a i {
  color: var(--theme); /* Primary Purple: #2e0c5e */ /* Console Log: Hover color change for icons */
}
.side_bar_hidden {
  visibility: hidden;
  opacity: 0;
  right: -30px; /* Console Log: Hiding sidebar when not active */
}

/* ============================================================ */
/* 💡 Block Separator: Feature Section (Responsive) */
/* ============================================================ */
@media (max-width: 991px) {
  .feature__section { margin-top: 0; /* Console Log: Removing margin-top for feature section on mobile */ }
}

/* ============================================================ */
/* 💡 Block Separator: Apply Section (Responsive) */
/* ============================================================ */
@media (max-width: 1199px) {
  .apply__section .apply__wrapper { padding: 30px 30px; /* Console Log: Adjusting padding for apply wrapper */ }
  .apply__section .contact__right .form__clt input { font-size: 14px; /* Console Log: Reducing input font size */ }
}

/* ============================================================ */
/* 💡 Block Separator: Details Section (Generic, Responsive) */
/* ============================================================ */
@media (max-width: 1199px) {
  .details__section .details__items .title { font-size: 38px; /* Console Log: Reducing title font size for screens <= 1199px */ }
  .details__section .service__details .service__wrap .service__list { flex-wrap: wrap; /* Console Log: Enabling flex wrap for service list */ }
}
@media (max-width: 991px) {
  .details__section .details__items .title { font-size: 32px; /* Console Log: Further reducing title font size for screens <= 991px */ }
}
@media (max-width: 575px) {
  .details__section .details__items .title { font-size: 24px; line-height: 35px; /* Console Log: Adjusting title font size and line height for screens <= 575px */ }
}

/* ============================================================ */
/* 💡 Block Separator: Sidebar (Right, Responsive) */
/* ============================================================ */
@media (max-width: 1199px) {
  .sidebar__right .recent__wrap .recent__items .recent__content p { font-size: 14px !important; /* Console Log: Reducing recent content font size */ }
  .sidebar__right .recent__wrap .recent__items { gap: 9px 12px; /* Console Log: Adjusting gap for recent items */ }
  .sidebar__right .recent__wrap .recent__items .thumb { width: 100px; /* Console Log: Setting thumbnail width */ }
  .sidebar__right .recent__wrap .recent__items .recent__content { width: calc(100% - 100px); /* Console Log: Adjusting content width */ }
}
@media (max-width: 575px) {
  .sidebar__right .service__list li a span { font-size: 15px; /* Console Log: Reducing service list font size */ }
}
@media (max-width: 500px) {
  .sidebar__right .recent__wrap .recent__items .recent__content h6 { font-size: 14px; margin-bottom: 0; /* Console Log: Adjusting recent content title styling */ }
  .sidebar__right .recent__wrap .recent__items .recent__content .date { font-size: 14px; /* Console Log: Reducing date font size */ }
}

/* ============================================================ */
/* 💡 Block Separator: Blog Details (Responsive) */
/* ============================================================ */
@media (max-width: 1199px) {
  .blog__details .blog__details__items .details__wrapper .details__content h2 { line-height: 40px !important; /* Console Log: Adjusting blog content line height */ }
}
@media (max-width: 991px) {
  .blog__details .blog__details__items .details__wrapper .details__content h2 { font-size: 24px; line-height: 35px !important; /* Console Log: Reducing blog content font size and line height */ }
}
@media (max-width: 575px) {
  .blog__details .blog__details__items .details__wrapper .details__content h2 { font-size: 18px; line-height: 28px !important; /* Console Log: Further reducing blog content font size and line height */ }
  .blog__details .blog__details__items .details__wrapper .details__content ul { flex-wrap: wrap; /* Console Log: Enabling flex wrap for blog content lists */ }
  .blog__details .blog__details__items .comments__wrap { padding: 20px 15px; /* Console Log: Adjusting comments wrapper padding */ }
  .blog__details .blog__details__items .comments__wrap h4 { font-size: 28px; padding-bottom: 22px; /* Console Log: Adjusting comments title styling */ }
}
@media (max-width: 500px) {
  .blog__details .blog__details__items .details__wrapper .details__content .standard__footer { display: grid; gap: 15px; /* Console Log: Using grid for blog footer layout */ }
}

/* ============================================================ */
/* 💡 Block Separator: Reviews & Comments (Responsive) */
/* ============================================================ */
@media (max-width: 1199px) {
  .reviews__boxes { flex-wrap: wrap; /* Console Log: Enabling flex wrap for reviews boxes */ }
  .reviews__boxes .review-content { width: 100%; /* Console Log: Setting review content to full width */ }
}

/* ============================================================ */
/* 💡 Block Separator: Gallery Section (Responsive) */
/* ============================================================ */
@media screen and (max-width: 1199px) {
  .gallery-section .galley-wrapper .gallery-items .g-items .link-solcial .content .title { font-size: 18px; margin-bottom: 15px; /* Console Log: Adjusting gallery title styling */ }
}
@media screen and (max-width: 991px) {
  .gallery-section .galley-wrapper { flex-wrap: wrap; /* Console Log: Enabling flex wrap for gallery wrapper */ }
  .gallery-section .galley-wrapper .gallery-items-two { margin: 0; /* Console Log: Removing margin for gallery items */ }
  .gallery-section .galley-wrapper .gallery-items-three { margin-top: -25px; /* Console Log: Adjusting margin for gallery items */ }
  .gallery-section .galley-wrapper .gallery-items { width: 48.5%; /* Console Log: Setting gallery item width */ }
  .gallery-section .galley-wrapper .gallery-items .g-items { margin: 20px; /* Console Log: Adjusting gallery item margin */ }
}
@media screen and (max-width: 580px) {
  .gallery-section .galley-wrapper { flex-wrap: wrap; /* Console Log: Ensuring flex wrap for small screens */ }
  .gallery-section .galley-wrapper .gallery-items-two { margin: 0; /* Console Log: Removing margin for gallery items */ }
  .gallery-section .galley-wrapper .gallery-items-three { margin-top: 0px; /* Console Log: Resetting margin-top for gallery items */ }
  .gallery-section .galley-wrapper .gallery-items { width: 95%; /* Console Log: Increasing gallery item width for small screens */ }
  .gallery-section .galley-wrapper .gallery-items .g-items { margin: 10px; /* Console Log: Reducing gallery item margin */ }
  .gallery-section .galley-wrapper .gallery-items .g-items:not(:last-child) { margin-bottom: 25px; /* Console Log: Adding bottom margin for non-last gallery items */ }
}

/* ============================================================ */
/* 💡 Block Separator: Error Page (Responsive) */
/* ============================================================ */
@media (max-width: 575px) {
  .error__section .error__content h1 { font-size: 100px; /* Console Log: Reducing error page title font size */ }
}

/* ============================================================ */
/* 💡 Block Separator: Contact Page (Responsive) */
/* ============================================================ */
@media (max-width: 1199px) {
  .contact__us__section .contact__right .form__clt input { font-size: 14px; /* Console Log: Reducing contact form input font size */ }
  .contact__us__section .contact__right .form__clt__big textarea { font-size: 14px; /* Console Log: Reducing contact form textarea font size */ }
}

/* ============================================================ */
/* 💡 Block Separator: Footer Section (Responsive) */
/* ============================================================ */
@media (max-width: 1199px) {
  .footer__section .footer__top .footer__widget .recent__items .content h6 { font-size: 13px; /* Console Log: Reducing footer widget title font size */ }
}
@media (max-width: 767px) {
  .footer__section .footer__bottom .bottom__wrap { justify-content: center !important; /* Console Log: Centering footer bottom content */ }
  .footer__section .footer__bottom .bottom__wrap p { text-align: center; /* Console Log: Centering footer bottom text */ }
}

/* ============================================================ */
/* 💡 Block Separator: Device-Specific Media Queries (2015-2025) */
/* ============================================================ */
@media only screen and (width: 414px) and (height: 736px) { /* iPhone 6s/7/8 Plus */
  /* Console Log: Device-specific overrides for iPhone 6s/7/8 Plus */
}
@media only screen and (width: 375px) and (height: 812px) { /* iPhone X / XS */
  /* Console Log: Device-specific overrides for iPhone X / XS */
}
@media only screen and (width: 414px) and (height: 896px) { /* iPhone XR / 11 / XS Max / 11 Pro Max */
  /* Console Log: Device-specific overrides for iPhone XR / 11 / XS Max / 11 Pro Max */
}
@media only screen and (width: 428px) and (height: 926px) { /* iPhone 12/13 Pro Max */
  /* Console Log: Device-specific overrides for iPhone 12/13 Pro Max */
}
@media only screen and (width: 360px) and (height: 780px) { /* iPhone 12/13 Mini */
  /* Console Log: Device-specific overrides for iPhone 12/13 Mini */
}
@media only screen and (width: 430px) and (height: 932px) { /* iPhone 14/15 Pro Max */
  /* Console Log: Device-specific overrides for iPhone 14/15 Pro Max */
}
@media only screen and (width: 1024px) and (height: 1366px) { /* iPad Pro 12.9in (2015-2017) */
  /* Console Log: Device-specific overrides for 12.9" iPad Pro */
}
@media only screen and (width: 834px) and (height: 1112px) { /* iPad Pro 10.5 / Air 10.5 */
  /* Console Log: Device-specific overrides for 10.5" iPads */
}
@media only screen and (width: 744px) and (height: 1133px) { /* iPad Mini 6 (2021) */
  /* Console Log: Device-specific overrides for iPad Mini 6 */
}
@media only screen and (width: 360px) and (height: 640px) { /* Galaxy S6, S7 */
  /* Console Log: Device-specific overrides for Galaxy S6, S7 */
}
@media only screen and (width: 360px) and (height: 740px) { /* Galaxy S8, S9 (+ variants) */
  /* Console Log: Device-specific overrides for Galaxy S8, S9 family */
}
@media only screen and (width: 412px) and (height: 869px) { /* Galaxy S10+ */
  /* Console Log: Device-specific overrides for Galaxy S10 Plus */
}
@media only screen and (width: 412px) and (height: 915px) { /* Galaxy S20 Ultra & Pixel 6 */
  /* Console Log: Device-specific overrides for Galaxy S20 Ultra and Pixel 6 */
}
@media only screen and (width: 384px) and (height: 854px) { /* Galaxy S21 Ultra */
  /* Console Log: Device-specific overrides for Galaxy S21 Ultra */
}
@media only screen and (width: 360px) and (height: 772px) { /* Galaxy S22/S23 Ultra */
  /* Console Log: Device-specific overrides for Galaxy S22/S23 Ultra */
}
@media only screen and (width: 411px) and (height: 731px) { /* Google Pixel (2016) */
  /* Console Log: Device-specific overrides for original Google Pixel */
}
@media only screen and (width: 393px) and (height: 786px) { /* Google Pixel 3 */
  /* Console Log: Device-specific overrides for Google Pixel 3 */
}
@media only screen and (width: 393px) and (height: 851px) { /* Google Pixel 5 */
  /* Console Log: Device-specific overrides for Google Pixel 5 */
}
@media only screen and (width: 412px) and (height: 771px) { /* Google Pixel 7 Pro */
  /* Console Log: Device-specific overrides for Google Pixel 7 Pro */
}
@media only screen and (width: 412px) and (height: 906px) { /* OnePlus 8 Pro */
  /* Console Log: Device-specific overrides for OnePlus 8 Pro */
}
@media only screen and (width: 412px) and (height: 883px) { /* Galaxy Note 20 Ultra */
  /* Console Log: Device-specific overrides for Galaxy Note20 Ultra */
}
@media only screen and (width: 800px) and (height: 1280px) { /* Galaxy Tab S7+ */
  /* Console Log: Device-specific overrides for Galaxy Tab S7+ */
}