/* Default Christmas tree styling for the footer */

footer#main-footer{
	position: relative;
}

footer#main-footer::after {
    content: ' ';
    position: absolute;
        top: -180px;
	bottom: unset;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 200px; /* Tree size */
    height: 300px;
	        max-height: 180px;
    background: url('../img/christmas-tree.png') no-repeat center center;
    background-size: contain;
    animation: treeAnimation 10s infinite alternate;
}

/* Animation for the Christmas tree */
@keyframes treeAnimation {
    0% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(1.1);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}

/* Position the tree on the left if the class 'christmas-tree-left' is added to the body */
.christmas-tree-left #main-footer::after {
    left: 10%; /* 10% from the left */
    transform: translateX(0); /* Remove center transform */
}

/* Position the tree on the right if the class 'christmas-tree-right' is added to the body */
.christmas-tree-right #main-footer::after {
    right: 7%; /* 10% from the right */
	left: unset !important;
    transform: translateX(0); /* Remove center transform */
}

/* Ensure the tree size is responsive */
#main-footer::after {
    max-width: 280px; /* Set maximum width for desktop */
    width: 200px;     /* Default width */
    height: 300px;    /* Default height */
}

/* Make the tree smaller on smaller screens (mobile) */
@media (max-width: 988px) {
    #main-footer::after {
        width: 100px; /* Smaller width on mobile */
        height: 150px; /* Smaller height on mobile */
    }
	/* Position the tree on the left if the class 'christmas-tree-left' is added to the body */
   .christmas-tree-left #main-footer::after {
     left: 5%; /* 10% from the left */
     transform: translateX(0); /* Remove center transform */
    }

/* Position the tree on the right if the class 'christmas-tree-right' is added to the body */
.christmas-tree-right #main-footer::after {
    right: 3%; /* 7% from the right */
	left: unset !important;
    transform: translateX(0); /* Remove center transform */
}
}