/* 

Styling for the whole site 

The file is strucutred with common CSS at the top,
followed by specific CSS for each section of the website.

The CSS is then followed by media queries for responsive design.

*/
html {
    scroll-behavior: smooth;
     /* used so nav links 'jump' to the correct location. */
    scroll-padding-top: 190px;
   
}

body {
    margin: 0;
    font-size: 1.2rem;
    font-family: 'Poppins', Arial, sans-serif;
    padding-top: 100px;
}


/* font Poppins */
@font-face {
    font-family: 'Poppins';
    src: url('../assets/fonts/Poppins-Regular.ttf') format('truetype');
}

/* fixed header / navigation bar */
.header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    height: auto;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    /* Ensures it stays above other elements */
    z-index: 1000;
    /*  Adds shadow */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px 0;

}



#logo-image {
    height: 70px;
}

.navigation {
    font-size: 1rem;
}

li {
    color: #10d3bb;
    margin-right: 150px;
}

/* Header bar formatting */
.header-ul {
    display: flex;
    flex-wrap: wrap;
}

.header-li {
    list-style-type: none;
    margin-right: 50px;
}

.header-li a {
    color: black;
    text-decoration: none;
    /* Remove underline from links */
}

.header-li a:hover {
    color: #555;
}

.nav-link {
    font-weight: bold;
    color: black;
    text-decoration: none;
    padding: 3px;
}

.nav-buttons {
    background-color: #10d3bb;
    /* Light green color */
    border: none;
    height: 30px;
    width: 100px;
    border-radius: 50px;
    /*  rounded corner radius */
    cursor: pointer;
    color: white;
    font-size: 0.9rem;
    font-weight: bold;

}

.nav-buttons:hover {
    background-color: #0056b3;
}

.nav-link:hover {
    background-color: #10d3bb;
    padding: 3px;
    color: black;
    border-radius: 3px;
}


.how_to_header {
    font-size: 2.0rem;
    color: white;
    padding-bottom: 10px;
    line-height: 1;
}


.big-white-header {
    font-size: 3.2rem;
    color: white;
    padding-bottom: 10px;
    line-height: 1;
}

.big-black-header {
    font-size: 3.2rem;
    padding-top: 20px;
    line-height: 1.1;

}

.big-teal-header {
    color: #10d3bb;
    font-size: 3.5rem;
    padding-top: 20px;
    text-align: center;

}


.big-white-header-centred {
    color: white;
    font-size: 3.5rem;
    padding-top: 20px;
    text-align: center;

}


.divider-line-above {
    border-top: 2px solid #ccc;
    /* Adjust thickness and color as needed */
    padding-top: 10px;
    /* Adds space between the text and the line */
    margin-top: 20px;
    /* Moves the whole section down */
    text-align: center;
    /* Ensures text is centered */
}

.template-text p {
    line-height: 1.3;
}


/* This is template for white background */
.template-empty-container {
    display: flex;
    width: 98%;
    position: relative;
    height: 460px;
    margin-bottom: 30px;
}

/* clear background */
.template-clear-container {
    height: auto;
}

