* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "sen";
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #000000;
}

/* Sticky Navbar */
/* Glassmorphic Sticky Navbar */
.navbar-div {
    background: transparent; /* Dark transparent background */
    color: white;
    padding: 15px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px); /* Glassmorphism effect */
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2); /* Subtle border */
    height: 60px;
}


/* Main Content */
.content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.box {
  background-color: transparent;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem; /* spacing between cards */
  width: 100%;
  margin: auto;
  flex-direction: row; /* default: row for large screens */
}

@media (max-width: 520px) {
  .box {
      flex-direction: column;
      align-items: center;
  }
}

/* 🖥️ Large Screens: Desktop, Laptops, Tablets in Landscape */
@media (min-width: 1024px) {
    .content {
        flex-direction: row;
    }

    .box {
        flex: 1;
    }
}

/* 📲 iPads & Tablets (Portrait Mode, including iPad Pro) */
@media (max-width: 1024px) and (orientation: portrait) {
    .content {
        flex-direction: column !important; /* Force stacking */
    }
}

/* 📱 Phones (All sizes, Portrait & Landscape) */
@media (max-width: 820px) {
    .content {
        flex-direction: column;
        width: 95%;
    }

    .box {
        width: 100%;
    }
}

/* 🖥️ Extra Large Screens (4K Displays) */
@media (min-width: 1440px) {
    .content {
        max-width: 1300px;
    }
}

/* Footer */
.footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: 15px;
    margin-top: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}


.author {
    font-size: 10px;
    color: #f3f3f3;
    font-family: 'Montserrat';
    font-style: italic;
    margin-top: 1rem;
  }


