body{overflow-y: hidden;padding: 0;}
.loader-wrapper{height: 100vh;position: fixed;top: 0;left: 0;background:white;justify-content: center;z-index: 99999;}
.abt-h3,.loader-wrapper{display: flex;align-items: center;}
h1{top: 50%;transform: translateY(-50%);}
.loader-wrapper svg,.leaflet-control,.swiper-gl .swiper-gl-image,.model .c-img,.no-phone,a.leaflet-popup-close-button{display: none;}
.loader-wrapper svg{width:70%;}
.file-label,.last-blog-card a,.abt2 a,.news-img,.swiper-carousel img,.slide-content{border-radius: 30px;}
:root {--swiper-navigation-color: #fff;--swiper-pagination-color: #fff;--swiper-pagination-bullet-inactive-color: #fff;}
.swiper-slide-fully-visible .slide-content,.news-events,.blog-card>*,.last-blog-card a,.abt-h3,.abt2 a,.contact2 *,.contact1,.file-label,#news,#customizable,.swiper-slide-content{color:white}
.swiper-slide-fully-visible .slide-content,.abt2 a,.last-blog-card a,.file-label{background: linear-gradient(90deg, #00d4ff,var(--primary-color), #090979);}
#app,.model,.card,.news-card,.blog-svg1,.abt1,.abt-h3,.contact1 p,.blog-card,.file-label,.c-active{position: relative;}
.product-cards a,.slide-content{color: var(--primary-color);}
.leaflet-container a,.leaflet-popup-content-wrapper *{color: var(--primary-color) !important;}
.about-container,.abt1,.abt2,.contact2,.news-events{flex-direction: column;}
#homepage{height: 95vh;}
h1,.media,#map,.blog-svg1 img,.blog-svg2,#customizableFile,#partners img,.card img,.text-cont,.swiper-carousel img,.swiper-gl > canvas,.swiper,.loader-wrapper{width: 100%;}
.swiper,.swiper-gl > canvas,#customizableFile{height: 100%;}
h1,.card::before,.card::after,.text-cont,.swiper-gl > canvas,.swiper-slide-content,.model img,.c-svg,.contact1 p::before,.abt-h3::before,.abt1::before,a span,.blog-svg1 img,.blog-svg2,.news-text,.news-card::after,#customizableFile{position: absolute;}
.swiper-gl > canvas {left: 0;top: 0;}
.swiper-slide-content {left: 50%;top: 10vh;width: 80%;font-size: 15px;transform: translateX(-50%);}
/*service carousel*/
.swiper-carousel {padding-bottom: 32px;max-width: 1200px;}
.swiper-carousel .swiper-slide {width: 70vw;max-width: calc(100% - 48px);} 
.swiper-carousel img{border: 2px solid var(--primary-color);}
.slide-content{background-color: rgba(255, 255, 255, 0);width: 80%;margin-left: 10%;}
.slide-content img{width: 8%;border: none;}
h3,h2,h1{text-align: center;}
.swiper-slide-title h2{font-size: 2em;}
h2{font-size:2.3em;color: white;}
/*product container*/
.card,.card img{border-bottom-right-radius: 30px;border-bottom-left-radius: 30px;}
.card{width: 80%;}
.card::before{width: 102.6%;left: -2.4%;top: -1.6vh;content:url('../images/ojamco-border.svg');}
.card::after{content: url('../images/read-more.svg');bottom: -.2vh;right: -.5vw;width: 50%;}
.text-cont{top: 0;background-color: rgba(255, 255, 255, 0.842);}
.text-cont h3{margin: 1vh 0;}
.product-cards,#app{margin: 5vh 0;}
.product-cards,.blog-cards{flex-wrap: wrap;gap: 5vh;}
/*partners*/
.h2-grad{background:linear-gradient(to right,white,var(--primary-color) 50%,white);padding: 1% 0 0.5% 0;}
#partners .swiper-wrapper {transition-timing-function: linear !important; }
#partners{pointer-events: none;}
/* #partners img{width: 20vw;height: 20vw;}
#partners .swiper-slide{width: fit-content !important;pointer-events: none;}
 *//*customizable*/
.model1 img,.model1{width: 300px;height:423px;}
.model2 img,.model2{width: 300px;height:450px;}
.model3 img,.model3 picture,.model3{width: 320px;height:104.1px;}
.model4 img,.model4{width:190px ;height:424px;}
.model1,.model1 .c-img{clip-path: url(#custom1);}
.model2,.model2 .c-img{clip-path: url(#custom2);}
.model3,.model3 .c-img{clip-path: url(#custom3phone);}
.model4,.model4 .c-img{clip-path: url(#custom4);}
.model img{object-fit: cover;mix-blend-mode: multiply;}
.controls {margin-top: 20px;}
.buttons {flex-direction: column;gap: 0px;}
.buttons > div {gap: 30px;}
.c-status{margin-top: 2vh;text-transform:capitalize;padding: 2%;}
.green{overflow: hidden;color: var(--primary-color);background-color: white;border-radius: 30px;position: relative;}
#customizable .swiper-slide{display: flex;align-items: center;flex-direction: column;}
#customizable .swiper-wrapper{align-items: center}
.controls label{font-size:1.5em}
.move-btn{border: none;background-color:transparent;}
.move-btn svg{width: 40px;}@keyframes shine-swipe {0% {left: -75%;}100% {left: 125%;}}
.c-active::before,.green::before{content: "";position: absolute;top: 0;left: -75%;width: 50%;height: 100%;background: linear-gradient(  120deg,  rgba(255, 255, 255, 0) 0%,  rgba(255, 255, 255, 0.493) 50%,  rgba(255, 255, 255, 0) 100%);transform: skewX(-20deg);animation: shine-swipe 4s infinite;pointer-events: none;z-index: 2;}
.green::before {background: linear-gradient(120deg,rgba(255, 255, 255, 0) 0%,  rgba(43, 124, 199, 0.342) 50%,rgba(255, 255, 255, 0) 100%);}
#zoom-slider{margin:0 auto 5vh;display:block;width:60%;}
#customizable {background-blend-mode: screen;height: auto; padding: 5% 0;background:url(../images/customizable-part-design.webp)no-repeat center/ cover; }
#customizableFile{left: 0;top: 0;opacity: 0;cursor: pointer;}
.file-label {margin:2vh auto;width: fit-content;padding: 12px 24px;font-size: 16px;font-weight: bold;display: flex;align-items: center;gap: 10px;}
.c-icon {width: 20px;height: 20px;fill: #fff;}
/*events and news*/
#news{padding: 2% 0;background: linear-gradient(90deg, #00d5ff7a,var(--primary-color-opacity), #0909797a), url('../images/exhebition\ packaging\ phone.webp') no-repeat center/ cover;}
#news h2{margin: 0;}
.news-card{margin-bottom: 3vh;}
.news-card::after{bottom: 0;left:10%;content:url(../images/events-bottom.svg);width: 82.8%;height: 0;}
.news-img,.news-text{width: 80%;}
.news-img,.news-text,.contact2 a,.controls label{display: block;margin: auto;}
.news-text{bottom: 0;background: white;left: 50%;transform: translateX(-50%);color: var(--primary-color);}
.news-text h3{font-size: 1em;}
/*blog container*/
.blog-card{background-color: var(--primary-color);width: 70%;border-top-right-radius: 30px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;padding-bottom: 5vh;}
.blog-card h3{margin: 8%;}
.blog-svg1{display: flex;width: 115%;}
.blog-svg1 img{right:3%;top: 5%;clip-path: url(#clipPathBlog-250);width: 250px;height: 116.5px;}
.blog-svg2{bottom: -.3vh;height: 5vh;right:-2vw}
.last-blog-card{width: 50%;}
.last-blog-card a,.abt2 a{padding: 2% 5%;}
/*about container */
.abt-img{width: 70%;}
.abt-h3{width: 80%;z-index: 1;justify-content: end;background-color:var(--primary-color-opacity);}
.abt-h3 h3{padding-right: 5%;}
.abt-h3::before{top:-1.4vh;width: 102.5%;left:-2.3%;content:url('../images/ojamco-border.svg');}
.abt1::before{width:85.2%;left:0;bottom:-1.2vh;content:url('../images/about-bottom-01.svg')}
/*contact part*/
#map{height: 40vh;z-index: 1;}
.contact2{background-color: var(--primary-color);padding: 2vh 0;}
.contact2 a,.controls label{width: fit-content;}
.social-media{gap: 10vw;margin: 2vh 0 1vh;}
.social-media a{font-size: 1.4em;margin: 0;}
.contact1 p{background-color: var(--primary-color-opacity);width: 70%;padding: 5%;margin: 0 0 -5vh 2%;z-index: 3;}
.contact1 p::before{top:-1.5vh;left: -2.4%;width: 102.45%;content:url('../images/ojamco-border.svg');}
footer{flex-direction: row;}
/*gsap part*/
.blog-card,.abt1, .abt2, .abt-h3,.contact1 p, .media, .media a {will-change: transform, opacity;}
.abt-h3{transform-origin: left;}
.blog-cards,.contact2,.blog-svg1,#partners .swiper2,#news,.about-container{overflow: hidden;}
.about-container{padding: 5vh 0;}
.contact1{overflow:hidden;padding: 5vh 0 0;}
.media h3{margin-bottom: 1vh;}
@media only screen and (min-width: 600px) {
.abt-h3::before{top:-1.2vh;}
.loader-wrapper svg{width:40%}.swiper-slide-title h2{font-size:4em;}
/*products part*/
.card{width: 40%;}
.card::before{top: -1.3vh;}
.card::after{right: -.2vw;}
/*blogs part*/
.blog-card,.last-blog-card{width: 40%;}
.blog-svg1 img{clip-path: url(#clipPathBlog-300);width: 300px;height: 140px;top:10%;right: 7%;}
.blog-svg2{bottom: -.8vh;right:-1vw}
/*about container */
.abt-img{width: 80%;}
.abt-h3{width: 80%;margin:0 0 -8% 0%;}
.abt1::before{width: 90%;bottom: -1.5vh;}
/*contact part*/
.contact1 p::before{top:-1.2vh;}}
@media only screen and (min-width: 992px) {
#homepage{height:100vh;}
.model3,.model3 .c-img{clip-path: url(#custom3);}
.model3 img,.model3{width:412px;height:134px;}
h1,h2{font-size: 60px;}
h3{font-size: 30px;}
/* #customizable .swiper-button-next,#customizable .swiper-button-prev{display: none;}*/
#app .swiper:active{cursor: grabbing;}
.swiper-carousel .swiper-slide {width: 30vw;}
/*products part*/
.product-cards{gap: 5vw;padding: 5vh 0;align-items: baseline;}
.card{width: 25%;border-bottom-right-radius: 40px;border-bottom-left-radius: 40px;}
.card::after{width: 40%;bottom: -.1vh;right: -.12vw;}
.card::before{top: -1.85vh;}
#about{padding-bottom: 5vh;}
.abt-h3::before{top:-1.5vh;}
.abt1::before{left:0%;bottom:-2vh;}
/*blogs part*/
.blog-cards{gap: 5vw;margin: 5vh 0;}
.no-phone{display: block;}
.blog-card,.last-blog-card{width: 25%;}
.blog-card{min-height: 50vh;font-size: smaller;}
.blog-svg2{bottom: -.1vh;right:-.8vw}
#contact h2{margin: 0;}
/*customizable*/
.model{cursor: cell;flex-grow: 1;}
.move-btn{cursor: pointer;}
#zoom-slider{width:30%;}
#services h3{font-size:1.3em;}
/*about container */
.about-container,.contact2,.news-events{flex-direction: row;}
.abt1,.abt2{width: 50%;}
/*news events*/
#news{background: linear-gradient(90deg, #00d5ff7a,var(--primary-color-opacity), #0909797a), url('../images/exhebition packaging.webp') no-repeat center/ cover;}
.news-events>*{flex: 1;}
/*contact container*/
.contact1 p::before{top: -3vh;}
.contact2{justify-content: space-around;padding: 1vh 0 5vh;}
.social-media a{font-size: 1.1em;}
.social-media{gap: 2vw;margin-top: 5vh;}
.text-cont h3{font-size:1em;}
.media h3{font-size:23px;}}
@media only screen and (min-width: 1700px) {
.product-cards{gap: 5vw;}
.card{width: 25%;}
.card h3{font-size: 1em;}
.card::before{top:-2vh;}
/*blogs part*/
.blog-card,.last-blog-card{width: 18%;}
.blog-svg2{right:-.5vw;bottom: -.3vh;}
/*about container */
.abt-h3::before{top:-2vh;}
.abt1::before{bottom: -2.5vh;}
.abt-h3{width: 90%;margin:0 0 -5% 10%;}
#news{padding:2% 0 5% 0;}
#partners{padding-bottom: 0;}
.product-cards{gap: 3vw;margin-top: 0;padding-top: 0;}
#customizable{padding: 1% 0;}
#customizable h2{margin:0 0 3vh;}
.model{flex-grow:0;}
.contact1 p::before{top: -3.5vh;}}