/* blue gradient background */
.template-blue-gradient-container {
    display: flex;
    width: 100%;
    position: relative;
    height: 460px;
    background: linear-gradient(135deg, #00c8d1, #014a6e);
}

/* A green angled block of colour */
.color-container {
    display: flex;
    background-color: #02A2B1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 80% 70%, 0% 90%);
    width: 100%;
    position: relative;
}

/* A grey rectangle container*/
.grey-container {
    max-width: 800px;
    margin: auto;
    background: #fff;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* A grey rectangle container*/
.clear-container {
    max-width: 800px;
    margin: auto;
    background: #fff;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Container for text and image   */
.template-row-container {
    display: flex;
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    flex-direction: row;
    align-items: center;
    position: absolute;
}

/* text container */
.template-text {
    flex: 0 0 40%;
    margin-right: 5%;
    margin-left: 5%;
    position: relative;
}

/* image container */
.template-image-container {
    flex: 0 0 45%;
    display: flex;
    z-index: 100;
    height: 400px;
    align-items: center;
    padding-top: 20px;
    justify-content: center;
}


/*  image styling in the image container */
.template-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
}


/* This is template for blue background */
.template-colour-container {
    height: auto;
    background-color: #154294;
    margin-top: 40px;

}

/* 
    Secure Data Storage styling  
*/


.secure-container {
    display: flex;
    flex-direction: row;
    /* Arrange items in a row */
    flex-wrap: wrap;
    /* Allow items to wrap to the next line if necessary */
    justify-content: space-between;
    /* Add space between items */
    padding: 20px;
    background-color: #154294;
    margin-bottom: 20px;
}

.secure-item {
    display: flex;
    /* Stack children vertically */
    flex-direction: column;
       /* Align children to the start */
    align-items: flex-start;
     padding: 20px;
    /* Adjust width to fit three items in a row */
    width: 33.33%;
    box-sizing: border-box;

}

.tick-text {
    display: flex;
    align-items: flex-start;

}

.tick-text img {
    align-self: flex-start; /* Ensures the image is aligned to the top */
}

.text-content {
    display: flex;
    /* Stack title and text vertically */
    flex-direction: column;
    /* Space between image and text */
    margin-left: 10px;
}

.secure-title {
    font-weight: bold;
    /* Space below the title */
    margin-bottom: 5px;
    color: white;
}

.secure-text p {
    margin: 0;
    color: #10d3bb;
}


/* say hello to life vault styling  */
.first-line {
    font-size: 1.4rem;
    color: #10d3bb;
    margin-bottom: 10px;
}

.second-line {
    font-size: 1.4rem;
    color: #000000;
    margin-bottom: 10px;
}

.third-line {
    font-size: 1.1rem;
    color: #000000;
    margin-bottom: 10px;
}




.grey-button {
    color: white;
    background-color: slategray;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5%;
    /* font-size: 1rem; */
    border: none;
    cursor: pointer;
    text-decoration: none;
}


.grey-button:hover {
    background-color: #0056b3;
}


/* ****

    Pricing plans

**** */
.black-container {
    height: auto;
    background-color: white;
}

.price {
    font-size: .8rem;
    font-weight: bold;
}

.price-value {
    font-size: 2rem;
    /* Adjust as needed */
    font-weight: bold;
}

.price-period {
    font-size: 1rem;
    /* Adjust as needed */
    font-weight: normal;
}

.choose-button {
    width: max-content;
    padding: 2px 50px 2px 50px;
    border-radius: 5px;
    border: none;
    text-align: center;
    display: inline-block;
    font-weight: 500;
}


.premium-button {
    background-color: #10d3bb;
    width: max-content;
    padding: 2px 50px 2px 50px;
    border-radius: 5px;
    border: none;
    text-align: center;
    display: inline-block;
    font-weight: 500;
}

.pricing_header {
    color: black;
    font-size: 3.2rem;
    padding-top: 10px;
    padding-bottom: 30px;
    text-align: center;
}

.pricing-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
}

.pricing-plan {
    background-color: #10d3bb;
    /* Keep the original color */
    border: 1px solid #dddddd;
    border-radius: 10px;
    width: 20%;
    min-width: 300px;
    margin: 10px 1%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    position: relative;
    height: fit-content;

    &.popular {
        /* Class modifier for popular plans */
        background-color: #000000;
        /* Keep the black background */
        color: #10d3bb;
        width: 25%;
        top: -10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        border: 1px solid #000000;
    }


    .plan-details {
        text-align: left;

        h2 {
            display: inline-block;
            font-size: 1.5rem;
            margin: 10px 0;
            display: grid;
            padding-bottom: 5px;
            width: 100px;
            /* Use currentColor for better maintainability */
            border-bottom: 1px solid currentColor;
        }

        p {
            font-size: 1.2rem;
            color: #666666;
            margin: 10px 0;
        }

        ul {
            list-style-type: none;
            padding: 0;

            li {
                font-size: 0.9rem;
                padding-left: 25px;
                margin-bottom: 2px;
                position: relative;
                min-width: 300px;

                &::before {
                    content: "\2713";
                    position: absolute;
                    left: 0;
                    top: 0;
                    font-size: 1rem;
                    color: white;
                }
            }
        }
    }
}

.choose-button:hover,
.premium-button:hover {
    background-color: #003f7f;
    color: white;
}

/* Toggle Switch */
.toggle-switch {
    position: absolute;
    top: -20px;
    right: 20px;
    display: flex;
    align-items: center;
}

.toggle-checkbox {
    display: none;
}

.toggle-label {
    background-color: black;
    color: #10d3bb;
    border: 1px solid #10d3bb;
    border-radius: 20px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}

.toggle-text {
    margin-right: 5px;
}

.toggle-arrow {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: #10d3bb;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 1rem;
    font-size: 1rem;
    transition: transform 0.3s;
}

.toggle-checkbox:checked+.toggle-label .toggle-arrow {
    transform: rotate(180deg);
}


/* Care for your loved ones section  */

/* tick-text is used wherever we use the lifevault small logo as bullets */
.tick-text {
    display: flex;
    align-items: center;
    /* Center items vertically */
    margin-bottom: 10px;
}

/* this is used for the spacing between the bullet points text */
.tick-text p {
    margin-bottom: 0.5px;
}

.tick-text img {
    width: 45px;
    height: 45px;
    margin-right: 10px;
}

.callout {
    position: relative;
    top: 20px;
    right: 20px;
    margin-left: 20px;
    max-width: 300px;
}

.callout-header {
    padding: 10px 15px;
    background: #10d3bb;
    font-size: 1rem;
    color: black;
    border-radius: 50px;
    text-align: center;
}

.callout-header h4 {
    margin-top: 1px;
}

/* below is styling the link sign up for free */
.trial-links {
    color: black;
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: none;
}

/* Download styling 
    Currently hidden - display:none
 */
.download-container {
    display: none;
    flex-direction: column;
    align-items: center;
    /* Vertically align content */
    /* border: solid 5px black; */
    padding-left: 20px;
    background-color: #10d3bb;
}

.download-button-container {
    display: flex;
    flex-direction: row;
    padding: 20px;
    margin: 20px;
    gap: 20px;
}

.download-button {
    color: white;
    background-color: rgb(61, 60, 60);
    border: none;
    font-size: 1rem;
    border-radius: 5px;
    padding: 10px;
}




/* Footer styles */
.footer {
    background-color: #10d3bb;
    padding: 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-section {
    display: flex;
    align-items: center;
}

.footer-links {
    display: flex;
    flex-direction: column;
    align-items: left;
    font-size: 1rem;
}

.footer-links a {
    display: flex;
    flex-direction: column;
    margin-right: 10px;
    text-decoration: none;
    color: black;
}

.right-section {
    display: flex;
}

.social-links a {
    margin-right: 10px;
    text-decoration: none;
    color: black;
}

.copyright {
    text-align: center;
    margin-top: 20px;
    color: black;
}

#life-vault-image {
    height: 100px;
    /* Set the desired height */
    width: auto;
    /* Maintain aspect ratio */
    margin-right: 10px;
    /* Add some spacing between the logo and the navigation links */
}

#life-vault {
    height: 60px;
    width: auto;
    margin-right: 10px;
}

