/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/two-column-stats-with-images/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --color-primary: var(--wp--preset--color--primary);
  --color-secondary: var(--wp--preset--color--secondary);
  --color-text: var(--wp--preset--color--text);
  --color-text-dark: var(--wp--preset--color--text-dark);
  --color-accent: var(--wp--preset--color--accent);
  --color-gray: var(--wp--preset--color--gray);
  --color-white: var(--wp--preset--color--white);
  --color-black: var(--wp--preset--color--black);
  --color-body-bg: #f3f7fb;
  --color-black-two: #141419;
  --color-error: #CE202A;
  --color-success: #28a745;
  --gradient-primary: var(--wp--preset--gradient--primary);
  --gradient-secondary: var(--wp--preset--gradient--secondary);
  --fontBase: var(--wp--preset--font-family--primary);
  --fontSecondary: var(--wp--preset--font-family--secondary);
}

/*********************
* BREAKPOINTS
*
* @example
* for max-width case
* @include breakpoint('smaller') {
*	@content;	
* }
*
* for min-width case
* @include breakpoint('smaller', true) {
*	@content;	
*}
*********************/

/*********************
	Flex 
*********************/

/*********************
	Flex Direction

@example
// If display: flex; is needed
@include flex-column(true);

// If display: flex; is not needed
@include flex-column();
*********************/

/*********************
	Flex Direction

@example
// Center Vertically and horizontally
@include flex-center();

// Center only horizontally
@include flex-center(hr);

// Center only vertically
@include flex-center(vr);

*********************/

/*********************
Flex Grid Width

@example

@include flex-grid-width(5, 30px);

Note: Do not forget to add column-gap in the parent element

*********************/

/*********************
	Flex Width

@example

@include flex-width(calc(100% / 3));
*********************/

/**
* Mixin to declare Font-face
*
*/

/**This is the block Style*/

.two-column-stats-with-images {
  padding-block: 186px 200px;
}

@media screen and (max-width: 991px) {
  .two-column-stats-with-images {
    padding-block: 98px 100px;
  }
}

.two-column-stats-with-images .container {
  max-width: 1230px;
}

@media screen and (max-width: 991px) {
  .two-column-stats-with-images .container {
    padding-inline: 24px;
  }
}

.stcc-topgrid {
  gap: 0 30px;
}

@media screen and (max-width: 991px) {
  .stcc-topgrid {
    margin-bottom: 60px;
  }
}

@media screen and (max-width: 767px) {
  .single-sectors .stcc-topgrid {
    margin-bottom: 33px;
  }
}

.stcc-topgrid-colleft {
  flex: 0 1 40%;
}

@media screen and (max-width: 991px) {
  .stcc-topgrid-colleft {
    flex: 0 1 100%;
  }
}

.stcc-topgrid-colright {
  flex: 0 1 49.61%;
}

@media screen and (max-width: 991px) {
  .stcc-topgrid-colright {
    flex: 0 1 100%;
  }
}

@media screen and (min-width: 1200px) {
  .single-sectors .stcc-topgrid-colright {
    padding-right: 3%;
  }
}

@media screen and (min-width: 992px) {
  .stcc-topgrid .stcc-subtitle-wrapper {
    padding-top: 21px;
    padding-bottom: 230px;
  }
}

@media screen and (max-width: 991px) {
  .stcc-topgrid .mini-title {
    margin-bottom: 34px;
  }
}

.stcc-topgrid h1, .stcc-topgrid h2, .stcc-topgrid h3, .stcc-topgrid h4, .stcc-topgrid h5, .stcc-topgrid h6 {
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}

@media screen and (max-width: 991px) {
  .stcc-topgrid h1, .stcc-topgrid h2, .stcc-topgrid h3, .stcc-topgrid h4, .stcc-topgrid h5, .stcc-topgrid h6 {
    margin-bottom: 25px;
  }
}

.stcc-topgrid .stcc-description {
  margin-bottom: 44px;
  max-width: 446px;
}

@media screen and (max-width: 991px) {
  .stcc-topgrid .stcc-description {
    max-width: 100%;
    margin-bottom: 34px;
  }
}

.stcc-bottomgrid,
.stcc-topgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.stcc-bottomgrid {
  gap: 30px;
}

@media screen and (max-width: 767px) {
  .stcc-bottomgrid {
    gap: 10px;
  }
}

.stcc-bottomgrid-colleft {
  flex: 0 1 32.75%;
}

@media screen and (max-width: 767px) {
  .stcc-bottomgrid-colleft {
    flex: 0 1 35.45%;
  }
  .single-sectors .stcc-bottomgrid-colleft {
    flex: 0 0 61%;
  }
}

@media screen and (min-width: 992px) {
  .stcc-bottomgrid-colleft {
    margin-top: -18%;
  }
  .single-sectors .stcc-bottomgrid-colleft {
    margin-top: -30%;
  }
}

