@import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap');


*{
       margin: 0;
       padding: 0;
       box-sizing:border-box;
}
body , html {
    overflow-x: hidden;
}
nav{
    position:fixed;
    margin: 20px;
}






header {
       width: 100vw;
       height: 70vh;
       background-image: url('img/bg11.jpg');
       background-position: bottom;
       background-size: cover;
       display: flex;
       align-items: flex-end;
       justify-content: center;
       
       
}
.header-content {
       margin-bottom: 100px;
       color: whitesmoke;
       text-align: center;
      
}
.line {
       width: 150px;
       height: 4px;
       background: #fc036b;
       margin: 10px auto;
       border-radius: 5px;      
}
.header-content h1 {
       font-size: 10vmin;
       margin-top: 50px;
       margin-bottom: 10px;
       font-family: 'Prompt', sans-serif;
       
}

.header-content h2 {
       font-size: 7vmin;
       font-family: 'Prompt', sans-serif;
}
.header-content h3{
       font-size:5vmin ;
       margin-top: 50px;
       font-family: 'Prompt', sans-serif;
}
.logo {
       width: 100px;
       color: #fff;
       transition: transform .3s ease;
     }
     .logo:hover{
       transform:  scale(1.1);
     }

     .back {
       width: 70px;
       color: #fff;
       transition: transform .3s ease;
       
       
     }
     .back:hover{
       transform:  scale(1.1);
     }



.ctn {
       padding: 8px 15px;
       background: #fc036b;
       border-radius: 30px;
       color: whitesmoke;
       cursor: pointer;
}


/* Events */
section {
       width: 80%;
       margin: 80px auto;
       
       
}
.title {
       text-align: center;
       font-size: 4vmin;
       color: #484872;
       font-family: 'Prompt', sans-serif;
}
.row {
       display: flex;
       align-items: center;
       width: 100%;
       justify-content:  space-between;
       
       
}
.row .col {
       display: flex;
       flex-direction: column;
       align-items: center;
      
}
.row .col img{
       border-radius: 10%;
     }

.events .row{
       margin-top: 50px;
}
h4 {
       font-size: 3vmin;
       color: #484872;
       margin: 20px auto;
       font-family: 'Prompt', sans-serif;
       display: flex;
}
p {
       color: #7c7c7c;
       padding: 0px 40px    ;
       font-family: 'Prompt', sans-serif;
       
}
.events .ctn {
       margin-top: 30px;
}







.slider{
       position: relative;
       background: #000116;
       max-width: 100%;
       margin: 20px; 
       overflow: hidden;
       border-radius: 10px;
}
     .slider:hover {
       cursor: pointer;
       box-shadow: 10px 10px 10px #00000056;
}
     
     .slider .slide{
       position: absolute;
       width: 100%;
       height: 100%;
       clip-path: circle(0% at 0 50%);
     }
     
     .slider .slide.active{
       clip-path: circle(150% at 0 50%);
       transition: 2s;
     }
     
     .slider .slide img{
       position: absolute;
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
     
     .slider .slide .info{
       position: absolute;
       color: #222;
       background: rgba(255, 255, 255, 0.3);
       width: 75%;
       margin-top: 50px;
       margin-left: 50px;
       padding: 20px;
       border-radius: 5px;
       box-shadow: 0 5px 25px rgb(1 1 1 / 5%);
     }
     
     .slider .slide .info h2{
       font-size: 2em;
       font-weight: 800;
     }
     
     .slider .slide .info p{
       font-size: 1em;
       font-weight: 400;
     }
     .navigation1{
       height: 500px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       opacity: 0;
       transition: opacity 0.5s ease;
     }
     
     .slider:hover .navigation1{
       opacity: 1;
     }
     .prev-btn, .next-btn{
       z-index: 999;
       font-size: 2em;
       color: #222;
       background: rgba(255, 255, 255, 0.8);
       padding: 10px;
       cursor: pointer;
     }
     
     .prev-btn{
       border-top-right-radius: 3px;
       border-bottom-right-radius: 3px;
     }
     
     .next-btn{
       border-top-left-radius: 3px;
       border-bottom-left-radius: 3px;
     }
     
     .navigation-visibility{
       z-index: 999;
       display: flex;
       justify-content: center;
     }
     .navigation-visibility .slide-icon{
       z-index: 999;
       background: rgba(255, 255, 255, 0.5);
       width: 20px;
       height: 10px;
       transform: translateY(-50px);
       margin: 0 6px;
       border-radius: 2px;
       box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
     }
     
     .navigation-visibility .slide-icon.active{
       background: #4285F4;
     }


     

   



       





@media  (max-width:1060px){
       .logo {
              position: fixed;
              top: 30px;
              left: 30px;
              width: 80px;
       }
       .back {
              width: 50px;
       }
       .row {
              flex-direction: column; 
              align-items: center; 
       }
       .col img {
              border-radius: 10px;
              width: 350px;
              
       }
       
       .row .col h4 {
              font-size: 20px;
       }
       .header-content h1{
        font-size: 45px;
       }
       
       
      
      
      
}
@media (max-width: 1060px){
       .slider{
         width: 100%;
         margin-left:10px;
       }
     
       .slider .slide .info{
         position: relative;
         width: 80%;
         margin-left: auto;
         margin-right: auto;
       }
     }
     
     @media (max-width: 1060px){
       .slider .slide .info h2{
         font-size: 1.8em;
         line-height: 40px;
       }
     
       .slider .slide .info p{
         font-size: 0.9em;
       }
     }