style.css

@import url('https://fonts.googleapis.com/css?family=Alegreya');


html {
    font-size: 62.5%;
}

body {
    box-sizing: border-box;
    font-family: 'Alegreya', serif;
}

* {
    margin: 0;
    padding: 0;
}

/** Navbar */
.container{
    display: grid;
    grid-template-columns: minmax(6rem,1fr) repeat(8,minmax(min-content,16rem)) minmax(6rem,1fr);
    grid-template-rows: repeat(3,min-content) 70vh repeat(5,min-content);         /*70vh for banner*/
    grid-row-gap: 1.6rem;
    margin-top: 1.6rem;
}
.social-icons{
    grid-column: 2/4;
    grid-row: 1/2;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem,1fr));
    align-items: center;
}
.social-icon{
    font-size: 1.8rem;
    color: #12376e;
    transition: all .2s;
}
.social-icon:hover{
    color: #34598f;
    transform: rotateZ(360deg);
}
.first-nav{
    grid-column: 6/10;
    grid-row: 1/2;
}
.first-nav-list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem,1fr));
    list-style:none;
}
.first-nav-link{
    text-decoration: none;
    font-size: 1.6rem;
    color: #12376e;
    display: inline-block;  /** since link element is inline element we cant apply width to it,when el is inline block we can define width for it*/
    width: 100%;
    text-align: center;
}
.first-nav-link::after{
    content: '';
    width: 0;
    height: .1rem;
    margin:auto;  /*now it will display from center to end*/
    background-color: #12376e;
    display: block; /*because width property wont work on inline elements*/
    transition: width .2s cubic-bezier(.55,0,.98,.54);
}
.first-nav-link:hover::after{
    width: 100%;
}
.first-nav-link span{
    font-size: 1.3rem;
    color: #34598f;
}
.first-nav-link i{
    font-size: 1.3rem;
    margin-right: .3rem;
}
.search{
    grid-column: 8/10;
    grid-row: 2/3;
}
.search-form{
    display: grid;
    grid-template-columns: repeat(10,10%);
}
.search-input{
    grid-column: 3/-1;
    grid-row: 1/2;
    padding: .3rem .4rem;
    font-size: 1.3rem;
    border: none;
    border-bottom: .1rem solid #12376e;
    outline: none;
}
.search-btn{
    grid-column:10/-1;
    grid-row: 1/2;
    border: none;
    background-color: transparent;
}
            /* third/last nav */

.second-nav{
    grid-column: 2/10;
    grid-row: 3/4;
    border-top: .1rem solid #12376e;
    border-bottom: .1rem solid #12376e;
}
.second-nav-list{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(10rem,1fr));
    list-style: none;
}
.second-nav-link{
    text-align: center;
    display: grid; /*now items will be centered because link elements will take same width as its parent list el*/
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.4rem;
    color: #12376e;
    padding: .8rem 0;
    transition: all .5s .3s;
}
.second-nav-item:hover .second-nav-link{
    background-color: #12376e;
    color: #fff;
}

.second-nav-link::before,
.second-nav-link::after{
    content: '';
    width: 0;
    height: .1rem;
    background-color: #12376e;
    display: block;
    transition: width .3s cubic-bezier(.55,0,.98,.54),
    background-color .5s .3s;
}
.second-nav-link::after{
    justify-self: end; /*line will start from end*/
}
.second-nav-item:hover .second-nav-link::before,
.second-nav-item:hover .second-nav-link::after{
    width: 100%;
    background-color: #fff;
}
.second-nav-item:first-child{
    position: relative;
}
.dropdown{
    position: absolute;
    top: 100%; /* because wee need dropdown right under first nav item*/
    width: 70rem;
    background-color: #fffeee;
    padding: 1.6rem;
    display: grid;
    grid-template-columns: repeat(7,10rem);
    visibility: hidden;
    opacity: 0;
    transition: all 1s;
    z-index: 100;
}
.second-nav-item:first-child:hover .dropdown{
    visibility: visible;
    opacity: 1;
}
.dropdown-first-list{
    grid-column: 1/3;
}
.dropdown-second-list{
    grid-column: 3/5;
}
.dropdown-image{
    grid-column: 5/-1;
    width: 100%;
}
.dropdown-list-item{
    list-style: none;
}
.dropdown-list-link{
    font-size: 1.3rem;
    text-decoration: none;
    text-transform: uppercase;
    color: #34598f;
    margin: 0 0 1rem 1.6rem;
    display: block;  /*made block to add padding*/
}
.dropdown-list-link:hover{
    color: #458a9f;
}
/*! Navbar End */

