@font-face {
  font-family: 'PWSimpleHandwriting'; /* Replace with your desired font name */
  src: url('/static/fonts/PWSimpleHandwriting.ttf') format('truetype'); /* Replace with the correct path to your TTF file */
}

@font-face {
  font-family: 'Rubik'; /* Replace with your desired font name */
  src: url('/static/fonts/Rubik-VariableFont_wght.ttf') format('truetype'); /* Replace with the correct path to your TTF file */
}

/* General styles */
body {
    font-family: 'Rubik', sans-serif;
    background-color: #eaf0ea;
    position: relative;
}


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

/* Navigation bar styles */
#mynavbar {
    width: 100%;
    background-color: white;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 1000;
    margin-bottom: 0px;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.navbar-logo img {
    height: 50px;
    cursor: pointer;
}

.navbar-button {
    text-decoration: none;
}

.nav-btn {
    background-color: white;
    color: #473005;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid #473005;
    text-align: center;
    margin-right: 20px;
}

.nav-btn:hover {
    background-color: #473005;
    color: white;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 100px;
  margin-left: 20px;
}

.logo-container img {
  max-height: 100%; /* Adjust as needed */
  width: auto;
}

.logo-container #logo {
  /* Specific styles for the first image, if needed */
  height: 60%;
}

.logo-container #favicon {
  /* Specific styles for the second image, if needed */
  height: 70%;
}

.signup-container {
    display: flex;
    justify-content: center;
    gap: 1px;
    align-items: flex-start;
    padding: 5px;
    flex-wrap: wrap;
    background-color: transparent;
    padding-top: 100px;
}


.left-column,
.right-column {
  padding: 20px;
  padding-top: 60px;
}

.left-column {
  width: 62%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-size: 28px;
  padding-left: 100px;
  padding-top: 40px;
}

#tagline1 {
  font-size: 4.5rem; /* Default size for first line */
  margin-bottom: 2px;
  margin-top: 35px;
  padding-left: 60px;
  color: #473005;
}

#pc-only {
  font-size: 2.1rem;
  text-align: right;
  margin-top: 3px;
  color: #473005;
  font-style: italic;
}

#tagline2 {
  font-size: 4.3rem; /* Default size for second line */
  padding-left : 130px;
  margin-top: 10px;
}

.checklists-container {
  display: flex; /* Use flexbox for side-by-side layout */
  gap: 50px; /* Space between the two columns */
  margin-top: 40px; /* Add spacing above the checklists */
  padding-left: 49px; /* Move all checklist elements to the right */
}

/* Style the checklist */
.checklist {
  list-style: none; /* Remove default bullet points */
  padding: 0; /* Remove padding */
}

.checklist li {
  font-size: 2.9rem; /* Adjust font size for list items */
  margin-bottom: 20px; /* Add spacing between items */
  display: flex;
  align-items: center;
}

.checklist li::before {
  content: "✔"; /* Add green checkmark */
  color: green;
  font-size: 2.5rem; /* Adjust size of the checkmark */
  margin-right: 10px; /* Space between checkmark and text */
}


.right-column {
  text-align: center;
  width: 34%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 70px;
}

#signup-form {
  width: 83%;
  text-align: left; /* Align text within the form to the left */
  border: 1px solid grey;
  padding: 22px 33px 22px 33px;
  border-radius: 9px;
  background-color: rgb(255, 255, 255, 0.75);
  margin-top: -20px;
}


/* Make reCAPTCHA responsive */
#captcha iframe {
    width: 100% !important;
    max-width: 100% !important;
}

#signup-form label {
  display: block; /* Make labels take up the full width */
  text-align: left; /* Align the text to the left */
  margin-bottom: 5px; /* Add some spacing between label and input */
}

#signup-form .form-control {
  text-align: left; /* Align input text to the left */
}

#signup-form * {
    font-size: 16px;
}

.signup-form input,
.signup-form button {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
}

#login-btn {
  background-color: white;
  color: #473005;
  border: 1px solid #473005;
  padding: 7px;
  border-radius: 5px;
  text-decoration: none;
}

#login-btn:hover {
  color: #473005;
}


#video-container {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: transparent;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 123px;
}

.video {
    position: relative;
    width: 66%; /* 80% of the left-column width */
    padding-top: 37.125%; /* 16:9 Aspect Ratio (Height / Width = 9 / 16 = 0.5625) */
    margin: 0 auto; /* Center the video */
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Fill the container */
  height: 100%; /* Maintain aspect ratio */
  border-radius: 7px; /* Optional: keep rounded corners */
}

.explore-btn {
  width: auto;
  background-color: black;
  color: white;
  border-radius : 7px;
  cursor: pointer;
  font-size: 20px;
  margin-top: 10px;
  text-decoration: none;
  background-color: #140f07;
  padding: 17px 21px 17px 21px;
}

#explore-link {
    margin-top: 30px;
    font-size: 24px;
    font-weight: 700;
}

/*rgb(115, 75, 2, 0.3)*/


.sign-up-btn {
    color: white;
    border: 1px solid #473005;
    padding: 7px 11px 7px 11px;
    border-radius: 5px;
    text-decoration: none;
    background-color: #3d2e14;
    width: 100%;
}

.sign-up-btn:hover {
    color: white;
}



a#login-link,
a#explore-link {
    text-decoration: none; /* Prevent underline on this specific link */
}

a#login-link:hover,
a#explore-link:hover {
    text-decoration: none; /* Prevent underline on hover */
}

