/*
Theme Name: itsoft child
Tags:  custom-menu, editor-style, featured-images
Template: itsoft
Version: 1.0.0
*/


@import '../itsoft/style.css';



/*---------------------------------
  GLOBAL IT FIRM — RESPONSIVE CSS
  Covers: Mobile (≤576px), Tablet (577–991px), Desktop (992px+)
  Wide (1440px+), 4K (1920px+)
------------------------------------*/

/* ============================================================
   BASE — ensure all images and iframes scale
   ============================================================ */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
* { box-sizing: border-box; }

/* ============================================================
   NAVIGATION — show desktop nav from 768px (md) onwards
   Must use !important to beat Bootstrap's d-md-none !important
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
  /* Force desktop nav visible on tablet — beat Bootstrap d-md-none */
  .itsoft-main-menu.d-md-none,
  .itsoft-main-menu.d-sm-none,
  div.itsoft-main-menu {
    display: block !important;
  }
  /* Hide mobile menu on tablet */
  .home-2.mbm,
  div.home-2.mbm {
    display: none !important;
  }
  .mobile_logo_area {
    display: none !important;
  }
}

/* Ensure desktop nav stays hidden on small mobile */
@media (max-width: 767px) {
  .itsoft-main-menu,
  div.itsoft-main-menu {
    display: none !important;
  }
  .home-2.mbm {
    display: block !important;
  }
  .mobile_logo_area {
    display: block !important;
  }
}

/* ============================================================
   HEADER — consistent height and padding
   ============================================================ */
.em40_header_area_main {
  position: relative;
  z-index: 999;
}

.itsoft_nav_area, .trp_nav_area {
  padding: 0 15px;
}

.itsoft-main-menu .itsoft_nav_area .row,
.itsoft-main-menu .trp_nav_area .row {
  align-items: center;
}

/* Logo scaling */
.itsoft-main-menu .col-md-3 img,
.itsoft-main-menu .col-md-2 img {
  max-height: 60px;
  width: auto;
}

@media (min-width: 768px) and (max-width: 991px) {
  .itsoft_nav_area, .trp_nav_area {
    padding: 8px 15px;
  }
  .itsoft-main-menu .col-md-3 img {
    max-height: 45px;
  }
  /* Shrink nav font size on tablet to fit */
  .itsoft_menu ul li a {
    font-size: 12px !important;
    padding: 20px 8px !important;
  }
}

/* ============================================================
   HERO / BANNER SLIDER — responsive text and height
   Targets: .banner-area .banner-content.banner-slick (slick slider)
   ============================================================ */
.banner-area {
  overflow: hidden;
  position: relative;
}

/* Large desktop 1440px+ */
@media (min-width: 1440px) {
  .banner-content.banner-slick h1,
  .banner-content.banner-slick h2 {
    font-size: 66px !important;
    line-height: 1.15 !important;
  }
}

/* Standard desktop 992–1439px */
@media (min-width: 992px) and (max-width: 1439px) {
  .banner-content.banner-slick h1,
  .banner-content.banner-slick h2 {
    font-size: 52px !important;
    line-height: 1.2 !important;
  }
}

/* Tablet 768–991px */
@media (min-width: 768px) and (max-width: 991px) {
  .banner-area {
    min-height: 460px;
  }
  .banner-content.banner-slick {
    padding: 20px 25px !important;
    max-width: 85% !important;
    overflow: visible;
  }
  .banner-content.banner-slick h1 {
    font-size: 36px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }
  .banner-content.banner-slick h2 {
    font-size: 30px !important;
    line-height: 1.25 !important;
  }
  .banner-content.banner-slick p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }
  /* Hide the video/introduction floating button — it overflows on tablet */
  .slider-video-icon,
  .slider-video-btn,
  .video-play-btn {
    display: none !important;
  }
  .banner-content.banner-slick a.btn,
  .banner-content.banner-slick .em_slider_btn a {
    font-size: 14px !important;
    padding: 11px 24px !important;
  }
  /* Slick dots */
  .slick-dots li button {
    width: 12px !important;
    height: 12px !important;
  }
}

