html {
    scroll-behavior: smooth;
    scroll-padding-top: 10vh; /* Adjust to your navbar height */
}

@media (max-width: 1030px) {
    html {
        scroll-padding-top: 70px; /* Use fixed pixels on mobile */
    }
}

body {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    font-style: normal;
    margin: 0;
    height: 100vh;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    background-color: #6c141f;
}

.cls-1 {
    fill: #ffe7d7;
}
.cls-2 {
    fill: #435934;
}
.cls-3 {
    fill: #2e1313;
}

.loader-container {
    position: relative;
    width: 100%;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.svg {
    position: absolute;
    width: 30%;
    fill: none;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
    
    @media only screen and (max-width: 700px) {
        .svg {
            width: 60%;
        }
    }

#Layer_1 {
    animation: cup-sequence 6s infinite ease-in-out;
}

#Layer_2 {
    animation: wheel-sequence 6s infinite ease-in-out;
}

@keyframes cup-sequence {
    0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); filter: blur(0px); }
    16.67% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); filter: blur(0px); }
    25% { opacity: 0; transform: translate(-50%, -50%) rotate(360deg); filter: blur(8px); }
    50% { opacity: 0; transform: translate(-50%, -50%) rotate(360deg); filter: blur(8px); }
    54.17% { opacity: 0.5; transform: translate(-50%, -50%) rotate(540deg); filter: blur(6px); }
    58.33% { opacity: 1; transform: translate(-50%, -50%) rotate(720deg); filter: blur(0px); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotate(720deg); filter: blur(0px); }
}

@keyframes wheel-sequence {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); filter: blur(8px); }
    16.67% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); filter: blur(8px); }
    25% { opacity: 1; transform: translate(-50%, -50%) rotate(360deg); filter: blur(0px); }
    50% { opacity: 1; transform: translate(-50%, -50%) rotate(360deg); filter: blur(0px); }
    54.17% { opacity: 0.5; transform: translate(-50%, -50%) rotate(540deg); filter: blur(6px); }
    58.33% { opacity: 0; transform: translate(-50%, -50%) rotate(720deg); filter: blur(8px); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(720deg); filter: blur(8px); }
}

.label {
    position: absolute;
    bottom: -50px;
    color: #fff;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: text-blink 6s infinite;
}

@keyframes text-blink {
    0%, 16.67% { opacity: 1; }
    25%, 50% { opacity: 0.5; }
    58.33%, 100% { opacity: 1; }
}

/* Loading Screen Styles */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #6c141f;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.8s ease-out, visibility 0.8s;
}

.loading-screen.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Page Content Styles */
.page-content {
    opacity: 0;
    transition: opacity 0.8s ease-in;
    color: #ffe7d7;
}

.page-content.visible {
    opacity: 1;
}
    
    /*----------------------------------------------normal page---------------------------------------------------*/
   

#BLOCK-1 {
    background-color: #ffe7d7;
	color: #2e1313;
	height: auto;
}  
  
.title-1 {
	font-weight: bold;
    font-family: "Bricolage Grotesque" !important;
      font-style: normal;
	font-size: 4rem;
	text-align: center;
	padding-top: 50px;
	margin: 0;
} 
  	@media(max-width: 884px) {
    	.title-1 {
      		font-size: 3rem;
    	}
  	}
  		/*@media(max-width: 450px) {
    		.title-1 {
      			font-size: 45px;
    		}
  		} */
  			@media(max-width: 350px) {
    			.title-1 {
      				font-size: 1.5rem;
    			}
  			}

/*----------------------------------------------second page---------------------------------------------------*/


#BLOCK-2 {
	background-color: #ffe7d7;
	height: auto;
	text-align: center;
	color: #2e1313;
}

.privacy {
	text-align: left;
	width: 70%;
	margin: 0px auto;
	padding-top: 50px;
	padding-bottom: 50px;
}

.small-title {
	font-weight: bold;
    font-family: "Bricolage Grotesque" !important;
    font-style: normal;
	font-size: 2rem;
}

    @media(max-width: 350px) {
    	.small-title {
      		font-size: 1.2rem;
    	}
  	}

.description {
	text-align: justify;
	padding-bottom: 50px;
	font-size: 1.5rem;
}
    @media(max-width: 884px) {
    	.description {
      		font-size: 1.1rem;
    	}
    	
    	.privacy {
	        width: 85%;
        }
  	}
        @media(max-width: 350px) {
    		.description {
      			font-size: 1rem;
    		}
  		}

/*----------------------------footer--------------------------*/
    
.footer {
    background-color: #6c141f;
    padding: 30px 50px 0 0;
    color: #ffe7d7;
}

.footer-container {
    align-items: center;
    margin: 0 auto;
    display: grid;
    grid-template-areas: 'left right';
    grid-template-rows: 100%;
    grid-template-columns: 50% 50%;
    width: 100%;
    padding: 0;
}

.footer-left {
    grid-area: left;
}

.footer-image {
    max-width: 450px;
    margin: 0 0 -20px -15px;
}

.footer-right {
    float: right;
    padding: 1%;
    text-align: right;
    grid-area: right;
}

.footer-title {
    margin: 0;
    font-size: 4.5rem;
    font-weight: bold;
    font-family: "Bricolage Grotesque" !important;
    font-weight: 700;
    padding: 0 0 100px 0;
}

