@import url('https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;400;600;700&display=swap');

body,p{
    font-family: 'Signika Negative', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 30px;
    color:#001A3A;
}
h1,h2,h3,h4,h5,p,a,body{
    text-shadow: 0px 0 0 currentColor;
    -webkit-font-smoothing: auto;
}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1292px;
}
.Brand_logo {
    z-index: 99;
    width: 270px;
    padding: 24px 26px;
}
.hero_banner {
    background: #E6EEF8;
    margin-top: -122px;
    height: 98.5vh;
    min-height: 640px !important;
}
.banner_right {
    /*background: #C4C4C4;
     background: url(../images/LandingPage_MastheadImage_Desktop.jpg); */
    height: 98vh;
    border-radius: 0px 0px 0px 154px;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    padding: 0;
    min-height: 640px !important;
} 
.banner_right img{
    min-height: 640px !important;
}
.whats_no {
	font-size: 24px;
	line-height: 30px;
	letter-spacing: 0.15em;
	color: #001A3A;
}
.banner_left{
    padding-left: 90px;
    min-height: 640px !important;
}
.banner_left h1 {
	font-size: 60px;
	line-height: 70px;
	color: #001A3A;
	max-width: 80%;
	font-weight: 600;
    padding: 0;
    margin-left: -3px;
    letter-spacing: -0.27px;
}
.banner_left .banner_description{
	max-width: 80%;
    padding: 27px 0 43px;
}
.banner_left .btn-secondary {
    font-size: 24px;
    padding: 7px;
    width: 230px !important;
}
.our_course h2{
	font-weight: bold;
	font-size: 48px;
	line-height: 72px;
	color: #001A3A;
    margin: 0;
}
.Courses_list{
    margin-bottom: 60px;
}
.course_thumb{
	/*background: #cacaca;*/
	width: 135px;
	height: 135px;
	line-height: 135px;
	border-radius: 50%;
}
.study_areas {
	display: inline-block;
	width: 14.28%;
    text-align: center;
}
/*.study_areas:nth-child(7n){
	margin-right: 0;
}*/
.explore_event h3{
	font-weight: 600;
	font-size: 36px;
	line-height: 60px;
}
.explore_event .para {
    font-size: 22px;
    line-height: 30px;
    width: auto;
}
.explore_event p{
	width: auto !important;
}
.bg-white{
    overflow-x: hidden;
}
.explore_event_right{
    max-width: 520px;
}
.right_explore {
    padding: 125px 95px 114px;
}
/*.hero_banner .container:after {
    background: #c4c4c4;
    content: "";
    width: 39%;
    height: 98.5vh;
    position: absolute;
    right: 0;
    top: 0px;
}*/
.explore_outer.left_col .whats_no_bold{
    padding: 37px 0 10px;
}
.our_course .whats_no{
    margin-bottom: 24px;
}
.our_course .whats_no{
    margin-bottom: 24px;
}
.course_title {
    padding: 10px 0 5px;
}




