/* Global CSS */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
body{background-color: #FFFFFF;color: #0D1A3E;font-family: 'Open Sans', sans-serif;background-image: url(../../css/portfolio/images/casadami/pattern-bg.png);background-attachment: fixed;background-size: contain;}
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;}

/* Custom CSS */
.custom-container{max-width: 1436px;margin: 0 auto;}
.common-section{padding: 100px 0;}
.title{font-size: 44px;margin-bottom: 20px; color: #0D1A3E;font-weight: 700;}
.sub-title{font-size: 34px;line-height: 46px;margin-bottom: 50px;}

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

/* Casadami Porfolio Banner background-image: url(../portfolio/images/uplay/banner_bg.png);*/
#casadami-banner .banner-content {height: 100vh;}
#casadami-banner .banner-content .left-box {width: 48%;}
#casadami-banner .banner-content .right-box {width: 50%;}
#casadami-banner .left-box img {margin-bottom: 40px;}
#casadami-banner h1{font-size: 64px;font-weight: 700;margin-bottom: 20px;}
#casadami-banner h2{font-size: 34px;font-weight: 600;margin-bottom: 40px;letter-spacing: 0.68px;width: 95%;}
/* #casadami-banner .right-box img {margin-top:120px;} */
#casadami-banner a {padding: 24px 45px;color: #fff;letter-spacing: 0.48px;font-size: 24px;display: inline-block;border-radius: 20px;background: #8CACA0;transition: all 0.5s ease-in;}  
#casadami-banner a:hover {background-color: #0D1A3E;transition: all 0.5s ease-in;}

.views {height: 100vh;background-image: url(../portfolio/images/casadami/webview.png);background-attachment: fixed;background-position: center;background-size: cover;}

/* Casadami Features Section */
#casadami-features {background-color: #fff}
#casadami-features h3 {font-size: 32px;letter-spacing: 0.68px;margin-bottom: 20px;color: #0D1A3E;font-weight: 600;}
#casadami-features .inner {gap: 24px;}
#casadami-features .common-box {width: 33%;}
#casadami-features .common-box.cus-mt {margin-top: 150px;}
#casadami-features .common-box .img-box {margin-bottom: 30px;overflow: hidden;border-radius: 20px;}
#casadami-features .common-box:hover img {scale: 1.1;transition: all 0.5s ease-in;}
#casadami-features .common-box img {transition: all 0.5s ease-in;}
#casadami-features .common-box p{color: #313F54;}

/* Casadami Technology Section */
#casadami-tech {background-color: #F7F3EA;}
#casadami-tech h2 {margin-bottom: 70px;}
#casadami-tech ul {width: 50%;margin: 0 auto;}

.brand-section {position: relative;margin-top: 70px;}
.brand-section .brand-img{border-radius: 0 20px 20px 0;}
.brand-section .img-box {width: 77%;height: 900px;border-radius: 0 20px 20px 0;background-image: url(../portfolio/images/casadami/brand-img.png);background-attachment: fixed;background-position: center;background-size: cover;}
.brand-section .about-brand {width: 50%;background-color: #8C3536;color: #fff;padding: 100px 70px;padding-bottom: 60px; border-radius: 30px 0 0 30px;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
.brand-section .logo-box {margin-top: -25px;}

@keyframes rotate {
    0%{transform: rotate(360deg) }
    50%{transform: rotate(-360deg);}
    100%{transform: rotate(-360deg);}
}

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


.border-box {width: 100%;height: 600px;overflow: hidden;border: 15px solid #B9B9B9;border-radius: 30px;position: relative;background-color: #FFF;}
.border-box img {position: absolute;bottom: -1566px;width: 100%;transition: all 8s ease-in;margin-top: 0;animation: up-down 8s  ease-in 1s infinite alternate;}
/* .border-box:hover img {bottom: 0; transition: all 8s ease-in;} */
.border-box:hover img {animation-play-state: paused;}

@keyframes up-down{
    0% {
      bottom: -1566px;
    }
    100% {
      bottom: 0 ;
    }
}


/************** Responsive CSS of CasaDami Case Study *****************/

@media screen and (max-width:1919px) {
    #casadami-banner h1 {font-size: 54px;font-weight: 700;margin-bottom: 15px;}
    p {font-size: 18px;line-height: 32px;}
    .common-btn {border-radius: 16px;font-size: 22px;padding: 20px 35px;}
    #casadami-banner h2 {font-size: 30px;letter-spacing: 0.58px;}
    .casadami-overview p {width: 80%;margin: 0 auto;}
    #casadami-features h3 {font-size: 30px;letter-spacing: 0.58px;margin-bottom: 10px;}
    #casadami-features .common-box .img-box {margin-bottom: 20px;border-radius: 12px;}
    #casadami-features .common-box.cus-mt {margin-top: 100px;}

    
}

@media screen and (max-width:1599px) {
    .common-section {padding: 80px 0;}
    .title {font-size: 32px;}
    #casadami-tech h2 {margin-bottom: 30px;}
    #casadami-tech ul img {width: 100px;}
    #casadami-features h3 {font-size: 28px;letter-spacing: 0.38px;}
    #casadami-banner h1 {font-size: 48px;margin-bottom: 10px;}
    #casadami-banner h2 {font-size: 24px;letter-spacing: 0.58px;}
    #casadami-banner a {padding: 20px 35px;font-size: 20px;border-radius: 12px;}
    .border-box {border: 13px solid #B9B9B9;height: 480px;}
    .brand-section {margin-top: 0;}
    .brand-section .img-box {height: 760px;}
    .border-box img {bottom: -1295px;}
    @keyframes up-down{
        0% {bottom: -1295px;}
        100% {bottom: 0 ;}
    }
    .brand-section .about-brand {width: 58%;padding: 80px 70px;padding-bottom: 60px;}
    .brand-section .about-brand .logo {width: 140px;}

}

@media screen and (max-width:1439px) {
    .common-btn {border-radius: 14px;font-size: 20px;padding: 15px 30px;}
    p {font-size: 16px;line-height: 30px;}
    #casadami-tech ul img {width: 90px;}
    
    #casadami-features .common-box.cus-mt {margin-top: 80px;}
    #casadami-features h3 {font-size: 24px;}
    #casadami-banner h1 {font-size: 42px;}
    #casadami-banner h2 {font-size: 24px;}
    #casadami-banner a {padding: 15px 30px;font-size: 18px;border-radius: 10px;}
    .casadami-overview p {width: 90%;}

    .brand-section .img-box {height: 700px;}
    .brand-section .about-brand {width: 54%;padding: 50px 60px;border-radius: 24px 0 0 24px;}
    .border-box {border: 10px solid #B9B9B9;height: 420px;}
    .border-box img {bottom: -1116px;}
    @keyframes up-down{
        0% {bottom: -1116px;}
        100% {bottom: 0 ;}
    }

}

@media screen and (max-width:1365px) {
    #casadami-banner .banner-content .right-box img {margin-top: 0;}
    .brand-section .about-brand {width: 57%;}
    .brand-section .img-box {height: 620px;}
    
    
}

@media screen and (max-width:1279px) {
    #casadami-tech ul img {width: 80px;}
    .title {font-size: 30px;}
    .common-section {padding: 60px 0;}
    #casadami-features h3 {font-size: 22px;}
    #casadami-tech h2 {margin-bottom: 15px;}
    #casadami-features h3 {font-size: 20px;}
    #casadami-features .common-box.cus-mt {margin-top: 50px;}
    #casadami-banner h2 {font-size: 22px;}
    #casadami-banner h1 {font-size: 38px;}
    p {font-size: 15px;line-height: 26px;}

    .border-box img {bottom: -882px;}
    .border-box {height: 400px;}
    @keyframes up-down{
        0% {bottom: -882px;}
        100% {bottom: 0 ;}
    }
    .brand-section .img-box {width: 85%;}
    .brand-section .about-brand {width: 64%;padding: 50px 40px;border-radius: 20px 0 0 20px;}
    .brand-section .about-brand .logo {width: 120px;}
}

@media screen and (max-width:1023px) {
    .common-btn {border-radius: 12px;font-size: 18px;padding: 12px 25px;}
    .title {font-size: 28px;margin-bottom: 15px;}
    #casadami-banner .banner-content {height: auto;padding-top: 115px;}
    #casadami-banner h2 {font-size: 20px;letter-spacing: 0;margin-bottom: 15px;}
    #casadami-banner a {padding: 10px 25px;font-size: 16px;}
    #casadami-banner h1 {font-size: 34px;}
    #casadami-features .inner{flex-wrap: wrap;}
    #casadami-features .common-box {width: 100%;}
    #casadami-features .common-box img {width: 100%;}
    .views {height: 450px;background-attachment: unset;}
    #casadami-features .common-box.cus-mt {margin-top: 0;}
    #casadami-features .inner {gap: 30px;}

    .brand-section {margin-top: 80px;}
    .brand-section .img-box {width: 100%;border-radius: 0;}
    .brand-section .about-brand {width: 86%;}
    #casadami-banner .banner-content .left-box {width: 100%;text-align: center;}
    #casadami-banner .banner-content {flex-wrap: wrap;gap: 40px;}
    #casadami-banner h2 {width: 65%;margin: 0 auto;margin-bottom: 20px;}
    #casadami-banner .banner-content .right-box {width: 85%;margin: 0 auto;}
    .border-box img {bottom: -1230px;}
    @keyframes up-down{
        0% {bottom: -1230px;}
        100% {bottom: 0 ;}
    }


}

@media screen and (max-width:767px) {
    #casadami-tech ul {width: 80%;}
    #casadami-tech ul img {width: 65px;}

    .title {font-size: 24px;}
    #casadami-banner .banner-content {padding-top: 50px;flex-direction: column;gap: 30px;}
    #casadami-banner .banner-content .left-box , .casadami-overview p{width: 100%;text-align: center;}
    #casadami-banner h2{width: 100%;}
    #casadami-banner .banner-content .right-box {width: 100%;}
    .border-box {height: 340px;}
    .border-box img {bottom: -1078px;}
    @keyframes up-down{
        0% {bottom: -1078px;}
        100% {bottom: 0 ;}
    }
    .brand-section .about-brand {width: 100%;position: relative;border-radius: 0;padding: 50px 65px;top: auto;transform: none;}
    .brand-section .img-box {height: 430px;background-attachment: unset;}
    .brand-section {margin-top: 55px;}

    
}

@media screen and (max-width:639px) {
    p {font-size: 14px;line-height: 26px;}
    .common-btn {border-radius: 8px;font-size: 16px;padding: 10px 22px;}
    .common-section {padding: 50px 0;}
    #casadami-tech ul {width: 70%;}
    #casadami-tech ul img {width: 60px;}
    #casadami-banner h1 {font-size: 30px;}
    #casadami-banner h2 {font-size: 18px;width: 80%;margin: 0 auto;margin-bottom: 20px;}
    .casadami-overview.common-section{padding-bottom: 30px;}
    .views {height: 360px;}

    #casadami-banner .banner-content .right-box {width: 95%;}
    .border-box {border: 8px solid #B9B9B9;}
    .border-box img {bottom: -843px;}
    @keyframes up-down{
        0% {bottom: -843px;}
        100% {bottom: 0 ;}
    }
    .brand-section .img-box {height: 340px;}
    .brand-section .about-brand {padding: 30px;}
    .brand-section {margin-top: 50px;}
    .brand-section .about-brand .logo {width: 95px;}
    .brand-section .logo-box {margin-top: -15px;}

}

@media screen and (max-width:479px) {
    .title {font-size: 20px;}
    .overview-img {background-position: 58%;}
    .genthree-features .common-box ul {padding-left: 15px;}
    #casadami-tech ul {width: 85%;}
    #casadami-tech ul img {width: 55px;}
    .common-btn {font-size: 14px;border-radius: 6px;}
    .views {height: 250px;}
    #casadami-banner .banner-content {padding-top: 60px;}
    #casadami-banner .banner-content .right-box {width: 95%;}
    #casadami-banner h1 {font-size: 26px;}
    #casadami-banner h2 {font-size: 16px;width: 90%;}
    #casadami-features .common-box .img-box {margin-bottom: 10px;border-radius: 10px;}
    .brand-section {margin-top: 40px;}
    .brand-section .about-brand {padding: 30px 20px;}
    .border-box {height: 250px;border-radius: 20px;}
    .brand-section .img-box {height: 260px;}
    .border-box img {bottom: -620px;}
    @keyframes up-down{
        0% {bottom: -620px;}
        100% {bottom: 0 ;}
    }

}

@media screen and (max-width:359px) {

}