/*
Theme Name: Chris Fennell Azure Consultant
Description: A custom WordPress theme for Chris Fennell
Version: 1.0
Author: Radar Agency
*/

/*

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Floating & Alignment
  2.3 Forms
  2.4 Lists
  2.5 Code
  2.6 Tables
  2.7 Spacing
  2.8 Utilities
  2.9 Misc
  2.10 Buttons
    - Button Sizes
    - Button Shapes
    - Button Color Scheme
    - Button Aligns
  2.11 Images
    - Image Hover Effects
  2.12 Section
    - Hero Section
    - Section Title
    - Section Paddings
    - Section Margins
    - Section Bg Colors
    - Content colors


3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Dropcap
  3.3 Text Highlights

4. CONTENT ELEMENTS
  4.1 Tabs
  4.2 Accordions
  4.3 Member Grid
  4.4 Product Grid

5. BLOG STYLES
  5.1 Blog Single Post
  5.2 About Author
  5.3 Comments List
  5.4 Comments Form

6. Grid Layout

6. SITE STRUCTURE
  6.1 Preloader
  6.2 Header
    - Logo
    - Header Menu
    - Nav Sidebar
  6.3 Billboard
  6.4 About Me Section
  6.5 Portfolio Section
  6.6 Quotation Section
  6.7 Achievement Section
  6.8 Post Grid Section
  6.9 Testimonials Section
  6.10 Footer
    - Footer Top
    - Footer Bottom
  

7. THIRD PARTY COMPONENTS
  7.1 parallax section
  7.2 Blog Page
  7.3 Page Navigation



/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  /* widths for rows and containers
     */
  --header-height: 160px;
  --header-height-min: 80px;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}

/* Theme Colors */
:root {
  --accent-color: #0078d3;
  --secondary-color: #232B37;
  --dark-color: #232B37;
  --grey-color: #f4fafd;
  --heading-color: #232B37;
  --body-text-color: #232B37;
  --light-heading-color: #fff;
  --light-background-color: #f4fafd;
  --light-text-color: #afafaf;
  --bg-text-color: #f4fafd;
  --dark-text-color: #232B37;

  --bs-primary-rgb: 0, 120, 211;
  --bs-secondary-rgb: 35, 43, 55;
}

/* Fonts */
:root {
  --body-font: 'Noto Sans', sans-serif;
  --heading-font: 'Merriweather Sans', sans-serif;
  --secondary-font: 'Merriweather Sans', Georgia, serif;
}

/* Standardized Font Sizes */
:root {
  --font-size-xs: 0.875rem;    /* 14px */
  --font-size-sm: 1rem;        /* 16px - increased from 0.8rem */
  --font-size-base: 1.125rem;  /* 18px - increased from 1rem */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-2xl: 2rem;       /* 32px */
}

/* Mobile Body Padding */
@media (max-width: 767.98px) {
  .container-lg {
    --bs-gutter-x: 65px;
  
  }
}

/* Update existing small text classes */
.small {
  font-size: var(--font-size-sm) !important;
}

.text-muted {
  font-size: var(--font-size-sm);
}

/*----------------------------------------------*/
/* 2 GENERAL TYPOGRAPHY */
/*----------------------------------------------*/
body {
  font-family: var(--body-font);
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--body-text-color);
  padding-top: 132px;

}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s color ease-out;
}

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

/* Typography */
/*----------------------------------------------*/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  line-height: 1.2;
  color: var(--dark-color);
  font-family: var(--heading-font);
}

h1.light,
.h1,
h2.light,
.h2,
h3.light,
.h3,
h4.light,
.h4,
h5.light,
.h5,
h6.light,
.h6 {
  color: #fff;
}

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: var(--grey-color);
  border: 1px solid var(--grey-color);
  border-radius: 4px;
}

pre>code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
  color: var(--accent-color);
}

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1;
}

/* - Button Sizes
------------------------------------------------------------- */
.btn.btn-small {
  padding: 0.325em 1.7em;
  font-size: 0.65em;
}

.btn.btn-medium {
  padding: 0.5em 1.75em;
  font-size: 0.75em;
}

.btn.btn-large {
  padding: 1em 2.5em;
}

.btn.btn-xlarge {
  padding: 1.5em 2.7em;
  font-size: 0.9em;
}

.btn.btn-image {
  background-color: transparent;
  padding: 0;
  max-height: 50px;
}

.btn.btn-image img {
  max-height: 50px;
}

/* - Button Shapes
------------------------------------------------------------- */
.btn.btn-rounded,
.btn.btn-rounded::after {
  border-radius: 4px;
}

.btn.btn-pill,
.btn.btn-pill::after {
  border-radius: 2em;
}

.btn.btn-full {
  display: block;
  margin: .85em 0;
  width: 100%;
  text-align: center;
}

