/**
* Template Name: Day - v4.7.0
* Template URL: https://bootstrapmade.com/day-multipurpose-html-template-for-free/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: "Open Sans", sans-serif;
  color: #444444;
}

a {
  color: #cc1616;
  text-decoration: none;
}

a:hover {
  color: #e82d2d;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", sans-serif;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #cc1616;
  width: 40px;
  height: 40px;
  transition: all 0.4s;
}
.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}
.back-to-top:hover {
  background: #e72323;
  color: #fff;
}
.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #cc1616;
  border-top-color: #efefef;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}
/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar {
  background: #191919;
  font-size: 16px;
  height: 40px;
  padding: 0;
  color: rgba(255, 255, 255, 0.6);
}
#topbar .contact-info a {
  line-height: 0;
  color: rgba(255, 255, 255, 0.6);
  transition: 0.3s;
}
#topbar .contact-info a:hover {
  color: #fff;
}
#topbar .contact-info i {
  color: #cc1616;
  line-height: 0;
  margin-right: 5px;
}
#topbar .contact-info .phone-icon {
  margin-left: 15px;
}
#topbar .social-links a {
  color: rgba(255, 255, 255, 0.6);
  padding: 4px 12px;
  display: inline-block;
  line-height: 1px;
  transition: 0.3s;
}
#topbar .social-links a:hover {
  color: #fff;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  background: rgba(25, 25, 25, 0.95);
  transition: all 0.5s;
  z-index: 997;
  height: 70px;
}
#header.fixed-top {
  background: #191919;
}
#header .logo {
  font-size: 30px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#header .logo a {
  color: #fff;
}
#header .logo img {
  max-height: 40px;
}

.scrolled-offset {
  margin-top: 25px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}
.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}
.navbar li {
  position: relative;
}
.navbar > ul > li {
  margin-left: 5px;
}
.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 15px 24px 15px;
  font-size: 16px;
  white-space: nowrap;
  transition: 0.3s;
}

.navbar > ul > li > a {
    color: #fff !important;
}
.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  background: #cc1616;
}
.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 0;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
}
.navbar .dropdown ul li {
  min-width: 200px;
}
.navbar .dropdown ul a {
  padding: 10px 20px;
  color: #191919;
}
.navbar .dropdown ul a i {
  font-size: 12px;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #fff;
}
.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}
.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}
@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
  color: #cc1616;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
}
.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.3s;
  z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}
.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}
.navbar-mobile a, .navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 16px;
  color: #191919;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #cc1616;
  background: none;
}
.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
  margin: 15px;
}
.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
  min-width: 200px;
}
.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #cc1616;
}
.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: calc(100vh - 110px);
  background: url("../img/hero-bg.jpg") center 25%;
  background-size: cover;
  position: relative;
}
@media (max-width: 768px) {
    #hero {
        width: 100%;
        height: calc(100vh - 110px);
        background: url(../img/hero-bg.jpg) center 80%;
        background-size: 160%;
        position: relative;
        background-repeat: no-repeat;
        background-color: #000;
    }
    .navbar > ul > li > a {
    color: #000 !important;
}
}
#hero:before {
  content: "";
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
#hero h1 {
  margin: 0 0 10px 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  text-transform: uppercase;
  color: #fff;
}
#hero h2 {
  color: #eee;
  margin-bottom: 30px;
  font-size: 24px;
}
#hero .btn-get-started {
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 10px 28px;
  transition: 0.5s;
  border: 2px solid #fff;
  color: #fff;
}
#hero .btn-get-started:hover {
  background: #cc1616;
  border-color: #cc1616;
}

section#hero {
    padding-top: 70px;
    padding-left: 0;
}
@media (min-width: 1024px) {
  
}
@media (max-width: 768px) {
    section#hero {
        padding-left: 0;
    }
  #hero {
    text-align: center;
  }
  #hero .container {
    padding-top: 40px;
  }
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
  #hero h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 10px 0;
  overflow: hidden;
}

.section-title {
  text-align: center;
  padding: 30px 0;
  position: relative;
  padding-bottom: 20px;
}
.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 5px;
  padding-bottom: 0;
  color: #191919;
  position: relative;
  z-index: 2;
}
.section-title span {
  position: absolute;
  top: 30px;
  color: #f4f4f4;
  left: 0;
  right: 0;
  z-index: 1;
  font-weight: 700;
  font-size: 52px;
  text-transform: uppercase;
  line-height: 0;
}
.section-title p {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
@media (max-width: 575px) {
  .section-title h2 {
    font-size: 28px;
    margin-bottom: 15px;
  }
  .section-title span {
    font-size: 38px;
  }
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .content h3 {
  font-weight: 600;
  font-size: 26px;
}
.about .content ul {
  list-style: none;
  padding: 0;
}
.about .content ul li {
  padding-bottom: 10px;
}
.about .content ul i {
  font-size: 20px;
  padding-right: 4px;
  color: #cc1616;
}
.about .content p:last-child {
  margin-bottom: 0;
}

ul {
  list-style: none;
  padding: 0;
}

ul i {
  font-size: 20px;
  padding-right: 4px;
  color: #cc1616;
}

/*--------------------------------------------------------------
# Why Us
--------------------------------------------------------------*/
.why-us {
  padding-top: 10px;
}
.why-us .box {
  padding: 15px 20px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  transition: all ease-in-out 0.3s;
  height: 100%;
}
.why-us .box span {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #ed5b5b;
}
.why-us .box h4 {
  font-size: 24px;
  font-weight: 600;
  padding: 0;
  margin: 20px 0;
  color: #191919;
}
.why-us .box p {
  color: #aaaaaa;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.why-us .box:hover {
  background: #cc1616;
  padding: 15px 20px 15px 20px;
  box-shadow: 10px 15px 30px rgba(0, 0, 0, 0.18);
}
.why-us .box:hover span, .why-us .box:hover h4, .why-us .box:hover p {
  color: #fff;
}

