* {
font-family: 'Cairo', sans-serif;
}
.bg-dark {
background-color: #363d47 !important;
}
.btn-warning {
background-color: #138589 !important;
border-color: #138589 !important;
color: #fff !important;
}
.btn-warning:hover {
background-color: #fff !important;
border-color: #138589 !important;
color: #138589 !important;
}
.btn-info {
background-color: #138589 !important;
border-color: #138589 !important;
color: #fff !important;
}
.bg-info {
background-color: #138589 !important;
color: #fff !important;
}
.header-section {
position: fixed;
z-index: 3;
}
.header {
background-color: #363d47;
position: fixed;
top: 3%;
left: 50%;
transform: translateX(-50%);
transition: all .3s;
}
.scroll-header .header {
width: 100%;
background-color: #363d47;
border-radius: 0 !important;
animation: slideDown .5s linear;
top: 0;
}
.header .nav-link,
.header .nav-link.active {
display: block;
padding: 2rem 1rem !important;
color: #fff;
}
.header .nav-link:hover {
color: #fff !important;
}
.navbar {
width: 95%;
}
.offcanvas {
background-color: #363d47;
}
.offcanvas .uwd-menu-mobile .nav-link {
padding: 1.2rem 0;
color: #fff;
border-bottom: 1px solid #5a5a5a63;
}
.offcanvas .uwd-menu-mobile .nav-link:hover {
color: #ddd;
}
.hero-section {
width: 100%;
background-color: #1a1a1a;
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
position: relative;
overflow: hidden;
min-height: 44vh;
max-height: 100vh;
}
.hero-section:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #1A1A1A;
background: linear-gradient(90deg, rgba(26, 26, 26, 0.9) 55%, rgba(26, 26, 26, 0.11) 100%);
}
.hero-slides {
width: 85%;
position: absolute;
top: 0;
left: 10%;
transform: rotate(15deg);
}
.hero-slide-container {
width: 35%;
}
.hero-move-vertical {
animation: heroscroll 75s linear infinite;
}
.hero-slide-container:nth-child(odd) .hero-move-vertical {
animation-direction: reverse;
}
.hero-text {
padding-top: 6rem;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
z-index: 2;
}
.partners-logo {
width: 100%;
padding: 2rem 0;
display: flex;
align-items: center;
}
.partners-logo .thumb {
padding: 1rem;
border-radius: 5px;
}
.ticker .thumb {
filter: grayscale(1);
}
.ticker .thumb:hover {
filter: none;
}
.partners-logo .slides {
display: flex;
gap: 2rem;
align-items: center;
animation: x-scroll 40s linear infinite;
}
.hero {
position: relative;
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 90% 10%,
color-mix(in srgb, #101929, transparent 92%), transparent 40%);
pointer-events: none;
}
.experince {
position: absolute;
bottom: 1rem;
left: -2rem;
background: #16acb4;
color: #fff;
padding: 1rem 1rem;
border-radius: 10px;
box-shadow: 0 0 20px rgb(0 0 0 / 43%);
text-align: center;
animation: 3s ease-in-out 0s infinite normal none running move-top-bottom;
}
.experince h3 {
font-size: 2rem;
font-weight: 400;
}
.experince span {
font-size: 1rem;
display: inline-block;
margin-left: 0.25rem;
}
.experince p {
font-size: .9rem;
font-weight: 300;
} .call-to-action {
background: #363d47;
color: #fff;
padding: 4rem 6rem;
border-radius: 10px;
box-shadow: 0 0 20px rgb(0 0 0 / 43%);
text-align: center;
transition: all 0.3s ease-in-out;
position: relative;
overflow: hidden;
border-radius: 1rem;
}
.call-to-action .shape {
position: absolute;
pointer-events: none;
z-index: 1;
}
.call-to-action .shape svg {
width: 100%;
height: 100%;
}
.call-to-action .shape svg path {
fill: color-mix(in srgb, #138589 50%, transparent);
}
.call-to-action .shape-1 {
width: 300px;
height: 300px;
top: -100px;
right: -50px;
opacity: 0.2;
transform: rotate(45deg);
animation: shapes-float 3s ease-in-out infinite;
}
.call-to-action .shape-2 {
width: 200px;
height: 200px;
bottom: -50px;
left: -50px;
opacity: 0.15;
transform: rotate(-15deg);
animation: shapes-float 4s ease-in-out infinite;
}
.call-to-action .shape-3 {
width: 150px;
height: 150px;
top: 45%;
right: 15%;
opacity: 0.08;
transform: rotate(15deg);
animation: rounded-shapes 4s ease-in-out infinite;
}
.call-to-action .dots {
position: absolute;
pointer-events: none;
z-index: 1;
color: #138589;
}
.call-to-action .dots-1 {
width: 100px;
height: 100px;
top: 35px;
left: 5%;
opacity: 0.1;
transform: rotate(15deg);
animation: shapes-float 5s ease-in-out infinite;
}
.call-to-action .dots-2 {
width: 150px;
height: 150px;
bottom: 55px;
right: 15%;
opacity: 0.15;
transform: rotate(-10deg);
} .testimonial-section {
position: relative;
padding-top: 80px;
padding-bottom: 210px;
overflow: hidden;
&:before {
position: absolute;
left: -200px;
top: 22%;
background-image: url(https://staging.uwd.dev/uwd-landing-wp/wp-content/uploads/2025/10/ring-circle.webp);
background-repeat: no-repeat;
background-position: center;
width: 701px;
height: 756px;
content: "";
-webkit-animation: fa-spin 25s infinite alternate;
-moz-animation: fa-spin 25s infinite alternate;
-ms-animation: fa-spin 25s infinite alternate;
-o-animation: fa-spin 25s infinite alternate;
animation: fa-spin 25s infinite alternate;
}
.sec-title {
position: relative;
margin-bottom: 115px;
.title {
margin-bottom: 20px;
}
}
.testimonial-carousel {
position: relative;
max-width: 1100px;
margin: 0 -50px;
}
}
.testimonial-block {
position: relative;
padding: 50px;
.inner-box {
padding: 80px 105px;
background-color: #ffffff;
box-shadow: 0 0 50px rgba(226, 222, 232, 0.75);
}
.text {
position: relative;
display: block;
font-size: 18px;
line-height: 32px;
color: #282331;
font-weight: 400;
margin-bottom: 50px;
}
.info-box {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
align-content: center;
width: 50%;
.thumb { left: 0;
top: 0;
height: 82px;
width: 82px;
margin-bottom: .7rem;
img {
border: 6px solid #e5e6fa;
border-radius: 50%;
overflow: hidden;
display: block;
width: 100%;
box-shadow: 0 45px 45px rgba(147, 147, 147, 0.35);
}
}
.name {
position: relative;
display: block;
font-size: 21px;
line-height: 1.2em;
color: #382c4d;
font-weight: 700;
margin-bottom: 10px;
}
.designation {
position: relative;
display: block;
font-size: 16px;
line-height: 24px;
color: #138589;
font-weight: 400;
}
}
}
.testimonial-carousel {
.owl-nav {
position: absolute;
right: 75px;
bottom: 70px;
}
.owl-next,
.owl-prev {
position: relative;
display: inline-block;
height: 75px;
width: 75px;
line-height: 75px;
text-align: center;
border-radius: 50%;
background-color: #ffffff;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.owl-next:hover,
.owl-prev:hover {
background-color: #138589;
box-shadow: 0 24px 24px rgba(187, 187, 187, 0.75);
}
}
.arrow-right,
.arrow-left {
position: relative;
display: inline-block;
height: 9px;
width: 43px;
background-image: url(https://staging.uwd.dev/uwd-landing-wp/wp-content/uploads/2025/10/arrow-left-2.webp);
background-repeat: no-repeat;
background-position: center;
}
.arrow-right {
background-image: url(https://staging.uwd.dev/uwd-landing-wp/wp-content/uploads/2025/10/arrow-right-2.webp);
}
.testimonial-section .thumb-layer {
position: absolute;
right: 30px;
top: 120px;
.image {
position: relative;
margin-right: 0;
img {
display: inline-block;
max-width: 100%;
height: auto;
}
}
}
.purecounter {
font-size: 2.5rem;
font-weight: 600;
color: #363d47;
}
.stats-item i {
font-size: 4rem;
color: #16acb4;
margin-bottom: 2rem;
}
@media only screen and (max-width: 767px) {
.hero-section {
height: 60vh;
}
.testimonial-section .sec-title {
margin-bottom: 50px;
}
.testimonial-block {
padding: 0;
.inner-box {
box-shadow: none;
border: 2px solid #f1f1f1;
}
}
.testimonial-carousel {
.owl-nav {
position: relative;
left: 0;
bottom: 0;
margin-top: 20px;
text-align: center;
}
.owl-next,
.owl-prev {
border: 2px solid #f1f1f1;
}
}
}
.service { padding: 2rem;
border: 1px solid #f1f1f1;
border-radius: 10px;
transition: all 0.3s ease-in-out;
background: #fff;
box-shadow: 0 0 20px rgb(0 0 0 / 10%);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out;
position: relative;
overflow: hidden;
cursor: pointer;
}
.service:hover {
box-shadow: 0 0 20px rgb(0 0 0 / 20%);
transform: translateY(-10px); }
.service::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 4px;
background: #16acb4;
pointer-events: none;
z-index: 1;
}
.service:hover::after {
width: 100%;
transition: all 0.3s ease-in-out;
}
.service .icon {
background: #138589;
width: 70px;
height: 70px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
margin-bottom: 2rem;
font-size: 32px;
color: #fff;
}
.service p {
margin: 0;
font-size: .9rem;
color: #363d47;
flex-grow: 1;
line-height: 1.8;
}
.title {
display: inline-block;
font-size: 1rem;
font-weight: 400;
color: #fff;
margin-bottom: 1rem !important;
background-color: #138589;
padding: 0.5rem 1rem;
border-radius: 40px;
}
.sec-title h2 {
background: -webkit-linear-gradient(#138589, #363d47);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.form-field {
position: relative; }
.form-field .form-input {
width: 100%;
border: none;
border-bottom: 1px solid color-mix(in srgb, #535d6b, transparent 80%);
background: transparent;
padding: 20px 0 15px 0;
font-size: 14px;
color: #535d6b;
transition: all 0.3s ease;
}
.form-field .form-input:focus {
outline: none;
border-bottom-color: #138589;
background: transparent;
}
.form-field .field-label {
position: absolute;
top: -10px;
left: 0; font-weight: 500;
color: var(--heading-color);
letter-spacing: 0.5px;
text-transform: uppercase;
opacity: 0.8;
}
.contact-icon {
width: 50px;
height: 50px;
background: #138589;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
font-size: 18px;
}
.social-media {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 1rem;
}
.social-media li a {
text-decoration: none;
display: inline-block;
width: 40px;
height: 40px;
background: #363d47;
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 40px;
font-size: 18px;
transition: all 0.3s ease-in-out;
}
.social-media li a:hover {
background: #1a1a1a;
color: #fff;
transform: translateY(-5px);
}
.ticker__wrap {
display: flex;
align-items: center;
}
.ticker__items {
display: flex;
gap: 2rem;
white-space: nowrap; }
.ticker .item {
display: inline-block;
}
.ticker a {
color: #ffd;
text-decoration: underline;
} .ticker.rtl {
direction: rtl;
}
@media only screen and (max-width: 1366px) {
.large-container {
padding-left: 20px;
padding-right: 20px;
}
}
@keyframes slideDown {
0% {
top: -10%;
}
100% {
top: 0;
}
}
@keyframes heroscroll {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes x-scroll {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(calc(-100% - 5rem));
}
}
@keyframes move-top-bottom {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(-5%);
}
100% {
transform: translateY(0%);
}
}
@keyframes shapes-float {
0% {
transform: translateY(0) rotate(45deg);
}
50% {
transform: translateY(-20px) rotate(45deg);
}
100% {
transform: translateY(0) rotate(45deg);
}
}
@keyframes rounded-shapes {
0% {
border-radius: 20% 50% 30% 50% / 50% 30% 50% 20%;
transform: translateY(0) rotate(15deg);
}
50% {
border-radius: 50% 20% 50% 30% / 30% 50% 20% 50%;
transform: translateY(-20px) rotate(15deg);
}
100% {
border-radius: 20% 50% 30% 50% / 50% 30% 50% 20%;
transform: translateY(0) rotate(15deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
} @media (max-width: 991.98px) {
.hero-section {
height: 70vh;
}
.testimonial-section:before {
width: 450px;
height: 500px;
top: 40%;
}
.testimonial-section:before {
width: 450px;
height: 500px;
top: 40%;
}
}
@media (max-width: 767.98px) {
.ticker__items {
gap: .5rem;
}
.hero-slides {
width: 110% !important;
}
.hero-text h1 {
font-size: 2rem !important;
}
.hero-text h6 {
font-size: 12px !important;
margin-bottom: 5px !important;
}
.hero-text h5 {
font-size: 14px !important;
margin-bottom: 10px !important;
}
.hero-text a {
font-size: 14px !important;
padding: 10px 20px !important;
}
.experince {
padding: 0.5rem 0.75rem !important;
left: 0;
}
.experince h3 {
font-size: 1.5rem !important;
}
.experince h3 span {
font-size: 0.75rem !important;
}
.experince p {
font-size: 0.75rem !important;
}
.call-to-action {
padding: 2rem 1rem !important;
}
.call-to-action h2 {
font-size: 1.4rem !important;
margin-bottom: 1rem !important;
line-height: 1.5 !important;
font-weight: 600 !important;
}
.call-to-action p {
font-size: 0.9rem !important;
margin-bottom: 1rem !important;
}
.call-to-action .btn {
font-size: 0.9rem !important;
padding: 10px 20px !important;
}
.call-to-action .shape-1 {
width: 200px;
height: 200px;
top: -50px;
right: -30px;
}
.call-to-action .shape-2 {
width: 100px;
height: 100px;
bottom: -30px;
left: -30px;
}
.call-to-action .shape-3 {
width: 75px;
height: 75px;
top: 40%;
right: 10%;
}
.call-to-action .dots-1 {
width: 75px;
height: 75px;
top: 25px;
left: 5%;
}
.call-to-action .dots-2 {
width: 100px;
height: 100px;
bottom: 40px;
right: 15%;
}
.testimonial-section {
padding-bottom: 100px !important;
}
.testimonial-section:before {
width: 400px !important;
height: 450px !important;
top: 30% !important;
left: -100px !important;
}
.testimonial-carousel {
margin: 0 !important;
}
.testimonial-block .inner-box {
padding: 30px 20px !important;
}
.testimonial-block .text {
font-size: 16px !important;
margin-bottom: 20px !important;
}
.testimonial-block .info-box {
padding-left: 90px !important;
}
.testimonial-block .info-box .thumb {
width: 70px !important;
height: 70px !important;
}
.testimonial-block .info-box .name {
font-size: 18px !important;
}
.testimonial-block .info-box .designation {
font-size: 14px !important;
}
.testimonial-carousel .owl-nav {
position: relative !important;
right: 0 !important;
bottom: 0 !important;
text-align: center !important;
margin-top: 10px !important;
}
.testimonial-carousel .owl-next,
.testimonial-carousel .owl-prev {
height: 50px !important;
width: 50px !important;
line-height: 50px !important;
font-size: 14px !important;
}
.testimonial-section .thumb-layer {
width: 400px !important;
height: 400px !important;
top: 10% !important;
z-index: -1 !important;
}
.testimonial-section .thumb-layer .image {
margin-right: -100px !important;
}
.stats-item i {
font-size: 3rem !important;
margin-bottom: 1rem !important;
}
.purecounter {
font-size: 2rem !important;
}
.service {
box-shadow: 0 0 20px rgb(0 0 0 / 5%) !important;
}
.service .icon {
width: 50px !important;
height: 50px !important;
font-size: 24px !important;
margin-bottom: 1rem !important;
}
.service .title {
font-size: 0.9rem !important;
margin-bottom: 1rem !important;
padding: 0.25rem 0.5rem !important;
}
.service p {
font-size: 0.8rem !important;
}
.sec-title h2 {
font-size: 1.5rem !important;
line-height: 1.2 !important;
}
.sec-title .title {
font-size: 1rem !important; }
.form-field {
margin-bottom: 30px !important;
}
.form-field .form-input {
font-size: 14px !important;
padding: 15px 0 10px 0 !important;
}
.form-field .field-label {
font-size: 11px !important;
top: -8px !important;
}
.contact-icon {
width: 40px !important;
height: 40px !important;
font-size: 16px !important;
}
.social-media li a {
width: 30px !important;
height: 30px !important;
line-height: 30px !important;
font-size: 14px !important;
}
}
.sector-tab-nav .nav-link {
background-color: #fff;
color: #363d47;
}
.sector-tab-nav .nav-link.active {
background-color: #363d47;
color: #fff;
} .float-social-media {
position: fixed;
bottom: 2%;
left: 5%;
z-index: 2000;
}
.float-social-media .phone-number,
.float-social-media .whatsapp-number {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
color: #fff;
font-size: 30px;
border-radius: 50%;
} .float-social-media {
position: fixed;
bottom: 2%;
left: 5%;
z-index: 2000;
}
.float-social-media .phone-number,
.float-social-media .whatsapp-number {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
color: #fff;
font-size: 30px;
border-radius: 50%;
text-decoration: none;
}
.float-social-media .whatsapp-number {
background-color: #25d366;
animation: shakeBottom 2s ease 0s infinite;
}
.float-social-media .phone-number {
background-color: #0d6efd;
margin-bottom: 1rem;
animation: shakeRotate 2s ease 1s infinite;
}
}
.float-social-media .whatsapp-number {
background-color: #25d366;
animation: shakeBottom 2s ease 0s infinite;
text-decoration: none;
}
.float-social-media .phone-number {
background-color: #0d6efd;
margin-bottom: 1rem;
animation: shakeRotate 2s ease 1s infinite;
text-decoration: none;
}