/** Banner  */

.banner{
    grid-column: 2/10;
    grid-row: 4/5;
    position: relative;
    z-index: 50;
}
.banner-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-transform: uppercase;
    text-align: center;
    z-index: 1;
}
.banner-heading{
    font-size: 10rem;
    color: #12376e;
    margin-bottom: 6rem;
}
.banner-btn{
    width: 16rem;
    height: 5rem;
    background: linear-gradient(to top,#00154c,#12376e,#23487f);
    color: #fff;
    border: .1rem solid #fff;
    border-radius: .3rem;
    outline: none;
    position: relative;
    overflow: hidden;
}
.banner-btn-text-one{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;  /*width is equal to button, even though this text is inline el we can give width when we set it as absolute*/
    transition: top .2s;
}
.banner-btn-text-two{
    position: absolute;
    top: 150%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;  /*width is equal to button, even though this text is inline el we can give width when we set it as absolute*/
    transition: top .2s;
}
.banner-btn:hover .banner-btn-text-one{
    top: -100%;
}
.banner-btn:hover .banner-btn-text-two{
    top: 50%;
}
.slideshow{
    height: 100%;
    overflow: hidden;
}
.slideshow-wrapper{
    display: flex;
    width: 400%;    /*each img is 100%*/
    height: 100%;
    position: relative;
    animation: slideshow 20s infinite;
}
.slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;      /*now images will fit inside the container and not streetch*/
}
@keyframes slideshow{
    0%{left: 0;}

    10%{left: 0;}

    15%{left: -100%;}

    25%{left: -100%;}

    30%{left: -200%;}
    
    40%{left: -200%;}

    45%{left: -300%;}

    55%{left: -300%;}

    60%{left: -200%;}

    70%{left: -200%;}

    75%{left: -100%;}

    85%{left: -100%;}

    90%{left: 0;}
}

.slide-btn{
    width: 1.3rem;
    height: 1.3rem;
    background-color: #bbb;
    border: .2rem solid #d38800;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    position: absolute;
    top: 90%;
    transform: translateX(-50%);        /*center horizontally*/
    z-index: 10;
}
.slide-btn-1{
    left: 47%;
}
.slide-btn-2{
    left: 49%;
}
.slide-btn-3{
    left: 51%;
}
.slide-btn-4{
    left: 53%;
}
.slide-btn:focus{
    background-color: #12376e;
}
.slide-btn-1:focus ~ .slideshow-wrapper{     /*~ any sibling selector*/
    animation: none;
    left: 0;
}
.slide-btn-2:focus ~ .slideshow-wrapper{     /*~ any sibling selector*/
    animation: none;
    left: -100%;
}
.slide-btn-3:focus ~ .slideshow-wrapper{     /*~ any sibling selector*/
    animation: none;
    left: -200%;
}
.slide-btn-4:focus ~ .slideshow-wrapper{     /*~ any sibling selector*/
    animation: none;
    left: -300%;
}
/*! Banner End*/