.animal_care_layout, .art_design_layout, .biosecurity_science_layout,
.business_finance_layout, .ct_cs_layout, .education_layout,
.foundation_layout, .beauty_layout, .health_layout,
.horticulture_layout, .tourism_layout, .music_industry_layout,
.sport_layout, .trades_layout{
    background-repeat: no-repeat !important;
    height: 98vh;
    background-size: cover !important;
    background-position: bottom !important;
    margin-top: -122px;
    padding-left: 25px;
    border-radius: 0 0 85px 0;
    min-height: 640px !important;
}
.animal_care_layout{
    background: url(../images/StudyArea_MastheadDesktop_AnimalStudies.jpg);
} 
.art_design_layout{
    background: url(../images/StudyArea_MastheadDesktop_ArtDesign.jpg);
}
.biosecurity_science_layout{
    background: url(../images/StudyArea_MastheadDesktop_Biosecurity.jpg);
}
.business_finance_layout{
    background: url(../images/StudyArea_MastheadDesktop_Business.jpg);
}
.ct_cs_layout {
    background: url(../images/Area_MastheadDesktop_ITV2.jpg);
    background-position-x: left !important;
}
.education_layout{
    background: url(../images/StudyArea_MastheadDesktop_Education.jpg);
}
.foundation_layout{
    background: url(../images/StudyArea_MastheadDesktop_Foundation.jpg);
}
.beauty_layout{
    background: url(../images/StudyArea_MastheadDesktop_Hair.jpg);
}
.health_layout{
    background: url(../images/StudyArea_MastheadDesktop_Health.jpg);
}
.horticulture_layout{
    background: url(../images/StudyArea_MastheadDesktop_Horticulture.jpg);
}
.tourism_layout{
    background: url(../images/StudyArea_MastheadDesktop_Hospitality.jpg);
}
.music_industry_layout{
    background: url(../images/StudyArea_MastheadDesktop_Music.jpg);
}
.sport_layout{
    background: url(../images/StudyArea_MastheadDesktop_Sport.jpg);
}
.trades_layout{
    background: url(../images/StudyArea_MastheadDesktop_Trades.jpg);
}
/*
.hero_banner_study{
    margin-top: -140px;
}
.banner_content {
    padding-top: 110px;
    max-width: 37%;
    left: 90px;
    position: absolute;
    top: 30%;
}
*/
.hero_banner_study h1{
    font-family: 'Signika Negative', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 60px;
    line-height: 70px;
}
.banner_content {
    padding-top: 110px;
    max-width: 38%;
    z-index: 999;
}
.overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 98vh;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9;
    border-radius: 0 0 85px 0;
    min-height: 640px !important;
}
.hero_banner_study a.btn{
    font-family: 'Signika Negative', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 45px;
    text-align: center;
    color: #002E5D;
}
.accordion-button:focus{
    box-shadow: none;
}
.accordion-body {
    font-size: 24px;
    line-height: 30px;
    font-weight: 300;
    padding: 25px 0 20px !important;
}
.course_title a {
    color: black;
    font-family: 'Signika Negative', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
}
.whats_no {
    line-height: 30px;
    letter-spacing: 0.15em;
    font-size: 24px !important;
    margin-top: 66px;
    padding: 0;
}
.whats_no_bold{
    font-family: 'Signika Negative', sans-serif;
    font-size: 60px;
    line-height: 70px;
}
.study_layout .whats_no_bold {
    margin: 10px 0 10px;
}
.whats_no_bold sup, .whats_no sup{
    top:-10px;
    vertical-align: super;
}
.all_events_box {
    margin-bottom: 10px;
}
.all_events_box h2 {
    margin: 43px 0 15px;
}
.explore_content{
    padding-left: 5px ;
}
.whats_no sup{
    top:-7px;
}
h2.Explore_heading {
    padding: 30px 0;
}
.accordion-button::after {
    width: 2.25rem;
    height: 2.25rem;
    background-size: 2.25rem;
}
.accordion-body {
    font-size: 24px;
    line-height: 30px;
    font-weight: 300;
    padding: 25px 0 45px !important;
}
.learn_more, .all_events{
    background: #001A3A;
    border-radius: 25px !important;
    line-height: 40px;
    text-transform: capitalize;
}
.left-explore {
    background: #C4C4C4;
    border-radius: 0px 0px 0px 154px;
    transform: matrix(-1, 0, 0, 1, 0, 0);
    background: url(../images/LandingPage_WhatsOn_Desktop.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}
.left-explore::before{
    background: #C4C4C4;
}
.right_explore, .right_explore::after, .explore_outer{
    background:#E6EEF8;
} 
.right_explore p {
    width: 445px;
}
.right_explore h2{
    font-size: 60px;
    font-weight: 600 !important;
    line-height: 70px;
}
.footer_text {
    font-size: 18px;
    max-width: 91%;
}
.accordion-button{
    padding-left: 0 !important;
}
.border-navy {
    border-bottom: 1px solid #002E5D !important;
    margin: 5px 0 5px;
}
.button_width{
    width: 220px !important;
    line-height: 45px;
}
.button_width.all_events{
    width: 256px !important;
    height: 60px;
}
.accordion-button:not(.collapsed) {
    color: #000;
    background-color: #e7f1ff;
    box-shadow:none;
}
h2.all_events_title{
    font-weight: 600!important;
}
.btn-secondary{
    font-size: 24px;
}
.banner_thumb {
    display: none;
}
footer{
    background: #001A3A;
}
.footer_links a{
    font-size: 18px;
    line-height: 22px;
    color: #ccc;
}
.footer_content {
    padding: 130px 12px 111px 12px;
}
.explore_outer .Work_whats_no {
    letter-spacing: 0.15em;
}
.carousel-inner img {
    height: 98.1vh;
    border-radius: 0 0 0 154px;
    object-fit: cover;
}
img.mobile_view{
    display:none !important;
}

/* ~~~~~~~~~~@media css start here~~~~~~~~~~~ */

@media screen and (max-width: 1366px) {
    .study_areas {
        width: 16.66%;
    }
}
@media all and (min-width: 1024px) and (max-width: 1365px) {
    .study_areas {
        width: 20%;
    }
    .hero_banner .container:after{
        width: 30%;
    }
}


@media all and (min-width: 768px) and (max-width: 1024px) {
    .right_explore.p-5 {
        padding: 4rem 3rem !important;
    }
    .banner_content {
        max-width: 100%;
    }
    .button_width {
        position: absolute !important;
        width: 50% !important;
        height: 50px;
    }
    
    .learn_more {
        position: absolute;
        right: 0;
    }
    .date_time {
        text-align: right !important;
    }
    .study_areas {
        width: 25%;
    }
    .hero_banner_study {
        background-position-x: 100%;
    }
    .right_explore p {
        width: auto;
    }
    .hero_banner .container:after{
        width: 25%;
        top:-7px
    }
    .right_explore {
        padding: 125px 40px 114px;
    }
    .banner_left {
        padding-left: 15px;
    }
}
@media all and (min-width: 768px) and (max-width: 991px) {
    .button_width {
        position: relative !important;
        width: 50% !important;
        height: 50px;
        bottom: 10px;
    }
    
}
/* When the browser is at least 600px and above */
@media screen and (max-width: 767px) {
    .hero_banner {
        border-radius: 0 0 85px 0;
        height: 100%;
        padding-top: 100px;
        padding-bottom: 60px;
    }
    .animal_care_layout, .art_design_layout, .biosecurity_science_layout, .business_finance_layout, .ct_cs_layout, .education_layout, .foundation_layout, .beauty_layout, .health_layout, .horticulture_layout, .tourism_layout, .music_industry_layout, .sport_layout, .trades_layout{
        min-height: auto !important;
    }
    .banner_right {
        position: absolute;
        top: 6%;
    }
    .overlay{
        display: none;
    }
    .carousel-inner img {
        border-radius: 50%;
        object-fit: cover;
        height: 157px;
        min-height: 157px !important;
    }
    
    .banner_left .whats_no {
        margin-bottom: 150px !important;
    }
    .course_thumb {
        /*background: #cacaca;*/
        width: 97px;
        height: 97px;
        line-height: 97px;
        border-radius: 50%;
    }
    .banner_left h2,.right_explore h2,.hero_banner_study h1, .whats_no_bold, .banner_left h1.banner_heading {
        font-size: 48px;
        line-height: 54px;
        max-width: 100%;
    }
    .banner_left h1.banner_heading{
        margin-top: 60px;
    }
    .banner_left .para,.banner_content p {
        max-width: 100%;
        font-size: 18px;
        line-height: 24px;
    }
    .course_title p, .course_title a{
        font-size: 18px;
        line-height: 22px;
        font-weight: 600;
    }
    .study_areas {
        width: 33.33%;
    }
    .banner_left .p-5 {
        padding: 3rem 0!important;
    }
    .banner_right, .left-explore {
        /* display: none; */
        border-radius: 50%;
        width: 155px;
        height: 155px;
        line-height: 155px;
        margin: 180px 22px 0px 20px;
    }
    .right_explore {
        padding: 20px;
    }
    .banner_left .banner_description {
        max-width: 100%;
        padding: 15px 0 0;
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 0;
    }
    .banner_left .btn-secondary {
        margin-bottom: 60px;
    }
    .Courses_list{
        padding: 0 9px;
    }
    .footer_content{
        flex-flow: column-reverse;
    }
    .footer_text{
        max-width: 100%;
    }
    .banner_content{
        padding-top: 0;
    }
    .hero_banner_study {
        /*background: linear-gradient(241.82deg, #00B097 -10.17%, rgba(255, 255, 255, 0) 89.93%), #002E5D;*/
        mix-blend-mode: normal;
        border-radius: 0px 0px 85px 0px;
    }
    
    .animal_care_layout, .biosecurity_science_layout,
    .education_layout, .health_layout{
        background: linear-gradient(241.82deg, #00B097 -10.17%, rgba(255, 255, 255, 0) 89.93%), #002E5D;
    }
    .business_finance_layout, .foundation_layout, .sport_layout{
        background: linear-gradient(241.82deg, #07ADF0 -10.17%, rgba(255, 255, 255, 0) 89.93%), #002E5D;
    }
    .art_design_layout,.beauty_layout,
    .horticulture_layout, .tourism_layout, 
    .music_industry_layout, .ct_cs_layout{
        background: linear-gradient(241.82deg, #C6007E -10.17%, rgba(255, 255, 255, 0) 89.93%), #6068B2;
    }
    .trades_layout{
        background: linear-gradient(241.82deg, #FFB81C -10.17%, rgba(255, 255, 255, 0) 89.93%), #EE3C38;
    }
    .button_width {
        position: relative !important;
        margin: 30px 0;
    }
    .date_time {
        text-align: left !important;
    }
    .right_explore.p-5, .right_explore .p-5, .explore_outer.left_col{
        padding: 0px !important;
    }
    .right_explore.p-5, .explore_outer.left_col {
        padding: 12px !important;
    }
    .right_explore p {
        width: auto;
    }
    .banner_content img {
        width: 135px;
        height: 135px;
        line-height: 135px;
        object-fit: cover;
        margin-bottom: 30px;
    }
    .banner_content {
        max-width: 100%;
        padding: 0 15px 0 0;
    }
    .explore_content {
        padding: 0px;
    }
    .all_events_box.p-5{
        padding: 3rem 0 !important;
        text-align: left !important;
    }
    .all_events_box .text-center{
        text-align: left !important;
    }
    .banner_thumb {
        display: block;
    }
    .explore_content .whats_no,.explore_outer .Work_whats_no{
        position: absolute;
        top: 10%;
    }
    .explore_content .whats_no, .explore_outer .Work_whats_no{
        top: 6%;
        font-size: 18px;
    }
    .explore_outer.left_col .left-explore{
        margin-top: 100px;
    }
    .explore_outer {
        position: relative;
        padding: 12px;
    }
    .footer_text {
        font-size: 14px;
        line-height: 18px;
    }
    .hero_banner .container:after{
        display: none;
    }
    .pt-5.pb-5.whats_on_outer {
        padding: 0% 0 20px 0 !important;
    }
    .whats_no{
        font-size: 18px !important;
    }
    .banner_left .whats_no{
        margin-top: 55px;
    }
    .our_course .whats_no{
        margin-top: 40px;
        margin-bottom: 15px;
    }
    .our_course h2{
        line-height: 54px;
    }
    .our_course {
        padding-bottom: 12px !important;
        padding-left: 10px !important;
    }
    .explore_outer.left_col .whats_no_bold {
        padding: 12px 0 28px !important;
    }
    .explore_event_right .para{
        margin-bottom: 0 !important;
    }
    .button_width {
        margin: 0;
    }
    .Brand_logo{
        padding: 24px 20px;
        width: 255px;
    }
    .button_width {
        margin: 20px 0 25px;
    }
    .study_layout_outer {
        padding-bottom: 0 !important;
        padding-top: 20px !important;
    }
    .study_layout .whats_no_bold {
        margin: 17px 0 17px;
    }
    .explore_outer .explore_inner .whats_no {
        top: 2% !important;
        font-size: 18px;
    }
    .explore_inner .left-explore {
        margin: 128px 22px 0px 20px;
    }
    .explore_inner .right_explore {
        padding: 0 20px;
    }
    .explore_inner .button_width {
        margin: 0px 0 50px;
    }
    .explore_inner h2.Explore_heading {
        padding: 30px 0 15px;
    }
    .explore_inner .explore_content sp{
        padding-bottom: 35px !important;
    }
    .hero_banner_study .banner_content img {
        margin-top: 75px;
    }
    .hero_banner_study .banner_content p{
        padding-top: 5px;
    }
    .accordion-body{
        font-size: 18px;
        line-height: 22px;
        width: 100% !important;
    }
    .btn-secondary {
        font-size: 18px;
    }
    .hero_banner, .hero_banner_study {
        margin-top: -126px;
        height: auto;
        padding: 60px 20px 40px;
    }
    .hero_banner{
        padding: 60px 0px 40px;
    }
    .Courses_list {
        margin-bottom: 0px;
    }
    .Main_footer .mx-auto {
        margin-bottom: 30px;
    }
    .footer_links a{
        font-size: 14px;
    }
    .banner_left {
        padding-left: 10px;
    }
    .footer_content {
        padding: 80px 12px 80px 12px;
    }
    img.mobile_view{
        display:block !important;
    }
    img.desktop_view{
        display:none !important;
    }
}