.stcc-bottomgrid-colright {
  flex: 0 1 58%;
}

@media screen and (max-width: 767px) {
  .stcc-bottomgrid-colright {
    flex: 0 1 52%;
  }
  .single-sectors .stcc-bottomgrid-colright {
    flex: 0 0 78%;
    margin-left: auto;
  }
  .single-sectors .stcc-bottomgrid-colright .stcc-img-landscape-wrap {
    padding-top: 30px;
  }
}

.stcc-bottomgrid .stcc-img-portrait-wrap img,
.stcc-bottomgrid .stcc-img-portrait-wrap video {
  border-radius: 14px;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 0.82;
}

@media screen and (max-width: 767px) {
  .stcc-bottomgrid .stcc-img-portrait-wrap img,
  .stcc-bottomgrid .stcc-img-portrait-wrap video {
    aspect-ratio: 0.76/1;
    width: 100%;
    border-radius: 10px;
  }
}

.single-sectors .stcc-bottomgrid .stcc-img-portrait-wrap img,
.single-sectors .stcc-bottomgrid .stcc-img-portrait-wrap video {
  aspect-ratio: 0.61;
}

@media screen and (max-width: 767px) {
  .single-sectors .stcc-bottomgrid .stcc-img-portrait-wrap img,
  .single-sectors .stcc-bottomgrid .stcc-img-portrait-wrap video {
    border-radius: 6px;
    aspect-ratio: 0.65;
  }
}

.stcc-bottomgrid .stcc-img-landscape-wrap {
  padding-top: 80px;
}

@media screen and (min-width: 992px) {
  .stcc-bottomgrid .stcc-img-landscape-wrap {
    padding-top: 17.1%;
  }
}

@media (min-width: 1440px) {
  .single-sectors .stcc-bottomgrid .stcc-img-landscape-wrap {
    padding-inline-start: 92px;
    transform: translate3d(110px, 0, 0);
  }
}

.stcc-bottomgrid .stcc-img-landscape-wrap img,
.stcc-bottomgrid .stcc-img-landscape-wrap video {
  border-radius: 14px;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 1.2225;
}

@media screen and (max-width: 767px) {
  .stcc-bottomgrid .stcc-img-landscape-wrap img,
  .stcc-bottomgrid .stcc-img-landscape-wrap video {
    aspect-ratio: 0.56/1;
    width: 100%;
    border-radius: 10px;
  }
}

.single-sectors .stcc-bottomgrid .stcc-img-landscape-wrap img,
.single-sectors .stcc-bottomgrid .stcc-img-landscape-wrap video {
  aspect-ratio: 1.77;
}

@media screen and (max-width: 767px) {
  .single-sectors .stcc-bottomgrid .stcc-img-landscape-wrap img,
  .single-sectors .stcc-bottomgrid .stcc-img-landscape-wrap video {
    aspect-ratio: 1.65;
    border-radius: 6px;
    transform: translate(14px, 0);
  }
}

.stcc-bottomgrid .stcc-stats-list .container {
  padding: 0;
}

.stcc-bottomgrid .counter-wrap,
.stcc-bottomgrid .counter-row {
  width: auto;
  justify-content: unset;
  row-gap: 61px;
}

@media screen and (max-width: 767px) {
  .stcc-bottomgrid .counter-wrap,
  .stcc-bottomgrid .counter-row {
    row-gap: 32px;
  }
}

.stcc-bottomgrid .counter-wrap .counter-box,
.stcc-bottomgrid .counter-row .counter-box {
  padding-left: 0 !important;
  flex: 0 1 100% !important;
}

.stcc-bottomgrid .counter-wrap .counter-box .counter-number,
.stcc-bottomgrid .counter-row .counter-box .counter-number {
  font-size: 100px;
  line-height: 1;
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .stcc-bottomgrid .counter-wrap .counter-box .counter-number,
  .stcc-bottomgrid .counter-row .counter-box .counter-number {
    font-size: 50px;
    margin-bottom: 10px;
  }
}

.stcc-bottomgrid .counter-wrap {
  padding-top: 85px !important;
}

@media screen and (max-width: 767px) {
  .stcc-bottomgrid .counter-wrap {
    padding-top: 33px !important;
  }
}

.two-column-stats-with-images.stcc-layout-two {
  padding-block: 181px 200px;
}

@media screen and (max-width: 991px) {
  .two-column-stats-with-images.stcc-layout-two {
    padding-block: 70px 100px;
  }
}

.two-column-stats-with-images.stcc-layout-two .container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  gap: 111px;
  align-items: flex-start;
  justify-content: flex-end;
}

@media screen and (max-width: 991px) {
  .two-column-stats-with-images.stcc-layout-two .container {
    gap: 40px;
  }
}

