/*
 Theme Name:  akoca Child Theme
 Theme URL:    https://akoca-seo.co.uk/
 Description:  Child Theme for Divi
 Author:       Akoca SEO
 Author URI:   https://akoca-seo.co.uk/
 Template:     Divi
 Version:      1.0.0
*/

/*****Add any custom CSS below this line*****/
/* Poppins SemiBold - for Headers */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/Poppins-SemiBold.woff2') format('woff2'),
       url('fonts/Poppins-SemiBold.woff') format('woff'); /* Fallback */
}

/* Poppins Italic - for Accents */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/Poppins-Italic.woff2') format('woff2'),
       url('fonts/Poppins-Italic.woff') format('woff'); /* Fallback */
}

/* Poppins Regular - for Body */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Poppins-Regular.woff2') format('woff2'),
       url('fonts/Poppins-Regular.woff') format('woff'); /* Fallback */
}

/* Applying Poppins to Headers, Accents, and Body */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif!important;
  font-weight: 600; /* SemiBold for headers */
  line-height: 1.2; /* Unitless line-height for better scaling */
}


em, i {
  font-family: 'Poppins', sans-serif!important;
  font-style: italic; /* Italic for accents */
}

body, p {
  font-family: 'Poppins', sans-serif!important;
  font-weight: 400; /* Regular for body text */
}
/* Responsive Headings */
h1 { font-size: clamp(34px, 3vw, 54px); } /* Range: 32px to 64px */
h2 { font-size: clamp(26px, 4vw, 46px); } /* Range: 26px to 56px */
h3 { font-size: clamp(22px, 4vw, 40px); }    /* Range: 24px to 48px */
h4 { font-size: clamp(20px, 3.33vw, 36px); } /* Range: 20px to 40px */
h5 { font-size: clamp(18px, 3vw, 22px); }    /* Range: 18px to 36px */
h6 { font-size: clamp(16px, 2.67vw, 18px); } /* Range: 16px to 32px */

/* Responsive Body Text */
body, p, ul, ol {
  font-size: clamp(14px, 2vw, 16px); /* Range: 14px to 16px */
}
/** Vertically Center header section to allow for full height section **/
@media (min-width: 1025px) {
	.header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90vh;
}
}
@media (min-width: 981px) and (max-width: 1024px) and (max-height: 1300px) {
	.header-row {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    height: 70vh;
}
}
@media (min-width: 1024px) and (min-height: 1300px) {
	.header-row {
    height: 45vh!important;
}
}
@media (min-width: 1024px) and (min-height: 1300px) {
  .et_pb_section_0 {
height: 45vh!important;  } 
}

/*==========================
Form Styles
===========================*/

/* Fluent Forms - global submit buttons */
.fluentform .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style),
.fluentform .ff-btn.ff-btn-submit,
.fluentform .ff_submit_btn_wrapper .ff-btn-submit.wpf_has_custom_css {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    border: 2px solid #000 !important;
    border-radius: 10px !important;
    color: #152a43 !important;
    background: linear-gradient(135deg, #2692ae 0%, #91cad4 100%) !important;
    box-shadow: 3px 3px 0 #000 !important;
    transition: background-color .3s, color .3s, transform .1s !important;
    line-height: 1.2 !important;
}
.fluentform .ff_submit_btn_wrapper .ff-btn-submit:hover,
.fluentform .ff-btn.ff-btn-submit:hover {
    background: #fff !important;
    color: #152a43 !important;
}

/* Optional: small press effect */
.fluentform .ff_submit_btn_wrapper .ff-btn-submit:active,
.fluentform .ff-btn.ff-btn-submit:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 2px 2px 0 #000 !important;
}

/* Select text colour inside Fluent Forms */
.fluentform .ff-el-input--content select,
.fluentform select.ff-el-form-control {
    color: #152a43 !important;
}

