/*** ======= // TABLE OF CONTENT // ============================
01- Google Fonts
02- General Variables
03- General Styling

===================================================== ***/

/*=== Google Fonts ===*/
@import url(https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);

/*=== General Variables ===*/
:root {
  --heading: #454360;
  --body: #5e5c7f;
  --secondary: #353353;
  --purple: #6c6ce5;
  --primary: #ff4c60;
  --primary2: #ffd15c;
  --gray: #f9f9ff;
  --white: #ffffff;
  --black: #000000;
  --transition: all 0.2s cubic-bezier(0.19, 0.68, 0.49, 1.21);
  --transition2: all 0.3s linear;
  --Rubik: "Rubik", sans-serif;
}

/*=== General Styling ===*/
a {
  color: inherit;
}
a,
a:hover,
a:focus,
ins {
  text-decoration: none;
  outline: none;
}
input,
textarea,
select,
button {
  border: 0;
}
button,
input[type="submit"],
.fileContainer,
input[type="file"] {
  cursor: pointer;
}
input:focus,
textarea:focus,
select:focus,
button:focus,
.form-wrp fieldset p a:focus,
.page-link:focus,
.btn.focus,
.btn:focus {
  border-color: transparent;
  outline: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
textarea {
  resize: none;
}

/*=== Iframe ===*/
iframe {
  border: 0;
  width: 100%;
}

/*=== Image ===*/
img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

/*=== Cross Browser Compatibility ===*/
i,
a,
svg,
svg *,
img,
span,
:before,
:after,
input,
button,
textarea,
label {
  -webkit-transition: var(--transition2);
  transition: var(--transition2);
}

img,
nav ul ul {
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1); /* older webkit */
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); /* easeOutBack */
  -webkit-transition-timing-function: cubic-bezier(
    0.175,
    0.885,
    0.32,
    1
  ); /* older webkit */
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(
    0.175,
    0.885,
    0.32,
    1.275
  ); /* easeOutBack */
}

/*===== Preloader =====*/
.infinity div {
  -webkit-animation: rotate 6.9s linear infinite;
  animation: rotate 6.9s linear infinite;
}
.infinity div span {
  -webkit-box-shadow: 2px 2px 8px rgba(255, 76, 96, 0.09);
  box-shadow: 2px 2px 8px rgba(255, 76, 96, 0.09);
  -webkit-animation: move 6.9s linear infinite;
  animation: move 6.9s linear infinite;
}
.infinity div span:before,
.infinity div span:after {
  background-color: inherit;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
}
.infinity div span:before {
  -webkit-animation: drop1 0.8s linear infinite;
  animation: drop1 0.8s linear infinite;
}
.infinity div span:after {
  -webkit-animation: drop2 0.8s linear infinite 0.4s;
  animation: drop2 0.8s linear infinite 0.4s;
}
.infinity div:nth-child(2),
.infinity div:nth-child(2) span {
  -webkit-animation-delay: -2.3s;
  animation-delay: -2.3s;
}
.infinity div:nth-child(3),
.infinity div:nth-child(3) span {
  -webkit-animation-delay: -4.6s;
  animation-delay: -4.6s;
}
.infinityChrome div {
  -webkit-box-shadow: 2px 2px 8px rgba(255, 76, 96, 0.09);
  box-shadow: 2px 2px 8px rgba(255, 76, 96, 0.09);
  -webkit-animation: moveSvg 6.9s linear infinite;
  animation: moveSvg 6.9s linear infinite;
  -webkit-filter: url(#goo);
  filter: url(#goo);
  offset-path: path(
    "M64.3636364,29.4064278 C77.8909091,43.5203348 84.4363636,56 98.5454545,56 C112.654545,56 124,44.4117395 124,30.0006975 C124,15.5896556 112.654545,3.85282763 98.5454545,4.00139508 C84.4363636,4.14996252 79.2,14.6982509 66.4,29.4064278 C53.4545455,42.4803627 43.5636364,56 29.4545455,56 C15.3454545,56 4,44.4117395 4,30.0006975 C4,15.5896556 15.3454545,4.00139508 29.4545455,4.00139508 C43.5636364,4.00139508 53.1636364,17.8181672 64.3636364,29.4064278 Z"
  );
}
.infinityChrome div:before,
.infinityChrome div:after {
  background: inherit;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
}
.infinityChrome div:before {
  -webkit-animation: drop1 0.8s linear infinite;
  animation: drop1 0.8s linear infinite;
}
.infinityChrome div:after {
  -webkit-animation: drop2 0.8s linear infinite 0.4s;
  animation: drop2 0.8s linear infinite 0.4s;
}
.infinityChrome div:nth-child(2) {
  -webkit-animation-delay: -2.3s;
  animation-delay: -2.3s;
}
.infinityChrome div:nth-child(3) {
  -webkit-animation-delay: -4.6s;
  animation-delay: -4.6s;
}
@-webkit-keyframes moveSvg {
  0% {
    offset-distance: 0%;
  }
  25% {
    background-color: var(--purple);
  }
  75% {
    background-color: var(--primary2);
  }
  100% {
    offset-distance: 100%;
  }
}
@keyframes moveSvg {
  0% {
    offset-distance: 0%;
  }
  25% {
    background-color: var(--purple);
  }
  75% {
    background-color: var(--primary2);
  }
  100% {
    offset-distance: 100%;
  }
}
@-webkit-keyframes rotate {
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    margin-left: 0;
  }
  50.0001%,
  100% {
    margin-left: -3.75rem;
  }
}
@keyframes rotate {
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    margin-left: 0;
  }
  50.0001%,
  100% {
    margin-left: -3.75rem;
  }
}
@-webkit-keyframes move {
  0%,
  50% {
    left: -8px;
  }
  25% {
    background-color: var(--primary2);
  }
  75% {
    background-color: var(--purple);
  }
  50.0001%,
  100% {
    left: auto;
    right: -8px;
  }
}
@keyframes move {
  0%,
  50% {
    left: -8px;
  }
  25% {
    background-color: var(--primary2);
  }
  75% {
    background-color: var(--purple);
  }
  50.0001%,
  100% {
    left: auto;
    right: -8px;
  }
}
@-webkit-keyframes drop1 {
  100% {
    -webkit-transform: translate(2rem, 8px) scale(0);
    transform: translate(2rem, 8px) scale(0);
  }
}
@keyframes drop1 {
  100% {
    -webkit-transform: translate(2rem, 8px) scale(0);
    transform: translate(2rem, 8px) scale(0);
  }
}
@-webkit-keyframes drop2 {
  0% {
    -webkit-transform: translate(0, 0) scale(0.9);
    transform: translate(0, 0) scale(0.9);
  }
  100% {
    -webkit-transform: translate(2rem, -8px) scale(0);
    transform: translate(2rem, -8px) scale(0);
  }
}
@keyframes drop2 {
  0% {
    -webkit-transform: translate(0, 0) scale(0.9);
    transform: translate(0, 0) scale(0.9);
  }
  100% {
    -webkit-transform: translate(2rem, -8px) scale(0);
    transform: translate(2rem, -8px) scale(0);
  }
}