/* button link */
.btn-link {
  display: inline-block;
  font-weight: 600;
  font-size: 19px;
  line-height: 22px;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


.btn-link:hover:after {
  transform: translate3d(0, 5px, 0);
}

/* button with line */
.btn-with-icon {
  color: #fff;
  position: relative;
}

.btn-with-icon:after {
  content: "\e900";
  font-family: "icomoon";
  position: absolute;
  top: 17px;
  right: -16px;
  width: 50%;
  z-index: 9;
  transition: 0.3s ease-out;
}

.btn-with-icon:hover {
  color: #fff;
}

.btn-with-icon:hover:after {
  width: 30%;
  right: -41px;
}

/* - Buttons Color Scheme
------------------------------------------------------------- */
.btn.btn-gray,
.btn.btn-grey {
  background: #9e9e9e;
  color: #fff;
}

.btn.btn-black {
  background: #111;
  color: #fff;
}

.btn.btn-black:hover {
  background-color: var(--secondary-color);
  color: #fff;
}

/*----------------------------------------------*/
/* 2.11 Images */
/*----------------------------------------------*/

/* Image hover Effects */
.image-hvr-effect {
  display: flex;
  overflow: hidden;
}

.image-hvr-effect img.post-image {
  transform: scale(1.1);
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 0;
}

.image-hvr-effect:hover img.post-image {
  transform: scale(1);
}


/*----------------------------------------------*/
/* 2.12 Section */
/*----------------------------------------------*/
/* Hero section
/*----------------------------------------------*/
.hero-section .hero-content {
  padding-top: 18em;
  padding-bottom: 10em;
  display: flex;
  align-items: center;
}

.hero-section {
  position: relative;
  color: var(--heading-color);
  background: linear-gradient(120deg, #eaf4fa 0%, #f6eafd 40%, #f4fafd 100%);
}

.hero-section h1 {
  font-size: 4em;
}

@media only screen and (max-width: 768px) {
  .hero-section h1 {
    font-size: 2em;
  }

  .hero-section .hero-content {
    padding-top: 12em;
    padding-bottom: 6em;
  }
}

.hero-section .container-lg {
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (max-width: 991px) {
  .hero-section .container-lg {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/*--- Section Title
-----------------------------------------------*/
.section-header {
  position: relative;
}

.section-header .btn-link {
  margin-left: 60px;
}

.section-title {
  font-size: 68px;
  line-height: 82px;
  letter-spacing: -0.04em;
  text-transform: capitalize;
}

.section-title.dark {
  color: #303030;
}

.section-title.grey {
  color: #333;
}

.section-title.light {
  color: #fff;
}

@media screen and (max-width: 700px) {
  .section-title {
    font-size: 5em;
  }
}


/* - Section Padding
--------------------------------------------------------------*/
.padding-xsmall {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.padding-small {
  padding-top: 2em;
  padding-bottom: 2em;
}

.padding-medium {
  padding-top: 3em;
  padding-bottom: 3em;
}

.padding-large {
  padding-top: 5em;
  padding-bottom: 5em;
}

.padding-xlarge {
  padding-top: 7em;
  padding-bottom: 7em;
}

.padding-2xlarge {
  padding-top: 15em;
  padding-bottom: 15em;
}

@media only screen and (max-width: 768px) {

  .padding-small,
  .padding-medium,
  .padding-large,
  .padding-xlarge {
    padding-top: 4em;
    padding-bottom: 4em;
  }
}

/* no padding */
.no-padding-bottom {
  padding-bottom: 0 !important;
}

.no-padding-top {
  padding-top: 0 !important;
}

/* - Section margin
--------------------------------------------------------------*/
.margin-small {
  margin-top: 3em;
  margin-bottom: 3em;
}

.margin-medium {
  margin-top: 4.5em;
  margin-bottom: 4.5em;
}

.margin-large {
  margin-top: 6em;
  margin-bottom: 6em;
}

.margin-xlarge {
  margin-top: 7.5em;
  margin-bottom: 7.5em;
}

@media only screen and (max-width: 768px) {

  .margin-small,
  .margin-medium,
  .margin-large,
  .margin-xlarge {
    margin-top: 1em;
    margin-bottom: 1em;
  }
}

/* - Section bg colors
--------------------------------------------------------------*/
.bg-grey {
  background-color: #f4fafd !important;
}

.bg-dark {
  background: var(--dark-color);
}

.bg-light-blue {
  background-color: #f4fafd !important;
}

.bg-orange {
  background-color: #0078d3 !important;
}

/* - Content colors
--------------------------------------------------------------*/
.content-light h1,
.content-light h2,
.content-light h3,
.content-light h4,
.content-light h5,
.content-light h6 {
  color: var(--light-heading-color);
}

.content-light a,
.content-light {
  color: var(--light-text-color);
}

.content-light a:hover {
  color: var(--light-text-color);
}

.content-light h1,
.content-light h2,
.content-light h3,
.content-light h4,
.content-light h5,
.content-light h6 {
  color: var(--light-heading-color);
}

.content-light a,
.content-light {
  color: var(--light-text-color);
}

.content-light a:hover {
  color: var(--light-text-color);
}


/*====================================================================*/
/* 3. EXTENDED TYPOGRAPHY */
/*====================================================================*/
/*----------------------------------------------*/
/* 3.1 Blockquote /Pullquote */
/*----------------------------------------------*/
.single-post .content p:first-child,
.quote blockquote,
blockquote,
.single-post .content blockquote p,
.pullquote-right,
.pullquote-left {
  font-size: 24px;
  line-height: 1.4em;
  margin: 0 0 30px;
  padding: 0;
  color: #727272;
  font-style: italic;
}

.pullquote-right,
.pullquote-left {
  width: 40%;
}

blockquote cite {
  display: block;
  font-size: 0.8em;
  margin-top: 20px;
  font-style: italic;
}

.pullquote-left {
  float: left;
  margin: 20px 20px 20px 0;
}

.pullquote-right {
  float: right;
  margin: 20px 0 20px 20px;
}

/*----------------------------------------------*/
/* 3.2 Dropcap */
/*----------------------------------------------*/
.dropcap {
  display: inline-block;
  margin: 20px;
  font-size: 4em;
  font-weight: bolder;
  text-transform: uppercase;
  text-align: center;
  color: #111;
}

.dropcap.colored {
  color: #2bcaae;
}

/*----------------------------------------------*/
/* 3.3 Text Highlights */
/*----------------------------------------------*/
.highlight {
  background: var(--accent-color);
  color: #fff;
  padding: 1px 5px;
}

.highlight.light {
  background: #ffff99;
  color: #101010;
}

.highlight.dark {
  background: #333;
}

.colored {
  color: #2bcaae !important;
}

/*====================================================================*/
/* 5. BLOG STYLES */
/*====================================================================*/

/* 5.1 Blog Single Post
------------------------------------------*/
/* breadcrumbs */
.breadcrumbs span {
  display: inline-block;
}

/* 5.2 About Author
------------------------------------------*/
.author-post {
  padding-left: 30px;
}

.author-post h4 {
  font-weight: 500;
  text-transform: none;
}

/* 5.3 Comments List
------------------------------------------*/
.comment-meta span.meta-date {
  font-size: 13px;
  padding-right: 10px;
}

.comments-wrap .child-comments {
  padding-left: 50px;
}

/* 5.4 Comments Form
------------------------------------------*/
.comment-respond .comment-form {
  display: flex;
}


/*====================================================================*/
/* 5. Grid Layout */
/*====================================================================*/

/* .container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
} */

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

/* @media screen and (max-width: 991px) {
  .container {
    padding-right: 30px;
    padding-left: 30px;
  }
} */

/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/

/*----- 6.1 Preloader
--------------------------------------------------------------*/
/* Removed #overlayer and .loader loading animation styles */

/*----- 6.2 Header
--------------------------------------------------------------*/
#header .header-wrap {
  position: absolute;
  top: 0;
  z-index: 9;
  padding: 40px;
  width: 100%;
}

/*----- Logo
--------------------------------------------------------------*/
.main-logo a {
  font-size: 2em;
  color: #fff;
  font-weight: 600;
}

.main-logo.dark a {
  color: #000;
}

@media screen and (max-width: 799px) {
  #header .header-wrap {
    padding: 40px 20px;
  }
}

/*----- Header Menu
--------------------------------------------------------------*/
#menu-toggle {
  opacity: 0;
}

#menu-toggle:checked~.menu-btn>span {
  transform: rotate(45deg);
}

#menu-toggle:checked~.menu-btn>span::before {
  top: 0;
  transform: rotate(0);
  background: var(--dark-color);
}

#menu-toggle:checked~.menu-btn>span::after {
  top: 0;
  transform: rotate(90deg);
  background: var(--dark-color);
}

