* {
   box-sizing: border-box; 
scroll-behavior: smooth;
font-family:serif;

 } h1,h2,h3,h4,h5,h6{
   font-family: verdana;
  }
 
 body {
   max-width: 100vw; 
   max-height: 100vh; 
   overflow-x: hidden; 
  
 }
 /*  header section */ 

.navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: rgba(4, 4, 78,0.9);
   padding: 10px 20px;
   position: sticky;
box-shadow: 0px 3px 3px #000;
   width: 100%;
   height: 100px;
   top: 0;
   z-index: 1000;


}

.toggler-btn{
   border: none;
}
#header-anchor{
   margin-right: 50px;
}
.navbar-brand {
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
 height: 80px;

}

.logo {
   height: 80px;
      margin-top: 0px;
   width: 100px;
border-radius: 50%;

}
#logoforsm{
   border-radius: 50%;
   display: none;
       }
#scroll{
   width: 100%;
   height: 300px;
   margin-top: 300px;

}
.navbar-menu {
   list-style: none;
   display: flex;

margin-top: 10px;
}

.navbar-menu li {
   margin-left: 50px;
}

.navbar-menu a {
   color: white;
   text-decoration: none;
  


}


.navbar-toggler {
   display: none;
   font-size: 30px;
   color: white;
   cursor: pointer;
}




@media(max-width:1120px){
  
   
    .navbar-menu {
       list-style: none;
       display: flex;
  width: 80%;
    margin-top: 10px;
    }
    
    .navbar-menu li {
       margin-left: 50px;
    }
    #scroll{ height: 700px;}
    
   
}

@media(max-width:1050px){
  
    #scroll{
       height: 750px;
    }
 
    
   .navbar-menu {
      list-style: none;
      display: flex;
 width: 80%;
   margin-top: 10px;
   }
   
   .navbar-menu li {
      margin-left: 40px;
   }}
   @media(max-width:955px){
  
    
 
    
       .navbar-menu {
          list-style: none;
          display: flex;
     width: 80%;
       margin-top: 10px;
       }
       
       .navbar-menu li {
          margin-left: 30px;
       }}

       @media(max-width:890px){
  
    
 
    
           .navbar-menu {
              list-style: none;
              display: flex;
         width: 70%;
           margin-top: 10px;
           }
           
           .navbar-menu li {
              margin-left: 10px;
           }}

           @media(max-width:783px)and(min-width:751px){
  
    
 
    
               .navbar-menu {
                  list-style: none;
                  display: flex;
             width: 80%;
               margin-top: 10px;
               }
               
               .navbar-menu li {
                  margin-left: 10px;
               }}
               @media (max-width: 750px) {
                  .navbar-menu {
                     display: none;
                     flex-direction: column;
                     position: absolute;
                     top: 80px;
                     left: 0;
                     right: 0;
                     background-color: rgba(4, 4, 78);
                max-height: 0;
                     overflow: hidden;
                     gap: 20px;
                    width: 100%;
                  justify-content: center;
             
             
               
                  }
                  #lauretes-link{
          
          width:55%;
          
          
                  }
               .navbar-menu li{
                  width:50%;
                  display: flex;
                  justify-content: end;
          
              
               }
                  .navbar-menu.active {
                     display: flex;
                     max-height: 500px;
               
                  }
               
                  .navbar-toggler {
                     display: block;
                     color: white;
                  }
                .navbar-menu a {
                     color: white;
                     text-decoration: none;
                    
                     padding: 10px;
                
                  }
               #header-anchor{
          margin-right: 0px;
               }
               .navbar-brand{
                  width:55%;
              display: flex;
              justify-content: end;
          
          
               }
               .logo{
              display: none;
               }
               #logoforsm{
                  display: block;
                  width: 70px;
                  height: 70px;
                  margin-bottom: 50px;
               }
                  .navbar-menu a:hover {
                     color: white;
                  
               
                  }
              
}
@media (max-width:600px) {
   #scroll{
      margin-top: 1000px;
   }
}

@media(max-width:300px){
#scroll{margin-top:1150px} 

}
#title,#faq-heading,#history-title,#notablelauretes-heading{
   font-size: clamp(20px, 5vw, 70px); }
