body {
       font-family: "Roboto", sans-serif;
       font-optical-sizing: auto;
       font-weight: 400;
       font-style: normal;
       background: linear-gradient(180deg, #001b43 0%, #00267c 100%);
   }

   html {
       scroll-behavior: smooth;
   }

   main {
       width: 100%;
       margin: auto;
   }

   #termscondition .modal-dialog {
       max-width: 1320px;
   }

   .modal::before {
       content: '';
       display: inline-block;
       width: 100%;
       height: 100%;
       position: absolute;
       inset: 0;
       opacity: 1;
       background-color: rgb(255 255 255 / 0%);
       backdrop-filter: blur(5px);
   }

   #termscondition .modal-content {
       background: #fff2ad;
       border: none;
       border-radius: 12px;
       padding: 15px;
   }

   #termscondition .modal-content h6 {
       font-size: 22px;
       font-weight: 700;
       color: #ff1d42;
   }

   #termscondition .modal-content p {
       color: #001b46;
   }

   header.header {
       background: #022859;
       width: 100%;
       padding: 10px 0;
       position: fixed;
       top: 0;
       z-index: 999;
   }

   .header-wrap {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .header-wrap .header-terms {
       background: transparent;
       border: none;
       color: #fff2ad;
       font-size: 18px;
   }

   .header-logo img {
       height: 55px;
   }

   /*================ Hero Section Css Start Here ==================*/

   .hero-section {
       padding: 80px 0;
       margin-top: 75px;
   }

   .hero-section .brand-presents {
       font-size: 22px;
       color: #ffffff;
       font-weight: 400;
       padding-bottom: 8px;
   }

   .hero-section .main-heading {
       font-size: 80px;
       font-weight: 900;
       line-height: 1.1;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       color: #fff2ad;
   }

   .hero-section .challenge-text {
       font-size: 80px;
       color: #ff1d42;
       line-height: 1.1;
       font-style: italic;
       font-weight: 500;
   }

   .hero-section .sub-text {
       font-size: 30px;
       color: #FFF;
   }

   .hero-btns {
       margin-top: -65px;
   }

   .btn-challenge {
       background-color: #ff1d42;
       color: #ffffff;
       font-size: 20px;
       font-weight: 600;
       border: none;
       padding: 15px 40px;
       border-radius: 8px;
       transition: opacity 0.2s ease;
       display: flex;
    justify-content: center;
    align-items: center;
   }

   .btn-challenge:hover {
       background-color: #FFF;
       color: #022859;
   }

   .btn-callouts {
       background-color: #2e9eff;
       color: #fff2ad;
       font-size: 20px;
       font-weight: 600;
       border: none;
       padding: 15px 40px;
       border-radius: 8px;
       transition: opacity 0.2s ease;
   }

   .btn-callouts:hover {
       background-color: #FFF;
       color: #022859;
   }

   .video-card {
       position: relative;
       border-radius: 12px;
       overflow: hidden;
       border: none;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
       max-width: 400px;
       width: 100%;
   }

   .video-card img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .play-button {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 64px;
       height: 64px;
       cursor: pointer;
       transition: transform 0.2s ease, background-color 0.2s ease;
   }

   .play-button:hover {
       transform: translate(-50%, -50%) scale(1.08);
   }

   #herovideo .modal-dialog {
       max-width: 800px;
   }

   #herovideo .herovideo_pop {
       width: 100%;
       aspect-ratio: 16 / 9;
   }

   #herovideo .herovideo_pop video {
       width: 100%;
       height: 100%;
       display: block;
       object-fit: cover;
   }

   #herovideo .modal-dialog .modal-body {
       padding: 20px;
   }

   #herovideo .modal-dialog .modal-content {
       border-radius: 0;
   }

   #herovideo button.btn-close {
       position: absolute;
       top: 30px;
       right: 30px;
       color: #FFF;
       opacity: 1;
       filter: invert(99%) sepia(8%) saturate(4244%) hue-rotate(188deg) brightness(116%) contrast(100%);
   }

   /*================ Hero Section Css End Here ==================*/


   /*================ Challange Slider Section Css Start Here ==================*/

   .challenge-slider-section {
       width: 100%;
       background-color: #001b43;
       padding: 70px 0;
   }

   .challenge-head {
       margin-bottom: 30px;
   }

   .challenge-head h1 {
       font-size: 42px;
       font-weight: 800;
       color: #2e9eff;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       line-height: 1.2;
       margin-bottom: 10px;
   }

   .challenge-head p {
       font-size: 28px;
       color: #FFF;
       font-weight: 400;
   }

   .creators-slider {
       margin: 0 -10px;
   }

   .creators-slider .card-item {
       padding: 0 10px;
       outline: none;
   }

   .creators-slider .card {
       display: flex;
       flex-direction: column;
       background: transparent;
       border: none;
   }

   .creators-slider .image-container {
       position: relative;
       width: 100%;
       border-radius: 10px;
       overflow: hidden;
       aspect-ratio: 4 / 5;
       background-color: #0b2b5a;
   }

   .creators-slider .image-container img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .creators-slider .details {
       margin-top: 15px;
   }

   .creators-slider .handle {
       font-size: 22px;
       font-weight: 700;
       color: #ffffff;
       margin-bottom: 6px;
       display: block;
   }

   .creators-slider .quote {
       font-size: 18px;
       color: #e0e6ed;
       line-height: 1.35;
   }

   .creators-slider .slick-current .image-container {
       border: solid 2px #fff2ad;
   }

   .creators-slider .slick-current .handle {
       color: #fff2ad;
       font-weight: 600;
   }

   .creators-slider .slick-current .quote {
       color: #fff2ad;
   }


   /*================ Challange Slider Section Css End Here ==================*/



   /*================ Participate Section Css Start Here ==================*/

   .participate-section {
       width: 100%;
       padding: 250px 0 80px 0;
   }

   .participate-card {
       border: 1.5px solid #fff2ad;
       border-radius: 20px;
       padding: 0px 50px 50px 50px;
       background-color: #071e43;
       width: 100%;
   }

   .participate-card-wrap {
       margin-top: -190px;
   }

   .header-title {
       color: #fff2ad;
       font-weight: 700;
       font-size: 46px;
       margin-bottom: 2px;
   }

   .header-subtitle {
       color: #FFF;
       font-size: 28px;
       margin-bottom: 20px;
   }

   .participate-video {
       position: relative;
       border-radius: 16px;
       overflow: hidden;
       height: 100%;
       width: 100%;
   }

   .participate-video img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .participate-steps-wrap {
       display: flex;
       flex-direction: column;
       gap: 12px;
       height: 100%;
       justify-content: space-between;
       padding-left: 20px;
   }

   .participate-steps-card {
       background-color: #2e9eff;
       border-radius: 12px;
       padding: 25px 25px 25px 0px;
       display: flex;
       align-items: center;
       gap: 15px;
       color: #ffffff;
   }

   .participate-steps-number {
       background-color: #ff2134;
       color: #ffffff;
       width: 60px;
       height: 60px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 800;
       font-size: 32px;
       flex-shrink: 0;
       margin-left: -30px;
   }

   .participate-steps-content h3 {
       font-size: 32px;
       font-weight: 700;
       margin: 0;
       color: #001b43;
       line-height: 1.2;
   }

   .participate-steps-content p {
       margin: 2px 0 0 0;
       font-size: 20px;
       color: #FFF;
       line-height: 1.3;
   }

   .rewards-section-wrap {
       display: flex;
       justify-content: space-between;
       gap: 20px;
   }

   .rewards-section {
       margin-top: 40px;
       display: grid;
       grid-template-columns: 1fr 1fr 1.5fr;
       gap: 15px;
       align-items: stretch;
       flex: 1;
   }

   .rewards-title {
       color: #fff2ad;
       font-weight: 700;
       font-size: 46px;
       line-height: 1.2;
       display: flex;
       align-items: center;
       text-transform: uppercase;
       width: 300px;
   }

   .reward-card {
       background-color: #2e9eff;
       border-radius: 12px;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       text-align: center;
       padding: 4px;
   }

   .reward-card-body {
       padding: 15px 10px;
       flex-grow: 1;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: space-between;
       background: #022859;
       border-radius: 8px;
   }

   .reward-card-title {
       font-size: 20px;
       font-weight: 500;
       line-height: 1.2;
       color: #ffffff;
       margin-bottom: 10px;
       text-align: left;
       width: 100%;
       padding: 0 15px;
   }

   .reward-card-footer {
       color: #ffffff;
       font-weight: 700;
       font-size: 17px;
       padding: 12px 4px 8px 4px;
       text-transform: uppercase;
   }

   .reward-card-body img {
       width: 100%;
   }

   .social-icons {
       margin-top: 0px;
   }

   .top5-card {
       grid-column: span 1;
       background-color: #2e9eff;
       border-radius: 12px;
       overflow: hidden;
       display: flex;
       padding: 4px;
   }

   .top5-badge {
       color: #fff2ad;
       font-weight: 800;
       font-size: 1.1rem;
       padding: 10px 15px;
       display: flex;
       align-items: center;
       justify-content: center;
       white-space: nowrap;
   }

   .top5-content {
       background: #022859;
       padding: 15px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       width: 100%;
       flex-direction: column;
       border-radius: 10px;
   }

   /*================ Participate Section Css End Here ==================*/


   /*================ Community Section Css Start Here ==================*/

   .community-feed-section .title-wrap {
       margin-bottom: 25px;
   }

   .community-feed-section .title-primary {
       color: #fff2ad;
   }

   .community-feed-section .subtitle-primary {
       color: #FFF;
       font-size: 28px;
       margin-bottom: 0px;
       font-weight: 400;
       line-height: 1.1;
   }

   .community-feed-section .content-column {
       display: flex;
       flex-direction: column;
       height: 100%;
   }

   .community-feed-section .community-slider {
       margin: 0 -10px;
       width: calc(100% + 20px);
   }

   .community-feed-section .slider-item {
       padding: 0 10px;
       outline: none;
       height: 381px;
    overflow: hidden;
   }

   .community-feed-section .entry-card {
       display: flex;
       flex-direction: column;
       align-items: center;
       height: 381px;
   }

   .entry-image-wrapper {
       width: 100%;
       aspect-ratio: 4 / 5;
       /* border-radius: 16px; */
       overflow: hidden !important;
       border: 2px solid rgba(242, 233, 187, 1);
           margin-top: -117px;
   }

   .entry-image-wrapper img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .entry-tag:hover {
        color: #FFF;
    }

   .entry-tag {
       margin-top: 12px;
       color: #fff2ad;
       font-weight: 400;
       font-size: 20px;
       letter-spacing: 0.5px;
   }

   .featured-video-wrapper {
       position: relative;
       width: 100%;
       border-radius: 16px;
       overflow: hidden;
       border: 2px solid rgba(255, 255, 255, 0.4);
   }

   .featured-video-wrapper .video-card {
       max-width: 100%;
       max-height: 381px;
   }

   .featured-video-wrapper img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   /*================ Community Section Css End Here ==================*/



   /*================ Entry Form Section Css Start Here ==================*/

   .entry-form-section {
       padding-top: 80px;
       padding-bottom: 150px;
   }

   .form-card {
       background-color: #022859;
       border: 1px solid #f2e9bb;
       border-radius: 16px;
       padding: 35px 40px 40px 40px;
       margin-bottom: 30px;
   }

   .title-primary {
       color: #fff2ad;
       font-weight: 700;
       font-size: 36px;
       margin-bottom: 4px;
   }

   .subtitle-text {
       color: #FFF;
       font-size: 18px;
       margin-bottom: 25px;
   }

   .custom-label {
       color: #fff2ad;
       font-size: 18px;
       margin-bottom: 6px;
   }

   .custom-input {
       background-color: #031533;
       border: 1px solid #1a3c75;
       color: #ffffff;
       border-radius: 8px;
       padding: 10px 16px;
       font-size: 18px;
       width: 100%;
       outline: none;
       transition: border-color 0.2s ease;
   }

   .custom-input:focus {
       background-color: #031533;
       border-color: #2b99ff;
       color: #ffffff;
       box-shadow: none;
   }

   .btn-submit {
       background-color: #ff1d42;
       color: #ffffff;
       font-weight: 700;
       font-size: 16px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       padding: 16px 32px;
       border-radius: 8px;
       border: none;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       transition: background-color 0.2s ease;
   }

   .btn-submit:hover {
       background-color: #FFF;
       color: #022859;
   }

   .challenge-card {
       background-color: #022859;
       border: 1px solid #f2e9bb;
       border-radius: 16px;
       padding: 30px 40px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 20px;
   }

   .challenge-info {
       display: flex;
       flex-direction: column;
       flex: 1;
   }

   .sticky-btn-section {
       position: fixed;
       bottom: 0;
       width: 100%;
       background: #022859;
       padding: 20px 0;
   }

   .sticky-btn-wrap {
       display: flex;
       gap: 40px;
       justify-content: space-between;
   }

   .sticky-btn-wrap a {
       width: 45%;
   }

   .sticky-btn-wrap .btn-callouts {
       align-items: center;
   }

   .sticky-btn-wrap .btn-callouts:hover {
       background-color: #2e9eff;
       color: #fff2ad;
   }

   .sticky-btn-wrap .btn-callouts img {
       height: 21px;
   }

   /*================ Entry Form Section Css End Here ==================*/


   @media screen and (min-width: 1200px) and (max-width: 1366px) {
       #termscondition .modal-dialog {
           max-width: 1140px;
       }

       .hero-section .main-heading {
           font-size: 70px;
           margin-top: 30px;
       }

       .participate-steps-content h3 {
           font-size: 26px;
       }

       .participate-steps-content p {
           font-size: 18px;
       }

       .participate-steps-card {
           padding: 20px 25px 20px 0px;
       }

       .reward-card-title {
           font-size: 16px;
       }

       .reward-card-footer {
           font-size: 14px;
       }

       .community-feed-section .title-primary {
           font-size: 33px;
       }

       .community-feed-section .subtitle-primary {
           font-size: 25px;
       }

       .btn-callouts {
           font-size: 16px;
       }

       .btn-challenge {
           font-size: 16px;
       }
   }

   @media (max-width: 1199px) {
       .hero-section .main-heading {
           font-size: 65px;
       }

       .hero-section .challenge-text {
           font-size: 65px;
       }

       .hero-section .sub-text {
           font-size: 26px;
       }

       .hero-btns .btn-challenge {
           padding: 15px 25px;
       }

       .hero-btns .btn-callouts {
           padding: 15px 25px;
       }

       .challenge-head p {
           font-size: 22px;
       }

       .creators-slider .quote {
           font-size: 15px;
       }

       .creators-slider .handle {
           font-size: 18px;
       }

       .participate-card-wrap .header-title {
           font-size: 36px;
       }

       .participate-card-wrap .header-subtitle {
           font-size: 22px;
       }

       .participate-steps-content h3 {
           font-size: 26px;
       }

       .participate-steps-content p {
           font-size: 18px;
       }

       .participate-steps-card {
           padding: 20px 25px 20px 0px;
       }

       .rewards-section-wrap {
           flex-direction: column;
           padding-top: 40px;
       }

       .rewards-title {
           width: 100%;
           font-size: 32px;
       }

       .rewards-section {
           margin-top: 0;
       }

       .community-feed-section .title-primary {
           font-size: 28px;
       }

       .community-feed-section .subtitle-primary {
           font-size: 21px;
       }

       .challenge-card .btn-callouts {
           font-size: 16px;
           padding: 15px 20px;
           width: 230px;
       }

       .btn-callouts,
       .btn-challenge {
           font-size: 16px;
       }

       .challenge-slider-section {
           padding-bottom: 40px;
       }
   }

   @media (max-width: 991px) {
       .hero-section {
           padding-top: 36px;
       }

       .hero-section .row {
           flex-direction: column;
           max-width: 480px;
           margin: auto;
       }

       .video-card {
           max-width: 100%;
       }

       .hero-btns {
           margin-top: 30px;
           justify-content: space-between;
       }

       .hero-btns a {
           width: calc(50% - 12px);
       }

       .sticky-btn-wrap {
           gap: 20px;
       }

       .sticky-btn-wrap a {
           width: 50%;
       }

       .rewards-section {
           grid-template-columns: 1fr 1fr;
       }

       .top5-card {
           grid-column: 1 / -1;
       }

       .subtitle-text {
           font-size: 16px;
       }

       .challenge-card .btn-callouts {
           width: 200px;
       }
   }

   @media (max-width: 767px) {
        .community-feed-section .slider-item {
       height: 300px;
   }

   .community-feed-section .entry-card {
       height: 300px;
   }

   .entry-image-wrapper {
           margin-top: -125px;
   }

       .hero-section .main-heading {
           font-size: 60px;
       }

       .hero-section .challenge-text {
           font-size: 60px;
       }

       .hero-btns {
           gap: 12px !important;
           margin-top: 20px;
       }

       .hero-btns a {
           width: 100%;
       }

       .sticky-btn-wrap .btn.btn-challenge {
           padding: 10px 50px;
       }

       .sticky-btn-wrap .btn.btn-callouts {
           padding: 10px 33px;
       }

       .sticky-btn-section {
           padding: 10px 0;
       }

       .sticky-btn-wrap a {
           line-height: 20px;
       }

       .challenge-head h1 {
           font-size: 35px;
       }

       .challenge-head h1 br {
           display: none;
       }

       .challenge-head p {
           font-size: 19px;
       }

       .creators-slider .slick-list {
           padding-left: 0px !important;
           padding-right: 100px !important;
       }

       .creators-slider .handle {
           font-size: 16px;
       }

       .creators-slider .quote {
           font-size: 14px;
       }

       .creators-slider .handle {
           font-size: 16px;
       }

       .creators-slider .quote {
           font-size: 14px;
       }

       .participate-card {
           padding: 0px 20px 30px 20px;
       }

       .participate-steps-content h3 {
           font-size: 20px;
       }

       .participate-steps-content p {
           font-size: 16px;
       }

       .participate-steps-card {
           padding: 15px 15px 15px 0px;
       }

       .participate-steps-number {
           width: 50px;
           height: 50px;
           font-size: 24px;
       }

       .rewards-title {
           font-size: 30px;
       }

       .reward-card-footer {
           font-size: 15px;
       }

       .reward-card-title {
           font-size: 18px;
       }

       .participate-section {
           padding-bottom: 50px;
       }

       .community-feed-section .subtitle-primary br {
           display: none;
       }

       .btn-submit {
           width: 100%;
       }

       .btn-submit {
           width: 100%;
       }

       .title-primary {
           font-size: 28px;
       }

       .form-card {
           padding: 30px;
       }

       .challenge-card {
           flex-direction: column;
           padding: 30px;
       }

       .challenge-card .btn-callouts {
           width: 100%;
       }

       .entry-form-section {
           padding-bottom: 115px;
           padding-top: 40px;
       }
   }

   @media (max-width: 480px) {
    .community-feed-section .slider-item {
       height: 250px;
   }

   .community-feed-section .entry-card {
       height: 250px;
   }

   .entry-image-wrapper {
           margin-top: -143px;
   }
       .hero-section .main-heading {
           font-size: 38px;
       }

       .hero-section .col-lg-7 img {
           height: 36px;
       }

       .hero-section .brand-presents {
           font-size: 16px;
           padding-bottom: 4px;
       }

       .hero-section .challenge-text {
           font-size: 38px;
       }

       .hero-section .sub-text {
           font-size: 19px;
       }

       .hero-section {
           padding-bottom: 50px;
           padding-top: 20px;
       }

       .header-wrap {
           width: 100%;
       }

       .sticky-btn-wrap .btn.btn-challenge {
           padding: 10px 10px;
       }

       .sticky-btn-wrap .btn.btn-callouts {
           padding: 10px 10px;
       }

       .participate-steps-content p {
           word-break: break-all;
       }

       .community-feed-section .title-primary {
           word-break: break-all;
           font-size: 18px;
       }

       .community-feed-section .subtitle-primary {
           font-size: 18px;
       }

       .challenge-head h1 {
           font-size: 24px;
       }

       .challenge-slider-section {
           padding-top: 45px;
           padding-bottom: 30px;
       }

       .challenge-head p {
           font-size: 15px;
       }

       .participate-card-wrap .header-title {
           font-size: 28px;
       }

       .participate-card-wrap .header-subtitle {
           font-size: 18px;
       }

       .participate-video .play-button img {
           width: 40px;
           height: 40px;
       }

       .rewards-title {
           font-size: 25px;
       }

       .rewards-section {
           grid-template-columns: 1fr;
       }

       .top5-card {
           grid-column: 1;
           flex-direction: column;
       }

       .entry-tag {
           font-size: 15px;
       }

       .title-primary {
           font-size: 22px;
       }

       .form-card {
           padding: 25px;
       }

       .custom-label {
           font-size: 14px;
       }

       .challenge-card {
           padding: 25px;
       }

       #termscondition .modal-body {
           padding: 5px;
       }

       #termscondition .modal-content p {
           font-size: 14px;
       }
   }