* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #f8f9fa;
    padding-top: 100px; /* Prevent content from hiding under navbar */
}

/* NAVBAR */
.navbar {
    display: flex;
    justify-content: space-between; /* Initially: Logo left, menu right */
    align-items: center;
    padding: 15px 50px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: transparent;
    transition: all 0.5s ease-in-out;
}

/* LOGO */
.logo img {
    height: 150px;
    transition: filter 0.3s ease-in-out, height 0.3s, transform 0.5s ease-in-out;
}

/* NAVIGATION BOX */
.nav-container {
    transition: transform 0.5s ease-in-out, background 0.5s ease-in-out, padding 0.5s ease-in-out, width 0.5s ease-in-out;
}

/* NAVIGATION LINKS */
.nav-links {
    list-style: none;
    display: flex;
    gap: 40px;
    transition: gap 0.5s ease-in-out, justify-content 0.5s ease-in-out;
}

/* NAVIGATION LINKS STYLE */
.nav-links li a {
    text-decoration: none;
    color: black;
    font-size: 18px;
    padding: 8px 15px;
    transition: color 0.3s;
}

/* SCROLL EFFECTS */
.navbar.scrolled {
    background: black;
    padding: 10px 30px;
    justify-content: center; /* Move everything to center */
}

/* Move both logo and menu to the center */
.navbar.scrolled .logo {
    transform: translateX(0); /* Logo moves to center */
}

.navbar.scrolled .nav-container {
    flex-grow: 1;
    display: flex;
    justify-content: center; /* Menu moves to center */
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 30px;
    border-radius: 50px;
}

.navbar.scrolled .nav-links {
    gap: 20px;
}

.navbar.scrolled .nav-links li a {
    color: white;
}

/* Logo color change */
.navbar.scrolled .logo img {
    filter: brightness(0) invert(1);
    height:0px;
}

/* CONTENT */
.content {
    height: 200vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 50px;
}

h1 {
    font-size: 28px;
    margin-bottom: 20px;
}

p {
    font-size: 18px;
    max-width: 600px;
}


/* Hero Section */
.header {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    padding: 20px;
}

/* Text Box */
/* Ensure text box is properly centered and wide enough */
.text-box {
    max-width: 800px;
    /* Increase width */
    text-align: center;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: white;
}

/* Fix h1 text overflow issue */
.text-box h1 {
    font-size: 36px;
    /* Adjust font size if needed */
    margin-bottom: 15px;
    color: #222;
    white-space: normal;
    /* Allow text to wrap if necessary */
    overflow: visible;
    /* Prevent text cut-off */
    text-overflow: unset;
    /* Remove ellipsis */
}

/* Ensure paragraph text stays in two lines */
.text-box p {
    font-size: 18px;
    color: #555;
    max-width: 700px;
    margin: 0 auto 20px;
    line-height: 1.6;
    /* Better readability */
    white-space: normal;
    word-wrap: break-word;
}

/* Button */
.hero-btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background:  rgb(3, 24, 92);
    border-radius: 5px;
    text-decoration: none;
    transition: 0.3s;
}

.hero-btn:hover {
    background: #0056b3;
}

@media(max-width:700px) {
    .text-box h1 {
        font-size: 20px;
    }

    .nav-links {
        position: absolute;
        background: white;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
    }

    nap.fa {
        display: block;
        color: white;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
}

.about {
    width: 90%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}

h1 {
    color: black;
    font-weight: 600;
}

p {
    color: black;
    font-size: 18px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;

}

.row {
    margin: 10%;
    display: flex;
    justify-content: space-between;

}

.text2 h1 {
    font-size: 35px;
    color: rgb(31, 41, 55);
}

.text2 p {
    margin: 10px 0 40px;
    font-size: 20px;
    color: black;
}

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
    top: -100px;
    /* Move up */
}

.content-box {
    background-color: whitesmoke;
    height: 200vh;
    color: #fff
}

.service {
    align-items: center;
}

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

.wrapper .our-team {
    display: flex;
    width: auto;
    justify-content: center;
}

.wrapper .our-team .team-member {
    width: 250px;
    margin: 5px;

}


.text3 h1 {
    font-size: 35px;
    color: rgb(31, 41, 55);
    transform: translateY(-45px);
}

