/* 4cardhover Area 2 img hover animation code  */

.cardcontainer{

        display: grid;
        place-items: center;
        font-family: 'Rubik', sans-serif;
        margin: 0;
        height: 100vh;
        box-sizing: border-box;
        
}
.cardhoverpage-content {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-behavior: smooth;
        gap: 1rem;
        padding: 1rem;
        scroll-snap-type: x mandatory;
      }
      

    
    @media (min-width: 600px) {
    .cardhoverpage-content {
    grid-template-columns: repeat(2, 1fr);
    }
    }
    
    @media (min-width: 800px) {
    .cardhoverpage-content {
    grid-template-columns: repeat(4, 1fr);
    }
    }

    .cardhoverpage-content::-webkit-scrollbar {
        display: none;
      }
    
    .cardhover {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 1rem;
    width: 100%;
    text-align: center;
    color: whitesmoke;
    background-color: whitesmoke;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1),
    0 2px 2px rgba(0,0,0,0.1),
    0 4px 4px rgba(0,0,0,0.1),
    0 8px 8px rgba(0,0,0,0.1),
    0 16px 16px rgba(0,0,0,0.1);

    scroll-snap-align: start;
    flex: 0 0 85%; /* Mobile default */
    min-width: 85%;
    border-radius: 0px 50px;
  
    }
    
        /* Tablet - 2 cards visible */
        @media (min-width: 600px) {
                .cardhover {
                flex: 0 0 51%;
                min-width: 47%;
                border-radius: 0px 50px;
                }
        }
        
        /* Desktop - 4 cards visible */
        @media (min-width: 1024px) {
                .cardhover {
                flex: 0 0 23%;
                min-width: 23%;
                border-radius: 0px 50px;
                }
        }
        
    .cardhover:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    background-size: cover;
    background-position: center;
    transition: transform 1050ms cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
    }
    
    .cardhover:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    pointer-events: none;
    background-image: linear-gradient(
    to bottom,
    hsla(0, 0%, 0%, 0) 0%,
    hsla(0, 0%, 0%, 0.009) 11.7%,
    hsla(0, 0%, 0%, 0.034) 22.1%,
    hsla(0, 0%, 0%, 0.072) 31.2%,
    hsla(0, 0%, 0%, 0.123) 39.4%,
    hsla(0, 0%, 0%, 0.182) 46.6%,
    hsla(0, 0%, 0%, 0.249) 53.1%,
    hsla(0, 0%, 0%, 0.320) 58.9%,
    hsla(0, 0%, 0%, 0.394) 64.3%,
    hsla(0, 0%, 0%, 0.468) 69.3%,
    hsla(0, 0%, 0%, 0.540) 74.1%,
    hsla(0, 0%, 0%, 0.607) 78.8%,
    hsla(0, 0%, 0%, 0.668) 83.6%,
    hsla(0, 0%, 0%, 0.721) 88.7%,
    hsla(0, 0%, 0%, 0.762) 94.1%,
    hsla(0, 0%, 0%, 0.790) 100%
    );
    transform: translateY(-50%);
    transition: transform 1400ms cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    .cardhover:nth-child(1):before {
    background-image: url('../home/card/card_1.JPG');
    }
    .cardhover:nth-child(2):before {
    background-image: url('../home/card/card_2.JPG');
    }
    .cardhover:nth-child(3):before {
    background-image: url('../home/card/card_3.JPG');
    }
    .cardhover:nth-child(4):before {
    background-image: url('../home/card/card_4.JPG');
    }
    .cardhover:nth-child(5):before {
    background-image: url('../home/card/card_5.JPG');
    background-image: url(../home/card/card_5.jpg);
    }
    .cardhover:nth-child(6):before {
    background-image: url('../home/card/card_6.JPG');
    }

    .cardhover:nth-child(7):before {
    background-image: url('../home/card/card_7.jpg');
    }

    .cardhover:nth-child(8):before {
    background-image: url('../home/card/card_8.jpg');
    }


    
    .cardhovercontent {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1rem;
    transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1;
    }
    
    .cardhovercontent > * + * {
    margin-top: 1rem;
    }
    
    .cardhovertitle {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.2;
    }
    
    .cardhovercopy {
    font-family: 'Cardo', serif;
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.35;
    color: #cfcccc !important;

    }
    
    .cardhoverbtn {
    cursor: pointer;
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.65rem;
    font-weight: bold;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
    color: white;
    background-color: black;
    border: none;
    }
    
    .cardhoverbtn:hover {
    background-color: #1a1a1a;
    }
    
    .cardhoverbtn:focus {
    outline: 1px dashed yellow;
    outline-offset: 3px;
    }
    
    @media (hover: hover) and (min-width: 600px) {
                .cardhover:after {
                transform: translateY(0);
                }
                
                .cardhovercontent {
                transform: translateY(calc(100% - 4.5rem));
                }
                
                .cardhovercontent > *:not(.title) {
                opacity: 0;
                transform: translateY(1rem);
                transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1), opacity 700ms cubic-bezier(0.19, 1, 0.22, 1);
                }
                
                .cardhover:hover,
                .cardhover:focus-within {
                align-items: center;
                }
                
                .cardhover:hover:before {
                transform: translateY(-4%);
                }
                
                .cardhover:hover:after {
                transform: translateY(-50%);
                }
                
                .cardhover:hover .cardhovercontent {
                transform: translateY(0);
                }
                
                .cardhover:hover .cardhovercontent > *:not(.title) {
                opacity: 1;
                transform: translateY(0);
                transition-delay: 87.5ms;
                }
                
                .cardhover:focus-within:before,
                .cardhover:focus-within:after,
                .cardhover:focus-within .content,
                .cardhover:focus-within .content > *:not(.title) {
                transition-duration: 0s;
                }
    }

    @keyframes mobileSlideUpFadeIn {
        0% {
          opacity: 0;
          transform: translateY(50px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      @media (max-width: 599px) {
        .cardhover.mobile-animate {
          opacity: 0;
          transform: translateY(50px);
          animation: mobileSlideUpFadeIn 0.8s ease-out forwards;
        }
      }
      


/* slide */

.slider-container {
        position: relative;
        width: 100%;
        overflow: hidden;
      }
      
      .slider-arrow {
        position: absolute;
        top: 40%;
        transform: translateY(175%);
        z-index: 5;
        background-color: rgb(19 5 5 / 46%);
        border: none;
        color: white;
        font-size: 1.5rem;
        padding: 0.5rem 1rem;
        cursor: pointer;
        border-radius: 50%;
        display: block;
      }
      
      .slider-arrow.left {
        left: 10px;
      }
      
      .slider-arrow.right {
        right: 10px;
      }
      
      @media (max-width: 599px) {
        .slider-arrow {
          display: block;
        }
      
        .cardhoverpage-content {
          display: flex;
          flex-wrap: nowrap;
          overflow-x: auto;
          scroll-behavior: smooth;
          gap: 1rem;
          padding: 1rem;
          scroll-snap-type: x mandatory;
        }
      
        .cardhover {
          flex: 0 0 109%;
          scroll-snap-align: start;
          min-width: 85%;
          border-radius: 0px 50px;
        }
      
        .cardhoverpage-content::-webkit-scrollbar {
          display: none;
        }
      }