/* html {
  background: linear-gradient(to bottom, #dddddd, #a9e1fb);
} */

body {
  font-family: var(--sans-serif);
  margin: 0;
  padding: 0;
  line-height: 1.5;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* min-height: 100%; */
  /* background: linear-gradient(to bottom, #dddddd, #a0a0a0); */
  /* background: linear-gradient(to bottom, #ffffff, #616161); */
}

body, html {
  height: 100%;
  margin: 0;
}


/* Reset and box-sizing to ensure a consistent layout */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


main {
  padding-top: 4vw; /* Adjust this value based on the gap you desire */
  text-align: center;
}

/* .start-doodling-main {
  padding-top: 10vw;
} */

header {
  /* background-color: #ffffff; */
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 1000;
  font-size: 0vw;
  text-align: center;
  padding-left: 1vw;
  padding-right: 1vw;
}

/* Base styling for nav element */
#nav-bar {
  text-decoration: none;
  color: #000000;
  display: flex;
  flex-direction: column; /* Change to column layout */
  align-items: center; /* Center align the nav-logo and nav-link-group */
  /* padding: 1vw; */
}

#nav-logo {
  text-align: left;
  display: flex;
  align-items: center;
  margin-right: auto;
  width: auto;
}

#nav-logo a {
  text-decoration: none; /* Removes underline from links */
  color: inherit; /* Inherits the color from parent elements */
  display: inline-block; /* Allows size adjustments */
}

.nav-logo-h1 {
  font-family: sans-serif; /* Specifies the font */
  color: #000000; /* Sets a dark color for better visibility */
  font-size: 2.75vw; /* Sets a large font size for visibility */
  font-weight: 500; /* Medium font weight */
}

.font-display {
  font-family: sans-serif; /* Specifies the font */
  color: #000000; /* Sets a dark color for better visibility */
  font-size: 2rem; /* Sets a large font size for visibility */
  font-weight: 500; /* Medium font weight */
}

#nav-link-group {
  display: flex;
  justify-content: center; /* Center align the nav links */
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-top: -1vw;
}

.nav-ul-li {
  display: inline-block;
  font-size: 1.25vw;
  margin-right: 1.5vw;
  text-align: center;
}

.nav-ul-li:last-child {
  margin-right: 0;
}

/* Hover effect */
.nav-ul-li:hover {
  transform: scale(1.1);
}

#nav-icon {
  position: absolute; /* Add absolute positioning */
  top: 1vw; /* Adjust the top position */
  right: 1vw; /* Adjust the right position */
  transition: box-shadow 0.3s ease;
}

#nav-icon:active {
  box-shadow: 0 0 3px rgba(73, 73, 73, 0.5);
}

.title-container, .start-doodling-title-container, .content-container, .contact-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
}

.start-doodling-title-container {
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 100%; /* Take full height of the parent if not already set */
}

.start-doodling-text-box {
  text-align: center; /* Ensure text is centered */
  width: 100%; /* Optional: Adjust according to your design needs */
}

.start-doodling-title-container, .content-container, .contact-container {
  margin: 0vw 0;  /* Reduced top and bottom margin from 1vw to 0.5vw */
}

.title-container {
  margin-top: 10vw;
}

.content-container {
  max-width: 80vw; /* Adjust the maximum width as needed */
  margin: 0 auto;
  text-align: left;
  padding: 0vw;
  /* background-color: #ffffff; Set background color */
  /* border: 1px solid #ccc; Add a border */
  border-radius: 1vw; /* Add rounded corners */
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); Add a subtle shadow */
  font-size: 2vw; /* Set font size */
  line-height: 1.5; /* Set line height */
}

.content-text-box h1 {
  font-size: 5.5vw;
  text-align: left;
  line-height: 1;
  /* margin: 0vw 4vw 1vw; Top margin: 2vw, Right margin: 4vw, Bottom margin: 1vw */
  /* padding-left: 6vw; */
  justify-content: center;
  align-items: center;
}

.content-text-box-p {
  margin-top: 0.5vw;
  font-size: 2vw;
  text-align: left;
  color: #4B5563;
}


.start-doodling-title-container h1:hover {
  color: #5f5d5d;
}

.explore-divider, .divider, .faq-divider, .contact-divider {
  max-width: 80vw;
  background: #757575;
  border: 0; 
  height: 0.25vw;
  margin: 2vw auto;
  /* margin-top: 1rem;     Reduce the margin-top */
  /* margin-bottom: 1rem;  Reduce the margin-bottom */
}

.faq-grid-container, .grid-container, .text-container {
  display: grid;
  gap: 1.5vw;
  /* margin-top: 60px; */
  width: 80%;  /* Set the grid container to 85% of the width of its parent */
  margin-left: auto;  /* Centers the grid container horizontally */
  margin-right: auto;
  grid-template-columns: repeat(3, 1fr);  /* Divides the grid into three equal-width columns */
  /* box-sizing: border-box; */
}

.grid-item, .faq-grid-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Remove the set width and height to make the grid items adapt to the container's column size while maintaining square aspect ratio */
  aspect-ratio: 1 / 1; /* Square aspect ratio */
}

.grid-item img {
  width: 95%; /* Makes the image take up the full width of its container */
  height: 95%; /* Makes the image take up the full height of its container */
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
  /* border: 2px solid #000; */
  border-radius: 8px;
  /* transition: transform 0.5s ease;  Add transition for border color */
}

.grid-item:hover img {
  transform: scale(1.1);
  filter: opacity(20%);
}

.caption {
  position: absolute;
  color: #000000;
  width: 100%;
  text-align: center;
  padding: 10px;
  display: none;
  font-size: 2vw;
}

/* .grid-item:hover .caption {
  display: block;
} */

.alt-text {
  position: absolute;
  color: #000000;
  width: 100%;
  text-align: center;
  padding: 10px;
  display: none;
  font-size: 2vw;
}

.grid-item:hover .alt-text {
  display: block;
}

.grid-item:hover .caption {
  display: none;
}

