/**
Theme Name: Fitness
Theme URI: https://wpFitness.com/
Author: Brainstorm Force
Author URI: https://wpFitness.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=Fitness_theme
Description: Fitness is fast, fully customizable & beautiful WordPress theme suitable for blog, personal portfolio, business website and WooCommerce storefront. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Fitness comes with Schema.org code integrated and is Native AMP ready so search engines will love your site. It offers special features and templates so it works perfectly with all page builders like Elementor, Beaver Builder, Visual Composer, SiteOrigin, Divi, etc. Some of the other features: # WooCommerce Ready # Responsive # RTL & Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Fitness is fast, fully customizable and WooCommerce ready theme that you can use for building any kind of website!
Version: 4.3.1
Requires at least: 5.3
Requires PHP: 5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Fitness
Domain Path: /languages
Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog
AMP: true

Fitness WordPress Theme, Copyright 2020 WPFitness.
Fitness is distributed under the terms of the GNU GPL.

Fitness is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of.
Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/

Fitness icon font is based on IcoMoon-Free vector icon by Keyamoon.
IcoMoon-Free vector icon distributed under terms of CC BY 4.0 or GPL. (https://creativecommons.org/licenses/by/4.0/ or https://www.gnu.org/licenses/gpl.html)
Source: http://keyamoon.com/

Flexibility is a JavaScript polyfill for Flexbox By Jonathan Neal, 10up. (https://github.com/jonathantneal/flexibility)
Licensed under MIT ( https://github.com/jonathantneal/flexibility/blob/master/LICENSE.md )

Screenshot image is a collage of actual sites created using the Fitness WordPress Theme.

Icons used in the Screenshot image are all licensed under Creative Commons ( CC BY 4.0 ) License ( https://fontawesome.com/license/free )
https://fontawesome.com/v5.15/icons/store?style=solid
https://fontawesome.com/v5.15/icons/shopping-cart?style=solid
https://fontawesome.com/v5.15/icons/pen-square?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid

Illustrations used in the Screenshot images are all licensed under Creative Commons ( CC0 ) License ( https://gumroad.com/l/humaaans )
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/standing-24.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/sitting-2.png

Hand-drawn illustrations used are created by Brainstorm Force and released under Creative Commons ( CC0 ) License.
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/girl-with-image-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/boy-with-code-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/web-browser.png

The same site as screenshot can be imported from here https://websitedemos.net/web-design-agency-08/.

For more information, refer to this document on how to create a page like in the screenshot - https://wpFitness.com/docs/replicating-the-screenshot/.

Fitness default breadcrumb is based on Breadcrumb Trail by Justin Tadlock. (https://github.com/justintadlock/breadcrumb-trail)
Breadcrumb Trail is distributed under the terms of the GNU GPL v2 or later.

Fitness local fonts feature is based on Webfonts Loader by WordPress Themes Team (WPTT). (https://github.com/WPTT/webfont-loader)
Licensed under MIT ( https://github.com/WPTT/webfont-loader/blob/master/LICENSE )

/* Note: The CSS files are loaded from assets/css/ folder. */


@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&family=Poppins:wght@300;400;500;600;700&family=Roboto+Condensed:wght@400;700&display=swap");

.font-Josefin {
  font-family: "Josefin Sans", sans-serif;
}

.menu {
  transform: translateX(-100%);
  transition: transform 0.5s ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #1a202c;
  z-index: 99999;
}



.menu.active {
  transform: translateX(0);
}

.cross {
  display: none;
  cursor: pointer;
}

.cross.active {
  display: block;
}

/* Variables */
:root {
  --color: #ffffff;
}

