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

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: #ffffff;
}

h1 {
    font-size: 1.75rem;
    margin: 10px;
    color: #003366;
    text-align: center;

}

.navbar {
    background-color: #002d63;
    height: 100px; /* Set navbar height to 100px */
    position: relative;
    z-index: 999; /* Ensure navbar is on top */
}

.container {
    height: 100%; /* Ensure container takes the full height of the navbar */
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically center the items */
}

.logo a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
}

.nav-links {
    display: flex;
    list-style: none;
    position: relative;
    z-index: 1000; /* Nav links should be on top of everything else */
}

.nav-links li {
    margin: 0 1rem;
}

.nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.15rem;
    transition: color 0.3s ease;
    font-family: Arial, Helvetica, sans-serif;
}

.nav-links a:hover {
    color: #f0f0f0;
}

.button {
    border: 1px solid #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 5px;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 1001; /* Ensure the toggle button is on top */
}

.menu-toggle .bar {
    height: 3px;
    width: 25px;
    background-color: #ffffff;
    margin: 4px 0;
    transition: all 0.3s ease;
}



p {
    margin-bottom: 1rem;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
}



.video-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    cursor: pointer;
    
    padding: 0;
    overflow: hidden;
}

.video-preview img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
   
}



.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    
    border-radius: 14px;
}

.play-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 15px 0 15px 25px;
    
}

.video-preview:hover .play-button {
    background-color: #ff0000;
}



.info-section{
    padding: 2rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden; /* Prevent content overflow */
}

.info-section h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #003366;
}

/* best features */

.best-features {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}

.best-features h2 {
    text-align: center;
    color: #003366;
    font-size: 1.5rem;
    margin-bottom: 2rem;
}
h3{
    font-size: 1.3rem;
    margin-bottom: 2rem;
    color: #000;
}

.features-container {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.feature-column {
    flex: 1 1 300px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    transition: all 0.3s ease; /* Smooth transition to minimize visual shifts */
   
}

.feature-column a {
margin: 10px;
font-family: Arial, Helvetica, sans-serif;
color: blue;
font-size: 24px;
text-decoration: none;
}

.feature-list {
    list-style-type: none;
    padding: 0;
    margin: 0; /* Remove any margin that might cause shifts */
}

.feature-list li {
    position: relative;
    padding: 6px 0 6px 2rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    color: #000;
    font-size: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
    min-height: 48px;
    display: flex;
    align-items: center;
}

.feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #1A4D2E;
    font-weight: bold;
    font-size: 1.2rem;
}

.feature-list a{
    text-decoration: none;
    font-size: 24px;
    color: #000;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
    
    display: inline-block;
  
    margin: 10px;
}




/* Performance optimizations */
.best-features {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}

/* footer */

.footer {
    background-color: #EBF2FA;
    padding: 2rem 1rem;
    font-family: Arial, Helvetica, sans-serif;
}
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
}

.footer-section {
    flex: 1 1 200px;
    margin-bottom: 1rem;
}

.footer-section:first-child {
    flex: 3 1 300px;
}
.footer-section h3 {
    color: #183B56;
    margin-bottom: 1rem;
}
.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section a {
    color: #000;
    text-decoration: none;
    display: inline-block;
    
    margin: 10px;
    font-size: 18px;
}
.social-icons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
}
.social-icons svg {
    width: 24px;
    height: 24px;
    fill: #333;
}
.copyright {
    background-color: #B9CDE4;
    text-align: center;
    padding: 20px;
    font-size: 1.1rem;
    color: #000;
}

/* faqs */
.container{

    max-width: 1200px;
    overflow: hidden;
    margin-inline: auto;
    padding-inline: 20px;
}

