:root {
    --hover-black-color: #fae7ad;
    --border-color: #e0e0e0;
    --brand-red-color: #ef412f;
}

/*---------- Trending tab starts here --------------------
----------------------------------------------------------------*/

.trend-tab {
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
}

@media (min-width:1000px) {
    .trend-tab {
        width: 100%;
        max-width: 300px;
        display: flex;
        flex-direction: column;
        margin-right: 16px;
        border: #CACACA solid 0.4px;
        border-radius: 6px;
    }
}

.trend-tab .tab-menu {
    display: flex;
    flex-direction: row;
    border-bottom: #CACACA solid 0.5px;
}

.feeds .tab-menu {
    display: flex;
    margin-right: -7px;
    flex-direction: row;
    border-bottom: #CACACA solid 0.5px;
}

.brief .feeds .bot-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    padding-top: 5px;
}

.brief .feeds .bot-nav a {
    margin-right: 0px;
    font-size: 18px;
}

.trend-tab .tab-menu .tog-tab,
.feeds .tog-tab {
    width: 100%;
    height: 40px;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    font-size: 20px;
    font-weight: 500;
    color: #454545;
    padding-top: 8px;
    border-top-left-radius: 5px;
    line-height: 28px;
    align-items: center;
    justify-content: center;
}

.trend-tab .tab-menu .tog-tab:focus {
    background: #A63E3E !important;
    color: #f2f2f2 !important;
}

.feeds .tog-tab:hover {
    color: var(--hover-color);
}

.trend-tab .tab-menu .tog-tab:hover {
    color: var(--hover-color);
}

.tog-active-left .liveicon {
    background: #f2f2f2 !important;
}

.tog-active-left {
    background-color: #A63E3E !important;
    color: #ffff !important;
}

.tog-active-right {
    background-color: #A63E3E !important;
    color: #ffff !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 4px !important;
}

.feeds .tog-tab {
    width: 100%;
    height: 40px;
    text-decoration: none;
    display: flex;
    font-size: 20px;
    font-weight: 500;
    color: #454545;
    padding-top: 8px;
    border-top-left-radius: 5px;
    margin-left: -3px;
    line-height: 28px;
    align-items: center;
    justify-content: center;
}

.trend-tab .tab-menu .tog-tab h3,
.feeds .tog-tab h3 {
    font-size: 20px;
    font-weight: 600;
}

.feeds .tog-tab h3 {
    padding-bottom: 4px;
}

#tab2 {
    display: none;
}

#live-tab1 {
    display: flex;
    flex-direction: column;
}

#live-tab2 {
    display: none;
    flex-direction: column;
    padding-top: 0px;
    padding-bottom: 16px;
    padding-left: 10px;
    padding-right: 10px;
}

#live-tab2 h3 {
    font-size: 22px;
    line-height: 32px;
    font-weight: 600;
}

#live-tab2 .ans-list {
    list-style: none;
}

#live-tab2 .ans-list li {
    margin-top: 8px;
    margin-bottom: 8px;
}

#live-tab2 .ans-list li input {
    margin-right: 8px;
    width: 16px;
    cursor: pointer;
    height: 16px;
}

#live-tab2 .ans-list li label {
    font-size: 18px;
    cursor: pointer;
    line-height: 24px;
}

.trend-tab ul {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    list-style: none;
}

.trend-tab ul li a {
    text-decoration: none;
    color: #454545;
    position: relative;
}

.trend-tab ul li a h3 {
    text-decoration: none;
    color: #454545;
    position: relative;
    padding: 16px 16px;
}

.trend-tab ul li a h3:hover {
    text-decoration: none;
    color: var(--hover-color);
    position: relative;
    padding: 16px 16px;
}

.trend-tab ul li a h3:after {
    content: "";
    background-color: #dbdbdb;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0%;
    left: 0%;
}


.trend-tab ul li a h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 25.5px;
}

.ad img {
    width: 100%;
    max-width: 300px;
}


/*---------- Trending section Ends here --------------------
----------------------------------------------------------------*/

/*-------     Mega Section 
---------   Having 14 news items
 ====      4 Images & 9 news Headlines 1 Ad */
section {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
}

.container {
    width: 100%;
    max-width: 1280px !important;
}

@media (max-width:1180px) {

    .megasection,
    section {
        padding: 30px 16px;
    }
}

section .bot-nav a:hover span {
    color: var(--hover-color);
}

section .tb-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    border-bottom: 0.5px solid var(--border-color);
}

section .tb-nav .tabhead {
    display: flex;
}

section .tb-nav .tabhead a {
    color: #A63E3E;
    text-decoration: none;
    font-size: 26px;
    line-height: 40px;
    font-weight: 600;
}

section .tb-nav .tabhead a h3 {
    font-size: 26px;
    line-height: 40px;
    font-weight: 600;
}

section .tb-nav .tabs {
    display: flex;
    flex-direction: row;
    list-style: none;
}

section .tb-nav .tabs li {
    margin: 0 12px;
}

section .tb-nav .tabs li a.tabnav:hover {
    color: var(--brand-red-color);
    text-decoration: underline;
    text-underline-position: under;
    font-weight: 500;
}

.megasection .c-megasection ul li a:hover h4 {
    color: var(--hover-color);
    transition: all 0.3s;
}

.megasection .c-megasection ul.headlineswrap li a:hover h4 {
    color: var(--hover-color);
    transition: all 0.3s;
}

.ui-state-active .red {
    color: #A63E3E !important;
    text-decoration: underline !important;
    text-underline-position: under ! important;
    font-weight: 600 !important;
}

.ui-state-active-white {
    color: #f2f2f2 !important;
    text-decoration: underline !important;
    text-underline-position: under ! important;
    font-weight: 600 !important;
}

section .tb-nav .tabs li a.tabnav {
    text-decoration: none;
    cursor: pointer;
    color: #454545;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
}

section .tb-nav .tabs li a.tabactive {
    color: #a63e3e !important;
    font-weight: 600 !important;
    text-decoration: underline;
    text-underline-position: under;
}

