:root {
  --bg-color: #121212;
  --second-bg-color: #373434;
  --text-color: #FFFFFF;
  --main-color: #B68362;
  --other-color: #8B8A91;
  --alt-color: #4B4B51;
  --ann-color: #C7C6D3;
  --mode-color:#0f1f50;
  --h1-font: 5rem;
  --h2-font: 3.8rem;
  --p-font: 0.7rem;
  --h4-font: 1.7rem;
  --h5-font: 1rem;
}


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.container{
  width:1400px;
  /* border: 1px solid black; */
  margin: auto;
}


#landing-page-navbar {
  display: flex;
  justify-content: space-between;
  font-weight: 400;
  position: fixed; 
  top: 0; 
  max-width:100% ;
  z-index: 100;
  height: 5rem;
  background-color: #fff; 
  
}


#logo{
  width: 7rem;
  height:7rem;
}

#landing-page-menu{
margin-left: 40rem;
}
#landing-page-menu ul{
  max-width:35%;
  height: auto;
  display: flex;
  margin-top: 2rem;
  justify-content:center;
 
  
 
}

#landing-page-menu ul li{
  min-width: 60%;
  list-style-type: none;
 
  
  margin-top: 0.5rem;
}
#landing-page-menu ul .menu a{
  
  text-decoration: none;
  font-size: var(--h5-font);
  color: var(--bg-color);
  padding:0.7rem;
}

#landing-page-menu ul .menu a:hover{
  
  border-bottom: 2px solid black ;
  transition: background-color 0.3s ease, transform 0.3s ease; 
  
}


#hamburger-menu {
  display: none; /* Hide hamburger menu by default */
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  margin-top: 2rem;
  margin-left: 43rem;
}

#hamburger-menu span {
  width: 25px;
  height: 3px;
  
  background-color: #2f92de;
}




.login-signupBtns{

min-width:100%;
margin-left: 10rem;
/* border: 1px solid black; */
}





.btn{
padding: 0.7rem 1rem;

font-size: var(--h5-font);
border-radius: 0.2rem;
background-color:#2f92de;
font-weight: bold;
color: var(--text-color);
border: none;
}



#signupBtn{
background-color: transparent;
border: 2px solid #2f92de;
color:#2f92de;
}

#signupBtn:hover, .btn:hover{
background-color: rgb(75, 147, 235);
color: white;
}

#hero-container #getStartedBtn{
margin-left: 35rem;

}

#task-image-container #taskImage{
margin-left: 17rem;
}

#hero-container p{
margin-left: 8rem;
line-height: 1.9rem;
}



.container1{
  overflow: hidden;
  position: absolute;
  margin-left:70px;
  
}

#hero-container{
line-height:5rem;
}

#hero-container h2{
font-size: var(--h2-font);
margin-left: 5rem;
width:80%;
margin-top: 1rem;

text-align: center;
}

#hero-container p{
text-align: center;
margin-right: 10rem;
}


#hero-container .btn{
margin-left: 37rem;
padding: 0.7rem 1rem;
 
  font-size: var(--h5-font);
  border-radius: 0.3rem;
  background-color:#2f92de;
  color: var(--text-color);
  border: none;
}
#taskImage{
width:50%;
margin-left: 20rem;
}


/* .container {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
} */

.scroll-section {
  overflow: hidden;
  width: 100%;
  height: 400px; /* Adjust the height to fit all images */
  position: relative;
}

.brand-names {
  display: flex;
  gap: 100px;
  animation: scroll 15s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.brand-names-card {
  margin-top: 100px;
  transition: transform 0.3s ease;
}

.brand-images {
  width: 200px;
  height: 100px;
  transition: transform 0.3s ease;
}

.brand-names-card:hover {
  animation-play-state: paused;
  transform: scale(1.2);
}

.brand-images:hover {
  transform: scale(1.2);
}

.scroll-section:hover .brand-names {
  animation-play-state: paused;
}

.scroll-section {
height: auto;

opacity: 0; /* Start with hidden sections */
transform: translateY(50px); /* Move sections down */
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}


.scroll-section.active {
opacity: 1; /* Fade in */
transform: translateY(0); /* Slide up */
}



.deptBtn{
border: none;
background-color: transparent;
border:1px solid rgb(143, 143, 143);

border-radius: 0.8rem;
padding:0.7rem ;
margin-left: 1rem;
font-size: 1.5rem;
cursor: pointer;
}

.deptBtn:hover{
background-color: #2f92de;
color:white;
}



#different-department-container{
height:45rem;
margin-top: 5rem;
font-size: var(--h5-font);
border-radius: 0.5rem;
}