#menu-toggle:checked~.navmenu {
  visibility: visible;
  right: 0;
}

.menu-btn {
  display: flex;
  align-items: center;
  position: fixed;
  top: 20px;
  right: 20px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
  margin: 30px;
}

.menu-btn>span,
.menu-btn>span::before,
.menu-btn>span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--dark-color);
  transition-duration: .25s;
}

.menu-btn.light>span,
.menu-btn.light>span::before,
.menu-btn.light>span::after {
  background-color: var(--dark-color);
}

.menu-btn>span::before {
  content: '';
  top: -8px;
}

.menu-btn>span::after {
  content: '';
  top: 8px;
}

/*----- Nav Sidebar
--------------------------------------------------------------*/
.nav-overlay {
  position: fixed;
  top: 0;
  z-index: 9;
}

.nav-overlay:before,
.nav-overlay:after {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: var(--secondary-color);
  border-bottom-left-radius: 200%;
  z-index: -1;
  -webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
  transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
  -webkit-transform: translateX(100%) translateY(-100%);
  transform: translateX(100%) translateY(-100%);
}

.nav-overlay:after {
  background: var(--grey-color);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.nav-overlay:before {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}

.nav__content {
  position: fixed;
  visibility: hidden;
  top: 50%;
  margin-top: 20px;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: 100%;
  text-align: center;
}

.nav__list {
  position: relative;
  padding: 0;
  margin: 0;
  z-index: 2;
}

.nav__list-item {
  position: relative;
  display: block;
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
  opacity: 0;
  text-align: center;
  color: #fff;
  overflow: hidden;
  font-family: var(--heading-font);
  font-size: 4vh;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 0;
  transition: color .3s ease;
}

.nav__list-item a {
  position: relative;
  text-decoration: none;
  color: rgb(24, 24, 24);
  overflow: hidden;
  cursor: pointer;
  padding-left: 5px;
  padding-right: 5px;
  z-index: 2;
  display: inline-block;
  transition: all 200ms linear;
}

.nav__list-item a:hover {
  color: var(--accent-color);
}

.nav__list-item.active-nav a {
  color: var(--accent-color);
}

body.nav-active .nav__content {
  visibility: visible;
}

body.nav-active .menu-icon__line {
  background-color: var(--light-background-color);
  -webkit-transform: translate(0px, 0px) rotate(-45deg);
  transform: translate(0px, 0px) rotate(-45deg);
}

body.nav-active .menu-icon__line-left {
  width: 15px;
  -webkit-transform: translate(2px, 4px) rotate(45deg);
  transform: translate(2px, 4px) rotate(45deg);
}

body.nav-active .menu-icon__line-right {
  width: 15px;
  float: right;
  -webkit-transform: translate(-3px, -3.5px) rotate(45deg);
  transform: translate(-3px, -3.5px) rotate(45deg);
}

body.nav-active .menu-icon:hover .menu-icon__line-left,
body.nav-active .menu-icon:hover .menu-icon__line-right {
  width: 15px;
}

body.nav-active .nav-overlay {
  visibility: visible;
}

body.nav-active .nav-overlay:before,
body.nav-active .nav-overlay:after {
  -webkit-transform: translateX(0%) translateY(0%);
  transform: translateX(0%) translateY(0%);
  border-radius: 0;
}

body.nav-active .nav-overlay:after {
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}

body.nav-active .nav-overlay:before {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

body.nav-active .nav__list-item {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  -webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, transform .3s ease, color .3s ease;
  transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}

body.nav-active .nav__list-item:nth-child(0) {
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}

body.nav-active .nav__list-item:nth-child(1) {
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

body.nav-active .nav__list-item:nth-child(2) {
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}

body.nav-active .nav__list-item:nth-child(3) {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}

body.nav-active .nav__list-item:nth-child(4) {
  -webkit-transition-delay: 1.1s;
  transition-delay: 1.1s;
}

body.nav-active .nav__list-item:nth-child(5) {
  -webkit-transition-delay: 1.2s;
  transition-delay: 1.2s;
}

body.nav-active .nav__list-item:nth-child(6) {
  -webkit-transition-delay: 1.3s;
  transition-delay: 1.3s;
}

body.nav-active .nav__list-item:nth-child(7) {
  -webkit-transition-delay: 1.4s;
  transition-delay: 1.4s;
}

body.nav-active .nav__list-item:nth-child(8) {
  -webkit-transition-delay: 1.5s;
  transition-delay: 1.5s;
}

body.nav-active .nav__list-item:nth-child(9) {
  -webkit-transition-delay: 1.6s;
  transition-delay: 1.6s;
}

body.nav-active .nav__list-item:nth-child(10) {
  -webkit-transition-delay: 1.7s;
  transition-delay: 1.7s;
}

/*----- 6.3 Billboard
--------------------------------------------------------------*/
#billboard .banner-content {
  padding-bottom: 20px;
}

@media screen and (max-width: 991px) {
  .jarallax {
    min-height: auto;
  }

 
}


/*----- 6.4 About Me Section
--------------------------------------------------------------*/
#about-me .intro {
  margin-right: 60px;
  margin-bottom: 70px;
}

#about-me .intro p {
  line-height: 2.5;
  color: var(--body-text-color);
  ;
}

#about-me .skill-chart ul {
  text-transform: uppercase;
  list-style: none;
}

#about-me .skill-chart li {
  border-bottom: 1px solid #dbdbdb;
  margin-bottom: 40px;
  width: 100%;
}

#about-me .skill-chart li span.skill {
  display: block;
  border-bottom: 3px solid #000;
  padding-bottom: 24px;
  margin-bottom: -2px;
}

.skill-chart li span.twenty-percent {
  width: 20%;
}

