/* Back to top button basic styles with transitions for smooth appearance */
.m-backtotop {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: fixed; /* Keeps the button fixed on the screen */
    bottom: -50px; /* Initially positioned off the screen */
    right: 20px; /* Positioned from the right */
    width: 50px; /* Width of the button */
    height: 50px; /* Height of the button */
    background: #020035; /* Background color */
    border-radius: 25px; /* Rounded corners */
    text-align: center; /* Centers text inside the button */
    border: 2px solid #00adb5; /* Border color */
    box-shadow: 0 2px 3px #00adb5(0, 0, 0, 0.1); /* Shadow effect */
    opacity: 0; /* Initially hidden */
    overflow: hidden; /* Ensures no overflow */
    color: #00adb5; /* Text color */
    z-index: 1000; /* Places the button above other elements */
}

/* Styles for the button when it becomes active (visible) */
.m-backtotop.active {
    bottom: 18px; /* Moves the button up to make it visible */
    opacity: 1; /* Makes the button fully visible */
}

/* Ensures smooth transition for child elements */
.m-backtotop > div {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/* Styles for the arrow icon inside the button */
.m-backtotop > div.arrow {
    position: absolute;
    top: 50%; /* Centers vertically */
    left: 50%; /* Centers horizontally */
    transform: translateY(-50%) translateX(-50%); /* Ensures perfect centering */
    opacity: 1; /* Fully visible */
    color: #00adb5; /* Icon color */
    font-size: 24px; /* Icon size */
}

/* Styles for the text inside the button */
.m-backtotop > div.text {
    font-size: 5px; /* Font size */
    font-size: 0.5rem; /* Font size in rem */
    line-height: 10px; /* Line height */
    text-transform: uppercase; /* Uppercase text */
    font-weight: 900; /* Bold text */
    font-family: 'Open Sans', sans-serif; /* Font family */
    position: absolute;
    left: 50%; /* Centers horizontally */
    top: 50%; /* Centers vertically */
    transform: translateY(50%) translateX(-50%); /* Ensures perfect centering */
    opacity: 0; /* Initially hidden */
    margin-top: 1px; /* Margin at the top */
    color: #00adb5; /* Text color */
}

/* Styles for the button when hovered */
.m-backtotop:hover {
    transform: scale(1.1); /* Slightly enlarges the button */
    bottom: 20px; /* Moves the button up a bit */
    cursor: pointer; /* Changes cursor to pointer */
    background: #020035; /* Background color */
    box-shadow: 0 10px 5px #00adb5(0, 0, 0, 0.1); /* Shadow effect */
}

/* Hides the arrow icon and shows the text when hovered */
.m-backtotop:hover > div.arrow {
    transform: translateY(-150%) translateX(-50%);
    opacity: 0; /* Hides the arrow */
}

.m-backtotop:hover > div.text {
    transform: translateY(-50%) translateX(-50%);
    opacity: 1; /* Shows the text */
}