/* =============================================================
   Sathyainfo – Site Layout & Page Utilities
   ============================================================= */

/* ---- Navigation font scaling -------------------------------- */
@media (min-width: 992px) and (max-width: 1050px) {
    .full-width-header .rs-header .main-menu .rs-menu ul.nav-menu > li > a { font-size: 10px; }
}
@media (min-width: 1051px) and (max-width: 1225px) {
    .full-width-header .rs-header .main-menu .rs-menu ul.nav-menu > li > a { font-size: 11px; }
}
@media (min-width: 1226px) and (max-width: 1295px) {
    .full-width-header .rs-header .main-menu .rs-menu ul.nav-menu > li > a { font-size: 12px; }
}
@media (min-width: 1296px) and (max-width: 1400px) {
    .full-width-header .rs-header .main-menu .rs-menu ul.nav-menu > li > a { font-size: 13px; }
}
@media (min-width: 992px) and (max-width: 1725px) {
    .rs-menu ul ul li > ul.Side-sub-menu { left: auto !important; top: -8px; right: 230px !important; }
}
@media (min-width: 980px) {
    .container.menu-container { max-width: fit-content !important; }
}

/* ---- Toolbar ------------------------------------------------ */
.toolbar-contact-bar { text-align: left; }
.full-width-header .toolbar-area .toolbar-contact ul li { margin-right: 14px; }

@media (max-width: 500px) {
    ul.support-drop { left: -70px !important; }
    ul.top-menu li { margin: 0 !important; width: 49%; text-align: center; }
    ul.support-drop li { width: 100%; }
}

/* ---- Misc layout -------------------------------------------- */
.dun-seal iframe { height: 120px; }
.client-contact-services .client-service .service-icon i:hover { cursor: pointer; }

/* ---- Twitter / X icon --------------------------------------- */
.twitter-x-icon {
    width: 35px;
    height: 35px;
    margin-left: 15px;
    transition-duration: .5s;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    line-height: 35px;
    background: #4b4a49;
}
.social-telegram-icon { background-color: #3399ff; }

/* ---- Partners strip ----------------------------------------- */
.partners-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px 0;
    background-color: #ececec;
}
.partner-logo-lg { height: 90px; }
.partnersimg { height: 70px; }

/* ---- IoT submenu -------------------------------------------- */
.iot-submenu-item { background: white; }

/* ---- Floating widgets --------------------------------------- */
.floating-wapp { position: fixed; left: 20px; top: 70%; z-index: 9999; }
.floating-telegram-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    font-size: 22px;
    border-radius: 50%;
    background-color: #3399ff;
    color: #fff;
    text-align: center;
    animation: animatetele 2s linear 2s;
}
.livechat-widget { position: fixed; right: 0; top: 55%; display: inline-grid; z-index: 9999; }
.livechat-img { height: 120px; }

/* ---- Modal overrides ---------------------------------------- */
.modal-title-centered { text-align: center; width: 95%; }
.modal-footer-centered { justify-content: center; }
.modal-title-full { width: 100%; }

#mymodelvideo { top: 15%; }
.video-modal-close {
    position: absolute;
    right: 0;
    background-color: #fff;
    width: 35px;
    height: 35px;
    opacity: 1;
    z-index: 9999;
}

/* =============================================================
   Home Page – Sections
   ============================================================= */

/* Slider backgrounds */
.rs-hostlab-slider .slider-cloudAccounting  { background-image: url('/assets/Image/HomePage/banner1.png');  background-repeat: no-repeat; background-size: cover; background-position: center; }
.rs-hostlab-slider .slider-Business-Email   { background-image: url('/assets/Image/HomePage/banner4.png');  background-repeat: no-repeat; background-size: cover; background-position: center; }
.rs-hostlab-slider .slider-WebDomain        { background-image: url('/assets/Image/HomePage/banner5.png');  background-repeat: no-repeat; background-size: cover; background-position: center; }
.rs-hostlab-slider .slider-seo              { background-image: url('/assets/Image/HomePage/banner6.png');  background-repeat: no-repeat; background-size: cover; background-position: center; }
.rs-hostlab-slider .slider-WebHosting       { background-image: url('/assets/Image/HomePage/banner7.png');  background-repeat: no-repeat; background-size: cover; background-position: center; }
.rs-hostlab-slider .slider-Software         { background-image: url('/assets/Image/HomePage/banner8.png');  background-repeat: no-repeat; background-size: cover; background-position: center; }
.rs-hostlab-slider .slider-Hardware         { background-image: url('/assets/Image/HomePage/banner9.png');  background-repeat: no-repeat; background-size: cover; background-position: center; }
.rs-hostlab-slider .slider-WebDesign        { background-image: url('/assets/Image/HomePage/banner10.png'); background-repeat: no-repeat; background-size: cover; background-position: center; }
.rs-hostlab-slider .slider-CloudStorage     { background-image: url('/assets/Image/HomePage/banner2.png');  background-repeat: no-repeat; background-size: cover; background-position: center; }
.rs-hostlab-slider .slider-CloudBackUp      { background-image: url('/assets/Image/HomePage/banner3.png');  background-repeat: no-repeat; background-size: cover; background-position: center; }

