/**
 * Plugin Name: Flexible Content Builder
 * File: flexible-content-builder.css
 * Description: Front-end styles for rendering reusable ACF flexible layouts.
 * Author: Paul Stevens
 * Version: 1.0
 */
:root {
  --color-primary: #eeb111;
  --color-secondary: #231f20;
  --color-accent: #002166;
  --color-dark: #231f20;
  --color-light: #f4f4f4;
  --color-dark-highlight: #002b64;
  --color-white: #ffffff;
  --color-grey-border: #dee2e6;

  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'PT Sans', sans-serif;

  --radius-soft: 15px;
  --radius-pill: 50px;

  --transition-speed: 0.3s;

  --container-padding: 1rem;
  --gap: 1rem;
  
  --hero-bg-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.745) 0%, rgba(128, 128, 128, 0) 100%);
  --hero-height: 100%;
  --hero-heading: 70px;
  --h2-size: 40px;
  --h2-color: #eeb111;
  --h2-margin-bottom: 30px;
  --h3-size: 32px;
  --h3-color: #231f20;
  --h2-margin-bottom:30px;
  --h4-size: 20px;
  --h4-color: #002166;
  --h4-margin-bottom:20px;
  --icon-color: #cf1e30;
}
/*************flexible content general styling********************/
.email a {
	color: var(--color-primary) !Important;
	}
.container.flexible-container{
	margin: 35px auto !important;
}
.address-shortcode {
    margin-bottom: 16px;
}
.acf-map {
    margin: 30px 0px;
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 2s !important;
  animation-duration: 2s !important;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.flexible-row {
  margin: 60px 0;
  padding: 0 5px;
}
.btn{
	 clip-path: polygon(10% 0%, 100% 0, 90% 100%, 0 100%);
}
/*********hero section**************/
.archive-page-heading {
  margin-bottom: 0;
  background-position: 60% 50%;
  background-size: cover !important;
  background: var(--hero-bg-gradient), url('your-background-image-url');
}

.hero-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--hero-height);
}

.content-wrapper {
  max-width: 50%;
  width: 100%;
  text-align: left;
}

.posts-heading h1 {
  margin-top: 0;
  margin-bottom: 25px;
  font-size: var(--hero-heading);
}

.posts-subheading h3 {
  font-size: 25px;
  line-height: 1.3;
}
a.btn.black.medium.hero {
    font-size: 20px;
    padding: 15px 36px;
}
.btn {
  margin-bottom: 10px;
}
.hero-section h1, .hero-section p {
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .content-wrapper {
    max-width: 90% !important;
    padding-left: 5%;
  }
  .archive-page-heading.fadeIn {
    background-position: 20% 50% !important;
}
  .posts-heading h1 {
  
  font-size: calc(var(--hero-heading) * 0.45);
  }
}
@media (max-width: 960px) {
  .content-wrapper {
    max-width: 90% !important;
    padding-left: 5%;
  }
  .posts-heading h1 {
  
  font-size: calc(var(--hero-heading) * 0.7);
  }
}
/**************massive quote*************/
.massive-quote {
  position: relative;
  border: 7px solid var(--color-dark-highlight);
  padding: 20px;
  margin: 35px 20px;
  border-radius: var(--radius-soft);
  padding-bottom: 35px;
}

.massive-quote blockquote {
  margin: 0;
  position: relative;
  padding-right: 5%;
}

.massive-quote::before,
.massive-quote::after {
  font-size: 72px;
  color: var(--color-dark-highlight);
  font-family: fantasy;
  background: var(--color-white);
  padding-top: 28px;
}

.massive-quote::before {
  content: "“";
  position: absolute;
  top: 14px;
  left: -14px;
  line-height: 0.5;
}

.massive-quote::after {
  content: "”";
  position: absolute;
  bottom: 16px;
  right: -16px;
  line-height: 0.5;
}

blockquote:not(.etheme-blockquote) {
  border-left: none;
}

span.massive-citation {
  display: contents;
  float: right;
  font-size: 20px;
  font-weight: bold;
}

/******************cta section*********/
.cta-row {
  margin: 75px 0;
  background-size: cover !important;
}

.cta-container.col-md-9 {
  padding: 250px 5% !important;
}

.cta-container h2 {
  color: var(--h2-color);
  font-size: var(--h2-size);
}

.cta-container h3 {
  color: white;
  font-weight: 100;
  line-height: 1.6;
  margin-bottom: 30px;
  text-align: justify;
}

/****************statistics blocks*************/
.featured-stats h3 {
  font-size: 40px;
}

.featured-stats h4 {
  font-size: 20px;
}

