/*this is the second way of using google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Imperial+Script&family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&family=Mulish:wght@200&display=swap');
html{
    font-size: 62%;
}
body{
    box-sizing: border-box;
    font-family: 'Alegreya', serif;
    /*The CSS box-sizing property allows us to include the padding and border in an element's total width and height*/
    box-sizing: border-box;
}
* {
    /*here we are getting rid of all the default margin and padding*/
    margin: 0;
    padding: 0;
}

.container{
    display: grid;
    /*dont forget that properties like minmax and max-content are like values too, so here you have 10 columns in total*/
    /*btw min-content is used to only create the width requiered by the smallest item or word in that specific space*/
    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); /*you have 9 rows in total*/
    /*this creates a space only between rows*/
    grid-row-gap: 1.6rem;
    margin-top: 1.6rem;
}
/*NAVBAR*/
.social-icons{
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    list-style: none;
    display: grid;
    /*auto-fit is used to automatically fill all the items you have in the empty spaces available in a more responsive way*/
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    align-items: center;
    
}
.social-icon{
    font-size: 1.8rem;
    color: #12376e;
    transition: all .5s;
}
.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;
    width: 100%;
    text-align: center;
}
/*here we are coding the underline effect everytime you hover on the nav links*/
.first-nav-link::after{
    content: "";
    width: 0;
    height: .1rem;
    background-color: #12376e;
    display: block;
    /*this margin makes the line appear from the center*/
    margin: auto;
    transition: .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;
}
/*this is incudes the whole section of text input and button*/
.search-form{
    display: grid;
    /*you are dividing it into 10 parts so you can sort the elements better*/
    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;
    letter-spacing: .3rem;
    
}
/*here you are creating the search button from the top of the page*/
.search-button{
    grid-column: 10 / -1;
    grid-row: 1 / 2;
    border: none;
    /*this is how you take out the color from an element*/
    background-color: transparent;
    cursor: pointer;
    
}

.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;
    /*they wont be centered if you dont set it as grid*/
    display: grid;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.4rem;
    color: #12376e;
    padding: .8rem 0;
    transition: .2s ;
}
.second-nav-item:hover .second-nav-link{
    background-color: #12376e;
    color: white;

}
/*here as you know you are making the lines but you dont show them yet, thats why you set width as 0%*/
.second-nav-link::before,
.second-nav-link::after{
    content: "";
    width: 0%;
    height: .2rem;
    background-color: #12376e;
    display: block;
    transition: .5s cubic-bezier(.55, 0, .98, .54) ;
}
/*this is making the lines to appear from the opposite direction*/
.second-nav-link::after{
    justify-self: end;
}
.second-nav-item:hover .second-nav-link::before,
.second-nav-item:hover .second-nav-link::after{
    width: 100%;
    background-color: white;
}
.dropdown{
    position: absolute;
    top:100%;
    width: 70rem;
    background-color: #fffeee;
    padding: 1.6rem;
    display: grid;
    /*here you are placing the lists in the right space of the 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;
}
.first-dropdown-list{
    grid-column: 1 / 3;

}
.second-dropdown-list{
    grid-column: 3 / 5;
}
.second-nav-item:first-child{
    position: relative;
    
}
.dropdown-img{
    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/*top*/ 0/*right*/ 1rem /*bottom*/ 1.6rem /*left*/;
    display: block;
}
.dropdown-list-link:hover{
    color: #458a9f;
}

