/*==================================================
  ELECTRIC AVENUE NORTH WEST
  VERSION 4
  eanw.co.uk

  Professional Website
==================================================*/

/*==================================================
GOOGLE FONT
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/*==================================================
ROOT VARIABLES
==================================================*/

:root{

    --red:#E10600;

    --dark:#111111;

    --text:#333333;

    --grey:#666666;

    --light:#f7f7f7;

    --white:#ffffff;

    --border:#e6e6e6;

    --radius:12px;

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

    --shadow-hover:
        0 18px 45px rgba(0,0,0,.12);

    --transition:.30s ease;

}

/*==================================================
RESET
==================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    color:var(--text);

    background:#ffffff;

    line-height:1.7;

    overflow-x:hidden;

}

/*==================================================
GLOBAL
==================================================*/

.container{

    width:90%;

    max-width:1280px;

    margin:auto;

}

section{

    padding:100px 0;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

h1,h2,h3,h4{

    color:#111111;

    line-height:1.15;

}

.section-title{

    text-align:center;

    font-size:2.9rem;

    font-weight:700;

    margin-bottom:18px;

}

.section-title::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    margin:18px auto 0;

    border-radius:20px;

    background:var(--red);

}

.section-subtitle{

    max-width:860px;

    margin:0 auto 60px;

    text-align:center;

    color:var(--grey);

    font-size:1.08rem;

}

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

header{

    position:sticky;

    top:0;

    z-index:9999;

    background:#ffffff;

    border-bottom:3px solid var(--red);

    box-shadow:

        0 5px 25px rgba(0,0,0,.08);

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:88px;

}

/*==================================================
LOGO
==================================================*/

.logo{

    color:#111111;

}

.logo:hover{

    color:#111111;

}

.logo h1{

    font-size:2rem;

    font-weight:800;

    letter-spacing:2px;

}

.logo span{

    color:var(--red);

}

.logo p{

    margin-top:5px;

    font-size:.82rem;

    letter-spacing:8px;

    color:#777777;

}

/*==================================================
DESKTOP NAVIGATION
==================================================*/

nav ul{

    display:flex;

    list-style:none;

    gap:38px;

}

nav a{

    position:relative;

    color:#222222;

    font-size:.95rem;

    font-weight:600;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--red);

    transition:var(--transition);

}

nav a:hover{

    color:var(--red);

}

nav a:hover::after{

    width:100%;

}

/*==================================================
MOBILE MENU BUTTON
==================================================*/

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    background:none;

    color:#111111;

    font-size:2rem;

    cursor:pointer;

    transition:var(--transition);

}

.menu-toggle.active{

    color:var(--red);

    transform:rotate(90deg);

}

/*==================================================
PART 2 STARTS HERE
HERO
==================================================*/

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding-top:100px;

    padding-bottom:40px;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.52) 35%,
        rgba(0,0,0,.18) 70%,
        rgba(0,0,0,.05) 100%
    ),
    url("hero-desktop.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.hero .container{

    width:100%;

}

.hero-content{

    max-width:560px;

    animation:heroFade .8s ease;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.hero-accent{

    width:70px;

    height:4px;

    background:var(--red);

    border-radius:20px;

    margin-bottom:28px;

}

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

.hero h2{

    color:#ffffff;

    font-size:4.6rem;

    line-height:1.05;

    letter-spacing:-1px;

    font-weight:800;

    margin-bottom:22px;

}

.hero-subtitle{

    color:#ffffff;

    font-size:1.45rem;

    font-weight:600;

    margin-bottom:24px;

}

.hero-description{

    color:rgba(255,255,255,.92);

    font-size:1.18rem;

    line-height:1.8;

    max-width:500px;

    margin-bottom:40px;

}

/*==================================================
BUTTONS
==================================================*/

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:35px;

}

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:210px;

    padding:17px 34px;

    border-radius:10px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    background:var(--red);

    color:#ffffff;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:

        0 16px 40px rgba(225,6,0,.35);

}

