body, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.page1{
    display: none;
}

/* Footer */
.footer {
    background-color: #001F3F; 
    padding: 5px 0; /* Reduced padding for smaller height */
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

/* Your name and copyright information */
.footer-text {
    color: #fff; /* White color for the text */
    font-size: 12px; /* Reduced font size */
    text-align: center;
    margin: 0; /* Removed margin for compact look */
}

/* Style for the text within the footer */
.footer-text span {
    font-weight: bold;
}

/* To center align the footer text and social links */
.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* 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 */
}



/* Adjust the font size of navigation items */
.navlist a {
    color: #ffffff;
    font-size: 13px; /* Reduce the font size */
    font-weight: 600;
    transition: all .55s ease;
}

/* Add styles for the hamburger menu icon */
#menu-icon {
    color: #ffffff;
    font-size: 25px; /* Adjust the size */
    z-index: 10001;
    cursor: pointer;
    display: block; /* Make it visible */
}


.back-video{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* 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;
}

.footer-col{
    width: 25%;
    padding: 0 15px;
 }
 .footer-col h4{
     font-size: 18px;
     color: #ffffff;
     text-transform: capitalize;
     margin-bottom: 35px;
     font-weight: 500;
     position: relative;
 }
 .footer-col h4::before{
     content: '';
     position: absolute;
     left:0;
     bottom: -10px;
     background-color: #e91e63;
     height: 2px;
     box-sizing: border-box;
     width: 50px;
 }
 .footer-col ul li:not(:last-child){
     margin-bottom: 10px;
 }
 .footer-col ul li a{
     font-size: 13px;
     text-transform: capitalize;
     color: #ffffff;
     text-decoration: none !important;
     font-weight: 300;
     color: #bbbbbb;
     display: block;
     transition: all 0.3s ease;
 }
 .navlist a,
.footer-col ul li a {
    text-decoration: none !important;
}
 .footer-col ul li a:hover{
     color: #ffffff;
     padding-left: 8px;
 }
 .footer-col .social-links a{
     display: inline-block;
     height: 40px;
     width: 40px;
     background-color: rgba(255,255,255,0.2);
     margin:0 10px 10px 0;
     text-align: center;
     line-height: 40px;
     border-radius: 50%;
     color: #ffffff;
     transition: all 0.5s ease;
     font-size: 23px !important;
 }
 .footer-col .social-links a:hover{
     color: #24262b;
     background-color: #ffffff;
 }
 .footer-col {
    width: 25%;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align content horizontally */
    text-align: center; /* Center align text */
}


/* Adjust package box styling */
.villain {
    display: block;
    position: relative;
    max-width: 50%; /* Further reduced width */
    height: 300px; /* Further reduced height */
    border-radius: 15px; /* Reduced border radius */
    overflow: hidden;
    box-shadow: 3px 3px 15px rgba(35, 34, 44, 0.3); /* Further reduced shadow */
    background-color: rgba(255, 255, 255, 0.541);
    margin: 30px auto; /* Centered horizontally */
    margin-top: 100px; /* Space from the header */
    margin-bottom: 100px; /* Space from the footer */
    left: 5%; /* Move to the right */
}

.description-header {
    margin: 0; /* Remove default margin */
    text-align: left; /* Align text to the left within the header */
    width: 100%; /* Ensure it takes the full width available */
    margin-left: 13%;
    margin-bottom: 3%;
}
.description-header h1 {
    font-size: 16px; /* Smaller font size */
    font-weight: 400; /* Normal weight */
    margin: 0; /* Remove default margin */
    text-align: left; /* Align h1 text to the right */
    margin-bottom: 6%;
}

.pricing-options {
    text-align: left; /* Center align the form content */
   
}

.pricingForm1 label {
    font-weight: bold; /* Make labels bold */
    font-size: 9px; /* Adjust font size */
   margin-left:auto;
    margin-right: 20px; /* Add horizontal spacing between labels */
    margin-bottom: 5px; /* Add some vertical spacing to separate the rows */
}
.pricingForm2 label {
    font-weight: bold; /* Make labels bold */
    font-size: 9px; /* Adjust font size */
   margin-left:auto;
    margin-right: 20px; /* Add horizontal spacing between labels */
    margin-bottom: 5px; /* Add some vertical spacing to separate the rows */
}

.pricingForm3 label {
    font-weight: bold; /* Make labels bold */
    font-size: 9px; /* Adjust font size */
   margin-left:auto;
    margin-right: 20px; /* Add horizontal spacing between labels */
    margin-bottom: 5px; /* Add some vertical spacing to separate the rows */
}

.pricingForm4 label {
    font-weight: bold; /* Make labels bold */
    font-size: 9px; /* Adjust font size */
   margin-left:auto;
    margin-right: 20px; /* Add horizontal spacing between labels */
    margin-bottom: 5px; /* Add some vertical spacing to separate the rows */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
    .villain {
        max-width: 70%; /* Adjust width for medium screens */
    }
}

@media (max-width: 768px) {
    .villain {
        max-width: 90%; /* Full width for small screens */
        margin: 10px; /* Reduced margins */
        left: 0; /* Full width on small screens */
    }
}

.villain-profile-img {
    height: 55%; /* Further adjusted for smaller dimensions */
    width: auto; /* Maintain aspect ratio */
    position: absolute; /* Position absolute within the .villain container */
    top: 5px; /* Adjusted to move closer to the top */
    left: -60px; /* Adjusted to move closer to the left */
    object-fit: cover; /* Ensure the image covers the container without distortion */
}