.skill-chart li span.thirty-percent {
  width: 30%;
}

.skill-chart li span.forty-percent {
  width: 40%;
}

.skill-chart li span.fifty-percent {
  width: 50%;
}

.skill-chart li span.sixty-percent {
  width: 60%;
}

.skill-chart li span.seventy-percent {
  width: 70%;
}

.skill-chart li span.eighty-percent {
  width: 80%;
}

/*----- 6.5 Portfolio Section
--------------------------------------------------------------*/
.portfolio-item .portfolio-image {
  width: 100%;
  object-fit: cover;
}

.portfolio-item .portfolio-item img {
  transition: transform 0.6s ease-out;
}

.portfolio-item .portfolio-item a {
  display: block;
  overflow: hidden;
}

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

/*----- 6.6 Quotation Section
--------------------------------------------------------------*/
#quotation {
  background-color: #000;
  padding: 150px 20px;
  overflow: hidden;
}

#quotation .icon-overlay {
  position: relative;
}

#quotation .icon-overlay:before,
#quotation .icon-overlay:after {
  position: absolute;
  font-family: "icomoon";
  font-size: 23em;
  color: #3a3a3a;
  padding: 0 20px;
}

#quotation .icon-overlay.left-item:before {
  content: "\e977";
  top: -220px;
  left: 0;
}

#quotation .icon-overlay.right-item:after {
  content: "\e978";
  right: 0;
  bottom: -190px;
}

#quotation blockquote {
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  margin: 70px auto 0;
  text-align: center;
  z-index: 9;
}

#quotation blockquote>p {
  width: 60%;
  margin: 0 auto 35px;
  font-style: normal;
}

#quotation q {
  font-size: 0.7em;
  color: #999;
  width: 100%;
}

@media screen and (max-width: 991px) {
  #quotation blockquote>q {
    width: 85%;
  }
}

/*----- 6.7 Achievement Section
--------------------------------------------------------------*/
#achievement .achievement-block {
  border-bottom: 1px solid #E2E2E2;
  padding-bottom: 30px;
  margin-bottom: 60px;
}

#achievement .achievement-block h3 {
  margin-bottom: 10px;
}


/*----- 6.8 Post Grid Section
--------------------------------------------------------------*/
#post-grid .post-item {
  overflow: hidden;
  position: relative;
  cursor: pointer;
  margin-bottom: 40px;
}

#post-grid .post-item:last-child {
  margin-right: 0;
}

#post-grid a.post-link:before {
  content: '';
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  width: 100%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  transition-duration: 0.8s;
}

#post-grid .post-item:hover a.post-link:before {
  height: 100%;
  top: 0;
  transition-property: top, opacity;
}

#post-grid .post-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  color: #fff;
  padding: 0 35px;
}

#post-grid .post-item h3 {
  font-size: 1.5em;
  line-height: 1.5;
  font-weight: 700;
}

/*----- 6.10 Footer
--------------------------------------------------------------*/

/*-- Footer Top --*/

.footer-menu .subscribe input[type="text"] {
  width: 100%;
  height: 50px;
  border: none;
  background: #F8F8F8;
  text-align: center;
  margin-bottom: 15px;
}

.footer-menu .subscribe button {
  width: 100%;
  height: 50px;
  border: none;
  text-transform: uppercase;
  cursor: pointer;
}


/*-- Footer Bottom --*/

#footer-bottom .social-links ul {
  display: flex;
  list-style: none;
}

#footer-bottom .social-links li {
  margin-right: 30px;
}

#footer-bottom .social-links li:last-child {
  margin-right: 0;
}

#footer-bottom .social-links a {
  color: #fff;
}

#footer-bottom .social-links a:hover {
  color: #fff;
}

#footer-bottom .copyright a {
  color: #d4d4d4;
}

#footer-bottom .copyright a:hover {
  color: #fff;
}


/*--------------------------------------------------------------
/** 7. THIRD PARTY COMPONENTS
--------------------------------------------------------------*/

/*----- 7.1 Parallax Section 
--------------------------------------------------------------*/

.parallax-section {
  overflow: hidden;

  position: relative;
  display: block;
  min-height: 400px;
  background: transparent;
}

.parallax-section .parallax-image {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}


/*----- 7.2 Blog Page 
--------------------------------------------------------------*/
article.post-item {
  margin-bottom: 80px;
}

.post-media {
  margin-right: 30px;
}

.post-media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.post-content {
  padding-top: 30px;
}

.post-content span.meta-date {
  font-style: italic;
}

.post-content h2 {
  font-size: 1.8em;
  font-weight: 600;
  line-height: 1.3em;
  margin: 15px 0;
}

.post-content p>a.btn.btn-common {
  display: block;
  width: 20%;
  margin-top: 30px;
}


/*----- 7.3 Page Navigation 
--------------------------------------------------------------*/

.pagination .page-numbers {
  padding: 10px;
}

.pagination .page-numbers {
  color: #111;
}

.pagination .page-numbers.current {
  color: #fff;
  background: #111;
}

/* comment-list */
.comment-list .commentorImg {
  width: 100px;
  height: 100px;
}

.comment-list .comment-meta h4 {
  margin: 0 10px 0 0;
}


/*----- 8.1 Contact Page 
--------------------------------------------------------------*/
.contact h2.contact-title {
  font-size: 2.5em;
}

.contact .contact-detail {
  margin-left: 50px;
  padding: 50px;
  background-color: #f4f4f4;
}

.contact .detail-item {
  display: flex;
  align-items: baseline;
  margin-bottom: 20px;
}

.contact .detail-item h4 {
  margin: 0;
  padding-right: 20px;
}

.contact .detail-item p {
  margin: 0;
}

/* info box */
.info-box iconify-icon {
  color: var(--accent-color);
  font-size: 52px;
}

/* swiper */
.swiper-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  align-items: center;
  height: 100%;
}

.swiper-button {
  border: 2px solid var(--body-text-color);
  display: block;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--body-text-color);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.swiper-button:hover {
  border-color: var(--dark-color);
  color: var(--dark-color);
}

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

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

.swiper-pagination-clickable .swiper-pagination-bullet {
  margin: 4px;
}

@media screen and (max-width: 991px) {
  .swiper-buttons {
    justify-content: center;
    margin-bottom: 30px;
  }
}

/* Bootstrap theme override 
--------------------------------------------------------------*/

.accordion-button:not(.collapsed) {
  color: var(--accent-color);
  background-color: transparent;
}

