*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;  
}

body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal overflow */
}

/* General Navbar Styles */
.navbar {
    width: 100%;
    margin: 0px;
    padding: 15px 30px;
    background-color: #252a62;
    border-bottom: 2px solid #f1c40f;
    height: 80px;
    border-radius: 0 0 40px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo Styling */
.navbar-brand img {
    height: 80px;
    width: 190px;
    transition: transform 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.1);
}

/* Align Navbar Content */
.navbar-nav {
    margin-left: auto;
}

.nav-item .nav-link {
    margin: 0 15px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    transition: color 0.3s ease, transform 0.3s ease;
}

.nav-item .nav-link:hover {
    color: #f1c40f;
    transform: scale(1.1);
}

/* Dropdown Styles */
.dropdown-menu {
    background-color: #050A44;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    animation: fadeIn 0.3s ease;
    padding: 5px 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    color: white;
    padding: 5px 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-item:hover {
    background-color: #252a62;
    color: white;
}

.navbar .dw-btn{
  cursor: pointer;
  position: relative;
  padding: 6px 20px 24px;
  font-size: 16px;
  color: white;
  border: 2px solid rgb(193, 163, 98);
  border-radius: 34px;
  background-color: transparent;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
  overflow: hidden;
  left: 80px;
}

.navbar .dw-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: inherit;
  scale: 0;
  z-index: -1;
  padding-bottom: 10px;
  /* background-color: rgb(193, 163, 98); */
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.navbar .dw-btn:hover::before {
  scale: 3;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
color: #fff;
}



.navbar .dw-btn:hover {
  color: #212121;
  scale: 1.1;
  box-shadow: 0 0px 20px rgba(193, 163, 98,0.4);
}

.navbar .dw-btn:active {
  scale: 1;
}



/* Download Button Styling */
.navbar button {
    background-color: #ff9900;
    color: white;
    border: none;
    border-radius: 0.625em;
    font-size: 16px;
    font-weight: bold;
    width: 160px;
    height: 40px;
  
    transition: background-color 0.3s ease;
}

.navbar button:hover {
    background-color: orange;
}

/* Toggler button styling */
.navbar-toggler {
    border: none;
    padding: 5px 5px;
    color: white;
    transition: background-color 0.3s ease;
    position: absolute;
    right: 20px; /* Keep it on the right side */
    top: 25px; /* Adjust position */
}

.navbar-toggler-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
}

.navbar-toggler-icon div {
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Hover effect without background color */
.navbar-toggler:hover .navbar-toggler-icon div {
    background-color: #f1c40f;
}

/* Transform icon into 'X' when menu is toggled */
.navbar-toggler.collapsed .navbar-toggler-icon div:nth-child(1) {
    transform: rotate(45deg) translateY(7px);
}

.navbar-toggler.collapsed .navbar-toggler-icon div:nth-child(2) {
    opacity: 0;
}

.navbar-toggler.collapsed .navbar-toggler-icon div:nth-child(3) {
    transform: rotate(-45deg) translateY(-7px);
}



/* Background overlay */


/* Move the square to the bottom of the banner */


.download-box {
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.label-text {
    color: red;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.input-group {
    display: flex;
    align-items: center;
}

input[type="text"] {
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    flex-grow: 1;
    margin-right: 10px;
}

.get-app-btn {
    background-color: green;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.get-app-btn:hover {
    background-color: darkgreen;
}

/* Subheading animation */
.animated-subtext {
    font-size: 2rem;
    color: #fff;
    font-weight: 700;
    animation: fadeInUp 2s ease-in-out;
    position: relative;
    z-index: 2;
    top: 140px;
    margin-bottom: 20px;
}

/* Particle effect */
.particle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%);
    animation: particleAnimation 5s infinite;
}

@keyframes particleAnimation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 100%;
    }
}


/* Fade-in and Fade-up Animations */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .animated-text {
        font-size: 2.5rem;
    }
    .animated-subtext {
        font-size: 1.2rem;
    }
}


.items-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px 0;
}

.item {
    text-align: center;
}

.item img {
    width: 150px; /* Adjust size as needed */
    height: 150px; /* Adjust size as needed */
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item:hover img {
    transform: scale(1.1); /* Scale up the image slightly */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
    border:  dotted;
}

.item h3 {
    font-size: 16px;
    margin: 0;
}

.item p {
    color: gray;
    font-size: 14px;
}


.second-section{
    margin: 0 auto;
}


.second-section .lead {
    font-size: 1.25rem;
    color: #6c757d;
}

.second-section .col-md-6 {
    margin-bottom: 1.5rem;
}

.second-section img {
    max-width: 100%;
    height: auto;
}

.second-section h4 {
    font-size: 1.5rem;
    margin: 0.5rem 0;
}

.second-section p {
    color: #495057;
}

.second-section .btn {
    background-color: #A91D3A;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.second-section .btn:hover{
    background-color: orange;
}

.download{
    background-color: rgb(91, 80, 80);;
    display: flex;
    padding-top: 30px;
    padding: 8px;
}

.download-text{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    padding-top: 20px;
}

.download-text h2{
    color: white;
}

.download-text span{
    color: red;
}

.download img{
    padding-top: 2px;
    height: 50px;
    width: 160px;
    cursor: pointer;
}

.how-to-play {
    padding: 50px 0;
    
}

.how-to-play h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}

.how-to-play .highlight {
    color: #ff6f61;
}

.how-to-play .cta-link {
    display: inline-block;
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 20px;
}

.how-to-play .cta-link:hover {
    text-decoration: underline;
}

.how-to-play .sub-text {
    font-size: 16px;
    color: #666;
    margin: 0 auto 40px;
    max-width: 800px;
}

