/*******************Common CSS***************************************/

body {font-family: "Poppins", sans-serif;}
.whitecolor { color: #ffffff;}
.relative { position: relative;}
.sectionheading{color: #00556C; font-weight: 700; font-size:35px; text-transform: uppercase; text-align: center; margin-bottom: 0px;}
/*******************Common CSS***************************************/


/*******************Banner Section Start***************************************/

.hero-section {position:relative; width:100%; overflow:hidden; padding-bottom:0px;}
.hero-video {width:100%; height:100%; object-fit:cover;pointer-events: none;}
.video-overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.25); z-index:1; display: none;}
.center-image {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2; max-width:285px; height:auto;}
.center-image.hidden { opacity: 0;visibility: hidden;}
/*******************Banner Section End***************************************/


/*******************Celebrate Section Start***************************************/
.celebrate-section { padding-top: 50px; padding-bottom: 30px;}
.celebrate-content-div { max-width: 530px; padding-top: 20px;}
.celebrate-content-div p {font-size: 20px; font-weight: 500; color: #173954;}
.celebrate-content-div p span {font-weight: 700; color: #00A5AA;}
/*******************Celebrate Section End***************************************/

/*******************Shaka Moment Section Start***************************************/
.shakamoment-section { padding-top: 30px; padding-bottom: 30px; overflow: hidden;}
.shakamoment-bg {background-image:url('../images/10-year-anniversary/Desktop/Mask-group.png'); background-size:cover; background-position:center; background-repeat:no-repeat; width:100%; max-height:382px; padding: 40px 40px; border-radius: 10px; cursor: pointer;} 
.shakamoment-section p { font-weight: 500; font-size:18px; color: #fff;}
.shakamoment-section p.colorchange {color: #AEE9E8;}
.shakamoment-yellow-btn { background-color: #F79D14; color: #ffffff; width:253px; height: 42px; line-height: 40px; text-align: center; font-size: 16px; font-weight: 600; border:none; border-radius: 8px; border: none;}
.shakamoment-yellow-btn:focus { outline: none;}
/*******************Shaka Moment Section End***************************************/


/*****************Timeline Section Start********************************************/

.timeline-wrapper {padding-top:20px; padding-bottom:30px;}
.timeline-left {width:35%; display:flex; flex-direction:column; align-items:center; gap:40px; padding-right:30px;}
.timeline-left img {max-width:250px;}
.timeline-right {position:relative; --timeline-line-left:-38px; --timeline-line-width:3.5px;}
.timeline-item {position:relative; margin-bottom:60px;}
.year-dot.myactive {opacity:1; transform:scale(1);}
.timeline-progress {position:absolute; left:var(--timeline-line-left); top:0; width:var(--timeline-line-width); height:0; background:#337789; transition:height 0.08s linear;}
.fraunces-year {font-family:"Fraunces", serif; font-weight:700; font-style:normal; font-variation-settings:"SOFT" 60, "WONK" 1; color:#337789; font-size:55px; padding-bottom:30px; margin-bottom:0px; opacity:0; transform:translateY(30px); transition:all 0.5s ease;}
.fraunces-year.myactive {opacity:1; transform:translateY(0);}
.reducefntsize {font-size:32px;}
.sectiontimeline {position:relative; margin-bottom:0px;}
.sectiontimeline.myactive::before {opacity:1; transform:scale(1);}
.timeline-content h3 {font-size:27px; margin-bottom:0px; font-weight:700; color:#00556C; padding-bottom:15px; opacity:0; transform:translateY(30px); transition:all 0.5s ease;}
.sectiontimeline.myactive h3 {opacity:1; transform:translateY(0);}
.timeline-content p {font-size:18px; margin-bottom:0; color:#173954; font-weight:500; padding-bottom:24px; opacity:0; transform:translateY(30px); transition:all 0.5s ease;}
.timeline-content p.myactive {opacity:1; transform:translateY(0);}
.fraunces-headingsp {font-family:"Fraunces", serif; font-weight:675; font-style:italic; font-variation-settings:"SOFT" 70, "WONK" 1; color:#00A5AA; font-size:26px; text-align:center;}
a.timelinelink {text-decoration:underline; color:#173954; cursor:unset;}
a.timelinelink:hover {text-decoration:underline; opacity:1; color:#173954;}
.wd-time-1 {max-width:380px; padding-bottom:40px !important;}
.wd-time-2 {max-width:433px;}
.wd-time-3 {max-width:449px;}
.wd-time-4 {max-width:440px;}
.tnewcolor {color:#00A5AA; font-weight:700;}
.tnewcolorittakic {font-style:italic;}
.d-block-span {padding-bottom:24px; display:block;}
.year-dot {position:absolute; left:calc(var(--timeline-line-left) + (var(--timeline-line-width) / 2) - (18px / 2)); top:26px; width:18px; height:18px; background:#ffffff; border-radius:50%; border:2.5px solid #337789; z-index:3; opacity:0; transform:scale(0.5); transition:all 0.4s ease; box-shadow:0 0 0 3px #ffffff;}
.sectiontimeline::before {content:""; position:absolute; left:calc(var(--timeline-line-left) + (var(--timeline-line-width) / 2) - (13px / 2)); top:5px; width:13px; height:13px; background:#DC8016; border-radius:50%; border:2.5px solid #DC8016; z-index:3; opacity:0; transform:scale(0.5); transition:all 0.4s ease; box-shadow:0 0 0 3px #ffffff;}

@media (min-width: 768px) {
.timeline-right {--timeline-line-left:-38px;}
}

/****************Timeline Section End************************************************/


/*****************Corner Section Start********************************************/

.corner-section { overflow: hidden;}
.cornerstory-slider-wrapper {position:relative;}
.cornerstory-slider .slide {background:#fff; margin:10px; border-radius:12px; box-shadow:0px 4px 4px rgba(0,0,0,0.25); width:324px; height:458px; padding:0;}
.cornerstory-slider .slide img.main {width:100%; height:227px; object-fit:cover; border-top-left-radius:10px; border-top-right-radius:10px;}
.cornerstory-slider .slide h3 {font-family:"Fraunces", serif; font-weight:600;  font-variation-settings:"SOFT" 75, "WONK" 1; color:#00556C; font-size:22px; text-align:center; display:flex; align-items:center; justify-content:center; max-width:242px; margin:15px auto; height: 50px;}
.cornerstory-slider-caption {color:#777; font-size:12px; font-weight:600; text-transform:uppercase; text-align:center; padding-top:15px;    max-width: 260px;margin: 0 auto;}
.cornerstory-slider .audio-controls {display:flex; flex-direction:column; align-items:center; padding:10px; gap:27px;}
.cornerstory-slider .cornerprogress-container {width:80%; height:5px; background:#D2D5D5; border-radius:5px; position:relative; cursor:pointer;}

.cornerstory-slider .knob {position:absolute; top:50%; left:0%; transform:translate(-50%, -50%); width:14px; height:14px; background:#000; border-radius:50%; pointer-events:none; transition:left 0.1s linear;}
.cornerstory-slider .cornerplay-btn {border:none; background:none; cursor:pointer;}
.cornerstory-slider .cornerplay-btn:focus { outline: none;}
.cornerstory-slider .time {font-size:12px; width:50px; display:none;}
.cornerstory-slider .slick-list {overflow:visible;}
.cornerstory-slider-outer {width:100%; overflow:hidden;}


.corner-section .slider-navigation {position:absolute; bottom:0; right:0; transform:translateY(-50%); display:flex; gap:12px;z-index: 9}
.corner-section .slider-navigation button {background:transparent; border:none; cursor:pointer;}
.corner-section .slider-navigation button:focus { outline: none;}
.corner-section .slider-dots {text-align:center; padding-top:0px;}
.corner-section .slider-dots ul.slick-dots {bottom: 15px;}
.corner-section .slider-dots button:before { background: #D9D9D9; width: 8px!important; height:8px!important;border:none!important;}
.corner-section .slick-dots .slick-active button:before{background-color: #173954!important;}
.explore-yellow-btn { background-color: #DC8016; color: #ffffff; width:312px; height: 42px; line-height: 40px; text-align: center; font-size: 16px; font-weight: 600; border:none; border-radius: 8px; border: none;}
.explore-yellow-btn:focus { outline: none;}
.corner-section .slider-navigation button img { width: 26px; height: 26px;}


.corner-section .sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.cornerprogress-container:focus {outline:2px solid #ffc107; outline-offset:2px;}
button:focus, .cornerprogress-container:focus, .slick-slide:focus {outline:none;}
button:focus-visible, .cornerprogress-container:focus-visible, .slick-slide:focus-visible {outline:none; outline-offset:3px; border-radius:6px;}  

.cornerstory-slider .cornerprogress-container {width:80%; height:4px; background:#D9D9D9; border-radius:4px; position:relative; cursor:pointer;}
.cornerstory-slider .cornerbuffer {position:absolute; left:0; top:0; height:100%; width:0%; background:#C8CDCD; border-radius:4px; z-index:1;}
.cornerstory-slider .cornerprogress {position:absolute; left:0; top:0; height:100%; width:0%; background:#253646; border-radius:4px; z-index:2;}
.cornerstory-slider .knob {position:absolute; top:50%; width:12px; height:12px; background:#253646; border-radius:50%; z-index:3; pointer-events:none;}



@media (min-width:768px) { 
.container-left-align {padding-left:calc((100% - 1140px)/2);}
.cornerstory-slider .slick-list { padding-right: calc((100% - 1000px) / 2);}
}

/*****************Corner Section Start********************************************/


/*****************Made with Love Section Start********************************************/
.madewithlove-section { background: #FDF8F3; position: relative; padding-top: 50px; padding-bottom: 40px; overflow: hidden;}
.sectioninnertext { font-size: 18px; font-weight: 500; line-height: 24px; color: #00556C; text-align: center; padding-top: 8px;}


.madewithlove-section-old .slide-grid {display:grid; grid-template-columns:repeat(7, 1fr); gap:40px 20px;}
.madewithlove-section .member {text-align:center; margin-bottom:20px;}
.madewithlove-section .member img {width:130px; height:130px; object-fit:contain; margin-bottom:12px; display:unset;}
.madewithlove-section .member h6 {font-size:14px; margin-bottom:8px; font-weight:600; color:#173954;}
.madewithlove-section .role {display:inline-block; background:#0F6369; color:#fff; width:137px; height:20px; line-height:20px; font-size:11px; border-radius:5px; text-align:center; font-weight: 700;}
.madewithlove-section .slider-navigation {position:absolute; bottom:0; right:5%; transform:translateY(-50%); display:flex; gap:12px; z-index:9}
.madewithlove-section .slider-navigation button {background:transparent; border:none; cursor:pointer;}
.madewithlove-section .slider-navigation button:focus {outline:none;}
.madewithlove-section .team-slider-dots {text-align:center; padding-top:0px;}
.madewithlove-section .team-slider-dots ul.slick-dots {bottom:15px;}
.madewithlove-section .team-slider-dots button:before {background:#D9D9D9; width:8px!important; height:8px!important; border:none!important;}
.madewithlove-section .slider-navigation button img {width:26px; height:26px;}
.madewithlove-section .slick-dots .slick-active button:before{background-color: #173954!important;}

@media(max-width:1200px) {
.madewithlove-section-old .slide-grid {grid-template-columns:repeat(4, 1fr);}
}

@media(max-width:768px) {
.madewithlove-section-old .slide-grid {grid-template-columns:repeat(2, 1fr);}
}

/*****************Made with Love Section Start********************************************/


/*****************Note Section Start********************************************/
.founders-section {position:relative; color:#ffffff; background-image:url('../images/10-year-anniversary/NoteFromTheFoundersBG.png'); background-size:cover; background-position:top; background-repeat:no-repeat; padding-top:130px; padding-bottom:50px; overflow:hidden; background-color:#FDF8F3;}
.founders-section::after {content:""; position:absolute; bottom:0; left:0; width:100%; height:40%; background-color:#0F6369; z-index:0;}
.founders-section .container {position:relative; z-index:2;}
.founders-section .founder-img {max-width:216px; width:100%;}
.founders-section .section-title {font-size:35px; font-weight:700; letter-spacing:2px; margin-bottom:25px; color:#fff;}
.founders-section .section-title span {font-family:"Fraunces", serif; font-weight:675; font-style:italic; font-variation-settings:"SOFT" 70, "WONK" 1; color:#F79D14; font-size:26px; letter-spacing: 0px;}
.founders-section .founders-content p {font-size:18px; font-weight:400; margin-bottom:18px; max-width:521px; color:#ffffff;}
.founders-section .founders-content p.morestrong {font-weight:700; color:#CFE8E8;}
.founders-section .founders-content p.extrawdt {max-width:521px;}
.founders-section .founders-content p span.highlight {color:#F79D14; font-weight:700;}
.founders-section .signature {font-weight:700;font-size: 18px; color: #ffffff;}


/*****************Note Section End********************************************/


/************************ Join the Rde Section Start************************************/

.join-ride {background-image:url('../images/10-year-anniversary/JoinTheRideBG.svg'); background-position:center; background-repeat:no-repeat; background-size:cover; padding:220px 0px 84px 0px; background-color:#0F6369;}
.btn-new-home { width: 100%;}
/************************ Join the Rde Section End************************************/



@media (max-width:1199px) { .corner-section .container-left-align {} }
@media (max-width:991px) { .corner-section .container-left-align {} }
@media (max-width:768px) { 
    
    .center-image { max-width: 204px;}
    .celebrate-section { padding-bottom: 0px; padding-left: 10px; padding-right: 10px;}
    .celebrate-section img { max-width: 310px;}
    .celebrate-content-div p { font-size: 16px;}
    
    .shakamoment-bg {background-image:url('../images/10-year-anniversary/Mobile/Shaka-Moment-Maskgroup.png'); border-radius:10px;}
    .shakamoment-section .nopadding { padding: 0px;}
    .shakamoment-bg { padding: 30px 25px; max-height: unset; height:745px;}
    .shakamoment-bg img.top { max-width: 311px; display: block;}
    .shakamoment-section p { font-size: 16px; margin-bottom: 10px; display: inline;}
    .shakamoment-section p.colorchange {  margin-top: 10px;}
    .mobileminheight { min-height: 400px;}
    .shakabtnmobile { left: 0; }
    .shakamoment-yellow-btn { width: 312px;}
    
    
    .mobiletimelineimage {max-width: 258px;}
    .fraunces-year { font-size: 45px; line-height: 60px;}
    .timeline-content p { font-size: 16px;}
    .timeline-item { margin-bottom: 20px;}
    .timeline-item:not(:last-child)::after { left: 0px; top:42px;height: calc(100% + 80px);}
    .timeline-content{ padding-left: 38px;}
    .year-dot {left: -7px;}
    .reducefntsize { font-size: 26px;}
    .wd-time-1 { max-width: 282px;}
    .wd-time-2 { max-width: 282px;}
    .wd-time-3 { max-width: 282px;}
    .wd-time-4 { max-width: 272px;}
    .timeline-progress { left: 1px;width:2.46px;}
    .timeline-wrapper { padding-left: 10px; padding-right: 10px;}
    
    
    .cornerstory-slider .slide h3 { font-size: 20px;}
    .cornerstory-slider-caption { font-size: 11px;}
  
    
    .madewithlove-section h1.sectionheading { max-width: 298px; margin: 0 auto;}
    .sectioninnertext { font-size: 16px; max-width: 312px;margin: 0 auto;}
    
    .madewithlove-section { padding-bottom: 0px;}
    
    .corner-section .slider-navigation {display:none;} 
    .madewithlove-section .slider-navigation {display:none;} 
    .founders-section {text-align:center; padding-bottom: 0px;background-image:url('../images/10-year-anniversary/Mobile/Mobile-Team-Mask-group.png');  }
    .founders-section .founder-img {max-width:180px; margin-bottom:0px;position: absolute;top: 0px;}
    .founders-content p { font-size: 16px;}
    .founders-content { text-align: left;}
    .founders-content .section-title span { display: block;}
    .mobilefounderpadding { margin: 0px!important; padding-top: 115px;}
    
    
    
    
}