/*NAVBAR*/
/*BANNER*/
.banner{
    grid-column: 2 / 10;
    grid-row: 4 / 5;
    
    position: relative;
}
.banner-content{
    /*you used this so all the content here can me seen, otherwise it would be behind the background*/
    /*besides you need to move it*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    text-align: center;
    z-index: 50;
}
.banner-heading{
    font-size: 10rem;
    color: #12376e;
    margin-bottom: 6rem;
}
.banner-button{
    width: 16rem;
    height: 5rem;
    background: linear-gradient(to top, #00154c, #12376e);
    color: white;
    border: .1rem solid white;
    border-radius: .3rem;
    outline: none;
    position: relative;
    /*this is hiding the second button so everytime you hover it appears and the other one hides*/
    overflow: hidden;
}
.banner-btn-text1{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    transition: .2s;
} 
.banner-btn-text2{
    position: absolute;
    top: 150%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    transition: .2s;
} 
.banner-button:hover .banner-btn-text1{
    top:-100%;

} 
.banner-button:hover .banner-btn-text2{
    top:50%;
    
} 
.slideshow{
   height: 100%;
   /*this is hiding al the images that are not on screen*/
    overflow: hidden;
}
.slideshow-wrapper{
    display: flex;
    /*we are setting width to 400% cuz each pic is 100% and you have 4 of them*/
    width: 400%;
    height: 100%;
    position: relative;
    animation: slideshow 20s infinite; 
    
}
.slide img{
    width: 100%;
    height: 98%;
    /*this is simiar as background-size:cover*/
    object-fit: cover;
    border: .4rem solid #34598f;
    max-height: 98%;
    
}

/*here we are configuring the slideshow */
@keyframes slideshow{
    0%{
        left: 0;
    }
    10%{
        left: 0;
    }
    15%{
        left: -50%;
    }
    25%{
        left: -50%;
    }
    30%{
        left: -100%;
    }
    40%{
        left: -100%;
    }
    45%{
        left: -150%;
    }
    55%{
        left: -150%;
    }
    60%{
        left: -100%;
    }
    70%{
        left: -100%;
    }
    75%{
        left: -50%;
    }
    85%{
        left: -50%;
    }
    90%{
        left: 0;
    }

}
.slide-button{
    width: 1.3rem;
    height: 1.3rem;
    background-color: #bbb;
    border: .2rem solid #d38800;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    position: absolute;
    top: 95%;
    transform: translate(-50%);
    z-index: 10;

}
/*here you are placing the buttons 2% away from each other*/
.slide-button1{
    left: 47%;
}
.slide-button2{
    left: 49%;
}
.slide-button3{
    left: 51%;
}
.slide-button4{
    left: 53%;
}
.slide-button:focus{
    background-color: #00154c;
}
/*here you are configuring the buttons of the slide show*/
/*everytime time you click on omthing you are focusing on it, thats when focus takes place*/
.slide-button1:focus ~ .slideshow-wrapper{
    animation: none;
    left: 0;
}
.slide-button2:focus ~ .slideshow-wrapper{
    animation: none;
    left: -50%;
}
.slide-button3:focus ~ .slideshow-wrapper{
    animation: none;
    left: -100%;
}
.slide-button4:focus ~ .slideshow-wrapper{
    animation: none;
    left: -150%;
}

/*BANNER*/

