/* =====================================================================
   TABLET / "DESKTOP SITE" ON A PHONE  (loaded only for 768px - 1099px wide screens)
   Phone browsers in "desktop site" mode lay the page out about 980px wide. The template's own rules for that
   width stack everything in one tall column with a huge photo; here it gets a proper two-column hero and tidy grids.
   Laptops (1100px and up) and phones (767px and below) never load this file.
   ===================================================================== */

/* hero: text on the left, engineer on the right (like the laptop layout) */
.home-page .ch-main-hero .ch-main-hero-wrap { padding: 150px 0 0 !important; min-height: 640px; }
.home-page .ch-main-hero .row { margin: 0; }
.home-page .ch-main-hero .row > [class*="col-"] { padding: 0; }
.home-page .ch-main-hero .ch-main-hero-text { max-width: 56%; text-align: left !important; padding-bottom: 60px; position: relative; z-index: 3; }
.home-page .ch-main-hero .ch-main-hero-text h1 { font-size: 42px !important; line-height: 52px !important; margin: 0 0 16px !important; }
.home-page .ch-main-hero .ch-main-hero-text p { font-size: 16px !important; max-width: 460px; margin: 0 !important; }
.home-page .ch-main-hero .hud-emblem, .home-page .ch-main-hero .arrow, .home-page .hero-hud { display: none !important; }
.home-page .ch-main-hero .right-image { position: absolute !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 36%; max-width: 340px; }
.home-page .ch-main-hero .right-image img { width: 100% !important; max-width: none !important; height: auto; }
.home-page .ch-main-hero .right-image .right-image-inner .box { width: 70% !important; height: auto !important; aspect-ratio: 1 / 1; left: 50% !important; top: 30% !important; transform: translate(-50%, -50%); animation: tSpin 30s linear infinite !important; }
.home-page .ch-main-hero .right-image .right-image-inner::before { left: 50% !important; top: 30% !important; width: 88% !important; height: auto !important; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); animation: tSpinRev 9s linear infinite !important; }
@keyframes tSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes tSpinRev { from { transform: translate(-50%, -50%) rotate(360deg); } to { transform: translate(-50%, -50%) rotate(0deg); } }

/* the three feature boxes side by side */
.home-page .features-area .features-wrap > .row > [class*="col-"] { flex: 0 0 33.3333%; max-width: 33.3333%; }
.home-page .features-area .features-item { flex-direction: column; text-align: center; padding: 20px 14px !important; gap: 8px; }
.home-page .features-area .features-item .features-text h3 { font-size: 17px; }
.home-page .features-area .features-item .features-text p { font-size: 13px; }

/* sections: comfortable but not tall */
.home-page .offers-area, .home-page .announcement-section, .home-page .home-store-area, .home-page .service-area,
.home-page .choose-area, .home-page .team-area, .home-page .about-area, .home-page .contact-section { padding-top: 46px !important; padding-bottom: 40px !important; }

/* about: the photo collage is hidden, the text gets the full width */
.home-page .about-area .about-left-item { display: none !important; }
.home-page .about-area .about-right-text { max-width: none; margin: 0; }

/* team: three across */
.home-page .team-area .team-wrap .row > [class*="col-"] { flex: 0 0 33.3333%; max-width: 33.3333%; }

/* footer: gallery widget out, links in two neat columns */
.footer-section .widget.instagram { display: none !important; }


/* =====================================================================
   ROUND 2 (tablet / "desktop site" on a phone)
   ===================================================================== */
/* use the whole screen width - the template kept a 720px column with empty bands on both sides */
.container { max-width: 100% !important; padding-left: 30px !important; padding-right: 30px !important; }
.container-fluid { padding-left: 30px; padding-right: 30px; }
.header-main-wrap .container-fluid { padding-left: 22px; padding-right: 22px; }

