@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap');
* , ul {margin: 0;padding: 0;}
html {scroll-behavior: smooth;}
body {font-family: 'Noto Sans', sans-serif;overflow-x: hidden;}
li{list-style: none;}
a{text-decoration: none;color: #000;transition: all 0.3s ease-in;}
a:hover{color: #0075A2;transition: all 0.3s ease-in}
p{margin-bottom: 0;}
.common-section {padding: 60px 0;}
.common-btn {font-size: 18px;padding: 15px 35px;border-radius: 10px; color: #fff;background-color: #0075A2;font-weight: 400;display: inline-block;}
.common-btn:hover {background-color: #fff;}
.custom-container {width: 85%;margin: 0 auto;}
.title-box {margin-bottom: 40px;}
.title-box h2{font-size: 36px;font-weight: 600;letter-spacing: 2px;text-transform: uppercase;}
.title-box span{font-size: 24px;margin-bottom: 20px;font-weight: 500;letter-spacing: 2px;text-transform: uppercase;display: block;}
.title-box p.subtitle {font-size: 22px;font-weight: 600;line-height: 35px;}

header {padding: 50px 0;}
header .left-box {gap: 60px;}

.banner-section {height: 740px;position: relative;}
.banner-section .banner-content {width: 33%;top: 50%;position: absolute;transform: translateY(-50%);}
.banner-section .banner-content h1 {font-size: 50px;font-weight: 700;margin-bottom: 20px;}
.banner-section .banner-content p{font-size: 18px;}
.banner-img {position: absolute;top: 0;right: 0;z-index: -1;}
.about-section h2 {margin-bottom: 20px;}
.about-section p {font-size: 20px;}
.about-section p.subtitle  {margin-top: 20px;}
.about-section ul {width: 80%;margin: 0 auto;flex-wrap: wrap;gap: 30px;}
.about-section ul li{width: 48%;background-color: #FFFADF;padding:22px 30px; border-radius: 10px;}
.about-section ul li img{margin-right: 20px;}
.about-section ul li p{font-size: 20px;line-height: 48px;}
.refer-section {background-color: #FFFADF;}
.refer-section h3 {font-size: 36px;font-style: normal;font-weight: 600;letter-spacing: 1px;margin-bottom: 0;}
.main-footer {background-color: #FFFADF;padding: 20px 0;}
.main-footer .custom-container, .main-footer .custom-container>div {gap: 60px;}
.bottom-footer {background-color: #FFF7C9;padding: 10px 0;}
.about-section .image-gallery {flex-wrap: wrap;gap: 30px;margin-top: 40px;}
.about-section .image-gallery .common-box{width: 18%;}
.about-section .image-gallery .common-box p{font-size: 16px;line-height: 35px;}
.about-section .image-gallery .common-box h3{font-size: 23px;font-weight: 600;margin-bottom: 0;}
.about-section .image-gallery .img-box {border-radius: 20px;margin-bottom: 20px; overflow: hidden;position: relative;}
.about-section .image-gallery .img-box::before {content:'';height: 100%;width: 100%;background-color: #000;opacity: 0.5;position: absolute;top: 0;left: 0; }
.about-section .image-gallery .img-box img{width: 100%;}
.tools-section {background-color: #FFFADF;background-image: url(../images/yellow-wave.png);background-size: cover;background-position: center;}
.tools-section .inner-box {width: 80%;margin: 0 auto;gap: 150px;margin-top: 60px;}
.tools-section .inner-box .con-box{width: 60%;margin: 0 auto;}
.tools-section .common-box{width: 100%;padding: 30px;border-radius: 20px; background-color: #FFF;}
.tools-section .common-box:nth-child(2){margin-left: 60px;}
.tools-section .common-box:not(:last-child){margin-bottom: 40px;}
.tools-section h3 {font-size: 36px;font-weight: 600;width: 80%;margin: 0 auto;}
.tools-section .common-box h4 {font-size: 22px;font-weight: 600;}

.subscriptions-section .title-box{width: 60%;margin: 0 auto;margin-bottom: 40px;}
.subscriptions-section .img-box {width: 60%;}
.subscriptions-section .con-box {width: 80%;}
.subscriptions-section .inner-box{gap: 50px;}
.subscriptions-section ul {margin-bottom: 30px;}
.subscriptions-section ul li{margin-bottom: 20px;}
.subscriptions-section ul p {font-size: 22px;font-weight: 600;line-height: 35px;}
.subscriptions-section ul img {margin-right: 20px;margin-top: 10px;}
.subscriptions-section p {font-size: 18px;line-height: 30px;width: 80%;}

.testimonial-section .inner-box {background-color: #FFFADF;border-radius: 40px;padding: 40px 60px;text-align: center;}
.testimonial-section .inner-box img {width: auto !important;margin: 0 auto;}
.testimonial-section .inner-box p {font-size: 30px;line-height: 50px;font-weight: 400;letter-spacing: 1px;margin: 50px 0;}
.testimonial-section .inner-box span {font-size: 30px;line-height: 50px;font-weight: 600;letter-spacing: 1px;}
.testimonial-section .owl-carousel .owl-item{opacity: 0.5;}
.testimonial-section .owl-carousel .owl-item.active{opacity:1;}

.app-btns {margin-top: 40px;gap: 30px;}
.download-app-section .inner-box .con-box {width: 55%}
.download-app-section .inner-box p {font-size: 18px;width: 60%;}

.contact-section {background-color: #E9F9FF;}
.contact-section .form-box {background-image: url(../images/contact-bg.png);background-size: cover;border-radius: 40px;padding: 60px;color: #fff;width: 85%;margin: 0 auto}
.contact-section .form-box .form-group {position: relative;}
.contact-section .form-box .common-btn {background-color: #fff;color: #0075A2;margin-top: 70px;}
.contact-section .form-box .common-btn:hover{background-color: #FFFADF;}
.contact-section .form-box .form-control {background-color: transparent;border: none;padding-bottom: 20px;border-bottom: 1px solid #fff;border-radius: 0;color: #fff;letter-spacing: 2px;}
.contact-section .form-box .form-control:focus:focus-visible {box-shadow: none;color: #fff;}
.contact-section .form-box .form-control::placeholder {color: #fff;letter-spacing: 2px;}
.contact-section .form-box textarea {resize: none;letter-spacing: normal;}
.invalid-input{color: #ffe56a;text-align: left;position: absolute;left: 10px;}

#successModal .modal-body {padding: 40px;}
#successModal .modal-content {border: none;}
#successModal .modal-content img {margin-bottom: 20px;}


#loading-bar-spinner.spinner {
    left: 50%;
    margin-left: -20px;
    top: 50%;
    margin-top: -20px;
    position: absolute;
    z-index: 19 !important;
    transform: translate(-50%,-50%);
}
#loading-bar-spinner.spinner .spinner-icon {
    width: 40px;
    height: 40px;
    border:  solid 4px transparent;
    border-top-color:  #0066FF !important;
    border-left-color: #0066FF !important;
    border-radius: 50%;
}
@keyframes loading-bar-spinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}
.loader-wrapper {
    background: rgba(255,255,255,0.8);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}