*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    list-style: none;
    text-decoration: none;
}
body{
    background: white;
    animation: gradientAnimation 15s ease infinite;
}
@keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Align items to the right */
    padding: 15px 5%; /* Reduced padding for a smaller header */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    background-color: #004386; /* Ensure a background color is applied */
}

header a img {
    width: 120px; /* Reduced width */
    height: auto; /* Maintain aspect ratio */
}

.navbar {
    position: sticky; 
    transition: background-color 0.3s ease-in-out;
    padding-top: 5px; /* Reduced padding */
    padding-bottom: 10px; /* Reduced padding */
    width: 100%; /* Ensure navbar takes full width */
    display: flex;
    justify-content: flex-end; /* Align items to the right */
    align-items: center;
}

.navbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, #397dc2 18%, #004386 82%);
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    z-index: -1;
}

.navbar.scrolled::before {
    opacity: 0;
}

.navbar.scrolled {
    background-color: rgba(0, 0, 0, 0.384);
}

.logo {
    font-size: 24px; /* Reduced font size */
    font-weight: 700;
    color: rgb(255, 255, 255);
    margin-right: auto; /* Push the logo to the left */
}

.navlist {
    display: flex;
 
    margin-right: 10%; /* Adjust margin as needed */
    margin-top: 0; /* Reduced margin */
}

.navlist a {
    color: #ffffff;
    margin-left: 40px; /* Reduced margin */
    font-size: 14px; /* Reduced font size */
    font-weight: 600;
    transition: all .55s ease;
    text-decoration: none;
}

.navlist a:hover {
    color: #f0e32c;
    border-bottom: 2px solid #f0e32c;
} 

.navbar.scrolled .navlist a {
    color: white;
}

#menu-icon {
    color: #ffffff;
    font-size: 30px; /* Reduced font size */
    z-index: 10001;
    cursor: pointer;
    display: block; /* Show the menu icon if needed */
}



/* Hero Section */
.hero {
    height: 100%;
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 1rem; /* Reduced gap for a tighter layout */
    padding: 0 5%; /* Adjust padding to fit better */
}

/* Section Padding */
section {
    padding: 0 5%; /* Adjusted for better alignment with hero section */
}

/* Hero Text Styles */
.hero-text h5 {
    font-size: 18px; /* Reduced font size */
    font-weight: 400; /* Slightly lighter weight for a cleaner look */
    color: rgb(0, 0, 0);
    margin-bottom: 15px; /* Adjusted margin */
}

.hero-text h1 {
    font-size: 60px; /* Reduced font size */
    line-height: 1.2; /* Adjusted line-height for readability */
    color: #397dc2;
    margin: 0 0 20px; /* Reduced bottom margin */
}

.hero-text h4 {
    font-size: 20px; /* Reduced font size */
    font-weight: 500; /* Adjusted weight for a more professional look */
    color: rgb(0, 0, 0);
    margin-bottom: 10px; /* Maintained margin */
}

.hero-text p {
    color: rgb(90, 90, 90);
    font-size: 14px; /* Reduced font size */
    line-height: 1.6; /* Adjusted line-height for better readability */
    margin-bottom: 30px; /* Reduced bottom margin */
}

/* Hero Image Styles */
.hero-img {
    width: 100%; /* Make it responsive */
    max-width: 500px; /* Constrain max width for better fitting */
    height: auto;
    padding-top: 0;
    padding-left: 0;
}

.hero-img img {
    width: 100%; /* Make it responsive */
    max-width: 500px; /* Constrain max width */
    height: auto;
    opacity: 0.8; /* Slightly adjusted opacity */
}

/* Hero Text Link Styles */
.hero-text a {
    display: inline-block;
    color: white;
    background-color: #4a90e2;
    border: 2px solid transparent;
    padding: 10px 20px; /* Reduced padding for a more compact look */
    line-height: 1.4;
    font-size: 12px; /* Reduced font size */
    font-weight: bold;
    border-radius: 25px; /* Reduced border radius */
    text-transform: uppercase;
    transition: all 0.3s ease; /* Reduced transition time */
    margin-left: 15px; /* Adjusted margin */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 100%; 
}

.hero-text a:hover{
    color: #ffffff;
    background: #4a90e2;
    border: 2px solid #a1a1a1;
    margin-left: 20px;
    transform: translateX(8px);
}
.hero-text a.ctaa i{
    vertical-align: middle;
    margin-right: 5px;
}
.icons{
    position: absolute;
    top: 45%;
    padding: 0 9%;
}

