* { box-sizing: border-box;}

body {
  width: 100%;
  display: grid;
  grid-template-columns: 25% 60% 15%;
  
  grid-template-rows: calc(.05 * 56.25vw) calc(.08 * 56.25vw) calc(.05 * 56.25vw) calc(.06 * 56.25vw) calc(.1 * 56.25vw) calc(.66 * 56.25vw);
  
  font-family: sans-serif;
}

.logo {
  grid-column: 1 / 2;
  grid-row: 1 / 6; 
  background-color: transparent;
  z-index: 8;
}

.login {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  background-color: #EDE8F3;    
}
.login button {
  background-color: #EDE8F3;
  border: none;
  font-size: 1.3vw;
  cursor: pointer;
} 
.login button img {
  width: 50%;
}

.form {
  position: fixed;
  top: 10%;
  right: 10%;
  display: none;
  z-index: 9;
  border: 5px solid purple;
  background-color: white;
  padding: 1rem;
}
.form .error {
  color: red;
}

.nav1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background-color: #EDE8F3;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
}
.nav1 a {
  color: black;
  font-size: 1.3vw;
  text-decoration: none;
  cursor: pointer;
}

.welcome {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  background-color: #EDE8F3;
  font-size: 2vw;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: right;
  align-items: center;   
}
  
.mission {
  grid-column: 1 / 4;
  grid-row: 3 / 4;
  background-color: #EDE8F3;    
  font-size: 1.3vw;
  color: #6F4BA3;    
  padding-right: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center; 
}

.marquee {
  grid-column: 1 / 4;
  grid-row: 4 / 5;
  --gap: 1rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  align-items: center;
  background-color: white;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}
.marquee .marquee_content{
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  font-size: 1.6vw;
  animation: marquee 15s infinite linear;
  list-style-type: none;
}
@keyframes marquee {
  from { 
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

.nav2 {
  grid-column: 1 / 4;
  grid-row: 5 / 6;
  background-color: #C0B0D7;
  padding-right: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}
.nav2 a {
  color: black;
  text-decoration: none;
  font-size: 1.3vw; 
}
.dropdown-content {
  position: absolute;
  display: none;
  flex-direction: column;
  border: 1px solid black;
  background-color: #EDE8F3;
  z-index: 9;
  gap: 1rem;
  padding: 1rem;
}
.dropdown:hover .dropdown-content { display: flex; }
.dropdown-content a:hover { background-color: #C0B0D7; }

.main {
  grid-column: 1 / 3;
  grid-row: 6 / 8;
  display: grid;
  grid-template-columns: 28% 72%;
  grid-template-rows: 27% 8% 65%;
}
.main .message {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  font-size: 1.2vw;
  padding-right: 2rem;
  padding-left: 2rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.main .vision {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  color: #6F4BA3;
  font-size: 1.3vw;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center; 
}
.main .schools {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  justify-items: center;
  align-items: center;
}
.main .schools a {
  height: 45%;
  cursor: pointer;
}
.main .schools img {
  width: 75%;
}

.contact {
  grid-column: 3 / 4 ;
  grid-row: 6 / 8; 
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.2vw;
  background-color: #C0B0D7;	
}
.contact img {
  display: block;
  width: 80%;
  height: auto;
}
.contact h3 {
  display: block;
}
.contact address {
  padding-bottom: 10px;
  font-style: normal;
}