.tagline-slideshow {
    position: relative;
    height: 100px;
    overflow: hidden;
    margin-top: 20px;
    width: 115%;  /* Match left-column width */
    margin-left: 0;  /* Reset margin */
}

.tagline-slide {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 25px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1.2s ease-in-out;
    font-size: 1.3em;
    padding-left: 60px;
}

.tagline-icon {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

/* Animation */
@keyframes slideshow {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    5%, 17% {
        opacity: 1;
        transform: translateY(0);
    }
    20%, 25% {
        opacity: 0;
        transform: translateY(-20px);
    }
    26% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Same total duration but with slower transitions */
.tagline-slide:nth-child(1) { animation: slideshow 16s infinite; }
.tagline-slide:nth-child(2) { animation: slideshow 16s infinite 4s; }
.tagline-slide:nth-child(3) { animation: slideshow 16s infinite 8s; }
.tagline-slide:nth-child(4) { animation: slideshow 16s infinite 12s; }

/* Mobile responsiveness */
@media (max-width: 768px) {
    .tagline-slideshow {
        height: 105px;
        margin-top: 10px;
        width: 100%;
    }

    .tagline-slide {
        padding-left: 0;
        font-size: 0.8em;  /* Reduced from 1.3em */
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        gap: 8px;
    }

    .tagline-icon {
        width: 50px;
        height: 50px;
    }

    #tagline1 {
        font-size: 3.3rem;
        text-align: center;
        padding-left: 0;  /* Remove left padding on mobile */
        color: #473005;
    }

    #pc-only {
        font-size: 1.5rem;  /* Increased from 1.2rem */
        text-align: center;
        margin-top: 5px;
        margin-bottom: 45px;
    }

    .navbar-logo img {
        margin-bottom: 10px;
    }

    .logo-container {
        height: 80px;
        margin-bottom: 2px;
        margin-top: 10px;
    }

    #tagline2 {
        font-size: 3.1rem;
        padding-left: 2px;
    }

    #signup-form {
        margin-top: 16px;
        width: 93%;
        padding: 13px 13px 13px 13px;
    }

    .right-column {
        order: 2; /* Show second */
        text-align: center;
        padding: 10px;
        width: 100%;
    }

    .left-column {
        order: 1; /* Show first */
        text-align: center;
        padding: 10px;
        width: 100%;
    }

    .text p:nth-child(1) {
        font-size: 4rem; /* Default size for first line */
        margin-bottom: 7px;
        margin-top: 21px;
    }

    .text p:nth-child(2) {
        font-size: 3rem; /* Default size for second line */
    }

    .checklists-container {
        padding-left: 20px; /* Move all checklist elements to the right */
        margin-top: 18px;
        padding-left: 1px;
        text-align: left; /* Ensure checklist container is left-aligned */
        display: flex;
        justify-content: flex-start; /* Align checklist container to the left */
    }

    .checklist li {
        font-size: 1.7rem; /* Adjust font size for list items */
        margin-bottom: 10px; /* Add spacing between items */
        display: flex;
        align-items: flex-start;
        justify-content: flex-start; /* Align checklist items to the left */
        text-align: left; /* Ensure text is left-aligned */
    }

    .checklist li::before {
        color: green !important; /* Keep original green color in responsive mode */
    }
    
    /* Additional specificity for Safari on iOS */
    @media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
        .checklist li::before {
            color: green !important;
        }
    }

    #video-container {
        padding-bottom: 43px;
    }

    .video {
        position: relative;
        width: 80%; /* 80% of the left-column width */
        padding-top: 46%; /* 16:9 Aspect Ratio (Height / Width = 9 / 16 = 0.5625) */
        margin: 0 auto; /* Center the video */
    }

    .video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; /* Fill the container */
        height: 100%; /* Maintain aspect ratio */
        border-radius: 7px; /* Optional: keep rounded corners */
    }

    /* Adjust general text font size */
    .text p {
        font-size: 1.2rem; /* Reduce size for better fit */
        text-align: center;
        margin-bottom: 20px;
    }

    /* Adjust form input and button sizes */
    .signup-form input,
    .signup-form button {
        width: 90%; /* Slightly smaller width */
        padding: 10px; /* Adjust padding for smaller screens */
    }
}

/* Creative organization text styles */
.creative-organization-text {
    text-align: center;
    margin: 5px 0 0 0;
    padding: 0 20px;
}

.creative-line,
.organized-line {
    font-size: 2.9rem;
    margin: 0;
    line-height: 1.3;
    color: #473005;
    font-weight: 500;
}

.creative-line {
    margin-bottom: 15px;
}

.organized-line {
    margin-bottom: 100px;
}

/* Mobile responsive styles for creative organization text */
@media (max-width: 768px) {
    .creative-line,
    .organized-line {
        font-size: 1.7rem;
    }
    
    .creative-organization-text {
        margin: 3px 0 0 0;
        padding: 0 15px;
    }
    
    .organized-line {
        margin-bottom: 70px;
    }
}

/* Social media section styles */
.social-media-section {
    text-align: center;
    margin: 30px 0 40px 0;
    padding: 0 20px;
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
}

.social-link {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-link:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.social-link i {
    font-size: 28px;
    color: #000000;
}

.x-icon {
    width: 28px;
    height: 28px;
    position: relative;
    top: -1px;
}

/* Mobile responsive styles for social media */
@media (max-width: 768px) {
    .social-media-section {
        margin: 20px 0 30px 0;
        padding: 0 15px;
    }
    
    .social-icons {
        gap: 24px;
    }
    
    .social-link i {
        font-size: 24px;
    }
    
    .x-icon {
        width: 24px;
        height: 24px;
    }
}