@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Raleway:300,400');
@import url('https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');
@import url('layouts.css');
@import url('fonts.css');
@import url('navigation.css');
@import url('footer.css');
@import url('tabs.css');
@import url('fragments.css');
@import url('popup.css');

:root {
    /* Colors */
    --primary-color: #2585bd;
    --secondary-color: #f8f8f8;
    --bg-primary-color: #c8deec;
    --bg-secondary-color: rgb(255, 255, 255, 128);
    --bg-footer-color: #e0ecf4;
    --primary-color-hover: #2178aa;
    --bg-color-tooltip: #555;
    --font-color-theme: #2585bd;
    --font-color-dark: #000000;
    --font-color-light: #ffffff;
    --font-color-company-nav: #ff7707;
    --carousel-color: #d9d9d9;
    --font-color-footer: rgb(108, 0, 147);
    /*primary 10 % darker*/

    /* Font sizes */
    --font-size-company-nav: 20px;
    --font-size-company-footer: 20px;
    --font-size-primary: 16px;
    --font-size-h1: 32px;
    --font-size-h2: 24px;
    --font-size-h4: 20px;
    --font-size-nav: 20px;
    --font-size-small: 12px;
    --font-size-btn: 18px;

    /* Font families */
    --font-family-company: "Fontdiner Swanky", serif;
    --font-family-primary: "Inter";
    --font-family-h1: "Paytone One";

    /* Font styles */
    --font-style-primary: normal;
    --font-weight-primary: 400;
    --font-weight-semibold: 500;
    --font-weight-bold: 750;

    /* Line heights */
    --line-height-primary: 26px;
    --line-height-small: 20px;
    --line-height-h1: 32px;
    --line-height-h2: 24px;

    /* Heights */
    --height-nav: 66px;
    --height-hero: 400px;
    --height-tab-content: 500px;
    --height-btn-hero: 60px;
    --height-btn-secondary: 50px;
    --height-btn-download: 70px;
    --height-tabs: 400px;
    --bg-h: 55vh;
    /*widths*/
    --width-btn-hero: 265px;
    --width-btn-secondary: 172px;
    --width-btn-download: 350px;
    /*Margins*/
    --margin-primary: 28px;
    --margin-large: 100px;
    --margin-split-screen: 50px;
    --margin-nav-logo: 10px;
    --margin-main-top: var(--height-nav);
    --margin-separator: 10px;
    --margin-tooltip: -60px;
    --margin-li: 10px;
    --margin-p: 18px;
    --margin-footer-li: 12px;
    --margin-h2: 28px;
    --margin-h4: 18px;
    --margin-section: 64px;
    --margin-footer-top: 20px;
    --margin-btn-download-right: 24px;
    --margin-fine-print: 27px;
    --margin-buy-top: 28px;
    --margin-buy-bot: 16px;
    --margin-ul-flat-align: 35px;
    --margin-legal: 14px;

    /*Paddings*/
    --standard-padding: 16px;
    --padding-footer: 0;
    --pading-nav: 5px;
    --padding-legal: 10px;
    --pading-ul-flat-align: 17px;
    --padding-small: 10px;
    --padding-card: 20px;

    --radius-small: 10px;
    --radius-medium: 20px;
    --radius-btn-hero: 20px;
    --radius-btn-secondary: 25px;
    --radius-btn-download: 26px;
    /* Box Shadow */
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0 9px 18px rgba(0, 0, 0, 0.2);
    --box-shadow-large: 0 6px 12px rgba(0, 0, 0, 0.15);
    --box-shadow-accent: 0px 4px 12px 0px rgba(255, 119, 7, 0.03);
}

.margin-legal {
    margin-bottom: var(--margin-legal);
}

.carousel-circle {

    --carousel-size: 12px;
    display: inline-block;
    width: var(--carousel-size);
    height: var(--carousel-size);
    background-color: var(--carousel-color);
    border-radius: 50%;
    margin-right: var(--margin-primary);
}

.carousel-circle.active {
    background-color: var(--primary-color);
}

.distanca {

    margin-bottom: var(--margin-primary);

}

.pad-lr {
    box-sizing: border-box;
    padding-left: var(--standard-padding);
    padding-right: var(--standard-padding);

}

.pad-gd {
    box-sizing: border-box;
    padding-top: var(--standard-padding);
    padding-bottom: var(--standard-padding);

}


.hide {
    display: none;
}

.show {
    display: flex;
}


.save-anual-link {
    color: var(--font-color-theme);
    font-size: var(--font-size-btn);
}

.save-anual-link:hover {
    color: var(--primary-color-hover);
}

.monthly-container {
    display: none;
    width: 100%;
    margin-bottom: var(--margin-fine-print);
}

.annual-container {
    width: 100%;
    margin-bottom: var(--margin-fine-print);
}

.fine-print {
    margin-top: var(--margin-fine-print);
}

.mailto {
    /*color: var(--font-color-theme);*/
}

.mailto:hover {
    color: var(--primary-color-hover);
}

a {
    text-decoration: none;
    color: var(--font-color-dark);
    transition: color 0.3s ease-in-out;
}

.naslov-sekcije {
    margin-top: var(--margin-large);
    margin-bottom: var(--margin-large);

}

a:hover {
    color: var(--font-color-theme);
}

.blank-card {
    box-sizing: border-box;
    background-color: var(--bg-secondary-color);
    border-radius: var(--radius-medium);
    padding: var(--padding-card);
}

.shadow-card {
    box-sizing: border-box;
    background-color: var(--bg-secondary-color);
    border-radius: var(--radius-medium);
    box-shadow: var(--box-shadow);
    padding: var(--padding-card);

}