.faq-section {
  width: 75vw;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.faq-heading {
  display: block;
  margin-bottom: 1vw;
  font-size: 2.5vw;
}

.faq-dropdown {
  width: 100%;
  text-align: left;
  background-color: #f9f9f9;
  border: none;
  padding: 10px 15px;
  font-size: 1.5vw; /* Updated from 16px to 20px */
  cursor: pointer;
  transition: background-color 0.3s;
}

.faq-dropdown:hover {
  background-color: #f1f1f1;
}

.faq-content {
  display: none;
  text-align: left;
  padding: 1vw;
  border-top: 1px solid #ccc;
  background-color: #ffffff;
  font-size: 1.25vw; /* approx. 18px when viewport width is 1920px */
}

.faq-arrow {
  float: right;
  transition: transform 0.3s;
}

/* Rotate arrow when dropdown is active */
.faq-content[style*="block"] + .faq-dropdown .faq-arrow {
  transform: rotateX(180deg);
}

.grid-text-box h2 {
  font-size: 4.5vw;
  text-align: left;
  line-height: 1;
}

.grid-text-box p {
  /* margin-top: -0.5vw; */
  font-size: 2vw;
  text-align: left;
  /* margin: 4vw */
}

/* .text-box h1 {
  font-size: 5vw;
  text-align: left;
  line-height: 1;
  margin: 4vw;
  padding-left: 6vw;
}

.text-box h2 {
  font-size: 2vw;
  text-align: left;
  line-height: 1;
  margin-left: 4vw;
  padding-left: 6vw;
} */

.home-container {
  /* min-height: calc(100vh - 160px); Adjust the value based on your header height */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1vw;
  margin-bottom: 4vw;
  padding-top: 40px; /* Add padding to push the content below the header */
}

.home-text-box {
  text-align: left;
  width: 80%;
  /* color:white; */

  /* font-size: 5.5vw; */
}

.home-text-box h1 {
  font-size: 5.5vw;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.subtitle {
  font-size: 2.5vw;
  color: #4B5563;
  /* margin-bottom: 1rem; */
}

.subtitle-top {
  margin-top: 1.5vw;
  font-size: 2.5vw;
  /* margin-bottom: 1rem; */
  color: #4B5563;
}


.text-box h1 {
  font-size: 6.5vw;
  text-align: left;
  line-height: 1;
  /* margin: 0vw 4vw 1vw; Top margin: 2vw, Right margin: 4vw, Bottom margin: 1vw */
  /* padding-left: 6vw; */
  justify-content: center;
  align-items: center;
}

.text-box h2 {
  position: relative;
  font-size: 2vw;
  text-align: left;
  line-height: 1;
  margin: 4vw 4vw 0; /* Top margin: 1vw, Right margin: 4vw, Bottom margin: 0 */
  padding-left: 6vw;
}

.text-box p {
  margin-top: 0.5vw;
  font-size: 2vw;
  text-align: left;
  margin: 4vw;
  padding-left: 6vw;
}

.contact-container {
  max-width: 80vw; /* Adjust the maximum width as needed */
  margin: 0 auto;
  text-align: left;
  padding: 0vw;
  /* background-color: #ffffff; Set background color */
  /* border: 1px solid #ccc; Add a border */
  border-radius: 1vw; /* Add rounded corners */
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); Add a subtle shadow */
  /* font-size: 2vw; Set font size */
  line-height: 1.5; /* Set line height */
}

.contact-text-box h1 {
  font-size: 5.5vw;
  text-align: left;
  line-height: 1;
  /* margin: 0vw 4vw 1vw; Top margin: 2vw, Right margin: 4vw, Bottom margin: 1vw */
  /* padding-left: 6vw; */
  justify-content: center;
  align-items: center;
}

.contact-text-box-p {
  margin-top: 0.5vw;
  font-size: 2vw;
  text-align: left;
  color: #4B5563;
}

.about-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  min-width: 90%; /* Adjust the maximum width as needed */
  margin: 0 auto;
  text-align: left;
  padding: 2vw;
  border-radius: 1vw; /* Add rounded corners */
  line-height: 1.5; /* Set line height */
  margin-top: 2vw;  /* Reduced top and bottom margin from 1vw to 0.5vw */
  /* width: 100%; */
}

.about-text-box h1 {
  font-size: 3.5vw;
  text-align: left;
  line-height: 1;
  /* margin: 0vw 4vw 1vw; Top margin: 2vw, Right margin: 4vw, Bottom margin: 1vw */
  /* padding-left: 6vw; */
  justify-content: center;
  align-items: center;
}

.about-text-box-p {
  margin-top: 0.5vw;
  font-size: 1.75vw;
  text-align: left;
  color: #4B5563;
}

.start-doodling-text-box h1 {
  font-size: 6.5vw;
  text-align: left;
  line-height: 1;
  margin: 0vw 4vw 1vw; /* Top margin: 2vw, Right margin: 4vw, Bottom margin: 1vw */
  padding-left: 6vw;
}

.terms-text-box h1 {
  font-size: 5.5vw;
  text-align: left;
  line-height: 1;
  margin-top: 10vw;
  /* padding-left: 6vw; */
  justify-content: center;
  align-items: center;
}

.terms-text-box h2 {
  font-size: 3.5vw;
  text-align: left;
  line-height: 1;
  /* padding-left: 6vw; */
  justify-content: center;
  align-items: center;
}

.about-title-container {
  max-width: 100%; /* Adjust the maximum width as needed */
  margin: 0 auto;
  padding: 0vw;
  border-radius: 1vw; /* Add rounded corners */
  line-height: 1.5; /* Set line height */
}

.about-title-text-box h1 {
  font-size: 18vw;
  /* text-align: left; */
  line-height: 1;
  margin-top: 17.5vw;
  margin-bottom: 15vw;
  justify-content: center;
  align-items: center;
  position: relative;
  display: inline-block;
  /* color: #4B5563; */
  color: #ffffff;
  min-width: 100%;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5vw;
  text-align: center;
  line-height: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: #000000;
}

/* .start-doodling-text-box h2 {
  position: relative;
  font-size: 2vw;
  text-align: left;
  line-height: 1;
  margin: 4vw 4vw 0;
  padding-left: 6vw;
}

.start-doodling-text-box p {
  margin-top: 1.5vw;
  font-size: 2vw;
  text-align: left;
  margin: 4vw;
  padding-left: 6vw;
} */

