h1{
    text-align: center ;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:blanchedalmond;

}
header {
    background: linear-gradient(#99580399, #df990299);
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    padding: 60px 50px;
    text-decoration: none;
}

.nav {
    background: var(--safari-green);
    padding: 50px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.nav a:hover {
    color: var(--savannah-gold);
}

:root {
    --forest-green: #2d3a1a;
    --savannah-gold: #c5a059;
    --earth-brown: #5c4033;
    --sunset-orange: #fb8c00;
    --off-white: #fdfbf7;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.box1 {
    background-color: #9c7b53;
    height: auto;
    min-height: 600px;
    width: 90%;
    max-width: 600px;
    border-radius: 100px;
    margin: 40px auto;
    padding: 40px;
    box-shadow: var(--shadow);
    animation: fadeInUp 1s ease-out;
    text-align: center;
}

.box1 img {
    height: auto;
    width: 80%;
    max-width: 300px;
    border-radius: 50px;
    margin: 20px 0;
    
}

.animals,
#carnivores,
#primates,
#antelopes,
#elusive 
{
    display: flex;
    gap: 30px;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    padding: 40px 20px;
}

.elephant,
.zebra,
.rhino,
.giraffe,
.hippo,
.buffalo,
.lion,
.leo,
.wilddog,
.cheet,
.hyena,
.jack,
.mongoose,
.caracal,
.chimp,
.baboon,
.monkey,
.colo,
.bush,
.ante,
.duiker,
.swine,
.pango,
.inse,
.hy,
.rode,
.hare,
.bat
{
    height: 1500px;
    width: 500%;
    max-width: 500px;
    color: #fff;
    border-radius: 60px;
    font-size: larger;
    line-height: 1.4;
    padding: 40px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow);
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.4);
}

.elephant:hover,
.zebra:hover,
.rhino:hover,
.giraffe:hover,
.hippo:hover,
.buffalo:hover,
.lion:hover,
.leo:hover,
.wilddog:hover,
.cheet:hover,
.hyena:hover,
.jack:hover,
.mongoose:hover,
.caracal:hover,
.chimp:hover,
.baboon:hover,
.monkey:hover,
.colo:hover,
.bush:hover,
.ante:hover,
.duiker:hover,
.swine:hover,
.pango:hover,
.inse:hover,
.hy:hover,
.rode:hover,
.hare:hover,
.bat:hover
{
    transform: translateY(-15px) scale(1.02);
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}