.description,.photo-heading,.streams,.clickhere{
   font-size: clamp(12px, 5vw, 30px); 
}
.history-description,.coming-up-para{ font-size: clamp(12px, 5vw, 20px); }
.section-title,.footer-title,.form-title{
   font-size: clamp(18px, 5vw, 55px);
}
.btn h4, .btn-fixed h4{
   font-size: clamp(10px, 5vw, 20px);
}
#arrow-icon{ width: clamp(10px, 5vw, 20px);
   height: clamp(10px, 5vw, 20px);
}
.video2-text{
   font-size: clamp(5px, 5vw, 20px);
}
.section-description,.list,.form-quiz,.intro,.history-categories,.footer-line{
   font-size: clamp(10px, 5vw, 17px);
}

.nomination-links,.nomination-intro{
   font-size: clamp(10px, 5vw, 18px);
}
.categories,.sub-title{
   font-size: clamp(12px, 5vw, 20px);
   font-weight: bolder;
}

.laurete-main,.drop-down{

font-size: clamp(12px, 5vw, 15px);
}
.facts-para{ font-size: clamp(12px, 2vw, 15px);}
.faqs-q{
font-size: clamp(12px, 5vw, 19px);
}
.faqs-p{
font-size: clamp(11px, 5vw, 15px);
}

.history-sec-main{
font-size: clamp(18px, 5vw, 30px);
}
.navbar-menu li a
{   font-size: clamp(8px, 5vw, 15px);

}

/* hero-section */
#hero-section {
   position: relative;
   width: 100%;
   height: 100vh;
   margin-top: 50px;
 

}
  


#video1,#video2{
   position: absolute;
 
   object-fit: cover;
   z-index: -1;
}
#video1{
   width: 100%;
   height: 100%;
   margin-top: 50px;
   
}
#hero-section:before {
   position: absolute;
   content: "";
   width: 100%;
   height: 100%;
   background-color: rgba(5, 5, 128, 0.7);
   z-index: 0;
   margin-top: 50px;
   
}


#divtext {
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
   width: 90%;
  
}

#title {

   text-transform: uppercase;
   font-weight: bold;
   word-spacing: 2px;
   line-height: 1.2;
   -webkit-animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
   animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.description,.history-description {
  
   -webkit-animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
   animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

#btn {
   background-color: #a465ed;
   color: white;
   border-radius: 40px;
   border: none;
   font-family: Arial, Helvetica, sans-serif;

   
   transition: background-color 0.5s;
   transition: color 0.5s;
   -webkit-animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
   animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

   
}

#btn:hover {
   background-color: white;
   color: #a465ed;
}


#nav-btns1,#nav-btns2,#nav-btns3,#nav-btns4,#nav-btns5,#nav-btns6,#nav-btns7{
   padding: 0.3vw;
   border-radius: 50%;
   border: 2px white solid;
   background-color: transparent;
   transition: background-color 0.5s;
}

#nav-btns1:hover{
   background-color: white;
}
#nav-btns2:hover{
   background-color: white;
}
#nav-btns3:hover{
   background-color: white;
}
#nav-btns4:hover{
   background-color: white;
}
#nav-btns5:hover{
   background-color: white;
}
#nav-btns6:hover{
   background-color: white;
}
#nav-btns7:hover{
   background-color: white;
}


#nav-btns-con {
   z-index: 2;
   margin-top: 100px;
   max-width: 100%;
}

/* ----------------------------------------------
* Generated by Animista on 2024-11-22 23:7:25
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation scale-up-hor-center
* ----------------------------------------
*/
@-webkit-keyframes scale-up-hor-center {
   0% {
     -webkit-transform: scaleX(0.4);
             transform: scaleX(0.4);
   }
   100% {
     -webkit-transform: scaleX(1);
             transform: scaleX(1);
   }
 }
 @keyframes scale-up-hor-center {
   0% {
     -webkit-transform: scaleX(0.4);
             transform: scaleX(0.4);
   }
   100% {
     -webkit-transform: scaleX(1);
             transform: scaleX(1);
   }
 }

 #fixed-btn1{
   border-radius: 20px;
   transition: background-color 0.5s;
   background-color: #a465ed;
   color: white;
   margin-left: 0px;
  justify-content: sp;
}

