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

.contact-hero{

    position:relative;

    padding:140px 20px 120px;

    background:#19272B;

    overflow:hidden;

}



/* Left Glow */

.contact-hero::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-180px;

    top:-120px;

    background:radial-gradient(circle,
    rgba(0,229,255,.18),
    transparent 70%);

}



/* Right Glow */

.contact-hero::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-200px;

    bottom:-180px;

    background:radial-gradient(circle,
    rgba(79,140,255,.16),
    transparent 70%);

}



.contact-hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

    text-align:center;

}



/* ==========================
   SUBTITLE
========================== */

.contact-subtitle{

    display:inline-block;

    color:#4F8CFF;

    font-size:14px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:18px;

}



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

.contact-hero h1{

    color:#fff;

    font-size:64px;

    line-height:1.15;

    margin-bottom:25px;

}



/* ==========================
   DESCRIPTION
========================== */

.contact-hero p{

    max-width:720px;

    margin:auto;

    color:#B8C7CC;

    font-size:18px;

    line-height:1.9;

}



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

.contact-hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:45px;

    padding:17px 40px;

    border-radius:50px;

    background:linear-gradient(90deg, #4F8CFF, #00E5FF);

    color:#19272B;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    transition:.35s ease;

}



.contact-hero-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 40px rgba(0,229,255,.35);
    
    color:#fff;

}



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

@media(max-width:992px){

.contact-hero{

    padding:110px 20px 90px;

}

.contact-hero h1{

    font-size:52px;

}

}



@media(max-width:768px){

.contact-hero{

    padding:90px 20px 70px;

}

.contact-hero h1{

    font-size:38px;

}

.contact-hero p{

    font-size:16px;

}

.contact-hero-btn{

    width:100%;

    max-width:280px;

    padding:15px 30px;

}

}

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

.contact-section{

    padding:100px 20px;

    background:#19272B;

}

.contact-container{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:420px 1fr;

    gap:60px;

    align-items:start;

}

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

.contact-info{

    background:#243135;

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

    border-radius:30px;

    padding:40px;

    position:sticky;

    top:120px;

}

.contact-info-subtitle{

    display:block;

    color:#00E5FF;

    font-size:14px;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:15px;

}

.contact-info h2{

    color:#fff;

    font-size:38px;

    margin-bottom:20px;

}

.contact-info > p{

    color:#B8C7CC;

    line-height:1.8;

    margin-bottom:40px;

}

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

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:28px;

}

.contact-icon{

    width:58px;

    height:58px;

    border-radius:16px;

    background:#19272B;

    border:1px solid rgba(0,229,255,.25);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    transition:.35s;

}

.contact-icon i{

    color:#00E5FF;

    font-size:20px;

}

.contact-item:hover .contact-icon{

    transform:translateY(-5px);

    border-color:#00E5FF;

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

}

.contact-item h4{

    color:#fff;

    margin:0 0 6px;

    font-size:18px;

}

.contact-item p{

    margin:0;

    color:#B8C7CC;

    line-height:1.6;

}

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

.contact-form-wrapper{

    background:#243135;

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

    border-radius:30px;

    padding:45px;

}

.contact-form-wrapper h2{

    color:#fff;

    margin-bottom:15px;

}

.contact-form-wrapper p{

    color:#B8C7CC;

    margin-bottom:30px;

}

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

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

    width:100%;

    background:#19272B !important;

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

    color:#fff !important;

    border-radius:14px !important;

    padding:14px 18px !important;

    transition:.3s;

}

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

    border-color:#00E5FF !important;

    box-shadow:0 0 0 3px rgba(0,229,255,.15);

}

.contact-form-wrapper textarea{

    min-height:180px;

}

.contact-form-wrapper button,
.contact-form-wrapper .ff-btn-submit{

    background:linear-gradient(90deg, #4F8CFF, #00E5FF) !important;

    color:#19272B !important;

    border:none !important;

    border-radius:50px !important;

    padding:15px 35px !important;

    font-weight:700;

    transition:.35s;

}

.contact-form-wrapper button:hover,
.contact-form-wrapper .ff-btn-submit:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(0,229,255,.35);
    
    color:#fff;
    

}

.fluentform .ff-el-input--label{
    color:#fff;
}
/* ==========================
   RESPONSIVE
========================== */

@media(max-width:991px){

.contact-container{

    grid-template-columns:1fr;

}

.contact-info{

    position:relative;

    top:0;

}

}

@media(max-width:768px){

.contact-section{

    padding:70px 20px;

}

.contact-info,
.contact-form-wrapper{

    padding:30px;

}

.contact-info h2{

    font-size:30px;

}

}

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

.contact-benefits{

    padding:100px 20px;

    background:#19272B;

}