.singleimgsection {
    border-top: var(--border-color) solid 0.5px;
}

.singleimgsection .tb-nav .tabs li {
    margin: 0 12px;
}

.singleimgsection .tb-nav .tabs li a.tabnav {
    text-decoration: none;
    color: #454545;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
}

.singleimgsection .tb-nav .tabs li a.tabactive {
    color: #a63e3e !important;
    font-weight: 600 !important;
    text-decoration: underline;
    text-underline-position: under;
}

.megasection .c-megasection {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1;
    gap: 16px;
    margin-top: 16px;
}

.megasection .c-megasection ul.forimgwrap {
    display: flex;
    width: 50%;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    flex: 1 1;
    gap: 16px;
}

.megasection .c-megasection ul.headlineswrap {
    display: flex;
    width: 50%;
    flex-direction: column;
    flex-wrap: wrap;
    list-style: none;
    column-gap: 10px;
    flex-wrap: wrap;
    row-gap: 3px;
    max-height: 550px;
}

.megasection .c-megasection .forimgwrap li {
    width: calc(50% - 16px);
    height: auto;
}

.megasection .c-megasection .forimgwrap li a {
    color: #454545;
    text-decoration: none;
}

.megasection .c-megasection .forimgwrap li .imgthumb {
    height: fit-content;
    max-height: 172px;
    border-radius: 7px;
}

.megasection .c-megasection .forimgwrap li .imgthumb img {
    width: 100%;
    max-width: 304px;
    border-radius: 7px;
    max-height: 172px;
    object-fit: cover;
}

.megasection .c-megasection ul li h4,
.megasection .c-megasection ul.headlineswrap li a h4 {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5em;
    padding: 12px 0;
    color: #454545;
}

.megasection .c-megasection ul.headlineswrap li {
    width: calc(50% - 35px);
    height: auto;
    flex: 1 1 1;
    border-bottom: 0.5px solid var(--border-color);
}

.megasection .c-megasection ul.headlineswrap li a {
    text-decoration: none;
    color: #454545;
}

.megasection .c-megasection ul.headlineswrap li .ad img {
    max-height: 250px;
    width: fit-content;
}

section .bot-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    padding-top: 16px;
}

section .bot-nav a {
    color: #707070;
    font-weight: 500;
    font-size: 20px;
    text-decoration: none;
    line-height: 1.55em;
    margin-right: 1.6em;
}

section .bot-nav a span {
    color: #454545;
    font-weight: 700;
}


/* --------  Mega Section Ends Here -----------*/


/* ---------------- Mega Video Section --------------------
------------------  Black BG Section --------------------
----*/
.megavideosection {
    width: 100%;
    display: flex;
    flex-direction: row;
    background: #fafafa;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}

.megavideosection .video-single:hover .videoinfo h2 {
    color: var(--brand-red-color);
}

.megavideosection .video-row {
    display: flex;
    flex-direction: row;
    gap: 32px;
}

.megavideosection .row-section .video-row li a:hover h4 {
    color: var(--brand-red-color);
}

section .tb-w-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    border-bottom: 0.5px solid #ef412fb0;
}

section .tb-w-nav .tabhead {
    display: flex;
}

section .tb-w-nav .tabhead a {
    color: #ef412f;
    text-decoration: none;
    font-size: 26px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    line-height: 40px;
    font-weight: 600;
}

section .tb-w-nav .tabhead a .story-icon {
    height: 21px;
    margin-top: 0px;
}

.storysection {
    padding: 20px 0;
}

section .tb-w-nav .tabhead a img {
    height: 26px;
    width: auto;
    margin-top: 0px;
}

section .tb-w-nav .tabhead a h3 {
    font-size: 26px;
    line-height: 30px;
    font-weight: 600;
}

section .tb-w-nav .tabs {
    display: flex;
    flex-direction: row;
    list-style: none;
}

section .tb-w-nav .tabs li {
    margin: 0 12px;
}

section .tb-w-nav .tabs li a.tabnav {
    text-decoration: none;
    color: #D7d7d7d7;
    cursor: pointer;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
}

section .tb-w-nav .tabs li a.tabnav:hover {
    text-decoration: underline;
    text-underline-position: under;
    color: var(--brand-red-color);
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
}

section .tb-w-nav .tabs li a.tabactive {
    color: #ffff !important;
    text-decoration: underline;
    text-underline-position: under;
    font-weight: 600 !important;
}

section .bot-nav-white a:hover span {
    color: var(--brand-red-color);
}

#vtabtwo,
#vtabthree,
#vtabfour,
#vtabfive,
#vtabsix,
#vtabseven {
    display: none;
}

.megavideosection .video-single {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 16px;
    width: 32.3%;
    margin-bottom: auto;
    position: relative;
}