.parent {
    width: 100%;
    padding: 20px;
    perspective: 1000px;
    font-family: "Open sans";
    margin-top: auto;
  }
  
  .card {
    padding-top: 50px;
    /* border-radius: 10px; */
    border: 3px solid #141414;
    transform-style: preserve-3d;
    background: linear-gradient(135deg, #0000 18.75%, #f3f3f3 0 31.25%, #0000 0),
      repeating-linear-gradient(45deg, #f3f3f3 -6.25% 6.25%, #0000 0 18.75%);
    background-size: 60px 60px;
    background-position:
      0 0,
      0 0;
    background-color: #141414;
    width: 100%;
    transition: all 0.5s ease-in-out;
  }
  
  .card:hover {
    background-position:
      -100px 100px,
      -100px 100px;
    transform: rotate3d(0.5, 1, 0, 30deg);
  }
  
  .content-box {
    background-color: rgba(0, 0, 0, 0.74); /* Add black color behind the image */
    background-image: url(assets/time_background.png); /* Background image */
    background-size: cover;
    background-position: bottom;
    border-radius: 0px 0px 0px 0px;
    backdrop-filter: blur(10px) brightness(1.2); /* More blur & slight brightness for contrast */
    transition: all 0.5s ease-in-out;
    padding: 60px 25px 25px 25px;
    transform-style: preserve-3d;
}

  
  .content-box .card-title {
    display: inline-block;
    color: #f3f3f3;
    font-size: 25px;
    font-weight: 900;
    transition: all 0.5s ease-in-out;
    transform: translate3d(0px, 0px, 50px);
  }
  
  .content-box .card-title:hover {
    transform: translate3d(0px, 0px, 60px);
  }
  
  .content-box .card-content {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #f3f3f3;
    transition: all 0.5s ease-in-out;
    transform: translate3d(0px, 0px, 30px);
  }
  
  .content-box .card-content:hover {
    transform: translate3d(0px, 0px, 60px);
  }
  
  .content-box .see-more {
    cursor: pointer;
    margin-top: 1rem;
    display: inline-block;
    font-weight: 900;
    font-size: 9px;
    text-transform: uppercase;
    color: #151515;
    /* border-radius: 5px; */
    background: #f3f3f3;
    padding: 0.5rem 0.7rem;
    transition: all 0.5s ease-in-out;
    transform: translate3d(0px, 0px, 20px);
  }
  
  .content-box .see-more:hover {
    transform: translate3d(0px, 0px, 60px);
  }
  
  .date-box {
    position: absolute;
    top: 30px;
    right: 30px;
    height: 60px;
    width: 60px;
    background: #000000;
    border: 1px solid #f3f3f3;
    /* border-radius: 10px; */
    padding: 10px;
    transform: translate3d(0px, 0px, 80px);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 17px 10px -10px;
  }
  
  .date-box span {
    display: block;
    text-align: center;
  }
  
  .date-box .month {
    color: #f3f3f3;
    font-size: 9px;
    font-weight: 700;
  }
  
  .date-box .date {
    font-size: 20px;
    font-weight: 900;
    color: #f3f3f3;
  }
  




  .card-nav {
    width: 94%;
    height: 300px;
    border-radius: 12px;
    background: rgba(21, 21, 21, 0.4); /* Dark semi-transparent */
    backdrop-filter: blur(10px); /* Glass effect */
    -webkit-backdrop-filter: blur(15px);
    color: white;
    font-weight: 600;
    font-size: 1.2em;
    padding: 15px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Light border for depth */
    box-shadow: none; /* Removing shadow as per glassmorphic style */
    margin-top: auto;
  }

  
  .title-nav {
    font-size: 1em;
    margin-bottom: 10px;
  }
  
  .card__container-nav {
    overflow-y: auto;
    max-height: 200px;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: #444 #222;
    margin-top: 0.5rem;
  }
  
  .element-nav {
    color: #aaa;
    font-size: 0.85em;
    padding: 8px 15px;
    border-left: 2px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }
  
  .element-nav input {
    display: none;
  }
  
  .element-nav input:checked + label,
  .element-nav:has(input:checked) {
    background-color: #0055a4;
    border-left: 3px solid #8cb4ff;
    color: white;
    font-weight: bold;
    border-radius: 4px;
  }
  
  .element-nav:hover:not(:has(input:checked)) {
    color: #ddd;
    border-left: 2px solid #555;
    background-color: #aaaaaa3f;
  }
  
  .card__container-nav::-webkit-scrollbar {
    width: 5px;
  }
  
  .card__container-nav::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 5px;
  }
  
  .card__container-nav::-webkit-scrollbar-track {
    background: #222;
  }



  .vista-button {
    position: relative;
    cursor: pointer;
    padding: 4px 8px;
    border: 1px solid black;
    border-radius: 5px;
    color: #fff;
    text-shadow: 1px 1px #000;
    box-shadow:
      inset 0px 4px 4px -3px #fff0,
      inset 0px -3px 4px -3px #ffffffdd;
    background: linear-gradient(#dddddd81, #99999982 50%, #000 50%);
    isolation: isolate;
    transition:
      0.25s all,
      0.1s background-position;
  }
  
  .vista-button::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(circle at 50% 150%, #48b9ef, #0000 50%);
    background-size: 300% 50%;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: inherit;
  }
  
  .vista-button::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(circle at 50% 320%, #48b9ef, #0000 50%);
    background-size: 300% 50%;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: inherit;
  }
  
  .vista-button:hover {
    box-shadow:
      inset 0px 4px 4px -3px #fff5,
      inset 0px -3px 4px -3px #fff;
  }
  .vista-button:hover::before,
  .vista-button:hover::after {
    opacity: 1;
  }
  
  .vista-button:active::before,
  .vista-button:active::after {
    opacity: 0;
  }
  
  .vista-button:active {
    box-shadow:
      inset 0px 4px 4px -3px #000,
      inset 0px -4px 4px -3px #000c,
      inset 0px 0px 24px -3px #000a;
    background-position: 1px 1px;
  }
  
  .vista-button div {
    transition: 0.1s translate;
  }
  
  .vista-button:active div {
    translate: 1px 1px;
  }
  



  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    height: 58px;
    top: 0;
    left: 0;
    z-index: 1000;
}
.logo {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 210px;
}
.nav-links {
    display: flex;
    gap: 20px;
}
.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 1rem;
    padding: 8px 15px;
    transition: 0.3s;
    position: relative;
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background: white;
    transform: scaleX(0);
    transition: transform 0.3s;
}
.nav-links a:hover::after {
    transform: scaleX(1);
}
.menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: relative;
}
.menu-toggle span {
    position: absolute;
    width: 100%;
    height: 4px;
    background: white;
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.menu-toggle span:nth-child(1) {
    top: 8px;
}
.menu-toggle span:nth-child(2) {
    top: 18px;
    opacity: 1;
}
.menu-toggle span:nth-child(3) {
    top: 28px;
}
.menu-toggle.active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}
@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.9);
        text-align: center;
        transition: all 0.4s ease-in-out;
    }
    .nav-links a {
        display: block;
        padding: 15px;
    }
    .menu-toggle {
        display: block;
    }
    .nav-links.active {
        display: flex;
    }
}

.nav-links {
    display: flex;
    gap: 20px;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* Hide dropdown by default for mobile */
@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        gap: 0;
        padding: 0;
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }

    .nav-links a {
        display: block;
        font-size: 1.1rem;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

    /* Active class to show dropdown */
    .nav-links.active {
        max-height: 300px; /* Adjust based on content */
        opacity: 1;
        padding: 10px 0;
    }

    .nav-links.active a {
        opacity: 1;
        transform: translateY(0);
    }

    .menu-toggle {
        display: block; /* Show menu toggle on mobile */
    }
}






