/*====================================
    MOBILE RESPONSIVE STYLES
    All @media queries for mobile/tablet views
====================================*/

/* ============================================
   CLOCK RESPONSIVE STYLES
============================================ */
@media (max-width: 991px) {
    .cone-clock-wrapper #wBody {
        max-width: 320px;
    }
}

@media (max-width: 767px) {
    .cone-clock-wrapper {
        max-width: 280px;
        margin-top: -20px !important; /* Adjust this value to push clock up/down. Try: -30px, -40px, -50px, etc */
    }
    .cone-clock-wrapper #wBody {
        max-width: 280px;
        transform: translateY(-50px) !important; /* Adjust negative value to push up more: -40px, -50px, etc */
    }
    
    .cone-info-wrap {
        max-width: 100%;
        margin-top: 40px;
    }
    .breadcrumb-area {
        margin-top: 70px !important; /* Reduce space between header and breadcrumb area, adjust as needed */
    }
}

/* ============================================
   HEADER RESPONSIVE STYLES
============================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-topbar-info-wrapper {
        padding: 80px 0;
    }
}

/* Sticky header for mobile - fixed position when scrolling */
@media (max-width: 767px) {
    .header-sticky.sticky {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 99 !important;
        background: #fff !important;
        animation: sticky-mobile 1s;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    }

    @keyframes sticky-mobile {
        0% {
            top: -100px;
        }
        100% {
            top: 0;
        }
    }
}

@media (max-width: 767px) {
    /* Keep header contents aligned to the top on small screens */
    .infetech-header-area .header-wrapper {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px;
    }

    .infetech-header-area .templates-logo {
        text-align: left !important;
        padding: 10px 15px;
        position: relative;
        top: 0 !important; /* reset any previous offsets */
        margin: 0 0 0 20px !important; /* left margin pushes logo right, adjust value as needed */
        align-self: flex-start !important;
    }

    .infetech-header-area .header-box {
        width: auto;
        align-self: flex-start !important;
    }

    .header-main-nav {
        justify-content: flex-end !important;
        padding: 0 15px;
        align-self: flex-start !important;
    }

    /* Reduce space between header and banner */
    .infetech-header-area {
        margin-bottom: 100px !important;
    }
}