.megavideosection .video-single .video {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.megavideosection .video-single .video figure {
    max-height: 478px;
}

.megavideosection .video-single .video figure img {
    max-height: fit-content;
    width: 100%;
    border-radius: 2px;
}

.megavideosection .video-single .video span {
    padding: 2px 5px;
    margin-left: 10px;
    background: #dd0000;
    font-size: 14px;
    display: none;
    color: #ffff;
    border-radius: 3px;
}

.megavideosection .video-single .video .vidicon {
    width: fit-content;
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.megavideosection .video-single .video .vidicon img {
    width: 35px;
    height: 35px;
}

.megavideosection .video-single a {
    text-decoration: none;
    position: relative;
}

.megavideosection .video-single .videoinfo {
    display: flex;
    flex-direction: column;
    border-bottom-right-radius: 2px;
    position: absolute;
    background: #414141b0;
    bottom: 6px;
    border-bottom-left-radius: 2px;
    width: 100%;
}

.megavideosection .video-single .videoinfo a {
    text-decoration: none;
    color: #f2f2f2;
}

.megavideosection .video-single .videoinfo h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    padding: 10px;
    color: #e7e7e7;
}

.megavideosection .video-single .videoinfo h4 {
    font-size: 20px;
    line-height: 32px;
    font-weight: 500;
    color: #f2f2f2;
    display: none;
    max-width: 567px;
    margin-top: 1.6em;
}

.megavideosection .row-section {
    width: 62%;
    display: flex;
    padding-top: 16px;
    padding-bottom: 7px;
    flex-direction: column;
    justify-content: space-between;
}

.megavideosection .row-section .video-row {
    display: flex;
    flex-direction: row;
    list-style: none;
    max-height: 426px;
    flex-wrap: wrap;
    gap: 16px;
    flex: 1 1;
}

.megavideosection .row-section .video-row li {
    width: calc(51% - 16px);
}

.megavideosection .row-section .video-row li .imgthumb {
    max-height: fit-content;
    width: auto;
    height: fit-content;
}

.megavideosection .row-section .video-row li .imgthumb img {
    width: 100%;
    max-width: 200px;
    min-width: 187px;
    height: fit-content;
    border-radius: 2px;
}

.megavideosection .row-section .video-row .ad img {
    height: fit-content;
    max-width: 300px;
    width: 300px;
}

.megavideosection .row-section .video-row li a {
    text-decoration: none;
    display: flex;
    gap: 16px;
    color: #f2f2f2;
    flex-direction: row;
}

.megavideosection .row-section .video-row li h4 {
    color: #454545;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    line-height: 27px;
}

section .bot-nav-white {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    padding-top: 10px;
}

section .bot-nav-white a {
    color: #0000006b;
    font-weight: 500;
    font-size: 20px;
    text-decoration: none;
    line-height: 1.55em;
    margin-right: 1.6em;
}

section .bot-nav-white a span {
    color: #454545;
    font-weight: 600;
}

/*----------------------------------------------------------------
------------------------ Mega Video Section End ------------------*/


/*----------------------------------------------------------------
------------------------ Single Image Section ----------------*/
.singleimgsection .singleimgc {
    display: flex;
    flex-direction: row;
    flex: 1 1;
    padding: 16px 0;
    gap: 16px;
    flex-wrap: wrap;
}

.singleimgsection .singleimgc .single-c-left {
    width: fit-content;
    max-width: 42.3%;
}

.singleimgsection .singleimgc .single-c-left ul {
    list-style: none;
}

.singleimgsection .singleimgc .single-c-left ul li a {
    text-decoration: none;
    color: #454545;
}

.singleimgsection .singleimgc .single-c-left ul li .lighthouse {
    height: fit-content;
    border-radius: 6px;
    width: 100%;
}

.singleimgsection .singleimgc .single-c-left ul li .lightimg {
    width: 100%;
    max-width: 532px;
    border-radius: 6px;
    height: fit-content;
    max-height: 300px;
}

.singleimgsection .singleimgc .single-c-left ul li h4 {
    font-size: 24px;
    font-weight: 600;
    margin-top: 16px;
    line-height: 37px;
    color: #454545;
}

.singleimgsection .singleimgc .single-multiple-c {
    width: auto;
}

.singleimgsection .singleimgc .single-multiple-c .hor-block-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    column-gap: 16px;
    max-height: 450px;
    list-style: none;
    row-gap: 13px;
    flex: 1 1
}

.singleimgsection .singleimgc .single-multiple-c .hor-block-wrap li .hor-block {
    display: flex;
    margin-bottom: 6px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    flex: 1 1;
}

.singleimgsection .singleimgc .single-multiple-c .hor-block-wrap li a {
    text-decoration: none;
    color: #454545;
}

.singleimgsection .singleimgc .single-multiple-c .hor-block-wrap li .smallimg {
    max-height: 185px;
    height: fit-content;
}

.singleimgsection .singleimgc .single-multiple-c .hor-block-wrap li .smallimg .img {
    height: 140px;
    width: fit-content;
    max-height: 85px;
    max-width: 140px;
}

.singleimgsection .singleimgc .single-multiple-c .hor-block-wrap li {
    width: max-content;
    border-bottom: 0.5px solid var(--border-color);
}

.singleimgsection .singleimgc .single-multiple-c .hor-block-wrap li h5 {
    max-width: 186px;
    font-weight: 500;
    font-size: 17px;
    line-height: 25.5px;
    text-decoration: none;
    color: #454545;
}

.singleimgsection .singleimgc .single-c-left ul li a:hover h4 {
    color: var(--hover-color);
    transition: all linear 0.3s;
}

.singleimgsection .singleimgc .single-multiple-c .hor-block-wrap li a:hover h5 {
    color: var(--hover-color);
    transition: all linear 0.3s;
}

/*----------------------------------------------------------------
--------------------- Technologies tab Start -----------------------------*/
#ttabtwo,
#ttabthree,
#ttabfour,
#ttabfive {
    display: none;
}

#mtabtwo,
#mtabthree,
#mtabfour,
#mtabfive {
    display: none;
}

/*----------------------------------------------------------------
--------------------- Technologies tab End -----------------------------*/

/*----------------------------------------------------------------
            Single image Section Ends Here----------------------------------------------------------------
----------------------------------------------------------------*/

/*----------------------------------------------------------------
Two Image Section Starts Here ----------------------------------------------------------------
----------------------------------------------------------------*/
.blacksection {
    background: #292929;
}

.twin-img-section .twin-img-c {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 24px 0;
    flex: 1 1;
    gap: 40px;
}

.twin-img-section .twin-img-c .twin-left {
    width: calc(100% - 324px);
}

.twin-img-section .twin-img-c .twin-left .twin-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1;
    gap: 16px;
    list-style: none;
}

.twin-img-section .twin-img-c .twin-left .twin-wrap li .lighthouse {
    max-height: 265px;
    height: fit-content;
    border-radius: 6px;
    width: fit-content;
}

.twin-img-section .twin-img-c .twin-left .twin-wrap li .lighthouse .lightimg {
    width: 100%;
    max-width: 471px;
    border-radius: 6px;
    height: fit-content;
    max-height: 265px;
}