/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients {
  background: #f2f2f2;
  padding: 15px 0;
  text-align: center;
}
.clients img {
  width: 50%;
  filter: grayscale(100);
  transition: all 0.4s ease-in-out;
  display: inline-block;
  padding: 15px 0;
}
.clients img:hover {
  filter: none;
  transform: scale(1.2);
}
@media (max-width: 768px) {
  .clients img {
    width: 40%;
  }
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
  text-align: center;
  padding: 40px 20px;
  transition: all ease-in-out 0.3s;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}
.services .icon-box .icon {
  margin: 0 auto;
  width: 128px;
  height: 128px;
  background: #cc1616;
  transition: all 0.3s ease-out 0s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transform-style: preserve-3d;
}
.services .icon-box .icon i {
  color: #fff;
  font-size: 28px;
}
.services .icon-box .icon::before {
  position: absolute;
  content: "";
  left: -8px;
  top: -8px;
  height: 100%;
  width: 100%;
  background: #fce5e5;
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}
.services .icon-box h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 24px;
}
.services .icon-box h4 a {
  color: #191919;
}
.services .icon-box p {
  line-height: 24px;
  font-size: 16px;
  margin-bottom: 0;
}
.services .icon-box:hover {
  background: #cc1616;
  border-color: #cc1616;
  padding: 40px 20px 40px 20px;
}
.services .icon-box:hover .icon {
  background: #fff;
}
.services .icon-box:hover .icon i {
  color: #cc1616;
}
.services .icon-box:hover .icon::before {
  background: #e82d2d;
}
.services .icon-box:hover h4 a, .services .icon-box:hover p {
  color: #fff;
}

