*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.side-container{
    display:flex;
}

.bond{
    color: goldenrod;
}

.sidebar{
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    width: 230px;
    border: 2px solid goldenrod;
}

@media (min-width: 300px) and (max-width: 400px){
    .sidebar{
        width: 200px;
        height: 50%;
    }
        }

#front-img{
    height: auto;
    width: 500px;
}

li{
    list-style: none;
}

a{
    color: goldenrod;
}

h2{
    color: goldenrod;
}


#footer1 {
    margin-top: 100px;
    background-color: rgb(236, 236, 243);
}

.foot-panel1 {
    background-color: #37475a;
    color: white;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
    margin-bottom: 20px;
}
@media (min-width: 150px) and (max-width: 730px){
    .foot-panel1{
        display: none;       
    }
 }

.foot-panel2 {
    margin-top: 50px;
    color: black;
    height: 400px;
    display: flex;
    justify-content: space-evenly;
}
@media (min-width: 150px) and (max-width: 730px){
    .foot-panel2{
        display: none;
    }
 }


.foot-panel3 {
    margin-top: 50px;
    color: black;
     height: 400px;
     display: flex;
     justify-content: space-evenly;
 }


ul a {
    margin-top: 8px;
    display: block;
    color: black;
    text-decoration: none;
}

ul h2:hover {
    color: goldenrod;
}

ul h3 {
    color: goldenrod;
}
#pic{
    height: 700px;
}

#pic:hover {
    scale: 1.1;
    background-color: #eff0f1;
}

#pic {
    border: 2px solid goldenrod;
    
}
    
.backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, 0.7);
    z-index: -1;
  }
               

#head {
    color: goldenrod;

}


#pic3{

height: 300px;

}


.navbar {
    background-color: #212529;
}

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    display: none;
    background-color: #212529;
}

.dropdown-menu .dropdown-item {
    color: #DAA520;
    padding: 8px 16px;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #DAA520;
    color: white;
}

.navbar-toggler-icon {
    background-color: #DAA520;
}

@media (max-width: 576px) {
    .navbar-nav {
        margin-top: 10px;
    }

.dropdown-menu {
    background-color: #212529;
    border: none;
 }

.navbar-nav .nav-item {
     text-align: center;
     width: 100%;
}

#searchInput,
    .btn-goldenrod {
     width: 100%;
     margin-top: 10px;
 }
}

@media (max-width: 768px) {
    .navbar-nav .nav-item {
     text-align: center;
 }

#searchInput,
 .btn-goldenrod {
     width: 80%;
}
}

@media (min-width: 992px) {
    .navbar-nav .nav-item {
        padding: 10px;
    }
}


.btn-goldenrod {
    background-color: #DAA520; 
    border-color: #DAA520;
    color: white;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 30px; 
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  
 
.btn-goldenrod:hover {
    background-color: #FFD700; 
    border-color: #FFD700;
  }
  
.container {
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        b {
            font-size: 25px;
            display: block;
            margin-bottom: 15px;
            opacity: 0;
            animation: fadeInUp 1.5s ease-in-out forwards;
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .delayed1 {
            animation-delay: 0.5s;
        }

        .delayed2 {
            animation-delay: 1s;
        }

        .delayed3 {
            animation-delay: 1.5s;
        }

        .h1, .display-3 {
            animation: fadeInUp 1.5s ease-in-out forwards;
        }

        .h1 {
            animation-delay: 2s;
        }

        .display-3 {
            animation-delay: 2.5s;
        }
        
.h1{
    text-align: center;
    color: goldenrod;
}

.h1 :hover{
    background-color: goldenrod;
    color: white;
}


h1 {
    font-family: Arial, sans-serif;
    font-size: 3rem; 
    text-align: center;
    margin: 0;
    padding: 20px;
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: pointer;
  }
  

  h1:hover {
    transform: translateX(-20px); 
    color: goldenrod; 
  }
  
 
  @media (max-width: 768px) {
    h1 {
      font-size: 2.5rem;
    }
  }