.twin-img-section .twin-img-c .twin-left .twin-wrap li {
    flex: 1 1;
}

.twin-img-section .twin-img-c .twin-left .twin-wrap li a,
.twin-img-section .twin-img-c .twin-right li a {
    text-decoration: none;
    color: #f2f2f2;
}

.twin-img-section .twin-img-c .twin-left .twin-wrap li h3 {
    font-size: 24px;
    margin-top: 12px;
    font-weight: 600;
    line-height: 36px;
    color: #f2f2f2;
    text-decoration: none;
}

.twin-img-section .twin-img-c .twin-left .twin-wrap li a:hover h3 {
    color: var(--hover-black-color);
}

.twin-img-section .twin-img-c .twin-right {
    width: 260px;
}

.twin-img-section .twin-img-c .twin-right ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 9px;
    flex: 1 1;
}

.twin-img-section .twin-img-c .twin-right ul li {
    width: 100%;
    max-width: 260px;
    padding-bottom: 4px;
    border-bottom: #8d8d8d solid 0.2px;
}

.twin-img-section .twin-img-c .twin-right ul li h4 {
    font-size: 17px;
    line-height: 25.5px;
    font-weight: 600;
}

.twin-img-section .twin-img-c .twin-right ul li a:hover h4 {
    color: var(--hover-black-color);
}

/*----------------------------------------------------------------
Two Image Section Ends Here ----------------------------------------------------------------
----------------------------------------------------------------*/
/*----------------------------------------------------------------
Mini Interactive Section ----------------------------------------------------------------
----------------------------------------------------------------*/
.blacksection {
    background: #fafafa;
}

.mini-interactive-section {
    border-top: #e0e0e0 solid 0.5px;
}

.mini-interactive-section .twin-img-c {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 24px;
    flex: 1 1;
    gap: 40px;
}

.mini-interactive-section .twin-img-c .twin-left {
    width: 100%;
}

.mini-interactive-section .twin-img-c .twin-left .twin-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1;
    gap: 24px;
    list-style: none;
}

.mini-interactive-section .twin-img-c .twin-left .twin-wrap li .lighthouse {
    max-height: 265px;
    height: fit-content;
    border-radius: 6px;
    width: fit-content;
}

.mini-interactive-section .twin-img-c .twin-left .twin-wrap li .lighthouse .lightimg {
    width: 100%;
    max-width: 471px;
    border-radius: 6px;
    height: fit-content;
    max-height: 265px;
}

.mini-interactive-section .twin-img-c .twin-left .twin-wrap li {
    flex: 1 1;
}

.mini-interactive-section .twin-img-c .twin-left .twin-wrap li a {
    text-decoration: none;
    color: #454545;
}

.mini-interactive-section .twin-img-c .twin-left .twin-wrap li h3 {
    font-size: 18px;
    margin-top: 12px;
    font-weight: 500;
    line-height: 26px;
    color: #454545;
    text-decoration: none;
}

.mini-interactive-section .twin-img-c .twin-left .twin-wrap li a:hover h3 {
    color: var(--brand-red-color);
}

#etabtwo,
#etabthree,
#etabfour,
#etabfive {
    display: none;
}

/*----------------------------------------------------------------
Mini Interactive Section Ends Here ----------------------------------------------------------------
----------------------------------------------------------------*/
/*----------------------------------------------------------------
Interactive sections ----------------------------------------------------------------
----------------------------------------------------------------*/
.interactive-section {
    border-top: var(--border-color) solid 0.5px;
}

.interactive-section .interactive-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1;
    gap: 16px;
    padding-top: 24px;
}

.interactive-section .interactive-content .interactive-left {
    width: calc(100% - 280px)
}

.interactive-section .interactive-content .interactive-left ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    flex: 1 1;
    gap: 16px;
}

.interactive-section .interactive-content .interactive-left ul li {
    width: 230px;
}

.interactive-section .interactive-content .interactive-left ul li a {
    text-decoration: none;
    color: #454545;
}

.interactive-section .interactive-content .interactive-left ul li .medimg {
    height: fit-content;
    max-height: 134px;
}

.interactive-section .interactive-content .interactive-left ul li .medimg .img {
    height: fit-content;
    width: 100%;
    max-width: 236px;
    max-height: 134px;
}

.interactive-section .interactive-content .interactive-left ul li h3 {
    font-size: 17px;
    font-weight: 500;
    margin-top: 8px;
    line-height: 25.6px;
    text-decoration: none;
    color: #454545;
}

.interactive-section .interactive-content .interactive-right {
    width: 255px;
}

.interactive-section .interactive-content .interactive-right ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    list-style: none;
    flex: 1 1;
    gap: 8px;
}

.interactive-section .interactive-content .interactive-right ul li {
    width: 250px;
    border-bottom: #c3c3c3 solid 1px;
    padding-bottom: 4px;
}

.interactive-section .interactive-content .interactive-right ul li a {
    text-decoration: none;
    color: #454545;
}

.interactive-section .interactive-content .interactive-right ul li a h4 {
    font-size: 17px;
    font-weight: 500;
    line-height: 25.6px;

}

.interactive-section .interactive-content .interactive-left ul li a:hover h3 {
    color: var(--brand-red-color);
    transition: all linear 0.2s;
}

.interactive-section .interactive-content .interactive-right ul li a:hover h4 {
    color: var(--brand-red-color);
    transition: all linear 0.2s;
}

#rtabtwo,
#rtabthree,
#rtabfour,
#rtabfive {
    display: none;
}

/*----------------------------------------------------------------
Interactive Section Ends Here ----------------------------------------------------------------
----------------------------------------------------------------*/


/*----------------------------------------------------------------
---------------------- stories Section starts here----------------------------------------------------------------*/

.portrait-gallery-section .gallery-content {
    width: 100%;
    margin-top: 16px;
}

.portrait-gallery-section .gallery-content ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    gap: 16px;
    flex: 1 1;
}

.portrait-gallery-section .gallery-content ul li {
    max-width: 242px;
    position: relative;
    height: 100%;
    max-height: 350px;
}