/* Text Styles */
.text {
  display: inline-block;
  position: relative;
  color: rgba(var(--color), 0.6);
  font-size: 3rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

/* Conditional Styling */
@supports (-webkit-text-stroke: 2px var(--color)) {
  .text {
    -webkit-text-stroke: 2px var(--color);
    color: transparent;
  }
}

@media screen and (max-width: 400px) {
  .text {
    font-size: 30px;
  }
	@supports (-webkit-text-stroke: 1px var(--color)) {
  .text {
    -webkit-text-stroke: 1px var(--color);
    color: transparent;
  }
}
}

/* Pseudo-element (Before) */
.text:before {
  content: attr(data-hover);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  color: var(--color);
  white-space: nowrap;
  transition: all 0.5s cubic-bezier(0.17, 0.67, 0.32, 0.87);
}

/* Hover Styles */
.text:hover:before {
  width: 100%;
}

/* Font-face Declaration */
@font-face {
  font-family: "Montserrat";
  font-weight: 800;
  font-style: normal;
  src: local("Montserrat ExtraBold"), local("Montserrat-ExtraBold"),
    url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_c5H3gnD_vx3rCs.woff2)
      format("woff2");
  unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da,
    U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

.aclass {
  /* Same as before */
  background: linear-gradient(
    to left,
    rgb(233, 209, 202),
    rgb(233, 209, 202) 50%,
    white 50%
  );
}

.aclass {
  /* Same as before */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

.aclass {
  /* Same as before */
  transition: background-position 275ms ease;
}

.aclass:hover {
  background-position: 0 100%;
}

.sideban {
  /* standard property */
  -webkit-text-stroke: 2px rgb(255, 255, 255);
  /* WebKit-specific property */
  color: #e9d1ca;
  font-size: 170px;
}

video {
  position: absolute;
  bottom: -150px;
  left: 550px;
  z-index: 2;
}

@media (max-width: 828px) {
  video {
    bottom: 150px;
    left: 100px;
    width: 70%;
  }
}

@media (max-width: 400px) {
  video {
    bottom: 120px;
    left: 40px;
    width: 80%;
    z-index: 100;
  }
}

h1 {
  z-index: 3;
  -webkit-text-stroke: 2px rgb(255, 255, 255);
}

.h1-pt {
  z-index: 3;
  -webkit-text-stroke: 2px rgb(0, 0, 0);
}

.hoso {
  z-index: 3;
  -webkit-text-stroke: 2px rgb(255, 255, 255);
   }


.slideDown,
.slideUp,
nav {
  opacity: 0;
}

.slideDown,
nav {
  animation: slideDown ease 0.4s forwards 0.6s;
}

.slideUp {
  animation: slideUp ease 0.5s forwards 0.6s;
}

@keyframes slideUp {
  0% {
    transform: translateY(40px);
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}

@keyframes nav {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}

.emblem {
  width: 30vh;
  height: 30vh;
  border-radius: 50%;
  animation: spinZ 20s linear infinite;
  text-align: center;
}

@media (max-width: 880px) {
  .emblem {
    width: 20vh;
    height: 20vh;
    animation: spinZ 5s linear infinite;
  }
}

.emblem span {
  position: absolute;
  display: inline-block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-transform: uppercase;
  font-size: 2vh;
  transition: all 0.5s cubic-bezier(0, 0, 0, 1);
}

@keyframes spinZ {
  0% {
    transform: rotateZ(360deg);
  }

  100% {
    transform: rotateZ(0deg);
  }
}

@media screen and (min-width: 1000px) {
  .ptt {
    display: block;
  }
}

/* Styles for screens narrower than 1000px */
@media screen and (max-width: 1000px) {
  .ptt {
    display: none;
  }
}

.emblem1 {
  width: 20vh;
  height: 20vh;
  border-radius: 50%;
  animation: spinZ 20s linear infinite;
  text-align: center;
}

@media (max-width: 880px) {
  .emblem1 {
    animation: spinZ 5s linear infinite;
  }
}

.emblem1 span {
  position: absolute;
  display: inline-block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-transform: uppercase;
  font-size: 2vh;
  transition: all 0.5s cubic-bezier(0, 0, 0, 1);
}

@keyframes spinZ {
  0% {
    transform: rotateZ(360deg);
  }

  100% {
    transform: rotateZ(0deg);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.sidebar {
  z-index: 3;
  -webkit-text-stroke: 2px rgb(255, 255, 255);
  overflow: hidden;
}
@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
  .sidebar1 {
    display: none;
  }
}

@media (max-width: 600px) {
  .pictureb {
    display: none;
  }
}

.sidebar1 {
  z-index: 3;
  -webkit-text-stroke: 2px rgb(0, 0, 0);
  overflow: hidden;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.animate-marquee {
  animation: marquee 20s linear infinite;
}

.mark {
  -webkit-text-stroke: 2px rgb(0, 0, 0);
  z-index: 100;
}

.mark1 {
  -webkit-text-stroke: 2px rgb(255, 255, 255);
}

::selection {
  background: rgba(170, 170, 170, 0.3);
}

.heading {
  margin: 0px 0 0 80px;
  font-size: 64px;
  width: max-content;
  display: flex;
  flex-direction: column;
}

@media (max-width: 400px) {
  .heading {
    margin: 0px 0 0 20px;
  }
}

@media screen and (min-width: 400px) {
  .vabb {
    display: block;
  }
}

/* Styles for screens narrower than 400px */
@media screen and (max-width: 400px) {
  .vabb {
    display: none;
  }
}

.vabb1 {
  display: none; /* Hide by default */
}

/* Media query for screens smaller than 400px */
@media screen and (max-width: 400px) {
  .vabb1 {
    display: block; /* Show on screens smaller than 400px */
  }
}

.heading > div {
  overflow: hidden;
}

.heading > div > p {
  width: max-content;
  white-space: nowrap;
  margin: 0;
  line-height: 117%;
}

.green {
  color: #32c267;
}

@keyframes slide-up {
  0% {
    transform: translateY(100px);
  }

  100% {
    transform: translateY(0);
  }
}

@for $i from 2 through 3 {
  .heading:nth-child(#{$i}) > div {
    animation-delay: 0s;
  }

  .heading:nth-child(#{$i}):nth-child(#{$i}) > div > p {
    animation-delay: #{$i * 0.025}s;
  }
}

.slide-up {
  opacity: 0;
  transform: translateY(20px); /* Initial position */
  transition: opacity 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.75s cubic-bezier(0.65, 0, 0.35, 1);
}
.slide-up.active {
  opacity: 1;
  transform: translateY(0); /* Final position */
}

/* Variables */
:root {
  --main: rgb(212, 64, 64);
  --font: "Druk Wide", "AkkuratStd", "OAF";
}

/* Heading Styles (h2) */
.hovv {
  font-size: 10vh;
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: 0.3rem;
  font-family: var(--font), sans-serif;
  margin: 0;
  cursor: pointer;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--main);
  position: relative;
  padding-left: 80px;
}

@media (max-width: 830px) {
  .hovv {
    font-size: 6vh;
    margin-top: 100px;
  }
}

@media (max-width: 600px) {
  .hovv {
    font-size: 5vh;
    padding-left: 10px;
  }
  h3:after {
    content: attr(data-hover);
    position: absolute;
    color: var(--main);

    transition: width 0.5s ease-in-out;
    overflow: hidden;
    white-space: nowrap;
    will-change: width;

  }
}

h3:nth-child(2) {
  -webkit-text-stroke-color: darken(var(--main), 5%);
}

h3:nth-child(3) {
  -webkit-text-stroke-color: darken(var(--main), 8%);
}

h3:nth-child(4) {
  -webkit-text-stroke-color: darken(var(--main), 11%);
}

h3:hover:after {
  width: 100%;
}

/* Pseudo-element (h2:after) */
h3:after {
  content: attr(data-hover);
  position: absolute;
  color: var(--main);
  left: 0;
  width: 0;
  transition: width 0.5s ease-in-out;
  overflow: hidden;
  white-space: nowrap;
  will-change: width;
  padding-left: 80px;
}

.cont1 {
  display: block;
  position: relative;
  height: auto;
  width: 400px;
  padding: 0px;
  font-family: "Josefin Sans", sans-serif;
}

.cont11 {
  height: auto;
  width: 400px;
  font-family: "Josefin Sans", sans-serif;
  margin-bottom: 20px;
}

@media (max-width: 830px) {
  .cont11 {
    width: 700px;
  }
}

@media (max-width: 400px) {
  .cont11 {
    width: 280px; /* Adjust the width for smaller screens */
  }

  ul li label {
    padding: 10px 10px 10px 40px; /* Adjust padding for smaller screens */
    font-size: 0.75rem; /* Adjust font size for smaller screens */
  }

  ul li .check {
    height: 15px; /* Adjust the height of the checkmark for smaller screens */
    width: 15px; /* Adjust the width of the checkmark for smaller screens */
    top: 15px; /* Adjust the top position of the checkmark for smaller screens */
    left: 10px; /* Adjust the left position of the checkmark for smaller screens */
  }

  ul li .check::before {
    height: 5px; /* Adjust the height of the inner circle for smaller screens */
    width: 5px; /* Adjust the width of the inner circle for smaller screens */
  }
}

.container ul {
  list-style: none;
  margin-left: 200px;
  padding: 0;
  overflow: hidden;
}

ul li {
  color: #aaaaaa;
  display: block;
  position: relative;
  float: left;
  width: 100%;
}

ul li input[type="radio"] {
  position: absolute;
  visibility: hidden;
}

ul li label {
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.3rem;
  padding: 25px 25px 25px 80px;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li:hover label {
  color: #ffffff;
}

ul li .check {
  display: block;
  position: absolute;
  border: 5px solid #aaaaaa;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
  z-index: 5;
  transition: border 0.25s linear;
  -webkit-transition: border 0.25s linear;
}

ul li:hover .check {
  border: 5px solid #ffffff;
}

ul li .check::before {
  display: block;
  position: absolute;
  content: "";
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 0px;
  left: 0px;
  margin: auto;
  transition: background 0.25s linear;
  -webkit-transition: background 0.25s linear;
}

input[type="radio"]:checked ~ .check {
  border: 5px solid #056e3f;
}

input[type="radio"]:checked ~ .check::before {
  background: #056e3f;
}

input[type="radio"]:checked ~ label {
  color: #056e3f;
}

.navbar-wrapper {
  list-style: none;
}

.navbar-item {
  margin-bottom: 0px;
}

.navbar-item > a {
  color: white;
  font-size: 3rem;
  text-decoration: none;
  text-stroke: 0.07vw transparent;
  -webkit-text-stroke: 0.07vw transparent;
  transition: all 0.25s cubic-bezier(0, 0, 0.25, 1);
}

@media (max-width: 400px) {
  .navbar-item > a {
    font-size: 2rem;
  }
}

.navbar-item > a:hover {
  color: transparent;
  text-stroke-color: white;
  -webkit-text-stroke-color: white;
}

@keyframes fadeInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

/* Add a new class for elements that should initially be hidden */
.fadeInUp-animation {
  opacity: 0;
}

/* Add a class that will be applied when the element is in the viewport */
.fadeInUp-animation.visible {
  animation: 1.5s fadeInUp;
  opacity: 1;
}

/* CSS */
@keyframes fadeInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

/* Add a new class for elements that should initially be hidden */
.fadeInUp-ani {
  opacity: 0;
}

/* Add a class that will be applied when the element is in the viewport */
.fadeInUp-ani.visible {
  animation: 1.5s fadeInUp;
  opacity: 1;
}

.bgchange {
  background: linear-gradient(#e9d1ca, #ffffff);
}

@keyframes slide-up {
  from {
    transform: translateY(5rem);
  }
  to {
    transform: translateY(0);
  }
}

/**
 * Mixins
 */
@mixin nth-animation-delay($items: 3, $time: 0.1s) {
  @for $i from 1 through $items {
    &:nth-child(#{$i}) {
      animation-delay: $time * $i;
    }
  }
}

/**
 * Base Settings/Overwrite Normalize
 */
*,
*:before,
*:after {
  box-sizing: border-box;
}

h4 {
  line-height: 0.9;
}

#text {
  overflow: hidden;
}

#text span {
  display: inline-block;
  animation: slide-up 0.8s ease-in-out both;
}

/**
 * Animations
 */
@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.box {
  display: flex;
}

.box .inner {
  width: 1500px;
  height: 200px;
  line-height: 200px;
  font-size: 8em;
  font-family: sans-serif;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}

.box .inner:first-child {
  background-color: indianred;
  color: darkred;
  transform-origin: right;
  transform: perspective(100px) rotateY(-15deg);
}

.box .inner:last-child {
  background-color: lightcoral;
  color: antiquewhite;
  transform-origin: left;
  transform: perspective(100px) rotateY(15deg);
}

.box .inner span {
  position: absolute;
  animation: marquee 5s linear infinite;
}

.box .inner:first-child span {
  animation-delay: 2.5s;
  left: -100%;
}

@keyframes marquee {
  from {
    left: 100%;
  }

  to {
    left: -100%;
  }
}

.marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  column-gap: 4rem;
  background-color: transparent;
  box-sizing: border-box;
}

.marquee-content {
  animation: 20s linear 0s infinite normal none running scroll;
  display: flex;
  min-width: 100%;
  align-items: center;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  column-gap: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.text-block {
  font-family: "Inter", sans-serif;
  color: rgb(255, 255, 255);
  font-size: 7rem;
  line-height: 7rem;
  font-weight: 700;
  box-sizing: border-box;
  overflow: hidden;
}

.text-block1 {
  -webkit-text-stroke: 2px rgb(255, 255, 255);
  color: #183330;
  font-size: 7rem;
  line-height: 7rem;
  font-weight: 700;
  box-sizing: border-box;
  overflow: hidden;
}

.text-block2 {
  -webkit-text-stroke: 2px rgb(255, 255, 255);
  color: transparent;
  font-size: 7rem;
  line-height: 7rem;
  font-weight: 900;
  box-sizing: border-box;
}

.text-block3 {
  -webkit-text-stroke: 2px rgb(0, 0, 0);
  color: transparent;
  font-size: 7rem;
  line-height: 7rem;
  font-weight: 900;
  box-sizing: border-box;
}

@media (max-width: 830px) {
  .text-block {
    font-size: 3rem;
  }
  .text-block1 {
    font-size: 3rem;
  }
  .text-block2 {
    font-size: 3rem;
  }
  .text-block3 {
    font-size: 3rem;
  }
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% - 4rem));
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@media screen and (max-width: 992px) {
  .conva {
    display: none; /* Hide the element on medium screens */
  }
}

/* Media query for mobile screens */
@media screen and (max-width: 768px) {
  .conva {
    display: none; /* Hide the element on mobile screens */
  }
}

.cova {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.con {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #e9d1ca;
}

.con::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#e9d1ca, rgb(233, 83, 83));
  clip-path: circle(25% at right 20%);
}

.con::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgb(238, 129, 129), rgb(241, 210, 210));
  clip-path: circle(12% at left 45%);
}

.container1 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
  width: 1200px;
  height: 600px;
  background: #e9d1ca;
  transition: 0.25s;
}

