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

    body, html {
      height: 100%;
      overflow-x: hidden;
    }

    body {
      font-family: Arial, sans-serif;
      color: white;
      background-color: #12061c;
    }

    section {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80vh;
      min-height: 400px;
      text-align: center; /* Ensure text alignment */
    }

    #start-about {
      align-items: flex-start; /* Aligns content to the top */
      height: auto;
      padding-top: 10vh; /* Adjust to raise content further down */
    }

    #start-contact {
      align-items: flex-start; /* Aligns content to the top */
      height: 90vh;
      padding-top: 10vh; /* Adjust to raise content further down */
    }

    section-wide {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      min-height: 800px;
    }

    /* You can also add media queries to adjust layout for small screens */
    @media (max-width: 768px) {
      section {
        flex-direction: column; /* Ensure content stacks on smaller screens */
      }

      section-wide {
        flex-direction: column; /* Ensure content stacks on smaller screens */
      }

      #start-contact {
        align-items: flex-start; /* Aligns content to the top */
        height: 90vh;
        padding-top: 10vh; /* Adjust to raise content further down */
      }

      #start-contact > div {
        margin-top: -30vh; /* Adjust content upwards */
      }
    }


    .full-screen {
      display: flex;
      justify-content: space-between;
      align-items: center; /* Ensure all child elements are vertically centered */
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
    }

    .text-left{
      width: 50%;
      max-width: 70%;
    }

    .text-right {
      display: flex;
      flex-direction: column; /* Stacks text vertically */
      justify-content: center; /* Centers vertically */
      align-items: center; /* Centers horizontally */
      width: 40%;
      max-width: 40%;
      text-align: center;
      height: 100%; /* Ensure it fills the parent's height */
    }

    .blank-left{
      width: 7%;
    }
    .blank-right{
      width: 1%;
    }

    .image-middle{
      width: 27%;
    }

    .zain-extralight {
      font-family: "Zain", system-ui;
      font-weight: 200;
      font-style: normal;
    }

    .zain-light {
      font-family: "Zain", system-ui;
      font-weight: 300;
      font-style: normal;
    }

    .zain-regular {
      font-family: "Zain", system-ui;
      font-weight: 400;
      font-style: normal;
    }

    .zain-bold {
      font-family: "Zain", system-ui;
      font-weight: 700;
      font-style: normal;
    }

    .zain-extrabold {
      font-family: "Zain", system-ui;
      font-weight: 800;
      font-style: normal;
    }

    .zain-black {
      font-family: "Zain", system-ui;
      font-weight: 900;
      font-style: normal;
    }

    a:link {
      font-size: 1.5rem;
    }

    h1, h2, h3, h4, h5 {
      font-weight: 700;
    }

    h1 {
      font-family: "Zain";
      font-size: 6.5rem;
      background: linear-gradient(to right, #F3A8FF, #77CEFF);
      -webkit-background-clip: text;
      color: transparent;
      max-width: 90%; /* Restrict the width to 80% of the parent */
      margin: 0 auto; 
      line-height: 0.9;
    }

    h2 {
      font-family: "Zain";
      font-size: 5vw;
      color: #BCDBFF;
      text-align: center;
      line-height: 1.2; /* Set the line height to 1.2 times the font size */
    }

    h3 {
      font-family: "Zain";
      font-size: 4.7rem;
      background: linear-gradient(to right, #F3A8FF, #77CEFF);
      -webkit-background-clip: text;
      color: transparent;
    }

    h4 {
      font-family: "Zain";
      font-size: 4.7rem;
      color: #BCDBFF;
      text-align: center;
      line-height: 1.2; /* Set the line height to 1.2 times the font size */
    }

    h5 {
      font-family: "Zain";
      font-size: 2.3rem;
      font-weight: normal;
      color: #BCDBFF;
      text-align: center;
      margin: 0 auto;
      padding-top: 10px;
    }

    #about {
      max-width: 80%; /* Restrict the width to 80% of the parent */
      margin: 0 auto; 
    }
    
    #about-list {
      max-width: 80%; /* Restrict the width to 80% of the parent */
      margin: 0 auto;
      font-size: 1.9rem;
    }
  
    h6 {
      font-family: "Zain";
      font-size: 1.7rem;
      font-weight: bold;
      color: #BCDBFF;
      text-align: center;
    }

    h7 {
      font-family: "Zain";
      font-size: 1.3rem;
      font-weight: normal;
      color: #BCDBFF;
      text-align: center;
      max-width: clamp(0px, 20%, 200px);
    }

    #Disappear {
      opacity: 1; /* Default opacity to visible */
      transition: opacity 0.5s ease-in-out; /* Smooth transition for opacity */
    }

    .intext-logo {
      padding-left: 2.5px; 
      padding-bottom: 9px; 
      height: 33px; 
      vertical-align: middle;
    }

    @media (max-height: 500px) {
      #Disappear {
        opacity: 0;
      }
    }

    /* You can also add media queries to adjust layout for small screens */
    @media (min-width: 1400px) {
      h2 {
        font-size: 4.7rem;
      }
    }

    @media (max-width: 900px) {
      h1 {
        font-size: 5.5rem; /* Further shrink for screen widths less than 768px */
        max-width: 80%;
        padding-bottom: 20px;
      }

      h2 {
        font-size: 4rem; /* Further shrink for screen widths less than 768px */
        padding: 50px;
      }

      h3, h4 {
        font-size: 4rem; /* Further shrink for screen widths less than 768px */
      }

      h5 {
        font-size: 1.8rem; /* Further shrink for screen widths less than 768px */
        max-width: 80%;
      }

      .intext-logo {
        padding-left: 2px; 
        padding-bottom: 7px; 
        height: 28px; 
        vertical-align: middle;
      }

      #about-list {
        font-size: 1.5rem;
      }

      h7 {
        font-size: 1rem; 
      }

      .text-right{
        width: 80%;
        max-width: 80%;
        text-align: center;
      }

      .image-middle{
        width: 60%;
        max-width: 300px;
        padding-bottom: 20px;
      }

      section {
        height: 100vh;
        min-height: 500px;
      }
  
      section-wide {
        height: 120vh;
        min-height: 900px;
      }

      #start-contact {
        align-items: flex-start; /* Aligns content to the top */
        height: 90vh;
        padding-top: 10vh; /* Adjust to raise content further down */
      }
    }

    @media (max-width: 600px) {
      h1 {
        font-size: 4.5rem; /* Further shrink for screen widths less than 768px */
      }

      h2 {
        font-size: 3rem; /* Further shrink for screen widths less than 768px */
        padding: 50px;
      }

      h3, h4 {
        font-size: 3rem; /* Further shrink for screen widths less than 768px */
      }

      h5 {
        font-size: 1.3rem; /* Further shrink for screen widths less than 768px */
        max-width: 80%;
      }

      .intext-logo {
        padding-left: 1.5px; 
        padding-bottom: 5px; 
        height: 19px; 
        vertical-align: middle;
      }

      #about-list {
        font-size: 0.9rem;
      }

      h7 {
        font-size: 0.8rem; 
      }

      .text-right{
        width: 100%;
        max-width: 100%;
        text-align: center;
      }

      .image-middle{
        width: 60%;
      }

      #start-contact {
        align-items: flex-start; /* Aligns content to the top */
        height: 90vh;
        padding-top: 10vh; /* Adjust to raise content further down */
      }
    }


    .btn {
      background: none;
      color: #a3e6ff;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      margin-top: 20px;
    }


    .here-section {
      text-align: center;
      font-size: 2rem;
    }

    .image-left, .image-right {
      width: 25%;
    }

    /* Add responsiveness */
    @media screen and (max-width: 900px) {
      .full-screen {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .text-left, .text-right {
        order: 2;
        width: 100%;
      }

      .image-left, .image-right, .image-middle {
        order: 1;
        width: 60%;
        margin: 20px 0;
      }

      #start-contact {
        align-items: flex-start; /* Aligns content to the top */
        height: 90vh;
        padding-top: 10vh; /* Adjust to raise content further down */
      }
    }

    .mockup-video {
      width: 100%;
      height: auto;
      pointer-events: none; /* Prevent video selection */
      user-select: none;    /* Prevent text selection around the video */
    }


