/*  Large Screen */
@media (min-width: 992px ) and (max-width: 1200px ){
    .container {
        max-width: 960px;
    }
    .boss-section .container {
        background-size: 50%;
    }
    .our-statistics .container .container-statistic {
        grid-template-columns: repeat(3,1fr);
    }
}

/*  Medium Screen */
@media (min-width: 768px ) and (max-width: 991.98px ) {
    .container {
        max-width: 720px;
    }
    .boss-section .container {
        background-size: 60%;
    }
    .our-statistics .container .container-statistic {
        grid-template-columns: repeat(2,1fr);
    }
}

/*  Small Screen */
@media (min-width: 577px) and (max-width: 767.98px ) {
    .container {
        max-width: 540px;
    }   
    .navbar-container .container .main-menu {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .header-container .brand-logo .container a img {
        height: 60px;
    }
    .boss-section .container {
        background-size: 70%;
    }
    .boss-section .container h2 {
        font-size: 55px;
        color: var(--white-one-color);
        margin-bottom: 15px;
    }
    .boss-section .container p {
        font-size: 40px;
        color: var(--white-six-color);
        max-width: 600px;
        text-align:justify;
        line-height: 50px;
    }
    .our-statistics .container .container-statistic {
        grid-template-columns: repeat(1,1fr);
    }
}

/*   Extra small Screen */
@media (max-width: 576px) {
    .container {
        max-width: 100%;
    }
    .navbar-container .container .main-menu {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .navbar-container .container img {
        height: 40px;
        margin: 0px 10px 0px 0px;
    }
    .header-container .brand-logo .container a img {
        height: 50px;
    }
    .boss-section .container {
        background-size: 100%;
    }
    .boss-section .container h2 {
        font-size: 8vw;
        color: var(--white-one-color);
        margin-bottom: 15px;
    }
    .boss-section .container p {
        font-size: 6vw;
        color: var(--white-six-color);
        max-width: 350px;
        text-align:justify;
        line-height: 30px;
    }
    .our-statistics .container > h2 {
        font-size: 50px;
    }
    .our-statistics .container > p {
        font-size: 20px;
    }
    .our-statistics .container .container-statistic {
        grid-template-columns: repeat(1,1fr);
    }
    .our-Summary .container .container-Summary .our-name h3 {
        font-size: 25px;
    }
    .our-Summary .container .container-Summary .our-name p {
        font-size: 18px;

    }
    .our-Summary .container .container-Summary .about-us p {

        font-size: 25px;
        line-height: 50px;

    }
    .our-Summary .container .container-Summary button {
        position: relative;
        font-family: 'lyon',Arial, Helvetica, sans-serif;
        background-color: var(--black-three-color);
        border: 1px solid var(--white-six-color);
        color: var(--white-four-color);
        font-size: 20px;
        width: 250px;
        height: 60px;
        cursor: pointer;
        transition: background 1s;
    }
}