/*====================================================
    UP GAS - CONTACT PAGE CSS
=====================================================*/


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

#menu-btn{

    display:none;

    border:none;

    background:transparent;

    color:white;

    font-size:30px;

    cursor:pointer;

    transition:.3s;

}

#menu-btn:hover{

    color:var(--primary);

}


/*=========================
COMMON BUTTON
=========================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 36px;

    border:none;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        var(--primary),
        #fb923c
    );

    color:white;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    position:relative;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 15px 30px rgba(249,115,22,.35);

}

.btn:hover{

    transform:translateY(-5px);

}


/*=========================
SECTION TITLE
=========================*/

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    display:inline-block;

    margin-bottom:15px;

    color:var(--primary);

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-title h2{

    margin-bottom:20px;

    color:var(--secondary);

    font-size:48px;

}

.section-title p{

    max-width:700px;

    margin:auto;

    color:var(--text);

    font-size:18px;

    line-height:1.7;

}


/*=========================
SCROLL REVEAL
=========================*/

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:opacity .8s ease,
               transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}


.contact-hero {

    min-height: 100vh;

    display: grid;

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

    align-items: center;

    gap: 70px;

    position: relative;

    overflow: hidden;

    background:

        linear-gradient(
            rgba(17, 24, 39, .88),
            rgba(17, 24, 39, .88)
        ),

        url("../images/Hero.jpeg");

    background-position: center;

    background-size: cover;

}

.contact-hero::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-100px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(247, 246, 246, 0.25);

    filter:blur(100px);

}

.contact-hero::after{

    content:"";

    position:absolute;

    bottom:-200px;

    left:-150px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(251,146,60,.12);

    filter:blur(100px);

}


.hero-content{

    position:relative;

    z-index:2;

}

.tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 24px;

    margin-bottom:30px;

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

    border-radius:50px;

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

    backdrop-filter:blur(12px);

    font-weight:600;

}

.tag i{

    color:var(--primary);

}

.hero-content h1{

    margin-bottom:25px;

    font-size:64px;

    line-height:1.1;

    font-weight:800;

}

.hero-content h1 span{

    display:block;

    color:var(--primary);

}

.hero-content p{

    max-width:650px;

    color:#e5e7eb;

    font-size:20px;

    line-height:1.7;

}

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

.hero-content{

    position:relative;

    z-index:2;

}

.tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:28px;

    padding:12px 22px;

    border:1px solid

        rgba(255,255,255,.18);

    border-radius:50px;

    background:

        rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

    color:#ffffff;

    font-size:14px;

    font-weight:700;

}

.tag i{

    color:var(--primary);

}

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

.hero-content h1{

    max-width:700px;

    margin-bottom:25px;

    color:#ffffff;

    font-size:clamp(42px,6vw,70px);

    font-weight:800;

    line-height:1.08;

}

.hero-content h1 span{

    display:block;

    color:var(--primary);

}

.hero-content p{

    max-width:650px;

    margin-bottom:38px;

    color:#e5e7eb;

    font-size:18px;

    line-height:1.8;

}

.hero-image{

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    z-index:2;

}

.hero-image img{

    width:min(100%,520px);

    animation:floatCylinder 4s ease-in-out infinite;

    filter:drop-shadow(
        0 35px 45px rgba(0,0,0,.35)
    );

}

@keyframes floatCylinder{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}


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

.contact-cards{

    background:#fff;

}

.cards{

    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.card{

    padding:45px 30px;

    border-bottom:4px solid transparent;

    border-radius:20px;

    background:#fff;

    text-align:center;

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

    transition:.35s;

}

.card:hover{

    transform:translateY(-12px);

    border-color:var(--primary);

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

}

.card i{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    border-radius:50%;

    background:#fff2e8;

    color:var(--primary);

    font-size:32px;

    transition:.35s;

}

.card:hover i{

    background:var(--primary);

    color:white;

    transform:rotateY(180deg);

}

.card h3{

    margin:25px 0 10px;

    color:var(--secondary);

    font-size:24px;

}

.card p,

.card a{

    color:var(--text);

    line-height:1.7;

}

.card a{

    transition:.3s;

}

.card a:hover{

    color:var(--primary);

}


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

.contact-section{

    background:#f8f9fb;

}

.contact-wrapper{

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:35px;

    align-items:start;

}

.contact-form{

    padding:45px;

    border-radius:24px;

    background:#fff;

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

}

.contact-form h2{

    margin-bottom:10px;

    color:var(--secondary);

    font-size:34px;

}

.contact-form > p{

    margin-bottom:35px;

    color:var(--text);

    line-height:1.8;

}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.form-group label{

    color:var(--secondary);

    font-weight:600;

}

.contact-form input,

.contact-form select,

.contact-form textarea{

    width:100%;

    padding:17px 20px;

    border:2px solid #ececec;

    border-radius:14px;

    outline:none;

    background:#fff;

    font-family:inherit;

    font-size:16px;

    transition:.3s;

}

.contact-form textarea{

    min-height:170px;

    resize:vertical;

}

.contact-form input:focus,

.contact-form select:focus,

.contact-form textarea:focus{

    border-color:var(--primary);

    box-shadow:
        0 0 0 5px
        rgba(249,115,22,.12);

}


/*=========================
SUBMIT BUTTON
=========================*/

.submit-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:18px;

    border:none;

    border-radius:50px;

    background:var(--primary);

    color:white;

    font-family:inherit;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    box-shadow:
        0 15px 35px
        rgba(249,115,22,.30);

    transition:.35s;

}

