@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/brands.min.css');

:root{
    --primary-color: hsla(120 100% 33% / 1);
    --primary-color-dark: hsla(120 100% 20% / 1);
    --primary-color-lighter: hsla(120 100% 70% / 1);
    --primary-color-lightest: hsla(120 100% 95% / 1);
    --black: #333333;
    --black-light: #B3B3B3;
    --black-lighter: #C7C7C7;
    --white: #FFFFFF;
    --font: "Mona Sans", sans-serif;
    --effect: all ease-in-out 150ms;
}


/*@media only screen and (max-width: 600px) {...}
@media only screen and (min-width: 600px) {...}
@media only screen and (min-width: 768px) {...}
@media only screen and (min-width: 992px) {...}
@media only screen and (min-width: 1200px) {...}*/

@media only screen and (max-width: 500px){
    h1 { font-size: 50px; line-height: 56px; }
    h2{ font-size: 32px !important; font-weight: 700 !important; }
    h3 { font-size: 28px; }
    h5 { font-size: 18px; }
    h6 { font-size: 16px; }
    section{ margin-bottom: 50px; }
    .banner_content{ padding-top: 140px; padding-bottom: 60px; }
    header .bttn{ margin-top: 16px; }
    .acco_services .accordion-button{ font-size: 28px; line-height: 36px; }
    .acco_services .accordion .accordion-item:not(:last-child){ margin-top: 10px; }
    .icon_box h3{ font-size: 18px; flex-direction: column; align-items: flex-start; }
    .technologies, .clients, footer{ padding: 60px 0px; }
    .only_faq{ margin-bottom: 20px; }
    .connect_logo{ margin-top: 20px; }
    .connect_logo, .all_socials_word{ flex-direction: column; }
    .connect_logo svg{ margin: 20px 0px; }
    .connect_logo .connect_box, .all_socials_word{ text-align: center; }
    .all_socials_word{ gap: 12px; }
    .all_socials_word span a{ font-size: 22px; }
}

@media (max-width: 767px) { 
    .banner_services { flex-direction: column; align-items: center; }
    .banner_services .single_service { width: 100%; text-align: center; }
}
@media only screen and (min-device-width: 601px) and (max-device-width: 767px) {}
@media only screen and (min-device-width: 769px) and (max-device-width: 991px) {}
@media only screen and (min-device-width: 992px) and (max-device-width: 1200px) {}
@media only screen and (min-device-width: 1201px) and (max-device-width: 1399px) {}


/* ================================
   DESKTOP ACCO SERVICES
   (992px and up)
================================ */
@media (min-width: 992px) {
    .acco_services { position: relative; height: 100%; /* scroll space */ width: 100%; }
    .acco_services .container { position: sticky; top: 0; height: 100vh; display: flex; align-items: stretch; }
    .acco_services .row { width: 100%; margin: 0; }
    .acco_services .left-col,
    .acco_services .right-col { flex: 0 0 50%; max-width: 50%; }
    .acco_services .accordion { width: 100%; }
    .image-box { position: relative; width: 100%; height: 100%; }
    .image-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; }
    .image-box img.active { opacity: 1; }
}
/* ================================
   MOBILE & TABLET FALLBACK (below 992px)
================================ */
@media (max-width: 991px) {
    .acco_services { position: relative; height: auto; }
    .acco_services .container { position: relative; height: auto; }
    .acco_services .row { margin: 0; }
    .acco_services .left-col,
    .acco_services .right-col { flex: 0 0 100%; max-width: 100%; }
    .image-box { height: 280px; margin-bottom: 20px; }
    .image-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
    .image-box img.active { opacity: 1; position: relative; }
}