.villain-description-bk {
    background-image: linear-gradient(0deg, #fffb00, #d4a610);
    border-radius: 15px; /* Reduced border radius */
    position: absolute;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    height: 60%; /* Adjusted for new dimensions */
    width: 100%;
    top: 70%; /* Adjusted for new dimensions */
}

.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);
}
.villain-logo {
    height: 60px; /* Adjusted for new dimensions */
    width: 60px; /* Adjusted for new dimensions */
    border-radius: 15px; /* Reduced border radius */
    background-color: #fff;
    position: absolute;
    bottom: 20%;
    left: 20px;
    overflow: hidden;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}

.villain-logo img {
    height: 40%;
    margin-top: 20px;
}
.villain-description {
    position: absolute; /* Changed to absolute for better positioning */
    color: #000000;
    font-weight: 500; /* Further reduced font weight */
    left: 100px; /* Adjusted to fit new dimensions */
    bottom:35%; /* Adjusted to fit within the new height */
    width: calc(100% - 30px); /* Adjust width to fit within the container */
    font-size: 10px; /* Reduced font size */
}

.villain-btn {
    position: absolute;
    color: #fff;
    right: 20px; /* Adjusted for new dimensions */
    bottom: 10%;
    padding: 10px 20px;
    border: 2px solid #fff;
}

.villain-btn a {
    color: #fff;
}

.villain-date {
    position: absolute;
    color: #fff;
    left: 20px; /* Adjusted for new dimensions */
    bottom: 10%;
}

.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%);
    }
  }

/* Navigation sidebar */
#sidebar {
    width: 200px; /* Reduced width */
    background-color: #3f3c5281;
    color: white;
    position: fixed;
    height: 100%;
    overflow-y: auto;
    transition: width 0.3s ease; /* Smooth transition for resizing */
}

#sidebar ul {
    padding: 10px; /* Adjusted padding for a smaller sidebar */
}

#sidebar li {
    margin-bottom: 10px; /* Reduced margin between list items */
}

/* Style the links within the <ul> */
#sidebar ul li a {
    display: block;
    padding: 8px 0; /* Adjusted vertical padding */
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border-bottom: 1px solid #ffffff; /* Thinner separator line */
    transition: all .55s ease;
}

/* Add a separator line between the links */
#sidebar ul li a::after {
    content: '|'; /* Separator character */
    margin: 0 8px; /* Adjusted horizontal spacing */
    color: #ffffff;
}

/* Apply hover effect to the links */
#sidebar ul li a:hover::after {
    color: #f0e32c;
}

/* Brighter color on hover */
#sidebar ul li a:hover {
    color: #f0e32c;
    border-bottom: 1px solid #f0e32c; /* Adjusted border width */
}



#content {
    margin-bottom: 150px; /* Add margin to avoid overlapping with footer */
}


h1 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}

label {
    display: inline ;
    padding: 13px;
    margin-right: 4px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

label:hover {
    background-color: #4b496d71;
}

input[type="radio"] {
    display: none;
}
.pricingForm1 input[type="radio"]:checked + label {
    background-color: #ebc908;
    color: #fff9f9;
}

.pricingForm2 input[type="radio"]:checked + label {
    background-color: #01a2ff;
    color: #fff9f9;
}

.pricingForm3 input[type="radio"]:checked + label {
    background-color: #ca18f7;
    color: #fff9f9;
}

.pricingForm4 input[type="radio"]:checked + label {
    background-color: #0cd872;
    color: #fff9f9;
}



.icon-container {
    display: flex;
    align-items: center;
}

.icon-container i {
    font-size: 24px;
    margin-right: 10px;
}

.main{
    display: flex;
    justify-content: center; /* Center the cards horizontally */
    flex-wrap: wrap; /* Allow cards to wrap to the next line */

}
.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;
}

.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 (max-width: 786px) {

    #sidebar{
        display: none;
    }
    #content{
        display: none;
    }
    .page1{
        display: block;
    }
    #menu-icon {
        color: #ffffff;
        font-size: 35px;
        z-index: 10001;
        cursor: pointer;
        display: block; 
        position: fixed; /* 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: 768px){
    .footer-col{
      width: 50%;
     
  }
  }

  @media screen and (max-width: 768px) {
    .card {
        width: 87%; /* Reduce card width */
        margin-bottom: 20px;
        margin-top: 40px;
        clear: both;
    
    }
    footer {
        position: relative;
        clear: both; /* Clear any floated elements above the footer */
        margin-top: 80px;
    }

   .main{
    margin-bottom: 150px;
   }
   .back-video{
    display: none;
   }
   body{
    background-color: whitesmoke;
   }
}
@media (max-width: 786px) {
    #menu-icon {
        color: #ffffff;
        font-size: 35px;
        z-index: 10001;
        cursor: pointer;
        display: block; 
        position: fixed; /* 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;
    }
    .navlist {
        position: fixed;
        top: 0;
        left: -100%; /* Start off-screen */
        width: 70%; /* Adjust the width as needed */
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        transition: left 0.3s ease-in-out;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center vertically */
        align-items: center; /* Center horizontally */
    }
    
    .navlist.open {
        left: 0;
    }
    

}


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