/* Responsive Design */

@media (max-width: 968px) {

    .hero-content h1 {

        font-size: 2.5rem;

    }



    .services-grid {

        flex-direction: column;

        align-items: center;

    }



    .service-card {

        width: 100%;

        max-width: 100%;

    }



    .contact-form {

        margin: 0 1rem;

        padding: 2rem;

    }



    .nav-links {

        display: none;

    }



    .menu-toggle {

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        width: 25px;

        height: 18px;

        cursor: pointer;

    }



    .menu-toggle span {

        display: block;

        height: 3px;

        width: 100%;

        background: var(--light);

        border-radius: 2px;

        transition: all var(--transition-speed) ease;

    }



    .mobile-menu {

        display: none;

        flex-direction: column;

        position: absolute;

        top: 100%;

        right: 0;

        background: rgba(26, 26, 26, 0.95);

        width: 200px;

        padding: 1rem;

        border-radius: 0 0 8px 8px;

        box-shadow: 0 4px 6px rgba(0,0,0,0.3);

    }



    .mobile-menu a {

        padding: 0.5rem 0;

        border-bottom: 1px solid rgba(197, 165, 114, 0.2);

        text-align: center;

        color: var(--light);

        text-decoration: none;

        font-weight: 300;

        text-transform: uppercase;

        letter-spacing: 1px;

        transition: color var(--transition-speed) ease;

    }



    .mobile-menu a:last-child {

        border-bottom: none;

    }



    .mobile-menu a:hover {

        color: var(--gold);

    }



    .mobile-menu.active {

        display: flex;

        animation: fadeIn var(--transition-speed) ease;

    }



    .container {

        padding: 0 1rem;

    }



    .detail-content {

        padding: 1.5rem;

        margin: 0 1rem;

        width: calc(100% - 2rem);

    }



    .section {

        padding: 80px 0;

    }



    .section-title {

        font-size: 2rem;

        margin-bottom: 2rem;

        padding: 0 1rem;

        word-wrap: break-word;

        hyphens: auto;

    }



    #energi .section-title {

        font-size: 1.8rem;

    }



    /* Admin adjustments for mobile */

    .editor-popup {

        width: 90%;

        min-width: 0;

        padding: 1rem;

    }



    .editor-toolbar {

        flex-wrap: wrap;

        gap: 5px;

    }



    .background-edit-menu {

        left: 10px;

        right: 10px;

        bottom: 10px;

    }

}



@media (max-width: 380px) {

    .section-title {

        font-size: 1.7rem;

    }



    #energi .section-title {

        font-size: 1.5rem;

    }



    .hero-content h1 {

        font-size: 2rem;

    }



    .chat-box {

        width: 280px;

    }



    .editor-popup {

        padding: 0.5rem;

    }



    .editor-toolbar button {

        padding: 4px 8px;

    }

}



/* Menu Toggle Animation */

.menu-toggle.open span:nth-child(1) {

    transform: rotate(45deg) translate(5px, 5px);

}



.menu-toggle.open span:nth-child(2) {

    opacity: 0;

}



.menu-toggle.open span:nth-child(3) {

    transform: rotate(-45deg) translate(5px, -5px);

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(-10px); }

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

}