/* Header style */

.header {
    background-image: linear-gradient(to bottom, #1b1b1b, #0f0f0f);
    border-top: white 1px;
    background-color: #0f0f0f;
    transition: top 0.3s;
    position: fixed;
    top:  0px;
    width: 100%;
    /* height: 130px; */
    z-index: 1000;
    text-align: justify;
    text-justify: inter-character;
    font-family: 'Lato', sans-serif;
    padding-right: 30px;
    padding-left: 66px;
    padding-top: 20px;
    margin-top: 0px; /* Adjust this value based on the height of your navbar */
    left: 0; /* Positioned the footer at the left */
    right: 0; /* Positioned the footer at the right */
    display: flex;
    flex-direction: column;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.header-right {
    display: flex;
    align-items: center;
}

.header-top {
    font-size: 2em;
    font-weight: 600;
}

.header-bottom {
    font-size: 1.5em;
    font-weight: 400;
}

.call-us-button {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s;
}

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


.header h1 {
    font-size: 5.25vw;
     font-family: 'Lato', sans-serif; /* Consistent font usage */
    white-space: nowrap; /* Prevents the text from wrapping */
}

.header h2 {
    color: #00ffdf;
    font-size: 4.125vw;
     font-family: 'Lato', sans-serif; /* Consistent font usage */
    margin: 0;
    padding-bottom: 20px;
    white-space: nowrap; /* Prevents the text from wrapping */
    width: 100%; /* Ensures the element takes up the full width */
}

/* Navigation links style */

.navbar {
    background-color: #1e1e1e;
    height: auto;
    transition: top 0.3s;
    width: 100%;
    z-index: 1050;
    display: flex;
    justify-content: left;
    flex-wrap: nowrap;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-left: 60px;
    padding-top: 5px;
    left: 0; /* Positioned the footer at the left */
    right: 0; /* Positioned the footer at the right */
    display: flex;
}


.navbar-fixed {
    position: fixed;
    /* top: 30px; */
    margin-top: 40px;
    box-shadow: 0 32px 32px rgba(0, 55, 255, 0.2), 0 -30px 20px rgba(0, 159, 255, 0.1), 0 -50px 32px rgba(0, 0, 0, 0.4);    

    width: 100%;  /* Ensures it stretches across the screen */

    /* Positioning the white lines */
    &::before,
    &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 1px; /* Adjust the thickness of the line */
        background-color: white; /* Color of the line */
    }

    /* Position the top line */
    &::before {
        top: 0;
    }

    /* Position the bottom line */
    &::after {
        bottom: 0;
    }

}   

.nav-link {
    color: #7dfffc; /* Highlighter yellow */
    cursor: pointer;
    font-family: 'Bebas Neue', sans-serif; 
    font-size: 3.3vw; /* Responsive font size */
    margin: 0px;
    padding-right: 20px;
    z-index: 1050;
    transition: transform 0.3s ease;

}

.nav-link:hover {
    transform: scale(1.2); /* Scale effect on hover */
}


.nav-link.active {
    color: #009fff; /* Hot pink for active */
}

      .hide {
            top: -300px; /* Adjust as needed */
        }

       


/* Base styles */
body {
    background-color: #121212; /* Dark background */
    color: #00ffdf; /* Subdued white for text #E0E0E0*/

    padding-top: 0px;
    
}



.image-area {
    display: flex;
    gap: 30px; /* Space between the big image and the small images */
}

.big-image {
    width: 60%; /* Adjust based on your preference */
    height: 500px; /* Adjust based on your preference */
    background-color: #202020;
    border-radius: 30px;
}

.small-images {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between the two small images */
    width: 40%; /* The rest of the space */
}

.small-image {
    flex: 1; /* Each takes half of the available space */
    background-color: #202020;
    border-radius: 30px;
}


/* Section styles */
.section {
    background-image: linear-gradient(to bottom right, #121212, #0e0e0e);
    position: relative; 
    display: none; /* Initially hide all sections */
    padding-top: 20px;
    font-family: 'Lato', sans-serif;
    top: 0px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 30px;
    padding-left: 60px;
}



.section::before {
    content: ''; /* Required for the pseudo-element */
    position: absolute; /* Position the pseudo-element relative to the section */
    top: 0; /* Place the pseudo-element at the top of the section */
    left: 0; /* Place the pseudo-element at the left of the section */
    margin-left: 60px;
    margin-right: 40px;
    width: 90%; 
    height: 2px; /* One pixel thick */
    background-color: white; /* White color for the border bar */
}
.section p {
    font-family: 'Lato', sans-serif; /* Lato font for paragraphs */
    font-weight: 600; /* Thin style */
    font-size: 2.3vw;
    color: #818589;
    text-align: justify;
    text-justify: inter-character;
    width: 100%; 

}



h1 {
    font-size: 4.5vw;
    margin: 0px;
    padding: 0px;
    color: #009fff; 
}

h2 {
color: #00c5ff; 
font-size: 4.125vw;
margin: 0px;
padding: 0px;
}

h3 {
    color: #00ffdf;

    font-size: 2.3vw;
    margin: 0px;
    padding: 0px;
    }

.neon-blue-green {
    color: #00ffdf;
    font-size: 2.3vw;
    margin: 0px;
    padding: 0px;
    }




.active {
    display: block; /* Show the active section */

}

.video-container {
    float: right;
    width: 30%; /* Adjust as needed */
}

.main-container {
    float: left;
    width: 100%; /* Adjust as needed */

}





.testimonials-container {
    display: flex;
    flex-direction: column; /* Stack bubbles vertically */
    gap: 20px; /* Adjust the space between bubbles */
    align-items: left; /* Center the bubbles */
    width: 100%; /* Ensure the container takes full width */
}
.testimonial-bubble {
    background-color: #1b1b1b; /* Dark background for the bubble */
    border-radius: 50px; /* Rounded corners for the bubble effect */
    padding-left: 60px; /* Space inside the bubble */
    padding-right: 60px;
    width: calc(100% - 40px); /* Full width minus some padding */
    box-sizing: border-box; /* Include padding in the width calculation */
    text-align: center; /* Center the text inside the bubble */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Adds a subtle shadow for depth */
    display: flex; /* Use flexbox to lay out the text and image side by side */
    align-items: left; /* Align items vertically in the center */
    gap: 20px; /* Add some space between the text and the image */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}
.testimonial-bubble p {
    color: #E0E0E0; /* Light text color for contrast */
    font-family: 'Lato', sans-serif; /* Consistent font usage */
    margin-bottom: 20px; /* Space between the quote and the link */
    font-size: 16px; /* Explicitly set the font size for consistency */
}

.testimonial-bubble a {
    color: #E0E0E0; /* Light link color for contrast */
    text-decoration: none; /* Removes underline from links */
    display: inline-flex; /* Aligns the icon and text */
    align-items: center; /* Centers the icon and text vertically */
}

.testimonial-bubble a i {
    margin-right: 8px; /* Space between the icon and text */
}

.testimonial-content {
    flex: 1; /* Allows the text container to fill the space available */
}

.testimonial-image img {
    border-radius: 15px; /* Rounded corners for the image */
    width: 100px; /* Smaller width for the image */
    cursor: pointer; /* Change cursor to indicate clickable */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

.testimonial-image img:hover, .testimonial-image img:active {
    transform: scale(5); /* Significantly enlarge the image on hover or click */
    z-index: 10; /* Ensure the enlarged image is above other content */
    position: relative; /* Required for z-index to take effect */
}


.social-icons {
    text-align: left;
  }
  
  .social-icon {
    font-weight: 600; /* Thin style */

    display: inline-flex; /* Changed to inline-flex for better alignment */
    align-items: center; /* Vertically centers the icon and text */
    margin: 0 10px;
    color: #ffffff; /* Initial color for icons and text */
    transition: transform 0.3s ease;
    font-size: 30px; /* Set an appropriate font-size for the text */
    text-decoration: none; /* Removes underline from links */
  }

  .social-icon:hover {
    transform: scale(1.2); /* Scale effect on hover */
    color: #ffffff; /* Change color on hover, use brand colors */

  }
  
  .social-icon i {
    margin-right: 8px;
    color: #e4e4e4; /* Initial color for icons and text */
    font-weight: 600; /* Thin style */
    padding-bottom: 5px;
    font-size: 30px; /* Adjust icon size as needed */
    line-height: 1; /* Ensures the icon aligns well with the text */
  }




footer {
    background-color: #1e1e1e;
    color: white;
    text-align: center;
    width: 100%;
    height: 60px;
    padding-top: 30px;
    padding-bottom: 20px;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    margin-bottom: 0; /* Adjusted margin-bottom to 0 */
    position: fixed; /* Changed position to fixed */
    bottom: 0; /* Positioned the footer at the bottom */
    left: 0; /* Positioned the footer at the left */
    right: 0; /* Positioned the footer at the right */
    display: flex;
    flex-direction: column;
    font-family: 'Lato', sans-serif;
 box-shadow: 0 -16px 32px rgba(0, 159, 255, 0.3), 0 8px 16px rgba(0, 0, 0, 0.1); 
}

footer::before {
    content: ''; /* Required for the pseudo-element */
    position: absolute; /* Position the pseudo-element relative to the section */
    top: 0; /* Place the pseudo-element at the top of the section */
    left: 0; /* Place the pseudo-element at the left of the section */
    margin-left: 0px;
    margin-right: 0px;
    width: 100%; 
    height: 2px; /* One pixel thick */
    background-color: white; /* White color for the border bar */
box-shadow: 0 -32px 32px rgba(0, 55, 255, 0.2), 0 -30px 20px rgba(0, 159, 255, 0.1), 0 -32px 32px rgba(0, 55, 255, 0.2); 
  
}

.hide-footer {
    transform: translateY(100%); /* Move the footer below the viewport */
    transition: transform 0.3s; /* Add transition for smooth effect */
}

.social-icon {
    font-weight: 600; /* Thin style */
    display: inline-flex; /* Changed to inline-flex for better alignment */
    align-items: center; /* Vertically centers the icon and text */
    margin: 0 10px; /* Adjust the margin to separate the icons */
    color: #ffffff; /* Initial color for icons and text */
    transition: transform 0.3s ease;
    font-size: 30px; /* Set an appropriate font-size for the text */
    text-decoration: none; /* Removes underline from links */
}


.powered-by {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-square {
    width: 10px;
    height: 10px;
    background-color: #fff; /* Add background color to the square */
    margin-left: 10px; /* Add margin to separate from text */
}




@media only screen and (min-width: 200px) and (max-width: 450px) {
    .footer-square {
        background-color: rgb(255, 106, 0);
    }

    .header h1 {
        font-size: 4.5vw;
    }
    
    .header h2 {
    font-size: 4.2vw;
    }

    .navbar {
        margin-top: 60px;
        background-color: #1e1e1e;

    }

    .navbar-fixed {
        margin-top: -10px;
    }

    .nav-link {
        padding-right: 5px;
    } 

    .social-icon {
        margin: 0 -1px;
        font-size: 15px; /* Set an appropriate font-size for the text */
      }

      
      .social-icon i {
    
        font-size: 15px; /* Adjust icon size as needed */
      }

      .section::before {
        margin-left: 60px;
        margin-right: 40px;
        width: 78%; 
    }

    .section p {
        font-size: 3.5vw;

    }

    .neon-blue-green {
        font-size: 3.5vw;
        }

    footer {

    font-size: 12px; /* Adjust icon size as needed */

    }
    
       .header {
        padding-top: 20px;
        height: 50px
     } 
}

@media only screen and (min-width: 451px) and (max-width: 600px) {
    .footer-square {
        background-color: rgb(221, 255, 0);
    }

    .header h1 {
        font-size: 4.5vw;
    }
    
    .header h2 {
    font-size: 4.2vw;
    }

    .navbar {
        margin-top: 80px;
        background-color: #1e1e1e;
    }

    .navbar-fixed {
        margin-top: -10px;
    }

    .nav-link {
        padding-right: 5px;
    } 

    .social-icon {
        margin: 0 -1px;
        font-size: 15px; /* Set an appropriate font-size for the text */
      }

      
      .social-icon i {
    
        font-size: 15px; /* Adjust icon size as needed */
      }

      .section::before {
        margin-left: 60px;
        margin-right: 40px;
        width: 78%; 
    }

    .section p {
        font-size: 3.5vw;

    }

    .neon-blue-green {
        font-size: 3.5vw;
        }

    footer {

    font-size: 12px; /* Adjust icon size as needed */

    }
    
       .header {
        padding-top: 20px;
      height: 70px
     } 
}

  @media only screen and (min-width: 601px) and (max-width: 768px) {
    .footer-square {
        background-color: blue;
    }

    .header h1 {
        font-size: 5vw;
    }
    
    .header h2 {
    font-size: 4.6vw;
    }


    .navbar {
        margin-top: 110px;
        background-color: #1e1e1e;
    }

    .navbar-fixed {
        margin-top: -10px;
    }
    .nav-link {
        padding-right: 10px;
    } 

    .social-icon {
        margin: 0 0px;

        font-size: 15px; /* Set an appropriate font-size for the text */
      }

      
      .social-icon i {
        font-size: 20px; /* Adjust icon size as needed */
      }

      .section::before {
        margin-left: 60px;
        margin-right: 40px;
        width: 83%; 
    }

    .section p {
        font-size: 3.3vw;

    }

    .neon-blue-green {
        font-size: 3.3vw;
        }

    footer {

    font-size: 12px; /* Adjust icon size as needed */

    }
    
        .header {
      
      height: 100px
     }

}
@media only screen and (min-width: 769px) and (max-width: 992px) {
    .footer-square {
        background-color: green;
    }

    .header h1 {
        font-size: 5.25vw;
    }
    
    .header h2 {
    font-size: 4.85vw;
    }

    .navbar {
        margin-top: 150px;
        background-color: #1e1e1e;

    }

    .navbar-fixed {
        margin-top: 0px;
        padding-top: 0px;
        top: 50px;
    }
    .nav-link {
        padding-right: 18px;
    } 


    .social-icon {
        margin: 0 5px;
        font-size: 15px; /* Set an appropriate font-size for the text */
      }

      
      .social-icon i {
    
        font-size: 25px; /* Adjust icon size as needed */
      }


    .section::before {
        margin-left: 60px;
        margin-right: 40px;
        width: 85%; 
    }

    footer {

        font-size: 16px; /* Adjust icon size as needed */
    
        }

    .header {
      
      height: 130px
     }
}

@media only screen and (min-width: 993px) and (max-width: 1200px) {
    .footer-square {
        background-color: yellow;
    }

    .header h1 {
        font-size: 5.45vw;
    }
    
    .header h2 {
    font-size: 5vw;
    }

    .navbar {
        margin-top: 150px;
        background-color: #1e1e1e;
    }

    .navbar-fixed {
        margin-top: 0px;
        padding-top: 0px;
        top: 50px;
    }


    .section::before {
        margin-left: 60px;
        margin-right: 40px;
        width: 84%; 
    }

    .section p {
        font-size: 2.5vw;

    }

    .neon-blue-green {
        font-size: 2.5vw;
        }


        .nav-link {
            padding-right: 25px;
        }
        
            .header {
      
      height: 140px
     }
}

@media only screen and (min-width: 1201px) and (max-width: 1299px) {
    .footer-square {
        background-color: purple;
    }
    .header h1 {
        font-size: 5.65vw;
    }
    
    .header h2 {
    font-size: 5.2vw;
    }

    .navbar {
        margin-top: 180px;
        background-color: #1e1e1e;
    }

    .navbar-fixed {
        margin-top: 0px;
        padding-top: 0px;
        top: 50px;
    }

    .nav-link {
        padding-right: 40px;
    }
    
       .header {
      
      height: 170px
     } 

}

@media only screen and (min-width: 1300px) and (max-width: 1367px) {
    .footer-square {
        background-color: rgb(161, 0, 38);
    }
    
    .header h1 {
        font-size: 5.65vw;
    }
    
    .header h2 {
    font-size: 5.2vw;
    }

    .navbar {
        margin-top: 200px;
        background-color: #1e1e1e;
    }

    .navbar-fixed {
        margin-top: 0px;
        padding-top: 0px;
        top: 50px;
    }

    .nav-link {
        padding-right: 46px;
    }
    
     .header {
      
      height: 180px
     }

}

@media only screen and (min-width: 1367px) and (max-width: 1700px) {
    .footer-square {
        background-color: rgb(47, 2, 102);
    }
    .header h1 {
        font-size: 5.65vw;
    }
    
    .header h2 {
    font-size: 5.2vw;
    }



    .navbar {
        margin-top: 240px;
        background-color: #1e1e1e;
    }

    .navbar-fixed {
        margin-top: 0px;
        padding-top: 0px;
        top: 50px;
    }
    .nav-link {
        padding-right: 50px;
    }

    .header {
      
      height: 220px;
    }
}

@media only screen and (min-width: 1701px) and (max-width: 2000px) {
    .footer-square {
        background-color: rgb(128, 100, 241);
    }
    .header h1 {
        font-size: 5.65vw;
        line-height: 4vw;

    }
    
    .header h2 {
    font-size: 5.2vw;
    }



    .navbar {
        margin-top: 240px;
        background-color: #1e1e1e;
    }

    .navbar-fixed {
        margin-top: 0px;
        padding-top: 0px;
        top: 50px;
    }
    .nav-link {
        padding-right: 50px;
    }

    .header {
      padding-top: 40px;
      height: 200px;
    }
}

@media only screen and (min-width: 2001px) and (max-width: 2500px) {
    .footer-square {
        background-color: rgb(8, 199, 37);
    }
    .header h1 {
        font-size: 5.65vw;
        line-height: 4vw;

    }
    
    .header h2 {
    font-size: 5.2vw;
    }



    .navbar {
        margin-top: 280px;
        background-color: #1e1e1e;
    }

    .navbar-fixed {
        margin-top: 0px;
        padding-top: 0px;
        top: 50px;
    }
    .nav-link {
        padding-right: 50px;
    }

    .header {
      padding-top: 40px;
      height: 240px;
    }
}

@media only screen and (min-width: 2501px) and (max-width: 3000px) {
    .footer-square {
        background-color: rgb(0, 84, 13);
    }
    .header h1 {
        font-size: 5.65vw;
        line-height: 4vw;

    }
    
    .header h2 {
    font-size: 5.2vw;
    }



    .navbar {
        margin-top: 300px;
        background-color: #1e1e1e;
    }

    .navbar-fixed {
        margin-top: 0px;
        padding-top: 0px;
        top: 50px;
    }
    .nav-link {
        padding-right: 50px;
    }

    .header {
      padding-top: 40px;
      height: 200px;
    }
}