/* Freelancer - Technology and It Solutions Website Template */


/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  --font-default: 'Poppins', sans-serif;
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Poppins', sans-serif;
  --font-heading: 'Comfortaa', cursive;
}

:root {
  --color-default: #222222;
  --color-primary: #fdc401;
  --color-secondary: #222222;
  /* Darker orange for text on light backgrounds: the brand yellow is only
     1.6:1 on white. This passes WCAG AA (5.6:1 on white, 5:1 on #f3f3f3). */
  --color-link: #a35200;
  --color-link-hover: #7a3d00;
}

:root {
  scroll-behavior: smooth;
}

:root {
  --color-white: #ffffff;
  --color-light: #f1f5f9;
  --color-black: #121212;
  --color-night: #001632;
  --color-red: #f44336;
  --color-blue: #1a73e8;
  --color-gray: #80868b;
  --color-grayish: #dadce0;
  --shadow-normal: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

body {
  font-family: var(--font-default);
  color: var(--color-default);
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
}

dl,
ol,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.text-right {
  text-align: right !important;
}

.text-left {
  text-align: left !important;
}

.mt-20{
  margin-top: 20px;
}
.border-left{
  border-left: 2px solid #000;
}
.mr-15{
  margin-right: 15px;
}
/*--------------------------------------------------------------
# Sections & Section Header
--------------------------------------------------------------*/
section {
  padding: 90px 0;
  overflow: hidden;
}

.section {
  padding: 90px 0;
  overflow: hidden;
}

.sections-bg {
  background: url(../images/cta-bg.jpg) center center;
  background-size: cover;
  padding: 150px 0px;
  border-radius: 0px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.sections-bg h2,
.sections-bg p,
.sections-bg a,
.sections-bg i,
.sections-bg span,
.sections-bg h4 {
  color: #222222 !important;
}

.section-header {
  text-align: center;
  padding-bottom: 60px;
}

.section-header h2 {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  color: var(--color-default);
}

.section-header p {
  margin-bottom: 0;
  color: #5f5f5f;
}

.fill-btn{
  background: var(--color-secondary);
    border: 0;
    padding: 14px 45px;
    color: #fff;
    transition: 0.4s;
    border-radius: 50px;
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs .page-header {
  padding: 60px 0 60px 0;
  min-height: 20vh;
  position: relative;
  background-color: var(--color-primary);
}

.breadcrumbs .page-header h2 {
  font-size: 56px;
  font-weight: 500;
  color: #fff;
  font-family: var(--font-secondary);
}
.breadcrumbs .page-header h3 {
  font-size: 45px;
  font-weight: 300;
  color: #fff;
  font-family: var(--font-secondary);
}

.breadcrumbs .page-header p {
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumbs nav {
  background-color: #f6f6f6;
  padding: 20px 0;
}

.breadcrumbs nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-default);
}

.breadcrumbs nav ol a {
  color: var(--color-primary);
  transition: 0.3s;
}

.breadcrumbs nav ol a:hover {
  text-decoration: underline;
}

.breadcrumbs nav ol li+li {
  padding-left: 10px;
}

.breadcrumbs nav ol li+li::before {
  display: inline-block;
  padding-right: 10px;
  color: var(--color-secondary);
  content: "/";
}

/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background: var(--color-secondary);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.scroll-top:hover {
  background: rgba(248, 90, 64, 0.8);
  color: #fff;
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: #fff;
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 2px solid #fff;
  border-color: var(--color-primary) transparent var(--color-primary) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1.5s linear infinite;
  animation: animate-preloader 1.5s 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;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.topbar {
  height: 70px;
  font-size: 14px;
  transition: all 0.5s;
  color: #fff;
  padding: 0;
  background: #fdc401;
}

.topbar .contact-info i {
  font-style: normal;
  color: #ffffff;
  line-height: 0;
  margin-right: 20px;
}

.topbar .contact-info i a,
.topbar .contact-info i span {
  padding-left: 5px;
  color: #000000;
}

@media (max-width: 575px) {

  .topbar .contact-info i a,
  .topbar .contact-info i span {
    font-size: 13px;
  }
}

@media (max-width: 787px) {
  .topbar {
    display: none !important;
  }
}

.topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}

.topbar .contact-info i a:hover {
  color: #414141;
  text-decoration: underline;
}

.topbar .social-links a {
  color: #1d1d1d;
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

.topbar .social-links a:hover {
  color: #414141;
}

.header {
  transition: all 0.5s;
  z-index: 997;
  height: 79px;
  background: #1d1d1d;
}

.header.sticked {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 80px;
  box-shadow: 0 0 29px 0 rgb(0 0 0 / 5%);
}

.header .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #fdc401;
  font-family: var(--font-primary);
}

.header .logo h1 span {
  color: #ffffff;
}

.sticked-header-offset {
  /* Stops the page jumping up under the header when it becomes fixed */
  margin-top: 79px;
}

section {
  scroll-margin-top: 70px;
}

/*--------------------------------------------------------------
# Desktop Navigation
--------------------------------------------------------------*/
@media (min-width: 1280px) {
  .navbar {
    padding: 14px;
    height: 79px;
  }
  /*.navbar:before{
    content: '';
    width: 0;
    height: 0;
    border-top: 79px solid transparent;
    border-right: 42px solid #fdc401;
    top: 0;
    left: -42px;
    position: absolute;
  }
  .navbar:after{
    content: '';
    width: 0;
    height: 0;
    border-top: 79px solid #fdc401;
    border-right: 42px solid transparent;
    top: 0;
    right: -42px;
    position: absolute;
  }*/

  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navbar li {
    position: relative;
  }

  .navbar>ul>li {
    white-space: nowrap;
    padding: 10px 15px 10px 15px;
  }
 
  .navbar a,
  .navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3px;
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navbar a i,
  .navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
  }

  .navbar>ul>li>a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: #ffffff;
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navbar a:hover:before,
  .navbar li:hover>a:before,
  .navbar .active:before {
    visibility: visible;
    width: 100%;
  }

  .navbar a:hover,
  .navbar .active,
  .navbar .active:focus,
  .navbar li:hover>a {
    color: #ffffff;
  }

  .navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 15px;
    top: calc(100% + 30px);
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #1d1d1d;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
    border-radius: 0px;
  }

  .navbar .dropdown ul li {
    min-width: 270px;
  }

  .navbar .dropdown ul a {
    padding: 12px 20px;
    font-size: 15px;
    text-transform: none;
    font-weight: 400;
    color: #fdc401;
  }

  .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: #ffffff;
    background: #fdc401;
  }

  .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 (min-width: 1280px) and (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}

@media (min-width: 1280px) {

  .mobile-nav-show,
  .mobile-nav-hide {
    display: none;
  }
}

/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/
@media (max-width: 1279px) {
  .navbar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 400px;
    bottom: 0;
    transition: 0.3s;
    z-index: 9997;
  }

  .navbar ul {
    position: absolute;
    inset: 0;
    padding: 50px 0 10px 0;
    margin: 0;
    background: #fdc401;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navbar a,
  .navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    color: rgb(255 255 255);
    white-space: nowrap;
    transition: 0.3s;
  }

  .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 {
    color: #fff;
  }

  .navbar .getstarted,
  .navbar .getstarted:focus {
    background: var(--color-primary);
    padding: 8px 20px;
    border-radius: 4px;
    margin: 15px;
    color: #fff;
  }

  .navbar .getstarted:hover,
  .navbar .getstarted:focus:hover {
    color: #fff;
    background: rgba(0, 131, 116, 0.8);
  }

  .navbar .dropdown ul,
  .navbar .dropdown .dropdown ul {
    position: static;
    display: none;
    padding: 10px 0;
    margin: 10px 20px;
    transition: all 0.5s ease-in-out;
    background-color: #fdc401;
  }

  .navbar .dropdown>.dropdown-active,
  .navbar .dropdown .dropdown>.dropdown-active {
    display: block;
  }

  .mobile-nav-show {
    color: #da4251;
    font-size: 28px;
    cursor: pointer;
    line-height: 0;
    transition: 0.5s;
    z-index: 9999;
    margin-right: 10px;
  }

  .mobile-nav-hide {
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    line-height: 0;
    transition: 0.5s;
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 9999;
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .navbar {
    right: 0;
  }

  .mobile-nav-active .navbar:before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 80%);
    z-index: 9996;
  }
}

