/*
|--------------------------------------------------------------------------
| Contact Page
|--------------------------------------------------------------------------
| Quran Project
| Laravel 12
|--------------------------------------------------------------------------
*/


.contact-hero{

    position:relative;

    min-height:950px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:

        linear-gradient(
            rgba(8,45,36,.75),
            rgba(8,45,36,.75)
        ),

        url('../image/contact-hero.jpg')

        center center /

        cover

        no-repeat;

}



.contact-hero-overlay{

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(212,175,55,.25),
            transparent 35%
        );

}



.contact-hero .container{

    position:relative;

    z-index:2;

}



.contact-hero-content{

    max-width:850px;

    text-align:center;

    color:#fff;

    transform:translateX(120px);

}



.contact-badge{

    display:inline-flex;

    padding:8px 22px;

    border-radius:50px;

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

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

    color:#E8C76A;

    font-size:15px;

    margin-bottom:25px;

}



.contact-hero-content h1{

    font-size:48px;

    font-weight:800;

    color:#D4AF37;

    margin-bottom:25px;

}



.contact-hero-content p{

    font-size:20px;

    line-height:2.2;

    color:#fff;

}

/* =========================
   Hero Buttons
========================= */

.hero-actions{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:60px;

    width:100%;

}



.hero-contact-btn,
.hero-cooperation-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:190px;

    height:56px;

    padding:0 30px;

    border-radius:18px;

    font-family:inherit;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    transition:all .3s ease;

}



/* ارتباط با ما */

.hero-contact-btn{

    background:#D4AF37;

    color:#082D24;

    box-shadow:0 10px 25px rgba(212,175,55,.28);

}



.hero-contact-btn:hover{

    background:#fff;

    color:#082D24;

    transform:translateY(-3px);

}



/* همکاری با ما */

.hero-cooperation-btn{

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

    color:#fff;

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

    backdrop-filter:blur(12px);

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

}



.hero-cooperation-btn:hover{

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

    color:#082D24;

    transform:translateY(-3px);

}
/* =========================
   Main Contact
========================= */


.contact-wrapper{

    padding:90px 0;

    background:#F8F6F1;

}



.contact-grid{

    display:grid;

    grid-template-columns:

        minmax(0,1fr)

        minmax(0,1fr);

    gap:40px;

    align-items:stretch;

}

/* =========================
   Cards
========================= */


.contact-card{

    background:

        rgba(255,255,255,.82);


    border-radius:24px;


    padding:40px;


    box-shadow:

        0 20px 60px rgba(0,0,0,.12);


    border:

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


    backdrop-filter:

        blur(18px);


    -webkit-backdrop-filter:

        blur(18px);


    height:100%;


    display:flex;


    flex-direction:column;

}

/* =========================
   Form
========================= */


.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}



.form-group{

    margin-bottom:22px;

}



.form-group label{

    display:block;

    margin-bottom:10px;

    color:#1C1C1C;

    font-weight:600;

}



.form-group input,

.form-group textarea{


    width:100%;


    padding:16px 18px;


    border-radius:16px;


    border:1px solid rgba(15,76,58,.15);


    background:#fff;


    color:#1C1C1C;


    font-family:inherit;


    font-size:15px;


    transition:.3s;


}



.form-group textarea{

    resize:vertical;

}



.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#999;

}



.form-group input:focus,

.form-group textarea:focus{


    outline:none;


    border-color:#D4AF37;


    box-shadow:

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


}



.form-group small{


    display:block;

    margin-top:8px;

    color:#c0392b;

    font-size:13px;

}




.alert-success{


    background:

        rgba(46,204,113,.12);


    border:

        1px solid rgba(46,204,113,.35);


    color:#18753c;


    padding:15px 20px;


    border-radius:15px;


    margin-bottom:25px;


}




/* =========================
   Submit Button
========================= */


.contact-submit{


    width:100%;


    height:58px;


    border:none;


    border-radius:18px;


    background:#0F4C3A;


    color:#fff;


    font-family:inherit;


    font-size:17px;


    font-weight:700;


    cursor:pointer;


    display:flex;


    align-items:center;


    justify-content:center;


    gap:12px;


    transition:.3s;


}



.contact-submit:hover{


    background:#D4AF37;


    color:#082D24;


    transform:translateY(-3px);


}






/* =========================
   Contact Info Card
========================= */


.contact-info-card{


    background:

        linear-gradient(
            145deg,
            rgba(15,76,58,.96),
            rgba(8,45,36,.92)
        );


    color:#fff;


    border:

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


    box-shadow:

        0 20px 60px rgba(0,0,0,.18);


    backdrop-filter:

        blur(10px);


    -webkit-backdrop-filter:

        blur(10px);


    position:relative;


    overflow:hidden;

}



.contact-info-card::before{


    content:"";


    position:absolute;


    top:-120px;


    right:-120px;


    width:280px;


    height:280px;


    background:

        radial-gradient(
            circle,
            rgba(212,175,55,.12),
            transparent 70%
        );


    pointer-events:none;

}