/* Consent text and links */
.fluentform .ff-el-form-check .ff_t_c {
    color: #fff !important;
}
.fluentform .ff-el-form-check .ff_t_c a {
    color: #fff !important;
    text-decoration: underline;
}

/* Chat-style app buttons, generic selector */
.ff_conv_app .q-inner .o-btn-action {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    border: 2px solid #000 !important;
    border-radius: 10px !important;
    color: #152a43 !important;
    background: linear-gradient(135deg, #2692ae 0%, #91cad4 100%) !important;
    box-shadow: 3px 3px 0 #000 !important;
    transition: background-color .3s, color .3s !important;
}
.ff_conv_app .q-inner .o-btn-action:hover {
    background: #fff !important;
    color: #152a43 !important;
}


/*=============
BUTTON EFFECTS 
=============== */
.ak-dual-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin: 0;
}

.ak-btn {
  display: inline-block;
  position: relative;
  text-decoration: none !important;
  border: 2px solid #000000;
  border-radius: 5px;
  box-shadow: 3px 3px 0 0 #000000;
  padding: 12px 24px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.16em;
  transition: all 0.2s ease;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  white-space: nowrap;
}

.ak-btn:hover,
.ak-btn:focus {
  text-decoration: none !important;
}

.ak-btn:focus-visible {
  outline: 2px solid #152a43;
  outline-offset: 3px;
}

.ak-btn-primary {
  color: #ffffff !important;
  background-image: linear-gradient(135deg, #c93939 0%, #e26f66 100%);
}

.ak-btn-primary:hover,
.ak-btn-primary:focus {
  color: #152a43 !important;
  background-image: none;
  background-color: #f4c9c3;
}

.ak-btn-secondary {
  color: #152a43 !important;
  font-weight: 700;
  background-image: linear-gradient(135deg, #2692ae 0%, #91cad4 100%);
}

.ak-btn-secondary:hover,
.ak-btn-secondary:focus {
  color: #152a43 !important;
  background-image: none;
  background-color: #91cad4;
}

@media only screen and (max-width: 980px) {
  .ak-btn {
    font-size: 14px;
  }
}

@media only screen and (max-width: 767px) {
  .ak-dual-buttons {
    gap: 12px;
  }

  .ak-btn {
    padding: 8px 16px;
  }
}

@media only screen and (max-width: 479px) {
  .ak-dual-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .ak-btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ak-btn {
    transition: none;
  }
}
/*=============
IMAGE EFFECTS 
=============== */
/*Floating images */
.floating-image img {
  animation: floatingIdle 3s ease-in-out infinite;
  will-change: transform;
}

@keyframes floatingIdle {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}


/* =========
RANKMATH BREADCRUMBS
===========*/
/* Rank Math breadcrumb reset */
.rank-math-breadcrumb,
.rank-math-breadcrumb p {
  margin: 0;
  padding: 0;
}

/* Overall breadcrumb styling */
.rank-math-breadcrumb p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: #152a43;
  margin-bottom: 14px;
}

/* Links */
.rank-math-breadcrumb a {
  color: #152a43 !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
}

/* Hover */
.rank-math-breadcrumb a:hover {
  color: #152a43 !important;
  text-decoration: none !important;
  opacity: 0.8;
}

/* Current item wrapper */
.rank-math-breadcrumb .last,
.rank-math-breadcrumb .last a {
  color: #152a43 !important;
  text-decoration: none !important;
}

/* Separator */
.rank-math-breadcrumb .separator {
  display: inline-block;
  margin: 0 8px;
  color: #c93939 !important;
  font-weight: 600;
  line-height: 1;
}

/* Prevent odd inherited paragraph spacing from Divi */
.rank-math-breadcrumb p:last-child {
  margin-bottom: 14px;
}

/* Mobile */
@media (max-width: 767px) {
  .rank-math-breadcrumb p {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .rank-math-breadcrumb .separator {
    margin: 0 6px;
  }
}