@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Medium.eot');
    src: url('fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Medium.woff2') format('woff2'),
        url('fonts/Roboto-Medium.woff') format('woff'),
        url('fonts/Roboto-Medium.ttf') format('truetype'),
        url('fonts/Roboto-Medium.svg#Roboto-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-LightItalic.eot');
    src: url('fonts/Roboto-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-LightItalic.woff2') format('woff2'),
        url('fonts/Roboto-LightItalic.woff') format('woff'),
        url('fonts/Roboto-LightItalic.ttf') format('truetype'),
        url('fonts/Roboto-LightItalic.svg#Roboto-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-MediumItalic.eot');
    src: url('fonts/Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-MediumItalic.woff2') format('woff2'),
        url('fonts/Roboto-MediumItalic.woff') format('woff'),
        url('fonts/Roboto-MediumItalic.ttf') format('truetype'),
        url('fonts/Roboto-MediumItalic.svg#Roboto-MediumItalic') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Light.eot');
    src: url('fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Light.woff2') format('woff2'),
        url('fonts/Roboto-Light.woff') format('woff'),
        url('fonts/Roboto-Light.ttf') format('truetype'),
        url('fonts/Roboto-Light.svg#Roboto-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Black.eot');
    src: url('fonts/Roboto-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Black.woff2') format('woff2'),
        url('fonts/Roboto-Black.woff') format('woff'),
        url('fonts/Roboto-Black.ttf') format('truetype'),
        url('fonts/Roboto-Black.svg#Roboto-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Thin.eot');
    src: url('fonts/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Thin.woff2') format('woff2'),
        url('fonts/Roboto-Thin.woff') format('woff'),
        url('fonts/Roboto-Thin.ttf') format('truetype'),
        url('fonts/Roboto-Thin.svg#Roboto-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-BoldItalic.eot');
    src: url('fonts/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-BoldItalic.woff2') format('woff2'),
        url('fonts/Roboto-BoldItalic.woff') format('woff'),
        url('fonts/Roboto-BoldItalic.ttf') format('truetype'),
        url('fonts/Roboto-BoldItalic.svg#Roboto-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-BlackItalic.eot');
    src: url('fonts/Roboto-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-BlackItalic.woff2') format('woff2'),
        url('fonts/Roboto-BlackItalic.woff') format('woff'),
        url('fonts/Roboto-BlackItalic.ttf') format('truetype'),
        url('fonts/Roboto-BlackItalic.svg#Roboto-BlackItalic') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Bold.eot');
    src: url('fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Bold.woff2') format('woff2'),
        url('fonts/Roboto-Bold.woff') format('woff'),
        url('fonts/Roboto-Bold.ttf') format('truetype'),
        url('fonts/Roboto-Bold.svg#Roboto-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.eot');
    src: url('fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Regular.woff2') format('woff2'),
        url('fonts/Roboto-Regular.woff') format('woff'),
        url('fonts/Roboto-Regular.ttf') format('truetype'),
        url('fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-ThinItalic.eot');
    src: url('fonts/Roboto-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-ThinItalic.woff2') format('woff2'),
        url('fonts/Roboto-ThinItalic.woff') format('woff'),
        url('fonts/Roboto-ThinItalic.ttf') format('truetype'),
        url('fonts/Roboto-ThinItalic.svg#Roboto-ThinItalic') format('svg');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Italic.eot');
    src: url('fonts/Roboto-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Italic.woff2') format('woff2'),
        url('fonts/Roboto-Italic.woff') format('woff'),
        url('fonts/Roboto-Italic.ttf') format('truetype'),
        url('fonts/Roboto-Italic.svg#Roboto-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
font-family: 'Omnes Regular';
font-style: normal;
font-weight: normal;
src: local('Omnes Regular'), url('fonts/Omnes Regular.woff') format('woff');
}


@font-face {
font-family: 'Omnes Italic';
font-style: normal;
font-weight: normal;
src: local('Omnes Italic'), url('fonts/Omnes Italic.woff') format('woff');
}


@font-face {
font-family: 'Omnes Hairline';
font-style: normal;
font-weight: normal;
src: local('Omnes Hairline'), url('fonts/Omnes Hairline.woff') format('woff');
}


@font-face {
font-family: 'Omnes Hairline Italic';
font-style: normal;
font-weight: normal;
src: local('Omnes Hairline Italic'), url('fonts/Omnes Hairline Italic.woff') format('woff');
}


@font-face {
font-family: 'Omnes Thin';
font-style: normal;
font-weight: normal;
src: local('Omnes Thin'), url('fonts/Omnes Thin.woff') format('woff');
}