/* Mobile ≤767px */
@media (max-width: 767px) {
  .banner-area {
    min-height: 400px;
  }
  .banner-content.banner-slick {
    padding: 15px !important;
    text-align: center !important;
    max-width: 100% !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
    transform: none !important;
  }
  .banner-content.banner-slick h1 {
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  .banner-content.banner-slick h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
  }
  .banner-content.banner-slick p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
    word-wrap: break-word !important;
  }
  .banner-content.banner-slick span,
  .banner-content.banner-slick .sub-title {
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }
  /* Center buttons and stack them */
  .banner-content.banner-slick .em_slider_btn,
  .banner-content.banner-slick .slider-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .banner-content.banner-slick a.btn,
  .banner-content.banner-slick .em_slider_btn a {
    font-size: 13px !important;
    padding: 12px 28px !important;
    width: auto !important;
    display: inline-block !important;
  }
  /* Hide video intro button on mobile */
  .slider-video-icon,
  .slider-video-btn,
  .video-play-btn {
    display: none !important;
  }
  /* Decorative shapes — hide on mobile to avoid overflow */
  .slider-shape1,
  .slider-shape2,
  .slider-shape3,
  .slider_single_img {
    display: none !important;
  }
  /* Slick dots — bigger tap targets */
  .slick-dots {
    bottom: 15px !important;
  }
  .slick-dots li {
    width: 20px !important;
    height: 20px !important;
  }
  .slick-dots li button {
    width: 12px !important;
    height: 12px !important;
  }
}

/* ============================================================
   SECTION HEADINGS — scale on smaller screens
   ============================================================ */
@media (max-width: 991px) {
  .em40_section_title h2,
  .section-title h2,
  .itsoft-section-title h2 {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }
  .em40_section_title h3,
  .section-title h3 {
    font-size: 22px !important;
  }
}

@media (max-width: 767px) {
  .em40_section_title h2,
  .section-title h2,
  .itsoft-section-title h2 {
    font-size: 24px !important;
    line-height: 1.35 !important;
  }
  .em40_section_title p,
  .section-title p {
    font-size: 14px !important;
  }
}

/* ============================================================
   GRID LAYOUTS — stack columns on mobile
   ============================================================ */
@media (max-width: 767px) {
  /* Force single column on mobile */
  .col-sm-6:not(.keep-cols),
  .col-sm-4:not(.keep-cols),
  .col-sm-3:not(.keep-cols) {
    width: 100%;
    margin-bottom: 20px;
  }

  /* Service boxes */
  .em40_single_service,
  .em40_services_item,
  .itsoft-service-box {
    margin-bottom: 25px;
    padding: 25px 20px !important;
  }

  /* About / content sections */
  .em40_about_area .col-md-6,
  .em40_about_area .col-lg-6 {
    margin-bottom: 30px;
  }

  /* Team, portfolio, blog cards */
  .em40_team_member,
  .em40_portfolio_item,
  .em40_blog_item {
    margin-bottom: 30px;
  }
}