.card-button{

    padding: 0.6rem 3rem;
    border: 2px solid rgb(0, 51, 102);
    background-color: rgb(0, 51, 102);
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
    transition: all 50ms ease-in;
    margin: 1rem;
    font-size: 20px;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration: none;
    }


    /* video grid */

    
    .citizensip-video{
        display: flex;
       justify-content: center;
    }
    .act-video-container {
        width: calc(50% - 10px);
        margin-bottom: 20px;
        position: relative;
        aspect-ratio: 16 / 9;
    }
    .act-video-preview {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        cursor: pointer;
        padding: 0;
        overflow: hidden;
        background-color: #000;
    }
    .act-video-preview img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.3s ease;
    }
    .act-play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 68px;
        height: 48px;
        border-radius: 14px;
        background-color: rgba(0, 0, 0, 0.7);
        transition: background-color 0.3s ease;
    }
    .act-play-button::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-40%, -50%);
        border-style: solid;
        border-width: 15px 0 15px 25px;
        border-color: transparent transparent transparent #fff;
    }
    .act-video-preview:hover .act-play-button {
        background-color: #ff0000;
    }
    .act-video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    /* questions */

    .hero_section{
    
        padding: 10px 0px;            
        background: #fff;
        margin-block-start:5px;
        
          
                       
    }

    .section_container{
        width: auto;
        margin: 10 auto;
    
    }

    .hero_container{
        display: flex;
        justify-content: space-between;
        
        align-items: center;
        
    }
    .hero_container .text_section{
        margin-left: 50px;
        margin-right: 30px;
        width: 100%;
    }

    .hero_container .text_section p{
        font-size: 20px;
        color: #000;
        font-weight: 600;
        margin: 24px 0;
                           
    
    }

    .hero_container .text_section .hero_section_button{
        display: flex;
        gap: 20px;
        
    
    }

    /*answers - options 4 page */

.option {
display: flex;
align-items: center; /* Align items vertically in the center */
font-size: 18px;
margin: 20px 0;
padding: 15px;
border-radius: 10px;
border: 0.5px solid #577592;
font-family: Arial, Helvetica, sans-serif;

cursor: pointer;
color: #000;
}

.option:hover{
background: rgb(0, 51, 102);
color: #fff;
}

.answer-container{
margin-top: 10px;
justify-content: center;
column-gap: 1em;
row-gap: 1em;
width: 1200px;
height: 350px;
}

.answer-container .answer-card-inner{

width: 100%;
height: 100%;

}

.answer-container .answer-card-front{

 
border-radius: 15px;
overflow: hidden;
z-index: 1;
padding: 10px 30px;
}

.next-question-container{

display: flex;             
padding: 5px 20px;
margin-bottom: 30px;
justify-content: flex-end;


}

.next-question{
background: rgb(0, 51, 102);
color: #fff;
  
padding: 8px 50px;
border-radius: 10px;
text-align: center;
text-decoration: none;    
transition: all 0.3s ease-out;
font-weight: 500;
font-size: 18px;
border: 3px solid transparent;
margin-top: 15px;
cursor: pointer;
}

.box_container {
display: flex;
flex-wrap: wrap;
justify-content: center; /* Aligns items horizontally to the center */
align-items: center; /* Aligns items vertically to the center */
text-align: center; /* Centers text inside the boxes */
margin-top: 50px;

}

.box-1, .box-2, .box-3, .box-4 {
flex: 1 200px;
height: 80px;

color: #000; /* Sets text color to white */
display: flex; /* Enables flex properties on the boxes */
justify-content: center; /* Centers text horizontally */
align-items: center; /* Centers text vertically */
font-size: 20px;
font-weight: 600;
}

.box-1 {
background-color: orange;
color: #000;

}

.box-2 {
background-color: bisque;
gap: 6px;
}

.box-3 {
background-color: aqua;
gap: 50px;

}

.fa-facebook,
.fa-twitter,
.fa-youtube,
.fa-microphone {
    width: 2rem;
    height: 2rem;
    fill: black;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
    transition: fill 0.3s ease, color 0.3s ease;
}

.fa-facebook:hover,
.fa-twitter:hover,
.fa-youtube:hover,
.fa-microphone:hover {
    fill: red; /* Changes SVG icon color on hover */
    color: red; /* For consistency in case of fallback */
}

.fa-microphone {
    cursor: pointer;
}

.speakbtn {
    width: 2rem;
    height: 2rem;
    fill: black;
    cursor: pointer;
}

/* Additional styles for SVG icons if needed */
.hover-link-footer svg {
    margin: 0 5px; /* Space between icons */
}


.inactive{
display: none;
}

.disabled{
pointer-events: none;
}



.option.correct{

background: green;
color: #fff;
border-color: rgb(6, 138, 28);

}

.options .incorrect{

background: red;
color: #fff;
border-color: rgb(184, 12, 12);

}

