@font-face {
     font-family: 'Gilroy';
     src: url('../font/gilroy/Gilroy-Regular.woff2') format('woff2'),
         url('../font/gilroy/Gilroy-Regular.woff') format('woff');
     font-weight: 400;
     font-style: normal;
 }

 @font-face {
     font-family: 'Gilroy';
     src: url('../font/gilroy/Gilroy-Semibold.woff2') format('woff2'),
         url('../font/gilroy/Gilroy-Semibold.woff') format('woff');
     font-weight: 600;
     font-style: normal;
 }

 @font-face {
     font-family: 'Gilroy';
     src: url('../font/gilroy/Gilroy-Bold.woff2') format('woff2'),
         url('../font/gilroy/Gilroy-Bold.woff') format('woff');
     font-weight: 700;
     font-style: normal;
 }

 body {
     background-color: #121212;
     color: white;
     font-family: 'Gilroy', sans-serif;
 }

 h1,
 h2 {
     font-family: 'Gilroy', sans-serif;
 }

 p {
     font-size: 1rem;
     color: #ffffff9c;
     letter-spacing: 1px;
 }

 .mid-para {
     font-size: 20px;
     word-spacing: 1px;
 }

 .p-bold {
     font-size: 16px;
     font-weight: 600;
     color: #ffffff;
     letter-spacing: 1px;
 }


 .head-ban {
     background-image: url(../images/bannn.png);
     background-position: center;
     background-size: cover;
     height: 200vh;
 }


 nav.Navbar {
     padding: 26px 0;
     background-color: transparent !important;
 }

 .nav-items {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 ul.navlinks {
     display: flex;
     align-items: center;
     gap: 40px;
     margin-bottom: 0;
 }

 ul.navlinks li {
     list-style: none;
 }

 ul.navlinks li a {
     color: white !important;
     font-size: 16px;
     font-weight: 500;
 }

 .navbar-toggler {
     display: none;
     background: none;
     border: none;
     font-size: 24px;
     cursor: pointer;
     color: white;
 }

 .navbar-close {
     background: none;
     border: none;
     color: #0093FF;
     font-size: 2rem;
     position: absolute;
     top: 6px;
     right: 20px;
     cursor: pointer;
 }

 .header-section {
     text-align: center;
     padding: 100px 0 70px 0;
 }

 .header-section h1 {
     font-size: 3.5rem;
     font-weight: 600;
 }

 .header-section p {
     margin: 20px 0 40px;
     text-align: center;
 }

 .app-buttons img {
     width: 150px;
     margin: 10px;
 }

 .app-preview img {
     width: 100%;
     max-width: 300px;
     margin: 0 auto;
 }

 .main-cards {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 30px;
 }

 section {
     padding: 60px 0;
 }

 .products-section {
     text-align: center;
 }

 .products-section,
 .how-to-sec,
 .about-sec,
 .privacy-sec,
 .terms-sec {
     background-color: #000000;
     background-image: url(../images/ts-bg.png);
     background-size: 100%;
     background-repeat: no-repeat;
 }

 .products-section h2,
 .portfolio-sec h2 {
     font-size: 36px;
     margin-bottom: 20px;
     font-weight: 600;
     letter-spacing: 2px;
 }

 .portfolio-sec .big-para {
     margin-top: 0;
     font-weight: 700;
     margin-bottom: 30px;
 }

 .products-section p {
     margin-bottom: 40px;
 }

 .product-card {
     background-color: #0d1212;
     border: none;
     padding: 20px;
     border-radius: 10px;
     transition: transform 0.2s;
     height: 100%;
     display: flex;
     transition: transform 0.4s ease-in-out;
     flex-direction: column;
     align-items: start;
     -webkit-transition: transform 0.4s ease-in-out;
     -moz-transition: transform 0.4s ease-in-out;
     -ms-transition: transform 0.4s ease-in-out;
     -o-transition: transform 0.4s ease-in-out;
 }

 .product-card:hover {
     transform: scale(1.05);
     border: 1px solid #0093FF;
     background: linear-gradient(211.53deg, rgba(48, 117, 211, 0.072) 18.43%, rgba(31, 89, 168, 0.072) 66.14%, rgba(31, 89, 168, 0.072) 109.99%);
 }

 .product-icon img {
     width: 50px;
     margin-right: 20px;
 }

 .product-content {
     text-align: left;
 }

 .product-title {
     font-size: 1.3rem;
     font-weight: 600;
     margin: 18px 0;
 }

 .product-description {
     font-size: 14px;
     font-weight: 400;
     text-align: start;
     color: #D7D7D7;
 }

 .port-img {
     width: 100%;
     max-height: 400px;
 }

 .port-img img {
     width: 100%;
 }

 .content-videos-sec,
 .testimonials-sec {
     background-color: #000000;
 }

 .content-videos-sec,
 .how-to-sec {
     text-align: center;
 }

 .content-videos-sec h2,
 .how-to-sec h2,
 .about-sec h2,
 .affiliate-sec h2,
 .terms-sec h2,
 .privacy-sec h2 {
     font-size: 36px;
     margin-bottom: 20px;
     font-weight: 600;
     letter-spacing: 2px;
 }

 .content-videos-sec p,
 .how-to-sec .subhead {
     font-style: normal;
     font-weight: 450;
     line-height: normal;
     margin: 25px 0 50px;
 }

 .content-videos-sec .slider_main .slick-prev,
 .testimonials-sec .slider_main .slick-prev {
     top: -20%;
     left: 88%;
 }

 .content-videos-sec .slider_main .slick-next,
 .testimonials-sec .slider_main .slick-next {
     top: -20%;
     right: 5%;
 }

 .content-videos-sec .slider_main .slick-prev:before,
 .testimonials-sec .slider_main .slick-prev:before {
     content: url('../images/left.png');
 }

 .content-videos-sec .slider_main .slick-next:before,
 .testimonials-sec .slider_main .slick-next:before {
     content: url('../images/right.png');
 }

 .p-by-sec {
     background: #0000 !important;
 }

 .p-by-p-main {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
 }

 .p-by-p-main img {
     width: 250px;
 }

 /* .p-by-p-main img {
      width: 250px;
      filter: gray;
      -webkit-filter: grayscale(1);
      -webkit-transition: all .3s ease-in-out;
  }

  .p-by-p-main img:hover {
      filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.01);
  } */

 .content-videos-sec .slider_main .inner {
     width: 100%;
     margin: auto;
     position: relative;
     margin: 0 10px;
 }

 .content-videos-sec .slider_main .inner img {
     width: 100%;
     height: 400px;
     object-fit: cover;
 }

 .nav-tabs {
     flex-direction: column;

 }


 .how-to-sec .nav {
     border-left: 5px solid #fff;
 }

 .how-to-sec .nav-tabs {
     border-bottom: none;
 }

 .how-to-sec .nav-link {
     color: #fff;
     background-color: transparent;
     border: none;
     font-size: 24px;
     padding-left: 0;
 }

 .how-to-sec .nav-link.active {
     color: #fff !important;
 }

 .how-to-sec .complete {
     position: relative;
 }

 .how-to-sec .complete::before {
     content: '';
     position: absolute;
     left: -5px;
     top: 50%;
     transform: translateY(-50%);
     width: 5px;
     height: 100%;
     background-color: #0093FF;
 }

 .how-to-sec .tab-content h3 {
     font-size: 36px;
     margin-bottom: 20px;
 }

 .how-to-sec .tab-content p {
     font-size: 18px;
     line-height: 1.6;
 }

 .how-to-sec .tab-content {
     padding: 20px;
 }

 .how-to-sec.nav-tabs .nav-link.active {
     background-color: transparent !important;
 }

 .how-to-sec .nav-link {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding: 20px;
     border: none;
 }

 .how-to-sec .nav-link h3 {
     margin-bottom: 16px;
     font-size: 40px;
     font-weight: bold;
 }

 .how-to-sec .nav-link p {
     text-align: start;
 }

 .how-to-sec .nav-tabs .nav-item.show .nav-link,
 .how-to-sec .nav-tabs .nav-link.active {
     background-color: transparent;
     border-color: transparent;
 }

 /* .how-to-sec .col-md-5 {
      display: flex;
      align-items: center;
      justify-content: center;
  } */

 .phone-img img {
     width: 70%;
     max-height: 650px;
 }

 .testimonials-section {
     background-color: #000;
     color: #fff;
     padding: 50px 0;
     text-align: center;
 }

 .testimonials-section h2 {
     font-size: 32px;
     margin-bottom: 20px;
 }

 .testimonials-sec-slider {
     margin-top: 60px;
 }

 .testimonial {
     display: flex;
     flex-direction: column;
     margin-bottom: 30px;
     padding: 20px;
 }

 .testimonial img {
     border-radius: 50%;
     width: 60px;
     height: 60px;
     margin-bottom: 15px;
 }

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

 .testimonial p {
     font-size: 16px;
     color: #ccc;
     margin-bottom: 15px;
 }

 .testimonial p {
     font-size: 14px;
     color: #ACACAC;
 }

 .test-info {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .big-para {
     font-size: 30px;
     line-height: normal;
     margin-top: 40px;
     color: #ffffff;
     font-weight: bold;
 }


 .about-sec .row {
     align-items: center;
 }

 .about-sec img {
     width: 70%;
     max-height: 550px;
 }

 /* affiliate */
 .affiliate-sec {
     background-image: url(../images/aff.png);
     background-size: cover;
     background-position: center;
     padding: 0;
 }

 .affiliate-sec .col-md-6 {
     padding: 0 !important;
 }

 .affiliate-card {
     background-color: #0c0c0cf0;
     border-radius: 10px;
     padding: 30px 90px;
     width: 100%;
     border: 1px solid;
     border-image-source: linear-gradient(143.9deg, #FFFFFF -3.93%, rgba(255, 255, 255, 0) 19.82%, rgba(255, 255, 255, 0.15) 46.59%, rgba(255, 255, 255, 0) 62.39%, rgba(255, 255, 255, 0.42) 116.97%);
 }

 .affiliate-card h2 {
     font-size: 28px;
     margin-bottom: 15px;
 }

 .affiliate-card p {
     font-size: 16px;
     margin-bottom: 25px;
     color: #ccc;
 }

 .d-flexx {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .form-group label {
     display: none;
 }

 .form-group input {
     background-color: #333;
     border: 1px solid #555;
     color: #fff;
     border-radius: 5px;
     padding: 10px;
     width: 100%;
     margin-bottom: 15px;
 }

 .form-group input::placeholder {
     color: #aaa;
 }

 .form-label {
     font-size: 16px;
     font-weight: 500;
     letter-spacing: 1px;
 }

 form input {
     border: 1px solid #aaaaaa3b !important;
     background-color: transparent !important;
     color: #FFFFFF !important;
 }


 .norm-btn {
     margin-top: 20px;
     padding: 6px 40px;
     background: transparent;
     color: #fff;
     border: 1px solid #ffffff8f;
     border-radius: 5px;
 }


 /* footer  */


 .footer {
     background-color: #000000;
     padding-top: 40px;
 }

 .footer-top {
     padding: 40px 0;
 }

 .footer .footer-logo {
     margin-bottom: 20px;
 }

 .footer .p-bold {
     margin-bottom: 20px;
 }

 .footer a {
     color: #dbd9d9;
     text-decoration: none;
 }

 .footer li {
     font-size: 14px;
     margin-bottom: 10px;
 }

 .footer a:hover {
     text-decoration: underline;
 }

 .footer .social-icons a {
     display: block;
 }

 .footer .social-icons i {
     margin-right: 8px;
 }

 .footer .bottom-footer {
     border-top: 1px solid #333;
     padding: 25px 0;
     text-align: center;
 }

 .footer .bottom-footer a {
     color: #ccc;
     text-decoration: none;
     margin: 0 10px;
 }

 .footer .bottom-footer a:hover {
     text-decoration: underline;
 }

 .bottom-foot-main {
     display: flex;
     gap: 20px;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
 }

 .bottom-foot-img {
     display: flex;
     align-items: center;
     gap: 20px;
     flex-wrap: wrap;
 }

 .bottom-foot-main p {
     margin-bottom: 0;
     font-size: 12px;
 }

 .bottom-foot-img img {
     width: 90px;

 }

 .how-to-sec .nav-tabs {
     border-bottom: none;
 }


 /* term-privacy  */

 .privacy-sec h2,
 .terms-sec h2,
 .terms-sec h3 {
     text-align: center;
 }

 .privacy-sec h2 {
     margin-bottom: 40px;
 }

 .terms-sec h2 {
     margin-bottom: 25px;
 }

 .terms-sec h3 {
     margin-bottom: 40px;
 }

 /* responsive */
 @media (min-width: 768px) {

     ul.navlinks {
         display: flex;
         flex-direction: row;
         position: static;
         width: auto;
         height: auto;
         background-color: transparent;
     }

     .navbar-toggler {
         display: none;
     }

     .navbar-close {
         display: none;
     }
 }


 @media (max-width: 1366px) {
     .header-section {
         padding: 70px 0;
     }
 }

 @media (max-width: 1199px) {
     .main-cards {
         grid-template-columns: repeat(2, 1fr);
     }

     .p-by-p-main {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 @media (max-width: 991px) {
     .p-by-p-main {
         grid-template-columns: repeat(2, 1fr);
     }

     .content-videos-sec .slider_main .slick-prev,
     .testimonials-sec .slider_main .slick-prev {
         top: -10%;
         left: 83%;
     }

     .content-videos-sec .slider_main .slick-next,
     .testimonials-sec .slider_main .slick-next {
         top: -10%;
         right: 4%;
     }
 }

 @media (max-width: 767px) {

     ul.navlinks {
         display: none;
         flex-direction: column;
         gap: 20px;
         background-color: rgba(0, 0, 0, 0.9);
         position: absolute;
         top: 0px;
         left: 0;
         width: 280px;
         height: 100vh;
         padding: 20px;
         padding-top: 70px;
         align-items: start;
     }

     ul.navlinks.active {
         display: flex;
     }

     .navbar-toggler {
         display: block;
     }

     br {
         display: none;
     }

     .header-section {
         padding: 40px 0;
     }

     .head-ban {
         background-image: linear-gradient(rgba(4, 9, 10, 0.7), rgba(4, 9, 10, 0.8)), url(../images/bannn.png);
         background-position: center;
         background-size: cover;
         height: 100%;
     }

     .content-videos-sec h2,
     .how-to-sec h2 {
         font-size: 30px;
     }

     .products-section h2 {
         font-size: 30px;
         margin-bottom: 20px;
     }

     .header-section h1 {
         font-size: 2rem;
     }

     .main-cards {
         grid-template-columns: repeat(1, 1fr);
     }

     .p-by-p-main {
         grid-template-columns: repeat(1, 1fr);
         place-items: center;
     }

     .affiliate-card {
         padding: 20px 40px;
     }

     .content-videos-sec,
     .testimonials-sec {
         padding-bottom: 60px;
     }

     .content-videos-sec .slider_main .slick-prev,
     .testimonials-sec .slider_main .slick-prev {
         top: 106%;
         left: 36%;
     }

     .content-videos-sec .slider_main .slick-next,
     .testimonials-sec .slider_main .slick-next {
         top: 106%;
         right: 36%;
     }

     .phone-img img {
         width: inherit;
         max-height: 350px;
     }
 }

 @media (max-width: 400px) {
     .bottom-foot-img {
         align-items: start;
     }

     .bottom-foot-main {
         gap: 10px;
     }

     .footer .bottom-footer a {
         margin: 0;
     }

     .content-videos-sec .slider_main .slick-prev,
     .testimonials-sec .slider_main .slick-prev {
         top: 106%;
         left: 32%;
     }

     .content-videos-sec .slider_main .slick-next,
     .testimonials-sec .slider_main .slick-next {
         top: 106%;
         right: 32%;
     }
 }

 .blue-spn {
     color:
         #00ADEF;
 }

 .rs-box {
     background: black;
     border-radius: 8px;
     padding: 13px 12px;
     color: white;
     z-index: 1;
     width: 100%;
 }

 .explore-plans {
     background-color: #000606;
     text-align: center;
 }

 .explore-plans p {
     margin-bottom: 40px;
 }

 .rs-box span {
     color: #ffffff;
     letter-spacing: 2px;
     font-size: 16px;
 }

 .gradient-border {
     display: inline-block;
     padding: 1px;
     border-radius: 8px;
     background: linear-gradient(to right, #00ADEF, #666666);
     position: relative;
     text-align: start;
     width: 100%;
     margin-bottom: 18px;
 }

 .gradient-border::before {
     content: '';
     position: absolute;
     top: -2px;
     right: -2px;
     bottom: -2px;
     left: -2px;
     z-index: -1;
     border-radius: 12px;
     background: black;
 }

 nav {
    width: 20rem !important;
  }