/*--------------------------------------------------------------
# Cta
--------------------------------------------------------------*/
.cta {
  background: linear-gradient(rgba(2, 2, 2, 0.5), rgba(0, 0, 0, 0.5)), url("../img/cta-bg.jpg") fixed center center;
  background-size: cover;
  padding: 120px 0;
}
.cta h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}
.cta p {
  color: #fff;
}
.cta .cta-btn {
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px;
  transition: 0.5s;
  margin-top: 10px;
  border: 2px solid #fff;
  color: #fff;
}
.cta .cta-btn:hover {
  background: #cc1616;
  border: 2px solid #cc1616;
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 25px auto;
  list-style: none;
  text-align: center;
  border-radius: 50px;
}
.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: #444444;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
  font-family: "Poppins", sans-serif;
}
.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
  color: #e82d2d;
}
.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}
.portfolio .portfolio-item {
  margin-bottom: 30px;
}
.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
}
.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  color: #191919;
}
.portfolio .portfolio-item .portfolio-info p {
  color: #4c4c4c;
  font-size: 16px;
  margin-bottom: 0;
}
.portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 40px;
  font-size: 24px;
  top: calc(50% - 18px);
  color: #333333;
}
.portfolio .portfolio-item .portfolio-info .preview-link:hover, .portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: #cc1616;
}
.portfolio .portfolio-item .portfolio-info .details-link {
  right: 10px;
}
.portfolio .portfolio-item .portfolio-links {
  opacity: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 3;
  position: absolute;
  transition: all ease-in-out 0.3s;
}
.portfolio .portfolio-item .portfolio-links a {
  color: #fff;
  margin: 0 2px;
  font-size: 28px;
  display: inline-block;
  transition: 0.3s;
}
.portfolio .portfolio-item .portfolio-links a:hover {
  color: #e82d2d;
}
.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 20px;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
  padding-top: 40px;
}
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}
.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #cc1616;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #cc1616;
}
.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px rgba(25, 25, 25, 0.08);
}
.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 16px;
}
.portfolio-details .portfolio-info ul li + li {
  margin-top: 10px;
}
.portfolio-details .portfolio-description {
  padding-top: 30px;
}
.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}
.portfolio-details .portfolio-description p {
  padding: 0;
}

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .box {
  padding: 20px;
  background: #f9f9f9;
  text-align: center;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.pricing .box h3 {
  font-weight: 400;
  padding: 15px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  color: #191919;
}
.pricing .box h4 {
  font-size: 42px;
  color: #cc1616;
  font-weight: 500;
  font-family: "Open Sans", sans-serif;
  margin-bottom: 20px;
}
.pricing .box h4 sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}
.pricing .box h4 span {
  color: #bababa;
  font-size: 16px;
  font-weight: 300;
}
.pricing .box ul {
  padding: 0;
  list-style: none;
  color: #191919;
  text-align: center;
  line-height: 20px;
  font-size: 16px;
}
.pricing .box ul li {
  padding-bottom: 16px;
}
.pricing .box ul i {
  color: #cc1616;
  font-size: 18px;
  padding-right: 4px;
}
.pricing .box ul .na {
  color: #ccc;
  text-decoration: line-through;
}
.pricing .box .btn-wrap {
  padding: 15px;
  text-align: center;
}
.pricing .box .btn-buy {
  background: #cc1616;
  display: inline-block;
  padding: 10px 40px;
  color: #fff;
  transition: none;
  font-size: 16px;
  font-weight: 400;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  transition: 0.3s;
}
.pricing .box .btn-buy:hover {
  background: #e82d2d;
}
.pricing .featured {
  background: #cc1616;
  box-shadow: none;
  color: #fff;
}
.pricing .featured h3, .pricing .featured h4, .pricing .featured ul, .pricing .featured ul li, .pricing .featured ul .na {
  color: #fff;
}
.pricing .featured h4 span {
  color: rgba(255, 255, 255, 0.58);
}
.pricing .featured .btn-wrap {
  padding: 15px;
  text-align: center;
}
.pricing .featured .btn-buy {
  background: rgba(255, 255, 255, 0.2);
}
.pricing .featured .btn-buy:hover {
  background: #fff;
  color: #cc1616;
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team .member {
  text-align: center;
  margin-bottom: 20px;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
  padding: 30px 20px;
  background: #fff;
}
.team .member img {
  max-width: 60%;
  border-radius: 50%;
  margin: 0 0 30px 0;
}
.team .member h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
}
.team .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
}
.team .member p {
  padding-top: 10px;
  font-size: 16px;
  font-style: italic;
  color: #aaaaaa;
}
.team .member .social {
  margin-top: 15px;
}
.team .member .social a {
  color: #919191;
  transition: 0.3s;
}
.team .member .social a:hover {
  color: #cc1616;
}
.team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
  color: #444444;
  text-align: center;
  box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
  padding: 20px 0 30px 0;
}
.contact .info-box i {
  font-size: 32px;
  color: #cc1616;
  border-radius: 50%;
  padding: 8px;
  border: 2px dotted #f5a0a0;
}
.contact .info-box h3 {
  font-size: 20px;
  color: #777777;
  font-weight: 700;
  margin: 10px 0;
}
.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: 16px;
  margin-bottom: 0;
}
.contact .php-email-form {
  box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
  padding: 30px;
}
.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}
.contact .php-email-form .error-message br + br {
  margin-top: 25px;
}
.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}
.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}
.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}
.contact .php-email-form input, .contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
}
.contact .php-email-form input::focus, .contact .php-email-form textarea::focus {
  background-color: #cc1616;
}
.contact .php-email-form input {
  padding: 10px 15px;
}
.contact .php-email-form textarea {
  padding: 12px 15px;
}
.contact .php-email-form input[type=submit] {
  background: #cc1616;
  border: 0;
  padding: 10px 24px;
  color: #fff;
  transition: 0.4s;
}
.contact .php-email-form input[type=submit]:hover {
  background: #e82d2d;
}
@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  background: #efefef;
}
.breadcrumbs h2 {
  font-size: 26px;
  font-weight: 600;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 16px;
}
.breadcrumbs ol li + li {
  padding-left: 10px;
}
.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: #333333;
  content: "/";
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #0c0c0c;
  padding: 0 0 30px 0;
  color: #fff;
  font-size: 16px;
}
#footer .footer-top {
  padding: 60px 0 30px 0;
}
#footer .footer-top .footer-info {
  margin-bottom: 15px;
  background: #191919;
  color: #fff;
  border-top: 4px solid #cc1616;
  text-align: center;
  padding: 30px 15px;
}
#footer .footer-top .footer-info h3 {
  font-size: 36px;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-weight: 700;
}
#footer .footer-top .footer-info p {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Raleway", sans-serif;
}
#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #262626;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}
#footer .footer-top .social-links a:hover {
  background: #cc1616;
  color: #fff;
  text-decoration: none;
}
#footer .footer-top h4 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  position: relative;
  padding-bottom: 12px;
}
#footer .footer-top .footer-links {
  margin-bottom: 30px;
}
#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #ed5b5b;
  font-size: 18px;
  line-height: 1;
}
#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}
#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}
#footer .footer-top .footer-links ul a, #footer a {
  color: #fff;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}