.how-to-use {
    align-items: center;
}

.text4 h1 {
    font-size: 35px;
    color: rgb(31, 41, 55);
    transform: translateY(50px);
}

.text4 p {
    transform: translateY(53px);

}

/* Centering the images */
.image-container {
    display: flex;
    justify-content: center;
    gap: 2px;
    /* Space between images */
    margin-top: 50px;
}

/* Styling each image box */
.image-box {
    text-align: center;
    width: 500px;
    /* Match image width */
    position: relative;
    /* Allows precise text positioning */
}

/* Styling images */
.zoom-image {
    width: 500px;
    height: 500px;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
    /* Smooth zoom effect */
}

/* Zoom effect on hover */
.zoom-image:hover {
    transform: scale(1.2);
}

/* Styling the Step 1, Step 2, Step 3 text */
.step-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
    /* Adjust space below image */
    margin-bottom: 5px;
    /* Ensures text does not overlap */
}

/* Styling the description text */
.image-text {
    font-size: 20px;
    font-weight: 600;
    color: #555;
    max-width: 500px;
    /* Prevents text from exceeding image width */
    margin-top: 0px;
    /* Adjust this if needed */
    text-align: center;
}

/* Section styling */
.support {
    display: flex;
    /* Enable flexbox */
    justify-content: space-between;
    /* Space between text and image */
    align-items: center;
    /* Vertically align items */
    padding: 50px;
}

/* Styling the text container */
.multi-platform {
    width: 50%;
    /* Use half the width of the section */
    text-align: left;
    /* Align text to the left */
    padding-right: 50px;
    /* Add some space between the text and image */
    margin-left: 75px;
}

/* Styling the image container */
.support-image {
    width: 40%;
    /* Image takes up 40% of the section width */
    display: flex;
    justify-content: flex-end;
    /* Align image to the right */
}

.support-image img {
    width: 100%;
    /* Make the image responsive */
    height: auto;
}

/* Styling the text */
.multi-platform h1 {
    font-size: 38px;
    font-weight: bold;
    color: rgb(31, 41, 55);
    margin-bottom: 10px;
}

.multi-platform p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}


/* Section styling */
.support2 {
    display: flex;
    /* Enable flexbox */
    justify-content: space-between;
    /* Space between text and image */
    align-items: center;
    /* Vertically align items */
    padding: 50px;
    flex-direction: row-reverse;
    /* Reverse order: Text on right, Image on left */
}

/* Styling the image container */
.support-image2 {
    width: 40%;
    /* Adjust image width */
    display: flex;
    justify-content: flex-start;
    /* Align image to the left */
}

.support-image2 img {
    width: 100%;
    /* Make the image responsive */
    height: auto;
}

/* Styling the text container */
.multi-platform2 {
    width: 50%;
    /* Use half the width of the section */
    text-align: left;
    /* Align text to the left */
    padding-left: 20px;
    /* Add some space between the text and image */
}

/* Styling the text */
.multi-platform2 h1 {
    font-size: 38px;
    font-weight: bold;
    color: rgb(31, 41, 55);
    margin-bottom: 10px;
}

.multi-platform2 p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* Section styling */
.support3 {
    display: flex;
    /* Enable flexbox */
    justify-content: space-between;
    /* Space between text and image */
    align-items: center;
    /* Vertically align items */
    padding: 50px;
}

/* Styling the text container */
.multi-platform3 {
    width: 50%;
    /* Use half the width of the section */
    text-align: left;
    /* Align text to the left */
    padding-right: 50px;
    /* Add some space between the text and image */
    margin-left: 75px;
}

/* Styling the image container */
.support-image3 {
    width: 40%;
    /* Image takes up 40% of the section width */
    display: flex;
    justify-content: flex-end;
    /* Align image to the right */
}

.support-image3 img {
    width: 100%;
    /* Make the image responsive */
    height: auto;
}

/* Styling the text */
.multi-platform3 h1 {
    font-size: 38px;
    font-weight: bold;
    color: rgb(31, 41, 55);
    margin-bottom: 10px;
}

.multi-platform3 p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

.format {
    align-items: center;
    padding: 50px;
    font-size: 35px;
    font-weight: bold;
}