.btn-secondary{

    border:2px solid #ffffff;

    color:#ffffff;

}

.btn-secondary:hover{

    background:#ffffff;

    color:#111111;

}

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

.hero-trust{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.hero-trust span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#ffffff;

    font-size:.95rem;

    font-weight:500;

}

/*==================================================
SERVICE BANNER
==================================================*/

.service-banner{

    background:#111111;

    color:#ffffff;

    text-align:center;

    padding:18px;

    font-weight:600;

    letter-spacing:.3px;

}

/*==================================================
TABLET
==================================================*/

@media(max-width:992px){

.hero{

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.55),
        rgba(0,0,0,.35)
    ),
    url("hero-image.jpg");

    background-position:center top;

    background-size:cover;

    text-align:center;

}

.hero-content{

    max-width:100%;

}

.hero-accent{

    margin:0 auto 30px;

}

.hero-description{

    margin-left:auto;

    margin-right:auto;

}

.hero-buttons{

    justify-content:center;

}

.hero-trust{

    justify-content:center;

}

}

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

@media(max-width:768px){

.hero{

    min-height:100vh;

    padding-top:110px;

}

.hero h2{

    font-size:2.4rem;

}

.hero-subtitle{

    font-size:1.15rem;

}

.hero-description{

    font-size:1rem;

    margin-bottom:18px;

}

.hero-buttons{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:14px;

    margin-top:20px;

}

.hero-buttons .btn{

    width:200px;

    padding:14px 24px;

    font-size:1rem;

    text-align:center;

}

.hero-accent{

    display:none;

}

.hero-trust{

    flex-direction:column;

    gap:10px;

    align-items:flex-start;

    margin-top:30px;

}

.hero-trust span{

    justify-content:flex-start;

}

}

/*==================================================
PART 3 STARTS HERE
ABOUT
==================================================*/

/*==================================================
ABOUT
==================================================*/

.about{

    background:var(--white);

}

.about .section-subtitle{

    max-width:900px;

    font-size:1.12rem;

    line-height:1.9;

}

/*==================================================
SERVICES
==================================================*/

#services{

    background:var(--white);

}

.services-grid{

    display:grid;

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

    gap:30px;

}

.card{

    background:#ffffff;

    border-radius:var(--radius);

    padding:38px;

    box-shadow:var(--shadow);

    transition:var(--transition);

    position:relative;

    overflow:hidden;

}

.card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:var(--red);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-hover);

}

.card h3{

    margin-bottom:22px;

    font-size:1.4rem;

}

.card ul{

    list-style:none;

}

.card li{

    position:relative;

    padding-left:26px;

    margin-bottom:14px;

    color:var(--grey);

}

.card li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--red);

    font-weight:700;

}

/*==================================================
WHY CHOOSE US
==================================================*/

.grey-section{

    background:var(--light);

}

.features{

    display:grid;

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

    gap:26px;

}

.feature{

    background:#ffffff;

    padding:35px 28px;

    border-radius:var(--radius);

    text-align:center;

    box-shadow:var(--shadow);

    transition:var(--transition);

    border-top:4px solid transparent;

}

.feature:hover{

    transform:translateY(-6px);

    border-top-color:var(--red);

    box-shadow:var(--shadow-hover);

}

.feature h3{

    margin-bottom:12px;

    font-size:1.25rem;

}

.feature p{

    color:var(--grey);

}

/*==================================================
LANDLORDS
==================================================*/

#landlords{

    background:#ffffff;

}

#landlords .features{

    margin-top:45px;

}

#landlords .feature{

    padding:42px 25px;

}

#landlords .feature h3{

    color:var(--red);

    margin:0;

}

/*==================================================
SECTION SPACING
==================================================*/

.about,
#services,
.grey-section,
#landlords{

    padding:110px 0;

}

/*==================================================
TABLET
==================================================*/

@media(max-width:992px){

.services-grid{

    grid-template-columns:repeat(2,1fr);

}

.features{

    grid-template-columns:repeat(2,1fr);

}

}

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

