/* =========================================================
   CENTRAL ERA CONTACT PAGE
   MICROSOFT FLUENT UI INSPIRED DESIGN
========================================================= */


/* =========================
   PAGE ROOT
========================= */

.contact-page{

    --ms-blue:#0078D4;
    --azure:#00A4EF;
    --purple:#742774;
    --green:#107C10;

    --dark:#1b1b1b;
    --text:#505050;

    background:#f5f9ff;

}



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


.ce-contact-hero{


    position:relative;

    padding:160px 0 110px;

    overflow:hidden;

    text-align:center;


    background:


    radial-gradient(
        circle at 15% 20%,
        rgba(0,120,212,.22),
        transparent 35%
    ),


    radial-gradient(
        circle at 85% 30%,
        rgba(116,39,116,.18),
        transparent 30%
    ),


    linear-gradient(
        180deg,
        #ffffff,
        #edf7ff
    );

}



.ce-contact-hero::before{


    content:"";

    position:absolute;

    width:650px;

    height:650px;


    background:

    linear-gradient(
        135deg,
        rgba(0,120,212,.18),
        transparent
    );


    border-radius:50%;


    top:-350px;

    left:-250px;


    animation:

    floatGlow 12s infinite alternate;


}



@keyframes floatGlow{

from{

transform:translateY(0px);

}


to{

transform:translateY(80px);

}

}




.ce-contact-badge{


    display:inline-block;


    padding:10px 25px;


    border-radius:50px;


    background:#e8f3ff;


    color:#0078D4;


    font-weight:700;


    letter-spacing:1px;


    border:1px solid #cfe7fa;


}





.ce-contact-hero h1{


    position:relative;


    z-index:2;


    max-width:1000px;


    margin:35px auto 25px;


    font-size:68px;


    font-weight:800;


    line-height:1.1;


    letter-spacing:-2px;


    color:#1b1b1b;


}



.ce-contact-hero h1 span{


    display:block;


    background:


    linear-gradient(
        90deg,
        #0078D4,
        #00A4EF,
        #742774
    );


    -webkit-background-clip:text;


    color:transparent;


}





.ce-contact-hero p{


    max-width:850px;


    margin:auto;


    color:#505050;


    font-size:20px;


    line-height:1.8;


}




/* =========================================================
   TOP FEATURE CARDS
========================================================= */


.ce-contact-cards{


    margin-top:80px;


    display:grid;


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


    gap:30px;


}



.ce-contact-cards div{


    position:relative;


    overflow:hidden;


    background:

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


    backdrop-filter:blur(15px);



    padding:45px 35px;


    border-radius:28px;


    border:1px solid #dceaf7;


    box-shadow:

    0 25px 60px rgba(0,0,0,.08);


    transition:.45s;


}



.ce-contact-cards div:hover{


    transform:

    translateY(-15px);


    box-shadow:

    0 35px 80px rgba(0,120,212,.18);


}



.ce-contact-cards div::after{


    content:"";


    position:absolute;


    width:150px;


    height:150px;


    right:-60px;


    top:-60px;


    border-radius:50%;


    background:

    rgba(0,120,212,.08);


}



.ce-contact-cards i{


    width:75px;


    height:75px;


    display:flex;


    justify-content:center;


    align-items:center;


    margin:auto;


    border-radius:22px;


    color:white;


    font-size:32px;


    background:


    linear-gradient(
        135deg,
        #0078D4,
        #00A4EF
    );

}



.ce-contact-cards div:nth-child(2) i{


background:

linear-gradient(
135deg,
#107C10,
#4CAF50
);


}



.ce-contact-cards div:nth-child(3) i{


background:

linear-gradient(
135deg,
#742774,
#B146C2
);


}



.ce-contact-cards h3{


    margin-top:25px;


    font-size:26px;


    color:#1b1b1b;


}




.ce-contact-cards p{


    color:#605E5C;


    line-height:1.7;


}



/* =========================================================
 MAIN CONTACT AREA
========================================================= */


.ce-contact-section{


    padding:120px 0;


    background:


    linear-gradient(
        180deg,
        #f5f9ff,
        #ffffff
    );

}




.ce-contact-grid{


    display:grid;


    grid-template-columns:420px 1fr;


    gap:70px;


    align-items:start;


}



/* =========================================================
 LEFT SIDE INFORMATION
========================================================= */


.ce-contact-info h2{


    font-size:46px;


    line-height:1.2;


    color:#1b1b1b;


}



.ce-contact-info>p{


    color:#505050;


    font-size:17px;


    line-height:1.8;


    margin-bottom:40px;


}




.ce-info-box{


    display:flex;


    gap:18px;


    align-items:center;


    background:white;


    padding:22px;


    margin-bottom:18px;


    border-radius:20px;


    border:1px solid #dceaf7;


    transition:.35s;


}



.ce-info-box:hover{


    transform:translateX(12px);


    border-color:#0078D4;


    box-shadow:

    0 15px 35px rgba(0,120,212,.12);


}





.ce-info-box i{


    width:60px;


    height:60px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:18px;


    background:#eaf5ff;


    color:#0078D4;


    font-size:24px;


}



.ce-info-box h4{


    margin-bottom:5px;


    color:#1b1b1b;


}



.ce-info-box p{


    color:#605E5C;


}



/* =========================================================
 FORM CARD
========================================================= */


