/*----------------------------

 DEFAULT_ STYLING

---------------------------- */

:root {

    --primary1: #1B5DF3;

}



.sSize {

    font-size: 15px;

}



.column2 {

    grid-column: span 2;

}



.primary1 {

    color: var(--primary1) !important;

}



.btnPrimary {

    background: var(--primary1);

    color: #FFF;

    padding: 6px 10px;

    border-radius: 4px;

    border: 2px solid var(--primary1);

}



.btnPrimary:hover {

    color: #FFF;

    text-decoration: none;

    background: #1B51CAEB;

}



.pageRow {

    border-bottom: 1px solid #e5e7eb;

    width: 100%;

    padding: 15px 0;

    margin-bottom: 20px;

}



.pageRow a {

    color: #0A102A;

    font-size: 14px;

    font-weight: 500;

    text-transform: capitalize;

    text-decoration: none;

}





.sectionHeader {

    padding: 20px;

    text-align: center;

    width: 100%;

}



.sectionHeader h5 {

    position: relative;

    display: inline-block;

}



.sectionHeader h5::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: -10px;

    width: 50%;

    height: 2px;

    background: var(--primary1);

}



.arrowIcon i {

    font-size: 12px;

    padding: 0 2px;

    color: #73767B;

}



#goTopBtn {

    display: none;

    /* Hidden by default */

    position: fixed;

    bottom: 40px;

    right: 30px;

    z-index: 99;

    font-size: 18px;

    border: none;

    outline: none;

    background: #1B5DF3;

    background-color: rgb(27, 93, 243);

    color: white;

    cursor: pointer;

    padding: 8px 15px;

    border-radius: 50%;

    transition: background-color 0.3s;

}



#goTopBtn:hover {

    background-color: #555;

}



/*----------------------------

 DEFAULT_ STYLING

---------------------------- */





/*----------------------------

 DEFAULT_EVENT_DESIGN

---------------------------- */

.eventsDefaultPage {

    margin-bottom: 30px;

}



.defaultEventDesign p {

    font-size: 15px;

}



.defaultEventDesign img {

    width: 100%;

    max-height: 380px;

    object-fit: cover;

    object-position: left;

}



.defaultEventDesign {

    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 0;
    border-radius: 4px;

    overflow: hidden;

    margin: 20px 0;

    display: grid;

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

}



.defaultEventDesign:hover {

    background: #FFDF95;

}



.defaultEventDesign .eventDate {

    font-size: 50px;
    font-weight: 800;
    color: var(--primary1);
}



.defaultEventDesign .eventDescArea p {

    padding: 8px 0;

}



.defaultEventDesign .eventDateArea {

    margin: auto;

    padding: 5px;

    text-align: center;

}



.defaultEventDesign .eventsDetailsArea {

    padding: 2vw 1vw;
    display: grid;
    gap: 25px;
    grid-template-columns: 200px auto;
    border-left: 3px solid #1f2ad2;
    /*border-right: 3px solid #1f2ad2;*/

}



.defaultEventDesign .eventMonth {

    white-space: nowrap;

    color: #000000;

    font-weight: 500;

}



.defaultEventDesign .eventDay {

    color: #605757;

}



.defaultEventDesign .eventTitle {

    font-size: 20px;
    text-transform: capitalize;
    font-weight: 600;

}



/*----------------------------

 DEFAULT_EVENT_DESIGN

---------------------------- */











/*----------------------------

 EVENTS DETAILS PAGE

---------------------------- */

.eventDetailMain {

    margin: 20px 0;

}



.eventDetailMain .nav-tabs {

    display: grid;

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

    gap: 20px;

    border-bottom: none;

    margin-top: 20px;

}



.eventDetailMain .nav-tabs .nav-link {

    border: 1px solid #dee2e6;

    color: #0A102A;

    text-transform: capitalize;

    text-align: center;

    border-radius: 4px;

    font-size: 14px;

    white-space: nowrap;

}