#footer .footer-top .footer-links ul a:hover, #footer a:hover {
  color: #eb4444;
}
#footer .footer-top .footer-newsletter form {
  margin-top: 30px;
  background: #fff;
  padding: 6px 10px;
  position: relative;
  border-radius: 4;
}
#footer .footer-top .footer-newsletter form input[type=email] {
  border: 0;
  padding: 4px;
  width: calc(100% - 110px);
}
#footer .footer-top .footer-newsletter form input[type=submit] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px;
  background: #cc1616;
  color: #fff;
  transition: 0.3s;
  border-radius: 4;
}
#footer .footer-top .footer-newsletter form input[type=submit]:hover {
  background: #e82d2d;
}
#footer .copyright {
  border-top: 1px solid #262626;
  text-align: center;
  padding-top: 30px;
}
#footer .credits {
  padding-top: 5px;
  text-align: center;
  font-size: 13px;
  color: #fff;
}
#footer .credits a {
  color: #e82d2d;
}
.pricing {
    background-image: url(https://www.ekstromleadership.com/wp-content/uploads/2021/12/69A6942-scaled.jpg);
    padding: 500px 0 60px 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.pricing .container{
    max-width: 500px;
}
.logo span {
        display: block;
    font-size: 12px;
    margin-top: 2px;
}
@media (max-width: 575px) {
    .pricing {
        background-position: 40%;
    }
  #footer .footer-top .footer-info {
    margin: -20px 0 30px 0;
  }
  #header .logo {font-size: 22px;}
  .logo span {
    font-size: 8px;
}
}

.wp-block-button__link {
    background-color: #cc1616 !important;
}
.wp-block-button__link:hover {
    background-color: #e82d2d !important;
}

@media screen and (max-width: 768px) {
  .wp-block-cover img.wp-block-cover__image-background {
      object-fit: contain !important;
  }
}

tr td:first-child {
    white-space: nowrap;
    padding-right: 2em;
}

tr td {
    padding-bottom: 1.5em;   
}

/* Contact From 7 custom */
.wpcf7-spinner {
   vertical-align: middle;
   margin-bottom: 5px !important;
}

/* reCAPTCHA hide */
.grecaptcha-badge { 
    visibility: hidden !important;
}

/* ==========================================================================
   Ekström Leadership website update, 2026 (added below the original theme CSS)
   ========================================================================== */

/* Section heading built with blocks: group "section-title" > paragraph "section-title-bg"
   (the large faint word) + h2. Same look as the theme's span version above. */
.section-title .section-title-bg {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  color: #f4f4f4;
  font-weight: 700;
  font-size: 52px;
  text-transform: uppercase;
  line-height: 0;
}
@media (max-width: 575px) {
  .section-title .section-title-bg {
    font-size: 38px;
  }
}

/* ---------- Call-to-action band photo ----------
   Applies to every contact band (.pricing) on the site. */
/* Birgitte and Krister, cropped above the waist. Replaces 69A6942-scaled.jpg (above). */
.pricing {
  background-image: url(https://www.ekstromleadership.com/wp-content/uploads/2026/09/cta-band-birgitte-krister-wide-2560.webp);
  background-position: center 20%;
  background-color: #cdc8bc; /* photo backdrop, shows while the image loads */
}

/* Tablets and phones: "cover" on a narrow band would crop the couple to a sliver,
   so the photo sits full-width at the top and the grey box goes below it. */
@media (max-width: 991px) {
  .pricing {
    background-size: 100% auto;
    background-position: center top;
    padding-top: calc(43vw + 20px); /* wide image is 2560x1098 */
  }
}
@media (max-width: 575px) {
  .pricing {
    background-image: url(https://www.ekstromleadership.com/wp-content/uploads/2026/09/cta-band-birgitte-krister-mobile-1200.webp);
    background-position: center top;
    padding-top: calc(83vw + 20px); /* closer crop, 1200x1000 */
  }
}
/* Desktop: a lower band. The photo keeps its full height on the right and the grey box sits
   on the plain backdrop to the left (the background colour matches the photo's backdrop).
   From 1200px only: narrower screens would put the box over Birgitte, so they keep the tall band. */
@media (min-width: 1200px) {
  .pricing {
    padding: 60px 0;
    min-height: clamp(440px, 36vw, 560px);
    display: flex;
    align-items: center;
    background-size: auto 100%;
    background-position: right center;
    background-color: #c2bcac;
  }
  .pricing > * { /* the theme's group inner container is the flex item */
    width: 100%;
  }
  /* Blocks 662 and 1242 carry an inline "<style>.pricing .container { max-width: 700px !important }";
     this more specific rule wins over it */
  .pricing > .wp-block-group__inner-container > .container {
    max-width: 1140px !important;
  }
  .pricing .wp-block-column {
    flex: 0 0 420px !important;
    max-width: 420px;
  }
}

/* ---------- Hero picture: the butterfly wing ----------
   Front page hero (#hero).
   Review round 2: the picture is anchored at the bottom, so the wing's lower edge and the white below it
   stay visible and any cropping happens at the top. The text sits in the orange area at the lower left,
   with a warm glow behind it instead of the theme's 50% black. */
#hero {
  background: #fff url(https://www.ekstromleadership.com/wp-content/uploads/2026/10/hero-butterfly-wing-bottom-2560.webp) left bottom / cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* The text block sits in the lower-left orange field. Its bottom (the button) is kept at about 75% of the
     picture's height (pixel row 1070 of 1418), just above the wing's patterned edge, and follows the picture's scale:
     13.6vw when the picture is scaled to the width, 24.5% of the hero (100vh - 110px) when it is scaled to the height. */
  padding-bottom: max(13.6vw, 24.5vh - 27px);
}
#hero .container {
  margin-top: 0 !important;
}
@media (min-width: 769px) {
  #hero .container {
    /* Lined up with the header logo, but never further right than 8% of the width, so the tagline stays
       left of the black part of the wing on wide screens */
    max-width: none;
    padding-left: max(5.5vw, min((100vw - 1296px) / 2, 8vw));
  }
  #hero h1 {
    font-size: clamp(26px, 2.2vw, 36px); /* smaller than the theme's 48px, closer to the tagline (client's request) */
    line-height: 1.2;
  }
  #hero h2 {
    font-size: clamp(18px, 1.63vw, 26px);
    line-height: 1.3;
  }
}
#hero:before {
  background: radial-gradient(ellipse 45% 38% at 22% 48%, rgba(40, 20, 0, 0.5) 0%, rgba(40, 20, 0, 0.28) 55%, rgba(40, 20, 0, 0) 100%); /* behind the text only, the white stays clean; white text >= 3.7:1 */
}
#hero h1,
#hero h2 {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
  #hero {
    background: #fff url(https://www.ekstromleadership.com/wp-content/uploads/2026/10/hero-butterfly-wing-bottom-mobile-1500.webp) center bottom / cover no-repeat;
    padding-bottom: calc(20vh + 50px); /* text a little lower, still above the patterned edge */
  }
  #hero .wp-block-buttons {
    justify-content: center; /* the theme centres the hero text on phones; keep the button with it */
  }
  #hero:before {
    background: linear-gradient(0deg, rgba(40, 20, 0, 0) 0%, rgba(40, 20, 0, 0.45) 20%, rgba(40, 20, 0, 0.45) 55%, rgba(40, 20, 0, 0) 85%);
  }
}