.ce-contact-form-card{


    background:white;


    padding:55px;


    border-radius:35px;


    border:1px solid #dceaf7;


    box-shadow:


    0 35px 90px rgba(0,0,0,.10);


    position:relative;


    overflow:hidden;


}




.ce-contact-form-card::before{


    content:"";


    position:absolute;


    width:250px;


    height:250px;


    right:-120px;


    top:-120px;


    background:#0078D415;


    border-radius:50%;


}




.ce-contact-form-card h2{


    position:relative;


    font-size:38px;


    margin-bottom:35px;


    color:#1b1b1b;


}




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


.ce-input-row{


    display:grid;


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


    gap:20px;


}




.ce-input-group{


    display:flex;


    flex-direction:column;


    margin-bottom:20px;


}



.ce-input-group label{


    font-weight:600;


    color:#323130;


    margin-bottom:10px;


}




.ce-input-group input,
.ce-input-group select,
.ce-input-group textarea{


    padding:17px;


    border-radius:15px;


    border:1px solid #d5e4f3;


    background:#fbfdff;


    font-size:15px;


    transition:.3s;


}





.ce-input-group input:hover,
.ce-input-group select:hover,
.ce-input-group textarea:hover{


    border-color:#00A4EF;


}





.ce-input-group input:focus,
.ce-input-group select:focus,
.ce-input-group textarea:focus{


    outline:none;


    border-color:#0078D4;


    box-shadow:


    0 0 0 5px rgba(0,120,212,.12);


}





/* =========================================================
 SERVICES GRID
========================================================= */


.ce-form-heading{


    margin:35px 0 20px;


    font-size:24px;


    color:#1b1b1b;


}





.ce-checkbox-grid{


    display:grid;


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


    gap:16px;


}




.ce-checkbox-grid label{


    display:flex;


    align-items:center;


    gap:14px;


    padding:18px;


    background:#f7fbff;


    border-radius:18px;


    border:1px solid #dceaf7;


    cursor:pointer;


    transition:.35s;


}



.ce-checkbox-grid label:hover{


    background:#eaf5ff;


    border-color:#0078D4;


    transform:translateY(-5px);


}



.ce-checkbox-grid i{


    color:#0078D4;


    font-size:20px;


}



.ce-checkbox-grid input{


    accent-color:#0078D4;


}



/* =========================================================
 PRIVACY
========================================================= */


.ce-checkbox-single label,
.ce-privacy label{


    display:flex;


    gap:12px;


    line-height:1.6;


}



.ce-privacy{


    margin-top:20px;


    padding:20px;


    background:#f4f9ff;


    border-radius:18px;


    border:1px solid #dceaf7;


}





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


.ce-submit-btn{


    width:100%;


    margin-top:25px;


    padding:18px;


    border-radius:15px;


    border:none;


    color:white;


    font-size:18px;


    font-weight:700;


    background:


    linear-gradient(
        90deg,
        #0078D4,
        #00A4EF
    );


    transition:.35s;


}



.ce-submit-btn:hover{


    transform:translateY(-5px);


    box-shadow:

    0 20px 50px rgba(0,120,212,.35);


}




.ce-small-note{


    text-align:center;


    margin-top:20px;


    color:#605E5C;


}





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


@media(max-width:1100px){


.ce-contact-grid{


grid-template-columns:1fr;


}


.ce-contact-cards{


grid-template-columns:1fr;


}


.ce-input-row,
.ce-checkbox-grid{


grid-template-columns:1fr;


}


.ce-contact-hero h1{


font-size:45px;


}


}
/* =========================================================
   CONTACT PAGE TEXT OVERRIDE FIX
   Prevent homepage white text conflicts
========================================================= */


.contact-page h1,
.contact-page h2,
.contact-page h3,
.contact-page h4,
.contact-page p,
.contact-page span,
.contact-page label{

    color:#1b1b1b;

}



/* Hero text */

.contact-page .ce-contact-hero h1{

    color:#1b1b1b !important;

}


.contact-page .ce-contact-hero h1 span{

    color:transparent !important;

}



.contact-page .ce-contact-hero p{

    color:#505050 !important;

}




/* Badge */

.contact-page .ce-contact-badge{

    color:#0078D4 !important;

}




/* Cards */


.contact-page .ce-contact-cards h3{

    color:#1b1b1b !important;

}



.contact-page .ce-contact-cards p{

    color:#605E5C !important;

}





/* Left section */


.contact-page .ce-contact-info h2{

    color:#1b1b1b !important;

}



.contact-page .ce-contact-info p{

    color:#505050 !important;

}



.contact-page .ce-info-box h4{

    color:#1b1b1b !important;

}



.contact-page .ce-info-box p{

    color:#605E5C !important;

}





/* Form */


.contact-page .ce-contact-form-card h2{

    color:#1b1b1b !important;

}



.contact-page .ce-input-group label{

    color:#323130 !important;

}



.contact-page .ce-form-heading{

    color:#1b1b1b !important;

}




/* Checkbox text */


.contact-page .ce-checkbox-grid span{

    color:#323130 !important;

}



.contact-page .ce-checkbox-single,
.contact-page .ce-checkbox-single label,
.contact-page .ce-privacy label{

    color:#323130 !important;

}




/* Small text */


.contact-page .ce-small-note{

    color:#605E5C !important;

}