/*===== Theme Style =====*/
.mouse .wheel {
  -webkit-animation: ani-mouse 2s linear infinite;
  animation: ani-mouse 2s linear infinite;
}
@-webkit-keyframes ani-mouse {
  0% {
    top: 29%;
  }
  15% {
    top: 50%;
  }
  50% {
    top: 50%;
  }
  100% {
    top: 29%;
  }
}
@keyframes ani-mouse {
  0% {
    top: 29%;
  }
  15% {
    top: 50%;
  }
  50% {
    top: 50%;
  }
  100% {
    top: 29%;
  }
}

/*===== Header Style =====*/
nav ul li a.active,
nav ul li a.active > i {
  color: var(--primary2);
}
header.bg-gray nav ul li a.active,
header.bg-gray nav ul li a.active > i {
  color: var(--primary);
}

/*===== Sec Title =====*/
.secTitle:before {
  background-image: url(../images/dots-bg.svg);
}
.bg-secondary .secTitle:before {
  background-image: url(../images/dots-bg-light.svg);
}

/*===== Box Shadow =====*/
.darkShadow {
  -webkit-box-shadow: 0px 5px 1.25rem 0px rgba(69, 67, 96, 0.1);
  box-shadow: 0px 5px 1.25rem 0px rgba(69, 67, 96, 0.1);
}
.lightShadow {
  -webkit-box-shadow: 0px 5px 1.25rem 0px rgba(255, 255, 255, 0.01);
  box-shadow: 0px 5px 1.25rem 0px rgba(255, 255, 255, 0.01);
}
.blueShadow {
  -webkit-box-shadow: 0px 5px 1.25rem 0px rgba(108, 108, 229, 0.5);
  box-shadow: 0px 5px 1.25rem 0px rgba(108, 108, 229, 0.5);
}
.pinkShadow {
  -webkit-box-shadow: 0px 5px 1.25rem 0px rgba(249, 123, 139, 0.5);
  box-shadow: 0px 5px 1.25rem 0px rgba(249, 123, 139, 0.5);
}
.yellowShadow {
  -webkit-box-shadow: 0px 5px 1.25rem 0px rgba(255, 209, 92, 0.5);
  box-shadow: 0px 5px 1.25rem 0px rgba(255, 209, 92, 0.5);
}

/*===== About Style =====*/
.aboutCap:before {
  border-top-color: transparent;
  border-bottom-color: transparent;
}

/*===== Portfolio Style =====*/
.portFilter > li.active {
  color: var(--primary);
}
.portInfo > h3 {
  -webkit-transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
  -o-transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
  transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

/*===== Plan Style =====*/
.rc-bdg {
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

/*===== Testimonials Style =====*/
.testiCap:before {
  border-left-color: transparent;
  border-right-color: transparent;
}
.testiCaro .slick-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 0.9375rem;
}
.testiCaro .slick-dots li {
  line-height: 1;
  font-size: 0;
}
.testiCaro .slick-dots li button {
  height: 6px;
  width: 10px;
  background-color: #d4d4ff;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 0;
}
.testiCaro .slick-dots li.slick-active button {
  width: 1.25rem;
  background-color: var(--primary);
}
.testiCaro .slick-dots li button:hover {
  background-color: var(--primary);
}

/*===== Contact Style =====*/
.contInfo:before {
  background-image: url(../images/map.svg);
}
.bg-secondary .contInfo:before {
  background-image: url(../images/map-light.png);
}

/*===== Widgets Style =====*/
.widgetBox.bg-dark ul li::marker {
  color: var(--white);
}

/*===== Blog Single Style =====*/
.commentInfo {
  flex: 1 0 0;
}