/* Reset and box-sizing to ensure a consistent layout */
/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} */

.scale-on-hover {
  display: inline-block; /* Ensures the element can scale properly */
  transition: transform 0.3s ease; /* Adjust the transition duration and timing function as desired */
}

.scale-on-hover:hover {
  transform: scale(1.05); /* Adjust the scale factor as desired */
}

.oval-btn {
  display: inline-flex;
  align-items: center;
  background-color: #000000;
  color: #ffffff;
  text-decoration: none;
  padding: 1rem 3rem;
  border-color: #000000;
  border-style: solid; /* This makes the border visible */
  border-width: 0.25vw; /* This defines the thickness of the border */
  border-radius: 10px;
  transition: background-color 0.3s ease, color 0.3s ease;
  position: relative;
  justify-content: center; /* Ensures contents are centered horizontally */
  align-items: center; /* Ensures contents are centered vertically */
}

.oval-btn:hover {
  background-color: #ffffff; /* White background on hover */
  color: #000000; /* Black text color on hover */
  border-color: #000000; /* Specifies the border color */
  border-style: solid; /* This makes the border visible */
  border-width: 0.25vw; /* This defines the thickness of the border */
  transform: scale(1.05); /* Adjust the scale factor as desired */
  transition: transform 0.3s ease; /* Adjust the transition duration and timing function as desired */
}

.explore-btn {
  background-color: #ffffff;
  color: #000000;
  border-color: #000000;
  /* padding: 2rem 4rem; Match the padding of the "Start Doodling" button */
}

.explore-btn:hover {
  background-color: #000000;
  color: #ffffff;
  border-color: #000000;
}

.button-container {
  display: flex;
  flex-direction: row-reverse;
  gap: 1rem;
  align-items: flex-start;
  /* max-width: 100%; */
}

.btn-text {
  margin-right: 0.5rem;
  font-size: 2vw; /* Adjust this value to make the text smaller or larger */
}

.btn-arrow {
  font-size: 3vw;
  transition: transform 0.3s ease; /* Added for arrow position transition */
}

.oval-btn:hover .btn-arrow {
  transform: translateX(1rem); /* Moves the arrow 5px to the right on hover */
}

/* ------------------------------------------------------------------------------------------ */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.modal.show {
  opacity: 1;
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 30px;
  border: 1px solid #888;
  width: 70%;
  max-width: 1400px;
  display: flex;
  align-items: center;
  transform: scale(0.8);
  transition: transform 0.3s ease-in-out;
  border-radius: 10px;
  position: relative; /* Add relative positioning to the modal content */
}

.modal.show .modal-content {
  transform: scale(1);
}

.modal-image-container {
  flex: 1;
  padding-right: 20px;
}

.modal-image-container img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  aspect-ratio: 1/1;
}

.modal-text-container {
  flex: 1;
  padding: 1vw; /* Padding around text for better readability */
}

.modal-text-container h3 {
  font-size: 2vw; /* Responsive font size for the modal title */
  text-align: center; /* Centering the title text */
  margin-bottom: 2vw; /* Space below the title */
}

.modal-text-container p {
  font-size: 1.75vw; /* Responsive font size for the modal description */
  text-align: justify; /* Justified text for better alignment and readability */
  margin-bottom: 1vw; /* Space below the description */
}

.close {
  color: #aaa;
  position: absolute; /* Position the close button absolutely */
  top: 10px; /* Adjust the top position */
  right: 10px; /* Adjust the right position */
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


/* ---------------------------------------------------------------------------------------- */

.title-container {
  padding: 0 10vw;
}

.content-section {
  display: flex;
  align-items: center;
  /* margin-bottom: 4vw; */
  /* margin: 50px; */
  padding-left: 5.21vw;
  padding-right: 5.21vw;
  /* padding-top: 7vw; */
  padding-bottom: 7vw;
  /* background-color: lightgreen; */
  opacity: 1;
}

.section-image {
  width: 40%;
  border-radius: 10px;
}

.section-image.left {
  margin-right: 5vw;
}

.section-image.right {
  margin-left: 5vw;
  order: 1;
}

.section-text {
  flex: 1;
  font-size: 2vw;
  text-align: left;
  line-height: 1.6;
}

header, main, footer {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

footer {
  background-color: #ffffff;
  padding-top: 1vw;
  padding-bottom: 2vw;
  color: #0c182e;
  display: flex;
  flex-direction: column;  /* changed from row to column */
  align-items: stretch;    /* makes sure child elements stretch to full width */
  margin-top: 3vw; 
}

.footer-links {
  display: flex;
  gap: 2.5vw;
  /* justify-content: space-between; */
  font-size: 1.25vw;
  justify-content: center;
  text-align: center;
  /* align-items: center; for vertical alignment */
}


.social-media {
  display: flex;
  gap: 5vw;
  margin-top: 2vw; 
  justify-content: center;
}

.social-media img {
  width: 2.5vw;
  height: 2.5vw;
}

.footer-links a:last-child, .social-media a:last-child {
  margin-right: 0;
}


/* -- Home page carousel */


.carousel-container {
  overflow: hidden;
  width: 100%;
  height: 25vw;
  /* margin-top: 1vw; */
  margin-bottom: 1vw;
  position: relative;
}

.carousel-content {
  display: flex;
  position: absolute;
  animation: slide 40s linear infinite;
  gap: 1vw;
}

.carousel-item {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25%;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  border-radius: 8px;
}

.carousel-item img {
  width: 95%;
  height: 95%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
  border-radius: 8px;
}

.carousel-item:hover img {
  transform: scale(1.1);
  filter: opacity(20%);
}

.carousel-content::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 100%;
  background: inherit;
}

.caption, .alt-text {
  position: absolute;
  color: #000000;
  width: 100%;
  text-align: center;
  padding: 10px;
  font-size: 2vw;
  display: none;
}

.carousel-item:hover .alt-text {
  display: block;
}

.carousel-item:hover .caption {
  display: none;
}


@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-50%); /* Adjust this based on your actual number of items */
  }
  100% {
    transform: translateX(-0%);
  }
}

@keyframes reverse-slide {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-50%); /* Adjust this based on your actual number of items */
  }
  100% {
    transform: translateX(0%);
  }
}

