/* Import fonts */

@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@400;600&family=Roboto&display=swap');

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

::selection{
color: black;
background-color: white;
}

body {
font-family: 'Roboto', sans-serif;
background-color: #000;
color: #fff;
}

/* Navigation styling */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #000;
}

.logo {
font-size: 24px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
color: #fff;
}

.login {
display: flex;
border: 1px solid white;
transition: background-color 2s ease;
}

.login:hover {
color: black;
background-color: white;
}

.nav-links {
display: flex;
list-style-type: none;
flex-grow: 1;
justify-content: center;
}

.nav-links li {
margin: 0 15px;
}
.nav-links a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-family: 'Poppins', sans-serif;
transition: color 0.3s ease, border-bottom 0.3s ease;
}

.nav-links a:hover {
color: #007bff;
border-bottom: 2px solid #007bff;
}

/* Hero section styling */

.hero {
text-align: center;
padding: 100px 20px;
height: 100vh;
background: url('bg3.jpg') no-repeat center center/cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
}

.hero h1 {
font-size: 48px;
line-height: 1.2;
margin-bottom: 20px;
font-family: 'Poppins', sans-serif;
}

.hero p {
font-size: 20px;
margin-bottom: 40px;
font-family: 'Roboto', sans-serif;
}

.cta-btn {
padding: 15px 30px;
background-color: white;
border: none;
color: black;
border: 2px black solid;
font-size: 18px;
cursor: pointer;
border-radius: 30px;
font-family: 'Poppins', sans-serif;
transition: background-color 0.3s ease, transform 0.3s ease, border 0.2s ease;
}

.cta-btn:hover {
background-color: white;
color: black;
border: white 2px solid;
transform: scale(1.05);
}
/* Trusted section */
.trusted {
margin-top: 30px;
}

.trusted img {
margin-top: 15px;
width: 200px;
}

/* Responsiveness */
@media (max-width: 768px) {
.hero h1 {
font-size: 36px;
}

.hero p {
font-size: 18px;
}

.cta-btn {
font-size: 16px;
}
}

/* Community Section */
.community {
text-align: center;
padding: 80px 20px;
background-color: #111;
color: #fff;
}

.community h2 {
font-size: 42px;
margin-bottom: 20px;
font-family: 'Poppins', sans-serif;
}

.community p {
font-size: 18px;
max-width: 800px;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}

/* Contact Form */
.contact {
background-color: #111;
color: #fff;
padding: 60px 20px;
text-align: center;
}

.contact h2 {
font-size: 36px;
margin-bottom: 30px;
font-family: 'Poppins', sans-serif;
}

.contact form {
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}

.contact form label {

font-size: 16px;
text-align: left;
font-family: 'Roboto', sans-serif;
}

.contact form input, .contact form textarea {

width: 100%;
padding: 15px;
border: 2px solid #444;
border-radius: 8px;
background-color: #222;
color: #fff;
font-size: 16px;
}

.contact form textarea {

min-height: 150px;
}

.contact form button {

padding: 15px;
background-color: transparent;
color: #fff;
border: 2px solid white;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}

.contact form button:hover {

background-color: white;
color: black;
}

/* Logo Update */
.logo {
width: 150px;
height: auto;
}
/* Improved Footer */
footer {
background-color: #111;
color: #fff;
padding: 60px 0;
text-align: center;
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.footer-content div {
margin: 20px;
}

.footer-about h3, .footer-links h3, .footer-social h3 {

font-size: 24px;
font-family: 'Poppins', sans-serif;
margin-bottom: 20px;
color: #007bff;
}

.footer-links ul, .footer-social ul {

list-style-type: none;
padding: 0;
}

.footer-links ul li, .footer-social ul li {

margin: 10px 0;
}

.footer-links ul li a, .footer-social ul li a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-family: 'Roboto', sans-serif;
transition: color 0.3s;
}

.footer-links ul li a:hover, .footer-social ul li a:hover {

color: #007bff;
transform: scale(1.1);
}

.footer-about p {
font-size: 16px;
line-height: 1.8;
font-family: 'Roboto', sans-serif;
}

/* Animation timing adjustment */

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.fade-in-section {
opacity: 0;
transform: translateY(20px);
visibility: hidden;
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
opacity: 1;
transform: translateY(0);
visibility: visible;
}

/* Smooth Scroll */
html {
scroll-behavior: smooth;
}

/* Scroll Animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.fade-in-section {
opacity: 0;
transform: translateY(20px);
visibility: hidden;
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
opacity: 1;
transform: translateY(0);
visibility: visible;
}

/* Smooth Scroll */
html {
scroll-behavior: smooth;
}

/* Scroll Animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
 }
}

.fade-in-section { /* Generic class for animation */

opacity: 0;
transform: translateY(20px);
visibility: hidden;
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
opacity: 1;
transform: translateY(0);
visibility: visible;
}

.team-container {
max-width: 1400px;
margin: 0 auto;
padding: 40px;
margin-top: 50px;
background-color: #222;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
color: white;
display: flex; /* Use flexbox to align items side by side */
}

.team-title {
font-size: 28px;
font-weight: bold;
margin-top: 0;
}