/* Features styling  */

.big-black-header {
    font-size: 3.2rem;
    padding-top: 20px;
    line-height: 1.1;
}

/* This is template for clear background */
.template-clear-container {
    height: auto;
    background-color: white;
}

#black-life-vault-image {
    width: auto;
    margin-left: 0px;
}

.best-features {
    display: flex;
    margin-left: 30px;
    padding-bottom: 30px;
}

.features-container {
    display: flex;
    justify-content: space-between;
}


.feature-item {
    display: flex;
    flex-direction: column;
    align-items: left;
    padding: 20px;
    width: 33.33%;
    box-sizing: border-box;
}

.feature-number {
    background-color: lightblue;
    color: black;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.feature-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.feature-text p {
    margin: 0;
}


/* Left and right containers */
.left,
.right {
    background-color: #154294;
    /* Navy blue background */
}

.left .feature-title,
.right .feature-title {
    color: #10d3bb
        /* Blue title */
}

.left .feature-text p,
.right .feature-text p {
    color: white;
    /* White text */
}

/* Middle container */
.middle {
    background-color: #002e50;
    /* Darker blue background */
}

.middle .feature-title {
    color: white;
    /* White title */
}

.middle .feature-text p {
    color: #00c8d1;
    /* Light teal text */
}








/* Style all font awesome icons */
.fa {
    padding: 20px;
    font-size: 30px;
    width: 0px;
    /* width was 50px changed to 0 to fix the back to top arrow */
    text-align: center;
    text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
    opacity: 0.7;
}






/* BACK TO TOP BUTTON */

#back_to_top {
    color: lightgray;
    height: auto;
    position: fixed;
    bottom: 20px;
    right: 25px;
    z-index: 10000;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    visibility: hidden;
}

