/*=========<<Margin property Utilities end>>=========*/

/* ====== Shared Responsive Utility ====== */
.responsive-flex-toggle {
  display: block;
}

/* ===== Small Screens (max-width: 768px) ===== */
@media screen and (max-width: 768px) {
  .responsive-flex-toggle {
    display: block;
  }

  .header-section {
    padding-block: 8px;
    margin-top: 0px;
    background: #001825;
  }

  .page {
    margin-top: 4px;
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 22px;
    font-weight: 900;
  }

  h3 {
    font-size: 22px;
    font-weight: 800;
  }

  p {
    font-size: 22px;
    font-weight: 600;
  }

  p strong {
    color: #2d6efd;
    font-weight: 600;
  }

  .container {
    padding: 10px;
  }

  .blog__meta,
  .floating-content__item,
  .header-wrapper,
  .cta-form .cta-btn {
    padding-block: 0px;
    margin-top: 0px;
  }

  .rating-stars {
    font-size: 22px;
  }
}

/* ===== Large Screens (min-width: 1200px) ===== */
@media (min-width: 1200px) {
  .responsive-flex-toggle {
    display: flex;
  }

  .header-section {
    padding-block: 0px;
    margin-top: 0px;
    background: #001825;
  }

  .container {
    max-width: 1360px !important;
  }

  h1 {
    font-size: 24px;
    padding-top: 40px;
  }

  h2,
  h3 {
    font-size: 20px;
    font-weight: 600;
    color: #976c00
  }

  p {
    font-size: 20px;
    font-weight: 400;
  }

  p strong {
    color: #2d6efd;
    font-weight: 600;
  }

  .app-badge-text {
    color: #fff;
  }

  .rating-stars {
    font-size: 26px;
  }
}

/* ===== Font Face Fixes ===== */
@font-face {
  font-family: 'Font Awesome Solid';
  src: url('./fonts/fa-solid-900.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Font Awesome Brands';
  src: url('./fonts/fa-brands-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== Base Body Style ===== */
body {
  font-family: 'Roboto', sans-serif;
  margin: 2rem;
  line-height: 1.6;
}


/* Shared Flex Display and Padding */
.subtitle,
.section-header--style4,
.menu,
.header-wrapper .menu-area .header-btn,
.header-wrapper .menu-area,
.header-wrapper,
.paginations,
.paginations ul li:not(:first-child, :last-child) a,
.paginations ul li a,
.swiper-nav,
.about__content--style2 .about__content-inner,
.roadmap--style2 .roadmap__upper-inner,
.roadmap--style1 .roadmap__item-header,
.accordion__button,
.comment__author,
.comment__head,
.tags--style2 ul,
.tags ul,
.sidebar__categorie-body ul li,
.sidebar__recentpost-inner,
.testimonial__author,
.testimonial__footer,
.testimonial__item--style3 .testimonial__item-body,
.blog-details__action-inner,
.blog-details__meta ul li,
.blog__writer,
.floating-content__item--style4,
.floating-content__item--style2,
.social,
.btn-group,
.footer__end-links,
.footer__app-inner,
.footer__app,
.account__check,
.contact__item-inner,
.banner--style3 .banner__counter-inner,
.home-showcase__buttons,
.playbtn {
  display: flex;
  padding-block: 21px;
}

/* Menu Styling */
.menu > li > a {
  font-size: 14px;
  font-weight: 900;
}

.menu--style1 li a {
  color: #ffffff;
}

.menu li .submenu li a {
  text-transform: capitalize;
  display: flex;
padding: 10px 20px !important;
justify-content: space-between;
border-bottom: 1px solid rgba(var(--wh-color), 0.05);
border-radius: 0.3rem;
transition: all 0.3s ease-out;
}

.menu li .submenu li a:hover,
.menu li .submenu li a.active {
  background: #906602;
  color: #ffdb04;
  padding: 22px;
}

.menu li:hover > .submenu {
  text-transform: capitalize;
  display: flex;
}

/* WhatsApp Button Styling */
.btn-whatsapp {
  color: blue;
}
.social, ul, ol { list-style: None; }