/* ===========================================
   WEBTIMES WEBSITE SPOTLIGHT
=========================================== */

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
background:#F4F7FA;
color:#444;

}

/* =========================
HEADER
========================= */

header{

position:fixed;
top:0;
left:0;
width:100%;

background:white;

box-shadow:0 8px 30px rgba(0,0,0,.08);

z-index:999;

}

.container{

width:92%;
max-width:1250px;
margin:auto;

}

header .container{

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

font-size:38px;
font-weight:700;
color:#153B68;

}

.logo span{

color:#D9A441;

}

.call-button {
    background: #D9A441;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    color: white;
    transition: .3s;
    font-size: 14px;
}

.call-button:hover {
    background: #163A63;
}

/* =========================
HERO
========================= */

.hero{

margin-top:90px;

padding:75px 20px 65px:;

background:

linear-gradient(
rgba(22,58,99,.90),
rgba(22,58,99,.90)
),

url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=80");

background-size:cover;

background-position:center;

text-align:center;

color:white;

}

.hero h1{

font-size:52px;

line-height:1.2;

margin-bottom:22px;

font-weight:700;

}

.hero p{

font-size:18px;

max-width:850px;

margin:auto;

margin-bottom:25px;

opacity:.95;

}

.hero h3{

font-size:22px;

font-weight:500;

color:#D9A441;

}

/* =========================
CARDS
========================= */

.cards{

padding:90px 0;

}

.card-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:35px;

}

.card{

background:white;

padding:40px;

border-radius:15px;

text-align:center;

box-shadow:0 15px 45px rgba(0,0,0,.08);

transition:.35s;

position:relative;

overflow:hidden;

}

.card:hover{

transform:translateY(-12px);

box-shadow:0 25px 55px rgba(0,0,0,.15);

}

.icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

background:#163A63;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:25px;

}

.icon i{

font-size:38px;

color:white;

}

.card h2{

font-size:28px;

margin-bottom:20px;

color:#163A63;

}

.card p{

margin-bottom:35px;

color:#666;

line-height:1.8;

}

.button{

display:inline-block;

padding:16px 28px;

background:#163A63;

color:white;

text-decoration:none;

border-radius:8px;

font-weight:600;

transition:.3s;

}

.button:hover{

background:#D9A441;

}

/* =========================
FEATURED CARD
========================= */

.featured{

border:4px solid #D9A441;

transform:scale(1.04);

}

.featured:hover{

transform:scale(1.06);

}

.popular{

position:absolute;

top:0;

left:0;

width:100%;

background:#D9A441;

padding:10px;

color:white;

font-weight:700;

letter-spacing:2px;

font-size:13px;

}

/* =========================
RESPONSIVE
========================= */

@media(max-width:900px){

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

header .container{

height:auto;

padding:20px 0;

flex-direction:column;

}

.call-button{

margin-top:20px;

}

.featured{

transform:none;

}

}

/* ================================
WHY WEBTIMES
================================ */

.why-webtimes{

padding:100px 0;

background:white;

}

.section-intro{

text-align:center;

max-width:900px;

margin:20px auto 60px;

font-size:20px;

color:#666;

}

.features-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}

.feature-box{

background:#f8fafc;

padding:40px;

border-radius:15px;

text-align:center;

transition:.3s;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.feature-box:hover{

transform:translateY(-10px);

}

.feature-box i{

font-size:45px;

color:#D9A441;

margin-bottom:20px;

}

.feature-box h3{

color:#163A63;

margin-bottom:15px;

}



/* ================================
PROCESS
================================ */

.process{

padding:100px 0;

background:#163A63;

color:white;

}

.process h2{

color:white;

text-align:center;

margin-bottom:60px;

}

.process-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:40px;

}

.step{

text-align:center;

}

.number{

width:80px;

height:80px;

margin:auto;

border-radius:50%;

background:#D9A441;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

font-weight:bold;

margin-bottom:25px;

color:white;

}



/* ================================
TRUST
================================ */

.trust{

padding:90px 0;

background:#f4f7fa;

}

.trust-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:30px;

text-align:center;

}

