html, body {
-webkit-font-smoothing: antialiased !important;
scroll-behavior: unset !important;
overscroll-behavior-y: none !important;
margin: unset;
position: relative;
font-family: Jost;
color: var(--stale-blue);
letter-spacing: -0.5px;
}
body{
overscroll-behavior-y: contain;
}
body.ns{
overflow: hidden;
}
:root{
--black: #333333E5;
--black-2: #333f50;
/*--black: #454545;*/
--progress: 0;
--black-gray: #121212;
--gray: #cdcdcd;
--gray-2: #EBEDF1;
--gray-3: #777;
--gray-4: #B5B5B5;
--gray-5: #808080;
--gray-bold: #D9D9D9;
--pink: #DF7C9B;
--pink-2: #FA93B3;
--pink-3: #FFCCDD;
--pink-pastel: #EBADC1;
--blue-2: #44536A;
--red: #B52C56;
--white-50: #FFFFFF80;
--stale-blue: #445471;
--light-gray: #d9d9d9;
--font-xxs: 10px;
--font-xs: 13px;
--font-s: 15px;
--font-xxm: 18px;
--font-xm: 21px;
--font-m: 24px;
--font-l: 28px;
--font-xl: 32px;
--font-xxl: 44px;
--font-xxxl: 55px;
--gap: 10%;
}
@font-face {
font-family: 'CenturyGothic';
src: url('../font/centurygothic.woff2') format('woff2'), url('../font/centurygothic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'CenturyGothic';
src: url('../font/centurygothic_bold.woff2') format('woff2'), url('../font/centurygothic_bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Jost';
src: url('../font/Jost-VariableFont_wght.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Jost';
src: url('../font/Jost-VariableFont_wght.woff2') format('woff2');
font-weight: bold;
font-style: normal;
}
.container{
max-width: 2000px;
margin: auto;
}
body{
&:before{
content: "";
position: absolute;
z-index: 4;
top: 0vh;
width: 100%;
height: 160px;
background: linear-gradient(to bottom, #000000b3 0%, #69626200 100%);
/*background: linear-gradient(to bottom, #3d3d3db3 0%, #69626200 100%);*/
/*background: linear-gradient(to bottom, #777777b3 0%, #ffffff00 100%);*/
}
&.no_homepage{
&:before{
top: -100vh;
}
}
&.no_head{
&:before{
content: unset;
}
}
&.no_before{
&:before{
content: unset;
}
.menu-lang{
/*color: var(--black);*/
}
}
}
header{
position: absolute;
z-index: 30;
top: -100vh;
width: 100%;
overflow: hidden;
/*background: linear-gradient(to bottom, #000000b3 0%, #69626200 100%);*/
.content {
padding: 50px var(--gap) 0px;
display: flex;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
/*justify-content: space-between;*/
img{
width: 65px;
/*height: 66px;*/
position: relative;
left: 7px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.select-items{
top: calc(100% - 2px);
div{
height: 30px;
padding: 6px 8px;
}
}
div{
flex: 1;
ul{
display: flex;
float: right;
/*gap: 23px;*/
list-style: none;
border: 1px solid #FFFFFF40;
background: #D9D9D940;
padding: 8px 30px 10px;
backdrop-filter: blur(4px);
border-radius: 50px;
li{
color: white;
font-family: CenturyGothic;
/*font-weight: bold;*/
font-size: var(--font-s);
line-height: 100%;
text-align: right;
cursor: pointer;
margin-right: 23px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
a{
color: white;
/*color: var(--black-2);*/
text-decoration: unset;
padding-left: 2px;
padding-right: 0px;
&:hover{
color: var(--pink);
/*font-weight: bold;*/
/*font-size: calc(var(--font-xs));*/
/*padding-left: 0px;*/
/*padding-right: 0px;*/
}
}
&:nth-last-child(2),&:last-child{
margin-right: unset;
}
}
.hide-menu{
width: 0px;
opacity: 0;
margin-right: unset;
}
.menu-lang{
.select-selected{
min-width: 10px !important;
text-transform: capitalize;
padding: unset;
&:after{
display: none;
}
}
.select-items{
div{
width: 17px;
}
}
&:hover{
.select-items{
display: block;
}
}
display: flex;
gap: 10px;
span{
opacity: 0.7;
&:hover{
color: var(--pink);
}
&.active{
opacity: 1;
cursor: default;
&:hover{
color: inherit;
}
}
}
}
&.no-bg{
padding: 7px 16px;
margin-left: 10px;
}
}
}
&.head_v2{
ul{
/*background: rgb(0 0 0 / 50%);*/
/*filter: drop-shadow(1px 1px 2px #000000cc);*/
border-width: 0px;
padding: 7px 24px;
height: auto;
align-items: center;
li{
font-size: var(--font-xs);
text-transform: capitalize;
}
}
form{
.select-selected{
/*background: rgb(0 0 0 / 80%);*/
/*filter: drop-shadow(1px 1px 2px #000000cc);*/
border-width: 0px;
font-size: var(--font-xxs);
text-transform: capitalize;
&:after{
border: 4px solid transparent;
border-color: #fff transparent transparent transparent;
top: 12px !important;
}
&.select-arrow-active{
border-radius: 15px 15px 0px 0px;
}
}
}
.select-items{
font-size: var(--font-xxs);
text-transform: capitalize;
padding: unset;
gap: 0;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
overflow: hidden;
top: calc(100% - 0px);
div{
background: rgb(0 0 0 / 35%);
/*background: rgb(68,84, 113 / 35%);*/
/*filter: drop-shadow(1px 1px 2px #000000cc);*/
border-color: #FFFFFF40;
font-size: var(--font-xxs);
text-transform: capitalize;
border-width: 0px;
border-radius: unset;
padding-left: 10px;
&:nth-child(1){
padding-top: 10px;
}
&:last-child{
padding-bottom: 10px;
}
}
}
.no-bg{
background: unset;
backdrop-filter: unset;
}
.menu-lang{
.custom-select{
border: none;
background: unset;
}
.form-label{
span{
opacity: 0.7;
margin-right: 8px;
}
}
.select-items{
left: -19px;
padding-top: 16px;
div{
width: 90%;
text-align: right;
background: unset;
}
}
.select-selected{
font-size: var(--font-xxs);
/*display: none;*/
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}
}
}
&.noh{
top: 0;
}
&.header_black{
.content {
div {
ul {
li {
a {
color: var(--black-2);
}
}
}
}
}
}
&.header-light{
ul{
li{
/*color: var(--black) !important;*/
a{
/*color: var(--black) !important;*/
}
}
}
}
&.header-dark{
/*position: relative;*/
top: 0;
ul{
li{
/*color: black !important;*/
a{
/*color: black !important;*/
}
}
}
}
&.sticky{
top: 0px;
position: fixed;
img{
/*opacity: 0;*/
}
& .content {
padding: 20px 3% 20px;
& div {
ul{
li.menu{
width: 0px;
opacity: 0;
margin-right: unset;
a{
display: none;
}
}
li.hide-menu{
width: unset;
opacity: 1;
/*margin-right: 23px;*/
}
}
}
}
}
&.active{
z-index: 999;
img{
/*opacity: 1;*/
}
& .content {
& div {
ul{
li.menu{
width: unset;
opacity: 1;
margin-right: 23px;
a{
display: block;
}
}
/*li.hide-menu{
width: 0px;
opacity: 0;
margin-right: unset;
a{
display: none;
}
}*/
}
}
}
}
&.h_wht{
.menu-lang{
color: var(--black);
}
.head_v2 {
ul.l_menu{
background: rgb(0 0 0 / 65%) !important;
}
}
}
#headerMobile{
position: absolute;
top: 0;
right: -100vw;
background: linear-gradient(to bottom, #212121b5 0%, #000000 100%);
width: calc(100% - (2 * var(--gap)) + 1px);
max-width: 400px;
height: calc(100vh - 40px);
transition: all 0.5s ease-in-out;
display: flex;
flex-direction: column;
padding: 20px var(--gap);
&.active{
right: -1px;
}
.headmbl{
display: flex;
justify-content: flex-end;
margin-bottom: 30px;
ul{
list-style: none;
padding-left: unset;
}
.logo{
flex: 1;
img{
width: 65px;
}
}
.close{
a{
background: rgb(0 0 0 / 35%);
border-width: 0px;
padding: 3px 26px;
border-radius: 25px;
align-items: center;
color: white;
font-size: 14px;
}
}
.no-bg{
span{
padding: 7px 16px;
margin-left: 3px;
padding-right: 0px;
color: white;
}
}
}
button{
height: 40px;
border: unset;
background: transparent;
width: 40px;
padding: unset;
margin-left: -10px;
svg{
fill: white;
height: 40px;
transform: rotate(180deg);
}
}
h5{
color: white;
font-family: CenturyGothic;
font-weight: 400;
font-size: var(--font-l);
line-height: 33px;
margin: 25px 0px;
margin-top: unset;
}
ul.l_menu{
margin: unset;
padding-left: 15px;
color: white;
flex: 1;
li{
margin-bottom: 10px;
padding-left: 10px;
a,span{
color: white;
font-family: CenturyGothic;
font-weight: 400;
font-size: var(--font-m);
line-height: calc(var(--font-m) + 8px);
text-decoration: unset;
}
}
&.no-bg{
list-style-type: none;
padding-left: 0;
li{
padding-left: unset;
display: flex;
gap: 20px;
span{
color: var(--gray-5);
&.active{
color: white;
}
}
}
}
}
}
}
a.follower{
display: flex;
justify-content: center;
align-items: center;
position: fixed;
height: 100px;
width: 100px;
z-index: 4;
transform: translate(10px, 10px);
/*background: rgb(0 0 0 / 75%);*/
background: rgb(0 0 0 / 35%);
border-radius: 50px;
text-decoration: unset;
transition: opacity 0.5s ease-in-out;
opacity: 1;
/*animation: spin-slow 5s linear infinite;*/
p{
flex: 0 0 55px;
font-family: CenturyGothic;
font-size: var(--font-xxs);
color: white;
}
svg{
fill: var(--pink);
transform: rotate(45deg);
width: 12px;
margin-left: 2px;
}
&.cta_project{
/*background: rgb(0 0 0 / 75%);*/
svg{
transform: rotate(0deg);
}
}
&.leave{
opacity: 0;
}
}
section.vid-background{
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
overflow: hidden;
z-index: 1;
video{
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
}
.background-video{
width: 100vw;
bottom: 0;
height: 50vh;
position: absolute;
/*background: #696262;*/
background: linear-gradient(to bottom, #69626226 0%, #696262 100%);
opacity: 0.2;
z-index: 1;
height: 100vh;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.4) 100%);
}
.content{
position: relative;
width: calc(80%);
height: calc(90vh - 310px);
z-index: 2;
padding: 260px var(--gap) 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
.top{
position: relative;
flex: 1;
display: flex;
align-items: flex-end;
padding-bottom: 40px;
z-index: 1;
.h1{
color: white;
font-family: CenturyGothic;
font-weight: 400;
font-size: var(--font-l);
line-height: 33px;
padding-left: 30px;
b{
font-family: CenturyGothic;
/*font-weight: 100;*/
}
span{
opacity: 0;
animation: typing 1s ease forwards
}
&>b span:nth-child(1) {
/*animation: typing 1s ease forwards;*/
animation-delay: 0.2s;
}
&>b span:nth-child(2) {
/*animation: typing 3s ease forwards;*/
animation-delay: 0.5s;
}
&>b span:nth-child(3) {
/*animation: typing 5s ease forwards;*/
animation-delay: 1s;
}
&>span:nth-child(3) {
/*animation: typing 8s ease forwards;*/
animation-delay: 1.5s;
}
&>span:nth-child(4) {
/*animation: typing 10s ease forwards;*/
animation-delay: 1.8s;
}
&>span:nth-child(5) {
/*animation: typing 12s ease forwards;*/
animation-delay: 2.1s;
}
}
}
.bottom{
display: flex;
flex-direction: column;
position: relative;
z-index: 3;
.desc{
font-family: Jost;
font-weight: 400;
font-size: var(--font-xxm);
line-height: 31px;
padding-left: 30px;
color: white;
margin-bottom: 32px;
}
.list{
background: #D9D9D940;
/*border: 1px solid #FFFFFF26;*/
backdrop-filter: blur(15px);
border-radius: 50px;
.lists{
display: flex;
justify-content: space-between;
padding: 22px 30px;
h5{
font-family: CenturyGothic;
/*font-weight: 100;*/
font-size: var(--font-xl);
line-height: 100%;
margin: unset;
color: var(--pink);
span{
font-weight: 100;
font-size: var(--font-xm);
position: relative;
top: -5px;
right: -2px;
color: white;
}
}
div{
display: flex;
color: white;
align-items: center;
p{
font-family: Jost;
font-weight: 400;
font-size: var(--font-s);
line-height: 18px;
margin: unset;
margin-left: 15px;
b{
font-family: Jost;
font-weight: 100;
/*font-size: var(--font-xxm);*/
}
}
&.slash{
display: block;
height: auto;
width: 1px;
border-right: 1px solid white;
opacity: 0.3;
margin: 0px 15px;
}
}
}
}
.left,.right{
display: none;
}
}
}
}
.top-black{
header{
.head_v2 {
ul {
background: rgb(0 0 0 / 35%);
}
& form {
.select-selected {
background: rgb(0 0 0 / 35%);
}
}
}
}
section.vid-background{
.content{
.bottom{
.list{
background: rgb(0 0 0 / 35%);
}
}
}
}
}
section{
background: white;
position: relative;
z-index: 3;
.circle-gra{
background: radial-gradient(50% 50% at 50% 50%, rgba(227, 140, 168, 0.3) 0%, rgba(227, 140, 168, 0.167308) 32.21%, rgba(227, 140, 168, 0) 100%);
width: 40vw;
height: auto;
aspect-ratio: 1/1;
position: absolute;
top: 0;
right: 0;
}
.breadcrumb{
display: flex;
gap: 10px;
font-family: Jost;
font-size: var(--font-s);
margin-bottom: 30px;
flex: 0 0 100%;
a{
text-decoration: unset;
color: var(--gray-5);
}
.active{
a{
color: var(--pink);
}
}
svg{
height: 11px;
margin-left: 10px;
position: relative;
bottom: -1px;
}
}
.header{
padding-top: 50px;
&>h5{
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-l);
line-height: 40px;
margin: unset;
margin-bottom: 30px;
padding: 0px var(--gap);
color: var(--black);
margin: unset;
}
&>p{
font-family: Jost;
font-size: var(--font-xm);
line-height: 40px;
margin: unset;
margin-bottom: 30px;
padding: 0px var(--gap);
color: gray;
margin: unset;
margin-top: 10px;
}
}
.header2{
padding: 40px var(--gap) 0px;
display: flex;
flex-wrap: wrap;
gap: 130px;
&>h6,&>h5{
/*font-family: CenturyGothic;*/
font-family: Jost;
letter-spacing: 2px;
font-size: var(--font-xxl);
font-weight: 100;
line-height: 50px;
margin: unset;
color: var(--black);
max-width: 400px;
}
&>p{
font-family: Jost;
font-weight: 100;
font-size: var(--font-xxm);
line-height: 25px;
flex: 0 0 250px;
color: var(--black);
}
}
.header_flex{
padding: 200px var(--gap) 60px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.left{
flex: 0 0 450px;
padding-right: 10%;
&.top{
max-width: 720px;
flex: 0 0 100%;
padding-right: 0%;
}
.tag{
font-family: Jost;
font-size: var(--font-s);
font-weight: bold;
line-height: calc(var(--font-s) + 8px);
padding: 2px 12px;
border: 1px solid var(--black-2);
border-radius: 50px;
color: var(--black-2);
display: inline-block;
margin-bottom: 4px;
}
h5{
font-family: CenturyGothic;
font-weight: Bold;
font-size: var(--font-xxl);
line-height: calc(var(--font-xxl) + 8px);
margin: unset;
color: var(--stale-blue);
margin-bottom: 16px;
span{
color: var(--pink);
}
}
p{
font-family: Jost;
font-weight: 400;
font-size: var(--font-m);
line-height: calc(var(--font-m) + 8px);
margin: unset;
color: var(--black);
}
p:nth-child(2){
margin-bottom: 24px !important;
}
p:nth-child(3),p:nth-child(4),p:nth-child(5){
font-family: Jost;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
}
}
.right{
flex: 0 0 350px;
display: flex;
align-items: flex-end;
p{
font-family: Jost;
font-weight: 400;
font-size: var(--font-xs);
line-height: calc(var(--font-xs) + 8px);
text-align: right;
margin: unset;
color: var(--stale-blue);
text-transform: uppercase;
}
}
}
.footer_flex{
padding: 0px var(--gap) 100px;
div{
width: 100%;
max-width: 720px;
p{
/*width: 80%;*/
font-family: CenturyGothic;
font-weight: 400;
font-size: 24px;
line-height: 32px;
text-align: left;
margin: unset;
color: var(--stale-blue);
}
}
}
}
section.blog-list{
background: var(--gray-2);
&.blog-home{
padding-bottom: 160px;
padding-top: 70px;
.header{
position: relative;
p{
color: var(--black);
}
}
}
.header{
h5{
font-size: var(--font-xxl);
}
button,a{
position: absolute;
right: var(--gap);
top: 80px;
border-color: transparent;
}
}
.blog-header{
padding-top: 50px;
&>h5{
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-l);
line-height: 40px;
margin: unset;
margin-bottom: 30px;
padding: 0px var(--gap);
color: var(--black);
margin: unset;
}
&>p{
font-family: Jost;
font-size: var(--font-l);
line-height: 40px;
margin: unset;
margin-bottom: 30px;
padding: 0px var(--gap);
color: var(--black);
margin: unset;
}
}
.blog-categories{
padding: 25px var(--gap) 0px;
display: flex;
gap: 20px;
a{
text-decoration: unset;
color: var(--black);
font-family: Jost;
}
}
.blog-container{
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
gap: 20px;
padding: 25px var(--gap) 20px;
scrollbar-width: none;
a{
text-decoration: unset;
}
.blog-card {
flex: 0 0 400px;
min-width: 400px;
background: white;
border-radius: 5px;
box-shadow: 2px 2px 10px rgb(69 69 69 / 5%);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
.img-error{
background: var(--gray-bold);
padding: 20px;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
img{
width: 85px;
height: auto;
}
}
img{
width: calc(100%);
height: auto;
aspect-ratio: 16 / 12;
margin: 0px;
margin-bottom: unset;
}
}
.blog-card:hover {
transform: translateY(-5px);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
}
.blog-image {
width: 100%;
height: 180px;
object-fit: cover;
}
.blog-content {
padding: 20px;
h3,p{
margin: unset;
margin-top: 6px;
color: var(--black);
font-size: var(--font-xxm);
}
h3{
font-family: CenturyGothic;
font-weight: 100;
}
span{
font-family: Jost;
color: var(--pink);
font-size: var(--font-s);
}
p{
font-family: Jost;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
}
}
}
.blog-nav{
display: flex;
justify-content: center;
padding-bottom: 80px;
gap: 20px;
display: none;
button{
background: white;
border: none;
width: 40px;
height: 40px;
cursor: pointer;
}
}
&.article-list{
background: white;
.blog-container{
display: grid;
/*overflow-x: auto;*/
grid-template-columns: repeat(auto-fill, calc(25% - 15px));
justify-content: space-between;
gap: 15px;
.blog-card{
/*flex: 0 0 calc(50% - 15px);
min-width: calc(50% - 15px);
margin-bottom: 15px;
border-radius: 10px;
border: 0.5px solid #0000001a;*/
flex: 0 0 calc(25% - 15px);
min-width: calc(25% - 15px);
box-shadow: unset;
padding-bottom: 50px;
.blog-content{
/*padding-left: 24px;*/
.blog-category{
margin-bottom: 10px;
}
}
a{
display: flex;
flex-direction: column;
/*padding: 16px;*/
}
img{
/*border-radius: 25px;*/
width: 100%;
/*border-radius: 10px;*/
aspect-ratio: 6/8;
transition: all 0.3s ease;
}
span{
display: flex;
/*justify-content: space-between;*/
small{
flex: 50%;
font-size: var(--font-xs);
color: #00000099;
&:nth-child(1){
/*background: #bfbfbf2b;*/
/*padding: 6px 12px;*/
border-radius: 5px;
/*height: 20px;*/
font-size: var(--font-s);
margin-right: 8px;
}
&:nth-child(2){
text-align: right;
}
}
}
p{
margin-top: 8px;
font-size: var(--font-xs);
color: #00000099;
}
div{
display: flex;
flex-direction: column;
padding: unset;
background: #ffffff;
position: relative;
h3{
flex: 1;
font-weight: 400;
font-size: var(--font-l);
margin-top: unset;
}
/*height: calc(100% + 4px);
margin-top: -4px;*/
}
&:hover{
transform: unset;
box-shadow: unset;
/*background: #f2f5f1;*/
div{
}
img{
transform: scale(1.2);
}
}
}
.item-1 {
grid-row: span 1;
img{
aspect-ratio: 6/4;
}
}
.item-2 {
grid-row: span 2;
img{
aspect-ratio: 6 / 12;
}
}
.item-3 {
grid-row: span 3;
img{
aspect-ratio: 6 / 12;
}
}
}
}
&.article-list2{
background: white;
padding-bottom: 100px;
.blog-container{
display: flex;
overflow-x: auto;
flex-wrap: wrap;
justify-content: space-between;
gap: 15px;
.blog-card{
flex: 0 0 calc(50% - 15px);
min-width: calc(50% - 15px);
margin-bottom: 15px;
border-radius: 10px;
border: 0.5px solid #0000001a;
background: white;
box-shadow: 2px 2px 10px rgb(69 69 69 / 5%);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
.blog-content{
padding-left: 24px;
flex: 0 0 calc(60% - 24px);
aspect-ratio: unset;
height: auto;
display: flex;
flex-direction: column;
.blog-category{
margin: 10px 0px;
small{
background: transparent;
padding-left: unset;
color: var(--pink);
}
}
h3{
font-size: var(--font-xm);
color: var(--stale-blue);
font-weight: bold;
}
p{
flex: 1;
display: flex;
align-items: flex-end;
font-size: var(--font-s);
}
}
.img-error{
border-radius: 10px;
img{
width: 50px;
border-radius: unset;
aspect-ratio: unset;
}
}
a{
display: flex;
padding: 16px;
&>div{
height: 100%;
aspect-ratio: 6 / 8;
flex: 0 0 40%;
padding: unset;
max-height: 275px;
}
}
img{
width: calc(100%);
border-radius: 10px;
aspect-ratio: 6 / 8;
max-height: 275px;
transition: all 0.3s ease;
}
span{
display: flex;
align-items: center;
/*justify-content: space-between;*/
small{
flex: 50%;
font-size: var(--font-xs);
color: #00000099;
&:nth-child(1){
background: #bfbfbf2b;
padding: 6px 12px;
border-radius: 5px;
height: 20px;
font-size: 14px;
margin-right: 8px;
}
&:nth-child(2){
text-align: right;
}
}
}
p{
margin-top: 8px;
font-size: var(--font-xs);
color: #00000099;
}
&>div{
display: flex;
flex-direction: column;
padding: unset;
/*background: #ffffff;*/
position: relative;
h3{
flex: 1;
font-weight: 400;
font-size: var(--font-l);
margin-top: unset;
}
/*height: calc(100% + 4px);
margin-top: -4px;*/
}
&:hover{
transform: unset;
box-shadow: unset;
background: #f2f5f1;
div{
}
}
}
}
}
}
/* Responsive */
@media (max-width: 1200px) {
section.blog-list{
&.article-list{
.blog-container{
grid-template-columns: repeat(auto-fill, calc(33.33% - 15px));
}
}
}
}
section.seccar{
margin-top: 100vh;
position: relative;
z-index: 3;
background: white;
.top{
padding: 80px var(--gap) 70px;
display: flex;
align-items: center;
justify-content: space-between;
p.h1-carou{
font-family: CenturyGothic;
font-weight: 400;
font-size: var(--font-xm);
line-height: 33px;
margin: unset;
color: var(--black);
b{
font-size: var(--font-l);
line-height: 38px;
color: var(--stale-blue);
}
}
div{
display: flex;
justify-content: center;
align-items: center;
p{
font-family: CenturyGothic;
font-weight: 400;
font-size: var(--font-xl);
line-height: 38px;
margin: unset;
padding-right: 30px;
}
img{
width: 520px;
}
}
}
div.carousel{
}
}
.sec-carou{
/*overflow: hidden;*/
position: relative;
clip-path: inset(0 0 0 0);
z-index: 3;
.carousel-general{
position: relative;
bottom: -60px;
left: 50%;
display: flex;
gap: 20px;
justify-content: center;
z-index: 3;
transform: translateX(-50%);
a{
color: inherit;
text-decoration: unset;
}
h5{
font-family: Jost;
font-size: var(--font-xl);
line-height: 40px;
font-weight: 100;
color: #ffffff9e;
margin: unset;
position: relative;
cursor: pointer;
&:hover{
color: white;
}
}
h5:before{
position: absolute;
top: 0;
left: 0;
clip-path: inset(calc((1 - var(--progress)) * 100%) 0 0 0);
color: rgb(223 124 155);
height: 40px;
width: 100%;
content: attr(data-index);
}
}
}
section.sticky-carou{
/*padding-bottom: 50vh;*/
/*&:has(+ .sticky2) {
padding-bottom: 50vh !important;
}*/
div.sticky-container{
position: relative;
&>img{
position: sticky;
width: 100%;
top: 0;
height: 110vh;
}
.sticky-opacity{
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
/*opacity: 0;*/
}
.sticky-track{
margin: 0px var(--gap);
padding-bottom: 200px;
display: flex;
flex-direction: column;
gap: 50px;
position: relative;
align-items: center;
img{
aspect-ratio: 7 / 4;
width: 100%;
height: auto;
/*width: auto;
height: 100%;
max-width: 100%;
max-height: 80vh;*/
object-fit: cover;
}
}
.carousel-number,.carousel-general{
position: absolute;
bottom: 45px;
left: 50%;
display: flex;
gap: 20px;
justify-content: center;
z-index: 3;
transform: translateX(-50%);
a{
color: inherit;
text-decoration: unset;
}
h5{
font-family: Jost;
font-size: var(--font-xl);
line-height: 40px;
font-weight: 100;
color: #ffffff9e;
margin: unset;
position: relative;
cursor: pointer;
&:hover{
color: white;
}
}
h5:before{
position: absolute;
top: 0;
left: 0;
clip-path: inset(calc((1 - var(--progress)) * 100%) 0 0 0);
color: rgb(223 124 155);
height: 40px;
width: 100%;
content: attr(data-index);
}
}
}
.dark-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
pointer-events: none;
z-index: 21;
transition: background-color 0.3s ease;
}
}
.sec-carou{
position: relative;
.sticky-desc,.sticky-general{
position: absolute;
width: 100%;
top: calc(100vh - 150px);
z-index: 20;
height: 150px;
background: linear-gradient(to bottom, #69626200 0%, #000000b3 100%);
&.sticky{
position: fixed;
}
&.bottom{
position: absolute;
top: unset;
bottom: 0;
}
p {
font-family: Jost;
font-weight: 100;
font-size: var(--font-s);
line-height: 20px;
position: absolute;
bottom: 25px;
left: var(--gap);
color: white;
z-index: 3;
text-transform: uppercase;
b{
font-weight: bold;
font-size: var(--font-m);
font-family: CenturyGothic;
text-transform: capitalize;
}
}
&>a{
font-family: Jost;
position: absolute;
bottom: 58px;
right: var(--gap);
color: white;
z-index: 4;
background: transparent;
border: unset;
font-size: var(--font-s);
display: flex;
gap: 12px;
align-items: center;
cursor: pointer;
text-decoration: unset;
img {
width: 15px;
height: 15px;
}
}
&.desc-top{
/*background: linear-gradient(to bottom, #716b6bb0 00%, #69626200 30%);*/
/*p{
bottom: auto;
top: 100px;
}
a{
bottom: auto;
top: 115px;
}
.carousel-number{
bottom: auto;
top: 110px;
}*/
p{
bottom: 45px;
top: auto;
}
a{
bottom: 75px;
top: auto;
}
.carousel-number{
bottom: 60px;
top: auto;
}
}
}
}
section{
&.sticky_show{
position: relative;
overflow: hidden;
div.bar{
position: absolute;
bottom: 0;
left: 0;
height: 5px;
z-index: 99;
background: var(--pink);
}
&>div{
display: flex;
transition: all 0.5s ease;
.sticky2{
flex: 0 0 100vw;
}
}
.dotted{
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 3;
&>div{
height: 10px;
width: 10px;
border-radius: 50px;
border: 1px solid white;
background: white;
cursor: pointer;
&.active{
border-color: var(--pink);
background: var(--pink);
}
}
}
}
.sticky2{
/*background: transparent;*/
padding-top: 50vh;
.container{
/*padding: 0px 10%; */
transition: all 0.3s ease;
background-color: rgba(0, 0, 0, 0.5);
.content{
/*background: white;*/
background-size: cover;
background-position: center;
min-height: 100vh;
margin-top: -50vh;
position: relative;
--indexes: 0;
&:before{
content: "";
display: block;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
&:after{
content: "";
display: block;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: var(--indexes);
transition: opacity 0.5s ease-in-out;
}
&.active{
&:after{
opacity: 1;
}
}
div{
z-index: 1;
}
.img-1{
/*height: 30vh;*/
left: 15vw;
top: 0;
width: 350px;
transition: all 0.3s ease;
&:hover{
z-index: 9;
/*height: 40vh;*/
left: 10vw;
top: 0;
width: 500px;
}
}
.img-2{
/*height: 50vh;*/
right: 0vw;
top: 10vw;
width: 30vw;
transition: all 0.3s ease;
&:hover{
z-index: 9;
/*height: 60vh;*/
right: 0vw;
top: 8vw;
width: 35vw;
}
}
.img-3{
/*height: 25vw;*/
left: 0;
bottom: 20vh;
width: 35vw;
transition: all 0.3s ease;
&:hover{
z-index: 9;
/*height: 35vw;*/
left: 0;
bottom: 15vh;
width: 40vw;
}
}
.img-4{
/*height: 25vw;*/
left: 5vh;
top: 5vh;
width: 35vw;
transition: all 0.3s ease;
&:hover{
z-index: 9;
/*height: 35vw;*/
left: 0vh;
top: 0vh;
width: 40vw;
}
}
.img-5{
/*height: 30vh;*/
right: 5vw;
bottom: 0;
width: 400px;
transition: all 0.3s ease;
&:hover{
z-index: 9;
/*height: 40vh;*/
right: 0vw;
bottom: 0;
width: 550px;
}
}
.img-6{
/*height: 25vh;*/
right: 10vw;
top: 0vw;
width: 25vw;
transition: all 0.3s ease;
&:hover{
z-index: 9;
/*height: 35vh;*/
right: 5vw;
top: 0vw;
width: 30vw;
}
}
.img-7{
/*height: 20vw;*/
left: 0vh;
bottom: 20vh;
width: 35vw;
transition: all 0.3s ease;
&:hover{
z-index: 9;
/*height: 30vw;*/
left: 0vh;
bottom: 18vh;
width: 40vw;
}
}
.img-8{
/*height: 30vh;*/
right: 10vw;
bottom: 0;
width: 400px;
transition: all 0.3s ease;
&:hover{
z-index: 9;
/*height: 40vh;*/
right: 8vw;
bottom: 0;
width: 550px;
}
}
.img-9{
/*height: 25vh;*/
right: 5vw;
top: 0vw;
width: 35vw;
transition: all 0.3s ease;
&:hover{
z-index: 9;
/*height: 35vh;*/
right: 2vw;
top: 0vw;
width: 40vw;
}
}
/*.img-1,.img-2,.img-3,.img-4,.img-5,.img-6,.img-7,.img-8,.img-9{
&:hover{
transform: scale(1.3);
}
}*/
.desc{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
max-width: 350px;
p {
font-family: Jost;
font-weight: 400;
font-size: var(--font-s);
/*line-height: 56px;*/
color: white;
z-index: 3;
/*text-align: center;*/
margin: unset;
width: auto;
font-family: Jost;
text-transform: uppercase;
b{
font-size: calc(var(--font-xxl) - 5px);
color: var(--pink-2);
font-family: CenturyGothic;
text-transform: capitalize;
margin-bottom: 13px;
display: block;
}
a{
/*display: block !important;*/
text-decoration: unset;
color: inherit;
}
}
/*a{
font-family: Jost;
z-index: 3;
background: transparent;
border: unset;
font-size: var(--font-s);
display: none;
gap: 12px;
align-items: center;
cursor: pointer;
text-decoration: unset;
bottom: -37vh;
border: 1.5px solid white;
border-radius: .208vw;
padding: 1vw 2.083vw;
white-space: nowrap;
margin-top: 20px;
color: white;
img {
width: 15px;
height: 15px;
}
&:hover{
color: var(--pink);
background: white;
}
}*/
}
[class^="img-"]{
position: absolute;
img{
width: 100%;
/*height: 100%;*/
/*object-fit: cover;*/
}
}
}
}
}
}
section.design{
position: relative;
z-index: 3;
padding-top: 83px;
p{
font-family: CenturyGothic;
font-weight: 400;
font-style: Bold;
font-size: var(--font-xl);
line-height: 40px;
margin: unset;
margin-bottom: 30px;
padding: 0px var(--gap);
color: var(--black);
&.right{
text-align: right;
}
&.left{
text-align: left;
}
&.center{
text-align: center;
}
}
img{
width: 100%;
max-height: 800px;
object-fit: cover;
/*position: relative;*/
/*bottom: -4px;*/
}
.fourimage{
display: flex;
img{
aspect-ratio: 3 / 4;
object-fit: cover;
display: block;
filter: grayscale(100%);
&:hover{
filter: grayscale(0%);
}
}
a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background: transparent;
/*mix-blend-mode: soft-light;*/
svg{
fill: white;
color: white;
/*mix-blend-mode: plus-lighter;*/
width: 50px;
height: 50px;
}
}
.img_sosmed{
flex: 0 0 20%;
width: 20%;
position: relative;
cursor: pointer;
&.active{
img{
filter: grayscale(0%);
}
a{
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
.location{
position: absolute;
bottom: 10%;
left: 10%;
p{
color: white;
margin: unset;
padding: unset;
}
p:nth-child(1){
font-family: CenturyGothic;
/*font-weight: 700;*/
font-size: var(--font-xl);
line-height: 32px;
}
p:nth-child(2){
/*font-weight: 700;*/
font-size: var(--font-xl);
line-height: 32px;
text-decoration: underline;
}
}
}
section.design_follow{
.content{
padding: 120px var(--gap) 90px;
display: flex;
flex-direction: column;
h5{
margin: unset;
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-xxl);
color: var(--black);
letter-spacing: -1px;
span,a{
color: var(--pink-2);
text-decoration: unset;
}
}
p{
margin: unset;
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-xm);
color: var(--black);
margin-top: 5px;
}
}
}
section.award{
.content{
display: flex;
padding: 25px var(--gap);
justify-content: space-between;
align-items: center;
}
p{
&.left{
font-family: CenturyGothic;
font-weight: 400;
font-style: Bold;
font-size: var(--font-xxm);
margin: unset;
width: 400px;
color: var(--black);
b{
font-size: var(--font-xm);
color: var(--stale-blue);
line-height: 27px;
}
}
}
.lists{
display: flex;
justify-content: center;
padding: 20px 0px;
gap: 16px;
div{
display: flex;
justify-content: space-between;
align-items: center;
h5{
font-family: CenturyGothic;
font-weight: bold;
font-size: var(--font-xxxl);
line-height: 100%;
margin: unset;
margin-right: 10px;
color: var(--pink);
span{
color: var(--black);
font-weight: 100;
font-size: var(--font-xl);
position: relative;
top: -10px;
right: -3px;
}
}
p{
font-family: CenturyGothic;
font-weight: 400;
font-size: var(--font-s);
line-height: 21px;
margin: unset;
color: var(--black-2);
b{
font-family: Jost;
font-weight: 700;
font-size: var(--font-s);
line-height: 26px;
letter-spacing: 0%;
}
}
&.exp{
p{
font-family: Jost;
font-weight: bold;
margin-left: 12px;
line-height: 21px;
font-size: 18px;
color: var(--black-2);
}
}
&.wrd{
text-align: center;
position: relative;
cursor: pointer;
min-width: 185px;
.p_hover{
/*display: none;*/
line-height: 16px;
b{
font-size: var(--font-xs);
}
}
/*&:hover{
.p_awal{
display: none;
}
.p_hover{
display: block;
}
}*/
.tooltip{
display: none;
box-shadow: 0px 0px 10px 0px #DF7C9B80;
position: absolute;
right: -30px;
width: 170px;
bottom: 60px;
background: hsl(0deg 0% 100% / 50%);
padding: 15px 30px;
border-radius: 10px;
p{
font-family: CenturyGothic;
font-weight: 400;
font-size: var(--font-s);
line-height: 24px;
text-align: center;
color: #D91A57;
span{
color: var(--black-2);
}
}
}
&:hover{
.tooltip{
display: block;
}
}
}
&.flip-card {
cursor: pointer;
position: relative;
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
&:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
box-sizing: border-box;
}
.flip-card-front {
transform: rotateY(0deg);
}
.flip-card-back {
color: white;
transform: rotateY(180deg);
}
}
img{
height: 70px;
}
img.right{
transform: scaleX(-1);
}
}
}
}
section.form{
/*background-image: url('https://ifpvrapnenlzdmhczndj.supabase.co/storage/v1/object/public/site-images/ai-associates.com/assets/slide_4.png');*/
background-size: cover;
&>div:nth-child(1){
background: var(--pink);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.input-form{
position: relative;
display: flex;
padding: 75px var(--gap);
z-index: 2;
&>div{
flex: 0 0 50%;
width: 50%;
}
&>div:nth-child(1){
color: white;
h6{
font-family: CenturyGothic;
font-weight: 400;
font-size: var(--font-xl);
line-height: 46px;
margin: unset;
width: 80%;
}
p{
width: 80%;
font-family: Jost;
font-weight: 400;
font-size: var(--font-s);
line-height: 28px;
}
/*padding-right: 100px;*/
}
&>div:nth-child(2){
form{
display: flex;
flex-direction: column;
}
p{
font-family: CenturyGothic;
font-size: var(--font-xm);
line-height: 26px;
color: white;
margin: unset;
margin-bottom: 12px;
}
input,textarea{
margin-bottom: 20px;
border-radius: 100px;
background: #FFFFFF40;
color: white;
font-size: var(--font-s);
padding: 11px 21px;
border: unset;
&&::placeholder {
color: white;
opacity: 0.6;
}
}
button{
max-width: 180px;
padding: 8px 21px;
border-radius: 50px;
border: unset;
font-family: CenturyGothic;
font-size: var(--font-s);
line-height: 26px;
display: flex;
align-items: center;
gap: 15px;
svg{
height: auto;
width: 18px;
color: rgb(223 124 155);
}
}
}
}
&.cnt-form{
/*&>div:nth-child(1){
background: #00000040;
}*/
button{
justify-content: space-between;
svg {
height: auto;
width: 18px;
color: rgb(223 124 155);
}
}
p.policy{
margin-top: 24px !important;
font-size: var(--font-xs) !important;
line-height: 21px !important;
a{
font-weight: bold;
color: white;
text-decoration: unset;
}
}
}
}
section.form_new{
/*padding-top: 100px;*/
/*padding-top: 0.1px;*/
.container{
/*padding: 0px 0px 0px 10%;*/
background: var(--blue-2);
display: flex;
height: 80vh;
position: relative;
/*overflow: hidden;*/
justify-content: flex-end;
.input-form{
padding-left: var(--gap);
flex: 0 0 60%;
width: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 50px;
position: absolute;
left: 0;
transition: all 0.5s ease-in-out;
height: calc(100% - 130px);
padding-top: 80px;
&>div:nth-child(1){
width: 70%;
overflow: hidden;
max-height: 100vh;
flex: 1;
/*height: 280px;*/
transition: all 0.2s ease-in-out;
h6{
font-family: CenturyGothic;
color: white;
font-size: var(--font-xl);
font-weight: 100;
margin: unset;
b{
font-weight: 600;
}
}
p{
font-family: CenturyGothic;
font-weight: 100;
color: white;
margin: unset;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
margin-top: 20px;
}
}
.navi{
display: flex;
justify-content: space-between;
padding-right: 50px;
padding-top: 20px;
font-family: CenturyGothic;
color: white;
font-weight: 100;
.number{
&>div{
display: flex;
overflow: hidden;
&>div{
height: 20px;
transition: all 0.5s ease-in-out;
padding-left: 2px;
p{
margin: unset;
}
&.step-1{
transform: translateY(0px);
}
&.step-2{
transform: translateY(-21px);
}
&.step-3{
transform: translateY(-42px);
}
&.step-4{
transform: translateY(-63px);
}
}
}
}
.page{
display: flex;
gap: 20px;
div{
cursor: pointer;
}
}
}
form{
position: relative;
flex: 0 0 var(--flex-d);
.group-1,.group-2,.group-3,.group-4{
display: flex;
flex-direction: column;
padding-right: 50px;
padding-top: 40px;
position: absolute;
left: -100vw;
transition: all 0.5s ease-in-out;
bottom: 50px;
width: calc(100% - 70px);
label{
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-xxxl);
color: white;
}
input,textarea{
background: transparent;
border: unset;
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-xxl);
color: white;
outline: unset;
width: calc(100% - 50px);
&::placeholder{
color: #FFFFFF99;
}
}
.simple-phone-input{
display: flex;
select{
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-xxl);
background: transparent;
border: unset;
color: white;
margin-right: 13px;
option{
color: var(--black);
}
}
}
p{
font-family: Jost;
color: white;
font-size: var(--font-xs);
width: 80%;
margin-bottom: unset;
font-style: italic;
}
}
&>p{
position: absolute;
bottom: 0;
font-family: Jost;
color: white;
font-size: var(--font-xs);
opacity: 0.8;
}
button{
border: unset;
background: transparent;
position: absolute;
right: 50px;
bottom: 75px;
svg{
fill: white;
width: 25px;
height: 25px;
transform: rotate(45deg);
}
}
}
.group-1{
&.active{
left: 0px;
}
}
.group-2{
&.active{
left: 0px;
}
}
.group-3{
&.active{
left: 0px;
}
}
.group-4{
&.active{
left: 0px;
textarea{
max-height: 100%;
min-height: 300px;
width: 100%;
}
}
}
&.activeTextare{
&>div:nth-child(1){
p{
max-height: 0;
padding: unset;
overflow: hidden;
}
}
}
}
.bg{
flex: 0 0 40%;
transition: all 0.5s ease-in-out;
overflow: hidden;
margin-top: -100px;
img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 65%;
transform: scale(1);
transition: all 0.5s ease-in-out;
}
&.bg-1{
img{
transform: scale(1.1);
object-position: 50% 75%;
object-fit: cover;
}
}
&.bg-2{
img{
/*transform: translate(20%, 20%) scale(1.8);*/
object-position: 25% 75%;
object-fit: none;
}
}
&.bg-3{
img{
/*transform: translate(-20%, 15%) scale(1.8);*/
object-position: 65% 75%;
object-fit: none;
}
}
&.bg-4,&.bg-5{
img{
/*transform: translate(-20%, -20%) scale(1.8);*/
object-position: 50% 75%;
object-fit: none;
}
}
}
.before_start{
position: absolute;
bottom: 120px;
left: 0px;
width: 100%;
overflow: hidden;
animation: tutup_before 0.5s ease 1 forwards;
animation-delay: 0.5s;
button{
background: transparent;
border: unset;
display: flex;
position: relative;
left: 120%;
padding-bottom: 50px;
padding-left: unset;
transition: all 0.5s ease-in-out;
h6{
font-size: calc( var(--font-xxxl) + 24px );
font-family: CenturyGothic;
font-weight: 100;
color: white;
width: 430px;
text-align: left;
margin: unset;
}
svg{
fill: white;
transform: rotate(0deg);
width: 110px;
height: 80px;
position: relative;
top: 120px;
left: -75px;
}
p{
flex: 0 0 100%;
position: absolute;
color: white;
left: 0px;
bottom: 0px;
text-align: left;
font-family: CenturyGothic;
font-weight: 100;
font-size: 22px;
margin-bottom: unset;
white-space: nowrap;
span{
color: var(--pink);
font-weight: bold;
}
}
}
&>p{
position: absolute;
right: -100vw;
width: 340px;
bottom: 0px;
margin-bottom: unset;
font-family: Jost;
font-size: 18px;
color: white;
transition: all 0.5s ease-in-out;
}
}
&.starter{
overflow: unset;
.input-form{
left: -150vw;
}
.bg{
flex: 0 0 80%;
padding-bottom: 300px;
position: relative;
/*top: -100px;*/
/*margin-top: 0px;*/
}
.before_start{
max-height: 500px;
animation: unset;
button{
left: var(--gap);
}
p{
right: var(--gap);
}
}
}
&:not(.starter){
min-height: 100vh;
}
}
}
/* Desktop-only: shorten the contact "Let's start Talking" starter hero (scoped to .starter so the multi-step form keeps 100vh) */
@media (min-width:993px){
section.form_new .container.starter{height:560px!important;min-height:0!important}
section.form_new .container.starter .bg{padding-bottom:80px!important}
section.form_new .container.starter .before_start{bottom:70px!important}
}
section.cnt-map{
.content{
padding: 0px var(--gap);
}
.tabs {
display: flex;
/*border-bottom: 2px solid #ddd;*/
margin-bottom: 20px;
}
.tab {
padding: 12px 24px;
background: #f5f5f5;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 15px 15px;
margin-right: 5px;
cursor: pointer;
transition: all 0.3s ease;
font-family: Jost;
}
.tab:hover {
background: #e9e9e9;
}
.tab.active {
background: #DF7C9B;
color: white;
border-color: #DF7C9B;
}
.tab-content {
display: none;
border: 1px solid #ddd;
border-top: none;
margin-bottom: 0px;
.detail{
padding: 0px var(--gap) 20px;
h3{
font-family: CenturyGothic;
font-size: var(--font-l);
line-height: 32px;
margin-bottom: 5px;
}
p{
font-family: Jost;
margin: unset;
margin-bottom: 5px;
a{
margin-left: 10px;
}
}
}
iframe{
width: 100%;
height: 50vh;
border: unset;
position: relative;
bottom: -5px;
}
}
.tab-content.active {
display: block;
}
}
section.cnt-list{
margin-top: -20px;
.circle-gra{
left: -40%;
transform: translate(30%,0%);
bottom: 0;
top: auto;
width: 50vw;
}
.content{
padding: 0px var(--gap);
padding-bottom: 200px;
.cntl-header{
h6{
font-family: Century Gothic;
font-weight: 100;
font-size: var(--font-m);
line-height: calc(var(--font-m) + 8px);
color: var(--gray-5);
margin-top: unset;
}
}
.list-cnt{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 40px;
.detail{
flex: 0 0 calc(33.33% - 40px);
max-width: 310px;
/*padding: 0px 10% 20px;*/
text-align: left;
position: relative;
display: flex;
flex-direction: column;
&.active_border{
&::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
z-index: -1;
border: 5px solid var(--pink);
border-radius: 15px;
animation: pulse_border 2s infinite;
}
}
h4{
font-family: CenturyGothic;
font-size: var(--font-xm);
line-height: 32px;
margin-bottom: 25px;
font-weight: 100;
color: var(--blue-2);
font-weight: bold;
margin: unset;
margin-bottom: 4px;
}
h3{
font-family: CenturyGothic;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
margin-bottom: 25px;
font-weight: 100;
color: var(--pink-2);
font-weight: bold;
margin: unset;
margin-bottom: 4px;
}
p{
font-family: Jost;
margin: unset;
font-size: var(--font-s);
line-height: calc(var(--font-s) + 8px);
margin-bottom: 4px;
display: flex;
justify-content: flex-start;
gap: 12px;
color: var(--gray-5);
a{
margin-left: 0px;
/*text-decoration: unset;*/
color: inherit;
display: flex;
gap: 4px;
svg{
width: 15px;
fill: #808080;
}
}
}
p.maps{
font-family: Jost;
margin: unset;
font-size: var(--font-s);
margin-bottom: 8px;
justify-content: space-between;
a{
color: inherit;
text-decoration: unset;
margin-left: unset;
}
}
div.frame{
flex: 1;
display: flex;
align-items: flex-end;
iframe{
width: 100%;
border: unset;
}
}
}
}
}
}
section.section_project_list,section.abt_project{
.project_list{
display: flex;
flex-direction: row;
flex-wrap: wrap;
.pl_p{
flex: 0 0 25%;
width: 25%;
aspect-ratio: 3 / 4;
/*background-size: cover;*/
background-size: auto 120%;
background-position: center;
position: relative;
overflow: hidden;
transition: all 0.5s ease-in-out;
a{
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: block;
}
a.hover{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: var(--pink);*/
/*mix-blend-mode: soft-light;*/
background: #E38CA8B2;
svg{
fill: white;
/*mix-blend-mode: plus-lighter;*/
width: 50px;
height: 50px;
}
}
p{
font-weight: 400;
font-size: 13px;
line-height: 21px;
position: absolute;
top: 80%;
left: 5%;
z-index: 3;
font-family: Jost;
color: var(--pink-2);
text-transform: uppercase;
b{
font-size: 18px;
line-height: 21px;
font-family: CenturyGothic;
font-weight: 100;
color: white;
text-transform: capitalize;
color: var(--gray);
}
span{
font-size: 10px;
position: relative;
bottom: 2px;
}
}
p.desc{
text-align: right;
right: 5%;
left: unset;
width: 230px;
/*bottom: 25px;*/
font-size: var(--font-xs);
line-height: 17px;
}
&:before{
content: "";
width: 100%;
height: 50%;
position: absolute;
bottom: 0;
/*background: #696262;*/
/*background: linear-gradient(to top, rgba(105, 98, 98, 0) 0%, #696262 100%);*/
background: linear-gradient(to bottom, #1e1e1e00 0%, #1e1e1e 100%);
opacity: 0.9;
z-index: 1;
}
&:hover{
background-size: auto 140%;
p{
b{
font-weight: bold;
color: var(--pink-2);
}
}
a.hover{
display: flex;
align-items: center;
justify-content: center;
}
}
}
.pl_p:nth-child(4n+1){
box-shadow: 41px 51px 68px 5px rgb(0 0 0 / 15%);
position: relative;
z-index: 2;
}
.pl_p:nth-child(4n+0) {
box-shadow: -41px 51px 68px 5px rgb(0 0 0 / 15%);
position: relative;
z-index: 2;
}
.empty{
min-height: 500px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #ADB9CA40;
h5{
font-size: var(--font-xxm);
line-height: 21px;
font-family: CenturyGothic;
}
}
}
.content{
.filter{
padding: 0px var(--gap) 50px;
width: calc(100% - (var(--gap) * 2));
display: flex;
align-items: center;
justify-content: space-between;
background: var(--gray-2);
.right{
span{
font-family: CenturyGothic;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
color: var(--black-2);
margin: unset;
margin-right: 10px;
}
input{
border: unset;
border-bottom: 1px solid #323F5180;
font-family: CenturyGothic;
font-size: var(--font-xxm);
width: 250px;
background: transparent;
}
}
}
form{
position: relative;
top: 0px;
list-style: none;
margin: 0em;
.row{
display: flex;
gap: 12px;
select{
font-family: CenturyGothic;
background: transparent;
color: white;
border-radius: 5px;
border: 1px solid white;
padding: 4px 8px;
cursor: pointer;
option{
background: #D9D9D940;
backdrop-filter: blur(4px);
color: var(--black-2);
}
}
.select-items {
font-size: var(--font-xxs);
text-transform: capitalize;
padding: unset;
gap: 0;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
overflow: hidden;
top: calc(100% - 17px);
padding-top: 20px;
background: var(--black-2);
div {
&:first-child {
padding-top: 24px;
}
&:last-child {
padding-bottom: 16px;
}
padding: 6px 8px;
background: var(--black-2);
border-color: #FFFFFF40;
font-size: var(--font-xs);
text-transform: capitalize;
border-width: 0px;
border-radius: unset;
padding-left: 16px;
}
}
.select-selected{
height: 28px;
border: 1px solid transparent;
background: var(--black-2);
padding: 4px 42px 4px 21px;
backdrop-filter: blur(4px);
border-radius: 50px;
display: flex;
align-items: center;
z-index: 100;
position: relative;
svg{
position: absolute;
top: 14px;
right: 12px;
transition: all 0.5s ease-in-out;
}
&:after{
content: unset;
}
&.select-arrow-active{
&:after{
}
svg{
transform: rotate(180deg);
top: 15px;
}
}
}
button{
border: unset;
background: unset;
cursor: pointer;
padding: unset;
svg{
width: 28px;
height: 28px;
}
}
}
}
}
}
section.section_project_list{
position: relative;
overflow: hidden;
.container{
}
.circle-gra{
transform: translate(30%,-10%);
}
&.p_project{
.header_flex{
padding-top: 200px;
.left{
max-width: 720px;
flex: 0 0 100%;
h5{
margin-bottom: 20px;
span{
color: var(--pink);
}
}
p{
color: var(--stale-blue);
}
}
}
.head_filter{
padding-top: 80px;
}
}
.head_filter{
background: var(--gray-2);
.list{
display: flex;
gap: 60px;
h5{
font-family: CenturyGothic;
font-weight: bold;
font-size: var(--font-m);
line-height: calc(var(--font-m) + 8px);
margin: unset;
margin-bottom: 20px;
color: var(--black-2);
}
p{
font-family: Jost;
font-weight: 400;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
margin: unset;
margin-bottom: 12px;
color: var(--gray-5);
}
}
}
}
section.gap_image{
.container{
img{
width: 100%;
}
}
.content{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 100px;
padding: 80px var(--gap) 0px;
padding-bottom: 200px;
position: relative;
.circle-gra{
right: auto;
left: 0;
transform: translate(-40%,-10%);
}
.left{
max-width: 400px;
h5{
font-family: CenturyGothic;
font-weight: Bold;
font-size: calc(var(--font-xxl) - 3px);
line-height: calc(var(--font-xxl) - 3px + 8px);
margin: unset;
color: var(--stale-blue);
margin-bottom: 8px;
span{
color: var(--pink);
}
}
}
.right{
max-width: 400px;
h5{
font-family: CenturyGothic;
font-weight: bold;
font-size: var(--font-xl);
line-height: calc(var(--font-xl) + 8px);
margin: unset;
margin-bottom: 20px;
color: var(--black-2);
}
p{
font-family: Jost;
font-weight: 400;
font-size: var(--font-m);
line-height: calc(var(--font-m) + 8px);
margin: unset;
margin-bottom: 12px;
color: var(--gray-5);
}
}
}
}
section.abt_project{
.header_flex{
.left{
}
.right{
flex: 0 0 360px;
}
}
.header2{
.left{
flex: 1;
h5{
span{
color: var(--pink);
}
}
}
}
.pl_p{
p{
b{
color: white !important;
}
}
}
}
section.leadership{
.content{
display: flex;
padding: 0px 20%;
.text_left{
padding-left: var(--gap);
padding-top: 100px;
flex: 0 0 40%;
width: 50%;
h5{
font-family: CenturyGothic;
font-weight: bold;
font-size: var(--font-xl);
line-height: 40px;
margin-bottom: unset;
margin-top: unset;
color: var(--black);
margin-bottom: 12px;
}
p{
font-family: Jost;
font-size: var(--font-l);
line-height: 40px;
margin-top: unset;
color: var(--black);
}
}
.img{
padding-top: 100px;
flex: 0 0 50%;
width: 50%;
padding-bottom: 100px;
img{
height: auto;
width: 80%;
margin-left: 20%;
aspect-ratio: 9 / 12;
object-fit: cover;
filter: grayscale(100%);
position: sticky;
top: 20%;
animation: smoothSticky 0.5s ease-out;
&:hover{
filter: grayscale(0%);
}
}
}
}
}
section.teams{
.content{
.listteams{
display: flex;
align-items: stretch;
gap: 3px;
padding: 10px;
padding-left: 65px;
justify-content: flex-start;
position: relative;
&:last-child{
padding-top: unset;
}
.nameCountry{
position: absolute;
bottom: 50%;
left: -40px;
transform: rotate(270deg) translateX(-20%);
font-family: cursive;
font-size: var(--font-l);
color: var(--black);
font-family: CenturyGothic;
a{
color: inherit;
text-decoration: unset;
}
}
.item {
/*flex: 1;*/
flex: 1;
/*width: 25%;*/
max-width: 16%;
height: 360px;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
cursor: pointer;
.intro{
position: absolute;
bottom: 0;
display: none;
text-align: center;
padding: 150px 20px 20px;
width: calc(100% - 40px);
background: linear-gradient(to bottom, #69626200 30%, #716b6bb0 100%);
h6{
color: white;
font-family: CenturyGothic;
font-size: var(--font-l);
margin: unset;
margin-bottom: 12px;
}
p{
color: white;
font-family: Jost;
font-size: var(--font-xm);
margin: unset;
}
}
img {
width: 100%;
height: 100%;
filter: grayscale(100%);
object-fit: cover;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
&:hover {
flex: 0 0 30%;
max-width: 30%;
.intro{
display: block;
}
img {
aspect-ratio: unset;
filter: grayscale(0%);
}
}
}
.item-find{
/*padding: 20px;*/
flex: 1;
display: flex;
align-items: center;
h6{
margin: 20px;
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-xl);
color: var(--pink);
}
}
&.list3{
padding-left: 135px;
padding-right: 0px;
.nameCountry{
transform: rotate(90deg) translateX(-20%);
bottom: 40%;
right: -72px;
left: unset;
}
.item{
/*height: 500px;*/
width: 33.33%;
max-width: 33.33%;
height: 320px;
img{
object-position: center;
}
}
.item:hover {
flex: 0 0 40%;
width: 40%;
max-width: 40%;
}
}
}
.blog-header{
padding-top: 70px !important;
&>h5{
font-size: var(--font-xxl);
margin-bottom: 16px;
padding-left: unset;
}
&>p{
font-family: CenturyGothic;
font-weight: 100;
font-size: calc(var(--font-xm) + 1px);
line-height: calc(var(--font-xm) + 9px);
padding-left: unset;
color: gray;
}
a,button{
margin-top: 20px;
/*margin-left: 10%;*/
float: right;
margin-right: 30px;
&>div:before{
background: var(--pink-2);
}
&:hover{
border-color: var(--pink-2);
span{
color: var(--black-2);
}
}
}
}
}
&.blog-list{
.content{
display: flex;
.blog-header{
flex: 0 0 26%;
padding-top: 160px;
}
}
}
&.team-home{
background: white;
padding-bottom: 120px;
.content{
padding-left: var(--gap);
.blog-header{
flex: 0 0 300px;
}
}
}
}
section.teams_v2{
.listteams{
display: flex;
position: relative;
background: linear-gradient(360deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
.nameCountry{
position: absolute;
z-index: 2;
font-family: CenturyGothic;
font-weight: Bold;
font-size: var(--font-xxl);
/*line-height: 18px;*/
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: white;
}
.item {
flex: 1;
/*max-width: 20%;*/
height: 360px;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
cursor: pointer;
&:before{
content: "";
background: #ECACC159;
/*mix-blend-mode: multiply;*/
width: 100%;
height: 100%;
top: 0;
left: 0;
/*opacity: 0.7;*/
position: absolute;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.intro{
position: absolute;
bottom: 0;
display: none;
text-align: center;
padding: 150px 20px 20px;
width: calc(100% - 40px);
background: linear-gradient(to bottom, #69626200 30%, #716b6bb0 100%);
h6{
color: white;
font-family: CenturyGothic;
font-size: var(--font-l);
margin: unset;
margin-bottom: 12px;
}
p{
color: white;
font-family: Jost;
font-size: var(--font-xm);
margin: unset;
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
/*filter: grayscale(100%);*/
mix-blend-mode: luminosity;
}
}
.item-find{
/*padding: 20px;*/
flex: 1;
display: none;
align-items: center;
position: relative;
&:before{
content: "";
background: var(--pink);
mix-blend-mode: multiply;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.7;
position: absolute;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
h6{
margin: 20px;
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-xl);
color: var(--pink);
}
}
&.active{
.nameCountry{
display: none;
}
.item {
&:before{
/*background: transparent;*/
}
img{
filter: grayscale(100%);
}
&:hover {
flex: 0 0 30%;
max-width: 30%;
&:before{
background: transparent;
}
.intro{
display: block;
}
&:before{
content: unset;
}
img {
aspect-ratio: unset;
filter: grayscale(0%) !important;
mix-blend-mode: unset;
}
}
}
.item-find{
&:before{
background: transparent;
}
}
}
}
.all_width{
.item{
max-width: 33.33%;
height: 450px;
&:hover {
flex: 0 0 40% !important;
max-width: 40% !important;
}
}
}
}
#map-dotted{
min-height: 600px;
svg{
height: 100%;
width: 100%;
max-width: 100vw;
position: relative;
/*left: -20%;*/
circle{
&.blink_map {
animation: an_blink_map 2s infinite;
transform-origin: center;
transform-box: fill-box;
}
}
}
}
section.lens{
.container{
.content{
min-height: 450px;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
/*&:before{
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background: #EBEDF199;
z-index: 1;
}*/
a{
text-decoration: unset;
position: relative;
z-index: 2;
}
h5{
margin: unset;
color: var(--stale-blue);
font-family: CenturyGothic;
font-size: var(--font-xxxl);
font-weight: 100;
position: relative;
z-index: 1;
svg{
margin-left: 10px;
width: 30px;
height: 30px;
fill: var(--pink-2);
transform: rotate(45deg);
}
}
.img-berjalan{
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
left: 50%;
transform: translateX(-50%);
/*border-radius: 50%;*/
overflow: hidden;
transition: all 0.5s ease-in-out;
display: flex;
flex-wrap: wrap;
div{
display: flex;
height: 225px;
img{
height: 225px;
display: block;
filter: grayscale(100%);
/*opacity: 0.7;*/
&:hover{
filter: grayscale(0%);
opacity: 1;
}
}
}
}
.bg {
background: #EBEDF199;
position: absolute;
left: 50%;
top: 50%;
width: 150vw;
height: 150vw;
transform: translate(-50%, -50%);
transition: all 0.5s ease-in-out;
border-radius: 50%;
}
.lens_hover{
position: absolute;
z-index: 4;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
background: #EBEDF199;
img{
height: 450px;
/*aspect-ratio: 4/3;*/
}
&.active{
display: flex;
justify-content: center;
}
.navi{
/*width: 700px;*/
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-between;
button{
background: transparent;
border: unset;
cursor: pointer;
svg{
fill: black;
height: 42px;
aspect-ratio: 1/2;
top: 0;
}
&.nav_right{
position: relative;
margin-left: 20px;
svg{
transform: scale(-1);
}
}
&.nav_left{
margin-right: 20px;
}
}
}
}
&.active{
.img-berjalan{
width: 100%;
height: 100%;
/*border-radius: 0%;*/
}
.bg{
width: 0;
height: 0;
}
&>a{
display: none;
}
}
}
}
}
section.feed_ig{
overflow: hidden;
.listfeed{
display: flex;
.tampil{
flex: 0 0 25%;
iframe{
margin-bottom: unset !important;
width: 100%;
}
.instagram-media {
/* Sesuaikan dengan tinggi yang diinginkan */
min-height: 540px;
}
.instagram-media > div {
position: relative;
}
/* Sembunyikan semua elemen kecuali gambar */
.instagram-media > div > *:not(:last-child) {
display: none !important;
}
/* Tampilkan hanya container gambar */
.instagram-media > div > div:last-child {
display: block !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Pastikan gambar mengisi container */
.instagram-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
section.abt-sertificat{
padding: 40px var(--gap);
h5{
text-align: center;
font-size: var(--font-xl);
line-height: 41px;
font-family: CenturyGothic;
}
.list-certi{
display: flex;
align-items: center;
div{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px 30px;
img{
width: 150px;
margin-bottom: 12px;
}
h6{
font-size: var(--font-xm);
line-height: 31px;
font-family: CenturyGothic;
margin: unset;
color: rgb(223 124 155);
margin-bottom: 12px;
}
p{
font-family: Jost;
font-size: var(--font-xs);
line-height: 17px;
margin: unset;
}
}
}
}
section.abt_award{
.content{
.flex{
display: flex;
.left{
background: var(--pink);
padding: 90px 70px 90px var(--gap);
flex: 0 0 calc(30% - 70px);
display: flex;
display: flex;
flex-direction: column;
justify-content: space-between;
h5{
font-family: CenturyGothic;
font-weight: Bold;
font-size: var(--font-xxl);
line-height: calc(var(--font-xxl) + 8px);
margin: unset;
color: white;
margin-bottom: 14px;
span{
font-weight: 100;
}
}
p{
color: white !important;
}
}
.txt{
h6{
font-family: CenturyGothic;
font-weight: bold;
font-size: var(--font-m);
line-height: calc(var(--font-m) + 8px);
margin: unset;
width: 90%;
color: var(--black);
margin-bottom: 32px;
}
p{
font-family: Jost;
font-weight: 400;
font-size: var(--font-xm);
line-height: calc(var(--font-xm) + 8px);
margin: unset;
width: 90%;
color: var(--black);
}
}
.right{
background: var(--pink-3);
flex: 1;
padding: 90px var(--gap) 60px 70px;
overflow: hidden;
.txt{
h6{
margin-bottom: 12px;
}
}
.list_image{
margin-top: 60px;
display: flex;
gap: 200px;
transition: all 0.5s ease-in-out;
&>div{
flex: 0 0 100%;
display: flex;
align-items: center;
justify-content: center;
img{
width: 80%;
height: fit-content;
}
}
div.award{
display: flex;
gap: 20px;
flex-direction: row;
flex-wrap: wrap;
div{
flex: 0 0 calc(50% - 20px);
&.wrd{
text-align: center;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
flex: 0 0 calc(50% - 20px);
img{
/*height: 70px;*/
width: 45px;
&._right{
transform: scaleX(-1);
}
}
p{
font-family: CenturyGothic;
font-weight: 400;
font-size: var(--font-xs);
line-height: 17px;
margin: unset;
color: var(--black);
padding: 0px 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
b{
font-size: var(--font-s);
display: block;
margin-bottom: 8px;
}
span{
font-size: var(--font-xs);
color: var(--pink);
display: block;
margin-bottom: 8px;
}
}
}
}
}
div.serti{
display: flex;
gap: 20px;
flex-direction: row;
/*flex-wrap: wrap;*/
background: white;
margin-bottom: 20px;
padding: 20px 0px;
div{
/*flex: 0 0 calc(33.33% - 20px);*/
width: 180px;
&.crt{
text-align: center;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
img{
height: 150px;
width: auto;
margin-bottom: 20px;
}
p{
font-family: CenturyGothic;
font-weight: 400;
font-size: var(--font-xxs);
line-height: 17px;
margin: unset;
color: var(--black);
padding: 0px 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
b{
font-size: var(--font-s);
display: block;
margin-bottom: 8px;
color: var(--stale-blue);
}
}
}
}
}
}
.navi{
display: flex;
align-items: center;
justify-content: center;
margin-top: 50px;
button{
background: transparent;
border: unset;
cursor: pointer;
svg{
fill: black;
height: 42px;
aspect-ratio: 1/2;
top: 0;
}
&.nav_right{
position: relative;
svg{
transform: scale(-1);
}
}
}
h5{
font-family: Jost;
font-weight: 400;
font-size: var(--font-m);
line-height: calc(var(--font-m) + 8px);
margin: unset;
padding: 0px 20px;
color: var(--black);
}
}
}
}
}
&.abt_certi{
padding-bottom: 140px;
.content{
.flex{
.right{
background: var(--gray-2);
.txt{
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
h6,p{
width: 60%;
}
h6{
font-size: var(--font-xxl);
line-height: calc(var(--font-xxl) + 8px);
span{
font-weight: 100;
}
}
}
}
}
}
}
}
section.abt-ourbrand{
padding: 40px var(--gap);
img{
width: 100%;
}
}
@keyframes slideFromTopPrev {
0% {
transform: translateY(0vh);
opacity: 1;
}
100% {
transform: translateY(40vh);
opacity: 1;
}
}
@keyframes slideFromBottomPrev {
0% {
transform: translateY(0vh);
opacity: 1;
}
100% {
transform: translateY(-40vh);
opacity: 1;
}
}
@keyframes slideFromBottom {
0% {
transform: translateY(100vh);
opacity: 0.5;
}
100% {
transform: translateY(0vh);
opacity: 1;
}
}
@keyframes slideFromTop {
0% {
transform: translateY(-100vh);
opacity: 0.5;
}
100% {
transform: translateY(0vh);
opacity: 1;
}
}
@keyframes smoothSticky {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
@keyframes scroll {
0% { transform: translateX(-50%) translateY(0); opacity: 1; }
100% { transform: translateX(-50%) translateY(12px); opacity: 0; }
}
@keyframes scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - 30px));
}
}
@keyframes pulse_border {
0% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.05);
opacity: 0.4;
}
100% {
transform: scale(1);
opacity: 0.7;
}
}
@keyframes tutup_before {
0% {
max-height: 500px;
}
100% {
max-height: 0px;
}
}
@keyframes typing {
from { opacity: 0; }
to { opacity: 1; } /* 6 karakter/words */
}
@keyframes spin-slow {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes brand-to-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@keyframes brand-to-right {
0% {
transform: translateX(-50%);
}
100% {
transform: translateX(0%);
}
}
@keyframes foo_hover {
0% {
width: 0%;
height: 0%;
left: 50%;
top: 50%;
}
70% {
left: -10%;
top: -10%;
width: 120%;
height: 120%;
}
100% {
left: 0%;
top: 0%;
width: 100%;
height: 100%;
}
}
@keyframes blink_map {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.6);
opacity: 0.2;
}
}
@keyframes pulseAnimate{
100%{
opacity: 0;
transform: scale(2);
}
}
@keyframes an_blink_map {
0%,100% {
r: 0.3;
fill-opacity: 1;
stroke: #DF7C9B;
stroke-width: 1px;
}
50% {
r: 1;
stroke: #DF7C9B66;
stroke-width: 4px;
fill-opacity: 1;
}
}
section.project_detail{
.content{
/* Main Container */
.scroll-container {
height: 100vh;
display: flex;
position: relative;
}
/* Left Side - Photos */
.photo-side {
flex: 1;
height: 100vh;
overflow: hidden;
position: relative;
}
.photo-track {
height: 100vh;
width: 100vw;
display: flex;
flex-wrap: nowrap;
transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.photo-slide {
/*height: 100vh;*/
width: 100%;
flex: 0 0 50%;
display: flex;
align-items: center;
justify-content: center;
/*padding: 2rem;*/
/*position: absolute;*/
z-index: 0;
background: black;
img{
position: relative;
z-index: 0;
}
.youtube-content{
width: 100%;
iframe{
width: 100%;
aspect-ratio: 12 / 8;
}
}
&.prev{
z-index: 1;
img{
position: relative;
z-index: 1;
}
&.prev-up{
animation: slideFromTopPrev 1.5s ease-out forwards;
}
&.prev-down{
animation: slideFromBottomPrev 1.5s ease-out forwards;
}
}
&.active{
z-index: 2;
img{
position: relative;
z-index: 2;
}
&.up{
animation: slideFromTop 1s ease-out forwards;
}
&.down{
animation: slideFromBottom 1s ease-out forwards;
}
}
}
.photo-content {
width: 100%;
height: 100vh;
border-radius: 0px;
overflow: hidden;
position: relative;
/*box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);*/
display: flex;
align-items: center;
background: black;
}
.photo-content img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Right Side - Descriptions */
.description-side {
flex: 1;
height: 100vh;
overflow: hidden;
position: relative;
background: #E0E1D1;
}
.description-track {
height: 300vh; /* 3 sections */
transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.description-slide {
height: calc(100vh - 4rem);
display: flex;
align-items: flex-start;
/*justify-content: center;*/
padding: 2rem 2rem;
h2{
margin-top: unset;
}
}
.description-content {
max-width: 600px;
padding-right: 40px;
}
.slide-number {
font-size: 0.9rem;
color: #666;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 3px;
}
.slide-title {
font-size: var(--font-xxxl);
font-weight: 100;
margin-bottom: 2rem;
line-height: 1.1;
color: var(--black-2);
font-family: CenturyGothic;
}
.slide-text {
font-size: var(--font-xxm);
line-height: 1.8;
color: var(--black-2);
margin-bottom: 2rem;
font-family: Jost;
}
.slide-cta {
display: inline-block;
padding: 1rem 2rem;
border: 2px solid #fff;
color: #fff;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
transition: all 0.3s ease;
}
.slide-cta:hover {
background: #fff;
color: #000;
}
/* Navigation Dots */
.nav-dots {
position: fixed;
left: 3rem;
top: auto;
bottom: 1rem;
z-index: 100;
display: flex;
width: 40%;
}
.dot {
flex: 1;
height: 12px;
background: rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.dot.active {
background: #000;
/*transform: scale(1.2);*/
}
.dot::after {
content: '';
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
}
.dot:hover::after {
opacity: 1;
}
/* Scroll Indicator */
.scroll-indicator {
position: fixed;
left: 50%;
bottom: 2rem;
transform: translateX(-50%);
color: rgba(0, 0, 0, 0.7);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
z-index: 100;
}
.mouse {
width: 24px;
height: 40px;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 12px;
margin: 0 auto 0.5rem;
position: relative;
}
.wheel {
width: 4px;
height: 8px;
background: rgba(255, 255, 255, 0.7);
border-radius: 2px;
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
animation: scroll 2s infinite;
}
/* Progress Bar */
.progress-bar {
position: fixed;
top: auto;
bottom: 2rem;
left: 1rem;
width: calc(50% - 92px);
height: 3px;
background: rgba(255, 255, 255, 0.1);
z-index: 1000;
margin-left: 30px;
margin-right: 30px;
h5{
position: absolute;
font-family: Jost;
font-size: var(--font-s);
font-weight: 100;
color: white;
margin: unset;
top: -10px;
&.currentSlide{
left: -20px;
}
&.total{
right: -35px;
}
}
}
.progress {
height: 100%;
background: #fff;
width: 0%;
transition: width 0.3s ease;
}
.close-btn {
width: 50px;
height: 50px;
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
position: absolute;
top: 30px;
right: 30px;
z-index: 10;
}
.close-btn:hover {
background: transparent;
transform: scale(1.1);
}
.close-btn::before,
.close-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 2px;
background: black;
}
.close-btn::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
}
}
section.project_detail2_header{
/*height: 100vh;*/
background-size: cover;
background-position: center;
.header_flex{
.breadcrumb{
padding-top: 100px;
}
.left{
flex: 0 0 100%;
padding-bottom: 60px;
}
}
.content{
padding: 60px var(--gap) 0px;
}
.poin{
flex: 0 0 100%;
table{
border-spacing: 0 4px;
tbody{
display: flex;
flex-wrap: wrap;
}
tr{
flex: 0 0 100%;
td{
color: var(--black-2);
&:nth-child(1){
width: 150px;
}
b{
font-family: CenturyGothic;
}
p{
margin: unset;
font-family: Jost;
color: var(--pink);
}
}
}
}
}
.header_img{
img{
width: 100%;
}
}
}
section.project_detail2_body{
/*padding-bottom: 120px;*/
.content{
.top{
padding: 0px var(--gap);
padding-top: 30px;
flex: 0 0 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.left{
/*margin-top: 20px;*/
span{
font-family: Jost;
color: var(--black-2);
}
h5{
font-size: var(--font-xm);
font-family: CenturyGothic;
margin: unset;
color: var(--black-2);
}
p{
font-family: Jost;
max-width: 500px;
color: var(--black-2);
font-size: var(--font-xxm);
}
div{
display: flex;
gap: 70px;
width: 100%;
justify-content: space-between;
margin-bottom: 80px;
}
}
}
.gallery{
padding-top: 60px;
.col-6{
flex: 0 0 calc(50%);
}
.col-12{
flex: 0 0 100%;
}
.row{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/*gap: 12px;*/
/*margin-bottom: 12px;*/
&>div{
/*display: flex;*/
/*flex-direction: column;*/
/*justify-content: center;*/
p{
font-family: Jost;
color: var(--black-2);
}
}
&>div.desc{
font-family: Jost;
/*max-width: 500px;*/
color: var(--black-2);
p{
max-width: 400px;
margin: unset;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
}
}
&>div.desc:nth-child(2){
padding: 60px var(--gap) 60px 60px;
flex: 0 0 calc(50% - var(--gap) - 60px);
}
&>div.desc:nth-child(1){
padding: 60px 60px 60px var(--gap);
flex: 0 0 calc(50% - var(--gap) - 60px);
}
}
.row-bg{
background: #F1F5F9;
display: flex;
flex-direction: row;
justify-content: center;
}
.row-text{
flex: 0 0 calc(100% - (var(--gap) * 2));
background: #F1F5F9;
display: flex;
flex-direction: row;
justify-content: center;
padding: 30px var(--gap);
p{
font-family: Jost;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
text-align: center;
}
&.huge{
p{
font-family: CenturyGothic;
font-weight: bold;
font-size: var(--font-m);
line-height: calc(var(--font-m) + 8px);
text-align: center;
}
}
}
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
.ani-d-1{
--animate-duration: 1.3s;
}
.ani-d-2{
--animate-duration: 1.7s;
}
.ani-d-3{
--animate-duration: 2s;
}
section.abt-header{
background: url('https://ifpvrapnenlzdmhczndj.supabase.co/storage/v1/object/public/site-images/ai-associates.com/assets/AI-Orsted-01-03-resize-left-vigneting.jpg');
background-size: cover;
background-position: center;
.content{
padding: 0px var(--gap);
height: 100vh;
display: flex;
align-items: center;
h5{
color: white;
font-family: CenturyGothic;
font-weight: bold;
font-size: var(--font-l);
line-height: 40px;
margin: unset;
}
p{
color: white;
font-family: Jost;
font-weight: 400;
font-size: var(--font-xxm);
line-height: 25px;
margin: unset;
max-width: 500px;
}
}
}
section.gallery_video{
background: #F1F5F9;
.container{
.content{
padding: 80px var(--gap);
.video{
iframe{
border-radius: 10px;
width: 100%;
aspect-ratio: 16/9;
}
}
h5{
font-family: CenturyGothic;
font-weight: Bold;
font-size: var(--font-l);
line-height: calc(var(--font-l) + 8px);
margin: unset;
color: var(--black-2);
margin-bottom: 24px;
span{
color: var(--pink);
}
}
p{
font-family: Jost;
font-weight: 400;
font-size: var(--font-xm);
line-height: calc(var(--font-xm) + 8px);
margin: unset;
margin-top: 16px;
color: var(--blue-2);
}
}
}
}
section.abt2-header{
overflow: hidden;
.circle-gra{
transform: translate(20%,-20%);
}
.content{
padding: 200px var(--gap) 50px;
.top{
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
.left{
flex: 0 0 50%;
padding-right: var(--gap);
h4{
font-family: Jost;
font-weight: 100;
font-size: calc(var(--font-xm) + 2px);
line-height: calc(var(--font-xm) + 2px + 8px);
margin-top: unset;
margin-bottom: 24px;
max-width: 82%;
color: var(--stale-blue);
}
h5{
font-family: CenturyGothic;
font-weight: bold;
font-size: calc(var(--font-xxl) + 2px);
line-height: calc(var(--font-xxl) + 2px + 8px);
margin-top: unset;
margin-bottom: 15px;
color: var(--black-2);
span{
color: var(--pink);
}
}
p{
font-family: Jost;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
color: var(--gray-5);
&:nth-child(4){
opacity: 0.9;
}
&:nth-child(5){
opacity: 0.8;
}
}
}
.right{
flex: 0 0 40%;
/*padding-top: 55px;*/
padding-top: 0px;
.lists{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 23px;
h5{
flex: 0 0 130px;
font-family: CenturyGothic;
/*font-weight: 100;*/
font-size: calc(var(--font-xxxl));
line-height: 100%;
margin: unset;
text-align: right;
padding-right: 30px;
span{
font-weight: 100;
font-size: var(--font-xxl);
position: relative;
top: -10px;
right: -2px;
color: var(--gray-4);
}
&.black{
color: var(--stale-blue);
}
&.pink{
color: #E289A5;
}
&:has(span) {
position: relative;
right: -25px;
}
}
div{
display: flex;
color: var(--stale-blue);
align-items: center;
p{
font-family: Jost;
font-weight: 400;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
margin: unset;
margin-left: 15px;
display: flex;
flex-direction: column;
b{
font-family: CenturyGothic;
font-weight: bold;
font-size: var(--font-xm);
}
}
&.slash{
display: block;
height: auto;
width: 1px;
border-right: 1px solid white;
}
}
}
}
}
.bottom{
position: relative;
z-index: 1;
.txt1{
font-family: Jost;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
width: 70%;
color: var(--stale-blue);
p{
width: 70%;
margin-top: unset;
margin-bottom: 50px;
}
}
hr{
width: 40%;
margin-left: unset;
}
.txt2{
width: 70%;
h5{
font-family: Century Gothic;
font-weight: Bold;
font-size: var(--font-xl);
line-height: calc(var(--font-xl) + 8px);
color: var(--stale-blue);
margin-bottom: unset;
margin-top: 30px;
span{
color: var(--pink);
}
}
p{
width: 70%;
font-family: Jost;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
color: var(--stale-blue);
}
}
}
}
.content_detail{
padding: 0px var(--gap) 0px;
display: flex;
.detail-icon{
flex: 0 0 40%;
margin-bottom: unset;
img{
width: 100%;
}
}
.detail-content{
padding-left: 20px;
p,h6,h5{
margin: unset;
}
h6,h5{
font-family: CenturyGothic;
font-weight: 100;
}
p{
font-family: Jost;
font-size: var(--font-s);
}
.border{
margin: 0px 0px 20px;
h5{
font-size: var(--font-xxl);
font-weight: bold;
color: var(--stale-blue);
line-height: normal;
}
p{
font-size: var(--font-l);
&#phone,&#email{
font-size: var(--font-xm);
span{
color: var(--gray-5);
}
}
}
#title{
margin-bottom: 30px;
}
.list_icon{
display: flex;
gap: 10px;
margin-top: 20px;
a{
border-radius: 50px;
background: var(--pink);
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
}
svg{
width: 15px;
fill: white;
}
}
}
h6{
font-size: var(--font-xm);
color: var(--pink);
}
}
}
.bg{
margin-left: calc(-1 * var(--gap) - 30px);
margin-right: calc(-1 * var(--gap) - 30px);
margin-top: -150px;
margin-bottom: -150px;
position: relative;
.reg_presence{
position: absolute;
left: var(--gap);
top: 50%;
transform: translateY(-50%);
text-align: left;
max-width: 430px;
z-index: 3;
h6{
font-family: Century Gothic;
font-weight: Bold;
font-size: var(--font-xl);
line-height: calc(var(--font-xl) + 8px);
margin-top: unset;
margin-bottom: 12px;
color: var(--pink);
span{
color: var(--stale-blue);
}
}
p{
font-family: Century Gothic;
font-weight: 100;
font-size: var(--font-l);
line-height: calc(var(--font-l) + 8px);
margin: unset;
color: var(--stale-blue);
}
}
}
}
section.abt-wpl{
.container{
.list{
display: flex;
a{
flex: 0 0 33.33%;
aspect-ratio: 5/3;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
text-decoration: unset;
position: relative;
background-blend-mode: luminosity, multiply;
background-color: rgb(0 0 0);
&:before{
content: "";
background: var(--pink-2);
/*mix-blend-mode: multiply;*/
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.5;
position: absolute;
/*// Tambahkan transisi untuk efek halus*/
transition: background 0.5s ease;
}
/*// Saat hover, ubah background ke blue*/
&:hover:before {
background: var(--stale-blue);
}
h5{
margin: unset;
color: white;
font-family: CenturyGothic;
font-weight: Bold;
font-size: var(--font-xxxl);
line-height: calc(var(--font-xxxl) + 8px);
position: relative;
z-index: 1;
}
}
}
}
}
section.abt-sticky{
background: #D9D9D9;
top: 0;
z-index: 1000;
transition: all 0.4s ease;
&.sticky{
position: -webkit-sticky;
position: sticky;
}
.content{
padding: 0px var(--gap);
.list{
display: flex;
justify-content: space-between;
a{
padding: 20px 50px;
font-family: CenturyGothic;
font-weight: 400;
font-size: var(--font-m);
line-height: 35px;
margin: unset;
max-width: 500px;
text-decoration: unset;
color: var(--black-2);
&.active{
background: #df7c9b;
color: white;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
}
}
}
}
section.abt-achivement{
.content{
padding: 0px var(--gap);
&>div{
display: flex;
flex-wrap: wrap;
padding: 40px 0px;
}
.head{
flex: 0 0 100%;
text-align: center;
h5{
font-family: Jost;
font-weight: bold;
font-size: var(--font-xl);
line-height: 46px;
margin: unset;
margin-bottom: 60px;
}
}
.left{
flex: 0 0 50%;
.achiv{
.img{
&:before{
border-top-right-radius: 60px;
box-shadow: .75rem .75rem 1.5rem rgba(24, 6, 141, .12);
}
}
}
}
.right{
flex: 0 0 50%;
.achiv{
.img{
align-items: flex-end;
&:before{
border-top-left-radius: 60px;
box-shadow: .75rem .75rem 1.5rem rgba(24, 6, 141, .12);
}
}
&>div{
text-align: right;
}
}
}
.achiv{
display: flex;
flex-direction: column;
gap: 20px;
&>div{
/*border: 1px solid #e7e7e7;*/
padding: 24px;
border-radius: 25px;
height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
h4{
font-family: Jost;
font-weight: bold;
font-size: var(--font-xm);
line-height: 31px;
margin: unset;
max-width: 500px;
}
p{
font-family: Jost;
font-weight: 400;
font-size: var(--font-s);
line-height: 26px;
margin: unset;
max-width: 500px;
}
&.img{
padding: unset;
&:before{
content: "";
display: block;
background: rgb(223 124 155);
width: 90%;
height: 100%;
}
}
}
}
}
}
section.abt-brand{
padding-bottom: 80px;
.content{
padding: 0px var(--gap);
h5 {
text-align: center;
font-size: var(--font-xl);
line-height: 41px;
font-family: CenturyGothic;
}
.container-brand{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
&>div{
flex: 1;
display: flex;
justify-content: center;
}
}
.cat-brand{
flex: 0 0 180px;
border-right: 1px solid black;
height: 75px;
display: flex;
align-items: center;
justify-content: flex-end;
h6{
text-align: center;
font-size: var(--font-xxm);
line-height: 23px;
font-family: CenturyGothic;
margin: unset;
text-align: right;
margin-right: 20px;
}
}
.list-brand{
/*flex: 0 0 calc(100% - 150px);*/
/*width: calc(90% - 240px);*/
min-width: 650px;
display: flex;
gap: 45px;
padding: 0px 10px;
padding-left: 30px;
align-items: center;
/*justify-content: space-between;*/
/*animation: scroll-left 10s linear infinite;*/
img{
cursor: pointer;
padding: 7px;
width: 80px;
border-radius: 12px;
filter: grayscale(100%);
&:hover{
/*box-shadow: 0 0 14px rgba(24, 6, 141, .12);*/
filter: grayscale(0%);
}
}
}
}
}
section.abt-paralax{
height: 70vh;
width: 100%;
background-size: cover;
overflow: hidden;
z-index: 1;
background-position-x: center;
background-position-y: 100%;
/*transform: translateY(var(--scroll-y));*/
}
section.cnt-gnt{
background: #00000040;
background-image: url('https://ifpvrapnenlzdmhczndj.supabase.co/storage/v1/object/public/site-images/ai-associates.com/assets/ezgif.com-resize-3.jpg');
background-position: center;
background-size: cover;
.content{
padding: 200px var(--gap) 130px !important;
.cnt-header{
.breadcrumb{
position: relative;
}
h5{
font-family: CenturyGothic;
font-weight: bold;
/*font-size: var(--font-l);*/
/*line-height: 40px;*/
font-size: calc(var(--font-xxl) + 2px);
line-height: calc(var(--font-xxl) + 2px + 8px);
margin: unset;
margin-bottom: 8px;
color: var(--black);
span{
color: var(--pink);
}
}
p{
font-family: Jost;
font-weight: 400;
/*font-size: var(--font-xxm);*/
/*line-height: 33px;*/
font-size: calc(var(--font-xm) + 2px);
line-height: calc(var(--font-xm) + 2px + 8px);
margin: unset;
color: var(--black);
}
}
}
&.cnt-service{
/*background-image: unset;*/
/*background: var(--black-gray);*/
.content{
padding: 350px var(--gap) 30px var(--gap);
h5{
font-size: var(--font-xxl);
font-weight: 100;
line-height: 72px;
}
}
}
}
section.abt-head{
/*padding-top: 150px;*/
position: relative;
height: 100vh !important;
--before-height: 420px;
&:before{
content: "";
display: flex;
height: var(--before-height);
width: 100%;
background: white;
position: absolute;
top: 0;
}
.container{
max-height: var(--before-height);
overflow: hidden;
}
.content{
padding-top: 360px;
}
}
section.svc-ctr,section.svc-detail-second-carou{
background: white;
overflow: hidden;
/*background: var(--black-gray);*/
&.main-service{
/*clip-path: inset(0 0 0 0);*/
}
&.trans{
background: transparent;
}
.circle-gra{
right: -20vw;
top: 10vh;
}
a.follower{
height: unset;
/*border: 1px solid var(--stale-blue);*/
padding: 10px 20px;
transform: translate(-50%, -15px);
pointer-events: none;
background: rgb(187 187 187);
p{
flex: unset;
font-weight: bold;
color: var(--stale-blue);
margin: unset;
font-size: var(--font-s);
}
}
.content{
padding: 0px var(--gap) 0px;
&.foo{
padding-top: 50px;
padding-bottom: 120px;
}
.svcl-hdr{
padding: 40px 30px 130px;
display: flex;
gap: 130px;
h6,p{
color: white;
}
p{
font-family: Jost;
font-weight: 100;
font-size: var(--font-xxm);
line-height: 25px;
flex: 0 0 250px;
color: var(--black);
span{
color: var(--pink-2);
}
}
h6{
font-family: CenturyGothic;
font-size: var(--font-xxl);
font-weight: bold;
line-height: 50px;
margin: unset;
color: var(--black);
span{
color: var(--pink-2);
}
}
}
.hdr-row{
flex-direction: column;
gap: 0px;
padding-bottom: 60px;
p{
flex: 1;
font-family: CenturyGothic;
font-size: var(--font-xxl);
font-weight: 100;
line-height: 50px;
margin-top: unset;
}
h6{
font-family: Jost;
font-weight: 100;
font-size: var(--font-xxm);
line-height: 25px;
}
}
.svc-list{
padding: 0px 30px 0px;
/*padding: 0px 30px 0px;*/
a.list{
text-decoration: unset;
position: relative;
.imgg{
position: absolute;
left: 0;
top: 0;
width: 0px;
height: 100%;
background: var(--pink);
opacity: 0.1;
transition: all 0.5s ease-in-out;
}
&:hover{
.icon{
img{
width: 120px;
}
}
.imgg {
width: 100%;
height: 100%;
}
h5{
color: var(--pink-pastel);
}
}
}
.list{
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
padding-bottom: 100px;
overflow: hidden;
.svc-garis{
border-top: 1px solid var(--black);
width: 100%;
height: 1px;
grid-column-start: 1;
grid-column-end: 13;
margin-bottom: 20px;
}
.icon{
grid-column-start: 1;
display: flex;
align-items: flex-start;
justify-content: center;
img{
padding-top: 3.2rem;
width: 60px;
transition: all 0.5s ease-in-out;
position: absolute;
left: 0;
}
}
.number{
grid-column-start: 4;
p{
font-family: Jost;
font-weight: 100;
font-size: var(--font-xs);
color: var(--black);
}
}
.name-service{
grid-column-start: 5;
grid-column-end: 7;
h5{
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-xl);
color: var(--black);
margin: unset;
}
}
.desc-service{
grid-column-start: 9;
grid-column-end: 12;
ul{
li{
font-family: Jost;
font-weight: 100;
font-size: var(--font-xxm);
color: var(--black);
white-space: nowrap;
}
}
p{
font-family: Jost;
font-weight: 100;
font-size: var(--font-xxm);
color: var(--black);
margin: unset;
}
}
.arrow-go{
margin-top: 50%;
height: 50px;
width: 50px;
border-radius: 50%;
border: 1px solid var(--pink-pastel);
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease-in-out;
svg{
fill: var(--pink-pastel);
width: 15px;
transform: rotate(45deg);
transition: all 0.3s ease-in-out;
}
}
&:hover{
.arrow-go{
border: 2px solid var(--pink-pastel);
svg{
transform: rotate(0deg);
}
}
}
}
}
.list-detail{
.list{
.number {
grid-column-start: 1;
p{
font-family: Jost;
font-weight: 100;
font-size: var(--font-xxl);
margin-top: unset;
}
}
.name-service {
grid-column-start: 3;
grid-column-end: 6;
h5{
font-weight: bold;
}
}
.desc-service {
grid-column-start: 6;
grid-column-end: 10;
}
.arrow-go{
grid-column-start: 12;
/*grid-column-end: 13;*/
}
&:hover{
.number{
p{
color: var(--pink-pastel);
}
}
.name-service{
h5{
color: var(--black);
}
}
}
}
}
.list-second{
.list{
position: relative;
padding-bottom: 50px;
.name-service {
grid-column-start: 4;
grid-column-end: 7;
h5{
/*font-weight: bold;*/
}
}
.desc-service {
grid-column-start: 8;
grid-column-end: 12;
p{
color: var(--gray-3);
}
}
.icon{
padding-left: 20px;
width: 50px;
transition: all 0.5s ease-in-out;
img,svg{
fill: var(--black);
&.pink{
fill: var(--pink);
}
}
}
.imgg{
position: absolute;
left: 0;
top: 0;
width: 0px;
height: 100%;
background: var(--pink);
opacity: 0.1;
transition: all 0.5s ease-in-out;
}
&:hover{
.icon{
width: 100px;
}
.imgg {
width: 100%;
height: 100%;
}
h5{
color: var(--pink-pastel);
}
}
}
}
.svc-list-other{
display: flex;
gap: 20px;
padding: 0px 30px 0px;
flex-wrap: wrap;
.list{
flex: 0 0 calc(33% - 45px);
position: relative;
padding-left: 30px;
display: flex;
flex-direction: column;
overflow: hidden;
.svc-garis{
border-left: 1px solid var(--black);
width: 1px;
height: 100%;
position: absolute;
left: 0;
}
.icon{
order: 1;
padding: 20px 0px;
img,svg{
width: 40px;
transition: all 0.5s ease-in-out;
fill: var(--black);
&.pink{
fill: var(--pink);
}
}
}
.number{
order: 0;
p{
font-family: Jost;
font-weight: 100;
font-size: var(--font-xs);
margin: unset;
color: var(--black);
}
}
.name-service{
order: 2;
h5{
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-l);
color: var(--black);
margin: unset;
}
}
.desc-service{
order: 3;
ul{
li{
font-family: Jost;
font-weight: 100;
font-size: var(--font-s);
color: var(--black);
white-space: nowrap;
}
}
p{
font-family: Jost;
font-weight: 100;
font-size: var(--font-xxm);
color: var(--black);
}
}
&:hover{
img,svg{
width: 60px;
}
h5{
color: var(--pink-pastel);
}
}
}
}
}
&.svc-home,&.svc-about{
background: var(--gray-2);
.content {
padding: 100px var(--gap) 100px;
.svc-top-header{
display: flex;
justify-content: space-between;
padding-bottom: 50px;
h6{
/*flex: 0 0 calc(70% - 150px);*/
flex: 1;
max-width: 560px;
/*padding-right: 150px;*/
font-size: var(--font-xxl);
font-family: CenturyGothic;
font-weight: 100;
margin: unset;
display: flex;
flex-direction: column;
color: var(--black);
}
.right{
flex: 0 0 350px;
p{
margin: unset;
font-family: Jost;
font-size: var(--font-xxm);
margin-bottom: 25px;
}
}
}
.svc-list-other{
padding: unset;
margin-left: -30px;
gap: 10px;
a{
text-decoration: unset;
h5,p{
text-decoration: unset;
}
}
.list {
flex: 0 0 calc(33% - 45px);
position: relative;
cursor: pointer;
padding-right: 7px;
.imgg{
position: absolute;
left: 0;
top: 0;
width: 0px;
height: 0px;
background: var(--pink);
opacity: 0.1;
transition: all 0.5s ease-in-out;
}
.desc-service{
transition: all 0.5s ease-in-out;
max-height: 0;
overflow: hidden;
}
.icon{
position: relative;
z-index: 3;
img,svg{
position: relative;
left: 50%;
transform: translateX(-50%);
width: 200px;
transition: all 0.5s ease-in-out;
}
svg{
width: 120px;
fill: var(--black);
}
}
&:hover{
.imgg{
width: 100%;
height: 100%;
}
.icon{
img,svg{
width: 120px;
left: 60px;
transform: translateX(-50%);
}
svg{
width: 80px;
}
}
.svc-garis{
display: none;
}
h5,p{
/*color: white;*/
}
.desc-service{
max-height: 1000px;
}
}
}
}
}
}
&.svc-about{
background: #FAFAFA;
.imgg{
display: none;
}
.content {
.svc-list-other {
.list {
.icon{
svg,img{
left: 60px;
width: 60px;
}
}
}
}
}
.desc-service{
max-height: 1000px !important;
}
}
}
section.svc-mainh-hover{
.content{
padding: 0px var(--gap) 0px;
.svcl-hdr{
padding: 40px 0px 60px;
display: flex;
gap: 130px;
p{
font-family: Jost;
font-weight: 100;
font-size: var(--font-xxxl);
line-height: var(--font-xxxl);
flex: 0 0 500px;
color: var(--black);
margin: unset;
}
h6{
font-family: CenturyGothic;
font-size: var(--font-l);
font-weight: 100;
line-height: 50px;
margin: unset;
color: white;
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--black);
}
}
}
}
section.svc-main-hover{
.content{
padding: 0px var(--gap) 100px;
.svc-list{
display: flex;
gap: 30px;
.list{
padding: 40px 20px;
flex: 1;
border: 1px solid #D3D3D3;
border-radius: 10px;
text-align: center;
text-decoration: unset;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.icon{
transition: all .3s;
img{
width: 100%;
border-radius: 20px;
}
}
.name-service {
h5 {
font-family: CenturyGothic;
font-weight: bold;
font-size: var(--font-m);
color: var(--black);
margin: unset;
margin-bottom: 10px;
}
}
.desc-service {
p {
font-family: Jost;
font-weight: 100;
font-size: var(--font-xm);
color: var(--black);
margin: unset;
margin-bottom: 30px;
}
}
.go{
margin-top: 20px;
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid var(--black);
display: flex;
display: flex;
align-items: center;
justify-content: center;
background: white;
svg{
fill: var(--black);
width: 20px;
transform: rotate(45deg);
transition: 0.3s;
}
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
-webkit-transform: scaleY(0.96);
transform: scale(0.96);
transform-origin: bottom;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
bottom: 0;
right: 0;
background: var(--pink-2);
border-radius: 10px;
}
&:hover{
.icon{
-webkit-mask: unset !important;
}
.name-service {
h5 {
color: white;
}
}
.desc-service {
p {
color: white;
}
}
.go{
svg{
transform: rotate(0deg);
}
}
&::after{
opacity: 1;
transform: scaleY(1);
}
}
}
}
}
}
section.svc-detail-dnb{
.swiper-wrapper{
/*padding: 0px var(--gap) 0px;*/
.swiper-slide{
width: 310px;
border-radius: 50%;
border: 1px solid var(--gray);
aspect-ratio: 1/1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img{
width: 60px;
margin-bottom: 30px;
opacity: 0.9;
}
h5{
margin: unset;
font-family: CenturyGothic;
letter-spacing: 1px;
font-weight: bold;
font-size: var(--font-m);
color: var(--black);
margin: unset;
/*&:before,&:after{
top: 0;
bottom: 0;
margin: auto;
margin-top: 53%;
content: "";
position: absolute;
width: 20px;
height: 1px;
background-color: var(--black);
}
&:before{
left: 70%;
right: auto;
}
&:after{
right: 70%;
left: auto;
}*/
}
ul{
margin-top: 10px;
margin-bottom: unset;
padding-left: unset;
list-style: unset;
padding: 0px 40px;
text-align: center;
li{
color: var(--black);
}
}
&:hover{
border-color: var(--black);
}
}
}
}
section.svc-addt{
background: white;
overflow: hidden;
.content{
padding: 0px var(--gap) 0px;
&.foo{
padding-top: 100px;
padding-bottom: 120px;
}
.svc-list-other{
display: flex;
flex-wrap: wrap;
.list-name{
flex: 0 0 calc(75% - 3px);
padding-top: 20px;
padding-bottom: 20px;
display: flex;
align-items: center;
h6{
font-family: CenturyGothic;
font-size: var(--font-xxl);
font-weight: 100;
line-height: 50px;
margin-top: unset;
margin-bottom: unset;
span{
color: var(--pink-2);
}
}
}
.list{
flex: 0 0 calc(25% - 42px);
padding: 20px;
border-left: 1px solid var(--gray);
border-top: 1px solid var(--gray);
position: relative;
&:nth-child(4n + 2) {
border-right: 1px solid var(--gray);
}
&:nth-last-child(-n+4) {
border-bottom: 1px solid var(--gray);
}
.icon{
width: 100%;
max-height: 1000px;
overflow: hidden;
img{
/*width: 25px;*/
height: 60px;
padding-bottom: 10px;
}
}
.number{
display: flex;
align-items: center;
gap: 10px;
p,h5{
margin: unset;
}
p{
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-m);
color: var(--black);
margin: unset;
}
h5{
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-s);
color: var(--black);
margin: unset;
}
}
.desc-service{
position: absolute;
top: 20px;
width: calc(100% - 40px);
left: 20px;
opacity: 0;
transition: opacity 0.5s ease-out;
p{
margin: unset;
}
}
&:hover{
.desc-service{
opacity: 1;
}
.number,.icon{
opacity: 0;
opacity: 0;
}
}
}
}
}
}
section.svc-detail-second-carou{
position: relative;
.content.foo{
padding-bottom: unset;
}
.content-list-second{
padding-top: 20px;
padding-bottom: 120px;
position: relative;
}
.svcl-hdr{
justify-content: center;
text-align: center;
}
.svc-list-second{
cursor: grab;
display: flex;
gap: 25px;
overflow-x: scroll;
padding: 0px calc(var(--gap) + 30px) 0px;
padding-bottom: 80px;
margin-bottom: -40px;
.list{
flex: 0 0 250px;
border: 2px solid var(--gray-2);
padding: 30px;
border-radius: 10px;
text-align: center;
position: relative;
h5{
font-family: Jost;
font-weight: 100;
font-size: var(--font-xm);
color: var(--black);
margin: unset;
margin-top: 10px;
}
p{
margin-top: 5px;
}
svg{
width: 60px;
fill: var(--black);
&.pink{
fill: var(--pink);
}
}
&:nth-child(odd) {
position: relative;
top: 40px;
}
.arrow-bottom{
opacity: 0;
position: absolute;
bottom: -25px;
left: 50%;
height: 50px;
width: 50px;
border-radius: 50%;
background: var(--pink-pastel);
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.3s ease-in-out;
svg{
fill: white;
width: 15px;
transform: rotate(45deg);
}
}
&:hover{
.arrow-bottom{
opacity: 1;
}
}
}
&::-webkit-scrollbar {
height: 0px;
}
}
}
section.quote{
.content{
padding: 80px var(--gap);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
&>p{
font-family: CenturyGothic;
font-weight: 400;
font-size: var(--font-m);
line-height: calc(var(--font-m) + 8px);
text-align: center;
margin: unset;
width: 100%;
max-width: 800px;
color: var(--stale-blue);
}
a{
margin-top: 30px;
}
}
}
section.article-detail{
.header{
padding: 200px 20% 0px;
h5{
padding: unset;
}
&>div{
margin-top: 30px;
img{
width: 100%;
}
}
.img-error{
background: var(--gray-bold);
padding: 20px;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
img{
width: 120px;
}
}
}
.content{
padding: 30px 20% 80px;
.top{
display: flex;
gap: 15px;
margin-bottom: 40px;
img{
width: 40%;
height: auto;
aspect-ratio: 6/9;
object-fit: cover;
border-radius: 8px;
}
.desc{
padding-top: 20px;
p{
font-size: var(--font-s);
line-height: 30px;
margin: unset;
margin-bottom: 16px;
color: #555;
}
}
}
p,h3,h4,h5,h6,blockquote,li{
font-family: Jost;
font-weight: 400;
color: var(--black);
}
.body{
p,span,b{
font-family: Jost;
font-size: var(--font-xxm);
line-height: 30px;
margin: unset;
margin-bottom: 16px;
color: var(--black);
}
h3,h2,h1{
font-family: Jost;
font-weight: 100;
font-size: var(--font-xm);
line-height: 30px;
margin: unset;
margin-bottom: 16px;
}
h1{
font-size: var(--font-xxxl);
line-height: calc(var(--font-xxxl) + 8px);
color: var(--black);
b{
font-family: CenturyGothic;
font-size: inherit;
font-weight: bold;
}
}
h2{
font-size: var(--font-xxl);
line-height: calc(var(--font-xxl) + 8px);
color: var(--black);
}
h3{
font-size: var(--font-xl);
line-height: calc(var(--font-xl) + 8px);
margin-bottom: 16px;
color: var(--black);
}
h4{
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-l);
line-height: 26px;
margin: unset;
margin-bottom: 16px;
color: var(--black);
}
h5{
font-family: CenturyGothic;
font-size: var(--font-m);
font-weight: 100;
line-height: 30px;
margin: unset;
margin-bottom: 16px;
color: var(--black);
}
h6{
font-family: CenturyGothic;
font-size: var(--font-xm);
font-weight: 100;
line-height: 30px;
margin: unset;
margin-bottom: 16px;
color: var(--black);
}
h1,h2,h3,h4,h5,h6{
b{
font-family: CenturyGothic;
font-size: inherit;
font-weight: bold;
}
span{
font-family: CenturyGothic;
font-size: inherit;
}
}
blockquote{
font-size: var(--font-xxm);
line-height: 25px;
margin-block-start: 1em;
margin-block-end: 1em;
margin-left: unset;
padding: 1em 2em;
padding-right: unset;
border-left: 1px solid rgb(223 124 155);
p{
margin-bottom: unset;
}
}
figure{
width: fit-content;
margin: unset;
max-width: 100%;
img{
max-width: 100%;
object-fit: cover;
}
}
.wp-block-gallery{
display: flex;
gap: 10px;
flex-wrap: wrap;
&>figure{
flex: 0 0 calc(50% - 5px);
img{
aspect-ratio: 12 / 9;
width: 100%;
height: auto;
}
}
}
&>figure:first-child {
float: left;
padding-right: 50px;
width: 40%;
height: auto;
aspect-ratio: 6 / 9;
object-fit: cover;
border-radius: 8px;
margin-bottom: 18px;
img{
width: 100%;
aspect-ratio: 5 / 7;
}
}
}
}
}
section.footer{
&>div:nth-child(1){
background: #ADB9CA40;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.content{
position: relative;
z-index: 2;
padding: 40px var(--gap) 20px;
display: flex;
flex-direction: column;
.foo-top{
display: flex;
.log{
flex: 0 0 25%;
border-right: 1px solid #80808080;
padding-bottom: 30px;
img{
width:75px;
margin-bottom: 18px;
}
div{
padding-right: 25px;
}
h6{
font-family: CenturyGothic;
font-weight: bold;
font-size: var(--font-s);
line-height: 23px;
margin: unset;
margin-bottom: 12px;
color: var(--black);
}
p{
font-family: CenturyGothic;
font-weight: 400;
font-size: var(--font-xs);
line-height: 20px;
margin: unset;
color: var(--black);
}
}
.service{
flex: 0 0 75%;
&>div{
padding-left: 25px;
display: flex;
&>div{
flex: 0 0 40%;
&>div{
padding: 0px 20px;
}
.serv-l{
display: flex;
justify-content: space-between;
&>div{
display: flex;
flex-direction: column;
}
flex: 1;
}
hr{
color: var(--gray-5);
margin-left: -8px;
margin-right: -8px;
}
}
&>div:nth-child(3){
flex: 0 0 20%;
}
.serv-h{
font-family: CenturyGothic;
font-weight: bold;
font-size: var(--font-xxm);
line-height: 23px;
color: rgb(223 124 155);
}
.serv-l{
a{
font-family: CenturyGothic;
font-size: var(--font-xs);
line-height: 20px;
text-decoration: unset;
color: inherit;
color: var(--black);
}
}
.serv-r{
text-align: right;
.serv-l{
div{
width: 100%;
}
}
}
}
}
}
.foo-loc{
display: flex;
justify-content: space-between;
padding-top: 20px;
border-top: 1px solid #80808080;
&>div:nth-child(1){
flex: 0 25%;
font-family: CenturyGothic;
font-size: var(--font-s);
line-height: 20px;
color: var(--black);
}
&>div:nth-child(2){
display: flex;
flex: 0 75%;
justify-content: space-between;
&>span:nth-child(1){
padding-left: 45px;
}
span{
cursor: pointer;
position: relative;
font-family: CenturyGothic;
font-size: var(--font-s);
line-height: 20px;
color: var(--black);
&:hover{
.tooltip{
display: block;
}
}
}
.tooltip{
display: none;
box-shadow: 0px 0px 10px 0px #DF7C9B80;
position: absolute;
right: -82px;
width: 170px;
bottom: 16px;
background: rgb(255 255 255 / 50%);
padding: 15px 30px;
border-radius: 15px;
a{
/*color: var(--black-2);*/
color: var(--black);
text-decoration: unset;
}
}
}
}
}
}
section.footer2{
background: var(--black-gray);
overflow: hidden;
.circle-gra{
top: -10vw;
right: -10vw;
}
.content{
padding: 80px var(--gap) 20px;
.top{
color: white;
width: 72%;
h6{
margin: unset;
font-family: CenturyGothic;
font-size: calc(var(--font-xxl) - 5px);
font-weight: 100;
margin-bottom: 10px;
}
h5{
margin: unset;
font-family: CenturyGothic;
color: var(--gray-3);
font-size: calc(var(--font-l) - 1px);
font-weight: 100;
line-height: 38px;
max-width: 750px;
}
h4{
margin: unset;
font-size: calc(var(--font-xl) + 4px);
font-family: CenturyGothic;
font-weight: 100;
margin-top: 80px;
span{
color: var(--pink);
}
svg{
width: 23px;
height: 23px;
}
svg:first-child{
fill: white;
position: relative;
top: -6px;
}
svg:last-child{
fill: white;
width: 20px;
height: 20px;
position: relative;
top: -3px;
left: 15px;
}
}
}
.bottom{
display: flex;
flex-wrap: wrap;
&>h6{
font-family: CenturyGothic;
color: var(--gray);
font-size: var(--font-xxm);
flex: 0 0 100%;
font-weight: 100;
margin: unset;
margin-top: 50px;
margin-bottom: 16px;
}
.left{
display: flex;
flex-wrap: wrap;
flex: 1;
&>div{
flex: 0 0 50%;
margin-bottom: 36px;
h6{
width: 90%;
color: white;
font-size: var(--font-s);
font-family: CenturyGothic;
font-weight: 100;
margin: unset;
font-weight: bold;
&:nth-child(2){
color: var(--pink);
margin-top: 3px;
margin-bottom: 2px;
}
}
&>a{
text-decoration: unset;
}
p{
width: 80%;
color: gray;
font-size: var(--font-xs);
font-family: CenturyGothic;
margin: unset;
line-height: 18px;
a{
color: inherit;
/*text-decoration: unset;*/
}
&:nth-child(4){
margin-top: 2px;
}
}
}
}
.right{
flex: 0 0 30%;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
&>div{
margin-bottom: 30px;
}
.serv-h{
color: var(--pink);
font-family: CenturyGothic;
font-size: var(--font-s);
}
.serv-l{
div{
display: flex;
flex-direction: column;
gap: 2px;
a{
color: var(--gray);
font-size: var(--font-xs);
font-family: CenturyGothic;
text-decoration: unset;
}
}
}
}
}
}
}
footer.new{
.left{
display: flex;
align-items: center;
h5{
font-family: Jost;
font-size: 10px;
color: var(--white-50);
font-weight: 100;
margin: unset;
margin-right: 40px;
}
div.list{
display: flex;
gap: 20px;
a{
font-size: 12px;
color: white;
}
}
}
.right{
flex: 0 0 33%;
display: flex;
align-items: center;
p{
margin: unset;
font-size: calc(var(--font-xs) - 1px);
text-align: right;
font-family: Jost;
width: 400px;
color: gray;
width: 320px;
span{
display: block;
&:nth-child(1){
font-weight: bold;
}
}
}
img{
margin-left: 20px;
width: 60px;
/*height: fit-content;*/
}
}
}
.custom-select {
position: relative;
select {
display: none; /*hide original SELECT element: */
}
.select-selected {
background-color: DodgerBlue;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 10px;
right: 5px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}
/* style the items (options), including the selected item: */
.select-selected {
font-family: CenturyGothic;
background: transparent;
color: white;
border-radius: 5px;
/*border: 1px solid white;*/
padding: 4px 24px 4px 8px;
cursor: pointer;
font-size: var(--font-xs);
white-space: nowrap;
min-width: 80px;
}
.select-items{
div{
font-family: CenturyGothic;
color: white;
padding: 2px 8px;
font-size: var(--font-xs);
border: 1px solid white;
border-radius: 25px;
cursor: pointer;
/*&:last-child{
border-bottom: unset;
}*/
}
}
/* Style items (options): */
.select-items {
position: absolute;
top: calc(100% - 8px);
left: 0;
right: 0;
z-index: 99;
display: flex;
flex-direction: column;
gap: 6px;
/*border: 1px solid white;*/
/*border-top: unset;*/
padding: 4px;
padding-top: 8px;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgb(255 255 255 / 20%);
font-weight: bold;
}
.same-as-selected{
display: none;
}
}
section.word{
.content{
/*padding: 0px 10% 0px;*/
.breadcrumb{
position: absolute;
top: 200px;
z-index: 3;
left: var(--gap);
}
#map-wrap{
/*height: 90vh;*/
text-align: center;
position: relative;
#map-dotted{
height: 100%;
}
.land{
fill: #E4E4E4;
stroke: #CCC;
transition: 250ms;
stroke-width: 0.15;
}
.none{
}
.reg_presence{
position: absolute;
left: var(--gap);
right: auto;
top: 35%;
text-align: left;
max-width: 50%;
z-index: 3;
h6{
font-family: CenturyGothic;
font-size: 33px;
margin: unset;
margin-bottom: 16px;
font-weight: bold;
color: var(--black-2);
span{
color: var(--pink);
}
}
p,&>div{
font-family: CenturyGothic;
font-size: 21px;
line-height: 30px;
margin: unset;
width: 80%;
color: var(--blue-2);
}
}
foreignObject{
div{
/*cursor: help;*/
/*&:before{
content: "";
width: 1.1px;
height: 1.1px;
display: block;
position: relative;
left: 0px;
bottom: -3px;
border-radius: 50%;
background: rgb(223 124 155);
}*/
div.pulse{
content: "";
width: 1.1px;
height: 1.1px;
display: block;
position: relative;
left: 1px;
bottom: -3px;
border-radius: 50%;
background: rgb(223 124 155);
span{
position: absolute;
width: 100%;
height: 100%;
left: 0;
background: inherit;
border-radius: inherit;
}
}
&.pinbtm{
/*&:before{
bottom: -6px;
}*/
div.pulse{
bottom: -6px;
}
}
&.pinbtm2{
div.pulse{
bottom: -7px;
}
}
&.blink_map{
/*&:before{
animation: blink_map 1s infinite;
}*/
div{
span{
animation: pulseAnimate 2s ease-in-out infinite;
}
}
}
.lokasi{
display: block;
}
.loc{
display: none;
padding-left: 0px;
a{
text-decoration: unset;
}
}
&:hover{
.loc{
display: block;
}
.lokasi{
display: none;
}
}
}
h5,h3,p{
text-align: left;
font-size: 2.5px;
font-family: CenturyGothic;
margin: unset;
padding-left: 3.5px;
color: var(--black);
}
p{
font-size: 2px;
}
&:hover{
h5,p{
color: var(--black-2);
}
}
}
.hasinfo{
fill: #A1C9E6;
stroke: #DDD;
cursor: pointer;
}
}
}
}
section.design_and_build{
padding: 30px 0px;
.content{
min-height: 100vh;
position: relative;
padding: 30px 0px;
overflow-x: clip;
.blog-header{
position: absolute;
padding: 120px 0px 0px var(--gap);
width: 300px;
&>h5{
font-size: var(--font-xxl);
font-weight: 100;
margin-bottom: 16px;
padding-left: unset;
line-height: calc(var(--font-xxl)+5px);
margin: unset;
color: var(--black);
margin: unset;
margin-bottom: 10px;
}
&>p{
font-family: CenturyGothic;
font-weight: 100;
font-size: calc(var(--font-xm) + 1px);
line-height: calc(var(--font-xm) + 9px);
padding-left: unset;
color: gray;
margin: unset;
margin-bottom: 20px;
}
.hover_new{
p, span {
font-size: 17px !important;
}
}
}
.list_dab{
display: flex;
gap: calc(14.5px * var(--ukuran));
width: calc(100px * 5 * var(--ukuran));
top: 37.5vh;
position: sticky;
/*left: calc(100px * 5 * var(--ukuran));*/
transition: transform 0.3s ease-out;
.item{
flex: 0 0 calc(140px * var(--ukuran));
position: relative;
.comp{
position: relative;
padding: 17px;
&:before{
content: "";
display: block;
position: absolute;
width: calc(100%);
height: 100%;
border: calc(15px * var(--ukuran)) solid var(--gray-bold);
opacity: 0.7;
}
&.odd{
&:before{
border-radius: 50% 50% 0 0;
clip-path: inset(0 0 50% 0);
top: calc(-15px * var(--ukuran));
left: calc(-15px * var(--ukuran));
}
}
&.even{
&:before{
border-radius: 0 0 50% 50%;
clip-path: inset(50% 0 0 0);
bottom: calc(-14.5px * var(--ukuran));
left: calc(-15px * var(--ukuran));
}
}
.bor{
width: calc(110px * var(--ukuran));
height: calc(110px * var(--ukuran));
color: #df7b9b;
border-radius: 50%;
background: white;
border: calc(5px * var(--ukuran)) solid #8496af40;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: unset;
}
h5{
font-family: Jost;
font-weight: 100;
font-size: calc(var(--font-l) * var(--ukuran));
margin: unset;
}
svg{
display: none;
}
}
.desc{
h5{
font-family: CenturyGothic;
font-weight: bold;
font-size: var(--font-m);
margin: unset;
}
p{
margin: unset;
margin-top: 10px;
font-family: Jost;
font-weight: 100;
font-size: var(--font-xm);
}
}
.even{
&+.desc{
top: -250px;
}
}
.desc{
position: absolute;
display: none;
flex-direction: column;
&.even{
flex-direction: column-reverse;
}
}
&.on{
.comp:before{
opacity: 1;
}
}
&.on:nth-child(1){
.comp:before{
border-color: #c4a7bb;
}
}
&.on:nth-child(2){
.comp:before{
border-color: #be94ad;
}
}
&.on:nth-child(3){
.comp:before{
border-color: #c894ac;
}
}
&.on:nth-child(4){
.comp:before{
border-color: #be7f9c;
}
}
&.on:nth-child(5){
.comp:before{
border-color: #c07092;
}
}
&.active{
.comp{
.bor{
border-color: #8496af;
}
h5{
font-weight: bold;
font-size: calc(var(--font-s) * var(--ukuran));
margin-top: -20px;
}
svg{
width: 50px;
display: inline-block;
fill: var(--gray-3);
}
}
.desc{
display: flex;
}
}
}
}
.base_height{
div{
height: var(--speed, 40vh);
}
}
}
}
.bg-svc,.bg-about{
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
background-size: cover;
background-position: center;
opacity: 0.8;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--stale-blue);
mix-blend-mode: color;
}
}
section.design_and_build_snap{
padding-bottom: 100px;
}
section.design_and_build2,section.design_and_build_snap{
margin-bottom: 100px;
margin-top: 100px;
background: transparent;
.header{
position: absolute;
top: 100px;
left: var(--gap);
padding-top: unset;
margin-top: unset;
h5{
font-family: Century Gothic;
font-weight: Bold;
font-size: var(--font-xxl);
line-height: calc(var(--font-xxl) + 8px);
color: white;
margin-bottom: unset;
margin-top: 30px;
width: 100%;
span{
color: var(--pink-2);
}
}
}
.content{
/*padding: 0px var(--gap);*/
min-height: 100vh;
.styles_progress{
position: sticky;
width: 500px;
height: 500px;
top: 25vh;
left: 50%;
transform: translateX(-50%);
border-radius: 99.9rem;
/*border: 1px solid #12121233;*/
background: white;
opacity: 0.95;
svg{
width: 100%;
height: auto;
transform: rotate(-90deg);
}
.circle{
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
div{
position: absolute;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #f0f0f0;
/*border: 1px solid var(--pink);*/
transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) .4s;
opacity: 1 !important;
&.active{
background-color: var(--pink);
}
}
}
.paragraph{
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
div{
display: none;
text-align: center;
max-width: 75%;
transition: all 0.5s ease-in-out;
max-width: 250px;
h5{
font-family: CenturyGothic;
font-size: var(--font-xl);
margin: unset;
margin-bottom: 30px;
font-weight: 100;
color: var(--stale-blue);
}
img,svg{
width: 100px;
transform: rotate(0deg);
}
ul{
margin-top: 30px;
padding-left: 0px;
margin-bottom: unset;
list-style-type: none;
li{
font-family: Jost;
color: var(--gray-5);
}
}
&.active{
display: block;
}
}
}
}
.base_height{
div{
height: var(--speed, 40vh);
}
}
}
.background{
display: block;
width: 150vw;
bottom: -30vh;
left: -50vw;
height: 50vh;
position: absolute;
/*background: linear-gradient(to bottom, #69626200 0%, #696262 100%);*/
opacity: 0.2;
z-index: 1;
}
}
.bg-about{
&::before {
background-color: var(--stale-blue);
mix-blend-mode: color;
}
}
section.abt_exp{
margin-top: unset;
.circle{
div{
&.active{
background-color: var(--pink-2) !important;
}
}
}
.paragraph{
div{
ul{
li{
font-size: 21px;
color: gray;
}
}
}
}
}
section.abt_exp_text{
background: transparent;
background: linear-gradient(360deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
margin-top: -50vh;
.content{
padding: 100px 20% 100px;
position: sticky;
z-index: 2;
top: 0;
height: calc(100vh - 200px);
p{
font-family: CenturyGothic;
font-size: var(--font-m);
line-height: calc(var(--font-m) + 8px);
color: white;
margin-bottom: unset;
margin-top: 40px;
overflow: hidden;
max-height: 0px;
position: absolute;
width: 60%;
top: 50%;
transform: translateY(-50%);
&.active{
max-height: 1000px;
}
}
}
.gap{
div{
height: 40vh;
}
}
}
section.service_card{
/*background: var(--pink);*/
.content{
padding: 50px var(--gap) 100px;
.list{
display: flex;
gap: 30px;
.card{
flex: 0 0 calc(25% - 20px);
aspect-ratio: .76;
transition: all 0.5s ease-in-out;
position: relative;
.bg{
border: 2px solid var(--black);
position: absolute;
top: 0px;
left: 0px;
width: calc(100% - 4px);
height: calc(100% - 4px);
border-radius: 10px;
transition: all 0.5s ease-in-out;
background: white;
}
a{
background: white;
color: inherit;
text-decoration: unset;
display: flex;
height: 100%;
flex-direction: column;
position: relative;
z-index: 2;
border: 2px solid var(--black);
border-radius: 10px;
padding: 25px;
h5{
font-family: CenturyGothic;
font-size: var(--font-m);
margin: unset;
margin-top: 20px;
font-weight: 100;
color: var(--black);
}
p{
font-family: Jost;
margin: unset;
font-size: var(--font-xs);
color: var(--black);
}
div.desc{
flex: 1;
display: flex;
align-items: flex-end;
}
}
span{
font-size: var(--font-xxl);
}
&:hover{
transform: rotate(6deg) translate(17px, -12px);
a{
background: var(--pink);
color: white;
border-color: var(--pink);
h5,p{
color: white;
}
span{
color: white;
}
}
.bg{
transform: rotate(-12deg) translate(-12%, -9%);
}
}
}
}
}
}
section.foo_hover{
.header2{
padding-top: 70px;
p{
flex: 0 0 calc(45% - 140px);
font-size: var(--font-m);
margin: unset;
}
h5{
font-size: var(--font-s);
line-height: unset;
text-transform: uppercase;
a,button{
margin-top: 50px;
}
}
}
.content{
padding: 50px var(--gap) 120px 0%;
.lists{
position: relative;
.item{
display: flex;
cursor: pointer;
.img{
flex: 0 0 50%;
display: flex;
position: absolute;
left: 0;
top: 0;
width: 50%;
max-width: calc(10% + 515px);
height: 430px;
.border{
position: absolute;
width: 90%;
max-width: 650px;
/*aspect-ratio: 16/9;*/
height: calc(100% - 25px);
opacity: 0;
background: white;
overflow: hidden;
img{
position: absolute;
object-fit: cover;
}
}
}
.right{
flex: 0 0 50%;
margin-left: 50%;
border-top: 1px solid var(--gray);
h5{
margin: unset;
padding: 10px 0px;
font-family: CenturyGothic;
font-size: calc(var(--font-xxl) - 0px);
color: var(--gray);
font-weight: 100;
padding-bottom: unset;
}
h6{
margin: unset;
font-family: CenturyGothic;
font-size: calc(var(--font-xm) - 0px);
color: var(--gray);
font-weight: 100;
padding-bottom: 10px;
}
p{
margin: unset;
font-family: Jost;
font-size: var(--font-xxm);
/*display: none;*/
max-height: 0px;
color: var(--black);
overflow: hidden;
transition: max-height 1s cubic-bezier(0.49, 0.71, 0.24, 0.9);
padding-left: 3px;
margin-bottom: 12px;
&.question{
color: #f8e4eb;
}
}
}
&.active{
.img{
.border{
opacity: 1;
img{
animation: foo_hover 0.4s ease both;
}
}
}
.right{
border-color: var(--black);
h5{
color: var(--pink-pastel);
}
p{
display: block;
max-height: 1000px;
transition: max-height 1.5s cubic-bezier(0.61, 0.06, 0.92, 0.35);
}
}
}
&:first-child{
.right{
border-top: unset;
}
}
}
.button_right{
display: flex;
cursor: pointer;
.left{
flex: 0 0 50%;
}
.right{
padding-top: 50px;
}
}
}
}
&.foo_hover_service{
.content {
.lists {
.item {
.right {
h5 {
font-size: calc(var(--font-xl) - 0px);
}
}
.img{
.border{
img{
object-fit: contain;
}
}
}
}
}
}
}
&.hover_about{
background: var(--gray-2);
overflow: hidden;
.circle-gra{
transform: translate(50%,50%);
}
.header_flex{
.left{
flex: 1;
}
.right{
flex: 0 0 300px;
}
}
.content{
padding: 10px var(--gap) 80px;
.lists{
display: flex;
align-items: flex-start;
}
.img{
flex: 0 0 calc(50% - 100px);
padding-right: 100px;
.border{
background: transparent;
position: relative;
flex-direction: row;
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: space-evenly;
gap: 20px;
column-gap: 30px;
img{
max-width: 100%;
max-width: 65px;
height: fit-content;
object-fit: contain;
position: relative;
/*margin-right: 30px;*/
/*margin-bottom: 20px;*/
animation: none;
filter: grayscale(100%);
opacity: 0.6;
&:hover{
filter: grayscale(0%);
opacity: 1;
}
&.active{
filter: grayscale(0%);
opacity: 1;
}
}
}
}
.item{
.right{
flex: 0 0 100%;
margin-left: unset;
h5{
font-size: calc(var(--font-xl) - 0px);
padding-bottom: unset;
color: #333333E5;
}
p{
margin-bottom: 16px;
}
}
&:first-child{
.right{
border-top: unset;
}
}
}
}
}
}
section.svc_hover{
.lists{
display: flex;
background-size: cover;
background-position: center;
height: 550px;
position: relative;
overflow: hidden;
&:before{
content: "";
position: absolute;
width: 100%;
height: 100%;
content: "";
display: block;
background: #31313159;
z-index: 2;
top: 0;
left: 0;
}
.item{
padding: 2.6em 2.4em;
display: flex;
/*cursor: pointer;*/
position: relative;
z-index: 2;
flex: 1;
border-left: 1px solid #ffffff40;
border-bottom: 1px solid #ffffff40;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
h5{
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-l);
color: white;
margin: unset;
font-weight: bold;
}
h6{
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-s);
color: white;
margin: unset;
}
p{
font-family: Jost;
overflow: hidden;
max-height: 0px;
transition: max-height 0.5s ease-out;
color: white;
margin-bottom: unset;
margin-top: 5px;
&.question{
color: #f8e4eb;
}
}
.number{
opacity: 1;
font-size: var(--font-l);
color: white;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
position: relative;
z-index: 3;
}
.number-inside{
opacity: 0;
font-size: var(--font-xxl);
color: #f8e4eb !important;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
position: relative;
z-index: 3;
}
.right{
position: relative;
z-index: 3;
}
svg{
margin-top: 15px;
height: 20px;
fill: white;
transform: rotate(45deg);
transition: all 0.5s ease-in-out;
margin-left: 5px;
}
&:before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
}
&:after{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
}
&:hover{
&:before{
opacity: 1;
filter: blur(8px);
background: #1616167d;
}
&:after{
background: #fa93b3a1;
opacity: 1;
}
.number{
opacity: 0;
transition: all 0.5s ease-in-out;
}
.number-inside{
opacity: 1;
transition: all 0.5s ease-in-out;
}
p{
max-height: 1000px;
transition: max-height 1s ease-in;
}
svg{
transform: rotate(0deg);
}
}
}
&.max-4{
flex-wrap: wrap;
height: 1100px;
.item{
flex: 0 0 calc(25% - 4.87rem);
}
}
&.max-3{
flex-wrap: wrap;
height: 1100px;
.item{
flex: 0 0 calc(33.33% - 4.87rem);
}
}
}
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
.modal-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.modal-dialog {
position: relative;
width: 90%;
max-width: 500px;
margin: 50px auto;
background: white;
/*border-radius: 12px;*/
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
opacity: 0;
transform: translateY(-30px);
transition: all 0.4s ease;
overflow: hidden;
}
.modal-header {
padding: 20px 24px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: flex;
justify-content: space-between;
align-items: center;
h3{
margin: unset;
}
}
.modal-title {
font-size: 1.5rem;
font-weight: 600;
}
.modal-close {
background: rgba(255, 255, 255, 0.2);
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
color: white;
font-size: var(--font-xm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s;
}
.modal-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.modal-body {
padding: 24px;
max-height: 60vh;
overflow-y: auto;
}
.modal-footer {
padding: 20px 24px;
background: #f8f9fa;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.modal-content {
line-height: 1.6;
color: #555;
}
.modal-icon {
text-align: center;
font-size: var(--font-xxl);
margin-bottom: 20px;
}
&.show{
display: block;
.modal-backdrop {
opacity: 1;
}
.modal-dialog {
opacity: 1;
transform: translateY(0);
}
}
}
#teamModal{
.modal-dialog{
max-width: 50vw;
}
.modal-body{
display: flex;
.modal-close{
position: absolute;
right: 9px;
top: 9px;
background: var(--pink);
/*color: var(--pink);*/
}
.modal-icon{
flex: 0 0 40%;
margin-bottom: unset;
img{
width: 100%;
aspect-ratio: 12/16;
object-fit: cover;
display: block;
}
}
.modal-content{
padding-left: 20px;
p,h6,h5{
margin: unset;
}
h6,h5{
font-family: CenturyGothic;
font-weight: 100;
}
p{
font-family: Jost;
font-size: var(--font-s);
}
.border{
margin: 0px 0px 20px;
h5{
font-size: var(--font-xxl);
font-weight: bold;
color: var(--stale-blue);
line-height: normal;
}
p{
font-size: var(--font-l);
&#phone,&#email{
font-size: var(--font-xm);
span{
color: var(--gray-5);
}
a{
color: #555;
text-decoration: unset;
}
}
}
#title{
margin-bottom: 30px;
}
.list_icon{
display: flex;
gap: 10px;
margin-top: 20px;
a{
border-radius: 50px;
background: var(--pink);
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
}
svg{
width: 15px;
fill: white;
}
}
}
h6{
font-size: var(--font-xm);
color: var(--pink);
}
}
}
}
button.hover_new,a.hover_new{
border-radius: 50px;
border: 1px solid var(--stale-blue);;
padding: 5px;
display: flex;
align-items: center;
font-family: Jost;
padding-left: 10px;
background: white;
cursor: pointer;
overflow: hidden;
position: relative;
width: fit-content;
text-decoration: unset;
color: inherit;
span,p{
padding-left: 5px;
font-weight: bold;
position: relative;
z-index: 2;
margin: unset;
font-size: var(--font-xs) !important;
color: var(--black-2);
}
p{
font-weight: 100;
margin: unset !important;
}
div{
width: 10px;
height: 10px;
padding: 10px;
border-radius: 50px;
background: var(--stale-blue);
margin-left: 10px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
svg{
fill: white;
position: relative;
z-index: 2;
}
&:before{
content: "";
display: block;
width: 30px;
height: 30px;
right: 0;
background: var(--stale-blue);
position: absolute;
transition: all 0.3s ease-in-out;
}
}
&:hover{
/*background: var(--stale-blue);*/
color: white;
p{
color: white;
}
span{
color: var(--pink);
}
div{
overflow: unset;
position: unset;
&:before{
right: 0;
width: 100%;
height: 200px;
}
}
}
}
.team-home{
.hover_new{
p,span{
font-size: 17px !important;
}
}
}
.map-overlay {
position: absolute;
left: 0;
right: 0;
pointer-events: none;
z-index: 1;
&.top-gradient {
top: 0;
height: 20%;
background: linear-gradient(to bottom,
rgba(255, 255, 255, 0.9) 0%,
rgba(255, 255, 255, 0) 100%
);
}
&.bottom-gradient {
bottom: 0;
height: 20%;
background: linear-gradient(to top,
rgba(255, 255, 255, 0.9) 0%,
rgba(255, 255, 255, 0) 100%
);
}
}
.contact_word{
.content{
#map-wrap{
overflow: hidden;
}
}
.top-gradient{
top: 0px;
left: 0px;
height: 100%;
background: linear-gradient(to right bottom, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 50%);
}
}
/* Responsive */
@media (max-width: 768px) {
.modal-dialog {
width: 95%;
margin: 20px auto;
}
.modal-body {
max-height: 70vh;
}
}
.txt-center{
text-align: center;
}
section.crr-top{
/*padding-top: 80px;*/
.header_flex{
.left{
max-width: 720px;
flex: 0 0 100%;
h5{
font-size: calc(var(--font-xxl) + 2px);
line-height: calc(var(--font-xxl) + 2px + 8px);
color: var(--black-2);
span{
color: var(--pink);
}
}
p{
font-family: Jost;
font-size: calc(var(--font-xm) + 2px);
line-height: calc(var(--font-xm) + 2px + 8px);
color: var(--black-2);
}
}
}
.img_cover{
height: 400px;
position: relative;
.overlay{
content: "";
display: block;
background: #ECACC159;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.img{
height: 100%;
/*background-size: cover;*/
background-size: calc(100% + 100px);
background-position: bottom;
mix-blend-mode: luminosity;
}
&.active{
.img{
mix-blend-mode: unset;
}
}
}
.content{
padding: 60px var(--gap);
position: relative;
.circle-gra{
right: 50%;
top: 50%;
transform: translate(50%,-50%);
width: 60vw;
}
.txt1{
margin-bottom: 160px;
p{
font-family: CenturyGothic;
font-size: var(--font-xm);
line-height: calc(var(--font-xm) + 12px);
max-width: 380px;
}
}
.txt2{
display: flex;
.left{
flex: 1;
}
.right{
flex: 0 0 470px;
}
p,h3{
margin: unset;
}
p{
font-family: Jost;
font-size: var(--font-s);
line-height: calc(var(--font-s) + 6px);
max-width: 230px;
}
h3{
font-family: CenturyGothic;
font-weight: 100;
font-size: calc(var(--font-xxl) + 4px);
line-height: calc(var(--font-xxl) + 12px);
color: var(--black-2);
}
}
}
}
section.crr_culture{
background: var(--pink-2);
.circle-gra{
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.250962) 32.21%, rgba(255, 255, 255, 0) 100%);
top: 50%;
right: 50%;
transform: translate(50%, -50%);
z-index: -1;
width: 55vw;
}
.header{
padding-top: 60px;
h5{
font-size: calc(var(--font-xl) + 2px);
line-height: calc(var(--font-xl) + 2px + 8px);
font-weight: bold;
color: white;
}
p{
color: white;
font-size: calc(var(--font-xxm) + 1px);
line-height: calc(var(--font-xxm) + 1px + 8px);
}
}
.content{
padding: 40px var(--gap);
.list{
display: flex;
flex-wrap: wrap;
gap: 30px;
&>div{
flex: 0 0 calc(25% - 71px);
background: var(--pink);
padding: 24px;
aspect-ratio: 1/1;
border-radius: 25px;
display: flex;
flex-direction: column;
justify-content: flex-end;
max-width: 230px;
box-sizing: border-box;
svg{
width: 30px;
}
h5{
color: white;
font-family: CenturyGothic;
font-weight: bold;
font-size: calc(var(--font-xm) + 2px);
line-height: calc(var(--font-xm) + 2px + 8px);
margin: unset;
flex: 1;
display: flex;
align-items: flex-end;
}
p{
color: white;
font-family: Jost;
font-weight: 100;
font-size: calc(var(--font-xxm) - 2px);
line-height: calc(var(--font-xxm) - 2px + 8px);
margin: unset;
}
}
}
}
.footer_flex{
padding-bottom: 60px;
div{
max-width: 600px;
p{
font-family: Jost;
color: white;
font-size: calc(var(--font-xxm) + 1px);
line-height: calc(var(--font-xxm) + 1px + 8px);
}
}
}
}
section.crr-list{
overflow: hidden;
.circle-gra{
top: 50%;
transform: translate(50%,0);
z-index: -1;
}
.header_flex{
padding-bottom: 80px;
.left{
max-width: 750px;
flex: 0 0 100%;
margin-bottom: 60px;
h5{
color: var(--black-2);
}
p{
font-family: Jost;
font-size: var(--font-m);
line-height: calc(var(--font-m) + 8px);
color: var(--black-2);
}
}
.crr_header{
display: flex;
flex-wrap: wrap;
gap: 40px;
&>div{
flex: 0 0 calc(25% - 40px);
h5{
font-family: Century Gothic;
font-weight: bold;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
margin: unset;
color: var(--black-2);
}
p{
font-family: Jost;
font-weight: 100;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
margin: unset;
color: var(--gray-5);
width: 90%;
}
}
}
}
.content{
padding: 100px var(--gap) 100px;
background: var(--gray-2);
position: relative;
z-index: 2;
.h_content{
padding-bottom: 50px;
max-width: 500px;
h5{
font-family: Century Gothic;
font-weight: bold;
font-size: calc(var(--font-xl) + 2px);
line-height: calc(var(--font-xl) + 2px + 8px);
margin: unset;
color: var(--black-2);
margin-bottom: 12px;
span{
color: var(--pink-2);
}
}
p{
font-family: Jost;
font-weight: 100;
font-size: calc(var(--font-xxm) + 1px);
line-height: calc(var(--font-xxm) + 1px + 8px);
margin: unset;
color: var(--gray-5);
}
}
.list-category{
display: flex;
flex-wrap: wrap;
gap: 10px;
.filter,&>form>div{
font-family: CenturyGothic;
font-size: var(--font-s);
line-height: calc(var(--font-s) + 8px);
font-weight: 700;
padding: 6px 24px;
border: 2px solid var(--blue-2);
border-radius: 50px;
color: var(--blue-2);
cursor: pointer;
.select-selected{
padding: unset;
position: relative;
z-index: 1;
svg{
margin-left: 10px;
transition: all 0.5s ease-in-out;
}
&:after{
content: unset;
}
&.select-arrow-active{
svg{
transform: rotate(180deg);
}
}
}
.select-items{
margin-left: -2px;
margin-right: -2px;
margin-top: -7px;
z-index: 0;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
padding-bottom: 8px;
padding-top: 20px;
div{
border: unset;
}
}
svg{
width: 16px;
}
&.position{
color: white;
background: var(--blue-2);
.select-items{
background: var(--blue-2);
}
}
&.countries{
color: white;
background: var(--pink-2);
border-color: var(--pink-2);
.select-items{
background: var(--pink-2);
}
}
}
.list{
border: unset;
display: flex;
gap: 10px;
padding: unset;
flex: 1;
flex-wrap: wrap;
}
.filter{
flex: 0 0 18px;
height: 27px;
padding: 4px 20px;
display: flex;
color: var(--gray-5);
border-color: var(--gray-5);
}
}
.showFilter{
display: none;
form{
padding-top: 20px;
display: flex;
width: 100%;
&>div{
flex: 1;
display: flex;
flex-wrap: wrap;
h3{
flex: 0 0 100%;
font-family: CenturyGothic;
font-weight: bold;
font-size: calc(var(--font-l) + 2px);
line-height: calc(var(--font-l) + 2px + 8px);
margin: unset;
color: var(--black-2);
margin-bottom: 12px;
}
div{
flex: 0 0 50%;
font-family: CenturyGothic;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
color: var(--gray-5);
margin: unset;
input{
margin-right: 10px;
width: 15px;
height: 15px;
}
}
}
}
}
.list-career{
display: flex;
padding-top: 30px;
flex-direction: column;
border-bottom: 1px solid #323f514d;
&>div{
display: flex;
width: 100%;
border-top: 1px solid #323f514d;
padding-top: 30px;
padding-bottom: 20px;
&:first-child{
border-top: unset;
}
.left{
flex: 1;
padding-right: 20px;
h4{
font-family: CenturyGothic;
font-size: var(--font-xm);
line-height: calc(var(--font-xm) + 8px);
color: var(--black-2);
margin: unset;
margin-bottom: 4px;
}
p{
font-family: CenturyGothic;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
color: var(--gray-5);
margin: unset;
}
&>div{
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 12px;
div{
font-family: CenturyGothic;
font-size: var(--font-xs);
line-height: calc(var(--font-xs) + 8px);
padding: 2px 16px;
border: 1px solid var(--black-2);
border-radius: 50px;
/*background: white;*/
color: var(--black-2);
svg{
width: 10px;
height: 10px;
position: relative;
top: 1px;
fill: var(--black-2);
}
}
}
}
.right{
flex: 0 0 100px;
display: flex;
justify-content: flex-end;
a,button{
font-family: CenturyGothic;
font-size: var(--font-xm);
line-height: calc(var(--font-xm) + 8px);
color: var(--black-2);
text-decoration: unset;
font-weight: bold;
border: unset;
height: 30px;
cursor: pointer;
background: transparent;
svg{
width: 15px;
height: 15px;
fill: var(--black-2);
position: relative;
top: 2px;
right: -2px;
}
}
}
}
}
.career-nav{
display: flex;
justify-content: space-between;
padding-top: 30px;
align-items: center;
.nav_left,.nav_right{
border: unset;
background: unset;
cursor: pointer;
svg{
fill: var(--black-2);
width: 17px;
height: 35px;
}
}
.nav_right {
transform: rotate(180deg);
}
div{
font-family: CenturyGothic;
font-size: var(--font-s);
line-height: calc(var(--font-s) + 8px);
color: var(--gray-5);
margin: unset;
border: 1px solid var(--stale-blue);
border-radius: 25px;
padding: 4px 24px;
height: 24px;
}
}
}
}
div#modalCareer{
.modal-backdrop {
opacity: 1;
}
.modal-dialog {
margin: unset;
opacity: 1;
width: 100vw;
max-width: unset;
transform: translateY(0);
display: flex;
flex-direction: column;
height: 100vh;
overflow-y: auto;
}
.modal-top{
background: #F1F5F9;
flex: 0 0 calc(10% + 60px);
width: calc(100vw - calc(var(--gap) * 2));
padding: 60px var(--gap) 0px;
.modal-content{
.crm_head{
display: flex;
width: 100%;
border-top: 1px solid #323f514d;
/*padding-top: 30px;*/
padding-bottom: 60px;
&:first-child{
border-top: unset;
}
.left{
flex: 1;
padding-right: 20px;
h4{
font-family: CenturyGothic;
font-size: var(--font-xm);
line-height: calc(var(--font-xm) + 8px);
color: var(--black-2);
margin: unset;
margin-bottom: 4px;
}
p{
font-family: CenturyGothic;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
color: var(--gray-5);
margin: unset;
}
&>div{
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 12px;
div{
font-family: CenturyGothic;
font-size: var(--font-xs);
line-height: calc(var(--font-xs) + 8px);
padding: 2px 16px;
border: 1px solid var(--black-2);
border-radius: 50px;
/*background: white;*/
color: var(--black-2);
svg{
width: 10px;
height: 10px;
position: relative;
top: 1px;
fill: var(--black-2);
}
}
}
}
.right{
flex: 0 0 100px;
display: flex;
justify-content: flex-end;
a,button{
font-family: CenturyGothic;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
color: var(--gray-5);
text-decoration: unset;
font-weight: 100;
border: unset;
height: 30px;
cursor: pointer;
background: transparent;
svg{
margin-left: 5px;
width: 15px;
fill: var(--black-2);
position: relative;
top: -1px;
right: -2px;
}
}
}
}
}
}
.modal-bottom{
background: var(--gray-2);
width: calc(100vw - calc(var(--gap) * 2));
padding: 60px var(--gap) 100px;
flex: 1;
.side{
display: flex;
gap: 80px;
height: 100%;
max-height: 100%;
.left{
flex: 1;
.tabs{
display: flex;
flex-direction: column;
margin-top: -30px;
height: 100%;
.tab{
flex: 0 0 53px;
border-bottom: 1px solid var(--black-2);
padding-top: 30px;
.header{
display: flex;
justify-content: space-between;
h5{
font-family: CenturyGothic;
font-weight: bold;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
color: var(--black-2);
margin: unset;
}
svg{
width: 20px;
fill: var(--black-2);
transform: rotate(180deg);
cursor: pointer;
}
}
.body{
font-family: Jost;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
color: var(--black-2);
margin: unset;
max-height: 0px;
overflow-y: hidden;
transition: max-height 0.5s ease-in-out;
}
&:first-child{
/*padding-top: unset;*/
}
&:last-child{
border-bottom: unset;
}
&.active{
flex: 1;
padding-bottom: 30px;
.header{
padding-bottom: 30px;
svg{
transform: rotate(0deg);
}
}
.body{
max-height: 330px;
overflow: auto;
ul{
margin: unset;
}
}
}
}
}
}
.right{
flex: 0 0 320px;
.form{
h5{
font-family: CenturyGothic;
font-weight: bold;
font-size: var(--font-xxm);
line-height: calc(var(--font-xxm) + 8px);
color: var(--black-2);
margin: unset;
margin-bottom: 6px;
}
p{
font-family: CenturyGothic;
font-weight: 100;
font-size: var(--font-s);
line-height: calc(var(--font-s) + 8px);
color: var(--black-2);
margin: unset;
margin-bottom: 20px;
}
p#alertMessage{
margin-bottom: 12px;
}
.input-group{
margin-bottom: 9px;
input,textarea{
font-family: Jost;
font-weight: 100;
font-size: var(--font-s);
line-height: calc(var(--font-s) + 8px);
background: #F1F5F9;
border-radius: 25px;
border: transparent;
width: stretch;
padding: 8px 10px 8px 24px;
}
}
.input-flex{
display: flex;
select{
font-family: Jost;
font-weight: 100;
font-size: var(--font-s);
line-height: calc(var(--font-s) + 8px);
background: #F1F5F9;
border-radius: 25px;
border: transparent;
padding: 8px 10px 8px 24px;
border-top-right-radius: unset;
border-bottom-right-radius: unset;
}
input{
border-top-left-radius: unset;
border-bottom-left-radius: unset;
}
}
.input-file{
margin-bottom: 9px;
display: flex;
align-items: center;
justify-content: space-between;
label{
font-family: Jost;
font-weight: 100;
font-size: var(--font-s);
line-height: calc(var(--font-s) + 8px);
color: #828B97;
margin-left: 20px;
margin-right: 20px;
}
input{
display: none;
}
button{
svg{
transform: rotate(315deg);
}
}
}
button{
font-family: Jost;
font-weight: 100;
font-size: var(--font-s);
line-height: calc(var(--font-s) + 8px);
border-radius: 25px;
border: unset;
cursor: pointer;
background: #F1F5F9;
padding: 8px 16px;
display: flex;
align-items: center;
svg{
fill: var(--pink);
width: 12px;
margin-left: 20px;
}
}
}
}
}
}
}
section.gap_contact{
height: 100px;
}
section.crr_conversation{
.content{
display: flex;
min-height: 30vh;
position: relative;
&:before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ECACC159;
}
.left{
flex: 1;
position: relative;
z-index: 2;
padding-left: var(--gap);
padding-right: 12%;
padding-top: 60px;
padding-bottom: 60px;
.segitiga{
position: absolute;
left: 0;
svg{
width: 250px;
position: absolute;
left: 0;
&:nth-child(2){
transform: rotate(340deg);
top: -15px;
}
}
}
h5{
font-family: CenturyGothic;
font-size: calc(var(--font-xl) + 2px);
line-height: calc(var(--font-xl) + 2px + 8px);
font-weight: bold;
color: var(--black-2);
margin: unset;
&.h5_1{
margin-bottom: 12px;
}
}
p{
font-family: Jost;
color: var(--black-2);
font-size: calc(var(--font-xxm) + 1px);
line-height: calc(var(--font-xxm) + 1px + 8px);
margin: unset;
&.p_1{
margin-bottom: 12px;
}
&.p_2{
margin-bottom: 30px;
}
&.p_3{
margin-bottom: 20px;
}
}
div.button{
display: flex;
align-items: center;
gap: 12px;
span{
font-family: CenturyGothic;
font-weight: 100;
font-size: calc(var(--font-xxm) + 1px);
line-height: calc(var(--font-xxm) + 1px + 8px);
color: var(--black-2);
}
a{
font-family: CenturyGothic;
font-weight: bold;
font-size: calc(var(--font-xxm) + 1px);
line-height: calc(var(--font-xxm) + 1px + 8px);
border-radius: 25px;
border: unset;
cursor: pointer;
color: white;
background: #F1F5F9;
padding: 10px 35px 13px;
display: flex;
align-items: center;
text-decoration: unset;
&:nth-child(1){
background: var(--black-2);
}
&:nth-child(3){
background: var(--pink);
padding: 10px 45px 13px;
}
}
}
}
.right{
flex: 0 0 35%;
background-size: cover;
background-position: center;
mix-blend-mode: luminosity;
}
}
}
section.brand-home{
background: var(--gray-2);
.header{
h5{
padding-bottom: 50px;
text-align: center;
font-size: var(--font-xl);
font-weight: 700;
color: var(--stale-blue);
}
}
.content{
padding: 0px 0% 60px;
&>div{
overflow: hidden;
.list{
display: flex;
width: max-content;
gap: 50px;
/*transition: all 0.1s ease-in-out;*/
padding-bottom: 30px;
align-items: center;
&.right{
/*transform: translateX(-50%);*/
}
/*&.anim{
&.left{
animation: brand-to-left 20s linear infinite;
animation-play-state: running;
}
&.right{
animation: brand-to-right 20s linear infinite;
animation-play-state: running;
}
}*/
img{
max-width: 70px;
height: fit-content;
filter: grayscale(100%);
&:hover {
filter: grayscale(0%);
}
}
}
}
}
}
footer{
position: relative;
z-index: 3;
background: var(--black-gray);
display: flex;
justify-content: space-between;
padding: 26px var(--gap);
font-family: Jost;
font-size: var(--font-s);
margin-top: -1px;
div{
color: white;
}
}
.carousel-container {
position: relative;
width: 100%;
height: 100vh;
/*margin: 40px auto;*/
overflow: hidden;
/*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);*/
}
.carousel-track {
display: flex;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.carousel-slide {
flex: 0 0 100%;
width: fit-content;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*background: rgba(255, 255, 255, 0.1);*/
/*backdrop-filter: blur(10px);*/
/*border-radius: 10px;*/
/*border: 1px solid rgba(255, 255, 255, 0.2);*/
/*position: relative;*/
img{
width: 100%;
height: 100vh;
object-fit: cover;
object-position: center;
}
p{
font-family: Jost;
font-weight: 400;
font-size: var(--font-s);
line-height: 20px;
position: absolute;
bottom: 25px;
left: var(--gap);
color: white;
z-index: 3;
b{
font-family: CenturyGothic;
text-transform: capitalize;
font-weight: 100;
}
}
/*&::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(0deg, #00000085, #00000000);
height: 30%;
}*/
a,button{
font-family: Jost;
position: absolute;
bottom: 58px;
right: var(--gap);
color: white;
z-index: 3;
background: transparent;
border: unset;
font-size: var(--font-s);
display: flex;
gap: 12px;
align-items: center;
cursor: pointer;
text-decoration: unset;
img{
width: 15px;
height: 15px;
}
}
}
.scroll-up,.scroll-down{
position: fixed;
display: none;
bottom: 50px;
right: 50px;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.35);
z-index: 3;
border-radius: 50px;
align-items: center;
justify-content: center;
cursor: pointer;
svg{
width: 15px;
height: 15px;
fill: white;
transform: rotate(315deg);
margin: 18px;
}
&.active{
display: flex;
}
}
.scroll-down{
display: none;
right: 120px;
transform: rotate(180deg);
}
.text-acak{
min-height: 55px;
}
.grecaptcha-badge {
visibility: hidden;
}
section.svc-detail{
.header_flex{
.left{
flex: 1;
max-width: 750px;
}
}
}
.mb-1 {
margin-bottom: 10px !important;
}
.svc-list-swiper{
.swiper-button-prev{
left: 25% !important;
svg{
path{
fill: var(--pink-pastel);
}
}
}
.swiper-button-next{
right: 25% !important;
svg{
path{
fill: var(--pink-pastel);
}
}
}
.swiper-slide{
.pad{
padding: 30px;
display: flex;
flex-direction: column;
align-items: center;
/*border: 2px solid white;*/
border-radius: 10px;
transition: all 0.3s ease-in-out;
}
.icon{
/*width: ;*/
text-align: center;
width: 100%;
aspect-ratio: 10/6;
background-size: cover;
border-radius: 10px;
img{
width: 100%;
aspect-ratio: 10/6;
object-fit: cover;
border-radius: 10px;
transition: all 0.3s ease-in-out;
margin-bottom: 20px;
}
}
.number{
position: unset;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
width: 100%;
p{
max-height: 0px;
overflow: hidden;
margin: unset;
transition: all 0.3s ease-in-out;
font-family: Jost;
font-weight: 100;
font-size: var(--font-xl);
margin-top: unset;
padding-right: 5px;
}
h5{
max-height: 0px;
overflow: hidden;
margin: unset;
transition: all 0.3s ease-in-out;
font-family: Jost;
font-weight: 100;
font-size: var(--font-xl);
margin-top: unset;
}
}
.desc-service{
p{
max-height: 0px;
overflow: hidden;
margin: unset;
transition: all 0.3s ease-in-out;
font-family: Jost;
font-weight: 100;
font-size: var(--font-s);
margin-top: unset;
}
}
}
.swiper-slide-active{
.pad{
margin-top: 20px;
}
.icon{
width: 80%;
img{
}
}
.number{
width: 80%;
p,h5{
max-height: 1000px;
}
}
.desc-service{
width: 80%;
p{
max-height: 1000px;
}
}
}
}
.swipe-indicator-svc{
/*display: none;*/
position: absolute;
top: 0px;
z-index: 3;
height: 100%;
width: 100%;
left: calc(0 * var(--gap));
font-size: 27px;
font-weight: 100;
font-family: CenturyGothic;
color: white;
display: flex;
justify-content: flex-end;
&>div{
padding: 25px;
width: 40%;
background: linear-gradient(to right, #69626200 30%, #716b6b4d 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
svg{
fill: white;
height: 40px;
transform: rotate(180deg);
}
}
}
/* ipad pro ukuran 1024 */
@media (max-width: 1024px){
:root{
--gap: 8%;
}
header {
width: 100vw;
overflow: unset;
.content.head_v2 {
max-width: 100vw;
div {
ul {
li{
font-size: var(--font-s);
}
.menu-lang {
span.active {
display: none;
}
}
}
}
}
}
section {
.breadcrumb {
font-size: var(--font-xxm);
}
}
section {
.header_flex {
padding: 60px var(--gap) 60px;
.left {
padding-right: unset;
}
}
}
/** homepage **/
section.vid-background {
& .content {
& .top {
.h1 {
font-size: clamp(26px, 5vw, 34px);
line-height: 1.25;
}
}
& .bottom {
.desc {
font-size: var(--font-l);
line-height: 31px;
}
}
}
}
section.award {
.content {
display: grid;
padding: 35px var(--gap);
}
& p {
&.left {
margin-top: 30px;
width: 720px;
font-size: var(--font-l);
b {
font-size: var(--font-xl);
margin-top: 10px;
line-height: 48px;
}
}
}
.lists {
gap: 32px;
}
}
section.svc-ctr {
&.svc-home, &.svc-about {
.content {
.svc-top-header {
h6 {
font-size: var(--font-xl);
}
}
}
}
}
.sec-carou {
.carousel-general {
left: 80%;
width: 200px;
}
}
section.design_and_build2 {
.content {
padding: unset;
}
}
section.teams {
& .content {
& .listteams {
&.list3 {
padding-left: 0;
}
}
}
&.team-home {
.content {
padding-left: 5%;
}
}
}
section.sticky-carou {
div.sticky-container {
&>img {
/*height: 100vh;*/
object-fit: cover;
}
}
}
section {
.sticky2 {
.container {
.content {
min-height: auto;
aspect-ratio: 6/5;
.img-3 {
bottom: 0vh;
&:hover{
bottom: 0vh;
width: 40vw;
}
}
.img-4 {
left: 2vh;
top: 2vh;
width: 35vw;
&:hover{
bottom: 0vh;
width: 40vw;
}
}
.img-5 {
width: 350px;
&:hover{
width: 450px;
}
}
.img-6 {
right: 10vw;
top: 0vw;
width: 29vw;
&:hover{
right: 5vw;
top: 0vw;
width: 35vw;
}
}
.img-7{
left: 0vh;
bottom: 5vh;
width: 35vw;
&:hover{
left: 0vh;
bottom: 0vh;
width: 40vw;
}
}
}
}
}
}
section.form_new {
.container {
height: 65vh;
&:not(.starter) {
min-height: auto;
}
.input-form {
&>div:nth-child(1) {
max-height: 25vh;
}
}
}
}
section.foo_hover {
.content {
.lists {
.item {
.img {
height: 500px;
}
}
}
}
}
a.follower{
display: none !important;
}
/** **/
/** Resource **/
section.section_project_list{
.header_flex {
padding-top: 200px;
}
}
/** **/
/** Career **/
section.crr-top{
.header_flex {
padding-top: 200px;
}
}
/** **/
section.svc-mainh-hover{
.content{
.svcl-hdr{
p{
font-size: var(--font-xxl);
line-height: var(--font-xxl);
flex: 0 0 350px;
}
}
}
}
section.svc-main-hover{
.content{
.svc-list {
.list {
.name-service {
h5 {
font-size: var(--font-xm);
}
}
.desc-service {
p {
font-size: var(--font-xxm);
line-height: var(--font-xm);
}
}
}
}
}
}
section.svc-addt{
.content{
.svc-list-other{
.list-name{
flex: 0 0 calc(100% - 3px);
h6{
}
}
.list{
flex: 0 0 calc(33.33% - 42px);
border-right: 1px solid var(--gray);
/*border-bottom: 1px solid var(--gray);*/
}
}
}
}
}
/* ===== Resources listing — match ai-associates.com/resources/general ===== */
.article-list2 > .container{ max-width:1640px !important; margin:0 auto !important; padding:0 var(--gap) !important; box-sizing:border-box !important; }
.article-list2 .blog-categories{ padding:0 !important; }
.article-list2 #blogContainer{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:30px !important; padding:34px 0 90px !important; overflow:visible !important; }
.article-list2 #blogContainer > a{ display:flex !important; flex-direction:row !important; align-items:stretch !important; gap:0 !important; background:#fff !important; border:1px solid #e7e8ec !important; border-radius:20px !important; padding:20px !important; overflow:hidden !important; text-decoration:none !important; min-height:300px !important; transition:transform .3s ease, box-shadow .3s ease !important; }
.article-list2 #blogContainer > a:nth-child(even){ background:#f1f3f7 !important; border-color:transparent !important; }
.article-list2 #blogContainer > a:hover{ transform:translateY(-4px) !important; box-shadow:0 16px 36px rgba(40,50,70,.08) !important; }
.article-list2 #blogContainer > a > div:first-child{ flex:0 0 40% !important; max-width:40% !important; }
.article-list2 #blogContainer .blog-image{ width:100% !important; height:100% !important; min-height:260px !important; object-fit:cover !important; border-radius:14px !important; display:block !important; }
.article-list2 #blogContainer .blog-content{ flex:1 1 auto !important; min-width:0 !important; padding:6px 8px 6px 30px !important; display:flex !important; flex-direction:column !important; justify-content:flex-start !important; }
.article-list2 #blogContainer .blog-title{ font-family:CenturyGothic !important; font-weight:bold !important; font-size:var(--font-l) !important; line-height:1.25 !important; color:var(--stale-blue) !important; margin:0 0 14px !important; padding:0 !important; display:-webkit-box !important; -webkit-line-clamp:3 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; }
.article-list2 #blogContainer .blog-category{ display:block !important; margin:0 !important; padding:0 !important; background:none !important; }
.article-list2 #blogContainer .blog-category small{ color:var(--pink) !important; font-family:Jost !important; font-size:var(--font-s) !important; text-transform:none !important; letter-spacing:0 !important; background:none !important; padding:0 !important; }
.article-list2 #blogContainer .blog-excerpt{ margin-top:auto !important; font-family:Jost !important; font-size:var(--font-s) !important; line-height:1.55 !important; color:var(--black) !important; display:-webkit-box !important; -webkit-line-clamp:3 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; }
@media (max-width:1024px){ .article-list2 #blogContainer{ grid-template-columns:1fr !important; } }
@media (max-width:560px){ .article-list2 #blogContainer > a{ flex-direction:column !important; } .article-list2 #blogContainer > a > div:first-child{ flex:none !important; max-width:100% !important; } }
/* Resources cards: grayscale image, colour on hover */
.article-list2 #blogContainer .blog-image{ filter:grayscale(1) !important; transition:filter .45s ease !important; }
.article-list2 #blogContainer > a:hover .blog-image{ filter:none !important; }
/* Resources cards: all uniform white + border (no alternating grey) */
.article-list2 #blogContainer > a,
.article-list2 #blogContainer > a:nth-child(even){ background:#fff !important; border:1px solid #e7e8ec !important; }
/* ===== Resources category filter pills ===== */
.article-list2 .blog-categories{display:flex !important;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0 !important}
.article-list2 .blog-categories a{padding:9px 22px;border-radius:99px;border:1px solid #e2e2e8;color:var(--stale-blue);font-family:Jost;font-size:14px;line-height:1;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s;white-space:nowrap}
.article-list2 .blog-categories a:hover{border-color:var(--pink);color:var(--pink)}
.article-list2 .blog-categories a.active{background:var(--stale-blue);border-color:var(--stale-blue);color:#fff}
/* filtered-out cards (class beats the card's display:flex !important) */
.article-list2 #blogContainer > a.is-hidden{display:none !important}
/* ============================================================
MOBILE & TABLET VERSION — portrait iPad / iPad Pro (<=1024px)
and phones (<=600px). Prioritises large imagery for the
portfolio & project galleries; uncramps the office grid.
============================================================ */
/* ---- Portfolio listing: big, photo-first tiles ---- */
@media (max-width:1024px){
section.section_project_list .project_list .pl_p,
section.abt_project .project_list .pl_p{
flex:0 0 50% !important; width:50% !important;
aspect-ratio:1/1 !important; background-size:cover !important;
}
section.section_project_list .project_list .pl_p::before,
section.abt_project .project_list .pl_p::before{
content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
background:linear-gradient(transparent, rgba(12,16,30,.62)); z-index:1; pointer-events:none;
}
section.section_project_list .project_list .pl_p p,
section.abt_project .project_list .pl_p p{
top:auto !important; bottom:16px !important; left:18px !important; right:16px !important;
font-size:13px !important; line-height:1.45 !important; color:#fff !important;
}
section.section_project_list .project_list .pl_p p b,
section.abt_project .project_list .pl_p p b{ color:#fff !important; }
}
@media (max-width:600px){
section.section_project_list .project_list .pl_p,
section.abt_project .project_list .pl_p{
flex:0 0 100% !important; width:100% !important; aspect-ratio:4/3 !important;
}
section.section_project_list .project_list .pl_p p,
section.abt_project .project_list .pl_p p{ font-size:15px !important; bottom:20px !important; }
}
/* ---- Project detail gallery: full-bleed photos on phones ---- */
@media (max-width:600px){
section .gallery .row .col-6{ flex:0 0 100% !important; max-width:100% !important; }
section .gallery .row > div.desc{ flex:0 0 100% !important; max-width:100% !important; padding:24px var(--gap) !important; }
}
/* ---- Contact / office locations: 2-up on tablet, stacked on phones ---- */
@media (max-width:1024px){ .list-cnt .detail{ flex:0 0 calc(50% - 20px) !important; max-width:none !important; } }
@media (max-width:600px){ .list-cnt .detail{ flex:0 0 100% !important; max-width:none !important; } }
/* ---- Career "Our Core Values": roomier on tablet/phone ---- */
@media (max-width:1024px){ section.crr-list .crr_header > div{ flex:0 0 calc(50% - 20px) !important; } }
@media (max-width:600px){ section.crr-list .crr_header > div{ flex:0 0 100% !important; } }
/* ---- Mobile/tablet: kill horizontal overflow from fixed-width marquees & overlays ---- */
@media (max-width:1024px){
html, body{ overflow-x:clip !important; max-width:100% !important; }
.lists{ max-width:100% !important; overflow:hidden !important; }
/* tidy the mobile nav drawer items (drop default bullets) */
ul.l_menu{ list-style:none !important; padding-left:0 !important; }
ul.l_menu li{ list-style:none !important; padding-left:0 !important; margin-left:0 !important; }
ul.l_menu li::marker{ content:"" !important; }
ul.l_menu li::before{ display:none !important; }
}
/* ============================================================
HOMEPAGE BANNER + AWARDS — mobile / tablet (<=1024px)
============================================================ */
@media (max-width:1024px){
/* darker gradient overlay so banner text is legible */
/* stronger scrim, weighted behind the text */
section.vid-background .background-video{opacity:1 !important;background:linear-gradient(180deg,rgba(6,10,18,.4) 0%,rgba(6,10,18,.4) 34%,rgba(6,10,18,.62) 70%,rgba(6,10,18,.86) 100%) !important}
section.vid-background .content .top .h1{line-height:1.25 !important;padding-left:0 !important}
section.vid-background .content .top .h1 br{display:none !important}
section.vid-background .content .top{padding-bottom:20px !important}
section.vid-background .content .bottom{align-items:flex-start !important}
section.vid-background .content .bottom .desc{font-size:20px !important;line-height:1.45 !important;margin-bottom:18px !important;padding-left:0 !important}
/* STATS: one rotating stat in a small pill + dot indicators */
section.vid-background .bottom .list{width:100% !important;align-self:stretch !important;border-radius:0 !important;margin-left:-5px !important;background:transparent !important}
section.vid-background .bottom .lists{position:relative !important;width:100% !important;max-width:none !important;min-height:68px !important;padding:5px !important;display:block !important;background:rgba(8,12,20,.55) !important;border-radius:34px !important}
section.vid-background .bottom .lists .slash{display:none !important}
section.vid-background .bottom .lists .exp{position:absolute !important;inset:0 !important;display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:flex-start !important;gap:14px !important;padding:0 34px !important;opacity:0 !important;transform:translateY(8px) !important;transition:opacity .5s ease,transform .5s ease !important;pointer-events:none}
section.vid-background .bottom .lists .exp.stat-on{opacity:1 !important;transform:none !important}
section.vid-background .bottom .lists .exp h5{margin:0 !important;font-size:39px !important;line-height:1 !important;white-space:nowrap !important;flex:0 0 auto !important}
section.vid-background .bottom .lists .exp h5 span{font-size:15px !important;top:-6px !important;right:0 !important}
section.vid-background .bottom .lists .exp p{margin:0 !important;font-size:18px !important;line-height:1.25 !important;color:rgba(255,255,255,.9) !important;font-weight:400 !important}
section.vid-background .bottom .stat-dots{display:flex !important;gap:7px;margin:14px 0 0 5px}
section.vid-background .bottom .stat-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);transition:width .3s,background .3s}
section.vid-background .bottom .stat-dots span.on{background:var(--pink);width:20px;border-radius:5px}
/* AWARDS: centered; 30+ inline; badges rotate one at a time */
section.award .content{flex-direction:column !important;align-items:center !important;text-align:center !important;gap:20px !important;padding:38px var(--gap) 40px !important}
section.award p.left{width:auto !important;max-width:none !important;font-size:17px !important;line-height:1.38 !important;text-align:center !important}
section.award p.left b{font-size:21px !important;line-height:1.3 !important}
section.award .list{width:100% !important;margin:0 !important}
section.award .lists{position:relative !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;width:100% !important;gap:0 !important;padding:0 !important;overflow:visible !important;min-height:104px !important}
/* 30+ inline, ABOVE the heading (moved by JS): number beside a bigger Century Gothic label */
section.award .exp{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:12px !important;margin:0 !important}
section.award .exp h5{display:flex !important;align-items:baseline !important;font-family:CenturyGothic !important;font-weight:bold !important;font-size:52px !important;margin:0 !important;line-height:1 !important;color:var(--pink) !important}
section.award .exp h5 span{color:var(--black) !important;font-weight:100 !important;font-size:30px !important;position:relative !important;top:0 !important;right:0 !important;margin-left:2px !important}
section.award .exp p{margin:0 !important;text-align:left !important;font-size:21px !important;line-height:1.15 !important;font-family:CenturyGothic !important;font-weight:bold !important;color:var(--stale-blue) !important}
/* award badges: one at a time, fading */
section.award .lists .flip-card{position:absolute !important;left:0 !important;right:0 !important;bottom:4px !important;margin:0 auto !important;height:auto !important;min-height:0 !important;perspective:none !important;opacity:0 !important;transform:translateY(8px) !important;transition:opacity .55s ease,transform .55s ease !important;pointer-events:none}
section.award .lists .flip-card.award-on{opacity:1 !important;transform:none !important}
section.award .lists .flip-card .flip-card-inner{transform:none !important;height:auto !important}
section.award .lists .flip-card .flip-card-front{position:static !important;height:auto !important;transform:none !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important}
section.award .lists .flip-card .flip-card-back,section.award .lists .flip-card .tooltip{display:none !important}
section.award .lists .flip-card .p_awal{font-size:18px !important;line-height:1.32 !important}
/* rotation dots */
section.award .award-dots{display:flex !important;gap:7px;justify-content:center;margin:10px 0 0}
section.award .award-dots span{width:7px;height:7px;border-radius:50%;background:rgba(68,84,113,.28);transition:width .3s,background .3s}
section.award .award-dots span.on{background:var(--pink);width:20px;border-radius:5px}
}
@media (max-width:480px){
section.vid-background .content .top .h1{font-size:26px !important}
}
/* mobile "Menu" toggle pill — balanced padding (was 7px 24px 7px 0) */
@media (max-width:1024px){
header .content.head_v2 ul.l_menu{padding:7px 17px !important}
}
/* Mobile: clean project-title bar — numbers (01 02 03) centered on their own line above the title/location (no overlap); highlight animation via --progress is preserved */
@media (max-width:1024px){
.sec-carou .sticky-general{
height:auto !important;min-height:150px !important;
top:calc(100vh - 150px) !important;
display:flex !important;flex-direction:column !important;justify-content:flex-end !important;align-items:stretch !important;
padding:0 var(--gap) 20px !important;box-sizing:border-box !important;
}
.sec-carou .sticky-general.bottom{top:unset !important;bottom:0 !important}
.sec-carou .sticky-general .carousel-general{
position:static !important;bottom:auto !important;left:auto !important;top:auto !important;transform:none !important;
order:0 !important;justify-content:center !important;width:100% !important;gap:26px !important;margin:0 0 10px !important;
}
.sec-carou .sticky-general .carousel-general h5{font-size:24px !important;line-height:28px !important}
.sec-carou .sticky-general .carousel-general h5:before{height:28px !important}
.sec-carou .sticky-general .name{
position:static !important;bottom:auto !important;left:auto !important;top:auto !important;
order:1 !important;text-align:left !important;margin:0 !important;
}
}
/* ===== Mobile/tablet: card slider for the .sticky_show projects ===== */
@media (max-width:1024px){
body.has-mss section.sticky_show{display:none !important}
.mss{display:block;position:relative;z-index:6;background:#0b0e14;overflow:hidden}
.mss-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}
.mss-slide{flex:0 0 100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;padding:0 0 56px;min-height:100vh;box-sizing:border-box}
.mss-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.4) saturate(1.05);z-index:0}
.mss-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(11,14,20,.2),rgba(11,14,20,.78))}
.mss-card{position:relative;z-index:1;width:84%;max-width:520px;aspect-ratio:3/2;border-radius:6px;overflow:hidden;box-shadow:0 22px 52px rgba(0,0,0,.55)}
.mss-card img{width:100%;height:100%;object-fit:cover;display:block}
.mss-title{position:relative;z-index:1;color:var(--pink-2);font-family:CenturyGothic;font-weight:bold;font-size:23px;line-height:1.25;text-align:center;margin:26px 18px 6px}
.mss-loc{position:relative;z-index:1;color:#fff;font-family:Jost;text-transform:uppercase;letter-spacing:.03em;font-size:13px;text-align:center;margin:0}
.mss-arrow{position:absolute;top:40%;transform:translateY(-50%);z-index:4;background:transparent;border:0;color:#fff;font-size:42px;line-height:1;width:56px;height:56px;cursor:pointer;opacity:.92;font-family:Jost}
.mss-prev{left:4px}.mss-next{right:4px}
.mss-dots{position:absolute;left:0;right:0;bottom:40px;z-index:4;display:flex;gap:15px;justify-content:center}
.mss-dots button{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:transparent;padding:0;cursor:pointer}
.mss-dots button.on{background:var(--pink-2);border-color:var(--pink-2)}
.mss-bar{position:absolute;left:0;bottom:0;width:100%;height:5px;background:rgba(255,255,255,.16);z-index:4}
.mss-bar i{display:block;height:100%;width:0;background:var(--pink-2)}
.mss-bar i.run{animation:mssfill 6s linear forwards}
@keyframes mssfill{from{width:0}to{width:100%}}
}
@media (min-width:1025px){ .mss{display:none !important} }
/* ===== Mobile/tablet: services "Delivering impactful designs" — one-at-a-time slider ===== */
@media (max-width:1024px){
section.svc-ctr.svc-home{overflow:hidden}
section.svc-ctr.svc-home .content{padding:56px var(--gap) 52px !important}
section.svc-ctr.svc-home .svc-top-header{flex-direction:column !important;padding-bottom:6px !important}
section.svc-ctr.svc-home .svc-top-header h6{max-width:none !important;font-size:clamp(26px,6.4vw,34px) !important;margin:0 0 18px !important}
section.svc-ctr.svc-home .svc-top-header .right{flex:1 1 auto !important;width:100% !important}
section.svc-ctr.svc-home .svc-top-header .right p{font-size:16px !important;margin-bottom:0 !important}
section.svc-ctr.svc-home .svc-top-header .right .hover_new{display:none !important}
/* slider */
section.svc-ctr.svc-home .svc-slider{overflow:hidden;width:100%}
section.svc-ctr.svc-home .svc-list-other{display:flex !important;flex-wrap:nowrap !important;flex-direction:row !important;align-items:stretch !important;margin:0 !important;padding:0 !important;gap:0 !important;transition:transform .45s cubic-bezier(.4,0,.2,1)}
section.svc-ctr.svc-home .svc-list-other .list{flex:0 0 100% !important;width:100% !important;max-width:none !important;min-height:300px !important;padding:26px 0 6px !important;display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:center !important}
section.svc-ctr.svc-home .svc-list-other .list .svc-garis,
section.svc-ctr.svc-home .svc-list-other .list .number,
section.svc-ctr.svc-home .svc-list-other .list .desc-service,
section.svc-ctr.svc-home .svc-list-other .list .imgg{display:none !important}
section.svc-ctr.svc-home .svc-list-other .list .icon{order:0 !important;width:100% !important;padding:6px 0 30px !important}
section.svc-ctr.svc-home .svc-list-other .list .icon img,
section.svc-ctr.svc-home .svc-list-other .list .icon svg{width:230px !important;max-width:62% !important;left:50% !important;transform:translateX(-50%) !important}
section.svc-ctr.svc-home .svc-list-other .list .name-service{order:1 !important;width:100%}
section.svc-ctr.svc-home .svc-list-other .list .name-service h5{font-size:30px !important;text-align:left !important;line-height:1.2 !important}
/* bottom nav: arrows flanking the View Our Service button */
section.svc-ctr.svc-home .svc-mob-nav{display:flex !important;align-items:center;justify-content:center;gap:16px;margin-top:26px}
section.svc-ctr.svc-home .svc-mob-nav .svc-arrow{background:transparent;border:0;font-size:36px;line-height:1;color:var(--black);width:42px;height:42px;cursor:pointer;font-family:Jost;opacity:.85}
section.svc-ctr.svc-home .svc-mob-nav .hover_new{margin:0 !important;flex:0 0 auto;display:flex !important}
}
@media (min-width:1025px){ section.svc-ctr.svc-home .svc-mob-nav,section.svc-ctr.svc-home .svc-slider{display:contents} }
/* ===== Mobile/tablet: "Design with Intent" foo_hover — sticky banner + scroll-activated list ===== */
@media (max-width:1024px){
section.foo_hover{overflow:visible !important}
section.foo_hover .container{overflow:visible !important}
section.foo_hover .header2{flex-direction:column !important;padding-top:50px !important}
section.foo_hover .header2 p{flex:1 1 auto !important;font-size:16px !important;margin-bottom:14px !important}
section.foo_hover .header2 h5{font-size:13px !important}
section.foo_hover .content{padding:22px 0 0 !important}
/* sticky full-bleed banner */
section.foo_hover .foo-sticky{position:sticky;top:0;z-index:2;width:100vw;margin-left:calc(50% - 50vw);height:56vh;overflow:hidden;background:#dfe2e6}
section.foo_hover .foo-sticky img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s ease}
/* list below the banner */
section.foo_hover .lists{position:relative;z-index:1;padding:18px var(--gap) 46px !important}
section.foo_hover .lists .item{display:block !important}
section.foo_hover .lists .item .img{display:none !important}
section.foo_hover .lists .item .right{margin-left:0 !important;width:100% !important}
section.foo_hover .lists .item .right h5{font-size:24px !important;line-height:1.2 !important;padding:18px 0 !important}
section.foo_hover .lists .item.active .right h5{padding-bottom:6px !important}
section.foo_hover .lists .item .right p{font-size:15px !important}
section.foo_hover .lists .button_right{flex-direction:column !important}
section.foo_hover .lists .button_right .left{display:none !important}
section.foo_hover .lists .button_right .right{margin-left:0 !important;padding-top:18px !important}
}
/* ===== Mobile/tablet: Leadership team — auto-sliding photo carousel ===== */
@media (max-width:1024px){
section.teams.team-home{padding-bottom:26px !important}
body.has-team-slider section.teams.team-home .listteams{display:none !important}
section.teams.team-home .content{display:block !important;padding:0 0 0 !important}
.team-slider{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:60vh;overflow:hidden;background:#1b1b1d}
.team-slider .ts-track{display:flex;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
.team-slider .ts-slide{flex:0 0 100%;height:100%;position:relative;display:block;text-decoration:none}
.team-slider .ts-slide img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.team-slider .ts-cap{position:absolute;left:0;right:0;bottom:0;padding:60px 22px 22px;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.team-slider .ts-cap h6{margin:0;color:#fff;font-family:CenturyGothic;font-weight:bold;font-size:23px;line-height:1.15}
.team-slider .ts-cap p{margin:3px 0 0;color:var(--pink-2);font-family:Jost;font-size:15px}
.team-slider .ts-dots{position:absolute;bottom:16px;right:18px;display:flex;gap:8px;z-index:2}
.team-slider .ts-dots button{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.45);padding:0;cursor:pointer}
.team-slider .ts-dots button.on{background:#fff}
section.teams.team-home .blog-header{display:flex !important;flex-direction:column !important;align-items:flex-start !important;padding:34px var(--gap) 44px !important}
section.teams.team-home .blog-header h5{font-size:clamp(44px,13vw,66px) !important;line-height:1 !important;margin:0 0 16px !important}
section.teams.team-home .blog-header>p{font-size:18px !important;margin:0 0 22px !important;max-width:34ch}
section.teams.team-home .blog-header .hover_new p{margin:0 !important;font-size:17px !important}
section.teams.team-home .blog-header .hover_new{position:static !important;inset:auto !important;align-self:flex-end !important;margin:4px 0 0 !important}
}
/* Mobile: keep "Through The Lens" text readable — dim the photo marquee behind it (match live site's clean look) */
@media (max-width:1024px){
section.lens .content .bg{width:175vw !important;height:175vw !important;background:rgba(235,237,241,.88) !important}
section.lens .content h5{padding:50px !important}
}
/* ===== Mobile/tablet: Resources (blog-home) — clean card carousel + button below ===== */
@media (max-width:1024px){
section.blog-list.blog-home{padding-top:42px !important;padding-bottom:40px !important;position:relative !important;z-index:5 !important}
section.blog-list.blog-home .header{padding-bottom:6px !important}
section.blog-list.blog-home .blog-container{gap:16px !important;padding:22px 0 22px !important;scroll-snap-type:x mandatory !important;scroll-padding-left:var(--gap) !important}
section.blog-list.blog-home .blog-card{flex:0 0 calc(100vw - var(--gap) - 44px) !important;min-width:calc(100vw - var(--gap) - 44px) !important;max-width:none !important;scroll-snap-align:start !important}
section.blog-list.blog-home .blog-card:first-child{margin-left:var(--gap) !important}
section.blog-list.blog-home .blog-card:last-child{margin-right:var(--gap) !important}
section.blog-list.blog-home .res-mob-btn{display:flex !important;justify-content:center !important;padding:10px var(--gap) 0 !important;position:relative !important;z-index:6 !important}
section.blog-list.blog-home .res-mob-btn .hover_new{position:static !important;right:auto !important;top:auto !important;display:flex !important;margin:0 !important;border-color:var(--stale-blue) !important}
}
/* Hero content height — desktop only (tablet/mobile keep the base 90vh) */
@media (min-width: 1025px){
section.vid-background .content{ height: calc(95vh - 310px); }
}