.container.featured-statistics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  max-width: 960px;
  width: 100%;
  margin: 75px auto;
  padding: 0 var(--container-padding) 6rem var(--container-padding);
  box-sizing: border-box;
}

.statistics-box {
  width: 218px;
  height: 218px;
  background: rgba(1, 34, 65, 0.65);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  overflow: hidden;
  transition: background-color var(--transition-speed);
  border-radius: var(--radius-pill);
  margin: 0;
}

.statistics-number {
  font-size: 54px;
  font-weight: 900;
  margin-top: 20px;
  font-family: var(--font-secondary);
  line-height: 1.2;
  color: var(--color-white);
  transition: background-color var(--transition-speed);
}

.statistics-number::after {
  content: " +";
  color: var(--color-accent);
  font-weight: bold;
  margin-left: 1px;
  float: right;
}

.statistics-um {
  font-size: 28px;
  font-weight: 900;
  text-transform: capitalize;
  font-family: var(--font-primary);
  line-height: 1.5;
}

.statistics-text {
  padding: 20px;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--font-primary);
  line-height: 1.1;
  text-transform: capitalize;
  color: var(--color-accent);
}

.statistics-box:hover {
  background: var(--color-secondary);
}

.statistics-box:hover .statistics-number {
  color: var(--color-primary);
}

.statistics-box:hover .statistics-text {
  color: var(--color-dark);
}

.supporting-text.container {
  margin-top: -44px;
  margin-bottom: 20px;
}

/***********end refactor segment***********/



/*****************numbered List CSS****************/
.numbered-list {
    list-style: none !important;
    padding-left: 0;
    margin: 0;
    counter-reset: list-item;
}
.numbered-list > li::marker {
    display: none !important;
  content: "" !important;
}

.number-list-item {
    position: relative;
    padding-left: 8em;
    margin-bottom: 4.5em !important;
    padding-top: 1em !important;
    counter-increment: list-item;
    font-size: 20px !important;
}

.number-list-item::before {
    content: counter(list-item);
    position: absolute;
    left: 0;
    top: 0;
    width: 2em;
    height: 2em;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 2.5em;
    text-align: center;
    border-radius: 50%;
    line-height: 2em;
    padding-left: 4px;
}
.numbered-list li {
  list-style-type: none !important;
}
@media (max-width: 600px) {
    .number-list-item::before {
        font-size: 1.2em;
        top: 25px;
    }
    .number-list-item {
        padding-left: 4em;
    }
}




/************check-list************/
.check-list {
    margin: 0;
    padding: 0;
}
.check-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.check-list-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.check-icon {
    width: 95px;
    height: auto;
    flex-shrink: 0;
    margin-right: 60px;
    object-fit: contain;
}
.check-content {
    border: 2px solid gray !important;
    border-radius: var(--radius-soft) !important;
    padding: 30px !important;
    text-align: left !important;
}
li.check-list-item {
    list-style: none;
    margin-bottom: 35px !important;
}
.check-content h4 {
    margin: 0 0 5px 0;
    font-size: 1.2em;
    color: var(--color-secondary);
    font-weight: 600;
}
.check-content p {
    margin: 0;
    font-size: 1em;
    color: #555;
}
@media (max-width: 600px) {
    .check-list-item {
        align-items: flex-start;
    }
    .check-icon {
        margin-bottom: 5px;
        margin-right: 10px;
        width: 40px;
        height: auto;
        padding-top: 35px;
    }
}
/* Remaining sections to be refactored in the next update */

/***********image-text styling 50 50 and 33 66**************/
.has-image {
    overflow: hidden !important;
    border-radius: var(--radius-soft) !important;
    position: relative;
}
.flexible-row.fifty-fifty-row.fadeIn {
    gap: 50px;
    display: flex;
	flex-wrap:wrap;
}
.has-image-fifty img,
.single-image img,
.has-image-thirtythree img {
   /* border-radius: var(--radius-soft);*/
	 clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
  overflow: hidden;
}

.has-image-fifty img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.img-img-container.col-md-4 {
    min-width: 300px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.img-txt-container.col-md-7 {
    padding: 15px;
}

.has-image-thirtythree img {
    object-fit: cover !important;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
}

.image-txt.two-thirds-row.fadeIn {
    margin: 25px 0px;
}
.image-txt.fifty-fifty-row.fadeIn {
 display:flex !important;
 flex-wrap:wrap;
 gap:35px;
}
.fifty-fifty-row .col-md-6 {
    flex: 2;
    min-width: 300px;
    padding: 0px;
	
}
/****feature-benefit styling*****/
.feature-benefit-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 35px;
    gap: 35px;
}

.flex-feature {
    min-width: 250px;
    flex: 0 1 30%;
    box-sizing: border-box;
}