.trust-grid h2{

font-size:56px;

color:#163A63;

margin-bottom:10px;

}

.trust-grid p{

font-size:18px;

color:#666;

}

/* ===================================
FAQ
=================================== */

.faq{

padding:100px 0;

background:white;

}

.faq-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:50px;

}

.faq-item{

background:#f7f9fc;

padding:35px;

border-radius:12px;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.faq-item h3{

color:#163A63;

margin-bottom:15px;

}



/* ===================================
CTA
=================================== */

.cta{

padding:120px 0;

background:linear-gradient(135deg,#163A63,#25558d);

color:white;

text-align:center;

}

.cta h2{

font-size:48px;

margin-bottom:25px;

}

.cta p{

font-size:20px;

max-width:800px;

margin:auto auto 40px;

}



/* ===================================
FOOTER
=================================== */

footer{

background:#0c1d33;

color:white;

padding:70px 0;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:40px;

}

footer ul{

list-style:none;

padding:0;

}

footer li{

margin:12px 0;

}



/* ===================================
MODAL
=================================== */

.modal{

display:none;

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.65);

z-index:9999;

}

.modal-content{

background:white;

width:90%;

max-width:700px;

margin:5% auto;

padding:40px;

border-radius:12px;

position:relative;

}

.close{

position:absolute;

right:25px;

top:15px;

font-size:34px;

cursor:pointer;

}

.modal input,
.modal textarea{

width:100%;

padding:16px;

margin-bottom:18px;

border:1px solid #ddd;

border-radius:8px;

font-family:Poppins;

}

.modal textarea{

height:140px;

resize:vertical;

}

.modal button{

background:#D9A441;

border:none;

padding:18px;

width:100%;

color:white;

font-size:18px;

border-radius:8px;

cursor:pointer;

}

/* ==========================================
   KENNY POPUP FIX
========================================== */

body.modal-open {
    overflow: hidden;
}

.modal {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 20, 40, 0.78);
    z-index: 99999;

    align-items: flex-start;
    justify-content: center;

    padding: 20px;

    overflow-y: auto;
}

.modal-content {
    position: relative;

    width: 100%;
    max-width: 680px;

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    background: #ffffff;

    border-radius: 18px;

    padding: 42px;

    margin: 0 auto;

    box-shadow: 0 25px 80px rgba(0,0,0,.35);
}


/* CLOSE BUTTON */

.close {
    position: sticky;
    float: right;

    top: 0;
    right: 0;

    width: 42px;
    height: 42px;

    border: none;

    background: #f1f3f6;

    color: #163A63;

    border-radius: 50%;

    font-size: 28px;

    line-height: 42px;

    text-align: center;

    cursor: pointer;

    z-index: 5;
}

.close:hover {
    background: #D9A441;
    color: white;
}


/* MODAL HEADER */

.modal-header {
    clear: both;
    padding-top: 10px;
    margin-bottom: 30px;
}

.modal-icon {
    width: 58px;
    height: 58px;

    border-radius: 50%;

    background: #163A63;
    color: #D9A441;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;

    margin-bottom: 18px;
}

.modal-header h2 {
    color: #163A63;

    font-size: 32px;

    line-height: 1.2;

    margin-bottom: 12px;
}

.modal-header p {
    color: #666;

    line-height: 1.7;
}


/* FORM */

#contactForm label {
    display: block;

    color: #163A63;

    font-weight: 600;

    margin-bottom: 7px;
}

#contactForm input,
#contactForm textarea {
    width: 100%;

    padding: 15px 16px;

    margin-bottom: 18px;

    border: 1px solid #d8dce2;

    border-radius: 8px;

    font-family: 'Poppins', sans-serif;

    font-size: 15px;

    color: #333;

    background: white;
}

#contactForm input:focus,
#contactForm textarea:focus {
    outline: none;

    border-color: #D9A441;

    box-shadow: 0 0 0 3px rgba(217,164,65,.15);
}

#contactForm textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-button {
    width: 100%;

    padding: 17px 25px;

    border: none;

    border-radius: 8px;

    background: #D9A441;

    color: white;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition: .3s;
}

.submit-button:hover {
    background: #163A63;
}


