/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #2c1e4a;
    line-height: 1.6;
    background-color: #fff;
}

@font-face {
    font-family: 'LasticaBold';
    src: url('fonts/lastica_bold.f1226b6384653364c4417ad8363.36b396391257736f6f86496e2e6ac618.woff2') format('woff2'),
    url('fonts/lastica_bold.f1226b6384653364c4417ad8363.36b396391257736f6f86496e2e6ac618.woff2') format('woff'); /* Optional fallback */
    font-weight: bold;
    font-style: normal;
}

.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    border-color:#38b6ff ;
    border: 1px;
    gap: 20px;
}



.container-body{
    max-width: 800px; /* Set a medium maximum width */
    margin: 0 auto;   /* Center the container horizontally */
    padding: 20px;    /* Add some padding for spacing */
    display: flex;    /* Maintain flexbox layout for columns */
    align-items: center;
    justify-content: space-between;
    font-family: Arial, sans-serif;
    gap: 20px;        /* Add spacing between columns */
}
/* Left Column Styling */
.left-column {
    flex: 1;
}

.right-column {
    flex: 1;
    text-align: center;
    
}
.center-title-purple{
    color: #d73cbe;
}


/* General Reset */
h1, h2, h3, ul, li, a {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: 'LasticaBold', Arial, sans-serif;
} 
h1.center-title{
    text-align: center;
}
h1.left-title{
    text-align:left;
   
}


.paragraph-left {
    text-align: left;
    color: #333;
    }

.paragraph-right {
        text-align: right;
        color: #333;
        }
.caption {
    font-size:18px;
    color: #fff;
}

/* Header Styles */
.menu-header {
    background-color: #fff; /* Dark background color */
    color: white;
    padding: 15px 20px;
}

.container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}



.large-column {
    flex: 1; /* 70% width */
    text-align: left;
}

.small-column {
    flex: 3; /* 30% width */
}

/* Logo Section */
.logo img {
    height: 50px; /* Adjust height as needed */
    display: block;
}

.img-parapgraph img{
    height: 294px; /* Adjust height as needed */
    display: block;
    object-fit: cover;
}

.img-parapgraph.cover{
    height: 600px; /* Adjust height as needed */
    display: block;
    object-fit: cover;
}

.img-parapgraph.left  {
    height: 254px; /* Adjust height as needed */
    text-align: center;
}

.img-parapgraph.normal  {
    height: 364px; /* Adjust height as needed */
    text-align: center;
}

.img-parapgraph.smaller  {
    height: 300px; /* Adjust height as needed */
    text-align: center;
}

/* Navigation Menu */
/* Base Styling */
.menu {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
    padding: 10px 20px;
    position: relative;
}

.menu-header {
    display: flex;
    justify-content: space-between; /* Separate logo and menu toggle */
    align-items: center;
}

/* Logo on the Left */
.menu-logo img {
    width: 120px; /* Adjust logo size as needed */
    height: auto;
}

/* Hamburger Icon */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #2c1e4a;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Navigation Menu */
.menu-list {
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}

.menu-list li a {
    color: #2c1e4a;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
}

.menu-list li a:hover {
    color: #d73cbe;
}


.video {
    width: 100%; /* Set to full width for responsiveness */
    max-width: 563px; /* Restrict the maximum width */
    height: auto; /* Automatically adjust height based on aspect ratio */
    border-radius: 10px;
    margin-bottom: 10px;
    object-fit: cover; /* Ensures the video scales properly inside the dimensions */
}

/* Wide Section Styles */
.wide-section {
    width: 100%; /* Full-width section */
    background-color: #0a121f; /* Background color */
    color: white; /* Font color */
    padding: 40px 0; /* Vertical padding for the section */
}

.container-footer {
    max-width: 1200px; /* Constrain the content to 1200px */
    margin: 0 auto; /* Center the content horizontally */
    padding: 0 20px; /* Add padding for small screens */
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    gap: 20px; /* Space between columns */
    justify-content: space-between;
}

/* Columfooter Styles */
.columfooter {
    flex: 1;
    min-width: 200px; /* Ensure columns don’t shrink too small */
    max-width: 25%; /* Ensure four columns fit evenly */
    text-align: left;
}