/** Day Offer */
.day-offer{
    grid-column: 2/10;
    grid-row: 5/6;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(4,min-content);
    grid-gap: 1.6rem 3.2rem;
    justify-items: center;
}
.day-offer-img-one{
    grid-column: 1/3;
    grid-row: 1/-1;
    width: 100%;
}
.day-offer-heading{
    grid-column: 3/-1;
    grid-row: 1/2;
    font-size: 6rem;
    color: #234872;
}
.day-offer-paragraph{
    grid-column: 3/-1;
    grid-row: 2/3;
    font-size: 3rem;
    color: #3459af;
}
.day-offer-btn{
    grid-column: 3/-1;
    grid-row: 3/4;
    width: 16rem;
    padding: 1rem;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(to top,#00154c,#12376e,#23487f);
    border: none;
    border-radius: 5rem;
    text-transform: uppercase;
    outline: none;
    box-shadow: .2rem .2rem 1rem #777;
}
.day-offer-btn:hover{
    box-shadow: .2rem .2rem 2rem #777;
}
.day-offer-img-two{
    grid-column: 3/-1;
    grid-row: 4/-1;
    width: 100%;
    align-self: end;
}
/*! Day Offer End */

/** Bestselling Furniture */
.bestselling-furniture{
    grid-column: 2/10;
    grid-row: 6/7;
}
.bestselling-furniture-header{
    font-size: 4.5rem;
    color: #23487f;
    text-align: center;
    margin: 3rem 0;
}
.bestselling-furniture-cards{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(30rem,1fr));
    grid-gap: 6.4rem;
}
.bestselling-furniture-card{
    background-color: #efefef;
}
.bestselling-furniture-img{
    width: 100%;
    border-radius: .3rem .3rem 0 0;     /*top left, top right,bottom right and left*/
}
.bestselling-furniture-heading{
    background-color: #fffddd;
    width: 80%;
    margin: auto;
    text-align: center;
    font-size: 2.4rem;
    color: #458a9f;
    padding: .5rem 0;
    border-radius: .2rem;
    transform: translateY(-50%);
}
.bestselling-furniture-paragraph{
    font-size: 1.9rem;
    color: #23487f;
    text-align: center;
    margin-bottom: 1.6rem;
}
.bestselling-furniture-btn{
    width: 100%;
    padding: 1.6rem 0;
    background-color: #12376e;
    font-size: 1.9rem;
    color: #fff;
    border: none;
    border-radius: 0 0 .3rem 3rem;
    box-shadow: 0 1.5rem 6rem rgba(0, 0, 0, .3);
}
.bestselling-furniture-btn:hover{
    background-color: #23487f;
}
/*! Bestselling Furniture End */


/** Gallery */
.gallery{
    grid-column: 1/-1;
    grid-row: 7/8;
    display: grid;
    grid-template-columns: repeat(8,minmax(1rem,1fr));
    grid-template-rows: repeat(4,10vw);  /*nice trick to make responsive*/
    grid-gap: 1.6rem;
    margin-top: 6.4rem;
    background-color: #23487f;
    padding: 1.6rem 0;
}
.gallery-img{
    width: 100%;
    height: 100%;
    object-fit: cover;  /*to maintain img quality*/
    opacity: .7;
    transition: opacity .5s;
}
.gallery-img-1{
    grid-column: 1/3;
    grid-row: 1/2;
}
.gallery-img-2{
    grid-column: 3/6;
    grid-row: 1/3;
}
.gallery-img-3{
    grid-column: 6/7;
    grid-row: 1/2;
}
.gallery-img-4{
    grid-column: 7/9;
    grid-row: 1/3;
}
.gallery-img-5{
    grid-column: 1/3;
    grid-row: 2/4;
}
.gallery-img-6{
    grid-column: 3/5;
    grid-row: 3/4;
}
.gallery-img-7{
    grid-column: 6/7;
    grid-row: 2/4;
}
.gallery-img-8{
    grid-column: 5/6;
    grid-row: 3/5;
}
.gallery-img-9{
    grid-column: 1/3;
    grid-row: 4/5;
}
.gallery-img-10{
    grid-column: 3/5;
    grid-row: 4/5;
}
.gallery-img-11{
    grid-column: 6/7;
    grid-row: 4/5;
}
.gallery-img-12{
    grid-column: 7/9;
    grid-row: 3/5;
}

