@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");

 html {
   scroll-behavior: smooth;
 }

 [id] {
   scroll-margin-top: 120px;
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }

 a {
   text-decoration: none;
 }

 body {
   margin: 0;
   min-height: 100vh;
   min-height: 100dvh;
   background-color: #000000;
   color: #ffffff;
   font-family: 'Montserrat';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   overflow-x: hidden;
   background-image: url('../images/rveappmaker-cover.webp');
   background-size: cover;
   background-position: top center;
 }

 h2,
 h1 {

   font-style: normal;
   font-weight: 800;
   line-height: 67px;
   font-size: clamp(2rem, 5vw + 1rem, 3.4375rem);

   text-shadow:
     0px 118px 47px rgba(0, 0, 0, 0.02),
     0px 66px 40px rgba(0, 0, 0, 0.08),
     0px 29px 29px rgba(0, 0, 0, 0.13),
     0px 7px 16px rgba(0, 0, 0, 0.15);
 }

 h4 {
   color: #FFFFFF;
   font-style: normal;
   font-size: 28px;
   line-height: 34px;
   font-weight: 800;
   text-shadow: 0px 118px 47px rgba(0, 0, 0, 0.02), 0px 66px 40px rgba(0, 0, 0, 0.08), 0px 29px 29px rgba(0, 0, 0, 0.13), 0px 7px 16px rgba(0, 0, 0, 0.15);
 }

 .glass {
   position: relative;
   border: none;
   outline: none;
   background: transparent;
   isolation: isolate;

   box-shadow:
     0px 0px 53.75px rgba(255, 255, 255, 0.0864),
     0px 14.2px 35px -6px rgba(0, 0, 0, 0.32),
     0px 3px 12px -3px rgba(0, 0, 0, 0.2025);
 }

 .glass::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;

   background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
     linear-gradient(0deg, rgba(255, 255, 255, 0.288) 0%, rgba(255, 255, 255, 0.096) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.06) 100%),
     linear-gradient(316.97deg, rgba(255, 255, 255, 0.192) 17.24%, rgba(255, 255, 255, 0) 58.62%, rgba(217, 235, 255, 0.072) 86.21%),
     radial-gradient(38.46% 38.46% at 11.54% 19.23%, rgba(255, 235, 255, 0.0288) 0%, rgba(230, 255, 240, 0.0192) 70%, rgba(240, 240, 255, 0) 100%),
     radial-gradient(20% 20% at 0% 0%, rgba(255, 255, 255, 0.0147) 0%, rgba(250, 250, 255, 0.0245) 30%, rgba(255, 250, 250, 0.0098) 60%, rgba(252, 252, 255, 0) 100%);

   /* box-shadow: inset 0.6px 0.96px 9.92px rgba(209, 230, 255, 0.12),
    inset 0px 1.5px 4.44px rgba(255, 255, 255, 0.432),
    inset -0.288px 0px 1.5px rgba(38, 115, 255, 0.0432),
    inset 0.288px 0px 1.5px rgba(255, 38, 64, 0.036),
    inset 0px 0px 1.235px rgba(242, 242, 255, 0.0392); */

   /* backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); */

   /* will-change: backdrop-filter;
  transform: translateZ(0); */

   opacity: 0.83;
   z-index: 1;
 }

 .btn-solid {
   background: linear-gradient(180deg, #815A2F 0%, #4F3214 100%);
   border-radius: 100px;
   outline: none;
   border: none;
   color: #fff;
   font-weight: 16px;
   font-weight: 600;
   width: 220px;
   padding: 10px 20px;
 }

 .btn-glass {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 220px;
   padding: 10px 20px;
   border-radius: 100px;
   cursor: pointer;
 }


 .btn-glass span {
   position: relative;
   z-index: 2;
   color: #ffffff;
   font-size: 16px;
   font-weight: 600;
 }

 .hero-section .badge-glass {
   border-radius: 5px;
   width: fit-content;
   padding: 15px 15px;
   margin-bottom: 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }



 .hero-section .badge-glass img {
   width: 15px;
   height: 15px;
   margin-right: 5px;
 }

 .hero-section .badge-glass span {
   position: relative;
   z-index: 2;
   color: #ffffff;
   line-height: 0px;
 }

 .hero-section {
   margin-top: 80px;
 }

 .hero-section .hero-img {
   width: 525px;
   height: 760px;
 }

 .about-company-section,
 .what-we-offer-section,
 .innovative-products-section,
 .iso-certified-section,
 .our-support-section,
 .footer-section {
   margin-top: 100px;
 }


 .about-company-section .card-glass {
   padding: 30px 25px;
   text-align: center;
   border-radius: 30px;
 }

 .section-description {
   font-style: normal;
   font-weight: 500;
   font-size: 24px;
   line-height: 150%;
   color: #FFFFFF;
 }

 .about-company-section .card-glass::before {
   opacity: 0.5;
 }

 .about-company-section .card-glass .card-body {
   position: relative;
   top: 0;
   z-index: 2;
   color: #ffffff;
 }

 .about-company-section .card-glass .card-body .card-body-content {
   margin-top: -35px;
 }



 .about-company-section .card-glass .card-body .card-body-content p {
   font-style: normal;
   font-weight: 500;
   font-size: 20px;
   line-height: 150%;
 }

 .about-company-section .card-glass-row .card-glass-col:nth-child(2) {
   margin-top: 70px;
 }


 .about-company-section .card-glass-row .card-glass-col:nth-child(3) {
   margin-top: 140px;
 }


 .what-we-offer-section {
   overflow: hidden;
 }


 .what-we-offer-section .scroller-container {
   width: 100vw;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
 }

 .what-we-offer-section .scroller {
   width: 100%;
   /* overflow: hidden; */
   /* contain: layout paint; */
 }

 .what-we-offer-section .scroller-inner {
   display: flex;
   gap: 1rem;
   width: max-content;
   padding-block: 10px;
   will-change: transform;
   width: max-content;
   /* transform: translate3d(0, 0, 0);
   backface-visibility: hidden; */
 }

 .what-we-offer-section .glass-pill {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 15px 35px;
   border-radius: 100px;
   white-space: nowrap;
   cursor: default;
 }

 .what-we-offer-section .glass-pill::before {
   /* backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important; */
   opacity: 0.7;

 }

 .what-we-offer-section .glass-pill span {
   position: relative;
   z-index: 2;
   color: #ffffff;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.5px;
 }


 .products-logo {
   width: 250px;
   height: auto;
 }

 .innovative-products-section .innovative-products-row {
   position: relative;
   z-index: 2;
   align-items: center;
 }

 .innovative-products-section .card {
   padding: 40px;
   border-radius: 30px;
 }

 .innovative-products-section .card::before {
   opacity: 0.5;
 }




 .innovative-products-section .innovative-products-row p {
   font-size: 24px;
   line-height: 150%;
   color: #FFFFFF;
 }

 .innovative-products-section .innovative-products-row .btn-download-link {
   border-radius: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   text-align: start;
   padding: 10px 20px;
   width: fit-content;
   text-decoration: none;
 }

 .innovative-products-section .innovative-products-row .btn-download-link img {
   width: 30px;
   height: 30px;
 }

 .innovative-products-section .innovative-products-row .btn-download-link .span-1 {
   font-size: 12px;
   line-height: 15px;
   font-weight: 400;

 }

 .innovative-products-section .innovative-products-row .btn-download-link .span-2 {
   font-weight: 700;
   font-size: 19.5317px;
   line-height: 20px;
 }

 .innovative-products-section .mobile-and-web-app-development-wrapper {
   position: relative;
   z-index: 2;
   color: #ffffff;
 }

 .innovative-products-section .mobile-web-development-images {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 30px;
 }

 .innovative-products-section .mobile-web-development-images img {
   width: auto;
   height: 90px;
 }

 .innovative-products-section .mobile-and-web-app-development-wrapper p {
   font-size: 24px;
   line-height: 150%;
   color: #FFFFFF;
 }

 .innovative-products-section .mobile-and-web-app-development-card {
   padding: 70px 50px;
 }

 .innovative-products-section .mobile-and-web-app-development-wrapper button {
   width: fit-content;
   padding: 15px 30px;
 }


 .iso-certified-section .iso-img-row {
   align-items: center;
 }

 .iso-certified-section .iso-img-row img {
   width: 243px;
   height: 243px;
 }

 .iso-certified-section .iso-img-row p {
   font-size: 24px;
   line-height: 150%;
   color: #FFFFFF;
 }

 .our-support-section .our-support-row {
   align-items: center;
 }


 .our-support-section .our-support-row p {
   font-size: 24px;
   line-height: 150%;
   color: #FFFFFF;
 }

 .our-support-section .rveappmaker-24-7-support-img {
   width: 364.95px;
   height: 630px;
 }



 /* --- OUR SUPPORT RIBBONS --- */
 .our-support-section {
   padding-bottom: 100px;
   position: relative;
   overflow: hidden;
 }

 .our-support-section .support-ribbons-container {
   position: absolute;
   bottom: 70px;
   left: 50%;
   width: 110vw;
   transform: translateX(-50%);
   z-index: 1;
   display: flex;
   flex-direction: column;
   pointer-events: none;
 }

 .our-support-section .support-ribbons-container .ribbon {
   width: 100%;
   overflow: hidden;
 }

 .our-support-section .support-ribbons-container .ribbon-1 {
   transform: rotate(4deg);
   margin-bottom: -35px;
 }

 .our-support-section .support-ribbons-container .ribbon-2 {
   transform: rotate(-4deg);
   z-index: 5;
 }

 .our-support-section .support-ribbons-container .ribbon-1::before,
 .our-support-section .support-ribbons-container .ribbon-2::before {
   opacity: 1;
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
 }

 .our-support-section .support-ribbons-container .ribbon-inner {
   position: relative;
   z-index: 2;
   display: flex;
   gap: 3rem;
   padding-block: 15px;
   width: max-content;
   will-change: transform;
 }

 .our-support-section .support-ribbons-container .ribbon-item {
   font-size: 18px;
   font-weight: 500;
   color: #ffffff;
   letter-spacing: 2px;
   display: flex;
   align-items: center;
   gap: 10px;
   white-space: nowrap;
 }

 .our-support-section .support-ribbons-container .ribbon-item .diamond {
   color: #c91b1b;
   font-size: 30px;
   line-height: 0px;
 }

 .footer-section {
   padding-bottom: 100px;
 }

 .footer-section .rveappmaker-download-app {
   display: flex;
   align-items: center;
   gap: 10px;
 }


 .footer-section .rveappmaker-download-app img {
   width: 125px;
   height: auto;
 }

 .footer-section .footer-social-icons {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .footer-section .footer-social-icons img {
   width: auto;
   height: 35px;
 }











 .main-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   transition: all 0.6s ease;
   z-index: 1000;
 }




 .header-top {
   opacity: 1;
   transform: translateY(0);
   visibility: visible;
 }

 .header-scroll {
   opacity: 0;
   transform: translateY(-100%);
   visibility: hidden;
   border-radius: 12px;
 }


 .header-scroll .nav-pills {
   width: fit-content;
   display: flex;
   justify-content: space-between;
   padding: 5px 10px !important;
   gap: 20px;
 }

 .main-header-mobile .navbar {
   background: #000 !important;
   padding: 20px;
 }

 .main-header-desktop {
   background-image: url(../images/banner-1.jpg);
   background-size: cover;
   background-repeat: no-repeat;
 }

 .main-header li a {
   font-family: "Manrope";
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   color: #ffffff;
 }

 .main-header li a:hover {
   color: #815A2F;
 }

 .main-header .nav-pills .nav-link.active {
   background: linear-gradient(180deg, #815A2F 0%, #4F3214 100%);
   color: #ffffff !important;
   border: transparent;
   font-weight: bold;
   padding-left: 30px;
   padding-right: 30px;
 }


 .main-header-mobile .banner-text {
   padding-top: 100px;
   background-image: url(../images/banner-1.jpg);
   min-height: 350px;
   background-position: top center;
   background-size: cover;
   margin-top: -120px;
   padding-right: 0px;
 }

 /* scroll animation for header */

 .main-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   transition: all 0.6s ease;
   z-index: 1000;
 }

 .main-header-mobile {
   display: none;
   margin-top: 150px;
 }

 @media screen and (max-width: 992px) {
   .main-header-mobile {
     display: block !important;
   }
 }


 .main-header-desktop::before {
   content: "";
   position: absolute;
   background-image: url('../images/trophy-bg.png');
   background-size: contain;
   background-repeat: no-repeat;
   width: 100%;
   height: 900px;
   top: 0;
   left: 0;
   pointer-events: none;
   z-index: 1;
 }

 .header-container-small {
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
 }


 .nav-pills {
   background: linear-gradient(0deg,
       rgba(255, 255, 255, 0.162),
       rgba(255, 255, 255, 0.162)),
     linear-gradient(0deg,
       rgba(255, 255, 255, 0.288) 0%,
       rgba(255, 255, 255, 0.096) 30%,
       rgba(255, 255, 255, 0) 70%,
       rgba(224, 237, 255, 0.06) 100%),
     linear-gradient(316.97deg,
       rgba(255, 255, 255, 0.192) 17.24%,
       rgba(255, 255, 255, 0) 58.62%,
       rgba(217, 235, 255, 0.072) 86.21%),
     radial-gradient(38.46% 38.46% at 11.54% 19.23%,
       rgba(255, 235, 255, 0.0288) 0%,
       rgba(230, 255, 240, 0.0192) 70%,
       rgba(240, 240, 255, 0) 100%),
     radial-gradient(20% 20% at 0% 0%,
       rgba(255, 255, 255, 0.0147) 0%,
       rgba(250, 250, 255, 0.0245) 30%,
       rgba(255, 250, 250, 0.0098) 60%,
       rgba(252, 252, 255, 0) 100%);
   opacity: 100 !important;
   box-shadow: 0px 0px 53.75px rgba(255, 255, 255, 0.0864),
     0px 14.2px 35px -6px rgba(0, 0, 0, 0.32),
     0px 3px 12px -3px rgba(0, 0, 0, 0.2025),
     inset 0.6px 0.96px 9.92px rgba(209, 230, 255, 0.12),
     inset 0px 1.5px 4.44px rgba(255, 255, 255, 0.432),
     inset -0.288px 0px 1.5px rgba(38, 115, 255, 0.0432),
     inset 0.288px 0px 1.5px rgba(255, 38, 64, 0.036),
     inset 0px 0px 1.235px rgba(242, 242, 255, 0.0392);
   /* backdrop-filter: blur(24.75px); */
   border-radius: 50px;
   box-sizing: border-box;
   height: fit-content;
   padding: 10px;
 }

 .header-container {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   /* padding-top: 10px; */
 }

 .header-container-small {
   width: 100%;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 /* Class na idadagdag ng JS kapag ipapakita ang header */
 .nav-show {
   opacity: 1 !important;
   transform: translateY(0) !important;
   visibility: visible !important;
 }

 /* Class na idadagdag ng JS kapag itatago ang header */
 .nav-hide-up {
   opacity: 0 !important;
   transform: translateY(-100%) !important;
   visibility: hidden !important;
 }


 .header-for-mobile-size {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
   padding: 20px;
 }

 @media screen and (min-width: 992px) {
   .header-for-mobile-size {
     display: none;
   }

 }

 .header-for-mobile-size .site-logo img {
   max-width: 200px;
   width: 100%;
 }







 @media (max-width: 992px) {

   .innovative-products-section .innovative-products-row .innovative-img,
   .hero-section .hero-img {
     width: 300px;
     height: auto;
   }

   .about-company-section,
   .what-we-offer-section,
   .innovative-products-section,
   .iso-certified-section,
   .our-support-section,
   .footer-section {
     margin-top: 60px;
   }


   h1,
   h2 {
     line-height: 40px;
     font-size: 30px;
   }

   h4 {
     font-size: 25px;
     line-height: 30px;
   }

   .innovative-products-section .mobile-and-web-app-development-wrapper p,
   .our-support-section .our-support-row p,
   .iso-certified-section .iso-img-row p,
   .innovative-products-section .innovative-products-row p,
   .section-description {
     font-size: 17px;
     line-height: 130%;
   }

   .about-company-section .card-glass-row .card-glass-col:nth-child(2) {
     margin-top: 20px;
   }

   .about-company-section .card-glass-row .card-glass-col:nth-child(3) {
     margin-top: 20px;
   }

   .products-logo {
     width: 200px;
     height: auto;
   }

   .iso-certified-section .iso-img-row img {
     width: 150px;
     height: auto;
   }

   .footer-social-icons,
   .rveappmaker-download-app {
     justify-content: center;
   }

   section {
     padding-left: 15px;
     padding-right: 15px;
   }

   .about-company-section .card-glass .card-body .card-body-content {
     margin-top: -25px;
   }

   .about-company-section .card-glass .card-body .card-body-content p {
     font-size: 16px;
   }

   .about-our-company-img {
     width: 100px;
     height: auto;
   }

   .about-company-section .card-glass {
     padding: 20px 15px;
   }

   .innovative-products-section .mobile-and-web-app-development-card {
     padding: 25px 20px;
   }

   .innovative-products-section .mobile-web-development-images {
     gap: 10px;
   }

   .innovative-products-section .mobile-web-development-images img {
     width: auto;
     height: 55px;
   }

   .innovative-products-section .innovative-products-row .btn-download-link {
     padding: 7px 10px;
   }

   .innovative-products-section .innovative-products-row .btn-download-link .span-1 {
     font-size: 10px;
     line-height: 12px;
   }

   .innovative-products-section .innovative-products-row .btn-download-link .span-2 {
     font-size: 13px;
     line-height: 15px;
   }

   .innovative-products-section .innovative-products-row .btn-download-link img {
     width: 20px;
     height: 20px;
   }

   .header-scroll,
   .header-top {
     display: none;
   }

   .innovative-products-section .card {
     padding: 25px;
   }

 }


 .nav-for-mobile-size {
   position: fixed;
   bottom: 15px;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 10;
 }

 @media screen and (min-width: 992px) {
   .nav-for-mobile-size {
     display: none;
   }
 }

 @media screen and (max-width: 1144px) {
   .images-logo-container {
     width: 100%;
     max-width: 340px;
   }
 }

 .nav-for-mobile-size .bottom-nav {
   background: linear-gradient(0deg,
       rgba(255, 255, 255, 0.162),
       rgba(255, 255, 255, 0.162)),
     linear-gradient(0deg,
       rgba(255, 255, 255, 0.288) 0%,
       rgba(255, 255, 255, 0.096) 30%,
       rgba(255, 255, 255, 0) 70%,
       rgba(224, 237, 255, 0.06) 100%),
     linear-gradient(316.97deg,
       rgba(255, 255, 255, 0.192) 17.24%,
       rgba(255, 255, 255, 0) 58.62%,
       rgba(217, 235, 255, 0.072) 86.21%),
     radial-gradient(38.46% 38.46% at 11.54% 19.23%,
       rgba(255, 235, 255, 0.0288) 0%,
       rgba(230, 255, 240, 0.0192) 70%,
       rgba(240, 240, 255, 0) 100%),
     radial-gradient(20% 20% at 0% 0%,
       rgba(255, 255, 255, 0.0147) 0%,
       rgba(250, 250, 255, 0.0245) 30%,
       rgba(255, 250, 250, 0.0098) 60%,
       rgba(252, 252, 255, 0) 100%);
   opacity: 100;
   box-shadow: 0px 0px 53.75px rgba(255, 255, 255, 0.0864),
     0px 14.2px 35px -6px rgba(0, 0, 0, 0.32),
     0px 3px 12px -3px rgba(0, 0, 0, 0.2025),
     inset 0.6px 0.96px 9.92px rgba(209, 230, 255, 0.12),
     inset 0px 1.5px 4.44px rgba(255, 255, 255, 0.432),
     inset -0.288px 0px 1.5px rgba(38, 115, 255, 0.0432),
     inset 0.288px 0px 1.5px rgba(255, 38, 64, 0.036),
     inset 0px 0px 1.235px rgba(242, 242, 255, 0.0392);
   /* backdrop-filter: blur(24.75px); */
   border-radius: 50px;
   box-sizing: border-box;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 0px 10px;
   gap: 13px;
 }

 .nav-for-mobile-size .bottom-nav svg {
   width: 100%;
   height: 100%;
   max-width: 20px;
   max-height: 20px;
   fill: #fff;
 }

 .nav-for-mobile-size .bottom-nav a {
   padding: 12px;
 }

 .nav-for-mobile-size .bottom-nav .nav-item .nav-text {
   color: #fff;
   font-size: 13px;
 }


 .nav-for-mobile-size .nav-link.active img {
   filter: brightness(0) saturate(100%) invert(13%) sepia(94%) saturate(7484%) hue-rotate(0deg) brightness(99%) contrast(105%);
 }

 @media (max-width: 1200px) {
   .images-logo-container {
     max-width: 287px;
     width: 100%;
   }
 }

 @media (max-width: 506px) {
   .hero-section .hero-buttons {
     display: flex;
     gap: 10px;
   }

   .hero-section .hero-buttons  .view-our-rewards {
     font-size: 13px;
     width: fit-content;
   }

   .hero-section .hero-buttons .about-us-button {
     font-size: 13px !important;
     width: fit-content;
     height: 39px;
     width: fit-content;
   }

   .hero-section .hero-buttons .about-us-button span{
     font-size: 12px !important;
   }
 }

 @media (max-width: 391px) {
   .mb-size-adjust {
     font-size: 13px !important;
   }
 }