/* Intro text: the "therapy" link stays black, underlined (client's request, round 2) */
.page-id-133 #about .content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.page-id-133 #about .content a:is(:hover, :focus) {
  color: inherit;
  text-decoration-thickness: 2px;
}

/* ---------- "Why choose" cards (front page; reused on the Traumaterapi page) ----------
   Icon above, centred heading and text on a light card. Site fonts and red, square corners. */
.why-choose {
  background: #f7f7f7;
  padding: 20px 0 60px;
}
.why-choose .section-title-bg {
  color: #ececec;
}
.why-choose .why-card {
  background: #fff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
  border-top: 3px solid #cc1616;
  padding: 35px 25px 30px;
  text-align: center;
  width: 100%;
  transition: all ease-in-out 0.3s;
}
.why-choose .why-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  transform: translateY(-4px);
}
/* The icon comes from a Bootstrap Icons class on the card (e.g. "why-card bi-heart") */
.why-choose .why-card::before {
  display: flex;
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #fce5e5;
  color: #cc1616;
  font-size: 30px;
  align-items: center;
  justify-content: center;
}
.why-choose .why-card h4 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: #191919;
  margin-bottom: 15px;
}
.why-choose .why-card p {
  font-size: 15px;
  line-height: 1.65;
  color: #555;
  margin: 0;
}
/* Traumaterapi cards (round 2): a butterfly icon on every card and less white space.
   Icon: Phosphor Icons "butterfly" (regular), Copyright (c) 2023 Phosphor Icons, MIT licence (source: assets/theme-img/icon-butterfly.svg) */