.submit-btn:hover{

    transform:translateY(-4px);

    background:var(--primary-dark);

}


/*=========================
BUSINESS HOURS
=========================*/

.business-hours{

    padding:40px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            #111,
            #242424
        );

    color:#fff;

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

}

.business-hours h2{

    margin-bottom:30px;

    font-size:30px;

}

.hours{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.hours div{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding-bottom:15px;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);

}

.hours div:last-child{

    border-bottom:none;

}

.hours span{

    color:#d7d7d7;

}

.hours strong{

    color:var(--primary);

    text-align:right;

}

.hours-note{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-top:30px;

    padding:20px;

    border-radius:15px;

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

}

.hours-note i{

    color:var(--primary);

    font-size:20px;

}

.hours-note p{

    color:#d7d7d7;

    line-height:1.6;

}


/*=========================
MAP
=========================*/

.map-section{

    background:#fff;

}

.map{

    max-width:1300px;

    margin:auto;

    overflow:hidden;

    border-radius:24px;

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

}

.map iframe{

    display:block;

    width:100%;

    height:500px;

    border:0;

}


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

.faq{

    background:#f8f9fb;

}

.faq-container{

    max-width:900px;

    margin:auto;

}

.faq-item{

    margin-bottom:20px;

    overflow:hidden;

    border-radius:18px;

    background:#fff;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.3s;

}

.faq-item:hover{

    transform:translateY(-5px);

}

.faq-question{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 25px;

    border:none;

    outline:none;

    background:#fff;

    color:var(--secondary);

    font-family:inherit;

    font-size:18px;

    font-weight:600;

    text-align:left;

    cursor:pointer;

}

.faq-question i{

    color:var(--primary);

    transition:.3s;

}

.faq-item.active
.faq-question i{

    transform:rotate(45deg);

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}

.faq-answer p{

    padding:0 25px 25px;

    color:var(--text);

    line-height:1.8;

}


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

.cta-section{

    margin:80px 8%;

    padding:80px 40px;

    border-radius:30px;

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:white;

    text-align:center;

}

.cta-content h2{

    margin-bottom:20px;

    font-size:48px;

}

.cta-content p{

    max-width:700px;

    margin:0 auto 35px;

    font-size:20px;

}

.cta-section .btn{

    background:white;

    color:var(--primary);

}

.cta-section .btn:hover{

    background:#f3f4f6;

}


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

footer{

    padding:80px 8% 25px;

    background:#111827;

    color:white;

}

.footer-container{

    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:40px;

}

.footer-box h3{

    margin-bottom:20px;

    color:var(--primary);

    font-size:22px;

}

.footer-box p{

    margin-bottom:12px;

    color:#ccc;

    line-height:1.8;

}

.footer-box a{

    display:block;

    margin-bottom:12px;

    color:#ccc;

    transition:.3s;

}

.footer-box a:hover{

    padding-left:8px;

    color:var(--primary);

}

.footer-box i{

    margin-right:10px;

    color:var(--primary);

}

.social-icons{

    display:flex;

    gap:15px;

    margin-top:15px;

}

.social-icons a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#222;

    color:white;

    transition:.3s;

}

.social-icons a:hover{

    transform:translateY(-5px);

    background:var(--primary);

}

.footer-bottom{

    margin-top:50px;

    padding-top:20px;

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

    color:#888;

    text-align:center;

}


/*=========================
WHATSAPP
=========================*/

.whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:999;

    border-radius:50%;

    background:#25D366;

    color:white;

    font-size:32px;

    box-shadow:
        0 15px 35px
        rgba(37,211,102,.35);

    animation:pulse 2s infinite;

    transition:.3s;

}