#fixed-btn2{
   border-radius: 50%;
   background-color: #a465ed;
   transition: font-size 0.5s;
   

}
 #arrow-icon{
   transition: transform 0.5s;
}
#arrow-icon:hover{
   transform: rotate(0.5turn);
}
#fixed-btn1:hover {
   background-color: white;
   color: #a465ed;
}
#fixed-btn2:hover {

   font-size: 1.7vw;
}

     .sec5 {
     
    
      
        color: #333;
        background-color: #6714c515; 

     
     }
     
     .a2 {
        font-size: clamp(19px, 5vw, 5px);
        list-style: none;
        text-decoration: none;
     
     }
     
     .heading {
     color: #3c057a;
        font-size: clamp(20px, 5px, 11px);
     }
     .photo-heading{
      
        color: #03047d;
     }
     .streams{
      
        color: #3c057a;
     }
     .a2 {
        color: #3c057a;
        font-size: clamp(12px,5vw,20px);
     }
     
     .a2:hover {
        color: #3c057a;
     }
     
     .a3 {
        font-size: clamp(12px,5vw,20px);
        color: #03047d;
     }
     
     .a3:hover {
     
        color: #03047d;
     }
     
     i {
        font-size: clamp(28px, 5px, 5px);
     }
     
     #img1 {
     
        width: 600px;
        height: 600px;
        margin-top: 15px;
        border-radius: 5px;
        transition: transform 0.2s;
        border: 5px  black solid
     
     
     
     }
     .logo {
  display: block;
  margin-bottom: 20px;
  animation: logo 2s ease forwards;
}

@keyframes logo {
  0% {
    transform: translateX(0);
  }
  100% {
    transform:  translateX(70px);
  }
}

   
     #winners-img{
 width: 100%;
 height: 600px;
 border: 5px  black solid;
 border-radius: 5px;
 transition: transform 0.2s;
     }
     
     #img1:hover {
     
        transform: scale(1.05);
     }
     #winners-img:hover {
     
        transform: scale(1.05);
     }
     
     p {
        font-size: clamp(18px, 5px, 5px);
     }
     
     h6 {
        font-size: clamp(29px, 5px, 5px);
     }
     
     img {
     
        width: clamp(300px, 10px, 300px);
        height: clamp(200px, 5px, 200px);
     
        border-radius: 5px;
     
     }
     
     .img2 {
        border: 5px  black solid;
        transition: transform 0.2s;
     
     }
     
    
     
     .img2:hover {
     
        transform: scale(1.05);
     }
     
     video {
     
    
        border-radius: 2px;
     }
     
     h6{
     
        top: clamp(140px,5px,180px);
        position: absolute;
        margin-left: 20px;
      
        
        color: white;
     }
     .h6{
        top: clamp(150px,5px,180px);
        position: absolute;
        margin-left: 20px;
      
        
        color: white;
     }
     .images{
              width: 100%;
              height: 300px;
              border-radius: 2px;
              border: 1px black solid;
     }
     h1{
        color: #a46fed;
     }
    
     .dropdown{
     
        display: none;
     }
     img{
        margin-top: 40px;
        width: 100%;
        height: 300px;
     }
     .facts-para{ font-size: clamp(12px, 2vw, 15px);}
     .facts{
        border: 1px solid  rgb(5, 5, 128);
        margin-top: 5px;
        border-radius: 20px;
        background-color: white;
        transition: transform 0.5s; 
        list-style: none;
    
       
        padding: 15px;
        margin-bottom: 10px;
        cursor: pointer;
    }
    .facts:hover{
        transform: scale(1.05); 
    
    }
    .form-title{
        color:  rgb(5, 5, 128);
        
     font-weight: bold;
     }
     @media(max-width:1000px){
     #fact-style{

        margin-left: 200px;
     }
     .facts-para{ font-size: clamp(12px, 2vw, 15px);}
     .facts{
        border: 1px solid  rgb(5, 5, 128) ;
        margin-top: 5px;
        border-radius: 20px;
        background-color: white;
        transition: transform 0.5s; 
        list-style: none;
    
       
        padding: 15px;
        margin-bottom: 10px;
        cursor: pointer;
    }
    .facts:hover{
        transform: scale(1.05); 
    
    }
    .form-title{
        color:  rgb(5, 5, 128);
        
     font-weight: bold;
     }

    }
    @media(max-width:750px){
        #fact-style{
   
           margin-left: 100px;
        }
        .facts-para{ font-size: clamp(12px, 2vw, 15px);}
        .facts{
           border: 1px solid  rgb(5, 5, 128) ;
           margin-top: 5px;
           border-radius: 20px;
           background-color: white;
           transition: transform 0.5s; 
           list-style: none;
       
           padding: 15px;
           margin-bottom: 10px;
           cursor: pointer;
       }
       .facts:hover{
           transform: scale(1.05); 
       
       }
       .form-title{
           color:  rgb(5, 5, 128);
           
        font-weight: bold;
        }
   
       }

       @media (max-width: 750px) {
         .navbar-menu {
            display: none;
            flex-direction: column;
            position: absolute;
            top: 80px;
            left: 0;
            right: 0;
            background-color: rgba(4, 4, 78);
       max-height: 0;
            overflow: hidden;
            gap: 20px;
           width: 100%;
         justify-content: center;
    
    
      
         }
         #lauretes-link{
 
 width:55%;
 
 
         }
      .navbar-menu li{
         width:50%;
         display: flex;
         justify-content: end;
 
     
      }
         .navbar-menu.active {
            display: flex;
            max-height: 500px;
      
         }
      
         .navbar-toggler {
            display: block;
            color: white;
         }
       .navbar-menu a {
            color: white;
            text-decoration: none;
           
            padding: 10px;
       
         }
      #header-anchor{
 margin-right: 0px;
      }
      .navbar-brand{
         width:55%;
     display: flex;
     justify-content: end;
 
 
      }
      .logo{
     display: none;
      }
      #logoforsm{
         display: block;
         width: 70px;
         height: 70px;
         margin-bottom: 50px;
      }
         .navbar-menu a:hover {
            color: white;
         
      
         }
     
    
    img {
     
        width: clamp(300px, 10px, 300px);
        height: clamp(200px, 5px, 200px);
     
        border-radius: 5px;
     
     }
  
     #img1 {
  
        width: clamp(430px, 10px, 400px);
        height: clamp(500px, 5px, 400px);
        margin-top: 15px;
        border-radius: 5px;
        border: 30px #333 solid
     }
  
     h6{
        top: clamp(190px,5px,180px);
        position: absolute;
        margin-left: 20px;
      
        
        color: white;
     }
     .h6{
        top: clamp(140px,5px,180px);
        position: absolute;
        margin-left: 20px;
      
        
        color: white;
     }
     
     #chemistry{
  
        padding-top: 6px;
     }
  #img1{
    width: 300px;
    height: 300px;
    border: none;
  }
  .images{
     width: 300px;
     height: 300px;
  }
     } 
     @media(max-width:300px){
        .navbar-brand{
          width: 10%;
        }
        #lauretes-link{

            width:70%;
            
            
                    }
                    #img1{
                        width: 100px;
                        height: 100px;
                        border: none;
                      }
                      #winners-img{
                                width: 100px;
                            height: 100px;
                            border: none;
                       
                      }
                      .img2{
                        width: 100px;
                        height: 100px;
                        border: none;
                      }
                      .images{
                        width: 100px;
                        height: 100px;
                     }
                    #scroll{
                        height: 1200px;
                    }
     }
     @media (max-width:400px) {
        #scroll{
            height:1000px;
        }
        
     }
     @media (max-width:160px) {
        #scroll{
            height: 1500px;
        }
        
     }
    /* Footer section */