/* MOBILE */

@media(max-width:600px) {

    .modal {
        padding: 10px;
    }

    .modal-content {
        max-height: calc(100vh - 20px);

        padding: 25px 20px;

        border-radius: 12px;
    }

    .modal-header h2 {
        font-size: 25px;
    }

}

@media(max-width:600px) {

    .hero {
        padding:55px 20px 45px;
    }

    .hero h1 {
        font-size:34px;
        line-height:1.2;
    }

    .hero p {
        font-size:16px;
    }

    .hero h3 {
        font-size:19px;
    }

}

/* ==========================================
   CONDITIONAL FORM FIELDS
========================================== */

.conditional-fields {
    display: none;
}

.conditional-fields textarea {
    margin-bottom: 18px;
}

/* ==========================================
   FINAL LANDING PAGE POLISH
========================================== */

/* Tighter overall sections */

.cards {
    padding: 65px 0 85px;
}

.why-webtimes {
    padding: 75px 0;
}

.process {
    padding: 75px 0;
}

.trust {
    padding: 65px 0;
}


/* Section headings */

.cards .container > h2,
.why-webtimes h2,
.process h2,
.trust h2 {
    text-align: center;
}


/* Make the four choices feel like the
   primary action */

.card-grid {
    align-items: stretch;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.card .button {
    margin-top: auto;
    width: 100%;
}


/* Featured option */

.card.featured {
    border: 3px solid #D9A441;
    box-shadow:
        0 20px 55px rgba(22,58,99,.16),
        0 0 0 4px rgba(217,164,65,.08);
}

.card.featured .button {
    background: #D9A441;
}

.card.featured .button:hover {
    background: #163A63;
}


/* Popular ribbon */

.popular {
    font-size: 12px;
    padding: 9px;
}


/* Icons */

.card .icon {
    margin-top: 12px;
}


/* Make the cards slightly more compact */

.card h2 {
    font-size: 24px;
}

.card p {
    font-size: 15px;
    line-height: 1.65;
}


/* Trust figures */

.trust-grid h2 {
    font-size: 48px;
    color: #163A63;
}


/* Footer */

footer {
    padding: 50px 0;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 700px) {

    .cards {
        padding: 45px 0 60px;
    }

    .card {
        padding: 32px 25px;
    }

    .card.featured {
        transform: none;
    }

    .card h2 {
        font-size: 22px;
    }

    .why-webtimes,
    .process {
        padding: 60px 0;
    }

    .trust {
        padding: 50px 0;
    }

    .trust-grid h2 {
        font-size: 40px;
    }

}

/* ==========================================
   THANK YOU PAGE
========================================== */

.thank-you {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        linear-gradient(
            135deg,
            #163A63,
            #0c1d33
        );

    text-align: center;

}

.thank-you-box {

    max-width: 650px;

    background: white;

    padding: 60px 45px;

    border-radius: 18px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.25);

}

.thank-you-icon {

    width: 75px;

    height: 75px;

    margin: 0 auto 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #D9A441;

    color: white;

    font-size: 40px;

    font-weight: bold;

}

.thank-you-box h1 {

    color: #163A63;

    font-size: 42px;

    margin-bottom: 10px;

}

.thank-you-box h2 {

    color: #333;

    font-size: 22px;

    margin-bottom: 20px;

}

.thank-you-box p {

    color: #666;

    line-height: 1.7;

    margin-bottom: 35px;

}

/* ==========================================
   WEBTIMES BRAND COLOUR OVERRIDE
   Spotlight Landing Page
========================================== */

/* PRIMARY WEBTIMES BLUE */

.hero {
    background:
        linear-gradient(
            rgba(20, 67, 115, 0.94),
            rgba(20, 67, 115, 0.94)
        );
}

.hero h1,
.hero p {
    color: #ffffff;
}


/* WEBTIMES GREEN */

.hero h3 {
    color: #39A935;
}

.submit-button {
    background: #39A935;
}

.submit-button:hover {
    background: #144373;
}


/* WEBTIMES RED */

.card:nth-child(3) .icon {
    color: #E30613;
}