.portrait-gallery-section .gallery-content ul li img {
    width: 100%;
    max-width: 242px;
    border-radius: 6px;
    height: 350px;
    object-fit: cover;
    max-height: 350px;
}

.portrait-gallery-section .gallery-content ul li .overlay {
    position: absolute;
    top: 0%;
    border-radius: 6px;
    left: 0%;
    display: flex;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(151, 151, 151, 0) 51.04%, #101010cb 81.77%);
    flex-direction: column;
    justify-content: flex-end;
}

.portrait-gallery-section .gallery-content ul li .overlay .icon {
    max-height: 32px;
    width: fit-content;
    max-width: 32px;
    height: 32px;
    position: absolute;
    top: 12px;
    right: 12px;
}

.portrait-gallery-section .gallery-content ul li .overlay .icon img {
    max-width: 32px;
    height: 32px;
    width: fit-content;
    max-height: 32px;
}

.portrait-gallery-section .gallery-content ul li a {
    text-decoration: none;
    color: #f2f2f2;
}

.portrait-gallery-section .gallery-content ul li .overlay span {
    font-size: 17px;
    line-height: 20px;
    color: #f2f2f2;
    font-weight: 400;
    margin-left: 14px;
    margin-right: 14px;
}

.portrait-gallery-section .gallery-content ul li .overlay h3 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: #ffffff;
    margin-right: 14px;
    margin-left: 14px;
    margin-bottom: 26px;
}

.portrait-gallery-section .gallery-content ul li:hover .overlay h3 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: var(--brand-red-color);
    margin-right: 14px;
    margin-left: 14px;
    margin-bottom: 26px;
}

#stabtwo,
#stabthree,
#stabfour,
#stabfive,
#stabsix,
#stabseven {
    display: none;
}

#ktabtwo,
#ktabthree,
#ktabfour,
#ktabfive,
#ktabsix,
#ktabseven {
    display: none;
}

#atabtwo,
#atabthree,
#atabfour,
#atabfive,
#atabsix,
#atabseven {
    display: none;
}

#dtabtwo,
#dtabthree,
#dtabfour,
#dtabfive {
    display: none;
}

#btabtwo,
#btabthree,
#btabfour,
#btabfive {
    display: none;
}

/*----------------------------------------------------------------
---------------------- stories Section Ends here----------------------------------------------------------------*/
/*----------------------------------------------------------------
Three row sections starts Here ----------------------------------------------------------------
----------------------------------------------------------------*/
.three-row-section {
    border-top: none;
    padding: 16px 0;
}

.three-row-section .three-row {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-flow: none;
    flex: 1 1;
    gap: 35px;
}

.three-row-section .three-row li {
    max-width: 396px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.three-row-section .three-row li a {
    text-decoration: none;
    color: #454545;
}

.three-row-section .three-row li a .rowhead {
    text-decoration: none;
    color: #454545;
}

.three-row-section .three-row li .rowhead,
.three-row-section .three-row li .rowhead h2 {
    font-size: 26px;
    font-weight: 700;
    padding-bottom: 3px;
    line-height: 40px;
    position: relative;
    color: #454545;
    text-decoration: none;
}

.three-row-section .three-row li .rowhead h2::before {
    content: "";
    width: 6px;
    margin-right: 12px;
    vertical-align: middle;
    margin-top: 2px;
    height: 28px;
    margin-bottom: 9px;
    display: inline-block;
    background: #ef412f;
}

.three-row-section .three-row li .rowhead h2::after {
    content: "";
    background-color: #dbdbdb;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0%;
    left: 0%;
}

.three-row-section .three-row li a a {
    text-decoration: none;
    color: #4a4a4a;
}

.three-row-section .three-row li .lowerlinks {
    text-decoration: none;
    color: #454545;
}

.three-row-section .three-row li figure {
    max-height: 223px;
    height: fit-content;
    margin-top: 16px;
}

.three-row-section .three-row li figure img {
    width: 100%;
    max-width: 396px;
    max-height: 223px;
    border-radius: 5px;
    height: fit-content;
}

.three-row-section .three-row li h3 {
    font-size: 20px;
    line-height: 30px;
    position: relative;
    font-weight: 700;
    padding: 16px 0;
    color: #454545;
}

.three-row-section .three-row li a:hover h3 {
    color: var(--hover-color)
}

.three-row-section .three-row li h3::after {
    content: "";
    background-color: #dbdbdb;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0%;
    left: 0%;
}

.three-row-section .three-row li h4 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    position: relative;
    padding: 16px 0;
    color: #454545;
}

.three-row-section .three-row li a:hover h4 {
    color: var(--hover-color);
    transition: all linear 0.2s;
}

.three-row-section .three-row li h4::after {
    content: "";
    background-color: #dbdbdb;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0%;
    left: 0%;
}


/*----------------------------------------------------------------
Three row sections Ends Here ----------------------------------------------------------------
----------------------------------------------------------------*/
@media (max-width:1340px) {
    .interactive-section .interactive-content .interactive-left ul li {
        width: 200px;
    }
}

/*----------------------------------------------------------------
-------------- Photo Gallery Section -----------------------------
----------------------------------------------------------------*/

.photo-ent-section {
    border-top: var(--border-color) solid 0px;
    padding: 20px 0;
}

