/*======================================
GOOGLE FONT
======================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#08142b;

    min-height:100vh;

    overflow-x:hidden;

}

/*======================================
OVERLAY
======================================*/

.contact-overlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:16px;

    background:rgba(5,18,45,.78);

    backdrop-filter:blur(10px);

    z-index:9999;

}

/*======================================
POPUP
======================================*/

.contact-popup{

    position:relative;

    width:1180px;

    max-width:96vw;

    height:min(92vh,675px);

    display:grid;

    grid-template-columns:56% 44%;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:
    0 25px 70px rgba(0,0,0,.28);

    animation:popup .35s ease;

    transition:.35s;

}

.contact-popup:hover{

    transform:translateY(-2px);

}

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

@keyframes popup{

    from{

        opacity:0;

        transform:translateY(25px) scale(.97);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*======================================
RIGHT PANEL
======================================*/

.contact-right{

    position:relative;

    background:#fff;

    padding:28px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

/*======================================
CONTACT CLOSE BUTTON
======================================*/

.contact-close{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#e30613;

    color:#fff;

    text-decoration:none;

    font-size:16px;

    transition:.35s;

    box-shadow:0 10px 24px rgba(227,6,19,.30);

    z-index:100;

}

.contact-close:hover{

    background:#002b6b;

    color:#fff;

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

}
/*======================================
LEFT PANEL
======================================*/

.contact-left{

    background:linear-gradient(135deg,#002b6b 0%,#004aad 100%);

    color:#fff;

    padding:28px;

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    overflow:hidden;

}

/*======================================
DECORATIVE SHAPES
======================================*/

.contact-left::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

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

    top:-90px;

    right:-90px;

}

.contact-left::after{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    border-radius:50%;

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

    left:-45px;

    bottom:-45px;

}

/*======================================
TAG
======================================*/

.contact-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    padding:7px 16px;

    background:#e30613;

    color:#fff;

    border-radius:40px;

    font-size:12px;

    font-weight:600;

    margin-bottom:12px;

    position:relative;

    z-index:2;

}

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

.contact-left h2{

    font-size:26px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:12px;

    position:relative;

    z-index:2;

}

.contact-left > p{

    font-size:14px;

    line-height:1.7;

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

    margin-bottom:22px;

    position:relative;

    z-index:2;

}

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

.contact-info{

    display:flex;

    flex-direction:column;

    gap:14px;

    position:relative;

    z-index:2;

}

.info-box{

    display:flex;

    align-items:flex-start;

    gap:12px;

}

.info-box i{

    width:44px;

    height:44px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#fff;

    color:#e30613;

    font-size:16px;

    transition:.35s;

}

.info-box:hover i{

    background:#e30613;

    color:#fff;

    transform:scale(1.08);

}

.info-box h4{

    font-size:16px;

    font-weight:600;

    margin-bottom:3px;

}

.info-box p{

    margin:0;

    font-size:13px;

    line-height:1.6;

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

}

/*======================================
PHONE & EMAIL LINKS
======================================*/

.contact-link{

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.contact-link:hover{

    color:#FFD54F;

}

/*======================================
SOCIAL ICONS
======================================*/

.contact-social{

    display:flex;

    gap:10px;

    margin-top:22px;

    position:relative;

    z-index:2;

}

.contact-social a{

    width:40px;

    height:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.contact-social a:hover{

    background:#fff;

    color:#004aad;

    transform:translateY(-4px);

}
/*======================================
RIGHT PANEL
======================================*/

.contact-right{

    position:relative;

    background:#fff;

    padding:28px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

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

.contact-right h2{

    color:#002b6b;

    font-size:28px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:10px;

}

.contact-trust{

    display:flex;

    align-items:center;

    gap:8px;

    color:#666;

    font-size:13px;

    line-height:1.6;

    margin-bottom:18px;

}

.contact-trust i{

    color:#16a34a;

    font-size:16px;

}

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

.contact-right form{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:12px;

    flex:1;

}

.input-row{

    display:grid;

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

    gap:12px;

}

.input-group{

    width:100%;

}

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

.input-group input,
.input-group select{

    width:100%;

    height:48px;

    padding:0 16px;

    border:1px solid #d7dfeb;

    border-radius:10px;

    background:#fff;

    font-size:14px;

    font-family:'Poppins',sans-serif;

    color:#333;

    outline:none;

    transition:.3s;

}

.input-group textarea{

    width:100%;

    height:110px;

    padding:14px 16px;

    border:1px solid #d7dfeb;

    border-radius:10px;

    background:#fff;

    resize:none;

    font-size:14px;

    font-family:'Poppins',sans-serif;

    color:#333;

    outline:none;

    transition:.3s;

}

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

.input-group input::placeholder,
.input-group textarea::placeholder{

    color:#9ca3af;

}

.input-group select{

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5 8 12l6.5-6.5' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 16px center;

    padding-right:45px;

}

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

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

    border-color:#0052cc;

    box-shadow:0 0 0 4px rgba(0,82,204,.10);

}

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

.contact-right button{

    width:100%;

    height:50px;

    border:none;

    border-radius:10px;

    background:linear-gradient(135deg,#e30613,#ff4040);

    color:#fff;

    font-size:15px;

    font-weight:600;

    font-family:'Poppins',sans-serif;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:8px;

    transition:.35s;

}

.contact-right button:hover{

    background:linear-gradient(135deg,#002b6b,#0052cc);

    transform:translateY(-2px);

    box-shadow:0 12px 28px rgba(0,43,107,.22);

}

.contact-right button:active{

    transform:scale(.98);

}

.contact-right button i{

    font-size:15px;

}
/*======================================
LARGE DESKTOP
======================================*/

@media (min-width:1600px){

.contact-popup{

    width:1280px;

    height:700px;

}

}

/*======================================
LAPTOP
======================================*/

@media (max-width:1400px){

.contact-popup{

    width:95vw;

    height:min(92vh,650px);

}

.contact-left,
.contact-right{

    padding:24px;

}

.contact-left h2,
.contact-right h2{

    font-size:24px;

}

.contact-left>p{

    font-size:13px;

}

.input-group input,
.input-group select{

    height:46px;

}

.input-group textarea{

    height:95px;

}

.contact-right button{

    height:48px;

}

}

/*======================================
SMALL LAPTOP
======================================*/

@media (max-width:1200px){

.contact-popup{

    width:96vw;

    min-height:620px;

    height:auto;

}

.contact-left,
.contact-right{

    padding:22px;

}

.input-row{

    gap:10px;

}

}

/*======================================
TABLET
======================================*/

@media (max-width:992px){

body{

    overflow:auto;

}

.contact-overlay{

    position:relative;

    padding:15px;

    align-items:flex-start;

    overflow:auto;

}

.contact-popup{

    width:100%;

    height:auto;

    display:flex;

    flex-direction:column;

    border-radius:18px;

}

.contact-right{

    order:1;

    padding:24px;

}

.contact-left{

    order:2;

    padding:24px;

}

.input-row{

    grid-template-columns:1fr;

}

.contact-close{

    top:15px;

    right:15px;

}

}

/*======================================
MOBILE
======================================*/

@media (max-width:768px){

.contact-overlay{

    padding:10px;

}

.contact-left,
.contact-right{

    padding:20px;

}

.contact-left h2,
.contact-right h2{

    font-size:22px;

}

.contact-left>p{

    font-size:13px;

    line-height:1.6;

}

.contact-trust{

    font-size:12px;

    margin-bottom:14px;

}

.input-group input,
.input-group select{

    height:44px;

    font-size:14px;

}

.input-group textarea{

    height:90px;

    font-size:14px;

}

.contact-right button{

    height:48px;

    font-size:14px;

}

.contact-social{

    margin-top:16px;

}

.contact-close{

    width:40px;

    height:40px;

}

}

/*======================================
SMALL MOBILE
======================================*/

@media (max-width:480px){

.contact-overlay{

    padding:8px;

}

.contact-left,
.contact-right{

    padding:18px;

}

.contact-tag{

    font-size:11px;

    padding:6px 14px;

}

.contact-left h2,
.contact-right h2{

    font-size:20px;

}

.info-box{

    gap:8px;

}

.info-box i{

    width:38px;

    height:38px;

    font-size:14px;

}

.contact-social a{

    width:36px;

    height:36px;

}

.contact-close{

    width:38px;

    height:38px;

    font-size:14px;

}

}

/*======================================
AUTO HEIGHT DESKTOP
======================================*/

@media (min-width:993px){

.contact-popup{

    height:min(92vh,670px);

}

.contact-left,
.contact-right{

    justify-content:space-between;

}

.contact-right form{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    flex:1;

}

}

/*======================================
SHORT HEIGHT SCREENS
======================================*/

@media (max-height:780px){

.contact-popup{

    height:96vh;

}

.contact-left,
.contact-right{

    padding:22px;

}

.contact-left h2{

    font-size:22px;

}

.contact-right h2{

    font-size:24px;

}

.contact-left>p{

    font-size:13px;

    line-height:1.45;

}

.contact-info{

    gap:10px;

}

.info-box i{

    width:38px;

    height:38px;

}

.contact-social{

    margin-top:10px;

}

.contact-right form{

    gap:8px;

}

.input-group input,
.input-group select{

    height:42px;

}

.input-group textarea{

    height:70px;

}

.contact-right button{

    height:44px;

}

}

/*======================================
VERY SHORT HEIGHT
======================================*/

@media (max-height:700px){

body{

    overflow:auto;

}

.contact-overlay{

    padding:15px;

    align-items:flex-start;

    overflow:auto;

}

.contact-popup{

    height:auto;

    min-height:620px;

}

}
/*======================================
SUCCESS POPUP
======================================*/

.success-popup{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(8,20,43,.78);

    backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:99999;

}

.success-popup.show{

    opacity:1;

    visibility:visible;

}

/*======================================
SUCCESS BOX
======================================*/

.success-box{

    width:480px;

    max-width:92%;

    background:#fff;

    border-radius:22px;

    padding:45px 35px;

    text-align:center;

    position:relative;

    box-shadow:0 25px 70px rgba(0,0,0,.28);

    animation:successPopup .4s ease;

}

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

@keyframes successPopup{

    from{

        opacity:0;

        transform:translateY(35px) scale(.92);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/*======================================
SUCCESS ICON
======================================*/

.success-icon{

    width:90px;

    height:90px;

    margin:0 auto 22px;

    border-radius:50%;

    background:#16a34a;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    box-shadow:0 12px 30px rgba(22,163,74,.35);

}

.success-icon i{

    font-size:42px;

}

/*======================================
SUCCESS TEXT
======================================*/

.success-box h2{

    color:#002b6b;

    font-size:30px;

    font-weight:700;

    margin-bottom:12px;

}

.success-box p{

    color:#666;

    font-size:15px;

    line-height:1.8;

    margin-bottom:28px;

}

.success-box strong{

    color:#002b6b;

    font-weight:600;

}

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

.success-box button{

    width:190px;

    height:50px;

    border:none;

    border-radius:12px;

    background:linear-gradient(135deg,#e30613,#ff4040);

    color:#fff;

    font-size:15px;

    font-weight:600;

    font-family:'Poppins',sans-serif;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin:auto;

    transition:.35s;

}

.success-box button:hover{

    background:linear-gradient(135deg,#002b6b,#0052cc);

    transform:translateY(-2px);

    box-shadow:0 12px 28px rgba(0,43,107,.22);

}

.success-box button:active{

    transform:scale(.98);

}

/*======================================
SUCCESS POPUP RESPONSIVE
======================================*/

@media (max-width:768px){

.success-box{

    width:94%;

    padding:32px 22px;

}

.success-icon{

    width:72px;

    height:72px;

}

.success-icon i{

    font-size:34px;

}

.success-box h2{

    font-size:24px;

}

.success-box p{

    font-size:14px;

    line-height:1.7;

}

.success-box button{

    width:170px;

    height:46px;

    font-size:14px;

}

}

@media (max-width:480px){

.success-box{

    padding:28px 18px;

}

.success-icon{

    width:65px;

    height:65px;

}

.success-icon i{

    font-size:30px;

}

.success-box h2{

    font-size:22px;

}

.success-box p{

    font-size:13px;

}

.success-box button{

    width:160px;

    height:44px;

    font-size:13px;

}

}

/*======================================
END
======================================*/