/*Fonts
Bricolage Grotesque
*/
:root{--heading:"Bricolage Grotesque",sans-serif;
      --default-font:"Bricolage Grotesque",serif;
    --default-button-colour:plum;
--secondary-color:rgb(224, 222, 222);
--first-color:black;}

body{font-family: var(--default-font);
}
 
/*navbar*/
.logo{
  max-height: 20%;
  
}

.nav-item {
  padding: 0 20px;
  font-weight: bold;
  font-family: var(--heading);
}


.active {
  color: purple !important;
}

.navbar-nav{margin-left: 30%;}


  /*Home*/    
.hero{
       background: var(--first-color);
       padding: 200px 20px;
}

.outer-heading{
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       text-align: center;
}

.hero h1{font-size: 65px;
         font-family: var(--heading);
         color: white;
}

.hero h2{color: rgb(253, 229, 245);
         margin-bottom: 60px;
         font-size: 50px;
}

.inner-heading{border: 0px solid white;
               height: 50px;
               line-height: 50px;
               text-transform: uppercase;
               overflow: hidden;
}

.inner-heading span{position: relative;
                     color: plum;
                     animation: animation 5s ease infinite;
}

@keyframes animation {
    0%,100%{top: 0;}
    20%{top: 0;}
    25%{top: -50px;}
    45%{top: -50px;}
    50%{top: -100px;}
    70%{top: -100px;}
    75%{top: -150px;}
    95%{top: -150px;}
    100%{top: -150px;}
}


.abt-btn{padding: 10px 30px;
         border-radius: 5px;
         text-align: center;
         background-color: var(--default-button-colour);
         color: aliceblue;
         text-decoration: none;
         
}

.rsm-btn{padding: 10px 39px;
    border-radius: 5px;
         text-align: center;
         background-color: var(--default-button-colour);
         color: aliceblue;
         text-decoration: none;
    
        
}

/*preview*/

.preview-container{
    padding: 40px 20px;
    background-color: var(--secondary-color);
}

.project-heading{font-family: var(--heading);
                    font-size: 30px;
                    font-weight: bold;
                    text-align: center;
}

.dvsn {margin-top: 5%;

}

.movie-plot{margin-top: 5%;
}


.project-description h2{font-family: var(--heading);
                        font-size: 35px;
                        font-weight: bold;
            
                    
}

.project-description p{font-family: serif;
                    font-size: 20x;
                    font-weight: lighter;
}





.learn-btn{
 padding: 10px 5px;
         border-radius: 5px;
         text-align: center;
         background-color: var(--default-button-colour);
         color: aliceblue;
         text-decoration: none;}

  /*about*/
  .about-section{padding: 20px 200px;
    background: var(--secondary-color);
}

.summary{margin-top: 100px;
margin-left: 70px;}

.summary h1{font-family: var(--heading);
font-size: 45px;}
.summary h2{font-family: var(--default-font);}
.summary p{font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 23px;}

.about-section img{margin-left: 200px;
margin-top: 50px;}

.project-btn{padding: 15px 30px;
         border-radius: 5px;
         text-align: center;
         background-color: var(--default-button-colour);
         color: aliceblue;
         text-decoration: none;}


  /*work*/
  .scroll-container {
            width: 100%;
            height: 300px; /* Set the height for the scrollbar */
            overflow-y: scroll; /* Enable vertical scrolling */
            white-space: nowrap; /* Prevent images from wrapping */
        }
        .scroll-container img {
            height: 100%; /* Make images responsive to the container's height */
            margin-right: 10px; /* Space between images */
        }

 .project-section{padding: 100px 20px;
background: var(--secondary-color);} 

.project-section img{max-width: 60%;}   

.project-section h1{font-family:  var(--heading);}

.project-section a{text-decoration: none;
color: var(--default-button-colour);}

.project-section a:hover{color: blueviolet;}

.certificate-section{padding: 50px 20px;
background: black;}


 /*resume*/  
 .resume{padding: 100px 10px;}
 
 /*contact*/
 .contact-section{padding: 200px 20px;
background: var(--secondary-color);}

.contact-section h1{font-family: var(--heading);
font-size: 60px;
font-weight: bold;}

.contact-section h3{font-family: var(--default-font);
font-size: 50px;}

.contact-section a{color: palevioletred;
    text-decoration: none;
font-size: 40px;}


/*footer*/
footer{padding: 15px;
background: #ebe9ea;}



footer .social-links a {
    margin: 0 20px;
    color: var(--branding-color);
    background: var(--secondary-color);
    padding: 10px 14px;
    font-size: 36px;
    border-radius: 50%;
    transition: all 150ms ease-in-out;
}

footer .social-links a:hover {
    color: purple;
    background: var(--branding-color);
}

footer .source-link {
    color: var(--branding-color);
    text-decoration: none;
}

footer .source-link:hover {
    color: #272142;
}

@media (max-width: 960px) {
  body {
    padding: 0;
    text-align: center;
  }
  h1 {
    font-size: 35px;
    line-height: 2;
  }
  h2 {
    font-size: 44px;
  }
  .hero {
    padding: 40px 20px;
  }

  .preview-container{text-align: center;
}

.preview-container h2{font-size: 20px;}

.project-description{padding: 10px 5px;}

.about-section{margin: 0px;
padding: 15px 10px;}


  .about-section img{margin-top: 20px;
width: 100%;
text-align: center;
margin-left: 50%;
margin-bottom: 20px;}

.email {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
}

footer{text-align: center;}
}