2014 lines
32 KiB
CSS
2014 lines
32 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');
|
|
:root {
|
|
--primary: #BCEA3E;
|
|
--text-dark: #111;
|
|
--text-light: #666;
|
|
}
|
|
ul {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
body {
|
|
font-family: "Parkinsans", sans-serif;
|
|
}
|
|
h2 {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 26px;
|
|
color: black;
|
|
}
|
|
.ux-body {
|
|
color: #fff;
|
|
font-family: "Parkinsans", sans-serif;
|
|
}
|
|
|
|
/* NAVBAR */
|
|
.ux-header {
|
|
padding: 30px 0;
|
|
position: absolute;
|
|
z-index: 9;
|
|
width: 100%;
|
|
}
|
|
|
|
.ux-navbar {
|
|
background: rgba(255,255,255,0.05);
|
|
padding: 15px 25px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.ux-nav {
|
|
list-style: none;
|
|
gap: 30px;
|
|
display: flex;
|
|
}
|
|
|
|
.ux-nav-cta {
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* HERO */
|
|
.ux-hero-section {
|
|
background: url(../images/homeback.png);
|
|
padding: 200px 0 60px;
|
|
background-repeat: no-repeat;
|
|
background-position: top center, bottom center;
|
|
background-size: 100% auto;
|
|
}
|
|
|
|
.ux-hero-title {
|
|
font-size: 52px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
color: white;
|
|
}
|
|
|
|
.ux-text-highlight {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.ux-hero-subtitle {
|
|
color: #aaa;
|
|
margin: 20px 0;
|
|
width: 60%;
|
|
margin: 20px auto 0;
|
|
}
|
|
|
|
|
|
.ux-btn-secondary {
|
|
background: #1c1c1c;
|
|
color: #fff !important;
|
|
border-radius: 30px;
|
|
padding: 13px 25px;
|
|
border: 1px solid #ffffff3b;
|
|
}
|
|
|
|
/* BOTTOM SECTION */
|
|
.ux-bottom-wrapper {
|
|
margin-top: 80px;
|
|
align-items: self-end !important;
|
|
}
|
|
|
|
.ux-img-card img {
|
|
border-radius: 20px;
|
|
}
|
|
|
|
/* STAT BOX */
|
|
.ux-stat-box {
|
|
border-radius: 15px;
|
|
padding: 21px 30px;
|
|
height: 100%;
|
|
}
|
|
|
|
.ux-light {
|
|
background: #FFFFFF;
|
|
color: #000;
|
|
text-align: center;
|
|
padding: 52px 0;
|
|
}
|
|
.ux-light p {
|
|
color: #909090;
|
|
margin-top: 10px;
|
|
}
|
|
.ux-dark p {
|
|
font-size: 22px;
|
|
line-height: 29px;
|
|
font-weight: 500;
|
|
color: white;
|
|
}
|
|
.ux-dark h2 {
|
|
color: white;
|
|
font-size: 41px;
|
|
}
|
|
.ux-dark {
|
|
background: linear-gradient(145.02deg, rgba(255, 255, 255, 0.0039) 5.29%, rgba(255, 255, 255, 0.39) 102.4%);
|
|
backdrop-filter: blur(112px);
|
|
border-radius: 20px;
|
|
}
|
|
.ux-dark h5 {
|
|
font-size: 22px;
|
|
line-height: 29px;
|
|
color: white;
|
|
}
|
|
.ux-counter {
|
|
font-size: 40px;
|
|
font-weight: 500;
|
|
color: black;
|
|
}
|
|
|
|
|
|
|
|
/* SECTION */
|
|
.ux-about-section {
|
|
padding: 80px 0;
|
|
background: #ffffff;
|
|
}
|
|
.ux-footer-hero .ux-section-label {
|
|
color: white;
|
|
}
|
|
/* COMMON HEADINGS */
|
|
.ux-section-label {
|
|
font-size: 16px;
|
|
color: #000000;
|
|
width: 36%;
|
|
font-weight: 500;
|
|
margin-top: 8px;
|
|
}
|
|
.ux-main-heading span {
|
|
color: #727272;
|
|
}
|
|
.ux-main-heading {
|
|
line-height: 1.4;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.ux-sub-heading {
|
|
margin-top: 10px;
|
|
color: var(--text-light);
|
|
font-size: 18px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* COUNTER */
|
|
.ux-big-counter {
|
|
font-size: 70px;
|
|
font-weight: 700;
|
|
color: #000000;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.ux-small-text {
|
|
color: #000000;
|
|
width: 60%;
|
|
}
|
|
|
|
/* IMAGE */
|
|
.ux-about-img {
|
|
border-radius: 16px;
|
|
/* max-width: 310px; */
|
|
width: 100%;
|
|
height: 310px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* CONTENT */
|
|
.ux-card-title {
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
color: black;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.ux-card-text {
|
|
color: black;
|
|
margin-bottom: 40px;
|
|
max-width: 80%;
|
|
}
|
|
|
|
/* COMMON BUTTON (GLOBAL USE) */
|
|
.ux-btn-primary:hover {
|
|
background: var(--primary);
|
|
}
|
|
.ux-btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: var(--primary);
|
|
color: #000;
|
|
padding: 6px 6px 6px 30px;
|
|
border-radius: 30px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: 0.3s;
|
|
border: unset;
|
|
}
|
|
|
|
.ux-btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
color: black;
|
|
}
|
|
|
|
.ux-btn-icon {
|
|
background: #000;
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
/* LOGOS */
|
|
.ux-logo-box {
|
|
background: #fff;
|
|
border: 1px solid #e5e5e5;
|
|
padding: 20px;
|
|
text-align: center;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
color: #999;
|
|
}
|
|
.ux-work-section {
|
|
padding: 0px 0 70px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
/* HEADER */
|
|
.ux-swiper-nav {
|
|
display: flex;
|
|
gap: 15px;
|
|
}
|
|
|
|
.ux-arrow.active {
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* CARD */
|
|
.ux-work-card img {
|
|
border-radius: 16px;
|
|
margin-bottom: 30px;
|
|
height: 300px;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
}
|
|
|
|
.ux-work-card h4 {
|
|
font-weight: 600;
|
|
color: black;
|
|
font-size: 19px;
|
|
}
|
|
|
|
.ux-work-card p {
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.ux-link {
|
|
color: var(--primary);
|
|
font-weight: 300;
|
|
text-decoration: none;
|
|
}
|
|
.ux-link img {
|
|
margin: 0;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
/* SWIPER */
|
|
.ux-work-swiper {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
|
|
.ux-why-section {
|
|
padding: 100px 0;
|
|
background: #F8F8F8;
|
|
}
|
|
|
|
/* IMAGE */
|
|
.ux-why-img img {
|
|
border-radius: 16px;
|
|
width: 100%;
|
|
height: 295px;
|
|
}
|
|
|
|
/* CARD */
|
|
.ux-why-card {
|
|
background: #ffffff;
|
|
padding: 22px 30px;
|
|
border-radius: 15px;
|
|
position: relative;
|
|
height: 100%;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
/* Bottom green line */
|
|
.ux-why-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 13px;
|
|
margin: 0 auto;
|
|
width: 90%;
|
|
height: 3px;
|
|
background: var(--primary);
|
|
border-radius: 0 0 16px 16px;
|
|
}
|
|
|
|
/* Number */
|
|
.ux-number {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: #bbbbbb3d;
|
|
display: block;
|
|
margin-bottom: 13px;
|
|
}
|
|
|
|
/* Text */
|
|
.ux-why-card h6 {
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
color: #111;
|
|
}
|
|
|
|
/* Hover */
|
|
.ux-why-card:hover {
|
|
transform: translateY(-5px);
|
|
background: #fff;
|
|
}
|
|
.ux-build-section {
|
|
padding: 80px 0;
|
|
background: url(../images/SELLSERVICE.png);
|
|
}
|
|
|
|
/* SWIPER */
|
|
.ux-build-swiper {
|
|
padding-top: 40px;
|
|
}
|
|
|
|
/* CARD */
|
|
.ux-build-card {
|
|
background: #111616bf;
|
|
border-radius: 15px;
|
|
padding: 40px;
|
|
height: 100%;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.ux-build-card h5 {
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
line-height: 29px;
|
|
min-height: 120px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.ux-build-card p {
|
|
color: #aaa;
|
|
margin-top: 0;
|
|
min-height: 90px;
|
|
}
|
|
|
|
/* ACTIVE CENTER CARD */
|
|
.swiper-slide-active .ux-build-card span {}
|
|
.swiper-slide-active .ux-build-card span img {}
|
|
/* .swiper-slide-active .ux-build-card {background: var(--primary);}
|
|
.swiper-slide-active h5 {
|
|
color: black;
|
|
}
|
|
.swiper-slide-active p {
|
|
color: black;
|
|
} */
|
|
|
|
/* SIDE FADE */
|
|
|
|
|
|
.ux-arrow img {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ux-arrow.active {
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
.ux-process-section {
|
|
padding: 80px 0;
|
|
background: #F8F8F8;
|
|
}
|
|
|
|
/* CARD */
|
|
.ux-process-card {
|
|
width: 96%;
|
|
padding: 30px;
|
|
height: 100%;
|
|
position: relative;
|
|
background: #FFFFFF;
|
|
border: 1px solid #EBEBEB;
|
|
box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.25);
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.ux-process-card img {
|
|
border-radius: 12px;
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* STEP TEXT */
|
|
.ux-step {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
color: white;
|
|
-webkit-text-stroke: 1px #DEDEDE;
|
|
}
|
|
|
|
.ux-process-card h4 {
|
|
font-weight: 600;
|
|
color: black;
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
.ux-process-card p {
|
|
color: #131313;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* ARROW BETWEEN CARDS */
|
|
.ux-step-arrow {
|
|
position: absolute;
|
|
right: -6px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/* ===============================
|
|
CTA + FOOTER EXACT DESIGN
|
|
=================================*/
|
|
|
|
.ux-footer-wrapper{
|
|
background:#020807;
|
|
color:#fff;
|
|
overflow:hidden;
|
|
}
|
|
|
|
/* ===============================
|
|
TOP HERO CTA
|
|
=================================*/
|
|
.ux-footer-hero{
|
|
position:relative;
|
|
padding: 90px 0 90px;
|
|
background: url(../images/ideastrongback.png);
|
|
}
|
|
|
|
.ux-footer-hero-content{
|
|
position:relative;
|
|
z-index:2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.ux-footer-hero-content .ux-hero-actions {
|
|
margin-top: 20px;
|
|
}
|
|
.ux-footer-title{
|
|
font-size: 30px;
|
|
font-weight:600;
|
|
margin: 12px 0 14px;
|
|
color:#fff;
|
|
}
|
|
|
|
/* BUTTON */
|
|
.ux-footer-cta-btn{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:14px;
|
|
padding:8px 8px 8px 28px;
|
|
background:#c8ff2d;
|
|
border-radius:60px;
|
|
text-decoration:none;
|
|
font-weight:600;
|
|
color:#000;
|
|
font-size:18px;
|
|
}
|
|
|
|
.ux-footer-cta-btn .ux-btn-icon{
|
|
width:44px;
|
|
height:44px;
|
|
border-radius:50%;
|
|
background:#121212;
|
|
color:#fff;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
font-size:18px;
|
|
}
|
|
|
|
/* ===============================
|
|
MAIN FOOTER
|
|
=================================*/
|
|
.ux-main-footer{
|
|
background:#010605;
|
|
background: url(../images/footerback.png);
|
|
}
|
|
|
|
.ux-footer-grid{
|
|
display:grid;
|
|
grid-template-columns: 1.1fr 1fr;
|
|
border-left:1px solid rgba(255,255,255,.08);
|
|
border-right:1px solid rgba(255,255,255,.08);
|
|
}
|
|
|
|
/* LEFT */
|
|
.ux-footer-left{
|
|
padding:42px 38px;
|
|
border-right: 1px solid rgb(255 255 255 / 9%);
|
|
}
|
|
|
|
.ux-footer-logo{
|
|
font-size:56px;
|
|
font-weight:700;
|
|
margin-bottom:22px;
|
|
letter-spacing:-1px;
|
|
}
|
|
|
|
.ux-footer-desc{
|
|
max-width: 480px;
|
|
color:rgba(255,255,255,.78);
|
|
line-height:1.8;
|
|
font-size: 16px;
|
|
margin:0;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* RIGHT */
|
|
.ux-footer-right{
|
|
display:grid;
|
|
grid-template-columns: repeat(3,1fr);
|
|
}
|
|
|
|
.ux-footer-links{
|
|
padding: 42px 20px;
|
|
}
|
|
|
|
.ux-footer-links h6{
|
|
color:rgba(255,255,255,.45);
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 18px;
|
|
letter-spacing:.5px;
|
|
}
|
|
|
|
.ux-footer-links a{
|
|
display:block;
|
|
color:#fff;
|
|
text-decoration:none;
|
|
margin-bottom: 14px;
|
|
font-size: 15px;
|
|
transition:.3s;
|
|
}
|
|
|
|
.ux-footer-links a:hover{
|
|
color:#c8ff2d;
|
|
transform:translateX(4px);
|
|
}
|
|
|
|
/* ===============================
|
|
BOTTOM BAR
|
|
=================================*/
|
|
.ux-footer-bottom{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
gap:20px;
|
|
padding:18px 32px;
|
|
border: 1px solid rgb(255 255 255 / 11%);
|
|
}
|
|
|
|
.ux-footer-bottom p{
|
|
margin:0;
|
|
color:rgba(255,255,255,.45);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.ux-footer-social{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:18px;
|
|
}
|
|
|
|
.ux-footer-social a{
|
|
color:rgba(255,255,255,.70);
|
|
font-size:18px;
|
|
transition:.3s;
|
|
}
|
|
|
|
.ux-footer-social a:hover{
|
|
color:#c8ff2d;
|
|
transform:translateY(-2px);
|
|
}
|
|
/* ===============================
|
|
START PROJECT HERO
|
|
=================================*/
|
|
.ux-project-hero{
|
|
background-image: url(../images/breadcamp.png);
|
|
position:relative;
|
|
/* min-height: 400px; */
|
|
overflow:hidden;
|
|
padding: 190px 0 100px;
|
|
background-size: cover;
|
|
background-position: revert;
|
|
}
|
|
/* breadcrumb */
|
|
.ux-breadcrumb-wrap{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
gap:10px;
|
|
margin-top:15px;
|
|
margin-bottom:90px;
|
|
}
|
|
|
|
.ux-breadcrumb-wrap a{
|
|
color:rgba(255,255,255,.45);
|
|
text-decoration:none;
|
|
font-size:15px;
|
|
}
|
|
|
|
.ux-breadcrumb-wrap span{
|
|
color:rgba(255,255,255,.25);
|
|
}
|
|
|
|
.ux-breadcrumb-wrap p{
|
|
margin:0;
|
|
color:#d2ff33;
|
|
font-size:15px;
|
|
}
|
|
|
|
/* center content */
|
|
.ux-project-content{
|
|
position:relative;
|
|
z-index:2;
|
|
}
|
|
|
|
.ux-project-title{
|
|
font-size: 50px;
|
|
color:#fff;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.ux-project-subtitle{
|
|
font-size: 18px;
|
|
color:rgba(255,255,255,.88);
|
|
margin:0;
|
|
}
|
|
|
|
/* joined box */
|
|
.ux-joined-box{
|
|
position:absolute;
|
|
right:8%;
|
|
bottom: 50px;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:18px;
|
|
z-index:2;
|
|
}
|
|
|
|
.ux-avatar-group{
|
|
display:flex;
|
|
}
|
|
|
|
.ux-avatar-group img{
|
|
width:64px;
|
|
height:64px;
|
|
border-radius:50%;
|
|
object-fit:cover;
|
|
border:3px solid #fff;
|
|
margin-left:-14px;
|
|
}
|
|
|
|
.ux-avatar-group img:first-child{
|
|
margin-left:0;
|
|
}
|
|
|
|
.ux-joined-box p{
|
|
margin:0;
|
|
color:#fff;
|
|
font-size:16px;
|
|
line-height:1.55;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* ===============================
|
|
CONTACT FORM SECTION
|
|
=================================*/
|
|
.ux-contact-section{
|
|
padding:90px 0;
|
|
}
|
|
|
|
/* LEFT BOX */
|
|
.ux-contact-left{
|
|
background: #F8F8F8;
|
|
padding: 30px 40px;
|
|
}
|
|
|
|
.ux-contact-link{
|
|
display:block;
|
|
font-size: 25px;
|
|
font-weight:500;
|
|
color:#111;
|
|
margin-bottom: 15px;
|
|
text-decoration:underline;
|
|
}
|
|
|
|
.ux-contact-email{
|
|
display:block;
|
|
font-size: 35px;
|
|
font-weight: 700;
|
|
color:#111;
|
|
text-decoration:underline;
|
|
line-height:1.1;
|
|
margin-bottom:80px;
|
|
}
|
|
|
|
.ux-social-list a{
|
|
display:block;
|
|
color:#111;
|
|
font-size: 20px;
|
|
font-weight:600;
|
|
text-decoration:none;
|
|
margin-bottom: 15px;
|
|
transition:.3s;
|
|
}
|
|
|
|
.ux-social-list a:hover{
|
|
padding-left:8px;
|
|
}
|
|
|
|
/* RIGHT BOX */
|
|
.ux-contact-box{
|
|
background: #F8F8F8;
|
|
padding: 40px 35px;
|
|
}
|
|
|
|
.ux-contact-mini{
|
|
font-size:20px;
|
|
color:#111;
|
|
margin-bottom:8px;
|
|
}
|
|
|
|
.ux-contact-title{
|
|
font-size: 26px;
|
|
line-height: 1.4;
|
|
font-weight: 600;
|
|
color:#111;
|
|
margin-bottom:38px;
|
|
max-width: 460px;
|
|
}
|
|
|
|
/* LABEL */
|
|
.ux-contact-box label{
|
|
display:block;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin-bottom:10px;
|
|
color:#111;
|
|
}
|
|
|
|
/* INPUT */
|
|
.ux-input{
|
|
height: 56px;
|
|
border-radius:40px;
|
|
border:1px solid #d8d8d8;
|
|
padding:0 22px;
|
|
font-size:18px;
|
|
background:#f7f7f7;
|
|
box-shadow:none !important;
|
|
}
|
|
|
|
.ux-input.active{
|
|
border:1px solid #b8e72f;
|
|
}
|
|
|
|
.ux-input:focus{
|
|
border-color:#b8e72f;
|
|
}
|
|
|
|
/* TEXTAREA */
|
|
.ux-textarea{
|
|
border-radius:26px;
|
|
border:1px solid #d8d8d8;
|
|
padding:18px 22px;
|
|
font-size:18px;
|
|
background:#f7f7f7;
|
|
resize:none;
|
|
box-shadow:none !important;
|
|
}
|
|
|
|
.ux-textarea:focus{
|
|
border-color:#b8e72f;
|
|
}
|
|
|
|
/* ===============================
|
|
CASE ACCORDION
|
|
=================================*/
|
|
.ux-case-section{
|
|
background:#f4f4f4;
|
|
padding:90px 0;
|
|
}
|
|
|
|
.ux-case-item{
|
|
border:1px solid #dddddd !important;
|
|
border-radius:24px !important;
|
|
overflow:hidden;
|
|
margin-bottom:28px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.ux-case-btn{
|
|
background: #ffffff !important;
|
|
box-shadow:none !important;
|
|
padding:38px 45px !important;
|
|
align-items:center;
|
|
background: #FFFFFF;
|
|
box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.25);
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.ux-case-btn::after{
|
|
background-size:18px;
|
|
width:22px;
|
|
height:22px;
|
|
}
|
|
|
|
.ux-case-head{
|
|
text-align:left;
|
|
width: 80%;
|
|
}
|
|
|
|
.ux-case-head h3{
|
|
font-size: 29px;
|
|
font-weight: 600;
|
|
margin-bottom:10px;
|
|
color:#111;
|
|
}
|
|
|
|
.ux-case-head p{
|
|
margin:0;
|
|
font-size: 18px;
|
|
color: #1A1D20;
|
|
}
|
|
|
|
.ux-case-right{
|
|
margin-left:auto;
|
|
padding-right:30px;
|
|
}
|
|
|
|
.ux-case-right span{
|
|
color:#b3e200;
|
|
font-size: 18px;
|
|
font-weight:500;
|
|
}
|
|
|
|
/* BODY */
|
|
.ux-case-body{
|
|
padding:0 45px 45px !important;
|
|
}
|
|
|
|
.ux-case-inner{
|
|
background: #F9F9F9;
|
|
border-radius:18px;
|
|
padding:26px;
|
|
display:grid;
|
|
grid-template-columns:340px 1fr;
|
|
gap:30px;
|
|
align-items: center;
|
|
}
|
|
|
|
.ux-case-img{
|
|
width:100%;
|
|
height:230px;
|
|
object-fit:cover;
|
|
border-radius:14px;
|
|
}
|
|
|
|
.ux-case-grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(3,1fr);
|
|
gap:35px 30px;
|
|
align-content:start;
|
|
}
|
|
|
|
.ux-case-grid div{
|
|
border-left:3px solid #b3e200;
|
|
padding-left:14px;
|
|
}
|
|
|
|
.ux-case-grid small{
|
|
display:block;
|
|
font-size: 14px;
|
|
color:#666;
|
|
margin-bottom:5px;
|
|
}
|
|
|
|
.ux-case-grid strong{
|
|
display:block;
|
|
font-size: 20px;
|
|
color:#111;
|
|
line-height:1.25;
|
|
}
|
|
/* ===============================
|
|
CASE RESULT SECTION
|
|
=================================*/
|
|
.ux-result-section{
|
|
padding:90px 0;
|
|
}
|
|
|
|
/* COMMON BOX */
|
|
.ux-result-box,
|
|
.ux-deliver-box{
|
|
background: #ffffff;
|
|
padding:38px;
|
|
border: 1px solid #EBEBEB;
|
|
box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.25);
|
|
border-radius: 15px;
|
|
}
|
|
|
|
/* TOP */
|
|
.ux-result-box{
|
|
display:grid;
|
|
grid-template-columns:1.3fr .9fr;
|
|
margin-bottom:90px;
|
|
}
|
|
|
|
.ux-result-left{
|
|
padding-right: 26px;
|
|
border-right:1px solid #e3e3e3;
|
|
}
|
|
|
|
.ux-result-right{
|
|
padding-left: 30px;
|
|
}
|
|
.accordion-header .collapsed {}
|
|
.ux-step-label{
|
|
font-size: 16px;
|
|
color:#222;
|
|
margin-bottom:8px;
|
|
}
|
|
|
|
.ux-result-heading{
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color:#111;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
/* GRID CARD */
|
|
.ux-build-grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(4,1fr);
|
|
gap:14px;
|
|
}
|
|
|
|
.ux-ai-grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(3,1fr);
|
|
gap:14px;
|
|
}
|
|
|
|
.ux-mini-card{
|
|
background: #ffffff;
|
|
border: 1px solid #E8E8E8;
|
|
border-radius:18px;
|
|
padding: 17px 15px;
|
|
min-height: 60px;
|
|
position:relative;
|
|
}
|
|
|
|
.ux-mini-card.active{
|
|
border: 1px solid #C4F022;
|
|
}
|
|
|
|
.ux-mini-card span{
|
|
position:absolute;
|
|
top:12px;
|
|
right:16px;
|
|
font-size:46px;
|
|
font-weight:700;
|
|
color: white;
|
|
-webkit-text-stroke: 1px #DEDEDE;
|
|
}
|
|
|
|
.ux-mini-card p{
|
|
font-size: 15px;
|
|
line-height: 1.35;
|
|
color:#222;
|
|
margin: 78px 0 0;
|
|
}
|
|
|
|
/* BOTTOM */
|
|
.ux-deliver-box{
|
|
display:grid;
|
|
grid-template-columns:.9fr 1fr .8fr;
|
|
gap:45px;
|
|
align-items:center;
|
|
}
|
|
|
|
.ux-deliver-list{
|
|
padding:0;
|
|
margin:0;
|
|
list-style:none;
|
|
}
|
|
|
|
.ux-deliver-list li{
|
|
font-size: 16px;
|
|
margin-bottom:18px;
|
|
color:#222;
|
|
position:relative;
|
|
padding-left:18px;
|
|
}
|
|
|
|
.ux-deliver-list li::before{
|
|
content:"";
|
|
width:8px;
|
|
height:8px;
|
|
border-radius:50%;
|
|
background:#b7e226;
|
|
position:absolute;
|
|
left:0;
|
|
top:11px;
|
|
}
|
|
|
|
.ux-deliver-center img{
|
|
width:100%;
|
|
height: 300px;
|
|
object-fit:cover;
|
|
border-radius:22px;
|
|
}
|
|
|
|
.ux-deliver-right p{
|
|
font-size: 16px;
|
|
line-height:1.45;
|
|
color:#222;
|
|
margin-bottom:32px;
|
|
}
|
|
|
|
.ux-result-btn{
|
|
display:inline-block;
|
|
background:#c5ef2c;
|
|
color:#111;
|
|
text-decoration:none;
|
|
font-size: 16px;
|
|
font-weight:600;
|
|
padding:16px 28px;
|
|
border-radius:50px;
|
|
}
|
|
/* ===============================
|
|
PROCESS STEP CARD
|
|
=================================*/
|
|
.ux-process-step-section{
|
|
padding:80px 0;
|
|
background: #FBFBFB;
|
|
}
|
|
|
|
.ux-process-step-box{
|
|
border-radius:24px;
|
|
padding:34px 38px 38px;
|
|
margin: 0 0 50px;
|
|
border: 1px solid #EBEBEB;
|
|
box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.25);
|
|
border-radius: 15px;
|
|
}
|
|
|
|
/* NUMBER */
|
|
.ux-process-number{
|
|
display:block;
|
|
font-size: 29px;
|
|
font-weight:700;
|
|
line-height:1;
|
|
margin-bottom:8px;
|
|
-webkit-text-stroke: 1px #DEDEDE;
|
|
color: white;
|
|
}
|
|
|
|
/* TITLE */
|
|
.ux-process-title{
|
|
font-size: 28px;
|
|
font-weight:700;
|
|
color:#111;
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
.ux-process-subtitle{
|
|
font-size: 16px;
|
|
color: #000000;
|
|
margin-bottom: 26px;
|
|
}
|
|
|
|
/* GRID */
|
|
.ux-process-grid{
|
|
display:grid;
|
|
grid-template-columns:1fr 1fr;
|
|
gap:40px;
|
|
align-items:center;
|
|
}
|
|
|
|
/* IMAGE */
|
|
.ux-process-image img{
|
|
width:100%;
|
|
height: 420px;
|
|
object-fit:cover;
|
|
border-radius:24px;
|
|
}
|
|
|
|
/* RIGHT CONTENT */
|
|
.ux-process-content{
|
|
padding-right:20px;
|
|
}
|
|
|
|
.ux-process-item{
|
|
margin-bottom:38px;
|
|
position:relative;
|
|
padding-left:18px;
|
|
}
|
|
|
|
.ux-process-item:last-child{
|
|
margin-bottom:0;
|
|
}
|
|
|
|
.ux-process-item::before{
|
|
content:"";
|
|
width:9px;
|
|
height:9px;
|
|
border-radius:50%;
|
|
background:#b7e226;
|
|
position:absolute;
|
|
left:0;
|
|
top:14px;
|
|
}
|
|
|
|
.ux-process-item h4{
|
|
font-size: 18px;
|
|
font-weight:700;
|
|
color:#111;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.ux-process-item p{
|
|
font-size: 14px;
|
|
line-height:1.45;
|
|
color:#777;
|
|
margin:0;
|
|
}
|
|
.breacampoffline p {
|
|
width: 33%;
|
|
color: white;
|
|
}
|
|
.breacampoffline {
|
|
display: flex;
|
|
align-items: self-start;
|
|
margin-top: 40px;
|
|
width: 100%;
|
|
gap: 20px;
|
|
justify-content: center;
|
|
margin: 50px auto 0;
|
|
}
|
|
.systems-wrapper {
|
|
display: flex;
|
|
gap: 80px;
|
|
margin: auto;
|
|
padding: 80px 20px;
|
|
}
|
|
|
|
/* LEFT */
|
|
.systems-left {
|
|
width: 45%;
|
|
position: sticky;
|
|
top: 90px;
|
|
height: fit-content;
|
|
}
|
|
|
|
.small-label {
|
|
font-size: 13px;
|
|
color: #000000;
|
|
margin-bottom: 21px;
|
|
}
|
|
|
|
.systems-left h2 {
|
|
font-size: 20px;
|
|
margin-bottom: 15px;
|
|
color: black;
|
|
}
|
|
|
|
.systems-left .desc {
|
|
color: #666;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
width: 70%;
|
|
}
|
|
|
|
/* RIGHT */
|
|
.systems-right {
|
|
width: 65%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 25px;
|
|
}
|
|
|
|
/* CARD BASE */
|
|
.system-card {
|
|
padding: 28px;
|
|
border-radius: 14px;
|
|
transition: 0.3s;
|
|
}
|
|
.dark h4 {
|
|
color: white !important;
|
|
}
|
|
.dark li {
|
|
color: white !important;
|
|
}
|
|
.dark a {
|
|
color: white !important;
|
|
}
|
|
.system-card h4 {
|
|
margin-bottom: 14px;
|
|
font-size: 18px;
|
|
color: black;
|
|
}
|
|
|
|
.system-card p {
|
|
font-size: 14px;
|
|
margin-bottom: 20px;
|
|
color: #121212;
|
|
}
|
|
|
|
/* LIST */
|
|
.system-card ul {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
padding: 0;
|
|
gap: 5px;
|
|
list-style: none;
|
|
margin-bottom: 15px !important;
|
|
margin-top: 19px;
|
|
}
|
|
|
|
.system-card ul li {
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
position: relative;
|
|
padding-left: 18px;
|
|
color: black;
|
|
}
|
|
|
|
.system-card ul li::before {
|
|
content: "✔";
|
|
position: absolute;
|
|
left: 0;
|
|
color: #b7f34d;
|
|
font-size: 12px;
|
|
}
|
|
.system-card span {
|
|
color: #99A1AF;
|
|
}
|
|
/* LINKS */
|
|
.system-card a {
|
|
font-size: 17px;
|
|
text-decoration: none;
|
|
color: black;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* VARIANTS */
|
|
.system-card.light {
|
|
background: #fff;
|
|
border: 1px solid #eee;
|
|
}
|
|
|
|
.system-card.dark {
|
|
background: #111;
|
|
color: #fff;
|
|
}
|
|
|
|
.system-card.dark p {
|
|
color: #bbb;
|
|
}
|
|
|
|
.system-card.highlight {
|
|
background: var(--primary);
|
|
color: #000;
|
|
}
|
|
|
|
.system-card.highlight ul li::before {
|
|
color: #000;
|
|
}
|
|
|
|
/* HOVER */
|
|
.system-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
.connect-section {
|
|
background: #FBFBFB;
|
|
text-align: center;
|
|
padding: 80px 0px 40px;
|
|
}
|
|
|
|
.connect-section h2 {
|
|
font-size: 30px;
|
|
margin-bottom: 10px;
|
|
color: black;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #666;
|
|
font-size: 14px;
|
|
max-width: 600px;
|
|
margin: 0 auto 40px;
|
|
}
|
|
|
|
/* FLOW */
|
|
.connect-flow {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* ITEM */
|
|
.flow-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 40px 10px 10px;
|
|
border-radius: 40px;
|
|
border: 1.5px solid var(--primary);
|
|
background: #fff;
|
|
font-size: 14px;
|
|
color: black;
|
|
font-weight: 600;
|
|
box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.25);
|
|
border-radius: 100px;
|
|
}
|
|
|
|
/* ICON */
|
|
.flow-item .icon {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid #b7f34d;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
position: relative;
|
|
}
|
|
|
|
/* ARROW */
|
|
.arrow {
|
|
color: #b7f34d;
|
|
font-size: 20px;
|
|
margin: 0 5px;
|
|
}
|
|
.ux-hero-actions {margin: 0 auto;width: 100%;display: flex;gap: 20px;align-items: center;justify-content: center;margin-top: 40px;}
|
|
/* BOTTOM TEXT */
|
|
.bottom-text {
|
|
margin-top: 40px;
|
|
font-size: 22px;
|
|
color: #222;
|
|
max-width: 600px;
|
|
margin: 40px auto;
|
|
}
|
|
.system-card img {
|
|
margin: 0 0 20px;
|
|
}
|
|
/* =====================================
|
|
APPROACH SECTION
|
|
===================================== */
|
|
.ux-approach-section{
|
|
background:#f7f7f7;
|
|
padding:110px 0;
|
|
}
|
|
.ux-about-section .ux-section-label {
|
|
width: 100%;
|
|
}
|
|
.ux-label{
|
|
font-size: 16px;
|
|
color:#111;
|
|
display:block;
|
|
margin-bottom:18px;
|
|
}
|
|
.ux-section-desc{
|
|
font-size: 19px;
|
|
line-height:1.4;
|
|
color:#111;
|
|
max-width:620px;
|
|
margin-left:auto;
|
|
}
|
|
|
|
.ux-card{
|
|
background:#fff;
|
|
border:1px solid #e7e7e7;
|
|
border-radius:22px;
|
|
padding: 28px 24px;
|
|
height:100%;
|
|
transition:0.4s;
|
|
}
|
|
|
|
.ux-card:hover{
|
|
transform:translateY(-8px);
|
|
box-shadow:0 20px 40px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.ux-card-top{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.ux-icon{
|
|
font-size:28px;
|
|
color:#c6bfbf;
|
|
text-align: end;
|
|
}
|
|
|
|
.ux-num{
|
|
font-size: 13px;
|
|
color:#111;
|
|
}
|
|
|
|
.ux-card h4{
|
|
font-size: 22px;
|
|
font-weight:700;
|
|
color:#111;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.ux-card p{
|
|
font-size: 13px;
|
|
line-height:1.8;
|
|
color:#6d7280;
|
|
margin:0;
|
|
}
|
|
|
|
|
|
/* =====================================
|
|
DELIVER SECTION
|
|
===================================== */
|
|
.ux-deliver-section{
|
|
background:#f7f7f7;
|
|
padding:30px 0 110px;
|
|
}
|
|
.ux-deliver-section h2 {
|
|
margin: 0 0 30px;
|
|
}
|
|
|
|
.ux-deliver-list{
|
|
border:1px solid #e4e4e4;
|
|
border-radius: 10px;
|
|
padding: 16px 18px;
|
|
margin-bottom:16px;
|
|
font-size: 15px;
|
|
color:#111;
|
|
background:#fff;
|
|
transition:0.3s;
|
|
}
|
|
|
|
.ux-deliver-list span{
|
|
margin-right: 7px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.ux-deliver-list.active,
|
|
.ux-deliver-list:hover{
|
|
background:#edf3dc;
|
|
border-color:#b8db2f;
|
|
}
|
|
|
|
.ux-snapshot-box{
|
|
background:#b7e52f;
|
|
padding:48px;
|
|
border-radius:22px;
|
|
/* height:100%; */
|
|
}
|
|
|
|
.ux-snapshot-box small{
|
|
font-size: 17px;
|
|
font-weight:700;
|
|
letter-spacing:1px;
|
|
color:#111;
|
|
}
|
|
|
|
.ux-snapshot-box hr{
|
|
margin: 17px 0 22px;
|
|
border-color:rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.ux-mini-title{
|
|
font-size: 13px;
|
|
font-weight:700;
|
|
color:#5c6a1a;
|
|
margin-top: 30px !important;
|
|
}
|
|
|
|
.ux-snapshot-box h4{
|
|
font-size: 19px;
|
|
line-height: 1.4;
|
|
font-weight:700;
|
|
color:#111;
|
|
margin-top: 7px;
|
|
}
|
|
|
|
.ux-snapshot-box h2{
|
|
font-size: 48px;
|
|
font-weight:800;
|
|
color:#111;
|
|
margin:18px 0 10px;
|
|
}
|
|
|
|
.ux-snapshot-box p{
|
|
margin-top: 21px !important;
|
|
font-size: 21px;
|
|
line-height:1.5;
|
|
color:#111;
|
|
margin:0;
|
|
}
|
|
|
|
|
|
.ux-growth-section{
|
|
position:relative;
|
|
overflow:hidden;
|
|
margin: 40px auto;
|
|
background: rgba(0, 0, 0, 0.16);
|
|
backdrop-filter: blur(107.5px);
|
|
border-radius: 15px 15px 0px 0px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* green blur left bottom */
|
|
.ux-growth-glow{
|
|
position:absolute;
|
|
width:280px;
|
|
height:280px;
|
|
left:-90px;
|
|
bottom:-80px;
|
|
border-radius:50%;
|
|
background:#b7e52f;
|
|
filter:blur(140px);
|
|
opacity:0.18;
|
|
}
|
|
|
|
/* label */
|
|
.ux-growth-label{
|
|
color:#ffffff;
|
|
font-size: 16px;
|
|
display:block;
|
|
margin-bottom:28px;
|
|
}
|
|
|
|
/* heading */
|
|
.ux-growth-title{
|
|
color:#ffffff;
|
|
font-size: 30px;
|
|
line-height:1.15;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* subtitle */
|
|
.ux-growth-subtitle{
|
|
color:#ffffff;
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* small text */
|
|
.ux-growth-small{
|
|
color: #d7d7d7;
|
|
font-size: 16px;
|
|
margin-bottom: 19px;
|
|
}
|
|
|
|
/* list */
|
|
.ux-growth-list{
|
|
padding:0;
|
|
margin:0;
|
|
list-style:none;
|
|
}
|
|
|
|
.ux-growth-list li{
|
|
color:#ffffff;
|
|
font-size: 16px;
|
|
margin-bottom:20px;
|
|
position:relative;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.ux-growth-list li::before{
|
|
content:"✓";
|
|
position:absolute;
|
|
left:0;
|
|
top:0;
|
|
color:#b7e52f;
|
|
font-weight:700;
|
|
}
|
|
|
|
/* bottom paragraph */
|
|
.ux-growth-bottom{
|
|
margin-top: 15px;
|
|
color: #807d7d;
|
|
font-size: 20px;
|
|
line-height:1.5;
|
|
font-weight:500;
|
|
}
|
|
|
|
/* image */
|
|
.ux-growth-image-box{
|
|
border:1px solid rgba(255,255,255,0.08);
|
|
border-radius:8px;
|
|
padding:12px;
|
|
background:#0b0e0e;
|
|
}
|
|
|
|
.ux-growth-image-box img{
|
|
width:100%;
|
|
border-radius:3px;
|
|
display:block;
|
|
object-fit:cover;
|
|
}
|
|
.ux-project-heropad {
|
|
padding-bottom: 0px !important;
|
|
}
|
|
|
|
|
|
|
|
.ux-navbar {
|
|
background: #111a1a;
|
|
padding: 18px 30px;
|
|
border-radius: 14px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.ux-logo { color: #fff; }
|
|
|
|
.ux-nav {
|
|
display: flex;
|
|
gap: 25px;
|
|
list-style: none;
|
|
color: #fff;
|
|
}
|
|
.ux-nav li a {
|
|
COLOR: white;
|
|
text-decoration: unset;
|
|
}
|
|
.ux-nav-cta { color: #baff00; }
|
|
|
|
/* TOGGLE ICON */
|
|
|
|
.ux-menu {
|
|
width: unset;
|
|
height: 30px;
|
|
/* width: 30px; */
|
|
position: relative;
|
|
cursor: pointer;
|
|
background: unset;
|
|
box-shadow: unset;
|
|
border: unset;
|
|
}
|
|
|
|
.ux-header-actions .icon {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 19px;
|
|
transition: 0.3s;
|
|
top: 11px;
|
|
}
|
|
|
|
.close-icon {
|
|
opacity: 0;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.ux-menu.active .open-icon {
|
|
opacity: 0;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.ux-menu.active .close-icon {
|
|
opacity: 1;
|
|
transform: rotate(0);
|
|
}
|
|
|
|
/* RIGHT PANEL */
|
|
.contact-panel h4 {
|
|
color: black;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.contact-panel p {
|
|
color: black;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
.contact-panel {
|
|
position: fixed;
|
|
top: 100px;
|
|
right: -350px;
|
|
width: 320px;
|
|
background: #ffffff;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
transition: 0.4s ease;
|
|
z-index: 99;
|
|
}
|
|
|
|
/* OPEN STATE */
|
|
.contact-panel.active {
|
|
right: 40px;
|
|
}
|
|
.displayflexhead {
|
|
display: flex;
|
|
width: 62%;
|
|
}
|
|
|
|
.images {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin: 15px 0 30px;
|
|
}
|
|
|
|
.images img {
|
|
width: 90px;
|
|
height: 90px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.ux-build-swiper .swiper-slide {
|
|
width: 330px;
|
|
}
|
|
|
|
.swiper {
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.swiper-slide {
|
|
}
|
|
|
|
.swiper-slide-active {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
.existpadd {
|
|
margin-top: 30px;
|
|
}
|
|
.main-headingexit {
|
|
width: 90%;
|
|
}
|
|
.partners-wrapper {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 10px;
|
|
}
|
|
/* ITEM */
|
|
.partner-item {
|
|
height: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #fff;
|
|
transition: 0.3s;
|
|
border: 1px solid #EAEAEA;
|
|
border-radius: 10px;
|
|
}
|
|
/* REMOVE LAST BORDER */
|
|
.partner-item:last-child {
|
|
border-right: none;
|
|
}
|
|
/* IMAGE */
|
|
.partner-item img {
|
|
max-width: 120px;
|
|
opacity: 0.6;
|
|
transition: 0.3s;
|
|
}
|
|
/* HOVER */
|
|
.partner-item:hover img {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
.ux-navbar img {width: 100%;height: 100%;}
|
|
.ux-footer-left img {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
.ux-footer-social img {
|
|
width: 19px;
|
|
height: 19px;
|
|
}
|
|
|
|
.ux-header-actions button {
|
|
border: none;
|
|
background: unset;
|
|
}
|
|
.faq-wrapper {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
}
|
|
|
|
.faq-item {
|
|
border-bottom: 1px solid #e5e5e5;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.faq-question {
|
|
width: 100%;
|
|
background: none;
|
|
border: none;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.faq-icon {
|
|
font-size: 24px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.faq-item.active .faq-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.faq-answer {
|
|
overflow: hidden;
|
|
transition: max-height 0.4s ease;
|
|
}
|
|
|
|
.faq-answer p {
|
|
margin-top: 10px;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
|
|
.hero-img-box {
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.hero-img-box img {
|
|
width: 100%;
|
|
height: 370px;
|
|
object-fit: cover;
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
/* Hover effect */
|
|
.hero-img-box:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
.who-section {
|
|
padding: 70px 0;
|
|
}
|
|
.who-section p {font-size: 17px;}
|
|
.who-section .who-muted {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.global-section {
|
|
background: url(../images/globalout.png);
|
|
color: #fff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.global-section .small-title {
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.global-section .main-heading {
|
|
font-weight: 600;
|
|
color: white !important;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.global-section .desc {
|
|
color: #cbd5e1;
|
|
font-size: 16px;
|
|
line-height: 1.7;
|
|
max-width: 520px;
|
|
margin-top: 30px !important;
|
|
}
|
|
|
|
/* Highlight Box */
|
|
.highlight-box {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 14px 20px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgb(132 204 22 / 16%);
|
|
background: rgb(8 8 8 / 8%);
|
|
color: #a3e635;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.highlight-box i {
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Image Styling */
|
|
.image-box img {
|
|
border-radius: 16px;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.working-card {
|
|
background: #fff;
|
|
padding: 30px 30px;
|
|
border-radius: 16px;
|
|
position: relative;
|
|
min-height: 270px;
|
|
border: 1px solid #eee;
|
|
transition: all 0.3s ease;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.working-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.working-card .number {
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
color: #e5e5e5;
|
|
display: block;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.working-card p {
|
|
font-size: 15px;
|
|
color: #555;
|
|
line-height: 1.6;
|
|
}
|
|
.working-section {
|
|
padding: 80px 0;
|
|
}
|
|
.belief-section{
|
|
padding: 80px 0;
|
|
background: #FBFBFB;
|
|
}
|
|
.belief-card {
|
|
background: #FFFFFF;
|
|
border: 1px solid #F3E8E8;
|
|
backdrop-filter: blur(47px);
|
|
border-radius: 15px;
|
|
padding: 30px 24px;
|
|
min-height: 312px;
|
|
}
|
|
.belief-card h5 {
|
|
font-weight: 800;
|
|
}
|
|
.belief-card p {
|
|
margin-top: 60px;
|
|
}
|
|
.belief-card img {
|
|
margin: 0 0 30px;
|
|
}
|
|
.hero-img-boxup {
|
|
top: 51px;
|
|
margin-top: 60px;
|
|
} |