/*
Theme Name: Skovvy IT
Theme URI: https://skovvyinformationtechnology.co.uk
Author: Skovvy Information Technology
Author URI: https://skovvyinformationtechnology.co.uk
Description: Single-page WordPress theme for Skovvy Information Technology. Clean navy & teal color scheme built for a software development and IT consultancy business.
Version: 1.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skovvy-it
*/

/* ============ COLOR VARIABLES (edit here to change the whole scheme) ============ */
:root{
    --navy-dark:   #071A34;
    --navy:        #0B2545;
    --navy-mid:    #13315C;
    --teal:        #00B4A6;
    --teal-light:  #4FD8CB;
    --orange:      #FF6B35;
    --bg-light:    #F5F9FC;
    --bg-white:    #FFFFFF;
    --text-dark:   #14213D;
    --text-muted:  #5B6B85;
    --border:      #E3ECF4;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color:var(--text-dark);
    background:var(--bg-white);
    line-height:1.6;
    overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:'Poppins','Inter',sans-serif; font-weight:600; color:var(--navy); line-height:1.25; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
.container{ max-width:1140px; margin:0 auto; padding:0 24px; }
section{ padding:90px 0; }
.section-tag{
    display:inline-block; color:var(--teal); font-weight:600; letter-spacing:1.5px;
    text-transform:uppercase; font-size:13px; margin-bottom:12px;
}
.section-title{ font-size:36px; margin-bottom:16px; }
.section-desc{ color:var(--text-muted); max-width:620px; margin-bottom:50px; font-size:16px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.btn{
    display:inline-block; padding:14px 32px; border-radius:6px; font-weight:600;
    font-size:15px; transition:all .25s ease; cursor:pointer; border:2px solid transparent;
}
.btn-primary{ background:var(--orange); color:#fff; }
.btn-primary:hover{ background:#e85a24; transform:translateY(-2px); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,.6); color:#fff; }
.btn-outline:hover{ background:rgba(255,255,255,.12); }

/* ============ HEADER / NAV ============ */
.site-header{
    position:fixed; top:0; left:0; width:100%; z-index:999;
    background:rgba(7,26,52,.92); backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px; max-width:1140px; margin:0 auto; }
.site-logo img{ max-width: 240px;}
.nav-menu{ display:flex; gap:34px; }
.nav-menu a{ color:#dce6f2; font-weight:500; font-size:15px; transition:color .2s; }
.nav-menu a:hover{ color:var(--teal-light); }
.nav-cta{ background:var(--teal); color:#052a26; padding:10px 22px; border-radius:6px; font-weight:600; font-size:14px; }
.nav-cta:hover{ background:var(--teal-light); }
.menu-toggle{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; }
.menu-toggle span{ width:26px; height:2px; background:#fff; }

/* ============ HERO ============ */
.hero{
    background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 55%,var(--navy-mid) 100%);
    color:#fff; padding:190px 0 130px; position:relative; overflow:hidden;
}
.hero::before{
    content:""; position:absolute; width:600px; height:600px; border-radius:50%;
    background:radial-gradient(circle,rgba(0,180,166,.25) 0%,transparent 70%);
    top:-200px; right:-150px;
}
.hero-inner{ position:relative; z-index:2; max-width:680px; }
.hero-eyebrow{ color:var(--teal-light); font-weight:600; letter-spacing:1.5px; text-transform:uppercase; font-size:13px; margin-bottom:18px; }
.hero h1{ color:#fff; font-size:48px; margin-bottom:20px; }
.hero h1 em{ font-style:normal; color:var(--teal-light); }
.hero p{ color:#c3d2e6; font-size:18px; margin-bottom:34px; max-width:560px; }
.hero-btns{ display:flex; gap:16px; flex-wrap:wrap; }

/* ============ ABOUT ============ */
.about{ background:var(--bg-light); }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-visual{
    background:linear-gradient(145deg,var(--navy),var(--navy-mid));
    border-radius:16px; height:380px; position:relative; overflow:hidden;
}
.about-visual::after{
    content:"</>"; position:absolute; font-family:monospace; font-size:110px; color:rgba(255,255,255,.08);
    right:10px; bottom:-10px; font-weight:bold;
}
.about-stats{ display:flex; gap:36px; margin-top:30px; }
.stat-num{ font-size:30px; font-weight:700; color:var(--teal); font-family:'Poppins',sans-serif; }
.stat-label{ font-size:14px; color:var(--text-muted); }

/* ============ SERVICES ============ */
.services-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.service-card{
    background:var(--bg-white); border:1px solid var(--border); border-radius:14px;
    padding:36px 30px; transition:all .25s ease;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(11,37,69,.1); border-color:transparent; }
.service-icon{
    width:56px; height:56px; border-radius:12px; background:linear-gradient(135deg,var(--teal),var(--teal-light));
    display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:20px; color:#052a26;
}
.service-card h3{ font-size:20px; margin-bottom:12px; }
.service-card p{ color:var(--text-muted); font-size:15px; }

/* ============ TESTIMONIALS ============ */
.testimonials{ background:var(--navy); }
.testimonials .section-tag{ color:var(--teal-light); }
.testimonials .section-title, .testimonials .section-desc{ color:#fff; }
.testimonials .section-desc{ color:#b9c8dd; }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.testi-card{
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
    border-radius:14px; padding:30px; color:#dce6f2;
}
.testi-stars{ color:var(--orange); margin-bottom:16px; font-size:15px; }
.testi-text{ font-size:15px; margin-bottom:22px; color:#c3d2e6; }
.testi-author{ display:flex; align-items:center; gap:12px; }
.testi-avatar{
    width:44px; height:44px; border-radius:50%; background:var(--teal);
    display:flex; align-items:center; justify-content:center; font-weight:700; color:#052a26;
}
.testi-name{ font-weight:600; color:#fff; font-size:14px; }
.testi-role{ font-size:12.5px; color:#93a6c2; }

/* ============ CONTACT ============ */
.contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:60px; }
.contact-info-item{ display:flex; gap:16px; margin-bottom:26px; }
.contact-info-icon{
    width:44px; height:44px; min-width:44px; border-radius:10px; background:var(--bg-light);
    display:flex; align-items:center; justify-content:center; color:var(--teal); font-size:18px; border:1px solid var(--border);
}
.contact-info-item h4{ font-size:15px; margin-bottom:3px; }
.contact-info-item p{ color:var(--text-muted); font-size:14.5px; }
.contact-form{ background:var(--bg-light); border:1px solid var(--border); border-radius:16px; padding:40px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.form-group{ display:flex; flex-direction:column; gap:8px; }
.form-group.full{ grid-column:1/-1; }
.form-group label{ font-size:13.5px; font-weight:600; color:var(--navy); }
.form-group input, .form-group textarea{
    padding:13px 14px; border-radius:8px; border:1px solid var(--border); font-family:inherit;
    font-size:14.5px; background:#fff; resize:vertical;
}
.form-group input:focus, .form-group textarea:focus{ outline:none; border-color:var(--teal); }
.form-msg{ margin-top:16px; padding:12px 16px; border-radius:8px; font-size:14px; }
.form-msg.success{ background:#e3f9f0; color:#0a7a52; }
.form-msg.error{ background:#fdeaea; color:#c0392b; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--navy-dark); color:#93a6c2; padding:50px 0 26px; }
.footer-top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:24px; }
.footer-logo{ color:#fff; font-family:'Poppins',sans-serif; font-weight:700; font-size:19px; }
.footer-logo span{ color:var(--teal); }
.footer-links{ display:flex; gap:26px; }
.footer-links a{ color:#93a6c2; font-size:14px; }
.footer-links a:hover{ color:var(--teal-light); }
.footer-bottom{ text-align:center; font-size:13px; color:#5f7391; }

/* ============ RESPONSIVE ============ */
@media (max-width:860px){
    .nav-menu{ position:fixed; top:70px; left:0; width:100%; background:var(--navy-dark); flex-direction:column; padding:20px 24px; gap:18px; transform:translateY(-150%); transition:transform .3s ease; }
    .nav-menu.open{ transform:translateY(0); }
    .menu-toggle{ display:flex; }
    .about-grid, .contact-grid{ grid-template-columns:1fr; }
    .services-grid{ grid-template-columns:1fr; }
    .testi-grid{ grid-template-columns:1fr; }
    .form-row{ grid-template-columns:1fr; }
    .hero h1{ font-size:34px; }
    .section-title{ font-size:28px; }
    section{ padding:60px 0; }
    .hero{ padding:150px 0 80px; }
    .site-logo img{
        max-width:180px;
    }
}