.nav{
     display: flex;
  justify-content: space-between; /* THIS pushes left & right */
  align-items: center;
  padding: 16px 32px;
    background: rgba(10, 10, 15, 0.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  height:30px;
  transition: 0.8s;
  
}

.nav:hover{
    background: rgba(255, 255, 255, 0.08);
}

.logo{
    width: 62px;
    border-radius: 20px;
    filter: drop-shadow(0 0 2px #7c5cff);
}

.navbar ul li{
    display: inline-flex;
    margin-left: 50px;
    font-size: larger;
    transition: 1s; 
    
}

.navbar a{
    text-decoration: none;
    color: #EAEAF0;
    transition: 0.7s;
    

}

.navbar ul li a:hover{
    filter: drop-shadow(0 0 2px #6c5bae);
     color: #7c5cff;
     transform: translateY(2px);
      
filter: drop-shadow(0 0 10px rgb(169, 105, 188));   
}

/* navbar ends here*/


.lol{
       background: radial-gradient(
    circle at center,
    rgba(127, 23, 159, 0.15),
    transparent 60%
  );
   background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    color: white;
    margin: 0;
    font-family: Arial, sans-serif;

  
}


.sec{
    display: grid;
    place-items: center;
    background: #000;
    background: #000;
    color: white;
    border-bottom: 2px solid rgba(247, 246, 244, 0.489);
    padding-bottom: 185px;
    margin-top: 50px;
    
}

.sec span{
    color: #6c5bae;
    font-weight: bold;
}

.sec h2{
    font: bolder;
    font-size: 55px;
    display: inline-flex;
    justify-content: center;
    font-family: sans-serif;
    
}

.sec p{
    font-size: 40px;
    color: rgba(240, 248, 255, 0.548);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.sec button{
    width: 170px;
    height: 70px;
    border-radius: 10px;
    border: none;
    background-color: #7c5cff;
    transition: 0.5s;
    color: white;
    margin-top: 100px;
}

.sec button:hover{
    filter: drop-shadow(0 0 10px #7c5cff);
    cursor: pointer;
    transform: translateY(5px);
}


.col{
    align-items: center;
    text-align: center;
    justify-content: center;
    display: inline-flex;
    gap: 10%;
    margin-left: 160px;
    margin-top: 50px;
}

.card{
    border: 1px solid white;
    width: 300px;
    height: 270px;
    margin-top: 40px;
    border-radius: 10px;
    color: white;
    margin: auto;
    filter: drop-shadow(0 0 10px #7c5cff);
        filter: drop-shadow(0 0 5px  #7c5cff);
    box-shadow: 
        0 0 15px rgba(124, 92, 255, 0.5),
        0 0 40px rgba(124, 92, 255, 0.2);
       transition: 0.9s;
}

.card:hover{
      background: radial-gradient(
    circle at center,
    rgba(124, 92, 255, 0.15),
    transparent 50%

  );
}
.borderbot{
    border-bottom: #eaeaf070 solid 2px;
    padding-bottom: 40px;
}

.head{
    align-items: center;
    text-align: center;
    color: white;
    font-size: 40px;
    filter: drop-shadow(0 0 10px rgb(107, 70, 139));
    
}


.ex{
    border: 1px solid white;
    width: 250px;
    height: 260px;
    margin-top: 50px;
    border-radius: 10px;
    color: white;
    margin: auto;
    display: inline-flex;
    margin-left: 125px;
    justify-content: center;
    font-size: x-large;
    transition: 0.5s;
}

.ex1{
     background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("his.png");
     background-size: cover;
}

.ex2{
     background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("civics.png");
    background-size: cover;
}

.ex3{
     background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("detective.png");
     background-size: cover;
}

.ex:hover{
    transform: translateY(10px);
    filter: drop-shadow(0 0 10px #7c5cff);
    cursor: pointer;

}

.sec2{
    border-bottom: 2px solid rgba(255, 255, 255, 0.502);
    padding-bottom: 40px;
}



.sec::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(141, 75, 161, 0.263), transparent 70%);
    width: 800px;
    height: 400px;
    filter: blur(60px);
    z-index: 0;
}

.sec3 {
    padding-bottom: 40px;
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(3, 250px); /* 3 cards per row */
    gap: 100px;              /* spacing between cards */
    justify-content: center;
    text-align: center;
}


.re {
    border: 1px solid white;
    width: 250px;
    height: 270px;
    border-radius: 10px;
    color: white;
    font-size: large;
    display: flex;
    flex-direction: column;
    justify-content: center; /* centers text inside */
    padding: 10px;
    transition: 0.5s;
}

.re:hover{
    transform: translateY(5px);
    filter: drop-shadow(0 0 10px  #7c5cff);
    cursor: pointer;
}

.re1{
     background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("french.png");
    background-size: cover;
}

.re2{
     background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("the\ cover\ for\ russia.png");
    background-size: cover;
}

.re3{
     background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("haunted.png");
    background-size: cover;
}

.re4{
     background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("civics1.png");
    background-size: cover;
}

.re5{
     background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("Nazi\ germany.png");
    background-size: cover;
}

.re6{
     background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("haunt.png");
    background-size: cover;
}



.re h2{
    font-size: 30px;
}


.but button{
     width: 170px;
    height: 70px;
    border-radius: 10px;
    border: none;
    background-color: #7c5cff;
    transition: 0.5s;
    color: white;
}

.but{
    align-items: center;
    text-align: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.502);
    padding-bottom: 40px;
    transition: 0.5s;
}

button:hover{
    transform: translateY(5px);
    filter: drop-shadow(0 0 10px  #7c5cff);
}
button{
     cursor: pointer;
}




@media (max-width: 768px) {
    .sec3 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .sec3 {
        grid-template-columns: 1fr;
    }
}

a{
    text-decoration: none;
}

.heading{
    color: white;
}

.heading h1{
    font-size: 100px;
    filter: drop-shadow(0 0 10px violet);
}

.heading p{
    font-size: 25px;
}