.elephant img,
.zebra img,
.rhino img,
.giraffe img,
.hippo img,
.buffalo img,
.lion img,
.leo img,
.wilddog img,
.cheet img,
.hyena img,
.jack img,
.mongoose img,
.caracal img,
.chimp img,
.baboon img,
.monkey img,
.colo img,
.bush img,
.ante img,
.duiker img,
.swine img,
.pango img,
.inse img,
.hy img,
.rode img,
.hare img,
.bat img
{
    height: 300px;
    width: 200px;
    object-fit: cover;
    border-radius: 40px;
    display: block;
    margin: 0 auto 20px auto;
    transition: var(--transition);
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.elephant {
    background-image: url(./Elephant.jpg);
}

.zebra {
    background-image: url(./01\ Zebra\ 4.jpg);
    padding-top: 20px;
}

.rhino {
    background-image: url(./download\ \(7\).jpg);
    padding-top: 20px;
}

.giraffe {
    background-image: url(./giraffe.jpg);
    padding-top: 20px;
}

.hippo {
    background-image: url(./download\ \(13\).jpg);
    font-weight: 800;
    padding-top: 20px;
}

.buffalo {
    background-image: url(./Cape\ Buffalo.jpg);
    font-weight: 800;
    padding-top: 20px;
}

.lion {
    background-image: url(./download\ \(15\).jpg);
    font-weight: 800;
    padding-top: 20px;
}

.leo {
    background-image: url(./download\ \(18\).jpg);
    font-weight: 800;
    padding-top: 20px;
}

.wilddog {
    background-image: url(./download\ \(19\).jpg);
    font-weight: 800;
    padding-top: 20px;
}

.cheet {
    background-image: url(./download\ \(20\).jpg);
    font-weight: 800;
    padding-top: 20px;
}

.hyena {
  
    padding-top: 20px;
    background-image: url(./download\ \(22\).jpg);
    font-weight: 800;

}



.jack {
  
    padding-top: 20px;
    background-image: url(./♡.jpg);
    font-weight: 800;

}

.mongoose {
    padding-top: 20px;
    background-image: url(./download\ \(25\).jpg);
    font-weight: 800;

}


.caracal {
    
    padding-top: 20px;
    background-image: url(./Caracal\ \(2\).jpg);
    font-weight: 800;

}
.chimp {
   
    padding-top: 20px;
    background-image: url(./download\ \(26\).jpg);
    font-weight: 800;

}

.baboon {
    
    padding-top: 20px;
    background-image: url(./safari_1901-266bw_jpg.jpg);
    font-weight: 800;

}

.monkey {
    
    padding-top: 20px;
    background-image: url(./download\ \(25\).jpg);
    font-weight: 800;

}

.colo {
   
    padding-top: 20px;
    background-image: url(./download\ \(25\).jpg);
    font-weight: 800;

}

.bush {
   
    padding-top: 20px;
    background-image: url(./download\ \(25\).jpg);
    font-weight: 800;

}

.ante {
   
    padding-top: 20px;
    background-image: url(./download\ \(25\).jpg);
    font-weight: 800;

}


.duiker {
    
    padding-top: 20px;
    background-image: url(./download\ \(25\).jpg);
    font-weight: 800;

}


.swine {
   
    padding-top: 20px;
    background-image: url(./download\ \(25\).jpg);
    font-weight: 800;

}




.pango {
   
    padding-top: 20px;
    background-image: url(./download\ \(25\).jpg);
    font-weight: 800;

}



.inse {
    
    padding-top: 20px;
    background-image: url(./download\ \(25\).jpg);
    font-weight: 800;

}


.hy {
    
    padding-top: 20px;
    background-image: url(./download\ \(25\).jpg);
    font-weight: 800;

}


.rode {
    
    padding-top: 20px;
    background-image: url(./download\ \(25\).jpg);
    font-weight: 800;

}

.hare {
    
    padding-top: 20px;
    background-image: url(./download\ \(25\).jpg);
    font-weight: 800;

}

.bat {
   
    padding-top: 20px;
    background-image: url(./download\ \(32\).jpg);
    font-weight: 800;

}


p {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

h2,
h3 {
    text-align: center;
    color: var(--savannah-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
}


@media (max-width: 768px) {

    .box1,
    .elephant,
    .zebra,
    .rhino,
    .giraffe,
    .hippo,
    .buffalo,
    .lion,
    .leo,
    .wilddog,
    .cheet,
    .hyena,
    .jack,
    .mongoose,
    .caracal,
    .chimp,
    .baboon,
    .monkey,
    .colo,
    .bush,
    .ante,
    .duiker,
    .swine,
    .pango,
    .inse,
    .hy,
    .rode,
    .hare,
    .bat 
    {
        width: 95%;
        height: auto;
        
        border-radius: 40px;
        padding: 30px 15px;
    }

    .box1 img,
    .elephant img,
    .zebra img,
    .rhino img,
    .giraffe img,
    .hippo img,
    .buffalo img,
    .lion img,
    .leo img,
    .wilddog img,
    .cheet img,
    .hyena img,
    .jack img,
    .mongoose img,
    .caracal img,
    .chimp img,
    .baboon img,
    .monkey img,
    .colo img,
    .bush img,
    .ante img,
    .duiker img,
    .swine img,
    .pango img,
    .inse img,
    .hy img,
    .rode img,
    .hare img,
    .bat img {
        width: 100%;
        max-width: 250px;
        padding-left: 0;
        /* Resetting your original padding-left */
    }

    h1 {
        font-size: 2rem;
    }
}

section {

    border-radius: 12px;
    background: white;
    box-shadow: 0 4px 10px #7e61031a;
}

/* INTRO */

.search-box input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #ccc;
}


.dropdown-container {
    display: flex;
    flex-direction: column;
}

select {
    padding: 12px;
    border-radius: 8px;
    border: 2px solid #b4b2ad;
    background-color: hwb(37 89% 7%);
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

select:hover {
    background-color: hsl(43, 5%, 74%);
}

.result-box {
    border: 3px solid hsl(41, 86%, 46%);
    border-radius: 12px;
    padding: 15px;
    background:var(--savannah-gold);
    min-height: 100px;
}

.place {
    background: hsl(90, 5%, 92%);
    border-left: 6px solid hsl(36, 83%, 50%);
    padding: 15px;
    margin-top: 15px;
    border-radius: 10px;
    transition: transform 0.2s;
}

.place:hover {
    transform: scale(1.02);
}

.place h4 {
    color: hsl(41, 86%, 34%);
}

.ul li{
    text-align: center;
    list-style-position:inside;
}

ul{
    text-align: center;
    list-style-position:inside;
    
}
footer{
    background-color: var(--savannah-gold);
    background: linear-gradient(#99580399, #df990299);
        background-size: cover;
        background-position: center;
        color: white;
}
form input,
form textarea,
form button,
#category,
#search
{
    width: 1200px;
    padding: 30px;
    margin-bottom: 18px;
    font-size: 18px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-left: 70px;

}

form input:focus,
form textarea:focus {
    border-color: hsl(46, 100%, 50%);
    outline: none;
}
form button {
    background-color:var(--savannah-gold);
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 18px;
    font-weight: 600;

}

form button:hover {
    background-color: hsl(39, 91%, 39%);
}

form button:active {
    background-color: hsl(34, 100%, 26%);
}