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

html,
body {
  /* height: 100%; */
  width: 100%;
  overflow-x: hidden;

  background-image: url('../images/backgound-picture.avif');

  background-size: cover;
  background-repeat: round;

}

/* Main container */
#main2{
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  position: relative;

}
#main {
  width: 100%;
  overflow: hidden;
  position: relative;
}


.nocopy {
  user-select: none;
  /* For most browsers */
  -webkit-user-select: none;
  /* For Safari */
  -moz-user-select: none;
  /* For Firefox */
}

/* Navigation bar */
nav {
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.068);
  /* backdrop-filter: blur(60px); */
  font-size: 1rem;
  justify-content: space-between;
}


/* Logo section */
.logo {
  height: 100%;
  padding: 0 3vw;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: blue; */
  color: white;

}

/* middle side of the navigation */
.nav-mid {
  height: 100%;
  width: 40%;
  /* background-color: rgb(141, 136, 127); */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  font-size: 22px;
  text-decoration: none;
}

/* Navigation links */
.nav-mid>a {
  text-decoration: none;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5),
      3px 3px 6px rgba(0, 0, 0, 0.3),
      4px 4px 8px rgba(0, 0, 0, 0.2);
  color: #ffffff;
  /* Ensure the text color contrasts with the shadow */

}

.nav-mid a {
  position: relative;
  transition: color 0.3s ease;
  margin: 0 10px;
}

.nav-mid a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #e9f5fa;
  transition: width 0.6s ease;
}

.nav-mid a:hover {
  color: #edfdfa;
  font-weight: bold;
}

.nav-mid a:hover::after {
  width: 100%;
}

/* Right side of the navigation */
.nav-right {
  height: 100%;
  width: 25%;
  display: flex;
  justify-content: flex-end;
  /* background-color: blue;   */
  padding-right: 3%;
  align-items: center;
  gap: 1.5vw;
  font-size: 23px;
  flex-shrink: 0;
  /* background-color: rgb(240, 240, 211); */
}

/* Navigation links */
.nav-right>a {
  text-decoration: none;
  /* color: #807BFF; */
  /* color: rgb(153, 132, 132); */
  font-size: 20px;
  margin: 0 10px;
}

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  transition: top 0.3s;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.068);
  backdrop-filter: blur(60px);
}

.nav-mid,
.nav-right {
  display: flex;
  align-items: center;
}

/* Menu button */
#menuButton {
  background-color: transparent;
  border: none;
  font-size: 24px;
  /* color: #807BFF; */
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.login-btn {
  padding: 10px 30px;
    background: rgba(30, 136, 229, 0.95); /* Deep royal blue */
    border: 2px solid rgba(25, 118, 210, 1);
    color: white;
    font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  
  overflow: hidden;
  transition: background-color 0.3s, color 0.3s;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.login-btn:hover {
  background: rgba(25, 118, 210, 1); /* Slightly darker shade */
  box-shadow: 0 4px 10px rgba(30, 136, 229, 0.5);
  color: #fff;
}

.login-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}

.login-btn:hover::after {
  width: 200px;
  height: 200px;
}

.login-btn:active {
  transform: scale(0.95);
}

/* Responsive adjustments */
@media (max-width:1231px) {
  .nav-mid{
    width: fit-content;
    font-size: 1rem;
    /* background-color: red; */
    gap: 1vw;
  }
  .nav-right{
    width: 30%;
  }
}


@media (max-width: 930px) { /* Tablet */
  nav{
    height: 55px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }

  .nav-right{
    padding-right: 0;
    height: 100%;
    
    /* background-color: blue; */
    font-size: 1px;
    gap: 7px;
   
  }
  .nav-right>a{
    font-size: 1rem;
  }
  .login-btn {
    padding: 8px 20px;
   font-size: 10px;
    border-radius: 8px;
    /* background-color: rgb(236, 175, 42); */
    
   
  }
  /* .login-btn::after {
    width: 150px;
    height: 150px;
  } */

}
@media (max-width: 815px) {
  .nav-mid{
    display: none;
  }
}

