@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('../dist/bootstrap/css/bootstrap.min.css');
@import url('../dist/tiny-slider/css/tiny-slider.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
:root {
    --primary-font: 'Poppins', sans-serif, Arial, Helvetica;
    --light-orange: #FBB871;
    --deep-aqua: #1D1D1D;
    --navy-blue: #1D1D1D;
    --gray: #D9D9D9;
}
body { color: var(--bs-black); font-family: var(--primary-font); font-weight: 400; overflow-x: hidden; padding-top: 75px; }
a { color: var(--blue); }
a, a:hover { text-decoration: none; }
a:focus { outline: none; }
*:focus { outline: none; }
button:active, button:focus, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; }
.img-responsive, .navbar-brand > img { display: inline-block; }
img { display: inline-block; height: auto; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: var(--navy-blue); font-family: var(--primary-font);  font-weight: 800; margin-bottom: 0.95rem; }
h1 { font-size: 45px; line-height: 50px; }
h1 span { color: var(--deep-aqua); }
p, li { color: var(--navy-blue); font: 400 16px/1.5 var(--primary-font); overflow-wrap: break-word; word-wrap: break-word; }
.clearfix { clear: both; margin: 0px; padding: 0px; }

.navbar { background-color: var(--bs-white); box-shadow: 0px 0px 46px rgba(0, 0, 0, 7%); }
.navbar .navbar-nav .nav-link { border-bottom: 14px solid transparent; color: var(--navy-blue); font-size: 14px; font-weight: 400; margin: 0rem 1rem; padding: 0.5rem 0rem 1rem; }
.navbar .navbar-nav .nav-link.active { border-bottom: 14px solid var(--deep-aqua); color: var(--navy-blue) }
.navbar .navbar-collapse { margin-bottom: -17px; }


.banner { background: url("/v0_sportigio/assets/images/hero_bg.png") center center; background-size: cover; padding: 5% 0px; position: relative; width: 100%; }
.banner p { margin: 8% 0px; }

.baner h1, .baner span, .baner p {
    color: #fff !important;
}

.baner .btn-outline, .baner .bg-primary {
    border-color: #fff !important;
}