.container1 .box {
  position: relative;
  background: var(--img);
  background-position: center;
  background-size: cover;
  transition: 0.25s;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: grayscale(0) brightness(1);
}

.container1:hover .box {
  filter: grayscale(1);
}

.container1 .box:hover {
  filter: grayscale(0) brightness(1.25);
}

.container1:has(.one:hover) {
  grid-template-columns: 2fr 0.5fr 0.5fr 0.5fr 0.5fr;
}

.container1:has(.two:hover) {
  grid-template-columns: 0.5fr 2fr 0.5fr 0.5fr 0.5fr;
}

.container1:has(.three:hover) {
  grid-template-columns: 0.5fr 0.5fr 2fr 0.5fr 0.5fr;
}

.container1:has(.four:hover) {
  grid-template-columns: 0.5fr 0.5fr 0.5fr 2fr 0.5fr;
}

.container1:has(.five:hover) {
  grid-template-columns: 0.5fr 0.5fr 0.5fr 0.5fr 2fr;
}

.container1 .box::before {
  content: "";
  position: absolute;
  top: -1px;
  width: 100%;
  height: calc(100% + 2px);
  background: linear-gradient(
    transparent,
    transparent,
    transparent,
    transparent,
    transparent
  );
}

.container1 .box:nth-child(even) {
  transform: translateY(30px);
}