.social-icons {
    font-size: 2.5rem;
}

.social-link {
    color: #ffe7d7;
    font-size: 2rem;
    text-decoration: none;
    transition: opacity 0.3s;
}

.social-link:hover {
    opacity: 0.8;
}

.footer-link {
    color: #ffe7d7;
    text-decoration: none;
    font-size: 2rem;
    transition: opacity 0.3s;
}

.footer-link:hover {
    opacity: 0.8;
}

.copyright {
    margin: 0;
    font-size: 12px;
    opacity: 0.8;
}

    @media (max-width: 1030px) {
        .footer-image {
            margin: 0px 0 -100px -15px;
            max-width: 300px;
        }
    
        .footer-title {
            font-size: 3.5rem;
        }
    }

        @media (max-width: 600px) {
            .footer-title {
                font-size: 1.5rem;
            }
    
            .footer-image {
                max-width: 200px;
                margin: 0px 0 0 -15px;
            }
            .footer {
                padding: 30px 10px 15px 0;
            }
            .footer-link {
                font-size: 1.1rem;
            } 
        }

            @media (max-width: 400px) {
                .footer-title {
                    font-size: 1.3rem;
                }
            }
                @media (max-width: 313px) {
                    .footer-image {
                        max-width: 130px;
                    }
                    .footer-title {
                        font-size: 1.1rem;
                    }
                }
    
/*----------------------------other--------------------------------*/
    
section {
    width: 100%;
    background-color: gray;
    display: flex;
    /*align-items: center;
    justify-content: center;*/
}

#home {
    height: auto;
    background-color: #6c141f;
}

#about {
    background-color: #ffe7d7;
}

#services {
    background-color: #6c141f;
}

#contact {
    background-color: #435934;
}

/* Desktop nav (original) */
.desktop-nav {
    display: block;
    position: sticky;
    top: 0;
    background-color: #6c141f;
    z-index: 2;
    padding: 10px;
    background-image: url("images/logo.png");
    background-size: 6%;
    background-repeat: no-repeat;
    background-position: center;
}

.desktop-nav .container {
    text-align: right;
}

.desktop-nav ul li {
    position: relative;
    display: inline-block;
}
/*
.desktop-nav ul li::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: #df6880;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s ease;
}

.desktop-nav ul li.active::after {
    transform: scaleX(1);
} */

.desktop-nav ul li a {
    display: inline-block;
    text-decoration: none;
    padding: 10px 20px;
    color: #ffe7d7;
    font-size: 20px;
}
/*
.desktop-nav ul li.active a {
    color: #df6880;
}*/

    /* Mobile */
    @media (max-width: 1030px) {
        .desktop-nav {
            display: none;
        }

        /* Full-width sticky nav bar */
        .mobile-nav {
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            height: 70px;
            background-color: #6c141f;
            z-index: 999;
            padding: 0;
            display: block; /* Remove flex, use block instead */
        }

        /* Logo in center */
        .logo-mobile {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); /* Center both axes */
            width: 60px;
            height: 60px;
            background-image: url("images/logo.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            z-index: 500;
        }

        /* Hamburger button */
        .menu {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%); /* Vertically center */
            width: 2.5rem;
            height: 2rem;
            background: 0;
            border: 0;
            padding: 0;
            cursor: pointer;
            z-index: 1000;
        }

        /* Hamburger lines */
        .bar {
            position: absolute;
            width: 100%;
            height: 3px;
            background: #ffe7d7;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            transition: all 0.3s ease;
        }

        .bar::before,
        .bar::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 3px;
            background: #ffe7d7;
            left: 0;
            transition: all 0.3s ease;
        }

        .bar::before {
            top: -8px;
        }

        .bar::after {
            top: 8px;
        }

        /* Hamburger to X */
        .menu.active .bar {
            background: transparent;
        }

        .menu.active .bar::before {
            top: 0;
            transform: rotate(45deg);
        }

        .menu.active .bar::after {
            top: 0;
            transform: rotate(-45deg);
        }

        /* Slide-out menu */
        .slide-menu {
            position: fixed;
            left: -100%;
            top: 0;
            width: 100%;
            height: 100vh;
            background-color: #6c141f;
            transition: left 0.6s ease;
            z-index: 98;
            padding-top: 80px;
            overflow-y: auto;
        }

        .slide-menu.menu-open {
            left: 0;
        }

        .slide-menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: center;
        }

        .slide-menu ul li {
            padding: 15px 0;
        }

        .slide-menu ul li a {
            display: block;
            color: #ffe7d7;
            text-decoration: none;
            font-size: 24px;
        }
    }

.mobile-nav,
.slide-menu {
    display: none;
}

    @media (max-width: 1030px) {
        .mobile-nav,
        .slide-menu {
            display: block;
        }
    }
        @media (max-width: 1030px) {
            .footer-image {
                margin: 0px 0 -100px -15px;
                max-width: 300px;
            }
            .footer-title {
                font-size: 3.5rem;
            }
        }
            @media (max-width: 600px) {
                .footer-title {
                    font-size: 1.5rem;
                }
                .footer-title {
                    font-size: 1.3rem;
                }
                .footer-image {
                    max-width: 200px;
                    margin: 0px 0 0 -15px;
                }
                .footer {
                    padding: 30px 10px 15px 0;
                }
                .footer-link {
                    font-size: 1.1rem;
                } 
    
            }