/* ============================================================
   GLOBAL WEBSITE STYLES
   ============================================================ */

/* Google Fonts */

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

body{

    background:var(--background);

    color:var(--white);

    font-family:var(--body-font);

    line-height:1.7;

}

/* ============================================================ */

section{

    padding:
    var(--section-padding)
    40px;

}

/* ============================================================ */

.container{

    width:100%;

    max-width:var(--page-width);

    margin:auto;

    padding-left:40px;

    padding-right:40px;

}

/* ============================================================ */

h1,h2,h3,h4{

    font-family:var(--heading-font);

    font-weight:700;

    line-height:1.15;

    color:var(--white);


}

a{

    color:inherit;

}

h1{

    font-size:var(--font-hero);

}

h2{

    font-size:var(--font-h2);

}

h3{

    font-size:var(--font-h3);

}

p{

    color:var(--grey);

    max-width:700px;

}

/* ============================================================ */

.orange{

    color:var(--primary);

}

/* ============================================================ */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

    18px

    40px;

    border-radius:var(--radius);

    font-weight:600;

    transition:var(--transition);

}

/* ============================================================ */

.btn-primary{

    background:var(--primary);

    color:white;

}

/* ============================================================ */

.btn-primary:hover{

    transform:translateY(-5px);

    background:var(--primary-hover);

}

/* ============================================================ */

.btn-secondary{

    border:2px solid white;

    color:white;

}

/* ============================================================ */

.btn-secondary:hover{

    background:white;

    color:black;

}

/* ============================================================ */

.section-title{

    margin-bottom:25px;

}

/* ============================================================ */

.section-subtitle{

    margin-bottom:70px;

}

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

.hero{

position:relative;

height:100vh;

display:flex;

align-items:center;

background-image:url("../images/hero/theatre.jpg");

background-size:cover;

background-position:center;

overflow:hidden;

}

/* Dark overlay */

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(0,0,0,.82),

rgba(0,0,0,.45)

);

}

/* Hero content */

.hero-content{

position:relative;

z-index:5;

}

.hero-tag{

color:var(--primary);

font-weight:600;

letter-spacing:3px;

margin-bottom:25px;

}

.hero h1{

max-width:900px;

margin-bottom:30px;

}

.hero-text{

font-size:1.2rem;

margin-bottom:45px;

max-width:700px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.scroll-indicator{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

font-size:2rem;

animation:bounce 2s infinite;

z-index:5;

}

@keyframes bounce{

0%,100%{

transform:translate(-50%,0);

}

50%{

transform:translate(-50%,-12px);

}

}

/* ============================================================
   WHAT WE DO
============================================================ */

.services-overview{

    background:var(--background-light);

}

.section-heading{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    margin-bottom:70px;

}

.overview-grid{

   display:grid;

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

    gap:30px;

    align-items:stretch;

}

.overview-item{

    background:var(--surface);

    padding:40px;

    border-radius:var(--radius);

    transition:var(--transition);

    position:relative;

    overflow:hidden;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    height:100%;

}

.overview-item::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:var(--primary);

    transition:var(--transition);

}

.overview-item:hover{

    transform:translateY(-10px);

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

}

.overview-item:hover::before{

    width:100%;

}

.overview-item i{

    font-size:2.8rem;

    color:var(--primary);

    margin-bottom:25px;

    transition:var(--transition);

}

.overview-item:hover i{

    transform:
    rotate(-6deg)
    scale(1.12);

    text-shadow:
    0 0 20px rgba(245,130,32,.35);

}

.overview-item h3{

    margin-bottom:20px;

}

.overview-item p{

    margin:0;

    flex-grow:1;


}

.card-link{

    margin-top:auto;

    padding-top:30px;

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

    transition:var(--transition);

}


.card-link:hover{

    letter-spacing:1px;

}

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


.footer{

    background:#050505;

    color:white;

    padding:80px 0 20px;

}


