@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* Reset CSS */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* Wrapper */
html {
scroll-behavior: smooth;
user-select: none;
}

body {
font-size: 20px;
font-weight: 400;
position: relative;
background-color: #ffffff;
font-family: "Plus Jakarta Sans", sans-serif;
}

@media only screen and (max-width: 600px) {
body {
  font-size: 14px;
}
}

section {
padding: 15px;
position: relative;
margin-bottom: 20px;
}

@media screen and (min-width: 992px) {
section {
  padding: 55px 20px;
  margin-bottom: 50px;
}
}

section h2 {
font-size: 33px;
font-weight: bold;
color: #0d2c49;
margin-bottom: 10px;

}

section .subtitle {
font-size: 16px;
color: #5c6c7b;
margin-bottom: 20px;
line-height: 1.45;
}

@media screen and (min-width: 992px) {
section h2 {
  font-size: 53.328px;
  line-height: 66.672px;
}

section .subtitle {
  font-size: 18px;
  margin-bottom: 40px;
}
}



/* Preload Section */
#preloader {
inset: 0;
z-index: 9999;
display: grid;
position: fixed;
place-items: center;
background: #c02134;
    padding: 15%;
  text-align: center;
}

.preloader-content {
color: #fff;
font-size: 7vh;
font-weight: bold;
animation: pulse 1s infinite alternate;
}

@media screen and (min-width:768px) {
  .preloader-content {
    font-size: 10vh;
  }
}

@media screen and (min-width:992px) {
  .preloader-content {
    font-size: 12vh;
  }
}

@keyframes pulse {
from {
  transform: scale(1);
}

to {
  transform: scale(1.1);
}
}

.fade-out {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Header Section */
header#nav {
z-index: 1;
width: 100%;
padding: 15px 20px;
background-color: #141828;
transition: all 0.3s ease-in-out;
}

.nav-links a {
color: #fff;
font-size: 14px;
font-weight: 500;
text-decoration: none;
}

.nav-links a:not(:last-child) {
margin-right: 20px;
}

header#nav.sticky {
position: fixed;
top: 0;
left: 0;
}

#nav.sticky .nav-links a {
color: #fff;
}

/* Banner */
.banner {
min-height: calc(100vh - 79.25px);
/* background: linear-gradient(225deg, #21165f 0%, #06858e 100%) */
background: linear-gradient(to top right, rgba(2, 130, 139, 0.798) 0%, rgba(38, 32, 88, 0.8) 100%), url('../images/8fcac1c544d2ec44fe61ba9570123c1770799fca.jpg') no-repeat center center/cover;
}

.banner .banner-image {
padding: 0 20px;
display: none;
}

@media screen and (min-width:992px) {

.banner {
padding: 0 70px;
}

.banner .banner-image {
  display: block;
}
}

.banner .banner-image img {
max-width: 401px;
}

.banner .banner-content {
color: #fff;
padding: 0 20px;
font-size: 18px;
}

.banner .banner-content div {
margin-bottom: 8px;
}

.banner .banner-content h1,
.banner .banner-content h2 {
color: #fff;
}

.banner .banner-content h1 {
font-size: 57px;
margin-bottom: 20px;
}

.banner .banner-content h2 {
font-size: 28px;
}

@media only screen and (min-width: 992px) {

.banner .banner-content h1 {
  font-size: 70px;
  margin-bottom: 20px;
}

.banner .banner-content h2 {
  font-size: 40px;
}
}

/* Modal */
.modal {
inset: 0;
width: 100%;
z-index: 9999;
display: none;
padding: 20px;
background-color: #37373790;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media only screen and (min-width: 992px) {
.modal {
  padding: 20px 40px;
}

.modal .form-content {
  padding: 40px;
}
}

.modal.active {
display: flex;
}

.modal .form-content {
  width: 100%;
  max-width: 500px;
  padding: 45px;
  position: relative;
  border-radius: 10px;
  background-color: #fff;
}

.modal .close {
top: 20px;
right: 20px;
color: #333;
cursor: pointer;
font-size: 28px;
position: absolute;
}

.modal h2 {
color: #333;
margin: 24px 0;
font-size: 39px;
}

.modal .form-group {
margin-bottom: 20px;
}

.modal .form-group {

}

.modal .form-group input {
height: 45px;
display: block;
margin-top: 10px;
}

.modal .form-group {
margin-bottom: 15px;
}

.modal .alert-success {
background-color: #d4edda;
color: #155724;
padding: 10px;
border-radius: 5px;
margin-bottom: 15px;
}

/* CFI */
.cfi-gap {
gap: 20px 0;
}

.card {
background-color: #f1f6fa;
border-radius: 10px;
padding: 15px;
box-shadow: 2px 1px 2px 1px rgba(0, 0, 0, 0.05);
text-align: left;
font-size: 14px;
height: 100%;
display: flex;
flex-direction: column;
}

@media only screen and (min-width: 992px) {

.card h3 {
  font-size: 23px;
}
}

.icon-box {
width: 50px;
height: 50px;
background-color: #ffffff;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}

.icon-box i {
font-size: 24px;
color: #4c8bf5;
}

.card h3 {
font-size: 19px;
font-weight: bold;
color: #0d2c49;
margin: 0 0 10px 0;
}

.card p {
line-height: 1.6;
color: #5c6c7b;
}

/* Platform */
#platform .platform-images {
  height: 100%;
}

#platform .rate {
font-size: 18px;
}

#platform .rate_s {
display: flex;
align-items: center;
gap: 35px;
}

.rate_stars {
flex: 1;
}

.rate_stars .rate_dk {
    width: 19px;
}

.rate_stars img {
  height: 20px;
  width: 100px;
}
.stars {
display: flex;
align-items: center;
gap: 8px;
}

@media only screen and (max-width: 600px) {
  #platform .platform-images {
      height: unset;
  }
}

#platform .platform-images .platform-app {
text-align: center;
}
#platform .platform-images .platform-app  img{
  width: 67%;
  margin-top: 20px;
}

#platform .platform-images .platform-web {
  max-width: 100%;
  height: 100%;
  margin-left: auto;
  display: none;
}

@media screen and (min-width: 992px) {
  #platform .platform-images .platform-web {
      width: 470px !important;
      display: block;
  }

  #platform .platform-images .platform-app img{
      width: 200px;
      margin-right: auto;
      position: absolute;
      top: 124px;
      left: 0;
      display: block;
  }

}