/* Section spacing */
.section-padding-lg { padding: 5rem 0; }
.section-padding-md { padding: 4.5rem 0; }

/* Section backgrounds */
.section-hero-gradient    { background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%); }
.section-process-gradient { background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%); }

/* Dark-overlay sections (background image + tint) */
.section-overlay { position: relative; background-size: cover; }
.section-bg-partner-2 { background-image: url('/assets/images/home/footerbanner2.jpg'); background-position: center; }
.section-bg-partner-1 { background-image: url('/assets/images/home/footerbanner1.jpg'); background-position: 36% 50%; }
.dark-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); z-index: 0; }
.section-overlay-inner { position: relative; z-index: 1; }

/* Home images */
.hero-img    { max-height: 380px; object-fit: cover; }
.service-img { max-width: 280px; }

/* Text helpers for dark backgrounds */
.text-white-75 { color: rgba(255,255,255,.75); }
.text-accent   { color: var(--sathya-primary-light, #6ea8fe); }

/* Brand / partner logos on dark overlay */
.brand-logo      { max-height: 48px; filter: brightness(0) invert(1); opacity: .8; }
.brand-logo-md   { max-height: 40px; filter: brightness(0) invert(1); opacity: .8; }
.brand-logo-sm   { max-height: 44px; filter: brightness(0) invert(1); opacity: .8; }
.brand-logo-cert { max-height: 52px; opacity: .85; }

/* Hidden JS-only close buttons in modals */
.disnone-view { display: none; }

/* =============================================================
   Card grid — equal height, spacing, image centering
   ============================================================= */

/* Auto-apply Bootstrap's vertical gutter to every row whose direct
   column children contain a card. Bootstrap reads --bs-gutter-y via
   `row > * { margin-top: var(--bs-gutter-y) }`, so setting the custom
   property here gives consistent 24px vertical gaps on all card grids
   site-wide — including files that don't have an explicit g-4 class.
   Files that already have .g-4 set the same value; no conflict. */
.row:has(> [class*="col"] > .new-sg-card),
.row:has(> [class*="col"] > .new-sg-card-1),
.row:has(> [class*="col"] > .new-sg-card-3) {
    --bs-gutter-y: 1.5rem;
}

/* Stretch cards to fill their column height so every card in a row
   is the same height. Zero the card's own auto-margin because the
   Bootstrap gutter (above) handles all vertical spacing. */
.row > [class*="col"] > .new-sg-card,
.row > [class*="col"] > .new-sg-card-1,
.row > [class*="col"] > .new-sg-card-3 {
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

/* Center icon images inside cards (style.css forces a fixed width
   but leaves no horizontal centering rule). */
.new-sg-card img,
.new-sg-card-1 img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Center hardware / product icon images */
.home-product-image {
    display: block;
    margin: 0 auto;
}

/* Responsive padding for big-card two-column content blocks */
@media (max-width: 767px) {
    .big-card { padding: 2rem 1.25rem; }
}

/* Misc */
.sitemap_link h4 { margin: 0; }

/* =============================================================
   Banner / Hero Section — Improvements
   ============================================================= */

/* --- 1. Responsive banner image height ---
   style.css forces height:400px !important which clips images on
   narrow viewports and looks flat on wide screens. Override with a
   fluid, clamped value and object-fit to keep subject visible. */
.new-sathya-banner img {
    height: clamp(340px, 32vw, 500px) !important;
    width: 100% !important;
    object-fit: cover;
    object-position: center top;
}

/* --- 2. Directional dark gradient overlay ---
   A semi-transparent dark gradient over the background image ensures
   white text is always legible without hiding the image.
   Left-to-right for default (form on left). Reversed for .to-right
   layouts (Hardware, SSL, Hosting — form on left but content div
   carries the .to-right modifier meaning the visual weight shifts
   to the right side). */
.new-sathya-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(8, 18, 55, 0.82) 0%,
        rgba(8, 18, 55, 0.55) 40%,
        rgba(8, 18, 55, 0.15) 68%,
        transparent 100%
    );
}

/* Reverse gradient when content sits on the right side */
.new-sathya-banner:has(.new-sathya-banner-content.to-right)::before {
    background: linear-gradient(
        270deg,
        rgba(8, 18, 55, 0.82) 0%,
        rgba(8, 18, 55, 0.55) 40%,
        rgba(8, 18, 55, 0.15) 68%,
        transparent 100%
    );
}

/* Content overlay must sit above the gradient pseudo-element */
.new-sathya-banner .new-sathya-banner-content {
    z-index: 2;
}

/* --- 3. White text on all product banners ---
   With the gradient overlay present, white text is always safe.
   Removes the need for inline style="color:#fff" on individual pages
   and for the .to-dark modifier to control text colour. */
.new-sathya-banner-content h1,
.new-sathya-banner-content h3 {
    color: #fff !important;
}

/* Span inside banner h3 sometimes carries an inline line-height override */
.new-sathya-banner-content h3 span {
    line-height: inherit !important;
}

/* --- 4. Responsive typography ---
   style.css uses fixed 36px/20px. Replace with fluid clamp() values
   so headings scale naturally between phone and wide desktop. */
.new-sathya-banner-content h1 {
    font-size: clamp(1.5rem, 3.2vw, 2.25rem) !important;
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.5rem !important;
}

.new-sathya-banner-content h3 {
    font-size: clamp(0.9rem, 1.8vw, 1.15rem) !important;
    font-weight: 400;
    line-height: 1.6;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    margin-bottom: 1rem !important;
}

/* --- 5. Banner content vertical centering ---
   The content overlay is position:absolute filling the banner height.
   Setting display:flex + align-items:center on the inner wrapper
   vertically centres the form within the available space. */
.produtc-detail-page-slide .content-inner {
    display: flex;
    align-items: center;
    min-height: clamp(340px, 32vw, 500px);
}

/* --- 6. Fix broken mobile text-colour override ---
   style.css forces color:#353535 !important on 20+ specific banner
   selectors at max-width:767px. With our gradient overlay, dark text
   on a dark background becomes unreadable. Override to white for all. */
@media screen and (max-width: 767px) {
    .new-sathya-banner-content h1,
    .new-sathya-banner-content h3 {
        color: #fff !important;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
    }
    .new-sathya-banner img {
        object-position: center center;
    }
}

/* --- 7. Tablet (768px–992px) ---
   style.css hides <img>, switches each banner to a CSS background-
   image, adds a white ::before overlay, and centres text.
   Override the white overlay with our dark gradient and restore
   left-aligned text so the form reads correctly. */
@media screen and (max-width: 992px) and (min-width: 768px) {
    .new-sathya-banner::before {
        background: linear-gradient(
            90deg,
            rgba(8, 18, 55, 0.85) 0%,
            rgba(8, 18, 55, 0.60) 42%,
            rgba(8, 18, 55, 0.20) 72%,
            transparent 100%
        );
    }
    .new-sathya-banner:has(.new-sathya-banner-content.to-right)::before {
        background: linear-gradient(
            270deg,
            rgba(8, 18, 55, 0.85) 0%,
            rgba(8, 18, 55, 0.60) 42%,
            rgba(8, 18, 55, 0.20) 72%,
            transparent 100%
        );
    }
    .new-sathya-banner-content {
        text-align: left !important;
    }
    .new-sathya-banner-content h1,
    .new-sathya-banner-content h3 {
        color: #fff !important;
    }
    /* Limit the form column width so it doesn't span the full screen */
    .new-sathya-banner-content .col-md-6 {
        max-width: 58% !important;
        width: 58% !important;
        flex: none !important;
    }
}

/* --- 8. Responsive enquiry form ---
   style.css uses width:48% float for side-by-side inputs. Replace with
   flexbox for correct wrapping, consistent gaps, and full-width stacking
   on small screens. Inputs get a frosted-glass look that works on any
   background image. */
.small-en-form {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0.75rem !important;
    width: 100%;
}

/* Error/success label always spans full width above the inputs */
.small-en-form label {
    flex: 1 1 100%;
    order: -1;
    margin: 0 !important;
    padding: 0;
    min-height: 0;
    font-size: 0.78rem;
    line-height: 1.3;
}

.small-en-form input {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 130px;
    width: auto !important;
    margin-bottom: 0 !important;
    padding: 9px 12px !important;
    border-radius: 5px !important;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #1a1a2e;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important;
    transition: background 0.2s, box-shadow 0.2s;
}

.small-en-form input:focus {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28) !important;
    outline: none;
}

.small-en-form input::placeholder {
    color: #555;
    font-size: 0.82rem;
}

/* Hidden service field — never show it */
.small-en-form input[type="hidden"] {
    display: none !important;
}

/* CTA button spans full width so it stands out clearly below the input pair */
.small-en-form button {
    flex: 1 1 100%;
    margin-top: 4px;
    letter-spacing: 0.02em;
}

/* Stack inputs full-width on phones */
@media (max-width: 480px) {
    .small-en-form input {
        flex: 1 1 100% !important;
        min-width: unset;
    }
}