/*body {*/
/*    margin: 0;*/
/*}*/

/*.container {*/
/*    display: flex;*/
/*    gap: 10px;*/
/*    flex-wrap: wrap;*/
/*    justify-content: center;*/
/*    width: 100%;*/
/*    align-items: center;*/
/*    margin: 0 0 88px 0;*/
/*}*/

/*.heading-container{*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    padding-top: 25px;*/
/*    margin: 0;*/
/*    flex-wrap: wrap;*/
/*    width: 100%;*/
/*    align-items: center;*/
/*}*/

/*.main-heading {*/
/*    font-size: 2rem;*/
/*    text-align: center;*/
/*    font-family: 'Montserrat', sans-serif;*/
/*    width: 75vw;*/
/*}*/

/*#iceK {*/
/*    width: 80%*/
/*}*/

/*#Mont{*/
/*    width: 85%*/
/*}*/

/*.box {*/
/*    width: 15vw;*/
/*    height: 560px;*/
/*    position: relative;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    border: 1px solid white;*/
/*    overflow: hidden;*/
/*    transition: cursor 0.2s ease;*/
/*}*/

/*a.box.moving-div {*/
/*    background: black;*/
/*}*/


/*.inside-text {*/
/*    font-size: 2rem;*/
/*    color: white;*/
/*}*/

/*!* Background image with 20% opacity by default *!*/
/*.box::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background-image: url('../assets/4.jpg'); !* Same image for all *!*/
/*    background-size: 500% 100%; !* Split image into 5 equal parts *!*/
/*    opacity: 0.65;*/
/*    background-repeat: no-repeat;*/
/*    transition: opacity 0.3s ease;*/
/*    z-index: 1;*/
/*}*/

/*!* Tint effect overlay (Initially transparent) *!*/
/*.box::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: transparent; !* No tint initially *!*/
/*    transition: background 0.3s ease;*/
/*    z-index: 1; !* Above background but below logo *!*/
/*}*/

/*!* On hover, all boxes get full opacity *!*/
/*.box:hover::before {*/
/*    opacity: 1; !* 100% opacity *!*/
/*}*/

/*!* Change cursor on hover *!*/
/*.box:hover {*/
/*    cursor: pointer;*/
/*}*/

/*.left-design {*/
/*    border-radius: 18px 0px 0px 18px;*/
/*}*/

/*.right-design {*/
/*    border-radius: 0px 18px 18px 0px;*/
/*}*/

/*!* Assign different portions of the image to each box *!*/
/*.box:nth-child(1)::before { background-position: 0% 0; }*/
/*.box:nth-child(2)::before { background-position: 25% 0; }*/
/*.box:nth-child(3)::before { background-position: 45% 0; }*/
/*.box:nth-child(4)::before { background-position: 73% 0; }*/
/*!*.box:nth-child(5)::before { background-position: 100% 0; }*!*/

/*.box:nth-child(5)::before {*/
/*    background-image: url('../assets/curtains.jpg'); !* Same image for all *!*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*}*/


/*.box:nth-child(1):hover::before {*/
/*    opacity: 1;*/
/*}*/
/*.box:nth-child(2):hover::before {*/
/*    opacity: 1;*/
/*}*/
/*.box:nth-child(3):hover::before {*/
/*    opacity: 1;*/
/*}*/
/*.box:nth-child(4):hover::before {*/
/*    opacity: 1;*/
/*}*/
/*.box:nth-child(5):hover::before {*/
/*    opacity: 1;*/
/*}*/

/*!* Add  tint effect when hovering over  *!*/
/*.box:nth-child(1):hover::after {*/
/*    background: rgba(255, 0, 0, 0.22);*/
/*}*/
/*!* Add  tint effect when hovering over  *!*/
/*.box:nth-child(2):hover::after {*/
/*    background: rgba(0, 217, 255, 0.22);*/
/*}*/
/*!* Add  tint effect when hovering over  *!*/
/*.box:nth-child(3):hover::after {*/
/*    background: rgba(255, 213, 0, 0.22);*/
/*}*/
/*!* Add  tint effect when hovering over  *!*/
/*.box:nth-child(4):hover::after {*/
/*    background: rgba(0, 13, 255, 0.22);*/
/*}*/

