/*
Theme Name: Pavelcomm IT Services
Theme URI: http://connect.qodeinteractive.com
Description: A child theme of Connect Theme
Author: Mikado Themes
Author URI: http://themeforest.net/user/mikado-themes
Version: 1.0.1
Template: connectwp
*/

/* Load Montserrat (Google Font) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');


/* Hide all comment UI & closed-message text */
#comments,
.comments-area,
p.no-comments,
.nocomments,
.comments-title,
.comment-respond,
.entry-meta .comments-link { display: none !important; }

/* --- spacer ---*/

.mkd-full-width-inner {
	padding-bottom: 0px !important;
	 border-bottom: none !important;
	/* border-bottom: 5px solid #5B5B5B; */
}

/* --- spacer ---*/


/* Page 34 — remove the Mikado Title band (gray area), keep header/menu */
.page-id-34 .mkd-title.mkd-standard-type,
.page-id-34 .mkd-title {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Ensure content/slider start flush under the header */
.page-id-34 .mkd-content,
.page-id-34 .mkd-content-inner,
.page-id-34 main {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
}

.page-id-34 .rev_slider_wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/*--- spacer ---*/

/* Center the main column on all Default template pages */
.page-template-default .mkd-page-content-holder.mkd-grid-col-12 {
  max-width: 800px !important;
  width: 100%;
  float: none;           /* Mikado grid floats cols left — disable it */
  display: block;        /* ensure block for auto margins */
  margin-left: auto;     
  margin-right: auto;
}

/* If a flex row is enforcing left alignment, nudge it to center the child */
.page-template-default .mkd-grid-row,
.page-template-default .mkd-grid-row .mkd-grid-col-12 {
  justify-content: center;         /* when it's flex */
}

/* Nice padding on smaller screens */
@media (max-width: 820px) {
  .page-template-default .mkd-page-content-holder.mkd-grid-col-12 {
    max-width: 100%;
    padding: 0 20px;
  }
}

/* Desktop / default */
.vc_column_container > .vc_column-inner{
  max-width: 980px !important;
  width: 100% !important;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 4em !important;
  box-sizing: border-box; /* just in case */
}


/*--- spacer ---*/

/* Global CTA Button */
.custom-cta-btn {
  display: inline-block;
  margin-top: 0px;
  padding: 5px 14px;
  background-color: #ce202c;   /* deep red */
  color: #ffffff;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 10px;         /* pill style */
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Hover effect: inverted */
.custom-cta-btn:hover {
  background-color: #B4B4B4;   /* dark gray/navy (title area color) */
  /* color: #ce202c; */             /* red text */
  color: #FFF;  /*white text */
}

/*--- spacer ---*/

/* Global CTA Button red background white text*/
.custom-cta-btn-red-1 {
  display: inline-block;
  margin-top: 0px;
  padding: 5px 14px;
  background-color: #ffffff;   /* deep red */
  color: #ce202c;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 10px;         /* pill style */
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Hover effect: inverted */
.custom-cta-btn-red-1:hover {
  background-color: #B4B4B4;   /* dark gray/navy (title area color) */
  /* color: #ce202c; */             /* red text */
  color: #FFF;  /*white text */
}

/*--- spacer ---*/

/* Make all Mikado Title Area page titles white, site-wide */
h1 {
  color: #fff !important;
}

.mkd-title .mkd-title-holder .mkd-subtitle {
	    margin-top: 0px !important;
}

/*--- spacer ---*/

/* H2s inside the main content area - Default (desktop + tablet) */
/* Default (desktop + tablet) */
h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 40px !important;
  margin-bottom: 30px !important;
}

/* Medium screens (tablets, smaller laptops) */
@media (max-width: 1024px) {
  h2 {
    font-size: 32px !important;      /* slightly smaller */
    margin-bottom: 24px !important;
  }
}

/* Small screens (phones) */
@media (max-width: 767px) {
  h2 {
    font-size: 26px !important;      /* mobile-friendly */
    margin-bottom: 18px !important;
  }
}


/*--- spacer ---*/

/* footer h2 styles */
.widget mkd-footer-column-2 widget_block .wp-block-heading {
	font-size:24px !important;
}

/*--- spacer ---*/
/* Match list items to paragraph font size */
p, li {
  font-size: 16px !important;   /* adjust to whatever your paragraph size is */
  line-height: 1.6 !important;  /* keep consistent spacing */
	  color: #000 !important;
}



/*--- spacer ---*/

/* Dark overlay on title image */
.mkd-title-image {
  position: relative;
  z-index: 0;
}

.mkd-title-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45) !important; /* tweak the 0.45 value */
  pointer-events: none;
  z-index: 1;
}

/* Make sure text content sits above overlay */
.mkd-title-holder,
.mkd-title-subtitle-holder {
  position: relative;
  z-index: 2;
}


/*--- spacer ---*/

/* Step wrapper */
.pc-step { 
  text-align: center;
  max-width: 420px;
  margin: 0 auto 30px;
  padding: 0 15px;
}

/* Number badge */
.pc-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #8A2432;   /* Pavelcomm red */
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: all 0.25s ease; /* smooth hover transition */
}

/* Complete + close the hover rule */
.pc-step-badge:hover {
  /* tweak as you like */
  background: #6f1a27;   /* darker red on hover */
  transform: translateY(-2px) scale(1.03);
}

