.elementor-182 .elementor-element.elementor-element-dd3f784{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-182 .elementor-element.elementor-element-86b5d79{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-182 .elementor-element.elementor-element-d82a925{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-182 .elementor-element.elementor-element-2e8af15{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-182 .elementor-element.elementor-element-41dd219{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:-60px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-182 .elementor-element.elementor-element-b5a16f2{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:-60px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start Element CSS: html *//* ===========================================================
EXCEL UNIVERSITY
PREMIUM AJAX CONTACT FORM
PART 2 — CSS ONLY
=========================================================== */

.excel-contact-form-card{

position:relative;

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

backdrop-filter:blur(22px);

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

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

border-radius:34px;

padding:50px;

box-shadow:

0 30px 80px rgba(0,0,0,.18);

overflow:hidden;

font-family:'DM Sans',sans-serif;

}

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

.excel-contact-form{

position:relative;

z-index:2;

}

.form-row{

display:grid;

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

gap:24px;

margin-bottom:24px;

}

.form-group{

margin-bottom:24px;

position:relative;

}

.form-group label{

display:block;

font-size:15px;

font-weight:700;

margin-bottom:12px;

color:#fff;

letter-spacing:.3px;

}

.form-group input,

.form-group select,

.form-group textarea{

width:100%;

padding:18px 22px;

border-radius:18px;

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

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

color:#fff;

font-size:16px;

outline:none;

transition:all .35s ease;

font-family:'DM Sans',sans-serif;

}

.form-group textarea{

resize:vertical;

min-height:190px;

}

.form-group input::placeholder,

.form-group textarea::placeholder{

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

}

.form-group select{

appearance:none;

cursor:pointer;

}

.form-group select option{

color:#0B2D70;

}

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

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

border-color:#D4AF37;

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

box-shadow:

0 0 0 4px rgba(212,175,55,.15),

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

transform:translateY(-2px);

}

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

.form-group.error input,

.form-group.error textarea,

.form-group.error select{

border-color:#ff5b5b;

box-shadow:

0 0 0 4px rgba(255,91,91,.15);

}

.form-group.success input,

.form-group.success textarea,

.form-group.success select{

border-color:#34d399;

box-shadow:

0 0 0 4px rgba(52,211,153,.15);

}

.error-message-field{

display:block;

margin-top:8px;

font-size:13px;

font-weight:600;

color:#ffb4b4;

min-height:18px;

}

/* ===========================================================
CHARACTER COUNTER
=========================================================== */

.character-counter{

text-align:right;

margin-top:-10px;

margin-bottom:28px;

font-size:14px;

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

}

.character-counter span{

font-weight:700;

color:#D4AF37;

}

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

.contact-submit-btn{

width:100%;

display:flex;

align-items:center;

justify-content:center;

gap:14px;

padding:20px;

border:none;

border-radius:70px;

background:#D72638;

color:#fff;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:all .35s ease;

box-shadow:

0 24px 50px rgba(215,38,56,.35);

}

.contact-submit-btn:hover{

background:#BE1F2F;

transform:translateY(-5px);

box-shadow:

0 35px 70px rgba(215,38,56,.45);

}

.contact-submit-btn:disabled{

opacity:.7;

cursor:not-allowed;

transform:none;

}

.button-icon{

transition:.35s;

font-size:20px;

}

.contact-submit-btn:hover .button-icon{

transform:translateX(5px);

}

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

.loading-overlay{

position:absolute;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:rgba(11,45,112,.92);

backdrop-filter:blur(15px);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:100;

}

.loading-overlay.active{

opacity:1;

visibility:visible;

}

.loading-box{

text-align:center;

color:#fff;

}

.loader{

width:72px;

height:72px;

margin:0 auto 25px;

border:5px solid rgba(255,255,255,.18);

border-top:5px solid #D4AF37;

border-radius:50%;

animation:excelSpin .8s linear infinite;

}

@keyframes excelSpin{

100%{

transform:rotate(360deg);

}

}

.loading-box h3{

font-size:26px;

margin-bottom:10px;

}

.loading-box p{

opacity:.85;

}

/* ===========================================================
SUCCESS / ERROR
=========================================================== */

.contact-alert{

display:none;

align-items:center;

gap:22px;

padding:24px 28px;

border-radius:20px;

margin-bottom:30px;

animation:fadeSlide .4s ease;

}

.contact-alert.show{

display:flex;

}

.success-message{

background:rgba(52,211,153,.15);

border:1px solid rgba(52,211,153,.35);

}

.error-message{

background:rgba(239,68,68,.15);

border:1px solid rgba(239,68,68,.35);

}

.alert-icon{

width:64px;

height:64px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

font-size:30px;

font-weight:700;

background:#fff;

flex-shrink:0;

}

.success-message .alert-icon{

color:#22C55E;

}

.error-message .alert-icon{

color:#EF4444;

}

.alert-content h3{

margin:0 0 6px;

color:#fff;

font-size:24px;

}

.alert-content p{

margin:0;

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

line-height:1.7;

}

/* ===========================================================
HONEYPOT
=========================================================== */

.honeypot{

display:none !important;

}

/* ===========================================================
ANIMATION
=========================================================== */

@keyframes fadeSlide{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

@media(max-width:768px){

.excel-contact-form-card{

padding:35px 26px;

border-radius:26px;

}

.form-row{

grid-template-columns:1fr;

gap:0;

}

.form-group input,

.form-group textarea,

.form-group select{

padding:16px 18px;

font-size:15px;

}

.contact-submit-btn{

padding:18px;

font-size:17px;

}

.loading-box h3{

font-size:22px;

}

.alert-content h3{

font-size:20px;

}

.alert-icon{

width:55px;

height:55px;

font-size:24px;

}

}/* End Element CSS */