* {
   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%;
}
.button-rightside{

   display: flex;
   justify-content: end;
   align-items: end;
   flex-direction: column;
     gap: 3px;
    
}
/* ----------------------------------------------
* 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;
}

#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;
}

@media (max-width: 508px) {
   #form .col-8 {
       width: 100%; 
       padding: 0;
   }
   .grey-sec {
       width: 100%; 
       padding: 0 10px;
       display: block;  
   }
   .list {
       max-width: 100%; 
       word-wrap: break-word;
     
   }

  
}
@media (max-width: 992px) {
.form-small-sec{
   display: none;
}}

   
   /* history-section */
   #history-section{

         margin-top: 0px;
         margin-bottom: 0px;

   }
   #history-section,#gallery-section,#scroll,#notable-lauretes-section{
       background-color: #6714c515;  
    }
.history-sec-main{
   color: rgb(5, 5, 128);
       font-weight: bold;
       margin-top: 0px;
   }
   .nomination-links{
       color:  rgb(5, 5, 128);
   }
   .nomination-links-li{
       border: black solid 1px;
       font-weight: bold;
   }
  .nomination-links-li:hover{
   background-color: #3c057a;
   color: white;
   border-color: white;
   font-weight: normal;
   text-decoration: underline  white 1px;
  }
  #history-funfact {
   display:block; /* Keeps the element in the layout */
   opacity: 0;     /* Initial state is hidden */
   visibility: hidden; /* Prevents interaction */
   transition: opacity 3s ease, visibility 3s ease; /* Smooth transition */
   background-color: #04094d;
   position: relative;
   width: 400px;
   height: 250px;
   /* padding: 10px 10px 10px 10px; */
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
   top: 0px;
    bottom: 0px;
}


.form-title{
   color:  rgb(5, 5, 128);
   
font-weight: bold;
}
   #history-text{
       position: absolute;
      
       
   }
   .history-images{
       border: 2px black solid;
       transition: transform 0.3s;
       width: 100%;
       height: 500px;
   }
   .history-images:hover{
       transform: scale(1.1);    }
   #video2{
       width: 100%;
       height: 750px;
   }
   .history-description {
       color: rgb(5, 5, 128);
       margin-top: 100px;
       border-radius: 60px;
       padding: 40px;

   }
   #history-video:before {
      position: absolute;
      content: "";
      width: 100%;
      height: 750px;
      background-color: rgba(5, 5, 128, 0.7);
      z-index: 0;
      
  }  
  
 
  #history-row{
      margin-top: 200px;
  }

  
       

@media (max-width:500px) {
   #noble-medal{
       width: 200px;
       height: 300px;
   }
   #physics,#peace,#literature,#economics,#chemistry,#medicine{
       width: 260px;
       height: 300px;
   }
 
}
@media (max-width:300px) {
   #noble-medal{
       width: 100px;
       height: 100px;

   }
   #physics,#peace,#literature,#economics,#chemistry,#medicine{
       width: 100px;
       height: 200px;
   }
#history-funfact{

   height: 200px;

}}
@media (max-width:200px) {
   #physics,#peace,#literature,#economics,#chemistry,#medicine{
       width: 80px;
       height: 100px;

   }
   .history-description{
       padding: 0;
       border-radius: 0;
   }
   }
  
   
   @media (max-width:300px){
       #history-section{
           padding-top: 100px;
       }
       .history-experiment{
           width: 100%;
           height: 150px;
       }
   }

  
    
    .logo {
  display: block;
  margin-bottom: 20px;
  animation: logo 2s ease forwards;
}

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

    
    
    
    .sec5 {
    
   
     
       color: #333;
    
    
    }
    
    .a2 {
       font-size: clamp(19px, 5vw, 5px);
    
    }
    
    .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
    
    
    
    }
  
    #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;
    }
  
    
       a {
          display: flex;
          position: relative;
       }
       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;
   }
}