.footer-container{

    display:grid;

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

    gap:50px;

}


.footer-logo{

    width:180px;

    margin-bottom:25px;

}


.footer-column h3{

    margin-bottom:25px;

    color:var(--primary);

}


.footer-column p{

    color:#cfcfcf;

}


.footer-column ul{

    list-style:none;

    padding:0;

}


.footer-column li{

    margin-bottom:15px;

}


.footer-column a{

    color:#ddd;

    text-decoration:none;

    transition:var(--transition);

}


.footer-column a:hover{

    color:var(--primary);

}


.footer-button{

    display:inline-block;

    margin-top:20px;

    padding:12px 25px;

    background:var(--primary);

    color:white !important;

    border-radius:var(--radius);

}


.footer-bottom{

    display:flex;

    justify-content:center;

    align-items:center;

    border-top:1px solid #333;

}


.footer-bottom p{

    width:100%;

    text-align:center;

    margin:0;

}

/* ============================================================
   MAXIMISE GROUP FOOTER
============================================================ */


.group-text{

    font-size:0.85rem;

    color:#999;

    margin-bottom:10px;

}


.group-text span{

    color:var(--primary);

    font-weight:600;

}


.group-link{

    font-size:1rem;

    font-weight:600;

    color:white !important;

    text-decoration:none;

    transition:var(--transition);

}


.group-link:hover{

    color:var(--primary) !important;

}

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


.installation-hero{

    padding:120px 0;

}


.installation-intro{

    display:flex;

    align-items:center;

    gap:80px;

}



.installation-content{

    max-width:750px;

}



.installation-content h1{

    font-size:4rem;

    line-height:1.1;

    margin-bottom:30px;

}



.installation-content p{

    font-size:1.2rem;

    color:#bdbdbd;

    line-height:1.8;

}



.installation-icon{

    font-size:22rem;

    color:var(--primary);

    opacity:.90;

    display:flex;

    justify-content:center;

    align-items:center;

}



.orange-line{

    width:220px;

    height:4px;

    background:var(--primary);

    margin-top:45px;

    position:relative;

}



.orange-line::before{

    content:"";

    position:absolute;

    left:-35px;

    top:0;

    height:4px;

    width:40px;

    background:var(--primary);

}


/* ============================================================
   INSTALLATION TIMELINE
============================================================ */


.installation-timeline{

    padding:100px 0;

}


.timeline-item{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}



.timeline-image img{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:var(--radius);

}



.timeline-text span{

    color:var(--primary);

    font-size:3rem;

    font-weight:700;

}



.timeline-text h2{

    font-size:2.5rem;

    margin:20px 0;

}



.timeline-text p{

    line-height:1.8;

    color:#bbb;

}

/* ============================================================
   INSTALLATION FLOATING ICON
============================================================ */


.floating-install-icon{

    position:sticky;

    top:180px;

    transition:
    opacity 0.8s ease,
    transform 0.8s ease;

}


.floating-install-icon.hidden{

    opacity:0;

    transform:translateY(80px) scale(.8);

}

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

.installation-cta{

    padding:120px 0;

}

.installation-cta-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.installation-cta-image img{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:var(--radius);

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

}

.installation-cta-content h2{

    margin:20px 0;

    font-size:3rem;

    line-height:1.2;

}

.installation-cta-content p{

    color:#bdbdbd;

    line-height:1.9;

    margin-bottom:40px;

}

.cta-button{

    display:inline-flex;

    align-items:center;

    gap:18px;

    padding:18px 34px;

    background:var(--primary);

    color:white;

    text-decoration:none;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

}

.cta-button:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 40px rgba(245,130,32,.35);

}

.cta-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    transition:var(--transition);

}

.cta-button:hover .cta-arrow{

    transform:translateX(8px);

}

/* ============================================================
   LIVE SOUND HERO FIX
============================================================ */

.live-hero{

    position:relative;

}