@media(max-width:768px){

.about,
#services,
.grey-section,
#landlords{

    padding:80px 0;

}

.services-grid{

    grid-template-columns:1fr;

}

.features{

    grid-template-columns:1fr;

}

.card{

    padding:32px;

}

.feature{

    padding:30px;

}

.section-title{

    font-size:2.2rem;

}

.section-subtitle{

    font-size:1rem;

    margin-bottom:45px;

}

}

/*==================================================
PART 4 STARTS HERE
GALLERY
==================================================*/

/*==================================================
GALLERY
==================================================*/

#gallery{

    background:var(--light);

}

/* ---------- Desktop Layout ---------- */

.gallery-layout{

    display:grid;

    grid-template-columns:360px 1fr;

    gap:24px;

    align-items:start;

    margin-top:50px;

}

/* ---------- Feature Image ---------- */

.gallery-feature{

    height:500px;

}

.gallery-feature img{

    width:100%;

    height:500px;

    display:block;

    object-fit:cover;

    /*
    This is the important line.

    It moves the crop DOWN so the
    stairs and front door remain visible.
    */

    object-position:center 72%;

    border-radius:var(--radius);

    cursor:pointer;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.gallery-feature img:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-hover);

}

/* ---------- Desktop Grid ---------- */

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    grid-template-rows:repeat(2,240px);

    gap:18px;

    align-content:start;

}

.gallery-grid img{

    width:100%;

    height:240px;

    display:block;

    object-fit:cover;

    object-position:center;

    border-radius:12px;

    cursor:pointer;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.gallery-grid img:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-hover);

}

/*==================================================
LIGHTBOX
==================================================*/

#lightbox{

    display:none;

    position:fixed;

    inset:0;

    justify-content:center;

    align-items:center;

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

    cursor:pointer;

    z-index:99999;

}

#lightbox img{

    max-width:92%;

    max-height:92%;

    border-radius:12px;

}

/*==================================================
TABLET
==================================================*/

@media(max-width:1000px){

.gallery-layout{

    grid-template-columns:300px 1fr;

}

.gallery-feature{

    height:560px;

}

.gallery-grid{

    height:560px;

    grid-template-columns:repeat(2,1fr);

    grid-template-rows:repeat(4,1fr);

}

}

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

@media(max-width:768px){

.gallery-layout{

    display:block;

}

.gallery-feature{

    height:auto;

    margin-bottom:20px;

}

.gallery-feature img{

    width:100%;

    height:520px;

    object-fit:cover;

    object-position:center 72%;

}

.gallery-grid{

    display:block;

    height:auto;

}

.gallery-grid img{

    display:block;

    width:100%;

    height:260px;

    object-fit:cover;

    object-position:center;

    margin-bottom:18px;

}

}

/*==================================================
PART 5 STARTS HERE
INSTAGRAM
==================================================*/

/*==================================================
INSTAGRAM
==================================================*/

.instagram-box{

    background:#ffffff;

    padding:70px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    text-align:center;

}

.instagram-box h2{

    font-size:2.2rem;

    margin-bottom:20px;

}

.instagram-box p{

    max-width:650px;

    margin:0 auto 35px;

    color:var(--grey);

    line-height:1.8;

}

.instagram-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:16px 34px;

    border-radius:10px;

    background:var(--red);

    color:#ffffff;

    font-weight:700;

}

.instagram-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(225,6,0,.28);

}

/*==================================================
CONTACT
==================================================*/

#contact{

    background:var(--light);

}

.contact-grid{

    display:grid;

    grid-template-columns:360px 1fr;

    gap:35px;

}

.contact-card{

    background:#ffffff;

    padding:40px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.contact-card h3{

    margin-bottom:30px;

    font-size:1.45rem;

}

.contact-card p{

    margin-bottom:22px;

    line-height:1.8;

}

.contact-card a{

    color:var(--red);

    font-weight:600;

}

.contact-card a:hover{

    text-decoration:underline;

}

/*==================================================
FORM
==================================================*/

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:16px;

    margin-bottom:18px;

    border:1px solid var(--border);

    border-radius:10px;

    font-family:inherit;

    font-size:1rem;

    transition:var(--transition);

}

