/* ============================================================================
 * Layout fixes on top of the theme (main.css). Loaded after it on every page.
 *
 * Found by testing every page at 360, 390, 768, 1024, 1280, 1440 and 1920px:
 * overlapping text and images, horizontal scrolling on phones, and uneven
 * section spacing. Keep fixes here rather than editing main.css, so the theme
 * file stays as shipped and every change is in one readable place.
 * ========================================================================= */

/* --- 1. Nothing may make the page scroll sideways ----------------------- */
html, body { overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
h1, h2, h3, h4, h5, h6, p, li, a { overflow-wrap: break-word; }

/* --- 2. One spacing rhythm for every section ----------------------------
 * The theme stacks pt-120 + pb-120 on neighbouring sections, which gave
 * 240px gaps on desktop and 160px on phones. The same steps everywhere, scaled
 * down by screen size. */
.pt-120 { padding-top: 100px; }
.pb-120 { padding-bottom: 100px; }
@media (max-width: 1199px) { .pt-120 { padding-top: 90px; }  .pb-120 { padding-bottom: 90px; } }
@media (max-width: 991px)  { .pt-120 { padding-top: 70px; }  .pb-120 { padding-bottom: 70px; } }
@media (max-width: 575px)  { .pt-120 { padding-top: 56px; }  .pb-120 { padding-bottom: 56px; } }

/* Same side gutter on every screen: 16px on phones, 24px on tablets. */
@media (max-width: 991px) { .container { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 575px) { .container { padding-left: 16px; padding-right: 16px; } }

/* Section headings: equal space below them everywhere. */
.project__head { margin-bottom: 50px; }
@media (max-width: 991px) { .project__head { margin-bottom: 36px; } }
@media (max-width: 575px) { .project__head h2 { font-size: 30px; line-height: 1.25; } }

/* --- 3. Header ---------------------------------------------------------- */
/* Decorative vertical lines ran straight through the quote button on every
 * screen from 1400px up (they sit at a % of the width, the button does not). */
.header-section::before, .header-section::after { display: none; }
/* Phones and tablets had two menu buttons side by side. Keep the main menu
 * (hamburger); the second one only opened the contact panel. */
@media (max-width: 991px) {
   .header-wrapper .menu__components .remove__click { display: none !important; }
   .main-menu { left: 0; right: 0; width: auto !important; }
   .main-menu li { width: auto; }
}

/* --- 4. Home hero: text and photo side by side, never on top ------------- */
.banner__section .banner__thumb {
   position: relative;
   left: auto;
   bottom: auto;
   max-width: none;
   height: 100%;
   display: flex;
   align-items: flex-end;
   justify-content: center;
}
.banner__section .banner__thumb img { width: 100%; max-width: 460px; height: auto; display: block; }
.banner__content { padding: 130px 0 120px; }
@media (max-width: 1199px) {
   /* Stack: text first, then the photo, centered. */
   .banner__content { padding: 90px 0 30px; }
   .banner__section .banner__thumb img { max-width: 340px; }
}
@media (max-width: 575px) {
   .banner__content { padding: 56px 0 24px; }
   .banner__section .banner__thumb img { max-width: 260px; }
   .banner__content .bn__currently { font-size: 15px; }
}
/* The side rails (phone number, social icons) sit outside the content on wide
 * screens only; below that they crowded the headline. */
@media (max-width: 1499px) {
   .banner__leftinfo, .banner__rightinfo { display: none !important; }
}

/* --- 5. Service rows (home and /services/) -------------------------------
 * The theme gave these fixed pixel widths (1062px and 400px), so long titles
 * ran into the paragraph beside them on laptops and tablets. A grid instead. */
.service__unique__item {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 24px;
}
.service__unique__item .left__service {
   width: auto;
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
   align-items: center;
   gap: 16px 48px;
}
.service__unique__item .left__service p { width: auto; margin: 0; }
.service__unique__item .left__service .svc__points { grid-column: 2; margin: 0; }
.service__unique__item .left__service .serial__adjust { gap: 28px; min-width: 0; }
.service__unique__item .left__service .serial__adjust .cont { min-width: 0; }
.service__unique__item .left__service .serial__adjust .cont h2,
.service__unique__item .left__service .serial__adjust .cont h3 { font-size: 38px; line-height: 1.2; margin: 6px 0 0; }
.service__unique__item .left__service .serial__adjust .cont h2 a,
.service__unique__item .left__service .serial__adjust .cont h3 a { font-size: inherit; }
@media (max-width: 1399px) {
   .service__unique__item .left__service .serial__adjust .cont h2,
   .service__unique__item .left__service .serial__adjust .cont h3 { font-size: 32px; }
}
@media (max-width: 991px) {
   .service__unique__item .left__service { grid-template-columns: minmax(0, 1fr); }
   .service__unique__item .left__service .svc__points { grid-column: 1; }
   .service__unique__item .left__service .serial__adjust { gap: 16px; }
   .service__unique__item .left__service .serial__adjust .cont h2,
   .service__unique__item .left__service .serial__adjust .cont h3 { font-size: 28px; }
}
@media (max-width: 575px) {
   .service__unique__item { grid-template-columns: minmax(0, 1fr); }
   .service__unique__item .common__icon { display: none; }
   .service__unique__item .left__service .serial__adjust .cont h2,
   .service__unique__item .left__service .serial__adjust .cont h3 { font-size: 24px; }
}

/* --- 6. Lists with mixed text and links --------------------------------
 * The theme made every list item a flex row, so "<strong>Title.</strong> text
 * <a>link</a>." split into separate columns and long links ran off phones.
 * Plain text flow with the dot placed by hand. */
.challenge__list li { display: block; padding-left: 20px; line-height: 1.7; }
.challenge__list li::before { top: 0.72em; }

/* Links inside running text read as text, not as Title Case buttons. */
.service__body a, .home__note a, .pricing__more a, .terms__box a, .svc__related a,
.faq__item a, .who__item a, .hero__where a { text-transform: none; }
.service__body a { display: inline; }

/* --- 7. Blog cards: the text box was pulled 70px up over the image ------- */
.blog__bitem .content { transform: none; margin-bottom: 0; width: 100%; padding: 26px 0 0; }

/* --- 8. Page title banner on inner pages -------------------------------- */
.breadcrumnd__wrap h1 { line-height: 1.15; }
@media (max-width: 575px) { .breadcrumnd__wrap h1 { font-size: 30px; } }

/* --- 9. Buttons in a row wrap instead of squeezing ------------------------ */
.hero__ctas, .svc__related .btns { flex-wrap: wrap; }
@media (max-width: 400px) {
   .hero__ctas .cmn--btn { width: 100%; justify-content: center; }
}

/* --- 10. Text that must keep its own casing ----------------------------
 * The theme capitalises every link, which turned the email address into
 * "Mfurqanyasin9@Gmail.Com". */
a[href^="mailto:"], a[href^="tel:"] { text-transform: none; }

/* --- 11. Readable long-form copy on phones ------------------------------
 * .fz-16 drops to 14px on phones while list items stay at 16px, so a page
 * mixed two body sizes. One size, and smaller headings to match. */
.service__body p, .service__body li { font-size: 16px; line-height: 1.75; }
@media (max-width: 767px) {
   .service__body h2 { font-size: 26px; margin: 40px 0 18px; }
   .service__body h3 { font-size: 20px; margin: 28px 0 12px; }
}

/* --- 12. Enquiry form dropdown matches the other fields -----------------
 * nice-select rendered dark text on a dark box, so the field looked empty. */
#contact-form .nice-select {
   width: 100%; float: none; height: auto; line-height: 1.5;
   padding: 18px 44px 18px 20px; border: 0; border-radius: 10px;
   background-color: rgb(29, 29, 29); color: #9a9a9a; font-size: 16px;
}
#contact-form .nice-select .current { color: inherit; }
#contact-form .nice-select:after { border-color: #c9f31d; right: 22px; }
#contact-form .nice-select .list {
   width: 100%; background: rgb(29, 29, 29); border: 1px solid rgba(255,255,255,.12);
   max-height: 300px; overflow-y: auto;
}
#contact-form .nice-select .option { color: #d6d6d6; line-height: 1.5; padding: 10px 20px; min-height: 0; }
#contact-form .nice-select .option:hover,
#contact-form .nice-select .option.focus,
#contact-form .nice-select .option.selected.focus { background: rgba(201, 243, 29, .12); color: #fff; }

/* --- 13. Hero background: fixed attachment does not work on phones (iOS
 * ignores it and Android repaints on every scroll), so it scrolls there. */
@media (max-width: 1199px) { .banner__section { background-attachment: scroll; } }