.page-traumaterapi .why-choose .why-card {
  padding: 22px 20px 20px;
}
.page-traumaterapi .why-choose .why-card::before {
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
}
.page-traumaterapi .why-choose .why-card h4 {
  margin-bottom: 8px;
}
.page-traumaterapi .why-choose .why-card.icon-butterfly::before {
  content: "";
  background: #fce5e5;
}
.page-traumaterapi .why-choose .why-card.icon-butterfly::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  width: 36px;
  height: 56px;
  transform: translateX(-50%);
  background: #cc1616;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22%23000%22%3E%3Cpath d=%22M232.7,50.48C229,45.7,221.84,40,209,40c-16.85,0-38.46,11.28-57.81,30.16A140.07,140.07,0,0,0,136,87.53V56a8,8,0,0,0-16,0V87.53a140.07,140.07,0,0,0-15.15-17.37C85.49,51.28,63.88,40,47,40,34.16,40,27,45.7,23.3,50.48c-6.82,8.77-12.18,24.08-.21,71.2,6.05,23.83,19.51,33,30.63,36.42A44,44,0,0,0,128,205.27a44,44,0,0,0,74.28-47.17c11.12-3.4,24.57-12.59,30.63-36.42C239.63,95.24,244.85,66.1,232.7,50.48ZM92,208A28.12,28.12,0,0,1,88.86,152a8,8,0,1,0-1.76-15.9A43.64,43.64,0,0,0,66.36,144c-8.43.09-22-3.57-27.76-26.26C35.72,106.39,27,71.86,35.94,60.3,37.37,58.46,40.09,56,47,56c27.27,0,73,44.88,73,71.67V180A28,28,0,0,1,92,208ZM217.4,117.74c-5.77,22.69-19.33,26.34-27.77,26.26a43.6,43.6,0,0,0-20.74-7.95,8,8,0,1,0-1.76,15.9A28.11,28.11,0,1,1,136,180V127.67C136,100.88,181.69,56,209,56c6.95,0,9.66,2.46,11.1,4.3C229.05,71.86,220.28,106.39,217.4,117.74Z%22/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22%23000%22%3E%3Cpath d=%22M232.7,50.48C229,45.7,221.84,40,209,40c-16.85,0-38.46,11.28-57.81,30.16A140.07,140.07,0,0,0,136,87.53V56a8,8,0,0,0-16,0V87.53a140.07,140.07,0,0,0-15.15-17.37C85.49,51.28,63.88,40,47,40,34.16,40,27,45.7,23.3,50.48c-6.82,8.77-12.18,24.08-.21,71.2,6.05,23.83,19.51,33,30.63,36.42A44,44,0,0,0,128,205.27a44,44,0,0,0,74.28-47.17c11.12-3.4,24.57-12.59,30.63-36.42C239.63,95.24,244.85,66.1,232.7,50.48ZM92,208A28.12,28.12,0,0,1,88.86,152a8,8,0,1,0-1.76-15.9A43.64,43.64,0,0,0,66.36,144c-8.43.09-22-3.57-27.76-26.26C35.72,106.39,27,71.86,35.94,60.3,37.37,58.46,40.09,56,47,56c27.27,0,73,44.88,73,71.67V180A28,28,0,0,1,92,208ZM217.4,117.74c-5.77,22.69-19.33,26.34-27.77,26.26a43.6,43.6,0,0,0-20.74-7.95,8,8,0,1,0-1.76,15.9A28.11,28.11,0,1,1,136,180V127.67C136,100.88,181.69,56,209,56c6.95,0,9.66,2.46,11.1,4.3C229.05,71.86,220.28,106.39,217.4,117.74Z%22/%3E%3C/svg%3E") no-repeat center / contain;
}
.page-traumaterapi .why-choose .why-card.icon-butterfly {
  position: relative;
}
/* Let the Bootstrap classes decide the widths (col-lg-3 col-md-6: 4, then 2, then 1 per row).
   WordPress columns would otherwise squeeze all 4 into one row from 782px up. */
.why-choose .wp-block-columns.row {
  flex-wrap: wrap !important;
  gap: 0;
}
.why-choose .wp-block-columns.row > .wp-block-column {
  flex: 0 0 auto !important;
  margin: 0 0 24px;
}

/* ---------- New pages: Traumaterapi (Swedish) and About Birgitte ----------
   Scoped to the outer group of each page. Theme fonts and red, square corners. */
:is(.page-traumaterapi, .page-about-birgitte) section.about {
  padding: 30px 0;
}
:is(.page-traumaterapi, .page-about-birgitte) section.about .wp-block-heading {
  font-weight: 700;
  color: #191919;
  margin-bottom: 18px;
}
:is(.page-traumaterapi, .page-about-birgitte) h3.wp-block-heading {
  font-size: 26px;
}
:is(.page-traumaterapi, .page-about-birgitte) section.about h4.wp-block-heading {
  font-size: 20px;
}
:is(.page-traumaterapi, .page-about-birgitte) .wp-block-image img {
  width: 100%;
  height: auto;
}
/* Tablets: column photos go full width; limit their width instead of cropping,
   so every photo keeps the framing from the client's documents */
@media (min-width: 576px) and (max-width: 991px) {
  :is(.page-traumaterapi, .page-about-birgitte) .wp-block-column > .wp-block-image {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}
:is(.page-traumaterapi, .page-about-birgitte) .wp-block-button__link {
  border-radius: 0;
  padding: 12px 28px;
}
.page-about-birgitte .page-subtitle {
  color: #555;
  margin: -10px 0 20px;
}

/* Lists with the red check icon (like About Krister), drawn with CSS so editing can't drop the icon */
:is(.page-traumaterapi, .page-about-birgitte) ul.check-list {
  list-style: none;
  padding-left: 0;
}
:is(.page-traumaterapi, .page-about-birgitte) ul.check-list li {
  position: relative;
  padding: 0 0 10px 30px;
}
:is(.page-traumaterapi, .page-about-birgitte) ul.check-list li::before {
  font-family: bootstrap-icons;
  content: "\f26b"; /* bi-check-circle */
  position: absolute;
  left: 0;
  top: 1px;
  color: #cc1616;
  font-size: 19px;
  line-height: 1.2;
}

/* Plain lists (discounts, FAQ links, testimonial points): the theme removes the bullets, bring them back */
:is(.page-traumaterapi, .page-about-birgitte) ul.wp-block-list:not(.check-list):not(.term-list):not(.method-list):not(.cue-list) {
  list-style: disc;
  padding-left: 22px;
}

/* Bold term + text lists (methods, session parts, investment points) */
.page-traumaterapi ul:is(.term-list, .method-list) {
  padding-left: 0;
  list-style: none;
}
.page-traumaterapi ul:is(.term-list, .method-list) li {
  position: relative;
  padding: 2px 0 2px 32px;
  margin-bottom: 12px;
}
.page-traumaterapi ul:is(.term-list, .method-list) li::before {
  font-family: bootstrap-icons;
  content: "\f3cd"; /* bi-flower1 */
  position: absolute;
  left: 0;
  top: 2px;
  color: #cc1616;
  font-size: 18px;
  line-height: 1.3;
}

/* Light boxes: "Hur trauma kan påverka oss" and the About boxes */
:is(.page-traumaterapi, .page-about-birgitte) .soft-box {
  background: #f7f7f7;
  padding: 30px;
  width: 100%;
}
:is(.page-traumaterapi, .page-about-birgitte) .cue-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
/* "Hur trauma kan påverka oss" (and the About Birgitte values): warm tint, black questions with a red heart */
:is(.page-traumaterapi, .page-about-birgitte) .soft-box:has(.cue-list) {
  background: #fbf0e8;
  border-top: 4px solid #cc1616;
}
:is(.page-traumaterapi, .page-about-birgitte) .soft-box .cue-list li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid #efd9ca;
  color: #555;
}
:is(.page-traumaterapi, .page-about-birgitte) .soft-box .cue-list li::before {
  font-family: bootstrap-icons;
  content: "\f417"; /* bi-heart */
  position: absolute;
  left: 0;
  top: 13px;
  color: #cc1616;
  font-size: 17px;
}
:is(.page-traumaterapi, .page-about-birgitte) .cue-list li:last-child {
  border-bottom: 0;
}
/* About Birgitte: the box sits in the narrow mission column, so less padding */
.page-about-birgitte .soft-box:has(.cue-list) {
  padding: 20px 22px;
}
:is(.page-traumaterapi, .page-about-birgitte) .cue-list strong {
  color: #222;
}

