/*==================================================
 AL FAJR FOUNDATION
 CONTACT SECTION
 Premium Version
==================================================*/


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

.contact-section{

    position:relative;

    overflow:hidden;

    padding:150px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbf8f2 50%,
            #f5efe4 100%
        );

}


/*=========================================
MORNING LIGHT
=========================================*/

.contact-light{

    position:absolute;

    border-radius:50%;

    filter:blur(70px);

    pointer-events:none;

}

.contact-light.one{

    width:620px;

    height:620px;

    left:-220px;

    top:-180px;

    background:
        rgba(212,175,55,.12);

}

.contact-light.two{

    width:520px;

    height:520px;

    right:-180px;

    bottom:-140px;

    background:
        rgba(6,20,45,.08);

}


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

.contact-grid{

    display:grid;

    grid-template-columns:

        420px
        1fr;

    gap:50px;

    margin-top:90px;

}


/*=========================================
LEFT COLUMN
=========================================*/

.contact-info{

    display:flex;

    flex-direction:column;

    gap:24px;

}


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

.contact-card{

    display:flex;

    gap:22px;

    align-items:flex-start;

    padding:30px;

    border-radius:28px;

    background:#ffffff;

    border:1px solid rgba(212,175,55,.16);

    box-shadow:

        0 18px 50px rgba(0,0,0,.08);

    transition:.4s;

}

.contact-card:hover{

    transform:translateY(-8px);

    border-color:

        rgba(212,175,55,.40);

    box-shadow:

        0 30px 70px rgba(0,0,0,.12);

}


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

.contact-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    background:

        linear-gradient(
            135deg,
            var(--gold),
            #edd47b
        );

    color:#ffffff;

    font-size:1.5rem;

    box-shadow:

        0 15px 35px rgba(212,175,55,.28);

}


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

.contact-card h3{

    margin:0 0 10px;

    color:var(--navy);

    font-family:"Playfair Display",serif;

    font-size:1.35rem;

}

.contact-card p{

    margin:0;

    color:var(--muted);

    line-height:1.9;

}


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

.contact-social{

    display:flex;

    gap:16px;

    margin-top:12px;

}

.contact-social a{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    background:#ffffff;

    color:var(--navy);

    border:1px solid rgba(212,175,55,.18);

    box-shadow:

        0 10px 25px rgba(0,0,0,.06);

    transition:.35s;

}

.contact-social a:hover{

    background:var(--gold);

    color:#ffffff;

    transform:translateY(-6px);

}
/*==================================================
 PART 2
 PREMIUM CONTACT FORM
==================================================*/


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

.contact-form-wrapper{

    position:relative;

}

.contact-form{

    padding:42px;

    border-radius:32px;

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

    backdrop-filter:blur(18px);

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

    border:1px solid rgba(212,175,55,.18);

    box-shadow:

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

}


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

.form-group{

    margin-bottom:24px;

}

.form-group label{

    display:block;

    margin-bottom:10px;

    color:var(--navy);

    font-weight:700;

    font-size:.95rem;

    letter-spacing:.03em;

}


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

.form-group input,

.form-group textarea{

    width:100%;

    padding:16px 18px;

    border-radius:16px;

    border:1px solid rgba(6,20,45,.12);

    background:#ffffff;

    color:var(--navy);

    font-size:1rem;

    outline:none;

    transition:

        border-color .35s ease,

        box-shadow .35s ease,

        transform .35s ease;

}


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

.form-group textarea{

    resize:vertical;

    min-height:180px;

}


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

.form-group input:focus,

.form-group textarea:focus{

    border-color:var(--gold);

    box-shadow:

        0 0 0 4px rgba(212,175,55,.18);

    transform:translateY(-2px);

}


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

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#9ca3af;

}


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

.contact-buttons{

    display:flex;

    gap:18px;

    margin-top:10px;

    flex-wrap:wrap;

}





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

.contact-form:hover{

    box-shadow:

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

}
/*==================================================
 PART 3
 MAP • RESPONSIVE • ANIMATIONS
==================================================*/


/*=========================================
GOOGLE MAP
=========================================*/

.contact-map{

    margin-top:90px;

    overflow:hidden;

    border-radius:32px;

    border:1px solid rgba(212,175,55,.18);

    background:#ffffff;

    box-shadow:

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

}

.contact-map iframe{

    width:100%;

    height:500px;

    border:0;

    display:block;

}


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

.map-placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:500px;

    padding:40px;

    text-align:center;

    color:var(--muted);

    font-size:1.05rem;

    background:

        linear-gradient(

            135deg,

            #fafafa,

            #f3f4f6

        );

}


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

.contact-card,

.contact-form,

.contact-map{

    opacity:0;

    transform:translateY(60px);

    animation:contactFade .9s ease forwards;

}

.contact-card:nth-child(1){

    animation-delay:.10s;

}

.contact-card:nth-child(2){

    animation-delay:.20s;

}

.contact-card:nth-child(3){

    animation-delay:.30s;

}

.contact-form{

    animation-delay:.40s;

}

.contact-map{

    animation-delay:.55s;

}


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

.contact-light.one{

    animation:contactGlowOne 18s ease-in-out infinite;

}

.contact-light.two{

    animation:contactGlowTwo 24s ease-in-out infinite;

}


/*=========================================
KEYFRAMES
=========================================*/

@keyframes contactFade{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes contactGlowOne{

0%,100%{

transform:translate(0,0) scale(1);

opacity:.45;

}

50%{

transform:translate(40px,25px) scale(1.08);

opacity:.85;

}

}

@keyframes contactGlowTwo{

0%,100%{

transform:translate(0,0);

opacity:.35;

}

50%{

transform:translate(-30px,-25px);

opacity:.75;

}

}


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

@media(max-width:1100px){

.contact-grid{

grid-template-columns:1fr;

gap:40px;

}

}

@media(max-width:768px){

.contact-section{

padding:110px 0;

}

.contact-form{

padding:30px;

}

.contact-card{

padding:24px;

}

.contact-icon{

width:60px;

height:60px;

font-size:1.3rem;

}

.contact-map iframe,

.map-placeholder{

height:380px;

}

}

@media(max-width:520px){

.contact-card{

flex-direction:column;

align-items:flex-start;

}

.contact-form{

padding:22px;

border-radius:24px;

}

.contact-buttons{

flex-direction:column;

}

.contact-buttons .btn-primary,

.contact-buttons .btn-secondary{

width:100%;

}

.contact-social{

flex-wrap:wrap;

}

.contact-map{

border-radius:24px;

}

.contact-map iframe,

.map-placeholder{

height:300px;

}

}