// rose, blu, bluD1, bluD2, bluD3, padding-1 to 3(5,3,2)
@use './variables/variables' as v;

// center, between, absolute
@use './mixins/mixins' as m;



#home__landing {

    background: v.$blu;
    min-height: 120vh;

    .col2.col2--container{
        position: relative;
        min-height: 120vh;

        .flex.flex--info{

            position: absolute;
            top: 2rem;
            left: v.$padding-1;

            div{

                cursor: pointer;
                @include m.align;

                img{
                    width: 40px;
                }

                p{
                    margin-right: 2rem;
                    margin-left: 4rem;
                    font-size: 16px;
                }

            }
        }

        .part1{
            padding-left: 5rem;
        }

    }

    .col2{

        h1, p, a, span, h3 { color: #fff; }
        
        h1{
            font-family: 'Amatic Sc', sans-serif;
            font-weight: bolder;
            font-size: 200px;
        }

        .paragraph{
            font-size: 23px;
            font-weight: 300;
            width: 50%;
            margin-bottom: 3rem;
        }

        a{
            display: inline-block;
            margin-top: 5rem;

            .flex{
                padding: .75rem 2rem;

                p{
                    padding-right: 2rem;
                    font-weight: bolder;
                    font-size: 21px;
                }

            }
        }

        .flex h3 {

            font-size: 25px;
            font-weight: 500;
            padding-left: 2rem;

            span{
                font-size: 30px;
                font-weight: 900;
            }

        }

        .sub-paragraph{
            font-weight: 300;
            opacity: 0.8;
            margin-top: 1rem;
            font-size: 15px;
        }

        .part1, ul { width: 50%; }

        ul{

            min-height: 100vh;

            li {

                position: relative;

                .prod.prod__info{

                    opacity: 0;
                    backdrop-filter: blur(0);
                    @include m.center;
                    @include m.absolute;
                    width: 100%;
                    height: 100%;
                    text-align: center;

                    h3{
                        font-size: 25px;
                        margin-bottom: 1rem;
                    }

                    p{
                        font-size: 18px;
                    }

                    transition: 1s ease-in-out all;

                    &:hover{
                        backdrop-filter: blur(15px);
                        opacity: 1;
                    }

                }

                img{
                    display: block;
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                }

            }
            

            .prod1{
                grid-area: prod1;
            };

            .prod2{
                grid-area: prod2;
            };

            .prod3{
                grid-area: prod3;
            };

            .header{
                grid-area: header;
                overflow: hidden;
                background: url('/src/Public/Static/Images/jpg/brooke-lark-GJMlSBS0FhU-unsplash.jpg');
                background-size: cover;
                img{
                    transform: scale(1);
                    transition: 3s ease all;
                }
                &:hover{
                    img{
                        transform: scale(1.5)
                    }
                }

                h3, p{
                    color: v.$rose
                }

                .prod.prod__info .wrapper h3{
                    font-size: 55px;
                }

                .prod.prod__info .wrapper p{
                    font-size: 30px;
                    font-weight: 900;
                }

            };

            .broadcast{
                grid-area: broadcast;
                background-color: v.$rose;
                padding: 3rem;

                h2{
                    color: #fff;
                    font-weight: bolder;
                    font-size: 75px;
                    font-family: 'Amatic Sc';
                }

                h3{
                    font-size: 28px;
                    margin-bottom: 1rem;
                    font-weight: 400;
                }

            };

            display: grid;
            grid-template-columns: 1fr 2fr;
            grid-template-rows: 33.33% 33.33% 33.33%;
            grid-template-areas: 
                "prod1 header"
                "prod2 header"
                "prod3 broadcast"
            ;

        }

    }

}

#glider{
    min-height: 50vh;
    background-color: #fff;
    margin: 10rem 0;

    h2{
        text-align: center;
        font-size: 40px;
        position: relative;

        &::before, &::after{
            content: '';
            width: 60px;
            height: 3px;
            background-color: v.$rose;
            border-radius: 20px;
            position: absolute;
        }

        &::before{
            left: 30%;
            top: 50%;
            transform: translate(-30%, -50%);
        }

        &::after{
            right: 30%;
            top: 50%;
            transform: translate(30%, -50%);
        }

        

        span{
            color: v.$rose;
            font-style: italic;
        }

    }

    .wrapper{
        padding: 5rem 0;
        margin: 3rem 0;
        background-color: #f1f1f1;

        .glider div{
            display: flex;
        }

        img{
            width: 150px;
            object-fit: contain;
        }

    }

}