/*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);
    /*here you are making some space between images and text*/
    grid-gap: /*row*/1.6rem /*column*/3.2rem;
    justify-items: center;
    
}
.day-offer-img1{
    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: #12376e;
}
.day-offer-parag{
    grid-column: 3 / -1;
    grid-row: 2 / 3;
    font-size: 3rem;
    color: #34598f;
}
.day-offer-button{
    grid-column: 3 / -1;
    grid-row: 3 / 4;
    width: 16rem;
    padding: 1rem;
    font-size: 1.4rem;
    color: white;
    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-img2{
    grid-column: 3 / -1;
    grid-row: 4 / -1;
    width: 100%;
    align-self: end;
    
}
.day-offer-button:hover{
    box-shadow: .2rem .2rem 2rem #777;
}
/*here you are stretching the pictures so they look good*/
.day-offer img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/*DAY OFFER*/
/*BEST SELLING 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 ;
}
.bestselling-furniture-heading{
    background-color: #fffddd;
    width: 80%;
    margin-left: 18rem;
    text-align: center;
    font-size: 2.4rem;
    color: #458a9f;
    padding: .5rem 0;
    border-radius: .2rem;
    transform: translate(-50%);
}
.bestselling-furniture-parag{
    font-size: 1.9rem;
    color: #23487f;
    text-align: center;
    margin-bottom: 1.6rem;
}
.bestselling-furniture-button{
    width: 100%;
    padding: 1.6rem 0;
    background-color: #458a9f;
    font-size: 1.9rem;
    color: white;
    border: none;
    border-radius: .3rem .3rem;
}
.bestselling-furniture-button:hover{
    background-color: #23487f;
    box-shadow: 0 1.5rem 6rem black;
}
/*once again you are fixing the size of the pcitures*/
.bestselling-furniture-card img{
    height: 30rem;
    object-fit: cover;
}

/*BEST SELLING FURNITURE*/
/*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);
    grid-gap: 1.6rem;
    margin-top: 6.4rem;
    background-color: #34598f;
    padding: 1.6rem 0;
}
.gallery-img{
    width: 100%;
    height: 100%;
    opacity: .5;
    transition: .2s;
}
/*this is the effect you create on the gallery when you hover*/
.gallery-img:hover{
    opacity: 1;
}
/*THESE ARE JUST THE POSITIONS OF THE PICTURES IN THE GALLERY*/
.gallery-img1{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}
.gallery-img2{
    grid-column: 3 / 6;
    grid-row: 1 / 3;
}
.gallery-img3{
    grid-column: 6 / 7;
    grid-row: 1 / 2;
}
.gallery-img4{
    grid-column: 7 / 9;
    grid-row: 1 / 3;
}
.gallery-img5{
    grid-column: 1 / 3;
    grid-row: 1 / 4;
}
.gallery-img6{
    grid-column: 3 / 5;
    grid-row: 3 / 4;
}
.gallery-img7{
    grid-column: 6 / 7;
    grid-row: 2 / 4;
}
.gallery-img8{
    grid-column: 5 / 6;
    grid-row: 3 / 5;
}
.gallery-img9{
    grid-column: 1 / 3;
    grid-row: 4 / 5;
}
.gallery-img10{
    grid-column: 3 / 5;
    grid-row: 4 / 5;
}
.gallery-img11{
    grid-column: 6 / 7;
    grid-row: 4 / 5;
}
.gallery-img12{
    grid-column: 7 / 9;
    grid-row: 3 / 5;
}
/*TILL HERE*/

/*GALLERY*/

/*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: white;
}
.contact-form{
    display: flex;
    
}
.contact-form input{
    padding: .4rem 1rem;
    border: .1rem solid white;
    outline: none; 
}
.contact-input{
    border-radius: 5rem 0 0 5rem;
    border-right: none;
}
.contact-button{
    background-color: #34598f;
    color: #fff;
    border-radius: 0 5rem 5rem 0;
    border-left: none;
    transition: background-color .2s;
}
.contact-button:hover{
    background-color: #12376e;
    
}
/*CONTACT*/

/*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*/

/*MODAL BOX*/
.forms-wrapper{
    background-color: #eee;
    position: fixed;
    top:25%;
    left: 50%;
    transform: translate(-50%);
    z-index: 1000;
    padding: 2rem;
    border: 1rem solid #34598f;
    border-radius: .3rem;
    display: none;
}
/*with this you are putting both buttons in a line, thats why you put them inside a div back in html*/
.show-button-wrapper{
    display: flex;
    padding: 1rem;
    
}
.show-form-button{
    flex: /*flex grow*/0 /*flex shrink*/1 50%;
    background-color: #12376e;
    font-size: 1.5rem;
    color: white;
    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;
}   
/*not() excludes any element that you want */
.forms-wrapper form input:not(.form-button){
    background-color: white;
    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-button{
    width: 35%;
    background-color: #d38800;
    color: #fff;
    padding: 1rem;
    border: none;
    margin-top: .5rem;
    letter-spacing: .3rem;
}
.x-button{
    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;
    /*this is used to disable buttons*/
    pointer-events: none;

}
/*here you are playing with the checkbox inside the modal box, if its checked you enable one of the buttons 
and if you click the other one you disable the one you just clicked*/
/*this algorithm begins here*/
#show-form:checked ~ .show-button-wrapper .show-login-form{
    color: #888;
    background-color: #34598f;
    /*this is used to disable buttons*/
    pointer-events: none;
    
}
#show-form:checked ~ .show-button-wrapper .show-signup-form{
    color: #fff;
    background-color: #12376e;
    
    pointer-events: initial;
    
}
/*and ends here*/