.icon-menu {
    display: none;
  }
  @media (max-width: 768px) {
    .icon-menu {
        --gap: 5px;
        --height-bar: 2.5px;
        --pos-y-bar-one: 0;
        --pos-y-bar-three: 0;
        --scale-bar: 1;
        --rotate-bar-one: 0;
        --rotate-bar-three: 0;
        width: 25px;
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        cursor: pointer;
        position: relative;
    }
  }
  
  .bar {
    position: relative;
    height: var(--height-bar);
    width: 100%;
    border-radius: .5rem;
    background-color: #f3f3f3;
  }
  
  .bar--1 {
    top: var(--pos-y-bar-one);
    transform: rotate(var(--rotate-bar-one));
    transition: top 200ms 100ms, transform 100ms;
  }
  
  .bar--2 {
    transform: scaleX(var(--scale-bar));
    transition: transform 150ms 100ms;
  }
  
  .bar--3 {
    bottom: var(--pos-y-bar-three);
    transform: rotate(var(--rotate-bar-three));
    transition: bottom 200ms 100ms, transform 100ms;
  }
  
  .check-icon:checked + .icon-menu > .bar--1 {
    transition: top 200ms, transform 200ms 100ms;
  }
  
  .check-icon:checked + .icon-menu > .bar--3 {
    transition: bottom 200ms, transform 200ms 100ms;
  }
  
  .check-icon:checked + .icon-menu {
    --pos-y-bar-one: calc(var(--gap) + var(--height-bar));
    --pos-y-bar-three: calc(var(--gap) + var(--height-bar));
    --scale-bar: 0;
    --rotate-bar-one: 45deg;
    --rotate-bar-three: -45deg;
  }
  /* FIN ICON-MENU */
  
  




  .card-i {
    position: relative;
    display: flex;
    width: 94%;
    height: 5em;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Light border for depth */
    background-color: rgba(21, 21, 21, 0.4); /* Dark semi-transparent */
    border-radius: 0.7em;
    padding: 1.5em;
    color: #bef264;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: auto;
}
.info-icon-i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3em;
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.67);
    background-color: rgba(137, 136, 136, 0.36);
    backdrop-filter: blur(6px);
    border-radius: 1.5em;
    overflow: hidden;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
}
.info-icon-i:hover {
    width: 16em;
    height: 10em;
    border-radius: 0.8em;
}
.info-icon-i svg {
    width: 1.5em;
    height: 1.5em;
    transition: opacity 0.3s ease;
}
.info-icon-i:hover svg {
    opacity: 0;
}
.info-content-i {
    position: absolute;
    left: 0;
    top: 0;
    width: 16em;
    height: 10em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5em;
    color: hsl(0, 0%, 85%);
    transform: translateY(100%);
    transition: transform 0.6s ease;
}
.info-icon-i:hover .info-content-i {
    transform: translateY(0);
}
.heading-i {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 0.8em;
}
.description-i {
    font-size: 0.9em;
    font-weight: lighter;
}
.learn-more-i {
    font-size: 0.7em;
    text-decoration: underline;
    cursor: pointer;
}
.hover-text-i {
    font-size: 1em;
    font-weight: 900;
    color: #3a3a3a;
}





.button-container {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    border: 1px solid  rgba(255, 255, 255, 0.2); /* Light border for depth */
    padding: 8px 8px 8px 3px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 94%;
    margin-bottom: auto;
}
.button-container:hover .glow {
    opacity: 0.5;
    filter: blur(10px);
}
.glow {
    position: absolute;
    inset: -10px;
    border-radius: 12px;
    background:  rgba(255, 255, 255, 0.2); /* Light border for depth */
    opacity: 0.1;
    filter: blur(5px);
    transition: all 0.5s ease;
}
.icon-container {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color:  rgba(255, 255, 255, 0.16); /* Light border for depth */
    padding: 8px 12px;
    border-radius: 8px;
}
.icon {
    color: #14b8a6;
    font-size: 24px;
}
.stat {
    font-size: 16px;
    font-weight: bold;
    color: white;
}
.label {
    font-size: 10px;
    color: #94a3b8;
}
.cpu, .mem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.bar-container {
    width: 6px;
    height: 32px;
    background: #1e293b;
    border-radius: 3px;
    display: flex;
    align-items: flex-end;
    padding: 2px;
}
.bar {
    width: 100%;
    border-radius: 3px;
    transition: height 0.3s ease;
}
.cpu .bar {
    height: 50%;
    background: #bef264;
}
.mem .bar {
    height: 75%;
    background: #bef264;
}
.status {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #d1d5db;
    font-size: 12px;
    font-weight: bold;
}
.status-dot {
    width: 8px;
    height: 8px;
    background:  #bef264;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
}






