/* Common CSS */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
body{background-color: #fff;color: #A1A1A1;font-family: 'Open Sans', sans-serif;overflow-x: hidden;}
li{list-style: none;}
ul{padding-left: 0;margin-bottom: 0;}
h1,h2,h3,h4,h5,h6{margin-bottom: 0;color:#212121;text-transform: uppercase;}
p{font-size: 18px;line-height: 34px;margin-bottom: 0;color: #6C6868;font-weight: 600;}
/* Custom CSS */
.custom-container{max-width: 1436px;margin: 0 auto;}
.common-section{padding: 100px 0;}
.common-top-padding{padding-top: 100px;}
.common-bottom-padding{padding-bottom: 100px;}
.title{font-size: 44px;margin-bottom: 50px;text-transform: uppercase;}
.title span {color: #FDAD00;font-weight: 800;}
.sub-title{font-size: 34px;margin-bottom: 50px;color: #212121;font-weight: 500;}
.shadow-box {border-radius: 20px;background: linear-gradient(269deg, #FEF8F2 0%, #FFF 100%);box-shadow: 10px 20px 20px 0px rgba(0, 0, 0, 0.05);transition: all 0.5s ease-in;}
.shadow-box:hover {box-shadow: none;transition: all 0.5s ease-in;}
.dots {position: absolute;animation: upDown 2s ease-in-out infinite;}
.caps {position: absolute;animation:zoomIn 4s ease-in-out infinite;}
.cone {position: absolute;animation:shake 2s ease-in-out infinite;}
/*Wve Labs black logo */
#portfolio .innermenulogo , #portfolio .sitelogo {display: block;}
#portfolio .menulogo , #portfolio .homemenulogo {display: none;}
/* Good Pedals Case study CSS */
#gp-banner {height: 100%; display: flex; justify-content: center; align-items: center;}
#gp-banner .container {position: relative;}
#gp-banner h1{font-size: 54px;margin-bottom: 40px;}
#gp-banner p{font-size: 24px; color: #212121;}
#gp-banner p.sub-title{font-size: 34px;width: 90%;}
#gp-banner .dots {top: 35%;left: 42%;}
#gp-banner .caps {top: 24%;right: 3%;}
#gp-banner .cone {bottom:13% ;left: 40%;}
.blur-circle {background: #F4E9DD;filter: blur(82px);height:698px;width:698px;border-radius: 50%;position: absolute;z-index: -1;overflow-x: hidden;}
.blur-circle.lg{left: -22%;bottom: -19%;}
.blur-circle.sm{transform: scale(0.8);right: -20%;bottom:0;}
#gp-banner .right-box {position: relative;}
#gp-banner .right-box::before {content: '';position: absolute;bottom: 0;background-image: linear-gradient(245deg, rgba(0, 0, 0, 0.80) 9.81%, rgba(0, 0, 0, 0.00) 73.08%);width: 110%;height: 100%;z-index: -1;transform: skewY(-20deg);filter: blur(20px);right: 20px;transform-origin: right;}
#gp-banner .shadow-img {position: absolute;right: 9%;z-index: -1;top: 13%;}
#gp-concept .element-title {margin-bottom: 50px;gap: 70px;}
h3{font-size: 24px;font-weight: 700;letter-spacing: 0.96px;text-transform: capitalize;margin-bottom: 20px;}
.concepts-box {margin-top: 80px;}
.concepts-box ul{gap: 26px;}
.concepts-box li {padding: 40px 50px;width: 100%;}
.concepts-box li span {color: #212121;font-size: 20px;font-weight: 600;letter-spacing: 4px;text-transform: uppercase;display: block;}
.concepts-box li p {color: #FDAD00;;font-size: 24px;font-weight: 700;letter-spacing: 2px;}
.gp-features {position: relative;}
.gp-features::before , .gp-iot .element-title::before{content: '';position: absolute;border-radius: 20px;background: linear-gradient(222deg, #FEF8F2 24.61%, #FFF 80.16%);bottom: 0;height: 70%;width: 100%;}
.gp-features .inner-content{gap: 30px;}
.gp-features .icon {height: 120px;width: 120px;background: #E5F8FC;border-radius: 50%;padding: 26px;margin-bottom: 30px;}
.gp-features .feature-box .icon img {transition: all 0.5s ease-in;}
.gp-features .feature-box:hover .icon img {transform: scale(1.1);transition: all 0.5s ease-in;}
.gp-features .dots {top: 15%;right: 13%;rotate: 25deg;}
.gp-features .caps {top: 0;left: 25%;rotate: -90deg;}
.gp-features .cone {top: 10%;left: 55%;rotate: -135deg;}
.gp-iot .element-title::before {height: 82%;}
.gp-iot .iot-title img{margin: 100px 0;}
.gp-iot .element-title {position: relative;}
.gp-iot .content-box{flex-wrap: wrap;gap: 30px;}
.gp-iot .inner-content {position: relative;z-index: 1;perspective: 1000px;}

img.iot-ipad {animation: noTransformAnim linear forwards normal;animation-timeline: view();opacity: 0;object-fit: cover;object-position: center;}
.gp-iot .content-box .common-box {width: 48%;}
.gp-iot .inner-content .cone {left: 0;top: 35%;}
.gp-iot .inner-content .caps {right: 10%;}
.gp-iot .inner-content .dots {right: 10%;top: 75%;}
.gp-design .ui-design-slider {margin-top: 70px;}
.gp-challenges {padding-bottom: 35px;}
.gp-challenges .common-box {display: flex;flex-direction: column;}
.gp-challenges .common-box:not(:last-of-type){margin-bottom: 100px;}
.gp-challenges .common-box .challenge , .gp-challenges .common-box .solution{width: 50%;padding: 25px;gap:30px}
.gp-challenges .common-box .solution{margin-right: 45px;margin-top: -50px;align-self: end;}
.gp-challenges h3 {font-size: 24px;margin-bottom: 10px; font-weight: 700;letter-spacing: 0.96px;text-transform: capitalize;}
#gp-tech p {margin-top: 20px; font-weight: 700;}
#gp-tech {margin-top: -30px}
/* Animations used */
@keyframes upDown {
    0%{transform: translateY(-10px) }
    50%{transform: translateY(10px);}
    100%{transform: translateY(-10px);}
}
@keyframes zoomIn {
	0%{transform: scale(0.8);}
	50%{transform: scale(1);}
	100%{transform: scale(0.8);}
}
@keyframes shake {
	0%{transform: rotate(15deg);}
	50%{transform: rotate(-15deg);}
	100%{transform: rotate(15deg);}
}

@keyframes noTransformAnim {
	50% { transform: none; opacity: 1; }
	100% { transform: none; opacity: 1; }
  }

/* Responsive Media CSS */
@media screen and (max-width:1919px) {
	#gp-banner .dots {top: 32%;left: 38%;}
	#gp-banner .cone {bottom: 10%;left: 35%;}
	.gp-features .cone {top: 6%;left: 53%;}
	.gp-features .element-title img {width: 100%;}
	#gp-banner h1 {font-size: 48px;}
}

@media screen and (max-width:1599px) {
	.common-section{padding: 65px 0;}
	.common-bottom-padding {padding-bottom: 65px;}
	.common-top-padding {padding-top: 65px;}
	#gp-banner .right-box{margin-top: 60px;}
	#gp-banner .dots {top: 27%;left: 32%;}
	#gp-banner .cone {bottom: 9%;left: 30%;}
	#gp-banner p.sub-title {font-size: 32px;margin-bottom: 35px;}
	.custom-container {width: 90%;}
	.gp-iot .iot-title img {width: 80%;}
	#gp-banner h1 {font-size: 44px;}

	
	
}

@media screen and (max-width:1439px) {
	.title {font-size: 40px;}
	#gp-banner h1 {margin-bottom: 25px;}
	#gp-banner p.sub-title {font-size: 30px;margin-bottom: 25px;}
	.concepts-box li {padding: 32px 40px;}
	.shadow-box {border-radius: 16px;}
	p {font-size: 17px;line-height: 32px;}
	.concepts-box li p{font-size: 22px;}
	.concepts-box li span {font-size: 18px;letter-spacing: 3px;}
	.concepts-box {margin-top: 60px;}
	#gp-banner h1 {font-size: 40px;}


}

@media screen and (max-width:1366px) {
	.title {font-size: 38px;}
	#gp-banner .dots {top: 18%;left: 28%}
	#gp-banner .cone{left: 25%;}
	.gp-challenges .common-box .challenge, .gp-challenges .common-box .solution {padding: 22px;gap: 16px;}
	#gp-banner p.sub-title {font-size: 28px;}
	p {font-size: 16px;line-height: 30px;}
	.concepts-box li {padding: 25px 30px;}
	.concepts-box {margin-top: 40px;}
	#gp-concept .element-title {margin-bottom: 35px;gap: 30px;}
	.gp-features .icon {height: 108px;width: 108px;padding: 23px;}
	#gp-concept .element-title img{width: 30%;}
	#gp-banner h1 {font-size: 38px;}
	.blur-circle.lg{bottom: -3%;}

}

@media screen and (max-width:1279px) {
	#gp-banner p.sub-title {font-size: 24px;}
	#gp-banner .left-box {width: 50%;}
	#gp-banner .cone {left: 28%;}
	#gp-banner .caps {top: 14%;right: 8%;}
	#gp-banner .dots {top: 12%;left: 27%;}
	.cone {width: 100px;}
	.caps {width: 60px;}
	.dots {width: 80px;}
	#gp-banner p {font-size: 22px;}
	.concepts-box li {padding: 15px;}
	.concepts-box li p {font-size: 20px;letter-spacing: 1px;}
	.concepts-box li span {font-size: 16px;letter-spacing: 2px;}
	.title {font-size: 32px;margin-bottom: 30px;}
	.gp-features .icon {height: 95px;width: 95px;padding: 20px;margin-bottom: 20px;}
	h3 {font-size: 22px;}
	.gp-challenges .common-box .challenge, .gp-challenges .common-box .solution {width: 70%;}
	.gp-challenges .common-box .solution {margin-top: -20px;}
	img.iot-ipad {width: 75%;}
	.gp-design .ui-design-slider {margin-top: 30px;}
	.gp-iot .iot-title img {margin: 60px 0;}

}

@media screen and (max-width:1023px) {
	.common-section {padding: 40px 0;}
    .common-top-padding {padding-top: 40px;}
	.common-bottom-padding {padding-bottom: 40px;}
	#gp-banner p.sub-title {width: auto;text-align: center;}
	.gp-features .inner-content {flex-wrap: wrap;}
	#gp-banner .banner-content {flex-wrap: wrap;text-align: center;padding-top: 100px;}
	#gp-banner .left-box {width: 100%;}
	#gp-banner .right-box {margin: 0 auto;margin-top: 20px;width: 75%;}
	.blur-circle {height: 400px;width: 400px;bottom: 0%;}
	#gp-banner .cone {bottom: 15%;left: 0;}
	#gp-banner .dots {top: 28%;left: 25%;}
	#gp-banner .caps {top: 18%;right: 10%;}
	#gp-concept .element-title img {width: 40%;}
	.concepts-box ul {flex-wrap: wrap;}
	.concepts-box li {width: 48%;text-align: center;}
	.gp-features .caps{left: 12%;}
	.gp-features .element-title {flex-direction: column;}
	.gp-features .element-title img {width: 75%;}
	.gp-features .element-title img:nth-child(2) {width: 65%;}
	.gp-features::before, .gp-iot .element-title::before {height: 75%;}
	.gp-iot .iot-title img {width: 95%;}
	.gp-iot .content-box .common-box {width: 100%;}
	.gp-challenges img {width: 80px;}
	.gp-challenges .common-box .challenge, .gp-challenges .common-box .solution {width: auto;}
	.gp-challenges .common-box .solution {margin-top: 30px}
	.gp-challenges .common-box .solution {margin-right: 0;}
	h3 {font-size: 20px;margin-bottom: 10px;}
	.gp-challenges h3 {font-size: 20px;}
	.title {font-size: 30px;margin-bottom: 25px;}
	#gp-banner p {font-size: 20px;}
	#gp-banner p.sub-title {font-size: 22px;margin-bottom: 10px;}
	#gp-banner h1 {margin-bottom: 15px;}
	#gp-concept .element-title {margin-top: 30px;}
	.gp-challenges .common-box:not(:last-of-type) {margin-bottom: 30px;}
	#gp-tech img {width: 60px;}
	#gp-tech p {margin-top: 10px;}
	.blur-circle.lg {bottom: 0;}
	#gp-banner h1 {font-size: 34px;}
	#gp-banner .right-box::before {width: 90%;}
	

}

@media screen and (max-width:767px) {
	img.iot-ipad {width: 90%;}
	.title {font-size: 26px;margin-bottom: 20px;}
	#gp-banner .banner-content {padding-top: 60px;}
	#gp-banner .dots {top: 32%;left: 7%;}
	#gp-banner .right-box , .gp-features .element-title img{width: 95%;}
	.cone {width: 75px;}
	.dots {width: 70px;}
	.caps {width: 50px;}
	#gp-banner .dots {top: 22%;}
	.concepts-box li {width: 47%;}
	.gp-iot .iot-title img {margin: 30px 0;}
	.gp-iot .inner-content .dots {right: 20%;top: 100%;}
	.gp-iot .inner-content .cone {left: -3%;top: 35%;}
	.gp-iot .inner-content .caps {right: 2%;}
	h3 {font-size: 18px;}
	.gp-design .speed-test-item {width: 100%;}
	#gp-banner h1 {font-size: 32px;}
	.custom-container {width: 85%;}

}

@media screen and (max-width:639px) {
	.gp-challenges .common-box .challenge, .gp-challenges .common-box .solution {flex-direction: column;align-items: flex-start !important;}
	.gp-challenges img {width: 65px;}
	.concepts-box li {width: 100%;margin: 0 auto;}
	#gp-banner .right-box, .gp-features .element-title img {width: 100%;}
	.gp-features .element-title img:nth-child(2) {width: 80%;}
	h1 {font-size: 30px;}
	#gp-banner .dots {top: 16%;}
	#gp-banner p.sub-title {font-size: 20px;margin-bottom: 10px;}
	#gp-concept .element-title img {width: 50%;}
	.gp-challenges .common-box .solution {align-self: start;}
	.gp-features .icon {height: 80px;width: 80px;padding: 15px;}
	#gp-tech img {width: 50px;}
	#gp-concept .element-title {flex-direction: column;gap: 0;}
	#gp-concept .element-title h2 {order: -1;}
	.gp-features .caps {left: 7%;}
	#gp-banner h1 {font-size: 30px;}
	.custom-container {width: 90%;}
	.blur-circle {height: 390px;width: 340px;}
	.blur-circle.lg {left: 0;bottom: 15%;}
	.blur-circle.sm {transform: scale(1);right: 0;}

	
}

@media screen and (max-width:479px) {
	.gp-challenges .common-box .challenge, .gp-challenges .common-box .solution {padding: 12px;}
	#gp-banner .dots {top: 20%;left: 0;}
	#gp-banner .caps {top: 16%;right: 0;}
	#gp-banner .cone {bottom: 13%;}
	#gp-concept .element-title img {width: 65%;}
	.gp-features .caps {display: none;}
	p {font-size: 14px;line-height: 26px;text-align: justify;}
	.concepts-box li p {text-align: center;}
	h1 {font-size: 26px;}
	#gp-banner p.sub-title {font-size: 18px;margin-bottom: 5px;}
	#gp-banner p {font-size: 18px;text-align: center;}
	.title {font-size: 22px;}
	.concepts-box li p {font-size: 18px;}
	.concepts-box li span {font-size: 14px;letter-spacing: 1px;}
	.gp-features::before, .gp-iot .element-title::before {height: 90%;}
	.gp-challenges h3 {font-size: 18px;letter-spacing: 0.56px;}
	#gp-banner h1 {font-size: 26px;}
	.blur-circle {height: 300px;width: 300px}
	

	
}