.reverse-carousel-container .carousel-content {
  animation: reverse-slide 40s linear infinite;
}

/* @media screen and (max-width: 768px) {
  .carousel-item {
    width: 33.33%;
  }
}

@media screen and (max-width: 480px) {
  .carousel-item {
    width: 50%;
  }
} */



@media only screen and (min-width: 1151px) and (max-width: 1250px) {

  .nav-logo-h1 {
    font-size: 3.125vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -1.125vw;
  }
  
  .nav-ul-li {
    font-size: 1.375vw;
  }

  .faq-heading {
    font-size: 2.75vw;
  }
  
  .faq-dropdown {
    font-size: 1.75vw;
  }
  
  .faq-content {
    font-size: 1.5vw;
  }

  .section-image {
    width: 42%;
  }

  .about-text-box h1 {
    font-size: 3.75vw;
  }
  
  .about-text-box-p {
    font-size: 1.75vw;
  }

  .footer-links {
    font-size: 1.5vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw; 
  }
  
  .social-media img {
    width: 3.75vw;
    height: 3.75vw;
  }

}

@media only screen and (min-width: 1051px) and (max-width: 1150px) {

  .nav-logo-h1 {
    font-size: 3.25vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -1.25vw;
  }

  .nav-ul-li {
    font-size: 1.5vw;
  }

  .start-doodling-text-box p {
    font-size: 4vw;
  }

  header, main, footer {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .contact-text-box h1 {
    font-size: 6vw;
  }
  
  .contact-text-box-p {
    font-size: 2vw;
  }

  .terms-text-box h1 {
    font-size: 6vw;
  }

  .faq-heading {
    font-size: 3vw;
  }
  
  .faq-dropdown {
    font-size: 2vw;
  }
  
  .faq-content {
    font-size: 1.75vw;
  }
  
  .section-image {
    width: 44%;
  }

  .about-text-box h1 {
    font-size: 4vw;
  }
  
  .about-text-box-p {
    font-size: 2vw;
  }

  .footer-links {
    font-size: 1.5vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw; 
  }
  
  .social-media img {
    width: 3.75vw;
    height: 3.75vw;
  }

}

@media only screen and (min-width: 901px) and (max-width: 1050px) {

  .nav-logo-h1 {
    font-size: 3.375vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -1.375vw;
  }

  .nav-ul-li {
    font-size: 1.625vw;
  }

  main {
    padding-top: 7.5vw; /* Adjust this value based on the gap you desire */
  }

  .home-text-box {
    width: 80%;
    font-size: 7.25vw;
  }

  .start-doodling-text-box p {
    font-size: 3.5vw;
  }

  header, main, footer {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .contact-text-box h1 {
    font-size: 6.5vw;
  }
  
  .contact-text-box-p {
    font-size: 2.5vw;
  }

  .terms-text-box h1 {
    font-size: 6.5vw;
  }

  .faq-heading {
    font-size: 3vw;
  }
  
  .faq-dropdown {
    font-size: 2vw;
  }
  
  .faq-content {
    font-size: 1.75vw;
  }

  .section-image {
    width: 46%;
  }

  .about-text-box h1 {
    font-size: 4vw;
  }
  
  .about-text-box-p {
    font-size: 2vw;
  }

  .footer-links {
    font-size: 1.5vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw; 
  }
  
  .social-media img {
    width: 3.75vw;
    height: 3.75vw;
  }

}


@media only screen and (min-width: 851px) and (max-width: 900px) {

  .nav-logo-h1 {
    font-size: 3.5vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -1.5vw;
  }

  .nav-ul-li {
    font-size: 1.75vw;
  }

  main {
    padding-top: 7.5vw; /* Adjust this value based on the gap you desire */
  }

  .home-text-box {
    width: 80%;
    font-size: 8vw;
  }

  .start-doodling-text-box p {
    font-size: 3vw;
  }

  header, main, footer {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .contact-text-box h1 {
    font-size: 7vw;
  }
  
  .contact-text-box-p {
    font-size: 3vw;
  }

  .terms-text-box h1 {
    font-size: 7vw;
  }

  .faq-heading {
    font-size: 3vw;
  }
  
  .faq-dropdown {
    font-size: 2vw;
  }
  
  .faq-content {
    font-size: 1.75vw;
  }

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

  /* Adjust the layout of the section images */
  .section-image {
    width: 70%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5vw; /* Adds space between the image and text */
    order: 0; /* Reset the order to stack images above the text */
  }

  .section-image.right, .section-image.left {
    /* Ensure both right and left images follow the same rule */
    order: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .about-container {
    min-width: 80%; /* Adjust the maximum width as needed */
  }

  .about-text-box h1 {
    font-size: 5vw;
  }
  
  .about-text-box-p {
    font-size: 2.5vw;
  }

  .footer-links {
    font-size: 1.625vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw; 
  }
  
  .social-media img {
    width: 4vw;
    height: 4vw;
  }

}

@media only screen and (min-width: 801px) and (max-width: 850px) {

  .nav-logo-h1 {
    font-size: 3.625vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -1.625vw;
  }

  .nav-ul-li {
    font-size: 1.875vw;
  }

  main {
    padding-top: 8vw; /* Adjust this value based on the gap you desire */
  }

  .home-text-box {
    width: 80%;
    font-size: 8vw;
  }

  .start-doodling-text-box p {
    font-size: 2.75vw;
  }

  header, main, footer {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .contact-text-box h1 {
    font-size: 7vw;
  }
  
  .contact-text-box-p {
    font-size: 3vw;
  }

  .terms-text-box h1 {
    font-size: 7vw;
  }

  .faq-heading {
    font-size: 3vw;
  }
  
  .faq-dropdown {
    font-size: 2vw;
  }
  
  .faq-content {
    font-size: 1.75vw;
  }

  .content-section {
    flex-direction: column;
    align-items: center;
  }

  .section-image {
    width: 70%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5vw;
    order: 0;
  }

  .section-image.right, .section-image.left {
    order: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .about-container {
    max-width: 75%; /* Adjust the maximum width as needed */
  }

  .about-text-box h1 {
    font-size: 5vw;
  }
  
  .about-text-box-p {
    font-size: 2.5vw;
  }

  .footer-links {
    font-size: 1.75vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw; 
  }
  
  .social-media img {
    width: 4.125vw;
    height: 4.125vw;
  }

}

@media only screen and (max-width: 800px) {

  .nav-logo-h1 {
    font-size: 3.75vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -1.75vw;
  }

  nav ul li a {
    font-size: 2vw !important; /* Adjust this value as needed */
  }

  main {
    padding-top: 8vw; /* Adjust this value based on the gap you desire */
  }

  .home-text-box {
    width: 80%;
    font-size: 8vw;
  }

  .nav-ul-li {
    font-size: 2.25vw;
  }

  header, main, footer {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .contact-text-box h1 {
    font-size: 7vw;
  }
  
  .contact-text-box-p {
    font-size: 3vw;
  }
  
  .terms-text-box h1 {
    font-size: 7vw;
  }

  .faq-heading {
    font-size: 3.5vw;
  }
  
  .faq-dropdown {
    font-size: 2.5vw;
  }
  
  .faq-content {
    font-size: 2.25vw;
  }

  .content-section {
    flex-direction: column;
    align-items: center;
  }

  .section-image {
    width: 70%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5vw;
    order: 0;
  }

  .section-image.right, .section-image.left {
    order: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .about-container {
    max-width: 90%; /* Adjust the maximum width as needed */
  }

  .about-text-box h1 {
    font-size: 5vw;
  }
  
  .about-text-box-p {
    font-size: 2.5vw;
  }

  .footer-links {
    font-size: 1.875vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw; 
  }
  
  .social-media img {
    width: 4.5vw;
    height: 4.5vw;
  }

}

@media screen and (max-width: 768px) {

  .nav-logo-h1 {
    font-size: 3.875vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -1.875vw;
  }

  .nav-ul-li {
    font-size: 2.125vw;
  }

  .modal-content {
      flex-direction: column;
      align-items: center;
  }

  .modal-image-container {
      padding-right: 0;
      padding-bottom: 20px;
  }

  .modal-text-container h3 {
    font-size: 3.5vw; /* Slightly larger on smaller screens */
  }

  .modal-text-container p {
    font-size: 2.5vw; /* Slightly larger on smaller screens */
  }

  header, main, footer {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  
  .faq-heading {
    font-size: 3.5vw;
  }
  
  .faq-dropdown {
    font-size: 2.5vw;
  }
  
  .faq-content {
    font-size: 2.25vw;
  }

  .content-section {
    flex-direction: column;
    align-items: center;
  }

  .section-image {
    width: 75%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5vw;
    order: 0;
  }

  .section-image.right, .section-image.left {
    order: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .about-container {
    max-width: 90%; /* Adjust the maximum width as needed */
  }

  .about-text-box h1 {
    font-size: 5.25vw;
  }
  
  .about-text-box-p {
    font-size: 2.75vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw; 
  }
  
  .social-media img {
    width: 4.5vw;
    height: 4.5vw;
  }

}


@media only screen and (max-width: 639px) {

  #nav-bar {
    height: 7.5vw;
  }
  
  .nav-logo-h1 {
    font-size: 4vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -2vw;
  }

  header {
    font-size: 3vw;
    padding-left: 2vw;
  }

  #nav-icon {
    display: block;
    width: 8vw;  /* Slightly larger to remain tactile */
  }

  main {
    padding-top: 10vw; /* Adjust this value based on the gap you desire */
  }
  
  .caption {
    font-size: 3vw;
  }

  body.nav-open {
    overflow: hidden;
  }

  .home-container {
    /* height: 100vh; Set the height to 100% of the viewport height */
    position: relative; /* Ensure the container is positioned relatively */
    margin-top: 50vw;
    margin-bottom: 50vw;
  }
  
  .home-text-box {
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
    font-size: 12vw;
    /* padding-bottom: 50vw; */
  }

  .home-text-box h1 {
    font-size: 11vw; /* Adjust the font size for the heading */
    margin-bottom: 2rem;
  }

  .subtitle {
    font-size: 5vw; /* Adjust the font size for the subtitle */
    margin-bottom: 1rem;
  }

  .subtitle-top {
    font-size: 5vw;
}

  .button-container {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
    align-items: flex-end;
    width: 100%;
  }

  .oval-btn {
    padding: 1.2rem 1.5rem; /* Adjust the padding for both buttons on mobile */
    /* border-radius: 5px; */
    width: 250px;
    max-width: 100%;
    white-space: nowrap;
  }

  /* .btn-arrow {
    font-size: 5vw;
  } */
  
  .explore-btn {
    padding: 1.2rem 1.5rem; /* Match the padding of the "Start Doodling" button on mobile */
  }
  
  .explore-btn:hover {
    background-color: #000000;
    color: #ffffff;
    /* border-color: #ffffff; */
  }

  .btn-text {
    margin-right: 0.5rem;
    font-size: 4vw; /* Adjust this value to make the text smaller or larger */
  }
  
  .btn-arrow {
    font-size: 4vw;
    transition: transform 0.3s ease; /* Added for arrow position transition */
  }    

  nav { 
    display: flex;
    flex-direction: column;
    align-items: center;
  } 

  nav ul li { 
    display: block; /* Make list items stack vertically */
  }

  /* Ensure nav-pane itself is visible if it's hidden by default */
  #nav-pane {
      display: block;
  }

  .right-pane {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%; /* Adjust as necessary */
    height: 100%;
    background-color: #fff;
    /* More styles for appearance */
    transform: translateX(100%);
    transition: transform 0.1s ease;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the start (left) of the container */
    overflow-y: auto; /* Add scroll if needed */
    padding: 20px; /* Add padding to separate links from edges */
    border-left: 1px solid #ccc; /* Add border to the left side */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add shadow effect */
  }
  
  /* Adjust spacing between links if necessary */
  .right-pane a {
    display: block; /* Ensure links stack on top of each other */
    width: 70%; /* Make links take full width */
    text-align: left; /* Align links to the left */
    padding: 10px; /* Add padding to links */
    font-size: 3.5vw; /* Larger font size on smaller screens */
  }
    
  .right-pane a:hover {
    color: #ff0000;
  }
  
  /* Show the right pane when not hidden */
  .right-pane:not(.hidden) {
    transform: translateX(0);
  }

  .blurred {
    filter: blur(4px);
    pointer-events: none; /* Disable pointer events on blurred/translucent area */
    transition: transform 1s ease;
    pointer-events: none; /* Disable pointer events on blurred/translucent area */
  }

  .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1; /* Ensure the button appears above the links */
  }

  .close-button:hover {
      color: rgb(0, 0, 0); /* Change color on hover if desired */
  }

  /* Hide navigation text links */
  header nav a {
    display: none;
  }
  
  /* Adjust font size for navigation links */
  nav a, nav ul, nav li {
    font-size: 4vw;
  }

  #logo img, .grid-item, .faq-grid-item {
    width: 40vw;
    height: 40vw;
  }

  .grid-container, .faq-grid-container, .text-container {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 3vw;
    margin-left: auto;
    margin-right: auto;
    width: calc(90% - 2vw); /* Subtract the total horizontal padding from the width */
    gap: 1.5vw;
  }

  .grid-item img {
    transition: none;
  }

  .grid-item:active img {
    transform: scale(1.1);
    filter: opacity(20%);
  }

  .grid-text-box h1 {
    font-size: 8vw;
    text-align: left;
    line-height: 1; /* Adjust this value as per your needs. A value of 1 would mean the line height is the same as the font size, but that might be too tight. */
  }
  
  .grid-text-box h2 {
    font-size: 5vw;
    text-align: left;
    line-height: 1;
  }
    
  .grid-text-box p {
    margin-top: 0.5vw;
    font-size: 4vw;
    text-align: left;
  }
  
  .text-box h1 {
    font-size: 9vw;
    text-align: left;
    line-height: 1; /* Adjust this value as per your needs. A value of 1 would mean the line height is the same as the font size, but that might be too tight. */
    margin: 4vw;
    padding-left: 6vw;
  }

  .text-box h2 {
    font-size: 5vw;
    text-align: left;
    line-height: 1; /* Adjust this value as per your needs. A value of 1 would mean the line height is the same as the font size, but that might be too tight. */
    margin: 0vw 4vw 0; /* Top margin: 1vw, Right margin: 4vw, Bottom margin: 0 */
    padding-left: 6vw;
  }

  .text-box p {
    margin-top: 0.5vw;
    font-size: 4vw;
    text-align: left;
    margin: 4vw;
    padding-left: 60vw;
  }

  .start-doodling-text-box {
    margin-top: 0.5vw;
    font-size: 12vw;
    text-align: left;
    margin: 4vw;
    padding-left: 6vw;

  }

  .explore-divider {
    max-width: 87.5vw;
    background: #757575;
    border: 0; 
    height: 0.35vw;
    margin-bottom: 0vw;
    /* margin: 10vw auto; */
    /* margin-top: 1rem;     Reduce the margin-top */
    margin-bottom: 1rem;
  }

  .divider, .faq-divider {
    max-width: 80vw;
    background: #757575;
    border: 0; 
    height: 0.35vw;
    margin-top: 5vw;
    margin-bottom: 10vw;
    /* margin: 10vw auto; */
    /* margin-top: 1rem;     Reduce the margin-top */
    /* margin-bottom: 1rem;  Reduce the margin-bottom */
  }

  .contact-divider {
    max-width: 80vw;
    background: #757575;
    border: 0; 
    height: 0.35vw;
    /* margin-top: 5vw; */
    /* margin-bottom: 10vw; */
    /* margin: 10vw auto; */
    /* margin-top: 1rem;     Reduce the margin-top */
    /* margin-bottom: 1rem;  Reduce the margin-bottom */
  }

  
  /* .faq-grid-container, .grid-container, .text-container {
    padding: 0 0%;
  } */

  .title-container, .start-doodling-title-container, .content-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    margin-top: 12vw;
    width: 100%;
  }

  .content-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    margin-top: 12vw;
    width: 100%;
  }

  .title-container, .start-doodling-title-container {
    margin-top: 12vw;
  }
       
  .caption, .alt-text {
    font-size: 3vw; /* Increased font size for better readability */
  }

  .contact-text-box h1 {
    font-size: 12vw;
  }
  
  .contact-text-box-p {
    font-size: 3.5vw;
  }

  .terms-text-box h1 {
    font-size: 12vw;
    margin-top: 15vw;
  }

  .faq-heading {
    font-size: 4.5vw;
  }
  
  .faq-dropdown {
    font-size: 3.5vw;
  }
  
  .faq-content {
    font-size: 3.25vw;
  }

  .content-section {
    flex-direction: column;
    align-items: center;
  }

  .section-image {
    width: 90%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5vw;
    order: 0;
  }

  .section-image.right, .section-image.left {
    order: 0;
    margin-left: 0;
    margin-right: 0;
  }

  /* .about-title-container {
    padding: 4vw;
  }
  
  .about-title-text-box h1 {
    font-size: 22vw;
  }
  
  .overlay-text {
    font-size: 6vw;
  } */
  
  .about-container {
    max-width: 90%; /* Adjust the maximum width as needed */
    margin-top: 10vw;
  }

  .about-text-box h1 {
    font-size: 5.5vw;
  }
  
  .about-text-box-p {
    font-size: 3vw;
  }

  .footer {
    /* background-color: #ffffff; */
    padding: 5vw;
    color: #0c182e;
    display: flex;
    flex-direction: column;  /* changed from row to column */
    align-items: stretch;    /* makes sure child elements stretch to full width */
    margin-top: 3.5vw; 
  }

  .footer-links {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    /* justify-content: space-between; */
    font-size: 3vw;
    justify-content: flex-start; /* Change to flex-start */
    text-align: left; /* Change to left */
    align-items: flex-start; /* Change to flex-start */
    margin-bottom: 3vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 5vw;
    justify-content: flex-start; /* Change to flex-start */
  }
  
  .social-media img {
    width: 5vw;
    height: 5vw;
  }

  .carousel-container {
    overflow: hidden;
    width: 100%;
    height: 33vw;
    margin-top: 1vw;
    margin-bottom: 2vw;
    position: relative;
  }

  .carousel-content {
    gap: 2vw;
  }
  
  .carousel-item {
    width: 33%;
  }

}

/* ... Previous CSS code ... */

@media only screen and (max-width: 570px) {

  #nav-bar {
    height: 9vw;
  }

  .nav-logo-h1 {
    font-size: 5vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -2.125vw;
  }

  header {
    min-height: 1vw;
    /* padding: 2vw 0;  Even larger padding for very small devices */
  }

  #nav-icon {
    width: 10vw;
  }

  .oval-btn {
    padding: 1rem 1.1rem; /* Adjust the padding for both buttons on mobile */
    /* border-radius: 1rem; */
    width: 215px; /* Adjust the width for smaller screens */
    max-width: 100%;
  }

  .btn-text {
    font-size: 4vw;
  }

  .explore-btn {
    padding: 1rem 1.1rem; /* Match the padding of the "Start Doodling" button on mobile */
    width: 215px; /* Adjust the width for smaller screens */
  }

  .modal-text-container h3 {
    font-size: 4.5vw; /* Slightly larger on smaller screens */
  }

  .modal-text-container p {
    font-size: 3.5vw; /* Slightly larger on smaller screens */
  }

  .right-pane a {
    display: block;
    width: 80%;
    text-align: left;
    padding: 10px;
    font-size: 4vw;
  }

  .caption, .alt-text {
    font-size: 3vw; /* Further increase for smaller devices */
  }

  .contact-text-box h1 {
    font-size: 12vw;
  }
  
  .contact-text-box-p {
    font-size: 3.5vw;
  }

  .terms-text-box h1 {
    font-size: 12vw;
    margin-top: 16vw;
  }

  .faq-heading {
    font-size: 4.5vw;
  }
  
  .faq-dropdown {
    font-size: 3.5vw;
  }
  
  .faq-content {
    font-size: 3.25vw;
  }

  .content-section {
    flex-direction: column;
    align-items: center;
  }

  .section-image {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5vw;
    order: 0;
  }

  .section-image.right, .section-image.left {
    order: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .about-container {
    max-width: 100%; /* Adjust the maximum width as needed */
  }

  .about-text-box h1 {
    font-size: 6vw;
  }
  
  .about-text-box-p {
    font-size: 3.5vw;
  }

  .footer-links {
    font-size: 2.5vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw; 
  }
  
  .social-media img {
    width: 5.25vw;
    height: 5.25vw;
  }

}


@media only screen and (max-width: 500px) {

  #nav-bar {
    height: 9.5vw;
  }

  .nav-logo-h1 {
    font-size: 5.5vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -2.25vw;
  }

  header {
    min-height: 10vw;
    /* padding: 2vw 0;  Even larger padding for very small devices */
  }

  #nav-icon {
    width: 11vw;
  }

  .grid-container {
    grid-template-columns: 1fr;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .grid-item {
    width: 90%;
    height: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1vw;
    /* border: solid;
    border-color: #000000; 
    border-radius: 4px; */
  }

  .grid-item img {
    width: 100%; /* Makes the image take up the full width of its container */
    height: 100%; /* Makes the image take up the full height of its container */
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;
    border-radius: 10px;
  }

  .grid-text-box {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .grid-text-box h1,
  .grid-text-box h2,
  .grid-text-box p {
    text-align: center;
  }

  .oval-btn {
    padding: 1rem 1rem; /* Adjust the padding for both buttons on mobile */
    border-radius: 5px;
    width: 190px; /* Adjust the width for smaller screens */
    max-width: 100%;
  }

  .btn-text {
    /* margin-right: 0.5rem; */
    font-size: 4vw; /* Adjust this value to make the text smaller or larger */
  }
  
  .btn-arrow {
    font-size: 4vw;
    transition: transform 0.3s ease; /* Added for arrow position transition */
  }
  
  .explore-btn {
    padding: 1rem 1rem; /* Match the padding of the "Start Doodling" button on mobile */
    width: 190px; /* Adjust the width for smaller screens */
  }
  
  .caption, .alt-text {
    font-size: 6.5vw; /* Further increase for smaller devices */
  }

  .faq-heading {
    font-size: 4.5vw;
  }
  
  .faq-dropdown {
    font-size: 3.5vw;
  }
  
  .faq-content {
    font-size: 3.25vw;
  }

  .content-section {
    flex-direction: column;
    align-items: center;
  }

  .section-image {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5vw;
    order: 0;
  }

  .section-image.right, .section-image.left {
    order: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .about-container {
    max-width: 100%; /* Adjust the maximum width as needed */
  }

  .about-text-box h1 {
    font-size: 6.25vw;
  }
  
  .about-text-box-p {
    font-size: 3.25vw;
  }

  .footer-links {
    font-size: 3vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw;
  }
  
  .social-media img {
    width: 8vw;
    height: 8vw;
  }

}


@media only screen and (max-width: 450px) {

  #nav-bar {
    height: 11vw;
  }

  .nav-logo-h1 {
    font-size: 6vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -2.375vw;
  }

  .right-pane a {
    display: block;
    width: 90%;
    text-align: left;
    padding: 10px;
    font-size: 4.5vw;
  }

  .contact-text-box h1 {
    font-size: 13vw;
  }
  
  .contact-text-box-p {
    font-size: 4vw;
  }

  .terms-text-box h1 {
    font-size: 13vw;
    margin-top: 17vw;
  }

  .faq-heading {
    font-size: 4.5vw;
  }
  
  .faq-dropdown {
    font-size: 3.5vw;
  }
  
  .faq-content {
    font-size: 3.25vw;
  }

  .content-section {
    flex-direction: column;
    align-items: center;
  }

  .section-image {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5vw;
    order: 0;
  }

  .section-image.right, .section-image.left {
    order: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .about-container {
    max-width: 100%; /* Adjust the maximum width as needed */
  }

  .about-text-box h1 {
    font-size: 6.25vw;
  }
  
  .about-text-box-p {
    font-size: 3.75vw;
  }

  .footer-links {
    font-size: 3.25vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw;
  }
  
  .social-media img {
    width: 8.5vw;
    height: 8.5vw;
  }

}

@media only screen and (max-width: 440px) {

  #nav-bar {
    height: 11.125vw;
  }

  header {
    min-height: 11vw;
    /* padding: 2vw 0;  Even larger padding for very small devices */
  }

  #nav-icon {
    width: 11vw;
  }

  .oval-btn {
    padding: 1rem 1rem; /* Adjust the padding for both buttons on mobile */
    border-radius: 5px;
    width: 170px; /* Adjust the width for smaller screens */
    max-width: 100%;
  }

  .btn-text {
    /* margin-right: 0.5rem; */
    font-size: 4vw; /* Adjust this value to make the text smaller or larger */
  }
  
  .btn-arrow {
    font-size: 4vw;
    transition: transform 0.3s ease; /* Added for arrow position transition */
  }

  .explore-btn {
    padding: 1rem 1rem; /* Match the padding of the "Start Doodling" button on mobile */
    width: 170px; /* Adjust the width for smaller screens */
  }

  .caption, .alt-text {
    font-size: 6vw; /* Maximum increase for very small devices */
  }

  .faq-heading {
    font-size: 5vw;
  }
  
  .faq-dropdown {
    font-size: 4vw;
  }
  
  .faq-content {
    font-size: 3.75vw;
  }

  .content-section {
    flex-direction: column;
    align-items: center;
  }

  .section-image {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5vw;
    order: 0;
  }

  .section-image.right, .section-image.left {
    order: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .about-container {
    max-width: 100%; /* Adjust the maximum width as needed */
  }

  .about-text-box h1 {
    font-size: 6.5vw;
  }
  
  .about-text-box-p {
    font-size: 4vw;
  }

  .footer-links {
    font-size: 3.5vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw;
  }
  
  .social-media img {
    width: 8.5vw;
    height: 8.5vw;
  }

}

@media only screen and (max-width: 400px) {

  #nav-bar {
    height: 11.375vw;
  }

  .nav-logo-h1 {
    font-size: 6.5vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -2.5vw;
  }

  header {
    min-height: 13vw;
    /* padding: 2vw 0;  Even larger padding for very small devices */
  }

  #nav-icon {
    width: 11vw;
  }

  .right-pane a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px;
    font-size: 4.5vw;
  }

  .contact-text-box h1 {
    font-size: 13vw;
  }

  .contact-text-box-p {
    font-size: 5vw;
  }

  .terms-text-box h1 {
    font-size: 13vw;
    margin-top: 18vw;
  }

  .faq-heading {
    font-size: 5vw;
  }

  .faq-dropdown {
    font-size: 4vw;
  }

  .faq-content {
    font-size: 3.75vw;
  }

  .content-section {
    flex-direction: column;
    align-items: center;
  }

  .section-image {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5vw;
    order: 0;
  }

  .section-image.right, .section-image.left {
    order: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .about-container {
    max-width: 100%; /* Adjust the maximum width as needed */
    margin-top: 12vw;
  }

  .about-text-box h1 {
    font-size: 6.75vw;
  }
  
  .about-text-box-p {
    font-size: 4.25vw;
  }

  .footer-links {
    font-size: 3.75vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw;
  }
  
  .social-media img {
    width: 8.75vw;
    height: 8.75vw;
  }

}

