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


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

.cooperation-form-card{

    width:100%;

}


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

.cooperation-form{

    margin-top:15px;

}



/* =========================
   Rows
========================= */

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:22px;

}



/* =========================
   Groups
========================= */

.form-group{

    margin-bottom:24px;

}



.form-group label{

    display:block;

    margin-bottom:10px;

    color:#1C1C1C;

    font-size:15px;

    font-weight:700;

}



/* =========================
   Inputs
========================= */

.form-group input,

.form-group textarea,

.form-group select{

    width:100%;

    height:56px;

    padding:0 18px;

    border-radius:16px;

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

    background:#fff;

    color:#1C1C1C;

    font-family:inherit;

    font-size:15px;

    transition:.30s;

    outline:none;

}



/* =========================
   Select
========================= */

.form-group select{

    appearance:none;

    -webkit-appearance:none;

    cursor:pointer;

    padding-left:48px;

    background:

        #fff

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230F4C3A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")

        no-repeat

        left 18px

        center;

}



/* =========================
   Textarea
========================= */

.form-group textarea{

    height:170px;

    padding:16px 18px;

    resize:vertical;

    line-height:2;

}



/* =========================
   Placeholder
========================= */

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#9CA3AF;

}



/* =========================
   Focus
========================= */

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

    border-color:#D4AF37;

    box-shadow:

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

}
/* =========================
   Upload File
========================= */

.form-group input[type="file"]{

    height:auto;

    padding:14px 18px;

    background:#fff;

    cursor:pointer;

}



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

.submit-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:18px;

    background:#0F4C3A;

    color:#fff;

    font-family:inherit;

    font-size:17px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    cursor:pointer;

    transition:.30s;

    box-shadow:

        0 12px 35px rgba(15,76,58,.18);

}



.submit-btn:hover{

    background:#D4AF37;

    color:#082D24;

    transform:translateY(-3px);

    box-shadow:

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

}



.submit-btn:active{

    transform:translateY(-1px);

}



/* =========================
   Disabled Button
========================= */

.submit-btn:disabled{

    opacity:.6;

    cursor:not-allowed;

    transform:none;

}



/* =========================
   Success Alert
========================= */

.form-alert{

    padding:18px 22px;

    border-radius:18px;

    margin-bottom:25px;

    font-size:14px;

    line-height:2;

}



.form-alert.success{

    background:

        rgba(15,76,58,.08);

    border:

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

    color:#0F4C3A;

}



/* =========================
   Error Alert
========================= */

.form-alert.error{

    background:

        rgba(220,38,38,.08);

    border:

        1px solid rgba(220,38,38,.20);

    color:#B91C1C;

}



.form-alert.error ul{

    margin:0;

    padding-right:18px;

}



.form-alert.error li{

    margin-bottom:8px;

}



/* =========================
   Required Mark
========================= */

.required{

    color:#D62828;

    margin-right:4px;

}



/* =========================
   Small Description
========================= */

.form-group small{

    display:block;

    margin-top:8px;

    color:#6B7280;

    line-height:1.9;

    font-size:13px;

}
/* =========================
   Form Animation
========================= */

.cooperation-form-card{

    animation:fadeUp .6s ease;

}



@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* =========================
   Card Hover
========================= */

.cooperation-form-card:hover{

    box-shadow:

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

}



/* =========================
   Autofill
========================= */

input:-webkit-autofill,

textarea:-webkit-autofill,

select:-webkit-autofill{

    -webkit-box-shadow:

        0 0 0 1000px #fff inset !important;

    -webkit-text-fill-color:#1C1C1C !important;

}



/* =========================
   Justify Text
========================= */

.cooperation-page p,

.cooperation-page .feature-box p{

    text-align:justify;

    text-justify:inter-word;

    line-height:2.2;

}



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

@media (max-width:992px){

    .cooperation-form-card{

        max-width:100%;

    }

}



@media (max-width:768px){

    .form-row{

        grid-template-columns:1fr;

        gap:0;

    }



    .form-group{

        margin-bottom:20px;

    }



    .form-group input,

    .form-group select{

        height:54px;

    }



    .form-group textarea{

        height:150px;

    }



    .submit-btn{

        height:56px;

        font-size:16px;

    }

}



@media (max-width:480px){

    .cooperation-form{

        margin-top:0;

    }



    .form-group label{

        font-size:14px;

    }



    .form-group input,

    .form-group select,

    .form-group textarea{

        font-size:14px;

    }



    .submit-btn{

        border-radius:16px;

    }

}