:root{
    --orange:#ff7f50;
    --blue:#7FCDCD;
}

*{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    list-style: none;
    text-decoration: none;
    
    

   
}


.discover-cnt{
    
    background-image: url("../images/skiathos.avif");
    /*background-attachment: fixed;*/
    background-position: left;
    background-size: cover;
    width:100%;
    height: 80vh;
    display: grid;
   
}   

@keyframes discover {
    0%{ opacity:1; right: 100%; }
    100%{ opacity:1;  right: 10%;}
    }
    


.discover-text-wrapper{
   animation: discover 1s ease-in forwards;
    width: 35%;
    height: 80%;
    background-color: rgba(242, 242, 242, 0.66);  
    margin: auto;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: absolute;
    
}

@keyframes uncover {
    0%{opacity:0;}
    50%{opacity:0.1;}
    100%{opacity:1;}
    
}
.discover-text-wrapper h2{
   color: var(--orange);
   padding: 10px 0px;
   font-size: 3rem;
   font-weight: bold;
   animation: uncover 1.5s ease-in forwards;
   
}

.family{
    color: var(--orange);
    font-size: clamp(12px, 30px, 35px);
}
.family-cnt{
    
    display: flex;
    
}

.family-cnt .family-img-cnt {
    width: 50%;
    position: relative;
  
    display: flex;
    justify-content: flex-end;
    align-items: center;
   
}

.family-cnt .family-img-cnt img{
    width: 70%;
    position: relative;
    right: 20%;
    height: 95%;
    object-fit: contain;
    box-sizing: border-box;
    padding: 20px 0px;
   
    
}

.store-view-cnt{
    height: 90vh;
    width: 100%;
    background-image: url('../images/Store-View.avif');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: left;
    background-size: cover;
}
.store-view-cnt img{
    width: 100%;
    height: 100%;
} 
@media (max-width:900px){
    .store-view-cnt{
        background-attachment: unset;
        background-position-x: 85%;
    }
    
}


.family-cnt .family-text-wrapper {
    padding-top: 50px; 
    width: 40%;
    padding-left: 10%;
    padding-bottom: 50px;

}

.family-cnt .family{
    width: 80%; 
    text-align: center;
}

@media (min-width:900px){
    

    .family-cnt .family-text-wrapper .family-text{
        font-size: 1.7rem;
        line-height: 30px;
        text-align: center;
    }

 
}

@media (max-width:1204px){
    .family-cnt .family-text-wrapper{
        width: 100%;
        padding-left: 0%;
    }
    
    .family-cnt{
        display: grid;
    }
    .discover-text-wrapper{
        animation: none;
        position: relative;
        width: 100% ;
        right: 0;

    }

    .family-img-cnt {
        
        width: 100% !important;
        justify-content: center !important;
    } 
    .family-img-cnt img{
        right: 0 !important;
        height: 85% !important;
    }
    .family-cnt .family-text,
    .family-cnt .family{
        margin: auto;
        font-size: 20px;
    }
    
}