.icons i{
    display: block;
    margin: 26px 0;
    font-size: 32px;
    color: #397dc2;
    transition: all .50s ease;
}
.icons i:hover{
    color: #7e7e7e;
    transform: translateY(-5px);
}
.scroll-down{
    position: absolute;
    bottom: 6%;
    right: 9%;
    top: 90%;
}
.scroll-down i{
    display: block;
    padding: 12px;
    font-size: 25px;
    color: white;
    background: #4a90e2;
    border-radius: 30px;
    transition: all .50s ease;
}
.scroll-down i:hover{
    color: #ffffff;
    background: #4a90e2;
    border: 2px solid #747474;
    transform: translateY(-5px);
}

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

@keyframes revealFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.hero-text {
    animation: revealFromTop 1s ease-out forwards;
}

.hero-img {
    animation: revealFromTop 1s ease-out forwards;
}

.icons {
    animation: revealFromLeft 1s ease-out forwards;
}

.scroll-down {
    animation: revealFromRight 1s ease-out forwards;
}







@media (max-width: 1535px){
    header{
        padding: 15px, 3%;
        transition: .2s;
    }
    .icons{
        padding: 0 3%;
        transition: .2s;
    }
    .scroll-down{
        right: 3%;
        transition: .2s;
    }
}

@media (max-width: 1460px){
    section{
        padding: 0 12%;
        transition: .2s;
    }
}

@media (max-width: 1340px){
    .hero-img{
        width: 100%;
        height: auto;
    }
    .hero-text h1{
        font-size: 75px;
        margin: 0 0 30px;
    }
    .hero-text h5{
        margin-bottom: 25px;
    }
}

@media (max-width: 1195px){
    section{
        padding: 0 3%;
        transition: .2s;
    }
    .hero-text{
        padding-top: 115px;
    }
    .hero-img img{
        width: 560px;
        height: auto;
    }
    .hero-img{
        text-align: center;
    }
    .hero{
        height: 100%;
        gap: 1rem;
        grid-template-columns: 1fr;
    }
    .icons{
        display: none;
    }
    .scroll-down{
        display: none;
    }
}
@media (max-width: 990px){
    #menu-icon{
        display: block;
    }
    .navlist{
        position: absolute;
        top: 100%;
        right: -100%;
        width: 300px;
        height: 40vh;
        background-color: rgba(0, 0, 0, 0.384);
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 50px 20px;
        transition: all .50s ease;
    }
    .navlist a{
        margin-left: 0;
        display: block;
        margin: 7px 0;
    }
    .navlist.open {
        right: 0;
    }
}
@media (max-width: 786px) {
    #menu-icon {
        color: #ffffff;
        font-size: 35px;
        z-index: 10001;
        cursor: pointer;
        display: block; 
        position: left; /* Fix the position of the menu icon */
        top: 20px; /* Adjust the top position as needed */
        right: 20px; 
    }
    .navlist {
        position: fixed;
        top: 73px; /* Adjust the top value to push it down */
        right: -100%;
        width: 100%;
        max-width: 400px;
        background-color: rgba(0, 0, 0, 0.384);
        display: flex;
        flex-direction: column;
        padding: 50px 20px;
        transition: right 0.5s ease;
        z-index: 10000;
        box-sizing: border-box;
    }
    .navlist a {  
        margin-left: 0;
        display: block;
        margin: 2px 0;
    }
    .navlist a:last-child {
        padding-bottom: 20px; /* Adjust the padding as needed */
    }

    .navlist.open {
        right: 0; /* Show the menu by bringing it to 0px from the right */
    }

    body.open-menu {
        overflow-x: hidden; /* Hide horizontal overflow when the menu is open */
    }
    .hero-text h1 {
        font-size: 60px; /* Decrease the font size */
        margin: -90px 0 10px; /* Adjust the margin to move the text up more */
    }
    
    .hero-text a {
        margin-top: 10px; /* Add top margin to the buttons to move them up */
    }
    header a img {
        width: 120px; /* Adjust the width to make the logo smaller */
        height: auto; /* Maintain aspect ratio */
    }

    .navbar {
        position: fixed;
    }

}


@media (max-width: 680px){
    .hero-img{
        width: 30%;
        height: auto;
    }
}

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

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

.container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px; /* Ensure there's no horizontal overflow */
}

