:root {
--font-size-xl: 5.375rem;
--font-size-lg: 3.5rem;
--font-size-md: 2.2rem;
--font-size-md-des: 1.3rem;
--font-size-sm: 1rem;
--font-size-base: 1.125rem;
--gap-lg: 3rem;
--gap-md: 2.5rem;
--gap-sm: 2.25rem;
--padding-xl: 10rem;
--padding-lg: 4.375rem;
--padding-md: 2.5rem;
--border-radius: 1.25rem;
--hero-img-width: 30.875rem;
--hero-img-width-lg: 25rem;
--hero-img-width-md: 20rem;
--hero-img-width-sm: 15rem;
--hero-img-height: 18.75rem;
--case-img-width: 27rem;
--case-img-height: 17.625rem;
--case-p-info: 1.4rem;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.service-section {
min-height: 100vh;
width: 100%;
position: relative; z-index: 1; } .service-bg-black {
max-width: 100vw;
min-height: 100vh;
background-color: black;
position: relative;
z-index: -1;
padding-top: 0;
padding-bottom: 0;
box-sizing: border-box;
}
.service-bg-cover {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain; background-position: top;
position: absolute;
top: 0;
} .s-media {
background-image: url(https://wyndigitalgroup.com/wp-content/uploads/2025/04/Media_Performance_1@2x-scaled.webp);
}
.s-creative {
background-image: url(https://wyndigitalgroup.com/wp-content/uploads/2025/04/Creative_Production@2x-scaled.webp);
}
.s-influ {
background-image: url(https://wyndigitalgroup.com/wp-content/uploads/2025/04/Influencer_Marketing@2x-scaled.webp);
}
.s-event {
background-image: url(https://wyndigitalgroup.com/wp-content/uploads/2025/04/Event_Organization@2x-scaled.webp);
}
.s-social {
background-image: url(https://wyndigitalgroup.com/wp-content/uploads/2025/04/Social_Monitoring@2x-scaled.webp);
}
.s-web {
background-image: url(https://wyndigitalgroup.com/wp-content/uploads/2025/04/Website_Development@2x-scaled-1.webp);
} .service-content {
font-family: "GothamMedium", sans-serif;
position: relative; margin: 0 var(--padding-lg);
padding-top: 40rem; padding-bottom: 6rem; display: flex;
flex-direction: column;
gap: var(--gap-md);
width: calc(100% - 2 * var(--padding-lg));
box-sizing: border-box;
z-index: 1;
}
.service-content h1 {
text-transform: uppercase;
font-size: var(--font-size-xl);
color: aliceblue;
}
.service-hero-container {
padding-top: 2rem;
display: flex;
justify-content: center;
gap: var(--gap-lg);
}
.service-container {
display: flex;
justify-content: center;
}
.hero-image {
width: var(--hero-img-width);
height: auto;
}
.hero-event {
width: 400px;
height: auto;
}
.hero-image img {
width: 100%;
height: 100;
}
.hero-arrow {
display: block;
width: 6.25rem;
}
.hero-arrow img {
width: 100%;
height: auto;
}
.service-description {
width: 100%;
max-width: 100%;
color: aliceblue;
font-size: var(--font-size-md-des);
font-family: "GothamBook", sans-serif;
word-wrap: break-word;
overflow-wrap: break-word;
padding-bottom: 2rem;
margin-top: 1.25rem;
}
.text-achievements-bold {
font-family: "GothamMedium", sans-serif;
display: inline-block;
}
.service-description p {
font-family: "GothamBook", sans-serif;
}
.service-description-list {
margin-top: 2rem;
}
.service-description-list ul {
display: flex;
flex-direction: column;
gap: 5px;
}
.service-type {
display: flex;
flex-direction: column;
}
.service-type h1 {
margin: 0;
} .case-container {
display: flex;
width: 100%;
min-height: 100%;
flex-direction: column;
justify-content: center;
align-items: center; gap: var(--gap-md);
}
.case-studies-header-text {
display: flex;
justify-content: center;
margin: 100px 0;
margin-top: 50px;
}
.case-studies-header-text h1 {
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-size: var(--font-size-xl);
padding: 0 !important;
margin: 0 !important;
outline: none !important;
font-family: "GothamBold", sans-serif;
}
.case-studies-header-text img {
margin-top: 7px;
height: 0.85em;
}
.rainbowV {
width: 5px;
height: 200px;
background: linear-gradient(
180deg,
#ffc502,
#88d04a,
#028dfe,
#425cf8,
#8336cd,
#fc7c0b,
#f93f14
);
}
.case-cta {
min-height: 300px;
margin: 2rem 0;
padding: 2rem;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
}
.case-cta p {
font-size: 2rem;
margin: 0.5rem 0;
}
.cta-img {
max-width: 100px;
width: 100%;
height: auto;
margin-top: 1rem;
}
@media (max-width: 1024px) {
.service-content h1 {
font-size: var(--font-size-lg);
}
.hero-image {
width: var(--hero-img-width-lg);
}
.hero-arrow {
display: block;
width: 5.25rem;
}
}
@media (max-width: 991px) {
.service-bg-black { }
.service-bg-cover {
background-size: contain;
}
.service-content {
margin: 0 var(--padding-md); }
.service-hero-container {
flex-direction: column;
align-items: center;
}
.hero-image {
width: var(--hero-img-width-md);
}
.hero-arrow {
display: none;
}
.case-cta p {
font-size: var(--font-size-sm);
}
.service-type {
flex-direction: row;
justify-content: center;
align-items: center; }
.service-content {
margin: 0 var(--padding-md);
width: calc(100% - 5rem);
box-sizing: border-box;
}
.service-description {
font-size: 1rem;
}
.service-content h1 {
font-size: 2.5rem;
}
}
@media (max-width: 900px) {
.service-content {
padding-top: 30rem;
}
}
@media (max-width: 820px) {
.service-content {  }
}
@media (max-width: 768px) {
.hero-image {
width: 200px;
}
}
@media (max-width: 600px) {
.service-hero-container {
padding-top: 0;
display: flex;
justify-content: center;
gap: var(--gap-sm);
}
.service-content h1 { font-size: var(--font-size-lg);
}
.service-content { padding-top: 10rem;
}
.service-type {
flex-direction: column;
align-items: flex-start;
}
.service-description {
margin-top: 1rem;
}
.service-description p {
margin: 1.5rem 0;
}
.service-description-list ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
.service-description-list ul li::marker {
font-size: 1.5em;
}
.text-achievements-bold {
margin-bottom: 5px;
}
}
@media (max-width: 480px) {
.hero-image { } .service-content h1 {
font-size: var(--font-size-md);
}
}
@media (max-width: 425px) { .service-content { }
}.case-web-container {
max-width: 100%;
width: 1300px;
min-height: 100%;
font-family: "GothamBold", sans-serif;
}
.case-content,
.case-influ-content {
width: 100%;
padding-bottom: 3rem;
position: relative;
}
.case-content ul li,
.case-influ-content ul li {
font-family: "GothamBook", sans-serif;
padding: 10px 0;
font-size: 1.2rem;
}
.case-header h4,
.influ-header h4 {
font-size: 5rem;
}
.case-header p,
.influ-header p {
font-size: 2.7rem;
}
.case-challenge,
.case-solution {
width: 490px;
}
.case-image {
position: absolute;
top: 20%;
left: 50%;
width: 600px;
}
.case-image img,
.influ-image img {
width: 100%;
height: 100%;
} .case-image-social {
position: absolute;
max-width: 290px;
border-radius: 1rem;
}
.image-1 {
top: 5%;
right: 40%;
z-index: 1;
}
.image-2 {
top: 30%;
right: 20%;
z-index: 2;
}
.image-3 {
top: 77%;
right: 40%;
z-index: 3;
}
.image-4 {
top: 50%;
right: 55%;
z-index: 3;
}.case-influ-container {
width: 100%;
min-height: 100%;
font-family: "GothamBold", sans-serif;
}
.case-influ-content {
display: flex;
flex-direction: row;
margin: 0 8rem;
}
.influ-header span {
font-size: 2.7rem;
}
.influ-image {
width: 700px;
}
.influ-image img {
width: 100%;
height: auto;
}
.travel-container,
.magnolai-container {
width: 100%;
height: 100vh; position: relative;
padding-bottom: 60rem;
}
.travel-section {
background-color: #000000;
padding: 50px 20px;
padding-bottom: 150px;
}
.magnolai-section {
padding: 50px 20px;
padding-bottom: 150px;
}
.travel-intro {
max-width: 700px;
margin-left: 8rem;
color: white;
}
.magnolai-intro {
max-width: 900px;
margin-left: 8rem;
color: rgb(0, 0, 0);
}
.travel-intro h1,
.magnolai-intro h1 {
font-size: 5rem;
}
.travel-intro p {
font-family: "GothamBook", sans-serif;
font-size: 1.2rem;
}
.magnolai-info {
font-family: "GothamBook", sans-serif;
font-size: 1.2rem;
position: absolute;
width: 450px;
right: 15%;
bottom: 10%;
}
.travel-wrapper,
.magnolai-wrapper {
position: relative;
display: inline-block; }
.rainbowH {
position: absolute;
left: 4%;
bottom: 15%;
width: 115px;
height: 3px;
background: linear-gradient(
90deg,
#ffc502,
#88d04a,
#028dfe,
#425cf8,
#8336cd,
#fc7c0b,
#f93f14
);
}
.rainbowH.mag {
left: 1%;
}
.travelImgGroup {
width: 100%;
height: 100%;
margin: 0 9rem;
}
.travelImgGroup img {
position: absolute;
width: 350px;
border-radius: 20px;
}
.travel-right {
top: 5%;
right: 15%;
}
.travel-left {
bottom: 5%;
}
.traveloka-info {
position: absolute;
bottom: 15%;
right: 10%;
width: 800px;
font-family: "GothamBook", sans-serif;
font-size: 1.2rem;
}
.magnolai-right {
position: absolute;
max-width: 100%;
height: auto;
width: 300px;
}
.magnolai-right {
top: 0;
right: 10%;
}
.magnolai-left {
position: absolute;
display: flex;
gap: 50px;
width: 300px;
top: 30%;
margin: 40px 0;
left: 10%;
}
.magnolai-left img {
width: 100%;
height: auto;
}.case-media-container {
max-width: 100%;
width: 1300px;
min-height: 100%;
font-family: "GothamBold", sans-serif;
}
.case-media-content {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
}
.media-header h4 {
font-size: 5rem;
}
.case-media-content ul li,
.sale-bottom ul li {
font-family: "GothamBook", sans-serif;
padding: 10px 0;
font-size: 1.2rem;
}
.media-header span {
font-size: 2.7rem;
}
.media-header .sub-label {
display: flex;
place-content: center;
margin-left: 20rem;
font-size: 3.7rem;
}
.case-image-media {
position: absolute;
max-width: 540px;
border-radius: 1rem;
}
.case-image-media img {
width: 100%;
height: auto;
}
.case-image-media.image-1 {
left: 35%;
}
.case-image-media.image-2 {
width: 17vw;
top: 0;
right: 2%;
}
.case-image-media.image-3 {
width: 15vw;
right: 3%;
top: 40%;
}
.sale-image-container {
display: flex;
flex-direction: column;
gap: 9px;
position: relative;
}
.sale-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-left: 20px;
}
.sale-bottom {
display: flex;
justify-content: start;
margin-left: 20px;
}
.sale-top .div1 {
width: 550px;
}
.sale-top .div2 {
width: 450px;
}
.sale-top .div3 {
width: 200px;
}
.sale-bottom .div4 {
width: 50%;
}
.sale-bottom .div5 {
position: absolute;
width: 700px;
bottom: 0;
right: 0;
transform: translate(10%, 20%);
}
.sale-image-container img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.rainbowH.medias {
width: 240px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}@font-face {
font-family: "GothamBold";
src: url(//wyndigitalgroup.com/wp-content/themes/themeWyn/assets/fonts/GothamBold-tight.woff2)
format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GothamMedium";
src: url(//wyndigitalgroup.com/wp-content/themes/themeWyn/assets/fonts/GothamMedium-tight.woff2)
format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GothamBook";
src: url(//wyndigitalgroup.com/wp-content/themes/themeWyn/assets/fonts/GothamBook-tight.woff2)
format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}  :root {
--header-font-size: 120px;
--header-font-size-md: 100px;
--header-font-size-sm: 80px;
--header-font-size-xs: 60px;
--header-font-size-xxs: 40px; --font-wyn-circle: 100px;
--font-bold: "GothamBold", sans-serif;
--font-medium: "GothamMedium", sans-serif;
--font-book: "GothamBook", sans-serif;
}  * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
padding: 0;
overflow-x: hidden !important;
width: 100vw;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
p {
text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
}
@media (prefers-reduced-motion: no-preference) {
html {
interpolate-size: allow-keywords;
}
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.4 !important;
}
h1 {
font-family: var(--font-bold);
font-size: var(--header-font-size);
}
h1.CHOOSE-text {
display: flex;
align-items: center;
}
p.text-why-detail {
line-height: 40px;
font-size: 20px;
}
p.lorem-wyn-text {
font-family: "GothamBook", sans-serif;
font-size: 33px;
font-weight: 400;
}
.blog-layout {
display: flex;
align-items: flex-start;
column-gap: 5rem;
}
.blog-content {
display: flex;
flex-direction: column;
row-gap: 2rem;
}
.blog-posts {
display: flex;
flex-direction: column;
row-gap: 2rem;
padding-bottom: 6rem;
} .lorem-wyn-text {
font-family: var(--font-book);
font-size: 30px;    text-align: start;
}
.lorem-wyn-text a {
display: inline;
text-decoration: none;
position: relative;
}
.lorem-wyn-text a::after {
content: "";
position: absolute;
left: 0;
bottom: -15px;
height: 2px;
width: 100%;
background-color: #000;
} .menu-active {
font-family: "GothamBold";
font-weight: bold;
display: flex;
align-items: center;
height: 100%;
padding: 10px 0;
}
.menu-other {
font-family: "GothamMedium";
font-size: 15px;
display: flex;
align-items: center;
height: 100%;
padding: 10px 0;
}
.navbar {
background-color: rgba(26, 26, 26, 255) !important; z-index: 2 !important;
}
.navbar-box {
display: flex;
gap: 2.3rem !important;
}
.nav-item.dropdown {
position: relative;
font-family: "GothamBook", sans-serif;
}
.nav-item.dropdown {
position: relative;
}
.b-mobile {
display: none !important;
}
.menu-list {
display: none;
position: absolute;
top: 100%;
right: 0;
min-width: 200px;
background: linear-gradient(135deg, #1e1e1e, #333);
border-radius: 8px;
padding: 12px 0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
z-index: 1000;
flex-direction: column;
text-align: right;
}
.nav-item.dropdown:hover .menu-list {
display: flex;
}
.spacer-our-clients {
margin-bottom: 20px;
}
.menu-list .dropdown-item {
padding: 12px 20px;
color: #ffffff;
text-decoration: none;
transition: background-color 0.3s, padding-right 0.3s;
font-size: 15px;
font-weight: 400;
text-align: right;
}
.menu-list .dropdown-item:hover {
background-color: rgba(255, 255, 255, 0.08);
padding-right: 26px;
color: #fff;
}
.nav-link {
padding: 7px 0 !important;
}
.nav-item {
position: relative; text-align: end;
margin-right: 10px;
}
.nav-item .nav-link.active {
position: relative;
}
.nav-item .nav-link.menu-active.active::after,
.nav-item .nav-link.menu-active::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: linear-gradient(
90deg,
#ffc502,
#88d04a,
#028dfe,
#425cf8,
#8336cd,
#fc7c0b,
#f93f14
);
transition: width 0.4s ease;
}
.navbar-nav > .nav-item > a.nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0%;
background: linear-gradient(
90deg,
#ffc502,
#88d04a,
#028dfe,
#425cf8,
#8336cd,
#fc7c0b,
#f93f14
);
transition: width 0.4s ease;
}
.navbar-nav > .nav-item > a.nav-link:hover::after {
width: 100%;
}
footer {
font-family: "GothamMedium";
font-weight: normal;
font-style: normal;
color: white;
background-color: rgba(26, 26, 26, 255);
padding: 20px;
width: 100%;
}
.custom-input {
background: transparent; border: 1px solid #666; border-radius: 10px; padding: 12px;
color: white;
}
.custom-input::placeholder {
color: #888;
}
.custom-input:focus {
border-color: #bbb;
outline: none;
}
h1.our-clients {
font-family: "GothamMedium", sans-serif;
font-size: var(--header-font-size);
display: flex;
align-items: center;
height: 100%;
padding: 0px 0;
justify-content: center;
}
h1.text-clients-win {
font-family: var(--font-medium);
font-size: var(--header-font-size-xxs);
}
.our-services-wrapper,
.head-text-logo-footer {
display: flex;
align-items: center;
justify-content: center;
}
.text-header-our-services,
.head-text-logo-footer > h1 {
font-family: var(--font-medium);
font-size: var(--header-font-size);
line-height: 1;
margin: 0;
}
#myImage {
height: 100px;
width: auto;
object-fit: contain;
display: inline-block;
position: relative;
}
p.text-not-agency {
font-family: var(--font-medium);
font-size: 40px;
align-items: start;
}
.containers-services {
display: grid;
grid-template-columns: repeat(6, 1fr);
justify-content: center;
gap: 10px;
}
img.wyn-circle-rgb {
width: var(--font-wyn-circle);
}
div.form-map {
margin-top: 100px;
}
div.wyn-layout-one {
background-color: rgba(26, 26, 26, 255);
color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
}
div.wyn-layout-two {
background-color: rgba(237, 235, 222, 255);
color: black;
min-height: 70vh;
padding: 4rem 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
div.layout-services {
width: 100%;
margin: 0 auto;
padding: 5px;
}
div.wyn-layout-three {
background-color: rgba(26, 26, 26, 255);
color: white;
min-height: 100vh;
padding: 10rem 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
div.wyn-layout-four {
background-color: rgba(237, 235, 222, 255);
color: black;
min-height: 100vh; display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
div.wyn-layout-five {
background-color: rgba(237, 235, 222, 255);
color: rgb(0, 0, 0); margin: 4rem auto;
margin-bottom: 0;
min-height: 100vh;
}
div.wyn-layout-six {
background-color: rgba(26, 26, 26, 255);
color: rgb(255, 255, 255);
min-height: 100vh;
padding: 5rem 0;
}
.our-clients-container {
background-color: rgba(237, 235, 222, 255);
border-radius: 20px;
color: rgb(0, 0, 0);
}
div.our-clients-box {
background-color: rgba(237, 235, 222, 255);
border-radius: 50px;
color: rgb(0, 0, 0);
margin: 50px;
}
h1.our-services {
font-family: var(--font-medium); display: flex;
align-items: center;
height: 100%;
padding: 10px 0;
justify-content: center;
}
h1.our-works {
font-family: var(--font-medium);
display: flex;
align-items: center;
height: 100%;
padding: 10px 0;
justify-content: center;
}
.wyn-bold-text {
margin: 0;
}
h1.outline-text {
font-family: var(--font-medium);
color: transparent;
-webkit-text-stroke: 1px rgb(0, 0, 0);
font-size: var(--header-font-size);
font-weight: regular;
display: flex;
align-items: center;
height: 100%;
justify-content: start;
margin: 0;
}
.div-text-spans {
font-family: var(--font-medium);
font-size: 20px;
}
.div-text-spans a {
display: flex;
flex-direction: column;
}
.container-logo {
width: 1590px !important;
}
.box-all {
width: 150px;
height: auto;
background-color: black;
color: white;
font-family: "GothamMedium", sans-serif;
font-size: 25px;
border-radius: 20px;
}
.notfound {
font-family: "GothamMedium", sans-serif;
font-size: 50px;
display: flex;
align-items: center;
height: 100%;
padding: 10px 0;
justify-content: center;
}
img.blink {
display: flex;
position: absolute;
top: -17%;
right: calc(9% - 3vw);
width: 150px;
}
swiper-container {
width: 100%;
padding-top: 50px;
background-color: transparent; }
swiper-slide {
width: 320px !important;
background-color: transparent;
height: 550px !important;
overflow: hidden;
border-radius: 20px !important;
outline: none !important;
border: none !important;
}
swiper-slide img {
display: block;
background-color: transparent;
width: 100%;
outline: none !important;
border: none !important;
}
swiper-slide .card {
background-color: transparent;
object-fit: cover;
outline: none !important;
border: none !important;
}
.controlBtn-blog {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
padding: 50px 0;
align-items: center;
gap: 10px;
}
.controlBtn-blog div {
width: 120px;
display: flex;
justify-content: end;
}
.controlBtn-blog div:nth-child(1) {
width: 60px;
}
.controlBtn-blog div:nth-child(2) {
width: 130px;
}
.controlBtn-blog img {
max-width: 100%;
cursor: pointer;
height: 100%;
}
#graphicBtn:hover {
color: aquamarine;
text-decoration: underline;
}
#googleMapBtn:hover {
color: aquamarine;
text-decoration: underline;
}
.swiper-pagination {
display: none !important;
}
.swiper-container-logo-mobile {
position: relative;
}
.swiper-container-logo-mobile .swiper-pagination-mobile {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.swiper-pagination-mobile .swiper-pagination-bullet {
background-color: transparent;
opacity: 1;
border: 1px solid #888;
} .swiper-pagination-mobile .swiper-pagination-bullet-active {
background-color: #888;
}
.card {
background-color: transparent; }
.mySwiper img {
filter: grayscale(100%);
opacity: 1;
transition: filter 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.mySwiper .swiper-slide-active img {
filter: grayscale(0%);
}
.head-text-logo {
display: flex;
justify-content: center;
align-items: center;
}
.head-text-logo span {
color: white;
text-transform: uppercase;
font-size: var(--header-font-size);
font-family: var(--font-bold);
} div.spacer-not-agency {
margin-top: 60px;
}
div.spacer-our-works {
margin-top: 50px;
}
.blog-image-container {
width: 100%;
max-width: 450px; border-radius: 2rem;
overflow: hidden;
aspect-ratio: 5 /6;
position: relative;
}
.blog-overlay {
position: absolute;
bottom: 0;
width: 100%;
padding: 1rem;
box-sizing: border-box;
background: rgba(0, 0, 0, 0);
}
.blog-line {
height: 1px;
background-color: white;
margin-bottom: 0.5rem;
}
.blog-caption {
display: flex;
align-items: center;
gap: 1.4rem;
color: white;
font-size: 2rem;
}
.blog-icon {
width: 35px;
height: 35px;
object-fit: contain;
}
.blog-title {
text-decoration: none;
color: white;
}
.blog-image-header {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: absolute;
top: 0;
left: 0;
}
div.mobile-content-services {
display: none;
}
.blog-text-list {
display: flex; align-items: center;
gap: 2.5rem;
padding: 5px 0;
}
.box-black {
background-color: #1a1a1a;
width: 100%;
height: 100%;
border-radius: 25px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
backface-visibility: hidden;
}
.logo-thumbnail {
width: 155px;
height: 155px;
object-fit: contain;
transition: filter 0.2s;
}
.map-container {
position: relative;
width: 100%;
max-width: 600px;
aspect-ratio: 4 / 3; overflow: hidden;
border-radius: 12px; }
.map-form {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
z-index: 1;
}
.frame-map {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: auto;
}
.frame-map img {
width: 96%;
height: 96%;
object-fit: cover;
border-radius: 25px;
display: grid;
place-self: center;
}
.frame-map {
width: 100%;
height: 100%;
background-image: linear-gradient(
to right,
#ffc502,
#88d04a,
#028dfe,
#425cf8,
#8336cd,
#fc7c0b,
#f93f14
);
display: grid;
}
.description {
width: 100%;
height: var(--height-description);
resize: none;
}
.address-logo img {
max-width: 100%;
height: auto;
}
.footer-wyn-logo {
display: none;
}
.swiper-container-logo-mobile {
display: none;
}
.desktop-view-services {
padding: 7rem 0;
}
.our-clients-logo-one {
display: grid;
grid-template-columns: repeat(7, 0fr);
justify-content: center;
align-items: center;  column-gap: 35px;
}
.swiper-container-logo-mobile {
display: none;
} @supports (-webkit-touch-callout: none) {
#myImage {  top: -6px;
}
}
html.android-device #myImage,
html.ios-mobile-device #myImage {
position: relative;
top: -3px !important;
}
.logo-footer-box img {
transition: filter 0.5s ease;
}
.logo-footer-box img:hover {
filter: brightness(0) saturate(100%) invert(35%) sepia(2%) saturate(2599%)
hue-rotate(169deg) brightness(105%) contrast(87%);
cursor: pointer;
}
.company-header {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background-color: #1a1a1a;
padding: 20px;
color: #ffffff;
}
.company-name {
font-size: 50px;
font-weight: bold;
margin: 0;
white-space: nowrap;
}
.company-logo-wrapper {
display: grid;
place-self: end;
}
.company-logo {
height: 10px;
width: auto;
}
.our-clients {
background-color: rgba(237, 235, 222, 255);
border-radius: 50px;
color: rgb(0, 0, 0);
margin: 20px 40px;
}
.logo-marquee {
display: none;
}
@media (min-width: 1025px) and (max-width: 1420px) {
div.containers-services {
display: grid;
grid-template-columns: repeat(3, 0fr);
gap: 10px;
justify-items: center;
align-items: center;
row-gap: 50px;
place-self: center;
}
div.containers-services > div {
padding: 0 50px !important;
}
.our-clients-logo-one {
grid-template-columns: repeat(6, 1fr);
}
}
@media (min-width: 1025px) and (max-width: 1279px) {
#myImage { height: 90px;
}
}
@media (min-width: 1025px) and(max-width: 1200px) {
.wyn-bold-text h1,
h1.US-text {
font-size: 80px;
display: flex;
align-items: center;
justify-content: start;
}
.blog > #myImage { height: 70px !important;
}
.margin-why {
margin-left: 165px;
width: 75px;
}
.CHOOSE-text > #myImage { height: 65px;
}
.our-clients-logo-one {
grid-template-columns: repeat(5, 1fr);
}
}
@media (max-width: 1200px) { .logo-marquee {
display: block;
overflow: hidden;
width: 100%;
}
.marquee {
display: grid;
grid-template-rows: repeat(2, 0.2fr);
grid-auto-flow: column;
width: fit-content;
backface-visibility: hidden;
}
.swiper-container-logo { }
p.text-why-detail {
line-height: 40px;
font-size: 15px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.nav-link {
display: flex;
align-items: center;
justify-content: center;
}
h1.text-clients-win { }
h1.text-header-our-services {
font-size: 80px;
display: flex;
align-items: center;
justify-content: center;
}
div.containers-services {
display: grid;
grid-template-columns: repeat(3, 0fr); row-gap: 50px;
justify-items: center;
align-items: center;
place-self: center;
}
div.containers-services > div {
padding: 0 30px !important;
}
.footer-wyn-logo {
display: block;
}
h1.WHY-text {
font-size: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.wyn-bold-text h1,
h1.US-text {
font-size: 60px;
display: flex;
align-items: center;
justify-content: start;
} img.margin-why {
margin-left: 75px;
width: 50px;
}
img.margin-why {
display: none;
}
p.text-why-choose-us {
text-align: center;
font-size: 15px;
}
p.text-not-agency {
text-align: center;
font-size: 25px;
}
h1.our-works,
.head-text-logo-footer h1 {
font-size: 80px;
display: flex;
align-items: center;
justify-content: center;
}
h1.outline-text {
font-family: var(--font-medium);
color: transparent;
-webkit-text-stroke: 0.5px rgb(0, 0, 0);
font-size: var(--header-font-size-xxs);
font-weight: regular;
display: flex;
align-items: center;
height: 100%;
padding: 10px 0;
justify-content: start;
font-size: 80px;
}
.lorem-wyn-text {
font-family: var(--font-book);
font-size: 18px;
font-weight: 400; text-decoration-thickness: 2px;
}
h1.our-clients {
font-family: "GothamMedium", sans-serif;
font-size: 80px;
display: flex;
align-items: center;
height: 100%;
padding: 0px 0;
justify-content: center;
}
div.mobile-content-services {
display: block;
} img.img-our-services {
width: 70% !important;
}
div.swiper-container-logo { }
div.address-logo {
display: none;
}
h6.wyn-bold {
text-align: center;
}
span.wyn-medium {
text-align: center;
font-size: 12px;
} .controlBtn-blog {
display: none;
}
.controlBtn-blog img {
display: none;
}
.our-clients-logo-one {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 1024px) {
h1.text-clients-win {
font-size: 22px;
}
.blog-image-container {
max-width: 370px;
}
#myImage { height: 70px;
}
.CHOOSE-text > #myImage { height: 55px;
}
}
@media (max-width: 992px) {
.blink { }
.swiper-container-logo {
display: none;
}
.swiper-container-logo-mobile {
display: flex;
justify-content: center;
align-items: center;
}
.our-clients-logo-one-our-mobile {
display: grid;
grid-template-columns: repeat(5, 1fr);
padding-bottom: 1rem;
column-gap: 3px;
}
.logo-thumbnail {
width: 140px;
height: 140px;
}
}
@media (max-width: 820px) {
div.controlBtn {
display: none;
}
.blog-layout {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3rem;
}
.blog-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
.blog-text-list {
display: flex;
align-items: center; }
h1.outline-text {
font-family: var(--font-medium);
color: transparent;
-webkit-text-stroke: 1px rgb(0, 0, 0);
font-size: var(--header-font-size-xxs);
font-weight: regular;
display: flex;
align-items: center;
height: 100%;
padding: 10px 0;
justify-content: center;
}
h1.outline-text {
font-size: 80px;
}
}
@media (max-width: 768px) { .logo-thumbnail {
width: 120px;
height: 120px;
margin: 20px 0;
margin-top: 0;
}
img.blink {
top: -7%;
right: calc(19% - 3vw);
width: 100px;
}
h1.text-clients-win {
font-size: 20px;
}
.marquee {
will-change: transform;
backface-visibility: hidden;
}
h1.outline-text {
font-size: 60px;
}
#myImage {
height: 50px;
}
.swiper-container-logo-mobile {
display: flex;
justify-content: center;
align-items: center;
}
.b-desktop {
display: none !important;
}
.b-mobile {
display: block !important;
}
.our-clients-logo-one-our-mobile {
display: grid;
grid-template-columns: repeat(5, 1fr);
padding-bottom: 1rem;
column-gap: 3px;
}
div.containers-services > div {
padding: 0 50px !important;
}
}
@media (min-width: 375px) and (max-width: 768px) {
.wyn-medium-text { }
.nav-link {
display: flex;
align-items: center;
justify-content: center;
}
h1.text-clients-win { }
h1.text-header-our-services {
font-size: 60px;
display: flex;
align-items: center;
justify-content: center;
}
div.containers-services {
display: grid;
grid-template-columns: repeat(2, 0fr);
justify-items: center;
align-items: center;
place-self: center;
gap: 0px;
row-gap: 50px;
}
.box-wyn-pic { }
.footer-wyn-logo {
display: block;
}
h1.WHY-text {
font-size: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.wyn-bold-text h1,
h1.US-text,
.head-text-logo-footer h1 {
font-size: 60px;
display: flex;
align-items: center;
justify-content: center;
} img.margin-why {
margin-left: 75px;
width: 50px;
}
img.margin-why {
display: none;
}
p.text-why-choose-us {
text-align: center;
font-size: 15px;
}
p.text-not-agency {
text-align: center;
font-size: 25px;
}
h1.our-works {
font-size: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.lorem-wyn-text {
font-family: var(--font-book);
font-size: 25px;
font-weight: 400; text-decoration-thickness: 2px;
}
h1.our-clients {
font-family: "GothamMedium", sans-serif;
font-size: 50px;
display: flex;
align-items: center; padding: 0px 0;
justify-content: center;
}
h1.our-clients > #myImage {
height: 45px;
}
div.mobile-content-services {
display: block;
}
img.img-our-services {
width: 70% !important;
}
div.address-logo {
display: none;
}
h6.wyn-bold {
text-align: center;
}
span.wyn-medium {
text-align: center;
font-size: 12px;
}
div.logo-footer-box {
text-align: center;
}
.controlBtn-blog {
display: none;
}
.controlBtn-blog img {
display: none;
}
}
@media (max-width: 600px) {
.marquee {
display: flex;
width: fit-content;
backface-visibility: hidden;
}
p.text-why-detail {
line-height: 30px;
font-size: 16px;
text-align: center;
}
.box-wyn-pic {
width: 115px !important;
height: 170px !important;
}
div.wyn-layout-three {
min-height: 90vh;
}
.blog-content {
margin: 0 40px;
}
div.containers-services > div {
padding: 0px 15px !important;
width: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.our-clients-logo-one-our-mobile {
display: grid;
grid-template-columns: repeat(5, 1fr);
padding-bottom: 1rem;
column-gap: 3px;
}
.our-clients-logo-one-our-mobile .logo-thumbnail {
display: block;
width: 65px;
height: 65px;
margin: 0 auto;
}
div.wyn-layout-five {
min-height: 50vh;
}
.mySwiperHomeWork {
margin-bottom: 5rem;
}
.swiper-pagination-mobile .swiper-pagination-bullet {
width: 4px;
height: 4px;
}
}
@media (max-width: 480px) {
#myImage {
height: 35px;
}
div.wyn-layout-three {
padding: 5rem 0;
}
div.wyn-layout-four {
min-height: 0;
}
img.blink {
top: -5%;
right: calc(16% - 3vw);
width: 60px;
}
.blog-image-container {
max-width: 300px;
}
.blog-posts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin: 0 auto;
}
.blog-text-list {
display: flex;
gap: 1rem;
}
.desktop-view-services {
padding: 0;
}
}
@media (min-width: 320px) and (max-width: 480px) {
.nav-link {
display: flex;
align-items: center;
justify-content: center;
}
.wyn-medium-text { } h1.text-clients-win { }
.event {
width: 85% !important;
}
h1.text-header-our-services {
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.CHOOSE-text > #myImage {
height: 30px;
}
.our-clients > #myImage { height: 35px;
}
div.containers-services { }
.footer-wyn-logo {
display: block;
}
h1.WHY-text {
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.head-text-logo-footer h1 {
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.wyn-bold-text h1 {
font-size: 35px;
}
.wyn-bold-text {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
} img.margin-why {
margin-left: 75px;
width: 50px;
}
img.margin-why {
display: none;
}
p.text-why-choose-us {
text-align: center;
font-size: 15px;
}
p.text-not-agency {
text-align: center;
font-size: 20px;
}
h1.our-works {
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.arrow-blog {
width: 15px;
}
h1.outline-text {
font-family: var(--font-medium);
color: transparent;
-webkit-text-stroke: 1px rgb(0, 0, 0);
font-size: var(--header-font-size-xxs);
font-weight: regular;
display: flex;
align-items: center;
height: 100%;
padding: 10px 0;
justify-content: start;
}
.lorem-wyn-text {
font-family: var(--font-book);
font-size: 16px;
font-weight: 400; text-decoration-thickness: 2px;
}
h1.our-clients {
font-family: "GothamMedium", sans-serif;
font-size: 32px;
display: flex;
align-items: center;
height: 100%;
padding: 0px 0;
justify-content: center;
}
div.mobile-content-services {
display: block;
} img.img-our-services {
width: 70% !important;
}
div.address-logo {
display: none;
}
h6.wyn-bold {
text-align: center;
}
span.wyn-medium {
text-align: center;
font-size: 12px;
}
div.logo-footer-box {
text-align: center;
}
.controlBtn-blog {
display: none;
}
.controlBtn-blog img { }
div.wyn-layout-six {
min-height: 0;
padding: 10px 0;
}
.our-clients {
margin: 20px;
border-radius: 20px;
}
}
@media (max-width: 425px) {
h1.text-clients-win {
font-size: 15px;
}
.marquee {
animation: marquee-left 50s linear infinite;
will-change: transform;
backface-visibility: hidden;
}
div.wyn-layout-one {
min-height: 85vh;
}
.blog-text-list {
display: flex;
align-items: center;
}
.blog-title {
font-size: 25px;
}
.blog-icon {
width: 25px;
height: 25px;
}
}
@media (max-width: 375px) {
h1.text-clients-win { }
h1.our-clients {
font-size: 30px;
}
h1.our-clients > #myImage {
height: 30px;
}
div.containers-services {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
gap: 0px;
row-gap: 50px;
place-self: center;
}
.our-clients-logo-one-our-mobile .logo-thumbnail {
display: block;
width: 50px;
height: 50px;
margin: 0 auto;
}
div.containers-services > div {
width: 170px;
}
}
@keyframes marquee-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}:root {
--arrow-size: 3.125rem; --career-text-size: 2.1875rem; --right-box-text-size: 1.875rem; --header-size: 7.5rem; }
#careers-section {
font-family: "GothamBold", sans-serif;
background-color: #edebde;
}
#head-careers {
display: flex;
place-content: center;
background-color: #1a1a1a;
height: 40vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
#head-careers h1 {
color: white;
text-transform: uppercase;
font-weight: bold;
font-size: var(--header-size);
}
.arrow-head {
width: var(--arrow-size);
height: var(--arrow-size);
}
.arrow-head img {
max-width: 100%;
width: 3.125rem; }
.careers-container {
margin: 3.3rem auto;
display: flex;
flex-direction: column;
gap: 0.725rem; justify-content: center;
align-items: center;
color: white;
}
.careers-item:before {
content: "";
position: absolute;
inset: 0;
padding: 0.3em;
background: linear-gradient(
90deg,
#ffc502,
#88d04a,
#028dfe,
#425cf8,
#8336cd,
#fc7c0b,
#f93f14
);
border-radius: inherit;
--m: conic-gradient(#000 0 0);
mask: var(--m) content-box exclude, var(--m);
pointer-events: none;
outline: transparent;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 0;
}
.careers-item {
width: 100%;
height: 10rem; display: grid;
grid-template-columns: 0.2fr 2fr 1fr;
justify-content: center;
align-items: center;
text-transform: uppercase;
background-color: #333333;
border-radius: 1.25rem; position: relative;
overflow: hidden;
cursor: pointer;
}
.careers-item:hover::before {
opacity: 1;
}
.careers-item:hover {
background-color: transparent;
}
.left-box {
width: 6.25rem; margin: 1.25rem; transition: all 0.3s ease;
}
.left-box img {
width: 100%;
height: auto;
-webkit-filter: invert(100%);
filter: invert(100%);
}
.careers-name {
padding-left: 1.25rem; width: 100%;
height: 90%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
gap: 0.3125rem; font-size: var(--career-text-size);
border-right: 2px solid #666;
}
.right-box {
display: flex;
font-size: var(--right-box-text-size);
justify-content: center;
}
.right-box > p {
padding: 0;
margin: 0;
font-family: "GothamBook", sans-serif;
}
.careers-name span,
.right-box p {
transition: color 0.3s ease;
}
.arrow-bottom {
width: 100%;
height: 10vh;
padding: 3.125rem 0; display: grid;
place-content: center;
}
.arrow-bottom img {
width: var(--arrow-size);
}
.careers-item:hover .left-box img {
content: url(https://wyndigitalgroup.com/wp-content/uploads/2025/03/wyn.png);
-webkit-filter: invert(0%); filter: invert(0%);
width: 7.5rem; height: 7.5rem; }
.careers-item:hover .careers-name span {
color: #1a1a1a;
}
.careers-item:hover .right-box p {
color: #1a1a1a;
}
.popup-content {
background-color: #edebde;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.popup-header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
border-bottom: 4px solid transparent;
border-image: linear-gradient(
0.25turn,
#ffc502,
#88d04a,
#028dfe,
#425cf8,
#8336cd,
#fc7c0b,
#f93f14
);
border-image-slice: 1;
width: 100%;
}
.popup-header h5 {
margin: 0 auto;
text-align: center;
font-size: 2rem;
}
.popup-header h6 {
font-size: 1rem;
}
.popup-header button {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
.popup-content {
font-family: "GothamBold", sans-serif;
padding: 10px;
z-index: 2050 !important;
}
.popup-content p {
font-family: "GothamBook", sans-serif;
}
.popup-content form {
display: grid;
}
.popup-content form div {
font-family: "GothamBook", sans-serif;
}
.popup-content form button {
place-self: center;
background-color: #000000 !important;
}
.upload-text {
position: relative;
}
.file-size-note {
display: block;
margin-top: 5px; }
.upload-box {
position: relative;
border: 1px solid #666;
border-radius: 10px;
padding: 40px 20px;
cursor: pointer;
transition: border-color 0.3s, background-color 0.3s;
min-height: 100px;
}
.upload-label {
position: absolute;
top: 12px;
left: 16px;
color: #888;
}
.upload-icon {
background-color: #cbcbcb;
border-radius: 50%;
padding: 12px;
font-size: 20px;
color: #888; display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
}
.upload-text {
margin-top: 10px;
font-size: 1rem;
color: #888;
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.about-us-layout-One {
background-color: rgba(26, 26, 26, 255);
height: auto;
}
.about-us-layout-Two {
background-color: rgba(237, 235, 222, 255);
height: auto;
}
.about-us-layout-Three {
background-color: rgba(237, 235, 222, 255);
height: auto;
}
.text-about { color: white;
}
.text-aboutus-detail {
font-size: 17px;
font-family: var(--font-book);
} .head-text-logo {
display: flex;
align-items: center;
justify-content: center;
}
.head-text-logo>h1 {
color: white;
text-transform: uppercase;
font-size: var(--header-font-size);
font-family: var(--font-bold);
line-height: 1;
margin: 0;
}
.text-at {
font-family: "GothamBold", sans-serif;
font-size: 50px;
font-weight: bold;
color: transparent;
font-size: 80px;
-webkit-text-stroke: 1px black; }
h1.company-header-text {
font-family: "GothamMedium", sans-serif;
font-size: 80px;
font-weight: regular;
}
h1.milestone-header-text {
font-family: "GothamMedium", sans-serif;
font-weight: regular;
font-size: 100px;
display: flex;
align-items: center;
}
h1.company-culture-header-text {
font-family: "GothamMedium", sans-serif;
font-weight: bold;
font-size: 100px;
display: flex;
align-items: center;
height: 100%;
}
h3.text-number {
font-family: "GothamMedium", sans-serif;
font-weight: bold;
font-size: clamp(24px, 5vw, 50px);
background-color: rgb(0, 0, 0);
color: white;
text-align: center;
padding: 10px;
width: clamp(150px, 40vw, 200px);
border-radius: 20px;
}
div.text-milestone {
font-family: "GothamBook", sans-serif;
font-size: 25px;
}
div.spacer {
margin-bottom: 50px;
}
p.company-detail-text {
font-family: "GothamBook", sans-serif;
color: rgb(0, 0, 0);
font-size: 30px;
}
p.company-year-text {
font-family: "GothamBook", sans-serif;
color: rgb(0, 0, 0);
font-size: 50px;
font-weight: bold;
}
img.line-img {
margin-bottom: 50px;
}
p.company-culture-detail-text {
font-family: "GothamBook", sans-serif;
color: rgb(0, 0, 0);
font-size: 30px;
}
.text-achievements {
font-family: "GothamMedium", sans-serif;
color: rgb(0, 0, 0);
font-size: 100px;
}
.video-part {
background-color: rgb(134, 138, 138);
height: 500px;
width: 1300px;
border-radius: 50px;
}
.img-achievements {
background-color: rgb(122, 122, 122);
width: 250px;
height: 200px;
border-radius: 20px;
}
.company-culture-img {
background-color: rgb(122, 122, 122);
width: 600px;
height: 800px;
border-radius: 50px;
}
.text-us {
font-family: "GothamBold", sans-serif;
color: white;
font-size: 120px;
font-weight: bold;
color: transparent;
-webkit-text-stroke: 2px white;
font-family: Arial, sans-serif;
}
.img-about {
font-size: 120px;
display: flex;
align-items: center;
height: 100%;
padding: 10px 0;
justify-content: center;
}
.text-detail-aboutus {
font-family: "GothamBook";
color: white;
font-size: 30px;
text-wrap: pretty;
}
.text-young-blood {
font-size: 20px;
}
b.text-achievements-bold {
font-family: "GothamBook", sans-serif;
font-weight: bold;
color: rgb(0, 0, 0);
font-size: 25px;
}
h1.outline-text-us {
color: transparent;
-webkit-text-stroke: 1px rgb(255, 255, 255);
}
.partnership-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10rem;
padding: 1rem;
}
.partnership-item {
flex: 1 1 150px;
max-width: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.partner-section {
padding: 50px 20px;
}
.partner-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
border-top: 1px solid transparent; border-bottom: 1px solid transparent;
max-width: 1800px;
margin: 0 auto; height: 200px;
}
.partner-item {
display: flex;
justify-content: center;
align-items: center;
padding: 30px;
background-color: transparent;
}
.mobile-part {
display: none;
}
.mobile-line {
display: none;
}
.timeline {
position: relative;
margin: 50px auto;
max-width: 900px;
padding: 0 20px;
}
.timeline-line-img {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
z-index: 0;
pointer-events: none;
height: 100%;
}
.timeline-item {
position: relative;
width: 50%;
padding: 20px 30px;
box-sizing: border-box;
z-index: 1;
}
.timeline-item.left {
left: 0;
text-align: right;
}
.timeline-item.right {
left: 50%;
text-align: left;
}
.year-label {
font-size: 24px;
font-weight: bold;
background: black;
color: white;
padding: 5px 15px;
display: inline-block;
border-radius: 5px;
margin-bottom: 10px;
}
.partner-item img {
max-height: 60px;
max-width: 100%;
object-fit: contain;
}
.partnership-item img {
max-width: 100%;
height: auto;
object-fit: contain;
}
#myImage-about {
height: 110px;
width: auto;
object-fit: contain;
display: inline-block;
position: relative;
}
.mobile-circle-size {
display: none;
}
.mobile-circle {
display: none;
}
@supports (-webkit-touch-callout: none) {
#myImage-about {  top: -6px;
}
}
html.android-device #myImage-about,
html.ios-mobile-device #myImage-about {
position: relative;
top: -3px !important;
}
@media (max-width: 1440px) {
.partnership-container {
gap: 5rem;
}
}
@media (max-width: 1200px) {
.partnership-container {
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0rem;
}
.text-achievements {
font-size: 60px;
}
h1.company-header-text {
font-size: 50px;
}
h3.text-number {
border-radius: 10px;
}
.head-text-logo h1 {
font-size: 80px;
}
#myImage-about {
height: 80px;
}
.text-young-blood {
margin-top: 25px !important;
font-size: 20px;
}
.partner-item {
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
background-color: transparent;
}
.partner-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
border-top: 1px solid transparent; border-bottom: 1px solid transparent;
max-width: 1800px;
margin: 0 auto; height: 220px;
}
.img-year {
width: 90px;
}
.text-aboutus-detail {
font-size: 12px;
}
} @media (max-width: 768px) {
.text-young-blood {
font-size: 14px;
}
.img-year {
width: 60px;
}
.text-aboutus-detail {
font-size: 12px;
}
.partner-section {
padding: 0px 0px;
}
}
@media (max-width: 480px) {
.circle-size {
width: 35px;
}
.text-achievements {
font-size: 30px;
}
.size-img {
width: 75px;
}
.text-young-blood {
font-size: 16px;
}
h1.company-header-text {
font-size: 30px;
}
h1.text-black {
font-size: 35px !important;
}
.head-text-logo {
font-size: 40px;
}
.partner-item img {
max-width: 280%;
}
.img-fluid {
max-width: 90%;
height: auto;
}
.desktop-circle {
display: none;
}
.mobile-circle {
display: block;
}
.partner-section {}
.partner-grid {
display: none;
}
.mobile-part {
display: block;
}
.img-year {
width: 85px;
}
.desktop-line {
display: none;
}
.mobile-line {
display: block;
}
.circle-size-desktop {
display: none;
}
.head-text-logo>h1 {
color: white;
text-transform: uppercase;
font-size: 50px;
font-family: var(--font-bold);
line-height: 1;
margin: 0;
}
#myImage-about {
height: 50px;
width: auto;
object-fit: contain;
display: inline-block;
position: relative;
}
.timeline-line-img {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
z-index: 0;
pointer-events: none;
height: 100%;
}
.timeline {
position: relative;
margin: 50px auto;
max-width: 900px;
padding: 0 0px;
}
.timeline-item {
position: relative;
width: 50%;
padding: 0px 0px;
box-sizing: border-box;
z-index: 1; }
.box-logo {
width: 200px;
}
.box-linetext {
width: 190px;
font-size: 12px;
font-family: var(--font-book);
}
.box-imgyear {
width: 200px;
}
.box-logobox {
width: 200px;
}
.box-logo-right {
margin-left: 20px;
}
.box-imgyear-right {
margin-left: 15px;
}
.box-linetext-right {
margin-left: 16px;
font-size: 12px;
font-family: var(--font-book);
}
.box-logobox-right {
margin-left: 10px;
}
}
@media (max-width: 460px) {
.circle-size {
width: 35px;
}
.text-achievements {
font-size: 30px;
}
.size-img {
width: 75px;
}
.text-young-blood {
font-size: 15px;
}
h1.company-header-text {
font-size: 30px;
}
h1.text-black {
font-size: 35px !important;
}
.head-text-logo {
font-size: 40px;
}
.partner-item img {
max-width: 280%;
}
.img-fluid {
max-width: 90%;
height: auto;
}
.desktop-circle {
display: none;
}
.mobile-circle {
display: block;
}
.circle-size-desktop {
display: none;
}
.partner-section {}
.partner-grid {
display: none;
}
.mobile-part {
display: block;
}
.img-year {
width: 85px;
}
.desktop-line {
display: none;
}
.mobile-line {
display: block;
}
.head-text-logo>h1 {
color: white;
text-transform: uppercase;
font-size: 50px;
font-family: var(--font-bold);
line-height: 1;
margin: 0;
}
#myImage-about {
height: 50px;
width: auto;
object-fit: contain;
display: inline-block;
position: relative;
}
.timeline-line-img {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
z-index: 0;
pointer-events: none;
height: 100%;
}
.timeline {
position: relative;
margin: 50px auto;
max-width: 900px;
padding: 0 0px;
}
.timeline-item {
position: relative;
width: 50%;
padding: 0px 0px;
box-sizing: border-box;
z-index: 1; }
.box-logo {
width: 190px;
}
.box-linetext {
width: 190px;
font-size: 11px;
font-family: var(--font-book);
}
.box-imgyear {
width: 200px;
}
.box-logobox {
width: 200px;
}
.box-logo-right {
margin-left: 20px;
}
.box-imgyear-right {
margin-left: 15px;
}
.box-linetext-right {
margin-left: 16px;
font-size: 11px;
font-family: var(--font-book);
}
.box-logobox-right {
margin-left: 10px;
}
}
@media (max-width: 440px) {
.circle-size {
width: 35px;
}
.text-achievements {
font-size: 30px;
}
.size-img {
width: 75px;
}
.text-young-blood {
font-size: 12px;
}
h1.company-header-text {
font-size: 30px;
}
h1.text-black {
font-size: 35px !important;
}
.head-text-logo {
font-size: 40px;
}
.partner-item img {
max-width: 280%;
}
.img-fluid {
max-width: 90%;
height: auto;
}
.desktop-circle {
display: none;
}
.mobile-circle {
display: block;
}
.circle-size-desktop {
display: none;
}
.partner-section {}
.partner-grid {
display: none;
}
.mobile-part {
display: block;
}
.img-year {
width: 85px;
}
.desktop-line {
display: none;
}
.mobile-line {
display: block;
}
.head-text-logo>h1 {
color: white;
text-transform: uppercase;
font-size: 50px;
font-family: var(--font-bold);
line-height: 1;
margin: 0;
}
#myImage-about {
height: 50px;
width: auto;
object-fit: contain;
display: inline-block;
position: relative;
}
.timeline-line-img {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
z-index: 0;
pointer-events: none;
height: 100%;
}
.timeline {
position: relative;
margin: 50px auto;
max-width: 900px;
padding: 0 0px;
}
.timeline-item {
position: relative;
width: 50%;
padding: 0px 0px;
box-sizing: border-box;
z-index: 1; }
.box-logo {
width: 180px;
}
.box-linetext {
width: 180px;
font-size: 11px;
font-family: var(--font-book);
}
.box-imgyear {
width: 190px;
}
.box-logobox {
width: 200px;
}
.box-logo-right {
margin-left: 20px;
}
.box-imgyear-right {
margin-left: 15px;
}
.box-linetext-right {
margin-left: 16px;
font-size: 11px;
font-family: var(--font-book);
}
.box-logobox-right {
margin-left: 10px;
}
}
@media (max-width: 420px) {
.circle-size {
width: 35px;
}
.text-achievements {
font-size: 30px;
}
.size-img {
width: 75px;
}
.text-young-blood {
font-size: 12px;
}
h1.company-header-text {
font-size: 30px;
}
h1.text-black {
font-size: 35px !important;
}
.head-text-logo {
font-size: 40px;
}
.partner-item img {
max-width: 280%;
}
.img-fluid {
max-width: 90%;
height: auto;
}
.desktop-circle {
display: none;
}
.mobile-circle {
display: block;
}
.circle-size-desktop {
display: none;
}
.partner-section {}
.partner-grid {
display: none;
}
.mobile-part {
display: block;
}
.img-year {
width: 85px;
}
.desktop-line {
display: none;
}
.mobile-line {
display: block;
}
.head-text-logo>h1 {
color: white;
text-transform: uppercase;
font-size: 50px;
font-family: var(--font-bold);
line-height: 1;
margin: 0;
}
#myImage-about {
height: 50px;
width: auto;
object-fit: contain;
display: inline-block;
position: relative;
}
.timeline-line-img {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
z-index: 0;
pointer-events: none;
height: 100%;
}
.timeline {
position: relative;
margin: 50px auto;
max-width: 900px;
padding: 0 0px;
}
.timeline-item {
position: relative;
width: 50%;
padding: 0px 0px;
box-sizing: border-box;
z-index: 1; }
.box-logo {
width: 170px;
}
.box-linetext {
width: 170px;
font-size: 11px;
font-family: var(--font-book);
}
.box-imgyear {
width: 180px;
}
.box-logobox {
width: 170px;
}
.box-logo-right {
margin-left: 20px;
}
.box-imgyear-right {
margin-left: 15px;
}
.box-linetext-right {
margin-left: 16px;
font-size: 11px;
font-family: var(--font-book);
}
.box-logobox-right {
margin-left: 10px;
}
}
@media (max-width: 410px) {
.circle-size {
width: 35px;
}
.text-achievements {
font-size: 30px;
}
.size-img {
width: 75px;
}
.text-young-blood {
font-size: 12px;
}
h1.company-header-text {
font-size: 30px;
}
h1.text-black {
font-size: 35px !important;
}
.head-text-logo {
font-size: 40px;
}
.partner-item img {
max-width: 280%;
}
.img-fluid {
max-width: 90%;
height: auto;
}
.desktop-circle {
display: none;
}
.mobile-circle {
display: block;
}
.circle-size-desktop {
display: none;
}
.partner-section {}
.partner-grid {
display: none;
}
.mobile-part {
display: block;
}
.img-year {
width: 85px;
}
.desktop-line {
display: none;
}
.mobile-line {
display: block;
}
.head-text-logo>h1 {
color: white;
text-transform: uppercase;
font-size: 50px;
font-family: var(--font-bold);
line-height: 1;
margin: 0;
}
#myImage-about {
height: 50px;
width: auto;
object-fit: contain;
display: inline-block;
position: relative;
}
.timeline-line-img {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
z-index: 0;
pointer-events: none;
height: 100%;
}
.timeline {
position: relative;
margin: 50px auto;
max-width: 900px;
padding: 0 0px;
}
.timeline-item {
position: relative;
width: 50%;
padding: 0px 0px;
box-sizing: border-box;
z-index: 1; }
.box-logo {
width: 160px;
}
.box-linetext {
width: 160px;
font-size: 11px;
font-family: var(--font-book);
}
.box-imgyear {
width: 170px;
}
.box-logobox {
width: 160px;
}
.box-logo-right {
margin-left: 20px;
}
.box-imgyear-right {
margin-left: 15px;
}
.box-linetext-right {
margin-left: 16px;
font-size: 11px;
font-family: var(--font-book);
}
.box-logobox-right {
margin-left: 10px;
}
}
@media (max-width: 390px) {
.circle-size {
width: 35px;
}
.text-achievements {
font-size: 30px;
}
.size-img {
width: 75px;
}
.text-young-blood {
font-size: 12px;
}
h1.company-header-text {
font-size: 30px;
}
h1.text-black {
font-size: 35px !important;
}
.head-text-logo {
font-size: 40px;
}
.partner-item img {
max-width: 280%;
}
.img-fluid {
max-width: 90%;
height: auto;
}
.desktop-circle {
display: none;
}
.mobile-circle {
display: block;
}
.circle-size-desktop {
display: none;
}
.partner-section {}
.partner-grid {
display: none;
}
.mobile-part {
display: block;
}
.img-year {
width: 85px;
}
.desktop-line {
display: none;
}
.mobile-line {
display: block;
}
.head-text-logo>h1 {
color: white;
text-transform: uppercase;
font-size: 50px;
font-family: var(--font-bold);
line-height: 1;
margin: 0;
}
#myImage-about {
height: 50px;
width: auto;
object-fit: contain;
display: inline-block;
position: relative;
}
.timeline-line-img {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
z-index: 0;
pointer-events: none;
height: 100%;
}
.timeline {
position: relative;
margin: 50px auto;
max-width: 900px;
padding: 0 0px;
}
.timeline-item {
position: relative;
width: 50%;
padding: 0px 0px;
box-sizing: border-box;
z-index: 1; }
.box-logo {
width: 160px;
}
.box-linetext {
width: 160px;
font-size: 11px;
font-family: var(--font-book);
}
.box-imgyear {
width: 170px;
}
.box-logobox {
width: 160px;
}
.box-logo-right {
margin-left: 20px;
}
.box-imgyear-right {
margin-left: 15px;
}
.box-linetext-right {
margin-left: 16px;
font-size: 11px;
font-family: var(--font-book);
}
.box-logobox-right {
margin-left: 10px;
}
}
@media (max-width: 380px) {
.circle-size {
width: 35px;
}
.text-achievements {
font-size: 30px;
}
.size-img {
width: 75px;
}
.text-young-blood {
font-size: 12px;
}
h1.company-header-text {
font-size: 30px;
}
h1.text-black {
font-size: 35px !important;
}
.head-text-logo {
font-size: 40px;
}
.partner-item img {
max-width: 280%;
}
.img-fluid {
max-width: 90%;
height: auto;
}
.desktop-circle {
display: none;
}
.mobile-circle {
display: block;
}
.circle-size-desktop {
display: none;
}
.partner-section {}
.partner-grid {
display: none;
}
.mobile-part {
display: block;
}
.img-year {
width: 85px;
}
.desktop-line {
display: none;
}
.mobile-line {
display: block;
}
.head-text-logo>h1 {
color: white;
text-transform: uppercase;
font-size: 50px;
font-family: var(--font-bold);
line-height: 1;
margin: 0;
}
#myImage-about {
height: 50px;
width: auto;
object-fit: contain;
display: inline-block;
position: relative;
}
.timeline-line-img {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
z-index: 0;
pointer-events: none;
height: 100%;
}
.timeline {
position: relative;
margin: 50px auto;
max-width: 900px;
padding: 0 0px;
}
.timeline-item {
position: relative;
width: 50%;
padding: 0px 0px;
box-sizing: border-box;
z-index: 1; }
.box-logo {
width: 150px;
}
.box-linetext {
width: 150px;
font-size: 10px;
font-family: var(--font-book);
}
.box-imgyear {
width: 160px;
}
.box-logobox {
width: 130px;
}
.box-logo-right {
margin-left: 20px;
}
.box-imgyear-right {
margin-left: 15px;
}
.box-linetext-right {
margin-left: 16px;
font-size: 11px;
font-family: var(--font-book);
}
.box-logobox-right {
margin-left: 10px;
}
}
@media (max-width: 360px) {
.circle-size {
width: 35px;
}
.text-achievements {
font-size: 30px;
}
.size-img {
width: 75px;
}
.text-young-blood {
font-size: 15px;
}
h1.company-header-text {
font-size: 30px;
}
h1.text-black {
font-size: 35px !important;
}
.head-text-logo {
font-size: 40px;
}
.partner-item img {
max-width: 280%;
}
.img-fluid {
max-width: 90%;
height: auto;
}
.desktop-circle {
display: none;
}
.mobile-circle {
display: block;
}
.circle-size-desktop {
display: none;
}
.partner-section {}
.partner-grid {
display: none;
}
.mobile-part {
display: block;
}
.img-year {
width: 85px;
}
.desktop-line {
display: none;
}
.mobile-line {
display: block;
}
.head-text-logo>h1 {
color: white;
text-transform: uppercase;
font-size: 50px;
font-family: var(--font-bold);
line-height: 1;
margin: 0;
}
#myImage-about {
height: 50px;
width: auto;
object-fit: contain;
display: inline-block;
position: relative;
}
.timeline-line-img {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
z-index: 0;
pointer-events: none;
height: 100%;
}
.timeline {
position: relative;
margin: 50px auto;
max-width: 900px;
padding: 0 0px;
}
.timeline-item {
position: relative;
width: 50%;
padding: 0px 0px;
box-sizing: border-box;
z-index: 1; }
.box-logo {
width: 140px;
}
.box-linetext {
width: 140px;
font-size: 10px;
font-family: var(--font-book);
}
.box-imgyear {
width: 150px;
}
.box-logobox {
width: 125px;
}
.box-logo-right {
margin-left: 20px;
}
.box-imgyear-right {
margin-left: 15px;
}
.box-linetext-right {
margin-left: 16px;
font-size: 11px;
font-family: var(--font-book);
}
.box-logobox-right {
margin-left: 10px;
}
}
@media (max-width: 350px) {
.circle-size {
width: 35px;
}
.text-achievements {
font-size: 30px;
}
.size-img {
width: 75px;
}
.text-young-blood {
font-size: 15px;
}
h1.company-header-text {
font-size: 30px;
}
h1.text-black {
font-size: 35px !important;
}
.head-text-logo {
font-size: 40px;
}
.partner-item img {
max-width: 280%;
}
.img-fluid {
max-width: 90%;
height: auto;
}
.desktop-circle {
display: none;
}
.mobile-circle {
display: block;
}
.circle-size-desktop {
display: none;
}
.partner-section {}
.partner-grid {
display: none;
}
.mobile-part {
display: block;
}
.img-year {
width: 85px;
}
.desktop-line {
display: none;
}
.mobile-line {
display: block;
}
.head-text-logo>h1 {
color: white;
text-transform: uppercase;
font-size: 50px;
font-family: var(--font-bold);
line-height: 1;
margin: 0;
}
#myImage-about {
height: 50px;
width: auto;
object-fit: contain;
display: inline-block;
position: relative;
}
.timeline-line-img {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
z-index: 0;
pointer-events: none;
height: 100%;
}
.timeline {
position: relative;
margin: 50px auto;
max-width: 900px;
padding: 0 0px;
}
.timeline-item {
position: relative;
width: 50%;
padding: 0px 0px;
box-sizing: border-box;
z-index: 1; }
.box-logo {
width: 130px;
}
.box-linetext {
width: 130px;
font-size: 9px;
font-family: var(--font-book);
}
.box-imgyear {
width: 140px;
}
.box-logobox {
width: 125px;
}
.box-logo-right {
margin-left: 20px;
}
.box-imgyear-right {
margin-left: 15px;
}
.box-linetext-right {
margin-left: 16px;
font-size: 9px;
font-family: var(--font-book);
}
.box-logobox-right {
margin-left: 10px;
}
}
@media (max-width: 330px) {
.circle-size {
width: 35px;
}
.text-achievements {
font-size: 30px;
}
.size-img {
width: 75px;
}
.text-young-blood {
font-size: 13px;
}
h1.company-header-text {
font-size: 30px;
}
h1.text-black {
font-size: 35px !important;
}
.head-text-logo {
font-size: 40px;
}
.partner-item img {
max-width: 280%;
}
.img-fluid {
max-width: 90%;
height: auto;
}
.desktop-circle {
display: none;
}
.mobile-circle {
display: block;
}
.circle-size-desktop {
display: none;
}
.partner-section {}
.partner-grid {
display: none;
}
.mobile-part {
display: block;
}
.img-year {
width: 85px;
}
.desktop-line {
display: none;
}
.mobile-line {
display: block;
}
.head-text-logo>h1 {
color: white;
text-transform: uppercase;
font-size: 50px;
font-family: var(--font-bold);
line-height: 1;
margin: 0;
}
#myImage-about {
height: 50px;
width: auto;
object-fit: contain;
display: inline-block;
position: relative;
}
.timeline-line-img {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
z-index: 0;
pointer-events: none;
height: 100%;
}
.timeline {
position: relative;
margin: 50px auto;
max-width: 900px;
padding: 0 0px;
}
.timeline-item {
position: relative;
width: 50%;
padding: 0px 0px;
box-sizing: border-box;
z-index: 1; }
.box-logo {
width: 120px;
}
.box-linetext {
width: 130px;
font-size: 9px;
font-family: var(--font-book);
}
.box-imgyear {
width: 140px;
}
.box-logobox {
width: 125px;
}
.box-logo-right {
margin-left: 20px;
}
.box-imgyear-right {
margin-left: 15px;
}
.box-linetext-right {
margin-left: 16px;
font-size: 9px;
font-family: var(--font-book);
}
.box-logobox-right {
margin-left: 10px;
}
}*,
*::before,
*::after {
box-sizing: border-box;
}
body {
width: 100%;
min-height: 100vh;
background-color: #edebde;
}
:root {
--border-radius-box: 10px;
--gap-box: 15px;
--big-gap-box: 10px;
}
.work-section {
}
.our-work-head {
display: flex;
place-content: center;
background-color: #1a1a1a;
height: 50vh;
gap: 20px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.head-text-logo {
display: flex;
justify-content: center;
align-items: center;
}
.our-work-head h1 {
color: white;
text-transform: uppercase;
font-weight: bold;
font-size: 120px;
}
.head-text-logo img { }
.ourwork-text-header {
font-family: "GothamBold", sans-serif;
font-weight: bold;
font-size: 100px;
}
.text-header {
font-family: "GothamBold", sans-serif;
font-weight: bold;
font-size: 100px;
}
.text-detail {
font-family: "GothamBook", sans-serif;
font-weight: bold;
font-size: 20px;
}
.work-container {
display: grid;
grid-template-columns: repeat(4, 0.1fr);
grid-template-rows: repeat(3, 1fr);
gap: var(--gap-box);
width: 100%;
min-height: 100vh;
justify-content: center;
align-items: center;
margin: 30px 0;
}
.category-btn {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
padding: 20px 0;
}
.work-btn {
padding: 5px 20px;
}
.work-btn:nth-child(1) {
border-right: 1px solid #1a1a1a;
}
.category-btn button,
.work-btn button {
font-family: "GothamBook";
background-color: transparent;
font-weight: bold;
outline: transparent;
padding: 3px 30px;
border-radius: 20px;
text-transform: capitalize;
transition: all 0.1s linear;
}
.category-btn button {
border: 1px solid white;
color: white;
}
.work-btn button {
border: 1px solid #1a1a1a;
color: #1a1a1a;
font-size: 13px;
}
.work-btn button:hover {
background-color: #1a1a1a;
border: 1px solid transparent;
outline: transparent;
padding: 3px 30px;
color: rgb(255, 255, 255);
}
.category-btn button:hover {
background-color: white;
border: 1px solid transparent;
outline: transparent;
padding: 3px 30px;
color: rgb(0, 0, 0);
}
.work-item {
width: 300px;
height: 300px;
background: lightgray;
padding: 20px;
border-radius: var(--border-radius-box);
cursor: pointer;
position: relative;
}
.work-item:hover {
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 100%
);
transform: scale(1.1);
transition: all 0.3s linear;
box-shadow: -2px -1px 14px 3px rgba(83, 79, 79, 0.75);
-webkit-box-shadow: -2px -1px 14px 3px rgba(83, 79, 79, 0.75);
-moz-box-shadow: -2px -1px 14px 3px rgba(83, 79, 79, 0.75);
z-index: 1;
}
.work-img {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%); padding-top: 10px;
width: 80%;
transition: opacity 0.2s linear;
opacity: 0;
gap: 5px;
display: flex;
justify-content: start;
flex-direction: column;
align-items: start;
}
.work-img span:last-child {
font-size: 10px;
}
.work-item:hover .work-img {
opacity: 1;
}
.work-img span {
font-family: "GothamBook", sans-serif;
font-weight: bold;
font-size: 14px;
text-align: center;
text-transform: uppercase;
color: white;
}
#work-picture {
width: 100%;
height: 100%;
}
.swiper-container.mySwiperWork { }
.mySwiperWork { }
.swiper-container {
width: 100%;  margin: auto;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
#work-picture h6 {
font-size: 20px;
}
.popup-work {
width: 100%;
height: 100%;
}
.work-text {
max-width: 100%;
width: 700px;
place-self: center;
}
.work-text p {
font-size: 15px;
}
.workControlBtn.works {
padding: 0 0;
}
.work-control-btn {
display: flex;
justify-content: center;
align-items: center;
}
.work-slide {
width: 700px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box; }
.work-video,
.work-slide img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 20px;
}
.work-btn button.active {
background-color: #000;
color: #fff;
}:root { --primary-bg: rgba(237, 235, 222, 255);
--secondary-bg: rgba(26, 26, 26, 255);
--text-color: #fff;
--button-color: #fff;
--img-bg: rgb(108, 108, 108);
--card-bg: #e0e0e0;
--bullet-color: black;
--bullet-active-color: transparent; --font-primary: "GothamBold", sans-serif;
--font-secondary: "GothamBook", sans-serif; --header-font-size: 120px;
--button-font-size: 20px;
--button-font-size-md: 16px;
--button-font-size-sm: 12px;
--detail-font-size: 15px;
--card-width: 300px;
--card-width-md: 200px;
--card-width-sm: 190px;
--card-width-ssm: 140px;
--blog-img-height: 600px;
--bullet-size: 15px;
}
.blogs-section {
background-color: var(--primary-bg);
}
#blogWheel {
height: 110px;
width: auto;
object-fit: contain;
display: inline-block;
position: relative;
margin-bottom: 10px;
}
@supports (-webkit-touch-callout: none) {
#blogWheel {  top: -6px;
}
}
html.android-device #blogWheel,
html.ios-mobile-device #blogWheel {
position: relative;
top: -3px !important;
}
div.bg-blogs-list {
background-color: #1a1a1a;
color: white;
height: auto;
}
div.blogs-layout-one {
background-color: var(--secondary-bg) !important;
display: flex;
justify-content: center;
align-items: center;
height: auto;
flex-direction: column;
}
.head-text-logo-blogs {
display: flex;
justify-content: center;
align-items: center;
}
.head-text-logo-blogs h1 {
color: white;
text-transform: uppercase;
font-size: 120px;
font-family: "GothamBold", sans-serif;
}
.blog-btn {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-direction: column;
margin: 0 auto;
margin-top: 2rem;
}
.blogs-text-button {
font-family: var(--font-primary);
font-weight: bold;
font-size: var(--button-font-size);
color: var(--button-color);
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
}
.blogs-text-button button {
padding: 3px 40px;
}
.blog-mobile-button {
display: none;
}
div.blogs-layout-two {
background-color: var(--primary-bg);
min-height: auto;
padding: 30px 0;
}
.img-blogs {
background-color: var(--img-bg);
padding: 30px;
border-radius: 20px;
width: 350px;
height: 300px;
}
h1.blogs-detail-text {
font-family: var(--font-primary);
font-weight: bold;
font-size: var(--detail-font-size);
}
.blog-container {
width: 100%;
min-height: 100%;
display: flex;
justify-content: center !important;
padding-top: 100px;
padding-bottom: 50px;
}
.blog-img {
border-radius: 50px;
overflow: hidden;
position: relative;
display: flex;
max-height: 650px;
}
.blog-img a {
width: 100%;
height: 100%;
display: block;
}
.blog-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.blog-info {
position: absolute;
display: flex;
flex-direction: column;
gap: 20px;
bottom: 2%;
color: white;
width: 100%;
padding: 20px;
}
.blog-line {
width: 100%;
height: 1px;
background-color: white;
}
.blog-item {
display: flex;
gap: 20px;
align-items: center;
}
.blog-item img {
width: 50px;
}
.blog-item a {
font-size: 30px;
font-family: var(--font-secondary);
}
.card-blog {
text-align: center;
background-color: transparent;
border: transparent;
border-radius: 0% !important;
display: flex;
justify-content: center;
align-items: center;
}
.custom-border-end:not(:nth-child(3n)) {
border-right: 3px solid #e0e0e0;
}
.last-child {
border: transparent;
}
.card-img {
width: var(--card-width);
height: var(--card-width);
background-color: var(--card-bg);
border-radius: 10px;
margin-bottom: 15px; overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.card-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-title {
width: var(--card-width);
font-size: 1.5rem;
margin-bottom: 10px;
font-family: var(--font-primary);
}
.card-text {
width: var(--card-width);
font-size: 1.4rem;
max-width: 100%;
overflow-wrap: break-word;
text-overflow: ellipsis;
white-space: normal;
padding: 0 10px;
}
.mySwiper-blog {
width: 80%;
}
.bullets {
width: 100%;
display: flex;
justify-content: center;
gap: 20px;
}
.bullets div {
width: var(--bullet-size);
height: var(--bullet-size);
border-radius: 50%;
background-color: var(--bullet-color);
border: 1px solid var(--bullet-color);
cursor: pointer;
}
.bullets div.active {
background-color: var(--bullet-active-color);
}
.blog-control-btn {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
padding: 70px 0;
}
.blog-control-btn div:first-child {
width: 50px;
}
.blog-control-btn div:last-child {
width: 100px;
}
.blog-control-btn img {
width: 100%;
height: 100%;
}
.swiper-pagination-blog .swiper-pagination-bullet {
background-color: #ffffff;
opacity: 0.5;
transition: all 0.3s ease;
}
.swiper-pagination-blog .swiper-pagination-bullet:hover {
opacity: 0.8;
}
.swiper-pagination-blog .swiper-pagination-bullet-active {
background-color: #0364ff;
opacity: 1;
}
@media (max-width: 1200px) {
.blogs-text-button {
font-size: var(--button-font-size-md);
}
.blogs-text-button button {
padding: 3px 20px;
}
}
@media (max-width: 1024px) {
.card-img {
width: var(--card-width-md);
height: var(--card-width-md);
}
}
@media screen and (max-width: 992px) {
.card-title {
width: 250px;
font-size: 1.2rem;
}
}
@media (max-width: 768px) {
.blogs-text-button button {
font-size: var(--button-font-size-sm);
}
.blog-img {
aspect-ratio: 16/9;
border-radius: 20px;
}
.blog-item {
gap: 10px;
}
.blog-item img {
width: 30px;
}
.blog-item a {
font-size: 18px;
}
.blog-info {
padding: 10px;
gap: 10px;
}
.head-text-logo-blogs h1 {
font-size: 80px;
}
#blogWheel {
height: 70px;
}
.card-text {
font-size: 1rem;
}
}
@media (max-width: 720px) {
.custom-border-end:nth-child(2n + 1) {
border-right: 3px solid #e0e0e0 !important;
}
.custom-border-end:nth-child(2n) {
border-right: none !important;
}
}
@media (max-width: 600px) {
.blogs-text-button {
display: none;
row-gap: 8px;
column-gap: 5px;
}
.blogs-text-button button {
padding: 2px 10px;
}
.all-first button {
padding: 2px 25px;
}
.blog-mobile-button {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
@media screen and (max-width: 575px) { .mySwiper-blog {
width: 90%;
}
.card-img {
width: 170px;
height: 170px;
}
.card-title {
font-size: 18px;
width: 180px;
}
.card-text {
font-size: 12px;
}
}
@media screen and (max-width: 480px) {
.blog-img {
border-radius: 10px;
}
.blog-item img {
width: 20px;
}
.blog-item a {
font-size: 14px;
}
}
@media (max-width: 425px) {
.head-text-logo-blogs h1 {
font-size: 60px;
}
.blog-btn {
gap: 8px;
}
#blogWheel {
height: 55px;
}
.card-img {
width: 140px;
height: 140px;
}
}
@media (max-width: 375px) {
#blogWheel {
height: 55px;
margin-bottom: 0px;
}
.card-img {
width: 120px;
height: 120px;
}
.card-title {
font-size: 15px;
width: 150px;
}
}.typewriter {
width: fit-content;
text-align: center;
background-color: #1a1a1a;
margin: 2rem auto;
}
.typewriter h1 {
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 0.15em;
animation: typing 3.5s steps(40, end) forwards;
position: relative; border-right: none;  margin-top: 30px;
}
.typewriter h1::after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 3px;
height: 100%;
background-image: linear-gradient(to bottom,
#ffc502,
#88d04a,
#028dfe,
#425cf8,
#8336cd,
#fc7c0b,
#f93f14);
animation: blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink-caret {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.group-hand {
transform-style: preserve-3d;
position: relative;
pointer-events: none;
z-index: 1;
max-width: 50%;
height: 100%; }
.hand-wyn {
width: auto;
}
.hand-wyn img {
width: 100%;
height: auto;
object-fit: cover;
place-self: center;
backface-visibility: hidden;
}
.text-circle,
.text-circle span {
transform-style: preserve-3d;
position: absolute;
}
.text-circle {
background-color: #fff;
animation: animateText 17s linear infinite;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-circle span {
top: 0;
left: 0;
font-weight: 700;
background: transparent;
color: #ffffff;
font-size: 5.5vw;
transform-origin: center;
transform: rotateY(calc(var(--i) * 18deg)) translateZ(23vw);  text-transform: uppercase; }
@keyframes animateText {
0% {
transform: perspective(1000px) rotateY(1turn) rotateX(-10deg);
}
100% {
transform: perspective(1000px) rotateY(0deg) rotateX(-10deg);
}
}
.box-wyn-pic {
width: 185px;
height: 270px;
display: flex;
place-self: center;
}
.image-box {
width: 100%;
height: 100%;
place-self: center;
}
.website,
.creative,
.event,
.influencer,
.media,
.social { position: absolute; }
.media {
transform: rotate(-10deg) scale(1.22);
}
.influencer {
transform: translateX(10%) scale(1.5);
}
.creative {
transform: rotate(-10deg) scale(1.15);
}
.event {
width: 95%;
transform: translateY(-1%);
}
.social {
width: 100%;
transform: translateX(10%) scale(1.3);
}
.website {
transform: translateX(2%) scale(1.25) rotate(-9deg);
}
.img-fluid-2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.img-fluid-2 {
opacity: 0;
z-index: -1;
}  .modal-img {
width: 100% !important;
height: auto !important;
}
.box-client {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
overflow: hidden;
}
.container-logo {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 30px;
justify-content: center !important;
align-items: center !important;
width: fit-content !important;
margin: 0 auto !important;
}
.container-logo div {
width: 188px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.our-gap {
gap: 70px;
}
.swiper-container-logo {
width: 100%;
}
.swiper-container-logo .container-logo.swiper-slide {
opacity: 0 !important;
outline: none;
border: none;
}
.container-logo.swiper-slide.swiper-slide-active {
opacity: 1 !important;
}
.controlBtn,
.workControlBtn {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
padding: 50px 0;
align-items: center;
gap: 10px;
}
.controlBtn div {
width: 120px;
display: flex;
justify-content: end;
}
.workControlBtn div {
width: 70px;
display: flex;
justify-content: end;
}
.controlBtn div:nth-child(1) {
width: 60px;
}
.controlBtn div:nth-child(2) {
width: 130px;
}
.workControlBtn div:nth-child(1) {
width: 50px;
}
.workControlBtn div:nth-child(2) {
width: 120px;
}
.controlBtn img,
.workControlBtn img {
max-width: 100%;
cursor: pointer;
height: 100%;
}
.div-text-spans a {
text-decoration: none;
color: #1a1a1a;
}
.div-text-spans a:hover {
text-decoration: underline;
}
.mobile-view-service {
display: none;
} .address-logo {
width: 25%;
}            @media (min-width: 1600px) {
.services-custom-border {
padding: 2rem !important;
}
}
@media (min-width: 1900px) {
.services-custom-border {
padding: 2.5rem !important;
}
}
@media screen and (max-width: 1440px) {}
@media screen and (max-width: 1400px) {}
@media screen and (max-width: 1300px) {}
@media (max-width: 1024px) {
.swiper-wrapper {
transition-timing-function: linear !important;
}
}
@media screen and (max-width: 1060px) {}
@media screen and (max-width: 800px) {}
@media screen and (max-width: 680px) {}
@media (max-width: 425px) {
.group-hand {
max-width: 70%;
height: 100%; }
.hand-wyn {
display: flex;
justify-content: center;
align-items: center;
}
}:root {
--contact-primary-bg: #1a1a1a;
--contact-secondary-bg: #edebde;
--input-bg-contact: #cccccc;
--button-bg-contact: #cfd0d2;
--text-color-contact: white;
--button-text-color: #1a1a1a;
--border-radius: 0.875rem;
--paddingContact: 6rem;
--paddingInput: 1.875rem;
--gap-contact: 1.875rem;
--margin-contact: 1.875rem;
--width-logo: 6.25rem;
--width-map: 38.625rem;
--height-map: 33.75rem;
--margin-top-header: 4.25rem;
--button-margin-left: 1.875rem;
--height-description: 12.875rem;
}
.contact-section {
width: 100%;
min-height: 100vh;
padding: 10rem auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: var(--contact-primary-bg);
}
.header-contact {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: var(--margin-top-header) 0; color: var(--text-color-contact);
padding: 0 var(--paddingContact);
padding-right: 5rem;
position: relative;
}
.footer-text-bold {
font-family: "GothamBold", sans-serif;
font-size: 40px;
}
.contact-logo {
position: absolute;
display: block;
width: var(--width-logo);
place-content: center;
right: 7%;
}
.contact-logo img {
width: 100%;
}
.contact-logo-mobile {
display: none;
position: absolute;
}
.contact-map {
width: var(--width-map); border-radius: var(--border-radius);
overflow: hidden;
display: grid; justify-content: center;
align-items: center;
}
.optionMap {
font-family: "GothamMedium", sans-serif;
}
.contact-map img {
width: 97%;
height: 97%;
object-fit: cover;
place-self: center;
}
.map-frame {
max-width: 100%;
max-height: 100%;
width: 700px;
}
.contact-container {
width: 100%;
height: auto;
display: flex;
justify-content: center;
margin: 0 auto;
padding: 1rem var(--paddingContact);
color: var(--text-color-contact);
gap: var(--gap-contact);
}
.form-container {
max-width: 1200px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: var(--gap-contact);
padding-bottom: 5rem;
}
.form-container button {
background-color: #cecfd1; color: var(--button-text-color);
font-family: "GothamBold", sans-serif;
}
.input-section { width: 100%;  border-radius: var(--border-radius);
height: 100%;
}
.form-container form input { border: 1px solid #666 !important;
outline: none;
border: transparent;
}
.contact-container textarea { border: 1px solid #666 !important;
outline: none;
border: transparent;
}
.description {
width: 100%;
height: var(--height-description);
resize: none;
}
input::placeholder {
font-family: "GothamBook", sans-serif; font-size: 16px; color: gray; font-style: italic; }
.text-button {
font-family: "GothamBold", sans-serif; font-size: 16px; }
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
.logo-footer-box img {
transition: filter 0.5s ease;
}
.logo-footer-box img:hover {
filter: brightness(0) saturate(100%) invert(35%) sepia(2%) saturate(2599%)
hue-rotate(169deg) brightness(105%) contrast(87%);
cursor: pointer;
}
@media (max-width: 1024px) {
:root {
--width-map: 100%;
--height-map: 25rem;
--paddingContact: 7rem;
--gap-contact: 1.5rem;
}
.contact-logo {
display: none;
}
.header-contact {
flex-direction: column;
gap: 1rem;
padding-right: var(--paddingContact);
text-align: center;
}
.contact-container {
flex-direction: column;
align-items: center;
padding: 0 var(--paddingContact);
}
.contact-map {
width: 100%;
height: 100%; }
.map-frame {
max-width: 100%;
max-height: 100%;
}
}
@media (max-width: 768px) {
:root {
--paddingContact: 3rem;
--gap-contact: 1rem;
--width-logo: 4rem;
}
.footer-text-bold {
font-size: 28px;
text-align: center;
}
.form-container button {
margin-left: 0;
align-self: center;
}
.description {
height: 12rem;
}
}
@media (max-width: 440px) {
.text-footer-box p {
font-size: 18px !important;
}
.logo-footer-box img {
width: 2rem;
}
.header-contact {
padding: 0;
margin: 2rem 0;
}
.footer-text-bold {
font-size: 18px;
}
#graphicBtn,
#googleMapBtn {
font-size: 12px;
}
.custom-input {
padding: 8px;
font-size: 14px;
}
.custom-input::placeholder {
font-size: 14px;
}
.form-container > form > div:last-child {
display: grid;
place-content: center;
}
.form-container button {
font-size: 14px;
}
.footer-text-bold {
position: relative;
display: inline-block;
}
.contact-logo-mobile {
display: block;
position: absolute;
right: -30px;
top: -30px;
}
.contact-logo-mobile img {
display: block;
height: 35px;
}
}
@media (max-width: 375px) {
.footer-text-bold {
font-size: 15px;
}
}footer {
background-color: #1a1a1a;
color: #f1f1f1;
font-family: "GothamBook", sans-serif;
padding: 40px 20px;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 2fr 1.5fr;
column-gap: 3rem;
align-items: start;
}
.footer-logo img {
width: 170px;
}
.footer-two-text-wyn {
font-size: 14px;
line-height: 1.8;
color: #f1f1f1;
}
.footer-contact img {
width: 20px;
height: 20px;
vertical-align: middle;
margin-right: 10px;
}
.text-footer {
display: flex;
}
.text-footer a {
text-decoration: none;
color: white; transition: all 0.4s ease;
position: relative;
} .text-footer:hover a {
background-image: linear-gradient(
90deg,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
background-size: 300%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbowText 3s linear infinite;
transform: translateX(3px);
}
@keyframes rainbowText {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
@media (max-width: 1024px) {
.footer-container {
display: grid;
grid-template-columns: 2fr 3fr 1.2fr;
column-gap: 3rem;
align-items: start;
}
}
@media (max-width: 768px) {
.footer-container {
display: grid;
grid-template-columns: 1fr 2.5fr 1.2fr;
column-gap: 3rem;
align-items: start;
}
}
@media (max-width: 600px) {
.footer-logo {
padding: 2rem 0;
}
.footer-logo img {
width: 200px;
}
.footer-container {
grid-template-columns: 1fr;
text-align: center;
padding: 0 1rem;
row-gap: 1rem;
}
.footer-contact {
display: flex;
flex-direction: column;
align-items: start;
margin: 0 auto;
}
.footer-contact img {
margin-right: 6px;
}
}@media (min-width: 320px) and (max-width: 480px) {
nav.container-fluid {
}
}
@media (min-width: 481px) and (max-width: 768px) {
}
@media (min-width: 769px) and (max-width: 1024px) {
}
@media (min-width: 1025px) and (max-width: 1279px) {
#myImage { }
h1.our-services {
font-family: "GothamMedium", sans-serif;
font-size: 100px !important;
display: flex;
align-items: center;
height: 100%;
padding: 10px 0;
justify-content: center;
}
h1.our-clients {
font-size: 120px;
}
h1.outline-text {
font-size: 90px !important;
}
.margin-why {
margin-left: 222px;
}
.box-text-why { }
.services-custom-border {
border: none;
}
}
@media (min-width: 1280px) and (max-width: 1920px) { #myImage { }
h1.our-clients {
font-size: 120px;
}
.margin-why {
margin-left: 222px;
}
.box-text-why { }
} @media (min-width: 1420px) {
.services-custom-border {
border-right: 3px solid rgb(218, 218, 218);
}
.border-last {
border-right: none;
}
} @media (max-width: 1420px) {
.services-custom-border {
border-right: 3px solid rgb(218, 218, 218);
}
.border-four {
border-left: none;
}
.border-three,
.border-last {
border-right: none;
}
}
@media (min-width: 1024px) and (max-width: 1420px) {
.services-custom-border {
padding: 2rem !important;
}
} @media (max-width: 768px) {
.services-custom-border {
border: none;
}
.border-one,
.border-three,
.border-five {
border-right: 3px solid rgb(218, 218, 218);
}
}
@media (max-width: 480px) {
.services-custom-border { }
}