/* "Varför välja Birgitte Ekström?" logo above the cards */
.page-traumaterapi .why-logo {
  max-width: 280px;
  margin: 0 auto 30px;
}

/* Testimonials: a slider (assets/js/testimonial-slider.js); each quote is clamped with "Läs mer" */
.page-traumaterapi .testimonial-row {
  margin-bottom: 40px;
  align-items: flex-start;
}
.page-traumaterapi .testimonial-slider.swiper {
  padding: 0 50px 50px;
}
.page-traumaterapi .testimonial-slider .testimonial-row {
  margin-bottom: 0;
}
/* The side padding (room for the arrows) would show the neighbouring slides: fade them out */
.page-traumaterapi .testimonial-slider .swiper-slide {
  opacity: 0;
  visibility: hidden; /* also keeps their buttons out of the keyboard tab order */
  transition: opacity 0.3s, visibility 0.3s;
}
.page-traumaterapi .testimonial-slider .swiper-slide-active {
  opacity: 1;
  visibility: visible;
}
/* Keep the photo about as tall as the clamped quote */
.page-traumaterapi .testimonial-slider .testimonial-photo img {
  aspect-ratio: 4 / 5;
  max-height: 360px;
  object-fit: cover;
}
.page-traumaterapi .testimonial-slider .swiper-button-prev,
.page-traumaterapi .testimonial-slider .swiper-button-next {
  color: #cc1616;
  border: 0;
  background: none;
  top: 40%;
}
.page-traumaterapi .testimonial-slider .swiper-button-prev::after,
.page-traumaterapi .testimonial-slider .swiper-button-next::after {
  font-size: 28px;
}
.page-traumaterapi .testimonial-slider .swiper-button-prev { left: 0; }
.page-traumaterapi .testimonial-slider .swiper-button-next { right: 0; }
.page-traumaterapi .testimonial-slider .swiper-pagination-bullet-active {
  background: #cc1616;
}
.page-traumaterapi .testimonial.is-clamped {
  max-height: 18em; /* the title and the first lines (round 2: 3-4 lines more) */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}
@media (max-width: 767px) {
  /* Narrow column: the title wraps, so allow more height to show about as much text as on desktop */
  .page-traumaterapi .testimonial.is-clamped {
    max-height: 26em;
  }
}
.page-traumaterapi .testimonial-toggle {
  display: inline-block;
  margin-top: 10px;
  font-size: 15px;
  padding: 0;
  border: 0;
  background: none;
  color: #cc1616;
  font-weight: 600;
  text-decoration: underline;
}
@media (max-width: 575px) {
  .page-traumaterapi .testimonial-slider.swiper {
    padding: 0 0 50px;
  }
  .page-traumaterapi .testimonial-slider .swiper-button-prev,
  .page-traumaterapi .testimonial-slider .swiper-button-next {
    display: none;
  }
}
.page-traumaterapi .testimonial {
  background: #f7f7f7;
  border-left: 3px solid #cc1616;
  padding: 30px;
}
.page-traumaterapi .testimonial .quote-title {
  font-size: 19px;
  color: #191919;
}
.page-traumaterapi .testimonial .signature {
  margin-bottom: 0;
}

/* Praktisk information box */
.page-traumaterapi .info-box {
  max-width: 820px;
  margin: 0 auto;
}
.page-traumaterapi .info-box p {
  margin-bottom: 10px;
}
.page-traumaterapi .info-box .wp-block-buttons {
  margin: 25px 0 0;
}

