body {
    margin: 0;
    font-family: sans-serif, fantasy;
    box-sizing: border-box;
}
* {
    box-sizing: inherit;
}
.header {
    background: #b16cb9;
    color: #ebeef5;
    align-items: center;
    padding: 1em;
}
header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 16px;
}

.image-container {
    background-image: url(slider.jpg);
    height: 100vh;
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
    justify-content: center;
}
.container {
    background: aqua;
}
.header__title {
    margin: 0 .1em;
    font-size: 1.3em;
    color: gold;
}
.header__link {
    text-decoration: none;
    background: #ed4933;
    margin: 1em;
    padding: 0.3em 0.9em;
    display: inline-block;
    border-radius: 0.4em;
}
.feauturs {
    text-align: center;
    display: block;
    background: #21b2a6;
    padding: 80px;
    margin: 0 auto;
    color: white;
}

.material-icons {
    margin: .5em;
}    

.header__icon {
    margin: auto;
}
.feauture__icons > i {
    margin: 0 .5em;
}

.feauture__icons > i.code {
    color: #76ddff;
}
.mdi-menu {
    font-size: 1.5em;
    color:gold;
}

.feauture__icons > i {
    font-size: 3em;
}
.mdi-heart-outline {
    color: aquamarine;
}

.mdi-diamond {
    color: aqua;
}

.category__row {
    height: 313px;
}
.category__row__img {
    width: 540px;
    max-width: 100%;
    height: 100%;
    float: left;
    margin: 0em;
}

.category__row__txt {
    height: 100%;
    padding: 20px;
    text-align: center;
    display: block;
    margin: 0 auto;
    background: #2b343d;
    color: aliceblue;   
}

.box {
    display: block;
    background: #505393;
    padding: 104px 154px;
    margin: 0 auto;
    color: white;
}

.tile {
    background-image: url(9.jpg)
}

.image1 {
    background-image: url(images.jfif);
    height: 100vh;
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
    justify-content: center;
}
.m-0 {
    margin: 0;
}

.roof__card {
    display: flex;
    flex-direction: row;
    align-items: start;
    align-content: center;
    flex: 1 1 100%;
    box-sizing: border-box;
    max-width: 50%;
    max-height: 100%;
    padding: 40px 32px;
}
@media (max-width: 767px) {
    .roof {
        flex-direction: column; 
    }
    .roof__card {
        max-width: 100%;
    }
    .box {
        padding: 0 16px;
    }
}
.cite {
    text-align: center;
}

.roof > .roof__card:nth-child(odd) {
    background-color: #4a4d89;
}
.roof > .roof__card:nth-child(even) {
    background-color: #4d508e;
}

.roof__card__icon {
    flex: 1 1 100%;
    max-width: 18%;
    text-align: center;
    font-size: 24px;
}

.roof__card__title {
    margin: 0;
    font-size: 1em;
}

.roof {
    display: flex;
    flex-wrap: wrap;
    font-size: 1em;
}

.mdi {
    color: aqua;
}

.disc {
    background-image: url(winter_wallpaper_4_.jpg);
    padding: 64px 154px;
    display: flex;
    position: relative;
    z-index: 1;
}
.disc:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 0;
}

.title {
    margin: 0;
}

.disc-txt {
    flex: 1;
    z-index: 1;
    color: #fff;
    font-size: 1.3em;
}

.disc-action {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.readmore__link {
    border: 2px solid #fff;
    font-size: 20px;
    color: #fff;
    padding: 5px 10px;
    text-decoration: none;
}

.active__link {
    border: 2px solid #fff;
    font-size: 20px;
    color: #fff;
    padding: 5px 10px;
    text-decoration: none;
    background: #ed4933;
    margin-bottom: 1em;
}
.text-center{
    text-align: center;   
}
footer{
    background:  #1d242a;
    padding: 64px 0;
}

.social__icon {
    font-size: 26px;
    padding: 0 8px;
}

.copy-right {
    color: #fff;
    margin-top: 20px;
    font-size: 14px;
}