.eventDetailMain .nav-tabs .nav-link.active {

    border: 1px solid var(--primary1);

    color: var(--primary1);

    border-bottom: 4px solid #1B5DF3;

    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;

}



.eventDetailMain .eventName {

    font-size: 22px;

}



.eventDetailMain .tab-content p {

    font-size: 15px;

}



.eventDetailMain .countingDownBox {

    border: 1px solid #C4C4C4;

    padding: 25px 10px 15px;

    border-radius: 4px;



}



.eventDetailMain .countingDownBox .title {

    background: var(--primary1);

    padding: 20px;

    color: #FFF;

    font-size: 16px;

    text-transform: uppercase;

    text-align: center;

    margin-bottom: 15px;

}



.eventDetailMain .countingDownBox .countingDesc {

    text-align: center;

    padding: 2vw;

    background: url('../images/calendar-bg.png');

    width: 100%;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.eventDetailMain .countingDownBox .countingDesc .date {

    font-size: 48px;

    font-weight: 700;

    color: #000;

    background: #F3F3F3;

    padding: 10px;

}



.eventDetailMain .rightSideContent {

    position: sticky;

    top: 70px;

    max-width: 80%;

    margin: auto;

}



.eventDetailMain .countingDownBox .countingDesc .month {

    font-size: 36px;

    color: #000;

    font-weight: 500;

}



.eventDetailMain .countingDownBox .countingDesc .year {

    font-size: 16px;

    font-weight: 600;

    color: #4D4D4D;

}



.eventDetailMain .calenderBinding {

    margin: 0;

    width: 95%;

    position: absolute;

    top: -25px;

    left: 6px;

}



.eventDetailMain .socialMediaLinks {

    display: flex;

    align-content: center;

    gap: 20px;

    padding: 20px 0;

}



.eventDetailMain .leftSide {

    border-bottom: 1px solid #e5e7eb;

    padding-bottom: 20px;



}



.eventDetailMain .socialMediaLinks i {

    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

    padding: 10px;

    border-radius: 50%;

    font-size: 20px;

    border: 2px solid #FFF;

    width: 40px;

    height: 40px;

    text-align: center;

    align-content: center;

}



.eventDetailMain .tab-content {

    padding: 15px 0;

}



.eventDetailMain .tab-content .items h6 {

    color: var(--primary1);

    font-size: 18px;

    font-weight: 600;

    text-transform: capitalize;

}



.eventDetailMain .tab-content .items {

    padding: 5px 0;

}



.eventDetailMain .socialMediaLinks i.fa-facebook {

    color: #1877F2;

}



.eventDetailMain .socialMediaLinks i.fa-facebook:hover {

    border: 2px solid #1877F2;

}



.eventDetailMain .socialMediaLinks i.fa-twitter {

    color: #00ACEE;

}



.eventDetailMain .socialMediaLinks i.fa-twitter:hover {

    border: 2px solid #00ACEE;

}



.eventDetailMain .socialMediaLinks i.fa-linkedin {

    color: #0072B1;

}



.eventDetailMain .socialMediaLinks i.fa-linkedin:hover {

    border: 2px solid #0072B1;

}















/*----------------------------

DEFAULT BANNER 

---------------------------- */

.DefaultBannerMain {

    background: url('../images/Report Ocean JP Report Banner 1.png');

    height: 45vh;

    padding: 20px;

    display: flex;

    background-size: cover !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;

    flex-direction: column;

    align-items: center;

    color: #FFF;

}



.event-banner {

    background: url('../images/event-banner-black.png');

}



.event-details-banner {

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto; /* Or auto if content inside defines height */

}



.DefaultBannerMain .bannerTitle {

    font-size: 30px;

    font-weight: 500;



}



.DefaultBannerMain .container {

    height: 100%;

    align-content: center;

}









/*----------------------------

EVENTS MAIN PAGE

---------------------------- */

/*.eventsPageMain {*/

/*    padding: 40px 0;*/

/*}*/



.eventsPageMain .downloadHelpBox {

    border: 1px solid #000;

    padding: 20px;

    border-radius: 4px;

}



.eventsPageMain .downloadHelpBox h6 {

    font-size: 18px;

    font-weight: 600;

}



.eventsPageMain .downloadHelpBox p {

    font-size: 15px;

    margin: 8px 0;

}



.RefineSearchArea .formItems {

    border-top: 1px solid #ddd;

    padding: 20px 0;

}



.RefineSearchArea .searchItemsHeader {

    display: flex;

    justify-content: space-between;

}



.RefineSearchArea .searchItemsHeader {

    color: #020202;

    font-size: 14px;

}



.RefineSearchArea .search_filter_title {

    font-size: 16px;

    font-weight: 600;

    color: #020202;

}



.RefineSearchArea .singleOption label {

    cursor: pointer;

    font-size: 15px;

    margin: 2px 0;

}



.RefineSearchArea input {

    cursor: pointer;

}



.RefineSearchArea .singleOption {

    display: flex;

    align-content: center;

    gap: 12px;

    position: relative;

}



.RefineSearchArea .blog-search-input {

    border: 1px solid silver;

    width: 100%;

    padding: 4px 10px 4px 50px;

}



.RefineSearchArea .singleOption .fa-search {

    position: absolute;

    left: 0;

    top: 4px;

    border-right: 1px solid silver;

    padding: 5px 8px;

    color: var(--primary1);

    font-size: 16px;

    font-weight: 900;



}



.RefineSearchArea .searchBox {

    border: 1px solid #999595;

    padding: 10px;

    border-radius: 4px;

}



.RefineSearchArea .Years .checkBoxList {

    display: grid;

    grid-template-columns: repeat(5, auto);

}



.researchArticlesArea {

    padding: 20px 0;

    margin: 20px 0;

}



.eventsPageMain .innerDiv {

    position: sticky;

    top: 50px;

}



.eventsPageMain .innerDiv .searchItems {

    height: 80vh;

    overflow-y: auto;

    scrollbar-width: thin;

}



.researchArticlesArea .articleDesign1 {

    display: grid;

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

    gap: 0 20px;

}



.researchArticlesArea .articleDesign2 .singleArticles {

    display: grid;

    grid-template-columns: 250px auto;

    gap: 20px;

}



.blueBtn {

    background: linear-gradient(90deg, #1B5DF3, #3C68CC);

    padding: 10px;

    border: 2px solid #3164D9;

    margin: 20px 0;

    color: #FFF;

    border-radius: 4px;

}



.researchArticlesArea .singleArticles {

    box-shadow: 0px 0px 12px 0px #00000026;

    background: #FFFFFF;

    border-radius: 5px;

    overflow: hidden;

    margin-bottom: 30px;

    position: relative;

}





.researchArticlesArea .articleBadge {

    position: absolute;

    background: #004BB1;

    color: #FFF;

    font-weight: 600;

    padding: 6px 30px;

    font-size: 15px;

    top: 0;

}



.researchArticlesArea .reportItemDate {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 15px;

    font-weight: 700;

}





.researchArticlesArea img {

    width: 100%;

}



.researchArticlesArea .reportItemDesc p {

    font-size: 14px;

    max-height: 85px;

    min-height: 85px;

    overflow: hidden;

}



.researchArticlesArea .reportItemTitle a {

    font-size: 20px;

    color: #000;

    font-weight: 500;

    margin-bottom: 10px;

    display: block;

}



.researchArticlesArea .mainContent {

    padding: 20px;

    margin: auto;

}



.researchArticlesArea .articleDesign2 .mainContent {

    padding: 15px 15px 15px 0;

}



.researchArticlesArea .singleArticles:hover .reportItemTitle a {

    color: var(--primary1);

    text-decoration: underline;

}



.researchArticlesArea .singleArticles figure {

    overflow: hidden;

}



.researchArticlesArea .singleArticles:hover img {

    transform: scale(1.1);

}



.researchArticlesArea .singleArticles::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0%;

    height: 8px;

    background: #1B5DF3;

    transition: 1s ease;

}



.researchArticlesArea .singleArticles:hover.singleArticles::after {

    width: 100%;

}



.researchArticlesArea .singleArticles img {

    transition: 0.9s ease;

    object-fit: cover;

    height: 220px;



}



.researchArticlesArea .articleDesign2 .singleArticles img {

    height: 250px;

}



.researchArticlesArea .hashTagsLinks a {

    font-size: 13px;

    color: #2B55B3;

    font-weight: 600;

    font-style: italic;

    padding-right: 10px;

}



.paginationArea button {

    border: 1px solid #999595;

    font-size: 14px;

    padding: 4px 6px;

    border-radius: 4px;

    background: #E9F0FF;

}



.paginationArea .activePage {

    background: #3666D2;

    color: #FFF;

    border: 1px solid #3666D2;

}



.paginationArea .disabled {

    cursor: no-drop;

    background: #FFF;

}



#toggleFilter {

    position: fixed;

    right: 15px;

    top: 20px;

    z-index: 1001;

    background: var(--primary1);

    border: none;

    color: #FFF;

    font-size: 14px;

    padding: 4px 10px;

    border-radius: 4px;

}



