:root {
    --color-link: rgb(25,103,210);
    --color-white: #ffffff;
    --color-text: #202124;
    --color-green: #009900;
    --color-gray1: #5f6368;
    --color-gray2: #707070;
    --color-gray3: #606367;
    --color-light-gray1: #f1f3f4;
    --color-light-gray2: #fafafa;
    --color-light-gray3: #e8e8e8;
    --color-light-gray4: #d4d4d4;
    --color-promo-icon: #ff9900;
    --color-orange: #ea7110;
    --color-error: #cc0001;

    --color-blue1: #3b70e8;
    --color-blue1-hover: #1255ab;
    --color-blue2: #0052cc;

    --bg-main: #f1f5f9;
    --bg-dark-dropdown: #133e50;
    --bg-menu-col: #e2e8f0;
    --bg-topbar-secondary: #b1c3cb;
    --bg-topbar-main: #164e63;
    --bg-primary: #164e63;
    --bg-primary-hover: #1d5d74;
    --bg-secondary: #0d9488;
    --bg-secondary-hover: #11ab9f;
    --bg-default: #e2e8f0;
    --bg-default-hover: #eaedf1;
    --bg-search-topbar: #e2e8f0;
}

/* App styles */
html,
body {
    margin: 0;
    padding: 0;
    font-family: "Roboto-Regular", "Roboto", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --color-bg: #ffffff;
    --color-light-gray-bg: #f5f5f5;
    --color-surface: #ffffff;
    --color-text: #0f172a;
    --color-muted: #64748b;
    --color-primary: #0ea5e9;
    --color-primary-dark: #0284c7;
    --color-border: #e2e8f0;
    --color-border-light: #e8e8e8;
    --color-border-mid: #d4d4d4;
    --color-border-mega: #e5e7eb;
    --color-shadow-light: #d4d4d4;
    --color-shadow-hero: #cccccc;
    --color-header-bg: #f3ece6;
    --color-header-bg-active: #ffffff;
    --color-hero-bg: #f9f5f1;
    --color-hero-card: #faf5f2;
    --color-hero-title: #707070;
    --color-option-selected: #cc4041;
    --color-btn-green: #347868;
    --color-btn-green-hover: #20594c;
    --color-btn-red: #cc4041;
    --color-btn-red-hover: #a83232;
    --color-btn-dark: #242424;
    --color-btn-dark-hover: #000000;
    --color-box-fushia: #ed6091;
    --color-box-purple: #9a7eb4;
    --color-box-green: #347868;
    --color-box-gray: #f2f2f2;
    --color-footer-bg: #f5f5f5;
    --color-footer-text: #707070;
    --color-footer-muted: #999999;
    --color-link-hover: #256ad1;
    --color-mega-muted: #5f6368;
    --color-mega-title: #111827;
    --color-mega-desc: #6b7280;
    --color-mega-icon-bg: #fafafa;
    --color-mega-icon-hover: #f3f4f6;
    --color-text-dark: #242424;
    --color-testimonial: #ffcc00;
    --font-sans: "Roboto-Regular", "Roboto", Arial, sans-serif;
    --font-display: "ProductSans-Medium", "Roboto", Arial, sans-serif;
}