/* 2 columns on tablet for service/team/portfolio cards */
@media (min-width: 576px) and (max-width: 991px) {
  .em40_single_service,
  .em40_services_item {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ============================================================
   SECTIONS — padding on mobile
   ============================================================ */
@media (max-width: 767px) {
  section,
  .em40_about_area,
  .em40_services_area,
  .em40_team_area,
  .em40_blog_area,
  .em40_counter_area,
  .em40_testimonial_area,
  .em40_portfolio_area,
  .em40_cta_area,
  .em40_contact_area {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  section,
  .em40_about_area,
  .em40_services_area {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

/* ============================================================
   ABOUT SECTION — image + text layout
   ============================================================ */
@media (max-width: 767px) {
  .em40_about_area .about-img,
  .em40_about_area .about-image {
    margin-bottom: 30px;
    text-align: center;
  }
  .em40_about_area .about-img img,
  .em40_about_area .about-image img {
    max-width: 90%;
    margin: 0 auto;
    display: block;
  }
}

/* ============================================================
   COUNTER / FACTS SECTION
   ============================================================ */
@media (max-width: 767px) {
  .em40_single_counter,
  .em40_counter_item {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px 10px;
  }
  .em40_single_counter h2,
  .em40_counter_item h2 {
    font-size: 36px !important;
  }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
@media (max-width: 767px) {
  .em40_testimonial_area .owl-item {
    padding: 0 5px;
  }
  .em40_single_testimonial,
  .itsoft-testimonial-box {
    padding: 25px 20px !important;
  }
}

/* ============================================================
   BLOG CARDS
   ============================================================ */
@media (max-width: 767px) {
  .em40_single_blog .blog-img img,
  .em40_blog_item .blog-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  .em40_single_blog .blog-content,
  .em40_blog_item .blog-content {
    padding: 20px 15px !important;
  }
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
@media (max-width: 767px) {
  .em40_contact_area .contact-form input,
  .em40_contact_area .contact-form textarea,
  .wpcf7-form input,
  .wpcf7-form textarea,
  .wpcf7-form select {
    width: 100% !important;
    font-size: 14px !important;
    padding: 12px 15px !important;
  }
  .wpcf7-form .wpcf7-submit,
  .em40_contact_area .contact-form button[type="submit"] {
    width: 100%;
    padding: 14px !important;
    font-size: 15px !important;
  }
  /* Stack 2-col name fields */
  .wpcf7-form .name-fields {
    flex-direction: column;
  }
  .wpcf7-form .name-fields .wpcf7-form-control-wrap {
    width: 100% !important;
    margin-bottom: 10px;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
@media (max-width: 767px) {
  .em40_footer_area .footer-widget {
    margin-bottom: 35px;
    text-align: center;
  }
  .em40_footer_area .footer-widget ul li {
    text-align: center;
  }
  .em40_footer_area .footer-logo {
    text-align: center;
    margin-bottom: 15px;
  }
  .em40_copyright_area p {
    text-align: center !important;
    font-size: 13px;
  }
  .em40_copyright_area .col-md-6 + .col-md-6 {
    margin-top: 10px;
    text-align: center;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .em40_footer_area .footer-widget {
    margin-bottom: 30px;
  }
}

/* ============================================================
   CALL TO ACTION SECTION
   ============================================================ */
@media (max-width: 767px) {
  .em40_cta_area,
  .itsoft-cta-area {
    text-align: center;
  }
  .em40_cta_area h2,
  .itsoft-cta-area h2 {
    font-size: 24px !important;
    margin-bottom: 20px;
  }
  .em40_cta_area .cta-btn,
  .itsoft-cta-area a.btn {
    display: block;
    width: 100%;
    margin: 5px 0;
    text-align: center;
  }
}

/* ============================================================
   MOBILE MENU IMPROVEMENTS
   ============================================================ */
@media (max-width: 767px) {
  /* Make hamburger icon and logo area bigger / easier to tap */
  .home-2.mbm .menu_area {
    padding: 0;
  }
  /* Ensure mobile nav links have enough tap target height */
  .mean-nav ul li a {
    padding: 14px 5% !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .mean-container .mean-bar {
    padding: 10px 0 !important;
  }
}

/* ============================================================
   BUTTONS — min touch target size on mobile
   ============================================================ */
@media (max-width: 767px) {
  a.btn,
  button,
  input[type="submit"],
  .em40_btn a,
  .itsoft-btn,
  .dtbtn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   WIDE DESKTOP (1440px+) — max width content guard
   ============================================================ */
@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1600px;
  }
  body {
    font-size: 17px;
  }
}

/* ============================================================
   ELEMENTOR RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 767px) {
  .elementor-column {
    width: 100% !important;
  }
  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
  .elementor-widget-image img {
    max-width: 100%;
  }
  .elementor-heading-widget h1,
  .elementor-heading-widget h2 {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .elementor-column.elementor-col-50 {
    width: 100% !important;
  }
  .elementor-heading-widget h1,
  .elementor-heading-widget h2 {
    font-size: 32px !important;
  }
}

/* ============================================================
   OVERFLOW FIX — prevent horizontal scroll on mobile
   ============================================================ */
body, html {
  overflow-x: hidden;
  max-width: 100%;
}

@media (max-width: 767px) {
  .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
  }
}