/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
.home-banner h1{
  font-size: 52px;
}
h1{
  font-size: 50px;
}
h2{
  font-size: 48px;
}
.sm-h2 h2{
  font-size: 38px;
}
.blue-color{
  color: rgb(0, 53, 136);
}
.hfe-active-menu + .hfe-nav-menu__layout-expandible{
	max-width: 300px;
    right: 50px;
    left: unset !important;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 0.602187px 3.01094px -0.333333px, rgba(0, 0, 0, 0.05) 0px 2.28853px 11.4427px -0.666667px, rgba(0, 0, 0, 0.12) 0px 10px 50px -1px;
}
.hfe-nav-menu-icon,.hfe-nav-menu__toggle{
    margin-left: 0 !important;
}
.hfe-nav-menu{
    padding: 20px !important;
}

.p-revert{
 position: revert;
}

.backdrop-filter{
  backdrop-filter: blur(9px);
}
.max-width{
  max-width: 1500px;
}
/*-----------happy customer--------*/
.happy-customers {
  display: flex;
  align-items: center;
  gap: 14px;
}

.avatars {
  display: flex;
}

.avatars img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  margin-left: -12px;
}

.avatars img:first-child {
  margin-left: 0;
}

.customer-text .count {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.customer-text .label {
  font-size: 14px;
  color: #64748b;
}
/*-----------happy customer--------*/
/*-----------order list--------*/
  .custom-numbered-list-wrapper {

    padding: 20px;
    background-color: #f5f5f5;
}

.custom-numbered-list-container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 600px;
}

.custom-numbered-list {
    list-style: none;
    counter-reset: custom-item;
    padding: 0;
    margin: 0;
}

.custom-numbered-list-item {
    counter-increment: custom-item;
    padding: 12px 0;

    position: relative;
    padding-left: 40px;
}

.custom-numbered-list-item:last-child {
    border-bottom: none;
}

.custom-numbered-list-item::before {
    content: counter(custom-item);
    position: absolute;
    left: 0;
    background-color: #9bd8d6;
color: #4e9b9e;
width: 24px;
height: 24px;
border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}
/*-----------end order list--------*/
/*-----------button--------*/
.elementor-widget-button .elementor-button,.anchor-button,.wpcf7-submit,.slide-left .btn{
    background: linear-gradient(rgb(93, 140, 132) 0%, rgb(8, 114, 133) 100%);
    border-radius: 5px;
    color: #fff !important;
    font-weight: 500;
    font-size: 18px !important;
    padding: 15px 25px !important;
}
.elementor-widget-button .elementor-button:hover,.anchor-button:hover,.wpcf7-submit:hover,
.slide-left .btn:hover{
    color: #fff !important;
    background: linear-gradient(rgb(8, 79, 133) 0%, #002846 100%);
    padding: 15px 25px !important;
}
/*-----------End button--------*/
.sliceCards-container {
  display: flex;
  height: 30rem;
  margin: 0 auto;
  max-width: 70vw;
  width: 70vw;
}

/* Hide radios */
.sliceCards-radio {
  display: none;
}

/* Card base */
.sliceCards-content {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 3rem;
  cursor: pointer;
  flex: 1;
  margin-right: 0.8rem;
  overflow: hidden;
  position: relative;
  transition: all 0.5s cubic-bezier(0.05, 0.60, 0.39, 0.94);
}

.sliceCards-content:hover {
  box-shadow: 0.7rem 0.7rem 0.5rem rgba(0, 0, 0, 0.3);
}

/* Background images */
.sliceCards-bg-1 { background-image: url("/wp-content/uploads/team-a.avif"); }
.sliceCards-bg-2 { background-image: url("/wp-content/uploads/team-b.avif"); }
.sliceCards-bg-3 { background-image: url("/wp-content/uploads/team-c.avif"); }
.sliceCards-bg-4 { background-image: url("/wp-content/uploads/team-d.avif"); }
.sliceCards-bg-5 { background-image: url("/wp-content/uploads/team-e.avif"); }

/* Title */
.sliceCards-title {
  position: absolute;
  top: 2rem;
  left: 1.5rem;
  font-size: 1.2rem;
  line-height: 1.1;
  opacity: 0;
  transform: translateX(2rem);
  transition: 300ms cubic-bezier(0.05, 0.60, 0.42, 0.94);
  z-index: 2; /* 🔑 ensures text above overlay */
}

.sliceCards-mb {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: #6481F5;
}

.sliceCards-subtitle {
  font-size: 1.4rem;
  font-weight: 600;
}

/* Active card */
.sliceCards-radio:checked + .sliceCards-content {
  flex: 9;
  border-radius: 2rem;
  box-shadow: 0.3rem 0.3rem 0.4rem rgba(0, 0, 0, 0.3);
}

/* Overlay ONLY on active card */
.sliceCards-radio:checked + .sliceCards-content::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://staging.surveyready-solutions.com/wp-content/uploads/overlay.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.4;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

/* Reveal text on active */
.sliceCards-radio:checked + .sliceCards-content .sliceCards-title {
  opacity: 1;
  transform: translateX(0);
}

/*------------stack card-----------*/
:root {
  --card-width: 930px;
  --card-height: 520px;
  --card-margin: 140px;
  --numcards: 6;
}

.cards * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cards {
  width: var(--card-width);
  margin: 0 auto;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--numcards), var(--card-height));
  gap: var(--card-margin);
  padding-bottom: calc(var(--numcards) * 10px);
}