/* TESTIMONIALS CSS CODE */

    .three-column-section {
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
      gap: 20px;
      padding: 50px 10px;
      height: auto;
    }
    
    .three-column-section .column {
      flex: 1;
      max-width: 30%; /* Limit column width */
      text-align: center;
      padding: 20px;
      border-radius: 10px;
    }
    
    .three-column-section .name {
      font-size: 1.8rem;
      font-family: "Zain", sans-serif;
      color: #F3A8FF; /* Gradient-matching color */
      margin-bottom: 10px;
    }
    
    .three-column-section .quote {
      font-size: 1.2rem;
      color: #BCDBFF;
      font-style: italic;
    }
    
    /* Responsive Design */
    @media (max-width: 768px) {
      .three-column-section {
        flex-direction: column;
        align-items: center;
      }
      
      .three-column-section .column {
        max-width: 80%; /* Columns take full width */
      }
    }
    

/* HEADER CSS CODE */

    /* Header styles */
    header {
      background: linear-gradient(to bottom, #372740, #12061c); /* Vertical gradient */
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 90px;
    }

    /* Navigation container */
    .nav-container {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto; /* Center the content */
      padding-bottom: 5px;
    }

    /* Logo */
    .logo {
      height: 40px; /* Adjust as per your logo size */
      padding-left: 10px;
    }

    /* Get the App button */
    .get-app-btn {
      display: inline-block;
      padding: 5px 20px;
      font-family: "Zain", sans-serif; /* Ensure the font is loaded */
      font-size: 16px;
      text-decoration: none;
      text-align: center;
      border-radius: 20px; /* Rounded corners */
      color: transparent; /* Gradient text */
      background: linear-gradient(to right, #F3A8FF, #77CEFF); /* Gradient for the border */
      -webkit-background-clip: text; /* Clips the gradient to the text */
      background-clip: text; /* Ensures the gradient text works */
      -webkit-text-fill-color: transparent; /* Makes the text transparent */
      position: relative; /* Necessary for the inner background */
      z-index: 1; /* Ensures the text stays above the border */
      overflow: hidden; /* Prevents content overflow */
      transition: all 0.3s ease-in-out;
    }

    .get-app-btn::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 20px; /* Matches the button’s border radius */
      padding: 2px; /* Creates the border effect */
      background: linear-gradient(to right, #F3A8FF, #77CEFF); /* Gradient for the border */
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude; /* Ensures transparency inside */
      z-index: -1; /* Behind the button content */
    }

    .get-app-btn:hover {
      text-decoration: underline;
      box-shadow: 0 0 10px rgba(243, 168, 255, 0.5); /* Adds a glow effect on hover */
    }

    /* Center the App Store link image */
    .app-store-link {
      display: block;
      margin: 20px auto; /* Adds space and centers the image */
      max-width: 150px; /* Adjust the size as needed */
      height: auto; /* Maintain aspect ratio */
      transition: transform 0.3s ease; /* Adds a hover effect */
    }

    .app-store-link:hover {
      transform: scale(1.05); /* Slightly enlarges on hover */
    }

    /* Target detected phone numbers */
    a[href^="tel"] {
      color: #BCDBFF; /* Your desired color */
      text-decoration: none; /* Optional: Remove underline */
    }

    a[href^="tel"]:hover {
      color: #77CEFF; /* Optional: Change color on hover */
    }

/* FOOTER CSS CODE*/

    footer {
      background-color: #12061c; /* Match your background color or use a different one */
      color: #BCDBFF; /* Light text color */
      text-align: center;
      padding: 10px 0;
      position: relative;
      bottom: 0;
      width: 100%;
      font-family: "Zain"; /* Use the same font family as the rest of the page */
    }
    
    .footer-line {
      height: 1px;
      background-color: #BCDBFF; /* Slightly lighter purple for the line */
      margin-bottom: 30px;
    }
    
    .footer-container {
      display: flex; /* Enables flexbox */
      flex-direction: row; /* Ensures horizontal layout */
      justify-content: space-around; /* Distributes columns evenly with space around */
      align-items: flex-start; /* Aligns items to the top */
      gap: 20px; /* Adds spacing between columns */
      text-align: center; /* Aligns text to the left */
      max-width: 800px; /* Constrains the width of the footer */
      margin: 0 auto; /* Centers the footer horizontally */
      margin-bottom: 40px;
    }
    
    .footer-column {
      flex: 1; /* Distributes columns equally */
      min-width: 150px; /* Prevents columns from shrinking too small */
    }
    
    .footer-column h4 {
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    .footer-column ul {
      list-style-type: none;
      padding: 0;
    }
    
    .footer-column ul li {
      margin-bottom: 5px;
    }
    
    .footer-column ul li a {
      color: #BCDBFF;
      text-decoration: none;
    }
    
    .footer-column ul li a:hover {
      text-decoration: underline;
    }
    
    .footer-copy {
      margin-top: 20px;
      margin-left: 10px;
      font-size: 1.0em;
      text-align: left;
      color: #a0a0a0;
    }
    
    /* Responsive Design: Stack columns on smaller screens */
    @media (max-width: 768px) {
      .footer-container {
        flex-direction: column; /* Stacks columns vertically */
        align-items: center; /* Centers columns for a better look */
        text-align: center;
      }
    
      .footer-column {
        margin-bottom: 20px; /* Adds spacing between stacked columns */
      }
    }
    

/* REDUNDANT SCROLL BUTTON CODE */

    .scroll-btn {
      position: fixed;
      bottom: 20px; /* Adjust distance from bottom */
      left: 20px;   /* Adjust distance from left */
      background-color: transparent; /* Customize button styling */
      color: white;
      font-size: 1.2rem;
      text-decoration: none;
      display: flex;
      align-items: center;
      outline: none; /* Remove the focus outline */
      box-shadow: none; /* In case there's any box-shadow causing the outline */
      border: none; /* Remove any border */
      z-index: 9999;
      opacity: 1; /* Default to visible */
      transition: opacity 0.5s ease-in-out; /* Add transition for smooth fading */
      pointer-events: auto; /* Enable interaction */
    }

    .scroll-btn img {
      margin-right: 10px; /* Add spacing between icon and text */
    }

    .scroll-btn:hover {
        text-decoration: underline;
        text-decoration-color:#a3e6ff;
    }
    

/* REDUNDANT EMAIL INPUT CODE */

    .email-section {
      text-align: center;
    }

    #email-form {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 30px;
    }

    input[type="email"] {
      padding: 15px;
      width: 650px;
      max-width: 80vw;
      background-color: #BCDBFF; /* Add your desired background color */
      font-size: 2.0rem;
      font-family: 'Zain'; /* Change this to your preferred font */
      border: none; /* Remove default borders */
      border-radius: 50em; /* Match the border radius of the container */
      z-index: 1; /* Ensure it's above the gradient background */
      color: #000000; /* Set input text color */
      text-align: center; /* Center text horizontally */
      box-sizing: border-box; /* Ensure padding doesn't affect width */
    }

    input[type="email"]:focus {
      outline: none;
      box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Add a subtle blue shadow */
    }


    /* Prevent autofill background color change */
    input[type="email"]:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px #BCDBFF inset; /* Force the same background color */
      box-shadow: 0 0 0px 1000px #BCDBFF inset;
      -webkit-text-fill-color: #000000; /* Ensure text color remains consistent */
      font-size: 2.0rem; /* Ensure same font size */
      font-family: 'Zain'; /* Ensure consistent font family */
    }

    /* Style for the placeholder text */
    input[type="email"]::placeholder {
      color: black; /* Set placeholder color to black */
      opacity: 0.6; /* Ensure it's fully opaque */
      font-size: 2.0rem; /* Ensure same font size */
      font-family: 'Zain'; /* Ensure consistent font family */
    }

    .btn-gradient-2 {
      background: linear-gradient(#1a012e, #1a012e) padding-box,
                  linear-gradient(to right, #F3A8FF, #77CEFF) border-box;
      border-radius: 50em;
      border: 4px solid transparent;
    }

    .submit-btn {
      background: none;
      border: none;
      font-size: 1.5rem;
      color: #a3e6ff;
      cursor: pointer;
      font-weight: bold;
    }