/*-----------------------------------------------------------------------------------
    KriArj Theme – Responsive CSS
    File   : responsive.css
    Purpose: Mobile & tablet responsive overrides
-----------------------------------------------------------------------------------*/

/* ============================================================
   0. Viewport & base
   ============================================================ */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
img  { max-width: 100%; height: auto; }


/* ============================================================
   1. HEADER — Logo fix 
   ============================================================ */
@media only screen and (max-width: 1199px) {
  .header__area { padding: 10px 0; }
  .header__hamburger { display: flex !important; align-items: center; }
}
@media only screen and (max-width: 991px) {
  .header__logo { max-width: 130px !important; }
  .logo img     { width: 100% !important; max-width: 70px !important; height: auto !important; }
  .rs-sticky    { padding: 8px 0; }
.breadcrumb-space {padding: 29px 0 29px;}
	.breadcrumb__menu ul li span{font-size: 13px !important;}
}
@media only screen and (max-width: 575px) {
  .header__logo { max-width: 110px !important; }
  .logo img     { max-width: 60 !important; }
  .header__btn-wrap { display: none !important; }
	.breadcrumb-space {padding: 29px 0 29px;}
	.breadcrumb__menu ul li span{font-size: 13px !important;}
}
@media only screen and (max-width: 400px) {
  .header__logo { max-width: 95px !important; }
  .logo img     { max-width: 62px !important; }
  .breadcrumb-space {padding: 29px 0 29px;}
.breadcrumb__menu ul li span{font-size: 13px !important;}
}


/* ============================================================
   2. OFFCANVAS MOBILE MENU
   — White text, Services dropdown, proper sizing
   ============================================================ */

/* --- Wrapper size --- */
.offcanvas__wrapper {
  width: 100%;
  max-width: 100%;
}
@media only screen and (min-width: 576px) {
  .offcanvas__wrapper { width: 100%; }
  .header__right .header__btn-wrap{display:none !important;}
}

/* --- Offcanvas logo size --- */
.offcanvas__logo a img {
  width: 50px !important;
  height: auto !important;
}

/* --- ALL nav links: white text --- */
.offcanvas__area .mobile-nav-list,
.offcanvas__area .mobile-nav-list li,
.offcanvas__area .mobile-nav-list li a,
.offcanvas__area .mobile-nav-list li a:visited,
.offcanvas__area .mobile-nav-list .sub-menu,
.offcanvas__area .mobile-nav-list .sub-menu li a {
  color: #ffffff !important;
}
.offcanvas__area .mobile-nav-list li a:hover,
.offcanvas__area .mobile-nav-list .sub-menu li a:hover {
  color: #034833 !important;
}

/* --- List reset --- */
.offcanvas__area .mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.offcanvas__area .mobile-nav-list li {
  border-bottom: 1px solid rgba(255,255,255,0.15);
  position: relative;
}
.offcanvas__area .mobile-nav-list li:last-child {
  border-bottom: none;
}

/* --- Top-level links --- */
.offcanvas__area .mobile-nav-list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff !important;
  text-decoration: none;
  transition: color 0.2s;
}

/* --- Dropdown arrow — inline inside <a> --- */
.offcanvas__area .mobile-nav-list li > a.has-sub {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
.offcanvas__area .mobile-nav-list .submenu-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding-left: 10px;
  font-size: 13px;
  transition: transform 0.25s;
  flex-shrink: 0;
  color: #ffffff;
}
.offcanvas__area .mobile-nav-list .submenu-arrow.open {
  transform: rotate(90deg);
}