.live-hero .hero-overlay{

    pointer-events:none;

}


.live-hero .page-hero-content{

    position:relative;

    z-index:2;

}

/* ============================================================
   SECTION DIVIDER
============================================================ */

.section-divider{

    width:90%;

    height:1px;

    background:white;

    margin:80px auto;

    opacity:.25;

}





/* ============================================================
   RADIO MICROPHONE FEATURE IMAGE
============================================================ */


.radio-image-full{

    width:100%;

    margin-bottom:60px;

}


.radio-image-full img{

    width:100%;

    height:600px;

    object-fit:cover;

    display:block;

    border-radius:var(--radius);

}


.radio-content .btn{

    margin-top:20px;

}

/* ============================================================
   BRAND LOGO CAROUSEL
============================================================ */


.logo-carousel{

    width:100%;

    overflow:hidden;

    margin-top:70px;

}


.logo-track{

    display:flex;

    width:max-content;

    gap:35px;

    animation:logo-scroll 35s linear infinite;

    align-items:center;

}



.logo-item{

    width:180px;

    height:100px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}



.logo-item img{

    max-width:190px;

    max-height:75px;

    object-fit:contain;

    opacity:0.9;

    transition:var(--transition);

}



.logo-item:hover img{

    transform:scale(1.12);

    opacity:1;

}



@keyframes logo-scroll{


from{

transform:translateX(0);

}


to{

transform:translateX(-50%);

}


}

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


.contact-section{

    padding:30px 0;

}


.contact-intro{

    text-align:center;

    max-width:800px;

    margin:0 auto 50px;

}


.contact-intro h2{

    font-size:3rem;

    margin:20px 0;

}



.contact-intro p{

    color:#bdbdbd;

    line-height:1.8;

}




/* FORM */


.contact-form{

    max-width:850px;

    margin:auto;

    background:var(--surface);

    padding:50px;

    border-radius:var(--radius);

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

}



.contact-form form{

    display:flex;

    flex-direction:column;

    gap:20px;

}



.contact-form input,
.contact-form select,
.contact-form textarea{


    width:100%;

    background:#111;

    border:1px solid rgba(255,255,255,.15);

    color:white;

    padding:18px 20px;

    border-radius:12px;

    font-size:1rem;

    transition:var(--transition);

}




.contact-form textarea{

    resize:vertical;

}



.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{


    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 20px rgba(255,120,0,.25);

}




.contact-form select option{

    background:#111;

}



.contact-form button{

    margin-top:15px;

    align-self:flex-start;

}





/* CONTACT DETAILS */


.contact-details{

    text-align:center;

    margin-top:70px;

}



.contact-details h3{

    font-size:2rem;

    margin-bottom:25px;

}



.contact-details p{

    color:#bdbdbd;

    margin:10px 0;

}

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


.orange-heading{

    color:var(--primary);

}






/* ============================================================
   VERTICAL FORM ARROW
============================================================ */


.form-arrow-section{

    text-align:center;

    margin:20px auto 30px;

}



.form-arrow-section h2{

    color:white;

    font-size:2.8rem;

    font-weight:700;

    margin-bottom:20px;

}




.form-arrow{

    height:350px;

    display:flex;

    justify-content:center;

}




.form-arrow svg{

    height:100%;

    width:120px;

}



.form-arrow line,
.form-arrow polyline{

    fill:none;

    stroke:var(--primary);

    stroke-width:16;

    stroke-linecap:round;

    stroke-linejoin:round;

}




.form-arrow line{

    stroke-dasharray:450;

    stroke-dashoffset:450;

    animation:draw-down 2s ease forwards;

}



.form-arrow polyline{

    stroke-dasharray:150;

    stroke-dashoffset:150;

    animation:draw-down .5s ease forwards;

    animation-delay:1.8s;

}



@keyframes draw-down{


to{

stroke-dashoffset:0;

}

}