.contact-form textarea{

    resize:vertical;

    min-height:170px;

}

.contact-form input:focus,

.contact-form textarea:focus{

    outline:none;

    border-color:var(--red);

    box-shadow:0 0 0 3px rgba(225,6,0,.10);

}

.contact-form button{

    width:100%;

    padding:18px;

    border:none;

    border-radius:10px;

    background:var(--red);

    color:#ffffff;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    transition:var(--transition);

}

.contact-form button:hover{

    transform:translateY(-3px);

    box-shadow:0 16px 35px rgba(225,6,0,.28);

}

/*==================================================
TABLET
==================================================*/

@media(max-width:992px){

.contact-grid{

    grid-template-columns:1fr;

}

}

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

@media(max-width:768px){

.instagram-box{

    padding:45px 28px;

}

.instagram-box h2{

    font-size:1.9rem;

}

.contact-card{

    padding:30px;

}

.contact-card h3{

    font-size:1.3rem;

}

.contact-form input,

.contact-form textarea{

    padding:15px;

}

}

/*==================================================
PART 6 STARTS HERE
FOOTER
==================================================*/

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

footer{

    background:#111111;

    color:#ffffff;

    padding:70px 20px 50px;

}

.footer-grid{

    display:grid;

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

    gap:50px;

    margin-bottom:40px;

}

.footer-column h3{

    color:#ffffff;

    font-size:1.5rem;

    margin-bottom:20px;

}

.footer-column p{

    color:rgba(255,255,255,.75);

    line-height:1.8;

    margin-bottom:12px;

}

.footer-column ul{

    list-style:none;

}

.footer-column li{

    margin-bottom:12px;

}

.footer-column a{

    color:rgba(255,255,255,.75);

}

.footer-column a:hover{

    color:#ffffff;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.12);

    padding-top:30px;

    text-align:center;

    color:rgba(255,255,255,.60);

    font-size:.9rem;

}

/*==================================================
FLOATING BUTTONS
==================================================*/

.float-call,
.float-whatsapp{

    position:fixed;

    right:25px;

    width:62px;

    height:62px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    color:#ffffff;

    text-decoration:none;

    font-size:28px;

    z-index:9999;

    transition:var(--transition);

    box-shadow:0 12px 30px rgba(0,0,0,.18);

}

.float-call{

    background:var(--red);

    bottom:100px;

}

.float-whatsapp{

    background:#25D366;

    bottom:25px;

}

.float-call:hover{

    transform:translateY(-5px);

    background:#c40000;

}

.float-whatsapp:hover{

    transform:translateY(-5px);

    background:#1fb558;

}

/*==================================================
LIGHTBOX
==================================================*/

#lightbox{

    display:none;

    position:fixed;

    inset:0;

    justify-content:center;

    align-items:center;

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

    cursor:pointer;

    z-index:99999;

    padding:30px;

}

#lightbox-img{

    max-width:95%;

    max-height:95%;

    border-radius:12px;

    box-shadow:0 20px 60px rgba(0,0,0,.35);

}

/*==================================================
SMALL TABLETS
==================================================*/

@media(max-width:992px){

.footer-grid{

    grid-template-columns:1fr;

    gap:35px;

}

}

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

@media(max-width:768px){

footer{

    padding:60px 20px 40px;

}

.footer-column{

    text-align:center;

}

.float-call,
.float-whatsapp{

    width:56px;

    height:56px;

    font-size:24px;

    right:18px;

}

.float-call{

    bottom:90px;

}

.float-whatsapp{

    bottom:18px;

}

}

/*==================================================
PART 7 STARTS HERE
RESPONSIVE NAVIGATION
==================================================*/

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

