/* ============================================
   RESPONSIVE — LARGE DESKTOP (1920px+)
============================================= */
@media (min-width: 1920px) {
  .container {
    max-width: 1440px;
  }

  /* .hero-heading {
    font-size: 5.5rem;
  } */

  .about-heading {
    font-size: 2.8rem;
  }

  .solutions-heading {
    font-size: 2.6rem;
  }
}

@media (min-width: 1300px) {

}
/* ============================================
   RESPONSIVE — TABLET (1300px)
============================================= */
@media (max-width: 1300px) {
  .project-card-title{font-size: 36px;letter-spacing: -1.44px;}
  /* Home */
  .hero-heading{font-size: 72px;}
  .hero-description{font-size: 1.1rem;}
  .about-section{padding-top: 90px;}
  .about-heading{font-size: 40px;}
  .accordion-header{font-size: 28px;}
  .industry-title{font-size: 26px;}
  .industry-desc,.accordion-body p{font-size: 1.1rem;}

  /* About */
  .energy-shift-heading{font-size: 40px;}
  .energy-shift-text p{font-size: 1.1rem;}
  .bento-card-title{font-size: 28px;letter-spacing: -1.12px;}
  .why-triphos-heading{font-size: 40px;}
  .why-slide-title{font-size: 20px;}
  .looking-ahead-heading{font-size: 40px;}
  .strip-label{font-size: 20px;}

  /* Solutions */
  .sol-hero-sec .hero-heading {
    font-size: 48px;
  }

  .sol-hero-sec .hero-heading-indent {
    padding-left: 180px;
  }

  .sol-hero-desc {
    max-width: 613px;
    font-size: 1rem;
  }

  .sol-category-card {
    min-height: 200px;
    gap: 30px;
  }

  .sol-category-title {
    font-size: 1.15rem;
  }

  .sol-detail-card {
    grid-template-columns: 1fr 1fr;
  }

  .sol-detail-image {
    min-height: 380px;
  }

  .sol-detail-title {
    font-size: 28px;
  }

  .sol-detail-desc {
    font-size: 1.1rem;
  }

  .sol-detail-pain-points.sol-pain-5col {
    grid-template-columns: repeat(3, 1fr);
  }

  .sol-pain-label {
    font-size: 1.15rem;
  }

  .sol-expanded-desc {
    font-size: 28px;
  }
}