/*!* Centered logo *!*/
/*.logo {*/
/*    position: relative;*/
/*    max-width: 95%;*/
/*    z-index: 2; !* Ensure the logo stays on top *!*/
/*}*/

/*p {*/
/*    color: black;*/
/*    font-size: 18px;*/
/*    font-weight: bold;*/
/*    position: relative;*/
/*    z-index: 2;*/
/*}*/

/*.main-container{*/
/*    height: 100vh;*/
/*}*/


/*@keyframes fadeInOpacity {*/
/*    0% {*/
/*        opacity: 0;*/
/*    }*/
/*    100% {*/
/*        opacity: 1;*/
/*    }*/
/*}*/

/*.fade-in {*/
/*    opacity: 1;*/
/*    animation-name: fadeInOpacity;*/
/*    animation-iteration-count: 1;*/
/*    animation-timing-function: ease-in;*/
/*    animation-duration: 2s;*/
/*}*/

/*.moving-div {*/
/*    transform: translateX(-100%); !* Initially hidden *!*/
/*    animation: slideIn 1s ease-out forwards;*/
/*}*/

/*.moving-div:nth-child(1) {*/
/*    animation-delay: 0s; !* First one moves immediately *!*/
/*}*/

/*.moving-div:nth-child(2) {*/
/*    animation-delay: 0.3s; !* Moves 0.3s after the first *!*/
/*}*/

/*.moving-div:nth-child(3) {*/
/*    animation-delay: 0.6s; !* Moves 0.6s after the first *!*/
/*}*/

/*.moving-div:nth-child(4) {*/
/*    animation-delay: 0.9s; !* Moves 0.9s after the first *!*/
/*}*/

/*.moving-div:nth-child(5) {*/
/*    animation-delay: 1.2s; !* Moves 1.2s after the first *!*/
/*}*/

/*@keyframes slideIn {*/
/*    from {*/
/*        transform: translateX(-100%);*/
/*    }*/
/*    to {*/
/*        transform: translateX(0);*/
/*    }*/
/*}*/

/*@media (max-width: 768px) {*/
/*    .container {*/
/*        align-items: center;*/
/*    }*/

/*    .box {*/
/*        width: 90%;*/
/*        height: 150px;*/
/*    }*/
/*}*/


/*@media (max-width: 480px) {*/
/*    .logo {*/
/*        max-width: 50%;*/
/*    }*/
/*}*/

/*@media (min-width: 200px) and (max-width: 768px) {*/
/*    .main-container {*/
/*        height: auto;*/
/*    }*/
/*    .logo {*/
/*        max-width: 60%;*/
/*    }*/
/*    .left-design {*/
/*        border-radius: 0;*/
/*    }*/
/*    .right-design {*/
/*        border-radius: 0;*/
/*    }*/
/*    .moving-div {*/
/*        border-radius: 10px; !important;*/
/*    }*/
/*    .box:nth-child(1)::before { background-position: 45% 0; }*/
/*    .box:nth-child(2)::before { background-position: 45% 0; }*/
/*    .box:nth-child(3)::before { background-position: 45% 0; }*/
/*    .box:nth-child(4)::before { background-position: 43% 0; }*/

/*}*/

/*@media (min-width: 768px) and (max-width: 1200px) {*/
/*    .box{*/
/*        height: 35vh;*/
/*    }*/
/*}*/

/*@media (min-width: 768px) and  (max-width: 1200px) and (max-height: 1366px) {*/
/*    .box{*/
/*        height: 25vh;*/
/*        margin-top: 80px;*/
/*    }*/
/*    .inside-text{*/
/*        font-size: 2rem;*/
/*        text-align: center;*/
/*    }*/
/*}*/

/*!* *!*/