.stack-card {
  position: sticky;
  display: flex;
  justify-content: center;
}

.card__inner {
  width: 930px;
  height: 520px;
  background: #fff;
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
  transform-origin: 50% 0%;
  align-items: center;
  border: 10px solid #dbdcdc;
}

/* ---- CARD ROTATIONS + STICKY POSITIONS ---- */
.stack-card:nth-child(1){--rotate:0deg;top:190px;}
.stack-card:nth-child(2){--rotate:0deg;top:130px;}
.stack-card:nth-child(3){--rotate:0deg;top:170px;}
.stack-card:nth-child(4){--rotate:0deg;top:190px;}
.stack-card:nth-child(5){--rotate:0deg;top:150px;}
.stack-card:nth-child(6){--rotate:0deg;top:150px;}

.card__video-container {
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.card__video {
  width: 100%;
  height: 100% !important;
  object-position: center;
    object-fit: cover;
  padding: 0px;
}

.card__content {
  width: 50%;
  padding: 2.5em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.card__title {
  font-size: 1.8rem;
  font-weight: 700;
}

.card__description {
  font-size: 1rem;
  line-height: 1.6;
}

/* -------- SCROLL SCALE ANIMATION -------- */

@supports (animation-timeline: scroll()) {
  .stack-card {
    --index: calc(var(--i) + 1);
    --reverse-index: calc(var(--numcards) - var(--index));
  }

  @keyframes scale {
    to {
      transform:
        rotate(var(--rotate))
        scale(calc(1 - (0.05 * var(--reverse-index))));
    }
  }

  .card__inner {
    animation: scale linear forwards;
    animation-timeline: scroll();
    animation-range: entry 30% cover 70%;
  }
}

/*------------stack card-----------*/
/*-------form-----------*/
.wpcf7-form label{
    margin-top: 20px;
    padding: 0 0 2px 0 !important;
    font-size: 13px;
    font-weight: 400;
}
.input.text, input.title, input[type=email],
 input[type=password], input[type=tel],
  input[type=text],input[type=number], select, textarea {
    padding: 12px;
    border-radius: 4px;
    width: 100%;
    height: 45px;
}
textarea {
    height: 100px;
}
.wpcf7-submit{
  background: linear-gradient(rgb(93, 140, 132) 0%, rgb(8, 114, 133) 100%) !important;
  margin-top: 10px;
  padding: 10px 25px;
  cursor: pointer;
  color: #fff !important;
}
.wpcf7-submit:hover{
  background: linear-gradient(rgb(8, 79, 133) 0%, #002846 100%) !important;
}

input[type="file"]{
  border-radius: 4px;
  border: 1px solid #bbb;
}
 input::file-selector-button{
  background:#ffdd00;
  padding: 15px;
  border: none;
  color: #fff;
  border-radius: 4px;
  color: #000;
}
input.text:focus, input.title:focus, input[type=text]:focus,input[type=number]:focus, select:focus, textarea:focus {
    border-color: #bbb;
    color: #3e3e3e;
}
.wpcf7 form.sent .wpcf7-response-output{
    border: 1px solid #a4b49b!important;
    background: #d6f0c8!important;
    color: #557d3f!important;
    border-radius: 5px!important;
    font-size: 14px;
    padding: 10px!important;
    font-weight: 400;
    
}
.wpcf7 form .wpcf7-response-output {
    border: 1px solid #d6a6a7!important;
    background: #ffe9e9!important;
    color: #b74e4e!important;
    border-radius: 4px!important;
    font-size: 14px;
    margin-left: 0!important;
    margin-right: 0!important;
    padding: 10px!important;
    font-weight: 400;
    margin-top: 20px!important;
}


.wpcf7-spinner{
    display: contents;
}
/*-------end form-----------*/
/*-------resources-----------*/

/* Search Bar */
.resources-search-bar {
  margin-bottom: 25px;
}

#resource-search {
  width: 100%;
  max-width: 400px;
  padding: 12px 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
}

#resource-search:focus {
  outline: none;
  border-color: #d4a838;
}

/* Filter Buttons */
.resources-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: #f6f6f6;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  background: #ebebeb;
}