.nav-link {
  color: #9099a7;
}

.nav-link:hover {
  color: #111;
}

.tab-content {
  padding: 20px 0;
}

.accordion-button:focus {
  border-color: #e5e6e7;
  box-shadow: none;
}

.accordion-item {
  border-left: 0;
  border-right: 0;
}

.text-muted {
  color: var(--secondary-color) !important;
}

/* primary button */
.btn-link,
.link-primary {
  color: var(--accent-color);
}

.btn-link:focus,
.btn-link:hover,
.link-primary:focus,
.link-primary:hover {
  color: var(--secondary-color);
}

.btn-primary {
  background-color: #0078d3;
  border-color: #0078d3;
}

.btn-primary:focus,
.btn-primary:hover {
  color: #fff;
  background-color: #005fa3;
  border-color: #005fa3;
}

.btn-outline-primary {
  color: #0078d3;
  border-color: #0078d3;
}

.btn-outline-primary:focus,
.btn-outline-primary:hover {
  color: #fff;
  background-color: #0078d3;
  border-color: #0078d3;
}

.border-primary {
  border-color: #0078d3 !important;
}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: #0078d3 !important;
}

.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: var(--secondary-color) !important;
}

.text-white .border-top {
  border-top: 1px solid #3b3e42 !important;
}

.text-white p {
  color: var(--dim-light-color)
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-weight: 700;
}

.display-3 {
  font-size: 2.5rem;
}

.card {
  border-radius: 1rem;
}

.card-body {
  padding: 2rem 2rem;
}


/*---- Portfolio Masonry section style start ----*/

button.filter-button {
  border: none;
  background: transparent;
  color: var(--light-text-color);
  text-align: center;
  font-size: 1rem;
  font-family: var(--heading-font);
  font-weight: 300;
  letter-spacing: 0.02rem;
}

button.filter-button.active {
  color: var(--accent-color);
  padding: 0.56rem 1.19rem;
  border-radius: 30px;
}

button.filter-button:hover {
  color: var(--accent-color);
  padding: 0.56rem 1.19rem;
  border-radius: 30px;
}



svg {
  overflow: visible;
}

.aws-topbar {
  background: linear-gradient(120deg, #eaf4fa 0%, #f6eafd 40%, #f4fafd 100%);
  color: #0078d3;
  font-size: 1rem;
  width: 100%;
  z-index: 1050;
  position: fixed;
  top: 0;
  left: 0;
}
.aws-topbar .dropdown-caret {
  font-size: 0.8em;
  margin-left: 2px;
}
.aws-topbar .icon-globe,
.aws-topbar .icon-user {
  font-size: 1.2em;
  vertical-align: middle;
  margin-right: 4px;
}
.aws-topbar .aws-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: none;
  border: 2px solid #fff;
}
.aws-header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(35,43,55,0.04);
  width: 100%;
  z-index: 1040;
  position: fixed;
  top: 32px;
  left: 0;
}
.aws-logo img {
  height: 111px;
  width: auto;
}
.aws-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.aws-nav a {
  color: #232B37;
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 1.1rem;
  text-decoration: none;
  padding: 8px 0;
  transition: color 0.2s, border-bottom 0.2s;
  border-bottom: 3px solid transparent !important;
}
.aws-nav a.nav-section-active, .aws-nav .nav-section-active {
  border-bottom: 3px solid #0078d3 !important;
  color: #0078d3 !important;
}
.aws-header-actions {
  gap: 16px;
}
.aws-search .icon-search {
  font-size: 1.3em;
  color: #232B37;
  cursor: pointer;
}
.aws-signin {
  color: #232B37;
  font-weight: 500;
  text-decoration: none;
  margin-right: 8px;
}
.aws-create-account {
  background-color: #0078d3;
  border-color: #0078d3;
  color: #fff;
  border-radius: 24px;
  padding: 8px 24px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  transition: background 0.2s;
}
.aws-create-account:hover {
  background-color: #005fa3;
  border-color: #005fa3;
}
@media (max-width: 767.98px) {
  .aws-header .container-lg {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;

    min-height: 56px;

    width: 100vw;
    margin: 0;
    box-sizing: border-box;
  }
  .aws-logo {
    flex: 0 0 auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .aws-hamburger {
    margin-left: auto;
    margin-right: 0;
    z-index: 1100;
    align-self: center;
  }
  .aws-header-actions {
    display: none !important;
  }
  .aws-nav {
    display: block;
    position: static;
  }
  .aws-nav-list {
    display: none !important;
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    box-shadow: 0 8px 32px rgba(35,43,55,0.08);
    border-radius: 0 0 1.5rem 1.5rem;
    margin: 0;
    padding: 1.5rem 0;
    z-index: 1099;
    width: 100vw;
    min-width: 0;
  }
  .aws-nav-list.aws-nav-open {
    display: flex !important;
  }
  .aws-header {
    position: relative;
  }
}

.aws-topbar-title {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #232B37;
  text-align: center;
}

.aws-bottom-actions {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  background: #fff;
  box-shadow: 0 -2px 12px rgba(35,43,55,0.08);
  display: flex;
  gap: 0;
  z-index: 2000;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}
.aws-bottom-actions .btn {
  border-radius: 24px;
  font-size: 1.1rem;
  margin: 0 4px;
  padding: 0.75rem 0;
  min-width: 0;
}
@media (min-width: 768px) {
  .aws-bottom-actions {
    display: none !important;
  }
}

.gary-hero-img-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 180px;
  margin-left: auto;
  margin-right: auto;
}
.gary-hero-img-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  z-index: 0;
  background: conic-gradient(
    #a855f7, #0078d3, #38bdf8, #f472b6, #a855f7
  );
  filter: blur(16px);
  opacity: 0.7;
  animation: gary-glow-rotate 4s linear infinite, gary-glow-pulse 2s infinite alternate;
}
.gary-hero-img {
  position: relative;
  z-index: 1;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  border: 10px solid #fff;
  background: #fff;
  box-shadow: 0 2px 12px rgba(35,43,55,0.08);
}
@keyframes gary-glow-rotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes gary-glow-pulse {
  0% { opacity: 0.5; filter: blur(12px); }
  100% { opacity: 0.9; filter: blur(24px); }
}
@media (max-width: 600px) {
  .gary-hero-img-wrap {
    width: 130px;
    height: 130px;
  }
  .gary-hero-img-wrap::before {
    width: 130px;
    height: 130px;
  }
  .gary-hero-img {
    width: 100px;
    height: 100px;
    border-width: 6px;
  }
}