.whatsapp:hover{

    transform:scale(1.1);

}

@keyframes pulse{

    0%{

        box-shadow:
            0 0 0 0
            rgba(37,211,102,.7);

    }

    70%{

        box-shadow:
            0 0 0 20px
            rgba(37,211,102,0);

    }

    100%{

        box-shadow:
            0 0 0 0
            rgba(37,211,102,0);

    }

}


/*=========================
BACK TO TOP
=========================*/

#topBtn{

    position:fixed;

    right:25px;

    bottom:105px;

    width:55px;

    height:55px;

    display:none;

    align-items:center;

    justify-content:center;

    z-index:998;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:white;

    font-size:20px;

    cursor:pointer;

    box-shadow:var(--shadow);

    transition:.3s;

}

#topBtn:hover{

    transform:translateY(-5px);

    background:var(--primary-dark);

}


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

@media(max-width:991px){

    .contact-hero{

        grid-template-columns:1fr;

        padding-top:150px;

        text-align:center;

    }

    .hero-content p{

        margin:auto;

    }

    .hero-image{

        margin-top:30px;

    }

    .contact-wrapper{

        grid-template-columns:1fr;

    }

    .hero-content h1{

        font-size:52px;

    }

}

@media(max-width:768px){

    #menu-btn{

        display:block;

        z-index:1001;

    }

    #navbar{

        position:fixed;

        top:0;

        right:-100%;

        width:280px;

        height:100vh;

        display:flex;

        align-items:center;

        justify-content:center;

        z-index:1000;

        background:#1f2937;

        transition:.35s;

    }

    #navbar.active{

        right:0;

    }

    #navbar ul{

        flex-direction:column;

        gap:30px;

    }

    .nav-btn{

        display:none;

    }

    .hero-content h1{

        font-size:42px;

    }

    .hero-content p{

        font-size:17px;

    }

    .section-title h2{

        font-size:36px;

    }

    .contact-form{

        padding:30px;

    }

    .business-hours{

        padding:30px;

    }

    .hours div{

        flex-direction:column;

        align-items:flex-start;

    }

    .hours strong{

        text-align:left;

    }

    .map iframe{

        height:350px;

    }

    .cta-section{

        margin:60px 5%;

        padding:60px 25px;

    }

    .cta-content h2{

        font-size:36px;

    }

    .cta-content p{

        font-size:17px;

    }

}

@media(max-width:480px){

    .hero-content h1{

        font-size:34px;

    }

    .section-title h2{

        font-size:30px;

    }

    .card{

        padding:35px 25px;

    }

    .whatsapp{

        right:18px;

        bottom:18px;

        width:58px;

        height:58px;

        font-size:28px;

    }

    #topBtn{

        right:18px;

        bottom:88px;

        width:45px;

        height:45px;

    }

}
/*====================================================
    SHARED MOBILE NAVIGATION - MATCH HOME PAGE
=====================================================*/
@media (max-width: 992px){
    #menu-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        width:50px;
        height:50px;
        border:none;
        border-radius:12px;
        background:rgba(255,255,255,.08);
        color:#fff;
        font-size:28px;
        cursor:pointer;
        transition:.35s ease;
        z-index:1200;
    }

    #navbar{
        position:fixed;
        top:0;
        right:-100%;
        width:320px;
        max-width:85%;
        height:100vh;
        padding:110px 35px 40px;
        background:rgba(17,24,39,.98);
        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);
        transition:.4s ease;
        z-index:1100;
        overflow-y:auto;
        display:block;
    }

    #navbar.active{ right:0; }

    #navbar ul{
        display:flex;
        flex-direction:column;
        gap:10px;
        padding:0;
        margin:0;
        list-style:none;
    }

    #navbar ul li{ width:100%; }

    #navbar ul li a{
        display:flex;
        align-items:center;
        width:100%;
        padding:16px 20px;
        border-radius:14px;
        color:#fff;
        font-size:17px;
        font-weight:600;
        transition:.35s ease;
        text-decoration:none;
    }

    #navbar ul li a::after{ display:none; }

    #navbar ul li a:hover,
    #navbar ul li a.active{
        background:rgba(249,115,22,.12);
        color:var(--primary);
    }

    .nav-btn{ display:none; }
}

@media (max-width:576px){
    #navbar{ width:100%; max-width:100%; }
}


/* FAQ accordion fallback: active questions always reveal their answers. */
.faq-item.active .faq-answer{
    max-height:500px;
}

.faq-item.active .faq-question i{
    transform:rotate(45deg);
}