/* --- Sub-menu Level 1 & 2 (all levels hidden by default, JS toggles) --- */
.offcanvas__area .mobile-nav-list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  display: none;
  background: rgba(0,0,0,0.12);
  border-radius: 6px;
  overflow: hidden;
}
.offcanvas__area .mobile-nav-list .sub-menu.open {
  display: block;
}
.offcanvas__area .mobile-nav-list .sub-menu li {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: relative;
}
.offcanvas__area .mobile-nav-list .sub-menu li:last-child {
  border-bottom: none;
}
/* Level-1 sub-menu links */
.offcanvas__area .mobile-nav-list .sub-menu > li > a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none;
}
.offcanvas__area .mobile-nav-list .sub-menu > li > a:hover {
  color: #ffffff !important;
  padding-left: 12px;
}
/* Level-2 nested sub-menu (e.g. Business Process Consultancy children) */
.offcanvas__area .mobile-nav-list .sub-menu .sub-menu {
  padding-left: 12px;
  background: rgba(0,0,0,0.15);
}
.offcanvas__area .mobile-nav-list .sub-menu .sub-menu > li > a {
  font-size: 13px;
  padding: 8px 6px;
  color: rgba(255,255,255,0.8) !important;
}
.offcanvas__area .mobile-nav-list .sub-menu .sub-menu > li > a:hover {
  color: #ffffff !important;
}

/* --- Social icons --- */
.offcanvas__social ul {
  flex-wrap: wrap;
  gap: 10px;
}
.offcanvas__title {
  color: #ffffff !important;
}


/* ============================================================
   3. HERO SLIDER / BANNER
   ============================================================ */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner-home .padding-space { padding: 90px 40px 110px 0; }
  .banner-home__content h1    { font-size: 48px; line-height: 58px; }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .banner-home .padding-space  { padding: 70px 20px 90px 0; }
  .banner-home__content h1     { font-size: 38px !important; line-height: 50px !important; }
  .banner-home .row            { flex-direction: column-reverse; }
  .banner-home .col-md-7,
  .banner-home .col-md-5       { width:100%; max-width:100%; flex:0 0 100%; }
  .banner-home .col-md-5       { text-align:center; margin-bottom:20px; }
  .img-man img                 { max-height:320px; object-fit:contain; }
  .carousel-control-prev-icon  { margin-right:40px; }
  .carousel-control-next-icon  { margin-left:40px; }
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
  .banner-home .padding-space  { padding: 50px 15px 70px 0; }
  .banner-home__content h1     { font-size: 30px !important; line-height: 40px !important; }
  .banner-home .row            { flex-direction: column-reverse; }
  .banner-home .col-md-7,
  .banner-home .col-md-5       { width:100%; max-width:100%; flex:0 0 100%; }
  .banner-home .col-md-5       { text-align:center; margin-bottom:15px; }
  .img-man img                 { max-height:260px; object-fit:contain; }
  .carousel-control-prev-icon  { margin-right:20px; }
  .carousel-control-next-icon  { margin-left:20px; }
}
@media only screen and (max-width: 575px) {
  .banner-home                 { border-radius:20px; margin-left:8px; margin-right:8px; }
  .banner-home .padding-space  { padding: 30px 10px 50px 0 !important; }
  .banner-home__content h1     { font-size: 20px !important; line-height: 28px !important; margin-top:0 !important; }
  .banner-home .row            { flex-direction: column-reverse; }
  .banner-home .col-md-7,
  .banner-home .col-md-5       { width:100%; max-width:100%; flex:0 0 100%; }
  .banner-home .col-md-5       { text-align:center; margin-bottom:10px; }
  .img-man img                 { max-height:200px; width:auto !important; object-fit:contain; margin:0 auto; display:block; }
  .banner-home__shape .ball-shape,
  .banner-home__shape .right-tower { display:none; }
  .carousel-control-prev-icon  { margin-right:10px; }
  .carousel-control-next-icon  { margin-left:10px; }
  .banner-home__btn__wrapper   { gap:10px; }
  .rr-btn { padding:10px 18px; font-size:13px; }
}
@media only screen and (max-width: 450px) {
  .banner-home__content h1 { font-size:18px !important; line-height:26px !important; }
  .img-man img             { max-height:170px; }
}