.footer {
    background-color: #001F3F; /* Adjust to the desired background color */
    color: #fff;
    text-align: center;
    padding: 10px 0; /* Reduced padding for a smaller footer */
    width: 100%;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-left {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    margin-right: 20px; /* Adjust space between sections */
}

.footer-right {
    display: flex;
    align-items: center; /* Align items vertically in the center */
}

.footer-col {
    margin: 15px 20px; /* Reduced margin for a more compact layout */
    max-width: 180px; /* Slightly smaller max-width */
}

.footer-col h4 {
    font-size: 0.75rem; /* Smaller font size for headings */
    color: #ffffff;
    text-transform: capitalize;
    margin-bottom: 10px;
    font-weight: 500;
    position: relative;
}

.footer-col h4::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    background-color: #e91e63;
    height: 2px;
    width: 30px;
}

.footer-col ul {
    list-style-type: none;
    padding: 0;
    margin: 0; /* Reset margin */
}

.footer-col ul li {
    margin-bottom: 5px; /* Reduced margin for list items */
}

.footer-col ul li a {
    font-size: 0.7rem; /* Smaller font size for links */
    color: #bbbbbb;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-col ul li a:hover {
    color: #ffffff;
    padding-left: 4px; /* Reduced padding on hover */
}

.social-links {
    display: flex;
    align-items: center; /* Align items vertically in the center */
}

.social-links a {
    display: inline-block;
    height: 25px; /* Reduced height */
    width: 25px; /* Reduced width */
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 5px; /* Adjusted margin */
    text-align: center;
    line-height: 25px; /* Adjusted line-height */
    border-radius: 50%;
    color: #ffffff;
    transition: all 0.5s ease;
}

.social-links a:hover {
    color: #001F3F; /* Adjusted to match the background color */
    background-color: #ffffff;
}

.footer-bottom {
    width: 100%;
    text-align: center;
    color: #999999;
    margin-top: 10px; /* Reduced margin-top */
    font-size: 0.75rem; /* Smaller font size for copyright text */
}


/*responsive*/
@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
}
}

@media(max-width: 574px){
  .footer-col{
    width: 100%;
}
}
.main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px; /* Space between cards */
    padding: 20px;
}
.card{ 
    width: 21%;
    height: auto; 
    min-height: 350px;
    background: rgba(55, 55, 55, 0.7);
    transition: all 0.4s;
    display: inline-block;
    box-shadow: 2px 2px 20px black;
    border-radius: 5px; 
    margin: 2%;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    border-radius: 30px;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    text-align: center;

}

.first-content {
    padding: 10px; /* Add padding to create space between rows */
    text-align: center; /* Center-align the content */
    color: white;
    font-size: large;
    height: 100%;
    width: 100%;
    transition: all 0.4s;
    opacity: 1;
    padding-bottom: 50px;
    padding-left: 70px; /* Add padding to the right side */
    text-align: left;
}


.card .image img{
    width: 100%;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}


.lit{
    padding-bottom: 20px;
    font-size: large;
}

@media screen and (max-width: 768px) {
    /* Apply styles for smaller screens */
    .main {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: auto;
    }

    .card {
        width: 80%; /* Adjust the width of cards for smaller screens */
    }
    .hero-img{
        display: none;
    }
    .hero-text{
        font-size: small;
    }
}
  
/* Center and style the section titles */
.section-title {
    padding-top: 20px;
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 24px; /* You can adjust the font size as needed */
    margin-bottom: 20px; /* Add some spacing below the title */
}


.page1{
    background: #3f3c529d;
}
.page2{
    background-image: url(images/back2.jpg);
    background-repeat: no-repeat;
  background-size: cover; 
}
.back-video{
     position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.card tbody tr {
    cursor: pointer;
    transition: background-color 0.3s;
  }

.card table{
    margin-top: 30px;
    margin-left: -30px;
    align-items: center;
    width: 100%;
    border-collapse: collapse;
}


table td.duration {
    text-align: left;
    padding: 2.5px;
    padding-right: 60px;
    font-size: 17px;
}

table td.price {
    text-align: left;
    padding: 2.5px;
    padding-right: 60px;
    font-size: 17px;
}




.card th.D1 {
    background-color: rgb(255, 208, 0) !important;
    border-top-left-radius: 5px;
    
}


.card th.D2 {
    background-color: rgb(25, 129, 248) !important;
    border-top-left-radius: 5px;
    
}

.card th.D3 {
    background-color: rgb(196, 12, 212) !important;
    border-top-left-radius: 5px;
    
}

.card th.D4 {
    background-color: rgb(19, 209, 114) !important;
    border-top-left-radius: 5px;
    
}

@media screen and (max-width: 768px) {
    .card {
        width: 80%; /* Reduce card width */
        transform: scale(0.8); /* Shrink the card size */
    }
}

/* Center-align menu items in mobile */
.description {
    display: none; /* Hide descriptions by default */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);
}

