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

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    overflow-x:hidden;
    scroll-behavior:smooth;
}


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

.contact-hero{

    position:relative;
    overflow:hidden;

    min-height:70vh;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    background:linear-gradient(
        135deg,
        #050816 0%,
        #0f172a 100%
    );

}

.contact-hero::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    top:-250px;
    right:-250px;

    border-radius:50%;

    background:rgba(0,212,255,.08);

    filter:blur(120px);

    pointer-events:none;

}

.contact-hero::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    bottom:-220px;
    left:-220px;

    border-radius:50%;

    background:rgba(0,255,153,.08);

    filter:blur(120px);

    pointer-events:none;

}

.contact-hero .container{

    position:relative;

    z-index:2;

}


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

.hero-badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    padding:12px 26px;

    margin-bottom:22px;

    border-radius:50px;

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

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

    backdrop-filter:blur(14px);

    color:var(--primary);

    font-weight:600;

    letter-spacing:.5px;

}

.page-title{

    color:#ffffff;

    font-size:4rem;

    font-weight:800;

    line-height:1.2;

    margin-bottom:20px;

}

.page-description{

    max-width:760px;

    margin:auto;

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

    font-size:1.1rem;

    line-height:1.9;

}


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

.contact-section{

    position:relative;

    padding:40px 0;

    overflow:hidden;

    z-index:2;

}


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

.contact-form-card,
.contact-info-card{

    position:relative;

    width:100%;

    height:100%;

    padding:40px;

    border-radius:28px;

    overflow:hidden;

    background:rgba(15,23,42,.92);

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.contact-form-card::before,
.contact-info-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,212,255,.06),
        transparent 65%
    );

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.contact-form-card:hover,
.contact-info-card:hover{

    transform:translateY(-8px);

    border-color:rgba(0,212,255,.35);

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

}

.contact-form-card:hover::before,
.contact-info-card:hover::before{

    opacity:1;

}


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

.section-header{

    margin-bottom:35px;

}

.section-tag{

    display:inline-block;

    margin-bottom:10px;

    color:var(--primary);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-header h2{

    color:#ffffff;

    font-size:2.6rem;

    font-weight:700;

    margin-bottom:15px;

    line-height:1.25;

}

.section-header p{

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

    line-height:1.8;

    margin-bottom:0;

}
/*=========================================================
    CONTACT FORM
=========================================================*/

.contact-form{

    width:100%;

}

.contact-form .row{

    row-gap:20px;

}


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

.form-group{

    margin-bottom:22px;

    position:relative;

}


/*=========================================================
    LABEL
=========================================================*/

.form-label{

    display:block;

    margin-bottom:10px;

    color:#ffffff;

    font-size:1rem;

    font-weight:600;

    letter-spacing:.3px;

}


/*=========================================================
    INPUTS
=========================================================*/

.form-control,
.form-select{

    width:100%;

    min-height:58px;

    padding:15px 18px;

    border-radius:14px;

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

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

    color:#ffffff;

    font-size:1rem;

    font-weight:500;

    transition:all .35s ease;

    box-shadow:none;

    outline:none;

}


/*=========================================================
    PLACEHOLDER
=========================================================*/

.form-control::placeholder{

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

    opacity:1;

}


/*=========================================================
    SELECT
=========================================================*/

.form-select{

    cursor:pointer;

}

.form-select option{

    background:#0f172a;

    color:#ffffff;

}


/*=========================================================
    TEXTAREA
=========================================================*/

textarea.form-control{

    min-height:180px;

    resize:vertical;

    padding-top:16px;

}


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

.form-control:focus,
.form-select:focus{

    border-color:var(--primary);

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

    color:#ffffff;

    box-shadow:

        0 0 0 3px rgba(0,212,255,.12),

        0 12px 30px rgba(0,212,255,.12);

}


/*=========================================================
    AUTOFILL FIX
=========================================================*/

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.06) inset;

    -webkit-text-fill-color:#ffffff;

    transition:background-color 9999s ease-in-out 0s;

}


/*=========================================================
    VALIDATION
=========================================================*/

.form-control.is-valid,
.form-select.is-valid{

    border-color:#00ff99;

}

.form-control.is-invalid,
.form-select.is-invalid{

    border-color:#ff4d4d;

}