/*--- spacer ---*/

/* Control testimonial image (avatar) size */
.mkd-testimonial-image img {
  width: 80px;
  height: 80px;
  object-fit: cover;  /* keeps proportions */
  border-radius: 50%; /* keeps it circular */
}

/* Add spacing between testimonials */
.mkd-testimonials-holder .mkd-testimonial {
  margin-bottom: 30px;
}

.mkd-testimonial-content slick-slide {
	width:800px !important;
}
	
.mkd-testimonials .mkd-testimonial-text {
  font-size: 22px;
  line-height: 1.6;
  max-width: 900px;
  margin: 0 auto 0px;
  text-align: center;
}

.mkd-testimonials .mkd-testimonial-author {
  font-size: 18px;
  text-align: center;
  opacity: .85;
}
	
/* Remove decorative quote mark in Mikado testimonials (all variants) */
.mkd-testimonial-quote {
  display: none !important;
}

/*--- spacer ---*/
	
/* Mikado/WPBakery rows/sections with the Pavelcomm red bg → force white text */
.mkd-row-section[style*="#ce202c"],
.mkd-section[style*="#ce202c"],
.vc_row[style*="#ce202c"] {
  color: #fff !important;
}
.mkd-row-section[style*="#ce202c"] *,
.mkd-section[style*="#ce202c"] *,
.vc_row[style*="#ce202c"] * {
  color: #fff !important;
}

/* Link states inside red rows */
.mkd-row-section[style*="#ce202c"] a,
.mkd-section[style*="#ce202c"] a,
.vc_row[style*="#ce202c"] a {
  color: #fff !important;
  text-decoration: underline;
}


/*--- spacer ---*/

.vc_row.custom-hero h3 {
  font-size: 40px !important;   /* adjust to what looks right */
  line-height: 1.3;             /* optional for readability */
  margin-top: 60px !important;   /* space above headings */
  margin-bottom: 20px !important;   /* space above headings */
}

.vc_row.custom-hero p {
  margin-bottom: 40px !important;   /* space above headings */
}


/* ensure white text */
.vc_row.custom-hero,
.vc_row.custom-hero * {
  color: #ffffff !important;
}

.vc_row.custom-hero,
.vc_row.custom-hero * {
  color: #ffffff !important;
}

/* make all likely containers positioning contexts */
.vc_row.custom-hero,
.vc_row.custom-hero > .wpb_column,
.vc_row.custom-hero > .wpb_column > .vc_column-inner {
  position: relative !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

/* --- OVERLAY: try on the row itself --- */
.vc_row.custom-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(135, 29, 41, 0.9); /* Pavelcomm maroon tint */
  pointer-events: none;
  z-index: 0;
}

/* --- If the theme puts the background on the column inner, tint that too --- */
.vc_row.custom-hero > .wpb_column > .vc_column-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(135, 29, 41, 0.9);
  pointer-events: none;
  z-index: 0;
}

/* keep content above either overlay */
.vc_row.custom-hero > .wpb_column,
.vc_row.custom-hero > .wpb_column > .vc_column-inner,
.vc_row.custom-hero > .wpb_column > .vc_column-inner > .wpb_wrapper {
  position: relative;
  z-index: 1;
}

/* if any column has its own background color, remove it so the tint shows */
.vc_row.custom-hero .vc_column-inner { background: transparent !important; }

/* apply to the element with the background (row or column) */
.vc_row.custom-hero,
.vc_row.custom-hero > .wpb_column > .vc_column-inner {
  background-color: #871D29 !important;
  background-blend-mode: soft-light; /* try overlay or soft-light for different looks */
}


/*--- spacer ---*/

.vc_row.custom-hero-gray h3 {
  font-size: 40px !important;   /* adjust to what looks right */
  line-height: 1.3;             /* optional for readability */
  margin-top: 60px !important;   /* space above headings */
  margin-bottom: 20px !important;   /* space above headings */
}

.vc_row.custom-hero-gray p {
  margin-bottom: 40px !important;   /* space above headings */
}


/* ensure white text */
.vc_row.custom-hero-gray,
.vc_row.custom-hero-gray * {
  color: #000 !important;
}

.vc_row.custom-hero-gray,
.vc_row.custom-hero-gray * {
  color: #000 !important;
}

/* make all likely containers positioning contexts */
.vc_row.custom-hero-gray,
.vc_row.custom-hero-gray > .wpb_column,
.vc_row.custom-hero-gray > .wpb_column > .vc_column-inner {
  position: relative !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

/* --- OVERLAY: try on the row itself --- */
.vc_row.custom-hero-gray::before {
  content: "";
  position: absolute;
  inset: 0;
  /*background: rgba(138, 36, 50, 0.78); /* gray tint */
  pointer-events: none;
  z-index: 0;
}

/* --- If the theme puts the background on the column inner, tint that too --- */
.vc_row.custom-hero-gray > .wpb_column > .vc_column-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  /*background: rgba(138, 36, 50, 0.78); /* gray tint */ 
  pointer-events: none;
  z-index: 0;
}

/* keep content above either overlay */
.vc_row.custom-hero-gray > .wpb_column,
.vc_row.custom-hero-gray > .wpb_column > .vc_column-inner,
.vc_row.custom-hero-gray > .wpb_column > .vc_column-inner > .wpb_wrapper {
  position: relative;
  z-index: 1;
}