#department-buttons{
margin-left: 8rem;
margin-top: 3rem;
}

#departments img{
width:40%;
height:25rem;
margin-top: 3rem;

}

#departments{
display: flex;
flex-direction: row;
justify-content: center;
gap:8rem;
}

#departments-content{
margin-top: 8rem;
line-height: 3rem;
margin-left: 2rem;
}

#departments-content li{
list-style: none;
}


/*responsiveness*/


/* Styles for 1024px screens */
@media screen and (max-width: 1024px) {
.container {
    width: 100%; 
    padding: 0 1rem; 
}

#landing-page-menu {
  position: absolute;
  top: 5rem;
  left: 0;
  width: 100%;
  background-color: #fff;
  flex-direction: column;
  display: none;
}

#landing-page-menu ul {
  flex-direction: column;
  gap: 2rem;
  text-align: center;
  margin: 0;
}

#hero-container #getStartedBtn{
margin-left: 24rem;

}
.login-signupBtns {
  margin-left: 0;
  width: 100%;
  text-align: center;
}
#hamburger-menu {
display: flex; /* Hide hamburger menu by default */
flex-direction: column;
cursor: pointer;
gap: 5px;
margin-top: 2rem;
margin-left: 43rem;
}

#hamburger-menu span {
width: 25px;
height: 3px;

background-color: #2f92de;
}

#landing-page-menu.active {
  display: flex;
}

#brand-names{
margin-left: 5rem;
}

.deptBtn{
font-size: var(--h5-font);
margin-left: 1rem;
padding:1rem;
}

#different-department-container h1{
font-size: var(--h5-font);
color: #2f92de;
}

#hero-container h2{
font-size: 2.8rem;
width:90%;
margin-top: 1rem;

text-align: start;
}

#departments{
width: 90%;
display: flex;
justify-content: center;
gap:2rem;

}

#departments img{
width:40%;
height:25rem;
margin-top: 3rem;
margin-left: 4rem;
}

}



/* Styles for 768px screens */
@media screen and (max-width: 768px) {
.container {
  width: 100%; 
  padding: 0 1rem; 
}

#landing-page-menu {
  position: fixed; /* Change to fixed to ensure it stays in view */
  top: 5rem;
  left: 0;
  width: 100%;
  background-color: #fff;
  flex-direction: column;
  display: none;
  z-index: 100; /* Ensure it sits above other content */
}

#landing-page-menu ul {
  flex-direction: column;
  gap: 2rem;
  text-align: center;
  margin: 0;
}

.login-signupBtns {
  margin-left: 0;
  width: 100%;
  text-align: center;
}

#hamburger-menu {
  display: flex; /* Show hamburger menu */
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  margin-top: 2rem;
  
}

#hamburger-menu span {
  width: 25px;
  height: 3px;
  background-color: #2f92de;
}


button#getStartedBtn{
  
  border: 1px solid black;

}

#landing-page-menu.active {
  display: flex;
}

#brand-names {
  margin-left: 0; /* Adjust margin for smaller screens */
  text-align: center;
}

#department-buttons{
  margin-left: -1rem;
}

#departments #department-image{
  width: 100%;
  height: 100%;
}
#departments #department-name{
  font-size: 1.5rem;
  }
.section{
    margin-top: 15rem;
  }



#department-buttons .deptBtn {
  font-size: var(--h5-font);
  padding: 1rem;
  width: 20%; 
  margin-top: 1rem;
  
}

#different-department-container h1 {
  font-size: var(--h5-font);
  color: #2f92de;
}

#hero-container h2 {
  font-size: 2.8rem;
  width: 90%;
  margin-top: 1rem;
  text-align: center; /* Center align for smaller screens */
}

#departments {
  width: 90%;
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center;
  gap: 2rem;
 
}


#departments img {
  width: 10%; /* Adjust image width */
 height: 3rem;
  margin-top: 1rem;
}
}



/* Styles for 412px screens */
@media screen and (max-width: 472px) {
.container {
  width: 100%; 
  padding: 0 1rem; 
}

#landing-page-menu {
  position: fixed; /* Change to fixed to ensure it stays in view */
  top: 5rem;
  left: 0;
  width: 100%;
  background-color: #fff;
  flex-direction: column;
  display: none;
  z-index: 100; /* Ensure it sits above other content */
}

#landing-page-menu ul {
  flex-direction: column;
  gap: 2rem;
  text-align: center;
  margin: 0;
}

