@charset "UTF-8";
/* ------------------------------------------------
Tamplate Name: Modern Agency Website Templates
Author: CodingAvenger Inc.
Author URI: themetech.net
Description: A versatile, responsive HTML template designed for agencies of all types. Features include a clean and modern design, customizable sections for services, portfolio, team, and contact information, and cross-browser compatibility. 
Ideal for showcasing your agency’s work and engaging clients with an attractive, user-friendly interface.

Version: 1:0
------------------------------------------------------*/
/*
[Table of contents]

 01.Nav Bar
 02. Hero Section
 03. Services Section
 04. Portfolio Section
 05. Pricing Section
 06. Testimonials Us Section
 07. Blog Section
 08. Faq Section
 09. Contact Section
 10. Footer Section
 11. Google Fonts
 12. Typography
 13. Useful Classes
 14. Slick Carousel
*/
/*----------------------
 11. Google Fonts
-----------------------*/
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
body {
  background-color: #0A161D;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/*-----------------------
 13. Useful Classes
-----------------------*/
* {
  margin: 0;
  padding: 0;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
}

p {
  margin-bottom: 0;
}

ul,
li {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
  user-select: none;
}
a:focus-visible {
  outline: none;
}

button {
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
}

img {
  user-select: none;
  max-width: 100%;
  width: 100%;
}

span {
  display: inline-flex;
}

iframe {
  width: 100%;
}

.section-title {
  font-family: Jost;
  font-size: 24px;
  font-weight: 600;
  background-image: var(--Gradiant, linear-gradient(135deg, #9FE509 0%, #4DFD83 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-sub-title {
  color: #DFF3FF;
  font-family: Nunito;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.title-content {
  color: #989898;
  font-family: Jost;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

.section-padding {
  padding: 60px 0;
}

.g-24 {
  gap: 24px;
}

.tpFadeInUp {
  opacity: 0; /* Start invisible */
  animation: tpFadeInUp 2s ease-out forwards; /* 2 seconds duration, ease-out effect */
}

@keyframes tpFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px); /* Start slightly below */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* End at original position */
  }
}
@keyframes tpslideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.tpfadeInLeft {
  opacity: 0; /* Start invisible */
  animation: tpfadeInLeft 2s ease-out forwards; /* 2 seconds duration, ease-out effect */
}

@keyframes tpfadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px); /* Start slightly to the left */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* End at original position */
  }
}
.tpSkillInLeft {
  opacity: 0; /* Start invisible */
  animation: tpSkillInLeft 2s ease-out forwards; /* 2 seconds duration, ease-out effect */
}

@keyframes tpSkillInLeft {
  0% {
    opacity: 0;
    transform: translateX(-300px); /* Start slightly to the left */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* End at original position */
  }
}
.slideinup {
  -webkit-animation-name: slideinup;
  animation-name: slideinup;
}