.card:nth-child(3) .button:hover {
    background: #E30613;
}


/* BLUE BUTTONS */

.button {
    background: #144373;
    color: #ffffff;
}

.button:hover {
    background: #39A935;
}


/* FEATURED FREE REVIEW */

.card.featured {
    border-color: #39A935;

    box-shadow:
        0 20px 55px rgba(20,67,115,.16),
        0 0 0 4px rgba(57,169,53,.10);
}

.card.featured .button {
    background: #39A935;
}

.card.featured .button:hover {
    background: #144373;
}


/* HEADINGS */

.cards h2,
.why-webtimes h2,
.process h2,
.trust h2 {
    color: #144373;
}


/* CARD ICONS */

.card .icon {
    color: #144373;
}


/* MODAL */

.modal-icon {
    background: #144373;
    color: #39A935;
}

.modal-header h2 {
    color: #144373;
}

.close {
    color: #144373;
}

.close:hover {
    background: #39A935;
    color: #ffffff;
}


/* FORM FOCUS */

#contactForm input:focus,
#contactForm textarea:focus {
    border-color: #39A935;

    box-shadow:
        0 0 0 3px rgba(57,169,53,.12);
}


/* HEADER CONSULTATION */

.call-button {
    background: #39A935;
    color: #ffffff;
}

.call-button:hover {
    background: #144373;
}


/* TRUST NUMBERS */

.trust-grid h2 {
    color: #144373;
}


/* FOOTER */

footer {
    background: #144373;
    color: #ffffff;
}


/* THANK YOU PAGE */

.thank-you {
    background:
        linear-gradient(
            135deg,
            #144373,
            #0d2c4d
        );
}

.thank-you-icon {
    background: #39A935;
}

.thank-you-box h1 {
    color: #144373;
}

/* =====================================================
   WEBTIMES SPOTLIGHT - FULL BRAND THEME
   ===================================================== */

/* ---------- MAIN BRAND COLOURS ---------- */

:root {
    --wt-blue: #144373;
    --wt-blue-dark: #0b2f52;
    --wt-green: #39a935;
    --wt-red: #e30613;
    --wt-white: #ffffff;
    --wt-light: #f5f8fa;
    --wt-text: #263746;
}


/* ---------- PAGE ---------- */

body {
    background: #ffffff;
    color: var(--wt-text);
}


/* ---------- HEADER ---------- */

header {
    background: var(--wt-white) !important;
    border-bottom: 3px solid var(--wt-green);
}

header a {
    color: var(--wt-blue) !important;
}

header a:hover {
    color: var(--wt-green) !important;
}


/* ---------- CONSULTATION BUTTON ---------- */

.call-button {
    background: var(--wt-green) !important;
    color: #ffffff !important;
    border: 2px solid var(--wt-green);
}

.call-button:hover {
    background: var(--wt-blue) !important;
    border-color: var(--wt-blue);
}


/* ---------- HERO ---------- */

.hero {
    background:
        linear-gradient(
            135deg,
            rgba(20, 67, 115, 0.97),
            rgba(11, 47, 82, 0.97)
        ) !important;

    color: #ffffff !important;
}

.hero h1 {
    color: #ffffff !important;
}

.hero p {
    color: #ffffff !important;
}

.hero h3 {
    color: var(--wt-green) !important;
}


/* ---------- MAIN SECTION ---------- */

.cards {
    background: #ffffff !important;
}

.cards h1,
.cards h2,
.cards h3,
.cards p {
    color: var(--wt-blue);
}


/* ---------- FOUR MAIN CARDS ---------- */

.card {
    background: #ffffff !important;

    border: 1px solid #dfe6eb !important;

    border-top: 5px solid var(--wt-blue) !important;

    box-shadow:
        0 12px 35px rgba(20, 67, 115, 0.10) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 45px rgba(20, 67, 115, 0.18) !important;
}


/* ---------- CARD COLOUR VARIATIONS ---------- */

/* Grow */

.card:nth-child(1) {
    border-top-color: var(--wt-blue) !important;
}


/* FREE REVIEW */

.card:nth-child(2) {
    border-top-color: var(--wt-green) !important;
}


