/* Banner */
.banner {
  padding-top: 150px;
}

.my-banner-img {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 560px;
}

.my-banner-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/cricket/banner.png") center / cover no-repeat;
  background-color: rgba(60, 55, 55, 0.798);
  background-blend-mode: multiply;
  z-index: -1;
  transition: transform 0.7s ease-in-out;
}

.my-banner-img:hover::before {
  transform: scale(1.1);
}

.banner-info p {
  color: var(--primary);
  font-size: 25px;
}


/* About */
.about-info p {
  color: var(--grey);
}


.about-info a {
    color: var(--primary);
    font-weight: 600;
}

.about-img img {
   background-color: blue;
   width: 100%;
}

/* GREEN CORNER BORDER */
.about-img::before,
.about-img::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border: 4px solid var(--primary); /* green */
}

/* TOP LEFT */
.about-img::before {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
  border-radius: 30px 0 0 0;
}

/* BOTTOM RIGHT */
.about-img::after {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
  border-radius: 0 0 30px 0;
}



/* Rules */
.rules .head p {
  color: var(--grey);
}

.rules .head a {
  color: var(--primary);
}

.rules .head a:hover span {
  transform: translateX(-10px);
  display: inline-block;
}

.rule-card {
  background-color: var(--light-bg-green);
  border: 1px solid rgba(61, 61, 61, 0.621);
  transition: all 0.3s linear;

}

.rule-card:hover {
    border-color: var(--primary);
}

.rule-card:hover i {
    transform: scale(1.2);
}

.rule-card i {
    font-size: 25px;
    color: var(--primary);
    transition: transform .3s linear;
    margin-bottom: 20px;
}

.rule-card p {
    color: var(--grey);
}



/* Format */
.format-card {
    background-color: var(--light-bg-green);
    border-radius: 45px;
    border: 1px solid rgba(97, 96, 96, 0.541);
    transition: all .3s linear;
}

.f-det span {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.f-det p {
    color: var(--grey);
}

.f-det-1 span {
    background-color: rgba(196, 91, 77, 0.234);
    color: rgb(197, 54, 35);
}

.f-det-2 span {
    background-color: rgba(55, 66, 165, 0.238);
    color: rgb(47, 66, 239);
}

.f-det-3 span {
    background-color: rgba(191, 195, 110, 0.238);
    color: rgb(219, 226, 90);
}

.f-btn {
    flex-shrink: 0;
    align-items: center;
    gap: 30px;
}

.f-btn>span {
    display: inline-block;
    color: var(--primary);
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 45px;
    border: 1px solid var(--primary);
    background-color: rgba(39, 75, 39, 0.254);
}

.f-btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: black;
    font-weight: 600;
    background-color: var(--primary);
    padding: 20px;
    border-radius: 45px;
    transition: all .3s linear;
}

.f-btn a span {
    display: none;
}

.format-card:hover {
    background-color: rgba(87, 86, 86, 0.322);
}

.format-card:hover .f-btn span {
    display: block;
}

.format-card:hover .f-btn a {
    padding-block: 15px;
}

/* Players */
.players .head p {
    color: var(--grey);
}

.p-card {
    border: 1px solid transparent;
    border-radius: 36px;
    overflow: hidden;
    transition: all .3s linear;
}

.p-info {
    background-color: var(--light-bg-green);
}

.p-info p {
    color: var(--primary);
    font-weight: 600;
}

.p-info a {
    color: var(--grey);
}

.p-card:hover {
    border-color: var(--primary);
}

.p-card img {
    transition: transform .5s ease-in-out;
}
.p-card:hover img {
    transform: scale(1.1);
}

/* Quiz */
.ft-quiz {
    border: 1px solid var(--primary);
    border-radius: 36px;
}