.show { display: flex !important; }
.hide { display: none !important; }
.owh { overflow: hidden; }
.dflex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.bg-gray { background-color: var(--color-light-gray-bg); }
.bg-gray-e8 { background-color: #e8e8e8; }
.bg-gray-f9 { background-color: #f9f9f9; }
.bg-element { background-repeat: no-repeat; background-position: center; background-size: cover; }

.border-top-e8 { border-top: var(--color-border-light) 1px solid; }
.border-top-d4 { border-top: var(--color-border-mid) 1px solid;}
.border-bottom-e8 { border-bottom: var(--color-border-light) 1px solid; }
.border-bottom-d4 { border-bottom: var(--color-border-mid) 1px solid;}

.button-set { display: flex; justify-content: center; padding-top: 40px; }
.button-set a { display: flex; }
.pagination { display: flex; justify-content: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.pagination .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 20px; padding: 10px 16px; }
.pagination .btn.current { pointer-events: none; }
.pagination .btn.disabled { opacity: 0.5; pointer-events: none; }
.pagination.pagination-dots { gap: 8px; }
.pagination .page-dot { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-family: 'ProductSans-Medium'; font-size: 14px; color: var(--color-link); transition: background-color .3s, color .3s; }
.pagination .page-dot:hover { background-color: var(--color-light-gray-bg); color: var(--color-link); }
.pagination .page-dot.current { background-color: var(--color-link); color: var(--color-white); pointer-events: none; }

body { background: var(--color-bg); color: var(--color-text); }
header { display: flex; justify-content: center; position:fixed; top: 0; right: 0; left: 0; background-color: var(--color-header-bg); z-index: 100;  }
header.white { background-color: var(--color-header-bg-active); }
header .block-1 { display: flex; gap: 150px; }
header.full .container { width: 100% !important; padding-left: 20px; padding-right: 20px; }
header:hover, header.active { background-color: var(--color-header-bg-active); box-shadow: 0 0 3px var(--color-shadow-light); transition: .5s all; }
header .container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 15px 0; width: 1590px; position: relative;  transition: .75s all; }
header a.brand { display: flex; }
header .container .brand img { height: 32px; }
nav { display: flex; gap: 65px; align-items: center; }
.topbar-actions { display: flex; gap: 25px; align-items: center; }
nav a:link, nav a:visited, .topbar-actions a:link, .topbar-actions a:visited { text-decoration: none; color: var(--color-text); font-weight: 500; font-family: 'ProductSans-Regular'; font-size: 15px; }

.main-nav { display: flex; gap: 65px; align-items: center; }
.nav-item--dropdown { position: static; }
.nav-item { position: relative; }
.nav-link { border: none; background: none; padding: 0; color: var(--color-text); font-weight: 500; font-family: 'ProductSans-Regular'; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav-link--caret::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); display: inline-block; margin-top: -2px; }

.nav-item--dropdown::after { content: ""; position: absolute; left: -20px; right: -20px; top: 100%; height: 20px; }

.mega-menu { position: absolute; top: calc(100% + 30px); left: 350px; right: auto; margin: 0 auto; width: min(980px, calc(100vw - 40px)); background: var(--color-surface); border: 1px solid var(--color-border-mega); border-radius: 0 0 18px 18px; box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; z-index: 50; }
.mega-menu__inner { padding: 34px 40px 40px; }
.mega-menu__title { font-family: 'ProductSans-Regular'; font-size: 16px; letter-spacing: .12em; color: var(--color-mega-muted); text-transform: uppercase; }
.mega-menu__divider { margin: 18px 0 26px; height: 1px; background: var(--color-border-mega); }
.mega-menu__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 34px; }
.mega-card { display: grid; grid-template-columns: 34px 1fr; gap: 14px; text-decoration: none; color: inherit; }
.mega-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }
.mega-title { display: block; font-family: 'ProductSans-Regular'; font-size: 18px; color: var(--color-mega-title); }
.mega-desc { display: block; font-family: 'ProductSans-Regular'; font-size: 14px; color: var(--color-mega-desc); margin-top: 6px; line-height: 1.5; }
.mega-card:hover .mega-icon { border-color: var(--color-border-mid); background: var(--color-mega-icon-hover); }
.mega-card:hover .mega-title { color: var(--color-text); }

.nav-item--dropdown:hover .mega-menu,
.nav-item--dropdown:focus-within .mega-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
#mobile-menu-icon { display: none; }
#mobile-menu-close-icon { display: none; }
#mobile-menu { transition: .25s all; display: flex; position: fixed; right: 100%; top: 0; bottom: 0; left: 0; background-color: #ffffff; z-index: 100; overflow: hidden; }
#mobile-menu .inner { display: flex;  flex-direction: column; padding: 80px 30px 30px 30px; overflow: auto; flex: 1; }
#mobile-menu .inner .submenu { display: flex; flex-direction: column; padding: 0 0 0 20px; }
#mobile-menu .inner label { font-family: 'ProductSans-Medium'; font-size: 20px; margin: 5px 0; color: var(--color-option-selected); }
#mobile-menu .inner a:link, #mobile-menu .inner a:visited { font-family: 'ProductSans-Regular'; font-size: 15px; text-decoration: none; color: var(--color-text); margin: 5px 0; }
#mobile-menu .inner a:hover { color: var(--color-link-hover); }
.main-title { font-family: 'InterRegular'; font-size: 58px; margin: -5px 0 0 0; letter-spacing: -1px; }
.secondary-title { font-family: 'ProductSans-Light'; font-size: 48px; margin: -5px 0 0 0; }
.secondary-title.lit { font-size: 38px; }
.upper-title { font-family: 'Roboto-Light'; font-size: 14px; text-transform: uppercase; margin: 0; letter-spacing: .5px; }