/*--------------------------------------------------------------
# Login Register Section
--------------------------------------------------------------*/

.login {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: var(--color-black);
}

.login a,
.login button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  text-decoration: none;
}

.login img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.login .container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 80rem;
  min-height: 100vh;
  width: 100%;
  padding: 0 2rem;
  margin: 0 auto;
}

.login .fa-apple {
  font-size: 1.65rem;
  line-height: inherit;
  margin-right: 0.5rem;
  color: var(--color-black);
}
.login .fa-google {
  font-size: 1.65rem;
  line-height: inherit;
  margin-right: 0.5rem;
  color: var(--color-red);
}
.login .fa-facebook {
  font-size: 1.65rem;
  line-height: inherit;
  margin-right: 0.5rem;
  color: var(--color-blue);
}

.login .text {
  font-family: inherit;
  line-height: inherit;
  text-transform: unset;
  text-rendering: optimizeLegibility;
}
.login .text-large {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-black);
}
.login .text-normal {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-black);
}
.login .text-links {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-primary);
}
.login .text-links:hover {
  text-decoration: underline;
}

.login .wrapper {
  max-width: 28rem;
  width: 100%;
  margin: 2rem auto;
  padding: 2rem 2.5rem;
  border: none;
  outline: none;
  border-radius: 0.25rem;
  color: var(--color-black);
  background: var(--color-white);
  box-shadow: var(--shadow-large);
}
.login .wrapper .form {
  width: 100%;
  height: auto;
  margin-top: 2rem;
}
.login .wrapper .form .input-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.login .wrapper .form .input-field {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: inherit;
  width: 100%;
  height: auto;
  padding: 0.75rem 1.25rem;
  border: none;
  outline: none;
  border-radius: 2rem;
  color: var(--color-black);
  background: var(--color-light);
  text-transform: unset;
  text-rendering: optimizeLegibility;
}
.login .wrapper .form .input-submit {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: inherit;
  cursor: pointer;
  min-width: 40%;
  height: auto;
  padding: 0.65rem 1.25rem;
  border: none;
  outline: none;
  border-radius: 2rem;
  color: var(--color-white);
  background: var(--color-primary);
  box-shadow: var(--shadow-medium);
  text-transform: capitalize;
  text-rendering: optimizeLegibility;
}
.login .wrapper .striped {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
}
.login .wrapper .striped-line {
  flex: auto;
  flex-basis: auto;
  border: none;
  outline: none;
  height: 2px;
  background: var(--color-grayish);
}
.login .wrapper .striped-text {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: inherit;
  color: var(--color-black);
  margin: 0 1rem;
}
.login .wrapper .method-control {
  margin-bottom: 1rem;
}
.login .wrapper .method-action {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 0.35rem 1.25rem;
  outline: none;
  border: 2px solid var(--color-grayish);
  border-radius: 2rem;
  color: var(--color-black);
  background: var(--color-white);
  text-transform: capitalize;
  text-rendering: optimizeLegibility;
  transition: all 0.35s ease;
}
.login .wrapper .method-action:hover {
  background: var(--color-light);
}

/*--------------------------------------------------------------
# About Us Section
--------------------------------------------------------------*/
.about h3 {
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 20px;
  font-family: var(--font-secondary);
}

.about .call-us {
  left: 10%;
  right: 10%;
  bottom: 0;
  background-color: #fff;
  box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.08);
  padding: 20px;
  text-align: center;
}

.about .call-us h4 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 5px;
}

.about .call-us p {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding: 15px 21px 15px 20px;
  position: relative;
  color: rgb(19 20 20 / 80%);
  background: #f3f3f3;
  margin-bottom: 5px;
  border-radius: 8px;
}
.about .content ul li:hover {
  color: #ffffff;
  background: var(--color-primary);
  cursor: pointer;
}
.about .content ul li:hover i{
  color: #ffffff;
}
.about .content ul i {
  color: var(--color-primary);
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--color-primary) 50%, rgba(0, 131, 116, 0.4) 52%);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
  overflow: hidden;
}

.about .play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: pulsate-btn 2s;
  animation: pulsate-btn 2s;
  -webkit-animation-direction: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(0, 131, 116, 0.7);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.about .play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.about .play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  -webkit-animation: none;
  animation: none;
  border-radius: 0;
}

.about .play-btn:hover:after {
  border-left: 15px solid var(--color-primary);
  transform: scale(20);
}

@-webkit-keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

@keyframes load {
  from {
    width: 0%
  }
}

@-webkit-keyframes load {
  from {
    width: 0%
  }
}

@-moz-keyframes load {
  from {
    width: 0%
  }
}

@-o-keyframes load {
  from {
    width: 0%
  }
}

.bar {
  background-color: rgb(220 220 220 / 18%);
  padding: 1px;
  border-radius: 15px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #ffffff;
}

.bar::before {
  content: attr(data-skill);
  background-color: #fdc401;
  display: inline-block;
  padding: 5px 0 5px 10px;
  border-radius: inherit;
  animation: load 2s 0s;
  -webkit-animation: load 2s 0s;
  -moz-animation: load 2s 0s;
  -o-animation: load 2s 0s;
}

.bar.front::before {
  background-color: #fdc401;
}

.bar.back::before {
  background-color: #fdc401;
}

.bar.learning::before {
  width: calc(20% - 10px);
}

.bar.basic::before {
  width: calc(40% - 10px);
}

.bar.intermediate::before {
  width: calc(60% - 10px);
}

.bar.advanced::before {
  width: calc(80% - 10px);
}

.bar.expert::before {
  width: calc(100% - 10px);
}


/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding: 40px 0;
}

.clients .swiper {
  padding: 10px 0;
}

.clients .swiper-slide img {
  transition: 0.3s;
}

.clients .swiper-slide img:hover {
  transform: scale(1.1);
}

.clients .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  background-color: #ddd;
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
}


/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  background: linear-gradient(rgb(253 196 1 / 80%), rgb(253 196 1 / 80%)), url(../images/cta-bg.jpg) center center;
  background-size: cover;
  padding: 150px 60px;
  border-radius: 0px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.call-to-action h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.call-to-action p {
  color: #fff;
  margin-bottom: 20px;
}

.call-to-action .play-btn {
  width: 94px;
  height: 94px;
  margin-bottom: 20px;
  background: radial-gradient(var(--color-primary) 50%, rgba(0, 131, 116, 0.4) 52%);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.call-to-action .play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: pulsate-btn 2s;
  animation: pulsate-btn 2s;
  -webkit-animation-direction: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(0, 131, 116, 0.7);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.call-to-action .play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.call-to-action .play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  -webkit-animation: none;
  animation: none;
  border-radius: 0;
}

.call-to-action .play-btn:hover:after {
  border-left: 15px solid var(--color-primary);
  transform: scale(20);
}

.call-to-action .cta-btn {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 48px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid #fff;
  color: #fff;
}

.call-to-action .cta-btn:hover {
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}


/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-wrap {
  padding-left: 10px;
}

.testimonials .testimonial-item {
  box-sizing: content-box;
  padding: 0 40px;
  margin: 30px 10px 60px;
  position: relative;
  background: #fff;
  /* border-radius: 100%; */
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  text-align: center;
}

.testimonials .testimonial-item .info-box {
  min-width: 276px;
  flex-direction: column;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  margin-right: 15px;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #000;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #6b6b6b;
  margin: 0;
}

.testimonials .testimonial-item .stars {
  margin: 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: #f7c633;
  margin: 0 10px;
  font-size: 40px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: #fdc401;
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 15px auto 15px auto;
  font-size: 20px;
  line-height: 1.6;
  max-width: 760px;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
}

@media (max-width: 767px) {
  .testimonials .testimonial-wrap {
    padding-left: 0;
  }

  .testimonials .testimonial-item {
    padding: 30px 0;
    margin: 15px 0 30px;
    flex-direction: column;
  }

  .testimonials .testimonial-item p {
    font-size: 18px;
  }

  .testimonials .testimonial-item .info-box {
    min-width: 0;
  }

  .testimonials .testimonial-item .testimonial-img {
    position: static;
    left: auto;
  }
  .mb-50{
    margin-bottom: 50px;
  }
}


/*--------------------------------------------------------------
# Our Team Section
--------------------------------------------------------------*/
.team .member {
  text-align: center;
  border-radius: 0px;
  padding: 15px;
  overflow: hidden;
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(5px);
}