@media screen and (max-width: 767px) {
  .two-column-stats-with-images.stcc-layout-two .container {
    flex-direction: column-reverse;
    gap: 0;
  }
}

.two-column-stats-with-images.stcc-layout-two .stcc-bottomgrid,
.two-column-stats-with-images.stcc-layout-two .stcc-topgrid {
  flex-direction: column;
  justify-content: flex-start;
  flex: 0 0 calc(50% - 55.5px);
}

.two-column-stats-with-images.stcc-layout-two .stcc-bottomgrid .stcc-topgrid-colleft,
.two-column-stats-with-images.stcc-layout-two .stcc-bottomgrid .stcc-topgrid-colright,
.two-column-stats-with-images.stcc-layout-two .stcc-bottomgrid .stcc-bottomgrid-colright,
.two-column-stats-with-images.stcc-layout-two .stcc-topgrid .stcc-topgrid-colleft,
.two-column-stats-with-images.stcc-layout-two .stcc-topgrid .stcc-topgrid-colright,
.two-column-stats-with-images.stcc-layout-two .stcc-topgrid .stcc-bottomgrid-colright {
  flex: unset;
}

.two-column-stats-with-images.stcc-layout-two .stcc-bottomgrid .stcc-bottomgrid-colleft,
.two-column-stats-with-images.stcc-layout-two .stcc-topgrid .stcc-bottomgrid-colleft {
  margin-top: 0;
}

.two-column-stats-with-images.stcc-layout-two .stcc-bottomgrid {
  flex: 0 0 41.2%;
}

.two-column-stats-with-images.stcc-layout-two .stcc-bottomgrid .stcc-img-portrait-wrap img {
  border-radius: 20px;
  aspect-ratio: 0.632;
}

@media screen and (max-width: 767px) {
  .two-column-stats-with-images.stcc-layout-two .stcc-bottomgrid .stcc-img-portrait-wrap img {
    border-radius: 10px;
    max-width: 61.5%;
    aspect-ratio: 0.69;
  }
}

.two-column-stats-with-images.stcc-layout-two .stcc-topgrid {
  flex: 1;
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .two-column-stats-with-images.stcc-layout-two .stcc-topgrid {
    padding-left: 44px;
    padding-right: 40px;
  }
}

.two-column-stats-with-images.stcc-layout-two .stcc-topgrid h2 {
  margin-bottom: 38px;
}

@media screen and (max-width: 991px) {
  .two-column-stats-with-images.stcc-layout-two .stcc-topgrid h2 {
    font-size: 46px;
  }
}

@media screen and (max-width: 767px) {
  .two-column-stats-with-images.stcc-layout-two .stcc-topgrid h2 {
    font-size: 40px;
    margin-bottom: 27px;
  }
}

.two-column-stats-with-images.stcc-layout-two .stcc-topgrid .stcc-subtitle-wrapper {
  padding: 56px 0 8px;
}

@media screen and (max-width: 767px) {
  .two-column-stats-with-images.stcc-layout-two .stcc-topgrid .stcc-subtitle-wrapper {
    padding: 57px 0 0;
  }
  .two-column-stats-with-images.stcc-layout-two .stcc-topgrid .stcc-subtitle-wrapper p {
    margin-bottom: 28px;
  }
}

.two-column-stats-with-images.stcc-layout-two .stcc-topgrid .stcc-bottomgrid-colright .stcc-img-landscape-wrap {
  padding-top: 120px;
}

@media screen and (max-width: 991px) {
  .two-column-stats-with-images.stcc-layout-two .stcc-topgrid .stcc-bottomgrid-colright .stcc-img-landscape-wrap {
    padding-top: 60px;
  }
}

.two-column-stats-with-images.stcc-layout-two .stcc-topgrid .stcc-bottomgrid-colright .stcc-img-landscape-wrap img,
.two-column-stats-with-images.stcc-layout-two .stcc-topgrid .stcc-bottomgrid-colright .stcc-img-landscape-wrap video {
  border-radius: 20px;
  aspect-ratio: 1.35;
}

@media screen and (max-width: 767px) {
  .two-column-stats-with-images.stcc-layout-two .stcc-topgrid .stcc-bottomgrid-colright .stcc-img-landscape-wrap img,
  .two-column-stats-with-images.stcc-layout-two .stcc-topgrid .stcc-bottomgrid-colright .stcc-img-landscape-wrap video {
    border-radius: 10px;
    width: calc(100% + 40px);
    max-width: inherit;
  }
}

.two-column-stats-with-images.stcc-layout-two .stcc-topgrid .stcc-description {
  margin-bottom: 0;
  max-width: inherit;
}

@media screen and (max-width: 767px) {
  .two-column-stats-with-images.stcc-layout-two .stcc-topgrid .stcc-description {
    margin-bottom: 34px;
  }
}

/*# sourceMappingURL=style-index.css.map*/