.content-inner {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 20px;
}
.bento-box-inner {
    background: linear-gradient(145deg, rgba(25, 25, 25, 0.6), rgba(45, 45, 45, 0.6)); /* Dark glassmorphic gradient */
    padding: 20px;
    border-radius: 10px;
    flex: 1 1 200px;
    min-width: 300px;
    min-height: 200px;
    backdrop-filter: blur(10px); /* Glassmorphism effect */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle frosted border */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    color: #f3f3f3;
}






/* From Uiverse.io by nanda248 */ 
/* The switch - the box around the slider */
.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 4em;
    height: 2em;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #585F60;
    transition: .5s;
    border-radius: 1em;
    z-index: 1;
  }
  
  .slider .circle {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 50%;
    left: 0.3em;
    bottom: 0.3em;
    background-color: #F1EEF5;
    transition: .5s;
    z-index: 5;
  }
  
  .divider {
    position: absolute;
    left: 0.65em;
    width: 0.8em;
    height: 1.4em;
    background-color: #333333;
    z-index: 10;
    border-radius: 0 2em 2em 0;
    transition: .4s;
  }
  
  .switch input:checked + .slider {
    background-color: #f3f3f3;
    z-index: 1;
  }
  
  .switch input:focus + .slider {
    box-shadow: 0 0 4px #191A28;
  }
  
  .switch input:checked + .slider .circle {
    transform: translateX(2em);
  }
  
  .switch input:checked + .slider .circle .divider {
    left: 0;
    width: 0.8em;
    border-radius: 2em 0 0 2em;
    background-color: #333333;
    z-index: 10;
  }
  


  .names {
    font-size: 1rem;
    color: #f3f3f3;
  }



  .PB-range-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 5px;
    background: #D5DBE1;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  
  .PB-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ffffff;
    cursor: pointer;
    transition: 0.3s ease-in-out;
  }
  
  .PB-range-slider::-webkit-slider-thumb:hover {
    box-shadow: 0px 0px 0px 8px rgba(255, 255, 255, 0.16);
    transition: 0.3s ease-in-out;
  }
  
  .PB-range-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #000000;
    cursor: pointer;
  }
  
  .PB-range-slider-div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #C6CACE;
    box-shadow: 0px 1px 2px 0px #1F1E241F;
  }
  
  .PB-range-slidervalue {
    font-weight: 600;
  }




  .paragraph {
    color: #f3f3f3;
    font-size: 0.8rem;
    text-align: start;
    line-height: 1.5rem;
  }





  .card-contact {
    width: 20em;
    height: 22.5em;
    background: #171717;
    transition: 1s ease-in-out;
    clip-path: polygon(
      30px 0%,
      100% 0,
      100% calc(100% - 30px),
      calc(100% - 30px) 100%,
      0 100%,
      0% 30px
    );
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    display: flex;
    flex-direction: column;
  }
  
  .card-contact span {
    font-weight: bold;
    color: white;
    text-align: center;
    display: block;
    font-size: 1em;
  }
  
  .card-contact .info-contact {
    font-weight: 400;
    color: white;
    display: block;
    text-align: center;
    font-size: 0.72em;
    margin: 1em;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .card-contact .img-contact {
    width: 4.8em;
    height: 4.8em;
    background-image: url(/assets/profile_pic.png);
    background-size: cover;
    border-radius: 15px;
    margin: auto;
  }
  
  .card-contact .share-contact {
    margin-top: 1em;
    display: flex;
    justify-content: center;
    gap: 1em;
  }
  
  .card-contact a {
    color: white;
    transition: 0.4s ease-in-out;
  }
  
  .card-contact a:hover {
    color: #bef264;
  }
  
  .card-contact button {
    padding: 0.8em 1.7em;
    display: block;
    margin: auto;
    border-radius: 25px;
    border: none;
    font-weight: bold;
    background: #ffffff;
    color: rgb(0, 0, 0);
    transition: 0.4s ease-in-out;
  }
  
  .card-contact button:hover {
    background: #bef264;
    cursor: pointer;
  }




  .flip-card {
    background-color: transparent;
    width: 350px;
    height: 200px;
    perspective: 1000px;
    color: white;
  }
  
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front, .flip-card-back {
    box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 1rem;
  }
  

.flip-card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.8s ease-in-out;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, 
                rgba(0, 0, 0, 0.3) 0px 10px 15px -5px, 
                rgba(255, 255, 255, 0.2) 0px 0px 5px inset;
    background-size: cover;
    background-position: center;
    backface-visibility: hidden;
    overflow: hidden;
}