.flex-feature h4,
.feature-info h4 {
    font-weight: bold;
    color: var(--color-primary);
}

.flex-feature img {
    padding-bottom: 25px;
    margin: auto;
    display: block;
    text-align: center;
    height: 150px;
    width: auto;
}

.flex-feature a {
    display: block;
    transition: transform var(--transition-speed) ease;
}

.flex-feature a:hover {
    transform: scale(1.05);
}

.feature-benefit h3,
.featured-categories h3 {
    margin-bottom: 65px;
    text-align: center;
    margin: auto;
}

/*** feature boxes styling*****/
.featured-boxes {
    margin: 40px 0px;
	
}
.featured-boxes h2{
	font-size: var(--h2-size);
	color: var(--h2-color);
	text-align: center;
	margin-bottom:20px;
}
p.benefits-subhead {
    text-align: center;
}
.featured-boxes h4{
	font-size: var(--h4-size);
	color: var(--h4-color);
	margin-bottom: var(--h4-margin-bottom) !important;
	max-width: 70%;
    text-align: center;
    display: inline-block;
    line-height: 1.3;
    margin-top: 12px;
}
.featured-categories h4 {
    
}
.featured-boxes h3,
.featured-boxes h4 {
    text-align: center;
    margin-bottom: 15px;
}

.feature-info.shadow-box.align-left {
    padding: 30px;
}

@media only screen and (max-width: 900px) {
  .flex-feature {
    flex: 0 1 45%;
  }
}

@media only screen and (max-width: 600px) {
  .solutions-table th,
  .solutions-table th:first-child,
  .solutions-table th:last-child {
    padding: 21px 20px;
    font-size: 1em;
  }
  .solutions-table td:first-child {
    font-size: 12px;
  }
  .solutions-table td {
    padding: 10px !important;
  }
  .solutions-table i {
    padding: 12px;
    font-size: 25px;
  }
  .solutions-table td p,
  .solutions-table ul li {
    font-size: 10px !important;
    text-align: left !important;
  }
  .solutions-table ul {
    padding: 15px;
  }
  .feature-benefit-row {
    column-gap: 1px;
  }
  .flex-feature {
    min-width: 250px;
    flex: 1;
    box-sizing: border-box;
  }
}

/**********feature boxes front page**********/
.featured-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    justify-items: normal;
    gap: 35px;
    margin-bottom: 35px;
	margin-top: 35px;
}

.feature-box {
    flex-grow: 3;
    width: 300px;
}

.feature-info i {
    font-size: 32px;
    padding: 8px;
    color: var(--icon-color);
}

.feature-info p {
    line-height: 1.4;
    font-size: 15px;
	margin-top:10px;
}

.feature-info.shadow-box.align-left {
    padding: 15px 25px;
}


.feature-heading .icon {
    vertical-align: top;
}

/*****solutions table******/
table thead {
    background-color: var(--color-primary);
}

#SolutionsTable td,
.solutions-table td {
    border: 1px solid var(--color-grey-border);
}

.solutions-table th,
.solutions-table th:first-child,
.solutions-table th:last-child {
    color: var(--color-white);
    text-align: center;
    text-transform: capitalize;
    padding: 21px 30px;
    font-size: 1.4em;
}

.solutions-table.shadow-box {
    padding: 0px !important;
    display: inline-table !important;
}

.solutions-table td:last-child,
.solutions-table th:last-child {
    padding-right: 10px !important;
    text-align: left !important;
}

.solutions-table td p {
    text-align: left;
}

.solutions-table td:first-child {
    background: aliceblue;
    color: var(--color-primary);
    font-size: 18px;
    font-weight: 400;
    vertical-align: middle;
}

.solutions-table i {
    display: block;
    padding: 12px;
    font-size: 30px;
}

/****client logos section**************/
flexible-container,
.client-logos h3 {
    text-align: center;
	margin-bottom:var(--h3-margin-bottom);
}
.client-logos h2 {
	font-size: var(--h2-size);
	color: var(--h2-color);
	text-align:center;
	margin-bottom: var(--h2-margin-bottom);
}
.client-logos h3 {
	font-size: var(--h3-size);
	color: var(--h3-color);
	text-align:center;
	margin-bottom: var(--h3-margin-bottom);
}
.logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
    padding: 3rem 0;
    max-width: 1200px;
    margin: 35px auto;
}