/* store / offers / news / services: one card centred at a time, with the next and previous one peeking in */
.m-viewport { width: calc(100% + 60px) !important; margin-left: -30px !important; margin-right: -30px !important; }
[data-mswipe].m-swipe { padding: 8px 19% 14px !important; gap: 18px !important; }
[data-mswipe].m-swipe > * { flex: 0 0 60% !important; width: 60% !important; max-width: 60% !important; }
.m-swipe-dot { width: 8px; height: 8px; }

/* cards: same photo-with-title look as on phones */
.home-page .offer-card { height: auto !important; border-radius: 18px !important; overflow: hidden; }
.home-page .offer-card .offer-img { height: 200px !important; flex: 0 0 200px !important; aspect-ratio: auto !important; }
.home-page .offer-card .offer-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 8, 22, 0) 38%, rgba(11, 15, 52, 0.55) 68%, rgba(11, 15, 52, 0.97) 100%) !important; }
.home-page .offer-card .offer-body { position: relative; z-index: 2; margin-top: -56px; padding: 0 18px 18px !important; }
.home-page .offer-card .offer-body h3 { font-size: 18px !important; min-height: 0 !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.home-page .offer-card .offer-body p { font-size: 13.5px; -webkit-line-clamp: 3; }

/* team: photo first, name and role underneath (they used to sit on top of the faces) */
.home-page .team-area .team-item { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.home-page .team-area .team-item .team-img { width: 100% !important; height: auto !important; border-radius: 16px !important; padding: 0 !important; }
.home-page .team-area .team-item .team-img img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px !important; }
.home-page .team-area .team-item .team-text { position: static !important; transform: none !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 10px 6px 2px !important; background: none !important; box-shadow: none !important; text-align: center !important; }
.home-page .team-area .team-item .team-text::before, .home-page .team-area .team-item .team-text::after { display: none !important; }
.home-page .team-area .team-item .team-text h3, .home-page .team-area .team-item .team-text h3 a { font-size: 17px !important; line-height: 1.25 !important; margin: 0 !important; }
.home-page .team-area .team-item .team-text span { font-size: 13px !important; display: block; }
.home-page .team-area .team-item .back-shape { display: none !important; }

/* company text stays a heading box + plain text here too */
.home-page .seo-intro .seo-card { max-width: none; margin: 0; padding: 22px 20px; border-radius: 18px; border: 2px solid transparent; text-align: center;
  background: linear-gradient(160deg, #171d55, #0b0f34) padding-box, conic-gradient(from var(--fx-a), rgba(124, 58, 237, 0.22) 0deg, rgba(124, 58, 237, 0.22) 245deg, #7c3aed 285deg, #22d3ee 330deg, #fff 350deg, rgba(124, 58, 237, 0.22) 360deg) border-box; animation: fxOrbit 5.5s linear infinite; }
.home-page .seo-intro .seo-card h2 { background-image: linear-gradient(90deg, #22d3ee, #34d399, #fbbf24, #ff6ec7, #a78bfa, #22d3ee); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: tFlow 8s linear infinite; }
.home-page .seo-intro .seo-text { max-width: none; margin: 0; padding-top: 18px; }
.home-page .ch-main-hero .ch-main-hero-text h1 { background-image: linear-gradient(90deg, #ffd166, #ff9f43, #fff3c4, #ffd166) !important; background-size: 200% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; animation: tFlow 9s linear infinite; text-shadow: none !important; }
.home-page .ch-main-hero .ch-main-hero-text h1 span { background-image: linear-gradient(90deg, #22d3ee, #a855f7, #ff6ec7, #22d3ee) !important; background-size: 200% 100% !important; animation: tFlow 7s linear infinite; }
@keyframes tFlow { to { background-position: 200% 50%; } }

/* contact + about: compact like on phones */
.home-page .about-area .about-features-wrap, .home-page .about-area .about-list { display: none !important; }
.home-page .contact-section { padding-top: 40px !important; padding-bottom: 20px !important; }
/* the map wrapper carried a fixed 557px height from the desktop layout (where it is absolutely positioned
   behind the form); left in place here it reserved that height as a blank block below the visible map */
.home-page .contact-section .map { position: relative !important; height: auto !important; min-height: 0 !important; margin: 20px 0 0 !important; padding: 0 !important; }
.home-page .contact-section .map iframe { width: 100%; height: 300px !important; border-radius: 16px; }
/* the small round icon on a service photo sat on top of the title once the title was moved onto the picture */
.svc-icon { display: none !important; }
/* announcement heading: same small-label + big-title look as every other section on this page */
.home-page .announcement-section .ann-header { text-align: center !important; }
.home-page .ann-label {
  display: inline-block !important; background: none !important; color: #22d3ee !important; font-size: 14px !important;
  font-weight: 700 !important; letter-spacing: 2.5px !important; padding: 0 !important; margin: 0 0 6px !important;
  border-radius: 0 !important; animation: none !important; box-shadow: none !important;
}
.home-page .announcement-section h2 { font-size: 35px !important; line-height: 40px !important; }

/* inner pages: comfortable padding */
.inner-page .ptb-120, .inner-page [class*="ptb-"] { padding-top: 50px !important; padding-bottom: 50px !important; }
.store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }
.store-hero { padding-top: 120px !important; }
.store-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
.store-tile .store-tile-img { aspect-ratio: 16 / 9 !important; }
.store-tile .store-tile-body { padding: 18px 20px 22px !important; }
.store-tile h2 { font-size: 22px !important; }


/* gallery: three across, photos in a three-column masonry, titles on the pictures */
.inner-page #subcatCardGrid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 !important; }
.inner-page #subcatCardGrid > .subcat-col-item { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; flex: none !important; }
.inner-page .subcat-card { position: relative; overflow: hidden; border-radius: 18px !important; }
.inner-page .subcat-thumb-wrap { height: 240px !important; }
.inner-page .subcat-thumb-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 8, 22, 0) 38%, rgba(11, 15, 52, 0.6) 68%, rgba(11, 15, 52, 0.98) 100%); }
.inner-page .subcat-count-overlay { top: 12px !important; right: 12px !important; bottom: auto !important; left: auto !important; z-index: 3; }
.inner-page .subcat-badge-overlay { z-index: 3; }
.inner-page .subcat-card-body { position: relative; z-index: 2; margin-top: -70px; padding: 0 18px 18px !important; background: none !important; }
.inner-page .subcat-card-title { font-size: 18px !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.inner-page .subcat-card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inner-page #subcatPhotosGrid { display: block !important; column-count: 3; column-gap: 16px; margin: 0 !important; }
.inner-page #subcatPhotosGrid > [class*="col-"] { display: block; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 0 16px !important; flex: none !important; break-inside: avoid; }
.inner-page .gallery-photo-card { position: relative; margin: 0 !important; border: 0 !important; background: #0b0f34 !important; }
.inner-page .gallery-photo-thumb { height: auto !important; }
.inner-page .gallery-photo-thumb img { display: block; width: 100%; height: auto !important; }
.inner-page .gallery-photo-overlay { opacity: 1 !important; align-items: flex-start !important; justify-content: flex-end !important; padding: 10px; background: linear-gradient(180deg, rgba(5, 8, 22, 0) 55%, rgba(5, 8, 22, 0.88) 100%) !important; }
.inner-page .gallery-photo-zoom-btn { width: 34px !important; height: 34px !important; font-size: 14px !important; color: #22d3ee !important; background: rgba(5, 8, 22, 0.72) !important; box-shadow: none !important; }
.inner-page .gallery-photo-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px !important; background: none !important; pointer-events: none; }
.inner-page .gallery-photo-title { margin: 0 !important; font-size: 14px !important; color: #fff !important; }
.inner-page .gallery-photo-desc { display: none !important; }