/*----------------------------

GET IN TOUCH

---------------------------- */

.getInTouch {

    margin: 30px 0;

    padding: 20px;

}



.getInTouch a {

    text-decoration: none;

}



.getInTouch .items {

    background: transparent linear-gradient(115deg, #00a0ea, #0ba6e8 48%, #4a87e8) 0 0 no-repeat padding-box;

    color: #FFF;

    text-align: center;

    padding: 20px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-radius: 4px;

}



.getInTouch .grid3 {

    display: grid;

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

    gap: 20px;

    width: 100%;

}



.getInTouch h5 {

    font-size: 18px;

}



.getInTouch h6 {

    font-size: 14px;

}



.getInTouch p {

    font-size: 12px;

}



.getInTouch h4 {

    font-size: 25px;

    font-weight: 600;

}



/*----------------------------

MEDIA QUERY

---------------------------- */

@media screen and (max-width:1210px) {

    .eventDetailMain .nav-tabs {

        gap: 10px;

    }



    .eventDetailMain .rightSideContent {

        max-width: 90%;

    }



    .defaultEventDesign {

        grid-template-columns: 400px auto;

    }


    .defaultEventDesign .eventDate {
        font-size: 40px;
    }

    .defaultEventDesign .eventsDetailsArea {
        grid-template-columns: 150px auto;
    }

    .defaultEventDesign .eventsDetailsArea {

        gap: 20px;

    }



    .researchArticlesArea .reportItemTitle a {

        font-size: 18px;

    }



    .RefineSearchArea .singleOption label {

        font-size: 14px;

    }



    .RefineSearchArea .Years .checkBoxList {

        display: grid;

        grid-template-columns: repeat(4, auto);

    }

}



@media screen and (max-width:1020px) {



    .eventDetailMain .rightSideContent {

        max-width: 100%;

    }



    .eventDetailMain .countingDownBox .countingDesc .date {

        font-size: 32px;

    }



    .eventDetailMain .container,

    .pageNavigator .container {

        max-width: 85%;

    }



    .defaultEventDesign .eventsDetailsArea {

        gap: 10px;

        flex-direction: column;

    }





    .defaultEventDesign .eventDate {

        font-size: 40px;

    }



    .defaultEventDesign .eventDateArea {

        text-align: left !important;

    }



    .RefineSearchArea .searchItemsHeader {

        flex-direction: column;

    }



    .RefineSearchArea .Years .checkBoxList {

        display: grid;

        grid-template-columns: repeat(3, auto);

    }



    .researchArticlesArea .articleDesign2 .singleArticles {

        grid-template-columns: 150px auto;

    }



    .researchArticlesArea .articleDesign2 .singleArticles img {

        height: 280px;

    }


}



@media screen and (max-width:820px) {

    .defaultEventDesign {

        grid-template-columns: 100%;

    }



    .defaultEventDesign .eventsDetailsArea {

        grid-area: 2;

    }

    .defaultEventDesign {
        grid-template-columns: 250px auto;
    }

    .defaultEventDesign .eventsDetailsArea {

        flex-direction: row;

        padding: 20px 10px;

    }



    .defaultEventDesign .eventDateArea {

        margin: auto;

    }



    .researchArticlesArea .singleArticles img {

        height: 180px;

    }



    .researchArticlesArea .reportItemTitle a {

        font-size: 15px;

    }



    .researchArticlesArea .reportItemDesc p {

        font-size: 13px;

        min-height: 80px;

    }



    .researchArticlesArea .reportItemDate {

        font-size: 12px;

    }



    .researchArticlesArea .reportItemDate h6 {

        font-size: 14px;



    }

}



@media screen and (min-width:520px) {



    .showFilter {

        display: none;

    }

}



@media screen and (max-width:520px) {

    .eventDetailMain .nav-tabs {

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

    }

    .eventsDefaultPage {
        padding: 20px;
    }


    .eventDetailMain .container,

    .pageNavigator .container {

        max-width: 95%;

    }

    .defaultEventDesign {
        grid-template-columns: 100%;
    }

    .eventDetailMain .tab-content p {

        font-size: 14px;

    }



    .eventDetailMain .rightSideContent {

        max-width: 70%;

        margin-top: 40px;

    }



    .defaultEventDesign .eventsDetailsArea {

        flex-direction: column;
        display: flex;
    }



    .defaultEventDesign .eventDateArea {

        margin: 0;

    }






    .pageRow {

        padding: 15px 10px;

    }



    .DefaultBannerMain {

        height: 40vh;

    }



    .DefaultBannerMain .bannerTitle {

        font-size: 20px;

    }



    .DefaultBannerMain .bannerDesc {

        font-size: 14px;

    }



    .researchArticlesArea .articleBadge {

        padding: 6px 15px;

        font-size: 12px;

    }



    .researchArticlesArea .singleArticles img,

    .researchArticlesArea .articleDesign2 .singleArticles img {

        height: 180px;

    }



    .researchArticlesArea .articleDesign1 {

        gap: 0 10px;

        display: flex;

        flex-direction: column;

    }



    .researchArticlesArea .articleDesign2 .singleArticles {

        grid-template-columns: 1fr;

    }





    .eventsPageMain .rightSide .innerDiv {

        position: fixed;

        top: 0;

        left: -300px;

        /* hidden off-screen */

        width: 300px;

        background: #FFF;

        padding: 10px;

        transition: left 0.3s ease;

        z-index: 1000;

        border-left: 6px solid #1B5DF3;

    }



    .eventsPageMain .rightSide .innerDiv.active {

        left: 0;

    }



    .RefineSearchArea .searchBox {

        grid-area: 1;

        margin-top: 10px;

        position: sticky;

        top: 10px;

        background: #FFF;

    }



    .eventsPageMain .innerDiv .searchItems {

        scrollbar-width: none;

    }



    .eventsPageMain .innerDiv .searchItems form {

        display: grid;

        grid-template-columns: 1fr;

    }



    .eventsPageMain .innerDiv .searchItems form .blueBtn {

        font-size: 12px;

    }



    .eventsPageMain {

        padding: 20px;

    }



    .researchArticlesArea .articleDesign2 .mainContent {

        padding: 20px;

    }



    .getInTouch .grid3 {



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

        gap: 10px;

    }

}



/*----------------------------

MEDIA QUERY

---------------------------- */