/* Hide video controls */
.back-video::-webkit-media-controls {
    display: none !important;
}

.back-video::-webkit-media-controls-play-button,
.back-video::-webkit-media-controls-start-playback-button {
    display: none !important;
}

.back-video::-webkit-media-controls,
.back-video::-webkit-media-controls-overlay-play-button {
    display: none !important;
}
.confirmation-dialog {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

/* Style for buttons in the confirmation dialogs */
.confirmation-dialog button {
    background-color: #4a90e2;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 10px;
    margin: 5px;
    cursor: pointer;
}
/* Card styles */
.villain {
    width: 250px; /* Reduced width */
    min-width: 250px; /* Ensure minimum width */
    height: 300px; /* Reduced height */
    border-radius: 20px; /* Smaller border-radius */
    overflow: hidden;
    box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.2); /* Reduced shadow */
    background-color: white; /* White background */
    position: relative;
}

/* Card image */
.villain-profile-img {
    width: 100%; /* Make image fit card width */
    height: 60%; /* Reduced height */
    object-fit: cover; /* Ensure image covers the area */
}

/* Background decoration */
.villain-description-bk {
    background-image: linear-gradient(0deg , #fffb00, #d4a610);
    border-radius: 20px; /* Adjusted border-radius */
    position: absolute;
    top: 55%;
    left: -10px; /* Adjusted position */
    height: 60%;
    width: 120%; /* Slightly wider for skew effect */
    transform: skew(15deg, -5deg); /* Adjusted skew */
}

/* Gradient adjustments */
.second .villain-description-bk {
    background-image: linear-gradient(-20deg , #20e2fc, #1a30f5);
}
.third .villain-description-bk {
    background-image: linear-gradient(-20deg , #ff31ee, #8403c0);
}
.fourth .villain-description-bk {
    background-image: linear-gradient(-20deg , #e5e75c, #135cbb);
}

/* Logo styling */
.villain-logo {
    height: 60px; /* Reduced height */
    width: 60px; /* Reduced width */
    border-radius: 15px; /* Adjusted border-radius */
    background-color: #fff;
    position: absolute;
    bottom: 25%;
    left: 15px; /* Adjusted position */
    overflow: hidden;
    box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3); /* Reduced shadow */
}

/* Logo image */
.villain-logo img {
    height: 50%;
    margin-top: 10px; /* Reduced margin */
}

/* Description */
.villain-description {
    position: absolute;
    color: #fff;
    font-weight: 700; /* Adjusted font weight */
    left: 80px; /* Adjusted position */
    bottom: 30%; /* Adjusted position */
    font-size: 13px;
}

.villain-btn {
    position: absolute;
    right: 15px; /* Position from the right */
    bottom: 5%; /* Move the button down a bit */
    padding: 6px 12px; /* Reduced padding for a smaller button */
    border: 2px solid #000; /* Black border for the button */
    border-radius: 25px; /* Rounded corners */
    background-color: #fff; /* White background */
    color: #000; /* Black text color */
    font-weight: bold; /* Make text bold */
    text-align: center; /* Center text inside the button */
    text-decoration: none; /* Remove underline from the link */
    display: inline-block; /* Ensure padding works properly */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
    cursor: pointer; /* Pointer cursor for interactivity */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    font-size: 14px; /* Slightly smaller font size */
}

.villain-btn:hover {
    background-color: #f0f0f0; /* Light gray background on hover */
    color: #333; /* Darker text color on hover */
    transform: translateY(-2px); /* Slight lift effect on hover */
}

.villain-btn:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3); /* Outline effect on focus */
}

/* Button link */
.villain-btn a {
    color: inherit; /* Inherit color from button */
    text-decoration: none; /* Remove underline */
}



/* Date info */
.villain-date {
    position: absolute;
    color: #fff;
    left: 15px; /* Adjusted position */
    bottom: 10%;
    font-size: 13px;
    font-weight: bold;
}
  /* END CARD DESIGN */
  
  body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    background-color: #eee;
    min-height: 100vh;
  }
  .btn i:before {
    width: 14px;
    height: 14px;
    position: fixed;
    color: #fff;
    background: #0077B5;
    padding: 10px;
    border-radius: 50%;
    top:5px;
    right:5px;
  }
  /* Media Query for screens up to 786px wide (mobile) */
@media (max-width: 786px) {
    .villain {
      width: 90%;
      min-width: 90%;
      margin: 20px auto;
    }
    .villain-profile-img {
      left: 5%;
      transform: translateX(-5%);
    }

    .back-video{
        display: none;
       }
       body{
        background-color: whitesmoke;
       }
  }