:root {
    --japanese-red: #9D0A0E;
    --dark-red: #6D0003;
    --black: #000;
}

body, html {
    display: flex;
    flex-direction: column;
    background-color: #ff793b;
    background: linear-gradient(108deg, #ff3314 0%, #86070b 29%, #43031a 75%);
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* colapse navbar */

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* navbar Dropdown */

.dropdown-item {
    color: aliceblue;
}

.dropdown-item:hover {
     background-color: #929292;
}

header {
    background-image: url(/static/images/duotone-lamp.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: rgb(255, 142, 142);
    margin-top: 4%;
}

@media (max-width: 412px) {
    .header {
        margin-top: 10%;
    }
}

main {
    flex: 1;  /* Pushes the footer down */
}

.logo {
    font-size: 150%;
    text-shadow: 2px 2px red;
}

.logo-color {
    width: 50px;  
    height: auto;
}
.navbar {
    background: var(--dark-red);
}
.navbar-brand, .nav-link {
    color: rgb(243, 243, 243) !important;
}

/* Footer Styles */
.footer {
    background: #2f2f2f;
    color: white;
    padding: 40px 20px;
    text-align: center;
}

.logo_grey {
    width: 30px;  
    height: auto;  
}


.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}

.footer-tittle {
    color: #929292;
    font-size: 20px;
    margin-bottom: 10px;
}

.footer-column {
    flex: 1;
    min-width: 280px;
    margin: 15px;
    text-align: justify;
}

.footer-column h6 {
    color: #606060;
    font-size: 15px;
    margin-bottom: 10px;
}

.footer-column p {
    font-size: 16px;
    line-height: 1.6;
}

/* Social Media Buttons */
.social-links {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.social-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

/* Social Media Colors */
.facebook { background: #606060; }
.twitter { background: #606060; }
.instagram { background: #606060; }
.youtube { background: #606060; }

.facebook:hover { background: #367cfd; }
.twitter:hover { background: #6ee1fe; }
.instagram:hover { background: #ff24e2; }
.youtube:hover { background: #ff0505; }

.social-btn:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.footer-copy {
    margin-top: 25px;
    font-size: 14px;
    opacity: 0.8;
}