@font-face {
font-family: 'Omnes Thin Italic';
font-style: normal;
font-weight: normal;
src: local('Omnes Thin Italic'), url('fonts/Omnes Thin Italic.woff') format('woff');
}


@font-face {
font-family: 'Omnes ExtraLight';
font-style: normal;
font-weight: normal;
src: local('Omnes ExtraLight'), url('fonts/Omnes ExtraLight.woff') format('woff');
}


@font-face {
font-family: 'Omnes ExtraLight Italic';
font-style: normal;
font-weight: normal;
src: local('Omnes ExtraLight Italic'), url('fonts/Omnes ExtraLight Italic.woff') format('woff');
}


@font-face {
font-family: 'Omnes Light';
font-style: normal;
font-weight: normal;
src: local('Omnes Light'), url('fonts/Omnes Light.woff') format('woff');
}


@font-face {
font-family: 'Omnes Light Italic';
font-style: normal;
font-weight: normal;
src: local('Omnes Light Italic'), url('fonts/Omnes Light Italic.woff') format('woff');
}


@font-face {
font-family: 'Omnes Medium';
font-style: normal;
font-weight: normal;
src: local('Omnes Medium'), url('fonts/Omnes Medium.woff') format('woff');
}


@font-face {
font-family: 'Omnes Medium Italic';
font-style: normal;
font-weight: normal;
src: local('Omnes Medium Italic'), url('fonts/Omnes Medium Italic.woff') format('woff');
}


@font-face {
font-family: 'Omnes SemiBold';
font-style: normal;
font-weight: normal;
src: local('Omnes SemiBold'), url('fonts/Omnes SemiBold.woff') format('woff');
}


@font-face {
font-family: 'Omnes SemiBold Italic';
font-style: normal;
font-weight: normal;
src: local('Omnes SemiBold Italic'), url('fonts/Omnes SemiBold Italic.woff') format('woff');
}


@font-face {
font-family: 'Omnes Bold';
font-style: normal;
font-weight: normal;
src: local('Omnes Bold'), url('fonts/Omnes Bold.woff') format('woff');
}


@font-face {
font-family: 'Omnes Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Omnes Bold Italic'), url('fonts/Omnes Bold Italic.woff') format('woff');
}


@font-face {
font-family: 'Omnes Black';
font-style: normal;
font-weight: normal;
src: local('Omnes Black'), url('fonts/Omnes Black.woff') format('woff');
}


@font-face {
font-family: 'Omnes Black Italic';
font-style: normal;
font-weight: normal;
src: local('Omnes Black Italic'), url('fonts/Omnes Black Italic.woff') format('woff');
}

.btn:focus, .btn:active {
    outline: none !important;
    box-shadow: none !important;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
    --theme-color: #00b6e8; /* Theme color */
}

body {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-size: 1rem; /* 16px */
    line-height: 1.6; /* Enhances readability */
    margin: 0;
    padding: 0;
    background-color: #00c2e8; /* Fallback background color */
}

/* Headings and Paragraphs */
h1, h2, h3, p, ul, ol, li {
    margin-top: 1rem; /* Uniform space above */
    margin-bottom: 1rem; /* Uniform space below */
    color: #fff; /* Adjust text color for readability on the new background */
}

h1 {
    font-size: 2rem; /* 32px */
    line-height: 1.2;
    margin-top: 2rem;
    font-family: 'Omnes Bold';
}

h2 {
    font-size: 1.5rem; /* 24px */
    line-height: 1.3;
}

h3 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.4;
}

/* Make Navbar Transparent */
.navbar {
    background-color: #00c2e8 !important; /* Override any existing background color */
    box-shadow: none; /* Remove any existing shadow for a cleaner look */
}

/* Ensure Navbar Text Is Visible */
.navbar-light .navbar-nav .nav-link {
    color: #fff; /* Adjust the color to ensure visibility; change as needed */
}

.navbar-light .navbar-brand {
    color: #fff; /* Adjust the color to ensure visibility; change as needed */
}

/* Navbar Toggler Customization */
.navbar-toggler {
    border: none;
    padding: 0.25rem 0.5rem;
}

.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler-icon:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.icon-bar {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #FFF;
    border-radius: 1px;
    transition: all 0.2s ease;
    margin: 6px auto;
    position: relative;
}

/* Icon Animation */
.navbar-toggler.open .icon-bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.navbar-toggler.open .icon-bar:nth-child(2) {
    opacity: 0;
}

.navbar-toggler.open .icon-bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Adjustments for Full Width Divs with Container for Content */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Links and Button Styles for Theme Color */
a, .btn-primary {
    color: var(--theme-color);
}