.scrolling-banner {
  width: 100vw;
  background: #0078d3;
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.5em 0;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
}
.scrolling-banner-inner {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: scrolling-banner-move 18s linear infinite;
}
.scrolling-banner-inner span {
  display: inline-block;
  padding-right: 2em;
}
@keyframes scrolling-banner-move {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.problems-grid {
  margin-top: 2rem;
}
.problem-card {
  box-shadow: 0 2px 16px rgba(35,43,55,0.07);
  border-radius: 1.5rem;
  background: #fff;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: box-shadow 0.2s;
}
.problem-card:hover {
  box-shadow: 0 4px 24px rgba(0,120,211,0.12);
}
.problem-icon-x {
  color: #e53935;
  font-size: 2rem;
  flex-shrink: 0;
}
.problem-icon-check {
  color: #1db954;
  font-size: 2rem;
  flex-shrink: 0;
}
.problem-card .fw-bold {
  font-size: var(--font-size-sm);
  color: #232B37;
}
.problem-card span {
  color: #232B37;
}
.problem-card span:not(.fw-bold) {
  font-size: var(--font-size-sm);
}
@media (max-width: 991px) {
  .problems-grid .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

html, body {
  scroll-behavior: auto !important;
}

.contact-gradient-box {
  background: radial-gradient(circle at 60% 0%, #b3eaff 20%, #ffffff 80%);
  border-radius: 2rem;
  box-shadow: 0 4px 32px rgba(35,43,55,0.08);
  padding: 3rem 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.uk-map-wrap {
  max-width: 400px;
  margin: 0 auto 2rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.uk-map-svg {
  width: 100%;
  height: auto;
  display: block;
}
.uk-city-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0078d3;
  box-shadow: 0 0 10px 3px #0078d355, 0 0 0 2px #fff;
  display: block;
  z-index: 2;
  border: 2px solid #fff;
  position: absolute;
  pointer-events: none;
  animation: uk-dot-pulse 1.6s infinite cubic-bezier(0.66,0,0,1);
}
.uk-dot-london { animation-delay: 0s; }
.uk-dot-manchester { animation-delay: 0.3s; }
.uk-dot-birmingham { animation-delay: 0.6s; }
.uk-dot-liverpool { animation-delay: 0.9s; }
.uk-dot-edinburgh { animation-delay: 1.2s; }
.uk-dot-bristol { animation-delay: 1.5s; }
.uk-dot-leeds { animation-delay: 1.8s; }
@keyframes uk-dot-pulse {
  0% { box-shadow: 0 0 10px 3px #0078d355, 0 0 0 2px #fff; transform: scale(1); }
  50% { box-shadow: 0 0 18px 7px #0078d388, 0 0 0 2px #fff; transform: scale(1.13); }
  100% { box-shadow: 0 0 10px 3px #0078d355, 0 0 0 2px #fff; transform: scale(1); }
}
.uk-city-dot:hover {
  filter: drop-shadow(0 0 32px #0078d3) drop-shadow(0 0 48px #0078d3cc);
  opacity: 1;
}
@media (max-width: 991px) {
  .uk-map-wrap {
    max-width: 320px;
  }
}

/* Hamburger styles */
.aws-hamburger {
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aws-hamburger-box {
  width: 28px;
  height: 22px;
  display: inline-block;
  position: relative;
}
.aws-hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
  position: absolute;
  width: 28px;
  height: 4px;
  background: #232B37;
  border-radius: 2px;
  transition: all 0.3s;
}
.aws-hamburger-inner::before,
.aws-hamburger-inner::after {
  content: '';
  display: block;
  position: absolute;
  width: 28px;
  height: 4px;
  background: #232B37;
  border-radius: 2px;
  transition: all 0.3s;
}
.aws-hamburger-inner::before {
  top: -9px;
}
.aws-hamburger-inner::after {
  bottom: -9px;
}
.aws-hamburger[aria-expanded="true"] .aws-hamburger-inner {
  background: transparent;
}
.aws-hamburger[aria-expanded="true"] .aws-hamburger-inner::before {
  transform: translateY(9px) rotate(45deg);
}
.aws-hamburger[aria-expanded="true"] .aws-hamburger-inner::after {
  transform: translateY(-9px) rotate(-45deg);
}
/* Hide nav links on mobile, show hamburger */
@media (max-width: 767.98px) {
  .aws-nav-list {
    display: none !important;
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    box-shadow: 0 8px 32px rgba(35,43,55,0.08);
    border-radius: 0 0 1.5rem 1.5rem;
    margin: 0;
    padding: 1.5rem 0;
    z-index: 1001;
  }
  .aws-nav-list.aws-nav-open {
    display: flex !important;
  }
  .aws-header {
    position: relative;
  }
}

/* Standardize client/brand logo size in carousel */
.clients-carousel img {
  max-height: 80px;
  padding: 12px 0;
  object-fit: contain;
  width: auto;
  display: inline-block;
  background: #fff;
  box-sizing: content-box;
}

/* --- Mobile navigation layout fix: prevent nav flex expansion so hamburger aligns right --- */
@media (max-width: 767.98px) {
  .aws-nav {
    flex: 0 0 0 !important; /* no flex growth */
    width: 0 !important;    /* reserve no horizontal space */
  }
}

/* --- Mobile navigation final fix: ensure header is fixed and nav overlay --- */
@media (max-width: 767.98px) {
  /* Restore & enforce fixed header just below the topbar */
  .aws-header {
    position: fixed !important;
    top: 32px;
    left: 0;
    width: 100vw;
    min-height: 56px;

    box-shadow: 0 2px 4px rgba(35,43,55,0.04);
    margin: 0;
    padding: 0;
    z-index: 1040;
  }

  /* Take nav out of the flex flow and turn it into a dropdown overlay */
  .aws-nav {
    position: absolute !important;
    top: 100%;
    left: 0;
    width: 100vw;
    flex: none !important; /* don't occupy flex space */
  }

  /* Nav list already absolute; just ensure it spans full width */
  .aws-nav-list {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .aws-nav {
    width: 100vw !important; /* full width so dropdown items aren't clipped */
  }
}

/* --- Mobile topbar collapse on scroll --- */
@media (max-width: 767.98px) {
  .aws-topbar {
    transition: transform 0.3s ease;
  }
  body.compact-topbar .aws-topbar {
    transform: translateY(calc(-100% + 4px)); /* leave a 4px coloured strip visible */
  }
  body.compact-topbar .aws-header {
    top: 4px; /* move main header up to sit under visible strip */
  }
}

.callout-orange {
  background: #e6f1fa;
  border-left: 6px solid #0078d3;
  color: #0078d3;
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(35,43,55,0.08);
}
.callout-orange a,
.callout-orange a:visited {
  color: #0078d3;
}
.callout-orange a:hover {
  color: #005fa3;
}
@media (max-width: 767.98px) {
  .callout-orange {
    font-size: 1rem;
    padding: 1.25rem 1rem;
  }
}

/* Specialisation Cards */
.specialisation-card {
  transition: all 0.3s ease;
  border: 1px solid rgba(0,120,211,0.1);
}

.specialisation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,120,211,0.15);
  border-color: rgba(0,120,211,0.3);
}

.specialisation-icon {
  flex-shrink: 0;
}

.specialisation-card h4 {
  color: var(--dark-color);
  font-weight: 600;
}

.specialisation-card ul li {
  font-size: var(--font-size-sm);
}

/* Tech Stack Cards */
.tech-stack-card {
  transition: all 0.3s ease;
  border: 1px solid rgba(0,120,211,0.1);
}

.tech-stack-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,120,211,0.15);
  border-color: rgba(0,120,211,0.3);
}

.tech-stack-card h4 {
  color: var(--dark-color);
  font-weight: 600;
}

.tech-stack-card ul li {
  margin-bottom: 0.25rem;
  color: var(--body-text-color);
  font-size: var(--font-size-sm);
}

/* Industry Cards */
.industry-card {
  transition: all 0.3s ease;
  border: 1px solid rgba(0,120,211,0.1);
}

.industry-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,120,211,0.15);
  border-color: rgba(0,120,211,0.3);
}

.industry-icon {
  flex-shrink: 0;
}

.industry-card h5 {
  color: var(--dark-color);
  font-weight: 600;
  font-size: 1.1rem;
}

.industry-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.industry-badge {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  background: rgba(0,120,211,0.08);
  color: var(--dark-color);
  border: 1px solid rgba(0,120,211,0.15);
  border-radius: 16px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all 0.3s ease;
}

.industry-badge:hover {
  background: rgba(0,120,211,0.15);
  border-color: rgba(0,120,211,0.3);
  transform: translateY(-1px);
}

.industry-card p.text-muted {
  font-size: var(--font-size-sm);
}

@media (max-width: 767.98px) {
  .industry-badge {
    font-size: var(--font-size-sm);
    padding: 0.4rem 0.8rem;
  }
  
  .industry-card {
    margin-bottom: 1rem;
  }

  .problem-card .fw-bold {
    font-size: var(--font-size-sm);
  }
  
  .problem-card span:not(.fw-bold) {
    font-size: var(--font-size-sm);
  }
}

/* Bootstrap font size overrides */
.fs-5 {
  font-size: var(--font-size-lg) !important;
}

.fs-6 {
  font-size: var(--font-size-base) !important;
}

/* List and text consistency */
ul li {
  font-size: var(--font-size-base);
  line-height: 1.6;
}

p {
  font-size: var(--font-size-base);
  line-height: 1.6;
}

/* Standardized Font Sizes */
.testimonial-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  z-index: 2;
  padding: 0;
  cursor: pointer;
}
#testimonial-arrow-prev {
  left: -48px;
}
#testimonial-arrow-next {
  right: -48px;
}
@media (max-width: 767.98px) {
  #testimonial-arrow-prev {
    left: -8px;
  }
  #testimonial-arrow-next {
    right: -8px;
  }
}
@media (max-width: 767.98px) {
  body {
    padding-bottom: 64px !important;
  }
}