.container1 .box:nth-child(odd) {
  transform: translateY(-30px);
}

.container1 .box::after {
  content: attr(data-text);
  position: absolute;
  bottom: -100px;
  background: #000000;
  color: #ffffff;
  font-size: 1em;
  font-weight: 600;
  padding: 5px 10px;
  white-space: nowrap;
  transition: 0.5s;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  opacity: 0;
  transition-delay: 0s;
  -webkit-box-reflect: below 2px linear-gradient(transparent, #0003);
}

.container1 .box:hover::after {
  opacity: 1;
  bottom: -60px;
  transition-delay: 0.25s;
}


.call {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.call1 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  background: #e9d1ca;
}
.call1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgb(233, 83, 83), #e9d1ca);
  clip-path: circle(30% at right 70%);
}
.call1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgb(240, 206, 206), rgb(233, 83, 83));
  clip-path: circle(20% at left 32%);
}
.container11 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 1200px;
  flex-wrap: wrap;
  z-index: 1;
}
.container11 .card {
  position: relative;
  width: 280px;
  height: 400px;
  margin: 30px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
}
.container11 .card .content {
  padding: 20px;
  text-align: center;
  transform: translateY(100px);
  opacity: 0;
  transition: 0.5s;
}
.container11 .card:hover .content {
  transform: translateY(0px);
  opacity: 1;
}
.container11 .card .content h2 {
  position: absolute;
  top: -60px;
  right: 10px;
  font-size: 8em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  z-index: -1;
}
.container11 .card .content h3 {
  font-size: 1.8em;
  color: #000000;
  z-index: 1;
}
.container11 .card .content p {
  font-size: 1em;
  color: #000000;
  font-weight: 300;
}
.container11 .card .content .texxt {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  margin-top: 15px;
  background: #fff;
  color: #0e0d0d;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 5px 15px rgba(248, 247, 247, 0.2);
}