.nobel-footer {
   background: linear-gradient(255deg, #04094d, #7a4dbe); 
   color: white;
   padding: 40px 0;
   position: relative;
   z-index: -3;
}
#footer-logo{
   border-radius: 50%  ;
   height: 100px;
   width: 100px;
}



.footer-section {
   margin-bottom: 30px;
}


.footer-title {
   font-size: 22px;
   font-weight: bold;
   color:white;
   margin-bottom: 10px;
}


.footer-section ul {
   list-style: none;
   padding-left: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;

}

.footer-section ul li {
   margin-bottom: 8px;
}

.footer-section ul li a {
   color: #d3a8f6;
   text-decoration: none;
   font-size: 18px;
   transition: color 0.3s ease;
}

.footer-section ul li a:hover {
   color: #ffffff; 
}

.footer-section2 ul {
   list-style: none;
   padding-left: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   text-decoration: none;
   list-style-type:none;

}
.footer-section2 ul li {
   margin-bottom: 8px;
}

.footer-section2 ul li a {
   color: #d3a8f6;
   text-decoration: none;
   font-size: 18px;
   transition: color 0.3s ease;
}

.footer-section2 ul li a:hover {
   color: #ffffff; 
}


.social-icons li {
   display: inline-block;
   margin-right: 15px;
  
}

.social-icons li a {
   color: #d3a8f6;
   font-size: 24px;
   transition: color 0.3s ease;
  
}

.social-icons li a:hover {
   color: #ffffff;
}


.footer-text {
   color: #fff;
   font-size: 14px;
   margin-top: 20px;
}

@media (max-width: 768px) {
   .footer-section {
       text-align: center;
   }

   .social-icons li {
       margin-right: 10px;
   }
}