.btn-primary { background: linear-gradient(180deg, #02DDED 0%, #10B1D6 100%); border-radius: 8px; color: #fff; font-size: 13px; font-weight: 600; }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(90deg, #02DDED 0%, #10B1D6 100%); }

.btn-outline { border: 2px solid var(--navy-blue); border-radius: 8px; color: var(--navy-blue); font-size: 13px; font-weight: 600; }
.btn-outline:hover, .btn-outline:focus { background-color: var(--deep-aqua) !important; border-color: var(--deep-aqua) !important; }

.opacity-25 { color: var(--navy-blue); font-size: 13px; }

.tns-outer { position: relative; }
.tns-nav { background: url("/v0_sportigio/assets/images/line.png") no-repeat center / 70% 1px; position: absolute; bottom: 0; margin: 0% 46% -40px; width: auto; z-index: 1; }
.tns-outer [aria-controls] { background-color: transparent; border: 1px solid var(--navy-blue); border-radius: 100%; float: left; height: 18px; margin: 0px 5px; width: 18px; }
.tns-nav > .tns-nav-active { background-color: var(--deep-aqua); border: 3px solid var(--navy-blue); height: 20px; width: 20px; }

.trust { clear: both; width: 100%;}
.trust h4 { font-size: 32px; font-weight: 600; }

.function { background: url("/v0_sportigio/assets/images/elps.png") no-repeat left 65%; clear: both; padding: 14% 0px; width: 100%; }
.function h1:first-of-type { margin-bottom: 17%; }
.function p { margin: 8% 0px; }

.what { background: url("/v0_sportigio/assets/images/cve.png") no-repeat left bottom / 30%; clear: both; width: 100%; }
.what .form-control { border: inherit; border-radius: 80px; box-shadow: 0px 0px 99px rgba(0, 0, 0, 8%); font: 400 17px var(--primary-font); line-height: 52px; text-indent: 15px; }
.what .btn-join { background-color: var(--navy-blue); border-radius: 80px; color: var(--bs-white); font: 400 17px var(--primary-font); line-height: 52px; }

.discover { background: url("/v0_sportigio/assets/images/ring_bg.png") no-repeat left top / 40%; clear: both; padding: 3% 0px; width: 100%; }
.altn { margin-top: 18%; }
.partner { clear: both; padding: 7% 0px; text-align: center; width: 100%; }

.usecase { clear: both; padding-bottom: 5%; width: 100%; }
.usecase .box { background-color: var(--bs-white); border: 1px solid var(--gray); border-radius: 13px; width: 100%; }
.usecase .box figure { position: relative; margin-bottom: 35px; }
.usecase .box figure img { border-radius: 13px; }
.usecase .thumb { background-color: var(--bs-white); border-radius: 12px; box-shadow: 0px 0px 36px rgba(0, 0, 0, 16%); bottom: 0; height: 100px; left: 0; margin: 0px 0px -24px 12%; position: absolute; padding: 20px; width: 100px; }
.usecase .box h5 { font-size: 13px; font-weight: 500; margin-bottom: 18px; }
.usecase .box p { font-size: 13px; font-weight: 200; }
.usecase .box a { color: var(--deep-aqua); font-size: 13px; }
.usecase .p-3 { padding: 20px 25px !important; }

.faq { clear: both; padding: 7% 0px; width: 100%; }
.faq .accordion-button, .faq .accordion-button:not(.collapsed) { background-color: inherit; color: var(--navy-blue); font-size: 14px; }
.faq .accordion-button::after { background: url("/v0_sportigio/assets/images/arw_dwn.png") no-repeat center / 10px; }
.faq .accordion-item { border: 1px solid var(--gray); border-radius: 12px; margin-top: 15px; }
.faq .accordion-item:not(:first-of-type) { border-top: 1px solid var(--gray); }
.faq .accordion-body { padding-bottom: 5px; }

.media { clear: both; padding-bottom: 5%; width: 100%; }
.media .box { background-color: var(--bs-white); border: 1px solid var(--gray); border-radius: 13px; padding: 13px 25px 5px; width: 100%; }
.media .box img { margin: 10px 0px; }
.media .box h5 { font-size: 13px; font-weight: 500; margin-bottom: 18px; }
.media .box p { font-size: 13px; font-weight: 200; }

.inwest { clear: both; padding: 5% 0px; width: 100%; }

footer { background-color: var(--navy-blue); clear: both; padding: 4% 0px; width: 100%; }
footer .col:last-child { text-align: right; }
footer h1 img { filter: brightness(0) invert(1); transform: rotate(90deg); }
footer h4 { color: var(--bs-white); font-size: 18px; font-weight: 600; }
footer h4 a:hover { color: var(--bs-white); }
footer .icn { height: 40px; margin-right: 10px; }
footer .copy { clear: both; margin-top: 4%; width: 100%; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer ul li { color: rgba(233, 233, 233, 22%); font-size: 12px; font-weight: 500; display: inline-block; margin-right: 15%; }
footer ul li:last-child { margin: 0; }
footer ul li a { color: rgba(233, 233, 233, 22%); font-size: 12px; font-weight: 500; }
footer ul li a:hover { color: rgba(233, 233, 233, 100%); }
footer .copy .col:last-child { color: var(--bs-white); font-size: 11px; text-align: right; }
footer .copy .logo {  filter: brightness(0) invert(1); margin-left: 20px; max-width: 120px; }

.blog { background: url("/v0_sportigio/assets/images/ban_bg.png") no-repeat top right / 592px; clear: both; padding: 5% 0px; position: relative; width: 100%; }
.blog h1 {  background: url("/v0_sportigio/assets/images/arrow_hd.png") no-repeat left 10px; padding-left: 75px; }

.posts { background-color: var(--bs-white); border: 1px solid var(--gray); border-radius: 13px; margin-bottom: 40px; width: 100%; }
.posts figure { position: relative; margin: 0px; }
.posts figure img { border-radius: 13px; }
.posts figure .band { left: 0; margin-top: -17px; position: absolute; top: 0; width: 105px; z-index: 1; }
.posts .col { padding: 20px 20px; width: 100%; }
.posts h4 { color: var(--deep-aqua); font-size: 24px; margin-bottom: 18px; }
.posts p { font-size: 13px; font-weight: 200; }
.posts a { color: var(--deep-aqua); font-size: 13px; }

.main-content { clear: both; padding: 5% 0px; position: relative; width: 100%; }
.main-content .band { margin-top: -53px; position: absolute; right: 0; top: 0; width: 212px; z-index: 1; }
.main-content h1 {  background: url("/v0_sportigio/assets/images/arrow_hd.png") no-repeat left 10px; padding-left: 75px; }
.main-content .post-date { color: var(--navy-blue); display: inline-block; font-size: 13px; padding: 15px 0px 0px 75px; }
.main-content .photo { border-radius: 0px 20px 20px 20px; }
.main-content h3 { font-size: 17px; margin: 10% 0px; }
.main-content h5 { font-size: 13px; font-weight: 600; }
.main-content p { font-size: 13px; }

.follow { color: var(--navy-blue); clear: both; font-size: 13px; margin-top: 10%; opacity: 30%; width: 100%; }
.follow a { margin: 0px 5%; }
.follow a:first-child { margin-left: 10%; }

.pagination { max-width: 215px; }
.page-link { border-color: var(--navy-blue); border-radius: 12px; border-width: 2px; color: var(--navy-blue); font-size: 13px; padding: 0.275rem 1rem; }
.page-link:hover, .page-link:focus { background-color: var(--deep-aqua); border-color: var(--deep-aqua); box-shadow: none; color: var(--bs-white); }
.page-link.active { background-color: var(--deep-aqua); border-color: var(--deep-aqua); box-shadow: none; color: var(--bs-white);}
.page-item:first-child .page-link, .page-item:last-child .page-link { border: inherit; border-radius: 12px; padding: .395rem .825rem; }
.page-item:first-child .page-link:hover, .page-item:last-child .page-link:hover { background-color: inherit !important; border-color: inherit !important; }

/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width: 767px) {
    body { padding-top: 65px; }
    h1 { font-size: 28px; line-height: 32px; }
    .navbar-brand { max-width: 150px; }
    .navbar-toggler { border: inherit; }
    .navbar .navbar-nav .nav-link { font-weight: 500; border-width: 4px; margin: 0px; padding: 0.5rem 0.5rem;}
    .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active { color: var(--primary); border-width: 4px; }
    .navbar .navbar-collapse, .btn-primary { margin: 0px; }
    /* .banner { background-size: contain; } */
    .banner h1 { margin-top: 3rem; }
    .btn-outline { max-width: 180px; }
    .tns-nav { background: none; margin: 0% 33% -40px; }
    .lub .col-auto { text-align: center; width: 100%; }
    .usecase .thumb { height: 60px; padding: 12px; width: 60px; }
    .usecase .tns-nav, .media .tns-nav { background: none; margin: 0% 25% -40px; }
    .usecase .p-3, .media .box { padding: 12px 12px !important; }
    .inwest { margin-top: 3rem; }
    footer .col { flex-basis: auto; }
    footer .icn { height: 30px; }
    footer .col:last-child { text-align: left; }
    footer .copy .col:last-child { margin-top: 20px; text-align: center; }
    footer .logo { margin-top: 0.5rem; }
    .blog { background-size: contain; }
    .blog h1 { text-shadow: 0px 0px 25px rgba(0, 0, 0, 60%); }
    .posts { margin-bottom: 20px; }
    .posts h4 { font-size: 20px; }
    .main-content .band { margin-top: -29px; width: 130px; }
}

@media only screen and (min-width: 320px) and (max-width: 560px) {
    .usecase .tns-nav, .media .tns-nav { margin: 0% 24% -40px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    h1 { font-size: 40px; line-height: 50px; }
    .navbar-toggler { border: inherit; }
    .navbar .navbar-nav .nav-link { border-width: 4px; margin: 0px; padding: 0.5rem 0.5rem;}
    .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active { border-width: 4px; }
    .navbar .navbar-collapse, .btn-primary { margin: 0px;}
    .btn-outline { max-width: 180px; }
    .banner { background-size: contain; }
    .tns-nav { margin: 0% 43% -40px; }
    .what .form-control { font-size: 12px; line-height: 36px; text-indent: 5px; }
    .what .btn-join { font-size: 12px; line-height: 36px; padding: .5rem 0px; }
    .usecase .tns-nav, .media .tns-nav { background-size: 80% 1px; margin: 0% 41% -40px; }
    .partner img { max-width: 55%; }
    footer .icn { height: 15px; }
    footer h4 { font-size: 12px; }
    footer ul li { margin-right: 5%; }
    footer .logo { margin-top: 0.5rem; }
    .blog h1 { text-shadow: 0px 0px 25px rgba(0, 0, 0, 60%); }
    .posts h4 { font-size: 20px; }
}

@media only screen and (min-width: 992px) and (max-width: 1180px) {
    .banner { background-size: contain; }
    .tns-nav { margin: 0% 45% -40px; }
    .what .form-control { font-size: 12px; line-height: 36px; text-indent: 5px; }
    .what .btn-join { font-size: 12px; line-height: 36px; padding: .5rem 0px; }
    footer .icn { height: 28px; }
    footer h4 { font-size: 16px; }
    .posts h4 { font-size: 18px; }
}

.readable-text, .readable-text p, .readable-text li {
    font-family: "Poppins";
    line-height: 1.6em;
    font-size: 1.05rem !important;
    color: #111;
}
.readable-text-big, .readable-text p, .readable-text li  {
    font-size: 1.3rem !important;
    color: #111;
}

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.site-content > p {
    line-height: 1.6em;
    font-size: 1.05rem !important;
    color: #111;
}

.pricing-container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f4f4f4;
    }

    .pricing-card {
      max-width: 360px;
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
    }

    .pricing-card .pricing-name {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
    }

    .pricing-card .pricing-price {
      font-size: 20px;
      font-weight: light;
      text-align: center;
      margin: 20px 0;
    }

    .pricing-card .pricing-features {
      list-style: none;
      padding: 0;
      margin: 20px 0;
    }

    .pricing-card .pricing-features li {
      margin-bottom: 10px;
    }

    .pricing-card .pricing-button {
      display: block;
      width: 100%;
      text-align: center;
      padding: 10px 0;
      background-color: #007bff;
      color: #fff;
      font-weight: bold;
      text-decoration: none;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }

    .pricing-card .pricing-button:hover {
      background-color: #0056b3;
    }
    
    .cta-section {
  background-color: #0B1359;
  color: #fff;
  padding: 50px 0;
}

.cta-section h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
}

.cta-section .btn {
  font-size: 16px;
  padding: 12px 30px;
}

.testimonials-section {
  background-color: #f8f8f8;
  padding: 80px 0;
}

.testimonials {
  background-color: #f8f8f8;
  padding: 50px 0;
}

.testimonials-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.testimonial {
  max-width: 300px;
  margin: 20px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.testimonial-logo img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.testimonial h4 {
  font-size: 20px;
  margin-bottom: 5px;
}

.testimonial p {
  font-size: 16px;
  color: #414141;
}

@media (max-width: 767px) {
  .testimonials-container {
    flex-direction: column;
    align-items: center;
  }

  .testimonial {
    margin: 20px 0;
  }
}