.format h1 {
    color: rgb(31, 41, 55);
}

/* Container for all the image boxes */
.vcard-image {
    display: flex;
    /* Enable flexbox */
    justify-content: space-between;
    /* Space images evenly */
    align-items: flex-start;
    /* Align items to the top */
    padding: 50px;
    gap: 20px;
    /* Adds spacing between the images */
}

/* Common styling for all image boxes */
.image-box1,
.image-box2,
.image-box3 {
    width: 30%;
    /* Each box takes 30% of the container width */
    text-align: center;
    /* Center align text */
    padding: 20px;
    border-radius: 10px;
    /* Optional: Adds rounded corners */
}

/* Ensure images are responsive */
.image-box1 img,
.image-box2 img,
.image-box3 img {
    width: 100%;
    /* Make images fit their container */
    height: auto;
    border-radius: 10px;
    /* Optional: Adds rounded corners */
}

/* Title styling */
.step-title1,
.step-title2,
.step-title3 {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-top: 15px;
}

/* Text styling */
.image-text1,
.image-text2,
.image-text3 {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Button styling */
.vcard-button {
    background-color: #51667a;
    /* Blue button */
    color: white;
    font-size: 18px;
    padding: 14px 40px;
    width: 220px;
    /* Fixed width for all buttons */
    height: 50px;
    /* Fixed height for all buttons */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    display: inline-block;
    text-align: center;
}

/* Ensure buttons remain the same size */
.image-box1 .vcard-button,
.image-box2 .vcard-button,
.image-box3 .vcard-button {
    width: 220px;
    /* Same width */
    height: 50px;
    /* Same height */
}

.vcard-button:hover {
    background-color: #2b2b48;
    /* Darker blue on hover */
}

/* Section styling */
.support4 {
    display: flex;
    /* Enable flexbox */
    justify-content: space-between;
    /* Space text and image */
    align-items: center;
    /* Align items vertically */
    padding: 50px;
}

/* Styling the text container */
.multi-platform4 {
    width: 50%;
    /* Use half the width of the section */
    text-align: left;
    /* Align text to the left */
    margin-left: 75px;
    margin-top: -80px;
}

/* Styling the image container */
.support-image4 {
    width: 65%;
    /* Adjust image width */
    display: flex;
    justify-content: flex-end;
    /* Push image to the right */
}

/* Ensure image is responsive */
.support-image4 img {
    width: 100%;
    /* Make the image responsive */
    height: auto;
    max-width: 700px;
    /* Limit max size */
}

/* Styling the text */
.multi-platform4 h1 {
    font-size: 38px;
    font-weight: bold;
    color: rgb(31, 41, 55);
    margin-bottom: 15px;
}

.multi-platform4 p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

.slider h1 {
    font-size: 38px;
    color: rgb(31, 41, 55);

}

/* General styles */
body {
    font-family: Arial, sans-serif;
    background: #f9f9f9;
    text-align: center;
    margin: 0;
    padding: 0;
}

h1 {
    margin-top: 50px;
    color: #333;
}

/* Slider container */
.slider-container {
    width: 60%;
    overflow: hidden;
    margin: 20px auto;
    position: relative;
    border-radius: 10px;
}

/* Slides wrapper */
.slides {
    display: flex;
    width: 1000%;
    transition: transform 0.5s ease-in-out;
}

/* Each feedback card */
.slide {
    width: 10%;
    flex: 1;
    background: rgb(128, 144, 168);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.slide p {
    font-size: 18px;
    color: #0d0a0a;
    margin: 30px 0;
    font-size: 15px;
}

.slide h3 {
    font-size: 30px;
    color: #0c081e;
}

/* Social media icons */
.slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    text-decoration: none;
    font-size: 16px;
    margin-top: 10px;
}

.slide a i {
    margin-right: 8px;
    font-size: 20px;
}

/* Navigation buttons */
.slider-nav {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.slider-nav label {
    width: 15px;
    height: 15px;
    background: #bbb;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.slider-nav label:hover {
    background: #777;
}

/* Hide default radio buttons */
input[type="radio"] {
    display: none;
}

/* Move slides when radio buttons are checked */
#slide1:checked~.slides {
    transform: translateX(0%);
}

#slide2:checked~.slides {
    transform: translateX(-10%);
}