#back_to_top.on {
    opacity: 1;
    color: lightgray;
    visibility: visible;
}

/* Circle around arrow */
#back_to_top>span {
    width: 52px;
    height: 52px;
    line-height: 22px;
    text-decoration: none;
    -o-border-radius: 52px;
    -moz-border-radius: 52px;
    -webkit-border-radius: 52px;
    border-radius: 52px;
    border: 3px solid lightgrey;
    background: 0 0
}


#back_to_top:hover>span {
    background-color: #e8e8e8
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-stack {
    position: relative;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle;
    background: 0 0;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    outline: 0;
}

/* Arrow positioning*/
.fa-arrow-up {
    margin-left: -2px;
    margin-top: -5px;

}




/* Testimonials  */



/* how it works slideshow container */
.how-slideshow-container {
    position: relative;
    height: 550px;
    background: linear-gradient(135deg, #00c8d1, #014a6e);
}

/* Slideshow container */
.slideshow-container {
    position: relative;
    height: 450px;
    background: linear-gradient(135deg, #00c8d1, #014a6e);
}


/* 
  Contact us 
 */
.contact-us-container {
    position: relative;
    background: linear-gradient(135deg, #00c8d1, #014a6e);
}


.contact-us-text {
    color: white;
    font-size: 1.5rem;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}


/* Slides */
.my-slides {
    display: none;
    padding: 80px;
    text-align: center;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -30px;
    padding: 16px;
    color: #888;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    position: absolute;
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 20px;
    background: #ddd;
}


/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

/* The dot/bullet/indicator container */
.dot-how-container {
    text-align: center;
    padding: 20px;
    background: #ddd;
}

/* The dots/bullets/indicators */
.dot2 {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}


/* Add a background color to the active dot/circle */
.active,
.dot:hover .dot2:hover {
    background-color: #717171;
}

/* Add an italic font style to all quotes */
q {
    font-style: italic;
}

/* Add a blue color to the author */
.author {
    color: black;
}

q {
    color: white;
    font-size: 1rem;
}


/* ****

   Media queries for responsive design

***** */

/* Media Query for very small screens (e.g., older iPhones) */
@media (max-width: 479px) {

    .header-wrapper {
        flex-direction: column;
        /* Stack header items vertically */
    }

    body {
        padding-top: 180px;
    }

    .big-teal_header,
    .big-black-header,
    .big-white-header,
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 0.9rem;
    }

    h3,
    h4,
    p {
        font-size: 0.9rem;
    }

    #black-life-vault-image {
        height: 80px;
    }

    .big-white-header-centred {
        font-size: 1.5rem;
        padding-top: 5px;
    }

    .template-colour-container {
        height: auto;
    }

    /* Say hello to life vault */
    .first-line,
    .second-line {
        font-size: .9rem;
        /* Adjust font size for phones */
        margin-bottom: 8px;
        /* Adjust margin for phones */
    }

    .third-line {
        font-size: 0.9rem;
    }

    /* Secure data storage */
    .secure-container {
        flex-direction: column;
    }

    .secure-item {
        width: 300px;
    }

    .secure-text {
        font-size: 1rem;
    }


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

    .feature-item {
        display: flex;
        flex-direction: column;
        align-items: left;
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
    }

    .template-clear-container {
        height: auto;
    }

    /* pricing page */
    .pricing-plan,
    .pricing-plan-popular {
        width: 100%;
        margin: 10px 0;
    }


    .pricing_header {
        font-size: 1.5rem;
    }

    .pricing-plan .plan-details ul li,
    .pricing-plan-popular .plan-details ul li {
        font-size: 0.6rem;
    }

    .choose-button,
    .premium-button {
        padding: 2px 10px;
        font-size: 0.6rem;
    }

    .toggle-switch {
        top: -5px;
        right: 5px;
    }


    .navigation {
        font-size: 0.8rem;
        /* Decrease font size */
    }

    .nav-buttons {
        width: 50px;
        font-size: 0.6rem;
    }

    #logo-image {
        height: 40px;
    }

    .download-button-container {
        flex-direction: column;
        padding: 10px;
        margin: 10px;
        gap: 10px;
    }

    .download-button {
        font-size: 0.7rem;
    }

    .download-container {
        font-size: .7rem;
    }

    #life-vault {
        height: 50px;
    }

    #life-vault-image {
        height: 35px;
        /* Adjust height for smaller screens if needed */
        margin-left: 10px;
    }

    .footer-content {
        flex-direction: column;
        /* Stack content vertically on smaller screens */
        align-items: center;
        font-size: .7rem;
    }


    .footer-links {
        margin-left: 10px;
        display: flex;
        font-size: .7rem;

    }

    .copyright {
        font-size: .7rem;
    }

    #life-vault-image {
        height: 45px;
    }

    .grey-button {
        font-size: 0.5rem;
        height: 30px;
        padding: 5px;
        margin: 2px;
    }

    #back_to_top {
        bottom: 10px;
        right: 10px;

    }

    .slideshow-container {
        height: 250px;
    }

    .my-slides {
        padding: 20px;
    }

    .prev,
    .next {
        font-size: 14px;
    }

    a {
        font-size: 0.9rem;
    }

}

