@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@500&family=Lobster&family=Oswald:wght@500;700&family=Rufina:wght@400;700&display=swap');


@keyframes flip-top {
  to {
    transform: rotateX(90deg);
  }
}
@keyframes flip-bottom {
  to {
    transform: rotateX(0deg);
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
	--primaryColor: #FFFF00;
	--bodyBg: #1B1B1B;
	--subTextColor:#fff;
	--shades01: #6B5959;
	--veiwWidth: calc(100vw - 17px);
	--padding: calc(var(--veiwWidth)/2 - 785px);

}



html {
  font-size: 14px;
  font-family: "Oswald", sans-serif;
  /* font-family: 'Oswald', sans-serif; */
}





.background-img{background-image: url(../image/bg.jpg); width: 100%; height: 100vh; background-repeat: no-repeat; background-size: cover; padding: 24px 0; position: relative; z-index: 1; }
.container{margin: 0 auto;}

@media (min-width: 576px){
	.container{max-width: none;}
	.modal-dialog{max-width: 700px;}
	.modal-sm{max-width: 400px;}
}
@media (min-width: 768px){
	.container{max-width: 740px;}
}
@media (min-width: 992px){
	.container{max-width: 960px;}
}
@media (min-width: 1200px){
	.container{max-width: 1170px;}
}
@media (min-width: 1440px){
	.container{max-width: 1340px;}
}
@media (min-width: 1600px){
	.container{max-width: 1400px;}
}
@media (min-width: 1920px){
	.container{max-width: 1500px;}
}
@media (min-width: 2560px){
	.container{max-width: 2160px;}
}
@media (min-width: 3840px){
	.container{max-width: 3440px;}
}

.container .row {display: flex;}

.container .overflow-hidden{overflow-x: hidden;}

.aside-left {position: relative; width: 50%; display: flex; flex-direction: column; justify-content: space-between; gap: 75px;}
.aside-left .branding{display: flex; align-items: flex-start; flex-direction: column; gap: 24px;}
.aside-left .brand{width: 640px; height: 120px; overflow: hidden;}
.aside-left .brand img{width: 100%; height: 100%; object-fit: cover;}



.aside-left .reacl-time {background-color: #3050c7;border-radius: 10px;display: flex;justify-content: center;align-items: center;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
.reacl-time .clock { width: 290px; height: 120px; border-radius: 10px; background-color: var(--bodyBg); display: flex; justify-content: center; align-items: center; border: 2px solid var(--primaryColor); border-radius: 10px; box-shadow: 0px 0px 15px 0px var(--primaryColor); }
.reacl-time .time { font-size: 80px; color: var(--primaryColor); font-weight: 700; letter-spacing: 2px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); transition: all 0.5s cubic-bezier(0.6, 0.2, 0.1, 2);}

.race-list{font-size: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 24px;}
.race-list .race{position: relative; display: flex;  align-items: center; justify-content: space-between; width: 100%; max-width: 80%;}
.race-list .race::before{content: ''; width: 8%; position: absolute; background-color: var(--primaryColor); height: 10px; top: 0; border-radius: 0 20px 0 0; }
.race-list .race .race-title{ color: #FFF; font-family: 'Oswald', sans-serif; text-transform: uppercase;  font-size: 32px; font-style: normal; font-weight: 500; line-height: 50px; width: 50%;}
.race-list .race .race-time{position: relative; max-width: 50%; width: 180px; height: 80px; border-radius: 10px; background-color: #2c2c44; color: var(--primaryColor); font-size: 45px; display: flex; justify-content: center; align-items: center; font-weight: 700;}




.aside-right {position: relative; width: 50%;  display: flex; flex-direction: column; justify-content: space-between; gap: 100px;}
.aside-right .session {display: flex; justify-content: center; flex-direction: column; align-items: center; margin-top:52px;}
.session .sub-heading{color: #FFF; font-family: 'Oswald', sans-serif; font-size: 30px; font-style: normal; font-weight: 500; line-height: normal;}
.session .heading-style{ display: flex; flex-direction: column; align-items: flex-end;}
.session .heading-style .heading{color: #FF0; font-family: 'Oswald', sans-serif; font-size: 75px; font-style: normal; font-weight: 700; line-height: 1.2;}
.session .heading-style .date{color: #A1A1A1; font-family: 'Oswald', sans-serif; font-size: 24px;   font-weight: 500; font-style: normal; line-height: normal; letter-spacing: 2.36px;
}
.aside-right .qualifying-details{position: relative; }
.aside-left .qualifying{display: flex; align-items: center; justify-content: center; margin-bottom: 65px;}
/* .aside-left .qualifying::before {content: ""; position: absolute; width: 1600px; left: 0; height: 2px; background-color: #6B5959; z-index: -2;} */
.qualifying .qulifying-title{color: #FFF; font-family: 'Oswald', sans-serif; font-size: 70px; font-style: normal; font-weight: 700; line-height: normal;}

.qualifying .qulifying-title span{position: relative; }

.qualifying .qulifying-title span::before{content: ""; position: absolute; right: calc(100% + 50px); width: 100%; top: 50%; height: 2px; background-color: #6B5959; z-index: -1;}
.qualifying .qulifying-title span::after{content: ""; position: absolute; left: calc(100% + 50px); width: 1000%; top: 50%; height: 2px; background-color: #6B5959; z-index: -1;}


h1 { text-transform: uppercase; color: white; text-align: center; margin-bottom: 50px; letter-spacing: 5px;}

main {position: relative;}
main .cards-list { display: flex; gap: 15px; flex-wrap: wrap;}
main .cards-list .card-detail { text-align: center; font-size: 25px; }
main .cards-list .card-detail p { color: #fff; font-size: 24px; letter-spacing: 3px; text-transform: uppercase; }
main .cards-list .card-detail .flip-card { display: flex; flex-direction: column; position: relative; margin: 15px auto;}
main .cards-list .ccard-detail .top-half,
main .cards-list .card-detail .bottom-half,
main .cards-list .card-detail .top-flip,
main .cards-list .card-detail .bottom-flip {
color: var(--primaryColor);; font-size: 35px; height: 43px; width: 77px; padding: 23px 7px; overflow: hidden; text-align: center; will-change: transform !important; box-shadow: 0 3px rgba(71, 83, 115, 0.2) inset; }
main .cards-list .card-detail .top-half,
main .cards-list .card-detail .top-flip {
color: var(--primaryColor);; border-radius: 10px 10px 0 0; background-color: #2c2c44;  }
main .cards-list .card-detail .top-half::before,
/* main .cards-list .card-detail .top-flip::before {
content: ""; background-color: #191a24; height: 10px; width: 10px; border-radius: 100%; position: absolute; bottom: -5px; left: -5px; } */
/* main .cards-list .card-detail .top-half::after,
main .cards-list .card-detail .top-flip::after {
content: ""; background-color: #191a24; height: 10px; width: 10px; border-radius: 100%; position: absolute; bottom: -5px; right: -5px; border-top: none;} */
main .cards-list .card-detail .bottom-half,
main .cards-list .card-detail .bottom-flip {
display: flex; justify-content: center; align-items: flex-end; border-radius: 0 0 10px 10px; background-color: #343650; box-shadow: 0 -2px 5px 0 rgba(71, 83, 115, 0.7) inset;  border-bottom: none; }
/* main .cards-list .card-detail .bottom-half::before,
main .cards-list .card-detail .bottom-flip::before {
content: ""; background-color: #191a24; height: 10px; width: 10px; border-radius: 100%; position: absolute; top: -5px; left: -5px;} */
/* main .cards-list .card-detail .bottom-half::after,
main .cards-list .card-detail .bottom-flip::after {
content: ""; background-color: #191a24; height: 10px; width: 10px; border-radius: 100%; position: absolute; top: -5px; right: -5px; } */
main .cards-list .card-detail .top-flip {
position: absolute; transform-origin: bottom; transform: rotateX(0deg); animation: flip-top 0.5s ease-in forwards;}
main .cards-list .card-detail .bottom-flip {
position: absolute;bottom: 0;transform-origin: top;transform: rotateX(90deg);animation: flip-bottom 0.5s ease-out 0.5s;}

main h1 {font-size: 31px;}
main .cards-list {gap: 25px;}
main .cards-list .top-half,
main .cards-list .bottom-half,
main .cards-list .top-flip,
main .cards-list .bottom-flip {
  font-size: 140px!important;height: 110px !important;width: 195px !important;padding: 4px 7px !important;}

/* @media screen and (min-width: 700px) {
main h1 {font-size: 31px;}
main .cards-list {gap: 25px;}
main .cards-list .top-half,
main .cards-list .bottom-half,
main .cards-list .top-flip,
main .cards-list .bottom-flip {
  font-size: 130px!important;height: 100px !important;width: 190px !important;padding: 4px 7px !important;}
} */




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

  .aside-right .qualifying::before { content: ""; position: absolute; width: 3440px; right: 0; height: 4px; background-color: #6B5959; z-index: -2;
}
.aside-left .branding {align-items: center;}
main .cards-list { justify-content: center;}
.aside-left .brand {width: 700px;height: 138px;}
.session .sub-heading {font-size: 50px; }
.session .heading-style .heading {font-size: 115px;}
.session .heading-style .date { font-size: 44px;}
.race-list .race .race-title {font-size: 60px;}
.qualifying .qulifying-title {font-size: 130px;}
.race-list .race .race-time { width: 200px; height: 110px;}
.aside-right .qualifying {margin-bottom: 145px;}
main .cards-list .top-half, main .cards-list .bottom-half, main .cards-list .top-flip, main .cards-list .bottom-flip { font-size: 260px!important; height: 192px !important; width: 380px !important; padding: 4px 7px !important;}
main .cards-list .card-detail p {font-size: 64px;}
}

@media screen and (max-width: 2560px) {
  main .cards-list .top-half, main .cards-list .bottom-half, main .cards-list .top-flip, main .cards-list .bottom-flip { font-size: 200px!important; height: 152px !important; width: 300px !important; padding: 4px 7px !important;}
.race-list .race .race-title {font-size: 44px;}
.race-list .race .race-time { font-size: 60px;}
}

@media screen and (max-width: 1920px) {
  .aside-left .brand {width: 460px; height: 70px; overflow: hidden;}
  .session .sub-heading {font-size: 40px;}
  .session .heading-style .heading { font-size: 75px;}
  .session .heading-style .date {font-size: 24px;}
  .reacl-time .time { font-size: 60px;}
  .reacl-time .clock { width: 250px; height: 100px;}

  .qualifying .qulifying-title {font-size: 80px;}
  .aside-right .qualifying {margin-bottom: 85px;}
  main .cards-list .top-half, main .cards-list .bottom-half, main .cards-list .top-flip, main .cards-list .bottom-flip {font-size: 136px!important;height: 105px !important;width: 200px !important;padding: 4px 7px !important;}
  .race-list .race .race-title {font-size: 30px;}
  main .cards-list .card-detail p {font-size: 34px;}
  .race-list .race .race-time {width: 200px;height: 100px;}
}


@media screen and (max-width: 1440px) {
  .aside-left .branding {align-items: flex-start;}
  .aside-left .brand { width: 400px; height: 70px;}
  .reacl-time .clock {width: 200px;height: 100px;}
  .reacl-time .time {font-size: 60px;}
  .session .sub-heading {font-size: 24px;}
  .session .heading-style .heading {font-size: 55px;}
  .session .heading-style .date {font-size: 20px;}
  .aside-right .qualifying::before { width: 1440px;}
  .qualifying .qulifying-title { font-size: 50px;}
  main .cards-list .top-half, main .cards-list .bottom-half, main .cards-list .top-flip, main .cards-list .bottom-flip { font-size: 100px!important; height: 78px !important; width: 180px !important; padding: 4px 7px !important;}
  .aside-right {gap: 70px;}
  
  .race-list { align-items: left;}
  .race-list .race .race-title { font-size: 24px; }
  .race-list .race::before { width: 15%;height: 8px;}
  .race-list .race .race-time { width: 160px;height: 70px;font-size: 40px;}
  
}
@media screen and (max-width: 1366px) {

  .aside-left .branding {align-items:center;}
  .aside-left .brand { width: 400px; height: 70px;}
  .reacl-time .clock {width: 180px;height: 80px;}
  .reacl-time .time {font-size: 60px;}
  .session .sub-heading {font-size: 24px;}
  .session .heading-style .heading {font-size: 55px;}
  .session .heading-style .date {font-size: 20px;}
  .aside-right .qualifying::before { width: 1440px;}
  .qualifying .qulifying-title { font-size: 50px;}
  main .cards-list .top-half, main .cards-list .bottom-half, main .cards-list .top-flip, main .cards-list .bottom-flip {font-size: 60px!important; height: 49px !important; width: 140px !important; padding: 4px 7px !important;}
  main .cards-list .card-detail p {font-size: 16px;}
  .aside-right {gap: 70px;}
  
  .race-list { align-items: flex-start;}
  .race-list .race .race-title { font-size: 24px;}
  .race-list .race::before { width: 15%;height: 8px;}
  .race-list .race .race-time { width: 140px; height: 54px; font-size: 35px;}
}
@media screen and (max-width: 1280px) {

  .aside-left .branding {align-items: center;}
  .aside-left .brand { width: 400px; height: 70px;}
  .reacl-time .clock {width: 180px;height: 80px;}
  .reacl-time .time {font-size: 55px;}
  .session .sub-heading {font-size: 24px;}
  .session .heading-style .heading {font-size: 55px;}
  .session .heading-style .date {font-size: 20px;}
  .aside-right .qualifying::before { width: 1440px;}
  .qualifying .qulifying-title { font-size: 50px;}
  main .cards-list .top-half, main .cards-list .bottom-half, main .cards-list .top-flip, main .cards-list .bottom-flip {     font-size: 76px!important; height: 60px !important; width: 134px !important;}
  .aside-right {gap: 70px;}
  
  .race-list { align-items: flex-start;}
  .race-list .race .race-title { font-size: 24px; }
  .race-list .race::before { width: 15%;height: 8px;}
  .race-list .race .race-time {width: 134px; height: 50px; font-size: 30px;}
  .aside-left .qualifying { margin-bottom: 55px;}
	
}


@media screen and (max-width: 1024px) {
  .aside-left .brand {width: 280px;height: 50px;}
  .reacl-time .clock {width: 150px; height: 70px;}
  .session .sub-heading {font-size: 24px;}
  .session .heading-style .heading {font-size: 44px;}
  .qualifying .qulifying-title {font-size: 40px;}
  main .cards-list .top-half, main .cards-list .bottom-half, main .cards-list .top-flip, main .cards-list .bottom-flip {font-size: 48px!important;height: 40px !important;width: 94px !important;}
  main .cards-list .card-detail p {font-size: 20px;}
  .aside-right {gap: 50px;}
  .race-list .race::before {width: 15%;}
  .reacl-time .time {font-size: 50px;}
  .race-list .race .race-title {font-size: 20px;}
  main .cards-list .card-detail p {font-size: 16px;}

}