/* Build */

.card:nth-child(3) {
    border-top-color: var(--wt-red) !important;
}


/* Help Me Choose */

.card:nth-child(4) {
    border-top-color: var(--wt-blue) !important;
}


/* ---------- CARD ICONS ---------- */

.card .icon {
    color: var(--wt-blue) !important;
}

.card:nth-child(2) .icon {
    color: var(--wt-green) !important;
}

.card:nth-child(3) .icon {
    color: var(--wt-red) !important;
}


/* ---------- CARD HEADINGS ---------- */

.card h2 {
    color: var(--wt-blue) !important;
}


/* ---------- CARD TEXT ---------- */

.card p {
    color: #536574 !important;
}


/* ---------- CARD BUTTONS ---------- */

.card .button {
    background: var(--wt-blue) !important;
    color: #ffffff !important;
}

.card .button:hover {
    background: var(--wt-green) !important;
}


/* FREE REVIEW BUTTON */

.card:nth-child(2) .button {
    background: var(--wt-green) !important;
}

.card:nth-child(2) .button:hover {
    background: var(--wt-blue) !important;
}


/* BUILD BUTTON */

.card:nth-child(3) .button:hover {
    background: var(--wt-red) !important;
}


/* ---------- FEATURED CARD ---------- */

.card.featured {
    border: 2px solid var(--wt-green) !important;

    border-top: 6px solid var(--wt-green) !important;

    box-shadow:
        0 18px 50px rgba(57, 169, 53, 0.20) !important;
}


/* ---------- POPULAR LABEL ---------- */

.popular {
    background: var(--wt-green) !important;
    color: #ffffff !important;
}


/* ---------- OTHER SECTIONS ---------- */

.why-webtimes {
    background: var(--wt-light) !important;
}

.process {
    background: #ffffff !important;
}

.trust {
    background: var(--wt-light) !important;
}


/* SECTION HEADINGS */

.why-webtimes h2,
.process h2,
.trust h2 {
    color: var(--wt-blue) !important;
}


/* ---------- PROCESS / ICONS ---------- */

.process .icon,
.process i {
    color: var(--wt-green) !important;
}


/* ---------- TRUST NUMBERS ---------- */

.trust-grid h2 {
    color: var(--wt-blue) !important;
}


/* ---------- MODAL BACKGROUND ---------- */

.modal {
    background:
        rgba(11, 47, 82, 0.88) !important;
}


/* ---------- MODAL ---------- */

.modal-content {
    border-top: 6px solid var(--wt-green);
}

.modal-icon {
    background: var(--wt-blue) !important;
    color: var(--wt-green) !important;
}

.modal-header h2 {
    color: var(--wt-blue) !important;
}


/* ---------- FORM ---------- */

#contactForm label {
    color: var(--wt-blue) !important;
}

#contactForm input:focus,
#contactForm textarea:focus {
    border-color: var(--wt-green) !important;

    box-shadow:
        0 0 0 3px rgba(57, 169, 53, .12) !important;
}


/* ---------- SUBMIT BUTTON ---------- */

.submit-button {
    background: var(--wt-green) !important;
    color: #ffffff !important;
}

.submit-button:hover {
    background: var(--wt-blue) !important;
}


/* ---------- FOOTER ---------- */

footer {
    background: var(--wt-blue) !important;
    color: #ffffff !important;

    border-top: 4px solid var(--wt-green);
}

footer a {
    color: #ffffff !important;
}

footer a:hover {
    color: var(--wt-green) !important;
}


/* ---------- THANK YOU PAGE ---------- */

.thank-you {
    background:
        linear-gradient(
            135deg,
            var(--wt-blue),
            var(--wt-blue-dark)
        ) !important;
}

.thank-you-icon {
    background: var(--wt-green) !important;
}

.thank-you-box h1 {
    color: var(--wt-blue) !important;
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    header {
        border-bottom-width: 2px;
    }

    .hero {
        background:
            linear-gradient(
                135deg,
                rgba(20, 67, 115, .98),
                rgba(11, 47, 82, .98)
            ) !important;
    }

    .card {
        border-top-width: 5px !important;
    }

}