/* For screens between 577px and 768px (iPads and larger mobile devices) */
@media (min-width: 480px) and (max-width: 767px) {

    #logo-image {
        height: 70px;
    }

    .header-wrapper {
        flex-direction: column;
        /* Stack header items vertically */
    }

    body {
        padding-top: 160px;
    }

    a {
        font-size: 0.9rem;
    }

    .big-teal_header,
    .big-black-header,
    .big-white-header,
    h1 {
        font-size: 2.3rem;
    }



    .features-container {
        flex-direction: column;
        align-items: center;
        padding-bottom: 2px;
    }

    .feature-item {
        width: 80%;
        margin-bottom: 20px;
    }

    #black-life-vault-image {
        height: 100px;
    }

    .best-features {
        margin-left: 10px;
    }

    .template-clear-container {
        height: auto;
        /* Adjust height for tablets */
    }

    .secure-container {
        flex-direction: column;
        align-items: center;
    }

    .secure-item {
        width: 80%;
        margin-bottom: 20px;
    }

    .template-colour-container {
        height: auto;
    }

    .first-line,
    .second-line {
        font-size: .9rem;
        /* Adjust font size for phones */
        margin-bottom: 8px;
        /* Adjust margin for phones */
    }

    .third-line {
        font-size: 0.9rem;
    }

    .features-container {
        flex-direction: column;
        align-items: center;
        padding-bottom: 2px;
    }

    .feature-item {
        width: 100%;
        margin-bottom: 20px;
    }


    .best-features {
        margin-left: 0;
    }

    .template-text {
        font-size: 1.0rem;
    }

    .template-clear-container {
        height: auto;
        /* Adjust height for small screens */
    }

    .template-colour-container {
        height: auto;
    }

    .secure-container {
        flex-direction: column;
        align-items: center;
    }

    .secure-item {
        width: 100%;
        margin-bottom: 20px;
    }

    .template-colour-container {
        height: auto;
    }


}

