/*==================================================
            CONTACT PREMIUM
==================================================*/

.contact-premium{

    position:relative;

    padding:110px 0;

    background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);

    overflow:hidden;

}

/*=========================
      Background Shapes
=========================*/

.contact-premium::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(13,110,253,.05);

    top:-180px;

    left:-180px;

}

.contact-premium::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(255,193,7,.08);

    bottom:-150px;

    right:-120px;

}

/*=========================
      Wrapper
=========================*/

.contact-premium .container{

    position:relative;

    z-index:5;

}

/*==================================================
            Teacher Card
==================================================*/

.teacher-card{

    background:#fff;

    border:1px solid #dde7f3;

    border-radius:28px;

    padding:45px 35px;

    height:100%;

    text-align:center;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

    transition:.45s;

    position:relative;

    overflow:hidden;

}

/* رنگ بالای کارت */

.teacher-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:linear-gradient(90deg,#0d6efd,#00c6ff,#ffc107);

}

.teacher-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,0,0,.14);

}

/*==================================================
            Avatar
==================================================*/

.teacher-avatar{

    width:120px;

    height:120px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:55px;

    color:#fff;

    background:linear-gradient(135deg,#0d6efd,#39b6ff);

    box-shadow:0 15px 35px rgba(13,110,253,.35);

    margin-bottom:25px;

    transition:.45s;

}

.teacher-card:hover .teacher-avatar{

    transform:rotate(-10deg) scale(1.08);

}

/*==================================================
            Title
==================================================*/

.teacher-card h3{

    font-size:30px;

    font-weight:800;

    margin-bottom:10px;

    color:#222;

}

.teacher-job{

    display:inline-block;

    padding:8px 18px;

    background:#eef5ff;

    color:#0d6efd;

    border-radius:40px;

    font-size:14px;

    font-weight:700;

    margin-bottom:20px;

}

.teacher-card p{

    line-height:2.1;

    color:#666;

    margin-bottom:30px;

}

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

.teacher-info{

    margin-top:20px;

}

.info-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:16px 0;

    border-bottom:1px dashed #e7edf6;

}

.info-item:last-child{

    border:none;

}

.info-item .icon{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:20px;

    flex-shrink:0;

    transition:.35s;

}

.info-item:hover .icon{

    transform:scale(1.15);

}

/* رنگ های متفاوت */

.phone{

    background:linear-gradient(135deg,#0d6efd,#4ab8ff);

}

.email{

    background:linear-gradient(135deg,#00b894,#55efc4);

}

.location{

    background:linear-gradient(135deg,#ff9800,#ffc107);

}

.clock{

    background:linear-gradient(135deg,#9b59b6,#c56cf0);

}

.info-item h6{

    margin:0;

    font-size:16px;

    font-weight:700;

    color:#222;

}

.info-item span{

    font-size:14px;

    color:#777;

}

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

.teacher-social{

    margin-top:35px;

    display:flex;

    justify-content:center;

    gap:14px;

}

.teacher-social a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#fff;

    font-size:20px;

    transition:.35s;

}

/* رنگ هر شبکه */

.teacher-social a:nth-child(1){

    background:#E4405F;

}

.teacher-social a:nth-child(2){

    background:#27A7E7;

}

.teacher-social a:nth-child(3){

    background:#333;

}

.teacher-social a:nth-child(4){

    background:#0A66C2;

}

.teacher-social a:hover{

    transform:translateY(-6px) rotate(10deg);

    box-shadow:0 10px 20px rgba(0,0,0,.18);

}




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

.contact-card{

    position:relative;

    background:#fff;

    border:1px solid #dde7f3;

    border-radius:28px;

    padding:45px;

    height:100%;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

    overflow:hidden;

    transition:.4s;

}

.contact-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:linear-gradient(90deg,#0d6efd,#7b61ff,#ffc107);

}

.contact-card:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 70px rgba(0,0,0,.13);

}

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

.form-title{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:35px;

}

.form-title i{

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:30px;

    background:linear-gradient(135deg,#0d6efd,#7b61ff);

    box-shadow:0 10px 25px rgba(13,110,253,.25);

}

.form-title h4{

    margin:0;

    font-size:28px;

    font-weight:800;

    color:#222;

}

.form-title span{

    color:#777;

    font-size:15px;

}

/*==================================================
                LABEL
==================================================*/

.contact-card label{

    display:block;

    margin-bottom:10px;

    font-size:15px;

    font-weight:700;

    color:#444;

}

/*==================================================
                INPUT
==================================================*/

.contact-card .form-control{

    height:58px;

    border-radius:16px;

    border:1px solid #dfe7f3;

    background:#fbfcfe;

    font-size:15px;

    padding:0 18px;

    transition:.35s;

    box-shadow:none;

}

.contact-card textarea.form-control{

    height:180px;

    padding:18px;

    resize:none;

}

.contact-card .form-control::placeholder{

    color:#a3a9b3;

}

.contact-card .form-control:focus{

    border-color:#0d6efd;

    background:#fff;

    box-shadow:

        0 0 0 4px rgba(13,110,253,.08),

        0 10px 20px rgba(13,110,253,.06);

}

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

.btn-contact{

    position:relative;

    overflow:hidden;

    border:none;

    border-radius:60px;

    padding:16px 38px;

    background:linear-gradient(135deg,#0d6efd,#7b61ff);

    color:#fff;

    font-size:16px;

    font-weight:700;

    display:inline-flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

    transition:.35s;

    box-shadow:

        0 15px 30px rgba(13,110,253,.28);

}

/* نور متحرک */

.btn-contact::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.7s;

}

.btn-contact:hover::before{

    left:150%;

}

.btn-contact:hover{

    transform:translateY(-5px);

    box-shadow:

        0 20px 40px rgba(13,110,253,.35);

}

.btn-contact:active{

    transform:scale(.98);

}

.btn-contact i{

    transition:.35s;

}

.btn-contact:hover i{

    transform:translateX(-6px) rotate(-15deg);

}

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

.teacher-card,

.contact-card{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

    .contact-card{

        margin-top:30px;

    }

}

@media(max-width:768px){

    .contact-premium{

        padding:70px 0;

    }

    .contact-card{

        padding:30px 25px;

    }

    .form-title{

        flex-direction:column;

        text-align:center;

    }

    .form-title h4{

        font-size:24px;

    }

    .btn-contact{

        width:100%;

        justify-content:center;

    }

}

@media(max-width:576px){

    .contact-card{

        padding:25px 20px;

    }

    .contact-card .form-control{

        height:54px;

    }

    .contact-card textarea.form-control{

        height:150px;

    }

}
/* ====== راست‌چین کردن اطلاعات تماس در Teacher Card ====== */
.teacher-card {
    text-align: right !important;
}

.teacher-card .teacher-avatar {
    margin: 0 auto 25px auto !important;
}

.teacher-card .teacher-job {
    display: inline-block !important;
}

.info-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 15px !important;
    text-align: right !important;
}

.info-item .icon {
    flex-shrink: 0 !important;
    order: 0 !important;
}

.info-item h6,
.info-item span {
    text-align: right !important;
}

.teacher-social {
    justify-content: flex-start !important;
}