.photo-ent-section .photo-ent-grid {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.photo-ent-section .bot-nav svg {
    margin-left: 8px;
}

.photo-ent-section .galhead a {
    text-decoration: none;
    color: #454545;
}

.photo-ent-section .galhead h3 {
    font-size: 26px;
    line-height: 40px;
    font-weight: 700;
    position: relative;
    margin: 6px 0px;
    padding-left: 20px;
    color: #454545;
}

.photo-ent-section .galhead h3::before {
    content: "";
    height: 24px;
    position: absolute;
    width: 5px;
    background: #ef412f;
    left: 0px;
    top: 11px;
    margin-right: 10px;
    align-self: center;
    border: 5px;
    margin-top: -6px;
}

.photo-ent-section .photo-holder {
    width: 75.9%;

}

.photo-ent-section .photo-holder .elements {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.photo-ent-section .ent-holder {
    width: 24.1%;
}

.photo-ent-section .divider {
    height: initial;
    border-radius: 2px;
    width: 1px;
    background-color: #d9d9d9;
}

.photo-ent-grid .photo-holder .single-photo {
    width: 100%;
    position: relative;
    margin-bottom: auto;
}

.photo-ent-grid .photo-holder .single-photo figure {
    max-height: 481px;
}

.photo-ent-grid .photo-holder .single-photo .info {
    width: 100%;
    position: absolute;
    bottom: 0px;
    background: #414141b0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.photo-ent-grid .photo-holder .single-photo .info h3 {
    color: #efefef;
    font-size: 26px;
    line-height: 38px;
    font-weight: 600;
    margin-top: 16px;
    margin-left: 16px;
    margin-bottom: 16px;
    margin-right: 16px;
}

.photo-ent-grid .photo-holder .photo-row li {
    position: relative;
}

.photo-ent-grid .photo-holder .photo-row li figure {
    max-height: 150px;
}

.photo-ent-grid .photo-holder .photo-row li .info {
    position: absolute;
    bottom: 0px;
    background: #414141b0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.photo-ent-grid .photo-holder .photo-row li .info h3 {
    color: #efefef;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    margin-top: 8px;
    margin-left: 8px;
    margin-bottom: 8px;
    margin-right: 8px;
}

.photo-ent-grid .photo-holder .photo-row {
    list-style: none;
    width: 40%;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

.photo-ent-grid .photo-holder .single-photo figure img {
    width: 100%;
    border-radius: 10px;
    min-height: 481px;
    object-fit: cover;
    max-height: 481px;
}

.photo-ent-grid .photo-holder .photo-row figure img {
    width: 100%;
    min-height: 150px;
    border-radius: 10px;
    max-height: 150px;
    object-fit: cover;
}

.photo-ent-section .ent-holder .ent-lighthouse {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    list-style: none;
}

.photo-ent-section .ent-holder .ent-lighthouse>:first-child {
    width: 100%;
    position: relative;
}

.photo-ent-section .ent-holder .ent-lighthouse>:first-child figure {
    min-height: 180px;
    border-radius: 10px;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
}

.photo-ent-section .ent-holder .ent-lighthouse>:first-child figure img {
    min-height: 180px;
    border-radius: 10px;
    max-height: 180px;
    width: 100%;
    object-fit: cover;
}

.photo-ent-section .ent-holder .ent-lighthouse>:first-child .info {
    position: absolute;
    bottom: 0px;
    background: #414141b0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.photo-ent-section .ent-holder .ent-lighthouse>:first-child .info h3 {
    color: #efefef;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    margin-top: 8px;
    margin-left: 8px;
    margin-bottom: 8px;
    margin-right: 8px;
}

.photo-ent-section .ent-holder .ent-lighthouse li {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.photo-ent-section .ent-holder>:first-child a {
    width: 100%;
}

.photo-ent-section .ent-holder .ent-lighthouse li a {
    display: flex;
    flex-direction: row;
    column-gap: 16px;
    width: 100%;
    text-decoration: none;
    color: #454545;
}

.photo-ent-section .ent-holder .ent-lighthouse li a figure {
    height: 84.5px;
}

.photo-ent-grid .photo-holder .photo-row li:hover .info h3,
.photo-ent-grid .photo-holder .single-photo:hover .info h3,
.photo-ent-section .ent-holder .ent-lighthouse>:first-child:hover .info h3 {
    color: var(--brand-red-color);
}

.photo-ent-section .ent-holder .ent-lighthouse li:hover .info h3 {
    color: var(--hover-color);
}

.photo-ent-section .ent-holder .ent-lighthouse li a figure img {
    width: 130px;
    height: 84.5px;
    border-radius: 10px;
    object-fit: cover;
}

.photo-ent-section .ent-holder .ent-lighthouse li a .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.photo-ent-section .ent-holder .ent-lighthouse li a .info h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #454545;
}

.three-row-section .three-row ul li a {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.three-row-section .three-row ul li a figure img {
    width: 140px;
    max-width: 140px;
    height: 90px;
    height: 90px;
    object-fit: cover;
}

.three-row-section .three-row .firstrow h4::after {
    content: "";
    background-color: #dbdbdb;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0%;
    left: 0%
}

.three-row-section .three-row ul li a {
    position: relative;
}

.three-row-section .three-row ul li a::after {
    content: "";
    background-color: #dbdbdb;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0%;
    left: 0%
}

.megavideosection .row-section .video-row li h4 {
    line-height: 28px !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
 }
 
 .megavideosection .video-single .video figure img {
    max-height: 478px !important;
    border-radius: 2px;
    height: 232px !important;
    object-fit: cover;
 }
 
 .megavideosection .row-section .video-row li .imgthumb img {
    height: auto !important;
    max-height: 105px !important;
    Object-fit: cover;
 }

 
 .hero .herogrid .feeds {
    max-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
 }
 
 .hero .herogrid .feeds .adHide300x250::after, .adHide300x250::after  {
    content: "Advertisement";
    position:absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 12px;
    padding-top: 3px;
    font-size: 14px;
    line-height: 20px;
    color: #3c3c3c;
    z-index: 999;
 }
 .hero .herogrid .feeds .adHide300x250, .adHide300x250 {
    margin: 0;
    position: relative;
    overflow-x: scroll;
    min-height: 250px;
    padding-top: 24px;
    background: #d8d8d8a8
 }




 
 .hero .herogrid .feeds .compactcard {
    margin-bottom: -3px;
 }
 
 
 .hero .herogrid .four-two {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 16px;
    border-radius: 8px;
    background: #fafafa;
    min-width: 690px;
    max-height: 400px;
    list-style: none;
    padding: 0;
    padding-bottom: 2px;
 }
 
 .hero .herogrid .four-two li {
    width: 50%;
 }
 
 .hero .herogrid .four-two>:first-child {
    height: 284px;
    display: flex;
    flex-direction: column;
 }
 
 .hero .herogrid .four-two li {
    height: 84px;
    display: flex;
    flex-direction: column;
    position: relative;
 }
 
 .hero .herogrid .four-two li::after {
    content: "";
    position: absolute;
    bottom: -8px;
    width: 95%;
    height: 1px;
    border-bottom: 1px solid #f2f2f2;
 }
 
 .hero .herogrid .four-two>:last-child::after {
    content: "";
    position: absolute;
    bottom: -19px;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #f2f2f200;
 }
 
 .hero .herogrid .four-two>:nth-child(2)::after {
    content: "";
    position: absolute;
    bottom: -19px;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #f2f2f200;
 }
 
 .hero .herogrid .four-two>:first-child::after {
    display: none;
 }
 
 .hero .herogrid .four-two>:first-child a {
    display: flex;
    flex-direction: column;
    position: relative;
    max-height: 284px;
 }
 
 .hero .herogrid .four-two li a {
    display: flex;
    flex-direction: row;
    text-decoration: none;
    color: #454545;
    gap: 16px;
    position: relative;
    max-height: 84px;
 }
 
 .hero .herogrid .four-two li a:hover h3,
 .hero .herogrid .four-two li a:hover {
    color: #ef412f !important;
 }

 .hero .herogrid .news-tiles li a:hover .info h3,
 .hero .herogrid .news-tiles li a:hover{
    color:#ef412f;
 }
 
 .hero .herogrid .four-two>:first-child a:hover .overlay,  .hero .herogrid .news-tiles li a:hover .info {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.03) 54.17%, rgba(0, 0, 0, 0.12) 63.54%, rgba(0, 0, 0, 0.20) 100%);
 }

 .hero .herogrid {
    transition: all 0.6s ease-in-out;
 }
 
 .hero .herogrid .four-two>:first-child a figure {
    display: flex;
    flex-direction: column;
 }
 
 .hero .herogrid .four-two li a figure {
    display: flex;
    flex-direction: column;
 }
 
 .hero .herogrid .four-two>:first-child a figure img {
    width: -webkit-fill-available;
    width: -moz-available;
    height: 284px;
    object-fit: cover;
    border-radius: 8px;
 }
 
 .hero .herogrid .four-two li a figure img {
    width: 125px;
    height: 5.45em;
    border-radius: 8px;
    object-fit: cover;
 }
 
 .hero .herogrid .four-two>:first-child a .overlay {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 8px;
    height: 100%;
    width: 100%;
    transition: all 0.8s ease-in-out;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.03) 44.17%, rgba(0, 0, 0, 0.13) 51.17%, rgba(0, 0, 0, 0.32) 63.54%, rgba(0, 0, 0, 0.50) 100%);
 }
 
 .hero .herogrid .four-two li a .overlay {
    display: flex;
    flex-direction: column;
 }
 
 .hero .herogrid .four-two>:first-child a .overlay h3 {
    margin: 16px;
    color: #ffff;
    font-size: 24px;
    line-height: 36px;
    padding-top: 10px;
    font-weight: 700;
    max-width: unset;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
 
 .hero .herogrid .four-two li a .overlay h3 {
    color: #3c3c3c;
    font-size: 17px;
    line-height: 28px;
    max-width: 180px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
 }
 
 @media (max-width: 1240px) {
    .hero .herogrid .four-two {
       min-width: 635px;
    }
 }
 
 @media (max-width: 1180px) {
    .hero .herogrid .four-two {
       min-width: 590px;
    }
 }
 
 @media (max-width: 1140px) {
    .hero .herogrid .four-two {
       min-width: 550px;
    }
 }
 
 /*--------- new css addon ---------------- - ----*/
 .hero .herogrid .news-tiles {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: -moz-available;
    width: -webkit-fill-available;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
    overflow-x: scroll;
}
 
 .hero .herogrid .news-tiles li {
    display: flex;
    flex-direction: column;
    width: calc(50% - 8px);
    min-width: calc(50% - 8px);
 }
 
 .hero .herogrid .news-tiles li figure {
    display: flex;
    flex-direction: column;
 }
 
 .hero .herogrid .news-tiles li figure .thumb {
    width: -webkit-fill-available;
    width: -moz-available;
    height: 138px;
    min-height: 138px;
    max-height: 138px;
    height: -moz-available;
    object-fit: cover;
    border-radius: 8px;
 }
 
 
 .hero .herogrid .news-tiles li a {
    text-decoration: none;
    color: #ffff;
    display: flex;
    flex-direction: column;
    position: relative;
 }
 
 .hero .herogrid .news-tiles li a .info {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    justify-content: flex-end;
    transition: all 0.8s ease-in-out;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.03) 44.17%, rgba(0, 0, 0, 0.13) 51.17%, rgba(0, 0, 0, 0.32) 63.54%, rgba(0, 0, 0, 0.50) 100%);
 }
 
 .hero .herogrid .news-tiles li a .info h3 {
    font-size: 15px;
    line-height: 24px;
    color: #ffff;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 5px;
    overflow: hidden;
 }
 
 
 /*------------ Live Icon -------------*/
 .overlay h3 .liveblinker {
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    padding: 5px 10px 4px;
    display: inline;
    vertical-align: middle;
    border: 1px solid #e31e25;
    border-radius: 20px;
    margin: 0;
    vertical-align: text-top;
    line-height: 1.2;
    background: #e31e25;
    margin-right: 5px;
    font-weight: 700;
 }
 
 .overlay h3 .liveblinker span {
    width: 13px;
    height: 13px;
    display: inline-block;
    border: 1px solid #fff;
    border-radius: 50%;
    text-align: center;
    position: relative;
    margin-right: 5px;
    vertical-align: baseline;
    background: #fff;
 }
 
 .overlay h3 .liveblinker span i {
    width: 9px;
    height: 9px;
    display: inline-block;
    border-radius: 50%;
    background: #e31e25;
    animation-name: liveblink;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    vertical-align: top;
    margin: 2px;
 }

 .car-data:hover {
    background: linear-gradient(0deg, black, #00000082, transparent);
}

.car-data:hover .car-text {
    color: #e31e25;
}

/* ----------------------------- Chandrayaan Design starts From Here --------------------------------------------
----------------------------- Style for chandrayaan at center in hero -------------------------------------------- */

.hero .herogrid .four-two li {
    width: 34%;
 }
 
 .hero .herogrid .four-two {
    background: transparent !important;
    row-gap: 23px !important;
    min-width:76%;
 }
 
 .hero .herogrid .four-two li::after {
    display: none;
 }
 

 
 .stories-outer {
    display: none !important;
 }
 
 .hero .herogrid .four-two>:nth-child(5) {
    margin-bottom: -5px;
 }
 .hero .herogrid .four-two>:nth-child(6) {
    display: none;
 }
 
 .hero {
    /* background: url(https://images.thejbt.com/uploadimage/library/free_files/jpg/chandr_2023_08_22_054759.jpg); */
    /* padding-top: 178px; */
    filter: contrast(1.2);
    background-size: cover;
    background-position: 0% 46%;
 }
 
 .hero .herogrid {
    border-radius: 12px;
 }

 .hero .herogrid .four-two li {
    box-shadow: #e5e5e5 0px 0px 14px 2px;
    border-radius: 12px;
}
 .hero .herogrid .four-two>:nth-child(2){
    margin-top: 0px;
 }
 
 .hero .herogrid .four-two>:first-child {
    display: flex !important;
    width: 62%;
    height: 400px !important;
    max-height: 405px;
    min-height: 400px;
 }
 
 .hero .herogrid .four-two>:first-child a figure img {
    height: 405px !important;
 }
 
 .hero .herogrid .four-two>:first-child a {
    min-height: 405px !important;
 }

.hero .herogrid .four-two li:hover a .overlay h3 {
    color: #ff0000 !important;
}
 
 /* ----------------------------- Chandrayaan Design Design From Here -------------------------------------------- */

 
.hero .herogrid .car-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex:1 1;
    list-style: none;
    gap:18px;
    max-height: 427px;
    margin: 0;
    padding: 0;
 }
 
 .hero .herogrid .car-grid>:nth-child(2) {
    margin-top: 6px;
    margin-bottom: 0px;
 }
 .hero .herogrid .car-grid>:first-child {
    display: flex!important;
    width: calc(50% - 16px);
    height: 302px!important;
    margin-top: 0;
    margin-bottom: 0;
    max-height: 302px;
    min-height: 302px;
 }
 
 .hero .herogrid .car-grid>:first-child a:hover .overlay, .hero .herogrid .news-tiles li a:hover .info {
    background: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.03) 54.17%,rgba(0,0,0,0.12) 63.54%,rgba(0,0,0,0.20) 100%);
 }
 .hero .herogrid .car-grid>:first-child a {
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.4s ease-in-out;
    max-height: 302px;
 }
 
 .hero .herogrid .car-grid>:first-child a  figure img {
    width: -webkit-fill-available;
    max-width: 100%;
    width: -moz-available;
    height: 302px;
    object-fit: cover;
    border-radius: 8px;
 }
 
 .hero .herogrid .car-grid>:first-child a .overlay h3 {
    margin: 16px;
    color: #ffff;
    font-size: 20px;
    line-height: 32px;
    padding-top: 10px;
    font-weight: 600;
    max-width: unset;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
 }
 
 .hero .herogrid .car-grid>:first-child a .overlay {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 8px;
    height: 100%;
    width: 100%;
    transition: all .8s ease-in-out;
    background: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.03) 44.17%,rgba(0,0,0,0.13) 51.17%,rgba(0,0,0,0.32) 63.54%,rgba(0,0,0,0.50) 100%);
 }
 
 .hero .herogrid .car-grid>:first-child a  figure {
    display: flex;
    flex-direction: column;
 }
 
 .hero .herogrid .car-grid>:first-child a:hover h3, .hero .herogrid .car-grid li a:hover {
    color: #ef412f!important;
 }
 
 
 .hero .herogrid .car-grid li::after {
    content: " ";
    position: absolute;
    bottom: -11.6px;
    width: 100%;
    height: 1px;
    background-color: #cacaca;
 }
 
 .hero .herogrid .car-grid>:first-child::after {
    bottom: -12.5px;
 }
 
 .hero .herogrid .car-grid>:nth-child(2):after, .hero .herogrid .car-grid>:last-child::after {
    content: " ";
    position: absolute;
    bottom: -19px;
    width: 100%;
    height: 1px;
    background-color: #cacaca;
 }
 .hero .herogrid .car-grid li {
    height: 84px;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-top: 5px;
    width: calc(50% - 18px);
    margin-bottom: 0px;
 }
 
 .hero .herogrid .car-grid li a {
    display: flex;
    flex-direction: row;
    text-decoration: none;
    color: #454545;
    gap: 16px;
    position: relative;
    max-height: 84px;
 }
 
 .hero .herogrid .car-grid li a figure {
    display: flex;
    flex-direction: column;
 }
 
 .hero .herogrid .car-grid li a figure img {
    width: 125px;
    height: 5.45em;
    filter: saturate(1.2);
    border-radius: 8px;
    object-fit: cover;
 }
 .hero .herogrid .car-grid li a .overlay {
    display: flex;
    flex-direction: column;
 }
 
 .hero .herogrid .car-grid li a .overlay h3 {
    color: #3c3c3c;
    font-size: 17px;
    line-height: 28px;
    max-width: 180px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
 }
 
 .hero .herogrid .news-tiles li figure img {
    border-radius: 10px;
    object-fit: cover;
    filter: saturate(1.2);
 }
 .hero .herogrid .car-grid li a:hover h3, .hero .herogrid .car-grid li a:hover {
    color: #ef412f!important;
}