body {

    padding-top:80px;

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

    background:
    radial-gradient(
        circle at top right,
        rgba(0,255,195,.15),
        transparent 35%
    ),
    linear-gradient(
        135deg,
        #0f2027,
        #203a43,
        #2c5364
    );

    color:#fff;

}



/* =========================
   Main Layout
========================= */


.contact-wrapper {

    max-width:1200px;

    margin:50px auto;

    padding:20px;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:35px;

    direction:ltr;

}



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


.contact-form,
.contact-info {


    background:

    linear-gradient(
        135deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.04)
    );


    backdrop-filter:blur(18px);


    border:

    1px solid

    rgba(0,255,195,.25);


    box-shadow:

    0 20px 50px rgba(0,0,0,.35);


    border-radius:25px;


}



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


.contact-form {


    padding:45px;

    display:flex;

    flex-direction:column;

    gap:25px;

    direction:rtl;


}



.grid-container {


    display:grid;

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

    gap:20px;


}



.grid-item input,
.grid-item textarea {


    width:100%;


    padding:16px 18px;


    border-radius:15px;


    border:

    1px solid

    rgba(255,255,255,.2);


    background:

    rgba(255,255,255,.12);


    color:white;


    font-size:16px;


    transition:.3s;


}



.grid-item input::placeholder,
.grid-item textarea::placeholder {


    color:#ddd;

}



.grid-item input:focus,
.grid-item textarea:focus {


    outline:none;


    background:

    rgba(255,255,255,.2);


    border-color:#00ffc3;


    box-shadow:

    0 0 15px

    rgba(0,255,195,.5);


}



.grid-item.full-width {

    grid-column:1/-1;

}



.contact-form textarea {


    min-height:160px;

    resize:vertical;


}



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


.btn-primary {


    width:240px;


    padding:15px;


    margin:10px auto 0;


    border:none;


    border-radius:15px;


    cursor:pointer;


    color:white;


    font-size:18px;


    font-weight:bold;


    background:


    linear-gradient(
        135deg,
        #00ffc3,
        #00aaff
    );


    box-shadow:

    0 10px 25px

    rgba(0,255,195,.35);


    transition:.35s;


}



.btn-primary:hover {


    transform:

    translateY(-5px);


    box-shadow:

    0 15px 35px

    rgba(0,255,195,.6);


}



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


.contact-info {


    padding:35px;


    text-align:center;


    direction:rtl;


}



.contact-info h3 {


    color:#00ffc3;


    font-size:25px;


    margin-bottom:20px;


    text-shadow:

    0 0 15px

    rgba(0,255,195,.8);


}



.contact-info p {


    font-size:17px;


    line-height:2;


    color:#eee;


}



.contact-info a {


    color:#00ffc3;


    text-decoration:none;


    transition:.3s;


}



.contact-info a:hover {


    text-shadow:

    0 0 12px #00ffc3;


}





/* =========================
   Hover Effects
========================= */


.contact-form:hover,
.contact-info:hover {


    border-color:

    rgba(0,255,195,.6);


    transform:

    translateY(-3px);


    transition:.3s;


}





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


@media(max-width:900px){


.contact-wrapper {


    grid-template-columns:1fr;


    padding:15px;


}



.contact-info {


    order:1;

}



.contact-form {


    order:2;


}



}



@media(max-width:600px){


body {


    padding-top:120px;


}



.contact-form {


    padding:25px;


}



.grid-container {


    grid-template-columns:1fr;


}



.btn-primary {


    width:100%;


}



.contact-info {


    padding:20px;


}



.contact-info h3 {


    font-size:21px;


}



.contact-info p {


    font-size:15px;


}


}