.card {
    box-sizing: border-box;
    background-color: var(--bg-primary-color);
    border-radius: var(--radius-medium);
    padding: var(--padding-card);

}

.right-margin {
    margin-right: var(--margin-split-screen);
}

.tab-sizer {
    min-height: var(--height-tab-content);
    margin-top: var(--margin-primary);
    margin-bottom: var(--margin-primary);
}

section {
    margin-bottom: 0;
    width: 100%;
}



.testimonials {
    margin-bottom: 0;
}

.btn-hero {
    height: var(--height-btn-hero);
    width: 100%;
    border-radius: var(--radius-btn-hero);
    background-color: var(--primary-color);
    color: var(--font-color-light);
    font-size: var(--font-size-btn);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    align-content: center;

}

.btn-secondary {
    height: var(--height-btn-secondary);
    width: var(--width-btn-secondary);
    border-radius: var(--radius-btn-secondary);
    background-color: var(--primary-color);
    color: var(--font-color-light);
    font-size: var(--font-size-btn);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    align-content: center;
    margin-top: var(--margin-primary);
}

.btn-buy {
    height: var(--height-btn-secondary);
    width: var(--width-btn-secondary);
    border-radius: var(--radius-btn-secondary);
    background-color: var(--primary-color);
    color: var(--font-color-light);
    font-size: var(--font-size-btn);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    align-content: center;
    margin-top: var(--margin-buy-top);
    margin-bottom: var(--margin-buy-bot);
}

.btn-download {
    height: 50px;
    width: 100%;
    border-radius: 20px;
    background-color: var(--primary-color);
    color: var(--font-color-light);
    font-size: var(--font-size-btn);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--margin-primary);
    margin-right: var(--margin-primary);
    margin-left: var(--margin-primary);
    text-align: center;
    align-content: center;
}

.btn-hero:hover,
.btn-secondary:hover,
.btn-download:hover,
.btn-buy:hover {
    background-color: var(--primary-color-hover);
    box-shadow: var(--box-shadow-hover);
    color: var(--font-color-light);
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

body {
    margin: 0;
    padding: 0;
    position: relative;

}



main {
    margin-top: var(--margin-main-top);
    /*distance from top by the nav height*/
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
    padding: 0;
}

h1 {
    margin-bottom: var(--margin-primary);
}

h2 {
    margin-bottom: var(--margin-primary);
}

h4 {
    margin-bottom: var(--margin-h4);
}

ul {
    padding: 0;
    margin: 0;
    margin-left: var(--margin-ul-flat-align);
}

.wrapper {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.second-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.separator {
    width: 100%;
    height: 1px;
    background-color: var(--primary-color);
    /*  margin-bottom: var(--margin-separator);*/
}



.has-tooltip {
    position: relative;
}

.tooltip-text {
    visibility: hidden;
    background-color: var(--bg-color-tooltip);
    color: var(--font-color-light);
    text-align: start;
    border-radius: var(--radius-small);
    padding: var(--padding-small);
    position: absolute;
    z-index: 1;
    bottom: 125%;
    font-size: var(--font-size-small);
    /* Position the tooltip above the text */
    left: 50%;
    margin-left: var(--margin-tooltip);
    /* Use half the width to center the tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

.has-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

#robot-voice {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Fixed/sticky position */
    bottom: 70px;
    /* Place the button at the bottom of the page */
    right: 90px;
    font-size: 12px;
    cursor: pointer;
}

#robot {
    display: none;
    /* Hidden by default */
    position: fixed;
    width: 100px;
    /* Fixed/sticky position */
    bottom: 20px;
    /* Place the button at the bottom of the page */
    right: 30px;
    /* Place the button 30px from the right */
    z-index: 99;
    /* Make sure it does not overlap */
    /* Text color */
    cursor: pointer;
    /* Add a mouse pointer on hover */

}

.background {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    width: 100%;
    height: var(--bg-h);
    background: var(--bg-primary-color);
    background: -webkit-linear-gradient(to bottom, var(--bg-primary-color), var(--bg-secondary-color));
    background: linear-gradient(to bottom, var(--bg-primary-color), var(--bg-secondary-color));
    z-index: -1;
}

.bg_img_with_mask {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    width: 100%;
    height: var(--bg-h);
    background-image: url('../assets/pozadina.svg');
    z-index: -2;
}

.bg_img_with_mask::after {
    content: "";
    position: absolute;
    top: var(--nav-h);
    top: 0;
    left: 0;
    width: 100%;
    height: var(--bg-h);
    background: linear-gradient(to bottom, transparent 50%, var(--bg-secondary-color) 100%);
    z-index: -1;
}

.bubble {
    --r: 1em;
    /* the radius */
    --t: 1.5em;
    /* the size of the tail */
    max-width: 300px;
    padding: 1em;
    border-inline: var(--t) solid #0000;
    border-radius: calc(var(--r) + var(--t))/var(--r);
    mask:
        radial-gradient(100% 100% at var(--_p) 0, #0000 99%, #000 102%) var(--_p) 100%/var(--t) var(--t) no-repeat,
        linear-gradient(#000 0 0) padding-box;
    color: var(--primary-color);
}

.bubble-left {
    background: var(--secondary-color) border-box;
    --_p: 0;
    border-bottom-left-radius: 0 0;
    place-self: start;
    color: var(--font-color-dark);
}

.bubble-right {
    background: var(--primary-color) border-box;
    --_p: 100%;
    border-bottom-right-radius: 0 0;
    place-self: end;
    color: var(--font-color-light);
}

.container {
    width: 100%;
    box-sizing: border-box;
    padding-top: 50px;
    padding-bottom: 0;
    padding-left: var(--standard-padding);
    padding-right: var(--standard-padding);
}