/* Theme Name: Royal Strikers – Cricket Club HTML5 Landing Page
Author: WingsTech Solutions Pvt. Ltd.
Support: Kindly raise your concerns, doubts, or questions in the "Ticket" section of our TemplateMonster Author profile.
Description: Royal Strikers is a dynamic and modern HTML5 landing page template designed for cricket clubs, academies, and sports organizations. Perfect for showcasing teams, match schedules, player profiles, and achievements, this template combines clean design with energetic visuals to capture the true spirit of cricket. Whether you’re promoting training programs, tournaments, or membership opportunities, Royal Strikers helps you engage fans, attract players, and build a strong community presence both on and off the field.
Version: 1.0 */

/* ==============CSS Index================
------------------------------------------
    01. Common CSS
    02. Buttons
    03. Header
    04. Hero
    05. About
    06. Programs
    07. Matches
    08. Gallery
    09. Team
    10. Testimonial
    11. CTA
    12. Contact
    13. Footer
    14. Slider
    15. Toast Message

-----------------------------------------
=======================================*/

/****************
  01. Common CSS
****************/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}

* h1,
* h2,
* h3,
* h4,
* h5,
* h6,
* p {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

html,
body {
  scroll-padding-top: 80px;
  scroll-margin-top: 80px;
}

:root {
  --white: #ffffff;
  --white80: #ffffffcc;
  --white20: #ffffff33;
  --white10: #ffffff1a;
  --gray: #e0e0e0;
  --primary: #b71c1c;
  --secondary: #0d0d0d;
}

body {
  position: relative;
  background-color: #0d0d0d;
  overflow-x: hidden;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.py-80 {
  padding: 80px 0;
}

.mb-30 {
  margin-bottom: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.title-xl {
  color: var(--white);
  font-size: 70px;
  line-height: 80px;
}

.title-lg {
  color: var(--white);
  font-size: 48px;
  line-height: 54px;
}

.title-md {
  color: var(--white);
  font-size: 22px;
  line-height: 28px;
}

.title-sm {
  color: var(--white);
  font-size: 16px;
  line-height: 22px;
}

.title-xl,
.title-lg,
.title-md,
.title-sm {
  font-weight: 700;
}

.content {
  color: var(--white);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

.content-light {
  color: var(--white80);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

.white-txt-80 {
  color: var(--white80);
}

.rounded-8 {
  border-radius: 8px;
}

.border-white-30 {
  border: 1px solid #ffffff4d;
}

.border-white-10 {
  border: 1px solid #ffffff1a;
}

.border-red {
  border: 1px solid var(--primary);
}

.blur-50 {
  backdrop-filter: blur(50px);
}

.bg-maingrad {
  background: linear-gradient(
    360deg,
    rgba(13, 13, 13, 0) 40%,
    rgba(183, 28, 28, 0.2) 100%
  );
}

.bg-white-10 {
  background-color: var(--white10);
}

section > .lion-figure {
  position: absolute;
  bottom: 0;
  z-index: -1;
}

.lion-figure.left {
  left: 0;
  transform: scaleX(-1);
}

.lion-figure.right {
  right: 0;
}

.section-title {
  margin-bottom: 40px;
}

.section-title .main-title {
  display: inline-block;
  background-color: var(--white10);
  padding: 9px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.content-list li {
  display: inline-flex;
  align-items: start;
  gap: 10px;
  background-color: var(--white10);
  padding: 5px 20px 5px 10px;
  border-radius: 8px;
}

/****************
  02. Buttons
****************/
.theme-btn {
  display: inline-block;
  position: relative;
  text-decoration: none;
  background-color: var(--primary);
  color: var(--white);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  padding: 10px 24px;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.secondary-btn {
  display: inline-block;
  position: relative;
  text-decoration: none;
  background-color: var(--white10);
  color: var(--white);
  font-size: 16px;
  line-height: 22px;
  padding: 10px 24px;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.theme-btn::before,
.secondary-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: skewX(-30deg);
  transition: transform 0.4s ease;
}

.theme-btn:hover::before,
.secondary-btn:hover::before {
  transform: translateX(100%);
}

.secondary-btn:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}
/****************
  03. Header
****************/
header {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  padding: 20px 0;
  background-color: transparent;
  transition: all 0.3s ease;
}

nav .navbar-nav {
  background-color: var(--white10);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.header-link {
  display: inline-block;
  background-color: transparent;
  text-decoration: none;
  padding: 8px 20px;
  border: none;
  outline: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.header-link:hover {
  color: var(--primary);
}

.header-link.active {
  background-color: var(--primary);
  color: var(--white);
}

.header-sticky {
  background-color: #0d0d0d99;
  backdrop-filter: blur(50px);
  padding: 10px 0;
  border-bottom: 1px solid var(--white10);
}

header .hamburger {
  position: absolute;
  left: auto;
  width: auto;
  height: 0;
  transition-duration: 0.5s;
}

header .hamburger .icon {
  background-color: var(--primary);
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 2px;
  transition-duration: 0.5s;
}

header .hamburger .icon::before {
  content: "";
  background-color: var(--primary);
  position: absolute;
  top: -6px;
  right: 0;
  width: 24px;
  height: 2px;
  transition-duration: 0.5s;
}

header .hamburger .icon::after {
  content: "";
  background-color: var(--primary);
  position: absolute;
  top: 6px;
  right: 0;
  width: 24px;
  height: 2px;
  transition-duration: 0.5s;
}

header .hamburger.open .icon {
  background: transparent;
  top: 6px;
  transition-duration: 0.5s;
}

header .hamburger.open .icon::before {
  background-color: var(--primary);
  -webkit-transform: rotateZ(45deg) scaleX(0.75) translate(2px, 2.5px);
  -moz-transform: rotateZ(45deg) scaleX(0.75) translate(2px, 2.5px);
  -ms-transform: rotateZ(45deg) scaleX(0.75) translate(2px, 2.5px);
  -o-transform: rotateZ(45deg) scaleX(0.75) translate(2px, 2.5px);
  transform: rotateZ(45deg) scaleX(0.75) translate(2px, 2.5px);
}

header .hamburger.open .icon::after {
  background-color: var(--primary);
  -webkit-transform: rotateZ(-45deg) scaleX(0.75) translate(8px, -7px);
  -moz-transform: rotateZ(-45deg) scaleX(0.75) translate(8px, -7px);
  -ms-transform: rotateZ(-45deg) scaleX(0.75) translate(8px, -7px);
  -o-transform: rotateZ(-45deg) scaleX(0.75) translate(8px, -7px);
  transform: rotateZ(-45deg) scaleX(0.75) translate(8px, -7px);
}
/****************
  04. Hero
****************/

.hero {
  display: flex;
  align-items: end;
  padding-bottom: 30px;
  height: calc(100vh - 140px);
  min-height: 600px;
  max-height: 1024px;
  margin: 20px;
  margin-top: 120px;
  background-image: url(../images/backgrounds/hero-bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 24px;
  position: relative;
  z-index: 1;
}

.hero:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 56.36%,
    rgba(0, 0, 0, 0.8) 100%
  );
  border-radius: 24px;
}

.hero .image-list {
  display: inline-flex;
  gap: 0px;
  align-items: center;
  padding: 8px;
  border-radius: 30px;
  margin-bottom: 10px;
}

.hero .image-list li img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.hero .image-list li:not(:first-child) {
  margin-left: -10px;
}

.hero .hero-btns {
  display: flex;
  align-items: center;
  gap: 20px;
}

/****************
  05. About
****************/
.about .section-title > p {
  margin-top: 20px;
}

.about .content-list li:not(:last-child) {
  margin-bottom: 10px;
}

.video-wrapper button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #000000cc;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
  backdrop-filter: blur(50px);
  transition: all 0.3s ease;
}

.video-wrapper button:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

.ripple {
  position: relative;
  text-decoration: none;
  color: #fff;
  width: 70px;
  height: 70px;
  background-color: #0000001a;
  backdrop-filter: blur(50px);
  margin: 0 auto;
  border-radius: 50%;
  -webkit-animation: ripple 1s linear infinite;
  animation: ripple 1s linear infinite;
}

@keyframes ripple {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2),
      0 0 0 10px rgba(0, 0, 0, 0.2), 0 0 0 30px rgba(0, 0, 0, 0.2),
      0 0 0 50px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 10px rgba(0, 0, 0, 0.2),
      0 0 0 30px rgba(0, 0, 0, 0.2), 0 0 0 50px rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2),
      0 0 0 30px rgba(0, 0, 0, 0.2), 0 0 0 50px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2), 0 0 0 30px rgba(0, 0, 0, 0.2),
      0 0 0 50px rgba(0, 0, 0, 0.2);
  }
}
@-webkit-keyframes ripple {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2),
      0 0 0 10px rgba(0, 0, 0, 0.2), 0 0 0 30px rgba(0, 0, 0, 0.2),
      0 0 0 50px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 10px rgba(0, 0, 0, 0.2),
      0 0 0 30px rgba(0, 0, 0, 0.2), 0 0 0 50px rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2),
      0 0 0 30px rgba(0, 0, 0, 0.2), 0 0 0 50px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2), 0 0 0 30px rgba(0, 0, 0, 0.2),
      0 0 0 50px rgba(0, 0, 0, 0.2);
  }
}