@media only screen and (max-width: 360px) {

  #nav-bar {
    height: 12.25vw;
  }

  .nav-logo-h1 {
    font-size: 7vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -2.625vw;
  }

  .btn-text {
    /* margin-right: 0.5rem; */
    font-size: 5vw; /* Adjust this value to make the text smaller or larger */
  }
  
  .btn-arrow {
    font-size: 5vw;
    transition: transform 0.3s ease; /* Added for arrow position transition */
  }

  .right-pane {
    width: 75%; /* Adjust as necessary */
  }

  .right-pane a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px;
    font-size: 5vw;
  }

  .caption, .alt-text {
    font-size: 5.5vw; /* Maximum increase for the smallest devices */
  }

  .contact-text-box h1 {
    font-size: 14vw;
  }
  
  .contact-text-box-p {
    font-size: 6vw;
  }

  .terms-text-box h1 {
    font-size: 14vw;
    margin-top: 19vw;
  }

  .faq-heading {
    font-size: 5vw;
  }
  
  .faq-dropdown {
    font-size: 4vw;
  }
  
  .faq-content {
    font-size: 3.75vw;
  }

  .content-section {
    flex-direction: column;
    align-items: center;
  }

  .section-image {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5vw;
    order: 0;
  }

  .section-image.right, .section-image.left {
    order: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .about-container {
    max-width: 100%; /* Adjust the maximum width as needed */
    margin-top: 12vw;
  }

  .about-text-box h1 {
    font-size: 7vw;
  }
  
  .about-text-box-p {
    font-size: 4.5vw;
  }

  .footer-links {
    font-size: 4vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw;
  }
  
  .social-media img {
    width: 9vw;
    height: 9vw;
  }

}