#helping{
    min-height: 50vh;
    background-color: v.$blu;
    margin-bottom: 10rem;
    position: relative;

    .part1{

        .container{
            padding: 5rem;
        }

        h2, p, span {
            color: #fff;
        }
    
        h2{
            font-size: 40px;
            span{
                font-style: italic;
                font-size: 45px;
                padding: 0 1rem;
            }
        }

        .assistance {
            font-size: 25px;
            margin: 1rem 0 4rem 0;
        }

        .mainly{
            margin-bottom: 1rem;
            font-size: 18px;
            line-height: 26px;
            span{
                color: v.$rose;
                font-weight: bold;
                border-bottom: 2px dotted;
                font-size: 20px;
                margin-left: 1rem;
            }
        }

        .flex.flex--1 img{
            width: 50px;
            margin-right: 2rem;
        }
        

        .flex{
            a{
                padding: 1.25rem 3rem;
                background-color: #fff;
                color: #000;
                border: 2px solid v.$rose;
                border-radius: 20px;
                font-weight: 500;
                font-size: 20px;
                margin-right: 2rem;
            }
        }

        .flex.flex--2{
            margin-top: 3rem;
        }

      

    }

    .part2{

        width: 20%;
        background-color: #fff;
        position: absolute;
        right: 10%;
        height: 100%;
        top: 0;
        @include m.center;

        .wrapper{
           @include m.center;
            flex-direction: column;
            
           
            a{
                margin-top: 3rem;
            }

            a:first-child{
                margin-top: 0;
            }
            
        }

    }

}

#lovework {

    margin-bottom: 10rem;

    .container {

        display: flex;
        align-items: center;

        .part1 , .part2{
            width: 50%;
        }

        .part2 {
            width: 100%;
            height: 800px;
            background: url('/src/Public/Static/Images/jpg/Love.jpg');
        }

        .part1 {
            h2{
                font-family: 'Amatic SC';
                font-weight: bolder;
                font-size: 160px;
                margin-bottom: 3rem;
            }
            p{
                font-size: 23px;
                width: 50%;
            }
            a{
                background-color: v.$rose;
                color: #fff;
                padding: 1.25rem 3.5rem;
                font-size: 18px;
            }
            .flex {
                margin-top: 4rem;
                img{
                    width: 40px;
                    margin-left: 2rem;
                }
            }
        }

    }

}

#well {

    position: relative;
    background: v.$rose;

    .container {
        padding: 5rem;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100vh;

        h2{
            font-size: 160px;
            font-family: 'Amatic SC';
            font-weight: bolder;
            color: #fff;
        }

        img{
            margin-right: 5rem;
        }

        .flex:nth-child(2){
            margin-left: auto;
            display: flex;
        }
    }

    .img.img--1, .img.img--2, .img.img--3{
        position: absolute;
        img{
            width: 300px;
            opacity: 0.1;
        }
    }

    .img.img--1 {
        bottom: 0;
        left: 0;
    }

    .img.img--2 {
        top: 0;
        left: 0;
    }

    .img.img--3{
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

}

#footer{
    min-height: 50vh;
    background-color: #f9f9f9;

    display: flex;

    .part1, .part2{
        width: 50%;
    }

    .part1{
        padding: 5rem;

        h1{
            margin: 2rem 0;
            font-size: 70px;
            color: v.$blu;
            font-family: 'Amatic SC';
        }

        ul{
           @include m.center;
           justify-content: flex-start;
            li {
                display: flex;
                flex-direction: column;
                margin-right: 5rem;
                h4{
                    color: v.$blu;
                    font-size: 20px;
                    font-weight: 400;
                    margin-bottom: 1rem;
                }
                a{
                    color: #000;
                    opacity: 0.8;
                    transition: 1s ease all;
                    &:hover{ opacity: 1; }
                    margin-bottom: 1rem;
                }
            }
        }
    }

    .part2 {
        @include m.grid4;
        position: relative;
        
        .logo{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 150px;
        }

        .quad.quad--1{
            background: v.$blu;
        }
        .quad.quad--2{
            background: v.$bluD1;
        }
        .quad.quad--3{
            background: v.$bluD2;
        }
        .quad.quad--4{
            background: v.$bluD3;
        }
    }

}



//! ********************
//! MEDIA QUERIES
//! ********************

@media only screen and (max-width: 1400px){

        #glider {
            h2::after {
                right: 15%;
                transform: translate(15%, -50%);
            }
            h2::before {
                left: 15%;
                transform: translate(-15%);
            }
        }

        #home__landing {
            .col2.col2--container .part1 {
                width: 60%;
            }
    
            .col2 ul{
                grid-template-columns: 1fr;
                width: 40%;
                .prod1, .prod2, .prod3{
                    display: none;
                }
            }
        }

        #lovework {
    
            .container {
                flex-direction: column;
                align-items: flex-start;
                .part2 {
                    max-width: unset;
                    width: 100%;
                    margin-top: 5rem;
                }
            }

        }
    
}
    