/* ============================================
   RESPONSIVE — TABLET (1024px)
============================================= */
@media (max-width: 1024px) {
  .header {flex-flow: column;}
  .header .why-triphos-heading{margin-top: 24px;}
  /* Home */
  .hero-heading{font-size: 72px;}
  .hero-description{font-size: 1rem;}
  .hero-heading-indent{padding-left: 0;}

  .about-heading{font-size: 36px;letter-spacing: -1.44px;}
  .why-wrapper{min-height:500px}
 
  .about-heading:last-child{margin-bottom: 0;}
  .about-images{gap: 18px;}

  .accordion-header{font-size: 24px;padding-left: 0;}
  .accordion-body p{font-size: 1rem;padding-left: 0;}
  .industry-title{font-size: 24px;}
  .accordion-arrow{width: 30px;height: 30px;font-size: 20px;}
  .industry-desc{font-size: 1rem;}
  .industry-icon{width: 35px;height: 35px;}
  .industry-icon img{max-width: 20px;}
  .industry-card{padding: 15px;}
  .industries-grid{grid-template-columns: repeat(3, 1fr);}
  .explore-card{order: 1;padding: 0;grid-column: 1;align-self: end;}
  .industry-card:last-child{order: 0;grid-column: 3;}
  .cta-content{max-width: 700px;}
  .footer-badge-right{width: auto;}
  .footer-top{max-width:60%;}
  .footer-logo{max-width: 160px;}
  .logo-img-lg{height:auto}
  .footer-badge{padding:18.66px 10px;justify-content: center;max-width: 140px;}
  .footer-badge img{max-width: 70%;height: auto;margin: 0 auto;}
  .why-content .section-label{padding-left: 0;}
  .section-label{font-size: 12px;}

  /* About */
  .abt-pg .about-top .btn-cta {
    top: auto;width: fit-content;
  }
  .energy-shift-wrapper{padding: 40px 25px;}
  
  .energy-shift-wrapper .section-label{padding-top: 0;}
  .energy-shift-text p{font-size: 1rem;}
  .bento-section{padding-top: 60px;}
  .bento-card--text .bento-card-content,.bento-card--large .bento-card-content{padding: 8px;min-height: 305px;grid-template-columns: 1fr;
        gap: 0;}
  .bento-card--large .bento-card-content,.bento-card--icon .bento-card-content,.bento-card--icon .bento-card-content{position: relative;}
  .bento-card--large .bento-card-arrow, .bento-card--text .bento-card-arrow, .bento-card-arrow{position: absolute;z-index: 9;
        right: 8px;
        bottom: 8px;}

  .bento-card-arrow, .bento-hover-close{width: 30px;height: 30px;}
  .bento-card-arrow img, .bento-hover-close img{width:14px;}
  .bento-card--icon .bento-card-content{padding: 14px;}
  .bento-hover-overlay{padding: 14px;}
  .bento-hover-body,.bento-hover-body h3{font-size: 1rem;letter-spacing: -0.64px;}
  .bento-top-icon{max-width: 45px;}
  .bento-card--featured  .bento-top-icon{max-width: 100%;}
  .looking-ahead-heading{font-size: 36px;line-height: 1.3;}
  .looking-ahead-section .about-right{padding-bottom: 0;gap: 25px;}
  

  /* Contact */
  .contact-hero-left{padding-top: 0;}
  .contact-hero-section {
    padding: 140px 0 40px;
  }

  

  .map-wrapper {
    height: 350px;
  }

  /* Solutions */
  .sol-category-arrow,.sol-detail-expand{width: 38px;height: 38px;}
  .sol-category-arrow img,.sol-detail-expand img{width: 14px;}
  .sol-detail-desc{font-size: 1rem;}
  .sol-expanded-desc{font-size: 20px;}
  .sol-detail-title{font-size: 24px;padding: 13px 10px;}
  .sol-detail-pain-points,.sol-detail-pain-points.sol-pain-5col,.sol-detail-pain-points.sol-pain-3col{grid-template-columns: 1fr;gap: 12px;}
  .sol-pain-item{flex-flow: row;align-items: center;gap: 10px;}
  .sol-pain-icon{width: 25px;height: 25px;}
  .sol-pain-icon img{max-width: 16px;max-height: 16px;}
  .sol-detail-image {
    min-height: 300px;
  }
  .sol-detail-card{gap: 20px;}
  .sol-cards{gap: 20px;}
  .why-triphos-heading {
        font-size: 34px;
        text-align: left;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px){ 
  .explore-card{margin-top: -65px;
    top: -12px;}
}
/* ============================================
   RESPONSIVE — NAV TOGGLE (991px)
============================================= */
@media (max-width: 991px) {
  .sol-detail-desc, .sol-pain-label {
        max-width: calc(100% - 30px);
    }
  .contact-hero-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .contact-form-wrapper {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .contact-form {
    order: 1;
  }

  .contact-info {
    order: 2;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .contact-info-item {
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .contact-info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .contact-form {
    max-width: 100%;
    margin-left: 0;
  }
  .looking-ahead-content{grid-template-columns: 1fr;gap: 50px;margin-bottom: 50px;}
  .energy-shift-top{grid-template-columns: 1fr;gap: 50px;margin-bottom: 40px;}
   .about-top{gap: 30px;grid-template-columns: 1fr;}
  .about-left{padding-top: 0;display: contents;}
  .about-left .section-label{order: 1;}
  .about-right{order: 2;padding-bottom: 0;}
  .about-top .btn-cta {
    position: relative;
    top: auto;z-index: 9;order: 3;width: fit-content;
  }
  .why-triphos-section{padding-top: 80px;}
  .accordion-header{font-size: 17px;}
  /* Home */
  .main-menu {
    display: none!important;
  }
body.contact .toggle-bar{ background: var(--clr-text);}
body.contact .navbar-main.scrolled .toggle-bar{ background: var(--clr-white);}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu .main-menu {
  display: flex!important;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 70px;
}

.mobile-menu .main-menu a {
  font-size: 32px;
  font-weight: 500;
  color: var(--clr-white);
  text-transform: uppercase;
  transition: color var(--transition-fast);
  letter-spacing: -0.5px;
}

.mobile-menu .main-menu a:hover {
  color: var(--clr-purple-light);
}
  header .btn-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .toggle-bar {
    background: var(--clr-white);
  }

  .hero-section{padding-bottom: 150px;}
  .container{padding: 0 30px;}
  .hero-heading{padding-bottom: 2rem;}
  .hero-underline{flex-flow: column;gap: 24px;align-items: flex-start;margin: 0;display: flex;}
  .hero-description{order: -1;max-width: 505px;margin-left: auto;}
  .about-top .btn-cta{top: auto;}
  .about-right,.solutions-title-row,.cta-content,.abt-hero-sec .hero-heading,.energy-shift-heading,.looking-ahead-section .about-right,.contact-hero-right,.contact-form{grid-column: 1 / 2;}
  .cta-card,.abt-hero-sec .hero-text,.energy-shift-bottom{grid-template-columns:1fr;}
  .energy-shift-bottom{gap:0}
  .hero-heading-indent {
    display: inline-block;
    padding-left: 200px;
  }
  .why-accordion{padding-bottom: 0;}
  .accordion-header{padding: 14px 0 ;}

  .solutions-header {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cta-content {
    max-width: 640px;
  }
  .footer-bottom-left{gap: 16px;}

  /* About */
  .abt-pg .about-top .btn-cta {
    top: auto;width: fit-content;
  }
  section.about-section.abt-pg{padding-bottom: 0;}
  .bento-hover-label{font-size: 12px;}

  /* Solutions */
  .sol-detail-card{grid-template-columns: 240px auto;}
  .sol-hero-sec .hero-heading {
    font-size: 40px;
    line-height: 47px;
  }
  .sol-hero-sec .hero-heading-indent {
    padding-left: 125px;
  }
  .sol-hero-desc{max-width: 580px;}
  .sol-categories-grid{grid-template-columns: 1fr;}
  .sol-category-card{min-height: inherit;flex-direction: row;padding: 15px;align-items: center;}
  .sol-hero-sec{padding-bottom: 60px;}
}

/* ============================================
   RESPONSIVE — MOBILE (767px and below)
============================================= */
@media (max-width: 767px) {
  .cta-card .about-heading{letter-spacing: 0;}
  /* Home */
  :root{
    --section-py:25px;
  }

  .container {
    padding: 0 12px;
  }

  .hero-heading {
    font-size:40px;letter-spacing: -1.6px;
    line-height: 47px;
  }

  .hero-heading-indent {
    padding-left: 45px;
    padding-top: 0;
  }

  .hero-description {
    font-size: 14px;
     padding-left: 50px;
  }
  .hero-section .btn-cta{margin-left: 50px;}

  .about-section{padding-top: 60px;padding-bottom: 0;}
  .about-top{gap: 40px;margin-bottom: 30px;}
  .about-heading {
    font-size: 20px;line-height: 117%;letter-spacing: -0.8px;
  }
  .about-right {
    padding-bottom: 0;
  }
  .about-top .btn-cta {
    top: auto;
  }
  .hero-section .btn-cta{font-size: 12px;
    font-weight: 500;
    padding: 8px 40px 8px 20px;
    min-width: 140px;}
  .btn-cta {
    font-size: 12px;
    font-weight: 500;
    padding: 8px 40px 8px 20px;
    min-width: 140px;
  }

  .btn-arrow {
    width: 30px;
    height: 30px;
  }
  .btn-arrow img{width: 12px;}

  .about-images {
    gap: 5px;
  }

  .img-wrapper {
    padding-top: 100%;
  }
  .solutions-header .section-label{padding-top: 0;}
  .solutions-header .btn-cta{max-width: 140px;}
  .solutions-header{margin-bottom: 50px;}
  .solutions-carousel.swiper {
    padding: 40px 0 0 10px;
    overflow: hidden;
  }
  .swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto;
  }
  .swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto;
  }
  .solution-card-inner {
    padding: 12px 8px;
    min-height: 165px;
    gap:15px;
  }
  .icon-circle {
    width: 28px;
    height: 28px;}
  .icon-circle img{max-width: 18px;}
  .solution-icon-title{gap: 6px;}
  .solution-title{font-size: 14px;}
  .solution-desc{font-size: 14px;}
  .solutions-carousel .swiper-button-prev, .solutions-carousel .swiper-button-next{width: 30px;height: 30px;}
  .solutions-carousel .swiper-button-prev::after, .solutions-carousel .swiper-button-next::after{font-size: 14px;}
  .why-wrapper{grid-template-columns: 1fr;max-height: inherit;}
  .why-image{position: relative; max-height: 300px; width: 100%;}
  .why-image-bg{position: relative;}

  .why-content{padding: 20px 15px; margin-left: 0;}
  .accordion-header{font-size: 16px;letter-spacing: 0;}
  .accordion-body p{font-size: 14px;}
  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .industries-grid{margin-top: 30px;}
  .industry-desc{font-size: 14px;margin: 0;}
  .industry-header{margin-bottom: 25px;gap: 4px;}
  .industry-icon {
    width: 25px;
    height: 25px;
  }
  .industry-icon img {
    max-width: 14px;
  }
  .industry-card {
    padding: 20px 12px;
  }
  .explore-card{padding: 0;grid-column: auto;align-self: auto;order: 1;}
  .industry-card:last-child{order: 10;grid-column: auto;}
  .industry-title {
    font-size: 0.85rem;
  }

  .cta-card {
    padding: 80px 24px;
    text-align: center;
  }
  .cta-card .about-heading br{display: none;}
  /* .cta-card .about-heading span{display: block;padding-bottom: 5px;} */
  .cta-section .btn-cta{padding-left: 20px;margin: 0 auto;}
  .cta-heading {
    font-size: 1.25rem;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 100%;
  }
  .footer-col {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    padding-bottom: 18px;
  }
  .footer-brand {
    gap: 18px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, .2);    padding: 20px 0 0;
    border-bottom: 0;
  }
  .footer-bottom-left{flex-flow: column;gap: 20px;width: 100%;}
  .footer-social{border-bottom: 1px solid rgba(255, 255, 255, .2);
    padding-bottom: 20px;width: 100%;justify-content: center;}
  .site-footer{    padding: 0px 0 30px;}
  .section-label{font-size: 10px;}

  /* About */
  .abt-pg .about-top .btn-cta {
    top: auto;width: fit-content;
  }
  .abt-pg .about-images{grid-template-columns: repeat(2, 1fr);gap: 12px;}
  .energy-shift-heading{font-size: 20px;letter-spacing: 0;}

  .energy-shift-top{gap: 25px;margin-bottom: 25px;}
  .energy-shift-wrapper{padding: 20px 12px;}
  .energy-shift-bottom{grid-template-columns: auto 130px;gap:0}
  .energy-shift-text p{font-size: 14px;}
  .bento-section{padding-top: 30px;}
  .energy-shift-bottom-inner{grid-template-columns: auto 130px;
        gap: 18px;grid-column: 1 / 3;}
  .bento-card-title{font-size: 14px;font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 117%; /* 16.38px */
letter-spacing: -0.56px;}
  .bento-card-arrow, .bento-hover-close {
    width: 20px;
    height: 20px;
  }
  .bento-card-arrow{position: absolute;
        right: 6px;
        bottom: 6px;}
  .bento-card-arrow img, .bento-hover-close img {
    width: 8px;
  }
  .bento-card--icon .bento-card-content{padding: 8px;}
  .bento-hover-body, .bento-hover-body h3{font-size: 9px;
        letter-spacing: -0.36px;
        font-weight: 400;}
        .bento-hover-body p {
    margin: 0 0 8px;
}
  .bento-card{min-height: 150px;}
  .bento-card--large .bento-card-content{min-height: 150px;padding: 8px;gap: 8px;position: relative;}
  .bento-card--text .bento-card-content{min-height: 215px;padding: 8px;gap: 8px;position: relative;}
  .bento-card--icon .bento-card-content{position: relative;}

  .bento-hover-label {
        font-size: 8px;
        letter-spacing: 0.21px;
        font-weight: 400;
        gap:6px;
    }
  .bento-hover-overlay{padding: 8px;}
  .bento-grid{gap: 4px;}
  /* .bento-card:hover {
    transform: translateY(0px);
  } */
  .bento-card--featured{padding: 0;}
  .icons-strip-section{padding: 25px 0;}
  .strip-icon{width: 30px;height: auto;}
  .icon-strip-item{gap: 8px;}
  .strip-label{font-size: 14px;}

  /* Contact */
  .contact-hero-section {
    padding: 120px 0 30px;
  }
  .contact-form-section{padding: 25px 0 0;}
  .contact-form-wrapper{padding-bottom: 50px;}
  .form-label{font-size: 12px;}
  .btn-submit{font-size: 12px;
    font-weight: 500;
    padding: 8px 40px 8px 20px;margin-top: 10px;
    min-width: 140px}
  .btn-submit .btn-arrow{width: 30px;
    height: 30px;}

  .contact-heading {
    font-size: 1.25rem;
  }
  .contact-info-arrow{width: 30px;height: 30px;}
  .contact-info-arrow img {
    width: 12px;
  }
  .contact-form-wrapper {
    gap: 32px;
  }

  .contact-info {
    flex-direction: column;
    gap: 0;
  }

  .contact-info-item {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

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

  .form-input {
    padding: 14px 16px;
    font-size: 14px;
  }

  .map-wrapper {
    height: 280px;
  }

  .contact-map {
    padding-bottom: 40px;
  }

  /* Solutions */
  .sol-detail-card {
    grid-template-columns:1fr;
  }
  .sol-detail-desc,.sol-pain-label{font-size: 14px;}
  .sol-category-arrow, .sol-detail-expand {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
  }
  .sol-category-arrow img, .sol-detail-expand img {
    width: 8px;
  }
  .sol-expanded-desc{font-size: 14px; letter-spacing: 0px;}
  .sol-detail-title{font-size: 14px;letter-spacing: 0px;}
  .sol-detail-image {
    min-height: 100px;
  }
  .sol-category-card{padding: 10px 15px;}
  .sol-category-title{font-size: 14px;letter-spacing: 0;}
  .sol-hero-sec{padding-bottom: 15px;}
  .sol-hero-sec .hero-heading-indent {
    padding-left: 75px;
  }
  .sol-hero-desc{font-size: 14px;margin-top: 20px; padding-left: 75px;}
  .why-triphos-heading {
        font-size: 18px;
        text-align: left;
    }
    .sol-detail-title{letter-spacing: 0px;}
    .looking-ahead-heading {
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: 0;
    }
    .header .why-triphos-heading{letter-spacing: 0;}
    .sol-detail-desc, .sol-pain-label{letter-spacing: 0px;max-width: calc(100% - 30px);}
}

/* ============================================
   PROJECTS - RESPONSIVE
============================================= */
@media (max-width: 991px) {
  .projects-grid{grid-template-columns: repeat(2, 1fr);}
  .project-detail-top{grid-template-columns: 1fr;}
  .project-detail-block{grid-template-columns: 1fr;gap: 15px;}
  .project-detail-name{font-size: 24px;letter-spacing: -0.5px;}
  .project-detail-block-highlight .project-block-text{font-size: 22px;letter-spacing: -0.5px;}
}
@media (max-width: 767px) {
  .projects-grid{gap: 12px;}
  .project-spec{flex-direction: column;gap: 2px;}
  .project-card-title{font-size: 20px;letter-spacing: -0.8px;}
  .project-card-overlay{padding: 10px;}
  .project-card-usecase{font-size: 10px;letter-spacing: 0;}
  .project-detail-name{font-size: 18px;letter-spacing: 0;}
  .project-detail-block-highlight .project-block-text{font-size: 16px;letter-spacing: 0;}
  .project-detail-image{min-height: 200px;}
  .project-spec-label{min-width: 130px;}
  .project-specs{order:3}
}