/*@media (min-width: 768px) and (max-width: 1200px) {*/
/*    .box{*/
/*        height: 35vh;*/
/*    }*/
/*}*/

/*@media (min-width: 768px) and (max-width: 1200px) and (max-height: 1366px) {*/
/*    .box{*/
/*        height: 25vh;*/
/*        margin-top: 80px;*/
/*    }*/

/*    .inside-text{*/
/*        font-size: 2rem;*/
/*        text-align: center;*/
/*    }*/
/*}*/

/*@media (min-width: 2000px) and (max-width: 2399px)  {*/
/*    .moving-div {*/
/*        max-height: 750px;*/
/*        min-height: 750px;*/
/*    }*/
/*}*/

/*@media (min-width: 2400px) and (max-width: 3100px)  {*/
/*    .moving-div {*/
/*        max-height: 940px;*/
/*        min-height: 940px;*/
/*    }*/
/*}*/



body {
    margin: 0;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the boxes horizontally */
    align-items: center; /* Center the boxes vertically */
    width: 100%;
    min-height: 560px; /* Ensure container takes up full height */
    gap: 5px;
    margin: 0;
}

/*.heading-container {*/
/*    position: absolute;*/
/*    justify-content: center;*/
/*    top: 0;*/
/*    padding-top: 25px;*/
/*    margin: 0;*/
/*    flex-wrap: wrap;*/
/*    width: 100%;*/
/*    align-items: center;*/
/*}*/

.heading-container {
    position: absolute;
    top: 0; /* Place at the top */
    left: 50%; /* Position from the left */
    transform: translateX(-50%); /* Offset by 50% of the width to center */
    width: 100%;
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    padding: 70px 0; /* Optional padding for spacing */
    text-align: center; /* Center the text inside */
    z-index: 2; /* Ensure it's above other content */
}

.main-heading {
    font-size: 2rem;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    width: 75vw;
    font-weight: normal;
}

.box {
    width: 14.7vw;
    height: 560px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid white;
    overflow: hidden;
    transition: cursor 0.2s ease;
}

a.box.moving-div {
    background: black;
}

.inside-text {
    font-size: 2rem;
    color: white;
}

/* Background image with 20% opacity by default */
.box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/4.jpg'); /* Same image for all */
    background-size: 500% 100%; /* Split image into 5 equal parts */
    opacity: 75%;
    background-repeat: no-repeat;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Tint effect overlay (Initially transparent) */
.box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* No tint initially */
    transition: background 0.3s ease;
    z-index: 1; /* Above background but below logo */
}

/* On hover, all boxes get full opacity */
.box:hover::before {
    opacity: 1; /* 100% opacity */
}

/* Change cursor on hover */
.box:hover {
    cursor: pointer;
}

.left-design {
    border-radius: 18px 0px 0px 18px;
}

.right-design {
    border-radius: 0px 18px 18px 0px;
}

#iceK {
    width: 80%
}

/* Assign different portions of the image to each box */
.box:nth-child(1)::before { background-position: 0% 0; }
.box:nth-child(2)::before { background-position: 25% 0; }
.box:nth-child(3)::before { background-position: 45% 0; }
.box:nth-child(4)::before { background-position: 73% 0; }
/*.box:nth-child(5)::before { background-position: 100% 0; }*/

.box:nth-child(5)::before {
    background-image: url('../assets/curtains.jpg'); /* Same image for all */
    background-size: cover;
    background-position: center;
}


.box:nth-child(1):hover::before {
    opacity: 1;
}
.box:nth-child(2):hover::before {
    opacity: 1;
}
.box:nth-child(3):hover::before {
    opacity: 1;
}
.box:nth-child(4):hover::before {
    opacity: 1;
}
.box:nth-child(5):hover::before {
    opacity: 1;
}

/* Add  tint effect when hovering over  */
.box:nth-child(1):hover::after {
    background: rgba(255, 0, 0, 0.22);
}
/* Add  tint effect when hovering over  */
.box:nth-child(2):hover::after {
    background: rgba(0, 217, 255, 0.22);
}
/* Add  tint effect when hovering over  */
.box:nth-child(3):hover::after {
    background: rgba(255, 213, 0, 0.22);
}
/* Add  tint effect when hovering over  */
.box:nth-child(4):hover::after {
    background: rgba(0, 13, 255, 0.22);
}

