* {
    font-family: 'IBM Plex Sans', sans-serif;
}

:root {
    --color-green: #008080;
    --color-blak: #2B2B2B;
    --color-white: #FFFFFF;
    --color-green-fd: #E0F8F8;
    --color-ex-blak: #1E1E1E;

}

/* start font size */

/* x lg */
@media (min-width: 1400px) {
    .xx-lg-font {
        font-size: 86px;
    }

    .x-lg-font {
        font-size: 48px;
    }

    .ex-lg-font {
        font-size: 40px;
    }

    .lg-font {
        font-size: 28px;
    }

    .s-lg-font {
        font-size: 26px;
    }

    .ex-md-font {
        font-size: 24px;
    }

    .md-font {
        font-size: 22px;
    }

    .ex-sm-font {
        font-size: 20px;
    }

    .sm-font {
        font-size: 18px;
    }
}

/* lg */
@media (min-width: 1200px) and (max-width: 1399px) {
    .xx-lg-font {
        font-size: 65px;
    }

    .x-lg-font {
        font-size: 40px;
    }

    .ex-lg-font {
        font-size: 40px;
    }

    .lg-font {
        font-size: 28px;
    }

    .s-lg-font {
        font-size: 26px;
    }

    .ex-md-font {
        font-size: 20px;
    }

    .md-font {
        font-size: 22px;
    }

    .ex-sm-font {
        font-size: 20px;
    }

    .sm-font {
        font-size: 18px;
    }
}

/* md */
@media (min-width: 580px) and (max-width: 1199px) {
    .xx-lg-font {
        font-size: 47px;
    }

    .x-lg-font {
        font-size: 36px;
    }

    .ex-lg-font {
        font-size: 40px;
    }

    .lg-font {
        font-size: 28px;
    }

    .s-lg-font {
        font-size: 21px;
    }

    .ex-md-font {
        font-size: 18px;
    }

    .md-font {
        font-size: 17px;
    }

    .ex-sm-font {
        font-size: 20px;
    }

    .sm-font {
        font-size: 18px;
    }

}

/* sm */
@media (max-width: 579) {
    .xx-lg-font {
        font-size: 35px;
    }

    .x-lg-font {
        font-size: 30px;
    }

    .ex-lg-font {
        font-size: 40px;
    }

    .lg-font {
        font-size: 28px;
    }

    .s-lg-font {
        font-size: 26px;
    }

    .ex-md-font {
        font-size: 13px;
    }

    .md-font {
        font-size: 22px;
    }

    .ex-sm-font {
        font-size: 18px;
    }

    .sm-font {
        font-size: 18px;
    }
}

/* end font size */

/* start w-h size */

/* lg */

@media (min-width: 991px) {
    .container-felx {
        display: flex;
        justify-content: space-between;
    }

    nav img {
        width: 25%;
    }
}

/* md */
@media (min-width: 769px) and (max-width: 991px) {
    .con-btn {
        font-size: 22px;
    }

    .main-size-img {
        height: 106%;
    }

    .address con {
        margin: auto;
    }

}

@media (max-width: 991px) {

    nav .container-btn,
    nav ul {
        display: flex;
        flex-direction: column;
    }

    nav img {
        width: 50%;
    }

    .address input {
        text-align: center;
    }

    footer {
        text-align: center;
    }

}

/* sm */

@media (max-width: 769px) {
    con-btn {
        font-size: 19px;
    }
    .con-ser{
        text-align: center;
    }
}

/* end w-h size */

/* start main style */
.main-input {
    border: none;
    box-shadow: 0 0 21px -18px black;
    padding: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.main-btn {
    background-color: var(--color-green);
    color: var(--color-white);
    border: none;
    padding: 15px;
}

.main_span {
    position: relative;
    padding: 5px;
    color: var(--color-green);
    background: var(--color-green-fd);
    text-transform: uppercase;
}

.main_span::after {
    content: '';
    width: 100px;
    height: 2px;
    background-color: var(--color-green);
    position: absolute;
    bottom: 10px;
    left: 126%;
}

.con-span {
    overflow: hidden;
}

/* end main style */

/* start nav */

.navbar {
    background-color: var(--color-white);
}

.btn-chiled {
    color: var(--color-green);
    border: none;
    padding: 15px;
    background-color: transparent;
}

.navbar ul li a {
    font-size: 20px;
}

/* end nav */
/* start smail */
.email form {
    display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

/* end email */
/* start brand */
.brand .main-brand {
    padding: 20px;
    display: grid;
    align-content: center;
    justify-content: space-evenly;
}

.brand img {
    filter: grayscale(100%);
    transition: .5s;
}

.brand img:hover {
    filter: grayscale(0%);
    transition: .5s;
}

/* end brand */
/* start expertise */
.expertise button {
    border: 1px solid black;
    background-color: var(--color-white);
    color: var(--color-ex-blak);
}

/* end expertise */
/* start Service */
.service button {
    border: 1px solid black;
    background-color: var(--color-white);
    color: var(--color-ex-blak);
}

/* end Service */
/* start comment */

.comment .card {
    border: #D5DDDD solid 1px;

}

.comment .main_card {
    border: 2px solid #c1c1c1;
    padding: 6%;
    border-top-left-radius: 8%;
    border-bottom-right-radius: 8%;
}

.main_img {
    border-radius: 50%;
    background: #E8E8E6;
}

.comment .main_card .container {
    text-align: start;
    padding: 0 33px;
}

/* end comment */
/* start team */

.team .main_img {
    border-radius: 30%;
    width: 27%;
    padding: 20px;
}

.team a {
    text-decoration: none;
    color: var(--color-green);
    font-size: 22px;
}

/* end team */
/* start address */
.address .container {
    background-color: #008080;
    padding: 50px;
    border-bottom-right-radius: 30px;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
}

.address button {
    background-color: #20CFC6;
    color: var(--color-white);
    border: none;
    padding: 15px;
    border-radius: 5px;
}

.address .main_span {
    color: #2CDFD5;
    background-color: #008080;
}

.main_span::after {
    background-color: #2CDFD5;
    padding: 1px;
}

.address input {
    font-size: 20px;
    border-radius: 5px;
}

.address form {
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}

/* end address */
/* start footer */
footer {
    background-color: var(--color-green);
}

footer a {
    color: white;
    text-decoration: none;

}

footer ul {
    list-style: none;
}

footer ul li {
    padding: 10px 16px;
}

/* end footer */