@import url('root.css');

/* #landing-view{
    width: 100%;
    height: 95vh;
} */

.shipone-bg::before{
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .4;
    background-image: url('../img/logo/Logo 1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: clamp(400px, 35vw, 500px);
}

.title-heading{
    font-size:clamp(2rem,4.7vw,4.6rem);
    /* clamp(2rem,10vw,4.6rem) */

}
.title-subheading{
    text-transform: uppercase;
    font-size: clamp(1.5rem, 3vw,2.5rem);
    /* clamp(1.3rem,,2.5rem) */
}

.img-box{
    position: absolute;
    width: var(--box-width);
    height: var(--box-height);
    cursor: pointer;
    background-color: #33333380;
    background-size: cover;
    background-position:center;
    background-blend-mode: multiply;
}

.img-box[data-level='1']{
    /* centering the 1st level */
    left: 50%;
    top:var(--level-1-top);
    transform: translate(-50%);
    /* centering ends here  */

    z-index: 5;
    transition: 
    height 200ms 100ms ease-in,
    width 200ms 100ms ease-in;
}


.img-box[data-level='1']:hover{
    width: var(--box-width-hover);
    height: var(--box-height-hover);
}

.img-box[data-level='2']{
    top: var(--level-2-top); 
    z-index: 4;
}
.img-box[data-level='3']{
    top: var(--level-3-top); 
    z-index: 3;
}
.img-box[data-level='2'][data-position='right']{
    left: var(--level-2-spread);
}

.img-box[data-level='2'][data-position='left']{
    right: var(--level-2-spread);
}

.img-box[data-level='3'][data-position='right']{
    left: var(--level-3-spread);
}

.img-box[data-level='3'][data-position='left']{
    right: var(--level-3-spread);
}

/* img-box animation */
.img-box[data-level='1'].cust-animation{
    animation: onload-slide-lvl-1 1100ms ease-out;
}
.img-box[data-level='2'][data-position='right'].cust-animation{
    animation: onload-slide-lvl-2-right 1200ms ease-out;
}
.img-box[data-level='2'][data-position='left'].cust-animation{
    animation: onload-slide-lvl-2-left 1200ms ease-out;
}
.img-box[data-level='3'][data-position='right'].cust-animation{
    animation: onload-slide-lvl-3-right 1200ms ease-out;
}
.img-box[data-level='3'][data-position='left'].cust-animation{
    animation: onload-slide-lvl-3-left 1200ms ease-out;
}



.box-shadow{
    box-shadow: 0 0 18px 8px #00000080;
}

/* media queries for landing-view */

@media (min-width: 767px) {
    #landing-view{
        width: 100%;
        height: 100vh;
    }
}

@media (max-width: 767px) {
    .sm-80{
        height: 70vh !important;
    }
    .img-box{
        --box-height : 80%;
        --box-height-hover: 80%;
    }
}


/* media queries for img-box */

@media (max-width:1039px) {
    .img-box{
        --level-1-top:  15%;
        --level-2-top:  15%;
        --level-3-top:  15%;

        --level-2-spread: calc(39% + 5px);
        --level-3-spread: calc(50% + 5px);
    }
}

@media (max-width:769px) {
    .img-box{
        --level-1-top: 10%;
        --level-2-top: 10%;
        --level-3-top: 10%;

        --level-2-spread: calc(50% + 5px);
        --level-3-spread: calc(65% + 5px);
    }
}

@media (max-width:590px) {
    .img-box{
        --level-1-top: 10%;
        --level-2-top: 10%;
        --level-3-top: 10%;

        --level-2-spread: calc(40%);
        --level-3-spread: calc(50%);
    }
}

@media (max-width:420px) {
    .img-box{
        --level-1-top: 10%;
        --level-2-top: 10%;
        --level-3-top: 10%;

        --level-2-spread: calc(32%);
        --level-3-spread: calc(40%);
    }
}


/*  */



.text-card{
    visibility: hidden;
    opacity: 0;
    transition: opacity 150ms 300ms ease-out;
}

.img-box[data-level='1']:hover .text-card{
    visibility: visible;
    opacity: 1;
}