/* **********************************
******  CSS MEDIA QUERIES ********* 
************************************/

/* Extra Large Desktops / 4K Monitors */
@media (min-width: 1600px) {
  /* Custom ultra-wide layouts or extra spacing */
}


/* **********************************************************************/
/* **********************************************************************/



/* Large Desktops (Bootstrap XL) */
@media (max-width: 1200px) {

  /* Hide desktop nav */
  header .desktop-nav {
    display: none;
  }

  /* Show hamburger */
  header .ham {
    display: block;
    cursor: pointer;
  }

  /* Mobile menu styles */
  #mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    right: -100vw;
    width: 100%;
    height: 100vh;
    background: #faf3f1;
    z-index: 199;
    padding: 80px 20px;
    transition: right 0.4s ease-in-out;
  }

  /* When active — slide in */
  #mobile-menu.active {
    right: 0;
  }

  /* Mobile nav list */
  #mobile-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 25px;
    padding: 0;
    margin: 0;
  }

  #mobile-menu a {
    text-decoration: none;
    font-size: 18px;
    color: var(--logo-color, #333);
    text-transform: capitalize;
    font-weight: 500;
  }

  #mobile-menu a.header-btn {
    background: var(--logo-color, #333);
    color: #fff;
    padding: 10px 25px;
    border-radius: 4px;
  }

  /* Close button */
  #mobile-menu .close {
    display: block;
    position: absolute;
    top: 25px;
    right: 30px;
    cursor: pointer;
  }

  #mobile-menu .close i,
  header .ham i {
    font-size: 24px;
    color: var(--logo-color, #333);
    font-weight: bold;
  }

  /* Disable body scroll when menu open */
  body.no-scroll {
    overflow: hidden;
  }
}



/* **********************************************************************/
/* **********************************************************************/



/* Medium Devices (Bootstrap LG & MD) */
@media (max-width: 992px) {
  /* Adjust font sizes, stack columns */



  #about .welcome-txt h2 {
    width: 100%;
  }

  #about .abt-content {
    width: 100%;
  }

  /* abt-highlight-box */
  #about .abt-highlight-box {
    margin-bottom: 20px;
  }


  #about .abt-why-us {
    margin-top: 20px;
  }




  #about .abt-highlights .title-highlight h6 {
    text-align: center;
  }










  /* why-us-extra-padding */
  #why-us .why-us-extra-padding {
    margin-top: 0px;
  }

  #why-us .why-us-cover {
    margin-bottom: 20px;

  }





  #services .services-box {
    margin-bottom: 20px;
  }




  /* footer-contact */
  .footer-contact {
    margin-top: 10px;
  }










  /* about-page */

  /* abt-page-content */
  #about-page .abt-page-content p {
    width: 100%;
  }










}


/* **********************************************************************/
/* **********************************************************************/



/* Tablets (Bootstrap SM) */
@media (max-width: 768px) {
  /* Collapse menus, full-width sections */
}


/* **********************************************************************/
/* **********************************************************************/



/* Small Devices (Bootstrap XS) */
@media (max-width: 576px) {

  /* header */
  header {
    width: 95%;
  }

  /* logo */
  header .logo {
    height: 70%;
  }




  /* banner */
  #banner .banner-txt h1 {
    line-height: 40px;
  }

  #banner .banner-txt h1 span.h1-first {
    color: var(--logo-color);
    font-weight: 900;
    font-size: 55px;
  }

  #banner .banner-txt h1 span.h1-second {
    color: #ac2d6c;
    font-weight: 600;
    font-size: 35px;
  }

  #banner .banner-txt h1 span.h1-third {
    color: rgb(71 22 78);
    font-size: 30px;
  }


  #banner .banner-txt p {
    font-size: 25px;
  }




}



/* **********************************************************************/
/* **********************************************************************/




/* Extra Small / Mobile-first (below Bootstrap XS) */
@media (max-width: 420px) {
  /* Tighten UI for small phones (e.g. iPhone SE) */
  #banner .banner-txt .all-btn {
    margin-bottom: 10px;
  }
}