/* Global CSS */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');
body {background-color: #ffffff;font-family: 'Open Sans', sans-serif;}
li {list-style: none;}
ul {padding-left: 0;margin-bottom: 0;}
a {text-decoration: none;transition: all 0.5s ease-in;display: inline-block;}
a:hover {transition: all 0.5s ease-out;}
p, h1, h2, h3, h4, h5, h6 {margin-bottom: 0;}
p {font-size: 20px; line-height: 34px;}
h1, h2, h3, h4, h5, h6 {color:#212121;font-family: 'Open Sans', sans-serif;letter-spacing: 0;}

.common-section {padding: 50px 0;}
.common-btn {border: none;padding: 12px 30px;border-radius: 30px;font-weight: 600;text-transform: uppercase; letter-spacing: 1px;}
.inner-container { margin:40px;}
.title {font-size: 40px;font-weight: 700;letter-spacing: 0;margin-bottom: 20px;}
.br-20 {border-radius: 20px;}

/* Banner */
.project-banner {padding: 120px 0 80px; background: #fff;}
.project-banner p:first-child {font-size: 30px; color: #434343;}
.project-banner h1 {font-size: 80px; font-weight: 700; color: #1a1a1a; margin: 20px 0 30px; line-height: 1.2; letter-spacing: -1px;}
.project-banner p.banner-desc {font-size: 24px; color: #434343; line-height: 1.8;}

.project-concept .about .concepts-box .con-box {width: 100%;}

/* Concept Section */
.project-concept {overflow: initial;}
.project-concept .about .con-box {width: 35%;}
.project-concept .about .img-box img {width: 100%;}
.project-concept .about .img-box, .project-concept .about .con-box {position: sticky;top: 85px;z-index: 99;}
.project-concept .about .con-box p {font-size: 22px; line-height: 34px;}
.project-concept .con-box p:not(:last-child) {margin-bottom: 20px;}
.project-concept .concepts-box li {margin-bottom: 15px;}
.project-concept .concepts-box li span {color: #999; font-size: 16px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; display: block; margin-bottom: 5px;}
.project-concept .concepts-box li p {color: #212121; font-size: 20px; font-weight: 700; line-height: 1.4;}

/* Slider CSS */
.fullwidthdiv {width: 100%; overflow: hidden;}
.speed-test {white-space: nowrap;}
.speed-test-item {display: inline-block; padding: 0 15px;}
.speed-test-item img { box-shadow: 0 10px 30px rgba(0,0,0,0.1);margin: 0 10px;}

/* Boost Quote CSS */
.app-quote {padding-bottom: 50px;}
.app-quote p { margin-top: 15px;}
.app-quote .common-btn:hover { background-color: #212121;color: #fff;}
.apps-screen {padding: 70px 0;}

/* Features Slider CSS */
.features-section .content-box {background-color: #EBEBEB;margin:40px;border-radius: 20px;overflow: hidden;}
.features-section .content-box .common-box {width: 100%;}
.features-section .content-box .con-box {width: 40%; text-align: left;padding-right: 100px;}
.features-section .content-box .con-box p {width: 100%;}
.features-section .content-box .img-box{width: 50%;}
.features-section .content-box .con-box span {font-size: 24px;margin-bottom: 10px;display: block;font-weight: 600;}
.features-section .owl-nav button {height: 45px;width: 45px;border-radius: 50% !important;}
.features-section .owl-theme .owl-nav {margin-top: 0;display: inline-block;position: absolute;right: 34%;bottom: 25%;}
.features-section .owl-theme .owl-nav button {border: 2px solid #000 !important;}
.owl-theme .owl-nav [class*="owl-"]:hover {background: center;}
.features-section .owl-nav button span {font-size: 30px;line-height: 24px;}
/* .features-section .owl-nav button.owl-prev {background-image: url(../images/cardwhale/prev-arrow.png) !important;background-size: cover;background-position: center;background-repeat: no-repeat;}
.features-section .owl-nav button.owl-next {background-image: url(../images/cardwhale/next-arrow.png) !important;background-size: cover;background-position: center;background-repeat: no-repeat;} */

.download-section {position: relative;color: #fff;padding: 100px 0;}
.download-section h2, .download-section h3 {color: #fff;}
.download-section h2 {font-size: 32px;font-weight: 500;margin: 20px 0;}
.download-section h3 {font-size: 26px;font-weight: 700;}
.download-section .bg-img {position: absolute;top: 0;left: 0;z-index: -1;width:100%;height:100%;object-fit:cover;}
.project-concept .about .img-box {width: 50%;}

/* Challenges CSS */
.project-challenges .common-box {gap: 40px;}
.project-challenges .common-box:not(:last-child) {margin-bottom: 40px;}
.project-challenges .common-box p:not(:last-child) {margin-bottom: 20px;}
.project-challenges .common-box img {border-radius: 20px; transition: all 0.5s ease-in;}
.project-challenges .common-box .con-box {width: 70%;background-color: #F6F6F6;display: flex;flex-direction: column;justify-content: center;padding: 50px;border-radius: 20px;}
.project-challenges .common-box .con-box p, .project-challenges .common-box .con-box strong {color: #262625;}
.project-challenges .image-container {position: relative; overflow: hidden; width: 500px;height: 440px; border-radius: 20px;}
.project-challenges .image-container img {position: absolute; top: 10%; left: 10%; width: 90%; object-fit: contain;}
.project-challenges .image-container.right img {top: 10%; right: 10%; left: auto;}
.project-challenges .title.text-center {margin-bottom: 50px;}
.project-challenges .common-box .con-box h3 {font-size: 30px;font-weight: 700;margin-bottom: 15px;}

.features-section .content-box .con-box h3 {font-size: 34px;margin-bottom: 15px;}
.tech-stack-section ul{width: 80%;margin: 0 auto;}
.tech-stack-section.common-section {padding-top: 0;}

/* Responsive Media Query */

@media screen and (min-width: 2560px) {
    .features-section .owl-theme .owl-nav {right: 35%;}
}

@media screen and (max-width: 1919px) {
    .project-banner h1 {font-size: 62px;}
    .project-banner p {font-size: 26px;}
    .project-banner p.banner-desc {font-size: 22px;}
    .project-banner p:first-child {font-size: 26px;}
    .title {font-size: 34px;}
    .tech-stack-section li img {width: 100px;}
    .download-section .banner-img-con {width: 50%;}
    .download-section .download-con {width: 50%;}
    .download-section .download-con img.project-logo {width: 40%;}
    .project-concept .about .con-box p {font-size: 20px;}
    .features-section .content-box .con-box h3 {font-size: 30px;}
    .features-section .owl-theme .owl-nav {right: 33%;}
}

@media screen and (max-width: 1599px) {
    .download-section h2 {font-size: 28px;}
    .project-banner h1 {font-size: 58px;}
    p {font-size: 18px;line-height: 30px;}
    .project-challenges .common-box .con-box h3 {font-size: 28px;}
    .download-section .banner-con {gap: 50px;}
    .tech-stack-section li img {width: 90px;}
    .features-section .content-box .con-box {padding-right: 70px;}
    .features-section .content-box .con-box h3 {font-size: 28px;}
    .features-section .owl-theme .owl-nav {bottom: 21%;}
}

@media screen and (max-width: 1439px) {
    .project-banner h1 {font-size: 52px;margin: 10px 0 20px;}
    .project-concept .about .con-box p {font-size: 18px;line-height: 30px;}
    .features-section .content-box .con-box {padding-right: 50px;width: 44%;}
    .features-section .owl-nav button {height: 40px;width: 40px;}
    .features-section .owl-theme .owl-nav {right: 37%;bottom: 20%;}
    .download-section h2 {font-size: 26px;}

}

@media screen and (max-width: 1366px) {
    .project-challenges .common-box .con-box{padding: 30px;border-radius: 16px;}
    .br-20 {border-radius: 16px;}
    .speed-test-item img {margin: 0;}
    .features-section .content-box .con-box h3 {font-size: 26px;}
}

@media screen and (max-width: 1279px) {
    .project-challenges .common-box {gap: 24px;}
    .download-section h2 {font-size: 20px;}
    .project-challenges .common-box {gap: 24px;}
    .project-challenges .image-container {width: 500px; height: 500px;}
    .project-banner h1 {font-size: 42px;}
    .project-concept .about .con-box {width: 40%;}
    .project-concept .about .con-box p {font-size: 16px;line-height: 27px;}
    .features-section .content-box .con-box h3 {font-size: 26px;}
    .features-section .content-box .con-box {padding-right: 35px;width: 44%;}
    .features-section .owl-theme .owl-nav {right: 34%;bottom: 9%;}
    .project-banner p.banner-desc {font-size: 20px;}
    .features-section .content-box .con-box h3 {font-size: 22px;margin-bottom: 15px;}
    .project-challenges .common-box .con-box h3 {font-size: 25px;}
    .project-challenges .common-box p:not(:last-child) {margin-bottom: 15px;}
    .tech-stack-section li img {width: 80px;}
    .title {font-size: 28px;}
}

@media screen and (max-width: 1023px) {
    .project-concept .about .img-box {width: 100%;}
    .project-concept .about .img-box, .project-concept .about .con-box {position: relative;top: auto;}
    .features-section .content-box {background-color: transparent;}
    .features-section .content-box .img-box img {border-radius: 16px;}
    .project-challenges .common-box .con-box {width: 100%; order: -1; margin-bottom: 0;}
    .download-section .download-con {width: 70%;order: -1;}
    .download-section .banner-img-con {width: 70%;}
    .project-banner p:first-child {font-size: 20px;}
    .project-banner h1 {margin: 10px 0;font-size: 38px;}
    .project-banner p.banner-desc {font-size: 16px;line-height: 1.6;}
    .project-challenges .image-container img {width: 65%;}
    .project-concept .concepts-box {margin-top: 20px !important;}
     .project-concept .concepts-box ul {flex-direction: row !important;flex-wrap: wrap;}
    .project-concept .concepts-box li {width: 48%;}
    .project-concept .concepts-box li span {font-size: 14px;letter-spacing: 1px;}
    p {font-size: 16px;line-height: 26px;}
    .project-challenges .common-box .con-box h3 {font-size: 22px;}
    .project-challenges .image-container img {width: 55%;left: 19%;}
    
    .project-concept .about {flex-direction: column; align-items: center;}
    .project-concept .about .con-box, .project-concept .img-box {width: 100%; text-align: center;}
    .project-concept .img-box {margin-top: 50px;}
    .project-challenges .common-box {flex-direction: column;}
    .project-challenges .image-container {width: 100%; height: 400px; margin: 0 auto;}
    .download-section .banner-con {flex-direction: column; gap: 30px;}
    .download-section .banner-img-con img {max-width: 100%;}

}

@media screen and (max-width: 767px) {
    .project-banner h1 {font-size: 36px;}
    .project-banner {padding: 100px 0 50px;}
    .project-concept .concepts-box li {width: 100%; margin-bottom: 20px;}
    .speed-test-item img {max-height: 350px;}
    .title {font-size: 28px;}
    .features-section .content-box .con-box h3 {font-size: 24px ;}
    .features-section .content-box .con-box p {font-size: 16px ; line-height: 24px ;}
    .project-concept .about .con-box p {font-size: 16px; line-height: 26px;}
    .project-challenges .common-box .con-box {padding: 30px;}
    .project-challenges .common-box .con-box h3 {font-size: 22px;}
    .project-challenges .common-box .con-box p {font-size: 16px;}
    .project-challenges .image-container {height: 250px;}
    .download-section h2 {font-size: 24px;}
    .download-section h3 {font-size: 20px;}
    .common-section {padding: 40px 0;}
    .inner-container {margin: 20px;}
    .features-section .content-box {margin: 20px;}
    .tech-stack-section ul {width: auto;}
    .tech-stack-section li img {width: 65px;}

    .features-section .content-box .common-box {flex-direction: column-reverse;gap: 30px;}
    .features-section .content-box .img-box , .features-section .content-box .con-box {width: 85%; text-align: center;padding-right: 0;}
    .features-section .content-box .img-box img {max-width: 100%;}
    .features-section .owl-theme .owl-nav {width: 92%; display: flex; justify-content: space-between; right: 0; top: 60%; transform: translateY(-50%); margin: 0 auto; left: 0; bottom: auto;}
    .project-challenges .title.text-center {margin-bottom: 20px;}
    .features-section .content-box .img-box, .features-section .content-box .con-box {width: 100%;}
}


@media screen and (max-width: 639px) {
    .project-challenges .image-container {height: 350px;}
    .download-section h2 {font-size: 22px;}
    .project-banner p:first-child {font-size: 16px;}
    .project-banner h1 {font-size: 26px;}
    .project-concept .about .con-box p {font-size: 14px;line-height: 24px;}
    .project-concept .concepts-box li span {font-size: 12px;}
    .project-concept .img-box {margin-top: 0;}
    .common-btn {padding: 10px 25px;font-size: 14px;letter-spacing: 0;}
    .features-section .content-box .con-box span {font-size: 20px;}
    .features-section .content-box .con-box h3 {font-size: 22px;}
    .title {font-size: 24px;margin-bottom: 10px;}
    .apps-screen {padding: 32px 0;}
    .project-challenges .common-box .con-box {padding: 30px 20px;}
    .download-section .download-con {width: auto;}
    .download-section h2 {font-size: 20px;}
    .download-section .download-con .btn-box img {height: 40px}
    .project-challenges .image-container {height: 325px;}
    .project-challenges .common-box .con-box h3 {font-size: 20px;}
    .app-quote p {margin-top: 10px;}
    .project-challenges .image-container.right img {top: 0%;width: 81%;}
    .project-concept .concepts-box li {margin-bottom: 15px;}
    .features-section .content-box .con-box p, .project-challenges .common-box .con-box p {font-size: 14px;line-height: 22px;}
    .app-quote {padding-bottom: 30px;}
    .tech-stack-section li img {width: 50px;}
}

@media screen and (max-width: 479px) {
    .project-banner h1 {font-size: 22px}
    .br-20 {border-radius: 8px;}
    .project-banner p.banner-desc {font-size: 14px;}
    .project-banner {padding: 75px 0 30px;}
    .features-section .content-box .con-box h3 {font-size: 18px;margin-bottom: 5px;}
    .features-section .owl-nav button {height: 35px;width: 35px;}
    .features-section .owl-theme .owl-nav button {border: 1.5px solid #000 !important;}
    .title {font-size: 20px;}
    p {font-size: 14px;line-height: 22px;}
    .project-challenges .common-box .con-box {padding: 20px;}
    .project-challenges .image-container {height: 270px;}
    .project-challenges .image-container img {width: 70%;}
}