.team .member img {
  border-radius: 20px;
  overflow: hidden;
}

.team .member .member-content {
  padding: 0 20px 30px 20px;
}

.team .member h4 {
  font-weight: 700;
  margin-top: 16px;
  margin-bottom: 2px;
  font-size: 20px;
  color: #1d1d1d;
}
.team .member span{
  color: #757575;
}

.team .member span {
  font-style: italic;
  display: block;
  font-size: 14px;
}

.team .member p {
  padding-top: 10px;
  font-size: 14px;
  font-style: italic;
  color: #6c757d;
}

.team .member .social {
  margin-top: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.team .member .social a {
  color: #a2a2a2;
  transition: 0.3s;
  border-radius: 4px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team .member .social a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.team .member .social i {
  font-size: 14px;
  margin: 0 2px;
}
.single-page .team h4, 
.single-page .team span{
  color: #000000;
}


/*--------------------------------------------------------------
# Frequently Asked Questions Section
--------------------------------------------------------------*/
.faq .content h3 {
  font-weight: 400;
  font-size: 34px;
}

.faq .content h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 5px;
}

.faq .content p {
  font-size: 15px;
  color: #6c757d;
}

.faq .accordion-item {
  border: 0;
  margin-bottom: 20px;
  box-shadow: 0 0 8px 2px rgb(170 170 170 / 33%);
  border-radius: 0;
}

.faq .accordion-item:last-child {
  margin-bottom: 0;
}

.faq .accordion-collapse {
  border: 0;
}

.faq .accordion-button {
  padding: 20px 50px 20px 20px;
  font-weight: 600;
  border: 0;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-default);
  text-align: left;
  background: #fff;
  box-shadow: none;
  border-radius: 10px;
}

.faq .accordion-button .num {
  padding-right: 10px;
  font-size: 30px;
  line-height: 0;
  color: var(--color-primary);
}

.faq .accordion-button:not(.collapsed) {
  color: var(--color-primary);
  border-bottom: 0;
  box-shadow: none;
}

.faq .accordion-button:after {
  position: absolute;
  right: 20px;
  top: 20px;
}

.faq .accordion-body {
  padding: 0 40px 30px 45px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

/*--------------------------------------------------------------
# Single Page Section
--------------------------------------------------------------*/
.single-page ul li{
  padding: 15px 21px 15px 20px;
  position: relative;
  color: rgb(19 20 20 / 80%);
  background: #f3f3f3;
  margin-bottom: 5px;
  border-radius: 8px;
}


/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/

.pricing-table {
  text-align: center;
  padding: 38px 0 40px;
  transition: 0.3s ease-in;
  position: relative;
  z-index: 0;
  background-color: #1d1d1d;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 30px;
}
.pricing-table.bg-orange {
  background-color: #fdc401;
}
.pricing-table .price-header .title {
  color: #fff;
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 32px;
}
.pricing-table .price-header .icon {
  font-size: 60px;
  line-height: 60px;
  margin-bottom: 30px;
  color: #197beb;
  transition: 0.3s ease-in;
}
.pricing-table .price-header .price {
  font-size: 62px;
  line-height: 60px;
  color: #282828;
  font-weight: 800;
  margin-bottom: 25px;
  transition: 0.3s ease-in;
  text-align: left;
  padding-left: 40px;
  position: relative;
  padding: 20px 0 20px 60px;
  z-index: 0;
}
.pricing-table .price-header .price:after {
  position: absolute;
  left: -20%;
  top: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 25px;
  content: "";
  height: 100%;
  transform: skewX(-35deg);
  z-index: -1;
}
.pricing-table .price-header .price .dollar {
  font-size: 33px;
  line-height: 33px;
  position: relative;
  top: -12px;
}
.pricing-table .price-header .price .month {
  font-size: 22px;
  line-height: 23px;
}
.pricing-table .price-footer {
  margin-top: 40px;
}
.pricing-table .price-footer .order-btn {
  display: inline-block;
  width: 165px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 25px;
  color: #282828;
  transition: 0.5s ease-in;
  font-weight: 600;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}
.pricing-table .price-footer .order-btn:hover {
  box-shadow: 0 0 21px 0 rgba(0, 0, 0, 0.35);
  background-color: #333;
  color: #fff;
}
.pricing-table .price-body ul {
  margin: 0;
  padding: 0;
}
.pricing-table .price-body ul li {
  list-style: none;
  display: block;
  color: #ffffff;
  background: transparent!important;
  padding: 0;
  margin: 27px 0;
  transition: 0.3s ease-in;
}
.pricing-table .price-body ul li:first-child {
  margin-top: 0;
}
.pricing-table .price-body ul li:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Recent Blog Posts Section
--------------------------------------------------------------*/
.recent-posts article {
  height: 100%;
  overflow: hidden;
  text-align: left;
  justify-content: center;
  align-items: flex-start;
  padding: 15px;
  overflow: hidden;
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(5px);
}

.single-page .recent-posts article{
  background-color: transparent;
}

.recent-posts .post-img {
  max-height: 290px;
  border-radius: 20px;
  overflow: hidden;
}

.recent-posts .post-category {
  font-size: 16px;
  color: #000000;
  margin-bottom: 10px;
  margin-top: 10px;
}

.recent-posts .title {
  font-size: 22px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.recent-posts .title a {
  color: #000000 !important;
  transition: 0.3s;
}

.recent-posts .title a:hover {
  color: var(--color-primary);
}

.recent-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.recent-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}

.details-post-data .post-sperator {
  width: 60px;
  text-align: center;
  color: #fdc401;
}

.recent-posts .post-date {
  font-size: 14px;
  color: #3c3c3c;
  margin-bottom: 0;
}


/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-flters {
  padding: 0 0 40px 0;
  margin: 0 auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  margin: 0 10px;
  line-height: 1;
  transition: all 0.3s ease-in-out;
  padding: 15px 25px;
  background: #f3f3f3;
  border-radius: 2px;
  margin-bottom: 20px;
}

.portfolio .portfolio-flters li:hover,
.portfolio .portfolio-flters li.filter-active {
  color: #fdc401;
}

.portfolio .portfolio-flters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-flters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-flters li {
    font-size: 14px;
  }
}

.portfolio .portfolio-wrap {
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.portfolio .portfolio-wrap img {
  transition: 0.3s;
  position: relative;
  z-index: 1;
}

.portfolio .portfolio-wrap .portfolio-info {
  padding: 25px 20px;
  position: absolute;
  z-index: 2;
  bottom: -1px;
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(5px);
  background: #fdc401d1;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
  margin-bottom: 20px;
}

.portfolio .portfolio-wrap .portfolio-info h4 a {
  color: var(--color-default);
  transition: 0.3s;
}

.portfolio .portfolio-wrap .portfolio-info h4 a:hover {
  color: var(--color-primary);
}

.portfolio .portfolio-wrap .portfolio-info p {
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-wrap .portfolio-info .portfolio-details {
  margin-bottom: 20px;
}

.portfolio .portfolio-wrap:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.7);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
}

.portfolio-details .swiper-button-prev,
.portfolio-details .swiper-button-next {
  width: 48px;
  height: 48px;
}

.portfolio-details .swiper-button-prev:after,
.portfolio-details .swiper-button-next:after {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 24px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.portfolio-details .swiper-button-prev:hover:after,
.portfolio-details .swiper-button-next:hover:after {
  background-color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 575px) {

  .portfolio-details .swiper-button-prev,
  .portfolio-details .swiper-button-next {
    display: none;
  }
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.portfolio-details .portfolio-info h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--color-primary);
  left: 0;
  bottom: 0;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
  font-size: 16px;
}

.portfolio-details .portfolio-info ul strong {
  text-transform: uppercase;
  font-weight: 400;
  color: #9c9c9c;
  font-size: 12px;
}

.portfolio-details .portfolio-info .btn-visit {
  padding: 8px 40px;
  background: #fdc401;
  color: #fff;
  border-radius: 2px;
  transition: 0.3s;
}

.portfolio-details .portfolio-info .btn-visit:hover {
  background: var(--color-primary);
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
  margin-top: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

.project-deatils-aside .testimonial-item {
  padding: 30px 30px 0 30px;
  position: relative;
  background: white;
  height: 100%;
  margin-bottom: 50px;
}

.project-deatils-aside .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 2px;
  border: 6px solid #fff;
  float: left;
  margin: 0 10px 0 0;
}

