.container, body{
    background-color: #fbfbfd;

}

.main-grid-container{
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, minmax(100px, auto));
    margin: 0 24px;
    grid-gap: 12px 12px;
    background-color: #fbfbfd;

}

.item{
    margin-top: 24px;
}

/*-----item-1-----*/

.item-1{
    grid-column:  1 / 3;
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 24px;
}
.item-1 h4{
    color: #6e6e73;
    font-size: 28px;
    font-weight: 550;
}
.content-header{
    height: fit-content;
    font-size: 48px;
    font-weight: 600;
}

.button-red {
    border: 2px solid #d00000;
    background-color: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width:fit-content;
    padding: 8px 22px 9px 22px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: 500;
    transition: ease .3s;
}
.button-red img {
    width: 22px;
    margin-right: 8px;
    filter: invert(12%) sepia(100%) saturate(5022%)
    hue-rotate(5deg) brightness(83%) contrast(118%);
}
.button-red a {
    color: #d00000;
}
.button-red:hover, .button-red:active{
    background-color: #d00000;
    cursor: pointer;
}
.button-red:hover a, .button-red:active a{
    color: #fff;
}
.button-red:hover img{
    filter: invert(100%) sepia(0%) saturate(0%)
    hue-rotate(93deg) brightness(103%) contrast(103%);
}



/*-----item-2-----*/
.item-2{
    grid-column:  3 / 5;
    grid-row: 1 / 5;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item-2 img{
    width: 90%;
    object-fit: cover;
}

/*-----item-3-----*/


.item-3{
    grid-column: 1 / 3;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.item-3 img{
    width: 102px;
    opacity: .5;
}

/*-----service-area-----*/
.service-header{
    margin: 75px 0 0 24px;
    font-size: 28px;
}
.service-header b{
    font-size: 24px;
    color: #6e6e73;
    padding: 0 5px;
}
.service-area{
    width: 100%;
    margin: auto;
    height: 18rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
/*box----------*/
.box{
    background-color: #fff;
    width: 20rem;
    height: 14rem;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    border-radius: 15px;
    box-shadow:  2px 4px 12px rgba(0,0,0,.08);
}
.box h4{
    font-size: 22px;
}
.box img{
    width: 42px;
    margin-bottom: 24px;
}

.box:hover, .box:active{
    transform: scale(1.05);
    transition: ease .3s;
}

/*-----home-about-----*/
.about-area{
    width: 100%;
    height: 24rem;
    display: flex;
    padding: 24px 24px;
    justify-content: space-between;
    align-items: center;
}
.about-area img{
    width: 20rem;
    height: 22rem;
    object-fit: cover;
    border-radius: 15px;
}
.home-about{
    background-color: #fbfbfd;
    width: 70%;
    height: 22rem;
    padding: 12px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.home-about p{
    font-size: 18px;
    font-weight: 500;
}

.button-mini-red{
    border: 2px solid #d00000;
    background-color: none;
    color: #d00000;
    display: flex;
    justify-content: center;
    align-items: center;
    width:fit-content;
    padding: 6px 22px;
    margin: 24px 0;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 500;
    transition: ease .3s;
}

.button-mini-red:hover, .button-mini-red:active{
    background-color: #d00000;
    cursor: pointer;
}
.button-mini-red a{
    color: #d00000;
}
.button-mini-red:hover a, .button-mini-red:active a{
    color: #fff;
}

footer{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 48px 0;
}

footer hr{
    width: 97%;
    margin: auto;
}

footer .logo{
    font-size: 16px;
    padding: 1px 0;
}
footer .nav-item, p{
    font-size: 16px;
    padding: 3px 0;
    color: #000;
    opacity: .7;
}

.footer-link{
    width: 150px;
}

.footer-info{
    width: 200px;
}

.footer-area{
    display: flex;
    padding: 24px 24px;
    justify-content: space-around;
    align-items: center;
}
.f-item1{
    display: flex;
    flex-direction: row;
}

.footer-address{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 400px;
    font-size: 20px;
}
.footer-address a{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 12px 0;
}

.footer-address h5{
    font-weight: 500;
}

.footer-address img{
    width: 42px;
    margin-right: 8px;
}

.copyright{
    font-size: 14px;
    margin-left: 24px;
}

/*-----about-page-----*/
.about{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.about-title{
    width: 85%;
    font-size: 18px;
    font-weight: 600;
    padding: 12px 0;
}
.about-box{
    text-align: left;
    width: 85%;
    font-size: 16px;
    font-weight: 500;
    text-align: justify;
    padding: 8px 0;

}
.about-img1{
    height: 300px;
    width: 85%;
    margin: 24px 0;
    border-radius: 15px;
    object-fit: cover;
}

/*-----services-area-----*/
.services-container{
    margin: 24px 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.services-item{
    background-color: #fff;
    margin: 8px;
    width: 45%;
    height: 75px;
    padding: 24px;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow:  2px 4px 12px rgba(0,0,0,.08);
}
.services-item p{
    font-size: 22px;
    font-weight: 600;
    padding-left: 22px;
}

.services-container img{
    width: 40px;
    filter: invert(13%) sepia(85%) saturate(4021%)
    hue-rotate(354deg) brightness(96%) contrast(121%);
}



/*-----MEDİA-----*/
@media only screen and (max-width: 900px){

    .main-grid-container{
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(5, minmax(100px, auto));
        margin: 0 24px;
        grid-gap: 12px 12px;
    }
    
    
    .item-1{

        grid-column:  1 / 5;
        grid-row: 1 / 3;
    }
    .item-1 h4{
        color: #6e6e73;
        font-size: 22px;
        font-weight: 550;
    }
    .content-header{
        height: fit-content;
        font-size: 32px;
        font-weight: 600;
    }
    
    .item-2{
        grid-column:  1 / 5;
        grid-row: 3 / 5;
    }

    .item-3{
        grid-column:  1 / 5;
        grid-row: 5 / 6;
    }
    
    /*-----box-----*/
    .service-header{
        font-size: 24px;
    }
    .service-header b{
        display: block;
        font-size: 18px;
        padding: 0;
    }
    .service-area{
        flex-direction: column;
        height: 28rem;
    }
    .service-area .box{
        width: 90%;
        height: 8rem;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }
    .service-area .box h4{
        font-size: 24px;
    }
    .box img{
        width: 42;
        position: relative;
        top: 9%;
    }

    .about-area{
        flex-direction: column;
        margin-bottom: 400px;
    }
    .about-area img{
        width: 100%;
        height: 16rem;
    }
    .home-about{
        width: 100%;
        height: 32rem;
        padding: 24px 0;
        display: flex;
        align-items: flex-start;
    }


    .footer-area{
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
    }
    .footer-address{
        margin-top: 48px;
    }
    .footer-address h5{
        font-size: 14px;
    }
    .footer-address img{
        width: 32px;
    }
    .f-item1{
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }
    
    /*-----services-----*/
    .services-item{
        width: 100%;
    }

}