.section-header.center { justify-content: center; flex-direction: column; text-align: center; }
.section-header.center .upper-title { text-align: center;}
.section-text p { margin: 20px 0 0 0; padding: 0 10%; font-family: 'ProductSans-Light'; font-weight: 700; font-size: 18px; color: var(--color-muted); }
.section-text.center p { text-align: center; }
.section-text.nopadd p { padding: 0; margin: 0; }
.section-seperator { height: 100px; }
section, footer { padding: 75px 0; display: flex; justify-content: center; }
section.nopadd { padding: 0 !important; }
footer { background-color: var(--color-footer-bg); }
footer .container { flex-direction: row; display: flex; gap: 10px; }
footer .container .col { display: flex; flex: 1; flex-direction: column; }
footer .container .col img { width: 125px; margin-bottom: 10px; }
footer .container .col label { margin: 0 0 10px; font-size: 16px; font-family: 'ProductSans-Bold'; color: var(--color-footer-text); }
footer .container .col.brand label { margin: 5px 0 0 0; font-family: 'ProductSans-Bold'; font-size: 13px; color: var(--color-footer-text); }
footer .container .col.brand span { color: var(--color-footer-muted); padding-right: 30%; }
footer .container .col p { margin: 0 0 10px 0; font-size: 16px; font-family: 'ProductSans-Regular'; color: var(--color-footer-text); }
footer .container .col a:link, footer .container .col a:visited { font-size: 15px; font-family: 'ProductSans-Regular'; text-decoration: none; color: var(--color-footer-text); margin: 0 0 10px 0; }
footer .container .col a:hover { text-decoration: underline; color: var(--color-link-hover);}
section.nopadding { padding: 0; }
section.hasbg { background-repeat: no-repeat; margin: 75px 0;}
section.hasbg.bg-left { background-color: var(--color-footer-bg); background-position: left center; background-size: auto 100%; padding-left: 40%;}
section.hasbg.bg-right { background-color: var(--color-footer-bg); background-position: right center; background-size: auto 100%; padding-right: 40%;}
section .container, footer .container { width: 1490px; margin: 0 auto; position: relative; }
section .container.row { display: flex; }
section .section-content { padding: 50px 75px; background-color: var(--color-surface); display: flex; flex-direction: column; flex: 1;}
section .section-content p { font-family: 'ProductSans-Regular'; font-size: 17px; color: var(--color-muted); line-height: 1.7; margin: 10px 0; }
.section-header { display: flex; justify-content: space-between; align-items: center; }
section.success .container { width: 1024px; display: flex; gap: 75px; flex-direction: column; align-items: center; }
section.success .container .image { display: flex; min-width: 300px; justify-content: center; }
section.success .container .content { display: flex; flex: 1; flex-direction: row; flex-wrap: wrap; }
section.success .container .content .row-item { display: flex; gap: 20px; margin-bottom: 50px; padding: 0 20px; width: 50%; }
section.success .container .content .row-item span { font-size: 48px; }
section.success .container .content .row-item .text { display: flex; flex-direction: column; }
section.success .container .content .row-item .text label { font-family: 'ProductSans-Bold'; font-size: 18px; }
section.success .container .content .row-item .text p { font-family: 'ProductSans-Regular'; font-size: 18px; margin: 5px 0 0 0; color: var(--color-muted); }