.headd1 {
  box-sizing: border-box;
}

.headd1 {
  font-size: calc(100vmax / 1600 * 100);
}

.headd {
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #222;
  background-image: linear-gradient(#f3a38a, #e9d1ca);
  font-size: 0.3rem;
  font-family: "Raleway", sans-serif;
}

.headdin {
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #222;
  background: #e9d1ca;
  font-size: 0.3rem;
  font-family: "Raleway", sans-serif;
}

svg text {
  font-size: 10rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 8px;
  fill: transparent;
  stroke: #ffffff;
  stroke-width: 2px;
  animation: animated-stroke 5s;
  text-anchor: middle;
  dominant-baseline: middle;
}

@media screen and (max-width: 400px) {
  svg text {
    font-size: 3rem;
  }
}

@keyframes animated-stroke {
  0% {
    stroke-dasharray: 0 80%;
  }

  100% {
    stroke-dasharray: 10% 0%;
    stroke-dashoffset: 25%;
  }
}

.circle-img {
  width: 100px;
  /* Adjust the width as needed */
  height: 100px;
  /* Adjust the height as needed */
  overflow: hidden;
  border-radius: 50%;
  /* This creates a circular shape */
  margin: 0 auto;
  /* Center the image horizontally */
}

.circle-img img {
  width: 100%;
  /* Make sure the image fills the circle */
  height: auto;
  /* Maintain the aspect ratio */
  display: block;
  /* Remove extra space below the image */
}

input:focus,
textarea:focus,
keygen:focus,
select:focus {
  outline: none;
}

::-moz-placeholder {
  color: #666;
  font-weight: 300;
  opacity: 1;
}

::-webkit-input-placeholder {
  color: #666;
  font-weight: 300;
}

/* Contact Form Styling */
.container11 {
  padding: 0 50px 70px;
  background-color: #e9d1ca;
}

.textcenter {
  text-align: center;
}

.section2 {
  width: 1200px;
  margin: 25px auto;
}

.section2 .col2 {
  width: 48.71%;
}

.section2 .col2.first {
  float: left;
}

.section2 .col2.last {
  float: right;
}

.section2 .col2.column2 {
  padding: 0 30px;
}

.section2 span.collig {
  color: #3b3b3b;
  margin-right: 10px;
  display: inline-block;
}

.section2 .sec2addr {
  display: block;
  line-height: 26px;
}

.section2 .sec2addr p:first-child {
  margin-bottom: 10px;
}

.section2 .sec2contactform input[type="text"],
.section2 .sec2contactform input[type="email"],
.section2 .sec2contactform textarea {
  padding: 18px;
  border: 0;
  background: #ededed;
  margin: 7px 0;
}

.section2 .sec2contactform textarea {
  width: 100%;
  display: block;
  color: #666;
  resize: none;
}

.section2 .sec2contactform input[type="submit"] {
  padding: 15px 40px;
  color: #fff;
  border: 0;
  background: #000000;
  font-size: 16px;
  text-transform: uppercase;
  margin: 7px 0;
  cursor: pointer;
}

.section2 .sec2contactform h3 {
  font-weight: normal;
  margin: 20px 0;
  margin-top: 30px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 19px;
  color: #000000;
}

/* @media querries */

@media only screen and (max-width: 1266px) {
  .section2 {
    width: 100%;
  }
}

@media only screen and (max-width: 960px) {
  .container11 {
    padding: 0 30px 70px;
  }

  .section2 .col2 {
    width: 100%;
    display: block;
  }

  .section2 .col2.first {
    margin-bottom: 10px;
  }

  .section2 .col2.column2 {
    padding: 0;
  }

  body .sec2map {
    height: 250px !important;
  }
}

@media only screen and (max-width: 768px) {
  .section2 .sec2addr {
    font-size: 14px;
  }

  .section2 .sec2contactform h3 {
    font-size: 16px;
  }

  .section2 .sec2contactform input[type="text"],
  .section2 .sec2contactform input[type="email"],
  .section2 .sec2contactform textarea {
    padding: 10px;
    margin: 3px 0;
  }

  .section2 .sec2contactform input[type="submit"] {
    padding: 10px 30px;
    font-size: 14px;
  }
}

.feedback {
  font-family: "Poppins", sans-serif;
}

section {
  position: relative;
  background: #e9d1ca;
  min-height: 80vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

section::before {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  background: linear-gradient(#e9d1ca, #e75d3a);
  border-radius: 50%;
  transform: translate(-250px, -120px);
}

section::after {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  background: linear-gradient(#dd6541, #e9d1ca);
  border-radius: 50%;
  transform: translate(250px, 120px);
}

.box1 {
  position: absolute;
  min-width: 350px;
  min-height: 400px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  z-index: 10;
  padding: 20px;
  backdrop-filter: blur(25px);
}

@media (max-width: 400px) {
  .box1 {
    min-width: 300px;
  }
}

.box1 h3 {
  color: #fff;
  margin-bottom: 20px;
}

.box1 .list {
  position: relative;
  display: flex;
  padding: 10px;
  background: rgba(224, 204, 196, 0);
  border-radius: 10px;
  margin: 10px 0;
  cursor: pointer;
  transition: 0.5s;
  overflow: hidden;
}

.box1 .list:hover {
  background: #fff;
  box-shadow: -15px 30px 50px rgb(0, 0, 0, 0.5);
  transform: scale(1.15) translateX(30px) translateY(-15px);
  z-index: 1000;
}

.box1 .list .imgBx {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 10px;
}

.box1 .list .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box1 .list .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.box1 .list .content .rank {
  position: absolute;
  right: -50px;
  color: #e6491a;
  transition: 0.5s;
  font-size: 2em;
}

.box1 .list .content .rank small {
  font-weight: 500;
  opacity: 0.25;
}

.box1 .list:hover .content .rank {
  right: 20px;
}

.box1 .list .content h4 {
  line-height: 1em;
  font-weight: 600;
  transition: 0.5s;
}

.box1 .list .content p {
  font-size: 0.75em;
  transition: 0.5s;
}

.box1 .list:hover .content h4,
.box1 .list:hover .content p {
  color: #333;
}




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


        .outerdiv {
            width: 100%;
            min-height: 70vh;
            background: #e9d1ca;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .innerdiv {
            transform: scale(0.9);
            margin: 1rem;
            display: grid;
            grid-gap: 1.5rem;
            grid-template-rows: repeat(2, 22rem);
            grid-template-columns: repeat(4, 17rem);
        }

        .eachdiv {
            padding: 1rem 2rem;
            border-radius: 0.8rem;
            box-shadow: 5px 5px 20px #6d6b6b6b;
            color: white;
        }

        .div1 {
            background: #864ce2;
            grid-column: 1/3;
            grid-row: 1/2;
            background-image: url(https://raw.githubusercontent.com/RahulSahOfficial/testimonials_grid_section/5532c958b7d3c9b910a216b198fdd21c73112d84/images/bg-pattern-quotation.svg);
            background-repeat: no-repeat;
            background-position-x: 25rem;
        }

        .div2 {
            background: #49556B;
            grid-column: 3/4;
            grid-row: 1/2;
        }

        .div3 {
            background: white;
            grid-column: 4/5;
            grid-row: 1/3;
            color: black;
        }

        .div4 {
            background: white;
            grid-column: 1/2;
            grid-row: 2/3;
            color: black;
        }

        .div5 {
            background: #18202D;
            grid-column: 2/4;
            grid-row: 2/3;
        }

        .userdetails {
            display: flex;
        }

        .imgbox {
            margin-right: 1rem;
        }

        .imgbox img {
            border-radius: 50%;
            width: 2rem;
            border: 2px solid #cec5c5;
        }

        .detbox {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .detbox p {
            margin: 0;
        }

        .detbox .name {
            color: hsl(0, 0%, 81%);
            font-size: 0.9rem;
            margin-bottom: 0.1rem;
            font-weight: 600;
        }

        .detbox .name.dark {
            color: #49505A;
        }

        .detbox .designation {
            color: hsl(0, 0%, 81%);
            opacity: 50%;
            font-size: 0.8rem;
        }

        .detbox .designation.dark {
            color: #49505A;
        }

        .review h4 {
            font-size: 1.4rem;
            color: #F3DEFF;
            font-weight: 600;
            line-height: 1.5;
            margin-bottom: 0.8rem;
        }

        .review.dark h4 {
            color: #4B5258;
        }

        .review p {
            font-size: 0.95rem;
            color: #F3DEFF;
            font-weight: 500;
            opacity: 50%;
            line-height: 1.5;
        }

        .review.dark p {
            color: #0e0e0e;
        }

        .attribution {
            font-size: 1rem;
            line-height: 1.5;
            position: fixed;
            bottom: 1rem;
            right: 1rem;
            text-align: right;
        }

        .attribution a {
            text-decoration: none;
        }

        @media only screen and (max-width: 1000px) {
            .innerdiv {
                transform: scale(0.7);
            }
        }

        @media only screen and (max-width: 800px) {
            .innerdiv {
                transform: scale(0.6);
            }
        }

        @media only screen and (max-width: 600px) {
            .div1 {
                background-position-x: 10rem;
            }

            .innerdiv {
                display: flex;
                flex-direction: column;
                transform: scale(1);
                margin: 2rem;
                margin-bottom: 5rem;
            }

            .attribution {
                position: relative;
            }
        }

.jtp {
            color: transparent;
            -webkit-text-stroke-width: 2px;
            -webkit-text-stroke-color: rgb(255, 255, 255);
            text-align: center;
        }

        .swiper-container {
            width: 100%;
            max-width: 400px; /* Set max-width to 400px for screens <= 850px */
            margin: 0 auto;
        }

        /* Set max-width to 100% for screens > 850px */
        @media (min-width: 851px) {
            .swiper-container {
                max-width: 100%;
            }
        }