/*the same happens here*/
.show-form:checked ~ .signup-form{
    display: none;
}

.show-form:checked ~ .login-form{
    display: block;
}
/*until here*/
/*this makes the modal box appear when you click on 'sign up/log in' on the page*/
#show-hide-forms:checked ~ .forms-wrapper{
    display: block;
    animation: anim .5s;
}
#show-hide-forms:checked ~ .container{
    pointer-events: none;
    opacity: .6;
}
@keyframes anim{
    0%{
        left: 40%;
    }
    50%{
        left: 60%;
    }
    75%{
        left: 45%;
    }
    100%{
        left: 50%;
    }
}
.first-nav-link label{
    cursor: pointer;
}
/*MODAL BOX*/

/*HERE IS WHERE YOU MAKE IT RESPONSIVE*/
@media(max-width: 1250px){
    .banner-heading{
        font-size: 8rem;
    }
    .day-offer-heading{
        font-size: 5rem;
    }
    .day-offer-parag{
        font-size: 3rem;
    }
}
@media(max-width: 1000px){
    .container{
        grid-template-columns: minmax(4rem, 1fr) repeat(8,minmax(min-content, 16rem)) minmax(6rem, 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-parag{
        font-size: 2.5rem;
    }
    .day-offer-img1{
        align-self: flex-end;

    }
    .forms-wrapper form{
        width: 40rem;
    }
}
@media(max-width: 800px){
    .container{
        grid-template-columns: minmax(2rem, 1fr) repeat(8,minmax(min-content, 16rem)) minmax(6rem, 1fr);
        grid-template-rows: repeat(3,min-content) 50vh repeat(5, min-content);
    }
    .social-icons{
        grid-column:  2 / 6;
        
    }
    .dropdown{
        width: 52rem;
        grid-template-columns: repeat(7, 7rem);
    }
    .dropdown-list-link{
        margin-bottom: .7rem;
        
    }
    .dropdown-img{
        /*here you are making sure to maintain the quality of the picture*/
        height: 100%;
        object-fit: cover;
    }
    .banner-button{
        width: 14rem;
        height: 4rem;
    }
    .slide-button1{
        left: 45.5%;
    }
    .slide-button2{
        left: 48.5%;
    }
    .slide-button3{
        left: 51.5%;
    }
    .slide-button4{
        left: 54.5%;
    }
    .day-offer-heading{
        font-size: 4rem;
    }
    .day-offer-parag{
        font-size: 2rem;
    }
    .day-offer-button{
        width: 13rem;
        padding: .8rem;
    }
}
@media(max-width: 600px){
    .container{
        grid-template-columns: minmax(1rem, 1fr) repeat(8,minmax(min-content, 16rem)) minmax(6rem, 1fr);
    }
    .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, 7rem);
    }
    .dropdown-img{
        display: none;
    }
    .banner-heading{
        font-size: 4rem;

    }
    .banner-button{
        transform: translateY(-2.5rem);
        height: 3.5rem;
    }
    .slide-button{
        top: 90%;

    }
    .slide-button1{
        left: 44%;
    }
    .slide-button2{
        left: 48%;
    }
    .slide-button3{
        left: 52%;
    }
    .slide-button4{
        left: 56%;
    }
    .day-offer{
        grid-column-gap: 1.4rem;
    }
    .day-offer-heading{
        font-size: 3rem;
    }
    .day-offer-parag{
        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;
    }
}