@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
    --bg-color:#fff;
    --primary-color:#964B00;
    --secondary-color:#f0f0f0;
    --text-color:#000;
}
html{
    scroll-behavior:smooth;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{  
  font-family: "Poppins", sans-serif;
}
header{
    height:80px;
    width:100%;
    padding:20px 50px;
    position: relative;
}
header nav{
    display:flex;
    justify-content:space-between;
    align-items: center;
}
header nav h1{
    color:var(--bg-color);
    font-size:30px;
    font-weight:700;
}
header nav .navbar ul{
    list-style:none;
    display:flex;
    justify-content: center;
    align-items:center;
    animation: a 0.9s ease-out forwards; 
    opacity:0;  
}
header nav .navbar ul li a{
    text-decoration: none;
    color:var(--bg-color);
    padding:0 10px;
    font-size:17px;
    font-weight:500;
}
@keyframes a{
    0%{
        opacity:0; 
        transform:translateX(-50%);
    }
    100%{
        opacity:1; 
        transform:translateX(0%);
    }
}
header nav .navbar ul li a:hover{
    color:var(--primary-color);
}
#menu-icon i {
    font-size: 25px;
    color: var(--primary-color);
    display: none;
}
.mobile-menu {
    display: none;
    position: absolute;
    background-color: var(--primary-color);
    flex-direction: column;
    width: 100%;
    height: 150;
    text-align: center;
    align-items: center;
    justify-content: center;
    right: 0;
    margin-top: 250px;
}
.mobile-menu a {
    display: none;
    margin-bottom: 10px;
    color: var(--bg-color);
    font-size: 18px;
}
.animation-menu {
    animation: menu 1s ease;
}

@keyframes menu {
    from {
        transform: translateY(-50px);
    }

    to {
        transform: translateY(0);
    }
}
#home{
    min-height:100vh;
    width:100%;
    padding:100px 40px 0;
}
#home h2{
    font-size:40px;
    font-weight:500;
    color:var(--primary-color);
    animation-name:home;
    animation-duration: 0.8s;
    animation-delay:0.1s;
}

#home p{
    color:var(--text-color);
    font-size:18px;
    font-weight:500;
    animation-name:home;
    animation-duration: 0.8s;
    animation-delay:0.3s;
}
@keyframes home{
    0%{
        transform:translateX(-50%)
    }
    100%{
        transform:translateX(0%);
    }
}
@keyframes home-a{
    0%{
        opacity:0;
        transform:translateY(100px);
    }
    100%{
        opacity:1;
        transform:translateY(0%);
    }
}
.animationshop{
    animation-name:home-a;
    animation-duration: 1s;
    animation-fill-mode:forwards;
}
#home a,
#about a{
    width:100px;
    height:40px;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:20px;
    background-color:var(--primary-color);
    color:var(--bg-color);
    border-radius:10px;
    padding:5px;
    transition:transform 0.4s;
    text-align:center;
    animation-name:home-a;
    animation-duration: 1s;
    animation-fill-mode:forwards;
    opacity: 0;
} 
#home a:hover,
#about a:hover,
#shop .filter-buttons button:hover{
    border:2px solid var(--primary-color);
    background-color: var(--bg-color);
    color:var(--text-color);
}
#about{
    height:100%;
    width:100%;
    margin:20px 0;
    display: flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
}
#about .about-content{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: space-between;
    margin:40px 20px;
}
#about .about-content video{
    width:50%;
    border-radius:10px;
    margin-right:25px;
    
}
#about .about-content p{
    color:var(--text-color);
    font-size:23px;
    font-weight:600;
}
#about h1,
#shop h1,
#gallery h1,
#contact h1{
    font-size:40px;
    font-weight:500;
    color:var(--primary-color);
    text-align:center;
}
#about hr,
#shop hr,
#gallery hr,
#contact hr{
    width:100px;
    height:5px;
    background-color:var(--text-color);
    margin:auto;
}
#about h1 span
#shop h1 span,
#gallery h1 span{
    color:var(--text-color);
}
#shop{
    min-height:100vh;
    width:100%;
    background-color: var(--secondary-color);
}
#shop .filter-buttons{
    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    gap:20px;
}
#shop .filter-buttons button{
    width:100px;
    height:40px;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:30px;
    background-color:var(--primary-color);
    color:var(--bg-color);
    border-radius:10px;
    padding:5px;
    text-align:center;
    opacity: 0;
}
#shop .cards {
  display: flex;
  flex-direction:column ; 
  gap: 40px; 
  padding:40px;
}

#shop .cards .chairs,
#shop .cards .Sofa,
#shop .cards .tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
}

#shop .cards .chairs .card,
#shop .cards .Sofa .card,
#shop .cards .tables .card{
  background-color: var(--bg-color);
  height: 250px;
  max-width: 280px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
#shop .cards .chairs .card img,
#shop .cards .Sofa .card img,
#shop .cards .tables .card img{
    margin:10px;
    width:150px;
    height:200px;
}
#shop .cards .details{
    position:absolute;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    bottom:-100%;
    background-color:rgba(150, 75, 0, 0.7);
    width:100%;
    height:80%;
    transition: all 0.4s;
}
#shop .cards .card:hover .details{
    bottom:0;
}
#shop .cards .card:hover .details h2{
    color:gold;
    font-size:25px;
    font-weight:500;
}
#shop .cards .chairs .card .details h3,
#shop .cards .Sofa .card .details h3,
#shop .cards .tables .card .details h3{
    color:var(--text-color);
    font-size:18px;
    font-weight:700;
    text-align:center;
}
#shop .cards .chairs .card .details span,
#shop .cards .Sofa .card .details span,
#shop .cards .tables .card .details span{
    color:var(--bg-color);
    font-size:20px;
    font-weight:800;
    text-align:center;
}
#shop .cards .chairs .card button,
#shop .cards .Sofa .card button,
#shop .cards .tables .card button {
    display: flex;
    margin-top: 40px;
    padding:5px;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
    background-color: var(--bg-color);
    width: 200px;
    height: 50px;
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    font-weight: 500;
    font-size: 18px;
    transition: transform 0.4s ease;
}