.contact-info-card > *{


    position:relative;


    z-index:1;

}



/* =========================
   Brand
========================= */

.contact-brand{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    gap:14px;

    margin-bottom:35px;

}



.contact-brand img{

    width:55px;

    height:55px;

    object-fit:contain;

    border-radius:14px;

    margin-bottom:5px;

}



.contact-brand h3{

    color:#fff;

    margin:0;

    font-size:20px;

    font-weight:700;

    text-align:center;

}



.contact-brand p{

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

    line-height:2;

    margin:0;

    max-width:320px;

    text-align:center;

}
/* =========================
   Contact Title
========================= */


.contact-title{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    margin-bottom:35px;

}



.contact-title h2{

    margin:0;

    color:#E8C76A;

    font-size:26px;

    text-align:center;

    white-space:nowrap;

}



.contact-title span{

    display:block;

    width:45px;

    height:3px;

    background:#D4AF37;

    border-radius:20px;

}
/* =========================
   Contact Information Items
========================= */


.info-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 0;

    border-bottom:

        1px solid rgba(255,255,255,.12);

}



.info-item:last-child{

    border-bottom:none;

}



.info-icon{

    width:50px;

    height:50px;

    min-width:50px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

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

    color:#D4AF37;

}



.info-item strong{

    display:block;

    color:#E8C76A;

    margin-bottom:5px;

    font-size:15px;

}



.info-item p{

    margin:0;

    color:#fff;

    line-height:1.8;

    font-size:14px;

}



/* =========================
   Social Links
========================= */

/*
   شبکه‌های اجتماعی از صفحه تماس حذف شده‌اند.
   در صورت استفاده در آینده، این بخش آماده است.
*/


.social-box{

    display:none;

}




/* =========================
   FAQ
========================= */


.contact-faq{

    padding:80px 0;

    background:#fff;

}



.section-heading{

    text-align:center;

    max-width:700px;

    margin:

        0 auto 45px;

}



.section-heading span{


    display:inline-block;


    color:#D4AF37;


    font-weight:700;


    margin-bottom:15px;


}



.section-heading h2{


    margin:0;


    color:#0F4C3A;


    font-size:32px;


}





.faq-grid{


    display:grid;


    grid-template-columns:

        repeat(3,1fr);


    gap:25px;


}



.faq-item{


    background:#F8F6F1;


    border-radius:24px;


    padding:30px;


    border:

        1px solid rgba(15,76,58,.08);


    transition:.3s;


}



.faq-item:hover{


    transform:translateY(-6px);


    box-shadow:

        0 15px 40px rgba(0,0,0,.08);


}



.faq-item h3{


    color:#0F4C3A;


    font-size:18px;


    line-height:1.8;


    margin-bottom:15px;


}



.faq-item p{


    color:#555;


    line-height:2;


    text-align:justify;


    margin:0;


}

/* =========================
   Cooperation Section
========================= */


.contact-cooperation{

    padding:70px 0;

    background:#F8F6F1;

}



.cooperation-box{


    background:

        linear-gradient(

            135deg,

            #0F4C3A,

            #082D24

        );


    border-radius:32px;


    padding:45px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:30px;


    box-shadow:

        0 20px 60px rgba(0,0,0,.12);


}



.cooperation-box h2{


    color:#D4AF37;


    margin:0 0 15px;


    font-size:28px;


}



.cooperation-box p{


    color:#fff;


    line-height:2.2;


    max-width:650px;


    margin:0;


}



.cooperation-btn{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    min-width:180px;


    height:55px;


    border-radius:18px;


    background:#D4AF37;


    color:#082D24;


    text-decoration:none;


    font-weight:700;


    transition:.3s;


}



.cooperation-btn:hover{


    background:#fff;


    transform:translateY(-3px);


}







/* =========================
   Responsive
========================= */


@media(max-width:1100px){


    .contact-grid{


        grid-template-columns:1fr;


    }



    .faq-grid{


        grid-template-columns:1fr 1fr;


    }


}



@media(max-width:768px){


    .contact-hero{


        min-height:500px;


        padding:80px 0;


    }



    .contact-hero-content{


        transform:translateX(20px);


    }



    .contact-hero-content h1{


        font-size:34px;


    }



    .contact-hero-content p{


        font-size:16px;


    }



    .contact-wrapper{


        padding:50px 0;


    }



    .contact-card{


        padding:25px;


        border-radius:20px;


    }



    .form-row{


        grid-template-columns:1fr;


        gap:0;


    }



    .contact-brand{


        flex-direction:column;


        align-items:center;


        text-align:center;


    }



    .faq-grid{


        grid-template-columns:1fr;


    }



    .section-heading h2{


        font-size:25px;


    }



    .cooperation-box{


        flex-direction:column;


        text-align:center;


        padding:30px 20px;


    }



    .cooperation-box h2{


        font-size:23px;


    }



}



@media(max-width:480px){



    .contact-title h2{


        font-size:21px;


    }



    .info-item{


        align-items:flex-start;


    }



    .social-links{


        display:none;

    }



}