/* if any column has its own background color, remove it so the tint shows */
.vc_row.custom-hero-gray .vc_column-inner { background: transparent !important; }

/* apply to the element with the background (row or column) */
.vc_row.custom-hero-gray,
.vc_row.custom-hero-gray > .wpb_column > .vc_column-inner {
  background-color: rgba(255, 255, 255, 0.9) !important; /* 0.7 = 70% opaque */
  background-blend-mode: soft-light; /* or overlay */
}

/*--- spacer ---*/

.vc_row.custom-hero-clean-tint h3 {
  font-size: 40px !important;   /* adjust to what looks right */
  line-height: 1.3;             /* optional for readability */
  margin-top: 60px !important;   /* space above headings */
  margin-bottom: 20px !important;   /* space above headings */
}

.vc_row.custom-hero-clean-tint p {
  margin-bottom: 40px !important;   /* space above headings */
}


/* ensure white text */
.vc_row.custom-hero-clean-tint,
.vc_row.custom-hero-clean-tint * {
  color: #FFF !important;
}

/* make all likely containers positioning contexts */
.vc_row.custom-hero-clean-tint,
.vc_row.custom-hero-clean-tint > .wpb_column,
.vc_row.custom-hero-clean-tint > .wpb_column > .vc_column-inner {
  position: relative !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

/* --- OVERLAY: try on the row itself --- */
.vc_row.custom-hero-clean-tint::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* --- If the theme puts the background on the column inner, tint that too --- */
.vc_row.custom-hero-clean-tint > .wpb_column > .vc_column-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* keep content above either overlay */
.vc_row.custom-hero-clean-tint > .wpb_column,
.vc_row.custom-hero-clean-tint > .wpb_column > .vc_column-inner,
.vc_row.custom-hero-clean-tint > .wpb_column > .vc_column-inner > .wpb_wrapper {
  position: relative;
  z-index: 1;
}

/* if any column has its own background color, remove it so the tint shows */
.vc_row.custom-hero-clean-tint .vc_column-inner { background: transparent !important; }

/* apply to the element with the background (row or column) */
.vc_row.custom-hero-clean-tint,
.vc_row.custom-hero-clean-tint > .wpb_column > .vc_column-inner {
  background-color: rgba(0, 0, 0, 0.45) !important; /* 0.7 = 70% opaque */
  background-blend-mode: soft-light; /* or overlay */
}

/*--- spacer ---*/

.text-130 {
	padding:75px !important;
}

/* Desktop / default */
.text-130,
.text-130 p,
.text-130 li {
  font-size: 20px !important;
  line-height: 1.5 !important; 
}

.text-130 h2,
.text-130 h3,
.text-130 h4 {
  font-size: 36px !important;
}

/* Mobile sizes */
@media (max-width: 768px) {
  .text-130,
  .text-130 p,
  .text-130 li {
    font-size: 16px !important;
  }

  .text-130 h2,
  .text-130 h3,
  .text-130 h4 {
    font-size: 26px !important;
  }
}

@media (max-width: 480px) {
  .text-130,
  .text-130 p,
  .text-130 li {
    font-size: 15px !important;
  }
	
	.text-130 {
	padding:25px !important;
}

  .text-130 h2,
  .text-130 h3,
  .text-130 h4 {
    font-size: 22px !important;
  }
}


/*--- spacer ---*/

/* Hide author name and author box on all single posts */
.mkd-blog-holder.mkd-blog-single.mkd-blog-standard article .mkd-post-info .mkd-post-info-item {
  display: none !important;
}

/*custom post title color*/
.mkd-post-title {
	color:#ce202c !important;
}

/* POSTS ONLY: completely remove the Mikado/Qode title area wrapper */
body.single-post .mkd-title-holder,
body.single-post .mkd-title,
body.single-post .mkd-title-subtitle-holder,
body.single-post .mkd-title-subtitle-holder-inner,
body.single-post .mkdf-title,
body.single-post .mkdf-title-holder,
body.single-post .mkdf-title-outer,
body.single-post .mkdf-title-inner,
body.single-post .mkdf-page-title {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* Remove any top spacing the theme reserves when a title area exists */
body.single-post .mkdf-content,
body.single-post .mkdf-content .mkdf-content-inner,
body.single-post .content,
body.single-post .content .content_inner {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Safety: if a breadcrumb/holder adds a background color bar */
body.single-post .mkd-breadcrumbs,
body.single-post .mkdf-breadcrumbs {
  display: none !important;
}

/*--- spacer ---*/
/* Hide Mikado default title + info sections entirely */
.single-post .mkdf-post-title,
.single-post .mkdf-post-info,
.single-post .mkd-title-holder,
.single-post .mkd-title,
.single-post .mkd-title-subtitle-holder,
.single-post .mkd-title-subtitle-holder-inner,
.single-post .mkdf-title-holder,
.single-post .mkdf-title-outer,
.single-post .mkdf-page-title {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

/* Style the new custom header */
.custom-post-header {
  text-align: center !important;
  margin: 40px auto 30px !important;
  padding: 0 20px !important;
}

.custom-post-title {
  font-size: 28px !important;       /* smaller, readable size */
  font-weight: 400 !important;
  color: #ce202c !important; 
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}

.custom-post-date {
  font-size: 16px !important;
  color: #777 !important;
  margin-top: 0 !important;
  display: block !important;
}

.custom-post-date {
	display: none !important;
}

h1.mkd-post-title {
	display:none !important;
}

.mkd-blog-list-holder.mkd-masonry article .mkd-post-title {
	font-size:18px !important;
	font-weight: 400 !important;
}

/* Style the "Read More" link on blog index/list */
.mkd-blog-holder.mkd-blog-type-masonry article .mkd-read-share-holder>a, .mkd-blog-list-holder.mkd-masonry article .mkd-read-share-holder>a, .mkd-blog-slider-holder.mkd-masonry article .mkd-read-share-holder>a {
  color: #ce202c !important; 
}

/* Hides Uncategorized link anywhere it appears */
a[href*="/category/uncategorized/"] {
  display: none !important;
}

/* Tighten title line height */
.page-template-blog-masonry h2.mkd-post-title,
.page-template-blog-masonry h2.mkd-post-title a {
    font-size: 20px !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove top/bottom padding from the title wrapper */
.page-template-blog-masonry .mkd-post-title {
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove extra spacing inside the post-text container */
.page-template-blog-masonry .mkd-post-text {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    margin: 0 !important;
}

/* Remove spacing between title and excerpt (optional) */
.page-template-blog-masonry .mkd-post-excerpt {
    margin-top: 5px !important;
}

.mkd-pagination {
  display: flex;
  justify-content: center;
}

/* Default inactive links */
.mkd-pagination li a {
  color: #333333 !important;
  text-decoration: none !important;
}

/* Hover state */
.mkd-pagination li a:hover {
  color: #ce202c !important;
  text-decoration: underline !important;
}

/* Active state — covers all Mikado versions */
.mkd-pagination li span,
.mkd-pagination li span.current,
.mkd-pagination li span.active,
.mkd-pagination li span.mkd-pagination-page {
  color: #ce202c !important;
  background: transparent !important;
  font-weight: 600;
  text-decoration: none !important;
}

/* Remove borders (optional but keeps it clean) */
.mkd-pagination li a,
.mkd-pagination li span {
  border: none !important;
  box-shadow: none !important;
}

.mkd-navigation-post-date {
 display: none !important;
}

/*--- spacer ---*/

/* Style the list items inside the Recent Posts With Thumbnails widget */
#rpwwt-recent-posts-widget-with-thumbnails-2 ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  text-align: left;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ===== Recent Posts With Thumbnails – Footer Card Style ===== */
.mkdf-footer-top-holder .widget_recent_posts_with_thumbnails ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #1a1a1a; /* dark footer background */
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

/* ===== Footer Recent Posts With Thumbnails – Card + Date Under Title ===== */
.mkdf-footer-top-holder .widget_recent_posts_with_thumbnails ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #1a1a1a; /* dark Mikado footer tone */
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}
/* Remove underline on all footer links, including hover */
.mkdf-footer-top-holder a,
.mkdf-footer-bottom-holder a,
footer a {
  text-decoration: none !important;
}

/* Maintain no underline + set hover color */
.mkdf-footer-top-holder a:hover,
.mkdf-footer-bottom-holder a:hover,
footer a:hover {
  color: #ce202c !important;
  text-decoration: none !important;
}



/*--- spacer ---*/

/* === Responsive layout for .action-container === */

/* Desktop / default (side-by-side layout) */
.action-container .mkd-full-section-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.action-container h3 {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.3;
  text-align: left; /* keep desktop alignment */
  color: #FFF !important;
}

.action-container a.custom-cta-btn-red-1 {
  white-space: nowrap;
}

/* --- Mobile: stack text above button and center both --- */
@media (max-width: 767px) {
  .action-container .mkd-full-section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; /* centers everything inside */
    gap: 1rem;
  }

  .action-container h3 {
    font-size: 1.4rem;
    line-height: 1.4;
    text-align: center; /* center just the text on mobile */
  }

  .action-container a.custom-cta-btn-red-1 {
    display: inline-block;
    width: auto;
    margin-top: 0.5rem;
    text-align: center;
  }
}

/* Optional: extra breathing room on phones */
@media (max-width: 576px) {
  .action-container {
    padding: 1.5rem 1rem !important;
  }
}

/* --- Force text centering inside .action-container on mobile --- */
@media (max-width: 767px) {
  .action-container h3,
  .action-container .wpb_wrapper h3,
  .action-container .vc_column-inner h3 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Also center any paragraph or text block inside */
  .action-container .wpb_text_column,
  .action-container .wpb_wrapper,
  .action-container .vc_column-inner {
    text-align: center !important;
  }
}

/*---- NEW RESPONSIVE STUFF FOR ACTION CONTAINER ---*/

/* === Fix stacking for the red .action-container banner === */

/* Desktop: side-by-side layout */
@media (min-width: 768px) {
  .action-container .vc_row,
  .action-container .wpb_row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .action-container .vc_row > .vc_column_container,
  .action-container .wpb_row > .vc_column_container {
    float: none;            /* override WPBakery floats */
    width: auto;            /* let flex handle widths */
  }
}

/* Mobile: stack text above button, center everything */
@media (max-width: 767px) {
  .action-container {
    padding: 1.5rem 1rem !important;   /* breathing room on sides */
  }

  .action-container .vc_row,
  .action-container .wpb_row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  .action-container .vc_row > .vc_column_container,
  .action-container .wpb_row > .vc_column_container {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .action-container h3 {
    font-size: 1.4rem;
    line-height: 1.4;
    margin: 0 0 0.5rem;
    text-align: center;
  }

  .action-container .custom-cta-btn-red-1 {
    display: inline-block;
    margin-top: 0.5rem;
    text-align: center;
    white-space: nowrap;
  }
}


/* END NEW STUFF */


/*--- spacer ---*/
/* Replace every occurrence of 961b035 if your numeric part changes */
[id*="wpcf7-f961b035"] form{ 
  display:block !important; 
}
[id*="wpcf7-f961b035"] form p{ 
  display:block !important; 
}
[id*="wpcf7-f961b035"] form br{
  display:initial !important;
}
[id*="wpcf7-f961b035"] input[type="email"]{
  width:100% !important;
  box-sizing:border-box !important;
}
[id*="wpcf7-f961b035"] .wpcf7-submit{
  display:block !important;
  width:auto !important;
  margin:10px auto 0 !important;
}




/*--- spacer ---*/

:root{ --pavel-red:#C8102E; } /* adjust to exact brand if needed */

/* Button: compact, clear until hover, PavelComm red on hover */
.wpcf7 .wpcf7-submit{
  width:auto !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  font-size:14px !important;
  line-height:1 !important;
  padding:8px 14px !important;
  background:transparent !important;
  color:var(--pavel-red) !important;
  border:1px solid var(--pavel-red) !important;
  border-radius:4px !important;
  cursor:pointer !important;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease !important;
}
.wpcf7 .wpcf7-submit:hover,
.wpcf7 .wpcf7-submit:focus{
  background:var(--pavel-red) !important;
  color:#fff !important;
  border-color:var(--pavel-red) !important;
  outline:none !important;
}



/*--- spacer ---*/

.entry-content ul,
.mkd-page-content-holder ul,
.wpb_text_column ul {
    list-style-position: outside;
    padding-left: 1.6rem;  /* space for bullet */
}

.entry-content ul li,
.mkd-page-content-holder ul li,
.wpb_text_column ul li {
    text-indent: 0;        /* keep text aligned */
}

/* Base indentation for ordered lists */
.entry-content ol,
.mkd-page-content-holder ol,
.wpb_text_column ol {
    list-style-position: outside;
    margin-left: 1.5rem !important;
    padding-left: 1.5rem !important;
}

/* Optional: spacing + clean wrapped lines */
.entry-content ol li,
.mkd-page-content-holder ol li,
.wpb_text_column ol li {
    text-indent: 0;
    margin-bottom: 0.35rem;
}


/*--- spacer ---*/

@media (max-width: 767px) {
  /* Add padding to all columns on mobile */
  body .vc_column_container > .vc_column-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Keep hero rows edge-to-edge if you want them full-bleed */
  .vc_row.custom-hero .vc_column-inner,
  .vc_row.custom-hero-gray .vc_column-inner,
  .vc_row.custom-hero-clean-tint .vc_column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/*--- spacer ---*/

/* Make the red banner text column full-width and readable on mobile */
@media (max-width: 767px) {

  /* Stop trying to flex this inner wrapper; just stack normally */
  .action-container .mkd-full-section-inner {
    display: block !important;
  }

  /* Make BOTH columns full width when stacked */
  .action-container .wpb_column.vc_column_container {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  /* Give the text some breathing room from the edges */
  .action-container .vc_column-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Make the heading behave like a normal, wide line of text */
  .action-container h3 {
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;   /* override inline left-align */
    font-size: 1.3rem;
    line-height: 1.4;
    margin: 0 0 0.75rem;
  }

  /* Keep the button centered under the text */
  .action-container p {
    text-align: center !important;
  }
}

/* spacer */

/*.vc_col-sm-12-front-fix {
	width: 120% !important;
	padding-right:100px !important;*/
}

/* spacer */

/* Wrapper: holds image + overlay title */
.service-hover-card {
  position: relative;
  overflow: hidden;
}

/* Image behaves normally, but can gently zoom on hover */
.service-hover-card .wpb_single_image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

/* Text is always visible */
.service-hover-card .service-overlay-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  opacity: 1;              /* always visible */
  transform: none;         /* no slide-up animation needed */
  z-index: 2;              /* above overlay */
  transition: color 0.3s ease;
}

/* Style of the overlay text itself */
.service-hover-card .service-overlay-text * {
  color: #ffffff !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  font-size: 20px !important; /* tweak up/down as needed */
  letter-spacing: 1px;
}

/* Hover: text stays white, no position shift */
.service-hover-card:hover .service-overlay-text {
  opacity: 1;
  transform: translateY(-30px); /* adjust -5px to -20px depending on taste */
}

/* Optional: slight image zoom for polish */
.service-hover-card:hover .wpb_single_image img {
  transform: scale(1.05);
}

/* Wrapper for image + overlay text */
.service-hover-card {
  position: relative;
}

/* IMAGE: wrapper around <img> from the Single Image element */
.service-hover-card .wpb_single_image {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Red overlay ONLY over the image area */
.service-hover-card .wpb_single_image::before {
  content: "";
  position: absolute;
  inset: 0; /* top/right/bottom/left: 0 */
  background: rgba(137, 36, 50, 0); /* transparent PavelComm red */
  transition: background 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

/* On hover, show the red overlay */
.service-hover-card:hover .wpb_single_image::before {
  /* background: rgba(137, 36, 50, 0.75); */
	background: rgba(206, 32, 44, 0.70);
}

/* Overlay title block */
.service-hover-card .service-overlay-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  transform: translateY(-30px); /* adjust -5px to -20px depending on taste */
  z-index: 3; /* above red overlay */
}

/* Overlay title style: white, uppercase, bold, slightly smaller */
.service-hover-card .service-overlay-text * {
  color: #ffffff !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  font-size: 20px !important;
  letter-spacing: 1px;
}

/* Optional: subtle zoom on hover for polish */
.service-hover-card .wpb_single_image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.service-hover-card:hover .wpb_single_image img {
  transform: scale(1.05);
}

/* Slightly darken the image before hover */
.service-hover-card .wpb_single_image img {
  filter: brightness(0.7);   /* lower = darker (try 0.8–0.9) */
  transition: filter 0.3s ease;
}

/* On hover, return to normal image brightness */
.service-hover-card:hover .wpb_single_image img {
  filter: brightness(1);
}

/* Let everything inside the card ignore clicks... */
.service-hover-card * {
    pointer-events: none !important;
}

/* ...EXCEPT links (and anything inside links) */
.service-hover-card a,
.service-hover-card a * {
    pointer-events: auto !important;
}


/* Blah */

/* Only widen columns inside the special landing row */
.vc_row.landing-wide-row .vc_column_container > .vc_column-inner {
    max-width: 1200px !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Landing page: remove white gap between hero slider and services row */
.page-id-34 .landing-hero-row {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.page-id-34 .landing-wide-row {
  margin-top: 0 !important;
  /* keep a bit of breathing room inside the gray row itself */
  padding-top: 60px !important;  /* tweak 40–80px to taste */
}

/* Turn off bottom margin ONLY for the slider column on the landing page */
.page-id-34 .no-bottom-margin > .vc_column-inner {
    margin-bottom: 0 !important;
}

.slider-header-text {
Font-family: Montserrat
Font-weight: 800
Font-size: 60px
Line-height: 1.1
Letter-spacing: 0.3px
Color: #ffffff
Text-shadow: 0px 2px 6px rgba(0,0,0,0.35)

}

.slider-subheader {
  Font-family: Montserrat
Font-weight: 500
Font-size: 28px
Line-height: 1.3
Letter-spacing: 0.3px
Color: #ffffff
Opacity: 0.9
}

.hide-me {
	visibility: hidden !important;
}

.center-layer {
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
}

h2.bolded-landing-page-text {
    font-family: Montserrat !important;
    font-weight: 700 !important;
    font-size: 34px !important;
    letter-spacing: 1px !important;
}

h3.bolded-landing-page-text {
    font-family: Montserrat !important;
    font-weight: 700 !important;
    font-size: 20px !important;
}

/* hero form */

/* Wrapper */
.hero-contact-form {
  max-width: 500px;          /* adjust to fit your column */
  margin-left: auto;
  margin-right: 0;
}

/* Make dropdown background white */
.hero-contact-form select {
  background: #ffffff !important;
  color: #333333 !important;
  border: none !important;
}


/* Rows and columns */
.hero-contact-form .hero-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.hero-contact-form .hero-col {
  flex: 1;
}

.hero-contact-form .hero-col-full {
  flex: 0 0 100%;
}

/* Inputs, selects, textarea */
.hero-contact-form input[type="text"],
.hero-contact-form input[type="tel"],
.hero-contact-form input[type="email"],
.hero-contact-form select,
.hero-contact-form textarea {
  width: 100%;
  border: none;
  padding: 10px 12px;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  background: #ffffff;
  color: #333;
  box-sizing: border-box;
}

/* Textarea height similar to screenshot */
.hero-contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

/* Submit button (red pill like your screenshot) */
.hero-contact-form .hero-submit-btn {
  display: inline-block;
  padding: 10px 35px;
  border-radius: 30px;
  border: none;
  background: #ce202c;             /* PavelComm red */
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  cursor: pointer;
  text-transform: none;
}

/* Optional: make the button transparent but with border */
.hero-contact-form .hero-submit-btn.transparent {
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
}

/* ReCAPTCHA alignment */
.hero-contact-form .hero-captcha {
  display: flex;
  align-items: center;
}

/* Responsive: stack cols on mobile */
@media (max-width: 768px) {
  .hero-contact-form .hero-row {
    flex-direction: column;
  }
}

/* bg form */

.hero-dog-hero {
    position: relative;

    /* Dog image + dark overlay in one shot */
    background-image:
        linear-gradient(
            rgba(0,0,0,0.55),   /* top overlay color + opacity */
            rgba(0,0,0,0.55)    /* bottom overlay color + opacity */
        ),
        url("https://tff.yei.temporary.site/website_84a35506/wp-content/uploads/2025/12/H138621_edited-e1764605664271.jpg");

    background-size: cover !important;
    background-position: center 60% !important; /* tweak 50–70% to frame the face */
    background-repeat: no-repeat !important;
}

/* Solid PavelComm red Send button */
.hero-contact-form .hero-submit-btn {
  display: inline-block;
  padding: 12px 45px;
  border-radius: 30px;
  border: none !important;
  background: #ce202c !important;      /* PavelComm red */
  color: #ffffff !important;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-transform: none;
}

.hero-contact-form .hero-submit-btn:hover {
  background: #6e1d29 !important;      /* slightly darker red on hover */
}


.hero-left-text,
.hero-left-text * {
    color: #ffffff !important;
}

/* Make all text in the left hero column white */
.hero-left-text,
.hero-left-text * {
  color: #ffffff !important;
}

/* Center it better vertically within the hero and tweak line height */
.hero-left-text {
  padding: 40px 40px 40px 0;   /* top/right/bottom/left – adjust to taste */
  max-width: 520px;              /* keeps the text from stretching too wide */
}

/* Mikado custom select wrapper */
.hero-contact-form .mkd-select-holder {
    background-color: #ffffff !important;
    border: none !important;
}

/* The visible text inside the fake dropdown */
.hero-contact-form .mkd-select-holder span,
.hero-contact-form .mkd-select-holder .select2-selection__rendered {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* Full Mikado select container override */
.hero-contact-form .select2-container .select2-selection--single {
    background-color: #ffffff !important;
    border: none !important;
}

/* The inner box Mikado uses */
.hero-contact-form .select2-selection__arrow,
.hero-contact-form .select2-selection__rendered {
    background-color: #ffffff !important;
}

/* Dropdown panel when opened */
.hero-contact-form .select2-results__options {
    background-color: #ffffff !important;
}

/* Match dropdown placeholder to input placeholders */
.hero-contact-form .select2-selection__placeholder {
    color: #888888 !important;     /* same placeholder gray */
    font-style: normal !important; /* prevents italics if theme adds it */
    opacity: 1 !important;         /* ensures it's visible */
}

/* Make sure Select2 uses that placeholder */
.hero-contact-form .select2-selection--single .select2-selection__rendered {
    color: #333333;                /* normal text color */
}

/* Placeholder only (empty value) */
.hero-contact-form .select2-selection--single .select2-selection__rendered[title="Select one*"] {
    color: #888888 !important;     /* match text fields */
}

/* Hide the search box inside Select2 dropdown */
.hero-contact-form .select2-search--dropdown {
    display: none !important;
}

.hero-contact-form .select2-search__field {
    display: none !important;
}

/* Kill the Select2 search bar inside the hero form dropdown */
.hero-contact-form .select2-container .select2-search--dropdown,
.hero-contact-form .select2-container .select2-search--dropdown .select2-search__field {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.hero-contact-form .select2-container .select2-dropdown {
    padding-top: 0 !important;
}

.hero-contact-form .select2-container .select2-results {
    margin-top: 0 !important;
}

/* Hide the Select2 search input everywhere */
.select2-search--dropdown,
.select2-search--dropdown .select2-search__field {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Remove any extra spacing where the search field used to be */
.select2-dropdown,
.select2-results {
    padding-top: 0 !important;
    margin-top: 0 !important;
}



.hero-left-text h2,
.hero-left-text p {
  line-height: 1.6;
}


/*FOR HIDING DURING TESTING ONLY */

/* Hide the red title bar only on page ID 1841 */
.page-id-1841 .mkd-title {
    display: none !important;
    height: 0 !important;
}

/* Landing page: remove white gap between hero slider and services row */
.page-id-1841 .landing-hero-row {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.page-id-1841 .landing-wide-row {
  margin-top: 0 !important;
  /* keep a bit of breathing room inside the gray row itself */
  padding-top: 60px !important;  /* tweak 40–80px to taste */
}

/* Turn off bottom margin ONLY for the slider column on the landing page */
.page-id-1841 .no-bottom-margin > .vc_column-inner {
    margin-bottom: 0 !important;
}

/* stuff for rollover effects */

/* Base: all detail panels hidden by default */
.service-details {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Visible + animated panel */
.service-details.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Base tile behavior */
.service-hover-card {
    transition: background-color 0.25s ease, 
                box-shadow 0.25s ease, 
                transform 0.25s ease, 
                border-color 0.25s ease;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}

/* All service detail panels are hidden by default */
.service-details {
    display: none;
}

/* The one we mark as active in JS is shown */
.service-details.active {
    display: block;
}

/* Optional: make cards clearly clickable */
.service-hover-card {
    cursor: pointer;
}

/* Safer: wider + centered details block/row */
.service-details-wide {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    
    /* Let it grow, but don't let it blow past the viewport */
    width: min(1200px, 100vw - 40px);  /* tweak 1200px and 40px as you like */

    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Tighten the row directly under the hover cards */
.service-details-row {
    margin-top: -20px !important; 
    padding-top: 0 !important;
}

/* WPBakery sometimes adds inner padding on inner rows */
.service-details-row > .vc_column_container > .vc_column-inner,
.service-details-row .vc_column-inner {
    padding-top: 0 !important;
}

/* Styles on hover cards for RED background (white text) */

/* Page-specific rollover card text color override */
.page-id-1841 .hover-card *,
.page-id-1841 .service-details *,
.page-id-1841 .service-details .bolded-landing-page-text,
.page-id-1841 .service-details h2,
.page-id-1841 .service-details p {
    color: #fff !important;
}

/* THIS is the thing, that does the thing, that makes the weird small display menu disappear */

.mkd-sticky-header .mkd-main-menu {
	display:none; !important;
}

/*footer underline only */

.pvc-inline a:hover {
      text-decoration: underline;
    }

/*  data stripe image */

.mkd-page-header::after,
.mkdf-page-header::after {
  content: "";
  display: block;
  width: 100%;
  height: 23px; /* adjust */
  background-image: url('/wp-content/uploads/2026/05/data-stripe.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* for home page padding data stripe */
.home .mkd-content .mkd-content-inner > .mkd-container > .mkd-container-inner,
.home .mkd-content .mkd-content-inner > .mkd-full-width > .mkd-full-width-inner {
  padding: 0 !important;
}

/* Horizontal image strip at top of footer 
footer.mkd-page-footer,
footer.mkdf-page-footer,
.mkd-page-footer,
.mkdf-page-footer {
  position: relative;
}

footer.mkd-page-footer::before,
footer.mkdf-page-footer::before,
.mkd-page-footer::before,
.mkdf-page-footer::before {
  content: "";
  display: block;
  width: 100%;
  height: 23px; /* adjust height */
  background: url('/wp-content/uploads/2026/05/data-stripe.png') center center / cover no-repeat;
} */

/* Simple 16px red strip at top of footer */
footer.mkd-page-footer,
footer.mkdf-page-footer,
.mkd-page-footer,
.mkdf-page-footer {
  position: relative;
}

footer.mkd-page-footer::before,
footer.mkdf-page-footer::before,
.mkd-page-footer::before,
.mkdf-page-footer::before {
  content: "";
  display: block;
  width: 100%;
  height: 16px;
  background: #ce202c;
}

/* Force sticky menu visible ONLY after sticky header appears */
.mkd-sticky-header.header-appear .mkd-main-menu,
.mkd-sticky-header.header-appear .mkd-main-menu > ul,
.mkd-sticky-header.mkd-sticky-header-appear .mkd-main-menu,
.mkd-sticky-header.mkd-sticky-header-appear .mkd-main-menu > ul,
.mkd-sticky-header.mkd-animate-header .mkd-main-menu,
.mkd-sticky-header.mkd-animate-header .mkd-main-menu > ul {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

/* Only show sticky menu after scrolling */
.mkd-sticky-header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mkd-sticky-header.header-appear,
.mkd-sticky-header.mkd-sticky-header-appear,
.mkd-sticky-header.mkd-animate-header {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}


/* Partner logo scroller */

.scroll-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.scroll-track {
  display: flex;
  gap: 60px; /* 👈 spacing between images */
  width: max-content;
  animation: scroll-left 40s linear infinite;
  align-items: center;
}

/*.scroll-track img {
  height: auto;
  width: 300px;
}*/

/* Animation */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.scroll-track:hover {
  animation-play-state: paused;
}


/* Hide author info on blog/tag/archive pages */
.mkd-post-info-author,
.mkdf-post-info-author,
.mkd-post-author,
.mkdf-post-author,
.author.vcard {
    display: none !important;
}

/* testimonials slider */
/*.pc-testimonial-slider {
  position: relative;
  width: 100%;
  padding: 70px 80px;
  text-align: center;
  background: #fff;
  box-sizing: border-box;
}

.pc-testimonial-slider h2 {
  margin: 0 0 90px;
  font-size: 28px;
  font-weight: 400;
  color: #2f3540;
}

.pc-testimonial {
  display: none;
  max-width: 760px;
  min-height: 220px;
  margin: 0 auto;
  animation: pcSlide .6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-testimonial.active {
  display: block;
}

.pc-quote {
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 45px;
  min-height: 95px;
}

.pc-role {
  font-size: 20px;
  color: #777;
  margin: 0 0 10px;
}

.pc-company {
  font-size: 15px;
  color: #aaa;
  margin: 0;
}

.pc-testimonial-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #bfbfbf;
  font-size: 58px;
  line-height: 1;
  cursor: pointer;
  padding: 10px;
}

.pc-testimonial-arrow:hover {
  color: #ce202c;
}

.pc-prev {
  left: 0;
}

.pc-next {
  right: 0;
}

@keyframes pcSlide {
  from {
    opacity: 0;
    transform: translateX(18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .pc-testimonial-slider {
    padding: 50px 35px;
  }

  .pc-testimonial-slider h2 {
    font-size: 24px;
    margin-bottom: 50px;
  }

  .pc-quote {
    font-size: 16px;
  }

  .pc-testimonial-arrow {
    font-size: 40px;
    top: auto;
    bottom: 10px;
  }

  .pc-prev {
    left: 25%;
  }

  .pc-next {
    right: 25%;
  }
} */

@media only screen and (max-width: 768px) {
  .mkd-mobile-header::after {
    content: "";
    display: block;
    width: 100%;
    height: 18px;
    background-image: url("https://www.pavelcomm.com/wp-content/uploads/2026/05/data-stripe.png");
    background-repeat: repeat-x;
    background-position: center center;
    background-size: auto 18px;
  }
}