/*==================================================
EXAM PROCESS
==================================================*/

.examProcessSection{

    padding:110px 0;

    background:linear-gradient(180deg,#fcfaf5,#ffffff);

    position:relative;

    overflow:hidden;

}

.examProcessSection::before{

    content:"";

    position:absolute;

    right:-180px;

    top:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(139,26,26,.05);

}

.examProcessSection::after{

    content:"";

    position:absolute;

    left:-120px;

    bottom:-120px;

    width:300px;

    height:300px;

    border-radius:50%;

    background:rgba(214,179,108,.08);

}

/*==============================
HEADING
==============================*/

.examHeading{

    margin-bottom:60px;

}

.sectionTag{

    display:inline-block;

    color:#8b1a1a;

    font-size:13px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    position:relative;

    padding-left:60px;

}

.sectionTag::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    width:45px;

    height:2px;

    background:#c89c43;

}

.examHeading h2{

    margin-top:18px;

    font-family:"Playfair Display",serif;

    font-size:56px;

    line-height:1.2;

    color:#222;

}

.examHeading h2 span{

    color:#8b1a1a;

    font-style:italic;

}

/*==============================
TIMELINE
==============================*/

.timeline{

    position:relative;

    padding-left:70px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:18px;

    top:20px;

    bottom:20px;

    width:2px;

    background:#d8b168;

}

.timelineItem{

    position:relative;

    margin-bottom:45px;

}

.timelineItem:last-child{

    margin-bottom:0;

}

.timelineNumber{

    position:absolute;

    left:-70px;

    width:36px;

    height:36px;

    border-radius:50%;

    background:#8b1a1a;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    box-shadow:0 8px 20px rgba(139,26,26,.25);

}

.timelineContent h4{

    font-family:"Playfair Display",serif;

    font-size:28px;

    margin-bottom:10px;

    color:#222;

}

.timelineContent p{

    color:#666;

    line-height:1.8;

    margin:0;

}

/*==============================
RIGHT CARDS
==============================*/

.examCards{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.examCard{

    display:flex;

    align-items:flex-start;

    gap:20px;

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

    border:1px solid #eee;

}

.examCard:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.examIcon{

    width:56px;

    height:56px;

    min-width:56px;

    border-radius:14px;

    background:linear-gradient(135deg,#8b1a1a,#650909);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

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

}

.examText h5{

    font-family:"Playfair Display",serif;

    font-size:24px;

    margin-bottom:8px;

    color:#222;

}

.examText p{

    color:#666;

    line-height:1.7;

    margin:0;

}
/*==================================================
CARD PREMIUM BORDER
==================================================*/

.examCard{

    position:relative;

    overflow:hidden;

}

.examCard::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:linear-gradient(
        180deg,
        #d8b168,
        #8b1a1a
    );

    transition:.35s;

}

.examCard:hover::before{

    width:8px;

}

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

.examIcon{

    transition:.35s;

}

.examCard:hover .examIcon{

    transform:rotate(8deg) scale(1.08);

    box-shadow:
    0 15px 35px rgba(139,26,26,.25);

}

/*==================================================
TIMELINE NUMBER
==================================================*/

.timelineNumber{

    transition:.35s;

}

.timelineItem:hover .timelineNumber{

    transform:scale(1.15);

    background:#c89c43;

}

/*==================================================
TIMELINE TITLE
==================================================*/

.timelineContent h4{

    transition:.35s;

}

.timelineItem:hover h4{

    color:#8b1a1a;

}

/*==================================================
CARD TITLE
==================================================*/

.examText h5{

    transition:.35s;

}

.examCard:hover h5{

    color:#8b1a1a;

}

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

.timelineItem{

    animation:fadeLeft .7s ease;

}

.examCard{

    animation:fadeRight .7s ease;

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

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

@media(max-width:1199px){

.examHeading h2{

font-size:48px;

}

.timelineContent h4{

font-size:24px;

}

.examText h5{

font-size:22px;

}

}

@media(max-width:991px){

.examProcessSection{

padding:80px 0;

}

.examHeading{

text-align:center;

margin-bottom:50px;

}

.sectionTag{

padding-left:0;

}

.sectionTag::before{

display:none;

}

.examHeading h2{

font-size:42px;

}

.timeline{

margin-bottom:60px;

}

}

@media(max-width:767px){

.examProcessSection{

padding:70px 0;

}

.examHeading h2{

font-size:34px;

}

.timeline{

padding-left:55px;

}

.timelineNumber{

left:-55px;

width:34px;

height:34px;

font-size:14px;

}

.timelineContent h4{

font-size:21px;

}

.examCard{

padding:20px;

gap:16px;

}

.examIcon{

width:48px;

height:48px;

min-width:48px;

font-size:20px;

}

.examText h5{

font-size:20px;

}

.examText p{

font-size:15px;

}

}

@media(max-width:575px){

.examHeading h2{

font-size:30px;

line-height:1.3;

}

.timeline{

padding-left:45px;

}

.timelineNumber{

left:-45px;

width:30px;

height:30px;

font-size:13px;

}

.timelineContent h4{

font-size:18px;

}

.timelineContent p{

font-size:14px;

line-height:1.7;

}

.examCard{

padding:18px;

border-radius:16px;

}

.examIcon{

width:44px;

height:44px;

min-width:44px;

font-size:18px;

border-radius:12px;

}

.examText h5{

font-size:18px;

}

.examText p{

font-size:14px;

}

}