/*====================================
PAGE
=====================================*/

.relative-page{
    background:#fff;
    padding:60px 0 100px;
}

.relative-grid{
    display:grid;
    grid-template-columns:280px minmax(0,970px);
    gap:100px;
    align-items:start;
}

/*====================================
CONTENT
=====================================*/

.relative-content{
    width:100%;
}

/*====================================
PAGE HEADER
=====================================*/

.page-header{
    margin-bottom:70px;
}



.page-header h1{

    font-family:"Plus Jakarta Sans",sans-serif;

    font-size:40px;

    font-weight:300;

    line-height:1.15;

    color:#333;

    margin-bottom:20px;

}

.page-line{
    width:140px;
    height:3px;
    background:#a32135;
    margin-bottom:35px;
}

.page-header p{
    font-size:18px;
    line-height:1.8;
    color:#555;
    max-width:900px;
    margin:0 0 20px;
}

/*====================================
LEVEL SECTION
=====================================*/

.level-section{
    margin-top:70px;
}

.level-header{
    margin-bottom:40px;
}

.level-header h2{

    font-size:30px;

    font-weight:300;

    color:#222;

    margin-bottom:14px;

     position:relative;

    display:inline-block;

    padding-bottom:14px;


}

.level-header h2::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:80px;

    height:3px;

    background:#a32135;

}

.level-header p{

    max-width:760px;

    font-size:18px;

    line-height:1.8;

    color:#666;

}
/*====================================
FRAMEWORK GRID
=====================================*/

.framework-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap: 8px;
    align-items:stretch;
}

.framework-column{
    background:#fafafa;
    border:1px solid #dedede;
    display:flex;
    flex-direction:column;
    min-height:200px;
}

.framework-title{
    background:#294f67;
    color:#fff;
    padding:18px;
    text-align:center;
    font-size:18px;
    font-weight:600;
}

.academy .framework-title{
    background:#a32135;
}

.framework-body{
    padding:22px;
    flex:1;
}

.framework-body p{
    margin:0 0 16px;
    padding-bottom:16px;
    border-bottom:1px solid #e7e7e7;
    font-size:16px;
    line-height:1.2;
    color:#444;
}

.framework-body p:last-child{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:none;
}

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

@media(max-width:1200px){

.comparison-wrapper{

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

}

}

@media(max-width:768px){

.comparison-wrapper{

grid-template-columns:1fr;

}

.page-header h1{

font-size:38px;

}

.level-header h2{

font-size:34px;

}

}


/*====================================
LEVEL 3 COMPARISON
=====================================*/

.comparison-wrapper{

    display:grid;

    grid-template-columns:1.25fr 1fr .75fr 1fr 1fr;

    gap:3px;

    margin-top:35px;

    align-items:stretch;

}

.comparison-card{

    display:flex;

    flex-direction:column;

    background:#f2f2f2;

    border:1px solid #dddddd;

    min-height:260px;

      transition:.25s ease;

}


.comparison-header{

    position:relative;

    background:#2f536c;

    color:#fff;

    text-align:center;

    font-size:20px;

    font-weight:600;

    line-height:1.3;

    padding:20px 15px;

    min-height:84px;

    display:flex;

    justify-content:center;

    align-items:center;

}


.academy-header{

    background:#a32035;

}


.comparison-content{

    flex:1;

    padding:26px;

    background:#efefef;

}

.comparison-content p{

    margin:0;

    padding:14px 0;

    border-bottom:1px solid #dddddd;

    font-size:16px;

    line-height:1.7;

    color:#404040;

}

.comparison-content p:last-child{

    border-bottom:none;

}

/*====================================
DESCRIPTOR ACCORDION
=====================================*/

.descriptor{

    margin-top:40px;
    margin-bottom:60px;

}

.descriptor-btn{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 30px;

    border:1px solid #d8d8d8;

    background:#fff;

    cursor:pointer;

    font-size:22px;

    font-weight:500;

    color:#2f536c;

    transition:.25s;

}

.descriptor-btn:hover{

    background:#f7f7f7;

}


.descriptor-btn i{

    transition:.35s;

    font-size:16px;

}

.descriptor.open .descriptor-btn i{

    transform:rotate(90deg);

}

.descriptor-content{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

    background:#fff;

    border-left:1px solid #dcdcdc;

    border-right:1px solid #dcdcdc;

    border-bottom:1px solid #dcdcdc;

    padding:0 30px;

}

.descriptor.open .descriptor-content{

    padding:30px;

}


.descriptor-content h3{

    margin-bottom:12px;

    color:#2f536c;

}

.descriptor-content p{

    line-height:1.8;

    color:#555;

    margin-bottom:24px;

}

.descriptor.open .descriptor-content{

    display:block;

}

.descriptor.open .descriptor-btn i{

    transform:rotate(90deg);

}

.level-section{

    margin-top:90px;

    padding-top:70px;

    border-top:1px solid #ececec;

}

.level-section:first-of-type{

    border-top:none;

    padding-top:0;

}

/*====================================
BREADCRUMBS
=====================================*/

.breadcrumbs{

    background:#f7f7f7;

    border-bottom:1px solid #ececec;

}

.breadcrumbs .container{

    padding:16px 0;

    font-size:15px;

}

.breadcrumbs a{

    color:#2f536c;

    text-decoration:none;

}

.breadcrumbs a:hover{

    color:#a32135;

}

.breadcrumbs span{

    margin:0 10px;

    color:#999;

}

.breadcrumbs strong{

    font-weight:600;

    color:#444;

}

/* ===========================
STICKY SIDEBAR
=========================== */

#qualification-sidebar{

    position: sticky;

    top: 35px;

    align-self: start;

    height: max-content;

}

/*==================================================
ICM MOBILE
==================================================*/

@media (max-width:768px){

/* Hide sidebar */

.relative-grid{
    display:block;
}

#qualification-sidebar{
    display:none;
}

/* Page */

.relative-page{
    padding:40px 0 70px;
}

.relative-content{
    width:100%;
}

/* Heading */

.page-header{
    margin-bottom:45px;
}

.page-header h1{
    font-size:34px;
    line-height:1.2;
}

.page-header p{
    font-size:17px;
    line-height:1.8;
}

.level-header h2{
    font-size:28px;
}

.level-header p{
    font-size:16px;
}

/* Comparison */

.comparison-wrapper{

    display:flex;

    overflow-x:auto;

    overflow-y:hidden;

    gap:4px;

    padding-bottom:8px;

    -webkit-overflow-scrolling:touch;

    scroll-snap-type:x proximity;

}

.comparison-card{

    flex:0 0 205px;

    min-width:205px;

    min-height:auto;

    margin:0;

    scroll-snap-align:start;

}

.comparison-header{

    min-height:65px;

    padding:14px 10px;

    font-size:16px;

}


.comparison-content{

    padding:14px;

}

.comparison-content p{

    font-size:15px;

    line-height:1.6;

}

/* Descriptor */

.descriptor-btn{

    padding:18px 22px;

    font-size:18px;

}

.descriptor-content{

    padding:0 20px;

}

.descriptor.open .descriptor-content{

    padding:20px;

}

}