@media(max-width: 1835px) {
    .tittle-container {
        width: 90%;
    }
    .tittle-container h1 {
        padding-top: 100px;
    }
}

@media(max-width:1300px) {
    header .navbar {
        float: right;
        width: 100%;
    }
    header .navbar ul {
        width: auto;
    }
    header .logo {
        margin-left: 40px;
        margin-right: 40px;
    }
    footer .container {
        width: 100%;
    }
}

@media(max-width:1200px) {
    .box_container {
        width: 100%;
        height: auto;
    }
    .tittle-container {
        width: 100%;
    }
    .gallery{
        width: 100%;
    }
    .services{
        width: 450px;
        margin: 0 20px 0 20px;
    }
}

@media(max-width:980px) {
    .tittle-container h1 {
        font-size: 50px;
    }
    .tittle-container p {
        font-size: 30px;
    }
    #showcase img {
        object-fit: cover;
        object-position: -300px;
        height: 100%;
        width: auto;
    }
    header {
        height: 70px;
    }
    .menu-toggle {
        display: block;
    }
    header .navbar {
        width: 100%;
    }
    header .navbar nav {
        position: absolute;
        width: 100%;
        height: 100vh;
        background-color: rgba(53, 66, 74, .95);
        top: 70px;
        left: -100%;
    }
    header .navbar nav.active {
        background-color: rgba(53, 66, 74, .95);
        left: 0;
    }
    header .navbar ul {
        display: block;
        width: 100%;
    }
    header ul li a:hover {
        background-color: rgba(113, 122, 128, .9);
    }
    header ul li a {
        display: block;
        float: left;
        width: 100%;
        text-align: center;
        padding-right: 0px;
        padding-left: 0px;
    }
    .services{
        width: 350px;
        margin: 0 10px 0 10px;
    }
}

@media(max-width: 768px) {
    .tittle .container {
        width: 100%;
    }
    #boxes .box {
        float: none;
        text-align: center;
        margin: 0px;
        margin-top: 10px;
        width: 98%;
        height: 350px;
    }
    #showcase h1 {
        margin-top: 40px;
    }
    footer {
        padding: 0px;
    }
    .contact {
        background-color: #35424a;
        width: 100%;
        height: 720px;
    }
    .contact-info {
        position: relative;
        padding-bottom: 10px;
        margin: 0 auto;
        top: 0;
        right: 0;
    }
    iframe {
        height: 660px;
    }
    .tittle-container h1 {
        margin-top: 250px;
        font-size: 35px;
    }
    .tittle-container p {
        font-size: 25px;
    }
    .services{
        width: 100%;
        margin: 0 20px 0 20px;
    }
}

@media(max-width: 500px) {
    .slick-photos {
        margin: 0 auto;
        width: 450px;
        height: auto;
    }
    .slick-photos img {
        width: 450px;
        height: auto;
    }
    .con .box_container {
        height: auto;
    }
    .about_us .tittle {
        font-size: 35px;
    }
    .about_us {
        height: 800px;
    }
    .about_us.us2 {
        height: 930px;
    }
}

@media(max-width: 450px) {
    .slick-photos {
        width: 400px;
        height: auto;
    }
}

@media(max-width: 400px) {
    .slick-photos {
        width: 300px;
        height: auto;
    }
    .about_us .tittle {
        font-size: 30px;
    }
    .about_us {
        height: 750px;
    }
}

@media(max-width: 375px) {
    .about_us.us2 {
        height: 1050px;
    }
    .gallery-img{
        width: 280px;
    }
    .gallery-overlay {
        height: 280px;
    }
}