/* Adding a glossy effect */
.flip-card-front::before,
.flip-card-back::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 50%);
    mix-blend-mode: screen;
    opacity: 0.4;
    transition: opacity 0.5s;
}

.flip-card-front {
    background-image: url(/assets/front.jpg);
}

.flip-card-back {
    background-image: url(/assets/back.jpg);
    filter: brightness(160%);
    transform: rotateY(180deg);
}




.card-services {
  position: relative;
  width: 250px;
  height: 250px;
  color: #2e2d31;
  background: #131313;
  overflow: hidden;
  border-radius: 10px;
}

.temporary_text-services {
  font-weight: bold;
  font-size: 24px;
  padding: 6px 12px;
  color: #f8f8f8;
}

.card_title-services {
  font-weight: bold;
  color: #131313;
  line-height: 15px;
}

.card_content-services {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background: #f2f2f2;
  border-top-left-radius: 20px;
  transform: translateY(150px);
  transition: transform .25s;
}

.card_content-services::before {
  content: '';
  position: absolute;
  top: -47px;
  right: -45px;
  width: 100px;
  height: 100px;
  transform: rotate(-175deg);
  border-radius: 50%;
  box-shadow: inset 48px 48px #f2f2f2;
  z-index: -1;
}

.card_subtitle-services {
  display: block;
  font-size: 12px;
  margin-bottom: 10px;
}

.card_description-services {
  font-size: 14px;
  opacity: 0;
  transition: opacity .5s;
}

.card-services:hover .card_content-services {
  transform: translateY(0);
}

.card-services:hover .card_description-services {
  opacity: 1;
  transition-delay: .25s;
}






.reduceMotionToggle {
  width: 4em;
  height: auto;
  color: #bbb;
}

.st-reduceMotionToggleBtn {
  position: relative;
  cursor: pointer;
}

.st-reduceMotionToggleBtn .reduceMotionToggleInput {
  opacity: 0;
  width: inherit;
  aspect-ratio: 1;
}

.st-reduceMotionToggleBtn svg {
  position: absolute;
  left: 0;
  width: inherit;
  height: inherit;
}
.st-reduceMotionToggleBtn svg .line {
  transform: scaleX(0);
}

.st-reduceMotionToggleBtn
  .reduceMotionToggleInput:not(:checked)
  + svg
  .ballTrace {
  animation: ballTrace_toggleMotionOff9371A 0.3s ease 0s 1 forwards,
    ballTrace_toggleMotionOff9371B 0.1s steps(2, end)
      calc(0.32s + var(--_appearOffset)) 1 forwards;
}
.st-reduceMotionToggleBtn .reduceMotionToggleInput:not(:checked) + svg .ball {
  animation: ball_toggleMotionOn9371A 0.3s ease 0s 1 forwards,
    ball_toggleMotionOn9371B 0.4s cubic-bezier(0.165, 0.84, 0.45, 1.11) 0.3s 1
      forwards;
}

.st-reduceMotionToggleBtn .reduceMotionToggleInput:checked + svg circle {
  animation: ball_toggleMotionOff9371 0.9s linear 0s 1 forwards;
}

.st-reduceMotionToggleBtn .reduceMotionToggleInput:checked + svg .line {
  animation: line_toggleMotionOff9371 0.32s cubic-bezier(0.075, 0.82, 0.165, 1)
    0.47s 1 forwards;
}

@keyframes ball_toggleMotionOff9371 {
  0% {
    transform: translateX(0px);
  }
  6.66% {
    transform: translateX(calc(var(--_toCenterXOffset) * 0.45));
  }
  13.33% {
    transform: translateX(calc(var(--_toCenterXOffset) * 0.77));
  }
  20% {
    transform: translateX(calc(var(--_toCenterXOffset) * 0.9));
  }
  26.66% {
    transform: translateX(calc(var(--_toCenterXOffset) * 0.94));
  }
  33.33% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.965 + 1px), 2px);
  }
  35% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.988), 1px);
  }
  37% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.991 + 1px), -1px);
  }
  39% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.995 - 1px), -2px);
  }
  41% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.999 + 1px), -1px);
  }
  43% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.75), 1px);
  }
  45% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);
  }
  100% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);
  }
}

@keyframes line_toggleMotionOff9371 {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes ball_toggleMotionOn9371A {
  0% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);
  }
  100% {
    transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);
  }
}

