/*collection area css here*/
.collection_area{
    margin-bottom: 94px;
    @media #{$laptop-device}{
        margin-bottom: 74px;
    }
    @media #{$desktop-device}{
        margin-bottom: 74px;
    }
    @media #{$tablet-device}{
       margin-bottom: 55px;
    }
    @media #{$large-mobile}{
       margin-bottom: 53px;
    }
}
.collection_img{
    @media #{$large-mobile}{
       margin-bottom: 21px;
    }
    & img{
        &:hover{
            opacity: 0.7;
        }
    }
}

.collection_content{
    @media #{$large-mobile}{
        text-align: center;
    }
    & h1{
        font-size: 120px;
        color: $fonts_color5;
        font-weight: 700;
        line-height: 100px;
        margin-bottom: 20px;
        @media #{$tablet-device}{
            font-size: 90px;
            line-height: 80px;
            margin-bottom: 13px;
        }
        @media #{$large-mobile}{
            font-size: 90px;
            line-height: 80px;
            margin-bottom: 13px;
        }
    }
    & h4{
        font-size: 18px;
        color: $fonts_color;
        font-weight: 500;
        text-transform: capitalize;
        margin-bottom: 23px;
        @media #{$tablet-device}{
            margin-bottom: 12px;
        }
        @media #{$large-mobile}{
            margin-bottom: 12px;
        }
        
    }
    & h2{
        font-size: 36px;
        margin-top: 0;
        margin-bottom: 20px;
        color: $fonts_color2;
        font-weight: 700;
        margin-bottom: 20px;
        @media #{$tablet-device}{
            margin-bottom: 10px;
            font-size: 20px;
        }
        @media #{$large-mobile}{
            margin-bottom: 10px;
            font-size: 20px;
            line-height: 28px;
        }
    }
    & p{
        line-height: 24px;
        font-size: 16px;
        margin: 0;
        @media #{$large-mobile}{
            font-size: 15px;
        }
    }
    & a{
        font-size: 16px;
        color: $fonts_color2;
        font-weight: 600;
        padding-bottom: 5px;
        border-bottom: 2px solid $fonts_color2;
        display: inline-block;
        margin-top: 40px; 
        @media #{$tablet-device}{
            margin-top: 15px; 
        }
        @media #{$large-mobile}{
            margin-top: 15px;
            font-size: 16px;
        }
        &:hover{
            color: $secondary_color;
            border-color: $secondary_color;
        }
    }
}



.collection_2{
    @media #{$large-mobile}{
        margin-bottom: 29px;
    }
    & .collection_content{
        @media #{$large-mobile}{
            margin-bottom: 29px;
        }
    }
    
}

.collection_4{
    @media #{$large-mobile}{
        margin-bottom: 32px;
    }
    & .collection_content{
        @media #{$large-mobile}{
            margin-bottom: 29px;
        }
    }
}




/*categories section css here*/

.categories_area{
    @media #{$tablet-device}{
        margin-top: 68px;
    }
}

.categories_thumb{
    position: relative;
    @media #{$large-mobile}{
        height: 100vh;
    }
    
    & a{
        
       @media #{$large-mobile}{
            height: 100%;
        } 
    }
    & img{
       @media #{$large-mobile}{
            height: 100%;
            object-fit: cover;
        } 
    }
}

.categories_content{
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translatey(-50%);
    @media #{$desktop-device}{
        right: 20px;
    }
    @media #{$tablet-device}{
        right: 30px;
    }
    @media #{$large-mobile}{
        right: 15px;
    }
    & h4{
        color: $fonts_color2;
        font-size: 18px;
        margin-bottom: 15px;
        @media #{$large-mobile}{
            font-size: 16px;
            margin-bottom: 10px;
        }
    }
    & h2{
        color: $fonts_color2;
        font-size: 35px;
        font-weight: 600;
        line-height: 30px;
        margin-bottom: 10px;
        @media #{$large-mobile}{
            font-size: 22px;
            margin-bottom: 10px;
        }
    }
    & p{
        color: $fonts_color2;
        font-size: 17px;
        width: 440px;
        font-weight: 500;
        margin-top: 30px;
        @media #{$tablet-device}{
           width: 310px;
        }
         @media #{$large-mobile}{
            font-size: 14px; 
            width: 210px;
            line-height: 20px;
             margin-bottom: 5px;
             margin-top: 0;
        }
    }
    & a{
        text-transform: capitalize;
        font-size: 16px;
        color: $fonts_color2;
        font-weight: 600;
        padding-bottom: 5px;
        border-bottom: 2px solid $fonts_color2;
        &:hover{
            color: $secondary_color;
            border-color: $secondary_color;
        }
    }
}


#fp-nav {
	right: 31px;
}

.categories_area{
    & .col-12{
        padding: 0;
    }
}

.categories_content{
    &.content_left{
        left: 60px;
        @media #{$tablet-device}{
            left: 30px;
        }
        @media #{$large-mobile}{
            left: 30px;
        }
    }
    
}
    