/* For screens between 768px and 1023px (laptops/ipads) */
@media (min-width: 768px) and (max-width: 1023px) {


    .header-wrapper {
        flex-direction: column;
        /* Stack header items vertically */
    }

    body {
        padding-top: 140px;
    }

    li {
        list-style-type: none;
        margin-right: 20px;
    }

    a {
        font-size: .9rem;
    }

    .navigation {
        font-size: 0.9rem;
    }

    .nav-buttons {
        width: 100px;
        font-size: 0.8rem;
    }

    #logo-image {
        height: 70px;
    }

    /* Say hello page */
    .first-line,
    .second-line {
        font-size: 1.2rem;
    }

    .third-line {
        font-size: 0.9rem;
    }


    .template-text {
        font-size: 0.8rem;
    }

    /* text container */
    .template-text {
        flex: 0 0 40%;
        margin-right: 5%;
        margin-left: 5%;
        padding-right: 5%;
        position: relative;

    }


    .tick-text img {
        width: 15px;
        height: 15px;
        margin-right: 10px;
    }

    .callout {
        position: relative;
        bottom: 40px;
        right: 0;
        margin: 20px auto;
        /* Center the callout horizontally */
        max-width: 90%;
        /* Adjust the max-width to fit smaller screens */
        padding: 2px;
    }

    .callout-header {
        padding: 10px 15px;
        font-size: 0.7rem;

        color: black;
        border-radius: 50px;
        text-align: center;
    }

    .trial-links {
        font-size: 0.8rem;
    }

    .template-blue-gradient-container {
        max-height: 350px;
    }

    .template-image-container {
        flex: 0 0 45%;
        height: 300px;
    }


    .big-black-header,
    .big-white-header,
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    h3,
    h4,
    p {
        font-size: 0.9rem;
    }

    #black-life-vault-image {
        height: 90px;
    }

    .download-button-container {
        flex-direction: column;
        padding: 10px;
        margin: 10px;
        gap: 10px;
    }

    .download-button {
        font-size: 0.7rem;
    }

    .download-container {
        font-size: .7rem;
    }

    #life-vault {
        height: 50px;
    }

    #life-vault-image {
        height: 40px;
        /* Adjust height for smaller screens if needed */
        margin-left: 10px;
    }

    /* pricing plans */
    .pricing-plan,
    .pricing-plan-popular {
        min-width: 300px;
        max-width: 300px;
        margin: 10px 5%;
    }


    .pricing_header {
        font-size: 2rem;
    }

    .pricing-plan .plan-details ul li,
    .pricing-plan-popular .plan-details ul li {
        font-size: 0.7rem;
    }

    .choose-button,
    .premium-button {
        padding: 2px 20px;
        font-size: 0.7rem;
    }

    .toggle-switch {
        top: -10px;
        right: 10px;
    }


    .slideshow-container {
        height: 300px;
    }

    .my-slides {
        padding: 30px;
    }

    .prev,
    .next {
        font-size: 16px;
    }

    .big-white-header-centred {
        font-size: 2rem;
        padding-top: 10px;
    }


    /* footer  */
    .footer-content {
        flex-direction: row;
        /* Stack content vertically on smaller screens */
        align-items: center;
        font-size: .8rem;
    }

    .footer-links {
        margin-left: 10px;
        display: flex;
        font-size: .8rem;

    }

    .copyright {
        font-size: .8rem;
    }

    #life-vault-image {
        height: 50px;
    }

    .grey-button {
        font-size: 0.6rem;
        height: 30px;
        padding: 5px;
        margin: 2px;

    }

    #back_to_top {
        bottom: 10px;
        right: 10px;

    }

}


/* Media Query desktops */
@media (min-width: 1024px) {


    #logo-image {
        height: 70px;
    }

    .big-black-header,
    .big-white-header,
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    h3,
    h4,
    p {
        font-size: 1rem;
    }

    .first-line,
    .second-line {
        font-size: 1.1rem;
        /* Adjust font size for tablets */
    }

    .third-line {
        font-size: 0.9rem;
    }

    .pricing-plan,
    .pricing-plan-popular {
        min-width: 300px;
        max-width: 300px;
        margin: 10px 2%;
    }

    .pricing-plan .plan-details ul li,
    .pricing-plan-popular .plan-details ul li {
        font-size: 0.8rem;
    }

    .choose-button,
    .premium-button {
        padding: 2px 30px;
        font-size: 0.8rem;
    }

    #black-life-vault-image {
        height: 90px;
    }


    .features-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .feature-item {
        width: 45%;
    }

    .big-black-header {
        font-size: 3rem;
        /* Adjusted for larger laptops */
    }

    .best-features {
        margin-left: 25px;
    }

    .template-clear-container {
        height: auto;
        /* Adjust height for larger laptops */
    }

    .secure-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .secure-item {
        width: 45%;
        margin-bottom: 20px;
    }

    .template-colour-container {
        height: auto;
    }

    .features-container {
        flex-direction: row;
        justify-content: space-between;
    }

    .feature-item {
        width: 33.33%;
    }

    .big-black-header {
        font-size: 3.2rem;
        /* Original size for desktop screens */
    }

    .best-features {
        margin-left: 30px;
    }


    .secure-container {
        flex-direction: row;
        justify-content: space-between;
    }

    .secure-item {
        width: 33.33%;
    }

    .big-teal_header {
        font-size: 3.5rem;
        /* Original size for desktop screens */
    }

    .slideshow-container {
        height: 450px;
    }

    .my-slides {
        padding: 60px;
    }

    .prev,
    .next {
        font-size: 18px;
    }

    .big-white-header-centred {
        font-size: 3rem;
        padding-top: 15px;
    }
}