body{
    background:#f5f6f8;
    font-family:tahoma;
}

.khatm-page{
   /* max-width:1400px;*/
    margin:auto;
    /*padding:20px;*/
}

.hero{
    background:url('/sites/default/files/banner.jpg') center center;
    background-size:cover;
    border-radius:25px;
    overflow:hidden;
    margin-bottom:30px;
}

.hero-overlay{
    background:rgba(6,31,27,.85);
    padding:60px;
    min-height:420px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.hero-text{
    color:#fff;
    max-width:700px;
}

.hero-tag{
    background:#0c5d52;
    display:inline-block;
    padding:10px 18px;
    border-radius:30px;
    margin-bottom:20px;
}

.hero-text h1{
    font-size:42px;
    line-height:1.8;
}

.hero-text p{
    color:#ddd;
    line-height:2;
}

.hero-card{
    width:280px;
    background:rgba(255,255,255,.1);
    border-radius:20px;
    padding:25px;
    color:#fff;
}

.circle{
    width:140px;
    height:140px;
    border:8px solid #d6ae69;
    border-radius:50%;
    margin:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.circle span{
    font-size:34px;
    font-weight:bold;
}

.box{
    background:#fff;
    border-radius:20px;
    padding:30px;
    margin-bottom:25px;
    box-shadow:0 3px 15px rgba(0,0,0,.05);
}

.box h3{
    color:#0c5d52;
    margin-bottom:20px;
}

.form-control{
    border-radius:15px;
    height:55px;
}

.count-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.count-btn{
    border:2px solid #eee;
    background:#fff;
    border-radius:15px;
    padding:20px;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

.count-btn:hover,
.count-btn.active{
    border-color:#0c5d52;
    background:#eef8f6;
}

.summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.submit-btn{
    background:#d6ae69;
    border:none;
    color:#18312e;
    font-weight:bold;
    padding:14px 40px;
    border-radius:50px;
}

@media(max-width:992px){

.hero-overlay{
    flex-direction:column;
    gap:30px;
}

.hero-card{
    width:100%;
}

.count-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.count-grid{
    grid-template-columns:1fr;
}

.hero-text h1{
    font-size:28px;
}

}


.hero-overlay{
    background-image:url('<?php print file_create_url($node->field_baner['und'][0]['uri']); ?>');
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;

    min-height:420px;
    padding:60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}