/* === CSS RESET & NORMALIZE === */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,main,section,nav,header,footer,article,aside,figure,figcaption{
  margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; box-sizing:border-box;
}
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body { line-height:1.5; background:#fff; color:#232323; }
ul,ol { list-style:none; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
table { border-collapse:collapse; border-spacing:0; }
button { font: inherit; background: none; border:none; cursor:pointer; }

/* === BRAND FONTS & COLORS === */
@import url('https://fonts.googleapis.com/css?family=Montserrat:700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');
:root {
  --primary: #1E3765;
  --secondary: #E9E8E4;
  --accent: #F6B63B;
  --text-dark: #232323;
  --text-light: #ffffff;
  --border-color: #d2d2d6;
  --shadow: 0 4px 24px rgba(30,55,101,0.12);
  --radius: 18px;
  --transition: .23s cubic-bezier(.4,0,.2,1);
  --font-display: 'Montserrat', Arial, sans-serif;
  --font-body: 'Roboto', Arial, sans-serif;
}

/* === TYPOGRAPHY === */
body {
  font-family: var(--font-body);
  font-size:16px;
  color: var(--text-dark);
  background: var(--secondary);
  min-height:100vh;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight:800;
  color: var(--primary);
  margin-bottom:12px;
  letter-spacing: 0.03em;
}
h1 { font-size: 2.5rem; line-height:1.1; margin-bottom:20px; }
h2 { font-size: 2rem; line-height:1.15; margin-bottom:18px; }
h3 { font-size: 1.25rem; line-height:1.22; margin-bottom:12px; }
h4 { font-size: 1.1rem; line-height:1.2; }
p, ul, ol, li, table, th, td {
  font-family: var(--font-body);
  line-height:1.65;
  font-size:1rem;
  color:var(--text-dark);
}
strong { font-weight:700; color: var(--primary); }
.subheadline {
  font-family: var(--font-display);
  font-weight:700;
  font-size: 1.2rem;
  color: #1E3765;
  margin-bottom: 28px;
  letter-spacing: 0.01em;
}

/* === LAYOUT WRAPPER === */
.container {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding: 0 18px;
  display:flex;
  flex-direction:column;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.section {
  margin-bottom: 60px;
  padding: 40px 20px;
  background: var(--secondary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position:relative;
}

/* ====== HEADER & NAVIGATION ====== */
header {
  background: var(--text-light);
  box-shadow: 0 2px 12px rgba(30,55,101,0.08);
  position:sticky; top:0; left:0; z-index:30;
}
header .container {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.logo img { height:40px; width:auto; }

.main-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}
.main-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary);
  padding: 6px 10px;
  border-radius: 6px;
  transition: background var(--transition), color var(--transition);
}
.main-nav a:hover, .main-nav a:focus:not(.btn-primary) {
  background: var(--secondary);
  color: var(--accent);
}
.btn-primary {
  background: var(--accent);
  color: var(--primary)!important;
  border: none;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  padding: 12px 26px;
  letter-spacing: 0.06em;
  box-shadow: 0 3px 16px rgba(246,182,59,0.12);
  transition: background var(--transition), color var(--transition), transform var(--transition);
  outline: none;
  cursor:pointer;
  position:relative;
  z-index:2;
}
.btn-primary:hover, .btn-primary:focus {
  background: #ffd162;
  color: var(--primary);
  transform: scale(1.045);
}
/* Mobile Burger Menu */
.mobile-menu-toggle {
  display: none;
  background: var(--primary);
  color: var(--accent);
  font-size: 2.3rem;
  border-radius:12px;
  width: 48px;
  height: 48px;
  align-items:center;
  justify-content:center;
  z-index:70;
  transition: background var(--transition);
}
.mobile-menu-toggle:focus { outline: 2px solid var(--primary); }

.mobile-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  top:0; left:0;
  width: 100vw;
  height:100vh;
  background: var(--text-light);
  z-index:100;
  transform: translateX(-100vw);
  transition: transform .4s cubic-bezier(.7,0,.3,1);
  box-shadow:0 2px 60px rgba(0,0,0,0.19);
  padding: 0;
  justify-content: flex-start;
}
.mobile-menu.open {
  transform: translateX(0%);
}
.mobile-menu-close {
  display:block;
  position:absolute;
  top:16px;
  right:24px;
  background: var(--primary);
  color: var(--accent);
  font-size:2.2rem;
  width:48px;
  height:48px;
  border-radius:12px;
  align-items:center;
  justify-content:center;
  border:none;
  z-index:120;
  transition: background var(--transition);
}
.mobile-menu-close:focus { outline: 2px solid var(--primary); }

.mobile-nav {
  display:flex;
  flex-direction:column;
  justify-content: flex-start;
  align-items: flex-start;
  gap:16px;
  margin-top: 80px;
  padding: 0 32px;
  width:100%;
}
.mobile-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  background: transparent;
  color: var(--primary);
  padding:14px 0;
  border-radius: 0;
  display:block;
  width:100%;
  transition: color var(--transition), background var(--transition);
}
.mobile-nav a:hover,
.mobile-nav a:focus {
  color: var(--accent);
  background: var(--secondary);
}

