/* ==================================================
   RESPONSIVE DESIGN
   LEEDS ELECTRICAL LANDING PAGE
================================================== */



@media(max-width:600px){


.header-actions{

    display:block;

}


.header-actions .phone-button{

    padding:10px 15px;

    font-size:14px;

}


}

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


@media (max-width: 1024px) {



.container {

    width:92%;

}



/* HEADER */


.navigation {

    display:none;

    position:absolute;

    top:75px;

    left:0;

    width:100%;

    background:#fff;

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

    padding:25px 0;

}

.navigation ul {


    display:flex;

    flex-direction:column;

    align-items:center;

    gap:0;


}

.navigation ul li {


    width:100%;

    text-align:center;


}



.navigation ul li a {


    display:block;

    padding:15px;

    font-size:18px;


}



.mobile-menu {


    display:block;

    color:#111827;


}



.header-actions {

    display:none;

}






/* HERO */


.hero-container {


    grid-template-columns:1fr;

    text-align:center;

}



.hero-content p {


    margin-left:auto;

    margin-right:auto;

}



.hero-buttons {


    justify-content:center;

}



.hero-features {


    max-width:600px;

    margin:auto;

}



.hero-image {


    max-width:600px;

    margin:auto;

}





.experience-box {


    left:20px;

}







/* INTRO */


.intro-container {


    grid-template-columns:1fr;

}



.intro-content {


    text-align:center;

}







/* SERVICES */


.services-grid {


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

}







/* WHY */


.why-grid {


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

}






/* GALLERY */


.gallery-grid {


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

}







/* PROCESS */


.process-grid {


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

}







/* REVIEWS */


.reviews-grid {


    grid-template-columns:1fr;

}






/* CTA */


.cta-box {


    grid-template-columns:1fr;

}




.footer-grid {


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

}




}










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


@media (max-width: 600px) {





.container {

    width:94%;

}




/* HEADER */


.header-container {


    height:75px;

}



.logo a {


    font-size:20px;

}





/* SECTION TITLES */


.section-title h2 {


    font-size:32px;

}



.section-title p {


    font-size:16px;

}





/* HERO */


.hero {


    padding:50px 0;

}



.hero-content h1 {


    font-size:38px;

    line-height:1.2;

}



.hero-content p {


    font-size:17px;

}



.hero-buttons {


    flex-direction:column;

}



.hero-buttons .btn {


    width:100%;

}



.hero-features {


    grid-template-columns:1fr;

    text-align:left;

}



.hero-image {


    margin-top:20px;

}



.experience-box {


    position:relative;

    left:0;

    bottom:auto;

    margin-top:20px;

}





/* INTRO */


.intro {


    padding:60px 0;

}



.intro-content h2 {


    font-size:32px;

}





/* SERVICES */


.services {


    padding:60px 0;

}



.services-grid {


    grid-template-columns:1fr;

}



.service-card {


    padding:30px 20px;

}







/* WHY */


.why-us {


    padding:60px 0;

}



.why-grid {


    grid-template-columns:1fr;

}





/* GALLERY */


.gallery {


    padding:60px 0;

}



.gallery-grid {


    grid-template-columns:1fr;

}



.gallery-item {


    height:240px;

}






/* PROCESS */


.process {


    padding:60px 0;

}



.process-grid {


    grid-template-columns:1fr;

}






/* REVIEWS */


.reviews {


    padding:60px 0;

}



.review-card {


    padding:25px;

}







/* FAQ */


.faq {


    padding:60px 0;

}



.faq-question {


    font-size:16px;

    text-align:left;

}








/* AREAS */


.areas {


    padding:60px 0;

}



.areas-list span {


    padding:10px 18px;

    font-size:14px;

}








/* CONTACT */


.contact-cta {


    padding:60px 0;

}



.cta-box {


    padding:30px 20px;

    border-radius:15px;

}



.cta-content h2 {


    font-size:32px;

}



.cta-buttons {


    flex-direction:column;

}



.cta-buttons .btn {


    width:100%;

}




.quote-form {


    padding:25px 20px;

}



.quote-form h3 {


    font-size:24px;

}






/* FOOTER */


.footer {


    padding:50px 0 20px;

}



.footer-grid {


    grid-template-columns:1fr;

    text-align:center;

}







/* FLOATING BUTTONS */


.floating-whatsapp,
.floating-call {


    width:55px;

    height:55px;

    font-size:24px;

}



.floating-whatsapp {


    right:15px;

    bottom:90px;

}



.floating-call {


    right:15px;

    bottom:25px;

}





}