.dp_1_bold,.dp_2_bold,.dp_3_bold,.dp_4_bold,.xl_1_bold,.xl_2_bold,.xl_3_bold,.h1_bold,.h2_bold,.h3_bold,.h4_bold,.h5_bold,.h6_bold,.h4_bold_500,.news_card_main_card_heading,.font_variation_settings,.static-page-title{font-variation-settings:"opsz" 50,"slnt" 0,"wdth" 25,"GRAD" 0,"XOPQ" 96,"XTRA" 468,"YOPQ" 79,"YTAS" 750,"YTDE" -203,"YTFI" 738,"YTLC" 514,"YTUC" 712 !important;}.h4_bold_500{font-family:'Roboto Flex';font-weight:500;font-size:20px;line-height:24px;}@media (max-width:1024px){.ibl-header .ibl-header__drawer{left:auto;width:100%;right:-100%;transform:none;transition:right 0.25s;}.ibl-header .ibl-header__drawer--open{right:0;}.ibl-header .ibl-header__drawer-top{border-bottom:none !important;}}body[class~="photos"] .ibl-header .ibl-header__nav-link[href^="/photos"],body[class*=" photos/"] .ibl-header .ibl-header__nav-link[href^="/photos"]{color:#ff4100;box-shadow:inset 0 -4px 0 #db3700;}body[class~="photos"] .ibl-header .ibl-header__drawer-link[href^="/photos"],body[class*=" photos/"] .ibl-header .ibl-header__drawer-link[href^="/photos"]{color:#ff4100;box-shadow:inset 4px 0 0 #db3700;padding-left:12px;}body[class~="videos"] .ibl-header .ibl-header__nav-link[href^="/videos"],body[class*=" videos/"] .ibl-header .ibl-header__nav-link[href^="/videos"]{color:#ff4100;box-shadow:inset 0 -4px 0 #db3700;}body[class~="videos"] .ibl-header .ibl-header__drawer-link[href^="/videos"],body[class*=" videos/"] .ibl-header .ibl-header__drawer-link[href^="/videos"]{color:#ff4100;box-shadow:inset 4px 0 0 #db3700;padding-left:12px;}body[class~="news"] .ibl-header .ibl-header__nav-link[href^="/news"],body[class*=" news/"] .ibl-header .ibl-header__nav-link[href^="/news"]{color:#ff4100;box-shadow:inset 0 -4px 0 #db3700;}body[class~="news"] .ibl-header .ibl-header__drawer-link[href^="/news"],body[class*=" news/"] .ibl-header .ibl-header__drawer-link[href^="/news"]{color:#ff4100;box-shadow:inset 4px 0 0 #db3700;padding-left:12px;}body[class~="home"] .ibl-header .ibl-header__nav-link[href="/"],body[class~="home"] .ibl-header .ibl-header__nav-link[href^="/?"]{color:#ff4100;box-shadow:inset 0 -4px 0 #db3700;}body[class~="home"] .ibl-header .ibl-header__drawer-link[href="/"],body[class~="home"] .ibl-header .ibl-header__drawer-link[href^="/?"]{color:#ff4100;box-shadow:inset 4px 0 0 #db3700;padding-left:12px;}.ibl-header .ibl-header__drawer-link--active{color:hsl(var(--text_main_prim)) !important;}.static-page-title{font:var(--dp_3_bold);color:hsl(var(--text_invert_high));text-align:left;text-transform:uppercase;max-width:55%;}.ibl-header__offset{height:70px;}.ibl-header__bar{position:fixed;top:0;left:0;z-index:50;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;width:100%;height:70px;padding:0 98px;background:#000000;border-bottom:1px solid #333333;}.ibl-header__left{display:flex;align-items:center;gap:28px;min-width:0;height:100%;}.ibl-header__logo{display:flex;flex-shrink:0;width:52px;height:52px;}.ibl-header__logo-img{width:52px;height:52px;object-fit:contain;}.ibl-header__logo-fallback{display:flex;align-items:center;justify-content:center;width:52px;height:52px;color:#ffffff;font-size:0.75rem;font-weight:700;letter-spacing:0.04em;}.ibl-header__nav{display:flex;align-items:center;gap:16px;height:100%;}.ibl-header .ibl-header__nav-link{display:inline-flex;align-items:center;justify-content:center;height:70px;padding:0 8px;border:0;border-radius:0;background:transparent;font:var(--body_sm_bold);color:hsl(var(--text_invert_medium));text-transform:uppercase;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-decoration:none;white-space:nowrap;box-shadow:none;}.ibl-header .ibl-header__nav-link:hover,.ibl-header .ibl-header__nav-link--active{color:#ff4100;}.ibl-header .ibl-header__nav-link--active{box-shadow:inset 0 -4px 0 #db3700;}.ibl-header__download{display:flex;flex-shrink:0;align-items:center;gap:16px;}.ibl-header__download-label{color:#ffffff;font-family:var(--body_xs_bold-font-family,"Noto Sans"),sans-serif;font-size:var(--body_xs_bold-font-size,0.625rem);font-weight:var(--body_xs_bold-font-weight,700);line-height:var(--body_xs_bold-line-height,1rem);letter-spacing:var(--body_xs_bold-letter-spacing,0);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-decoration:none;text-transform:uppercase;white-space:nowrap;}.ibl-header__stores{display:flex;align-items:center;gap:15px;}.ibl-header__store{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:#ffffff;text-decoration:none;}.ibl-header__icon{color:inherit;font-size:16px;line-height:1;}.ibl-header__menu-btn{display:none;flex-direction:column;align-items:flex-end;justify-content:space-between;width:24px;height:16px;padding:0;border:0;background:transparent;cursor:pointer;}.ibl-header__menu-line{display:block;width:11px;height:1.5px;background:#ffffff;}.ibl-header__menu-line--wide{width:24px;}.ibl-header__drawer{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;gap:0;padding:0;overflow-y:auto;background:#1a1a1a !important;color:#ffffff;visibility:hidden;transform:translateX(100%);transition:transform 0.25s ease;}.ibl-header__drawer--open{visibility:visible;transform:none;padding-left:0px !important;padding-bottom:0px !important;padding-right:0px !important;padding-top:0px !important;height:calc(100% - 70px) !important;margin-top:auto !important;}.ibl-header__drawer.ibl-header__drawer--open .ibl-header__drawer-cta .icon_ibl-apple-store{order:2;}.ibl-header:has(.ibl-header__drawer--open) .ibl-header__bar{z-index:-1;}.ibl-header__drawer-nav:empty,.ibl-header__drawer-ctas:empty,.ibl-header__drawer-socials:empty{display:none;}.ibl-header__drawer-top{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;box-sizing:border-box;height:60px;padding:0 20px;background:#000000;border-bottom:0.5px solid #333333;}.ibl-header__close{display:inline-flex;align-items:center;justify-content:flex-end;box-sizing:border-box;gap:0;height:30px;padding:0 0 0 20px;border:0;border-left:0.5px solid #333333;background:transparent;color:#ffffff;font-size:0px !important;line-height:0;cursor:pointer;}.ibl-header__font-icon--close{display:inline-block;position:relative;flex-shrink:0;width:24px;height:24px;}.ibl-header__font-icon--close::before,.ibl-header__font-icon--close::after{content:"";position:absolute;top:11px;left:4.5px;width:15px;height:1.5px;background:#ff4100 !important;}.ibl-header__font-icon--close::before{transform:rotate(45deg);}.ibl-header__font-icon--close::after{transform:rotate(-45deg);}.ibl-header__drawer-nav{display:flex;flex-direction:column;gap:12px;padding:16px 40px 0;}.ibl-header .ibl-header__drawer-link{display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;width:100%;min-height:44px;padding:12px 16px;border:0;border-radius:4px;background:transparent;color:#ffffff;font-family:var(--body_md_bold-font-family,"Noto Sans"),sans-serif;font-size:var(--body_md_bold-font-size,1rem);font-weight:var(--body_md_bold-font-weight,700);line-height:var(--body_md_bold-line-height,1.5rem);letter-spacing:var(--body_md_bold-letter-spacing,0);text-decoration:none;text-transform:uppercase;box-shadow:none;}.ibl-header .ibl-header__drawer-link:hover,.ibl-header .ibl-header__drawer-link--active{color:#ff4100;}.ibl-header__drawer-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:auto;padding:20px;background:#002dbc;}.ibl-header__drawer-socials{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:20px;}.ibl-header__drawer-cta{display:inline-flex;align-items:center;gap:20px;color:#ffffff;font-family:var(--body_md_bold-font-family,"Noto Sans"),sans-serif;font-size:var(--body_md_bold-font-size,1rem);font-weight:var(--body_md_bold-font-weight,700);line-height:var(--body_md_bold-line-height,1.5rem);letter-spacing:var(--body_md_bold-letter-spacing,0);text-decoration:none;text-transform:uppercase;}.ibl-header__drawer-social{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:#ffffff;text-decoration:none;}@media (max-width:1279px){.ibl-header__bar{padding:0 32px;}}@media (max-width:1024px){.ibl-header__bar{height:60px;padding:0 20px 0 16px;}.ibl-header__offset{height:60px;}.ibl-header__logo,.ibl-header__logo-img{width:44px;height:44px;}.ibl-header__nav,.ibl-header__download{display:none;}.ibl-header__menu-btn{display:flex;box-sizing:content-box;height:30px;padding-left:20px;border-left:0.5px solid #333333;align-items:flex-end;justify-content:center;gap:5px;}.ibl-header__bar{z-index:70;}.ibl-header__drawer{top:60px;}.ibl-header__drawer-top{position:fixed;top:0;right:0;z-index:80;height:60px;padding:0 20px;background:#000000;border-bottom:0.5px solid #333333;}}.ibl-footer{width:100%;}.ibl-footer__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1440px;margin:0 auto;}.ibl-footer__social{box-sizing:border-box;width:100%;background:#101010;border-top:0.5px solid hsl(var(--border_invert_disable));padding:var(--spacing_3) var(--container-offset,98px);}.ibl-footer__socials{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}.ibl-footer__social-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid hsl(var(--text_invert_high));border-radius:50%;background:transparent;color:hsl(var(--text_invert_high));text-decoration:none;transition:opacity 0.2s ease;}.ibl-footer__social-link:hover{opacity:0.85;}.ibl-footer__social-icon{font-size:16px;line-height:1;}.ibl-footer__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}.ibl-footer__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0;}.ibl-footer__legal-sep{flex-shrink:0;align-self:center;width:0;height:12px;margin:0 12px;border-left:0.5px solid #333333;}.ibl-footer__legal-link{color:hsl(var(--text_invert_medium));font:var(--body_xs_regular);text-decoration:none;white-space:nowrap;text-transform:capitalize;}.ibl-footer__legal-link:hover{color:hsl(var(--text_invert_high));text-decoration:underline;}.ibl-footer__powered{box-sizing:border-box;width:100%;background:#002DBC !important;padding:16px 98px;}.ibl-footer__copyright{margin:0;color:#ffffff;font-family:var(--body_xs_regular-font-family,"Noto Sans"),sans-serif;font-size:var(--body_xs_regular-font-size,0.625rem);font-weight:var(--body_xs_regular-font-weight,400);line-height:var(--body_xs_regular-line-height,0.875rem);}.ibl-footer__powered-by{display:inline-flex;align-items:center;gap:8px;color:#ffffff;text-decoration:none;}.ibl-footer__powered-by:hover{opacity:0.9;}.ibl-footer__powered-label{font-family:var(--body_xs_regular-font-family,"Noto Sans"),sans-serif;font-size:var(--body_xs_regular-font-size,0.625rem);font-weight:var(--body_xs_regular-font-weight,400);line-height:var(--body_xs_regular-line-height,0.875rem);white-space:nowrap;}.ibl-footer__powered-logo{display:block;height:20px;width:auto;}.ibl-footer__si-logo{font-family:Georgia,"Times New Roman",serif;font-size:1.25rem;font-style:italic;font-weight:700;line-height:1;letter-spacing:-0.02em;}@media (max-width:1024px){.ibl-footer__social,.ibl-footer__powered{padding-inline:var(--spacing_4,24px);}.ibl-footer__inner{flex-direction:column;align-items:center;gap:20px;}.ibl-footer__socials{justify-content:center;width:100%;}.ibl-footer__legal{justify-content:center;}}.icon_ibl_youtube:before{margin-left:0px;}@media (max-width:640px){.ibl-footer__social{padding:32px var(--spacing_4,16px);}.ibl-footer__powered{padding:var(--spacing_4,16px);}.ibl-footer__inner{gap:24px;}.ibl-footer__legal{justify-content:center;width:100%;}.ibl-footer__legal-sep{margin:0 8px;}.ibl-footer__legal-link{font-size:0.625rem;}.ibl-footer__powered .ibl-footer__inner{flex-direction:column;align-items:center;gap:8px;text-align:center;}}.ibl-sponsors{--sponsor-bg:#ffffff;--sponsor-ink:#111111;--sponsor-gap:8px;box-sizing:border-box;width:100%;max-width:100%;min-width:0;background-color:var(--sponsor-bg);padding-block:72px 80px;}.ibl-sponsors .sponsors-title{margin:0 0 48px;color:var(--sponsor-ink);font-family:"Roboto Flex",Roboto,sans-serif;font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:0.01em;text-align:center;text-transform:uppercase;}.ibl-sponsors .sponsor-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sponsor-gap);width:100%;max-width:100%;min-width:0;}.ibl-sponsors .sponsor-card{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;padding:0;background:transparent;overflow:hidden;}.ibl-sponsors .sponsor-label{display:none;}.ibl-sponsors .sponsor-card .sponsor-logo,.ibl-sponsors .sponsor-card picture,.ibl-sponsors .sponsor-card img{display:block;width:100%;height:109px;max-height:109px;object-fit:contain;background:transparent;border-radius:0;}@media (max-width:767px){.ibl-sponsors{--sponsor-gap:8px;padding-block:48px 56px;}.ibl-sponsors .sponsors-title{margin-bottom:36px;}.ibl-sponsors .sponsor-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.ibl-sponsors .sponsor-grid > .sponsor-card:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc((100% - var(--sponsor-gap)) / 2);max-width:calc((100% - var(--sponsor-gap)) / 2);}}.ibl-sponsors .sponsors-title{font-variation-settings:"opsz" 50,"GRAD" 0,"wdth" 25 !important;letter-spacing:0px !important;font-weight:500 !important;}#ibl-sponsors{display:none !important;}.ibl-header__stores{display:none !important;}.ibl-header__drawer-socials{display:none !important;}.ibl-footer__legal-link[href="/contact"]{display:none !important;}.ibl-footer__legal a[href="/contact"],.ibl-footer__legal a[href="/contact"] + .ibl-footer__legal-sep{display:none !important;}.ibl-footer__legal{display:flex;align-items:center;gap:12px;}.ibl-footer__legal-sep{display:block;width:1px;height:14px;background-color:currentColor;flex-shrink:0;}.section-header .view-more-btn{transition:gap 0.4s ease !important;}.section-header .view-more-btn:hover{gap:16px !important;}
/* -------- Homepage Photo Card Css started----*/ .home-photo-card {
position: relative;
overflow: hidden;
}
.home-photo-card img {
object-fit: cover;
transition: filter 0.5s linear;
}
.home-photo-card:hover img, .home-photo-card:focus-within img {
filter: grayscale(1);
}
.home-photo-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-color: #db3700;
opacity: 0;
transition: opacity 0.5s linear;
pointer-events: none;
}
.home-photo-card:hover::before, .home-photo-card:focus-within::before {
opacity: 0.9;
}
.home-photo-card > div:last-child {
position: absolute;
inset: auto 0 0 0;
z-index: 2;
}
.home-photo-content {
padding: 1.5rem 1rem;
gap: 2rem;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.home-photo-card:hover .home-photo-content, .home-photo-card:focus-within .home-photo-content {
opacity: 1;
pointer-events: auto;
}
@media (max-width: 640px) {
.home-photo-card > div:last-child {
position: static;
}
.home-photo-card:hover img, .home-photo-card:focus-within img {
filter: none;
}
.home-photo-card::before {
content: none;
}
.home-photo-content, .home-photo-card:hover .home-photo-content, .home-photo-card:focus-within .home-photo-content {
opacity: 1;
padding: 0.625rem 0.5rem;
gap: 1.25rem;
pointer-events: auto;
}
}
/*Homepage Photo Card Css End Here */ /*Homepage Video Card Css Start Here */ .home-video-meta-wrap {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 1;
}
.home-video-icon-wrap {
position: absolute;
width: 100%;
transform: translateY(-50%);
top: 50%;
z-index: 1;
}
.home-video-thumb img {
transform: scale(1);
transition: transform 0.5s linear;
}
.home-video-card:hover .home-video-thumb img, .home-video-card:focus-within .home-video-thumb img {
transform: scale(1.06);
}
.home-video-thumb::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-color: #000;
opacity: 0;
transition: opacity 0.5s linear;
pointer-events: none;
border-radius: 10px;
}
.home-video-card:hover .home-video-thumb::before, .home-video-card:focus-within .home-video-thumb::before {
opacity: 0.34;
}
.home-video-icon-border {
transform: translateY(0);
transition: transform 0.5s linear;
}
.home-video-card:hover .home-video-icon-border, .home-video-card:focus-within .home-video-icon-border {
transform: translateY(-5px);
}
/* Video Listing Header and Swiper Container CSS*/ .home-video-listing .template-header {
padding-inline: var(--container-offset) !important;
}
.home-video-listing .preview-swiper .swiper {
padding-left: var(--container-offset) !important;
}
/* Video listing slider nav arrows */ .home-video-listing .custom-button-left button, .home-video-listing .custom-button-right button {
border-radius: var(--radius_rounded);
width: 2.5rem;
height: 2.5rem;
padding: var(--spacing_2_5);
}
/* .home-video-listing .custom-button-right .wac-icon {
transform: rotate(180deg);
}
*/ /*Homepage Vide Card Css End Here */ /*Meet The IBL Teams */ .meet-the-team {
--mtt-bg: #f5f5f5;
--mtt-ink: #1a1a1a;
--mtt-name: #454545;
--mtt-card: #ffffff;
--mtt-radius: 8px;
--mtt-gap: 6px;
--team-color: var(--mtt-bg);
--team-bg-image: none;
position: relative;
overflow: hidden;
container-type: inline-size;
background-color: var(--team-color);
/* background-image: var(--team-bg-image);
*/ background-repeat: no-repeat;
background-position: top right;
background-size: min(42vw, 520px) auto;
padding-block: 80px 64px;
transition: background-color 0.3s ease;
}
.meet-the-team::before {
content: "";
position: absolute;
top: 0;
right: -17%;
z-index: 0;
width: min(42vw, 520px);
height: 100%;
background-image: var(--team-bg-image);
background-repeat: no-repeat;
background-position: top right;
background-size: contain;
opacity: 0.5;
pointer-events: none;
}
.meet-the-team:has(.team-chennai:hover), .meet-the-team:has(.team-chennai.is-active) {
--team-color: #ff1124;
--team-bg-image: url("/static-assets/images/teams/c43266aefd98ebab92a142a5b57f24e27404f12d.png");
}
.meet-the-team:has(.team-mumbai:hover), .meet-the-team:has(.team-mumbai.is-active) {
--team-color: #f35621;
--team-bg-image: url("/static-assets/images/teams/cf3500e67ce1a51f41de6d03bc749b29a291e2f8.png");
}
.meet-the-team:has(.team-delhi:hover), .meet-the-team:has(.team-delhi.is-active) {
--team-color: #690eba;
--team-bg-image: url("/static-assets/images/teams/156806e04136d88fbe3d750ee9154fab60d41c07.png");
}
.meet-the-team:has(.team-bengaluru:hover), .meet-the-team:has(.team-bengaluru.is-active) {
--team-color: #34a905;
--team-bg-image: url("/static-assets/images/teams/08925b32419b256d4a53c7f1faf2726e869aa4b3.png");
}
.meet-the-team:has(.team-kolkata:hover), .meet-the-team:has(.team-kolkata.is-active) {
--team-color: #f6d205;
--team-bg-image: url("/static-assets/images/teams/02545a65889d4f63ba70b12480bc73ca1ec8ca07.png");
}
.meet-the-team:has(.team-ahmedabad:hover), .meet-the-team:has(.team-ahmedabad.is-active) {
--team-color: #184594;
--team-bg-image: url("/static-assets/images/teams/16b7dd00fa89765e475f106128c55907e644b7eb.png");
}
.meet-the-team .watermark {
position: absolute;
top: 0;
left: 0;
right: unset;
inset-inline-start: auto;
inset-inline-end: 0;
width: 70%;
max-width: 70%;
margin: 0 auto 0 0;
box-sizing: border-box;
padding-inline-start: inherit;
overflow: visible;
white-space: nowrap;
text-align: left;
pointer-events: none;
user-select: none;
font-family: "Agenda One Compressed", "Roboto Flex", Impact, sans-serif;
font-weight: 600;
font-stretch: condensed;
font-size: clamp(260px, 16vw, 420px);
font-size: clamp(260px, 26cqi, 420px);
line-height: 0.7;
letter-spacing: -0.04em;
color: #000;
background: linear-gradient(180deg, rgb(0 0 0 / 0.08) 0%, rgb(0 0 0 / 0) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 0;
}
.meet-the-team .section-header {
position: relative;
z-index: 1;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 64px;
}
.meet-the-team .meet-the-team-title {
margin: 0;
/* max-width: 75%;
*/ color: var(--mtt-ink);
font-family: "Roboto Flex", Roboto, sans-serif;
font-weight: 600;
font-size: clamp(48px, 10vw, 140px);
line-height: 1;
letter-spacing: -0.01em;
transition: color 0.3s ease;
}
.meet-the-team .meet-the-team-title {
margin: 0;
max-width: 85%;
}
/* Tablet */ @media (min-width: 768px) and (max-width: 1279px) {
.meet-the-team .meet-the-team-title {
max-width: 70%;
}
}
/* Desktop */ @media (min-width: 1280px) {
.meet-the-team .meet-the-team-title {
max-width: 75%;
}
}
.meet-the-team:has(.team-card:hover) .meet-the-team-title, .meet-the-team:has(.team-card.is-active) .meet-the-team-title {
color: #fff;
}
.meet-the-team .view-more {
display: inline-flex;
align-items: center;
gap: 0px;
flex-shrink: 0;
margin-bottom: 12px;
padding: 10px 20px;
border: 1px solid var(--mtt-ink);
border-radius: 999px;
background: transparent;
color: hsl(var(--text_main_high));
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 12px;
line-height: 20px;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.3s ease;
text-transform: uppercase;
font: var(--body_sm_bold-font-weight, 550) var(--body_sm_bold-font-size, 0.75rem)/var(--body_sm_bold-line-height, 1rem) var(--body_sm_bold-font-family, Roboto, system-ui, -apple-system, sans-serif);
letter-spacing: var(--body_sm_bold-letter-spacing, normal);
}
.meet-the-team:has(.team-card:hover) .view-more, .meet-the-team:has(.team-card.is-active) .view-more {
color: #fff;
border-color: #fff;
}
.meet-the-team .view-more::after {
content: "";
width: 10px;
height: 10px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
margin-right: 1rem;
}
/* .meet-the-team .view-more:hover {
background-color: var(--mtt-ink);
color: #fff;
}
*/ .meet-the-team .logo-row {
position: relative;
z-index: 1;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--mtt-gap);
}
.meet-the-team .team-card {
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
flex: 0 0 182px;
width: 182px;
height: 230px;
min-width: 182px;
min-height: 230px;
max-width: 182px;
max-height: 230px;
padding: 10px 10px;
border-radius: var(--mtt-radius);
background-color: var(--mtt-card);
overflow: hidden;
transform: translateY(0);
transition: background-color 0.3s ease, transform 0.3s ease;
}
.meet-the-team .team-card .team-logo, .meet-the-team .team-card picture, .meet-the-team .team-card figure, .meet-the-team .team-card img {
position: relative;
z-index: 1;
width: 116px;
height: 116px;
max-width: 116px;
max-height: 116px;
object-fit: contain;
pointer-events: none;
}
.meet-the-team .team-card .anchor {
position: relative;
z-index: 1;
margin: 0;
max-width: 9ch;
color: var(--mtt-name);
font-family: "Roboto Flex", Roboto, sans-serif;
font-variation-settings: "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712, "slnt" 0, "wdth" 25;
font-weight: 500;
font-size: 20px;
line-height: 24px;
text-align: center;
transition: color 0.28s ease;
text-transform: uppercase;
}
.meet-the-team .team-card .atag {
position: absolute;
inset: 0;
z-index: 2;
font-size: 0;
line-height: 0;
color: transparent;
}
.meet-the-team .carousel-nav {
display: none;
}
.meet-the-team:has(.team-card:hover) .team-card, .meet-the-team:has(.team-card.is-active) .team-card {
transform: translateY(10%);
background-color: rgb(255 255 255 / 0.82);
}
.meet-the-team .team-card:hover, .meet-the-team:has(.team-card:hover) .team-card:hover, .meet-the-team .team-card.is-active, .meet-the-team:has(.team-card.is-active) .team-card.is-active {
transform: translateY(0);
background-color: var(--mtt-card);
}
@media (max-width: 1024px) {
.meet-the-team {
padding-block: 56px 48px;
}
.meet-the-team .section-header {
margin-bottom: 40px;
}
.meet-the-team .logo-row {
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 640px) {
.meet-the-team {
padding-block: 40px 32px;
}
.meet-the-team .watermark {
top: -16px;
left: auto;
right: 4%;
width: auto;
max-width: none;
overflow: visible;
font-stretch: normal;
font-size: 180px;
letter-spacing: 0.6px;
}
.meet-the-team .section-header {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 24px;
}
.meet-the-team .view-more {
width: 40px;
height: 40px;
min-width: 40px;
margin-bottom: 0;
padding: 0;
font-size: 0;
line-height: 0;
color: transparent;
}
.meet-the-team .view-more::after {
width: 9px;
height: 9px;
border-right-width: 1.6px;
border-top-width: 1.6px;
color: var(--mtt-ink);
}
.meet-the-team:has(.team-card:hover) .view-more::after, .meet-the-team:has(.team-card.is-active) .view-more::after {
color: #fff;
}
.meet-the-team .logo-row {
--mtt-card-w: calc((100% - 8px) / 2);
--mtt-shift: 0px;
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
justify-content: flex-start;
gap: 8px;
overflow: hidden;
}
.meet-the-team .team-card {
flex: 0 0 var(--mtt-card-w);
width: var(--mtt-card-w);
min-width: var(--mtt-card-w);
max-width: var(--mtt-card-w);
height: 230px;
min-height: 230px;
max-height: 230px;
padding: 24px 8px;
}
.meet-the-team .team-card:first-child {
margin-left: var(--mtt-shift);
transition: margin-left 0.35s ease, transform 0.3s ease, background-color 0.3s ease;
}
.meet-the-team:has(#mtt-chennai:target) .logo-row, .meet-the-team:has(#mtt-mumbai:target) .logo-row, .meet-the-team:has(#mtt-delhi:target) .logo-row, .meet-the-team:has(#mtt-bengaluru:target) .logo-row, .meet-the-team:has(#mtt-kolkata:target) .logo-row, .meet-the-team:has(#mtt-ahmedabad:target) .logo-row {
--mtt-card-w: 58%;
padding-inline: calc((100% - 58%) / 2);
}
.meet-the-team:has(#mtt-chennai:target) .logo-row {
--mtt-shift: 0;
}
.meet-the-team:has(#mtt-mumbai:target) .logo-row {
--mtt-shift: calc(-1 * (var(--mtt-card-w) + 8px));
}
.meet-the-team:has(#mtt-delhi:target) .logo-row {
--mtt-shift: calc(-2 * (var(--mtt-card-w) + 8px));
}
.meet-the-team:has(#mtt-bengaluru:target) .logo-row {
--mtt-shift: calc(-3 * (var(--mtt-card-w) + 8px));
}
.meet-the-team:has(#mtt-kolkata:target) .logo-row {
--mtt-shift: calc(-4 * (var(--mtt-card-w) + 8px));
}
.meet-the-team:has(#mtt-ahmedabad:target) .logo-row {
--mtt-shift: calc(-5 * (var(--mtt-card-w) + 8px));
}
.meet-the-team:has(#mtt-chennai:target) {
--team-color: #ff1124;
}
.meet-the-team:has(#mtt-mumbai:target) {
--team-color: #f35621;
}
.meet-the-team:has(#mtt-delhi:target) {
--team-color: #690eba;
}
.meet-the-team:has(#mtt-bengaluru:target) {
--team-color: #34a905;
}
.meet-the-team:has(#mtt-kolkata:target) {
--team-color: #f6d205;
}
.meet-the-team:has(#mtt-ahmedabad:target) {
--team-color: #184594;
}
.meet-the-team:has(#mtt-chennai:target) .meet-the-team-title, .meet-the-team:has(#mtt-mumbai:target) .meet-the-team-title, .meet-the-team:has(#mtt-delhi:target) .meet-the-team-title, .meet-the-team:has(#mtt-bengaluru:target) .meet-the-team-title, .meet-the-team:has(#mtt-ahmedabad:target) .meet-the-team-title, .meet-the-team:has(#mtt-chennai:target) .view-more, .meet-the-team:has(#mtt-mumbai:target) .view-more, .meet-the-team:has(#mtt-delhi:target) .view-more, .meet-the-team:has(#mtt-bengaluru:target) .view-more, .meet-the-team:has(#mtt-ahmedabad:target) .view-more {
color: #fff;
border-color: #fff;
}
.meet-the-team:has(#mtt-kolkata:target) .meet-the-team-title, .meet-the-team:has(#mtt-kolkata:target) .view-more {
color: var(--mtt-ink);
border-color: var(--mtt-ink);
}
.meet-the-team:has(.team-card:target) .team-card {
transform: translateY(10%);
background-color: rgb(255 255 255 / 0.82);
}
.meet-the-team .team-card:target {
transform: translateY(0);
background-color: var(--mtt-card);
scroll-margin-block: 80px;
}
.meet-the-team .team-card .team-logo, .meet-the-team .team-card picture, .meet-the-team .team-card figure, .meet-the-team .team-card img {
width: 96px;
height: 96px;
max-width: 96px;
max-height: 96px;
}
.meet-the-team .carousel-nav {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.meet-the-team .carousel-btn {
position: relative;
box-sizing: border-box;
display: none;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--mtt-ink);
border-radius: 999px;
background: #fff;
color: var(--mtt-ink);
overflow: hidden;
}
.meet-the-team:not(:has(.team-card:target)) .mtt-next-idle, .meet-the-team:has(#mtt-chennai:target) .mtt-prev-chennai, .meet-the-team:has(#mtt-chennai:target) .mtt-next-chennai, .meet-the-team:has(#mtt-mumbai:target) .mtt-prev-mumbai, .meet-the-team:has(#mtt-mumbai:target) .mtt-next-mumbai, .meet-the-team:has(#mtt-delhi:target) .mtt-prev-delhi, .meet-the-team:has(#mtt-delhi:target) .mtt-next-delhi, .meet-the-team:has(#mtt-bengaluru:target) .mtt-prev-bengaluru, .meet-the-team:has(#mtt-bengaluru:target) .mtt-next-bengaluru, .meet-the-team:has(#mtt-kolkata:target) .mtt-prev-kolkata, .meet-the-team:has(#mtt-kolkata:target) .mtt-next-kolkata, .meet-the-team:has(#mtt-ahmedabad:target) .mtt-prev-ahmedabad {
display: inline-flex;
}
.meet-the-team:has(.team-card:target) .carousel-btn {
border-color: #fff;
}
.meet-the-team:has(#mtt-kolkata:target) .carousel-btn {
border-color: var(--mtt-ink);
}
.meet-the-team .carousel-hit {
position: absolute;
inset: 0;
z-index: 2;
font-size: 0;
line-height: 0;
color: transparent;
}
.meet-the-team .carousel-icon, .meet-the-team .carousel-icon svg, .meet-the-team .carousel-icon img {
position: relative;
z-index: 1;
display: block;
width: 16px;
height: 16px;
pointer-events: none;
}
}
/* meet the time */ article:has(.custom-height) {
height: auto !important;
}
.template-body:has(.custom-height) {
grid-template-rows: auto !important;
}
.template-body:has(.custom-height) article {
height: auto !important;
min-height: 0 !important;
}
/* News Section Main Card Css */ .custom-content-position-News {
position: relative !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
/* Image container */ .custom-content-position-News > div:first-child {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 0 !important;
}
/* Remove aspect-ratio restriction */ .custom-content-position-News > div:first-child div[data-atom-id] {
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
}
/* Image */ .custom-content-position-News img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Category / News content */ .custom-content-position-News > div:nth-child(2) {
position: absolute !important;
left: 24px !important;
right: 24px !important;
bottom: 80px !important;
z-index: 2 !important;
}
/* Date / metadata */ .custom-content-position-News > div:nth-child(3) {
position: absolute !important;
left: 24px !important;
right: 24px !important;
bottom: 24px !important;
z-index: 2 !important;
}
/* Make overlay text white */ .custom-content-position-News span {
color: white !important;
}
.custom-content-position-News {
position: relative !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
/* Image */ .custom-content-position-News > div:first-child {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 0 !important;
}
.custom-content-position-News > div:first-child div[data-atom-id] {
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
}
.custom-content-position-News img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Dark overlay */ .custom-content-position-News::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient( to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 65% );
}
/* Content */ .custom-content-position-News > div:nth-child(2), .custom-content-position-News > div:nth-child(3) {
position: absolute !important;
left: 16px !important;
right: 16px !important;
z-index: 2 !important;
}
.custom-content-position-News > div:nth-child(2) {
bottom: 55px !important;
}
.custom-content-position-News > div:nth-child(3) {
bottom: 0px !important;
}
.custom-content-position-News span {
color: #fff !important;
}
/* Small screens */ @media (max-width: 767px) {
.custom-content-position-News {
aspect-ratio: 1 / 1 !important;
height: auto !important;
}
}
/*footer images*/ @media (min-width: 1024px) {
.custom_height_partner_section {
height: 130px !important;
padding-top: 40px;
border-radius: 5px !important;
overflow: hidden;
}
.custom_height_partner_section img {
border-radius: 5px !important;
overflow: hidden;
}
}
@media (min-width: 1280px) {
.custom_height_partner_section {
height: 140px !important;
padding-top: 40px;
border-radius: 5px !important;
overflow: hidden;
}
.custom_height_partner_section img {
border-radius: 5px !important;
overflow: hidden;
}
}
@media (min-width: 1536px) {
.custom_height_partner_section {
height: 155px !important;
padding-top: 40px;
border-radius: 5px !important;
overflow: hidden;
}
.custom_height_partner_section img {
border-radius: 5px !important;
overflow: hidden;
}
}
/* Ad Banner CSS Start here*/ .ad-banner {
position: relative;
width: 100%;
padding-inline: 0 !important;
margin-top: 5%;
}
.predictor-banner-image {
aspect-ratio: 381/539;
}
.ad-banner .ad-banner-image, .ad-banner .ad-banner-image img {
display: block;
width: 100%;
height: auto;
}
.ad-banner .ad-banner-button {
position: absolute;
z-index: 2;
left: 25%;
top: 65%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 8px 18px;
border: 0;
border-radius: 999px;
background: #f15a24;
color: #ffffff;
font-family: "Roboto Flex", Roboto, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
@media (max-width: 767px) {
.ad-banner .ad-banner-button {
left: 18%;
top: 64%;
padding: 6px 12px;
font-size: 10px;
}
}
.ad-banner .ad-banner-button::after {
content: "";
width: 7px;
height: 7px;
border-top: 1.5px solid #fff;
border-right: 1.5px solid #fff;
transform: rotate(45deg);
margin-left: 8px;
}
.ad-banner .ad-banner-button {
min-width: 126px;
padding: 13px 2px;
}
/* Tablet */ @media (max-width: 1024px) {
.ad-banner .ad-banner-button {
min-width: 113px;
padding: 13px 2px;
}
.ad-banner .ad-banner-button {
position: absolute;
z-index: 2;
left: 23%;
top: 72%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 8px 18px;
border: 0;
border-radius: 999px;
background: #f15a24;
color: #ffffff;
font-family: "Roboto Flex", Roboto, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
}
/* Mobile */ @media (max-width: 767px) {
.ad-banner .ad-banner-button {
padding: 6px 12px;
}
}
/* Arrow */ .ad-banner .ad-banner-button::after {
content: "";
width: 7px;
height: 7px;
border-top: 1.5px solid #fff;
border-right: 1.5px solid #fff;
transform: rotate(45deg);
margin-left: 8px;
transition: transform 0.2s ease;
}
/* Move arrow slightly right on hover */ .ad-banner .ad-banner-button:hover::after {
transform: translateX(4px) rotate(45deg);
}
@media (max-width: 767px) {
.ad-banner .ad-banner-button {
min-width: 100px;
padding: 6px 12px;
font-size: 10px;
}
.ad-banner .ad-banner-button::after {
width: 6px;
height: 6px;
margin-left: 6px;
}
}
/* Ad Banner CSS End here*/ /* ===== IBL hero: title + description (CSS only) ===== */ /* 1. Content container: the grid child (overlaid on the image) that holds the text */ .z-stacked:has(.hero-title) {
align-items: end !important;
justify-items: start !important;
/* overrides .justify-items-center */
}
.z-stacked:has(.hero-title) > div:has(.hero-title) {
align-self: end;
justify-self: stretch;
z-index: 5;
width: 100% !important;
box-sizing: border-box;
margin: 0 !important;
/* kills inline margin-bottom:200px */ padding: 0 24px clamp(48px, 7vw, 120px) clamp(20px, 7.4vw, 140px) !important;
padding-bottom: clamp(55px, 7.7vw, 143px) !important;
/* bigger value = higher */ display: flex;
flex-direction: column;
align-items: flex-start !important;
/* overrides .items-end */ text-align: left;
}
.z-stacked:has(.hero-title) > div:has(.hero-title) > * {
align-self: flex-start;
}
/* inner flex-col wrapper holding title link + description */ .z-stacked > div:has(.hero-title) > div:has(> a > .hero-title) {
display: flex;
flex-direction: column;
align-items: flex-start !important;
gap: 0;
width: 100% !important;
max-width: 100%;
}
/* link that wraps the title (.w-max / .justify-center / .text-center) */ a.article-link:has(> .hero-title) {
display: block !important;
width: auto !important;
max-width: 100%;
height: auto !important;
/* .btn-site locks it to 48px -> title overlapped desc */ min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
justify-content: flex-start !important;
text-align: left !important;
text-decoration: none;
}
/* 2. Title */ .hero-title {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
overflow: hidden !important;
/* display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: initial !important;
overflow: visible !important;
*/ width: auto !important;
height: auto !important;
max-height: none !important;
max-width: max(60vw, 640px);
margin: 0;
padding: 0;
/* font: var(--dp_4_bold);
*/ color: hsl(var(--text_invert_high));
text-transform: uppercase;
text-align: left;
line-height: 1.05 !important;
/* letter-spacing: 0.01em;
*/ white-space: normal;
overflow-wrap: break-word;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
/* 3. Description */ .hero-desc {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
width: auto !important;
height: auto !important;
max-width: min(36vw, 620px);
margin: clamp(8px, 0.8vw, 14px) 0 clamp(16px, 1.8vw, 28px) !important;
padding: 0;
font: var(--body_lg_regular);
color: hsl(var(--text_invert_medium));
text-align: left;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
/* ===== Tablet ===== */ @media (min-width: 768px) and (max-width: 1023px) {
.z-stacked:has(.hero-title) > div:has(.hero-title) {
padding: 0 20px clamp(32px, 11vw, 64px) clamp(20px, 6vw, 60px) !important;
}
.hero-title {
max-width: 48vw;
font-size: clamp(26px, 4.6vw, 44px) !important;
}
.hero-desc {
max-width: 52vw;
font-size: 14px !important;
}
}
/* ===== Mobile ===== */ @media (max-width: 767px) {
.z-stacked:has(.hero-title) > div:has(.hero-title) {
padding: 0 16px 20px 16px !important;
}
.hero-title {
max-width: calc(100vw - 32px);
font-size: clamp(22px, 6.8vw, 32px) !important;
line-height: 1.08 !important;
margin-bottom: 12px !important;
}
.hero-desc {
display: none !important;
}
}
/* ===== IBL hero: carousel arrows (CSS only) ===== */ /* arrow group: move from mid-right to bottom-right */ .carousel-listing-variant-1 .swiper-button-container {
top: auto !important;
bottom: clamp(0%, 35%, 35%) !important;
/* overrides inline bottom:350px */ right: clamp(16px, 7.4vw, 140px) !important;
/* mirrors the title's left offset */ left: auto !important;
gap: 8px !important;
z-index: 20;
}
/* the round outline buttons */ .carousel-listing-variant-1 .custom-button-left button, .carousel-listing-variant-1 .custom-button-right button {
width: 40px !important;
height: 40px !important;
min-width: 0 !important;
padding: 0 !important;
border: 1.5px solid #ffffff !important;
border-radius: 50% !important;
background: rgba(0, 0, 0, 0.35) !important;
/* overrides inline orange */ color: #ffffff !important;
box-shadow: none !important;
transition: background-color 0.2s ease, color 0.2s ease;
}
.carousel-listing-variant-1 .custom-button-left button:hover, .carousel-listing-variant-1 .custom-button-right button:hover {
background: #ffffff !important;
color: #1a1a1a !important;
}
/* chevron glyph */ .carousel-listing-variant-1 .custom-button-left .wac-icon, .carousel-listing-variant-1 .custom-button-right .wac-icon {
font-size: 14px !important;
width: 14px !important;
height: 14px !important;
line-height: 1 !important;
color: inherit !important;
display: flex;
align-items: center;
justify-content: center;
}
/* right arrow stays mirrored by the existing .custom-button-right {
scale:-1
}
*/ /* ===== Tablet ===== */ @media (min-width: 768px) and (max-width: 1023px) {
.carousel-listing-variant-1 .custom-button-left button, .carousel-listing-variant-1 .custom-button-right button {
width: 36px !important;
height: 36px !important;
}
}
/* ===== Mobile: hide arrows ===== */ @media (max-width: 767px) {
.carousel-listing-variant-1 .swiper-button-container {
display: none !important;
}
}
@media (max-width: 767px) {
.playnow-mob-button {
position: relative;
top: clamp(-64px, -16vw, -48px);
left: clamp(12px, 6.9vw, 26px);
width: 145px !important;
height: 46px !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0;
border: none;
border-radius: 30px;
background: #e63800;
color: #fff;
text-transform: uppercase;
font-size: 14px !important;
font-weight: 600;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
box-sizing: border-box;
white-space: nowrap;
}
/* Arrow */ .playnow-mob-button::after {
content: "";
width: 9px;
height: 9px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
flex-shrink: 0;
}
}
/* showcase card swiper */ .thumbnail-swiper {
width: 93%;
margin-left: auto;
position: relative !important;
bottom: 8rem;
}
.thumbnail-swiper .swiper-slide {
width: 276px !important;
}
.thumbnail-swiper .swiper-slide-thumb-active .showcase-thumbnail-title {
color: hsl(var(--text_invert_high)) !important;
}
@media (max-width: 767px) {
.thumbnail-swiper {
bottom: 0.5rem;
}
}
/* showcase card swiper */ /* showcase card border animtion and active start */ @keyframes loader-right {
0%, 25% {
height: 0;
}
50% {
height: 100%;
}
100% {
height: 100%;
}
}
@keyframes loader-bottom {
0%, 50% {
width: 0;
}
75% {
width: 100%;
}
100% {
width: 100%;
}
}
@keyframes loader-left {
0%, 75% {
height: 0;
}
100% {
height: 100%;
}
}
@keyframes loader-top {
0% {
width: 0;
}
25% {
width: 100%;
}
100% {
width: 100%;
}
}
.showcase_card {
p {
color :#9d9d9d;
}
}
.swiper-slide-thumb-active {
position: relative !important;
border: 0 !important;
background: transparent !important;
&::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 0;
height: 3px !important;
border-radius: 12px 12px 0px 0px;
background: #DB3700 !important;
z-index: 20 !important;
animation: loader-top 5s linear infinite !important;
}
&::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
width: 3px !important;
height: 0;
background: #DB3700 !important;
border-radius: 0px 12px 12px 0px;
z-index: 20 !important;
animation: loader-right 5s linear infinite !important;
}
.showcase_card {
position: relative !important;
&::before {
content: "" !important;
position: absolute !important;
bottom: 0 !important;
right: 0 !important;
width: 0;
height: 3px !important;
background: #DB3700 !important;
border-radius: 0px 12px 0px 12px;
z-index: 20 !important;
animation: loader-bottom 5s linear infinite !important;
}
&::after {
content: "" !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 3px !important;
height: 0;
background: #DB3700 !important;
border-radius: 12px 0px 0px 12px;
z-index: 20 !important;
animation: loader-left 5s linear infinite !important;
}
}
}
/* showcase card end */ . [data-atom-id="03177893-a792-5ce7-b403-a28e4065ac11"] {
border-radius: 999px !important;
overflow: visible !important;
}
a[data-atom-id="03177893-a792-5ce7-b403-a28e4065ac11"]::after {
content: "" !important;
display: inline-block !important;
width: 0.5em;
height: 0.5em;
margin-left: 0.4em;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
}
/* footer youtube icon */ .icon_ibl_youtube:before {
margin-left: 0px;
}
/* footer youtube icon end */ body .sponsors-title {
font-size: 3rem !important;
font-weight: 500;
}
@media (max-width: 767px) {
.mob-date {
font-size:12px;
color:#E9E9E9;
}
.read-min {
font-size:12px;
color:#E9E9E9;
}
}
/*footer section changes*/ .ibl-signup-form__title {
font-size:20px !important;
font-weight: 400;
color: #D9D9D9;
}
.ibl-signup-form__description {
font-size:12px;
color:#D9D9D9
}
@media (max-width: 767px) {
.ibl-signup-form__title {
font-size:18px !important;
}
}
ibl-signup-form__consent-text {
color:#D9D9D9;
}
.ibl-sponsors .sponsors-title {
font-variation-settings: "opsz" 50, "GRAD" 0, "wdth" 25 !important;
letter-spacing: 0px !important;
font-weight: 500 !important;
}
/* View More / Read More button: right chevron */ .view-more-btn-main {
display: inline-flex !important;
align-items: center;
gap: 14px;
}
.view-more-btn-main::after {
content: "";
width: 9px;
height: 9px;
flex-shrink: 0;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: rotate(45deg);
margin-right: 4px;
transition: transform 0.2s ease;
}
.view-more-btn-main:hover::after {
transform: translateX(3px) rotate(45deg);
}
/* Hero carousel: soft shadow behind title + description (Figma "Rectangle 34646498": black, 80% opacity, layer blur 50) */ .z-stacked > div:has(.hero-title) > div:has(> a > .hero-title) {
position: relative;
isolation: isolate;
}
.z-stacked > div:has(.hero-title) > div:has(> a > .hero-title)::before {
content: "";
position: absolute;
top: -43px;
bottom: -74px;
left: -39px;
width: calc(max(60vw, 640px) + 134px);
z-index: -1;
pointer-events: none;
background: #000000;
opacity: 0.8;
border-radius: 0;
filter: blur(50px);
}
@media (min-width: 768px) and (max-width: 1023px) {
.z-stacked > div:has(.hero-title) > div:has(> a > .hero-title)::before {
width: calc(52vw + 134px);
}
}
@media (max-width: 767px) {
.z-stacked > div:has(.hero-title) > div:has(> a > .hero-title)::before {
top: -24px;
bottom: -62px;
left: -24px;
width: calc(100% + 48px);
}
}
/* Hero carousel arrows: white background, black arrow */ .carousel-listing-variant-1 .custom-button-left button, .carousel-listing-variant-1 .custom-button-right button {
background: #ffffff !important;
color: #1a1a1a !important;
border: 1.5px solid #ffffff !important;
}
.carousel-listing-variant-1 .custom-button-left .wac-icon, .carousel-listing-variant-1 .custom-button-right .wac-icon {
color: #1a1a1a !important;
}
/* hover: invert to black background, white arrow */ .carousel-listing-variant-1 .custom-button-left button:hover, .carousel-listing-variant-1 .custom-button-right button:hover {
background: #1a1a1a !important;
color: #ffffff !important;
border-color: #1a1a1a !important;
}
.carousel-listing-variant-1 .custom-button-left button:hover .wac-icon, .carousel-listing-variant-1 .custom-button-right button:hover .wac-icon {
color: #ffffff !important;
}
/* Hero carousel: View More button on mobile */ @media (max-width: 767px) {
.z-stacked:has(.hero-title) a[aria-label="View More"], .z-stacked:has(.hero-title) .view-more-btn-main {
height: 38px !important;
min-height: 0 !important;
max-height: 38px !important;
padding: 0 16px !important;
gap: 10px !important;
border-radius: 999px !important;
font: 600 12px/1 "Roboto", "Roboto Flex", sans-serif !important;
letter-spacing: 0.02em !important;
text-transform: uppercase;
white-space: nowrap;
}
/* smaller chevron to match */ .z-stacked:has(.hero-title) a[aria-label="View More"]::after, .z-stacked:has(.hero-title) .view-more-btn-main::after {
width: 6px !important;
height: 6px !important;
margin-right: 2px !important;
}
}
/* Hero carousel: View More button on desktop */ @media (min-width: 768px) {
.z-stacked:has(.hero-title) a[aria-label="View More"], .z-stacked:has(.hero-title) .view-more-btn-main {
border: 0 !important;
border-radius: 999px !important;
height: 44px !important;
min-height: 0 !important;
padding: 0 22px !important;
gap: 14px !important;
font: 600 14px/1 "Roboto", "Roboto Flex", sans-serif !important;
letter-spacing: 0.02em !important;
text-transform: uppercase;
white-space: nowrap;
overflow: visible !important;
}
}
/* Hero carousel thumbnail cards: image covers full card height (mobile) */ @media (max-width: 767px) {
.thumbnail-swiper .showcase_card {
align-items: stretch !important;
min-height: 80px;
/* keeps the card from getting too flat */
}
/* image column */ .thumbnail-swiper .showcase_card > div:first-child {
flex: 0 0 88px;
/* image width on mobile */ width: 88px !important;
align-self: stretch;
display: flex;
}
.thumbnail-swiper .showcase_card > div:first-child > div, .thumbnail-swiper .showcase_card > div:first-child [class*="aspect-"], .thumbnail-swiper .showcase_card > div:first-child picture {
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
}
.thumbnail-swiper .showcase_card > div:first-child picture {
display: block;
}
.thumbnail-swiper .showcase_card > div:first-child img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top;
display: block;
}
/* text column */ .thumbnail-swiper .showcase_card > div:last-child {
flex: 1 1 0;
min-width: 0;
justify-content: center;
padding: 10px 12px !important;
}
.thumbnail-swiper .showcase_card p {
font-size: 13px !important;
line-height: 18px !important;
}
}
/* Hero carousel thumbnail cards: image covers full card height (desktop) */ @media (min-width: 768px) {
.thumbnail-swiper .showcase_card {
align-items: stretch !important;
/* was items-start */
}
/* image column */ .thumbnail-swiper .showcase_card > div:first-child {
flex: 0 0 38%;
/* image width inside the card */ width: 38% !important;
align-self: stretch;
display: flex;
}
/* every wrapper down to the ![]()
fills that height */ .thumbnail-swiper .showcase_card > div:first-child > div, .thumbnail-swiper .showcase_card > div:first-child [class*="aspect-"], .thumbnail-swiper .showcase_card > div:first-child picture {
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
/* drop the forced 1:1 square */
}
.thumbnail-swiper .showcase_card > div:first-child picture {
display: block;
}
.thumbnail-swiper .showcase_card > div:first-child img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
/* fill, crop instead of letterbox */ object-position: center top;
display: block;
}
/* text column takes the remaining width, vertically centered */ .thumbnail-swiper .showcase_card > div:last-child {
flex: 1 1 0;
min-width: 0;
justify-content: center;
}
}
/* Latest News cards: black tint + image zoom on hover (same as the Videos cards) */ section:has(.news-letter-heading) article [class*="aspect-"] {
position: relative;
overflow: hidden;
}
section:has(.news-letter-heading) article [class*="aspect-"] img {
transform: scale(1);
transition: transform 0.5s linear;
}
section:has(.news-letter-heading) article [class*="aspect-"]::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-color: #000;
opacity: 0;
transition: opacity 0.5s linear;
pointer-events: none;
}
section:has(.news-letter-heading) article:hover [class*="aspect-"] img, section:has(.news-letter-heading) article:focus-within [class*="aspect-"] img {
transform: scale(1.06);
}
section:has(.news-letter-heading) article:hover [class*="aspect-"]::before, section:has(.news-letter-heading) article:focus-within [class*="aspect-"]::before {
opacity: 0.34;
}
/* Meet The IBL Teams — phone view (Figma node 19028:35112). Phone-only behaviour, diverging from the desktop `meet-the-team` block: 1. prev/next chevrons are visible and drive the rail 2. cards sit on a swipeable carousel rail instead of one static row 3. the team crest / colour wash is driven by tap, never hover State mechanism — why focus and not `:target`: `primitiveButton` always renders a Next ``, and Next navigates hash hrefs with `history.pushState`, which never updates `:target`. The click does focus the link that was tapped. Prev/next live outside the cards, so `.team-card-phone:focus-within` never sees them — the palette, the rail shift and the chevron pair all key off `a[href="#mttp-"]:focus` as well. Inactive chevrons stay at opacity 0 in the same two circles: `display` or `visibility` on the focused link blurs it, and the colour, crest and rail shift collapse on the same click. Chennai #FF1124 | Mumbai #F35621 | Delhi #690EBA Bengaluru #34A905 | Kolkata #F6D205 | Ahmedabad #184594 */ .meet-the-team-phone {
--mtt-bg-phone: #f5f5f5;
--mtt-ink-phone: #1a1a1a;
--mtt-name-phone: #333333;
--mtt-card-phone: #ffffff;
--mtt-card-border-phone: #e9e9e9;
--mtt-radius-phone: 8px;
--mtt-gap-phone: 8px;
--mtt-card-w-phone: min(182px, 53vw);
--mtt-step-phone: calc(var(--mtt-card-w-phone) + var(--mtt-gap-phone));
--mtt-shift-phone: 0px;
--mtt-rail-pad-phone: calc((100% - var(--mtt-card-w-phone)) / 2);
--mtt-fg-phone: var(--mtt-ink-phone);
--team-color-phone: var(--mtt-bg-phone);
--team-bg-image-phone: none;
position: relative;
overflow: hidden;
background-color: var(--team-color-phone);
padding-block: 40px 24px;
transition: background-color 0.3s ease;
}
/* Team crest wash — only painted once a card is tapped. */ .meet-the-team-phone::before {
content: "";
position: absolute;
top: 8px;
right: -6%;
z-index: 0;
width: min(62vw, 235px);
height: 240px;
background-image: var(--team-bg-image-phone);
background-repeat: no-repeat;
background-position: top right;
background-size: contain;
opacity: 0.5;
pointer-events: none;
transition: opacity 0.3s ease;
}
/* ── Active team palette ──────────────────────────────────────────────── */ .meet-the-team-phone:has(a[href="#mttp-chennai"]:focus), .meet-the-team-phone:has(.team-chennai-phone:focus-within) {
--team-color-phone: #ff1124;
--team-bg-image-phone: url("/static-assets/images/teams/c43266aefd98ebab92a142a5b57f24e27404f12d.png");
--mtt-fg-phone: #ffffff;
}
.meet-the-team-phone:has(a[href="#mttp-mumbai"]:focus), .meet-the-team-phone:has(.team-mumbai-phone:focus-within) {
--team-color-phone: #f35621;
--team-bg-image-phone: url("/static-assets/images/teams/cf3500e67ce1a51f41de6d03bc749b29a291e2f8.png");
--mtt-fg-phone: #ffffff;
}
.meet-the-team-phone:has(a[href="#mttp-delhi"]:focus), .meet-the-team-phone:has(.team-delhi-phone:focus-within) {
--team-color-phone: #690eba;
--team-bg-image-phone: url("/static-assets/images/teams/156806e04136d88fbe3d750ee9154fab60d41c07.png");
--mtt-fg-phone: #ffffff;
}
.meet-the-team-phone:has(a[href="#mttp-bengaluru"]:focus), .meet-the-team-phone:has(.team-bengaluru-phone:focus-within) {
--team-color-phone: #34a905;
--team-bg-image-phone: url("/static-assets/images/teams/08925b32419b256d4a53c7f1faf2726e869aa4b3.png");
--mtt-fg-phone: #ffffff;
}
.meet-the-team-phone:has(a[href="#mttp-kolkata"]:focus), .meet-the-team-phone:has(.team-kolkata-phone:focus-within) {
--team-color-phone: #f6d205;
--team-bg-image-phone: url("/static-assets/images/teams/02545a65889d4f63ba70b12480bc73ca1ec8ca07.png");
--mtt-fg-phone: #ffffff;
}
.meet-the-team-phone:has(a[href="#mttp-ahmedabad"]:focus), .meet-the-team-phone:has(.team-ahmedabad-phone:focus-within) {
--team-color-phone: #184594;
--team-bg-image-phone: url("/static-assets/images/teams/16b7dd00fa89765e475f106128c55907e644b7eb.png");
--mtt-fg-phone: #ffffff;
}
/* ── Watermark ────────────────────────────────────────────────────────── */ /* Figma node 19028:35112, text "teams": Agenda One Compressed Bold 251px, line-height 167px (66.67%), tracking 0.29px, hugging its own width across the 375px frame. `font-stretch: normal` matches the desktop plugin's phone rule so a condensed axis can't narrow it. */ .meet-the-team-phone .watermark-phone {
position: absolute;
top: 2px;
left: 0;
z-index: 0;
margin: 0;
width: auto;
max-width: none;
overflow: visible;
white-space: nowrap;
text-align: left;
text-transform: uppercase;
pointer-events: none;
user-select: none;
font-family: "Agenda One Compressed", "Roboto Flex", Impact, sans-serif;
font-weight: 600;
font-stretch: normal;
font-size: 251px;
line-height: 167px;
letter-spacing: 0.29px;
color: #000000;
background: linear-gradient( 180deg, rgb(0 0 0 / 0.09) 0%, rgb(0 0 0 / 0) 100% );
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
transition: opacity 0.3s ease;
}
.meet-the-team-phone:has(.team-card-phone:focus-within) .watermark-phone, .meet-the-team-phone:has(a[href^="#mttp-"]:focus) .watermark-phone {
opacity: 0;
}
/* ── Header ───────────────────────────────────────────────────────────── */ .meet-the-team-phone .section-header-phone {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
}
/* Figma "Meet The IBL Teams": Roboto Flex 550, 80/70, tracking 0, uppercase, fixed 326px wide on the 375px frame (two lines). The desktop plugin's phone breakpoint never overrides this title, so its clamp falls to 48px there — that is not the frame. Width stays 326px and only yields on a narrower column. */ .meet-the-team-phone .meet-the-team-title-phone {
align-self: flex-start;
margin: 0;
width: 326px;
max-width: 100%;
color: var(--mtt-fg-phone);
font-family: "Roboto Flex", Roboto, sans-serif;
font-weight: 550;
font-stretch: normal;
font-size: 80px;
line-height: 70px;
letter-spacing: 0;
text-transform: uppercase;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
transition: color 0.3s ease;
}
/* Every tappable overlay is a `Button`, which ships `w-max` (width: max-content) around zero-sized text — that collapses the hit area to nothing, so the width and height have to be reclaimed explicitly here. */ .meet-the-team-phone .view-more-hit-phone, .meet-the-team-phone .card-activate-phone, .meet-the-team-phone .card-open-phone, .meet-the-team-phone .carousel-hit-phone {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
font-size: 0;
line-height: 0;
color: transparent;
}
/* Icon-only pill on phone — the hit link keeps `view more` as its accessible name while the glyph is painted by the IBL icon font. */ .meet-the-team-phone .view-more-phone {
position: relative;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--mtt-fg-phone);
border-radius: 999px;
background: transparent;
overflow: hidden;
transition: border-color 0.3s ease;
}
.meet-the-team-phone .view-more-hit-phone {
z-index: 2;
}
.meet-the-team-phone .view-more-icon-phone {
position: relative;
z-index: 1;
display: block;
margin: 0;
font-size: 13px;
line-height: 1;
color: var(--mtt-fg-phone);
pointer-events: none;
transition: color 0.3s ease;
}
/* ── Carousel rail ────────────────────────────────────────────────────── */ /* A real scroll container, so the rail answers to a finger swipe. The chevrons do not scroll it: their link is focused, and Next never calls `scrollIntoView()` when the card id is absent. The shift below moves the rail from that focused href. It stays off when the card itself is focused, because that path already scrolls. */ .meet-the-team-phone .logo-row-phone {
position: relative;
z-index: 1;
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
gap: var(--mtt-gap-phone);
margin-top: 40px;
padding-block: 8px 24px;
padding-inline: 0 var(--mtt-rail-pad-phone);
overflow-x: auto;
overflow-y: hidden;
/* Narrows the scrollport `scrollIntoView()` aims at down to exactly one card width, so its "scroll the minimum" behaviour lands the card centred rather than just barely on screen. */ scroll-padding-inline: var(--mtt-rail-pad-phone);
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.meet-the-team-phone .logo-row-phone::-webkit-scrollbar {
display: none;
}
.meet-the-team-phone:has(a[href^="#mttp-"]:focus):not( :has(.team-card-phone:focus) ) .logo-row-phone {
padding-inline: var(--mtt-rail-pad-phone);
}
.meet-the-team-phone:has(a[href="#mttp-chennai"]:focus):not( :has(.team-chennai-phone:focus) ) {
--mtt-shift-phone: 0px;
}
.meet-the-team-phone:has(a[href="#mttp-mumbai"]:focus):not( :has(.team-mumbai-phone:focus) ) {
--mtt-shift-phone: calc(-1 * var(--mtt-step-phone));
}
.meet-the-team-phone:has(a[href="#mttp-delhi"]:focus):not( :has(.team-delhi-phone:focus) ) {
--mtt-shift-phone: calc(-2 * var(--mtt-step-phone));
}
.meet-the-team-phone:has(a[href="#mttp-bengaluru"]:focus):not( :has(.team-bengaluru-phone:focus) ) {
--mtt-shift-phone: calc(-3 * var(--mtt-step-phone));
}
.meet-the-team-phone:has(a[href="#mttp-kolkata"]:focus):not( :has(.team-kolkata-phone:focus) ) {
--mtt-shift-phone: calc(-4 * var(--mtt-step-phone));
}
.meet-the-team-phone:has(a[href="#mttp-ahmedabad"]:focus):not( :has(.team-ahmedabad-phone:focus) ) {
--mtt-shift-phone: calc(-5 * var(--mtt-step-phone));
}
.meet-the-team-phone .team-card-phone {
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
flex: 0 0 var(--mtt-card-w-phone);
width: var(--mtt-card-w-phone);
height: 230px;
padding: 24px 10px;
border: 1px solid var(--mtt-card-border-phone);
border-radius: var(--mtt-radius-phone);
background-color: var(--mtt-card-phone);
overflow: hidden;
scroll-snap-align: center;
/* `scrollIntoView()` also aligns the page vertically;
the offset keeps the section title above the fold instead of scrolling it off the top. */ scroll-margin-top: 220px;
transform: translateY(0);
transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.meet-the-team-phone .team-card-phone:first-child {
margin-left: var(--mtt-shift-phone);
transition: margin-left 0.38s ease, transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
/* The tap target is the overlay link, and the active state is already a strong visual cue, so the programmatic focus ring would only be noise. */ .meet-the-team-phone .team-card-phone:focus {
outline: none;
}
.meet-the-team-phone .team-card-phone .team-logo-phone, .meet-the-team-phone .team-card-phone picture, .meet-the-team-phone .team-card-phone figure, .meet-the-team-phone .team-card-phone img {
position: relative;
z-index: 1;
width: 124px;
height: 124px;
max-width: 124px;
max-height: 124px;
object-fit: contain;
pointer-events: none;
}
.meet-the-team-phone .team-card-phone .anchor-phone {
position: relative;
z-index: 1;
margin: 0;
max-width: 9ch;
color: var(--mtt-name-phone);
font-family: "Roboto Flex", Roboto, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 22px;
text-align: center;
text-transform: uppercase;
}
/* First tap activates the card, second tap (on the revealed overlay) opens it. */ .meet-the-team-phone .team-card-phone .card-activate-phone {
z-index: 2;
}
.meet-the-team-phone .team-card-phone .card-open-phone {
z-index: 1;
pointer-events: none;
}
/* ── Active card ──────────────────────────────────────────────────────── */ /* Once any card is active the unselected ones drop back and go translucent. */ .meet-the-team-phone:has(.team-card-phone:focus-within) .team-card-phone, .meet-the-team-phone:has(a[href^="#mttp-"]:focus) .team-card-phone {
transform: translateY(8%);
border-color: transparent;
background-color: rgb(255 255 255 / 0.82);
}
/* Scoped through the same `:has()` as the rule above purely so it outweighs it. */ .meet-the-team-phone:has(.team-card-phone:focus-within) .team-card-phone:focus-within, .meet-the-team-phone:has(a[href="#mttp-chennai"]:focus) .team-chennai-phone, .meet-the-team-phone:has(a[href="#mttp-mumbai"]:focus) .team-mumbai-phone, .meet-the-team-phone:has(a[href="#mttp-delhi"]:focus) .team-delhi-phone, .meet-the-team-phone:has(a[href="#mttp-bengaluru"]:focus) .team-bengaluru-phone, .meet-the-team-phone:has(a[href="#mttp-kolkata"]:focus) .team-kolkata-phone, .meet-the-team-phone:has(a[href="#mttp-ahmedabad"]:focus) .team-ahmedabad-phone {
transform: translateY(0);
border-color: var(--mtt-card-border-phone);
background-color: var(--mtt-card-phone);
}
.meet-the-team-phone .team-card-phone:focus-within .card-open-phone, .meet-the-team-phone:has(a[href="#mttp-chennai"]:focus) .team-chennai-phone .card-open-phone, .meet-the-team-phone:has(a[href="#mttp-mumbai"]:focus) .team-mumbai-phone .card-open-phone, .meet-the-team-phone:has(a[href="#mttp-delhi"]:focus) .team-delhi-phone .card-open-phone, .meet-the-team-phone:has(a[href="#mttp-bengaluru"]:focus) .team-bengaluru-phone .card-open-phone, .meet-the-team-phone:has(a[href="#mttp-kolkata"]:focus) .team-kolkata-phone .card-open-phone, .meet-the-team-phone:has(a[href="#mttp-ahmedabad"]:focus) .team-ahmedabad-phone .card-open-phone {
z-index: 3;
pointer-events: auto;
}
/* ── Prev / next ──────────────────────────────────────────────────────── */ /* All six pairs occupy the same two circles. Inactive pairs stay in the tree at opacity 0: `display` / `visibility` on the focused link blurs it, and the colour, crest and rail shift all collapse on the same click. */ .meet-the-team-phone .carousel-nav-phone {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 32px 32px;
grid-template-rows: 32px;
justify-content: end;
column-gap: 8px;
margin-top: 28px;
min-height: 32px;
}
.meet-the-team-phone .carousel-prev-phone {
grid-column: 1;
grid-row: 1;
}
.meet-the-team-phone .carousel-next-phone {
grid-column: 2;
grid-row: 1;
}
/* The Box atom adds `w-full` (width: 100%) to every group, which stretches these 32px circles across the row and, with `overflow: hidden` on the section, slides the glyphs off the phone. Size is forced back here. */ .meet-the-team-phone .carousel-btn-phone {
position: relative;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
max-width: 32px;
min-width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 999px;
background: #ffffff;
color: #101010;
box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
overflow: visible;
opacity: 0;
pointer-events: none;
}
.meet-the-team-phone .mtt-prev-idle-phone, .meet-the-team-phone .mtt-next-idle-phone, .meet-the-team-phone:has(.team-chennai-phone:focus-within) .mtt-prev-chennai-phone, .meet-the-team-phone:has(.team-chennai-phone:focus-within) .mtt-next-chennai-phone, .meet-the-team-phone:has(.team-mumbai-phone:focus-within) .mtt-prev-mumbai-phone, .meet-the-team-phone:has(.team-mumbai-phone:focus-within) .mtt-next-mumbai-phone, .meet-the-team-phone:has(.team-delhi-phone:focus-within) .mtt-prev-delhi-phone, .meet-the-team-phone:has(.team-delhi-phone:focus-within) .mtt-next-delhi-phone, .meet-the-team-phone:has(.team-bengaluru-phone:focus-within) .mtt-prev-bengaluru-phone, .meet-the-team-phone:has(.team-bengaluru-phone:focus-within) .mtt-next-bengaluru-phone, .meet-the-team-phone:has(.team-kolkata-phone:focus-within) .mtt-prev-kolkata-phone, .meet-the-team-phone:has(.team-kolkata-phone:focus-within) .mtt-next-kolkata-phone, .meet-the-team-phone:has(.team-ahmedabad-phone:focus-within) .mtt-prev-ahmedabad-phone, .meet-the-team-phone:has(.team-ahmedabad-phone:focus-within) .mtt-next-ahmedabad-phone, .meet-the-team-phone:has(a[href="#mttp-chennai"]:focus) .mtt-prev-chennai-phone, .meet-the-team-phone:has(a[href="#mttp-chennai"]:focus) .mtt-next-chennai-phone, .meet-the-team-phone:has(a[href="#mttp-mumbai"]:focus) .mtt-prev-mumbai-phone, .meet-the-team-phone:has(a[href="#mttp-mumbai"]:focus) .mtt-next-mumbai-phone, .meet-the-team-phone:has(a[href="#mttp-delhi"]:focus) .mtt-prev-delhi-phone, .meet-the-team-phone:has(a[href="#mttp-delhi"]:focus) .mtt-next-delhi-phone, .meet-the-team-phone:has(a[href="#mttp-bengaluru"]:focus) .mtt-prev-bengaluru-phone, .meet-the-team-phone:has(a[href="#mttp-bengaluru"]:focus) .mtt-next-bengaluru-phone, .meet-the-team-phone:has(a[href="#mttp-kolkata"]:focus) .mtt-prev-kolkata-phone, .meet-the-team-phone:has(a[href="#mttp-kolkata"]:focus) .mtt-next-kolkata-phone, .meet-the-team-phone:has(a[href="#mttp-ahmedabad"]:focus) .mtt-prev-ahmedabad-phone, .meet-the-team-phone:has(a[href="#mttp-ahmedabad"]:focus) .mtt-next-ahmedabad-phone {
z-index: 1;
opacity: 1;
pointer-events: auto;
}
.meet-the-team-phone:has(.team-card-phone:focus-within) .mtt-prev-idle-phone, .meet-the-team-phone:has(.team-card-phone:focus-within) .mtt-next-idle-phone, .meet-the-team-phone:has(a[href^="#mttp-"]:focus) .mtt-prev-idle-phone, .meet-the-team-phone:has(a[href^="#mttp-"]:focus) .mtt-next-idle-phone {
z-index: 0;
opacity: 0;
pointer-events: none;
}
.meet-the-team-phone .carousel-btn-phone.is-disabled-phone {
pointer-events: none;
}
.meet-the-team-phone:has(.team-chennai-phone:focus-within) .mtt-prev-chennai-phone.is-disabled-phone, .meet-the-team-phone:has(.team-ahmedabad-phone:focus-within) .mtt-next-ahmedabad-phone.is-disabled-phone, .meet-the-team-phone:has(a[href="#mttp-chennai"]:focus) .mtt-prev-chennai-phone.is-disabled-phone, .meet-the-team-phone:has(a[href="#mttp-ahmedabad"]:focus) .mtt-next-ahmedabad-phone.is-disabled-phone, .meet-the-team-phone:not(:has(.team-card-phone:focus-within)):not( :has(a[href^="#mttp-"]:focus) ) .mtt-prev-idle-phone {
opacity: 0.45;
pointer-events: none;
}
.meet-the-team-phone .carousel-hit-phone {
z-index: 2;
background: transparent;
outline: none;
}
/* Glyph sits above the hit link. The link still receives the tap because the icon has pointer-events: none. */ .meet-the-team-phone .carousel-icon-phone {
position: relative;
z-index: 2;
display: block;
margin: 0;
font-size: 16px;
line-height: 1;
color: #101010;
pointer-events: none;
}
/* ── Narrow phones ────────────────────────────────────────────────────── */ @media (max-width: 360px) {
.meet-the-team-phone .team-card-phone {
height: 208px;
padding: 20px 8px;
}
.meet-the-team-phone .team-card-phone .team-logo-phone, .meet-the-team-phone .team-card-phone picture, .meet-the-team-phone .team-card-phone figure, .meet-the-team-phone .team-card-phone img {
width: 104px;
height: 104px;
max-width: 104px;
max-height: 104px;
}
.meet-the-team-phone .team-card-phone .anchor-phone {
font-size: 16px;
line-height: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.meet-the-team-phone .logo-row-phone {
scroll-behavior: auto;
}
.meet-the-team-phone .team-card-phone, .meet-the-team-phone .watermark-phone, .meet-the-team-phone::before {
transition: none;
}
}
/* 3. Ad banner */ .ad-banner .ad-banner-button {
transition: gap 0.4s ease;
}
.ad-banner .ad-banner-button:hover {
gap: 16px;
}
.ad-banner .ad-banner-button:hover::after {
transform: rotate(45deg);
/* no extra nudge */
}
/* 4. Videos */ a[data-atom-id="0cb4adfe-b404-4dbe-addb-5d8af88bb50d"] {
transition: gap 0.4s ease !important;
}
a[data-atom-id="0cb4adfe-b404-4dbe-addb-5d8af88bb50d"]:hover {
gap: 16px !important;
}
/* 5. Photos */ a[data-atom-id="4d8332fc-f596-41d5-9eb7-03ba91677370"] {
transition: gap 0.4s ease !important;
}
a[data-atom-id="4d8332fc-f596-41d5-9eb7-03ba91677370"]:hover {
gap: 16px !important;
}
/* 6. Latest News */ a[data-atom-id="d230b6b0-989a-415f-a709-2f4585f7cfd0"] {
transition: gap 0.4s ease !important;
}
a[data-atom-id="d230b6b0-989a-415f-a709-2f4585f7cfd0"]:hover {
gap: 16px !important;
}
/* Swiper.js */ .swiper-pagination {
display: none;
}
/* Slick */ .slick-dots {
display: none;
}
/* Embla (custom dots, usually a wrapper class you control) */ .embla__dots {
display: none;
}
/* Meet the IBL Teams View More: same shape + hover as the Photos button (desktop/tablet) */ @media (min-width: 641px) {
.meet-the-team .view-more {
display: inline-flex;
align-items: center;
gap: 8px;
/* = gap-spacing_2 */ padding: 8px 20px;
/* = pt/pb-spacing_2, pl/pr-spacing_5 */ border-radius: 999px;
transition: gap 0.4s ease, color 0.2s ease, border-color 0.3s ease;
}
/* arrow: same icon-font chevron as Photos, in the same 28px box */ .meet-the-team .view-more::after {
content: "\e807";
/* icon_ibl_chevron_right */ font-family: "ibl";
font-style: normal;
font-weight: normal;
line-height: 28px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
transform: none;
margin: 0;
/* removes the 16px margin-right */ color: currentColor;
}
}
/* hover stretch: +8px, same as Photos (large screens only) */ @media (min-width: 1024px) and (hover: hover) {
.meet-the-team .view-more:hover {
gap: 16px;
}
}
.news_card_main_card_heading {
text-transform: uppercase !important;
}
/* small cards */ p[data-atom-id="2b4e1e24-3d98-4491-bdc5-69ff7a1dde3b"] {
text-transform: uppercase !important;
}
/* ===== Latest News: date | read-time divider (both cards) ===== */ /* divider line, drawn before the read time */ .read-min::before, span.side-border-duration::before {
content: "";
display: block;
flex-shrink: 0;
width: 1px;
height: 14px;
margin-right: 24px;
/* space between line and "15 min" */ background-color: currentColor;
opacity: 0.4;
/* light grey line, adapts to dark/light card */
}
/* big card: space between date and line */ [data-molecule-id="9e503702-7d98-4a23-9377-53288d145a74"] {
gap: 24px !important;
}
/* small cards: keep date and time together on the left (was pushed right by ml-auto) */ [data-molecule-id="00a64295-4e06-4bdf-ae3f-f1d22ec4ef7b"] {
width: auto !important;
justify-content: flex-start !important;
gap: 24px !important;
}
[data-molecule-id="00a64295-4e06-4bdf-ae3f-f1d22ec4ef7b"] > div {
margin-left: 0 !important;
/* removes ml-auto */
}
[data-molecule-id="00a64295-4e06-4bdf-ae3f-f1d22ec4ef7b"] .date {
padding-left: 0 !important;
/* removes pl-spacing_2 so date starts at the edge */
}
/* Videos section: fill the play triangle with white */ .home-video-listing .icon_ibl_play::before {
background-color: #ffffff;
clip-path: polygon(25% 9%, 94% 43.5%, 25% 78%);
}
/* Videos section: duration badge inside the card, top-left */ .home-video-listing .home-video-meta-wrap {
top: 12px !important;
left: 12px !important;
right: auto !important;
width: auto !important;
/* was w-full + right:1rem -> pushed 16px outside */ z-index: 2;
}
/* badge style: dark translucent pill, white text */ .home-video-listing .home-video-duration {
padding: 6px 14px !important;
border-radius: 999px !important;
background: rgba(16, 16, 16, 0.75) !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
color: #ffffff !important;
font: 600 14px/20px "Roboto", sans-serif !important;
letter-spacing: 0.01em;
}
.ibl-video-card-title-desktop {
font-variation-settings: "opsz" 50, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712, "slnt" 0, "wdth" 25;
}
/* ===== Latest News: spacing around the date | time divider (web view only) ===== */ @media (min-width: 1024px) {
@media (min-width: 1024px) {
/* ===== BIG card ===== */ [data-molecule-id="9e503702-7d98-4a23-9377-53288d145a74"] {
gap: 9px !important;
/* date → line */
}
.read-min::before {
margin-right: 12px !important;
/* line → time */
}
/* ===== SMALL cards ===== */ [data-molecule-id="00a64295-4e06-4bdf-ae3f-f1d22ec4ef7b"] {
gap: 9px !important;
/* date → line */
}
[data-molecule-id="00a64295-4e06-4bdf-ae3f-f1d22ec4ef7b"] > div {
margin-left: 0 !important;
/* stop ml-auto pushing the time right */
}
span.side-border-duration::before {
margin-right: 3px !important;
/* line → time */
}
}
}
/* Hero carousel: small cards lifted, hero image visible below them (desktop/tablet) */ @media (min-width: 768px) {
.thumbnail-swiper {
--thumb-card-h: 90px;
/* height of the small cards */ --thumb-gap-below: 24px;
/* image space below the cards — change this */ bottom: auto !important;
margin-top: calc(-1 * (var(--thumb-card-h) + var(--thumb-gap-below))) !important;
margin-bottom: 0 !important;
padding-bottom: var(--thumb-gap-below) !important;
}
.thumbnail-swiper > .swiper {
margin-top: 0 !important;
/* removes the hidden 16px from the mt-4 class */
}
}
/* Latest News big card: title wraps, max 2 lines, then "…" */ .custom-content-position-News [data-molecule-id="a6d10b59-e51b-4aa2-b983-97c61adad8da"] {
flex-wrap: wrap;
gap: 4px 12px;
/* space between title and "NEWS" tag */
}
.custom-content-position-News [data-molecule-id="a6d10b59-e51b-4aa2-b983-97c61adad8da"] > div {
width: auto !important;
max-width: 100%;
/* wrapper can't be wider than the card */
}
.custom-content-position-News .news_card_main_card_heading {
width: auto !important;
/* override w-max */ max-width: 100%;
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* max lines — change to 1 / 3 */ white-space: normal;
text-align: left !important;
}
/* Ad banner "View More": text + arrow centred in the button */ .ad-banner .ad-banner-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
/* space between text and arrow */ min-width: 0 !important;
/* remove forced 126px width */ height: 38px !important;
padding: 0 20px !important;
/* equal left / right */ line-height: 1 !important;
}
.ad-banner .ad-banner-button::after {
width: 7px !important;
height: 7px !important;
margin: 0 !important;
/* remove extra 8px margin-left */ transform: translateX(-2px) rotate(45deg) !important;
/* optical centring */
}
/* hover stretch (desktop only) */ @media (min-width: 1024px) and (hover: hover) {
.ad-banner .ad-banner-button:hover {
gap: 16px !important;
}
}
/* mobile: smaller button */ @media (max-width: 767px) {
.ad-banner .ad-banner-button {
height: 28px !important;
padding: 0 12px !important;
gap: 6px !important;
}
.ad-banner .ad-banner-button::after {
width: 6px !important;
height: 6px !important;
}
}
/* ibl form and footer show hide */ .ibl-signup-stack:first-of-type {
padding-inline: var(--container-offset) !important;
}
.ibl-signup-stack .ibl-signup-footer__social {
display: none;
}
.ibl-signup-stack .ibl-signup-footer__powered {
display: none;
}
.ibl-signup-form {
border-radius: 8px !important;
}
/* ---------- Footer: "Powered by" + SI logo ---------- */ [data-frame-name="frame_navigation_6"] .btn-site[aria-label="Powered By"] {
display: flex !important;
align-items: center;
gap: 0.5rem;
color: #fff !important;
font-size: 0.75rem;
font-weight: 400;
line-height: 1;
text-transform: none;
cursor: default;
}
/* SI logo: white, after the text */ [data-frame-name="frame_navigation_6"] .btn-site[aria-label="Powered By"] .icon_powered-logo-1 {
order: 2;
display: flex !important;
align-items: center;
width: auto !important;
height: auto !important;
color: #fff !important;
font-size: 1.25rem !important;
line-height: 1 !important;
}
[data-frame-name="frame_navigation_6"] .btn-site[aria-label="Powered By"] .icon_powered-logo-1::before {
margin: 0;
}
/* empty span after the text */ [data-frame-name="frame_navigation_6"] .btn-site[aria-label="Powered By"] > span:empty {
display: none;
}
/* ibl form and footer show hide end */ /* ---------- Social icons row: white outlined circles ---------- */ [data-frame-name="frame_navigation_5"] {
gap: 0.75rem !important;
}
/* circle */ [data-frame-name="frame_navigation_5"] .ibl-header__icon {
display: flex !important;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
border: 1.5px solid #fff;
border-radius: 50%;
background: transparent;
color: #fff !important;
transition: background-color 0.3s ease;
}
/* icon inside the circle */ [data-frame-name="frame_navigation_5"] .ibl-header__icon .wac-icon {
display: flex !important;
align-items: center;
justify-content: center;
width: 0.875rem !important;
height: 0.875rem !important;
color: #fff !important;
font-size: 0.875rem !important;
line-height: 1 !important;
transition: color 0.3s ease;
}
[data-frame-name="frame_navigation_5"] .ibl-header__icon .wac-icon::before {
margin: 0;
line-height: 1;
}
/* facebook glyph is drawn larger in the font, scale it down */ [data-frame-name="frame_navigation_5"] .icon_ibl_facebook-1 {
font-size: 0.75rem !important;
}
/* order as per design: Instagram, X, Facebook, YouTube */ [data-frame-name="frame_navigation_5"] > :nth-child(3) {
order: 4;
}
[data-frame-name="frame_navigation_5"] > :nth-child(4) {
order: 3;
}
/* hover: filled white circle, dark icon */ [data-frame-name="frame_navigation_5"] .ibl-header__icon:hover {
background-color: #fff;
}
[data-frame-name="frame_navigation_5"] .ibl-header__icon:hover .wac-icon {
color: hsl(var(--core_neu_900)) !important;
}
[data-component-id="3a4085ef-4056-4945-a581-7610a4af5ebb"] {
position: absolute;
bottom: 5%;
left: 0;
width: 100%;
}
[data-component-id="28898798-5cf2-455b-b707-b6ef70097311"] {
height: 90px;
}
[data-component-id="28898798-5cf2-455b-b707-b6ef70097311"] .card-thumb {
min-height: 100% !important;
}
[data-component-id="ed731027-625d-4921-92ae-d0c70c931a2b"] {
width: 30%;
}
[data-component-id="36cac90e-cf81-4ed7-815a-c14c49c88965"] .home-video-icon-border div {
background-color: #10101070;
border-radius: 50%;
padding: 6px;
}
[data-component-id="36cac90e-cf81-4ed7-815a-c14c49c88965"] .home-video-icon-wrap {
pointer-events: none;
}
[data-component-id="3add064b-d6cb-4959-a342-5efdebc0720c"] {
display: flex;
align-items: end;
min-height: 100%;
}
[data-atom-id="6840b60e-d4f8-4865-a567-2385396ed360"] {
display: flex;
align-items: end;
}
[data-component-id="912f75e0-2aa6-4ba1-bc48-84447d1ca0a1"] {
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
}
[data-component-id="0f3a4ffd-75cf-491d-8205-51f3a9efed42"] {
.ibl-footer {
width: 100%;
}
.ibl-footer__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
max-width: 1440px;
margin: 0 auto;
}
.ibl-footer__social {
box-sizing: border-box;
width: 100%;
background: #101010;
border-top: 0.5px solid hsl(var(--border_invert_disable));
padding: var(--spacing_3) var(--container-offset, 98px);
}
.ibl-footer__socials {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.ibl-footer__social-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid hsl(var(--text_invert_high));
border-radius: 50%;
background: transparent;
color: hsl(var(--text_invert_high));
text-decoration: none;
transition: opacity 0.2s ease;
}
.ibl-footer__social-link:hover {
opacity: 0.85;
}
.ibl-footer__social-icon {
font-size: 16px;
line-height: 1;
}
.ibl-footer__sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.ibl-footer__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0;
}
.ibl-footer__legal-sep {
flex-shrink: 0;
align-self: center;
width: 0;
height: 12px;
margin: 0 12px;
border-left: 0.5px solid #333333;
}
.ibl-footer__legal-link {
color: hsl(var(--text_invert_medium));
font: var(--body_xs_regular);
text-decoration: none;
white-space: nowrap;
}
.ibl-footer__legal-link:hover {
color: hsl(var(--text_invert_high));
text-decoration: underline;
}
.ibl-footer__powered {
box-sizing: border-box;
width: 100%;
background: #0066ff;
padding: 16px 98px;
}
.ibl-footer__copyright {
margin: 0;
color: #ffffff;
font-family: var(--body_xs_regular-font-family, "Noto Sans"), sans-serif;
font-size: var(--body_xs_regular-font-size, 0.75rem);
font-weight: var(--body_xs_regular-font-weight, 400);
line-height: var(--body_xs_regular-line-height, 1rem);
}
.ibl-footer__powered-by {
display: inline-flex;
align-items: center;
gap: 8px;
color: #ffffff;
text-decoration: none;
}
.ibl-footer__powered-by:hover {
opacity: 0.9;
}
.ibl-footer__powered-label {
font-family: var(--body_xs_regular-font-family, "Noto Sans"), sans-serif;
font-size: var(--body_xs_regular-font-size, 0.75rem);
font-weight: var(--body_xs_regular-font-weight, 400);
line-height: var(--body_xs_regular-line-height, 1rem);
white-space: nowrap;
}
.ibl-footer__powered-logo {
display: block;
height: 20px;
width: auto;
}
.ibl-footer__si-logo {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.25rem;
font-style: italic;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
}
@media (max-width: 1024px) {
.ibl-footer__social, .ibl-footer__powered {
padding-inline: var(--spacing_4, 24px);
}
.ibl-footer__inner {
flex-direction: column;
align-items: center;
gap: 20px;
}
.ibl-footer__socials {
justify-content: center;
width: 100%;
}
.ibl-footer__legal {
justify-content: center;
}
}
@media (max-width: 640px) {
.ibl-footer__social {
padding: 32px var(--spacing_4, 16px);
}
.ibl-footer__powered {
padding: var(--spacing_4, 16px);
}
.ibl-footer__inner {
gap: 24px;
}
.ibl-footer__legal {
justify-content: center;
width: 100%;
}
.ibl-footer__legal-sep {
margin: 0 8px;
}
.ibl-footer__legal-link {
font-size: 0.625rem;
}
.ibl-footer__powered .ibl-footer__inner {
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
}
}