@media only screen and (max-width: 300px) {

  #nav-bar {
    height: 12.75vw;
  }

  .nav-logo-h1 {
    font-size: 7.5vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -2.75vw;
  }

  .terms-text-box h1 {
    margin-top: 30vw;
  }

  .footer-links {
    font-size: 5vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw;
  }
  
  .social-media img {
    width: 10vw;
    height: 10vw;
  }

}

@media only screen and (max-width: 250px) {

  #nav-bar {
    height: 14vw;
  }

  .nav-logo-h1 {
    font-size: 8vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -2.875vw;
  }

  .terms-text-box h1 {
    margin-top: 30vw;
  }

  .footer-links {
    font-size: 5.25vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw;
  }
  
  .social-media img {
    width: 10.25vw;
    height: 10.25vw;
  }

}

@media only screen and (max-width: 170px) {

  #nav-bar {
    height: 14.75vw;
  }

  .nav-logo-h1 {
    font-size: 8.5vw; /* Sets a large font size for visibility */
  }

  #nav-link-group {
    margin-top: -3vw;
  }

  .terms-text-box h1 {
    margin-top: 40vw;
  }

  .footer-links {
    font-size: 5.5vw;
  }

  .social-media {
    gap: 5vw;
    margin-top: 3vw;
  }
  
  .social-media img {
    width: 10.5vw;
    height: 10.5vw;
  }

}