@media (max-width:1100px){
  header .container { max-width: 98vw; }
}
@media (max-width:900px){
  .main-nav { gap: 14px; }
}
@media (max-width: 900px) {
  .main-nav { gap:7px; }
  .btn-primary { padding:11px 14px; font-size:1rem; }
}
@media (max-width: 900px) {
  .main-nav { display: none; }
  .mobile-menu-toggle { display: flex; }
}
@media (min-width: 901px) {
  .mobile-menu, .mobile-menu-toggle { display: none!important; }
  .main-nav { display: flex!important; }
}

/* === HERO, CTA, SECTIONS === */
.hero {
  padding: 50px 0 40px 0;
  background: var(--primary);
  color: var(--text-light);
  border-radius: 0 0 var(--radius) var(--radius);
  margin-bottom:60px;
  position:relative;
  overflow:hidden;
}
.hero .container { align-items: flex-start; }
.hero .content-wrapper {
  max-width: 640px;
  gap: 26px;
  color:var(--text-light);
}
.hero h1, .hero .subheadline { color:var(--text-light); }
.hero .btn-primary {
  background: var(--accent);
  color: var(--primary)!important;
  font-size:1.13rem;
  margin-top:10px;
}

.cta {
  background: var(--accent);
  border-radius: var(--radius);
  color: var(--primary);
  box-shadow: 0 6px 20px rgba(246,182,59,0.13);
}
.cta h2, .cta p { color: var(--primary); }
.cta .btn-primary {
  background: var(--primary);
  color:var(--accent)!important;
  margin-top:10px;
}
.cta .btn-primary:hover { background: #16305c; }


/* ==== FEATURE, CARD, GRID FLEXBOX ==== */
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  margin-bottom:24px;
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  background: var(--text-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 22px;
  min-width: 220px;
  max-width: 320px;
  flex: 1 1 220px;
  margin-bottom:20px;
  border: 2.5px solid var(--accent);
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
  z-index:1;
}
.feature-item:hover {
  transform: translateY(-8px) scale(1.025);
  box-shadow: 0 8px 36px rgba(30,55,101,0.20);
  border-color: var(--primary);
}
.feature-item img {
  height: 44px;
  width: 44px;
  margin-bottom:6px;
}
.feature-item h3 {
  margin: 0 0 6px 0;
  color:var(--primary);
}
.feature-item p {
  color:var(--text-dark);
  font-size: 1rem;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  background: var(--text-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 20px 24px 20px;
  margin-bottom: 20px;
  position: relative;
  flex: 1 1 210px;
  min-width: 210px;
  transition: box-shadow var(--transition), transform var(--transition);
  z-index:1;
}
.card:hover {
  box-shadow: 0 8px 30px 0 rgba(30,55,101,0.19);
  transform: translateY(-6px) scale(1.03);
}

.content-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
.text-image-section {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.testimonial-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #fafbfe;
  border: 2.5px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(30,55,101,.11);
  margin-bottom: 24px;
  min-width: 240px;
  flex: 1 1 250px;
  transition: border var(--transition), box-shadow var(--transition);
}
.testimonial-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 36px rgba(1,49,141,0.18);
}
.testimonial-card p {
  font-size: 1.05rem;
  font-family: var(--font-body);
  color:var(--text-dark);
}
.testimonial-author {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--primary);
  font-weight:700;
  margin-left:14px;
}

/* = Responsive testmonial slider = */
.testimonial-slider {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}