/* --- Testimonial Consistency --- */
.testimonial-carousel .swiper-wrapper {
  display: flex;
  align-items: stretch;
}
.testimonials-inner {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
@media (max-width: 991px) {
  .testimonials-inner {
    min-height: 0;
  }
}

/* --- Blog Page Styles --- */
/* Blog Hero Section */
#blog-hero {
  padding: 120px 0 80px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.blog-hero-icon-wrap {
  display: inline-block;
  padding: 2rem;
  background: rgba(0, 120, 211, 0.1);
  border-radius: 50%;
}

/* Blog Grid */
.blog-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-card-inner {
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.1);
}

.blog-card:hover .blog-card-inner {
  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

.blog-card-image {
  overflow: hidden;
}

.blog-card-image img {
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-meta {
  font-size: 0.875rem;
}

.blog-title a {
  transition: color 0.3s ease;
}

.blog-title a:hover {
  color: var(--accent-color) !important;
}

/* Category Cards */
.category-card {
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.1);
}

.category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
  border-color: var(--accent-color);
}

.hover-lift:hover {
  transform: translateY(-3px);
}

/* Single Blog Post */
.single-blog-post {
  padding-top: 0;
}

.blog-hero-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  margin-top: -32px; /* Compensate for header */
  padding-top: 120px !important;
}

.blog-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.blog-meta span {
  display: inline-block;
  margin-bottom: 0.5rem;
}

.blog-title {
  color: var(--heading-color);
  line-height: 1.2;
}

.blog-featured-image img {
  max-height: 500px;
  object-fit: cover;
}

.blog-content {
  font-size: var(--font-size-base);
  line-height: 1.8;
}

.blog-content h2,
.blog-content h3,
.blog-content h4 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.blog-content p {
  margin-bottom: 1.5rem;
}

.blog-content blockquote {
  border-left: 4px solid var(--accent-color);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--secondary-color);
}