.btn-primary {
    border-color: var(--theme-color);
    background-color: var(--theme-color);
}

a:hover, a:focus {
    color: #fff;
}

/* Hero Section Text Styles */
#hero h1 {
    text-transform: uppercase;
    font-weight: bolder; /* Make the entire h1 bold */
    color: #000; /* Text color */
    margin-bottom: 1rem; /* Spacing between the text and the image */
}

.hero-large-text {
    font-size: calc(2rem + 1vw); /* Slightly larger for "Zagrizi" */
}

.hero-small-text {
    font-size: calc(1.5rem + 1vw); /* Smaller size for "Pringles i osvoji" */
}

.hero-logo {
    width: 20rem; /* Adjust width as necessary */
    max-width: 100%; /* Ensures the image is not larger than its original size */
    margin: 0 auto;
    margin-bottom: -15rem; /* Negative margin to push the image down over the next div */
    display: block; /* Ensure the image is treated as a block-level element for margin to apply */
}

#promotion {
    padding-top: 15rem;
    padding-bottom: 1rem;
    background-image: url('https://webfonts.wolt.com//img/background.jpg'); /* Background image */
    background-size: cover; /* Cover the entire page */
    background-position: bottom center; /* Align the image to the middle vertically and horizontally */
    background-repeat: no-repeat; /* Do not repeat the image */
}

.promo-icon {
    width: 5rem; /* Control the image size */
    vertical-align: middle; /* Align the image vertically with the text */
    margin-right: 0.5rem; /* Add some space between the image and the text */
}

.promo-text {
    display: inline-block; /* Allows the span to be aligned with the image */
    vertical-align: middle; /* Ensures vertical alignment with the image */
    line-height: normal; /* Adjust as needed to ensure the line height is unaffected by the image */
}

.promo-heading {
    /* Ensures the heading behaves like a flex container */
}

.promo-logo {
    height: 1em; /* Aligns the image height with the surrounding text */
    vertical-align: middle; /* Vertically aligns the image with the text */
    margin: 0 5px; /* Adds horizontal margin for spacing */
}

label {
    color: black;
}

.form-control {
	border: 1px solid var(--theme-color);
}

.form-control:focus { 
	box-shadow: none;
	border: 1px solid var(--theme-color);
}

input:focus {
  border-color: var(--theme-color) !important;
}

.help-block.with-errors {
    color: #FFFFFF;
    margin-top: 5px;
}

.custom-control-label::before {
    background: #FFFFFF;
    border: 1px solid var(--theme-color);
}

.btn {
  color: var(--theme-color);
  font-weight: bold;
  height: 3em;
  background: #F1EF9A;
  border: none;
  box-shadow: none;
}

.btn:hover {
  background: #FBB04C;
}

.btn:focus,
.btn:active,
.btn:disabled,
.btn:visited {
  outline: none;
}

.btn-send {
    text-align: center; /* Center text horizontally */
    text-decoration: none !important; /* Remove underline */
    color: #000; /* Text color */
    background-color: var(--theme-color); /* Background color */
    border-color: var(--theme-color); /* Border color */
    padding: 0.8rem 1rem; /* Top and Bottom, Left and Right padding */
    line-height: 1.5; /* Adjust line height for vertical centering */
    display: inline-block; /* Use inline-block for proper alignment */
    vertical-align: middle; /* Align inline elements vertically */
}

.btn-send:hover, .btn-send:focus {
    color: #FFFFFF !important; /* Text color on hover/focus */
    background-color: var(--theme-color); /* Slightly darker background on hover for effect */
    text-decoration: none !important; /* No underline on hover */
}

@media (max-width: 991px) {
    .promo-heading {
        flex-direction: column; /* Stacks items vertically on smaller screens */
        text-align: center; /* Centers the text when stacked */
    }

    .promo-logo {
        margin: 5px 0; /* Adjusts margin for vertical stacking */
    }
}

/* Footer Background */
footer {
    background-color: #00c2e8;
    color: #fff; /* Ensuring text within the footer is white for readability */
    padding: 1rem 0; /* Add some padding for spacing, adjust as needed */
}

/* Modal Customization */
.modal-content {
    background-color: #00c2e8; /* Red background color matching the body */
    color: #fff; /* White text color for content within the modal */
}

/* Ensuring all text within the modal is white, including headings, paragraphs, and list items */
.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content p,
.modal-content li {
    color: #fff; /* White text color */
}

/* If you have links within the modal and wish to ensure they are also white */
.modal-content a {
    color: #fff; /* White text color for links */
}

.modal-content a:hover,
.modal-content a:focus {
    color: #ccc; /* Lighter shade for hover/focus states */
}

/* Responsive Breakpoints */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}