.hero { background-color: var(--color-hero-bg); height: 950px; padding: 130px 0 75px 0; box-sizing: border-box; display: flex; justify-content: center; box-shadow: 0 0 10px var(--color-shadow-hero); }
.hero .container { width: 1490px; margin: 0 auto; position: relative; }
.hero .container h3 { font-family: 'Kopernik'; font-size: 40px; margin: -5px 0 0 0; letter-spacing: -.5px; color: var(--color-hero-title); }
.hero .hero-img { width: 1300px; border: var(--color-border-light) 1px solid; border-radius: 12px; padding: 15px; background-color: var(--color-surface); position: absolute; left: 0; bottom: 0; }
.hero .option-box { position: absolute; width: 630px; box-sizing: border-box; border: var(--color-surface) 5px solid; border-radius: 16px; box-shadow: 0 0 10px var(--color-shadow-hero); right: 0; top: 50px; background-color: var(--color-hero-card); padding: 10px; }
.hero .option-box .inner { flex-direction: column; background-color: var(--color-surface); border-radius: 16px; display: flex; padding: 30px; height: 100%; box-sizing: border-box; }
.hero .option-box .inner h4 { font-family: 'ProductSans-Regular'; font-size: 26px; margin: 0; text-align: center; }
.hero .option-box .options { display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 30px;}
.hero .option-box .options .option { width: 150px; height: 170px; border: var(--color-border) 1px solid; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 15px; box-sizing: border-box; cursor: pointer; transition: .3s all; cursor: pointer;}
.hero .option-box .options .option:hover { border: var(--color-border-mid) 1px solid; box-shadow: 0 0 8px var(--color-shadow-light); background-color: var(--color-hero-bg); }

.hero .option-box .options .option.selected { background-color: var(--color-option-selected); color: var(--color-surface); border: transparent 1px solid; box-shadow: unset; cursor: default; }
.hero .option-box .options .option img.normal { display: inline-block; }
.hero .option-box .options .option img.white { display: none; }
.hero .option-box .options .option.selected img.normal { display: none; }
.hero .option-box .options .option.selected img.white { display: inline-block; }


.hero .option-box .options .option span { font-size: 32px; display: flex; flex: 1; align-items: center; }
.hero .option-box .options .option label { font-size: 16px; font-family: 'ProductSans-Regular'; height: 48px; display: flex; cursor: pointer; }


a.btn:link, a.btn:visited { font-size: 16px; font-family: 'ProductSans-Regular'; text-decoration: none; transition: .5s all; padding: 12px 30px; border-radius: 25px; border: transparent 1px solid; }
a.btn.green:link, a.btn.green:visited { background-color: var(--color-btn-green); color: var(--color-surface); }
a.btn.green:hover { background-color: var(--color-btn-green-hover); }
a.btn.red:link, a.btn.red:visited { background-color: var(--color-btn-red); color: var(--color-surface); }
a.btn.red:hover { background-color: var(--color-btn-red-hover); }
a.btn.dark:link, a.btn.dark:visited { background-color: var(--color-btn-dark); color: var(--color-surface); }
a.btn.dark:hover { background-color: var(--color-btn-dark-hover); }