.blog-content ul,
.blog-content ol {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

.blog-content li {
  margin-bottom: 0.5rem;
}

.blog-content code {
  background: rgba(0,0,0,0.1);
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
}

.blog-content pre {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.blog-content pre code {
  background: none;
  padding: 0;
}

/* Blog Tags */
.tag-cloud .btn {
  border-radius: 20px;
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

/* Author Bio */
.author-bio {
  background: rgba(0,0,0,0.02);
  padding: 2rem;
  border-radius: 1rem;
}

/* Blog Navigation */
.blog-navigation {
  border-top: 1px solid rgba(0,0,0,0.1);
}

.nav-previous a,
.nav-next a {
  color: var(--body-text-color);
  transition: color 0.3s ease;
}

.nav-previous a:hover,
.nav-next a:hover {
  color: var(--accent-color);
}

.nav-post-title {
  font-weight: 600;
  margin-top: 0.25rem;
}

/* Related Posts */
.related-posts .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-posts .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.related-posts .card-title a {
  transition: color 0.3s ease;
}

.related-posts .card-title a:hover {
  color: var(--accent-color) !important;
}

/* Breadcrumbs */
.breadcrumb {
  background: none;
  padding: 0;
  margin: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--accent-color);
  font-weight: bold;
}

.breadcrumb-item a {
  color: var(--accent-color);
  transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
  color: var(--secondary-color);
}

.breadcrumb-item.active {
  color: var(--secondary-color);
}

/* Pagination */
.pagination .page-link {
  border-radius: 0.5rem;
  margin: 0 0.25rem;
  border: 1px solid rgba(0,0,0,0.1);
  color: var(--accent-color);
}

.pagination .page-link:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
}

.pagination .page-item.active .page-link {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.pagination .page-item.disabled .page-link {
  color: var(--light-text-color);
  border-color: rgba(0,0,0,0.1);
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .blog-hero-header {
    padding-top: 100px !important;
    padding-bottom: 3rem !important;
  }
  
  .blog-title {
    font-size: 2rem;
  }
  
  .blog-meta span {
    display: block;
    margin-bottom: 0.5rem;
  }
  
  .nav-previous,
  .nav-next {
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .nav-next {
    text-align: center !important;
  }
}

@media (max-width: 575.98px) {
  .blog-hero-content {
    padding: 0 1rem;
  }
  
  .blog-title {
    font-size: 1.75rem;
  }
}

/* --- Index.php Blog Layout Styles --- */
.blog-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  margin-top: -32px; /* Compensate for header */
  padding-top: 120px !important;
}

.blog-post-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post-card:hover {
  transform: translateY(-5px);
}

.blog-post-card .card {
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.1);
}

.blog-post-card:hover .card {
  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

.blog-post-card .card-img-top {
  overflow: hidden;
}

.blog-post-card .card-img-top img {
  transition: transform 0.3s ease;
}

.blog-post-card:hover .card-img-top img {
  transform: scale(1.05);
}

.blog-post-card .card-title a {
  transition: color 0.3s ease;
}

.blog-post-card .card-title a:hover {
  color: var(--accent-color) !important;
}

.blog-post-card .blog-meta {
  font-size: 0.875rem;
}

.blog-post-card .blog-meta span {
  display: inline-block;
  margin-bottom: 0.5rem;
}

.blog-post-card .blog-footer {
  margin-top: auto;
}

/* Responsive adjustments for index blog */
@media (max-width: 767.98px) {
  .blog-header {
    padding-top: 100px !important;
    padding-bottom: 3rem !important;
  }
  
  .blog-post-card .blog-meta span {
    display: block;
    margin-bottom: 0.5rem;
  }
}

/* --- Category and Tag Page Styles --- */
#category-hero,
#tag-hero {
  padding: 120px 0 80px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  margin-top: -32px; /* Compensate for header */
}

.tag-card {
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.1);
}

.tag-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
  border-color: var(--accent-color);
}

.tag-card .tag-icon {
  color: var(--accent-color);
}

.tag-card .tag-name {
  font-weight: 600;
}

.tag-card .tag-count {
  font-size: 0.875rem;
}

/* Category and tag page responsive adjustments */
@media (max-width: 767.98px) {
  #category-hero,
  #tag-hero {
    padding-top: 100px !important;
    padding-bottom: 3rem !important;
  }
  
  .tag-card {
    margin-bottom: 1rem;
  }
}

/* --- Page Template Styles --- */
.single-page {
  padding-top: 0;
}

.page-hero-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  margin-top: -32px; /* Compensate for header */
  padding-top: 120px !important;
}

.page-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.page-title {
  color: var(--heading-color);
  line-height: 1.2;
  font-weight: 700;
}

.page-excerpt {
  font-size: var(--font-size-lg);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.page-featured-image img {
  max-height: 500px;
  object-fit: cover;
}

.page-content {
  font-size: var(--font-size-base);
  line-height: 1.8;
}

.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--heading-color);
  font-weight: 600;
}

.page-content h2 {
  font-size: 2rem;
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 0.5rem;
}

.page-content h3 {
  font-size: 1.5rem;
  color: var(--secondary-color);
}

.page-content h4 {
  font-size: 1.25rem;
}

.page-content p {
  margin-bottom: 1.5rem;
}

.page-content blockquote {
  border-left: 4px solid var(--accent-color);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--secondary-color);
  background: rgba(0,0,0,0.02);
  padding: 1.5rem;
  border-radius: 0.5rem;
}

.page-content ul,
.page-content ol {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

.page-content li {
  margin-bottom: 0.5rem;
}

.page-content code {
  background: rgba(0,0,0,0.1);
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
  font-family: 'Courier New', monospace;
}

.page-content pre {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid rgba(0,0,0,0.1);
}

.page-content pre code {
  background: none;
  padding: 0;
}

.page-content table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  background: white;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.page-content table th,
.page-content table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.page-content table th {
  background: var(--accent-color);
  color: white;
  font-weight: 600;
}

.page-content table tr:hover {
  background: rgba(0,0,0,0.02);
}

.page-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1rem 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.page-content a {
  color: var(--accent-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.3s ease;
}

.page-content a:hover {
  border-bottom: 1px solid var(--accent-color);
}

.page-footer {
  background: rgba(0,0,0,0.02);
  padding: 2rem;
  border-radius: 1rem;
  margin-top: 3rem;
}

.page-meta {
  font-size: 0.875rem;
}

.page-actions .btn {
  border-radius: 0.5rem;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}

/* Responsive adjustments for pages */
@media (max-width: 767.98px) {
  .page-hero-header {
    padding-top: 100px !important;
    padding-bottom: 3rem !important;
  }
  
  .page-title {
    font-size: 2.5rem;
  }
  
  .page-excerpt {
    font-size: var(--font-size-base);
  }
  
  .page-footer {
    text-align: center;
  }
  
  .page-actions {
    margin-top: 1rem;
  }
  
  .page-actions .btn {
    display: block;
    margin: 0.5rem 0;
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .page-hero-content {
    padding: 0 1rem;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .page-content h2 {
    font-size: 1.75rem;
  }
  
  .page-content h3 {
    font-size: 1.25rem;
  }
}