@media (max-width: 770px) {
  .nav-right{
    width: fit-content;
  }
  .nav-mid{
    display: none;
  }
  .nav-right>a{
    font-size: 1rem;
  }
}
@media (max-width: 390px) {
  .nav-right{
    width: fit-content;
    gap: 5px;
  }
  .hide2{
    display: none;
  }
  
}
.profile-btn, .logout-btn {
  padding: 10px 30px;
  border-radius: 8px;
  color: white;
  border: none;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  font-size: 14px;
}
.profile-btn{
background: rgba(0, 153, 255, 0.85); /* Brighter blue with slight transparency */
border: 1px solid rgba(0, 153, 255, 0.7);
color: white;
}
.logout-btn{
  background: rgba(255, 50, 50, 0.85); /* Vibrant red with slight transparency */
  border: 1px solid rgba(255, 50, 50, 0.7);
  color: white;
}

.profile-btn:active, .logout-btn:active {
  transform: scale(0.95);
}


.username {
  font-size: 15px;
  margin-right: 10px;
  color: white;
  font-weight: bold;
}
.userlogo{
  display: none;
}
@media (max-width: 1040px) { /* Tablet */
  .username{
    display: none;
  }
  .profile-btn, .logout-btn {
    padding: 8px 20px;
 font-size: 10px;
  border-radius: 8px;
  }
  .nav-right>a{
    font-size: 1rem;
  }
}

@media (max-width: 460px) {
  .hide {
      display: none;
  }
  .userlogo{
    display: inline;
  }
}


.custom-button {
  width: 15vw;
  margin-left: 3vw;
  border: none;
  background-color: #c0dd18f3;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

  flex-shrink: 0;
  color: #ffffff;

  border-radius: 10px;
  padding: 15px 20px;
  text-decoration: none;
  display: inline-block;
  transition: transform 1s ease;
  text-align: center;
  font-size: 22px;
  margin-top: 5vh;
  cursor: pointer;


}

.custom-button:hover {
  background-color: #a8c502;
  transform: translateY(-5px) scale(1.03);
}


/* year page */
#year-page {

  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  text-align: center;
  gap: 10px;
  padding: 80px 20px;
  /* position: relative; */
  /* background-color: #ca6e6e;  */
}

#choose-year {

  font-size: 4.5em;
  margin-bottom: 2vh;
  color: white;
  font-family: "Charm", cursive;
font-weight: 900;
font-style: normal;
background: linear-gradient(to bottom, #f7ee9e, #FFD54F, #FFA000, #FF6F00);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; 
}


#year-container {
  width: 100%;
  /* height: 50%; */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-left: 80px;
  padding-right: 80px;

  /* position: relative; */
  /* background-color: #ffffff; */
  color: white;
}

#box {
  width: 440px;
  height: 220px; /* Set a height that works well on smaller screens */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.8rem;
  position: relative;
  /* color: #7ab619; */
  /* color: white; */
  border-radius: 20px;
  font-weight: 800;
  display: flex;
  /* backdrop-filter: contrast(1.2) brightness(1.1); */
  /* flex-direction: column; */
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: cover;
  
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);   
   box-shadow: 7px 7px 8px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-wrap: wrap;
  padding: 10px;
}

/* #box>h1{
background-blend-mode: darken;
color: transparent;
} */
#box:active {
  scale: 0.95;
}

#box:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

#box img {
  height: 60%;
  border-radius: 20px;
  margin-bottom: 20px;
}

.box1 {
  /* background-image: url(https://img.freepik.com/free-photo/school-classroom-digital-art-style-education-day_23-2151164371.jpg?t=st=1725012728~exp=1725016328~hmac=c57e918ffbd0de1eed452088d9cbcb57bf130f93d7aadc66e760afcedb639335&w=740); */
  /* background-image: url("https://i.pinimg.com/736x/3b/ad/46/3bad46d0d9a35c86c14cda8fbc4710c2.jpg"); */
  /* background-image: url("https://i.pinimg.com/736x/0e/b7/ca/0eb7cafc92d81777fb781044ad47344f.jpg"); */
  /* background: linear-gradient(135deg, #6A040F, #A52A2A, #D3A625); */
  /* background-image: url("https://i.pinimg.com/736x/c3/f5/91/c3f5912f96740f12c903e214e7c21a3e.jpg"); */
  /* background-image: url("https://i.pinimg.com/736x/df/8e/95/df8e95276e0b793f08ed1dc27719a2cf.jpg"); */
  background-image: url("https://i.pinimg.com/736x/04/fd/2f/04fd2f4681b26cb6b53bf2cb0132a9c2.jpg");
}