.filter-btn.active {
  background: linear-gradient(rgb(93, 140, 132) 0%, rgb(8, 114, 133) 100%);
  color: #fff;
}

/* Resources Grid */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.resource-card {
  border: 1px solid #eee;
  padding: 25px;
  border-radius: 14px;
  background: #fff;
  transition: transform 0.2s ease;
}

.resource-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.resource-card .icon {
  font-size: 32px;
    margin-bottom: 10px;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(rgb(0, 40, 70) 0%, rgb(8, 79, 133) 100%);
    border-radius: 5px;
}
.resource-card .icon svg{
  stroke: #fff;
}
.resource-card .badges {
  margin-bottom: 12px;
}

.resource-card .badges span {
  background: #f6f6f6;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  margin-right: 5px;
  display: inline-block;
}

.resource-card h3 {
  margin: 12px 0;
  font-size: 18px;
  color: #333;
}

.resource-card p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.resource-card .download {
  color: #144c80;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s ease;
}

.resource-card .download:hover {
  color: #b89030;
}

.no-results {
  text-align: center;
  padding: 40px;
  color: #999;
}
.filter-wrapper{
  display: flex;
    justify-content: space-between;
}
.card-header {
    display: flex;
    gap: 10px;
}
.resources-pagination {
  margin: 40px 0;
  text-align: center;
}

.resources-pagination .page-numbers {
  display: flex;
  justify-content: center;
  padding: 8px 14px;
  margin: 0 5px;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  list-style: none;
}
.resources-pagination .page-numbers li a{
  border: 1px solid #ddd;
}
.resources-pagination .page-numbers.current {
  background: linear-gradient(rgb(93, 140, 132) 0%, rgb(8, 114, 133) 100%);
  color: #fff;
  border-color: transparent;
}

.resources-pagination .page-numbers li a:hover {
  background: #eee;
}

/*-------/resources-----------*/

ul.footer-list {
    list-style: none;
    margin-left: 0;
}
.footer-section a{
  color:#fff;
}
.footer-section a:hover {
    color: rgb(255 255 255 / 75%);
}

.social-bar{

}

.social-bar a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 16px;
    color:#e6ffff;
    text-decoration:none;
    width:170px;
    transition:0.3s;
    font-size:16px;
}