.box-list { display: flex; gap: 30px; margin-top: 50px; flex-wrap: wrap; }
.box-list.flat { flex-wrap: unset; }
.box-list.center { justify-content: center; }
.box-list .box { display: flex; flex: 1; flex-direction: column; padding: 10px; }
section.bg-gray .box .inner { background-color: var(--color-bg); }
.box-list .box.more-space { padding: 15px; }
.box-list .box.center * { text-align: center; align-items: center; }
.box-list .box .inner { display: flex; flex: 1; flex-direction: column; padding: 10px; border-radius: 8px; transition: .5s all; }
.box-list .box .inner.hovered:hover { box-shadow: 0 0 10px #d4d4d4; }
.box-list.blog { gap: 0; }
.box-list.blog .box { width: 25%; flex: unset; }
.box-list .box .color-box { display: flex; flex-direction: row; padding: 20px; border-radius: 16px; }
.box-list .box .color-box.reverse { border-radius: 0 0 16px 16px; }
/*.box-list .box .color-box.fushia { background-color: #fe2370; color: #ffffff; }
.box-list .box .color-box.purple { background-color: #8a2be2; color: #ffffff; }*/
.box-list .box .color-box.fushia { background-color: var(--color-box-fushia); color: var(--color-surface); }
.box-list .box .color-box.purple { background-color: var(--color-box-purple); color: var(--color-surface); }
.box-list .box .color-box.green { background-color: var(--color-box-green); color: var(--color-surface); }
.box-list .box .color-box.gray { background-color: var(--color-box-gray); color: var(--color-text-dark); }

.box-list .box .image-container { width: 100%; height: 400px; overflow: hidden; border-radius: 12px; background-color: var(--color-footer-bg); margin-bottom: 50px; }
.box-list .box .image-container.less-margin-bottom { margin-bottom: 20px; }
.box-list.blog .box .image-container { height: 180px; border-radius: 6px; }
.box-list.blog .box .image-container img { width: 100%; height: 180px; object-fit: cover; }
.box-list .box .text { display: flex; flex-direction: column; padding: 0 10px;}
.box-list .box .text label { font-family: 'ProductSans-Medium'; font-size: 22px; margin: 0 0 10px 0; display: flex; }
.box-list .box .text p { font-family: 'ProductSans-Regular'; font-size: 17px; color: var(--color-muted); line-height: 1.7; margin: 0; }

.box-list .box .color-box .number { font-size: 62px; display: flex; justify-content: flex-end; padding-right: 15px; margin-top: -13px; }
.box-list .box .color-box .text { flex: 1; }
.box-list .box .color-box .text label { font-size: 20px; margin: 5px 0 0px 0; }
.box-list .box .color-box .text p { color: var(--color-surface); font-size: 15px; line-height: 22px; }
.box-list .box .color-box .text p.large { font-size: 18px; line-height: 28px; }
.box-list .box .color-box.gray .text p { color: var(--color-text-dark); }

.box-list.grid .box { flex: unset; }
.box-list.grid.x3 .box { width: 30%; }
.box-list.grid .box .image-container { height: 200px; }
.box-list.grid .box .image-container img { height: 200px; width: 100%; object-fit: cover; }

.partner-list { display: flex; flex-wrap: wrap; justify-content: center; }
.partner-list .partner { width: 20%; display: flex; align-items: center; justify-content: center; padding: 0 25px; }
.partner-list .partner img { width: 100%; height: 100%; object-fit: contain;  }

.referance-list { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1000px; gap: 30px; margin-top: 50px; justify-self: center; }
.referance-list .referance { width: 20%; display: flex; align-items: center; justify-content: center; padding: 0 25px; }
.referance-list .referance img { width: 100%; height: 100%; object-fit: contain;  }

.testimonials { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 100px; justify-self: center; }
.testimonials .testimonial { flex: 1; padding: 0 15px; display: flex; }
.testimonials .testimonial .inner { background-color: var(--color-testimonial); border-radius: 16px; padding: 25px 25px 25px 25px; display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; }
.testimonials .testimonial .inner .text label { font-family: 'ProductSans-Bold'; font-size: 26px; display: flex; }
.testimonials .testimonial .inner .text p { font-family: 'InterRegular'; font-size: 15px; color: var(--color-text-dark); line-height: 1.7; margin: 10px 0; }
.person { width: 100px; height: 100px; border: var(--color-surface) 5px solid; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; right: 40px; top: -20px; box-shadow: 0 0 15px var(--color-footer-muted); }

/* inner pages */
#page-promo { padding: 150px 0 0px 0; justify-content: center; display: flex; }
#page-promo .container { padding: 0 25%; }
#page-promo h1.main-title { text-align: center; font-size: 44px; }
#page-promo h3 { font-family: 'ProductSans-Light'; font-weight: 700; letter-spacing: .25px; font-size: 24px; margin: 10px 0 0 0; text-align: center; }
#page-promo .image-container { height: 350px; background-color: #f5f5f5; border-radius: 16px; background-size: cover; background-position: center; margin-top: 40px; }
#page-promo.partner { padding-top: 80px; height: 650px; background-color: #f5f5f5; }
#page-promo.partner .container { padding: 0 15%; align-items: center; justify-content: center; display: flex; flex-direction: column; }
#page-promo.partner .container h1 { font-family: 'ProductSans-Bold'; font-size: 56px; letter-spacing: -1.5px; background-color: #ffcc00; padding: 0 15px; transform: rotate(-2deg); border-radius: 8px; }
#page-promo.partner .container p { font-family: 'ProductSans-Regular'; font-size: 24px; background-color: #242424; color: #ffffff; padding: 15px; border-radius: 8px; margin-top: -38px; text-align: center; }
/* services */
.bullet-list { display: flex; flex-wrap: wrap; }
.bullet-list .bullet { width: 50%; padding: 35px 25px; display: flex; gap: 30px; }
.bullet-list .bullet .image-container { width: 75px; height: 75px; border: #ffffff 5px solid; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; align-items: center; justify-content: center; background-color: #ffffff; }
.bullet-list .bullet .image-container span { font-size: 36px; }
.bullet-list .bullet .text { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.bullet-list .bullet .text label { font-family: 'ProductSans-Regular'; font-weight: 700; font-size: 22px; }
.bullet-list .bullet .text p { font-family: 'ProductSans-Regular'; font-size: 18px; margin: 0; }

.about-image { width: 450px; height: 500px; background-color: #f5f5f5; border-radius: 10px; overflow: hidden; }

.callme-icon { z-index: 200000; transition: all .75s; cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: center; width: 72px; height: 72px; position: fixed; right: 25px; bottom: -100%; background-color: #242424; border-radius: 50%; box-shadow: 0 0px 10px #9a9a9a; }
.callme-icon img { width: 32px; }
.callme-icon.show { bottom: 24px; }
.callme-container { z-index: 200000; position: fixed; right: 10px; bottom: -120%; width: 400px; max-width: 100%; transition: all .75s; display: flex; flex-direction: column; }
.callme-container.show { bottom: 0; }
.callme-container .content { padding: 25px 5px; background-color: #ffffff; border-radius: 7px 7px 0 0; border: #d4d4d4 1px solid; box-shadow: #cccccc 0 0 10px; }
.callme-container .content h3 { margin: 0; padding: 0 15px; color: #242424; font-size: 30px; }
.callme-container .content .frow label { padding: 0 15px; line-height: auto; }
.callme-container input[type], .callme-container textarea, .callme-container select { border: #e8e8e8 2px solid; }
.callme-container input[type]:focus, .callme-container textarea:focus { border: #0052cc 2px solid; }
.callme-container .button-set { display: flex; flex-direction: row; justify-content: space-between; padding: 5px 20px; }
.callme-container .button-set .btn { font-size: 13px; }

.btn { transition: all .5s; padding: 10px 20px; border: transparent 1px solid; cursor: pointer; border-radius: 3px; font-family: 'ProductSans-Regular'; font-size: 15px; text-decoration: none; }
.btn.transparent { background-color: var(--color-white); color: var(--color-link); }
.btn.transparent:hover { background-color: #f9f9f9; color: var(--color-gray1); border: var(--color-light-gray3) 1px solid; }
.btn.primary { background-color: var(--color-link); border: var(--color-link) 1px solid; color: var(--color-white); }
.btn.primary:hover { background-color: var(--color-blue1-hover); }
.btn.dark { background-color: var(--color-text); border: var(--color-text) 1px solid; color: var(--color-white); }
.btn.dark:hover { background-color: var(--color-green); border: var(--color-green) 1px solid; }
.btn.whiteblue { background-color: var(--color-white); border: #dadce1 1px solid; color: var(--color-link); }
.btn.whiteblue:hover { background-color: transparent; border: var(--color-blue1) 1px solid; }

.subheading { padding: 0 15%; }
.subheading .section-content { padding: 0; }
.partner.full { display: flex; flex-direction: row; gap: 75px; width: 100%; margin-bottom: 125px; }
.partner.full.reverse { flex-direction: row-reverse; }
.partner.full .image { display: flex; width: 50%; align-items: flex-start; justify-content: flex-end; }
.partner.full.reverse .image { justify-content: flex-start; }
.partner.full .image img { max-width: 100%; box-shadow: 0 0 5px #999999; width: 500px; }
.partner.full .text { display: flex; width: 50%; flex-direction: column; padding-right: 20%; }
.partner.full.reverse .text { padding-right: 0; padding-left: 20%; }
.partner.full .text h3 { font-family: 'ProductSans-Regular'; font-size: 26px; margin: 10px 0; }
.partner.full .text p, .partner.full .text ul li { font-family: 'ProductSans-Regular'; font-size: 18px; margin: 0 0 15px 0; }

.box-list .box a:link, .box-list .box a:visited { text-decoration: none; color: var(--bg-dark-dropdown); }
.box-list .box a:hover { color: var(--bg-secondary); }
section .container.blog-detail-container { width: 1028px; font-family: 'ProductSans-Regular'; font-size: 18px; color: #242424; line-height: 28px; }
section .container.blog-detail-container h3 { font-family: 'ProductSans-Bold'; font-size: 30px; margin: 0 0 15px 0; }
section .container.blog-detail-container p { margin: 0 0 15px 0; }
/* Desktop base */


/* Desktop */
@media (max-width: 1600px) {
    .main-nav { gap: 45px;}
    .main-title { font-size: 50px; }
    header .container { width: 100%; padding-left: 20px; padding-right: 20px; }
    .mega-menu { left: 200px; width: min(800px, calc(100vw - 40px)); }
    .hero { height: 850px;}
    .hero .container { width: 100%; padding-left: 35px; padding-right: 35px; }
    .hero .container h3 { font-size: 34px; }
    .hero .hero-img { width: 1100px; left: 30px; }
    .hero .option-box { width: 500px; right: 40px; }
    .hero .option-box .inner { padding: 10px; }
    .hero .option-box .options .option { width: 125px; height: 150px; }
    .hero .option-box .options .option label { font-size: 13px; }
    section .container, footer .container { width: 100%; padding-left: 20px; padding-right: 20px; }
    .box-list .box .image-container { height: 250px; }
    .box-list .box .image-container img { width: 100%; height: 250px; object-fit: cover; }
    .box-list .box .color-box .text label { font-size: 18px; }
    .box-list .box .color-box .text p { font-size: 14px; }
    .partner-list .partner { width: 30%; }
    .testimonials .testimonial .inner .text span { font-size: 12px; }
    .box-list { margin-top: 30px; }
    .box-list.blog .box .image-container { height: 150px; margin-bottom: 30px; }
    .box-list .box .text label { font-size: 18px; }
    .box-list .box .text p { font-size: 15px;}
    .partner-col { display: none !important; }
    .box-list .box .color-box .number { font-size: 46px; }
}

@media (max-width: 1024px) {
    .option-box { display: none;}
    header .block-1 { gap: 50px; }
    header .container { width: 100%; padding-left: 20px; padding-right: 20px; }
    .hero { height: 670px; overflow: hidden;}
    .hero .hero-img { max-width: 95%; bottom: -100px; }
    .hero .upper-title, .hero .main-title, #changing-letter { text-align: center; }
    .mega-menu { width: min(700px, calc(100vw - 40px)); }
    .box-list .box .image-container { height: 180px; border-radius: 8px; margin-bottom: 30px; }
    .box-list .box .image-container img { height: 180px; object-fit: cover; }
    section { padding: 50px 0; }
    section .section-content { padding: 30px; }
    .box-list { gap: 0; }
    .box-list .box .color-box { flex-direction: column; align-items: flex-start; flex: 1; }
    .box-list .box .text { padding: 0; }
    .person { right: unset; top: -30px; }
    .testimonials .testimonial .inner { padding-top: 80px; }
    .testimonials .testimonial .inner .text label { justify-content: center;}
    .testimonials .testimonial .inner .text span { display: flex; justify-content: center;}
    .box-list.blog .box:last-child { display: none; }
    .box-list.blog .box { width: 33.33%;}
    #page-promo .container { padding: 0 5%; }
    .about-image { width: 300px; }
    .partner.full .image img { width: 400px; }
    .partner.full .text { padding-right: 30px; }
    .partner.full.reverse .text { padding-left: 30px; }
}

@media (max-width: 768px) {
    #mobile-menu-icon { display: flex; }
    #mobile-menu.show { right: 0; }
    .main-nav { display: none; }
    .container.row { flex-direction: column; }
    .hero { height: 565px;}
    .hero .hero-img { max-width: 700px; }
    .secondary-title { font-size: 32px; }
    section.hasbg.bg-left { padding-left: 30%; }
    section.hasbg.bg-right { padding-right: 30%; }
    .testimonials { flex-direction: column; gap: 20px; }
    .testimonials .testimonial .inner { padding-top: 25px; gap: 30px; flex-direction: row; }
    .testimonials .testimonial .inner .text { display: flex; flex-direction: column; flex: 1; }
    .testimonials .testimonial .inner .text label, .testimonials .testimonial .inner .text span { justify-content: flex-start; }
    .person { position: inherit; }
    .box-list.blog { flex-direction: column; }
    .box-list.blog .box, .box-list.blog .box .inner { width: 100%; flex-direction: row; gap: 30px; }
    .box-list.blog .box .image-container { width: 100%; height: 180px; margin: 0 0 20px 0; }
    .box-list.blog .box .image-container img { width: 100%; height: 100%; object-fit: cover; }
    #page-promo .container { padding: 0px 25px; }
    .section-text p { padding: 0; }
    .box-list .box.center * { text-align: left; align-items: unset; }
    .box-list .box.more-space { padding: 10px 0; }
    .box-list .box.center .text { justify-content: center; }
    .about-image { width: 100%; height: 500px; }
    .partner.full, .partner.full.reverse { flex-direction: column; gap: 15px; padding: 0 25px; margin-bottom: 30px; }
    .partner.full .image, .partner.full .text { width: 100%; }
    .partner.full.reverse .image, .partner.full .image { width: 100%; justify-content: center; }
    .partner.full .text { padding-right: 0; }
    .partner.full.reverse .text { padding-left: 0; }
    #page-promo.partner { height: 400px;  }
    #page-promo.partner .container { padding: 0 25px; }
    #page-promo.partner .container h1 { font-size: 26px; }
    #page-promo.partner .container p { font-size: 20px; padding-top: 35px; }
    .partner.full .image img { width: 500px; }
}

@media (max-width: 700px) {
    #mobile-menu-icon { display: flex; }
    #mobile-menu.show { right: 0; }
    .topbar-actions .btn.red { display: none; }
    .container.row { flex-direction: column; }
    section { padding: 35px 0; }
    .hero { height: 490px; }
    .hero .hero-img { max-width: 90%; left: 20px; right: 20px;}
    .hero .main-title { font-size: 40px; line-height: 52px; margin: 10px 0 16px 0; }
    .hero .container h3 { font-size: 23px; }
    .box-list { flex-direction: column; }
    .box-list .box.more-space { padding: 0; }
    .box-list .box { padding: 10px 0; }
    .section-header .btn.dark { display: none; }
    .secondary-title { line-height: 34px; font-size: 32px; font-family: 'ProductSans-Bold'; margin-top: 3px; margin-bottom: 10px; }
    section.hasbg.bg-left { padding-left: 20px; padding-top: 20px; padding-bottom: 20px; }
    section.hasbg.bg-right { padding-right: 20px; padding-top: 20px; padding-bottom: 20px; }
    .partner-list .partner { width: 50%; }
    .referance-list { gap: unset; }
    .referance-list .referance { width: 50%; margin-bottom: 30px; }
    .testimonials .testimonial { padding: 0; }
    .testimonials .testimonial .inner { flex-direction: column; }
    .testimonials .testimonial .inner .text label, .testimonials .testimonial .inner .text span { justify-content: center; }
    .inner .text span { margin-bottom: 10px; }
    .person { top: 10px; }
    .box-list.blog .box { flex-direction: column; gap: 0; margin-bottom: 20px; }
    footer { padding: 30px; }
    footer .container { flex-direction: column; gap: 20px; padding: 0;}
    #page-promo { padding: 100px 0 0px 0; }
    #page-promo .container { padding: 0 20px; }
    #page-promo h1.main-title { font-size: 36px; }
    #page-promo h3 { font-size: 20px; }
    #page-promo .image-container { height: 180px; }
    #why-uniqa h2.secondary-title { text-align: center; }
    .section-text p { padding: 0; }
    .box-list .box.center .text { flex: 1; }
    .bullet-list { flex-direction: column; }
    .bullet-list .bullet { flex-direction: column; width: unset; padding: 25px 10px; }
    .bullet-list .bullet .image-container { width: 75px; height: 75px; }
    .about-image { width: 100%; height: 300px; }
    section.success .container { flex-direction: column; gap: 50px; }
    section.success .container .image { width: 100%; justify-content: center; }
    section.success .container .content { flex-direction: column; }
    section.success .container .content .row-item { width: 100%; padding: 0; }
    .callme-container { width: 100%; bottom: 0; top: 0; left: 100%; box-shadow: unset; border-radius: 0; transition: all .5s; }
    .callme-container .frow { margin: 0; }
    .callme-container .button-set { padding: 15px 20px; }
    .callme-container.show { left: 0; }
    .callme-container .content { height: 100%; overflow: auto; }
    .callme-container .content textarea { height: 130px; }
    .partner.full, .partner.full.reverse { flex-direction: column; gap: 15px; padding: 0 25px; margin-bottom: 30px; }
    .partner.full .image, .partner.full .text { width: 100%; }
    .partner.full .text { padding-right: 0; }
    .partner.full.reverse .text { padding-left: 0; }
    #page-promo.partner { height: 400px;  }
    #page-promo.partner .container { padding: 0 25px; }
    #page-promo.partner .container h1 { font-size: 26px; }
    #page-promo.partner .container p { font-size: 20px; padding-top: 35px; }
    .box-list.grid.x3 .box { width: 100%; margin-bottom: 25px; }
}
/* Large screens */
@media (min-width: 1600px) {}

/* Extra large */
@media (min-width: 1920px) {}