.option .fa-solid {
font-size: 30px;
margin-left: auto; /* Pushes the icon to the end */
}

.option .mark_regular {
    width: 30px; /* Set the width of the SVG */
    height: 30px; /* Set the height of the SVG */
    margin-left: auto; /* Pushes the icon to the end */
    fill: currentColor; /* Optional: Makes the SVG color inherit the text color */
    flex-shrink: 0;
}

.info-section ul{
    
    list-style: none;
  
}
.info-section ul,li{
    padding: 0.6rem 1.5rem;
                font-size: 18px;
                color: #000;
                font-family: Arial, Helvetica, sans-serif;
}

.description{

    font-size: 18px;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
}


/*  results box*/
.pricing{

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 0.5rem;
    
}

.card-wrapper{

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 550px;
    height: auto;
    background-color: #f9f9f9;
    border-radius: 20px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.22);
    padding: 2rem;
    margin: 1rem;
    transform: all 0.2s ease-in;

}
.card-wrapper2{

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 550px;
    height: auto;
    background-color: #21801d;
    border-radius: 10px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.22);
    padding: 0.5rem;
    margin: 1rem;
    transform: all 0.2s ease-in;
   
}

.card-wrapper2 a{
    color: #fff;
}

.card-detail2{
   
    text-align: center;
    
    
}

.card-header{

    margin: 1rem;
    text-align: center;
}

.card-detail{
    width: 100%;
        
}

.card-header h2{

    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #003366;
}

.card-detail a{
    text-decoration: none;
}

.card-detail p{

    padding: 0.6rem 1.5rem;
    font-size: 18px;
    border-bottom: 1px solid #d5d5d5;
    
}


/* result box end */
    
@media (max-width: 768px) {
    
    
    .nav-links {
        position: fixed; /* Fixed positioning removes the nav from the document flow */
        right: 0;
        height: 100vh;
        top: 70px;
        background-color: #002d63;
        flex-direction: column;
        align-items: center;
        width: 100%;
        transform: translateX(100%); /* Initially move the menu off-screen */
        transition: transform 0.3s ease-in;
        z-index: 1000; /* Ensure the nav links appear on top of the ad */
        display: none; /* Completely hide the menu initially */
    }

    .nav-links li {
        margin: 2rem 0;
    }

    .nav-links a {
        font-size: 1.5rem;
    }

    .nav-links.active {
        transform: translateX(0); /* Move the menu back into view */
        display: flex; /* Display the menu when active */
    }

    .menu-toggle {
        display: flex;
    }

    
    .features-container {
        flex-direction: column;
    }

    .feature-column {
        max-width: 100%;
        
    }

       

    .footer-section,
    .footer-section:first-child {
        flex: 1 1 100%;
    }

    .footer-section ul li {
        margin-bottom: 0;
    }

    .footer-section a,
    .social-icons a {
        padding: 12px 8px;
        min-height: 48px;
    }

    .footer-content {
        flex-direction: column;
    }

    
    .act-video-container {
        width: 100%;
    }

    /*question */

    .hero_container .text_section{
        margin-left: 2px;
        margin-right: 2px;
        width: 100%;
    }

.answer-container .answer-card-front{
 
     
    padding: 0px;    
    
    
     }

     .next-question-container{

           
        justify-content: center;
       
        
    
    }
    .fa-facebook,.fa-x-twitter,.fa-pinterest,.fa-youtube,.fa-tumblr{

        font-size: 2rem;
    }

        .hero_section{
            padding: 0;
            margin: 0 5px;
          
            
        }

        .hero_section.full-height {
            height: 800px;
        }

        .hero_container .text_section p{
            
            margin: 5px 5px;
        }

        .box_container {
            
            margin-top: 20px;
        }
        .box-1, .box-2, .box-3, .box-4 {
            
            height: 60px;
            
        }

        .answer-container{
            width: 100%;
            height: 100%;
        }

        .option {
            
            font-size: 18px;
            margin-bottom: 15px;
            padding: 10px;
            font-family: Arial, Helvetica, sans-serif;
            
            
            cursor: pointer;
            color: #000;
            }

            .info-section ul,li{
                padding: 0.6rem 0.5rem;
                            
            }   

            .pricing{
       
                padding: 0;
            }
        
            .card-detail p{
        
                padding: 0.6rem;
                
            }
}