@media only screen and (max-width: 1100px){
      
        #home__landing {

                .col2 {
                    h1{
                        font-size: 100px;
                    }
                
                    .paragraph {
                        font-size: 18px;
                        width: 80%;
                    }
                }
        
                .col2.col2--container .part1{
                    width: 100%;
                }
           



            .col2.col2--container .flex.flex--info {
                position: unset;
                padding: 5rem 0 5rem 5rem;
            }
    
            .col2{

                h1{
                    font-size: 100px;
                }
                
                .paragraph {
                    font-size: 18px;
                    width: 80%;
                }
                

                flex-direction: column;
                align-items: flex-start;
    
                ul{
                    margin-top: 5rem;
                    width: 100%;
                    grid-template-areas:
                        "header"
                        "header"
                        "broadcast"
                    ;
                    .header{
                        background-attachment: fixed;
                    }
                }
            }
        }

        #helping{
            .part2 {
                min-height: 20vh;
                width: 100%;
                position: unset;
                .wrapper{
                    flex-direction: row;

                    a {
                        margin-top: 0;
                        margin: 0 3rem;
                    }
                }
            }
        }

        #glider {
            h2::after{
                right: 8%;
                transform: translateX(8%);
            }
            h2::before{
                left: 8%;
                transform: translateX(-8%);
            }
        }

        #lovework .container .part1{
            width: 100%;
            p {
                width: 100%;
            }
        }

        #well .container {
            padding: 5rem 2rem;

            h2{
                font-size: 120px;
            }

            .flex{
                margin-bottom: 10rem;
                &:last-child{ margin-bottom: 0; }
            }
        }

        #footer {

            flex-direction: column;
            align-items: flex-start;
            min-height: 100vh;

            .part2, .part1 {
                width: 100%;
            }

            .part2{
                min-height: 100vh;
                .logo{
                    width: 300px;
                }
            }

        }
        
}
    
@media only screen and (max-width: 675px){

        #lovework .container{ padding: 0 2rem; }

        #helping {

            .part1 {
                .flex.flex--2,  .flex.flex--1  {
                    flex-direction: column;
                    align-items: flex-start;
                }
    
                .flex.flex--1 img{
                    margin-bottom: 1rem;
                    margin-top: 2rem;
                }
                .flex a {
                    margin-right: 0;
                    margin-bottom: 1rem;
                }
                h2 span{
                    padding: 0;
                }
            }

            .part2 .wrapper{
                justify-content: space-between;
                width: 100%;
                padding: 0 2rem;
                a{ margin: 0; }
            }

        }

        #glider {
            h2::after, h2::before{
                display: none;
            }
        }


           #well .container .flex {
               flex-direction: column;
               align-items: flex-start;
               &:nth-child(2){
                   margin-left: 0;
               }
           }

           #footer {

                .part1 {
                    padding: 5rem 2rem;
                    ul{
                
                        justify-content: space-between;
                        flex-direction: column;
                        align-items: flex-start;
        
                        li{
                            margin-right: 0;
                            margin-bottom: 3rem;
                        }
        
                    }
                }

           }
        
}
    
@media only screen and (max-width: 500px){

            #helping .part1 .container {
                padding: 5rem 2rem ;
            }
        
           #home__landing{
                .home.home__nav {
                    padding: 2rem;
                }

                .home.home__nav.active .menu{
                    left: 2rem;
                }
        
                .col2.col2--container {
                    .flex.flex--info {
                        padding: 5rem 0 5rem 2rem;
                        flex-direction: row;

                        div {
                            margin-top: 2rem;
                            margin-left: 3rem;
                            p {
                                margin: 0;
                                margin-right: 1rem;
                            }
                        }
                    }
                    .part1{
                        padding: 0;
                        padding: 0 2rem;
                    }
                }
        
                .col2 {
                    ul .broadcast{
                        padding: 2rem;
                    }
                    a {
                        width: 100%;
                        .flex.flex--button{
                            align-items: center;
                        }
                        .flex{
                            flex-direction: row;
                        }
                    }
                    .flex h3{
                        padding-left: 0;
                        margin-top: 1rem;
                        font-size: 20px;
                        span{
                            font-size: 25px;
                            margin-right: .25rem;
                        }
                    }
                    .paragraph{
                        width: 100%;
                    }
                }

            

                .flex{
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: space-between;
                }
           }

           #well .container h2{
               font-size: 100px;
           }

           #footer .part2 .logo{
               width: 130px;
           }
        
}

@media only screen and (max-width: 400px){
        #home__landing .col2 ul .broadcast {
            h3{
                font-size: 24px;
            }
            h2{
                font-size: 60px;
            }
        }
        #glider h2{
            font-size: 30px;
        }
}