/* ============================================================
   4. CHOOSE US
   ============================================================ */
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .choose-us__area .row               { flex-direction: column; }
  .choose-us__media                   { max-width:100%; justify-content:center; }
  .choose-us__content                 { margin-top:40px; }
  .choose-us__text                    { padding:24px 28px; }
}
@media only screen and (max-width: 767px) {
  .choose-us__media                   { flex-wrap:wrap; justify-content:center; max-width:100%; }
  .choose-us__media-thumb-img-green-border { display:none; }
  .choose-us__text                    { padding:18px 16px; gap:12px; }
  .choose-us__text span               { font-size:28px; }
  .choose-us__text p                  { font-size:14px; }
  .choose-us__content-wrapper         { flex-direction:column; gap:12px; }
  .choose-us__content-wrapper-box     { padding:18px 16px; width:100%; }
  .choose-us__button                  { flex-direction:column; gap:16px; }
}


/* ============================================================
   5. BRAND / CLIENTS
   ============================================================ */
@media only screen and (max-width: 768px) {
  .brand__area .border-box { width:180px; }
  .brand__thumb img        { height:70px !important; }
}
@media only screen and (max-width: 575px) {
  .brand__area .border-box { width:150px; }
  .brand__thumb img        { height:55px !important; }
}


/* ============================================================
   6. FAQ
   ============================================================ */
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .faq__content  { flex-direction:column !important; }
  .faq-padding   { padding:30px 25px; }
}
@media only screen and (max-width: 767px) {
  .faq__content  { flex-direction:column !important; border-radius:16px !important; }
  .faq-padding   { padding:24px 18px; }
}
@media only screen and (max-width: 575px) {
  .faq-padding                  { padding:18px 14px; }
  .faq__area .accordion-button  { font-size:15px; padding:14px 12px; }
}


/* ============================================================
   7. SERVICES
   ============================================================ */
@media only screen and (max-width: 992px) { .service__item { height:auto !important; } }
@media only screen and (max-width: 575px) {
  .home__menu-buttons           { flex-wrap:wrap; gap:8px; justify-content:center; }
  .home__menu-buttons .rr-btn   { font-size:12px; padding:8px 14px; }
}


/* ============================================================
   8. COUNTER
   ============================================================ */
@media only screen and (max-width: 767px) {
  .latest-counter__item               { text-align:center; padding:20px 10px; }
  .latest-counter__item-title span    { font-size:40px !important; }
}
@media only screen and (max-width: 575px) {
  .latest-counter__item-title span    { font-size:34px !important; }
  .latest-counter__item-title p       { font-size:14px; }
}


/* ============================================================
   9. TEAM
   ============================================================ */
@media only screen and (max-width: 575px) {
  .latest-team__item-media-img-title          { margin-left:0 !important; padding:14px 12px; }
  .latest-team__item-media-img-title h3       { font-size:16px; }
  .latest-team__item-media-img-title span     { font-size:13px; }
}


/* ============================================================
   10. TESTIMONIAL
   ============================================================ */
@media only screen and (max-width: 767px) {
  .testimonial__item         { padding:24px 18px; }
  .testimonial__item-content p { font-size:15px; }
}
@media only screen and (max-width: 575px) {
  .testimonial__item         { padding:18px 14px; }
  .testimonial__author       { flex-direction:column; align-items:flex-start; gap:8px; }
}


/* ============================================================
   11. BLOG
   ============================================================ */
@media only screen and (max-width: 992px) {
  .latest-blog__item-media a img { height:220px; object-fit:cover; width:100%; }
}
@media only screen and (max-width: 767px) {
  .latest-blog__item-media a img { height:200px; }
  .latest-blog__item-text        { padding:18px 14px; }
}
@media only screen and (max-width: 575px) {
  .latest-blog2__right-content     { flex-direction:column; }
  .latest-blog2__right-content-img img { height:auto; width:100%; }
}