/* ============================================
   FOOTER RESPONSIVE STYLES
============================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .infetech-footer-area {
        padding: 60px 0;
    }
}

@media (max-width: 767px) {
    .infetech-footer-area {
        padding: 40px 0;
    }
    
    .infetech-footer-area .row {
        display: flex;
        flex-wrap: wrap;
    }
    
    /* Show logo at top center, hide description on mobile */
    .footer-about > a {
        display: flex !important;
        justify-content: center;
        align-items: flex-start;
        margin: 0 auto 10px auto;
        width: 100%;
    }
    .footer-about > p {
        display: block !important;
        text-align: center;
        margin: 6px auto 18px auto;
        max-width: 320px;
        font-size: 14px;
        line-height: 20px;
        color: #ffffff; /* adjust if footer background is light */
    }
    
    /* Contact section - left aligned (pushed down so logo has space) */
    .footer-section-contact {
        order: 1;
        flex: 0 0 65%;
        max-width: 65%;
        padding-right: 10px;
        
    }
    
    .footer-info {
        margin-top: 0;
        text-align: left !important;
    }
    
    .footer-info h4.title {
        text-align: left;
        margin-bottom: 15px;
        font-size: 18px;
    }
    
    .footer-info ul li {
        justify-content: flex-start !important;
        text-align: left !important;
        font-size: 12px;
        margin-bottom: 12px;
        gap: 10px;
        display: flex;
        align-items: flex-start;
    }
    
    .footer-info ul li i {
        flex-shrink: 0;
        margin-top: 3px;
    }
    
    .footer-info ul li span {
        word-break: break-word;
        text-align: left;
    }
    
    /* Social media section - will host centered logo at top and social icons at top-right */
    .footer-section-about {
        order: 0; /* place before other columns so logo sits on top */
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 10px 0 10px;
        position: relative;
    }

    .footer-about {
        text-align: center;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    
    /* keep social icons stacked vertically and positioned to the right of the footer area */
    .footer-about ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 12px !important;
        margin-top: 0;
        position: absolute;
        top: 160px; /* moved further down to avoid overlapping the logo + paragraph */
        right: 15px;
    }
    
    .footer-about ul li {
        margin: 0 !important;
    }
    
    .footer-about ul li a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(95, 45, 238, 0.1);
        transition: all 0.3s ease;
    }

    /* Center the logo link across full width */
    .footer-about > a {
        display: block !important;
        margin: 0 auto 12px auto;
        text-align: center;
        width: auto;
    }

    .footer-about > a img {
        display: inline-block;
        max-width: 170px; /* increased for larger footer logo on mobile */
        height: auto;
    }

    /* Home 1 page: slightly larger footer logo on mobile only */
    .home-1 .footer-about > a img {
        max-width: 170px !important;
    }

    /* Home 1: smaller social icons on mobile to better match larger logo */
    .home-1 .footer-about ul li a {
        width: 25px !important;
        height: 25px !important;
    }
    .home-1 .footer-about ul li a i {
        font-size: 14px !important;
    }
    
    .footer-about ul li a:hover {
        background: #5f2dee;
    }
    
    .footer-about ul li a i {
        font-size: 18px;
    }
    
    /* Hide newsletter and nav sections */
    .footer-section-newsletter {
        display: none;
    }
    
    .footer-section-nav {
        display: none;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .footer-section-nav ul {
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .footer-section-nav {
        display: none;
    }
    
    .footer-section-about {
        width: 100%;
    }
    
    .footer-section-contact {
        width: 100%;
    }
}

/* ============================================
   ABOUT SECTION RESPONSIVE STYLES
============================================ */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .infetech-about-content {
        padding-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .infetech-about-content {
        padding-left: 0;
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .infetech-about-content {
        padding-left: 0;
        margin-top: 40px;
    }
    
    .infetech-about-content > .title {
        font-size: 26px;
        line-height: 36px;
    }
    
    .infetech-about-content .about-card {
        margin-bottom: 20px;
        gap: 15px;
        align-items: center;
    }
    
    .infetech-about-content .about-card .icon {
        min-width: 70px;
        padding-left: 15px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .infetech-about-content > .title {
        font-size: 45px;
        line-height: 55px;
    }
}

/* ============================================
   FEATURES/SERVICES RESPONSIVE STYLES
============================================ */
@media (max-width: 767px) {
    .single-infetech-feature-item {
        margin-top: 40px;
    }
}

/* ============================================
   VAULT SECTION RESPONSIVE STYLES
============================================ */
@media (max-width: 767px) {
    .vault-scanner-section,
    .vault-container {
        min-height: 300px;
        height: 300px;
    }
}

@media only screen and (max-width: 576px) {
    .vault-scanner-section,
    .vault-container {
        min-height: 300px;
        height: 300px;
    }
    
    .vault-card-wrapper,
    .vault-card,
    .vault-card-normal,
    .vault-card-ascii {
        width: 300px;
        height: 188px;
    }
    
    .vault-card-line {
        gap: 20px;
    }
}

/* ============================================
   CAROUSEL RESPONSIVE STYLES
============================================ */
@media (max-width: 1280px) {
    .carousel-main-content {
        grid-template-columns: 1fr;
        grid-template-areas: "visuals" "text";
    }
}

@media (max-width: 768px) {
    .carousel-wrapper {
        padding: 30px;
    }
    
    .text-content h1 {
        font-size: 1.6rem;
        text-align: left;
    }
    
    .text-content h3 {
        font-size: 1.2rem;
        text-align: left;
    }
    
    .text-content p {
        font-size: 0.9rem;
        text-align: left;
    }
    
    .options-row {
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .option {
        flex: 1 1 45%;
        margin: 0;
        text-align: center;
    }
    
    .icon-circle {
        width: 40px;
        height: 40px;
        margin: 0 auto;
    }
    
    .option-title {
        font-size: 12px;
    }
    
    .option-subtitle {
        font-size: 10px;
    }
}

/* ============================================
   CTA SECTION RESPONSIVE STYLES
============================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .infetech-cta-box {
        padding: 30px;
    }
    
    .infetech-cta-box .cta-content .title {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .infetech-cta-box {
        padding: 30px;
    }
    
    .infetech-cta-box .cta-content .title {
        margin-top: 30px;
        font-size: 26px;
    }
}

/* ============================================
   SERVICE CARDS RESPONSIVE STYLES
============================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-infetech-serice-item {
        margin-bottom: 30px;
    }
}

/* ============================================
   TESTIMONIAL RESPONSIVE STYLES
============================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .infetech-testimonial-area {
        padding: 60px 0;
    }
}

/* ============================================
   BLOG RESPONSIVE STYLES
============================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .infetech-blog-area {
        padding: 60px 0;
    }
}

/* ============================================
   CONTACT SECTION RESPONSIVE STYLES
============================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .infetech-contact-area {
        padding: 60px 0;
    }
}

/* ============================================
   FAQ SECTION RESPONSIVE STYLES
============================================ */
@media (max-width: 767px) {
    .faq-item {
        margin-bottom: 15px;
    }
    
    .faq-question {
        font-size: 14px;
        padding: 12px 15px;
    }
    
    .faq-answer {
        font-size: 13px;
        padding: 0 15px;
        max-height: 0;
        overflow: hidden;
    }
}

/* ============================================
   BANNER RESPONSIVE STYLES
============================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .infetech-banner-area {
        padding: 40px 0;
    }
    
    .infetech-banner-content h1 {
        font-size: 32px;
        line-height: 42px;
    }
    
    .infetech-banner-content h4 {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .infetech-banner-area {
        padding: 30px 0;
        margin-top: 40px !important; /* Adjust this value to control space above banner. Try: 10px, 20px, 40px, etc */
    }
    
    .infetech-banner-content h1 {
        font-size: 24px;
        line-height: 32px;
    }
    
    .infetech-banner-content h4 {
        font-size: 12px;
    }
    
    .infetech-banner-content .main-btn {
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* ============================================
   SECTION PADDING RESPONSIVE STYLES
============================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pt-120 {
        padding-top: 60px;
    }
    
    .pb-120 {
        padding-bottom: 60px;
    }
    
    .pt-60 {
        padding-top: 40px;
    }
    
    .pb-60 {
        padding-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .pt-120 {
        padding-top: 40px;
    }
    
    .pb-120 {
        padding-bottom: 40px;
    }
    
    .pt-60 {
        padding-top: 25px;
    }
    
    .pb-60 {
        padding-bottom: 25px;
    }
}

/* ============================================
   CONTAINER & GRID RESPONSIVE STYLES
============================================ */
@media (max-width: 767px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
        
    }
}

/* ============================================
   BUTTON RESPONSIVE STYLES
============================================ */
@media (max-width: 767px) {
    .main-btn {
        padding: 10px 20px;
        font-size: 13px;
    }
    
    .main-btn:hover {
        transform: none;
    }
}

/* ============================================
   TEXT & TYPOGRAPHY RESPONSIVE STYLES
============================================ */
@media (max-width: 767px) {
    h1 {
        font-size: 24px;
        line-height: 32px;
    }
    
    h2 {
        font-size: 20px;
        
    }
    
    h3 {
        font-size: 18px;
        
    }
    
    h4 {
        font-size: 16px;
    }
    
    p {
        font-size: 14px;
        line-height: 22px;
    }
}

/* ============================================
   SECTION TITLE RESPONSIVE STYLES
============================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-title h2 {
        font-size: 28px;
        line-height: 36px;
    }
}

@media (max-width: 767px) {
    .section-title h2 {
        font-size: 22px;
        line-height: 30px;
    }
}

/* ============================================
   IMAGE RESPONSIVE STYLES
============================================ */
@media (max-width: 767px) {

        .breadcrumb-map {
                margin-top: -75px !important; /* Reduce space between header and map area in mobile view */
        }
    img {
        max-width: 100%;
        height: auto;
    }
    
    .img-fluid {
        width: 100%;
        height: auto;
    }
}

/* ============================================
   TOOLBAR POSITION ADJUSTMENTS BY PHONE SIZE
============================================ */

/* Extra small phones (320px - 374px) */
@media (max-width: 374px) {
    .header-main-info .header-mini-btn ul li a {
        margin-right: 30px !important;
    }
}

/* Small phones (375px - 424px) */
@media (min-width: 375px) and (max-width: 424px) {
    .header-main-info .header-mini-btn ul li a {
        margin-right: 35px !important;
    }
    
    .header-main-info .header-mini-btn ul li:last-child a {
        margin-right: 10px !important;
    }
}

/* Medium phones (425px - 599px) */
@media (min-width: 425px) and (max-width: 599px) {
    .header-main-info .header-mini-btn ul li a {
        margin-right: 40px !important;
    }
    
    .header-main-info .header-mini-btn ul li:last-child a {
        margin-right: 15px !important;
    }
}

/* Tablets/Large phones (600px - 767px) */
@media (min-width: 600px) and (max-width: 767px) {
    .header-main-info .header-mini-btn ul li a {
        margin-right: 45px !important;
    }
    
    .header-main-info .header-mini-btn ul li:last-child a {
        margin-right: 20px !important;
    }
}

/* ============================================
   HIDDEN ELEMENTS ON MOBILE
============================================ */
@media (max-width: 767px) {
    .hidden-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .visible-mobile-only {
        display: none !important;
    }
}

/* Service page (service-2.html) breadcrumb tweaks for smaller screens
   Scoped under .home-1 to reduce unintended effects on other templates. */
@media (max-width: 767px) {
    .home-1 .breadcrumb-area {
        
        min-height: auto !important; /* allow content to size naturally */
        background-position: center top !important;
    }

    .home-1 .breadcrumb-area .breadcrumb-item {
        padding: 12px 10px !important; /* tighten inner spacing */
    }

    .home-1 .breadcrumb-area .breadcrumb-item > div {
        gap: 12px !important;
        margin-bottom: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .home-1 .breadcrumb-area .breadcrumb-item i {
        font-size: 2.2rem !important; /* shrink the icons */
    }

    .home-1 .breadcrumb-area .breadcrumb-item .title {
        font-size: 28px !important; /* scale heading for mobile */
        line-height: 1.08 !important;
        margin-bottom: 10px !important;
        letter-spacing: -0.6px !important;
    }

    .home-1 .breadcrumb-area .breadcrumb-item p {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    /* thin decorative vertical bar inside the hero */
    .home-1 .breadcrumb-area .breadcrumb-item > div > div {
        width: 4px !important;
        height: 52px !important;
        opacity: 0.8 !important;
    }
}