#slide3:checked~.slides {
    transform: translateX(-20%);
}

#slide4:checked~.slides {
    transform: translateX(-30%);
}

#slide5:checked~.slides {
    transform: translateX(-40%);
}

#slide6:checked~.slides {
    transform: translateX(-50%);
}

#slide7:checked~.slides {
    transform: translateX(-60%);
}

#slide8:checked~.slides {
    transform: translateX(-70%);
}

#slide9:checked~.slides {
    transform: translateX(-80%);
}

#slide10:checked~.slides {
    transform: translateX(-90%);
}

/* General FAQ Styling */
.faq-container {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
}

.faq {
    width: 50%;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    /* Ensures elements move within the container */
    padding-top: 20px;
    /* Adjusts space inside the container */

}

.faq h1 {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: rgba(4, 9, 30, 0.7);
    margin-bottom: 20px;
    position: relative;
    top: -20px;
    /* Moves it up without breaking the layout */
}

/* FAQ Question Styling */
.faq-item {
    margin-bottom: 10px;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    background: rgb(128, 144, 168);
    color: white;
    border-radius: 5px;
    user-select: none;
}

.arrow {
    transition: transform 0.3s ease;
}

/* Hide answer by default */
.faq-answer {
    display: none;
    padding: 10px;
    font-size: 16px;
    background: #f1f1f1;
    border-radius: 5px;
    margin-top: 5px;
}

/* Use checkbox to toggle visibility */
input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]:checked+.faq-question+.faq-answer {
    display: block;
}

input[type="checkbox"]:checked+.faq-question .arrow {
    transform: rotate(180deg);
}

.faq-button {
    text-align: center;
    /* Centers the button */
    margin-top: 30px;
    /* Adjusts spacing */
}

.discover-btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: rgb(31, 41, 55);
    /* Button color */
    text-decoration: none;
    border-radius: 8px;
    /* Rounded corners */
    transition: background 0.3s ease;
}

.discover-btn:hover {
    background-color: rgb(128, 144, 168);
    /* Darker shade on hover */
}

.support5 {
    display: flex;
    /* Enables flexbox */
    justify-content: space-between;
    /* Space between text & image */
    align-items: center;
    /* Aligns items in the center */
    padding: 50px;
}

/* Styling the text container */
.multi-platform5 {
    width: 50%;
    /* Takes half of the section */
    text-align: left;
    /* Aligns text to the left */
    padding-left: 100px;
    /* Adjusts spacing from the left */
    font-size: 30px;
    color: rgba(4, 9, 30, 0.7);
}

/* Styling the button */
.vcard-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: rgba(4, 9, 30, 0.7);
    /* Button color */
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.vcard-btn:hover {
    background-color: rgb(128, 144, 168);
    /* Darker shade on hover */
}

/* Styling the image container */
.support-image5 {
    width: 55%;
    /* Takes half of the section */
    display: flex;
    justify-content: flex-end;
    /* Aligns image to the right */
    margin-left: -40px;
}

/* Ensure image is responsive */
.support-image5 img {
    width: 110%;
    /* Responsive width */
    max-width: 550px;
    /* Limits the max size */
    height: auto;
}

/* Footer Background */
.footer {
    background-color: rgba(4, 9, 30, 0.7);
    /* Dark background */
    color: rgba(4, 9, 30, 0.7);
    /* Text color */
    padding: 50px 0;
}

.footer p {
    color: lightgray;
}

/* Footer Container */
.footer-container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

/* Each Column */
.footer-column {
    width: 23%;
    /* Each column takes 23% of the width */
    padding: 10px;
}

/* Footer Titles */
.footer-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Unique Title Colors */
.about-title {
    color: rgba(4, 9, 30, 0.7);
    /* Orange */
}

.resources-title {
    color: rgba(4, 9, 30, 0.7);
    /* Blue */
}

.legal-title {
    color: rgba(4, 9, 30, 0.7);
    /* Tomato Red */
}

/* Links Styling */
.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 8px;
}

.footer-column ul li a {
    text-decoration: none;
    color: #ccc;
    /* Light gray */
    font-size: 16px;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: rgba(4, 9, 30, 0.7);
    /* White on hover */
}

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

    .footer-column {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }
}