.box2 {

  background-image: url(https://static.vecteezy.com/system/resources/previews/002/099/443/non_2x/programming-code-coding-or-hacker-background-programming-code-icon-made-with-binary-code-digital-binary-data-and-streaming-digital-code-vector.jpg);
  /* background-image: url("https://i.pinimg.com/736x/ed/87/ee/ed87eeae2cd0972c12742b4ab9c58299.jpg"); */
  /* background-image: url("https://i.pinimg.com/736x/b8/8d/a9/b88da9c6d3323b08a02e908f2b965656.jpg"); */
  /* background-position: 0% 90%; */
  /* background-image: url("https://i.pinimg.com/736x/0e/05/ef/0e05ef56bca745513c12cf48d89b2e9f.jpg"); */
}

.box3 {
/* background-image: url("https://i.pinimg.com/736x/e3/da/0a/e3da0a3209b0797b8fc1fb2e90a2155a.jpg"); */
  /* background-image: url(https://img.freepik.com/premium-photo/lowpoly-illustration-man-working-his-desk-using-laptop-desktop-computer_14117-980883.jpg?w=900); */
  background-image: url("https://img.freepik.com/free-photo/close-up-image-programer-working-his-desk-office_1098-18707.jpg?t=st=1742411031~exp=1742414631~hmac=9d2afbce0d12fbf2439b080f5b2f34097724223f1defce728b32d64355687b80&w=996");
  background-position: 0% 90%;
  background-size: contain;
  /* background-image: url("https://i.pinimg.com/736x/06/8a/f7/068af7f79757ebb388916eaa3941fed5.jpg"); */
}

.box4 {
  /* background-image: url(https://img.freepik.com/free-vector/watercolor-end-school-background_52683-85232.jpg?t=st=1725012903~exp=1725016503~hmac=01cafe86feeea4755629ec81dd5c8fe0554297019d7eddb0f6a9489f5c80ec52&w=740); */
  /* background-image: url("https://i.pinimg.com/736x/1f/b1/bf/1fb1bf663a0d778cc3e14667d119ced6.jpg"); */
  background-image: url("https://i.pinimg.com/736x/3c/20/26/3c20269af487635034703f109ba22597.jpg");
  /* background-image: url("https://i.pinimg.com/736x/30/0f/d1/300fd1726e3059c45b60dee2b4210e22.jpg"); */
  background-position: 0% 90%;
}


/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  #choose-year {
      font-size: 2.5em;
  }

  #year-page {
      padding: 100px 20px;
  }

  #year-container {
      width: 100%;
      flex-direction: column;
      align-items: center;
      padding: 0;
  }

  #box {
      width: 400px;
      height: 150px;
      margin-bottom: 20px;
  }

  .box1, .box2, .box3, .box4 {
      background-size: cover;
      background-position: center;
  }
}

@media (max-width: 480px) {
  #choose-year {
      font-size: 2em;
      margin-bottom: 20px;
  }

  #year-page {
      padding: 100px 20px;
  }

  #year-container {
      flex-direction: column;
      gap: 15px;
  }

  #box {
      width: 100%;
      height: 150px; /* Smaller height for mobile screens */
      font-size: 1em;
  }

  .box1, .box2, .box3, .box4 {
      background-size: cover;
      background-position: center;
  }

  
}






/*branch year2  */
#branch-page-container-year2 {
  width: 100%;
  position: relative;
  display: none;
}

/*branch year3  */
#branch-page-container-year3 {
  width: 100%;
  position: relative;
  display: none;
}

/*branch year4  */
#branch-page-container-year4 {
  width: 100%;
  position: relative;
  display: none;
}


/* For the branch year page */
#branch-page {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* background-color: white; */
  color: white;
  flex-shrink: none;
  gap: 30px;
  padding: 100px 20px;
  position: relative;
}

#choose-branch {
  /* position: absolute;
  top: 5%; */
  font-size: 3em;
  font-weight: bold;
  /* color: #333; */
  font-family: "Charm", cursive;
  font-weight: 900;
  font-style: normal;
  background: linear-gradient(to bottom, #f7ee9e, #FFD54F, #FFA000, #FF6F00);
  background-clip: text;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  text-align: center;
  width: 100%;
  margin-bottom: 40px;
  /* z-index: 99; */
}