.team-description {
font-size: 16px;
line-height: 1.5;
margin: 20px 0;
}

.team-content {
display: flex; /* Use flexbox to align items side by side */
flex: 1; /* Allow the content to grow */
}

.team-text {
flex: 1; /* Take up half of the container */
padding-right: 20px; /* Add some space on the right side */
}

.team-img {
flex: 1; /* Take up half of the container */
display: flex; /* Center the image vertically */
justify-content: center; /* Center the image horizontally */
align-items: center; /* Center the image vertically */
}

.team-img img {
max-width: 100%; /* Makes the image responsive */
 height: auto; /* Maintains aspect ratio */
border-radius: 10px; /* Adds rounding to the image edges */
}

.social-buttons {
margin-top: 20px; /* Space above the buttons */
}

.social-button {
display: inline-block; /* Make the button inline-block */
padding: 10px 20px; /* Add padding for button size */
margin-right: 10px; /* Space between buttons */
background-color: transparent;
border: 1px solid white;
color: white; /* Text color */
text-decoration: none; /* Remove underline from links */
border-radius: 5px; /* Round edges */
transition: background-color 0.3s; /* Smooth color change on hover */
}

.social-button:hover {
background-color: white; /* Darker shade on hover */
color: black;
}

/* Hamburger icon styles */

/* Improved spacing for nav links */
.nav-links li {
margin: 0 30px; /* Increase spacing between links */
}

/* Hamburger icon styles */

.hamburger {
display: none; /* Hidden by default */
flex-direction: column; /* Stack lines vertically */
cursor: pointer; /* Change cursor on hover */
transition: transform 0.4s ease; /* Smooth transform */
}

.line {
height: 3px; /* Height of each line */
width: 25px; /* Width of each line */
background-color: #fff; /* Color of the lines */
margin: 4px 0; /* Space between lines */
transition: all 0.4s ease; /* Smooth transition for lines */
}

/* Transformations for open/close state */

.hamburger.open .line:nth-child(1) {
transform: translateY(7px) rotate(45deg); /* Top line */
}

.hamburger.open .line:nth-child(2) {
opacity: 0; /* Hide middle line */
}

.hamburger.open .line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg); /* Bottom line */
}
/* Media query for mobile */
@media (max-width: 768px) {
.nav-links {
display: none; /* Hide nav links by default */
flex-direction: column; /* Stack links vertically */
position: absolute; /* Position absolute for dropdown effect */
background-color: #222; /* Match background color */
top: 60px; /* Position below the navbar */
right: 0; /* Align to the right */
width: 100%; /* Full width */
z-index: 1; /* Stack above other elements */
opacity: 0; /* Start invisible */
transform: translateY(-20px); /* Start from above */
transition: opacity 0.4s ease, transform 0.4s ease; /* Transition for
showing */
}

.nav-links.active {
display: flex; /* Show links when active */
opacity: 1; /* Fade in */
transform: translateY(0); /* Slide down */
}

.hamburger {
display: flex; /* Show hamburger icon on mobile */
}
}
.fade-in-section {
opacity: 0;
transform: translateY(20px);
visibility: hidden;
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
.trusted p {
color: #007bff;
}

/* Download Section Styling */

.download-section {
padding: 50px;
background-color: #000;
color: #fff;
text-align: center;
}

.download-section h2 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
color: #fff;
margin-bottom: 30px;
}
/* Card Container as 2x2 Grid */
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: start;
justify-items: center;
}

/* Responsive grid */
@media (max-width: 1024px) {
.card-container {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {

.card-container {
grid-template-columns: 1fr;
}
}

.card {
background-color: #111;
border: 1px solid #333;
border-radius: 10px;
padding: 20px;
width: 100%;
max-width: 350px; /* Limit card width */
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
color: #fff;
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(255, 255, 255, 0.4);
}

/* Limit Preview Image Size in Popup */

.popup-image {
max-width: 90vw;
max-height: 90vh;
width: auto;
height: auto;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

.card h3 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 1.2em;
color: #fff;
margin-bottom: 10px;
}

.card p {
 font-family: 'Roboto', sans-serif;
font-size: 0.9em;
color: #bbb;
margin-bottom: 15px;
}

.download-button {
display: inline-block;
padding: 10px 15px;
font-family: 'Roboto', sans-serif;
font-weight: 600;
color: #000;
background-color: #fff;
border-radius: 5px;
text-decoration: none;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.download-button:hover {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255,
0.6);
transform: translateY(-2px);
}

.download-button:active {
transform: scale(0.97);
}

/* Card Image Styling */

.card-image {
width: 100%;
height: auto;
border-radius: 8px;
cursor: pointer;
transition: transform 0.3s ease;
}

.card-image:hover {
transform: scale(1.05);
}

/* Popup Overlay Styling */

.image-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
z-index: 1000;
}

/* Close Button Styling */

.close-btn {
position: absolute;
top: 20px;
 right: 30px;
font-size: 30px;
font-weight: bold;
color: #fff;
cursor: pointer;
transition: color 0.3s ease;
}

.close-btn:hover {
color: #ddd;
}