/* Centered logo */
.logo {
    position: relative;
    max-width: 95%;
    z-index: 2; /* Ensure the logo stays on top */
}

p {
    color: black;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    z-index: 2;
}

.main-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0 12%;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

.moving-div {
    transform: translateX(-100%); /* Initially hidden */
    animation: slideIn 1s ease-out forwards;
}

.moving-div:nth-child(1) {
    animation-delay: 0s; /* First one moves immediately */
}

.moving-div:nth-child(2) {
    animation-delay: 0.3s; /* Moves 0.3s after the first */
}

.moving-div:nth-child(3) {
    animation-delay: 0.6s; /* Moves 0.6s after the first */
}

.moving-div:nth-child(4) {
    animation-delay: 0.9s; /* Moves 0.9s after the first */
}

.moving-div:nth-child(5) {
    animation-delay: 1.2s; /* Moves 1.2s after the first */
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@media (max-width: 480px) {
    .logo {
        max-width: 50%;
    }
}

@media (min-width: 200px) and (max-width: 768px) {
    .container {
        align-items: center;
        justify-content: center; /* Center items vertically on smaller screens */
    }

    .box {
        width: 100%;
        height: 200px;
    }
    .main-container {
        height: auto;
        margin-top: 220px;
        margin-bottom: 50px;
    }
    .logo {
        max-width: 60%;
    }
    .left-design {
        border-radius: 0;
    }
    .right-design {
        border-radius: 0;
    }
    .moving-div {
        border-radius: 10px; !important;
    }
    .main-heading {
        font-size: 1.25rem;
        width: 90%;
    }
    .box:nth-child(1)::before {
        background-image: url('../assets/newRaw.jpg'); /* Same image for all */
        background-size: cover;
        background-position: center;
        background-position: 50% 0;
    }
    .box:nth-child(2)::before {
        background-image: url('../assets/newRaw.jpg'); /* Same image for all */
        background-size: cover;
        background-position: center;
        background-position: 50% 0;
    }
    .box:nth-child(3)::before {
        background-position: 50% 0;
        background-image: url('../assets/newRaw.jpg'); /* Same image for all */
        background-size: cover;
        background-position: center;
    }
    .box:nth-child(4)::before {
        background-image: url('../assets/newRaw.jpg'); /* Same image for all */
        background-size: cover;
        background-position: center;
        background-position: 50% 0;
    }
}

/*@media (min-width: 768px) and (max-width: 1200px) {*/
/*    .box {*/
/*        height: 35vh;*/
/*    }*/
/*}*/

/*@media (min-width: 768px) and  (max-width: 1200px) and (max-height: 1366px) {*/
/*    .box {*/
/*        height: 25vh;*/
/*        margin-top: 80px;*/
/*    }*/

/*    .inside-text {*/
/*        font-size: 2rem;*/
/*        text-align: center;*/
/*    }*/
/*}*/

@media (min-width: 769px) and (max-width: 1198px) {

    .box{
        width: 14vw;
    }
}


@media (min-width: 769px) and (max-width: 1023px) {
    .box.moving-div {
        min-height: 360px;
        max-height: 360px;
    }
}
@media (min-width: 1024px) and (max-width: 1359px) {
    .box.moving-div {
        min-height: 410px;
        max-height: 410px;
    }
}
@media (min-width: 1360px) and (max-width: 1700px) {
    .box.moving-div {
        min-height: 500px;
        max-height: 500px;
    }
}

@media (min-width: 2000px) and (max-width: 2500px) {
    .box.moving-div {
        max-height: 750px;
        min-height: 750px;
    }
}

@media (min-width: 2400px) and (max-width: 3100px) {
    .box.moving-div {
        max-height: 840px;
        min-height: 840px;
    }
}