.login-signupBtns {
  margin-left: 0;
  width: 100%;
  text-align: center;
}

#hamburger-menu {
  display: flex; /* Show hamburger menu */
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  margin-top: 2rem;
  
}

#hamburger-menu span {
  width: 25px;
  height: 3px;
  background-color: #2f92de;
}


button#getStartedBtn{
  background-color: red;
  border: 1px solid black;

}

#landing-page-menu.active {
  display: flex;
}

#brand-names {
  margin-left: 0; /* Adjust margin for smaller screens */
  text-align: center;
}

#department-buttons{
  margin-left: -1rem;
}

#departments #department-image{
  width: 100%;
  height: 100%;
}
#departments #department-name{
  font-size: 1.5rem;
  }
.section{
    margin-top: 15rem;
  }



#department-buttons .deptBtn {
  font-size: var(--h5-font);
  padding: 1rem;
  width: 20%; 
  margin-top: 1rem;
  
}

#different-department-container h1 {
  font-size: var(--h5-font);
  color: #2f92de;
}

#hero-container h2 {
  font-size: 2.8rem;
  width: 90%;
  margin-top: 1rem;
  text-align: center; /* Center align for smaller screens */
}

#departments {
  width: 90%;
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center;
  gap: 2rem;
 
}


#departments img {
  width: 10%; /* Adjust image width */
 height: 3rem;
  margin-top: 1rem;
}

.section{
  flex-direction: column;
}

}


/*-------------Aditya code---------------*/



.section {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
width: 100%;
padding: 20px 0;
}

.left-image,
.right-image,
.left-text
{
flex: 1;
padding: 10px;
}

.right-text {
margin-top: 10rem;
margin-left: 3rem;
width:40%;
line-height: 2rem;
}

.left-text{
margin-top: 6rem;
margin-left: 3rem;
max-width:40%;
line-height: 2rem;
}

.left-image,
.right-image {

display: flex;
justify-content: center;
align-items: center;
}

.responsive-image {
width: 100%;
max-width: 500px; /* Set max width */
height: auto; /* Maintain aspect ratio */
border-radius: 8px;
}

@media (max-width: 768px) {
.left-image,
.right-image {
  max-width: 100%;
  height: auto;
}
}

.main-container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
text-align: center;
}

.header-section {
margin-bottom: 40px;
}

.header-section h1 {
font-size: 2.5rem;
/* color: #1f8ef1; Blue */
color: var(--alt-color);
margin-bottom: 20px;
}

.header-section p {
font-size: 1.2rem;
color: var(--alt-color); /* White */
margin-bottom: 40px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

.card-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}

.card {
background-color: #1f8ef1; /* Darker Blue */
padding: 30px 20px;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}

.card:hover {
transform: translateY(-10px);
}

.card img {
max-width: 60px;
margin-bottom: 20px;
}

.card h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: var(--alt-color); /* Blue */
}

.card p {
font-size: 1rem;
margin-bottom: 20px;
color: #ffffff; /* White */
}

.rating {
font-size: 1.5rem;
color: #f1ca1f; /* Blue */
}


h2 {
color: #1f8ef1; /* Blue color */
margin-bottom: 10px;
}

.section-content {
list-style-type: none;
}

.section-content li {
margin-bottom: 10px;
padding-left: 20px;
position: relative;
}

.section-content li::before{
content: "✔";
color: #007bff; /* Blue color */
position: absolute;
left: 0;
top: 0;
}

/* Second layout styles */
.center-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-bottom: 40px;
}

.center-content h1 {
font-size: 32px;
color: #1f8ef1; /* Blue color */
margin-bottom: 20px;
}

.center-content button {
padding: 10px 20px;
border: none;
background-color: #1f8ef1; /* Blue color */
color: #fff;
cursor: pointer;
font-size: 16px;
font-weight: 600;
border-radius: 5px;
margin-top: 10px;
transition: background-color 0.3s;
}

.center-content button:hover {
background-color: #1f8ef1;/* Darker blue */
}

.card-grid {
display: flex;
justify-content: space-between;
gap: 20px;
margin-bottom: 40px;
}

.card {
flex: 1;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
text-align: center;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card h3 {
margin-bottom: 10px;
font-size: 18px;
font-weight: 600;
color: #1f8ef1; /* Blue color */
}

.card p {
font-size: 14px;
color: #666;
}

.card a {
display: inline-block;
margin-top: 10px;
font-size: 14px;
color: #1f8ef1;; /* Blue color */
text-decoration: none;
font-weight: 600;
}

.card a:hover {
text-decoration: underline;
}