.project-deatils-aside .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 5px 0;
  padding-top: 20px;
}

.project-deatils-aside .testimonial-item h4 {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.project-deatils-aside .testimonial-item .quote-icon-left,
.project-deatils-aside .testimonial-item .quote-icon-right {
  color: var(--color-primary);
  font-size: 26px;
  line-height: 0;
}

.project-deatils-aside .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.project-deatils-aside .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.project-deatils-aside .testimonial-item p {
  font-style: italic;
  margin: 0 0 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  position: relative;
  /* --hero-head = height of the top of the hero image's head above the hero's bottom edge, so #FFC801 lands there */
  --hero-head: 620px;
  /* The gradient is tilted 15deg and pivots on the bottom-right corner, which drags it down everywhere left of that.
     --hero-head-inset = distance in from the right edge at which #FFC801 should sit at --hero-head height; the
     distance along the gradient to that point is head * cos(15deg) + inset * sin(15deg). 50vw = mid-screen. */
  --hero-head-inset: 50vw;
  --hero-grad: calc(var(--hero-head) * .966 + var(--hero-head-inset) * .259);
  /* mid stops follow the brightness of the border baked into hero-img.png: sunny down to elbow height, then a quick fall-off */
  background: linear-gradient(345deg,
    #B26C04,
    #C57B02 calc(var(--hero-grad) * .22),
    #EB9E01 calc(var(--hero-grad) * .33),
    #FAB202 calc(var(--hero-grad) * .43),
    #FFBB01 calc(var(--hero-grad) * .61),
    #FFC801 var(--hero-grad));
  padding: 60px 0 0 0;
}

.hero::after {
  content: '';
  width: 100%;
  position: absolute;
  background-size: cover;
  bottom: -2px;
  box-shadow: 0 0 29px 0 rgb(0 0 0 / 5%);
  height: 10px;
}

.hero .caption {
  height: 700px;
  margin-top: 0;
}

.hero .circle {
  color: #ffffff;
}
.hero .caption img{
  position: absolute;
  bottom: -28px;
  max-width: 555px;
  width: 100%;
  height: auto;
}

.fill-button {
  background: linear-gradient(270deg, #ffc901, #f0a703);
  border: 0;
  padding: 14px 45px;
  color: #fff;
  transition: 0.4s;
  border-radius: 50px;
}

.hero h2 {
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #1d1d1d;
  font-family: var(--font-heading);
  text-transform: uppercase;
}

.hero h3 {
  color: #ffffff;
}

.hero p {
  color: #ffffff;
  font-weight: 400;
  margin-bottom: 30px;
}

.hero .btn-get-started {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 14px 40px;
  border-radius: 50px;
  transition: 0.3s;
  color: #1d1d1d;
  background: rgb(255 255 255);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}

.hero .btn-get-started:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.hero .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  color: #1d1d1d;
  font-weight: 600;
}

.hero .btn-watch-video i {
  color: #1d1d1d;
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

@media (max-width: 767px) {
  .hero .caption {
    height: 90vh;
    justify-content: flex-start !important;
  }

  .hero h2 {
    font-size: 36px;
  }

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 14px;
  }

  .icon-boxes .card-two {
    margin-top: var(--bs-gutter-y);
    margin-bottom: 0px;
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
  }

  .hero::after {
    display: none;
  }
}

@media (max-width: 1024px) {
  .hero h2 {
    font-size: 36px;
  }
  .hero h3 {
    font-size: 16px;
  }
  .hero {
    width: 100%;
    position: relative;
    --hero-head: 370px;
    padding: 60px 0 0 0;
  }
  .hero .caption {
    height: 380px;
    padding-top: 0px;
  }
  .hero .caption img {
    position: absolute;
    right: 0;
    bottom: -28px;
    max-width: 322px;
  }
}
@media (max-width: 800px){
  .hero {
    width: 100%;
    position: relative;
    padding: 60px 0 0 0;
  }
  .hero .caption {
    padding-top: 100px;
  }
}
@media (max-width: 558px) {
  .hero {
    width: 100%;
    position: relative;
    padding: 60px 0 0 0;
  }
  .hero .caption {
    padding-top: 100px !important;
  }
  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 14px;
  }

  .icon-boxes .card-two {
    margin-top: -20px;
    margin-bottom: -20px;
  }
}
@media (max-width: 380px) {
  .hero .caption {
  }
}

.top-icon-box .icon-boxes {
  padding-bottom: 60px;
}

@media (min-width: 1200px) {
  .top-icon-box .icon-boxes:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(50% + 20px);
    background-color: #fff;
  }
}

.top-icon-box .icon-box {
  padding: 50px 30px;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 0 8px 2px rgb(204 204 204 / 33%);
  transition: all 0.3s ease-in-out;
  border-radius: 20px;
  z-index: 1;
  height: 100%;
  width: 100%;
  text-align: center;
}

.top-icon-box .icon-box .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 24px;
}

.top-icon-box .icon-box .title a {
  color: #fdc401;
  transition: 0.3s;
}

.top-icon-box .icon-box .icon {
  margin-bottom: 20px;
  padding-top: 10px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
  font-size: 48px;
  line-height: 1;
  color: rgb(0 0 0 / 60%);
}

.top-icon-box .icon-box:hover {
  background: #fdc401;
}

.top-icon-box .icon-box:hover .title a,
.top-icon-box .icon-box:hover p,
.top-icon-box .icon-box:hover .icon {
  color: #fff;
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.blog .blog-pagination {
  margin-top: 30px;
  color: #555555;
}

.blog .blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog .blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
  border-radius: 10px;
}