@keyframes ball_toggleMotionOn9371B {
  0% {
    transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes ballTrace_toggleMotionOff9371A {
  0% {
    opacity: 1;
    transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);
  }
  99.9% {
    opacity: 1;
    transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);
  }
}
@keyframes ballTrace_toggleMotionOff9371B {
  0% {
    opacity: 0;
    transform: translate(0px, 0px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}




.wrapper {
  --font-color-dark: #323232;
  --font-color-light: #FFF;
  --bg-color: #fff;
  --main-color: #323232;
  position: relative;
  width: 250px;
  height: 36px;
  background-color: var(--bg-color);
  border: 2px solid var(--main-color);
  border-radius: 34px;
  display: flex;
  flex-direction: row;
  box-shadow: 4px 4px var(--main-color);
}

.option {
  width: 80.5px;
  height: 28px;
  position: relative;
  top: 2px;
  left: 2px;
}

.input {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  appearance: none;
  cursor: pointer;
}

.btn {
  width: 100%;
  height: 100%;
  background-color: var(--bg-color);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.span {
  color: var(--font-color-dark);
}

.input:checked + .btn {
  background-color: var(--main-color);
}

.input:checked + .btn .span {
  color: var(--font-color-light);
}




.switch-fan {
  background-color: rgba(105, 105, 105, 0.495);
  border-radius: 30px;
  border: 4px solid rgba(58, 58, 58, 0.1);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5) inset;
  height: 48px;
  margin: 2px;
  position: relative;
  width: 120px;
  display: inline-block;
  user-select: none;
}

.switch-check-fan {
  position: absolute;
  visibility: hidden;
  user-select: none;
}

.switch-label-fan {
  cursor: pointer;
  display: block;
  height: 42px;
  text-indent: -9999px;
  width: 115px;
  user-select: none;
}

.switch-label-fan:before {
  background: #fff;
  background: -webkit-radial-gradient(45%, circle, rgb(255, 58, 58) 0%, rgb(255, 113, 113) 100%);
  border-radius: 10px;
  border: 1px solid #742323;
  box-shadow: 0 2px 5px rgba(255, 67, 48, 0.6), 0 0 5px rgba(255, 159, 109, 0.5) inset;
  content: "";
  display: block;
  height: 10px;
  left: -20%;
  position: absolute;
  top: 16px;
  transition: all 0.2s;
  width: 10px;
  z-index: 12;
  user-select: none;
}

.switch-label-fan:after {
  background: #fff;
  background: -moz-radial-gradient(45%, circle, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
  border-radius: 10px;
  border: 1px solid #111;
  box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
  content: "";
  display: block;
  height: 10px;
  right: -20%;
  position: absolute;
  top: 16px;
  transition: all 0.2s;
  width: 10px;
  z-index: 12;
  user-select: none;
}

.switch-label-fan span {
  background: linear-gradient(#4f4f4f, #2b2b2b);
  border-radius: 30px;
  border: 1px solid #1a1a1a;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 0 rgba(0, 0, 0, 0.2) inset;
  display: block;
  height: 38px;
  left: 1px;
  position: absolute;
  top: 1px;
  transition: all 0.2s linear;
  width: 53px;
  user-select: none;
}

.switch-label-fan span:before {
  background: #fff;
  background: linear-gradient(left, rgba(48, 48, 48, 0.4), rgba(34, 34, 34, 0.4));
  border-radius: 30px 10px 10px 30px;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2) inset;
  content: "";
  display: block;
  height: 33px;
  left: 2px;
  position: absolute;
  top: 2px;
  width: 21px;
  user-select: none;
}

.switch-label-fan span:after {
  background: #292929;
  background: linear-gradient(right, rgba(48, 48, 48, 0.4), rgba(34, 34, 34, 0.4));
  border-radius: 10px 30px 30px 10px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2) inset;
  content: "";
  display: block;
  height: 33px;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 21px;
  user-select: none;
}

.switch-check-fan:checked + .switch-label-fan span {
  left: 59px;
}

.switch-check-fan:checked + .switch-label-fan:before {
  background: -webkit-radial-gradient(45%, circle, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
  border: 1px solid #111;
  box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
  user-select: none;
}

.switch-check-fan:checked + .switch-label-fan:after {
  background: -webkit-radial-gradient(45%, circle, lightgreen 0%, lightgreen 100%);
  border: 1px solid #004562;
  box-shadow: 0 2px 5px green, 0 0 5px green inset;
  user-select: none;
}




.checkbox-wrapper-51 input[type="checkbox"] {
  visibility: hidden;
  display: none;
}

.checkbox-wrapper-51 .toggle {
  position: relative;
  display: block;
  width: 38px;
  height: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(0, 0, 0);
  margin-left: 0.5rem;
}

.checkbox-wrapper-51 .toggle:before {
  content: "";
  position: relative;
  top: 1px;
  left: 1px;
  width: 40px;
  height: 22px;
  display: block;
  background: #444;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.checkbox-wrapper-51 .toggle span {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  display: block;
  background: #222;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.75);
  transition: all 0.2s ease;
}

.checkbox-wrapper-51 .toggle span svg {
  margin: 7px;
  fill: none;
  margin-top: 0.45rem;
  margin-left: 0.45rem;
}

.checkbox-wrapper-51 .toggle span svg path {
  stroke: #888;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
  transition: all 0.5s linear;
}

.checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle:before {
  background: #0279f5;
}

.checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle span {
  transform: translateX(18px);
}

.checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle span path {
  stroke: #ffffff;
  stroke-dasharray: 25;
  stroke-dashoffset: 25;
}


/* Temp control section */
.ac-container-ac {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.2rem;
  padding: 0.5rem;
  background: transparent;
  border-radius: 0.75rem;
  max-width: 160px;
  margin: auto;
  margin-top: 0.5rem;
}

.temp-display-ac {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.temp-btn-ac {
  background: transparent;
  border: none;
  border-radius: 0.3rem;
  padding: 0.3rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.temp-btn-ac:hover {
  background: #ffffff;
  transform: scale(1.05);
}

.temp-value-ac {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  min-width: 40px;
  text-align: center;
}


/* Mode selector */
.mydict-acmode .mydict-inner-acmode {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  justify-content: center;
  font-size: 0.8rem;
}

.mydict-acmode input[type="radio"] {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.mydict-acmode input[type="radio"]:checked + .mydict-span-acmode {
  box-shadow: 0 0 0 0.0625em #0279f5;
  background-color: #1a1a2f;
  z-index: 1;
  color: #4ea3ff;
}

.mydict-label-acmode .mydict-span-acmode {
  display: block;
  cursor: pointer;
  background-color: #2a2a2a;
  padding: 0.375em .75em;
  position: relative;
  margin-left: .0625em;
  box-shadow: 0 0 0 0.0625em #555;
  letter-spacing: .05em;
  color: #cccccc;
  text-align: center;
  transition: background-color .5s ease;
}

.mydict-label-acmode:first-child .mydict-span-acmode {
  border-radius: .375em 0 0 .375em;
}

.mydict-label-acmode:last-child .mydict-span-acmode {
  border-radius: 0 .375em .375em 0;
}




.music-player-song {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  color: #fff;
  font-family: 'Sen';
  text-align: center;
}

.cover-song img {
  height: 40px;
  margin-bottom: 15px;
}

.track-info-song {
  margin-bottom: 10px;
  margin-right: auto;
  margin-left: 0.8rem;
}

.track-title-song {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-align: start;
}

.track-artist-song {
  font-size: 14px;
  color: #bbb;
  margin-bottom: 0.5rem;
  text-align: start;
}

.time-song {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;
  height: 37px;
  font-size: 13px;
  color: #888;
  margin: 8px 0 16px;
  margin-top: -0.3rem;
}

.controls-song {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.btn-song {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.btn-song:hover {
  color: #1db954;
}





/* level-zone-sound settings 👇 */

.slider-zone-sound {
  --slider-width: 100%;
  --slider-height: 6px;
  --slider-bg: #888;
  --slider-border-radius: 999px;
  --level-color: #fff;
  --level-transition-duration: .1s;
  --icon-margin: 15px;
  --icon-color: var(--slider-bg);
  --icon-size: 25px;

  cursor: pointer;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  width: 90%;
  margin-left: 1rem;
}

.slider-zone-sound .volume-zone-sound {
  display: inline-block;
  vertical-align: top;
  margin-right: var(--icon-margin);
  color: var(--icon-color);
  width: var(--icon-size);
  height: auto;
}

.slider-zone-sound .level-zone-sound {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--slider-width);
  height: var(--slider-height);
  background: var(--slider-bg);
  overflow: hidden;
  border-radius: var(--slider-border-radius);
  transition: height var(--level-transition-duration);
  cursor: inherit;
}

.slider-zone-sound .level-zone-sound::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0;
  height: 0;
  box-shadow: -200px 0 0 200px var(--level-color);
}

.slider-zone-sound:hover .level-zone-sound {
  height: calc(var(--slider-height) * 2);
}





.checkbox-wrapper-35 .switch {
  display: none;
}

.checkbox-wrapper-35 .switch + label {
  margin-right: -0.5rem;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: #888;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 15px;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-wrapper-35 .switch + label::before,
  .checkbox-wrapper-35 .switch + label::after {
  content: '';
  display: block;
}

.checkbox-wrapper-35 .switch + label::before {
  background-color: #888;
  border-radius: 500px;
  height: 15px;
  margin-right: 8px;
  -webkit-transition: background-color 0.125s ease-out;
  transition: background-color 0.125s ease-out;
  width: 25px;
}

.checkbox-wrapper-35 .switch + label::after {
  background-color: #fff;
  border-radius: 13px;
  box-shadow: 0 3px 1px 0 rgba(37, 34, 71, 0.05), 0 2px 2px 0 rgba(37, 34, 71, 0.1), 0 3px 3px 0 rgba(37, 34, 71, 0.05);
  height: 13px;
  left: 1px;
  position: absolute;
  top: 1px;
  -webkit-transition: -webkit-transform 0.125s ease-out;
  transition: -webkit-transform 0.125s ease-out;
  transition: transform 0.125s ease-out;
  transition: transform 0.125s ease-out, -webkit-transform 0.125s ease-out;
  width: 13px;
}

.checkbox-wrapper-35 .switch + label .switch-x-text {
  display: block;
  margin-right: .3em;
}

.checkbox-wrapper-35 .switch + label .switch-x-toggletext {
  display: block;
  font-weight: bold;
  height: 15px;
  overflow: hidden;
  position: relative;
  width: 25px;
}

.checkbox-wrapper-35 .switch + label .switch-x-unchecked,
  .checkbox-wrapper-35 .switch + label .switch-x-checked {
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
  transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
  transition: transform 0.125s ease-out, opacity 0.125s ease-out;
  transition: transform 0.125s ease-out, opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
}

.checkbox-wrapper-35 .switch + label .switch-x-unchecked {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

.checkbox-wrapper-35 .switch + label .switch-x-checked {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

.checkbox-wrapper-35 .switch + label .switch-x-hiddenlabel {
  position: absolute;
  visibility: hidden;
}

.checkbox-wrapper-35 .switch:checked + label::before {
  background-color: #1db954;
}

.checkbox-wrapper-35 .switch:checked + label::after {
  -webkit-transform: translate3d(10px, 0, 0);
  transform: translate3d(10px, 0, 0);
}

.checkbox-wrapper-35 .switch:checked + label .switch-x-unchecked {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

.checkbox-wrapper-35 .switch:checked + label .switch-x-checked {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}




/*------ Settings ------*/
.container-sound {
  --color: #888;
  --size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-size: var(--size);
  user-select: none;
  fill: var(--color);
  margin-right: 1.5rem;
}

.container-sound .mute-sound {
  position: absolute;
  animation: keyframes-fill .5s;
}

.container-sound .voice-sound {
  position: absolute;
  display: none;
  animation: keyframes-fill .5s;
}

/* ------ On check event ------ */
.container-sound input:checked ~ .mute-sound {
  display: none;
}

.container-sound input:checked ~ .voice-sound {
  display: block;
}

/* ------ Hide the default checkbox ------ */
.container-sound input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* ------ Animation ------ */
@keyframes keyframes-fill {
  0% {
    transform: rotate(0deg) scale(0);
    opacity: 0;
  }

  50% {
    transform: rotate(-10deg) scale(1.2);
  }
}



.button-back {
  width: 155px;
  height: 56px;
  overflow: hidden;
  border: none;
  color: #fff;
  background: none;
  position: relative;
  padding-bottom: 2em;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
}

.button-back > div,
.button-back > .icon-back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
}

.button-back:before {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: bottom right;
  background: currentColor;
  transition: transform 0.25s ease-out;
}

.button-back:hover:before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.button-back .clone-back > *,
.button-back .text-back > * {
  opacity: 1;
  font-size: 1.3rem;
  transition: 0.2s;
  margin-left: 4px;
}

.button-back .clone-back > * {
  transform: translateY(60px);
}

.button-back:hover .clone-back > * {
  opacity: 1;
  transform: translateY(0px);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.button-back:hover .text-back > * {
  opacity: 1;
  transform: translateY(-60px);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.button-back:hover .clone-back > :nth-child(1) {
  transition-delay: 0.15s;
}

.button-back:hover .clone-back > :nth-child(2) {
  transition-delay: 0.2s;
}

.button-back:hover .clone-back > :nth-child(3) {
  transition-delay: 0.25s;
}

.button-back:hover .clone-back > :nth-child(4) {
  transition-delay: 0.3s;
}

/* icon-back style and hover */
.button-back .icon-back {
  width: 20px;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-50deg);
  transition: 0.2s ease-out;
}

.button-back:hover .icon-back {
  transform: translateY(-50%) rotate(-90deg);
}