.branch-box {
  width: 20%;
  height: 120px;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  border-radius: 20px;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: cover;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  box-shadow: 7px 7px 8px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
 
}

.branch-box:active {
  scale: 0.95;
}

.branch-box:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.branch-box h1 {
  font-size: 1.5em;
  text-align: center;
  margin: 0;
}

.branch-box.CSE-3 { background-image: url('https://img.freepik.com/free-photo/school-classroom-digital-art-style-education-day_23-2151164371.jpg'); }
.branch-box.AIML-3 { background-image: url('https://img.freepik.com/free-photo/school-classroom-digital-art-style-education-day_23-2151164371.jpg'); }
.branch-box.CYBER-3 { background-image: url('https://img.freepik.com/free-photo/school-classroom-digital-art-style-education-day_23-2151164371.jpg'); }
.branch-box.AIDS-3 { background-image: url('https://img.freepik.com/free-photo/school-classroom-digital-art-style-education-day_23-2151164371.jpg'); }
.branch-box.DS-3 { background-image: url('https://img.freepik.com/free-photo/school-classroom-digital-art-style-education-day_23-2151164371.jpg'); }
.branch-box.IOT-3 { background-image: url('https://img.freepik.com/free-photo/school-classroom-digital-art-style-education-day_23-2151164371.jpg'); }
.branch-box.ECE-3 { background-image: url('https://img.freepik.com/free-photo/school-classroom-digital-art-style-education-day_23-2151164371.jpg'); }
.branch-box.EE-3 { background-image: url('https://img.freepik.com/free-photo/school-classroom-digital-art-style-education-day_23-2151164371.jpg'); }
.branch-box.MECHANICAL-3 { background-image: url('https://img.freepik.com/free-photo/school-classroom-digital-art-style-education-day_23-2151164371.jpg'); }
.branch-box.CIVIL-3 { background-image: url('https://img.freepik.com/free-photo/school-classroom-digital-art-style-education-day_23-2151164371.jpg'); }

/* Media Queries for Responsiveness */

/* For screens smaller than 1200px (desktops or large tablets) */
@media (max-width: 1200px) {
  #choose-branch {
      font-size: 2.5em;
      top: 3%;
  }

  .branch-box {
      width: 30%;
      height: 18vh;
  }
}

/* For screens smaller than 768px (tablets) */
@media (max-width: 768px) {
  #choose-branch {
      font-size: 2.2em;
      top: 5%;
  }

  .branch-box {
      width: 45%;
      height: 15vh;
  }
}

/* For screens smaller than 480px (mobile phones) */
@media (max-width: 480px) {
  #choose-branch {
      font-size: 2em;
      top: 5%;
  }

  .branch-box {
      width: 100%;
      height: 13vh;
  }

  .branch-box h1 {
      font-size: 1.2em;
  }
}


#CSE {
  background-image: url("https://i.pinimg.com/564x/49/dc/60/49dc6074bd5e3df9082f907570955af7.jpg");
}

#AIML {
  background-image: url("https://i.pinimg.com/564x/da/d1/42/dad14260fd848b92353836b7101f88bd.jpg");

}

#CYBER {
  background-image: url("https://i.pinimg.com/564x/52/e5/63/52e5633257e4a20d66d341a3191182f4.jpg");

}

#AIDS {
  background-image: url("https://i.pinimg.com/736x/5a/70/49/5a704961f5f150e23580da94bd240b4f.jpg");
}

#DS {
  background-image: url("https://i.pinimg.com/564x/82/ca/89/82ca89cbb1536365d658abf414a098f4.jpg");

}

#IOT {
  background-image: url("https://i.pinimg.com/736x/13/9f/e6/139fe6f02e4ba6ac3ef3e2bab222d71c.jpg");

}

#ECE {
  background-image: url("https://i.pinimg.com/564x/0f/c8/b6/0fc8b665ec509d9c6688f3be54007192.jpg");

}

#EE {
  background-image: url("https://i.pinimg.com/564x/2c/bd/33/2cbd33b606344b4839fee5156cb50632.jpg");

}

#MECHANICAL {
  background-image: url("https://i.pinimg.com/564x/f4/01/42/f4014292b48006bf2419f14923b40fca.jpg");

}

#CIVIL {
  background-image: url("https://i.pinimg.com/564x/c8/32/be/c832beea0d9c6f4c696556aef686fcb6.jpg");
}

/* branch pages till here */