.gallery-img:hover{
    opacity: 1;
}


/*! Gallery End  */

/** Contact */
.contact{
    grid-column: 1/-1;
    grid-row: 8/9;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 3rem;
    background-color: #12376e;
    padding: 2rem 0;
}
.contact-heading{
    justify-self: end;
    font-size: 2rem;
    color: #fff;
}
.contact-form{
    display: flex;
}
.contact-form input{
    outline: none;
    padding: .4rem 1rem;
    border: .1rem solid #fff ;
}
.contact-input{
    border-radius: 5rem 0 0 5rem;
    border-right: none;
}
.contact-btn{
    background-color: #34598f;
    color: #fff;
    border-radius: 0 5rem 5rem 0;
    transition: background-color .2s;
}
.contact-btn:hover{
    background-color: #12376e;
}
/*! Contact End*/

/** Footer */
.footer{
    grid-column: 2/10;
    grid-row: 9/10;
    text-align: center;
    font-size: 1.6rem;
    padding: 2rem 0 3rem 0;
    color: #34598f;
}
/*! Footer End*/

/** Modal Box */
.forms-wrapper{
    background-color: #eee;
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    padding: 2rem;
    border: .1rem solid #3459af;
    border-radius: 3rem .3rem 3rem .3rem;
    display: none;
}
.show-btns-wrapper{
    display: flex;
    padding: 1rem;
}
.show-form-btn{
    flex:0 1 50%; /*flex grow,shrink and basics*/       /*buttons will take half of width of their wrappeer*/
    background-color: #12376e;
    font-size: 1.6rem;
    color: #fff;
    padding: 1rem;
    text-transform: uppercase;
    letter-spacing: .2rem;
    text-align: center;
    border: .1rem solid #eee;
    cursor: pointer;
}
.form-heading{
    font-size: 2rem;
    color: #12376e;
    text-transform: uppercase;
    padding: 1rem 0 0 .2rem;
}
.forms-wrapper form{
    width: 50rem;
    padding: 1rem;
}
.forms-wrapper form input:not(.form-btn){
    background-color: #fff;
    color: #777;
    padding: 1.3rem;
    margin: .3rem 0;
    border: .2rem solid #eee;
    box-sizing: border-box;
    outline: none;
}
.fullname-inputs-wrapper{
    display: flex;
}
.fullname-inputs-wrapper input{
    width: 50%;
}
.form-input{
    width: 100%;
}
.form-btn{
    width: 35%;
    background-color: #d38800;
    color: #fff;
    letter-spacing: .4rem;
    padding: 1rem;
    bottom: none;
    margin-top: 0.5rem;
}
.x-btn{
    font-size: 2rem;
    color: #00154c;
    font-weight: bolder;
    position: absolute;
    bottom: 3.3rem;
    right: 3.5rem;
    cursor: pointer;
}
.login-form{
    display: none;
}
.show-signup-form{
    color: #888;
    background-color: #34598f;
    pointer-events: none;       /*disabled button*/
}
#show-form:checked ~ .show-btns-wrapper .show-login-form{
    color: #888;
    background-color: #34598f;
    pointer-events: none;       /*disabled button*/
}
#show-form:checked ~ .show-btns-wrapper .show-signup-form{
    color: #fff;
    background-color: #12376e;
    pointer-events: initial;       /*disabled button*/
}
#show-form:checked ~ .signup-form{
    display: none;
}
#show-form:checked ~ .login-form{
    display: block;
}
#show-hide-forms:checked ~ .forms-wrapper{
    display: block;
    animation: anim .5s;
}
#show-hide-forms:checked ~ .container{
    pointer-events: none;
    opacity: .6;
}
.first-nav-link label{
    cursor: pointer;
}

@keyframes anim{
    0%{
        left: 40%;
    }
    50%{
        left: 60%;
    }
    70%{
        left: 45%;
    }
    100%{
        left: 50%;
    }
}
/*! Modal Box End */