@keyframes slideinup {
  0% {
    opacity: 0;
    transform: translateY(70px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideinright {
  0% {
    opacity: 0;
    transform: translateX(70px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideindown {
  0% {
    opacity: 0;
    transform: translateY(-70px);
  }
  100% {
    transform: translateY(0);
  }
}
.slideinleft {
  -webkit-animation-name: slideinleft;
  animation-name: slideinleft;
}

@keyframes slideinleft {
  0% {
    opacity: 0;
    transform: translateX(-70px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slidebottomright {
  0% {
    opacity: 0;
    transform: translateX(100px) translateY(100px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes slidetopleft {
  0% {
    opacity: 0;
    transform: translateX(-100px) translateY(-100px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
  0% {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
  }
  75% {
    border-top-color: #fff;
    border-left-color: #fff;
    border-right-color: #fff;
    border-bottom-color: transparent;
  }
  100% {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
  }
}
/*img-animation**********************/
.img-custom-anim-right {
  animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

@keyframes img-anim-right {
  0% {
    transform: translateX(5%);
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.img-custom-anim-left {
  animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

@keyframes img-anim-left {
  0% {
    transform: translateX(-5%);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.img-custom-anim-top {
  animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}

@keyframes img-anim-top {
  0% {
    transform: translateY(-5%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.btn__primary {
  color: #0A161D;
  background-image: linear-gradient(135deg, #9FE509 0%, #4DFD83 100%);
  font-size: 14px;
  font-weight: 600;
}

.btn__secondary {
  color: #fff;
  border: 1px solid var(--Gradiant, #9FE509) !important;
  font-size: 14px;
  font-weight: 600;
  transition: 0.4s;
}
.btn__secondary:hover {
  color: #333;
  border: 1px solid var(--Gradiant, #9FE509) !important;
  background-image: linear-gradient(135deg, #9FE509 0%, #4DFD83 100%);
}

/*--------------------------
 01.Nav Bar
----------------------------*/
.nav_bar {
  border-bottom: 0.8px solid rgba(255, 255, 255, 0.23);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  right: 0;
  padding: 1rem 0;
  background-color: #0A161D;
}
.nav_bar .nav-item {
  margin-left: 10px;
  font-size: 14px;
}
.nav_bar .navbar-toggler:focus {
  box-shadow: none;
}

/*-------------------------
 10. Footer Section
--------------------------*/
.footer {
  padding-top: 60px;
}
@media (max-width: 575px) {
  .footer__address img {
    width: 20% !important;
  }
}
.footer__address p {
  color: #989898;
  font-family: Jost;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}
.footer__address p i {
  color: #9FE509;
}
.footer__link h5 {
  color: #DFF3FF;
  font-family: Nunito;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
}
.footer__link ul li {
  display: inline-block;
  list-style: none;
  padding: 8px 0;
}
.footer__link ul li a {
  color: #989898;
  font-family: Jost;
  font-size: 16px;
  font-weight: 400;
  transition: 0.4s;
}
.footer__link ul li a:hover {
  color: #9FE509;
  margin-left: 4px;
}
.footer__news-later {
  background-color: rgba(255, 255, 255, 0.02);
  padding: 50px 30px;
}
.footer__news-later label {
  color: #DFF3FF;
  font-family: Jost;
  font-size: 16px;
  font-weight: 400;
}
.footer__news-later input {
  color: #DFF3FF;
  background-color: #989898;
  display: block;
  outline: none;
  border: none;
  font-size: 16px;
  margin-bottom: 1px;
  border-bottom: 1px solid #333;
  border-radius: 0;
}
.footer__news-later input:focus {
  box-shadow: none;
}
.footer__news-later .form-control:focus {
  color: #fff;
  background-color: transparent;
  border-color: transparent;
  outline: 0;
  box-shadow: none !important;
}
.footer__news-later p {
  color: #989898;
  font-family: Jost;
  font-size: 16px;
  font-weight: 400;
}
.footer__news-later p i {
  color: #9FE509;
}
.footer__news-later .form-check-input:checked {
  background-color: #9FE509;
  border-color: #9FE509;
}
.footer__socail-icon {
  margin-top: 30px;
}
.footer__socail-icon ul li {
  display: inline-block;
  list-style: none;
}
.footer__socail-icon ul li a {
  color: #989898;
  font-family: Jost;
  font-size: 16px;
  font-weight: 400;
  padding: 8px;
  transition: 0.4s;
}
.footer__socail-icon ul li a:hover {
  color: #9FE509;
}
.footer .copy-right {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #333;
  margin-top: 80px;
  padding: 1rem 0;
}
.footer .copy-right p {
  color: #DFF3FF;
  font-family: Jost;
  font-size: 16px;
  font-weight: 400;
  transition: 0.4s;
}
.footer .copy-right p span {
  color: #9FE509;
}
.footer .copy-right p a:hover {
  color: #9FE509;
}

/*-------------------------
 02. Hero Section
---------------------------*/
.hero {
  position: relative;
}
.hero .vector {
  margin-top: 5rem;
}
.hero .vector img {
  width: 95px;
}
.hero__title {
  margin-bottom: 45px;
}
@media (max-width: 980px) {
  .hero__title {
    margin-bottom: 10px;
  }
}
.hero__title h2 {
  color: #DFF3FF;
  font-family: Nunito;
  font-size: 66px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
@media (max-width: 980px) {
  .hero__title h2 {
    font-size: 30px;
  }
}
.hero__title h2 img {
  width: 220px;
}
@media (max-width: 980px) {
  .hero__title h2 img {
    margin-top: 1rem;
  }
}
.hero__content {
  position: relative;
  margin-top: 9.5rem;
}
@media (max-width: 980px) {
  .hero__content {
    margin-top: 1rem;
    margin-bottom: 2rem;
  }
}
.hero__content p {
  color: #FFF;
  font-family: Jost;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 48px;
  text-transform: capitalize;
}
.hero__content .circle img {
  width: 51px;
  position: absolute;
  right: 20%;
  bottom: -20px;
}
.hero__banner .mic {
  width: 67px;
}

/*------------------------
 05. Pricing Section
--------------------------*/
@media (max-width: 980px) {
  .pricing .section-sub-title {
    font-size: 30px;
  }
}
.pricing__plan {
  border: 1px solid rgba(223, 243, 255, 0.2);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(4px);
  padding: 50px 30px;
  text-align: center;
  margin-top: 100px;
  transition: 0.4s;
  cursor: pointer;
}
.pricing__plan:hover {
  border: 1px solid var(--Gradiant, #9FE509);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(4px);
}
.pricing__plan img {
  width: 50px;
  height: 50px;
}
.pricing__plan-price {
  margin-bottom: 30px;
}
.pricing__plan-price h3 {
  color: #DFF3FF;
  font-family: Jost;
  font-size: 24px;
  font-weight: 600;
  margin: 30px 0;
}
.pricing__plan-price h4 {
  font-family: Jost;
  font-size: 32px;
  font-weight: 600;
  background: var(--Gradiant, linear-gradient(135deg, #9FE509 0%, #4DFD83 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pricing__plan-price p {
  color: #989898;
  font-family: Jost;
  font-size: 14px;
  font-weight: 300;
}
.pricing__plan-item ul {
  padding: 0;
  margin-bottom: 50px;
}
.pricing__plan-item ul li {
  color: #989898;
  font-family: Jost;
  font-size: 16px;
  font-weight: 400;
  list-style: none;
  margin: 16px 0;
  text-align: left;
}
@media (max-width: 980px) {
  .pricing__plan-item ul li {
    text-align: center;
  }
}
.pricing__plan-item ul li i {
  margin-right: 10px;
}

/*-----------------------------
 04. Portfolio Section
-----------------------------*/
@media (max-width: 980px) {
  .portfolio-section .section-sub-title {
    font-size: 30px;
  }
}
.portfolio-section .control {
  color: #fff;
  padding: 5px 10px;
  margin: 5px;
  cursor: pointer;
}
.portfolio-section .control::after {
  content: "";
  display: block;
  width: 0%;
  height: 2px;
  background: #93E81A;
  transition: width 0.4s ease-in;
  margin-top: 0.5rem;
}
.portfolio-section .control:hover::after {
  width: 100%;
}
.portfolio-section .active::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #93E81A;
  transition: width 0.4s ease-in;
  margin-top: 0.5rem;
}
.portfolio-section .pd {
  position: relative;
}
.portfolio-section .pd .mymasonry-overlay {
  position: absolute;
  background-color: rgba(25, 56, 56, 0.6);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -ms-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.portfolio-section .pd .mymasonry-overlay i {
  font-size: 50px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portfolio-section .pd:hover .mymasonry-overlay {
  opacity: 1;
  transform: scale(0.9);
}

@media (max-width: 980px) {
  .why-choose .section-sub-title {
    font-size: 30px;
  }
}
.why-choose__item {
  padding: 74px 40px;
  border: 1px solid #19313F;
  transition: 0.4s;
  cursor: pointer;
}
.why-choose__item img {
  width: 25px;
}
.why-choose__item h5 {
  color: #DFF3FF;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.why-choose__item p {
  color: #989898;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  margin-top: 24px;
}
.why-choose__item:hover {
  background-color: #172329;
}

.counter__item {
  text-align: center;
  border: 0.5px solid rgba(255, 255, 255, 0.02);
  padding: 30px 0;
}
.counter__item img {
  width: 50px;
}
.counter__item h6 {
  color: #DFF3FF;
  margin-top: 26px;
  font-size: 32px;
  font-weight: 700;
}
.counter__item p {
  color: #556070;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
}

/*---------------------
 06. Testimonials Us Section
------------------------*/
@media (max-width: 980px) {
  .testimonials .section-sub-title {
    font-size: 30px;
  }
}
.testimonials__client {
  padding: 30px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
}
.testimonials__client-content {
  padding-right: 30px;
}
.testimonials__client-content p {
  color: #989898;
  font-size: 16px;
  font-weight: 400;
}
.testimonials__client-content h6 {
  color: #DFF3FF;
  font-size: 24px;
  font-weight: 700;
}
.testimonials__client-content ul {
  margin: 0;
  padding: 0;
  display: inline-block;
}
.testimonials__client-content ul li {
  list-style: none;
  color: #FEAC32;
  display: inline-block;
}

@media (max-width: 980px) {
  .about .section-sub-title {
    font-size: 30px;
  }
}
.about__text {
  padding-right: 3rem;
  z-index: 2;
  padding-right: 0;
}
.about__content p {
  color: #989898;
  font-family: Jost;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  margin: 24px 0;
  z-index: 2;
}

/*-----------------------
 03. Services Section
------------------------*/
@media (max-width: 980px) {
  .we-offer .section-sub-title {
    font-size: 30px;
  }
}
.we-offer__items {
  cursor: pointer;
  padding: 30px 10px;
  border-top: 1px solid #19313F;
  transition: 0.4s;
}
.we-offer__items:hover {
  background-color: #172329;
}
.we-offer__items:hover h4 {
  color: #DFF3FF;
}
.we-offer__items:hover img {
  transform: rotate(-20deg);
  padding: 1rem 0;
}
.we-offer__items-content h4 {
  color: #7D7D82;
  font-size: 48px;
  font-weight: 700;
  transition: 0.4s;
}
@media (max-width: 980px) {
  .we-offer__items-content h4 {
    font-size: 30px;
  }
}
.we-offer__items-content .d__none {
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  transition: 1.5s;
}
.we-offer__items-text p {
  color: #7D7D82;
  font-size: 16px;
}
.we-offer__items:last-child {
  border-bottom: 1px solid #19313F;
}
.we-offer__items span {
  font-size: 24px;
  font-weight: 700;
  background: var(--Gradiant, linear-gradient(135deg, #9FE509 0%, #4DFD83 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.we-offer__items img {
  width: 150px;
  transition: 0.4s;
}
@media (max-width: 980px) {
  .we-offer__items img {
    width: 100%;
  }
}

/*------------------------
 08. Faq Section
-------------------------*/
@media (max-width: 980px) {
  .faq .section-sub-title {
    font-size: 30px;
  }
}
.faq .accordion-item {
  color: #DFF3FF !important;
  border-radius: 0;
  border: 1.5px solid #1D3847 !important;
  background-color: #0A161D !important;
  margin: 1rem 0;
}
.faq .accordion-item .accordion-button {
  color: #DFF3FF !important;
  background: #0A161D !important;
}
.faq .accordion-item .accordion-button:focus {
  box-shadow: none;
}
.faq .accordion-item .accordion-button::after {
  filter: invert(1); /* Turns the default black arrow to white */
  transition: filter 0.3s ease;
}
.faq .accordion-item .accordion-button:not(.collapsed) {
  box-shadow: inset 0 -1px 0 #1D3847 !important;
}
.faq .accordion-item .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1); /* Makes the arrow white when expanded */
}
.faq .accordion-item .accordion-body p {
  font-size: 14px;
}

/*---------------------------
 07. Blog Section
------------------------*/
@media (max-width: 980px) {
  .blog .section-sub-title {
    font-size: 30px;
  }
}
.blog__news {
  display: flex;
  flex-direction: column;
}
.blog__news-content {
  background-color: #192329;
  padding: 30px;
  width: 90%;
  margin-top: -70px;
  margin-left: 28px;
  z-index: 999;
}
@media (max-width: 980px) {
  .blog__news-content {
    width: 100%;
    margin-top: 0px;
    margin-left: 0px;
  }
}
.blog__news-content p {
  color: #989898;
  font-family: Nunito;
  font-size: 16px;
  font-weight: 400;
}
.blog__news-content p i {
  color: #9FE509;
}
.blog__news-content h4 {
  color: #DFF3FF;
  font-family: Nunito;
  font-size: 24px;
  font-weight: 700;
  margin: 17px 0;
}
.blog__news-content a {
  color: #9FE509;
  font-size: 16px;
  font-weight: 700;
}
.blog__latest {
  display: flex;
}
@media (max-width: 980px) {
  .blog__latest {
    flex-direction: column;
    text-align: center;
  }
}
.blog__latest img {
  width: 225px;
}
@media (max-width: 980px) {
  .blog__latest img {
    width: 100%;
  }
}
.blog__latest-content {
  background-color: #192329;
  padding: 10px 25px;
  margin: -40px;
  margin-top: 10px;
  width: 100%;
  height: 130px;
  z-index: 999;
}
@media (max-width: 980px) {
  .blog__latest-content {
    margin: 0px;
    padding: 2rem;
    height: 160px;
  }
}
.blog__latest-content p {
  color: #989898;
  font-family: Nunito;
  font-size: 14px;
  font-weight: 400;
}
.blog__latest-content p i {
  color: #9FE509;
}
.blog__latest-content h4 {
  color: #DFF3FF;
  font-family: Nunito;
  font-size: 16px;
  font-weight: 700;
  margin: 15px 0;
}
.blog__latest-content a {
  color: #9FE509;
  font-size: 14px;
  font-weight: 700;
}
@media (max-width: 980px) {
  .blog__latest-content .date-time {
    justify-content: center;
  }
}

/*------------------
 09. Contact Section
--------------------*/
@media (max-width: 980px) {
  .contact .section-sub-title {
    font-size: 30px;
  }
}
.contact__info p {
  color: #DFF3FF;
  font-family: Jost;
  font-size: 16px;
  font-weight: 400;
  margin: 1rem 0;
}
.contact__info p i {
  color: #9FE509;
}
.contact__form label {
  color: #fff;
  font-size: 14px;
}
.contact__form input, .contact__form textarea {
  border: 1px solid #1D3847;
  border-radius: 4px;
}
.contact__form input.form-control, .contact__form textarea.form-control {
  color: rgb(152, 152, 152);
}
.contact__form input:focus, .contact__form textarea:focus {
  box-shadow: none;
  border-color: #1D3847 !important;
}

/*-------------------------
 12. Preloader
---------------------------*/
.preloader-container {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #172329;
  z-index: 10000;
  overflow: hidden;
}
.preloader-container .preloader-text {
  font-size: 90px;
  opacity: 1;
  animation: fadeInLetter 1s forwards, scaleIn 1s forwards;
  top: 50%;
  position: absolute;
  width: 100%;
  margin: auto;
  text-align: center;
}

.preloader-container.active_new {
  -webkit-transform: translateY(-100vh);
  transform: translateY(-100vh);
  -webkit-transition: ease-in-out 2s;
  transition: ease-in-out 2s;
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}

/* Animation for individual letters */
.preloader-text span {
  color: #fff;
  opacity: 0;
  animation: topToBottom 10s forwards;
  transform-origin: center; /* Set the transform origin to the center of each letter */
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInLetter {
  0% {
    opacity: 0;
    transform: scale(0.8); /* Start with a slightly smaller scale */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* End with the original scale */
  }
}
@keyframes topToBottom {
  0% {
    transform: translateY(-100%); /* Start position above the viewport */
  }
  100% {
    transform: translateY(0); /* End position at the center of the viewport */
  }
}
/* Add scale-in animation */
@keyframes scaleIn {
  0% {
    transform: scale(0.8); /* Start with a slightly smaller scale */
  }
  100% {
    transform: scale(1); /* End with the original scale */
  }
}
/* Add fade-out animation */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*-------------------------
 13. Back To Top
---------------------------*/
.back-to-top {
  background-image: linear-gradient(135deg, #9FE509 0%, #4DFD83 100%);
  padding: 10px 15px;
  cursor: pointer;
  border: 1px solid #444;
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: none;
  border-radius: 5px;
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  80% {
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
}

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