.columfooter h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #ffffff; /* White font color for headings */
}

.columfooter ul {
    list-style-type: none; /* Remove default bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.columfooter ul li {
    margin-bottom: 10px; /* Add spacing between links */
text-align: left;
}

.columfooter ul li a {
    color: #ffffff; /* Link color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease;
    font-family: Arial, Helvetica, sans-serif;
}

.columfooter ul li a:hover {
    color: #d73cbe; /* Gold color on hover */
}

.columfooter p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Wide Section Feature */
.wf-wide-section-feature {
    width: 100%;
    background-color: #2c1e4a; /* Background color */
    padding: 40px 20px; /* Padding around the section */
}

.wf-container {
    max-width: 1200px; /* Restrict the width of the content */
    margin: 0 auto; /* Center the container horizontally */
    padding: 0 20px; /* Add horizontal padding for small screens */
}

/* Title Styling */
.wf-title-row {
    margin-bottom: 30px; /* Add space below the title row */
}

.wf-section-title {
    font-size: 2rem;
    color: white;
    font-family: Arial, Helvetica, sans-serif; /* Font for the title */
    text-align: left; /* Align title to the left */
}

/* 3 Columns */
.wf-three-columns {
    display: flex; /* Flexbox for columns */
    justify-content: space-between; /* Space between the columns */
    gap: 20px; /* Add space between columns */
}

.wf-column {
    flex: 1; /* Equal width for all columns */
    text-align: center; /* Center-align content within the column */
    padding: 20px;
}

.wf-icon {
    width: 80px; /* Adjust the size of the icons */
    height: 80px;
    margin-bottom: 15px; /* Space below the icon */
}

.wf-column p {
    font-family: Arial, Helvetica, sans-serif; /* Font for paragraphs */
    color: white; /* White text */
    font-size: 1rem;
    line-height: 1.6; /* Better line spacing */
}