.step-wrapper {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

.step-item {
    padding: 20px;
    background-color: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 330px; /* Ensure a fixed width to replicate the boxes in the image */
    position: relative;
    height: 117px;
}

.step-number {
    background-color: #17c749;
    border: 4px solid #fff;
    color: #fff;
    padding-bottom: 34px;
    font-size: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    position: absolute;
    top: -13px; /* This moves the number above the box */
    left: 10%;
    transform: translateX(-50%);
}

.step-image-wrapper {
    margin: 20px 0;
}

.step-image {
    width: 100%; /* Adjust the image size */
    max-width: 120px;
    height: 60px;
    margin: 0 auto;
    position: absolute;
    top: -23px; /* This moves the number above the box */
    left: 60%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.step-item h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.step-item p {
    font-size: 14px;
    color: #666;
}

/* Responsive */
@media (max-width: 768px) {
    .step-wrapper {
        flex-direction: column;
    }

    .step-item {
        width: 100%;
        margin-bottom: 30px;
    }

    .step-image {
        max-width: 120px;
    }
}


.score {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    margin: 20px;
}
.score img {
    max-height: 50px;
    margin: 0 10px;
}

.score h2{
    padding: 0px 20px;
    color: #050A44;
}

.score span {
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
}
.score .sensix {
    max-height: 40px;
}

.why {
    text-align: center;
    background-color: #f9f9f9;
    padding: 50px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin: 20px 0;
}

.why:hover{
    background-color: beige;
    cursor: pointer;
}
.why h2 {
    font-size: 2.1rem;
    margin-bottom: 20px;
    color: #333;
}
.why h2 span {
    color: #A91D3A;
}
.why p {
    font-size: 1.2rem;
    color: #555;
    line-height: 1.6;
}

.middle_content h3{
    text-align: center; 
    padding: 20px; 
    max-width: 800px; 
    margin: 0 auto;
}

.middle{
    padding-top: 20px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.middle h4{
    font-size: 22px;
    color: black;
    text-align: center;
    align-items: center;
    font-weight: bold;
    justify-content: center;
}

.middle h6{
    font-size: 18px;
}

.middle p{
    font-size: 17px;
    padding: 10px;
}
.middle span{
    color: red;
}

.middle h6{
    color: #2072E4;
    background: linear-gradient(90deg, #FFFFFF 0%, #E3EFFF 50.93%, #FFFFFF 101.85%);
}

.play{
    background-color: #d5d5d5;
    margin: 0 auto;
    display: flex;
    align-items: center;
    text-align: center;
}

.play h5{
color: black;
font-size: 37px;
}

.play span{
    color: red;
    font-size: 37px;
}

.play p{
    font-size: 17px;
}

.play{
    display: flex;
    padding: 15px;
}

.play_img{
    flex-direction: column;
    display: flex;
    margin: 35px 0px;
    text-align: center;
    align-items:center ;
    justify-content: space-between;
    transition: all 0.6s ease;
    cursor: pointer;
}

.play_img:hover{
    transform: scale(1.1);
}

.play-box{
    margin-top: 10px;
    text-align: center;
}

.step-box{
    display: inline-block;
    width: 100%;
}

.step-box ul{
    margin: 0 auto;
}

.getapp {
   
    background-size: cover;
    background-position: center;
    padding: 10px;
    padding: 30px;
    color: #00093c;
    text-align: center;
}

.getapp h3 {
    padding-top: 20px;
    font-size: 36px;
    margin-bottom: 40px;
    font-weight: 700;
    color: #232946;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.getapp span {
    color: red;
}

.carousel-inner .carousel-item img {
    height: 450px;
    width: 320px;
    border-radius: 20px;
    margin: 0 auto;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

.win_crore {
    margin: 10px;
    text-align: left;
}

.win_crore ul {
    padding: 0;
}

.win_crore ul li {
    list-style: none;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.win_crore ul li img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin-right: 10px;
}

.win_crore h6 {
    font-size: 18px;
    margin: 0;
}

.getapp_two {
    display: flex;
    justify-content: start; /* Center-aligns the images within the flex container */
    align-items: center; /* Ensures images are vertically centered */
    margin: 10px 0; /* Sets a margin around the flex container */
    gap: 5px; /* Removes any gap between the images */
}

.getapp_two img {
    cursor: pointer;
    height: 60px;
    width: 160px;
    margin: 0; /* Removes any additional margins */
    padding: 0; /* Ensures there's no padding around the images */
}


.scan {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.scan img {
    height: 100px;
    margin-right: 20px;
}

.scan p {
    font-size: 16px;
    color: red;
}

.image-gallery {
    display: flex;
    gap: 10px; /* Adjust the spacing between images */
    justify-content: center; /* Center the images horizontally */
}

.gallery-item {
    overflow: hidden;
    display: inline-block;
    transition: transform 0.3s ease; /* Transition for scaling */
}

.gallery-item img {
    border: 0px solid black;
    border-radius: 50%;
    width: 100%;
    height:200px;
    gap: 20px;
    transition: transform 0.3s ease; /* Smooth zoom effect */
}

.gallery-item:hover img {
    transform: scale(1.1); /* Zoom in on hover */
    background-color: rgb(199, 143, 199);
    padding: 10px;
}

.gallery-item:hover {
    transform: translateY(-10px); /* Slight lift effect on hover */
}


.feature-section {
    padding: 50px 20px;
    text-align: center;
}

.feature-section h2 {
    font-size: 18px;
    color: #a9b0c9;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.feature-section h1 {
    font-size: 36px;
    margin-bottom: 40px;
}

.feature-section h1 span {
    color: #b758f9; /* Highlight color */
}

.feature-section {
   
    padding: 60px 20px;
    text-align: center;
    color: #333;
}

.feature-section h2 {
    font-size: 28px;
    margin-bottom: 10px;
    color: #ff6f61; /* Accent color */
}

.feature-section h1 {
    font-size: 36px;
    margin-bottom: 40px;
    font-weight: 700;
    color: #232946; /* Darker shade for better readability */
}

.feature-section span {
    color: #ff6f61; /* Highlight the key word */
}

.feature-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.features-left,
.features-right {
    display: flex;
    flex-direction: column;
    gap: 25px;
    flex: 1;
    max-width: 350px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    text-align: left;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.feature-item img {
    width: 50px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
}

.feature-info {
    flex: 1;
}

.feature-info h3 {
    font-size: 18px;
    margin: 0 0 8px;
    color: #333;
}

.feature-info p {
    font-size: 14px;
    color: #666;
}

.phone-mockup {
    flex: 1;
    max-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-mockup img {
    width: 100%;
    height: auto;
    border-radius: 20px;
 
}

@media (max-width: 992px) {
    .feature-content {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 576px) {
    .features-left,
    .
}


.blog{
    border-bottom: 1px solid white;
}

.blog h2{
    font-size: 34px;
    color: red;
    text-align: center;
    align-items: center;
    padding-top: 10px;
}

.blog ul li{
    color: rgb(124, 28, 28);
    font-size: 22px;
}

.blog ul  p{
    color: black;
}

.score-img img{
    display: flex;
    height: 500px;
    width: 200px;
}

.score-img .img1{
    height: 40px;
    width: 100px;
}

.score-img h4{
   color: #A91D3A;
   font-size: 30px;
   padding-top: 50px;
}

.score-img button{
    height: 50px;
    width: 140px;
    border: 0px solid black;
    padding: 5px;
    border-radius: 30px;
}

.score-img button:hover{
    background-color: rgba(255, 166, 0, 0.856)
}

.why-text{
    justify-content: center;
}
.why-text p{
    justify-content: center;
    font-size: 17px;
}
#main{
    height: 500px;
    width: 580px;
}

.why-text {
    padding: 2rem 0;
    margin-bottom: 20px;
    /* background-color: #f9f9f9; */
    text-align: center;
}

.why-text .container {
    max-width: 1200px;
    margin: auto;
}

.features-column {
    margin: 20px 0;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.1rem;
    text-align: left;
}

.arrow-icon {
    width: 10px;
    height: 10px;
    margin-right: 10px;
}

.why-text span {
    font-size: 14px;
    font-weight: 700;
    color: #A91D3A;
    margin-bottom: 5px;
}

.why-text p {
    font-size: 14px;
    color: #333;
    margin: 0;
    line-height: 1.5;
}

.main-image {
    max-width: 100%;
    height: auto;
}



.download-image{
    width: 100%;
    padding: 0 auto;
}

.fa-solid{
    color: #A91D3A;
}
.middle_content{
    text-align: center;
    justify-content: center;
    padding-bottom: 80px;
    background-color: #A91D3A;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
 }
 
 .middle_content .col-sm-4{
     text-align: center;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
 }
 
 .middle_content h3{
     padding-top: 20px;
     color: white;
     text-align: center;
     align-items: center;
     padding-left: 80px;
 }
 .middle_content span{
     color: yellow;
     font-weight: bold;
 }
 
 .middle_content img{
     margin-top: 10px;
     border: 2px solid yellow;
     border-radius: 80px;
     margin: 5px;
     cursor: pointer;
 }
 
 .middle_content h6{
     font-size: 17px;
     color: white;
 }
 
 
 .section_container{
     padding: 50px 20px;
     text-align: center;
     max-width: 1100px;
     margin: auto;
     padding: 1rem 1rem;
     text-align: center;
    
 }
 
 .section_container h2{
     font-size: 1.5rem;
     font-weight: 600;
 
 }
 
 .section_container h2::after{
     position: absolute;
     content: "";
     left: 50%;
     bottom: 0;
     transform: translateX(-50%);
     height: 2px;
     width: 5rem;
     background-color: #0C3267;
 }
 
 .section_grid{
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
    
 }
 
 .section_card{
     position: relative;
     isolation: isolate;
     overflow: hidden;
     padding: 5rem 2rem 2rem;
     background-color: white;
     border-radius: 5px;
     box-shadow: 5px 5px 10px rgba(0, 0, 0, .1);
     transition: 0.3s;
     transform: translateY(20px);
     animation: fadeInUp 1s forwards;
 }
 
 .section_card::before{
     position: absolute;
     content: "";
     top: 0;
     left: 0;
     transform: translate(-50%, -50%);
     width: 75%;
     aspect-ratio: 1;
     border-radius: 100%;
     background-color: #0C3267;
     z-index: -1;
     transition: 0.5s;
 }
 
 .section_card span{
     position: absolute;
     top: 0;
     left: 0;
     padding: 1rem;
     font-size: 3rem;
     color: white;
 }
 
 .section_card h4{
     margin-top: 4rem;
     margin-bottom: 1rem;
     font-size: 1.5rem;
     font-weight: 600;
     color: #0C3267;
     transition: 0.3s;
 }
 
 .section_card h4:hover{
     color: white;
 }
 
 .section_card p{
     margin-bottom: 2rem;
     transition: 0.3s;
 }
 
 .section_card img{
     margin-bottom: 1rem;
     max-width: 100px;
     border-radius: 100%;
     border: 2px solid #0C3267;
     transition: 0.3s;
 }
 
 .section_card h5{
     font-size: 1.25rem;
     font-weight: 600;
     color: #0C3267;
     transition: 0.3s;
 }
 
 .section_card h6{
     font-size: 1rem;
     font-weight: 400;
     transition: 0.3s;
 }
 
 .section_card:hover::before{
     width: 400%;
 }
 
 .section_card:hover :is(p, h6){
 color: white;
 }
 
 .section_card:hover img{
     border-color: white;
 }
 
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 

 .wrapper {
    max-width: 75%;
    margin: auto;
    padding: 30px;
  }
  
  .wrapper h2 {
    color: #A91D3A;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
  }
  
  .faq {
    margin: 15px 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
  }

  .faq h6:hover{
    color: white;
  }
  
  .accordion {
    background-color: #f8f9fa;
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 1.2rem 1.5rem;
    border: none;
    width: 100%;
    outline: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
  }
  
  .accordion:hover {
    background-color: #00093c;
    color: white;
  }
  
  .accordion i {
    font-size: 1.4rem;
    transition: transform 0.3s ease;
  }
  
  .panel {
    padding: 0 1.5rem;
    background-color: #ffffff;
    overflow: hidden;
    display: none;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.7);
    border-left: 4px solid #A91D3A;
    border-radius: 0 0 10px 10px;
  }
  
  .panel p {
    margin: 1rem 0;
  }
  
  .faq.active .panel {
    display: block;
    animation: fadeIn 0.4s ease;
  }
  
  .faq.active i {
    transform: rotate(180deg);
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  


.image-slider {
    display: flex;
    flex-flow: column;
    width: clamp(360px, 96vw, 830px);
    aspect-ratio: 16 / 9;
    min-height: 300px;
    overflow: hidden;
    border-radius: 8px;
    container-type: inline-size;
    contain: content;
    background-color: #0006;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.3) 0px 2px 4px,
        rgba(0, 0, 0, 0.25) 0px 4px 8px, rgba(0, 0, 0, 0.2) 0px 8px 16px,
        rgba(0, 0, 0, 0.15) 0px 16px 32px;
}

.slider__content {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
}

.slider-control--button {
    border: 0;
    background: 0;
    outline: 0;
    cursor: pointer;
    place-content: center;
    padding-inline: 3vw;
    z-index: 1;
    display: grid;
}

.icon {
    height: 2rem;
    width: 2rem;
    fill: var(--icon-default);
    border-radius: 50%;
}

.slider-control--button:where(:hover) {
    background-image: linear-gradient(
        to var(--position),
        #0000 0%,
        #0002,
        80%,
        #0006 100%
    );
    .icon {
        fill: var(--icon-accent);
        background: #0001;
    }
}

.slider-control--button:active {
    outline: 0.2em solid hsl(204 100 53);
    outline-offset: -0.5em;
}

.prev-button {
    --position: left;
}
.next-button {
    --position: right;
}

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

.slider-navigation {
    z-index: 10;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-columns: 100%;
    gap: 1.25rem;
    padding: 1rem;
    place-content: center;
    background-color: var(--navigation-color);
    backdrop-filter: blur(6px);
}

.nav-button {
    display: grid;
    width: 100%;
    height: 100%;
    border-radius: 0.5em;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border: 0;
    aspect-ratio: 16 / 9;
    transition: filter 150ms linear, scale 266ms ease;
}

.thumbnail {
    display: block;
    max-width: 100%;
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.nav-button[aria-selected="true"] {
    scale: 1.1;
}

.nav-button[aria-selected="true"],
.nav-button:focus-visible {
    outline: 0.2em solid var(--active-color);
    outline-offset: 0.2em;
}

.nav-button[aria-selected="false"] {
    filter: opacity(0.7);
}

.nav-button[aria-selected="false"]:where(:hover, :focus-visible) {
    filter: opacity(1);
}

@container (max-width: 660px) {
    .nav-button:not(:has(img)) {
        background-color: rgb(241, 235, 232);
    }

    .slider-navigation {
        display: flex;
        justify-content: center;
        padding-block: 1.5em;
    }

    .nav-button {
        inline-size: 0.625rem;
        aspect-ratio: 1;
        border-radius: 50%;
    }

    .nav-button > .thumbnail {
        display: none;
    }

    .nav-button[aria-selected="true"] {
        background-color: black;
        scale: 1.5;
    }
}


footer{
    width: 100%;
      background-color: #252a62;
     
}

.slide-image .container img{
    width: 10%;
    height: 500px;
    object-fit: cover;
    border-radius: 10px;
    transition: all ease-in-out 0.5s;
  }
  
  .slide-image .container img:hover{
  width: 25%;
  opacity: 1; /* Make it fully opaque */
    transform: scale(1.1); /* Scale up the image */
  }

  .slide-image .container{
    margin: 50px auto;
    width: 70%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  
  .deal-info{
    padding-bottom: 30px;
  }
.deal-info img{
    max-width: 100%; /* Ensures the image scales within its container */
    border-radius: 25px; ;
    animation: float 3s ease-in-out infinite;
    height: 300px;
    gap: 20px;

}

.footer .logo{
height: 200px;
width: 200px;
cursor: pointer;
}

footer ul{
   padding-left: 4px;
}

.promo-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; /* This ensures space between the content and image */
    padding: 50px 20px;
    position: relative;
    overflow: hidden;
}

.promo-content {
    max-width: 50%; /* Limits content width to half of the container */
    padding: 20px;
    z-index: 2;
}

.promo-image {
    max-width: 50%; /* Limits image width to half of the container */
    text-align: right; /* Aligns image to the right */
    z-index: 1;
    padding: 40px;
    padding-bottom: 30px;
    height: 500px;
}

.promo-image img {
    max-width: 100%; /* Ensures the image scales within its container */
    border-radius: 88% 12% 49% 51% / 44% 78% 22% 56% ;
    animation: float 3s ease-in-out infinite;

}

.promo-stats {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 10px;
    padding: 20px;
    position: absolute;
    bottom: -30px;
    z-index: 2;
    border-radius: 40px;
    gap: 10px;
    background-color: #00093c;
}

.stat-item {
    text-align: center;
    flex: 1;
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s ease;
   
}

.stat-item span {
   
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #ff477e;
}

.stat-item p {
    font-size: 14px;
    margin: 10px 0 0;
    color: white;
}

.stat-item:hover {
    transform: translateY(-10px);
}



.deal {
    padding: 20px 0;
}

.deal img {
    height: 400px;
    width: 100%;
    max-width: 600px;
    border-radius: 88% 12% 49% 51% / 44% 78% 22% 56%;
    object-fit: cover;
    animation: float 3s ease-in-out infinite;
}
@keyframes float {
    0% {
        transform: translateY(0); /* Start position */
    }
    50% {
        transform: translateY(-10px); /* Move up slightly */
    }
    100% {
        transform: translateY(0); /* Return to start position */
    }
}

@media (max-width: 576px) {
    .deal img {
        height: auto;
        width: 100%;
    }
}
footer{
    width: 100%;
    position: absolute;
    background: linear-gradient(to right, #00093c, #664bb6);
    color: orange;
    padding: 50px 0 10px;
    border-top-left-radius: 125px;
    font-size: 13px;
    line-height: 30px;
}

footer .row{
    width: 85%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

footer.col{
    flex-basis: 25%;
    padding: 10px;
    /* text-align: left; */
    margin-left: 70px;
}

.col:nth-child(2), .col:nth-child(3){
    flex-basis: 15%;
}

footer .logo{
    width: 160px;
    margin-bottom: 30px;
}

.footer .col h3{
    width: fit-content;
    margin-bottom: 40px;
    position: relative;
    font-size: 23px;
}

.footer .col ul{
    margin-left: 130px;
}

.footer .col ul li{
    list-style: none;
    margin-bottom: 40px; 
   /* margin-left: 20px;  */
     align-items: left;
}
.footer .col a{
    text-decoration: none;
    color: white;
    font-size: 15px;
    padding: 6px 0;
    display: inline-block;
    font-weight: bold;
    margin-bottom: 20px;
   
}
.wrapper-icon {
    display: inline-flex;
    list-style: none;
    height: 100px;
    width: 100%;
    padding-top: 40px;
    font-family: "Poppins", sans-serif;
    justify-content: center;
  }
  
  .wrapper-icon .icon {
    position: relative;
    background: #fff;
    border-radius: 50%;
    margin: 10px;
    width: 47px;
    height: 48px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  .wrapper-icon .tooltip {
    position: absolute;
    top: 0;
    font-size: 14px;
    background: #fff;
    color: #fff;
    padding: 5px 5px;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  .wrapper-icon .tooltip::before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    background: #fff;
    bottom: -3px;
    left: 10%;
    transform: translate(-50%) rotate(45deg);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  .wrapper-icon .icon:hover .tooltip {
    top: -45px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  .wrapper-icon .icon:hover span,
  .wrapper-icon .icon:hover .tooltip {
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
  }
  
  .wrapper-icon .facebook:hover,
  .wrapper-icon .facebook:hover .tooltip,
  .wrapper-icon .facebook:hover .tooltip::before {
    background: #fff;
    color: #1877f2;
  }
  
  .wrapper-icon .twitter:hover,
  .wrapper-icon .twitter:hover .tooltip,
  .wrapper-icon .twitter:hover .tooltip::before {
    background: #1da1f2;
    color: #fff;
  }
  
  .wrapper-icon .instagram:hover,
  .wrapper-icon .instagram:hover .tooltip,
  .wrapper-icon .instagram:hover .tooltip::before {
    background: #e4405f;
    color: #fff;
  }
  
form{
    padding-top: 10px;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    margin-bottom: 50px;
}

form .far{
    font-size: 18px;
    margin-right: 10px;
}

form input{
    width: 100%;
    background: transparent;
    color: #ccc;
    border: 0;
    outline: none;
}

form button{
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
}

form button .fas{
    font-size: 16px;
    color: #ccc;
}

.social-icons .fab{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    background: #fff;
    margin-right: 15px;
    cursor: pointer;
}

footer hr{
    width: 90%;
    border: 0;
    border-bottom: 1px solid #ccc;
    margin: 20px auto;
}

footer p{
text-align: center;
font-size: 14px;
}

.underline {
    width: 9%; /* Adjust width as needed */
    height: 4px;
    margin-bottom: 20px;
    background: #767676;
    border-radius: 3px;
    position: absolute;
    bottom: 10; /* Positioned at the bottom of the heading */
    left: 10;
    overflow: hidden;
}

.underline span {
    width: 15px;
    height: 100%;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 0px;
    animation: moving 2s linear infinite;
}

@keyframes moving {
    0% {
        left: -20px;
    }

    100% {
        left: 100%;
    }
}


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

  .banner-text {
    animation: fadeIn 2s ease-out;
  }


  .about {
    padding: 50px 20px;
   
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.col-sm-6 {
    flex: 1;
    min-width: 300px;
}

.about-image img {
 
    width: 100%;
    border-radius: 10px;
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-image img:hover {
    transform: scale(1.01);
   
}

.about-content {
    padding: 20px;
}

.about-content h4 {
    font-size: rem;
    margin-bottom: 10px;
  
    letter-spacing: 1px;
}

.about-content p {
    font-size: 18px;
    line-height: 1.6;
    color: #555;
    text-align: justify;
}

@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }
    .about-content, .about-image {
        text-align: center;
    }
    .about-content p {
        text-align: center;
    }
}

.about{
    text-align: center;
    align-items: center;
    padding-top: 10px;
}

.about p{
    font-size: 18px;
    text-align: start;
   justify-content: center
}
.about img{
    padding-top: 20px;
    margin: 0 auto;
    height: 300px;
    width: 400px; 
    transition: all 0.6s ease;
    cursor: pointer;
    border-radius: 100px;
    border-radius: 88% 12% 89% 11% / 29% 55% 45% 71%;
    animation: float 3s ease-in-out infinite;
}



.box1{
    padding-top: 20px;
    justify-content: center;
    margin: 0 auto;
    padding-bottom: 0;
    margin-bottom: 0;
}

.box1 h4{
    font-size: 35px;
    color: #A91D3A;
    font-weight: bold;
    padding-top: 30px;
    margin-top: 0;
}

.box1 p{
    font-size: 17px;
    align-items: center;
    margin-bottom: 0;
}

.box1 img{
    height: 400px;
    width: 350px;
    margin-top: 0;
    vertical-align: middle;
} 

.about-banner {
    position: relative;
    background: url('img/office.jpg') no-repeat center center/cover;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); 
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    max-width: 1200px;
    padding: 0 20px;
}

h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.btn {
    padding: 10px 20px;
    background-color: #004aad;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #003a8b;
}

.our-mission {
    padding: 20px 20px;
    color: black;
    text-align: center;
}

.our-mission .container {
    max-width: 1200px;
    margin: 0 auto;
}


h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

.our-mission {
  
    padding: 50px 20px;
    text-align: center;
}

.our-mission h2 {
    font-size: 36px;
    color: #A91D3A;
    margin-bottom: 40px;
    font-weight: bold;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}



.mission-items {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px; /* Added gap for better spacing */
}

.mission-item {
   
    padding: 30px;
    border-radius: 12px;
    max-width: 350px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mission-item:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);
}

.mission-item img {
    width: 70px; /* Adjusted size for consistency */
    height: 70px;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.mission-item:hover img {
    transform: scale(1.1); /* Slight hover effect on icons */
}

.mission-item h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #A91D3A;
}

.mission-item p {
    font-size: 15px;
    margin-bottom: 0;
    color: #555;
    text-align: left; /* Improved readability */
}

/* Responsive Design */
@media (max-width: 768px) {
    .mission-items {
        flex-direction: column;
        align-items: center;
    }
}



.cricket p{
    text-align: center;
    align-items: center;
}

.cricket li{
    margin: 5px 0;
}

.cricket ol{
    line-height: 20px;
}

.cricket ul li{
    list-style: none;
}

.centered-list {
    margin: 0 auto;
    text-align: center;
    list-style-position: inside;
}

.right-aligned-list {
    margin: 0 auto;
    text-align: center;
    list-style-position: inside;
}

.cricket h3{
    padding-top: 50px;
    padding: 20px;
    font-size: 30px;
    font-weight: bold;
}

.cricket span{
    color: #A91D3A;
}


.team{
    padding-top: 70px;
   padding: 20px;
   /* background-color: #d5d5d5; */
}

.team h4{
    padding: 20px;
    font-size: 30px;
    font-weight: bold;
}

.team span{
    color: #A91D3A;
}

.refund-img h4 {
    font-size: 24px;
    color: #A91D3A;
    text-align: center;
    margin-bottom: 20px;
}

.refund-img img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

hr {
    margin: 20px 0;
}

.contest {
    font-size: 16px;
}

.contest ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contest li {
    margin-bottom: 10px;
}

.contest ol {
    list-style: decimal;
    margin-left: 20px;
}

.contest h5{
    font-size: 18px;
    color: black;
}
.conditions {
    padding: 30px;
    background-color: #f3f3f3;
    color: #444;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.8;
}

.conditions .container {
    max-width: 900px;
    margin: 0 auto;
}

.conditions-para h5 {
    font-size: 18px;
    margin-bottom: 15px;
    text-transform: uppercase;
    position: relative;
}


.conditions-para p {
    font-size: 15px;
    margin-bottom: 15px;
    line-height: 1.7;
}

.conditions-para{
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section .col-sm-4{
    padding-top: 10px;
    border: 1px solid black;
    border-radius: 35px;
    padding: 10px;
    background-color: white;
}


.section h5{
    font-size: 25px;
    font-weight: bold;
}



.overview{
    text-align: center;
    padding: 20px; 
    max-width: 800px; 
    margin: 0 auto;
}

.overview h4{
    font-size: 30px;
    font-weight: bold;
    color: #A91D3A;
    margin-bottom: 20px;
}

.overview span{
    color: black;
    margin: 5px;
}

.overview p{
  font-size: 19px;
}


.point{
    text-align: center; /* Center-aligns the text */
    padding: 20px; /* Adds padding around the content */
    max-width: 800px; /* Optional: Limits the width for better readability */
    margin: 0 auto;
}
.point h4{
    padding: 10px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: #A91D3A;
}

.point span{
    color: black;
}

.point p{
    font-size: 19px;
}

.dream {
    text-align: center; /* Center-aligns the text within the section */
    padding: 20px; /* Adds padding around the content */
    background-color: #f9f9f9; /* Light background color */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

.dream h4 {
    color: #333; /* Darker color for the heading */
}

.dream span {
    color: red; /* Highlight color for "Dream11" */
}

.dream p {
    font-size: 1.1rem; /* Slightly larger font for the paragraph */
    color: #555; /* Softer text color for readability */
}

.dream ul {
    margin: 20px 0; /* Space around the list */
    text-align: left; /* Align list items to the left within the column */
}

.dream ul li {
    margin-bottom: 10px; /* Space between list items */
    font-size: 1rem; /* Font size for the list */
    display: flex; /* Flex display for icon alignment */
    align-items: center;
    gap: 8px; /* Space between icon and text */
}

.dream h6 {
    color: #A91D3A; /* Highlighted color for important text */
    font-weight: bold; /* Bold for emphasis */
}

.table {
    margin: 0; /* Remove default margin */
    border: 1px solid #ddd; /* Border for the table */
}

.table th, .table td {
    padding: 12px; /* Padding for cells */
    text-align: center; /* Center-align text in cells */
}

.table thead th {
    background-color: #4CAF50; /* Header background color */
    color: white; /* Header text color */
}

.table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Alternating row color */
}

.table tbody tr:hover {
    background-color: #f1f1f1; /* Hover effect for rows */
}
  
.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: #333;
  }
  
  .benefits-list {
    list-style-type: none;
    padding: 0;
  }
  
  .benefits-list li {
    text-align: start;
    margin-bottom: 20px;
    font-size: 18px;
    color: #555;
  }
  
  .benefit-title {
    font-weight: bold;
    color: #007bff;
  }
  .why-cricket {
    padding: 60px 15px; /* Adjust padding for mobile view */
    background-color: #f8f9fa;
}

.why-cricket h4 {
    font-size: 1.5rem; /* Adjust font size for responsiveness */
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
    padding-bottom: 10px;
}

.why-cricket ul {
    padding: 0;
    list-style: none;
}

.why-cricket ul li {
    font-size: 1rem; /* Adjust font size for mobile view */
    margin-bottom: 10px;
}

.why-cricket .video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px; /* Add spacing above video */
}

.video-scorepl {
    border-radius: 50%; /* Change to a smaller border radius for a better look */
    width: 100%; /* Make sure it scales with the container */
    max-width: 400px; /* Limit maximum width */
    height: auto; /* Maintain aspect ratio */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/*fantasy football starts*/
.football h4{
font-size: 28px;
font-weight: bold;
text-align: start;
text-align: center; /* Center-aligns the text */
    padding: 20px; /* Adds padding around the content */
    max-width: 800px; /* Optional: Limits the width for better readability */
    margin: 0 auto;
}

.football_fantasy h4{
    color: #A91D3A;
}

.football_fantasy p{
    font-size: 19px;
}

.football h3{
    font-size: 28px;
    font-weight: bold;
    color: #A91D3A;
    text-align: center; 
    padding: 20px; 
    max-width: 800px; 
    margin: 0 auto;
}

.football p{
    font-size: 17px;
    text-align: start;
    text-align: center; /* Center-aligns the text */
    padding: 20px; /* Adds padding around the content */
    max-width: 800px; /* Optional: Limits the width for better readability */
    margin: 0 auto;
}

.football ul li{
    list-style: none;
}

.rules{
    padding-top: 50px;
    text-align: start;
    text-align: center; /* Center-aligns the text */
    padding: 20px; /* Adds padding around the content */
    max-width: 800px; /* Optional: Limits the width for better readability */
    margin: 0 auto;
}

.rules h5{
    font-size: 22px;
    font-weight: bold;
}

.rules h6{
    font-weight: bold;
}

.rules ul li{
    font-size: 18px;
}



.table_two{
    border: 0px solid black;
    padding: 30px;
    border-radius: 40px;
    width: 70%;
    text-align: center; /* Center-aligns the text */
    padding: 20px; /* Adds padding around the content */
    max-width: 800px; /* Optional: Limits the width for better readability */
    margin: 0 auto;
}

.rules li{
    list-style: none;
}

.rules h5,h6{
    color: #A91D3A;
}

.table_two h6{
color: #A91D3A;
font-size: 20px;
}

.table_two {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.kabadi h4{
padding-top: 30px;
text-align: center; 
 padding: 20px;
max-width: 800px;
margin: 0 auto;
padding: 10px;
font-size: 28px;
font-weight: bold;
}

.kabadi p{
    font-size: 17px;
    text-align: center; 
    max-width: 800px; 
    margin: 0 auto;
}

.kabadi img{
    font-size: 10px;
}

.kabadi span{
    color: #A91D3A;
    font-weight: bold;
   
}

.kabadi h3{
    text-align: center; 
    max-width: 800px; 
    margin: 0 auto;
}

.kabadi .col-sm-4{
    background-color: #d5d5d5;
    padding: 10px;
    font-size: 19px;
}

.app{
    text-align: center;
    align-items: center;
    padding: 10px;
    background-color: #d5d5d5;
   
}

.app h4{
    padding-top: 20px;
    font-size: 28px;
}

.app span{
    color: #A91D3A;
    font-weight: bold;
}

.app img{
    height: 50px;
    width: 130px;
}

.app p{
    font-size: 15px;
}

.refund-img{
    padding-top: 30px;
    text-align: center; 
}


.refund-img  span{
color: #A91D3A;
font-weight: bold;
}

.refund-img img{
    height: 450px;
    width: 450px;
}

.contest-refund {
    padding: 20px;
    border: 1px solid #ddd;    /* Subtle border */
    border-radius: 8px;        /* Rounded corners for a modern look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    margin-bottom: 40px;       /* Add space below the container */
}

/* Heading Styling */
.contest-refund h5 {
    font-size: 18px;
    text-align: left;
    margin-bottom: 10px;
    text-transform: uppercase; /* Emphasize headings */
    padding-bottom: 8px;
}

/* List Items Styling */
.contest-refund ul li {
    font-size: 15px;
    color: #333;               /* Darker text for better readability */
    margin-bottom: 15px;       /* Spacing between items */
    line-height: 1.6;          /* Comfortable line spacing */
    padding-left: 20px;        /* Indentation for hierarchy */
    position: relative;
    list-style: none;
    text-align: start;
    line-height: 1.2;
}

/* Custom List Bullets */
.contest-refund ul li:before {
             
    font-size: 20px;           /* Increase bullet size */
    position: absolute;
    left: 0;
    top: 0;
}

/* Icon Integration (optional) */
.contest-refund ul li i {
    margin-right: 10px;        /* Spacing for icons if used */
    color: #ff6f61;            /* Icon color for consistency */
}

/* Responsive Design */
@media (max-width: 768px) {
    .contest-refund {
        padding: 15px;
    }
    .contest-refund h5 {
        font-size: 16px;
    }
    .contest-refund ul li {
        font-size: 14px;
    }
}
 .banner-wrapper{
    margin-top: 1rem;
    padding-bottom: 2rem;
    max-width:1200px;
    margin: 0 auto;
}

.banner-wrapper img{
    height: 200px;
    width: 200px;
}


.banner-wrapper p{
    font-size: 17px;
}

.banner-wrapper img{
    height: 500px;
    width: 80%;
    margin: 0 auto;
}

.sec-tittle{
    background-color: #00093c;
    height: 370px;
    width: 500px;
    color: white;
    border: 1px solid white;
    box-shadow: rgb(239, 215, 3) 2px 3px 8px;
    margin: 0 auto;
    max-width: 80%;
    margin: 0 auto;
    padding: 20px;
    font-size: 16px;
    border-radius: 15%;
}

.sec-tittle h4{
    color: #A91D3A;
    font-weight: bold;
}

.term_para{
    position: absolute;
}


.term{
    font-size: 17px;
   overflow: hidden;
}

.term p{
    padding-top: 30px;
    margin: 0 auto;
}

.term h4{
    text-align: center;
    padding-top: 20px;
}

.term span{
    color: #A91D3A;
    font-weight: bold;
    border-bottom: 2px solid #A91D3A;
}

.term h5{
    color: #A91D3A;
    font-weight: bold;
    margin: 0 auto;
}


.term button{
    font-size: 21px;
    padding: 10px;
    border: none;
    border-radius: 10px;

}

.term button:hover{
    background-color: orange;
}

.term a{
    text-decoration: none;
    color: black;
}

.term .col-sm-6 img{
    height: 310px;
    width: 350px;
    transition: transform 0.5s ease;
   
}

.term .col-sm-6:hover img{
    transform: scale(1.2);
}

.term img{
    margin: 0 auto;
}

.term p{
    margin: 0 auto;
}

/* .privacy h4{
    text-align: center;
    font-weight: bold;
}

.privacy{
    padding-top: 20px;
} */

/* General styling */
.privacy, .privacy-text {
    margin: 20px;
    line-height: 1.1;
}

/* Title Styling */
h4 {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    text-align: start;
}

h4 span {
    color: #ff6f61; /* Accent color */
}

/* Container Styling */
.privacy-content .container {
    background-color: #ffffff; /* White background */
    border-radius: 12px; /* Rounded corners for a modern look */
    padding: 40px; /* Increased padding for better spacing */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* Enhanced shadow for more depth */
    margin: 20px auto; 
    max-width: 1000px; /* Increased max-width for a wider container */
    text-align: justify;
}

/* Paragraph Styling */
.privacy p, .privacy-text p {
    font-size: 15px;
    margin-bottom: 15px;
    line-height: 1.7;
}

/* Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

th, td {
    padding: 15px;
    border: 1px solid #ddd;
    text-align: left;
    font-size: 1rem;
    color: #333;
}

thead {
    background-color: #ff6f61; /* Accent color for the table header */
    color: white;
    font-weight: 700;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

tbody tr:hover {
    background-color: #f1f1f1;
}

/* Button Styling */
button {
    background-color: #ff6f61; 
    border: none;
    border-radius: 5px;
    color: white;
    padding: 12px 24px;
    font-size: 1rem;
    cursor: pointer;
}

/* button:hover {
    background-color: #ff4a3d;
} */

/* Responsiveness */
@media (max-width: 768px) {
    h4 {
        font-size: 1.6rem;
    }

    .privacy p, .privacy-text p {
        font-size: 1rem;
    }

    th, td {
        padding: 12px;
    }

    .privacy-content .container {
        padding: 30px;
    }
}

@media (max-width: 480px) {
    h4 {
        font-size: 1.4rem;
    }

    .privacy p, .privacy-text p {
        font-size: 0.95rem;
    }

    th, td {
        padding: 10px;
    }

    .privacy-content .container {
        padding: 20px;
    }
}

.nav-fill .nav-item .nav-link {
    color: white;
    background-color: #0C3267;
}

.nav-fill .nav-item .nav-link:hover {
    background-color: #2072E4;
    color: black;
}

.nav-fill {
    padding: 15px;
    display: flex;
    align-items: center;
    text-align: center;
    margin: 18px;
}

.myTabs {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* Change from column to row */
    max-width: 100%;
    margin: 50px auto;
    padding: 25px;
    align-items: center;
    text-align: center;
    justify-content: center;
    cursor: pointer;
}

.myTabs input[type="radio"] {
    display: none;
}

.myTabs label {
    padding: 15px 25px;
    background-color: #e2e2e2;
    font-weight: bold;
    font-size: 19px;
    cursor: pointer;
    border-top-left-radius: 20px;
    margin: 5px 10px;
    transition: background 0.3s ease, color 0.3s ease;
}

.myTabs label:hover {
    background-color: darkorange;
    color: white;
}

.myTabs .tab {
    width: 100%;
    padding: 20px;
    background: #ffffff;
    animation: fadeIn 0.5s ease;
    display: none;
    order: 1;
}

.myTabs .tab h4 {
    color: #A91D3A;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.myTabs table {
    width: 80%;
    margin: 0 auto 50px;
    border-collapse: collapse;
}

.myTabs table th, .myTabs table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.myTabs table th {
    background-color: #0C3267;
    color: orange;
}

.myTabs table tr:nth-child(even) {
    background-color: #f2f2f2;
}


.myTabs input[type="radio"]:checked + label + .tab {
    display: block;
    
}

.myTabs input[type="radio"]:checked + label {
    background: darkorange;
    color: white;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.investment-section {
    padding: 20px 15px; /* Padding adjusted for better spacing on mobile */
    background-color: #f8f9fa;
}

.investment-content {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    justify-content: space-between;
    align-items: flex-start;
}

.investment-images {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 50%; /* Control the width on larger screens */
    margin-right: 20px; /* Space between image and text */
}

.phone_image {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Adjusts how the image fits */
}

.investment-text {
    flex: 1;
    max-width: 50%; /* Control the width on larger screens */
    padding: 20px;
}

.investment-text h1 {
    font-size: 2rem; /* Original font size */
    line-height: 1.3;
    margin-bottom: 20px;
    font-weight: bold;
    padding-top: 60px;
}

.investment-text h1 span {
    color: #ff6f61; /* Highlight color */
}

.investment-text p {
    font-size: 1rem; /* Responsive font size */
    line-height: 1.6;
    margin-bottom: 20px;
}

.features_list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column; 
    gap: 10px;
}

/* .features_list li {
    font-size: 1rem; 
    display: flex;
    align-items: center;
}

.features_list li::before {
    content: "✔";
    color: #4a90e2;
    margin-right: 8px;
} */

.service-image{
    margin: 0 auto;
}

.main-service {
    margin: 2rem auto;
 }

  .all {
    display: inline-flex;
    perspective: 10px;
    transform: perspective(300px) rotateX(20deg);
    will-change: perspective;
    /* perspective-origin: center; */
    margin-left: 18rem;
    transition: all 1.3s ease-out;
    justify-content: center;
    transform-style: preserve-3d;
  }
  
  
  .all:hover {
    perspective: 1000px;
    transition: all 1.3s ease-in;
    transform: perspective(10000px) rotateX(0deg);
    .text {
      opacity: 1;
    }
    & > div {
      opacity: 1;
      transition-delay: 0s;
    } 
    .center-box {
      opacity: 0;
    }
  }
  
  .left, .center, .right, .lefter, .righter {
    width: 175px;
    transform-style: preserve-3d;
    border-radius: 10px;
    opacity: 0;
    transition: all .3s ease;
    transition-delay: 1s;
    position: relative;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    background-blend-mode: color-burn;
  }
  .text {
    transform: translateY(30px);
    opacity: 0;
    transition: all .3s ease;
    bottom: 0;
    left: 5px;
    position: absolute;
    will-change: transform;
    color: #fff;
    text-shadow: 0 0 5px rgba(100, 100, 255, .6)
  }
  .lefter {
    transform: translateX(-60px) translateZ(-50px) rotateY(-10deg);
  }
  .left {
    transform: translateX(-30px) translateZ(-25px) rotateY(-5deg);
  }
  .center {
    opacity: 1;
    background-image: url("img/pmnew.png");
    background-size: cover;
    object-fit: cover;
    background-color: transparent;
  }
  .right {
    transform: translateX(30px) translateZ(-25px) rotateY(5deg);
  }
  .righter {
    transform: translateX(60px) translateZ(-50px) rotateY(10deg);
  }
  .center-box {
    font-weight: 300;
    font-size: 2rem;
    color: #fff;
    transition: all .6s ease;
    width: 80%;
    height: 400px;
    background-color: #303050;
    background-image: radial-gradient(circle at center top, #ff542114, #ff5421);
    border-radius: 10px;
    text-shadow: 0 0 10px rgba(255, 255, 255, .8);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  .center {
  /* box-shadow: 0 0 30px 10px rgb(255, 84, 33, .6); */
  box-shadow: 0 0 30px 10px rgba(232, 61, 38, 0.6);
  }
 
  .section-10 .box {
    transition: 0.4s;
    box-shadow: 0 0 150px rgba(0, 0, 0, 0.1);
    border: 1px solid #00000012;
  }

  .section-10 .circle {
    background: #fff;
    font-size: 1.4rem;
    height: 70px;
    width: 78px;
    display: grid;
    place-items: center;
  }
  
  .section-10 .box i {
    color: #ff5421;
  }
  
  .section-10 .box:hover {
    background: #FF5421;
    border: 1px solid #FF5421;
  }
  
  .section-10 .box:hover h6 {
    color: #fff;
  }
  h1 {
    color: #FF5421;
  }

  .cricket {
    background-color: #f8f9fa; /* Light background color */
  }
  
  .cricket img {
    border-radius: 8px; /* Rounded corners */
    height: 400px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    border: 1px solid black;
    border-radius: 88% 12% 89% 11% / 29% 55% 45% 71% ;
    animation: float 3s ease-in-out infinite;
  }
  
  .cricket h2 {
    color: #333; /* Dark color for headings */
    font-size: 2rem; /* Responsive font size */
  }
  
  .cricket p {
    font-size: 1rem; /* Adjust font size for readability */
    line-height: 1.6; /* Improve text readability */
    text-align: start;
  }

  .contact-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(90%);
}

.contact-info, .contact-form {
    padding: 90px;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.contact-info {
    flex: 1;
    margin-right: 20px;
}

.contact-info h2 {
    margin-bottom: 20px;
    color: #333;
}

.contact-info ul {
    list-style: none;
    padding: 0;
}

.contact-info ul li {
    margin-bottom: 10px;
    color: #555;
    font-size: 16px;
}

.contact-info ul li i {
    margin-right: 10px;
    color: #ff9900;
}

.contact-form {
    flex: 1;
    border: 2px solid #ff6f61;
    padding: 40px;
    position: relative;
}

.contact-form::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    /* background: linear-gradient(45deg, transparent, #ff6f61, transparent); */
    z-index: -1;
    border-radius: 15px;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the form fields */
}

.contact-form .form-fields {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    justify-content: flex-start; /* Align form fields to the start */
    align-items: center; /* Center the fields horizontally */
}

.contact-form textarea {
    margin-bottom: 15px;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #ddd;
    font-size: 14px;
    background-color: transparent; /* Remove background color */
    align-self: stretch; /* Ensure the textarea takes full width */
}

.contact-form input {
    color: black;
    padding: 14px;
    margin-bottom: 15px;
    border-radius: 15px;
    border: 1px solid #ddd;
    font-size: 14px;
    width: 100%; /* Ensure the inputs take full width */
}

.contact-form button {
    background-color: #f1c40f;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    width: 100%; /* Ensure the button takes full width */
}

.contact-form button:hover {
    background-color: #252a62;
}


.terms-container {
    display: flex;
    max-width: 900px;
    margin: 50px auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.terms-sidebar {
    width: 30%;
    background-color: #f1f9f9;
    padding: 20px;
}

.terms-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.terms-nav li {
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #fff;
    transition: background-color 0.3s ease;
}

.terms-nav li.active,
.terms-nav li:hover {
    background-color: #e0f7f7;
}

.terms-content {
    width: 70%;
    padding: 30px;
    overflow-y: auto;
}

.terms-section {
    display: none;
}
.terms-section.active {
    display: block;
}

.terms-footer {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #f1f9f9;
    border-top: 1px solid #ddd;
    margin-top: -10px;
}

.terms-footer label {
    font-size: 14px;
}

.terms-footer button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.terms-footer button:hover {
    background-color: #45a049;
}

.changing-text {
    position: relative;
    display: inline-block;
    height: 1em; /* Adjust to match the font size */
    overflow: hidden;
}

 
.card-title {
    color: #262626;
    font-size: 1.5em;
    line-height: normal;
    font-weight: 700;
    margin-bottom: 0.5em;
  }
  
  .small-desc {
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5em;
    color: #452c2c;
  }
  
  .small-desc {
    font-size: 1em;
  }
  
  .go-corner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 2em;
    height: 2em;
    overflow: hidden;
    top: 0;
    right: 0;
    /* background: linear-gradient(135deg, #6293c8, #384c6c); */
    background-color: orange;
    border-radius: 0 4px 0 32px;
  }
  
  .go-arrow {
    margin-top: -4px;
    margin-right: -4px;
    color: white;
    font-family: courier, sans;
  }
  
  .card {
    display: block;
    position: relative;
    max-width: 300px;
    max-height: 320px;
    background-color: #f2f8f9;
    border-radius: 10px;
    padding: 2em 1.2em;
    margin: 12px;
    text-decoration: none;
    z-index: 0;
    overflow: hidden;
    /* background: linear-gradient(to bottom, #c3e6ec, #a7d1d9); */
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .card:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -16px;
    right: -16px;
    background: linear-gradient(135deg, #364a60, #384c6c);
    height: 32px;
    width: 32px;
    border-radius: 32px;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 0.35s ease-out;
  }
  
  .card:hover:before {
    transform: scale(28);
  }
  
  .card:hover .small-desc {
    transition: all 0.5s ease-out;
    color: rgba(255, 255, 255, 0.8);
  }
  
  .card:hover .card-title {
    transition: all 0.5s ease-out;
    color: #ffffff;
  }
  
 
  .content-section {
    padding: 50px 0;
}

/* Text content styling */
.content-section h1 {
    font-size: 36px;
    margin-bottom: 50px;
    color: #ff6f61;
    text-align: center;
}

.text-content p {
    margin-bottom: 30px;
    font-size: 16px;
    justify-content: center;
}

/* Button styling */
.new-btn {
    padding: 10px 10px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}

.new-btn{
    border: 1px solid #ff6f61;
}

.new-btn:hover{
    background-color: #ff6f61;
    color: #fff;
}

/* Image content styling */
.image-content {
    text-align: right;
}

.image-content img {
    max-width: 100%; /* Ensures the image scales within its container */
    border-radius: 50px;
    animation: float 3s ease-in-out infinite;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .text-content h1 {
        font-size: 2rem;
    }

    .text-content p {
        font-size: 1rem;
    }

    .image-content {
        text-align: center;
        margin-top: 20px;
    }

    .image-content img {
        max-width: 80%;
    }
}
.new {
    background-color: #f9f9f9;
    padding: 20px;
    text-align: center;
}

.new .container {
    max-width: 900px;
    margin: 0 auto;
}

h2 {
    color: #232946;
}

.highlight {
    color: red;
}
.app-link {
    color: #007bff;
    text-decoration: none;
}

.app-link:hover {
    text-decoration: underline;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.step {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    position: relative;
}

.step-second {
    background-color: #ff7272;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    font-weight: bold;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    top: -20px;
    left: -20px;
}

@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }
}

.wrapper-up {
    width: 90%;
    margin: 0 auto;
    max-width: 80rem;
  }
  
  .cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .col-new {
    width: calc(25% - 2rem);
    margin: 1rem;
    cursor: pointer;
  }
  
  .wrapper-up .container {
    transform-style: preserve-3d;
    perspective: 1000px;
  }
  
  .front,
  .back {
    background-size: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    background-position: center;
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    backface-visibility: hidden;
    text-align: center;
    min-height: 280px;
    height: auto;
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 1.5rem;
  }
  
  .back {
    /* background: linear-gradient(45deg, #cedce7 0%, #596a72 100%); */
    background-color: #252a62;
  }
  
  .front:after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1  ;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: 0.2;
    background-color:#252a62;
    backface-visibility: hidden;
    border-radius: 10px;
  }
  
  .wrapper-up .container:hover .front,
  .wrapper-up .container:hover .back {
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  }
  
  .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  
  .inner {
    transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
    outline: 1px solid transparent;
    perspective: inherit;
    z-index: 2;
  }
  
  .wrapper-up .container .back {
    transform: rotateY(180deg);
    transform-style: preserve-3d;
  }
  
  .wrapper-up .container .front {
    transform: rotateY(0deg);
    transform-style: preserve-3d;
  }
  
  .wrapper-up .container:hover .back {
    transform: rotateY(0deg);
  }
  
  .wrapper-up .container:hover .front {
    transform: rotateY(-180deg);
  }
  
  .front .inner p {
    font-size: 1rem;
    margin-bottom: 2rem;
    position: relative;
  }
  
  .front .inner p:after {
    content: '';
    width: 4rem;
    height: 2px;
    position: absolute;
    background: #C6D4DF;
    display: block;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -0.75rem;
  }
  
  .front .inner span {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
  }
  
  @media screen and (max-width: 64rem) {
    .col-new {
      width: calc(33.333333% - 2rem);
    }
  }
  
  @media screen and (max-width: 48rem) {
    .col-new {
      width: calc(50% - 2rem);
    }
  }
  
  @media screen and (max-width: 32rem) {
    .col-new {
      width: 100%;
      margin: 0 0 2rem 0;
    }
  }
  
  /* Social Icons */
  .social-icons {
    display: flex;
  }
  
  .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 52px;
    height: 80px;
    margin: 50px 0.0rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: 2.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
  
    &:hover {
      color: blue;
      .tooltip {
        visibility: visible;
        opacity: 1;
        transform: translate(-50%, -150%);
      }
    }

    #insta:hover{
        background: linear-gradient(90deg, #D62976, #A94D9C, #405DE6, #F77737);
        color: #fff;
    }

   #face:hover{
        background-color: #007bff;
        color: white;
    }

    #link:hover{
        background-color: #007bff;
        color: #fff;
    }
  
    &:active {
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;
    }
  
    i {
      position: relative;
      top: 1px;
    }
  }

  /* Tooltips */
  .tooltip {
    display: block;
    position: absolute;
    left: 50%;
    padding: 0.2rem 1rem;
    border-radius: 40px;
    font-size: 0.8rem;
    font-weight: bold;
    opacity: 0;
    color: #fff;
    pointer-events: none;
    text-transform: uppercase;
    transform: translate(-50%, -100%);
    transition: all 0.3s ease;
    z-index: 1;
  
    &:after {
      display: block;
      position: absolute;
      bottom: 1px;
      left: 50%;
      width: 0;
      height: 0;
      content: "";
      border: solid;
      border-width: 10px 10px 0 10px;
      border-color: transparent;
      transform: translate(-50%, 100%);
     
    }
  }