#shop .cards .chairs .card button:hover,
#shop .cards .Sofa .card button:hover,
#shop .cards .tables .card button:hover {
    color: var(--bg-color);
    background-color: var(--primary-color);
    border: none;
    transform: scale(0.9);
}
.message{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    pointer-events:none;
    top:5px;
    background-color: #4CAF50;
    color:var(--bg-color);
    z-index:9999;
    padding:10px;
    width:400px;
    text-align:center;
    border-radius:5px;
}
.message i{
    font-size:19px;
    font-weight:600;
    margin-right:10px;
}
.hidden {
  display:none;
}
#shop .filter-buttons button.all{
    border:2px solid var(--primary-color);
    background-color: var(--bg-color);
    color:var(--text-color);
    transform:none;
}
#gallery{
    width:100%;
    height:100%;
    margin: 30px 0;
}
#gallery p{
    font-size:18px;
    font-weight:600;
    color:var(--text-color);
    text-align:center;
    padding-top: 15px;
}
#gallery .gallery-content{
    display:grid;
    grid-template-columns: repeat(auto-fill ,minmax(250px,1fr));
    gap:30px;
    margin:30px 40px 0;
}
#gallery .gallery-content img{
    width:100%;
    height:200px;
    object-fit:cover;
    transition: all 0.6s ;
}
#gallery .gallery-content img:hover{
    transform: scale(1.1);
}
#contact {
    width:100%;
    height:100%;
    background-color: var(--secondary-color);
    padding-top:30px;
}
#contact .contact-info{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;  
    width:100%; 
    padding: 20px;
}
#contact .contact-info .contact-contents,
#contact .form {
    display:flex;
    flex-direction:column;
    width:50%;
    padding-left:20px;
}
#contact .contact-info .contact-contents p{
    font-size:16px;
    font-weight:600;
    padding-bottom:10px;
}
#contact .contact-info .contact-contents p i{
    font-size:18px;
    font-weight:600;
    padding-right:5px;
    color:var(--primary-color);
}
#contact .contact-info .contact-contents h3{
    color:var(--text-color);
    font-size: 35px;
    font-weight:700;
    padding-top:70px;
    padding-left: 8px;
}
#contact .contact-info .contact-content{
    display:flex;
    flex-direction: row;
}
#contact .contact-info .contact-content a i{
    background-color: var(--primary-color);
    color:var(--bg-color);
    border-radius:50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height:45px;
    margin:5px;
    width:45px;
}
#contact .contact-info .contact-content a i:hover{
    background-color: var(--text-color);
    color:var(--bg-color);
}
#contact .form h3{
    text-align:center;
    color:var(--text-color);
    font-size: 30px;
    font-weight:700;
}
#contact .form form{
    display:flex;
    flex-direction:column;
    width:100%;
    border:2px solid var(--primary-color);
    box-shadow:0 0 5px 5px var(--primary-color);
    margin-top:20px;
    border-radius: 10px;
    background-color: var(--bg-color);
    font-size:18px;
    font-weight:700;
}
#contact .form form input{
    text-align: center;
    padding: 5px 0;
}
#contact textarea{
    resize: none;
    padding-top:10px;
    text-align: center;
}
#contact .form form .btn-submit{
    color:var(--bg-color);
    background-color: var(--primary-color);
    border:2px solid var(--bg-color);
    border-radius: 10px;
    height:50px;
}
#contact .form form .btn-submit:hover{
    background-color: var(--secondary-color);
    color:var(--text-color);
    border:2px solid var(--primary-color);
}
#footer{
    background-color: var(--primary-color);
    height:60px;
    text-align:center;
    color:var(--bg-color);
    padding-top:20px;
}
#footer p span{
    color:var(--text-color);
    font-size:18px;
    font-weight:700;
}
@media (max-width:1300px){
#about .about-content p{
    color:var(--text-color);
    font-size:20px;
    font-weight:600;
}
#shop .cards .chairs,
    #shop .cards .Sofa,
    #shop .cards .tables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 40px;
    justify-items: center;
}
}
@media (max-width:600px){
    header{
    padding:5px 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-between;
    }
    #menu-icon i{
        display: flex;
    }
    header nav .navbar ul{
        display:none;
    }
    #home{
        min-height:100vh;
        width:100%;
        padding:90px 20px 0;
    }
    #home h2{
        font-size:25px;
    }
    #home p{
        font-size:20px;
    }
    #about .about-content{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content: center;
        margin:40px 20px;
    }
    #about .about-content video{
        width:100%;
        border-radius:10px;
        margin-bottom:20px;
        margin-right:0;
    }
    #shop .cards .chairs,
    #shop .cards .Sofa,
    #shop .cards .tables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 40px;
    justify-items: center;
    }
    #shop .filter-buttons{
        margin:0 10px;
    }
    #contact .contact-info{
        display:flex;
        flex-direction:column;
        justify-content: space-between;
        align-items: center;  
        width:100%; 
    }
    #contact .contact-info .contact-contents,
    #contact .form {
        display:flex;
        flex-direction:column;
        width:100%;
        padding:0;
    }
    #contact .form h3{
    text-align:center;
    color:var(--text-color);
    font-size: 30px;
    font-weight:700;
    padding-top:30px;
    }
    #footer{
       padding:5px 15px 0;
    }
}