@media(max-width:900px){

    /* Show Hamburger */

    .menu-toggle{

        display:flex;

        justify-content:center;

        align-items:center;

        width:48px;

        height:48px;

        font-size:2rem;

        z-index:10001;

    }

    /* Mobile Navigation */

    nav{

        position:absolute;

        top:91px;

        left:0;

        width:100%;

        background:#ffffff;

        border-top:1px solid var(--border);

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

        max-height:0;

        overflow:hidden;

        transition:max-height .35s ease;

    }

    nav.active{

        max-height:500px;

    }

    nav ul{

        display:flex;

        flex-direction:column;

        gap:0;

        padding:10px 0;

    }

    nav li{

        width:100%;

    }

    nav a{

        display:block;

        width:100%;

        padding:18px 30px;

        border-bottom:1px solid #f1f1f1;

    }

    nav a::after{

        display:none;

    }

    nav a:hover{

        background:#fafafa;

    }

}

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

@media(max-width:768px){

    .container{

        width:92%;

    }

    section{

        padding:80px 0;

    }

    .section-title{

        font-size:2.15rem;

    }

    .section-subtitle{

        font-size:1rem;

        margin-bottom:45px;

    }

    .hero{

        text-align:center;

    }

    .hero-description{

        max-width:100%;

        margin-left:auto;

        margin-right:auto;

    }

    .hero-buttons{

        width:100%;

    }

    .btn{

        width:100%;

    }

}

/*==================================================
SMALL PHONES
==================================================*/

@media(max-width:480px){

    .logo h1{

        font-size:1.55rem;

    }

    .logo p{

        letter-spacing:5px;

    }

    .hero h2{

        font-size:2rem;

    }

    .section-title{

        font-size:1.9rem;

    }

}

/*==================================================
PART 8 STARTS HERE
FINAL POLISH
==================================================*/

/*==================================================
FINAL POLISH
==================================================*/

/* ---------- Text Selection ---------- */

::selection{

    background:var(--red);

    color:#ffffff;

}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f3f3f3;

}

::-webkit-scrollbar-thumb{

    background:var(--red);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#c40000;

}

/*==================================================
IMAGE DEFAULTS
==================================================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}

/*==================================================
FOCUS STATES
==================================================*/

button:focus,
a:focus,
input:focus,
textarea:focus{

    outline:3px solid rgba(225,6,0,.20);

    outline-offset:3px;

}

/*==================================================
HOVER IMPROVEMENTS
==================================================*/

.card,
.feature,
.gallery-grid img,
.gallery-feature img,
.instagram-box,
.contact-card{

    transition:
        transform .30s ease,
        box-shadow .30s ease;

}

.card:hover,
.feature:hover,
.gallery-grid img:hover,
.gallery-feature img:hover{

    transform:translateY(-6px);

}

/*==================================================
UTILITY CLASSES
==================================================*/

.text-center{

    text-align:center;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

.mt-40{

    margin-top:40px;

}

.hidden{

    display:none !important;

}

/*==================================================
DESKTOP XL
==================================================*/

@media(min-width:1400px){

.container{

    max-width:1360px;

}

.hero h2{

    font-size:5rem;

}

.gallery-layout{

    grid-template-columns:390px 1fr;

}

}

/*==================================================
LARGE TABLETS
==================================================*/

@media(max-width:1100px){

section{

    padding:90px 0;

}

}

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

@media(max-width:768px){

.service-banner{

    padding:16px;

    font-size:.95rem;

    line-height:1.6;

}

.hero-trust{

    gap:12px;

}

.hero-trust span{

    justify-content:center;

    width:100%;

}

}

/*==================================================
SMALL DEVICES
==================================================*/

@media(max-width:480px){

.container{

    width:94%;

}

section{

    padding:70px 0;

}

.hero{

    padding-top:100px;

}

.hero h2{

    font-size:1.9rem;

}

.hero-subtitle{

    font-size:1rem;

}

.hero-description{

    font-size:.98rem;

}

.btn{

    padding:16px;

}

}

/*==================================================
END OF VERSION 4 CSS
==================================================*/