/*=========================================================
    ERROR MESSAGE
=========================================================*/

.invalid-feedback{

    margin-top:8px;

    color:#ff8c8c;

    font-size:.9rem;

}


/*=========================================================
    SUCCESS MESSAGE
=========================================================*/

.valid-feedback{

    margin-top:8px;

    color:#00ff99;

    font-size:.9rem;

}


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

.contact-form .btn-primary{

    width:100%;

    min-height:58px;

    border:none;

    border-radius:14px;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    color:#000000;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.5px;

    transition:all .35s ease;

    overflow:hidden;

    position:relative;

}


/*=========================================================
    BUTTON HOVER
=========================================================*/

.contact-form .btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:

        0 15px 35px rgba(0,212,255,.30);

}


/*=========================================================
    BUTTON ACTIVE
=========================================================*/

.contact-form .btn-primary:active{

    transform:scale(.98);

}


/*=========================================================
    LOADING BUTTON
=========================================================*/

.contact-form .btn-primary.loading{

    pointer-events:none;

    opacity:.75;

}


/*=========================================================
    BUTTON ICON
=========================================================*/

.contact-form .btn-primary i{

    margin-right:10px;

}


/*=========================================================
    FORM HELP TEXT
=========================================================*/

.form-text{

    margin-top:8px;

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

    font-size:.88rem;

}


/*=========================================================
    REQUIRED ASTERISK
=========================================================*/

.required{

    color:#ff4d4d;

    margin-left:4px;

}
/*=========================================================
    CONTACT INFORMATION
=========================================================*/

.contact-info{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    flex:1;

    gap:30px;

}

.contact-info,
.info-item,
.info-content,
.info-item h5,
.info-item p,
.info-item a{

    opacity:1 !important;

    visibility:visible !important;

}

.info-item{

    display:flex !important;

}
/*=========================================================
    INFO ITEM
=========================================================*/

.info-item{

    display:flex;

    align-items:center;

    gap:22px;

    padding:22px;

    border-radius:18px;

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

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

    transition:all .35s ease;
    

}

.info-item:hover{

    transform:translateY(-6px);

    background:rgba(0,212,255,.08);

    border-color:rgba(0,212,255,.35);

    box-shadow:0 18px 35px rgba(0,212,255,.10);

}


/*=========================================================
    INFO ICON
=========================================================*/

.info-icon{

    width:68px;

    height:68px;

    min-width:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

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

    color:#000;

    font-size:1.4rem;

    transition:all .35s ease;

}

.info-item:hover .info-icon{

    transform:rotate(8deg) scale(1.08);

}


/*=========================================================
    INFO CONTENT
=========================================================*/

.info-content{

    flex:1;

}

.info-item h5{

    margin:0 0 6px;

    color:#ffffff;

    font-size:1.15rem;

    font-weight:700;

}

.info-item p{

    margin:0;

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

    line-height:1.7;

}

.info-item a{

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

    text-decoration:none;

    transition:.35s ease;

}

.info-item a:hover{

    color:var(--primary);

}


/*=========================================================
    CONTACT DETAILS LIST
=========================================================*/

.contact-list{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:20px;

    padding:0;

    list-style:none;

}

.contact-list li{

    display:flex;

    align-items:center;

    gap:12px;

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

}

.contact-list i{

    color:var(--primary);

}


/*=========================================================
    SOCIAL LINKS
=========================================================*/

.social-links{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    margin-top:auto;

    padding-top:70px;

}


/*=========================================================
    SOCIAL BUTTON
=========================================================*/

.social-btn{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

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

    color:#ffffff;

    text-decoration:none;

    font-size:1.2rem;

    transition:all .35s ease;

}

.social-btn:hover{

    transform:translateY(-5px);

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

    color:#000;

    border-color:transparent;

    box-shadow:0 12px 30px rgba(0,212,255,.25);

}


/*=========================================================
    CONTACT INFO CARD
=========================================================*/

.contact-info-card{

    display:flex;

    flex-direction:column;

    height:100%;

    justify-content:flex-start;

}

.contact-info-card .section-header{

    text-align:center;

    margin-bottom:35px;

}


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

.business-hours{

    margin-top:35px;

    padding:22px;

    border-radius:18px;

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

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

}