.contact-benefits-heading{

    max-width:750px;

    margin:0 auto 60px;

    text-align:center;

}

.contact-benefits-heading span{

    color:#4F8CFF;

    font-size:14px;

    letter-spacing:3px;

    font-weight:600;

}

.contact-benefits-heading h2{

    color:#fff;

    font-size:46px;

    margin:18px 0;

}

.contact-benefits-heading p{

    color:#B8C7CC;

    line-height:1.8;

}

.contact-benefits-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.benefit-card{

    background:#243135;

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

    border-radius:24px;

    padding:35px;

    transition:.35s;

}

.benefit-card:hover{

    transform:translateY(-8px);

    border-color:#00E5FF;

}

.benefit-icon{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#19272B;

    margin-bottom:25px;

}

.benefit-icon i{

    color:#00E5FF;

    font-size:24px;

}

.benefit-card h3{

    color:#fff;

    margin-bottom:15px;

}

.benefit-card p{

    color:#B8C7CC;

    line-height:1.8;

}

@media(max-width:768px){

.contact-benefits-grid{

    grid-template-columns:1fr;

}

.contact-benefits-heading h2{

    font-size:34px;

}

}

/* ==========================
   LOCATION SECTION
========================== */


.location-section{

    padding:100px 20px;

    background:#19272B;

}


.location-container{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 420px;

    gap:60px;

    align-items:center;

}



/* MAP */

.contact-map iframe{

    width:100%;

    border-radius:30px;

    filter:

    grayscale(100%);

}





/* BUSINESS HOURS */


.business-hours{

    background:#243135;

    border-radius:30px;

    padding:40px;

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

}


.business-hours > span{

    color:#00E5FF;

    letter-spacing:3px;

    font-size:14px;

    font-weight:600;

}


.business-hours h2{

    color:#fff;

    font-size:36px;

    margin:18px 0;

}


.business-hours > p{

    color:#B8C7CC;

    line-height:1.8;

    margin-bottom:35px;

}



.hours-item{

    display:flex;

    gap:18px;

    margin-bottom:25px;

}


.hours-icon{

    width:55px;

    height:55px;

    border-radius:16px;

    background:#19272B;

    border:1px solid rgba(0,229,255,.25);

    display:flex;

    align-items:center;

    justify-content:center;

}


.hours-icon i{

    color:#00E5FF;

    font-size:20px;

}


.hours-item h4{

    color:#fff;

    margin:0 0 5px;

}


.hours-item p{

    color:#B8C7CC;

    margin:0;

    line-height:1.6;

}



@media(max-width:991px){


.location-container{

    grid-template-columns:1fr;

}


}

/* ==========================
   FINAL CONTACT CTA
========================== */


.contact-final-cta{

    padding:100px 20px;

    background:#19272B;

}



.contact-cta-box{

    max-width:1100px;

    margin:auto;

    padding:80px 50px;

    text-align:center;

    border-radius:35px;

    background:#243135;

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

    position:relative;

    overflow:hidden;

}



.contact-cta-box::before{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    top:-200px;

    left:-200px;

    background:

    radial-gradient(circle,
    rgba(0,229,255,.25),
    transparent 70%);

}



.contact-cta-box::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    bottom:-200px;

    right:-200px;

    background:

    radial-gradient(circle,
    rgba(79,140,255,.25),
    transparent 70%);

}



.contact-cta-box > *{

    position:relative;

    z-index:2;

}



.contact-cta-box span{

    color:#00E5FF;

    font-size:14px;

    letter-spacing:3px;

    font-weight:600;

}



.contact-cta-box h2{

    color:#fff;

    font-size:48px;

    max-width:850px;

    margin:20px auto;

    line-height:1.3;

}



.contact-cta-box p{

    max-width:700px;

    margin:0 auto 40px;

    color:#B8C7CC;

    font-size:18px;

    line-height:1.8;

}



/* BUTTONS */


.contact-cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}



.cta-main,
.cta-outline{

    padding:16px 38px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}



.cta-main{

    background:linear-gradient(90deg, #4F8CFF, #00E5FF);

    color:#19272B;

}



.cta-main:hover{

    transform:translateY(-5px);

    box-shadow:

    0 15px 40px rgba(0,229,255,.4);
    
    color:#fff;

}



.cta-outline{

    border:1px solid #00E5FF;

    color:#fff;

}



.cta-outline:hover{

    background:linear-gradient(90deg, #4F8CFF, #00E5FF);

    color:#19272B;

}



@media(max-width:768px){


.contact-final-cta{

    padding:70px 20px;

}


.contact-cta-box{

    padding:50px 25px;

}



.contact-cta-box h2{

    font-size:34px;

}



.contact-cta-box p{

    font-size:15px;

}



.contact-cta-buttons{

    flex-direction:column;

}



}