/* ============================================================
   12. CTA
   ============================================================ */
@media only screen and (max-width: 767px) {
  .cta__wrapper  { flex-direction:column; gap:20px; text-align:center; padding:30px 20px; }
  .cta__meida    { justify-content:center; }
}
@media only screen and (max-width: 575px) {
  .cta__subscribe form         { flex-direction:column; gap:10px; }
  .cta__subscribe form input,
  .cta__subscribe form button  { width:100%; }
}


/* ============================================================
   13. FOOTER
   ============================================================ */
@media only screen and (max-width: 992px) {
  .footer__area-common .footer-top::before { display:none; }
  .footer__widget.footer__widget-item-1,
  .footer__widget.footer__widget-item-2,
  .footer__widget.footer__widget-item-3    { max-width:100%; padding-left:0; }
}
@media only screen and (max-width: 767px) {
  .footer__area-common .footer-top { flex-direction:column; align-items:flex-start; gap:14px; }
  .footer__main .row               { row-gap:24px; }
  .footer-wrap                     { padding:40px 0 60px; }
}
@media only screen and (max-width: 575px) {
  .footer__area-common .footer-top .footer-top-left,
  .footer__area-common .footer-top .footer-top-right { flex-direction:column; gap:10px; }
  .footer_main h3                  { font-size:20px; }
  .footer__widget-title h4         { font-size:18px; margin-bottom:20px; }
  .footer__bottom-copyright .row   { flex-direction:column; gap:8px; }
}


/* ============================================================
   14. SECTION TITLES
   ============================================================ */
@media only screen and (max-width: 767px) {
  .section__title-wrapper-subtitle,
  .section__title-wrapper-black-subtitle,
  .section__title-wrapper-center-subtitle { font-size:18px; letter-spacing:0.8px; }
  .section__title-wrapper-title br,
  .section__title-wrapper-title-2 br      { display:none; }
  h1,h2,h3,h4,h5,h6 { word-break:break-word; overflow-wrap:break-word; }
}
@media only screen and (max-width: 575px) {
  .section__title-wrapper-subtitle,
  .section__title-wrapper-black-subtitle,
  .section__title-wrapper-center-subtitle { font-size:15px; letter-spacing:0.5px; }
  .mb-50 { margin-bottom:30px !important; }
  .mt-50 { margin-top:30px !important; }
}


/* ============================================================
   15. CONTACT PAGE
   ============================================================ */
@media only screen and (max-width: 992px) {
  .contact-us__widget img { height:60vh !important; margin-bottom:24px; }
}
@media only screen and (max-width: 575px) {
  .contact-us__widget img { height:40vh !important; }
}


/* ============================================================
   16. SPACING HELPERS
   ============================================================ */
@media only screen and (max-width: 767px) {
  .pt-130{padding-top:60px !important}  .pb-130{padding-bottom:60px !important}
  .pt-120{padding-top:55px !important}  .pb-120{padding-bottom:55px !important}
  .pt-100{padding-top:50px !important}  .pb-100{padding-bottom:50px !important}
  .pt-80 {padding-top:40px !important}  .pb-80 {padding-bottom:40px !important}
}
@media only screen and (max-width: 575px) {
  .pt-130{padding-top:50px !important}  .pb-130{padding-bottom:50px !important}
  .pt-120{padding-top:45px !important}  .pb-120{padding-bottom:45px !important}
  .pt-100{padding-top:40px !important}  .pb-100{padding-bottom:40px !important}
  .container,.container-fluid { padding-left:16px; padding-right:16px; }
}


/* ============================================================
   17. MISC
   ============================================================ */
section,.banner-home,.main-slider,.footer__area-common,.cta__area,.brand__area { overflow-x:hidden; }
@media only screen and (max-width: 767px) {
  iframe { width:100%; max-width:100%; }
}