.blog .blog-pagination li a {
  color: var(--color-default);
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog .blog-pagination li.active,
.blog .blog-pagination li:hover {
  background: var(--color-primary);
  color: #fff;
}

.blog .blog-pagination li.active a,
.blog .blog-pagination li:hover a {
  color: var(--color-white);
}

.blog-sidbar{
  background-color: #f6f6f6;
  padding: 30px 20px;
  border-radius: 8px;
}

/*--------------------------------------------------------------
# Blog Posts List
--------------------------------------------------------------*/
.blog .posts-list article {
  box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.blog .posts-list .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.blog .posts-list .post-category {
  font-size: 16px;
  color: #555555;
  margin-bottom: 10px;
}

.blog .posts-list .title {
  font-size: 22px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.blog .posts-list .title a {
  color: var(--color-default);
  transition: 0.3s;
}

.blog .posts-list .title a:hover {
  color: var(--color-primary);
}

.blog .posts-list .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog .posts-list .post-author-list {
  font-weight: 600;
  margin-bottom: 5px;
}

.blog .posts-list .post-date {
  font-size: 14px;
  color: #3c3c3c;
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Details
--------------------------------------------------------------*/
.blog .blog-details {
  box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
  padding: 30px;
  border-radius: 10px;
}

.blog .blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

.blog .blog-details .title {
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 20px 0 0 0;
  color: var(--color-default);
}

.blog .blog-details .content {
  margin-top: 20px;
}

.blog .blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog .blog-details .content blockquote {
  overflow: hidden;
  background-color: rgba(34, 34, 34, 0.06);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog .blog-details .content blockquote p {
  color: var(--color-default);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog .blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--color-secondary);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog .blog-details .meta-top {
  margin-top: 20px;
  color: #6c757d;
}

.blog .blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog .blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog .blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: var(--color-primary);
}

.blog .blog-details .meta-top a {
  color: #6c757d;
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog .blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid rgba(34, 34, 34, 0.15);
}

.blog .blog-details .meta-bottom i {
  color: #555555;
  display: inline;
}

.blog .blog-details .meta-bottom a {
  color: rgba(34, 34, 34, 0.8);
  transition: 0.3s;
}

.blog .blog-details .meta-bottom a:hover {
  color: var(--color-primary);
}

.blog .blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog .blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog .blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog .blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog .blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--color-default);
  content: ",";
}

.blog .blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog .blog-details .meta-bottom .share i {
  padding-left: 5px;
}

.blog .post-author {
  padding: 20px;
  margin-top: 30px;
  box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
  border-radius: 10px;
}

.blog .post-author img {
  max-width: 120px;
  margin-right: 20px;
}

.blog .post-author h4 {
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 0px;
  padding: 0;
  color: var(--color-default);
}

.blog .post-author .social-links {
  margin: 0 10px 10px 0;
}

.blog .post-author .social-links a {
  color: rgba(34, 34, 34, 0.5);
  margin-right: 5px;
}

.blog .post-author p {
  font-style: italic;
  color: rgba(108, 117, 125, 0.8);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Sidebar
--------------------------------------------------------------*/
.blog .sidebar {
  padding: 30px;
  box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
  border-radius: 10px;
}
.search-form {
  position: relative;
  overflow: hidden;
  border-radius: 50px;
}
.search-form input {
  width: 100%;
  padding: 14px 28px;
  background: #2E2E2E;
  border: 1px solid #2E2E2E;
  color: #fff;
}
.search-form button {
  position: absolute;
  right: 0;
  background: #2e2e2e;
  padding: 16px 20px;
  border: 2px solid #2e2e2e;
  top: 0px;
}
.search-form button i{
  color: #fff;
  font-size: 22px;
}

.blog .sidebar .sidebar-title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0;
  color: var(--color-default);
}

.blog .sidebar .sidebar-item+.sidebar-item {
  margin-top: 40px;
}

.blog .sidebar .search-form form {
  background: #fff;
  border: 1px solid rgba(34, 34, 34, 0.3);
  padding: 5px 10px;
  position: relative;
  border-radius: 50px;
}

.blog .sidebar .search-form form input[type=text] {
  border: 0;
  padding: 4px;
  border-radius: 50px;
  width: calc(100% - 60px);
}

.blog .sidebar .search-form form input[type=text]:focus {
  outline: none;
}

.blog .sidebar .search-form form button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 25px;
  margin: -1px;
  background: var(--color-primary);
  color: #fff;
  transition: 0.3s;
  border-radius: 50px;
  line-height: 0;
}

.blog .sidebar .search-form form button i {
  line-height: 0;
}

.blog .sidebar .search-form form button:hover {
  background: rgba(0, 131, 116, 0.8);
}

.blog .sidebar .categories ul {
  list-style: none;
  padding: 0;
}

.blog .sidebar .categories ul li+li {
  padding-top: 10px;
}

.blog .sidebar .categories ul a {
  color: var(--color-default);
  transition: 0.3s;
}

.blog .sidebar .categories ul a:hover {
  color: var(--color-primary);
}

.blog .sidebar .categories ul a span {
  padding-left: 5px;
  color: rgba(34, 34, 34, 0.4);
  font-size: 14px;
}

.blog .sidebar .recent-posts .post-item+.post-item {
  margin-top: 15px;
}

.blog .sidebar .recent-posts img {
  width: 80px;
  float: left;
}

.blog .sidebar .recent-posts h4 {
  font-size: 15px;
  margin-left: 95px;
  font-weight: bold;
}

.blog .sidebar .recent-posts h4 a {
  color: var(--color-default);
  transition: 0.3s;
}

.blog .sidebar .recent-posts h4 a:hover {
  color: var(--color-primary);
}

.blog .sidebar .recent-posts time {
  display: block;
  margin-left: 95px;
  font-style: italic;
  font-size: 14px;
  color: rgba(34, 34, 34, 0.4);
}

.blog .sidebar .tags {
  margin-bottom: -10px;
}

.blog .sidebar .tags ul {
  list-style: none;
  padding: 0;
}

.blog .sidebar .tags ul li {
  display: inline-block;
}

.blog .sidebar .tags ul a {
  color: #555555;
  font-size: 14px;
  padding: 6px 20px;
  margin: 0 6px 8px 0;
  border: 1px solid #d5d5d5;
  display: inline-block;
  transition: 0.3s;
  border-radius: 50px;
}

.blog .sidebar .tags ul a:hover {
  color: #fff;
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
}

.blog .sidebar .tags ul a span {
  padding-left: 5px;
  color: rgba(85, 85, 85, 0.8);
  font-size: 14px;
}

/*--------------------------------------------------------------
# Blog Comments
--------------------------------------------------------------*/
.blog .comments {
  margin-top: 30px;
}

.blog .comments .comments-count {
  font-weight: bold;
}

.blog .comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog .comments .comment .comment-img {
  margin-right: 14px;
}

.blog .comments .comment .comment-img img {
  width: 60px;
}

.blog .comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog .comments .comment h5 a {
  font-weight: bold;
  color: var(--color-default);
  transition: 0.3s;
}

.blog .comments .comment h5 a:hover {
  color: var(--color-primary);
}

.blog .comments .comment h5 .reply {
  padding-left: 10px;
  color: var(--color-primary);
}

.blog .comments .comment h5 .reply i {
  font-size: 20px;
}

.blog .comments .comment time {
  display: block;
  font-size: 14px;
  color: rgba(34, 34, 34, 0.8);
  margin-bottom: 5px;
}

.blog .comments .comment.comment-reply {
  padding-left: 40px;
}

.blog .comments .reply-form {
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.blog .comments .reply-form h4 {
  font-weight: bold;
  font-size: 22px;
}

.blog .comments .reply-form p {
  font-size: 14px;
}

.blog .comments .reply-form input {
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
}

.blog .comments .reply-form input:focus {
  box-shadow: none;
  border-color: rgba(0, 131, 116, 0.8);
}

.blog .comments .reply-form textarea {
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
}

.blog .comments .reply-form textarea:focus {
  box-shadow: none;
  border-color: rgba(0, 131, 116, 0.8);
}

.blog .comments .reply-form .form-group {
  margin-bottom: 25px;
}

.blog .comments .reply-form .btn-primary {
  border-radius: 50px;
  padding: 14px 40px;
  border: 0;
  background-color: var(--color-secondary);
}

.blog .comments .reply-form .btn-primary:hover {
  background-color: rgba(248, 90, 64, 0.8);
}

/**************************************
  Contact
 **************************************/
.contact-section .contact-form-3 form .form-control {
  font-size: 15px;
  width: 100%;
  padding: 10px 20px;
  height: 52px;
  color: #333;
  border: none;
  background-color: #f3f3f3;
  font-weight: 600;
  border-radius: 20px;
  text-transform: capitalize;
  transition: all 0.4s;
}

.contact-section .contact-form-3 form input:focus,
.contact-section .contact-form-3 form textarea:focus {
  outline: none;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.contact-information-box-3 {
  background: #fdc401;
  padding: 25px 20px;
  border-radius: 20px;
  -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03);
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03);
  margin-bottom: 50px;
}

.contact-information-box-3 .single-contact-info-box {
  position: relative;
  z-index: 1;
  padding: 10px 10px;
  display: block;
  border-radius: 3px;
  text-align: left;
  margin-bottom: 10px;
  overflow: hidden;
}

.contact-information-box-3 .contact-info {
  position: relative;
  z-index: 1;
}

.contact-information-box-3 .contact-info h6 {
  font-weight: 600;
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 7px;
  text-transform: capitalize;
}

.contact-information-box-3 .contact-info p {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.contact-information-box-3 .single-contact-info-box .contact-info-bg-icon {
  color: #f44336;
  opacity: .2;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25px;
  margin: 0 auto;
  z-index: -1;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.contact-information-box-3 .single-contact-info-box .contact-info-bg-icon i {
  font-size: 100px;
}

.contact-section .contact-form .form-group {
  margin-bottom: 30px;
}

.contact-section .contact-form .form-group .list-unstyled li{
  background: transparent !important;
}

.contact-section .contact-form form textarea.form-control {
  height: auto;
  padding-top: 15px;
  line-height: initial;
}

.contact-section .form-message {
  margin: 0;
}

.contact-form button[type=submit] {
  background: linear-gradient(270deg, #ffc901, #f0a703);
  border: 0;
  padding: 14px 45px;
  color: #fff;
  transition: 0.4s;
  border-radius: 50px;
}

.contact-section .form-message.success {
  background: #03b103;
  color: #fff;
  padding: 10px 15px;
  border-radius: 3px;
  margin-bottom: 30px;
}

.contact-section .form-message.error {
  background: #ff4d15;
  color: #fff;
  padding: 10px 15px;
  border-radius: 3px;
  margin-bottom: 30px;
}

.contact-area .form-message.success {
  background: #03b103;
  color: #fff;
  padding: 10px 15px;
  border-radius: 3px;
  display: block;
  margin-bottom: 15px;
}

.contact-area .form-message.error {
  background: #ff4d15;
  color: #fff;
  padding: 10px 15px;
  border-radius: 3px;
  display: block;
  margin-bottom: 15px;
}

.with-errors {
  color: #dc3545;
}

.messages {
  margin-top: 30px;
}

.alert-success {
  margin-left: 15px;
}

.hidden {
  display: none;
}

/*--------------------------------------------------------------
 ** Map
 --------------------------------------------------------------*/
.map-content #contact-map {
  position: relative;
  width: 100%;
  height: 400px;
  border: 0;
  margin-bottom: -2px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/


.footer-section {
  background: #f4f4f4;
  position: relative;
}

.footer-cta {
  border-bottom: 1px solid #373636;
}

.single-cta i {
  color: #c00113;
  font-size: 30px;
  float: left;
  margin-top: 8px;
}

.cta-text {
  padding-left: 15px;
  display: inline-block;
}

.cta-text h4 {
  color: #c00113;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 2px;
}

.cta-text span {
  color: #757575;
  font-size: 15px;
}

.footer-content {
  position: relative;
  z-index: 2;
}

.footer-pattern img {
  position: absolute;
  top: 0;
  left: 0;
  height: 330px;
  background-size: cover;
  background-position: 100% 100%;
}

.footer-logo {
  margin-bottom: 30px;
}

.footer-logo img {
  max-width: 200px;
}
.footer-widget ul li,
.footer-widget ul li a{
  font-size: 14px;
}
.footer-text p {
  margin-bottom: 14px;
  font-size: 14px;
  color: #7e7e7e;
  line-height: 28px;
}

.footer-social-icon span {
  color: #fdc401;
  display: block;
  font-size: 20px;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 20px;
}

.footer-social-icon a {
  color: #fff;
  font-size: 16px;
  margin-right: 15px;
}

.footer-social-icon i {
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 41px;
  border-radius: 50%;
}

.facebook-bg {
  background: #fdc401;
}

.twitter-bg {
  background: #fdc401;
}

.google-bg {
  background: #fdc401;
}

.footer-widget-heading h3 {
  color: #fdc401;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 40px;
  position: relative;
}

.footer-widget-heading h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -15px;
  height: 2px;
  width: 100%;
  background: var(--color-primary);
}

.footer-widget ul li {
  display: inline-block;
  float: left;
  width: 100%;
  margin-bottom: 12px;
}

.footer-widget ul li a:hover {
  color: var(--color-primary);
}

.footer-widget ul li a {
  color: #878787;
  text-transform: capitalize;
}

.subscribe-form {
  position: relative;
  overflow: hidden;
  border-radius: 50px;
}

.subscribe-form input {
  width: 100%;
  padding: 14px 28px;
  background: #e4e4e4;
  border: 1px solid #e4e4e4;
  color: #fff;
}

.subscribe-form button {
  position: absolute;
  right: 0;
  background: var(--color-primary);
  padding: 16px 20px;
  border: 1px solid var(--color-primary);
  top: 0px;
}

.subscribe-form button i {
  color: #fff;
  font-size: 22px;
  transform: rotate(-6deg);
}

.copyright-area {
  background: #ffffff;
  padding: 25px 0;
}

.copyright-text p {
  margin: 0;
  font-size: 14px;
  color: #727272;
}

.copyright-text p a {
  color: var(--color-primary);
}

.footer-menu li {
  display: inline-block;
  margin-left: 20px;
}

.footer-menu li:hover a {
  color: var(--color-primary);
}

.footer-menu li a {
  font-size: 14px;
  color: #727272;
}

.footer-menu li a:hover {
  color: #000000;
}


/*--------------------------------------------------------------
# Comming Soon
--------------------------------------------------------------*/
#coming-soon-background{
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background: url('../images/cta-bg.jpg');
  background-size: cover;
  overflow: hidden;
}
#coming-soon-background::after{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  opacity: 0.9;
  background: #000000;
}
.coming-soon {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0 auto;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}
.coming-soon #coming-soon,
.coming-soon #coming-soon {
  width: 100%;
  text-align: center;
}
.coming-soon #coming-soon .title,
.coming-soon #coming-soon .title {
  color: white;
  font-family: "Quicksand", sans-serif;
  font-size: 4rem;
  text-transform: uppercase;
  padding-bottom: 0px;
  margin-bottom: 0px;
}
.coming-soon #coming-soon .title span,
.coming-soon #coming-soon .title span {
  font-size: 4rem;
  cursor: pointer;
}
.coming-soon #coming-soon .title:hover,
.coming-soon #coming-soon .title:hover {
  -webkit-animation: MISSION-HOVER 1.5s infinite;
  animation: MISSION-HOVER 1.5s infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
