/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
  1. Variables & Global
  2. Header & Navigation
  3. Hero (home page)
  4. Home page sections
  5. Products page
  6. General utilities
  7. Footer
  8. Media Queries
----------------------------------------------------------------- */

/* 1. Variables & Global ------------------------------------------------- */

:root {
    --darkblue: #0F426B;
    --lightblue: #155C95;
    --peacockblue: #32ABF3;
    --paleblue: #EDF5FA;
    --navy: #0A192F;
    --greyblue: #72838B;
    --grey: #C4C4C4;
    --medgrey: #354157;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--medgrey);
}

h1, h2, h3, h4, h5 {
    font-family: 'Poppins', sans-serif;
    color: var(--navy);
}

a {
    color: var(--lightblue);
    transition: color 250ms ease-in-out;
}

a:hover,
a:focus {
    color: var(--peacockblue);
}

/* 2. Header & Navigation -------------------------------------------------- */

.site-header {
    background: white;
    z-index: 1030;
}

.site-header-top {
    background: white;
    border-bottom: 1px solid #e8e8e8;
}

.site-logo {
    max-height: 44px;
    width: auto;
}

.site-header-phone {
    font-size: .95rem;
    font-weight: 600;
    color: var(--darkblue);
    text-decoration: none;
    gap: .5rem;
}

.site-header-phone:hover {
    color: var(--peacockblue);
}

.site-nav {
    background-color: var(--darkblue) !important;
    padding: 0;
}

.site-nav .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .8);
    font-size: .85rem;
    letter-spacing: .08em;
    padding: 1rem 1.25rem;
    transition: background 200ms, color 200ms;
}

.site-nav .navbar-nav .nav-link:hover,
.site-nav .navbar-nav .nav-link.active {
    color: #fff;
    background: var(--lightblue);
}

/* 3. Hero ----------------------------------------------------------------- */

.hero-split {
    display: flex;
    min-height: 560px;
    background-image: url('../images/Group 21 (1).png');
    background-size: cover;
    background-position: center;
}

.hero-content {
    flex: 0 0 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 3rem 4rem 4rem;
    background: linear-gradient(to right, rgba(10,25,47,.90) 0%, rgba(10,25,47,.70) 75%, transparent 100%);
}

.hero-h1 {
    font-size: 3.25rem;
    font-weight: 900;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 1.25rem;
}

.hero-deck {
    font-size: 1.05rem;
    color: rgba(255,255,255,.85);
    max-width: 480px;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.hero-cta {
    align-self: flex-start;
}

/* 4. Home page sections -------------------------------------------------- */

/* Value props */
.value-prop {
    padding: 2rem;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    height: 100%;
    transition: box-shadow 250ms;
}

.value-prop:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

.value-prop-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--paleblue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
    color: var(--darkblue);
}

/* Feature cards */
.feature-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.feature-card-img {
    height: 220px;
    overflow: hidden;
}

.feature-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 400ms ease;
}

.feature-card:hover .feature-card-img img {
    transform: scale(1.04);
}

.feature-card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.feature-card-body p {
    flex: 1;
}

/* Why choose us */
.why-us-image {
    max-width: 860px;
    margin: 0 auto;
}

/* Banner sections */
.banner-section {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 6rem 0;
}

.banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 47, 0.75);
}

.banner-content {
    position: relative;
}

.banner-content p {
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

/* Final CTA */
.final-cta {
    background: var(--paleblue);
}

/* 5. Products page -------------------------------------------------------- */

.products-tagline {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .15em;
    color: var(--darkblue);
    text-transform: uppercase;
}

.products-cutting-banner {
    background-color: var(--darkblue);
    color: #fff;
    font-size: .95rem;
    padding: .75rem 0;
}

.products-cutting-banner a {
    color: var(--peacockblue);
    font-weight: 600;
}

.products-cutting-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.products-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 4;
    column-gap: 2rem;
}

.products-list li {
    break-inside: avoid;
    padding: .3rem 0 .3rem 1.25rem;
    border-bottom: 1px solid var(--grey);
    font-size: .95rem;
    position: relative;
}

.products-list li::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--peacockblue);
    font-weight: 700;
}

/* 6. General utilities ---------------------------------------------------- */

.bg-navy     { background-color: var(--navy); }
.bg-paleblue { background-color: var(--paleblue); }
.text-navy   { color: var(--navy); }

/* 7. Footer --------------------------------------------------------------- */

.site-footer {
    background-color: var(--navy);
}

.footer-logo {
    max-height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .85;
}

.footer-address {
    font-style: normal;
    font-size: .9rem;
    color: rgba(255,255,255,.7);
    line-height: 1.9;
}

.footer-address a {
    color: rgba(255,255,255,.7);
}

.footer-address a:hover {
    color: var(--peacockblue);
}

.footer-heading {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #fff;
    margin-bottom: 1rem;
}

.footer-links {
    line-height: 2.2;
}

.footer-links a {
    color: rgba(255,255,255,.7);
    font-size: .9rem;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--peacockblue);
}

.site-footer p {
    font-size: .9rem;
    color: rgba(255,255,255,.7);
}

.site-footer a {
    color: rgba(255,255,255,.7);
}

.site-footer a:hover {
    color: var(--peacockblue);
}


/* 8. Media Queries -------------------------------------------------------- */

@media (max-width: 991px) {
    .hero-content {
        flex: 0 0 100%;
        padding: 3rem 2rem;
        background: rgba(10,25,47,.82);
    }
    .hero-h1 {
        font-size: 2.5rem;
    }
    .products-list { columns: 3; }
}

@media (max-width: 767px) {
    .hero-h1 {
        font-size: 2rem;
    }
    .banner-section {
        padding: 4rem 0;
    }
    .products-list { columns: 2; }
}

@media (max-width: 479px) {
    .hero-h1 {
        font-size: 1.75rem;
    }
    .products-list { columns: 1; }
}