/* YT Modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  padding: 1rem;
  transition: all 0.3s ease;
  display: none;
}

.modal-content {
  width: 100%;
  background-color: black;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
  position: relative;
  animation: fadeOut 0.5s ease;
}

.video-frame {
  border-radius: 0.5rem;
  width: 20rem;
  height: 12.5rem;
}

@media (min-width: 640px) {
  .video-frame {
    width: 550px;
    height: 320px;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.no-scroll {
  overflow: hidden;
}

.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/****************
  06. Programs
****************/

.program-card {
  background-color: var(--white10);
  padding: 20px;
  height: 100%;
}

.program-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
  justify-content: space-between;
  min-height: 174px;
}

.program-details h5 {
  margin-bottom: 10px;
}

.program .content-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

/****************
  07. Matches
****************/
.match-card {
  background-color: var(--white10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.match-card:last-child {
  margin-bottom: 0;
}

.match-team {
  display: flex;
  align-items: center;
  gap: 20px;
}

.match-team .box {
  width: 100px;
  height: 100px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  border-radius: 8px;
}

.match-details ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.match-details ul li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.match-details ul li:not(:last-child)::after {
  content: "|";
  display: inline-block;
  color: var(--white80);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.match-details h5 {
  margin: 10px 0;
}

.match-details a {
  display: inline-block;
  text-decoration: none;
  color: var(--primary) !important;
}
/****************
  08. Gallery
****************/
.gallery-list {
  background-color: var(--white10);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.gallery-list li button {
  background-color: transparent;
  padding: 8px 20px;
  border: none;
  outline: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.gallery-list li button:hover {
  color: var(--primary);
}

.gallery-list li button.active {
  background-color: var(--primary);
  color: var(--white);
}
/****************
  09. Team
****************/
.team.program .program-content {
  display: block;
  margin-top: 20px;
  min-height: auto;
}

/****************
  10. Testimonial
****************/

.test-card {
  background-color: var(--white10);
  padding: 20px;
  height: 100%;
}

.test-card .quote {
  margin-bottom: 20px;
}

.test-card .quote img {
  width: auto;
  height: 40px;
}

.test-card .line {
  height: 1px;
  background-color: var(--white10);
  margin: 20px 0;
}

.test-name h5 {
  margin-bottom: 5px;
}

.test-name p {
  color: var(--white80);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.test-slider .owl-item {
  height: 100%;
}

.test-card > p {
  height: 200px;
  overflow-y: auto;
}

.test-card > p::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.test-card > p::-webkit-scrollbar-track {
  background-color: #eeeeee6f;
  border-radius: 4px;
}

.test-card > p::-webkit-scrollbar-thumb {
  background: #ded9d9;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/****************
  11. CTA
****************/
.cta > img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.form-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.input-wrapper label {
  display: inline-block;
  margin-bottom: 10px;
}

.input-wrapper input,
.input-wrapper select {
  width: 100%;
  background-color: var(--white10);
  padding: 10px 16px;
  outline: none;
  color: var(--white);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  text-transform: none;
  transition: all 0.3s ease;
}

.input-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url(../images/icons/down-icon.svg);
  background-position: right 15px center;
  background-repeat: no-repeat;
  text-transform: uppercase;
  color: #ffffff66;
}

.input-wrapper select option {
  appearance: none;
  background-color: var(--white10);
  color: #000;
}

.input-wrapper input::placeholder {
  color: #ffffff66;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  text-transform: uppercase;
}

.input-wrapper input:hover,
.input-wrapper input:focus,
.input-wrapper select:hover,
.input-wrapper select:focus {
  border-color: #ffffff80;
}

.free-session {
  display: flex;
  align-items: start;
  gap: 10px;
  margin-top: 24px;
}

.free-session input {
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: var(--white10);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.free-session input:checked {
  background-image: url(../images/icons/check.svg);
  background-size: 10px 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--primary);
  border-color: var(--primary);
}

#age.valid,
#role.valid,
#slot.valid {
  color: #ffffff;
}

/****************
  12. Contact
****************/
.contact .section-title {
  width: 80%;
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.contact-card {
  display: flex;
  align-items: start;
  gap: 20px;
}

.contact-card .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background-color: var(--white10);
  flex-shrink: 0;
}

.contact-card .icon img {
  width: 20px;
  height: 20px;
}

.contact-card a {
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.contact-card a:hover {
  color: var(--primary) !important;
}

/****************
  13. Footer
****************/

footer > img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.footer-links {
  background-color: var(--white10);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  white-space: nowrap;
  margin-bottom: 0;
}

.footer-links li a {
  background-color: transparent;
  text-decoration: none;
  display: inline-block;
  padding: 8px 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.footer-links li a:hover {
  color: var(--primary) !important;
}

.footer-links li a.active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white) !important;
}

footer h3 {
  margin-bottom: 20px;
}

.social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.social-links li a {
  display: inline-block;
  text-decoration: none;
  background-color: var(--white10);
  padding: 10px 24px;
  transition: all 0.3s ease;
}

.social-links li a:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

.copyright {
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid var(--white10);
}

/****************
  14. Slider
****************/

.slider-button-block {
  display: flex;
  align-items: center;
  gap: 20px;
}

.slider-button-block button {
  width: 44px;
  height: 44px;
  background-color: var(--white10);
  border: 1px solid #ffffff4d;
  border-radius: 8px;
  outline: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.slider-button-block button svg {
  width: 16px;
  height: 16px;
}

.slider-button-block button:active {
  transform: scale(0.95);
}

.slider-button-block button:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

.slider-button-block button svg path {
  fill: var(--white);
}

.gallery-slider + .slider-button-block, .team-slider + .slider-button-block, .program-slider + .slider-button-block {
  width: 100%;
  position: absolute;
  top: 50%;
  margin-top: 0;
  z-index: 5;
}

.gallery-slider + .slider-button-block button, .team-slider + .slider-button-block button, .program-slider + .slider-button-block button {
  position: absolute;
}

.gallery-slider + .slider-button-block button.owl-prev, .team-slider + .slider-button-block button.owl-prev, .program-slider + .slider-button-block button.owl-prev {
  left: -68px;
}

.gallery-slider + .slider-button-block button.owl-next, .team-slider + .slider-button-block button.owl-next, .program-slider + .slider-button-block button.owl-next {
  right: -68px;
}

/****************
  15. Toast Message
****************/

.message-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0px 20px 0px #1f1f1f33;
}

.message-image {
  width: 40px;
  height: 40px;
  background-color: #3bb537;
  border-radius: 50%;
  flex-shrink: 0;
}

.message-content h3 {
  color: #000000;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  margin-bottom: 0;
}

.message-content p {
  color: #7a7a7a;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 0;
}

.message-wrapper button {
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
}

.message-wrapper button svg {
  width: 14px;
  height: 14px;
  vertical-align: top;
}

.message-wrapper button svg path {
  fill: #999999;
}

.message-wrapper button:focus {
  box-shadow: none;
}

#success-toast {
  position: fixed;
  top: 66px;
  right: 20px;
  background-color: #ffffff;
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 20px 0px #1f1f1f33;
  padding: 12px 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: all 0.3s ease-in-out;
  z-index: 9999;
}

#success-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.btn-close {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
}