@-webkit-keyframes MISSION-HOVER {
  0%, 100% {
    font-size: 4rem;
    color: white;
  }
  50% {
    color: #bffcff;
    letter-spacing: 5px;
    text-shadow: 0px 0px 30px #bffcff;
  }
}
.coming-soon #coming-soon p,
.coming-soon #coming-soon p {
  color: #fdc401;
  font-family: "Quicksand", sans-serif;
  font-size: 1.5rem;
  margin: 0 auto;
  padding: 0;
  letter-spacing: 0.5rem;
  text-transform: uppercase;
}
.coming-soon #coming-soon p:last-child,
.coming-soon #coming-soon p:last-child {
  font-size: 0.75rem;
  font-weight: 700;
  margin: 3em auto;
  padding: 0;
  letter-spacing: 0.1rem;
}
.coming-soon #coming-soon p:last-child > a,
.coming-soon #coming-soon p:last-child > a {
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease-in;
}
.coming-soon #coming-soon p:last-child > a:hover,
.coming-soon #coming-soon p:last-child > a:hover {
  color: #fff;
}
.coming-soon #coming-soon section,
.coming-soon #coming-soon section {
  color: #fff;
  margin: 0 auto;
  line-height: 24px;
  font-size: 1rem;
  font-weight: 700;
}
.coming-soon #coming-soon section ul,
.coming-soon #coming-soon section ul {
  list-style-type: none;
  margin-bottom: 0;
  margin-left: 0;
}
.coming-soon #coming-soon section ul li,
.coming-soon #coming-soon section ul li {
  display: inline-block;
  margin-right: 2rem;
  width: 6rem;
}
.coming-soon #coming-soon section .timenumbers,
.coming-soon #coming-soon section .timenumbers {
  display: block;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5rem;
  margin: 0 auto;
  text-align: center;
}
.coming-soon #coming-soon section p.timedescription,
.coming-soon #coming-soon section p.timedescription {
  font-size: 0.5rem;
  font-variant: small-caps;
  line-height: 1.5rem;
  margin: 0 auto;
  text-align: center;
  position: relative;
  top: 0px;
}

/*--------------------------------------------------------------
# Contact page
--------------------------------------------------------------*/
.contact .contact-info h2 {
  margin-bottom: 16px;
}

.contact .contact-info p {
  margin-bottom: 28px;
}