/** MAKING PROJECT RESPONSIVE  */
@media(max-width:1250px){
    .banner-heading{
        font-size: 8rem ;
    }
    .day-offer-heading{
        font-size: 5rem;
    }
    .day-offer-paragraph{
        font-size: 3rem;
    }
}

@media(max-width:1000px){
    .container{
        grid-template-columns: minmax(4rem,1fr) repeat(8,minmax(min-content,16rem)) minmax(4rem,1fr);
    }
    .social-icons{
        grid-column: 2/5;
        grid-row: 2/3;
    }
    .first-nav{
        grid-column: 2/10;
    }
    .banner-heading{
        font-size: 5rem ;
    }
    .day-offer-heading{
        font-size: 4.5rem;
    }
    .day-offer-paragraph{
        font-size: 2.5rem;
    }
    .day-offer-img-one{
        align-self: end;
    }
    .forms-wrapper form{
        width: 40rem;
    }
}

@media(max-width:800px){
    .container{
        grid-template-columns: minmax(2rem,1fr) repeat(8,minmax(min-content,16rem)) minmax(2rem,1fr);
        grid-template-rows: repeat(3,min-content) 50vh repeat(5,min-content);  
    }
    .social-icons{
        grid-column: 2/6;
    }
    .dropdown{
        width: 52.5rem;
        grid-template-columns: repeat(7,7.5);
    }
    .dropdown-list-link{
        margin-bottom: .7rem;
    }
    .dropdown-image{
        grid-column: 5/7;
        height: 100%;
        width: 100%;
        margin-left: -8rem;
        object-fit: cover;
    }
    .banner-btn{
        width: 14rem;
        height: 4rem;
    }
    .slide-btn-1{
        left: 45.5%;
    }
    .slide-btn-2{
        left: 48.5%;
    }
    .slide-btn-3{
        left: 51.5%;
    }
    .slide-btn-4{
        left: 54.5%;
    }
    .day-offer-heading{
        font-size: 4rem;
    }
    .day-offer-paragraph{
        font-size: 2rem;
    }
    .day-offer-btn{
        width: 13rem;
        padding: 0.8rem;
    }

}
@media(max-width:600px){
    .container{
        grid-template-columns: minmax(1rem,1fr) repeat(8,minmax(min-content,16rem)) minmax(1rem,1fr);
        grid-template-rows: repeat(3,min-content) 50vh repeat(5,min-content);
    }
    .first-nav-list{
        grid-template-columns: repeat(auto-fit, minmax(12rem,1fr));
        grid-row-gap: 1rem;
    }
    .social-icons{
        grid-column: 2/7;
        grid-template-columns: repeat(auto-fit, minmax(2rem,1fr));

    }
    .dropdown{
        width: 30rem;
        grid-template-columns: repeat(4,7.5);
    }
    .dropdown-image{
        display: none;
    }
    .banner-heading{
        font-size: 4rem;
    }
    .banner-btn{
        transform: translateY(-2.5rem);
        height: 2.5rem;
    }
    .slide-btn{
        top: 90%;
    }
    .slide-btn-1{
        left: 44%;
    }
    .slide-btn-2{
        left: 48%;
    }
    .slide-btn-3{
        left: 52%;
    }
    .slide-btn-4{
        left: 56%;
    }
    .day-offer{
        grid-column-gap: 1.4rem;
    }
    .day-offer-heading{
        font-size: 3rem;
    }
    .day-offer-paragraph{
        font-size: 1.6rem;
        text-align: center;
    }
    .gallery{
        grid-gap: 1rem;
        padding: 1rem;
    }
    .contact{
        grid-template-columns: 1fr;
        grid-row-gap: 2rem;
    }
    .contact-heading{
        font-size: 1.8rem;
        justify-self: center;
    }
    .contact-form{
        justify-self: center;
    }
    .forms-wrapper form{
        width: 30rem;
    }
}