/* =========================================
   1. FONTS
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* =========================================
   2. GLOBAL & TYPOGRAPHY
   ========================================= */
body { background-color: #F8F9FA; }
* {font-family: 'Inter', sans-serif;font-weight: 400;margin: 0;padding: 0;box-sizing: border-box;transition: all .3s;}
a::selection,b::selection,br::selection,button::selection,h1::selection,h2::selection,h3::selection,h4::selection,h5::selection,h6::selection,img::selection,label::selection,li::selection,ol::selection,p::selection,small::selection,span::selection,strong::selection,ul::selection {background-color: #4285F4;color: #fff;}
h1 {font-size: 24px;line-height: 26px;color: #1F1F1F;font-weight: 500;}
.big-heading {font-size: 36px!important;line-height: 42px!important;letter-spacing: .08em;text-transform: uppercase;font-weight: 500!important;color: #1F1F1F;}
.big-bold-heading {font-size: 36px!important;line-height: 40px!important;color: #1F1F1F;font-weight: 700!important;}
h2 {font-size: 20px!important;line-height: 26px!important;color: #1F1F1F;font-weight: 500;}
p {font-size: 15px;color: #474747;line-height: 20px;font-weight: 400;}
.info-text {color: #8a8e93;}
b {font-weight: 700!important;}
li {font-size: 15px;color: #474747;list-style: none;line-height: 20px;font-weight: 400;padding: .5rem 0;}
label {color: #5b616e;font-size: 18px;line-height: 23px;font-weight: 400;margin-bottom: .5rem;margin-top: .5rem;}
small {color: #8a8e93!important;font-size: 15px!important;line-height: 20px;font-weight: 400;}
a {color: #1F1F1F;line-height: 18px;}
a:hover {color: #007bff!important;text-decoration: none!important;}

/* =========================================
   3. UI COMPONENTS (Buttons, Forms, Dropdowns)
   ========================================= */
.btn {font-size: 15px!important; border-radius: 50px !important;}
.btn-primary {background: #00b2b2!important;border: 1px solid #00b2b2!important;border-radius: 50px !important;box-shadow: 0 2px 2px rgba(29,37,47,.08),0 4px 6px rgba(29,37,47,.08)!important;padding: .375rem 1.5rem!important;font-weight: 500;display: flex;justify-content: center;align-items: center;min-height: 38px!important;font-size: 15px!important;line-height: 20px;cursor: pointer;transition: all .3s;}
.btn-primary:hover {background-color: #16478c!important;border: 1px solid #16478c!important;box-shadow: 0 2px 2px rgba(29,37,47,.08),0 4px 6px rgba(29,37,47,.08)!important;}
.btn-success {
    background: linear-gradient(90deg, #4285F4, #9B72CB) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}
.btn-success:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3) !important;
}
.btn-secondary {
    background: #fff !important;
    color: #474747 !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 50px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    min-height: 38px !important;
    font-size: 16px;
    line-height: 20px;
    transition: all 0.3s ease;
}
.btn-secondary:hover {
    background-color: #F8F9FA !important;
    border-color: #D1D1D1 !important;
}
.btn-secondary:hover {background-color: #16478c!important;border: 1px solid #16478c!important;box-shadow: 0 2px 2px rgba(29,37,47,.08),0 4px 6px rgba(29,37,47,.08)!important;}
.btn-light {border: 1px solid #00b2b2!important;box-shadow: 0 2px 2px rgba(29,37,47,.08),0 4px 6px rgba(29,37,47,.08);line-height: 20px;}
.btn-light:hover {background-color: #16478c!important;border: 1px solid #16478c!important;color: #fff!important;box-shadow: 0 2px 2px rgba(29,37,47,.08),0 4px 6px rgba(29,37,47,.08)!important;}
.form-control {border: 0px solid #dedede!important;box-sizing: border-box;border-radius: 12px!important;font-size: 17px!important;color: #1d252f!important;background-color: #f3f3f3!important;}
.form-control:focus {box-shadow: 2px 2px 4px rgba(0,178,178,.3)!important;border: 1px solid #00b2b2!important;}
.alert-success {display: flex;flex-direction: column!important;justify-content: center;align-items: center;margin-bottom: 0!important;padding: 1rem 6rem!important;background: rgba(14,151,85,.15)!important;border: 1px solid #0e9755!important;color: #0f9d58!important;}
.alert-success p {color: #0f9d58;font-size: 15px;text-align: center;margin-bottom: 0;}
.dropdown-menu.show {margin-top: 2rem;box-shadow: rgba(29,37,47,.08) 0 2px 2px,rgba(29,37,47,.08) 0 4px 6px;background: #fff;border: none!important;}
.dropdown-item {margin: .5rem 0;}
.landing-heading {font-weight: 400;font-size: 36px!important;line-height: 38px!important;color: #1d252f;margin-bottom: 4rem;text-align: center;}
.bold-heading {font-weight: 700!important;font-size: 48px!important;line-height: 126%;color: #1d252f;}

/* =========================================
   4. HEADER & MENU (main.php)
   ========================================= */
header {
    width: 100%;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #E3E3E3;
}
header .header__line {width: 100%;background: linear-gradient(151.43deg,#af03b2 0,#15478c 48.96%,#00ffff 100%);display: flex;justify-content: center;align-items: center;padding: .005rem 2rem;}
header .header__line p {margin-bottom: 0;margin-right: 2rem;color: #fff;}
header .header__container_hamburger {display: none!important;}
header .header__container_content {width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;padding: 0rem 0rem 0rem 1rem;}
header .header__container_content img {width: 150px;margin-bottom: 5px;}
header .header__container_content p {
    font-size: 3.5rem;
    text-transform: uppercase;
    color: #929292;
    letter-spacing: 0.05em;
    margin-bottom: 0;
    background: linear-gradient(90deg, #4285F4, #9B72CB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    line-height: 1;
}
header .header__container_content a p:hover {color: #15478c !important;}

.menu__wrapper {margin: 0.3rem 0;display: flex;align-items: center;padding: 8px 15px;}
.menu .menu_item {background-color: grey;transition: all .3s;}
.menu__link:hover .menu__item span {color: #1F1F1F;}
.menu__link.active .menu__item {background: linear-gradient(90.92deg,#af03b2 -96.02%,#00b2b2 216.28%);}
.menu__link.active .menu__item span {color: #fff;font-weight: 700;letter-spacing: .08em;}
.menu__link .menu__item {width: 150px;height: 48px;display: flex;align-items: center;justify-content: center;border-radius: 4px;transition: all .3s;margin: 0 5px;position: relative;}
.menu__link .menu__item::before {content: '';width: 100%;height: 100%;opacity: 0;transition: all .3s;position: absolute;top: 0;left: 0;border-radius: 4px;}
.menu__link .menu__item span {
    color: #8a8e93;
    font-size: 14px;
    text-transform: uppercase;
    transition: .3s all ease;
    z-index: 30;
    letter-spacing: .08em;
    position: relative;
}
.menu__link .menu__item span::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #4285F4;
    transition: width 0.3s ease;
}
.menu__link:hover .menu__item span::after {
    width: 100%;
}

/* =========================================
   5. FOOTER & COOKIE (main.php)
   ========================================= */
.footer {
    background-color: #fff;
    border-top: 1px solid #E3E3E3;
    display: flex;
    width: 100%;
    min-height: 15vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.footer__nav {display: flex;justify-content: center;align-items: center;width: 100%;min-height: 7.5vh;}
.footer__nav ul {width: 100%;display: flex;justify-content: center;align-items: center;margin-bottom: 0;}
.footer__nav ul a {
    color: #8a8e93 !important;
    text-decoration: none !important;
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: .1em;
    margin: 0 2rem;
    position: relative;
    transition: color 0.3s ease;
}
.footer__nav ul a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #4285F4;
    transition: width 0.3s ease;
}
.footer__nav ul a:hover {
    color: #1F1F1F !important;
}
.footer__nav ul a:hover::after {
    width: 100%;
}
.footer__info {width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 1rem;min-height: 7.5vh;}
.footer__info p {color: #8a8e93;font-size: 12px;margin-bottom: 0!important;}
.footer__info_socials {margin-left: 5rem;}
.footer__info_socials a {text-decoration: none!important;margin: 0 .5rem;}

.cookie {width: 100%;min-height: 13vh;padding: 0 6rem;background: linear-gradient(100.4deg,#af03b2 -96.02%,#00b2b2 216.28%);opacity: .95;position: fixed;z-index: 10;bottom: 0;display: none;justify-content: center;align-items: center;}
.cookie a,.cookie button,.cookie p {font-size: 15px!important;}
.cookie a {color: #fff!important;text-decoration: underline;}
.cookie a:hover {color: #00b2b2;}
.cookie p {margin-bottom: 0!important;color: #fff;}
.cookie button {width: 15%;box-shadow: 0 2px 2px rgba(29,37,47,.08),0 4px 6px rgba(29,37,47,.08);margin: 0 4rem;}
.cookie__more {text-decoration: none;}
.cookie__back {position: absolute;top: 10px;right: 10px;}

/* =========================================
   6. LANDING PAGE (index.php)
   ========================================= */
.homepage-background {position: fixed;width: 100%;height: 100%;z-index: -10;background: #F8F9FA}
.homepage-background-element-1 {position: fixed;top: 15vh;left: 50px;background: radial-gradient(circle, rgba(138, 180, 248, 0.5) 0%, rgba(138, 180, 248, 0) 70%);width: 300px;height: 300px;filter: blur(80px);border-radius: 100%;animation: pulse-animation 6s infinite ease-in-out;opacity: 0.3;}
.homepage-background-element-2 {position: fixed;top: 60vh;right: 50px;left: unset;background: radial-gradient(circle, rgba(197, 138, 249, 0.5) 0%, rgba(197, 138, 249, 0) 70%);width: 300px;height: 300px;filter: blur(80px);border-radius: 100%;animation: pulse-animation 8s infinite ease-in-out;opacity: 0.3;}

.landing_main,.offer {min-height: 100vh;width: 100%;padding-bottom: 4rem;}
h1.landing__title {padding-top: 3.5rem;font-size: 2rem;line-height: 2rem;}
.landing__title-2 {padding-top: 40px;font-size: 36px!important;line-height: 3rem!important;}
.landing_main_block-1 {max-width: 750px;margin: 0 auto 25px auto;text-align: center;}
.landing_main_block-2 {position: relative;padding-top: 5px;max-width: 750px;margin: -190px auto 25px auto;text-align: center;}
.landing_main_block-3 {position: relative;padding-top: 5px;max-width: 1200px;margin: 0px auto 25px auto;text-align: center;}
.landing_main_p {padding-top: 20px;color: #47494b;font-size: 19px;line-height: 28px;}
.landing_main_p-2 {padding-top: 15px;color: #47494b;font-size: 17px;line-height: 25px;}
.landing_main_p-3 {color: #47494b;font-size: 18px !important;line-height: 25px;margin-top: 16px;}
.landing_main_p_block-2 {
    color: #1F1F1F;
    font-size: 3rem;
    line-height: 4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.landing_main_p_block-3 {color: #000;font-size: 1.5rem;line-height: 1.5rem;}
.landing_main_ermias {
    font-size: 10rem;
    line-height: 10rem;
    font-weight: 700;
    padding-top: 2rem;
    background: linear-gradient(90deg, #4285F4 0%, #9B72CB 50%, #D966FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #000;
}
.landing_main_col-3 {
    text-align: left;
    background: #ffffff;
    padding: 2rem;
    border-radius: 32px;
    margin: 15px 5px;
    border: 1px solid #E3E3E3;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.landing_main_col-3:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
}
.landing_main_middle {margin-top: -5rem;}
.landing_main_side {padding-top: 8rem;}
.landing_main_made_solution {padding-top: 2rem;text-align: left;}
.landing_main_made_solution .landing_main_p_block-3 {font-size: 2rem;}

.title-background-container {width: inherit;display: flex;overflow-x: hidden;z-index: -10;}
.title-background-container-level-2 {font-size: 110px;line-height: 1.3;padding: 24px 0;white-space: nowrap;display: flex;}
.title-background-primary {animation: marquee1 50s infinite linear;animation-delay: -50s;padding-left: 2rem;font-weight: 900;color: #fbfbfb;}
.title-background-secondary {animation: marquee2 50s infinite linear;animation-delay: -25s;padding-left: 2rem;font-weight: 900;color: #fbfbfb;}

.statistics-form-button-1 {display: flex;justify-content: flex-start;}
.statistics-form-button-1 button {background-color: #0143cc !important;border-color: #0143cc !important;font-size: 1rem !important;}
.statistics-form-button-1 button:focus {box-shadow:none !important;}
.statistics-form-button-1 button:hover {
    border-color: #0143cc !important;
    filter: brightness(1.1);
    color: #fff !important;
}
.statistics-form-button-2 {display: flex;justify-content: center;align-items: center;padding-top: 2rem;padding-bottom: 7rem;}
.statistics-form-button-2 button {background-color: #0143cc !important;border-color: #0143cc !important;font-size: 1.3rem !important;padding: 10px 40px 10px 40px;}
.statistics-form-button-2 button:focus {box-shadow:none !important;}
.statistics-form-button-2 button:hover {
    border-color: #0143cc !important;
    filter: brightness(1.1);
    color: #fff !important;
}

.show-more-1 {color: #16478C;display:inline-block;border-bottom: 1px dashed #16478C;font-size: 12px;line-height: 15px!important;cursor:pointer;letter-spacing: 0.08rem;text-transform: uppercase;}

/* =========================================
   7. CALCULATOR & FAQ (calculator-simple-main.php)
   ========================================= */
.calculator-container {padding: 0 !important;}
.calculator__col__filter_border {border: 1px solid #e3e3e3;border-radius: 35px !important;padding: 2rem;margin: 0.5rem;background: white;}
.calculator__col__menu_border {border: 1px solid #e3e3e3;border-radius: 35px !important;padding: 2rem;background: white;}
.calculator__col__menu_border label {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;padding-right: 1rem;color: #929292;font-size: 18px;line-height: 22px;}
.calculator__col__menu_border_p {display: inline;color: #000;font-size: 20px !important;line-height: 22px;}
.calculator__col__chart_border {border: 1px solid #e3e3e3;border-radius: 35px !important;padding: 1.5rem;margin: 0.5rem;background: white;}
.calculator__col__title {display: flex;justify-content: center;align-items: center;padding: 10px;line-height: 1.5rem;}
.calculator__col__title_span {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 25px;color: #000;font-weight: bold;text-align: center;border-bottom: 1px dashed #bdbdbd;cursor: pointer;line-height: 35px;}
.calculator__col__line_bar {min-height: 60vh !important;}

/* FAQ Accordion - landing22 (used in calculator) */
.landing22 {transition: .2s ease-in-out;}
.landing22 .faq {display: block;width: 100%;position: relative;}
.landing22 .faq .faq-container {width: 100%;background: transparent;padding: 0;}
.landing22 .faq .faq-title {color: #af03b2;margin-bottom: 40px;font-weight: 700!important;font-size: 36px!important;}
.landing22 .faq .accordion-container {position: relative;max-width: 1285px;width: 100%;height: auto;}
.landing22 .faq .set {position: relative;width: 100%;height: auto;border-bottom: 1px solid #dedede;}
.landing22 .faq .set:last-child {border-bottom: none;}
.landing22 .faq .set>a {display: block;padding: 0 0;text-decoration: none;color: #16478c;transition: all .2s linear;width: 100%;font-size: 24px;font-style: normal;font-weight: 400;}
.landing22 .faq .content {width: 100%;max-height: 0;overflow: hidden;transition: max-height .3s ease-out;}
.landing22 .faq .content p {padding-top: 5px;font-size: 20px;line-height: 26px;font-style: normal;font-weight: 400;color: #1d252f;padding-bottom: 40px;margin: 0;width: 100%;}
.landing22 .faq .content p a {color: #1d252f;text-decoration: underline;}
.landing22 .faq .content p span {font-weight: 700;color: #1d252f;font-size: 20px;}
.landing22 .faq .content p span:hover {text-decoration: none;}

/* =========================================
   8. ANIMATIONS
   ========================================= */
@keyframes pulse-animation {
    0% {transform: scale(1); opacity: 0.3;}
    50% {transform: scale(1.1); opacity: 0.6;}
    100% {transform: scale(1); opacity: 0.3;}
}
@keyframes marquee1 {from {transform: translateX(100%);}to {transform: translateX(-100%);}}
@keyframes marquee2 {0% {transform: translateX(0%);}100% {transform: translateX(-200%);}}

/* =========================================
   9. MEDIA QUERIES (RESPONSIVE)
   ========================================= */
@media screen and (max-width:1024px) and (min-width:831px) {
    .footer__nav ul a {margin: 0 .5rem;}
}
@media screen and (max-width:830px) {
    .footer__nav {padding: 1rem 0 .5rem 0;}
    .footer__nav ul {flex-direction: column;}
    .footer__info {flex-direction: column;padding: 1rem 0;}
    .footer__info_socials {padding: 1rem 0;margin: 0;}
}
@media (max-width:767px) {
    .menu {display: none!important;}
    header {padding: 0;border-bottom: 0;position: fixed;z-index: 10;}
    header .header__line {height: 10px;display: none;}
    header .header__container {display: flex;justify-content: space-between;position: relative;align-items: center;background-color: #fff;width: 100%;height: auto;box-shadow: 0 2px 2px rgba(29,37,47,.08),0 4px 6px rgba(29,37,47,.08);border-radius: 5px;padding: 0 1rem;}
    header .header__container .mobile-hide {display: none;}
    header .header__container_hamburger {display: block!important;}
    header .header__container_content {padding: 0;align-items: flex-end;padding: 10px 0 10px 0;}
    header .header__container_content img {width: 4rem;height: 4rem;margin: 0 auto;margin-bottom: 5px;}
    header .header__container_content p {display:none;}

    .cookie {flex-direction: column;padding: 1rem 3rem;text-align: center;}
    .cookie button {width: 90%;margin-top: 1rem;}

    .statistics-form-button-1 button {width: 100%;}
    .statistics-form-button-2 {padding-bottom: 3rem;}
    .show-more-1 {font-size: 10px!important;line-height: 12px!important;}
    .calculator__col__menu_border label {font-size: 16px!important;line-height: 18px!important;}
    .calculator__col__menu_border_p {font-size: 17px !important;line-height: 19px;}

    .landing_main_ermias {font-size: 5rem!important;line-height: 5.5rem!important;}
    .landing__title {font-size: 1.5rem!important;line-height: 1.5rem!important;}
    .landing_main_side {padding-top: 0rem;}
    .landing_main_middle {margin-top: 0rem;}
    .landing_main_made_solution {text-align: center;}

    /* FAQ Mobile */
    .landing22 .faq {padding: 0 0;}
    .landing22 .faq .faq-title {font-size: 18px!important;margin-bottom: 20px;}
    .landing22 .faq .set>a {font-size: 20px!important;line-height: 26px;padding: 1rem 0;}
    .landing22 .faq .content p {font-size: 15px!important;line-height: 20px!important;padding-bottom: 25px;}
    .landing22 .faq .content p span {font-size: 15px;line-height: 20px;}
}
@media screen and (max-width:768px) {
    .menu {display: flex;align-items: center;justify-content: center;}
    .menu__wrapper {margin: 2rem 0;padding: 8px 15px;}
    .menu__link .menu__item {width: 16vw;height: 48px;background: #f6f6f7;}
}