.contact .contact-details {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact .contact-details li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.contact .contact-details li i {
  color: var(--color-primary);
  font-size: 20px;
  line-height: 1.2;
}

.contact .contact-form .form-group {
  margin-bottom: 20px;
}

.contact .contact-form .form-control {
  padding: 12px 16px;
}

.contact .contact-form button[type=submit] {
  margin-top: 6px;
}

@media (max-width: 767px) {
  .contact .contact-info {
    margin-bottom: 40px;
  }
}

/*--------------------------------------------------------------
# Blog post content
--------------------------------------------------------------*/
.single-page .post-content h2 {
  font-size: 26px;
  margin: 36px 0 14px;
}

.single-page .post-content p,
.single-page .post-content li {
  line-height: 1.7;
}

.single-page .post-content ol,
.single-page .post-content ul {
  padding-left: 22px;
  margin-bottom: 20px;
}

.single-page .post-content blockquote {
  margin: 20px 0;
  padding: 14px 20px;
  border-left: 4px solid var(--color-primary);
  background: #fff8e1;
  border-radius: 0 8px 8px 0;
  font-style: italic;
}

.single-page .post-content blockquote p:last-child {
  margin-bottom: 0;
}

.single-page .post-nav {
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.single-page .post-nav .fill-btn {
  text-decoration: none;
}

.testimonials .testimonial-item h3 a,
.testimonials .testimonial-item h4 a {
  color: inherit;
}

.testimonials .testimonial-item h3 a:hover,
.testimonials .testimonial-item h4 a:hover {
  color: var(--color-primary);
}

.testimonials .testimonial-item .testimonial-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  background: #eef7ea;
}

.testimonials .testimonial-item .testimonial-mark img {
  width: 60%;
}

/*--------------------------------------------------------------
# Site footer
--------------------------------------------------------------*/
.site-footer {
  background: #222222;
  color: #cfcfcf;
  padding: 60px 0 30px;
  font-size: 15px;
}

.site-footer .logo h2 {
  font-family: "Comfortaa", sans-serif;
  font-size: 26px;
  color: #ffffff;
  margin-bottom: 15px;
}

.site-footer .logo h2 span {
  color: #fdc401;
}

.site-footer h4 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer ul li {
  padding: 4px 0;
}

.site-footer a {
  color: #cfcfcf;
}

.site-footer a:hover {
  color: #fdc401;
}

.site-footer .copyright {
  border-top: 1px solid #3a3a3a;
  margin-top: 40px;
  padding-top: 20px;
  font-size: 14px;
}

/*--------------------------------------------------------------
# Quotes strip and platform pages
--------------------------------------------------------------*/
.testimonials-strip {
  padding: 80px 0;
}

.testimonials-strip .testimonial-item {
  justify-content: flex-start;
  margin: 0 10px;
  padding: 0 20px;
}

.testimonials-strip .testimonial-item .info-box {
  min-width: 0;
}

#about .content .btn-get-started,
.btn-main {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 28px;
  border-radius: 50px;
  background: #fdc401;
  color: #222222;
  font-weight: 600;
}

#about .content .btn-get-started:hover,
.btn-main:hover {
  background: #222222;
  color: #ffffff;
}

.testimonials-strip .testimonial-item p {
  font-size: 16px;
}

.platform-page .col-lg-9 h2 {
  font-size: 26px;
  margin-top: 30px;
}

.platform-page .col-lg-9 ul {
  padding-left: 0;
  margin-bottom: 20px;
}

.pricing-table.bg-orange .price-header .title,
.pricing-table.bg-orange .price-body ul li {
  color: #222222;
}

/*--------------------------------------------------------------
# Spacing pass
--------------------------------------------------------------*/
section,
.section {
  padding: 80px 0;
}

.section-header {
  padding-bottom: 48px;
}

.section-header p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.call-to-action {
  padding: 100px 40px;
}

.breadcrumbs .page-header {
  min-height: 0;
  padding: 50px 0;
}

.breadcrumbs .page-header h2 {
  color: #222222;
  margin: 0;
}

/* Headings that follow body text need breathing room */
.single-page p + h3,
.single-page ul + h3,
.about p + h3,
.contact-info ul + h3 {
  margin-top: 32px;
}

/* Call to action: dark text on the yellow band, white was unreadable */
.call-to-action h3,
.call-to-action p {
  color: #222222;
}

.call-to-action .cta-btn {
  border-color: #222222;
  color: #222222;
  font-weight: 600;
}

.call-to-action .cta-btn:hover {
  background: #222222;
  border-color: #222222;
  color: #ffffff;
}

/* About page */
.about .mt-40 {
  margin-top: 0;
}

.about .img-responsive {
  border-radius: 16px;
}

.team-members .title {
  font-weight: 700;
  margin-bottom: 40px;
}

.team-members .team-member {
  height: 100%;
  padding: 32px 24px;
  background: #f6f6f6;
  border-radius: 16px;
}

.team-members .team-member h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}

.team-members .team-member p {
  margin-bottom: 0;
}

.contact-info ul:not(.contact-details) {
  list-style: none;
  padding-left: 0;
}

.contact-info ul:not(.contact-details) li {
  margin-bottom: 10px;
}

.contact-info ul:not(.contact-details) li i {
  margin-right: 6px;
}

/* Page titles: let long titles use the width instead of wrapping early */
.breadcrumbs .page-header .col-lg-6 {
  flex: 0 0 auto;
  width: 100%;
  max-width: 960px;
}

/* Testimonials page: the intro already provides the top spacing */
.single-page > .testimonials {
  padding-top: 16px;
}

/* Projects: brand colours instead of Bootstrap blue */
.portfolio-container .text-primary {
  color: #b38a00 !important;
  font-weight: 600;
}

.portfolio-container hr.text-primary {
  color: #fdc401 !important;
  opacity: 1;
}

.portfolio-detail .portfolio-info {
  margin-top: 24px;
}

@media (max-width: 767px) {
  section,
  .section {
    padding: 56px 0;
  }

  .section-header {
    padding-bottom: 32px;
  }

  .section-header h2 {
    font-size: 26px;
  }

  .call-to-action {
    padding: 64px 20px;
    background-attachment: scroll;
  }

  .breadcrumbs .page-header {
    padding: 32px 0;
  }

  .breadcrumbs .page-header h2 {
    font-size: 36px;
  }

  .contact .contact-info {
    margin-bottom: 32px;
  }

  .about .img-responsive {
    display: block;
    max-width: 300px;
    margin: 0 auto 32px;
  }

  #about .col-lg-6 > img {
    display: block;
    max-width: 260px;
    margin: 0 auto;
  }
}

/* Narrow phones: keep "NEIGHBOURHOOD" inside the screen */
@media (max-width: 420px) {
  .hero h2 {
    font-size: 30px;
  }
}

/* Phones: stack the hero text and photo instead of overlapping them.
   The fixed 90vh text column let the photo ride up over the button on short screens. */
@media (max-width: 767px) {
  .hero .caption:not(.mobile-pt) {
    height: auto;
    padding-top: 16px !important;
    padding-bottom: 32px;
  }

  .hero .caption.mobile-pt {
    height: auto;
    padding-top: 0 !important;
    align-items: center !important;
  }

  .hero .caption.mobile-pt img {
    position: static;
    display: block;
    max-width: 300px;
    margin: 0 auto !important;
  }
}

/*--------------------------------------------------------------
# About page: photo standing on the How I work band
--------------------------------------------------------------*/
.about-intro.section {
  padding-top: 48px;
  padding-bottom: 0;
}

@media (max-width: 767px) {
  .about-intro.section {
    padding-top: 32px;
  }
}

.about-intro .about-photo img {
  display: block;
  margin: 0 auto;
  border-radius: 0;
}

.about-intro .about-text {
  padding-bottom: 80px;
}

.team-members.section {
  background: #fff4cc;
}

.team-members .team-member {
  background: #ffffff;
  box-shadow: 0 2px 12px rgb(0 0 0 / 6%);
}

@media (max-width: 767px) {
  .about-intro .about-text {
    padding-bottom: 32px;
  }

  .about-intro .about-photo img {
    margin: 0 auto;
  }
}

/*--------------------------------------------------------------
# Accessibility (WCAG 2.2 AA contrast and target size)
--------------------------------------------------------------*/
/* Yellow text on light backgrounds becomes the darker orange */
.breadcrumbs nav ol a,
.top-icon-box .icon-box .title a,
.faq .accordion-button:not(.collapsed) {
  color: var(--color-link);
}

.recent-posts .title a:hover,
.blog .posts-list .title a:hover,
.blog .sidebar .recent-posts h4 a:hover,
.testimonials .testimonial-item h4 a:hover {
  color: var(--color-link-hover);
}

/* Card hover turns yellow: keep its text dark rather than white */
.top-icon-box .icon-box:hover .title a,
.top-icon-box .icon-box:hover p,
.top-icon-box .icon-box:hover .icon {
  color: #222222;
}

/* White on yellow buttons is 1.6:1; dark text is 10:1 */
.fill-button,
.contact-form button[type=submit] {
  color: #222222;
  font-weight: 600;
}

.top-icon-box .icon-box:hover .fill-button {
  background: #222222;
  color: #ffffff;
}

/* Hero lines that sat white on yellow */
.hero h3,
.hero p {
  color: #1d1d1d;
}

.hero .circle {
  color: var(--color-link);
}

/* Footer contact links: at least 24px tall to tap */
.site-footer p a {
  display: inline-block;
  padding: 3px 0;
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 2px;
}

/* Links inside running text need more than colour to stand out */
main p a:not([class]),
main li a:not([class]),
.accordion-body a,
.post-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Except whole-item list links, where the link is the item */
.single-page ul li > a:only-child,
.blog-sidbar ul li a {
  text-decoration: none;
}

