/* Global CSS */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
body{background-color: #243042;color: #ffffff;font-family: 'Open Sans', sans-serif;background-image: url(../portfolio/images/visit-newportbeach/banner-img.png); background-attachment: fixed;background-repeat: no-repeat;background-size: cover;overflow-x: hidden;}
li{list-style: none;}
ul{padding-left: 0;margin-bottom: 0;}
p , h1,h2,h3,h4,h5,h6{margin-bottom: 0;}
p{font-size: 20px;line-height: 34px;font-weight: 400;}
a {display: inline-block;}

/* Custom CSS */
.custom-container{max-width: 1600px;margin: 0 auto;}
.common-section{padding: 100px 0;}
.common-top-section{padding-top: 100px}
.title{font-size: 34px;margin-bottom: 30px; color: #FFF;text-transform: capitalize;font-weight: 600;letter-spacing: 0.68px;text-transform: uppercase;}


/* white logo */
#portfolio .innermenulogo , #portfolio .menulogo {display: none;}
#portfolio .whitelogo .sitelogo , #portfolio .homemenulogo {display: block;}

/* Visit Newport Beach Banner Section */
#vnb-banner{position: relative;height:100vh;overflow-x: hidden;}
#vnb-banner .right-box {position: absolute;right: -15%;width: 60%;}
#vnb-banner .left-box {width: 50%;}
#vnb-banner .left-box h1 {font-size: 64px;font-weight: 700;line-height: normal;letter-spacing: 1.28px;margin-bottom: 10px;text-transform: uppercase;}
#vnb-banner .left-box p {font-size: 34px;font-weight: 600;line-height: normal;width: 90%;}
#vnb-banner .left-box a {margin-top: 40px;}
#vnb-banner .container , #vnb-banner .banner-content {height: 100%;}
#vnb-banner ul {gap: 40px;flex-wrap: wrap;margin-top: 50px;width: 90%;}
#vnb-banner ul li {width: 46%;}
#vnb-banner ul li span{font-size: 20px;letter-spacing: 4px;}
#vnb-banner .left-box ul li p{font-size: 24px;font-weight: 700; letter-spacing: 2px;}
#vnb-banner .right-box img {animation: upDown 4s ease-in-out infinite;}

/* Visit Newport Beach challenges Section */
.vnb-challenges h3 {font-size: 24px;font-weight: 400;margin-bottom: 15px;font-weight: 600;}
.vnb-challenges p {letter-spacing: 0;width: 75%;}
.vnb-challenges .inner {gap: 50px;}
.vnb-challenges .common-box {width: 48%;gap:15px;}

.vnb-overview .concept {padding: 100px;background-image: url(../portfolio/images/visit-newportbeach/app-overview.svg);background-position: center;background-repeat: no-repeat;background-size: contain;}
.vnb-overview .concept .title {font-size: 24px;font-weight: 500;}

/* Visit Newport Beach Techstack Section */
.vnb-tech-section .container {width: 80%;padding: 40px 0; background-image: url(../portfolio/images/visit-newportbeach/tech-bg.svg);background-position: center;background-repeat: no-repeat;background-size: contain;}
.vnb-tech-section ul{width: 50%;margin: 0 auto;}
.clutch-div a img{opacity:0.7;transition: all 0.5s ease-in;}
.clutch-div a:hover img{opacity:1;transition: all 0.5s ease-in;}

@keyframes upDown {
    0%{transform: translateY(-10px) }
    50%{transform: translateY(10px);}
    100%{transform: translateY(-10px);}
}


/************** Responsive CSS of Visit Newport Beach Case Study *****************/
@media screen and (max-width:1919px) {
    #vnb-banner .right-box {width: 65%;}
    #vnb-banner .left-box h1 {font-size: 60px;}
    #vnb-banner .left-box p {font-size: 32px;}
    .vnb-tech-section .container {width: 80%;}
    .vnb-tech-section ul {width: 55%;}
    .vnb-overview .concept {padding: 50px 80px;}
    .vnb-challenges p {width: 85%;}
    body{background-size: contain;}


}

@media screen and (max-width:1599px) {
    #vnb-banner .left-box h1 {font-size: 48px;}
    #vnb-banner .left-box p {font-size: 28px;}
    #vnb-banner .left-box img {width: 85%;}
    #vnb-banner .left-box ul li p {font-size: 22px;letter-spacing: 1px;}
    #vnb-banner ul {gap: 30px;margin-top: 30px;}
    p {font-size: 18px;line-height:30px;}
    .common-section{padding: 65px 0;}
    .common-top-section {padding-top: 65px;}
    #vnb-banner .left-box a {margin-top: 30px;}
    .vnb-challenges h3 {font-size: 22px;}
    .title {font-size: 30px;}
    .vnb-overview .concept {padding: 60px 70px;}
    .clutch-div a img {width: 280px;}

}

@media screen and (max-width:1439px) {
    #vnb-banner .left-box h1 {font-size: 44px;}
    #vnb-banner .left-box p {font-size: 26px;}
    #vnb-banner ul li span {font-size: 18px;letter-spacing: 3px;}
    #vnb-banner .right-box {width: 70%;right: -17%;}
    .vnb-challenges .common-box {width: 47%;}
    .vnb-challenges p {width: 95%;}
    p {font-size: 16px;line-height: 28px;}


}

@media screen and (max-width:1365px) {
    body {background-position: center;}
    #vnb-banner .right-box {width: 80%;right: -20%;}
    #vnb-banner {padding-bottom: 0;}
    #vnb-banner .left-box p {font-size: 24px;}
    #vnb-banner .left-box img {width: 80%;}
    
}

@media screen and (max-width:1279px) {
    .vnb-challenges p {width: auto;}
    .vnb-challenges h3 {font-size: 20px;margin-bottom: 10px;}
    .vnb-challenges img {width: 50px;}
    .vnb-challenges .common-box {gap: 10px;}
    .vnb-tech-section ul {width: 65%;}
    .vnb-tech-section ul img{width: 80px;}
    .vnb-tech-section .container {padding: 30px 0;}
    #vnb-banner .left-box {width: 60%;}
    #vnb-banner .left-box h1 {font-size: 38px;margin-bottom: 10px;}
    #vnb-banner .left-box p {font-size: 22px;width: 75%;}
    #vnb-banner .left-box img {width: 70%;}
    .clutch-div a img {width: 220px;}
    #vnb-banner .left-box ul li p {font-size: 20px;}
    #vnb-banner ul {width: 80%;}

   
}

@media screen and (max-width:1023px) {
    .common-section {padding: 40px 0;}
    .common-top-section {padding-top: 40px;}
    .vnb-challenges .common-box {width: 100%;}
    #vnb-banner .right-box {width: 100%;right: auto;position: relative;padding-bottom: 25px;}
    #vnb-banner .left-box {width: 100%;}
    #vnb-banner .banner-content {flex-wrap: wrap;padding-top: 60px;}
    #vnb-banner .left-box p {width: 75%;}
    .vnb-overview .concept {padding: 60px 0;}
    .vnb-overview .concept , .vnb-tech-section .container {background-image: none;}
    .vnb-tech-section ul img {width: 65px;}
    .vnb-tech-section .container {padding: 0;}
    .vnb-overview .concept {padding: 45px 0;}

}

@media screen and (max-width:767px) {
    .title{font-size: 22px;margin-bottom: 10px;}
    p {font-size: 14px;line-height: 24px;}
    #vnb-banner .banner-content {padding-top: 0;}
    .vnb-challenges .inner {gap: 40px;}
    #vnb-banner {height: auto;}
    #vnb-banner .left-box ul li p {font-size: 18px;}
    #vnb-banner ul {gap: 20px; width: auto;}
    #vnb-banner .left-box ul li p {font-size: 18px;letter-spacing: 0;}
    #vnb-banner ul li span {font-size: 17px;letter-spacing: 2px;}
    .vnb-challenges .inner {gap: 35px;}
    .common-section {padding: 50px 0;}
    .vnb-overview .concept {padding: 30px 0;}
    #vnb-banner .left-box h1 {font-size: 34px;margin-bottom: 5px;}
}


@media screen and (max-width:639px) {
    p{font-size: 13px;line-height: 22px;}
    #vnb-banner .left-box h1 {font-size: 30px;}
    #vnb-banner .left-box p {font-size: 20px;}
    #vnb-banner .left-box a {margin-top: 20px;}
    .vnb-challenges h3 {font-size: 18px;margin-bottom: 5px;}
    .vnb-tech-section ul {width: 90%;}
    .vnb-tech-section ul img {width: 55px;}
    .common-section {padding: 50px 0;}
    .clutch-div a img {width: 190px;}
    .vnb-challenges .inner {gap: 25px;}
    

}

@media screen and (max-width:479px) {
    .common-top-section {padding-top: 30px;}
    #vnb-banner .left-box p {width: auto;}
    #vnb-banner .banner-content {padding-top: 25px;}
    #vnb-banner .left-box p {font-size: 18px;}
    #vnb-banner .left-box img {width: 60%;}
    #vnb-banner .left-box ul li p {font-size: 16px;letter-spacing: 1px;}
    #vnb-banner ul {margin-top: 15px;}
    #vnb-banner ul li span {font-size: 16px;letter-spacing: 1px;}
    .vnb-overview .concept .title {font-size: 20px;}
    .title {font-size: 20px;}
    #vnb-banner .right-box {padding-top: 20px;}
    #vnb-banner .left-box h1 {font-size: 26px;}
    .clutch-div a img {width: 160px;}
    .vnb-tech-section ul {width: auto;}
    .vnb-tech-section ul img {width: 50px;}

}

@media screen and (max-width:359px) {
    #vnb-banner .left-box h1 {font-size: 22px;}
    #vnb-banner .left-box p {font-size: 16px;}


}