.logo-item {
    flex: 1 1 200px;
    max-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-item img {
    max-width: 100%;
    max-height: 130px;
    object-fit: contain;
}

/**********full width section******/
.full-width-row {
    width: 100%;
    padding: 0.5rem 0;
    box-sizing: border-box;
}

.full-width-row .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

.full-width-content {
    width: 100%;
    max-width: 100%;
}

.full-width-content > * {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}



/**********styles for tablet***********/
@media only screen and (max-width: 900px) {
	.flex-feature {
    flex: 0 1 45%;    
}
	
}

/* Styles for the first column on mobile screens */
@media only screen and (max-width: 600px) {
  
.solutions-table th, .solutions-table th:first-child, .solutions-table th:last-child {
    padding: 21px 20px;
    font-size: 1.0em;
}
.solutions-table td:first-child {
    font-size: 12px;	
    
}
.solutions-table td {
   padding: 10px !important;
}
.solutions-table i {
    padding: 12px;
    font-size: 25px;
}
.solutions-table td p {
    font-size: 10px !important;    
}
.solutions-table ul li {
    font-size: 10px !important;
	text-align:left !important;
}
.solutions-table ul {
    padding: 15px;
}
.feature-benefit-row {
   	column-gap: 1px;
	
}
.flex-feature {
    min-width: 250px;    
    flex: 1;
	box-sizing: border-box;
}
}
/************staff section*********/
/************ Staff Section ************/
.staff-section h2 {
    color: var(--h2-color);
	font-size: var(--h2-size) !important;
}
.contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 3rem 0;
}

/* Three across layout, responsive down to one */
.single-contact {
  flex: 1 1 calc(33.333% - 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-white);
  border: 1px solid #d4d4d4;
  border-radius: var(--radius-soft);
  box-shadow: 0 6px 25px 0 rgba(1, 1, 1, 0.12);
  padding: 2rem 1rem;
  transition: all 0.25s ease;
  max-width: 360px;
}

/* Staff image container */
.staff-image {
  width: 150px;
  height: 150px;
  margin-bottom: 1rem;
  position: relative;
}
.staff-image::before {
    content: "";
    position: absolute;
    top: 4%;
    left: -6%;
    width: 111%;
    height: 92%;
    background: var(--color-primary);
    transform: skew(-20deg);
    z-index: -1;
    border-radius: var(--radius-soft);
}


.staff-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: 1 / 1;  
}
.staff-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: none;
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.staff-image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Text content */
.staff-desc h3 {
  font-size: 1.5rem;
  margin: 0.5rem 0;
  color: var(--color-primary);
}

.staff-desc h5 {
  font-size: 1.1rem;
  margin: 0.25rem 0;
  color: #333;
}

.staff-desc p {
  font-size: 0.95rem;
  color: #666;
  margin: 0.5rem 0 1rem;
}

/* Contact info */
.staff-contact {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.contact-details a,
.contact-details i {
  font-size: 1rem;
  color: var(--color-primary);
}

.contact-details i {
  margin-right: 5px;
}

/* Hover state */
.contact-details a:hover i {
  color: var(--color-dark-highlight);
}
/**skewed boxes**/
.single-contact {
  position: relative;
  overflow: hidden;
  transform: skew(-5deg);
  background: var(--color-white);
  padding: 2rem 1rem;
  box-shadow: 0 6px 25px 0 rgba(1, 1, 1, 0.12);
  border-radius: var(--radius-soft);
}

.single-contact > * {
  transform: skew(5deg); /* Undo skew inside */
}

/*********** Responsive Layout ***********/
@media (max-width: 1024px) {
  .single-contact {
    flex: 1 1 calc(50% - 2rem);
  }
}

@media (max-width: 640px) {
  .single-contact {
    flex: 1 1 100%;
  }
}
/* Service Boxes Section */
.service-box-section {
  padding: 8rem 2rem;
  text-align: center;
}

.service-box-heading {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #333;
}

.service-box-subheading {
  font-size: 1.125rem;
  margin-bottom: 3rem;
  color: #666;
}

.service-box-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.service-box-wrapper {
  position: relative;
  max-width: 320px;
}

.service-box-bg {
    background-color: #eeb111;
    position: absolute;
    top: -10px;
    left: 7px;
    width: 92%;
    height: 86px;
    z-index: 0;
    transform: skewX(-19deg);
}

.service-box {
    background: #fff;
    padding: 2rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
    clip-path: polygon(30px 0%, 100% 0%, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0% 100%, 0% 94px);
    transition: transform 0.3s ease;
    margin-top: 24px;
}

.service-box:hover {
  transform: translateY(-4px);
}

.service-box-inner {
  position: relative;
  z-index: 2;
}

.service-icon i {
  font-size: 2.5rem;
  color: #003366;
}
.service-icon {
    margin-bottom: 1.2rem;
}
.service-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.service-description {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #555;
}

.service-link {
  display: inline-block;
  margin-top: 0.5rem;
  color: #003366;
  font-weight: 600;
  text-decoration: underline;
  visibility: visible;
}