@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');







@media only screen and (min-width:200px) and (max-width:399px) {
     .main-header {
        width: 100%;
        height: 110px;
        background-color: #fff;
        box-shadow: 1px 2px 14px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.6s ease-in-out;
        z-index: 2000;
        position: fixed;
        top: 0;
    }

    .toogle {
        height: 380px;
        transition: all 0.9s ease-in-out;
        z-index: 2000;
    }

    .main-content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
    }

    .main-content-header img {
        width: 220px;
        height: 100px;
        object-fit: cover;
        margin-top: 12px;
    }

    .main-content-header i {
        font-size: 28px;
        color: #ff9900;
    }

    .nav-bar-container {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding: 10px 0;
    }

    .nav-bar {
        display: flex;
        justify-content: center;
        flex-direction: column;
        row-gap: 15px;
        padding: 0 20px;
    }

    .nav-bar a {
        font-size: 18px;
        color: #000;
        text-decoration: none;
    }

    .nav-bar a:hover {
        color: #ff9900;
    }

    .social-media {
        padding: 20px 20px;
        display: flex;
        gap: 30px;
        justify-content: center;
    }

    .fa-instagram,
    .fa-facebook-f,
    .fa-twitter,
    .fa-whatsapp {
        font-size: 22px;
        color: #666;
    }

    .background-image {
        background-image: url('https://plus.unsplash.com/premium_photo-1661883237884-263e8de8869b?q=80&w=1189&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
        height: 250px;
        background-size: cover;
        background-position: center;
        width: 100%;
        background-attachment: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 20px;
        background-repeat: no-repeat;
    }

    .blur-cont {
        background-color: #cccccc60;
        width: 90%;
        margin: auto;
        text-align: center;
        padding: 20px;
        border-radius: 10px;
        transition: all 0.9s ease-in-out;
        animation: blur 1s linear 0.1s 3 alternate-reverse;
        font-weight: 700;
        text-shadow: 1px 1px 2px #000;
    }

    .about-us {
        font-size: 32px;
        margin-top: 10px;
        padding: 20px;
        transition: all 0.9s ease-in-out;
        text-align: center;
        animation: blur 1s linear 0.1s 3 alternate-reverse;
        position: relative;
        width: 100%;
        margin-top: 110px;
    }

    .about-us::before {
        position: absolute;
        bottom: 0;
        left: 20px;
        content: '';
        background-color: #ff9900;
        height: 2px;
        width: 90%;
        transition: all 0.9s ease-in-out;
        animation: timeout 1s ease-in-out 1s 3 alternate-reverse;

    }

    .content-of-abouts {
        padding: 20px;
        text-align: justify;
        font-size: 15px;
        line-height: 27px;
    }

    @keyframes blur {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes timeout {
        0% {
            width: 90%;
        }

        100% {
            width: 0;
        }
    }

    .mission-container {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .mission {
        width: 80%;
        margin: auto;
        padding: 20px;
        text-align: justify;
        background-color: #fff;
        height: 600px;
        color: #000;
        border-radius: 12px;
        box-shadow: 1px 2px 14px rgba(0, 0, 0, 0.2);
        position: relative;
    }

    .mission h2 {
        font-size: 28px;
        text-align: center;
        margin-top: 120px;
        padding-bottom: 10px;
        position: relative;
    }

    .mission h2::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 2px;
        background-color: #ff9900;
        animation: timeout 1s ease-in-out 1s 3 alternate-reverse;
    }

    .user-content {
        position: absolute;
        left: 120px;
        top: 20px;
    }

    .user-content img {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid #ff9900;
    }

    .fa-quote-right,
    .fa-quote-left {
        font-size: 22px;
        color: #ff9900;
    }

    .mission p {
        margin-top: 30px;
        line-height: 28px;
        font-size: 14px;
    }

    .footer {
        height: 100px;
        background-color: #333;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer span {
        padding: 0 5px;
    }
    .nameowner {
        font-weight: 700;
        color: #ff9900;
    }
}









/* lg mobiles */
@media only screen and (min-width:400px) and (max-width:767px) {

    .main-header {
        width: 100%;
        height: 110px;
        background-color: #fff;
        box-shadow: 1px 2px 14px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.6s ease-in-out;
        z-index: 2000;
        position: fixed;
        top: 0;
    }

    .toogle {
        height: 380px;
        transition: all 0.9s ease-in-out;
        z-index: 2000;
    }

    .main-content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
    }

    .main-content-header img {
        width: 220px;
        height: 100px;
        object-fit: cover;
        margin-top: 12px;
    }

    .main-content-header i {
        font-size: 28px;
        color: #ff9900;
    }

    .nav-bar-container {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding: 10px 0;
    }

    .nav-bar {
        display: flex;
        justify-content: center;
        flex-direction: column;
        row-gap: 15px;
        padding: 0 20px;
    }

    .nav-bar a {
        font-size: 18px;
        color: #000;
        text-decoration: none;
    }

    .nav-bar a:hover {
        color: #ff9900;
    }

    .social-media {
        padding: 20px 20px;
        display: flex;
        gap: 30px;
        justify-content: center;
    }

    .fa-instagram,
    .fa-facebook-f,
    .fa-twitter,
    .fa-whatsapp {
        font-size: 22px;
        color: #666;
    }

    .background-image {
        background-image: url('https://plus.unsplash.com/premium_photo-1661883237884-263e8de8869b?q=80&w=1189&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
        height: 250px;
        background-size: cover;
        background-position: center;
        width: 100%;
        background-attachment: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 20px;
        background-repeat: no-repeat;
    }

    .blur-cont {
        background-color: #cccccc60;
        width: 90%;
        margin: auto;
        text-align: center;
        padding: 20px;
        border-radius: 10px;
        transition: all 0.9s ease-in-out;
        animation: blur 1s linear 0.1s 3 alternate-reverse;
        font-weight: 700;
        text-shadow: 1px 1px 2px #000;
    }

    .about-us {
        font-size: 32px;
        margin-top: 10px;
        padding: 20px;
        transition: all 0.9s ease-in-out;
        text-align: center;
        animation: blur 1s linear 0.1s 3 alternate-reverse;
        position: relative;
        width: 100%;
        margin-top: 110px;
    }

    .about-us::before {
        position: absolute;
        bottom: 0;
        left: 20px;
        content: '';
        background-color: #ff9900;
        height: 2px;
        width: 90%;
        transition: all 0.9s ease-in-out;
        animation: timeout 1s ease-in-out 1s 3 alternate-reverse;

    }

    .content-of-abouts {
        padding: 20px;
        text-align: justify;
        font-size: 15px;
        line-height: 27px;
    }

    @keyframes blur {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes timeout {
        0% {
            width: 90%;
        }

        100% {
            width: 0;
        }
    }

    .mission-container {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .mission {
        width: 80%;
        margin: auto;
        padding: 20px;
        text-align: justify;
        background-color: #fff;
        height: 600px;
        color: #000;
        border-radius: 12px;
        box-shadow: 1px 2px 14px rgba(0, 0, 0, 0.2);
        position: relative;
    }

    .mission h2 {
        font-size: 28px;
        text-align: center;
        margin-top: 120px;
        padding-bottom: 10px;
        position: relative;
    }

    .mission h2::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 2px;
        background-color: #ff9900;
        animation: timeout 1s ease-in-out 1s 3 alternate-reverse;
    }

    .user-content {
        position: absolute;
        left: 120px;
        top: 20px;
    }

    .user-content img {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid #ff9900;
    }

    .fa-quote-right,
    .fa-quote-left {
        font-size: 22px;
        color: #ff9900;
    }

    .mission p {
        margin-top: 30px;
        line-height: 28px;
        font-size: 14px;
    }

    .footer {
        height: 100px;
        background-color: #333;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer span {
        padding: 0 5px;
    }
    .nameowner {
        font-weight: 700;
        color: #ff9900;
    }
}






/*  tablets */
@media only screen and (min-width:768px) and (max-width:1023px) {
 .main-header {
        width: 100%;
        height: 110px;
        background-color: #fff;
        box-shadow: 1px 2px 14px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.6s ease-in-out;
        z-index: 2000;
        position: fixed;
        top: 0;
    }

    .toogle {
        height: 380px;
        transition: all 0.9s ease-in-out;
        z-index: 2000;
    }

    .main-content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
    }

    .main-content-header img {
        width: 220px;
        height: 100px;
        object-fit: cover;
        margin-top: 12px;
    }

    .main-content-header i {
        font-size: 28px;
        color: #ff9900;
    }

    .nav-bar-container {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding: 10px 0;
    }

    .nav-bar {
        display: flex;
        justify-content: center;
        flex-direction: column;
        row-gap: 15px;
        padding: 0 20px;
    }

    .nav-bar a {
        font-size: 18px;
        color: #000;
        text-decoration: none;
    }

    .nav-bar a:hover {
        color: #ff9900;
    }

    .social-media {
        padding: 20px 20px;
        display: flex;
        gap: 30px;
        justify-content: center;
    }

    .fa-instagram,
    .fa-facebook-f,
    .fa-twitter,
    .fa-whatsapp {
        font-size: 22px;
        color: #666;
    }

    .background-image {
        background-image: url('https://plus.unsplash.com/premium_photo-1661883237884-263e8de8869b?q=80&w=1189&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
        height: 250px;
        background-size: cover;
        background-position: center;
        width: 100%;
        background-attachment: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 20px;
        background-repeat: no-repeat;
    }

    .blur-cont {
        background-color: #cccccc60;
        width: 90%;
        margin: auto;
        text-align: center;
        padding: 20px;
        border-radius: 10px;
        transition: all 0.9s ease-in-out;
        animation: blur 1s linear 0.1s 3 alternate-reverse;
        font-weight: 700;
        text-shadow: 1px 1px 2px #000;
    }

    .about-us {
        font-size: 32px;
        margin-top: 10px;
        padding: 20px;
        transition: all 0.9s ease-in-out;
        text-align: center;
        animation: blur 1s linear 0.1s 3 alternate-reverse;
        position: relative;
        width: 100%;
        margin-top: 110px;
    }

    .about-us::before {
        position: absolute;
        bottom: 0;
        left: 20px;
        content: '';
        background-color: #ff9900;
        height: 2px;
        width: 90%;
        transition: all 0.9s ease-in-out;
        animation: timeout 1s ease-in-out 1s 3 alternate-reverse;

    }

    .content-of-abouts {
        padding: 20px;
        text-align: justify;
        font-size: 15px;
        line-height: 27px;
    }

    @keyframes blur {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes timeout {
        0% {
            width: 90%;
        }

        100% {
            width: 0;
        }
    }

    .mission-container {
        display: flex;
        flex-wrap: wrap-reverse;
        gap: 40px;
    }

    .mission {
        width: 40%;
        margin: auto;
        padding: 20px;
        text-align: justify;
        background-color: #fff;
        height: 600px;
        color: #000;
        border-radius: 12px;
        box-shadow: 1px 2px 14px rgba(0, 0, 0, 0.2);
        position: relative;
    }

    .mission h2 {
        font-size: 28px;
        text-align: center;
        margin-top: 120px;
        padding-bottom: 10px;
        position: relative;
    }

    .mission h2::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 2px;
        background-color: #ff9900;
        animation: timeout 1s ease-in-out 1s 3 alternate-reverse;
    }

    .user-content {
        position: absolute;
        left: 100px;
        top: 20px;
    }

    .user-content img {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid #ff9900;
    }

    .fa-quote-right,
    .fa-quote-left {
        font-size: 22px;
        color: #ff9900;
    }

    .mission p {
        margin-top: 30px;
        line-height: 28px;
        font-size: 14px;
    }

    .footer {
        height: 100px;
        background-color: #333;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer span {
        padding: 0 5px;
    }
    .nameowner {
        font-weight: 700;
        color: #ff9900;
    }

}





/* laptops */
@media only screen and (min-width:1024px) and (max-width:1439px) {
   .main-header {
        width: 100%;
        height: 110px;
        background-color: #fff;
        box-shadow: 1px 2px 14px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.6s ease-in-out;
        z-index: 2000;
        position: fixed;
        top: 0;
    }

    .toogle {
        height: 380px;
        transition: all 0.9s ease-in-out;
        z-index: 2000;
    }

    .main-content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
    }

    .main-content-header img {
        width: 220px;
        height: 100px;
        object-fit: cover;
        margin-top: 12px;
    }

    .main-content-header i {
        font-size: 28px;
        color: #ff9900;
    }

    .nav-bar-container {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding: 10px 0;
    }

    .nav-bar {
        display: flex;
        justify-content: center;
        flex-direction: column;
        row-gap: 15px;
        padding: 0 20px;
    }

    .nav-bar a {
        font-size: 18px;
        color: #000;
        text-decoration: none;
    }

    .nav-bar a:hover {
        color: #ff9900;
    }

    .social-media {
        padding: 20px 20px;
        display: flex;
        gap: 30px;
        justify-content: end;
    }

    .fa-instagram,
    .fa-facebook-f,
    .fa-twitter,
    .fa-whatsapp {
        font-size: 22px;
        color: #666;
    }

    .background-image {
        background-image: url('https://plus.unsplash.com/premium_photo-1661883237884-263e8de8869b?q=80&w=1189&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
        height: 550px;
        background-size: cover;
        background-position: center;
        width: 100%;
        background-attachment: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 20px;
        background-repeat: no-repeat;
    }

    .blur-cont {
        background-color: #cccccc60;
        width: 90%;
        margin: auto;
        text-align: center;
        padding: 20px;
        border-radius: 10px;
        transition: all 0.9s ease-in-out;
        animation: blur 1s linear 0.1s 3 alternate-reverse;
        font-weight: 700;
        text-shadow: 1px 1px 2px #000;
    }

    .about-us {
        font-size: 32px;
        margin-top: 10px;
        padding: 20px;
        transition: all 0.9s ease-in-out;
        animation: blur 1s linear 0.1s 3 alternate-reverse;
        position: relative;
        width: 100%;
        margin-top: 110px;
    }

    .about-us::before {
        position: absolute;
        bottom: 0;
        left: 20px;
        content: '';
        background-color: #ff9900;
        height: 2px;
        width: 90%;
        transition: all 0.9s ease-in-out;
        animation: timeout 1s ease-in-out 1s 3 alternate-reverse;

    }

    .content-of-abouts {
        padding: 20px;
        text-align: justify;
        font-size: 15px;
        line-height: 27px;
        width: 50%;
        margin: auto;
    }

    @keyframes blur {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes timeout {
        0% {
            width: 90%;
        }

        100% {
            width: 0;
        }
    }

    .mission-container {
        display: flex;
        width: 90%;
        margin: auto;
        gap: 20px;
    }

    .mission {
        width: 50%;
        margin: auto;
        padding: 20px;
        text-align: justify;
        background-color: #fff;
        height: 600px;
        color: #000;
        border-radius: 12px;
        box-shadow: 1px 2px 14px rgba(0, 0, 0, 0.2);
        position: relative;
    }

    .mission h2 {
        font-size: 28px;
        text-align: center;
        margin-top: 120px;
        padding-bottom: 10px;
        position: relative;
    }

    .mission h2::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 2px;
        background-color: #ff9900;
        animation: timeout 1s ease-in-out 1s 3 alternate-reverse;
    }

    .user-content {
        position: absolute;
        left: 110px;
        top: 20px;
    }

    .user-content img {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid #ff9900;
    }

    .fa-quote-right,
    .fa-quote-left {
        font-size: 22px;
        color: #ff9900;
    }

    .mission p {
        margin-top: 30px;
        line-height: 28px;
        font-size: 14px;
    }

    .footer {
        height: 100px;
        background-color: #333;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer span {
        padding: 0 5px;
    }
    .nameowner {
        font-weight: 700;
        color: #ff9900;
    }

}






/* desktop */
@media only screen and (min-width:1440px) and (max-width:2159px) {
   
     .main-header {
        width: 100%;
        height: 110px;
        background-color: #fff;
        box-shadow: 1px 2px 14px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.6s ease-in-out;
        z-index: 2000;
        position: fixed;
        top: 0;
    }

    .toogle {
        height: 380px;
        transition: all 0.9s ease-in-out;
        z-index: 2000;
    }

    .main-content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
    }

    .main-content-header img {
        width: 220px;
        height: 100px;
        object-fit: cover;
        margin-top: 12px;
    }

    .main-content-header i {
        font-size: 28px;
        color: #ff9900;
    }

    .nav-bar-container {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding: 10px 0;
    }

    .nav-bar {
        display: flex;
        justify-content: center;
        flex-direction: column;
        row-gap: 15px;
        padding: 0 20px;
    }

    .nav-bar a {
        font-size: 18px;
        color: #000;
        text-decoration: none;
    }

    .nav-bar a:hover {
        color: #ff9900;
    }

    .social-media {
        padding: 20px 20px;
        display: flex;
        gap: 30px;
        justify-content: end;
    }

    .fa-instagram,
    .fa-facebook-f,
    .fa-twitter,
    .fa-whatsapp {
        font-size: 22px;
        color: #666;
    }

    .background-image {
        background-image: url('https://plus.unsplash.com/premium_photo-1661883237884-263e8de8869b?q=80&w=1189&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
        height: 550px;
        background-size: cover;
        background-position: center;
        width: 100%;
        background-attachment: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 20px;
        background-repeat: no-repeat;
    }

    .blur-cont {
        background-color: #cccccc60;
        width: 90%;
        margin: auto;
        text-align: center;
        padding: 20px;
        border-radius: 10px;
        transition: all 0.9s ease-in-out;
        animation: blur 1s linear 0.1s 3 alternate-reverse;
        font-weight: 700;
        text-shadow: 1px 1px 2px #000;
    }

    .about-us {
        font-size: 32px;
        margin-top: 10px;
        padding: 20px;
        transition: all 0.9s ease-in-out;
        animation: blur 1s linear 0.1s 3 alternate-reverse;
        position: relative;
        width: 100%;
        margin-top: 110px;
    }

    .about-us::before {
        position: absolute;
        bottom: 0;
        left: 20px;
        content: '';
        background-color: #ff9900;
        height: 2px;
        width: 90%;
        transition: all 0.9s ease-in-out;
        animation: timeout 1s ease-in-out 1s 3 alternate-reverse;

    }

    .content-of-abouts {
        padding: 20px;
        text-align: justify;
        font-size: 15px;
        line-height: 27px;
        width: 30%;
        margin: auto;
    }

    @keyframes blur {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes timeout {
        0% {
            width: 90%;
        }

        100% {
            width: 0;
        }
    }

    .mission-container {
        display: flex;
        width: 70%;
        margin: auto;
        gap: 20px;
    }

    .mission {
        width: 40%;
        margin: auto;
        padding: 20px;
        text-align: justify;
        background-color: #fff;
        height: 500px;
        color: #000;
        border-radius: 12px;
        box-shadow: 1px 2px 14px rgba(0, 0, 0, 0.2);
        position: relative;
    }

    .mission h2 {
        font-size: 28px;
        text-align: center;
        margin-top: 120px;
        padding-bottom: 10px;
        position: relative;
    }

    .mission h2::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 2px;
        background-color: #ff9900;
        animation: timeout 1s ease-in-out 1s 3 alternate-reverse;
    }

    .user-content {
        position: absolute;
        left: 160px;
        top: 20px;
    }

    .user-content img {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid #ff9900;
    }

    .fa-quote-right,
    .fa-quote-left {
        font-size: 22px;
        color: #ff9900;
    }

    .mission p {
        margin-top: 30px;
        line-height: 28px;
        font-size: 14px;
    }

    .footer {
        height: 100px;
        background-color: #333;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer span {
        padding: 0 5px;
    }
    .nameowner {
        font-weight: 700;
        color: #ff9900;
    }

}