.social-bar a i{
    width:32px;
    height:32px;
    background:rgba(255,255,255,0.2);
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.hfe-post-image img{
  border-radius: 10px;
}

/*----------feed-------*/
.home-feed .rss_content{
  color:#fff;
}
/*----------end feed-------*/
.service-grid {
	display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding:30px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e2f3f3;
  box-shadow: 0 8px 24px rgba(78, 155, 158, 0.08);
  transition: all 0.35s ease;
  cursor: pointer;
}

.service-grid:hover {
  border-color: #4e9b9e;
  background: #eef9f8;
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(78, 155, 158, 0.18);
}
.p-revert{
	position:revert;
}
.service-card{
	display: flex;
    flex-direction: row;
	gap:20px;
    align-items:flex-start;
}
.service-number {
  min-width:42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #9bd8d6;
  color: #4e9b9e;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card h3 {
  font-size: 16px;
  line-height: 1.5;
  color: #2e6f71;
  margin: 0;
}
/*-------------vertical slider--------*/

.vert-slider-container {
  max-width: 1200px;
  margin: auto;
  position: relative;
}

.vert-slider-content {
  position: relative;
  min-height: 420px;
}

/* =========================
   Slides
========================= */
.slide {
  display: none;
  animation: fadeUp 0.6s ease;
}

.slide.active {
  display: block;
}

.slide-inner {
  display: flex;
  align-items: flex-end;
}

/* Left */
.slide-left {
  width: 40%;
}

.slide-left h2 {
  font-size: 42px;
  margin-bottom: 0;
}

.slide-left p {
  font-size: 17px;
  color: #666;
  margin-bottom: 30px;
}



/* Right */
.slide-right {
  width: 60%;
  padding-left: 40px;
  position: relative;
}

.slide-right img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

/* =========================
   Badge
========================= */
.badge-wrapper {
  position: absolute;
  bottom: -40px;
  right: 24px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(99deg, #ccd7ff99 0%, #f27a8a99 100%);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  min-width: 140px;
  max-width: 350px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.badge-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.badge-top .icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-top svg {
  width: 18px;
  
}

.badge-top .value {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
}

.badge-wrapper .content {
  font-size: 18px;
  color: #fff;
  font-weight: 500;
}

/* =========================
   Dots
========================= */
.vert-slider-dots {
  position: absolute;
  left: -40px;
  top: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dot {
  width: 15px;
  height: 3px;
  background: #ccc;
  cursor: pointer;
}

.dot.active {
  background: #2f5cf2;
  width: 25px;
}

/* =========================
   Animation
========================= */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*-------------end vertical slider--------*/
.hierarchy-container {
            max-width: 700px;
            margin: 0 auto;
            padding:0 40px;
            
        }

        .position-item {
            display: flex;
            align-items: center;
            padding: 16px 0;
            position: relative;
        }

        .position-item::before {
            content: '';
            position: absolute;
            left: 12px;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: #e0e0e0;
        }

        .position-item:first-child::before {
            top: 50%;
        }

        .position-item:last-child::before {
            bottom: 50%;
        }

        .bullet {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 16px;
            flex-shrink: 0;
            position: relative;
            z-index: 1;
        }

        .bullet.active {
            background-color: #d4a04c;
            border: 3px solid #d4a04c;
        }

        .bullet.inactive {
            background-color: white;
            border: 2px solid #e0e0e0;
        }

        .position-text {
            font-size: 16px;
            line-height: 1.5;
            color: #333;
        }

        .position-text.active {
            color: #d4a04c;
            font-weight: 500;
        }

        .subtitle {
            color: #666;
            font-size: 14px;
            margin-top: 2px;
        }
/*------------media query-----------*/
@media(max-width: 980px){
  .card__inner {
    width: 700px;
    height: 480px;
  }
}
@media(max-width: 768px){
.slide-inner{
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
}
.slide-left{
  width: 100%;
}
.slide-right{
  width: 100%;
  padding-left: 0;
}
.slide-left h2{
  font-size: 32px;
}
  h1{
  font-size: 40px;
}
}

@media(max-width: 767px){

h2{
  font-size: 34px;
}
.sm-h2 h2{
  font-size: 30px;
}
    .cust-mobile-menu .hfe-nav-menu__layout-expandible{
    width: 90% !important;
    margin: auto;
    max-width: 90%;
    right: 0;
    left: 0 !important;
    }
:root {
    --card-width: 100%;
    --card-height: auto;
    --card-margin: 100px;
  }

  .cards {
    width: 100%;
    padding: 0 14px;
    grid-template-rows: repeat(var(--numcards), auto);
  }

  .stack-card {
    position: sticky;
    top: 80px !important;
  }

  .card__inner {
    width: 100%;
    height: auto;
    flex-direction: column;
    border-width: 6px;
    transform: scale(calc(1 - (0.03 * var(--reverse-index))));
  }

  .card__video-container {
    width: 100%;
    height: 200px;
  }

  .card__video {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
  }

  .card__content {
    width: 100%;
    padding: 30px;
  }

  /* remove rotation only */
  .stack-card:nth-child(n) {
    --rotate: 0deg;
  }

  /* keep scroll animation */
  @supports (animation-timeline: scroll()) {
    .card__inner {
      animation: scale linear forwards;
      animation-timeline: scroll();
      animation-range: entry 30% cover 70%;
    }
  }

/*----------sliced mob-------*/
.sliceCards-container {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: auto;
    gap: 1rem;
  }

  .sliceCards-content {
    width: 100%;
    height: 14rem;
    flex: none;
    margin-right: 0;
    border-radius: 1.6rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: all .35s ease;
  }

  /* Disable desktop slice expand effect */
  .sliceCards-radio:checked + .sliceCards-content {
    flex: none;
    height: 16rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  }

  /* Always show title on mobile */
  .sliceCards-title {
    opacity: 1;
    transform: translateX(0);
    top: auto;
    bottom: 1.2rem;
    left: 1.2rem;
  }

  .sliceCards-mb {
    font-size: .75rem;
  }

  .sliceCards-subtitle {
    font-size: 1.2rem;
  }

  /* Keep overlay only for active card */
  .sliceCards-radio:checked + .sliceCards-content::after {
    opacity: .35;
  }
.filter-wrapper{
  flex-direction: column;
}
}