/* Boxes with rounded corners and a clear red line (client's request, round 1):
   the disclaimer under the methods and "Praktisk information" */
.page-traumaterapi .red-outline-box {
  border: 2px solid #cc1616;
  border-radius: 12px;
  background: #fff;
  padding: 25px 30px;
  margin-top: 20px;
}
.page-traumaterapi .red-outline-box p:last-child {
  margin-bottom: 0;
}

/* Booking / contact text in a box like the front-page contact band */
:is(.page-traumaterapi, .page-about-birgitte) .cta-box {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 35px 30px;
  text-align: center;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}
:is(.page-traumaterapi, .page-about-birgitte) .cta-box .wp-block-buttons {
  justify-content: center;
}
:is(.page-traumaterapi, .page-about-birgitte) .wp-block-column:has(> .cta-box) {
  align-self: center;
}

.page-traumaterapi ul.faq-list {
  margin-bottom: 25px;
}
.page-traumaterapi .screenshot img {
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.12);
}

/* Full-width divider photos and the photo that closes each page */
:is(.page-traumaterapi, .page-about-birgitte) .divider-image {
  margin: 30px 0;
}
:is(.page-traumaterapi, .page-about-birgitte) .divider-image img {
  width: 100%;
  height: clamp(200px, 30vw, 460px);
  object-fit: cover;
  display: block;
}
:is(.page-traumaterapi, .page-about-birgitte) .page-end-image {
  margin-bottom: 0;
}

/* About Birgitte: badges */
.page-about-birgitte .badges-row img {
  max-width: 160px;
  max-height: 160px;
  width: auto;
}

/* Bootstrap widths for these rows (WordPress columns would otherwise squeeze them from 782px up) */
:is(.page-traumaterapi, .page-about-birgitte) .wp-block-columns.row {
  flex-wrap: wrap !important;
  gap: 0;
}
:is(.page-traumaterapi, .page-about-birgitte) .wp-block-columns.row > .wp-block-column {
  flex: 0 0 auto !important;
}
@media (max-width: 991px) {
  :is(.page-traumaterapi, .page-about-birgitte) .wp-block-columns.row > .wp-block-column {
    margin-bottom: 20px;
  }
}

/* ---------- Blocks that replace Custom HTML blocks ---------- */

/* The Button block puts its class on the wrapper div; the theme's .btn-get-started / .btn-buy rules
   above would style that wrapper too, so reset it and style only the link inside. */
#hero .wp-block-button.btn-get-started,
#hero .wp-block-button.btn-get-started:hover,
.pricing .box .wp-block-button.btn-buy,
.pricing .box .wp-block-button.btn-buy:hover {
  padding: 0;
  border: 0;
  background: none;
}

/* Hero "Let's Talk" as a Button block (class "btn-get-started"); same look as the theme's link button */
#hero .wp-block-button.btn-get-started .wp-block-button__link {
  background: transparent !important;
  border: 2px solid #fff;
  border-radius: 0;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 10px 28px;
  transition: 0.5s;
}
#hero .wp-block-button.btn-get-started .wp-block-button__link:hover {
  background: #cc1616 !important;
  border-color: #cc1616;
}

/* Contact band "Contact us here" as a Button block (class "btn-buy") */
.pricing .box .wp-block-buttons {
  justify-content: center;
}
.pricing .box .wp-block-button.btn-buy .wp-block-button__link {
  border-radius: 0;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 40px;
  transition: 0.3s;
}

/* Footer link lists as List blocks (class "footer-link-list"): the chevron is drawn here */
#footer .footer-top .footer-links ul.footer-link-list li::before {
  font-family: boxicons;
  content: "\ecb3"; /* bx-chevron-right */
  padding-right: 2px;
  color: #ed5b5b;
  font-size: 18px;
  line-height: 1;
}

/* Footer LinkedIn as a Social Icons block (class "footer-social"): round dark button like before */
#footer .footer-top .wp-block-social-links.footer-social {
  justify-content: center;
  margin: 16px 0 0;
  gap: 4px;
}
#footer .footer-top .wp-block-social-links.footer-social .wp-social-link {
  background: #262626;
  color: #fff;
  border-radius: 50%;
  transition: 0.3s;
}
#footer .footer-top .wp-block-social-links.footer-social .wp-social-link:hover {
  background: #cc1616;
}
#footer .footer-top .wp-block-social-links.footer-social .wp-social-link a {
  padding: 9px;
}
#footer .footer-top .wp-block-social-links.footer-social svg {
  width: 18px;
  height: 18px;
}

/* "What drives us?" read more (assets/js/read-more.js adds the toggle button) */
.read-more-toggle {
  display: none;
}
@media (min-width: 599px) {
  .why-us .read-more-target {
    display: -webkit-box;
    max-height: 147px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    transition: 0.25s ease;
  }
  .why-us .read-more-open .read-more-target {
    display: block;
    max-height: none;
  }
  .read-more-toggle {
    display: block;
    width: 100%;
    padding: 10px 0;
    border: 0;
    background: none;
    color: #000;
    font-size: 11px;
    text-align: center;
    cursor: pointer;
  }
}