.business-hours h5{

    color:#ffffff;

    margin-bottom:18px;

    font-weight:700;

}

.business-hours ul{

    list-style:none;

    padding:0;

    margin:0;

}

.business-hours li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

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

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

}

.business-hours li:last-child{

    border-bottom:none;

}


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

.map-section{

    padding:40px 0;

}

.map-card{

    overflow:hidden;

    border-radius:24px;

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

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

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

}

.map-card iframe{

    display:block;

    width:100%;

    height:450px;

    border:0;

    filter:grayscale(.15);

    transition:.35s ease;

}

.map-card:hover iframe{

    filter:none;

}
/*=========================================================
    CTA SECTION
=========================================================*/

.cta-section{

    position:relative;

    padding:40px 0;

    text-align:center;

    overflow:hidden;

}

.cta-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-200px;

    right:-200px;

    border-radius:50%;

    background:rgba(0,212,255,.08);

    filter:blur(120px);

    pointer-events:none;

}

.cta-section .container{

    position:relative;

    z-index:2;

}

.cta-section h2{

    color:#ffffff;

    font-size:3rem;

    font-weight:800;

    margin-bottom:20px;

    line-height:1.2;

}

.cta-section p{

    max-width:720px;

    margin:0 auto 35px;

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

    line-height:1.9;

}


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

.btn-primary,
.btn-success{

    position:relative;

    overflow:hidden;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 35px;

    min-height:56px;

    border:none;

    border-radius:14px;

    font-weight:700;

    letter-spacing:.4px;

    transition:all .35s ease;

}

.btn-primary{

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

    color:#000;

}

.btn-success{

    background:linear-gradient(
        135deg,
        #00ff99,
        #00d97d
    );

    color:#000;

}

.btn-primary:hover,
.btn-success:hover{

    transform:translateY(-5px);

    color:#000;

    box-shadow:0 18px 40px rgba(0,212,255,.30);

}

.btn-primary:active,
.btn-success:active{

    transform:scale(.97);

}


/*=========================================================
    BUTTON SHINE EFFECT
=========================================================*/

.btn-primary::before,
.btn-success::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.7s;

}

.btn-primary:hover::before,
.btn-success:hover::before{

    left:160%;

}


/*=========================================================
    LOADING BUTTON
=========================================================*/

.btn-loading{

    pointer-events:none;

    opacity:.8;

}

.btn-loading::after{

    content:"";

    width:18px;

    height:18px;

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

    border-top-color:#fff;

    border-radius:50%;

    animation:buttonSpinner .8s linear infinite;

}


/*=========================================================
    SPINNER
=========================================================*/

@keyframes buttonSpinner{

    to{

        transform:rotate(360deg);

    }

}


/*=========================================================
    FLOATING CARD
=========================================================*/

@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.contact-info-card{

    animation:floatCard 6s ease-in-out infinite;

}


/*=========================================================
    FADE UP
=========================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.contact-form-card,
.contact-info-card,
.map-card{

    animation:fadeUp .9s ease both;

}


/*=========================================================
    GLASS HOVER
=========================================================*/

.contact-form-card::after,
.contact-info-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.08),

        transparent 65%

    );

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.contact-form-card:hover::after,
.contact-info-card:hover::after{

    opacity:1;

}


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

.reveal{

    opacity:0;

    transform:translateY(60px);

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .8s ease,

        transform .8s ease;

}


/*=========================================================
    SHADOW UTILITIES
=========================================================*/

.shadow-primary{

    box-shadow:

        0 20px 50px rgba(0,212,255,.20);

}

.shadow-success{

    box-shadow:

        0 20px 50px rgba(0,255,153,.20);

}


/*=========================================================
    BORDER UTILITIES
=========================================================*/

.border-primary{

    border-color:rgba(0,212,255,.30) !important;

}

.border-success{

    border-color:rgba(0,255,153,.30) !important;

}


/*=========================================================
    TEXT UTILITIES
=========================================================*/

