html {scroll-behavior: smooth;}
body.template-portfolio-p44{background-color: #1E1D1E !important; font-family: 'exo_2.0regular', sans-serif;}
/*common css*/
.p44.ctm-heading-text{position: relative; z-index: 1;}
.p44.ctm-heading-text .ctm-heading-inner { max-width: 414px; padding: 0 0 0 35px;}
.p44.ctm-heading-text .ctm-heading-inner:before { content: ""; position: absolute; background: #ED5A70; width: 20px;}
.p44.ctm-heading-text .ctm-heading-inner h6 { color: #fff; margin: 0 0 18px 0; font-size: 14px; line-height: 16px;}
.p44.ctm-heading-text .ctm-heading-inner p{color: #fff; font-size: 12px; line-height: 17px;}
.mob-show{display: none;}
.mob-hide{display: block;}
/*common css*/
/*top section css start here*/
.top-sec-wrap{width: 100%; padding: 222px 0 0 0; overflow: hidden;}
.logo-sec-wrap{width: 100%; padding: 0 0 182px 0;}
.logo-sec-wrap .logo-inner{width: 100%; max-width: 146px; margin: 0 auto; position: relative;}
.logo-sec-wrap .logo-inner:before { content: ""; position: absolute; width: 75px; height: 75px; background-image: url(../assets/images/portfolio/wwt-images/p-44/circle.png); background-repeat: no-repeat; background-size: cover; background-position: center center; right: -233px; top: -124px; cursor: auto; pointer-events: none; }
.color-sec-wrap{width: 100%; padding: 0 0 159px 0; position: relative;}
.color-sec-wrap:after { content: ""; position: absolute; width: 418px; height: 354px; background-image: url(../assets/images/portfolio/wwt-images/p-44/circle-4.png); background-repeat: no-repeat; background-size: contain; background-position: center center; right: -144px; top: 389px; }
.color-sec-wrap .ctm-container{max-width: 810px;}
.color-sec-wrap .color-sec-caption{width: 100%; position: relative;}
.color-sec-wrap .color-sec-caption:before{content: ""; position: absolute; width: 428px; height: 362px; background-image: url(../assets/images/portfolio/wwt-images/p-44/circle2.png); background-repeat: no-repeat; background-size: contain; background-position: center center; right: calc(100% - 8px); top: -190px;}
.color-sec-caption .p44.ctm-heading-text .ctm-heading-inner{ max-width: 364px;}
.color-frame-wrap{width: 100%; padding: 53px 0 98px 0; gap: 53px;}
.color-frame-wrap .frame-wrap-inner{position: relative;}
.frame-wrap-inner span{color: #fff; font-weight: 500; display: inline-block; width: 100%; position: absolute; left: 50%; transform: translateX(-50%); text-align: center;}
.frame-wrap-inner span.color-code{font-size: 10px; line-height: 12px; top: 12px;}
.frame-wrap-inner span.color-name{font-size: 12px; line-height: 14px; bottom: 20px;}
.heading-bodytext-wrap{width: 100%; padding: 0 0 166px 0; gap: 106px; position: relative;}
.heading-bodytext-wrap:before { content: ""; position: absolute; width: 106px; height: 106px; background-image: url(../assets/images/portfolio/wwt-images/p-44/circle3.png); background-repeat: no-repeat; background-size: contain; background-position: center center; left: -256px; top: 85px; }
/*.heading-bodytext-wrap:after { content: ""; position: absolute; width: 418px; height: 354px; background-image: url(../assets/images/portfolio/wwt-images/p-44/circle-4.png); background-repeat: no-repeat; background-size: contain; background-position: center center; left: calc(100% + 272px); top: -92px; }*/
.heading-bodytext-wrap span{display: inline-block; width: 100%;}
.heading-bodytext-wrap .sub-heading{padding: 0 0 8px 0;}
.heading-bodytext-wrap .title-img{padding: 0 0 17px 0;}
.heading-bodytext-wrap .heading-inner{width: 54%;}
.heading-bodytext-wrap .heading-inner .sub-heading img{max-width: 111px;}
.heading-bodytext-wrap .heading-inner .title-img img{max-width: 361px;}
.heading-bodytext-wrap .body-text{width: 46%;}
.heading-bodytext-wrap .body-text .sub-heading img{max-width: 93px;}
.heading-bodytext-wrap .body-text .title-img img{max-width: 197px;}
.web-comonents-wrap{width: 100%; padding: 7px 0 0 0; position: relative;}
.web-comonents-wrap:before{content: ""; position: absolute; width: 177px; height: 462px; background-image: url(../assets/images/portfolio/wwt-images/p-44/circle5.png); background-repeat: no-repeat; background-size: contain; background-position: center center; left: -326px; top: -50px; }
.web-comonents-wrap:after { content: ""; position: absolute; width: 106px; height: 106px; background-image: url(../assets/images/portfolio/wwt-images/p-44/circle6.png); background-repeat: no-repeat; background-size: contain; background-position: center center; right: -351px; bottom: 142px; }
.web-comonents-wrap .web-comonents-caption{width: 100%; max-width: 652px; margin: 0 auto; display: block;}
/*top section css end here*/
/*Home page frame scroll section css start here*/
.homepage-scroll-wrap{width: 100%; padding: 0;}
.scroll-content .ctm-container{max-width: 810px;}
.scroll-content .p44.ctm-heading-text .ctm-heading-inner{max-width: 385px;}
.frame-scroll-main{width: 100%; background-image: url(../assets/images/portfolio/wwt-images/p-44/scroll-sec-bg.png); background-repeat: no-repeat; background-size: cover; background-position: center top; min-height: 637px; margin-top: -12px;}
.frame-scroll-main .frame-scroll-wrap{width: 100%; max-width: 907px; margin: 0 auto; min-height: 637px; position: relative;}
.frame-scroll-wrap:after { content: ""; position: absolute; background-image: url(../assets/images/portfolio/wwt-images/p-44/frame-leptop.png); background-repeat: no-repeat; background-size: contain; background-position: center bottom; width: 100%; left: 0; bottom: 62px; height: 100%; z-index: 2; }
.frame-scroll-wrap .frame-scroll-inner { width: 704px; height: 460px; background: transparent; border-radius: 15px 15px 0 0; position: relative; margin: 0 auto; top: 50px; left: 2px; overflow-y: scroll; z-index: 9; scrollbar-width: none;}
.frame-scroll-wrap .frame-scroll-inner::-webkit-scrollbar { width: 0; height: 0; display: none;}
.frame-scroll-wrap .frame-scroll-inner::-webkit-scrollbar-track { background-clip: content-box; border: 2px solid transparent; }
.frame-scroll-wrap .frame-scroll-inner::-webkit-scrollbar-thumb { background-color: transparent; }
.scroll-content-sec { background-color: #191819; padding: 27px 0 30px 0; text-align: center; width: 100%; margin-top: -45px; margin-bottom: 121px;}
.scroll-content-sec p{font-size: 12px; line-height: 17px; color: #fff; text-align: center; margin: 0;}
/*Home page frame scroll section css end here*/
/*bar menu section css start here*/
.bar-menu-wrap{width: 100%; padding: 50px 0 190px 0; background-image: url(../assets/images/portfolio/wwt-images/p-44/bar-menu-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center top;}
.bar-menu-wrap .ctm-container{ max-width: 810px;}
.p44.ctm-heading-text .ctm-heading-inner {margin-left: auto;}
.bar-menu-wrap .p44.ctm-heading-text .ctm-heading-inner{max-width: 370px;}
.bar-menu-wrap .bar-menu-caption-frame { width: 100%; max-width: 877px; margin: 0 auto; display: block; padding-top: 43px; position: relative;}
.bar-menu-wrap .bar-menu-caption-frame:after { content: ""; position: absolute; width: 130px; height: 130px; background-image: url(../assets/images/portfolio/wwt-images/p-44/circle7.png); background-repeat: no-repeat; background-size: contain; background-position: center center; right: -154px; top: -16px; }
/*.bar-menu-wrap .bar-menu-caption-frame-mob {display: none;}*/
/*bar menu section css end here*/
/*calender section css start here*/
.calender-wrap {width: 100%; padding: 0 0 144px 0; margin-top: -15px; background-image: url(../assets/images/portfolio/wwt-images/p-44/calender.png); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.calender-wrap .ctm-container{max-width: 810px;}
.calender-wrap .calender-img-wrap{width: 100%; max-width: 814px; margin: 0 auto; display: block; padding-top: 67px;}
.calender-wrap .p44.ctm-heading-text .ctm-heading-inner{max-width: 370px;}
/*calender section css end here*/
/*mobile view section css start here*/
.mobview-wrap{width: 100%; padding: 0; margin-top: -10px;}
.mobview-wrap .ctm-container{max-width: 810px;}
.mobview-caption{position: relative; overflow: hidden; background-image: url(../assets/images/portfolio/wwt-images/p-44/mobview-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 65px 0 0 0; margin-top: -65px; z-index: -1;}
.mobview-caption:before { content: ""; position: absolute; left: -20px; top: 58%; transform: translateY(50%); width: 27.4%; height: 5px; background-image: url(../assets/images/portfolio/wwt-images/p-44/left-mobview.png); background-repeat: no-repeat; background-size: cover; background-position: right center; }
.mobview-caption:after{content: ""; position: absolute; right: -20px; top: 58%; transform: translateY(50%); width: 27.4%; height: 5px; background-image: url(../assets/images/portfolio/wwt-images/p-44/right-mobview.png); background-repeat: no-repeat; background-size: cover; background-position: left center; }
.mobview-caption .mobview-img{width: 100%; max-width: 792px; margin: 0 auto; display: block; padding-top: 35px;}
.mobview-wrap .p44.ctm-heading-text .ctm-heading-inner{max-width: 370px;}
/*mobile view section css end here*/
/*website page section css start here*/
.websitepage-wrap{width: 100%; padding: 144px 0 0 0; background-image: url(../assets/images/portfolio/wwt-images/p-44/website-pages-bg.png); background-repeat: no-repeat; background-size: cover; background-position: right top; overflow: hidden; position: relative}
.websitepage-wrap:before { content: ""; position: absolute; width: 200px; height: 200px; background-image: url(../assets/images/portfolio/wwt-images/p-44/circle9.png); background-repeat: no-repeat; background-size: contain; background-position: center center; left: 228px; top: 81px; }
.websitepage-wrap:after { content: ""; position: absolute; width: 435px; height: 413px; background-image: url(../assets/images/portfolio/wwt-images/p-44/circle8.png); background-repeat: no-repeat; background-size: contain; background-position: center center; right: 69px; top: 38px; }
.websitepage-wrap .ctm-container{max-width: 810px;}
.websitepage-wrap .p44.ctm-heading-text .ctm-heading-inner{max-width: 370px;}
.websitepage-wrap .websitepage-caption{width: 100%; padding: 0 105px; position: relative; height: 1130px;}
.websitepage-wrap .websitepage-caption:after { content: ""; position: absolute; width: 100%; height: 100%; background: linear-gradient(180deg, #1e1d1e12 20%, rgb(30 29 30 / 99%) 85%); left: 0; top: 0; }
.websitepage-wrap .websitepage-caption img{height: 100%; object-position: top; object-fit: contain; margin-top: -22px;}
.thankyou-soleil{width: 100%; background: #1E1D1E; margin-top: -152px; position: relative; text-align: center; padding: 0 0 15px 0;}
.thankyou-soleil .f-logo{width: auto; display: inline-block; margin-bottom: 28px;}
.thankyou-soleil .f-logo img{max-width: 110px;}
.thankyou-shape { position: relative; color: #fff; text-align: center; }
.thankyou-shape:before { content: ''; background: url(../assets/images/portfolio/wwt-images/p-44/highlight-left-bg.svg) no-repeat; background-size: 100%; background-position: left bottom; flex-grow: 1; height: .833vw; }
.thankyou-shape:after { content: ''; background: url(../assets/images/portfolio/wwt-images/p-44/highlight-right-bg.svg) no-repeat; background-size: 100%; background-position: left bottom; flex-grow: 1; height: .833vw; }
.thankyou-shape .title-shape { background: url(../assets/images/portfolio/wwt-images/p-44/gallery-shape-box.svg) no-repeat; background-size: contain; background-position: center top; width: 19.688vw; height: 4.063vw;}
.thankyou-shape .title-shape h5 { font-size: .729vw; padding: 1.458vw 0; font-weight: 400; margin: 0; letter-spacing: 3.5px;}
.visit-site{padding-top: 6px;}
.visit-site p{font-size: 16px; line-height: 16px; color:#fff; margin: 0 0 11px 0;}
.visit-site .visit-website{gap: 14px; margin-bottom: 40px;}
.visit-site .visit-website a{font-size: 16px; line-height: 16px; color:#fff; margin: 0; text-decoration: none; transition: all .2s ease-in-out;}
.visit-site .visit-website a:hover{color: #ffffffbd;}
.visit-site .visit-website svg{width: 22px;}
.visit-site .visit-website svg path{stroke: #fff;}
/*website page section css end here*/
/*responsive start here*/
@media only screen and (max-width: 1800px) {
.mobview-caption:before{width: 22%;}
.mobview-caption:after{width: 22%;}
}
@media only screen and (max-width: 1680px) {
.mobview-caption:before{width: 20%;}
.mobview-caption:after{width: 20%;}
.websitepage-wrap:before{left: 150px;}
.websitepage-wrap:after{right: 0; width:335px; height: 320px; }
}
@media only screen and (max-width: 1439px) {
.mobview-caption:before{width: 18.5%;}
.mobview-caption:after{width: 18.5%;}
.websitepage-wrap .websitepage-caption:after{top: -40px;}
.websitepage-wrap:before { left: 150px; width: 180px; height: 180px; top: 90px; }
.websitepage-wrap:after { right: 0; width: 325px; height: 310px; }
}
@media only screen and (max-width: 1360px) {
.mobview-caption:before{width: 16.5%;}
.mobview-caption:after{width: 16.5%;}
.websitepage-wrap:before{left: 90px;}
.websitepage-wrap:after { right: 0; width: 300px; height: 283px; top: 50px; }
.color-sec-wrap:after {width: 338px; }
.color-sec-wrap .color-sec-caption:before{right: calc(100% - 148px);}
}
@media only screen and (max-width: 1280px) {
.websitepage-wrap .websitepage-caption{padding: 0 50px;}
.mobview-caption:before{width: 14%;}
.mobview-caption:after{width: 14%;}
}
@media only screen and (max-width: 1199px) {
.mobview-caption:before{width: 12%;}
.mobview-caption:after{width: 12%;}
.thankyou-shape .title-shape h5{padding: 1.5vw 0;}
}
@media only screen and (max-width: 1100px) {
.top-sec-wrap{padding: 125px 0 0 0;}
.logo-sec-wrap{padding: 0 0 125px 0;}
.color-frame-wrap{padding: 46px 0 70px 0;}
.color-frame-wrap{gap: 44px;}
.web-comonents-wrap{padding: 23px 0 0 0;}
.heading-bodytext-wrap{padding: 0 0 102px 0; gap: 87px;}
.color-sec-wrap{padding: 0 0 131px 0;}
.frame-scroll-main{min-height:430px; background-position: center bottom;}
.frame-scroll-main .frame-scroll-wrap{max-width: 580px; min-height:346px;}
.frame-scroll-wrap:after { bottom: -38px; }
.frame-scroll-wrap .frame-scroll-inner { width: 449px; height: 293px; border-radius: 10px 10px 0 0; top: 48px; }
.scroll-content-sec{margin-top: -30px; padding: 16px 0 17px 0; margin-bottom: 102px;}
.bar-menu-wrap{padding: 0 0 85px 0;}
.bar-menu-wrap .bar-menu-caption-frame{max-width: 592px;}
.calender-wrap { margin-top: -10px; padding: 0 0 100px 0; background-size: 1380px; background-position: bottom center; }
.calender-wrap .calender-img-wrap{max-width: 592px; padding-top: 78px;}
.mobview-wrap{margin-top: 0; padding-bottom: 69px;}
.mobview-caption .mobview-img{max-width: 530px;}
.mobview-caption:before{width: 22%;}
.mobview-caption:after{width: 22%;}
.websitepage-wrap .websitepage-caption:after{top: 0px;}
.websitepage-wrap{padding:0; background-position: right -130px top; margin-top: 40px;}
.websitepage-wrap .websitepage-caption{padding: 35px 0 0 0; height: auto;}
.websitepage-wrap .websitepage-caption img{object-fit: contain; margin-top: 0;}
.thankyou-soleil{background: linear-gradient(180deg, #1e1d1e0f -10%, #1e1d1e 70%);}
.thankyou-soleil .f-logo{margin-bottom: 18px;}
.thankyou-soleil .f-logo img{max-width: 73px;}
.thankyou-shape .title-shape h5{letter-spacing: 2px; padding: 1.68vw 0;}
.thankyou-shape .title-shape { width: 20.688vw; height: 4.3vw; }
.bar-menu-wrap .bar-menu-caption-frame{padding-top: 26px;}
.mobview-caption .mobview-img{padding-top: 20px;}
.visit-site{padding-top: 1px;}
.visit-site p{font-size: 14px; line-height: 14px; margin: 0 0 6px 0;}
.visit-site .visit-website{margin-bottom: 25px;}
.visit-site .visit-website a{font-size: 14px; line-height: 14px;}
.color-sec-wrap .color-sec-caption:before { right: calc(100% - 231px); top: -125px; }
.logo-sec-wrap .logo-inner:before { right: -241px; top: -58px; z-index: -1;}
.web-comonents-wrap:after { right: -3px; bottom: -130px; }
.web-comonents-wrap:before { left: 10px; top: -105px; }
.bar-menu-wrap .bar-menu-caption-frame:after{content: inherit;}
.websitepage-wrap:after { left: auto; top: 5px; right: -40px; width: 166px; height: 151px; background-image: url(../assets/images/portfolio/wwt-images/p-44/circle-mobile.png); }
.websitepage-wrap:before, .color-sec-wrap:after{content: inherit;}
}
@media only screen and (max-width: 991px) {
.mobview-caption:before{width: 20%;}
.mobview-caption:after{width: 20%;}
}
@media only screen and (max-width: 850px) {
.color-sec-wrap .ctm-container, .scroll-content .ctm-container, .bar-menu-wrap .ctm-container, .calender-wrap .ctm-container, .mobview-wrap .ctm-container, .websitepage-wrap .ctm-container{max-width: 92%;}
.mobview-caption:before{width: 15%;}
.mobview-caption:after{width: 15%;}
.frame-wrap-inner span.color-name{bottom: 16px;}
.frame-wrap-inner span.color-code{top: 11px;}
.web-comonents-wrap:before { left: -25px; top: -105px; z-index: -1; }
}
@media only screen and (max-width: 800px) {
.web-comonents-wrap:before { left: -45px;}
}
@media only screen and (max-width: 767px) {
.color-frame-wrap{max-width: 545px; margin: 0 auto; gap: 24px;}
.frame-wrap-inner span.color-name{bottom: 12px;}
.frame-wrap-inner span.color-code{top: 8px;}
.mobview-caption:before{width: 8%;}
.mobview-caption:after{width: 8%;}
}
@media only screen and (max-width: 600px) {
.color-sec-wrap .ctm-container, .scroll-content .ctm-container, .bar-menu-wrap .ctm-container, .calender-wrap .ctm-container, .mobview-wrap .ctm-container, .websitepage-wrap .ctm-container{max-width: 88%;}
.color-frame-wrap{max-width: 420px; gap: 15px;}
.frame-wrap-inner span.color-name{font-size: 10px; line-height: 12px; bottom: 10px;}
.frame-wrap-inner span.color-code{font-size: 8px; line-height: 10px; top: 6px;}
.scroll-content-sec{margin-top: -18px;}
.frame-scroll-main{min-height: 286px;}
.frame-scroll-main .frame-scroll-wrap{max-width: 410px; min-height: 216px;}
.frame-scroll-wrap .frame-scroll-inner { width: 281px; height: 181px; border-radius: 8px 8px 0 0; top: 45px; }
.bar-menu-wrap .bar-menu-caption-frame, .calender-wrap .calender-img-wrap, .mobview-caption .mobview-img{max-width: 88%;}
.web-comonents-wrap:before { left: -88px;}
}
@media only screen and (max-width: 575px) {
.web-comonents-wrap:before { left: -105px;}
}
@media only screen and (max-width: 479px) {
.mob-show{display: block;}
.mob-hide{display: none;}
.top-sec-wrap{padding: 70px 0 0 0;}
.logo-sec-wrap{padding: 0 0 64px 0;}
.logo-sec-wrap .logo-inner{max-width: 131px;}
.color-frame-wrap{padding: 20px 0 40px 0; flex-wrap: wrap; row-gap:20px; column-gap:40px; max-width: 370px;}
.color-frame-wrap .frame-wrap-inner{width: calc(100% / 2 - 20px);}
.frame-wrap-inner span.color-name{font-size: 9px; line-height: 11px; bottom: 22px;}
.frame-wrap-inner span.color-code{font-size: 7px; line-height: 9px; top: 14px;}
.heading-bodytext-wrap{gap: 35px; flex-wrap: wrap; padding: 0 0 40px 0;}
.heading-bodytext-wrap .heading-inner .title-img img{max-width: 88%;}
.heading-bodytext-wrap .heading-inner, .heading-bodytext-wrap .body-text{width: 100%;}
.heading-bodytext-wrap .sub-heading{padding: 0 0 5px 0;}
.p44.ctm-heading-text .ctm-heading-inner{margin-left: 0;}
.web-comonents-wrap{padding: 20px 0 0 0;}
.color-sec-wrap{padding: 0 0 40px 0;}
.homepage-scroll-wrap{overflow-x: hidden;}
.frame-scroll-wrap:after { background-size: contain; width: calc(100% + 50px); left: -25px; }
.frame-scroll-main .frame-scroll-wrap{min-height: 220px;}
.frame-scroll-main{min-height: 287px;}
.frame-scroll-wrap .frame-scroll-inner { width: 286px; height: 185px; border-radius: 5px 5px 0 0; }
.scroll-content-sec{padding: 10px 0; margin-bottom: 40px;}
.scroll-content-sec p{font-size: 7px; line-height: 10px;}
.bar-menu-wrap{background-size:500px; background-position: center center; padding: 0 0 30px 0;}
.bar-menu-wrap .bar-menu-caption-frame{padding-top: 10px;}
.calender-wrap .calender-img-wrap{padding-top: 21px;}
.calender-wrap { background-size: 700px; padding: 0 0 10px 0; background-position: bottom 118px center; }
.mobview-caption{background-size: 440px;}
.mobview-caption:before, .mobview-caption:after{content: inherit !important;}
.mobview-caption .mobview-img {max-width: 100%; overflow: hidden;}
.mobview-caption .mobview-img img { width: calc(100% + 40px); margin-left: -20px; }
.mobview-wrap{padding-bottom: 40px;}
.websitepage-wrap{margin-top: 0;}
.websitepage-wrap .websitepage-caption{padding: 20px 0 0 0;}
.thankyou-soleil .f-logo{margin-bottom: 12px; display: inline-block;}
.thankyou-soleil{padding: 0 0 4px 0;}
.thankyou-shape .title-shape h5 { letter-spacing: 1px; padding: 2.15vw 0; font-size: 2vw; }
.thankyou-shape .title-shape { width: 32.5vw; height: 100%; }
.websitepage-wrap .websitepage-caption:after{content: inherit;}
.visit-site{padding-top: 0px;}
.visit-site p{font-size: 10px; line-height: 10px; margin: 0 0 4px 0;}
.visit-site .visit-website{gap: 10px; margin-bottom: 10px;}
.visit-site .visit-website a{font-size: 10px; line-height: 10px;}
.logo-sec-wrap .logo-inner:before, .color-sec-wrap .color-sec-caption:before, .heading-bodytext-wrap:after, .heading-bodytext-wrap:before, .web-comonents-wrap:before, .web-comonents-wrap:after, .websitepage-wrap:before, .websitepage-wrap:after{content: inherit;}
}
@media only screen and (max-width: 420px) {
.color-frame-wrap{max-width: 320px;}
.frame-wrap-inner span.color-name{bottom: 18px;}
.frame-wrap-inner span.color-code{top: 12px;}
}
@media only screen and (max-width: 359px) {
.color-frame-wrap{max-width: 282px;}
.frame-wrap-inner span.color-name{bottom: 14px;}
.frame-wrap-inner span.color-code{top: 10px;}
.thankyou-shape .title-shape { width: 33.5vw;}
}
/*responsive end here*/