/* Full-screen gradient background */
.container-mid {
    background: linear-gradient(to right, #2c1e4a, #543a8c);
    /* min-height: 100vh; */
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    padding-bottom: 30px;
}

/* Content wrapper with max width */
.content {
    display: flex;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* Left Column */
.left-column-mid {
    flex: 1; /* Smaller column */
    /*background-color: rgba(255, 255, 255, 0.1); /* Light transparency for contrast */
    padding: 20px;
    color: white;
    text-align: center;
}

/* Right Column */
.right-column-mid {
    color: white;
    text-align: center;
    display: flex; /* Enables Flexbox */
    flex: 1; /* Smaller column */
    justify-content: center; /* Center horizontally */
    /* align-items: center; */
    padding: 20px;
}

.d-block{
    display: block!important;
}
.d-block .text-center{
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}
.d-block h3 {
    color: #c1ff72;
}
.p-0{
    padding: 0!important;
}
.pt-50p{
    padding-top: 50px;
}
.text-left{
    text-align: left;
}
.evd-img{
    object-fit: cover; /* Maintain aspect ratio */
    height: 400px;
    width: 100%;
}
.slide-wrap{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}
.is-image {
    padding: 0 5px;
}
.rounded-3 {
    width: 100%;
}
.image-slider .slick-prev:before, .image-slider .slick-next:before {
    font-size: 35px;
    line-height: 1;
    opacity: 100;
}
.image-slider .slick-next {
    right: 55px;
}
.image-slider .slick-prev {
    left: 27px;
    z-index: 9;
}
/* Responsive Design */
@media (max-width: 768px) {



    .content {
        flex-direction: column; /* Stack columns vertically */
    }

    .left-column, .right-column {
        flex: none;
        width: 100%; /* Full width for both columns */
    }

    .wf-three-columns {
        flex-direction: column; /* Stack columns vertically */
        align-items: center; /* Center-align the columns */
    }

    .wf-column {
        margin-bottom: 20px; /* Add space between stacked columns */
    }
    .container {
        flex-direction: column;
        text-align: center;
    }
    .columfooter {
        max-width: 100%; /* Columns stack vertically on smaller screens */
        flex: 0 0 100%;
    }

    .three-columns {
        flex-direction: column; /* Stack columns vertically on smaller screens */
        gap: 30px; /* Add more space between stacked columns */
    }

    .columfooter {
        text-align: left; /* Align content to the left for better readability */
    }

    .columfooter .icon {
        margin-bottom: 10px; /* Adjust spacing below the icon */
    }

    .left-column, .right-column {
        flex: unset;
        width: 100%;
    }

    h1 {
        font-size: 2rem;
    }

    h2{
        font-size: 1.5rem;
    }



    .subtitle {
        font-size: 1rem;
    }

    .cta-buttons .btn {
        margin: 10px 5px;
        font-size: 0.9rem;
    }

    .video {
        max-width: 100%; /* Allow the video to use the full width on smaller screens */
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .caption {
        font-size: 0.85rem;
    }

    .large-column, .small-column {
        flex: unset;
        width: 100%;
    }

    .small-column img {
        margin-top: 20px;
    }
    .menu-header {
        justify-content: space-between; /* Keeps logo and toggle in place */
    }

    .menu-toggle {
        display: flex; /* Show hamburger icon on smaller screens */
    }

    .menu-list {
        display: none; /* Hide menu by default */
        flex-direction: column;
        gap: 15px;
        position: absolute;
        top: 60px;
        right: 0; /* Align menu dropdown to the right */
        background-color: #f8f8f8;
        padding: 20px;
        border-radius: 10px;
    }

    .menu-list.active {
        display: flex; /* Show menu when active */
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
   
    .img-parapgraph.left  {
        max-width: 100%;
        height: auto; /* Adjust height as needed */
        text-align: center;
    }

    .img-parapgraph.normal  {
        max-width: 100%;
        height: auto; /* Adjust height as needed */
        text-align: center;
    }

    .image-column {
        flex: none; /* Allow it to stack vertically */
        width: 100%; /* Take full width on smaller screens */
        padding: 20px; /* Add extra padding for spacing */
    }

    .image-column img {
        max-width: 90%; /* Reduce width slightly for better fit on smaller screens */
        height: auto; /* Ensure it maintains its aspect ratio */
    }   
    
    .three-column-container {
        flex-direction: column; /* Stack columns vertically on smaller screens */
    }



    .general h1{
        
        font-size: 0.5rem;
    }
  

    header.hero h1 {
        font-size: 2rem;
    }

    header.hero p {
        font-size: 1rem;
    }

    .cta-buttons .btn {
        font-size: 0.9rem;
        padding: 20px 20px;
    }

    section.benefits article {
        padding: 0 15px; /* Add padding for smaller screens */
    }

    .specifications h2.right {
        text-align: center;
    }
}

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

    .general h1{
        
        font-size: 1rem;
    }
    .three-column-container {
        flex-direction: column; /* Stack columns vertically on smaller screens */
    }

    .three-column-section {
        flex-direction:column ;
        gap: 20px;
    }
    
    .three-column-section .column {
        flex: 1;
        flex-wrap: wrap;
        background-color: #ffffff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .three-colu4mn-section .column h3 {
        font-size: 1.0rem;
        margin-bottom: 15px;
        color: #333;
    }
    
    .three-column-section .column p {
        font-size: .5rem;
        color: #555;
        line-height: 1.6;
    }

    .subtitle {
        font-size: 0.9rem;
    }

    .cta-buttons .btn {
        padding: 16px 16px;
        font-size: 0.95rem;
    }

    .caption {
        font-size: 0.8rem;
    }

    .video {
        max-width: 100%; /* Allow the video to use the full width on smaller screens */
        border-radius: 5px;
        margin-bottom: 5px;
    }
    header.hero {
        padding: 30px 10px;
    }

    header.hero h1 {
        font-size: 1.8rem;
    }

    header.hero p {
        font-size: 0.9rem;
    }

    .cta-buttons {
        flex-direction: column; /* Stack buttons vertically */
    }

    .cta-buttons .btn {
        width: 100%;
        font-size: 1rem;
    }

    section.benefits article {
        font-size: 0.9rem;
    }

   
}



header.hero {
    background: linear-gradient(to right, #2c1e4a, #543a8c);
    color: white;
    padding: 50px 20px;
}


header.hero.black {
    background: black;
    color: white;
    padding: 50px 20px;
}

header.hero h1 {
    font-size: 2.5rem;
    margin: 0;
}

header.hero p {
    font-size: 1.2rem;
    margin: 10px 0 30px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; /* Allows buttons to wrap on smaller screens */
}

.cta-buttons .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}

.btn.primary {
    background-color: #d73cbe;
    color: #ffffff;
}

.btn.secondary {
    background-color: #38b6ff;
    color: #333;
}

section {
    padding: 40px 20px;
    text-align: center;
    box-sizing: border-box;
}

/* Feature List Section */
.feature-list-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
}

.feature-list-section h3 {
    margin-bottom: 15px;
    color:  #c1ff72;
}

.feature-list {
    list-style-type: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
}

.feature-list li {
    font-size: 1.3rem;
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
    line-height: 1.5;
    text-align: left;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

/* Add custom bullet icon */
.feature-list li::before {
    content: '✔'; /* Add checkmark symbol */
    color: #c1ff72; /* Gold color for the icon */
    font-size: 1.2rem;
    position: absolute;
    left: 0;
    top: 0;
}
hr {
    border: none; /* Removes the border (default line) */
    margin: 40px 20px; /* Adds vertical spacing if needed */
    visibility: hidden; /* Hides the element visually but keeps it in the layout */
}

section.benefits article {
    margin: 20px auto;
    max-width: 600px; /* Constrain article width on larger screens */
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 20px;
    font-size: 0.9rem;
}



/* General Container Styles */
.three-column-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

/* Column Styling */
.three-column-container .column {
    flex: 1; /* Ensures all columns are of equal size */
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Icon Styling */
.icon {
    width: 90px; /* Adjust icon size as needed */
    height: 90px;
    margin-bottom: 15px;
}

/* Title Styling */
.three-column-container .column h3 {
    font-size: 1.3rem;
    color:#d73cbe;
    margin-bottom: 10px;
}

/* Description Styling */
.three-column-container .column p {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
}


/* Benefits List Section */

/* Benefits List */
.benefits-list {
    list-style-type: disc; /* Default bullet point style */
    padding-left: 20px; /* Indent the list */
    color: #555;
}

.benefits-list li {
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
    margin-bottom: 10px; /* Add space between list items */
}

/* General Section */
.general {
    text-align: center;
    padding: 40px 20px;
    background-color:#543a8c;
    margin: 0px;
}

.general h1{
    font-size: 2.2rem;
    color: white;
    margin-bottom: 15px;
}

.general h3{
    font-size: 1rem;
    color: white;
    margin-bottom: 15px;
}

.general .subtitle {
    font-size: 1.0rem;
    color:#c1ff72;
    margin-bottom: 20px;
}

.general p {
    font-size: 1rem;
    color: #ffffff;
    line-height: 1.5;
    max-width: 600px;
    margin: 0 auto; /* Center the paragraph */
}



/* Centered Section */
.centered-section {
    text-align: center;
    padding: 40px 20px;
    background-color: #f9f9f9;
}

.centered-section h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #333;
}

.centered-section p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 20px;
}

.centered-section .btn {
    padding: 10px 20px;
    font-size: 1rem;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.centered-section .btn:hover {
    background-color: #0056b3;
}

/* Specifications Section */
.specifications {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

.specifications h2.left {
    text-align: left;
}
.specifications h2.right {
    text-align: right;
}
.specifications h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #333;
    text-align: center;
}

/* Styled List */
.spec-list {
    list-style-type: disc; /* Default bullet style */
    padding-left: 20px; /* Indent the list */
    color: #555;
    
}

.spec-list li {
    font-size: 1.3rem;
    line-height: 1.6;
    margin-bottom: 10px; /* Add space between items */
    font-family: Arial, Helvetica, sans-serif;
}

.image-column {
    flex: 1; /* Same proportion as text-column by default */
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    padding: 10px; /* Add some padding for better spacing on smaller screens */
}

.image-column img {
    max-height: 100%; /* Ensure the image height doesn't exceed the column height */
    max-width: 100%; /* Ensure the image width doesn't overflow */
    object-fit: content; /* Maintain aspect ratio */
}