.text-gradient{

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

.text-light-muted{

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

}
/*=========================================================
    RESPONSIVE DESIGN
=========================================================*/


/*=========================================================
    LARGE DEVICES (1200px)
=========================================================*/

@media (max-width:1200px){

    .page-title{

        font-size:3.4rem;

    }

    .section-header h2{

        font-size:2.4rem;

    }

}


/*=========================================================
    TABLET (992px)
=========================================================*/

@media (max-width:992px){

    section{

        padding:80px 0;

    }

    .contact-hero{

        min-height:auto;

        padding:140px 0 80px;

    }

    .page-title{

        font-size:2.8rem;

    }

    .page-description{

        max-width:650px;

        font-size:1rem;

    }

    .contact-form-card,
    .contact-info-card{

        padding:35px;

    }

    .section-header{

        text-align:center;

    }

    .section-header h2{

        font-size:2.2rem;

    }

    .social-links{

        justify-content:center;

    }

    .cta-section h2{

        font-size:2.5rem;

    }

}


/*=========================================================
    MOBILE (768px)
=========================================================*/

@media (max-width:768px){

    html,
    body{

        overflow-x:hidden;

    }

    .container{

        padding-left:18px;

        padding-right:18px;

    }

    section{

        padding:60px 0 !important;

    }

    .contact-hero{

        min-height:auto;

        padding:110px 0 60px;

    }

    .hero-badge{

        font-size:.8rem;

        padding:10px 20px;

    }

    .page-title{

        font-size:2rem;

        line-height:1.3;

    }

    .page-description{

        font-size:.95rem;

        line-height:1.8;

    }

    .contact-form-card,
    .contact-info-card{

        padding:25px;

        border-radius:22px;

    }

    .section-header{

        text-align:center;

        margin-bottom:25px;

    }

    .section-header h2{

        font-size:1.8rem;

    }

    .form-control,
    .form-select{

        min-height:54px;

        padding:14px 16px;

        font-size:16px;

    }

    textarea.form-control{

        min-height:160px;

    }

    .info-item{

        gap:15px;

        padding:16px;

    }

    .info-icon{

        width:55px;

        height:55px;

        min-width:55px;

        font-size:1.2rem;

    }

    .social-links{

        justify-content:center;

        gap:12px;

        flex-wrap:wrap;

    }

    .social-btn{

        width:48px;

        height:48px;

    }

    .map-card{

        border-radius:20px;

    }

    .map-card iframe{

        height:300px;

    }

    .cta-section{

        padding:40px 0;

    }

    .cta-section h2{

        font-size:2rem;

    }

    .cta-section p{

        font-size:.95rem;

    }

    .btn-primary,
    .btn-success{

        width:100%;

        min-height:54px;

    }

}


/*=========================================================
    SMALL MOBILE (576px)
=========================================================*/

@media (max-width:576px){

    .container{

        padding-left:15px;

        padding-right:15px;

    }

    .contact-hero{

        padding:90px 0 45px;

    }

    .page-title{

        font-size:1.7rem;

    }

    .page-description{

        font-size:.9rem;

    }

    .hero-badge{

        padding:9px 18px;

        font-size:.75rem;

    }

    .contact-form-card,
    .contact-info-card{

        padding:20px;

    }

    .section-header h2{

        font-size:1.6rem;

    }

    .section-tag{

        font-size:.75rem;

    }

    .form-control,
    .form-select{

        padding:13px 15px;

    }

    textarea.form-control{

        min-height:140px;

    }

    .info-item{

        flex-direction:column;

        align-items:center;

        text-align:center;

        gap:15px;

    }

    .info-icon{

        margin:auto;

    }

    .social-links{

        justify-content:center;

    }

    .map-card iframe{

        height:260px;

    }

}


/*=========================================================
    EXTRA SMALL (400px)
=========================================================*/

@media (max-width:400px){

    .page-title{

        font-size:1.5rem;

    }

    .page-description{

        font-size:.88rem;

    }

    .section-header h2{

        font-size:1.35rem;

    }

    .hero-badge{

        font-size:.7rem;

    }

    .contact-form-card,
    .contact-info-card{

        padding:18px;

    }

    .form-control,
    .form-select{

        min-height:50px;

        font-size:.92rem;

    }

    textarea.form-control{

        min-height:120px;

    }

    .info-icon{

        width:48px;

        height:48px;

        min-width:48px;

        font-size:1rem;

    }

    .social-btn{

        width:44px;

        height:44px;

    }

    .cta-section h2{

        font-size:1.6rem;

    }

}