:root {
  --primary-color: #D52941;
  --text-color-1: #161616;
  --text-color-2: #FFFBFE;
  --gradient-bg: linear-gradient(90deg, #D52941 0%, #EF3C55 100%);
  --secondary-color: #EF3C55;
  --swiper-theme-color: #D52941;
}
/*General Styling*/
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
  font-family: 'Source Sans Pro', sans-serif;
}


/*Overlay Animation*/
.layer {
  background: var(--text-color-2);
  flex: 1;
}
.layer-2, .layer-4, .l-5 {
  background: var(--text-color-2);
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
}


/*BUTTONS*/
.btn {
  border-radius: 0;
  font-weight: 600;
}
.btn-primary {
  background: var(--text-color-2);
  color: var(--primary-color);
  border: 1px solid var(--text-color-2);
  font-size: 1.3rem;
  transform-origin: left;
}
.btn-primary:hover {
  background: var(--primary-color);
  color: var(--text-color-2);
  border: 1px solid var(--text-color-2); 
}
.btn-subscribe {
  background: var(--primary-color);
  color: var(--text-color-2);
  border: 1px solid var(--text-color-2);
  transition: 0.3s ease-in-out;
}
.btn-subscribe:hover {
  background: var(--text-color-2);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  transform: translateX(10px);
}



/*        HEADER      */
header {
  background: var(--primary-color);
  color: var(--text-color-2);
}
header h1 {
  position: relative;
  font-size: 4rem;
  font-weight: 900;
}
header p {
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.004rem;
}
header .h-1 {
  display: inline-block;
  margin-right: 0.5rem;
}
header .h-2 {
  font-size: 6rem;
}
.phone {
  animation: float 3s ease-in-out infinite;
}

/*       FEATURES SECTION      */
#features {
  color: var(--text-color-1);
}
#features h3, #app-screens h3 {
  font-weight: 900;
  font-size: 2rem;
}
#features p, #app-screens p{
  font-size: 1.4rem;
  font-weight: 500;
}
#features h5 {
  font-weight: 600;
}
#features img {
  background: var(--primary-color);
  border-radius: 50%;
  transition: 0.1s ease;
  cursor: pointer;
  width: 70px;
  height: 70px;
}
#features .text {
  font-weight: 400;
  font-size: 1.1rem;
}

/*       APP SCREEN SECTION      */
.screen-img {
  transition: all 0.5s ease-in-out;
}
.swiper-slide a{
  height: 100%;
  width: 100%;
  display: block;
}

.screen-img:hover {
  transform: translateY(-10px);
}

/*       SUBSCRIBE SECTION      */
#subscribe {
  color: var(--text-color-1);
}
#subscribe h2, #countdown h3, #social h3, .countdown h5 {
  font-weight: 700;
}
#subscribe p {
  color: rgba(22, 22, 22, 0.6);
}
.form-control {
  width: 65%;
  border-radius: 0;
}

.form-control:focus{
  border-color: var(--gradient-bg);
  box-shadow: 0 0 0 0.2rem rgba(239, 60, 85,.25);
}
.alert-success {
  background: transparent;
  border: none;
}
.h-5 input, .h-5 button{
  height: 3rem;
}

/*       PROGRESS BAR      */
.progress-bar-striped {
  background-color: var(--primary-color);
}
.progress {
  height: 2.1rem;
  border-radius: 0;
  width: 70%;
}
.progress-bar-striped {
  background: repeating-linear-gradient(
  -45deg,
  var(--primary-color),
  var(--primary-color) 10px,
  var(--text-color-2) 10px,
  var(--text-color-2) 20px);
  animation: progress-bar-stripes 1.1s linear infinite alternate;
}

/*Loading animation*/
.loading-dots {
  display: none;
}
.loading-dots div{
  width: 1.4rem;
  height: 1.4rem;
  background: var(--primary-color);
  border-radius: 50%;
  display: inline-block;
  animation: bounce 1.5s ease-in-out infinite both;
}
.loading-dots .bounce {
  animation-delay: -0.36s;
}
.loading-dots .bounce2 {
  animation-delay: -0.15s;
}

/*       Keyframes      */
@keyframes float {
  0% {
    transform: translate(-2%, 12%);
  }
  50% {
    transform: translate(-1%, 6%);
  }
  100% {
    transform: translate(-2%, 12%);
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: -40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@media screen and (max-width: 600px) {
  .form-control {
    width: 90%;
  }
  .progress {
    width: 90%;
  }
}
@keyframes bounce {
  0%, 80%, 100%{
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}