/* ======== GENERAL CARDS - OTHER LISTS ======== */
.package-compare, .equipment-overview, .customer-care-highlights, .included-services, .privacy-content, .gdpr-content, .terms-content, .cookie-policy-content, .contact-for-data-protection {
  background: var(--text-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 23px 16px;
  margin: 18px 0;
}

.package-compare h3, .equipment-overview h3, .included-services h4, .contact-for-data-protection h4 {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight:800;
  margin-bottom: 10px;
  font-size:1.12rem;
}

.faq-accordion, .faq-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
.faq-item {
  background: var(--secondary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 18px;
  transition: box-shadow var(--transition);
}
.faq-item h3 {
  color: var(--primary);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.short-descriptions li, .quick-links a, .customer-care-highlights ul li {
  font-size: 1rem;
}
.quick-links a {
  color: var(--accent);
  font-weight: 600;
  margin: 0 6px;
  text-decoration: underline;
  transition: color var(--transition);
}
.quick-links a:hover { color:var(--primary); }

/* === TABLES (Pricing) === */
.pricing-table {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.pricing-table table {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--text-light);
}
.pricing-table th, .pricing-table td {
  padding: 18px 14px;
  text-align: left;
  border-bottom: 1.5px solid var(--border-color);
  font-family: var(--font-display);
}
.pricing-table th {
  background: var(--primary);
  color: var(--accent);
  font-size:1.07rem;
  font-weight: 800;
  border-bottom: 2.5px solid var(--accent);
}
.pricing-table tbody tr:hover {
  background: var(--secondary);
}


/* === TEAM SECTION === */
.team-list {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.team-member {
  background: var(--text-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width:190px;
  flex: 1 1 190px;
  padding: 25px 18px 17px;
  margin-bottom:20px;
}
.team-member h4 {
  color: var(--primary);
  font-size:1.06rem;
}

/* === CONTACT INFO BLOCK === */
.contact-info-block {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
  margin-bottom: 12px;
  background: var(--text-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 18px;
}
.address-block, .contact-links, .office-hours {
  min-width: 170px;
  flex:1 1 170px;
  font-size: 1rem;
}
.contact-links p, .office-hours p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.contact-links img, .office-hours img {
  width:23px; height:23px;
  margin-right:4px;
}
.contact-links a {
  color: var(--accent);
  font-weight:700;
  transition: color var(--transition);
  text-decoration: underline;
}
.contact-links a:hover { color: var(--primary); }

/* =========== LISTS & STEP LISTS =========== */
.step-list {
  display: flex;
  flex-wrap: wrap;
  gap:18px;
  padding:0;
  margin-bottom:14px;
}
.step-list li {
  background: var(--secondary);
  border-radius: var(--radius);
  padding:16px 14px;
  min-width:180px;
  flex:1 1 180px;
  box-shadow: var(--shadow);
  display:flex;
  align-items: flex-start;
  gap:13px;
  margin-bottom: 12px;
}
.step-list img {
  height:32px;width:32px;
}

/* === OPTION LISTS === */
.option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.option-item {
  background: var(--text-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 25px 20px 18px 20px;
  min-width: 210px;
  flex:1 1 210px;
  margin-bottom:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.option-item img { height:44px;width:44px; }

/* === FOOTER === */
footer {
  background: var(--primary);
  color: var(--accent);
  padding: 44px 0 18px 0;
  position:relative;
  margin-top:40px;
}
footer .container {
  flex-direction: row;
  align-items: flex-start;
  gap:32px;
  justify-content: space-between;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 180px;
}
.footer-nav a {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  transition: color var(--transition);
}
.footer-nav a:hover { color: var(--text-light); }
.footer-contact {
  font-size: 1rem;
  color: var(--accent);
  min-width: 270px;
}
.footer-contact a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  transition:color var(--transition);
}
.footer-contact a:hover { color:#fff; }
.footer-logo img { height:36px; filter: brightness(99); }

/* == Confirmation/Thank You == */
.confirmation-message, .next-steps {
  background:var(--secondary);
  border-radius: var(--radius);
  padding: 18px 14px;
  margin-bottom:14px;
}

/* === ANIMATIONS & TRANSITIONS === */
.btn-primary, .feature-item, .testimonial-card, .card, .option-item, .step-list li, .faq-item {
  transition:box-shadow var(--transition), background var(--transition), border var(--transition), transform var(--transition), color var(--transition);
}

/* === MICRO-INTERACTIONS === */
.btn-primary:active {
  transform: scale(0.98);
}

/* === Cookie Consent Banner === */
.cookie-consent-banner {
  position: fixed;
  left:0; right:0;
  bottom:0;
  background: var(--primary);
  color: var(--accent);
  width:100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:24px;
  padding:22px 10vw 18px 10vw;
  z-index:1000;
  box-shadow: 0 -6px 37px rgba(30,55,101,0.14);
  animation: fadeInBanner .8s cubic-bezier(.5,0,.4,1);
}
@keyframes fadeInBanner {
  from { transform:translateY(80px); opacity:0; }
  to   { transform:translateY(0); opacity:1; }
}
.cookie-consent-banner p {
  color: var(--accent);
  font-weight:600;
  flex:2;
  margin-right:12px;
  font-size:1rem;
}
.cookie-consent-actions {
  display:flex;
  flex-direction: row;
  gap:12px;
}
.cookie-btn {
  border:none;
  border-radius: 8px;
  padding:12px 16px;
  font-family: var(--font-display);
  font-size:1rem;
  font-weight:800;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  cursor:pointer;
}
.cookie-btn.accept {
  background: var(--accent);
  color: var(--primary);
}
.cookie-btn.accept:hover {
  background: #ffd162;
}
.cookie-btn.reject {
  background: #fff;
  color: var(--primary);
  border:2px solid var(--accent);
}
.cookie-btn.reject:hover {
  background: var(--accent); color: var(--primary);
}
.cookie-btn.settings {
  background: none;
  border:2px solid var(--primary);
  color: var(--accent);
  font-weight:800;
}
.cookie-btn.settings:hover { background: var(--primary); color: var(--accent); }

.cookie-preferences-modal {
  position:fixed;
  left:0;top:0;right:0;bottom:0;
  background:rgba(30,55,101,0.70);
  z-index:1200;
  display:flex;
  justify-content:center;
  align-items:center;
  animation: fadeInModal .28s cubic-bezier(.5,0,.4,1);
}
@keyframes fadeInModal {
  from { opacity:0; }
  to   { opacity:1; }
}
.cookie-modal-content {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 64px rgba(30,55,101,0.21);
  max-width: 380px;
  width:98vw;
  padding: 34px 28px 24px 28px;
  color:var(--text-dark);
  position:relative;
  display:flex;
  flex-direction: column;
  gap:20px;
  animation: fadeInModalContent .31s cubic-bezier(.5,0,.4,1);
}
@keyframes fadeInModalContent {
  from { transform:scale(.93);opacity:0; }
  to   { transform:scale(1);opacity:1; }
}
.cookie-modal-content h3 {
  color:var(--primary);
  font-size:1.20rem;
  margin-bottom: 14px;
}
.cookie-category {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:8px;
}
.cookie-category label {
  font-family: var(--font-body);
  font-size: 1rem;
  color:var(--primary);
  font-weight: 600;
}
.cookie-switch {
  display: inline-block;
  width: 44px;
  height: 24px;
  background: #e5e8f2;
  border-radius:14px;
  position: relative;
}
.cookie-switch input { display:none; }
.cookie-slider {
  position:absolute;top:2px;left:2px;
  width: 20px; height:20px;
  border-radius:50%;background:var(--primary);
  transition: left var(--transition), background var(--transition);
}
.cookie-switch input:checked + .cookie-slider {
  left: 22px;
  background: var(--accent);
}
.cookie-preferences-close {
  position:absolute; top:16px; right:18px;
  background:none; border:none; color:var(--primary); font-size:1.86rem;
  cursor:pointer;
  z-index:15;
  padding:4px;
  border-radius:8px;
}
.cookie-preferences-close:hover { background: var(--secondary); }

/* ========== MEDIA QUERIES ========== */
@media (max-width: 1080px){
  .feature-grid, .testimonial-slider, .option-list, .team-list, .card-container { gap:18px; }
  .feature-item, .card, .option-item, .team-member { min-width:170px; }
}
@media (max-width: 900px){
  .feature-grid, .testimonial-slider, .option-list, .team-list, .card-container {
    flex-direction: column;
    gap:18px;
  }
  .feature-item, .option-item, .team-member, .testimonial-card, .card {
    min-width: 0;
    width:100%;
    max-width:100%;
  }
  .content-wrapper, .card-container, .feature-grid, .card, .team-list, .option-list, .step-list {
    gap:17px;
  }
  .hero { padding: 38px 0 26px 0; }
  .cta { padding: 34px 10px; }
}
@media (max-width:768px){
  h1 { font-size:2rem; }
  h2 { font-size:1.45rem; }
  .step-list {
    flex-direction:column;
    gap:11px;
  }
  .text-image-section { flex-direction:column;gap:18px; }
  .container { padding: 0 9px; }
  .section, .hero, .cta { padding: 18px 7px; }
  .testimonial-slider { flex-direction:column; gap:18px; }
  footer .container { flex-direction: column; gap:18px; }
  .contact-info-block { flex-direction:column; gap:14px; }
}
@media (max-width:500px){
  .cookie-consent-banner { flex-direction:column; gap:13px; padding:14px 2vw 8px 2vw; }
  .cookie-modal-content { padding:20px 7px; }
  .pricing-table th, .pricing-table td { padding:10px 5px; }
}

/* === Miscellaneous Utility ===*/
.bg-accent { background: var(--accent); color: var(--primary); }
.bg-secondary { background: var(--secondary); }
.bg-primary { background: var(--primary); color: var(--text-light); }

.shadow { box-shadow: var(--shadow); }
.rounded { border-radius: var(--radius); }
.text-center { text-align: center; }

/* [End of CSS file for Postibelt Mobil] */