/* Phone menu: yellow panel, so dark links (white was 1.6:1) */
@media (max-width: 1279px) {
  .navbar a,
  .navbar a:focus,
  .navbar a:hover,
  .navbar .active,
  .navbar .active:focus,
  .navbar li:hover > a {
    color: #1d1d1d;
  }

  .navbar a:hover,
  .navbar li:hover > a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* Inline code: Bootstrap's pink (#d63384) is only 4:1 on the #f3f3f3 panels.
   This darker pink passes WCAG AA (5.6:1 on #f3f3f3, 6.2:1 on white). */
:root {
  --bs-code-color: #b02a6a;
}

/* Privacy page cookie tables. On phones each table keeps a readable width
   and scrolls sideways inside its focusable region. */
.privacy-page h4 {
  font-size: 20px;
  margin: 28px 0 12px;
}

.privacy-page .table-responsive {
  margin-bottom: 8px;
}

.privacy-page .cookie-table {
  min-width: 640px;
  font-size: 15px;
}

.privacy-page .cookie-table th:first-child,
.privacy-page .cookie-table td:first-child {
  white-space: nowrap;
}

/*--------------------------------------------------------------
# Pricing page
--------------------------------------------------------------*/
/* Seven cards in rows of three, the odd one centred in the last row.
   They alternate dark and orange, stand level in each row, and keep
   their text clear of the edges. The price slab stays full-bleed on
   the left. */
.pricing-page .price-plan-wrapper .row {
  justify-content: center;
}

.pricing-page .price-plan-wrapper .row > [class*="col-"] {
  display: flex;
}

.pricing-page .pricing-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 32px 0 36px;
}

.pricing-page .pricing-table .price-header .title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  padding: 0 28px;
}

.pricing-page .pricing-table .price-body {
  flex: 1;
  padding: 0 28px;
  text-align: left;
}

.pricing-page .pricing-table .price-body ul li {
  margin: 0;
  padding: 12px 0;
  font-size: 15px;
  line-height: 1.55;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.pricing-page .pricing-table .price-body ul li:first-child {
  border-top: 0;
  padding-top: 0;
  font-size: 16px;
}

.pricing-page .pricing-table.bg-orange .price-body ul li {
  border-top-color: rgba(0, 0, 0, 0.16);
}

.pricing-page .pricing-table .price-footer {
  margin-top: 28px;
}

/* The asterisk note under the cards reads as a short paragraph, not a
   full-width line */
.pricing-page .price-note {
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.6;
  color: #555555;
  margin: 8px 0 0;
}

/* Headings below the cards match the weight of the section header */
.pricing-page h3 {
  font-size: 26px;
  font-weight: 600;
}

@media (max-width: 575px) {
  .pricing-page .pricing-table .price-header .title,
  .pricing-page .pricing-table .price-body {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Card buttons in sentence case, like every other button on the site */
.pricing-page .pricing-table .price-footer .order-btn {
  text-transform: none;
  font-size: 15px;
}

/* The five steps are a sequence, so they are numbered rather than
   given the arrow every other list carries */
.pricing-page ol.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}

.pricing-page ol.steps li {
  counter-increment: step;
  position: relative;
  padding: 15px 21px 15px 58px;
  margin-bottom: 5px;
  color: rgb(19 20 20 / 80%);
  background: #f3f3f3;
  border-radius: 8px;
}

.pricing-page ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 18px;
  top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fdc401;
  color: #222222;
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
}

/* Keep the explanatory paragraphs under 80 characters a line */
.pricing-page .row.gy-4 p {
  max-width: 62ch;
}

/* The price sits inside its white slab at every card width. The slab's
   usable right edge is well inside the card (it starts 20% to the left
   and is skewed), so the slab is wider and the figure is sized to the
   card rather than fixed at 62px. */
.pricing-page .pricing-table {
  container-type: inline-size;
}

.pricing-page .pricing-table .price-header .price {
  padding-left: 40px;
  font-size: clamp(40px, 15cqw, 62px);
}

.pricing-page .pricing-table .price-header .price:after {
  width: 112%;
}

/*--------------------------------------------------------------
# Homepage hero: headline first, one bold button, proof as a footnote
--------------------------------------------------------------*/
/* Reading order: headline, primary button, lead, secondary button, proof line, byline.
   Only the headline is loud; the rest sits at 400/500 so it cannot compete. */
.hero h2 {
  text-transform: none;
  font-size: clamp(40px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  max-width: 18ch;
}

.hero .hero-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(29, 29, 29, 0.75);
  margin-bottom: 14px;
}

/* The round portrait only appears on phones, where the full cut-out is hidden.
   Three classes deep so it beats the older ".hero .caption img" positioning. */
.hero .caption .hero-portrait {
  display: none;
}

.hero .hero-lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #1d1d1d;
  max-width: 48ch;
  margin-bottom: 26px;
}

.hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
}

.hero .btn-get-started,
.hero .btn-see-prices {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  line-height: 1.2;
  letter-spacing: 0;
  padding: 14px 32px;
  border-radius: 50px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.hero .btn-get-started {
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  background: #1d1d1d;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.hero .btn-get-started:hover {
  background: #000000;
  color: #ffffff;
}

.hero .btn-see-prices {
  font-size: 16px;
  font-weight: 500;
  color: #1d1d1d;
  background: #ffffff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}

.hero .btn-see-prices:hover {
  background: #fff7d6;
  color: #1d1d1d;
}

.hero .btn-get-started:focus-visible,
.hero .btn-see-prices:focus-visible {
  outline: 3px solid #1d1d1d;
  outline-offset: 3px;
}

.hero .hero-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 20px 0 0;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(29, 29, 29, 0.75);
}

.hero .hero-proof li {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.hero .hero-proof li:not(:last-child)::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  margin: 0 10px;
  flex: none;
}

/* Desktop: the whole hero fits the first screen (topbar 70 + nav 80 + hero 640 = 790).
   The photo is pinned to the bottom-right corner, so its cut edge is the section edge
   and there is clear yellow between the buttons and Wayne. */
@media (min-width: 1025px) {
  .hero {
    --hero-head: 600px;
    padding-top: 40px;
  }

  .hero .caption {
    height: 600px;
    justify-content: center !important;
    padding-top: 0;
  }

  .hero .caption img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(100%, 480px);
    max-width: none;
    margin-bottom: 0 !important;
  }
}

/* Tablet: text above, photo below, no overlap */
@media (max-width: 1024px) {
  .hero h2 {
    font-size: clamp(32px, 4.6vw, 40px);
    max-width: 18ch;
  }

  .hero .caption:not(.mobile-pt) {
    height: auto;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .hero .caption.mobile-pt {
    height: auto;
    padding-top: 0 !important;
    align-items: center !important;
  }

  .hero .caption.mobile-pt img {
    position: static;
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto !important;
  }
}

/* Phones: the full cut-out goes; Wayne appears as a small round portrait beside the byline */
@media (max-width: 767px) {
  .hero .caption.mobile-pt {
    display: none !important;
  }

  .hero .caption:not(.mobile-pt) {
    padding-top: 20px !important;
    padding-bottom: 28px;
  }

  .hero h2 {
    font-size: 32px;
    max-width: none;
  }

  .hero .hero-byline {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .hero .caption .hero-portrait {
    display: block;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #1d1d1d;
    background: #fff7d6;
  }

  /* Zoom the cut-out so the circle holds Wayne's face rather than his whole torso */
  .hero .caption .hero-portrait img {
    position: static;
    display: block;
    width: 220%;
    max-width: none;
    height: auto;
    margin: -4px 0 0 -60%;
  }

  .hero .hero-lead {
    font-size: 16px;
    margin-bottom: 22px;
  }

  .hero .hero-actions {
    width: 100%;
    gap: 10px;
  }

  .hero .btn-get-started,
  .hero .btn-see-prices {
    flex: 1 1 100%;
    min-height: 52px;
    font-size: 16px;
    padding: 12px 20px;
  }

  .hero .hero-proof {
    font-size: 13px;
    margin-top: 18px;
  }
}

/* Phones: the call and the chat sit at the very top, where the topbar is hidden */
.mobile-cta-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-cta-bar {
    display: flex;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
  }

  .mobile-cta-bar a {
    flex: 1 1 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 8px 12px;
    text-decoration: none;
  }

  .mobile-cta-bar .mobile-cta-chat {
    background: #fdc401;
    color: #1d1d1d;
  }

  .mobile-cta-bar .mobile-cta-call {
    background: #1d1d1d;
    color: #ffffff;
  }

  .mobile-cta-bar a:hover,
  .mobile-cta-bar a:focus-visible {
    text-decoration: underline;
  }
}