:root {
--transparent-color: #ffffff00;
--white-color: #ffffff;
--white-color-01: #ffffff26;
--white-color-02: #ffffff80;
--black-color: #000000;
--dark-color: #022340;
--dark-color-02: #021526;
--dark-color-03: #02234080;
--dark-color-04: #02234040;
--dark-color-05: #0223400d;
--blue-color: #065cab;
--blue-color-02: #065cab80;
--red-color: #ce2830;
--red-color-02: #ce283080;
--gray-color: #9298a6;
--gray-color-02: #9298a680;
--green-color: #00a651;
--green-color-02: #00a65180;
--yellow-color: #ffd43b;
--border-radius: 0;
--border-radius-02: 50%;
--border-radius-03: 2rem;
--border-radius-04: 1rem;
--font-family-01: "Cairo", sans-serif;
--font-family-02: "Arimo", sans-serif;
--font-family-03: "DM Sans", sans-serif;
--font-family-04: "Font Awesome 5 Pro", sans-serif;
--font-size-01: 1rem;
--font-size-02: .75rem;
--font-size-03: .8125rem;
--font-size-04: .875rem;
--font-size-05: 1.125rem;
--font-size-06: 1.15rem;
--font-size-07: 1.25rem;
--font-size-08: 1.5rem;
--font-size-09: 1.75rem;
--font-size-10: 2rem;
--font-size-11: 2.25rem;
--font-size-12: 2.5rem;
--font-size-13: 3rem;
--font-size-14: 3.25rem;
--font-size-15: 3.5rem;
--font-size-16: 4rem;
--font-size-17: 5rem;
--font-size-18: 6rem;
--font-size-19: 7rem;
--font-size-20: 8rem;
--font-size-21: 9rem;
--font-size-22: .9375rem;
--font-weight-01: 400;
--font-weight-02: 500;
--font-weight-03: 600;
--font-weight-04: 700;
--font-weight-05: 800;
--font-weight-06: 900;
--letter-spacing-01: 0;
--letter-spacing-02: .025rem;
}
* {
outline: 0 !important;
box-shadow: none !important;
}
html {
position: relative;
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
body {
font-family: var(--font-family-03);
font-weight: var(--font-weight-01);
font-size: var(--font-size-01);
color: var(--white-color);
background-color: var(--dark-color);
margin: 0;
padding: 0;
overflow-x: hidden;
position: relative;
min-height: 100%;
letter-spacing: var(--letter-spacing-02);
direction: ltr;
}
a,
a:focus,
a:hover {
text-decoration: none !important;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
ul {
padding: 0;
margin-bottom: 0;
}
li {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: var(--font-weight-04);
font-family: var(--font-family-02);
}
p {
margin-bottom: 0;
}
@media (min-width: 1200px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
max-width: 1320px;
}
}
@media (min-width: 1400px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
max-width: 1320px;
}
}
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
width: 100%;
padding-right: 1.25rem;
padding-left: 1.25rem;
margin-right: auto;
margin-left: auto;
}
::selection {
background: var(--black-color);
color: var(--white-color);
}
.dis-web {
display: inline-block;
}
.dis-mob {
display: none;
}
@media (max-width: 992px) {
.dis-web {
display: none;
}
.dis-mob {
display: inline-block;
}
}
.dir-num {
direction: ltr;
text-align: left;
}
/****** Header ******/
header {
font-family: var(--font-family-02);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 20;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
header.headroom--not-top {
background-color: var(--dark-color-02);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
header .nav-link,
header .nav-link:focus {
font-weight: var(--font-weight-04);
text-transform: uppercase;
padding: 0;
font-size: var(--font-size-04);
color: var(--white-color);
}
header .nav-link:hover {
color: var(--gray-color);
}
header .nav-link.lan-low, header .nav-link.lan-low:focus {
text-transform: none;
background-color: var(--white-color-01);
color: var(--white-color);
padding: 0.25rem 0.75rem !important;
position: relative;
top: -.25rem;
border-radius: var(--border-radius);
}
header .nav-link.lan-low:hover {
background-color: var(--blue-color);
}
header .nav-link.active {
color: var(--gray-color);
pointer-events: none;
cursor: default;
}
header .navbar-brand {
padding-top: 0;
padding-bottom: 0;
}
header .navbar-brand img {
height: 5rem;
width: auto;
padding: 0.5rem 0;
}
header .navbar {
padding-top: .5rem;
padding-bottom: .5rem;
}
header .navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0;
padding-left: 0;
margin-left: 2rem;
}
header .navbar-toggler {
padding: 0;
border-radius: var(--border-radius);
}
@media (min-width: 992px) {
header .nav-link.cus-nav-link, header .nav-link.cus-nav-link:focus {
background-color: var(--blue-color);
color: var(--white-color);
padding: 0.25rem 0.75rem !important;
position: relative;
top: -.25rem;
border-radius: var(--border-radius);
margin-left: 1.25rem !important;
}
header .nav-link.cus-nav-link:hover {
background-color: var(--white-color-01);
}
header .nav-link.cus-nav-link-02, header .nav-link.cus-nav-link-02:focus {
background-color: var(--red-color);
color: var(--white-color);
padding: 0.25rem 0.75rem !important;
position: relative;
top: -.25rem;
border-radius: var(--border-radius);
margin-left: 1.25rem !important;
}
header .nav-link.cus-nav-link-02:hover {
background-color: var(--red-color-02);
}
}
@media (max-width: 992px) {
header .navbar-toggler i.open-menu {
color: var(--gray-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
display: inline-block;
}
header .navbar-toggler i.close-menu {
color: var(--gray-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
display: none;
}
header .navbar-toggler[aria-expanded="true"] i.open-menu {
display: none;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
}
header.menu-header {
background-color: var(--dark-color-02);
}
header .navbar-toggler[aria-expanded="true"] i.close-menu {
display: inline-block;
font-size: var(--font-size-09);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
}
header .mob-drop {
padding: 1rem 1rem 0 1rem;
}
header .nav-link.cus-nav-link, header .nav-link.cus-nav-link:focus {
background-color: var(--blue-color);
color: var(--white-color);
padding: 0.25rem 0.75rem !important;
border-radius: var(--border-radius);
display: inline-block;
}
header .nav-link.cus-nav-link:hover {
background-color: var(--white-color-01);
}
header .nav-link.cus-nav-link-02, header .nav-link.cus-nav-link-02:focus {
background-color: var(--red-color);
color: var(--white-color);
padding: 0.25rem 0.75rem !important;
border-radius: var(--border-radius);
display: inline-block;
}
header .nav-link.cus-nav-link-02:hover {
background-color: var(--red-color-02);
}
}
header .dropdown-menu {
position: absolute;
z-index: 1000;
display: none;
min-width: 4.835rem;
width: 4.835rem;
height: auto !important;
padding: 0;
margin: 0;
font-size: var(--font-size-04);
color: var(--dark-color);
text-align: left;
list-style: none;
background-color: var(--white-color);
background-clip: padding-box;
border: none;
border-radius: var(--border-radius);
}
header .dropdown-toggle::after {
display: none;
}
header .dropdown-menu .dropdown-item,
header .dropdown-menu .dropdown-item:focus {
display: block;
width: 100%;
padding: .125rem .75rem;
font-weight: var(--font-weight-04);
clear: both;
color: var(--white-color);
text-align: center;
text-decoration: none;
white-space: nowrap;
background-color: var(--transparent-color);
border: 0;
cursor: pointer;
}
header .dropdown-menu .dropdown-item:hover {
color: var(--gray-color);
}
@media (max-width: 992px) {
header .navbar-collapse {
overflow-y: auto;
max-height: 85vh;
}
}
@media (min-width: 992px) {
header .navbar-expand-lg .navbar-nav .nav-item.nav-item-last {
position: relative;
margin-left: 1rem;
}
header .navbar-expand-lg .navbar-nav .nav-item.nav-item-last .nav-link,
header .navbar-expand-lg .navbar-nav .nav-item.nav-item-last .nav-link:focus {
background-color: var(--white-color-01);
}
header .navbar-expand-lg .navbar-nav .nav-item.nav-item-last .nav-link:hover {
background-color: var(--blue-color);
}
header .navbar-expand-lg .navbar-nav .nav-item.nav-item-last .cus-nav-link {
padding: 0.125rem 0.75rem !important;
}
header .navbar-expand-lg .navbar-nav .nav-item.nav-item-last::before {
content: "|";
position: absolute;
left: calc(0 - 1px);
top: -.125rem;
}
header .navbar-expand-lg .navbar-nav .dropdown-menu {
margin-top: 0;
background-color: var(--blue-color);
border-top: var(--dark-color-02);
}
}
@media (max-width: 992px) {
header .navbar-expand-lg .navbar-nav .nav-link.nav-item-header,
header .navbar-expand-lg .navbar-nav .nav-link.nav-item-header:focus {
text-transform: none;
background-color: var(--white-color-01);
color: var(--white-color);
padding: 0.125rem 0.75rem !important;
position: relative;
top: -0.25rem;
border-radius: var(--border-radius);
}
header .navbar-expand-lg .navbar-nav .nav-link.nav-item-header:hover {
background-color: var(--blue-color);
}
header .navbar-expand-lg .navbar-nav .nav-link {
margin-left: 0;
margin-bottom: 1rem;
}
header .dropdown-menu .dropdown-item {
padding: .25rem .75rem;
}
header .langs {
position: absolute !important;
left: 0 !important;
}
header .navbar-brand .svg,
header .navbar-brand img {
height: 4rem;
}
header .navbar-expand-lg .navbar-nav.dis-mob .nav-link {
margin-left: 0;
margin-right: 1rem;
margin-bottom: 0;
margin-top: 0.5rem;
}
header .navbar-expand-lg .navbar-nav.dis-mob .dropdown-menu {
margin-top: 0;
background-color: var(--blue-color);
border-top: var(--dark-color-02);
}
header .navbar-toggler-icon {
width: auto;
height: auto;
}
}
header.headroom {
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
will-change: transform, opacity;
}
header.headroom.headroom--pinned {
-webkit-animation-name: headroom--pinned;
animation-name: headroom--pinned;
}
header.headroom.headroom--unpinned {
-webkit-animation-name: headroom--unpinned;
animation-name: headroom--unpinned;
}
@-webkit-keyframes headroom--pinned {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes headroom--pinned {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes headroom--unpinned {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes headroom--unpinned {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
}
.lang-en {
font-family: var(--font-family-02);
}
.lang-ar {
font-family: var(--font-family-01);
letter-spacing: 0;
line-height: normal;
}
@media (min-width: 992px) {
header .nav-item .dropdown-menu.megamenu {
display: block;
opacity: 0;
visibility: hidden;
transition: .3s;
margin-top: -2.25rem;
border: none;
border-radius: 0;
min-width: 17rem;
}
header .nav-item:hover .dropdown-menu.megamenu {
opacity: 1;
visibility: visible;
top: 100%;
border-top: none;
transform: rotateX(0deg);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
header .navbar .has-megamenu {
position: static !important;
}
header .navbar .dropdown-menu.megamenu {
left: 0;
right: 0;
width: 100%;
padding-top: 2.25rem;
background-color: var(--transparent-color);
}
header .dropdown-menu.megamenu.fade-up {
top: 120%;
}
header .dropdown-menu.megamenu .dropdown-item,
header .dropdown-menu.megamenu .dropdown-item:focus {
display: block;
width: 100%;
padding: .75rem 1rem;
clear: both;
color: var(--white-color);
text-align: left;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border: 0;
cursor: pointer;
position: relative;
font-weight: 700;
}
header .dropdown-menu.megamenu .dropdown-item:hover,
header .dropdown-menu.megamenu .dropdown-item.active {
color: var(--gray-color);
padding: .75rem 1rem .75rem 1.5rem;
}
header .dropdown-menu.megamenu .dropdown-item::before {
content: "";
position: absolute;
left: 0;
top: 1.375rem;
width: .25rem;
height: 2px;
opacity: 1;
background-color: var(--white-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
header .dropdown-menu.megamenu .dropdown-item:hover::before,
header .dropdown-menu.megamenu .dropdown-item.active::before {
width: 1rem;
background-color: var(--gray-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
header .dropdown-menu.megamenu .dropdown-item.active {
color: var(--gray-color);
pointer-events: none;
cursor: default;
}
.megamenu-cus {
background-color: var(--dark-color-02);
padding: 1.5rem;
}
}
@media (max-width: 992px) {
header .nav-item .dropdown-menu.megamenu {
width: 100%;
min-width: auto;
}
header .nav-item .dropdown-menu.megamenu .container {
padding: 0;
margin-bottom: 1rem;
}
header .dropdown-menu.megamenu .dropdown-item,
header .dropdown-menu.megamenu .dropdown-item:focus {
text-align: left;
}
header .dropdown-menu.megamenu .dropdown-item,
header .dropdown-menu.megamenu .dropdown-item:focus {
display: block;
width: 100%;
padding: .75rem 1rem;
clear: both;
color: var(--white-color);
text-align: left;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border: 0;
cursor: pointer;
position: relative;
font-weight: 400;
}
header .dropdown-menu.megamenu .dropdown-item:hover,
header .dropdown-menu.megamenu .dropdown-item.active {
color: var(--gray-color);
padding: .75rem 1rem .75rem 1.5rem;
}
header .dropdown-menu.megamenu .dropdown-item::before {
content: "";
position: absolute;
left: 0;
top: 1.375rem;
width: .25rem;
height: 2px;
opacity: 1;
background-color: var(--white-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
header .dropdown-menu.megamenu .dropdown-item:hover::before,
header .dropdown-menu.megamenu .dropdown-item.active::before {
width: 1rem;
background-color: var(--gray-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
header .dropdown-menu.megamenu .dropdown-item.active {
color: var(--gray-color);
pointer-events: none;
cursor: default;
}
.megamenu-cus {
background-color: var(--white-color-01);
padding: 0;
}
}
@media (max-width: 576px) {
header .dropdown-menu.megamenu .dropdown-item,
header .dropdown-menu.megamenu .dropdown-item:focus {
font-size: .75rem;
}
}
/****** Footer ******/
footer {
position: relative;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color: var(--dark-color-02);
}
footer .top-footer {
padding: 7rem 0 3.5rem 0;
}
@media (max-width: 576px) {
footer .top-footer {
padding: 4rem 0 2rem 0;
}
}
footer .logo-footer {
width: auto;
height: 9rem;
margin: auto;
}
footer p.footer-pra {
color: var(--gray-color);
font-size: var(--font-size-03);
margin-top: 1.5rem;
margin-bottom: 0;
padding-right: 3rem;
}
@media (max-width: 992px) {
footer .logo-footer {
height: 12rem;
}
footer p.footer-pra {
padding-right: 3rem;
padding-left: 3rem;
}
}
@media (max-width: 576px) {
footer .logo-footer {
height: 10rem;
}
footer p.footer-pra {
padding-right: 0;
padding-left: 0;
}
}
footer .copyright {
width: 100%;
height: auto;
padding: 1.25rem 0;
position: relative;
border-top: 1px solid var(--white-color-01);
}
@media (max-width: 576px) {
footer .copyright {
text-align: center;
}
}
footer .copyright p {
margin-bottom: 0;
color: var(--gray-color);
font-size: var(--font-size-01);
}
footer .copyright p a,
footer .copyright p a:focus {
color: var(--gray-color);
}
footer .copyright p a:hover {
color: var(--white-color);
}
footer .back-to-top {
padding: 0;
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
display: inline-block;
border: none;
border-radius: var(--border-radius-02);
background-color: var(--dark-color);
text-align: center;
z-index: 1;
}
footer .back-to-top i {
color: var(--white-color);
}
footer .footer-contact .contact-item {
padding: 0;
position: relative;
display: block;
margin-bottom: 1.5rem;
}
footer .footer-contact .contact-item:last-child {
margin-bottom: 0;
}
footer .footer-contact .contact-item i {
color: var(--gray-color);
font-size: var(--font-size-07);
position: absolute;
top: .25rem;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
footer .footer-contact .contact-item a,
footer .footer-contact .contact-item a:focus {
Color: var(--white-color);
display: inline-block;
margin-left: 2.5rem;
line-height: 1.5rem;
}
footer .footer-contact .contact-item a:hover {
Color: var(--gray-color);
}
footer .footer-contact .follow-us {
position: relative;
color: var(--white-color);
}
footer .footer-contact .follow-us span {
margin-right: .75rem;
color: var(--gray-color);
}
footer .footer-contact .follow-us a,
footer .footer-contact .follow-us a:focus {
text-decoration: none;
}
footer .footer-contact .follow-us .social .footer-social-link,
footer .footer-contact .follow-us .social .footer-social-link:focus {
width: auto;
color: var(--white-color);
margin-right: 1.25rem;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
footer .footer-contact .follow-us .social {
display: inline-block;
}
footer .footer-contact .follow-us .social .footer-social-link:last-child {
margin-right: 0;
}
footer .footer-contact .follow-us .social .footer-social-link:hover {
color: var(--gray-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
text-decoration: none;
}
footer .footer-title {
font-weight: var(--font-weight-06);
text-transform: uppercase;
color: var(--white-color);
font-size: var(--font-size-06);
margin-bottom: 1.25rem;
}
footer .footer-links ul {
margin-bottom: 0;
padding-left: 0;
}
footer .footer-links a,
footer .footer-links a:focus {
color: var(--white-color);
line-height: 2.65rem;
}
footer .footer-links a:hover {
color: var(--gray-color);
}
footer .footer-links a.active {
color: var(--gray-color);
pointer-events: none;
cursor: default;
font-weight: var(--font-weight-04);
}
/****** Main ******/
main {
position: relative;
display: inline-block;
width: 100%;
z-index: 1;
}
.white-text {
color: var(--white-color);
}
.black-text {
color: var(--black-color);
}
.dark-text {
color: var(--dark-color);
}
.dark-bg {
background-color: var(--dark-color);
}
.dark-bg-02 {
background-color: var(--dark-color-02);
}
.blue-text {
color: var(--blue-color);
}
.gray-text {
color: var(--gray-color);
}
.red-text {
color: var(--red-color);
}
.font-size-05 {
font-size: var(--font-size-05);
}
.font-weight-02 {
font-weight: var(--font-weight-02);
}
.font-weight-04 {
font-weight: var(--font-weight-04);
}
.opacity-01 {
opacity: .15;
}
.section-cus-01 {
margin-top: 5rem;
}
.section-cus-02 {
margin-top: 5rem;
margin-bottom: 5rem;
}
.section-cus-03 {
margin-top: 5rem;
margin-bottom: 5rem;
padding-top: 5rem;
padding-bottom: 5rem;
}
.section-cus-04 {
margin-top: 0;
margin-bottom: 5rem;
}
.section-cus-05 {
margin-top: 5rem;
padding-bottom: 5rem;
}
@media (max-width: 992px) {
.section-cus-01 {
margin-top: 3rem;
}
.section-cus-02 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.section-cus-03 {
margin-top: 3rem;
margin-bottom: 3rem;
padding-top: 3rem;
padding-bottom: 3rem;
}
.section-cus-04 {
margin-top: 0;
margin-bottom: 3rem;
}
.section-cus-05 {
margin-top: 3rem;
padding-bottom: 3rem;
}
}
.cus-btn-01, .cus-btn-01:focus, .cus-btn-01:hover {
background-color: var(--transparent-color);
text-transform: uppercase;
color: var(--white-color);
font-weight: var(--font-weight-04);
width: auto;
position: relative;
display: inline-block;
padding: 1rem 1.5rem;
border: none;
z-index: 2;
}
.cus-btn-01::after {
content: "";
top: 0;
left: 0;
width: 3.5rem;
height: 3.5rem;
border-radius: var(--border-radius-02);
background-color: var(--white-color-01);
position: absolute;
z-index: -1;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.cus-btn-01:hover::after {
width: 100%;
border-radius: var(--border-radius-03);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.cus-btn-01 span {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
-webkit-user-select: none;
user-select: none;
}
.cus-btn-02, .cus-btn-02:focus, .cus-btn-02:hover {
background-color: var(--transparent-color);
text-transform: uppercase;
color: var(--white-color);
font-weight: var(--font-weight-04);
width: auto;
position: relative;
display: inline-block;
padding: 1rem 1.5rem;
border: none;
z-index: 2;
}
.cus-btn-02::after {
content: "";
top: 0;
left: 0;
width: 3.5rem;
height: 3.5rem;
border-radius: var(--border-radius-02);
background-color: var(--blue-color);
position: absolute;
z-index: -1;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.cus-btn-02:hover::after {
width: 100%;
border-radius: var(--border-radius-03);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.cus-btn-02 span {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
-webkit-user-select: none;
user-select: none;
}
.cus-btn-03, .cus-btn-03:focus, .cus-btn-03:hover {
background-color: var(--transparent-color);
text-transform: uppercase;
color: var(--white-color);
font-weight: var(--font-weight-04);
width: auto;
position: relative;
display: inline-block;
padding: 1rem 1.5rem;
border: none;
z-index: 2;
}
.cus-btn-03::after {
content: "";
top: 0;
left: 0;
width: 100%;
height: 3.5rem;
border-radius: var(--border-radius-03);
background-color: var(--white-color-01);
position: absolute;
z-index: -1;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.cus-btn-03:hover::after {
background-color: var(--blue-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.cus-btn-03 span {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
-webkit-user-select: none;
user-select: none;
}
.cus-btn-03-02, .cus-btn-03-02:focus, .cus-btn-03-02:hover {
background-color: var(--transparent-color);
text-transform: uppercase;
color: var(--white-color);
font-weight: var(--font-weight-04);
width: auto;
position: relative;
display: inline-block;
padding: 1rem 3rem;
border: none;
z-index: 2;
}
.cus-btn-03-02::after {
content: "";
top: 0;
left: 0;
width: 100%;
height: 3.5rem;
border-radius: var(--border-radius-03);
background-color: var(--blue-color);
position: absolute;
z-index: -1;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.cus-btn-03-02:hover::after {
background-color: var(--white-color-01);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.cus-btn-03-02 span {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
-webkit-user-select: none;
user-select: none;
}
.cus-btn-03-03, .cus-btn-03-03:focus, .cus-btn-03-03:hover {
background-color: var(--transparent-color);
text-transform: uppercase;
color: var(--white-color);
font-weight: var(--font-weight-04);
width: auto;
position: relative;
display: inline-block;
padding: 1rem 3rem;
border: none;
z-index: 2;
}
.cus-btn-03-03::after {
content: "";
top: 0;
left: 0;
width: 100%;
height: 3.5rem;
border-radius: var(--border-radius-03);
background-color: var(--blue-color);
position: absolute;
z-index: -1;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.cus-btn-03-03:hover::after {
background-color: var(--gray-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.cus-btn-03-03 span {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
-webkit-user-select: none;
user-select: none;
}
.cus-btn-04, .cus-btn-04:focus {
background-color: var(--transparent-color);
text-transform: uppercase;
color: var(--red-color);
font-weight: var(--font-weight-04);
position: relative;
display: inline-block;
border: none;
z-index: 2;
}
.cus-btn-04:hover {
color: var(--red-color);
padding-left: 1.25rem;
margin-right: -1.25rem;
}
.cus-btn-04::before {
content: "\f067";
font-family: var(--font-family-04);
font-size: var(--font-size-02);
position: absolute;
left: -.75rem;
top: .25rem;
opacity: 0;
pointer-events: none;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.cus-btn-04:hover::before {
left: 0;
opacity: 1;
}
.cus-btn-05, .cus-btn-05:focus {
background-color: var(--transparent-color);
color: var(--gray-color);
font-weight: var(--font-weight-04);
position: relative;
display: inline-block;
border: none;
border-bottom: 1px solid var(--gray-color);
z-index: 2;
}
.cus-btn-05:hover {
color: var(--white-color);
border-bottom: 1px solid var(--white-color);
}
.cus-btn-06, .cus-btn-06:focus {
background-color: var(--blue-color);
color: var(--white-color);
font-size: var(--font-size-04);
position: relative;
display: inline-block;
border: none;
border-radius: var(--border-radius);
padding: .25rem .5rem;
margin: .25rem .5rem;
min-width: 40%;
z-index: 2;
}
.cus-btn-06:hover {
background-color: var(--blue-color-02);
color: var(--white-color);
}
.cus-btn-07, .cus-btn-07:focus {
background-color: var(--red-color);
color: var(--white-color);
font-size: var(--font-size-04);
position: relative;
display: inline-block;
border: none;
border-radius: var(--border-radius);
padding: .25rem .75rem;
margin: .25rem .5rem;
min-width: 40%;
z-index: 2;
}
.cus-btn-07:hover {
background-color: var(--red-color-02);
color: var(--white-color);
}
.page-title {
text-align: center;
padding: 4rem 0 3rem 0;
font-family: var(--font-family-02);
}
.page-title .page-title-name {
font-size: var(--font-size-13);
font-weight: var(--font-weight-04);
}
.page-title .page-title-links {
text-transform: uppercase;
margin-top: 1rem;
display: inline-block;
font-weight: var(--font-weight-04);
position: relative;
}
.page-title .page-title-links a, .page-title .page-title-links a:focus {
color: var(--gray-color);
display: inline-block;
margin-right: .25rem;
}
.page-title .page-title-links a:hover {
color: var(--white-color);
}
.page-title .page-title-links a::after {
content: "\f068";
font-family: var(--font-family-04);
font-size: var(--font-size-02);
margin-left: .5rem;
color: var(--gray-color);
}
@media (max-width: 992px) {
.page-title .page-title-name {
font-size: var(--font-size-12);
}
.page-title .page-title-links {
margin-top: .75rem;
}
}
@media (max-width: 576px) {
.page-title .page-title-name {
font-size: var(--font-size-10);
}
.page-title .page-title-links {
margin-top: .5rem;
}
}
.widget-body {
position: relative;
padding: 3rem;
border-radius: var(--border-radius);
border: none;
background-color: var(--white-color-01);
}
@media (max-width: 576px) {
.widget-body {
padding: 2rem 1rem;
}
}
/****** Home Page ******/
body.home-page {
background-image: url(../img/images/home/home-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
.home-video {
z-index: -1;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100vw;
height: 640px;
display: none;
}
.home-video.loaded {
display: block;
}
.home-video .video-screen {
position: absolute;
left: 50%;
width: 100vw;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
pointer-events: none;
}
.home-video .video-screen::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: var(--dark-color-04);
background-size: 3px 3px;
background-image: linear-gradient(45deg, var(--dark-color-05) 50%, var(--dark-color-04) 50%);
}
.home-video .video-screen::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
@media (min-width: 1200px) {
.home-video .video-screen {
top: 42%;
}
.home-video .video-screen::before {
background-image: linear-gradient(var(--transparent-color), var(--dark-color) 85%);
}
}
@media (min-width: 1400px) {
.home-video .video-screen {
top: 60%;
}
.home-video .video-screen::before {
background-image: linear-gradient(var(--transparent-color), var(--dark-color) 70%);
}
}
@media (max-width: 992px) {
body.home-page {
background-image: url(../img/images/home/home-bg-mob.webp);
}
.home-video {
display: none;
}
}
@media (max-width: 576px) {
body.home-page {
background-image: url(../img/images/home/home-bg-mob-02.webp);
}
}
.testimonials-btn, .testimonials-btn:focus, .testimonials-btn:hover {
background-color: var(--transparent-color);
text-transform: uppercase;
color: var(--white-color);
font-weight: var(--font-weight-04);
width: auto;
position: relative;
display: inline-block;
padding: 1rem 1.5rem;
border: none;
z-index: 10;
position: absolute;
right: 0;
left: auto;
top: calc(100% - 60px);
}
.testimonials-btn::after {
content: "";
top: 0;
left: 0;
width: 100%;
height: 3.5rem;
border-radius: var(--border-radius-03);
background-color: var(--dark-color-02);
position: absolute;
z-index: -1;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.testimonials-btn:hover::after {
background-color: var(--white-color-01);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.testimonials-btn span {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
-webkit-user-select: none;
user-select: none;
}
@media (max-width: 992px) {
.testimonials-btn, .testimonials-btn:focus, .testimonials-btn:hover {
padding: 0.875rem 1.5rem;
top: calc(100% - 64px);
font-size: var(--font-size-04);
}
.testimonials-btn::after {
height: 3rem;
}
}
.flip-card {
perspective: 1000px;
}
.flip-card-inner {
position: relative;
transition: transform .6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front {
background-color: var(--white-color-01);
padding: 1rem;
text-align: left;
border-radius: var(--border-radius-04);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-back {
background-color: var(--dark-color-02);
padding: 1.5rem;
text-align: left;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: var(--border-radius-04);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.flip-card-front img {
width: 60%;
height: auto;
margin-bottom: 1rem;
background-color: var(--white-color);
padding: .5rem;
border-radius: var(--border-radius-04);
}
.flip-card-back img {
width: 60%;
height: auto;
position: absolute;
bottom: 1rem;
right: 1rem;
opacity: .25;
}
.flip-card-front h5 {
font-size: var(--font-size-04);
color: var(--gray-color);
margin-bottom: 0;
min-height: 3.125rem;
}
.flip-card-back h4 {
font-size: var(--font-size-01);
color: var(--white-color);
}
@media (max-width: 576px) {
.flip-card-front img {
width: 80%;
}
.flip-card-front h5 {
font-size: var(--font-size-03);
margin-bottom: 0;
min-height: 4rem;
}
}
/****** About Page ******/
.content-wrap {
display: inline-flex;
align-items: center;
position: relative;
width: 100%;
}
.content-wrap .counter-number {
font-family: var(--font-family-02);
font-size: var(--font-size-20);
font-weight: var(--font-weight-04);
line-height: normal;
color: var(--transparent-color);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: var(--gray-color);
width: 55%;
text-align: right;
}
.content-wrap .counter-text {
margin-left: -1rem;
z-index: 2;
width: 45%;
}
.section-gradient-01 {
background-image: linear-gradient(270deg, #02234000 50%, #022340eb 100%);
width: 100vw;
}
.section-gradient-over {
background-image: linear-gradient(90deg, #02234000 50%, #022340eb 100%);
display: inline-grid;
width: 100vw;
}
.text-word-01 {
width: 100vw;
color: var(--white-color);
font-size: var(--font-size-21);
font-weight: var(--font-weight-04);
line-height: 11rem;
z-index: -1;
white-space: nowrap;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.text-word-02 {
width: 100vw;
color: var(--transparent-color);
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--gray-color);
font-size: var(--font-size-21);
font-weight: var(--font-weight-04);
line-height: 11rem;
z-index: -1;
white-space: nowrap;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.scroll-lef-01 {
display: inline-block;
-webkit-animation: scrolling-left-01 60s infinite linear;
animation: scrolling-left-01 60s infinite linear;
}
.scroll-lef-02 {
display: inline-block;
-webkit-animation: scrolling-left-02 60s linear infinite;
animation: scrolling-left-02 60s linear infinite;
}
@keyframes scrolling-left-01 {
100% {
-webkit-transform: translateX(-101%);
transform: translateX(-101%);
}
}
@keyframes scrolling-left-02 {
100% {
-webkit-transform: translateX(-101%);
transform: translateX(-101%);
}
}
@media (max-width: 992px) {
.text-word-01 {
font-size: var(--font-size-18);
line-height: 7rem;;
}
.text-word-02 {
font-size: var(--font-size-18);
line-height: 7rem;
}
}
@media (max-width: 576px) {
.text-word-01 {
font-size: var(--font-size-13);
line-height: 4rem;;
}
.text-word-02 {
-webkit-text-stroke-width: 1px;
font-size: var(--font-size-13);
line-height: 4rem;
}
}
.aboutswiper-01 {
padding-bottom: 3.5rem;
}
.aboutswiper-01.swiper-container-horizontal>.swiper-pagination-bullets,
.aboutswiper-01.swiper-pagination-custom,
.aboutswiper-01.swiper-pagination-fraction {
bottom: 0;
}
.aboutswiper-01 .swiper-pagination-bullet {
width: .75rem;
height: .75rem;
background: var(--white-color-01);
opacity: 1;
}
.aboutswiper-01 .swiper-pagination-bullet-active {
opacity: 1;
background: var(--white-color);
}
.aboutswiper-01 h5 {
font-size: var(--font-size-10);
text-transform: uppercase;
}
.aboutswiper-01 .atrc-min-icons .upper-icon {
font-size: var(--font-size-20);
color: var(--white-color);
margin: 0 auto;
}
.aboutswiper-01 .atrc-min-icons .lower-icon {
font-size: var(--font-size-19);
color: var(--white-color-01);
z-index: -1;
position: absolute;
margin-left: -4rem;
margin-top: 2rem;
}
.custom-img {
padding: 0;
margin: 0;
margin-left: calc((-100vw + 1320px) / 2 - 1.25rem);
}
.custom-img-02 {
padding: 0;
margin: 0;
margin-right: calc((-100vw + 1320px) / 2 - 1.25rem);
}
@media (max-width: 992px) {
.custom-img {
margin-left: -2.75rem;
margin-right: -2.75rem;
}
.custom-img-02 {
margin-left: -2.75rem;
margin-right: -2.75rem;
}
}
@media (max-width: 576px) {
.aboutswiper-01 h5 {
font-size: var(--font-size-08);
text-transform: uppercase;
}
.aboutswiper-01 .atrc-min-icons .upper-icon {
font-size: var(--font-size-18);
}
.aboutswiper-01 .atrc-min-icons .lower-icon {
font-size: var(--font-size-17);
position: absolute;
margin-left: -2rem;
margin-top: 1.5rem;
}
.custom-img {
margin-left: -1.25rem;
margin-right: -1.25rem;
}
.custom-img-02 {
margin-left: -1.25rem;
margin-right: -1.25rem;
}
}
.hr-cus-01 {
background-color: var(--gray-color);
margin: 2rem 0;
opacity: 1;
}
.hr-cus-02 {
background-color: var(--gray-color);
margin: 1rem 0;
opacity: 1;
}
.hr-cus-03 {
background-color: var(--gray-color);
margin: 3rem 0;
opacity: 1;
}
.hr-cus-04 {
background-color: var(--dark-color-02);
margin: 2rem 0;
opacity: 1;
}
.p-point {
margin-bottom: .5rem;
margin-left: 1.5rem;
display: flex;
}
.p-point::before {
content: "\f111";
font-family: var(--font-family-04);
font-size: .5rem;
font-weight: 700;
margin-left: -0.5rem;
position: relative;
top: .5rem;
left: -1rem;
}
.p-point-02 {
margin-bottom: 0.25rem;
margin-left: 0.75rem;
display: flex;
}
.p-point-02::before {
content: "\f111";
font-family: var(--font-family-04);
font-size: .25rem;
font-weight: 700;
margin-left: 0;
position: relative;
top: .75rem;
left: -.75rem;
}
.p-point-02 a {
display: contents;
color: var(--white-color);
font-weight: var(--font-weight-01);
}
/****** Contact Page ******/
.ifram-map {
border: none;
width: 100%;
height: auto;
min-height: 32rem;
margin: 0;
margin-bottom: -.5rem;
padding: 0;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: .75;
}
@media (max-width: 992px) {
.ifram-map {
min-height: 24rem;
}
}
.contact-sec .contact-item {
padding: 0;
position: relative;
display: block;
margin-bottom: 1.5rem;
}
.contact-sec .contact-item:last-child {
margin-bottom: 0;
}
.contact-sec .contact-item i {
color: var(--gray-color);
font-size: var(--font-size-07);
position: absolute;
top: .25rem;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.contact-sec .contact-item a,
.contact-sec .contact-item a:focus {
Color: var(--white-color);
display: inline-block;
margin-left: 2.5rem;
line-height: 1.5rem;
}
.contact-sec .contact-item a:hover {
Color: var(--gray-color);
}
.contact-sec .follow-us {
position: relative;
color: var(--white-color);
}
.contact-sec .follow-us span {
margin-right: .75rem;
color: var(--gray-color);
}
.contact-sec .follow-us a,
.contact-sec .follow-us a:focus {
text-decoration: none;
}
.contact-sec .follow-us .social .footer-social-link,
.contact-sec .follow-us .social .footer-social-link:focus {
width: auto;
color: var(--white-color);
margin-right: 1.25rem;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.contact-sec .follow-us .social {
display: inline-block;
}
.contact-sec .follow-us .social .footer-social-link:last-child {
margin-right: 0;
}
.contact-sec .follow-us .social .footer-social-link:hover {
color: var(--gray-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
text-decoration: none;
}
/****** Pricing Page ******/
.pricing-cus {
font-family: var(--font-family-02);
}
.pricing-cus h3 {
font-size: var(--font-size-15);
font-weight: var(--font-weight-01);
margin-bottom: 0;
}
.pricing-cus h3 span.total-currency {
font-size: var(--font-size-10);
}
.pricing-cus h5 {
font-size: var(--font-size-08);
font-weight: var(--font-weight-01);
text-align: center;
margin-bottom: 0;
}
.min-height-01 {
min-height: 26rem;
}
.min-height-02 {
min-height: 32rem;
}
.pricing-sec-01 {
background-image: url(../img/images/pricing/img-02.webp);
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
padding-top: 5rem;
}
@media (max-width: 992px) {
.min-height-01 {
min-height: auto;
}
.min-height-02 {
min-height: auto;
}
.pricing-sec-01 {
padding-top: 8rem;
}
}
@media (max-width: 576px) {
.pricing-sec-01 {
padding-top: 4rem;
}
}
/****** FAQ's Page ******/
.accordion-flush .accordion-item {
margin-bottom: 1.5rem;
}
.accordion-item {
background-color: var(--transparent-color);
border: none;
}
.accordion-button, .accordion-button:focus {
color: var(--white-color);
text-align: left;
background-color: var(--transparent-color);
font-weight: var(--font-weight-04);
min-height: 3rem;
align-items: start;
padding: 0;
padding-left: 1.5rem;
position: relative;
}
.accordion-button:hover {
color: var(--red-color);
}
.accordion-button:not(.collapsed) {
color: var(--red-color);
background-color: var(--transparent-color);
}
.accordion-body {
color: var(--gray-color);
border: none;
padding: 0 0 1rem 1.5rem;
}
.accordion-button::before {
content: "\f067";
font-family: var(--font-family-04);
color: var(--red-color);
font-size: var(--font-size-02);
position: absolute;
top: .25rem;
width: 1rem;
height: 1rem;
margin-left: -1.5rem;
}
.accordion-button:not(.collapsed)::before {
content: "\f068";
}
.accordion-button::after {
display: none;
}
@media (max-width: 992px) {
.accordion-button, .accordion-button:focus {
min-height: auto;
}
.accordion-body {
padding: .75rem 0 1rem 1.5rem;
}
}
/****** Resources Page ******/
.res-count {
counter-reset: num;
}
.res-sec {
padding: 0 1rem;
position: relative;
}
.res-sec .res-number {
font-family: var(--font-family-02);
font-size: var(--font-size-08);
color: var(--white-color);
padding-bottom: 1rem;
border-bottom: 1px solid var(--gray-color);
margin-bottom: 1.5rem;
counter-increment: num;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.res-sec .res-number::before {
content: counter(num, decimal-leading-zero);
}
.res-sec:hover .res-number {
color: var(--gray-color);
border-bottom: 1px solid var(--white-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.res-sec .res-number-02 {
font-family: var(--font-family-02);
font-weight: var(--font-weight-04);
font-size: var(--font-size-08);
color: var(--white-color);
padding-bottom: 1rem;
border-bottom: 1px solid var(--gray-color);
margin-bottom: 1.5rem;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.res-sec:hover .res-number-02 {
color: var(--gray-color);
border-bottom: 1px solid var(--white-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.res-sec .res-title {
font-family: var(--font-family-03);
color: var(--white-color);
font-size: var(--font-size-08);
margin-bottom: 1rem;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.res-sec .res-title i {
color: var(--gray-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.res-sec:hover .res-title {
color: var(--gray-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.res-sec:hover .res-title i {
color: var(--white-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.res-sec .res-dis {
color: var(--gray-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.res-sec:hover .res-dis {
color: var(--white-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
@media (max-width: 992px) {
.res-sec .res-number {
font-size: var(--font-size-07);
padding-bottom: .75rem;
margin-bottom: 1.25rem;
}
.res-sec .res-title {
font-size: var(--font-size-07);
}
}
.contlink a, .contlink a:focus {
background-color: var(--transparent-color);
color: var(--gray-color);
font-weight: var(--font-weight-04);
position: relative;
display: inline-block;
border: none;
border-bottom: 1px solid var(--gray-color);
}
.contlink a:hover {
color: var(--white-color);
border-bottom: 1px solid var(--white-color);
}
.contlink hr {
background-color: var(--gray-color);
margin: 2rem 0;
opacity: .5;
}
#rescoundit h3 {
margin-bottom: 3rem !important;
font-size: var(--font-size-12) !important;
}
@media (max-width: 576px) {
#rescoundit h3 {
margin-bottom: 3rem !important;
font-size: var(--font-size-10) !important;
}
}
.cus-datatable {
width: 100%;
overflow: hidden;
color: var(--white-color);
font-family: var(--font-family-02);
}
.cus-datatable .table-striped tbody tr:nth-of-type(odd) {
background-color: var(--white-color-01);
color: var(--white-color);
}
.cus-datatable .table-striped tfoot, .cus-datatable .table-striped thead {
background-color: var(--dark-color-02);
color: var(--gray-color);
}
.page-item:not(:first-child) .page-link {
margin-left: 0;
}
.cus-datatable .page-link {
color: var(--white-color) !important;
background-color: var(--transparent-color) !important;
border: none;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.cus-datatable .page-item.active .page-link {
background-color: var(--dark-color-02) !important;
border-radius: var(--border-radius-02);
width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
text-align: center !important;
padding: 0;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.cus-datatable .form-control-sm {
min-height: auto;
font-size: 1rem;
display: block;
width: 100%;
padding: .5rem .75rem;
line-height: 1.5;
color: var(--white-color);
background-color: var(--transparent-color);
border: none;
border-bottom: 1px solid var(--gray-color);
border-radius: var(--border-radius);
letter-spacing: var(--letter-spacing-02);
}
.cus-datatable .form-select {
font-size: 1rem;
display: block;
width: 100%;
padding: .5rem 2.25rem .5rem .75rem;
line-height: 1.5;
color: var(--white-color);
background-color: var(--transparent-color);
border: none;
border-bottom: 1px solid var(--gray-color);
border-radius: var(--border-radius);
letter-spacing: var(--letter-spacing-02);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
.cus-datatable .form-select>option {
font-size: 1rem !important;
color: var(--dark-color) !important;
}
.cus-datatable .form-select>option:hover {
background-color: var(--blue-color) !important;
opacity: 1;
color: var(--red-color);
}
.cus-datatable table.dataTable {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.cus-datatable .table>:not(:last-child)>:last-child>* {
border-bottom-color: var(--white-color-01);
}
.cus-datatable .table-cus-01 {
overflow-x: auto;
}
.cus-datatable.cus-table-01 {
overflow-x: auto;
}
.cus-datatable table.table {
border-color: var(--white-color-01);
color: var(--white-color);
width: 100% !important;
}
.cus-datatable table.table thead tr th {
padding-top: .75rem !important;
padding-bottom: .75rem !important;
}
.cus-datatable.table-cus {
overflow-x: auto;
}
table.dataTable>thead .sorting:before, table.dataTable>thead .sorting:after, table.dataTable>thead .sorting_asc:before, table.dataTable>thead .sorting_asc:after, table.dataTable>thead .sorting_desc:before, table.dataTable>thead .sorting_desc:after, table.dataTable>thead .sorting_asc_disabled:before, table.dataTable>thead .sorting_asc_disabled:after, table.dataTable>thead .sorting_desc_disabled:before, table.dataTable>thead .sorting_desc_disabled:after {
position: absolute;
bottom: .5rem;
display: block;
opacity: .75;
}
div.dataTables_wrapper div.dataTables_info {
padding-top: .875rem;
}
@media (max-width: 576px) {
.cus-datatable div.dataTables_wrapper div.dataTables_paginate ul.pagination {
margin: 1rem 0;
}
.cus-datatable div.dataTables_wrapper div.dataTables_length, .cus-datatable div.dataTables_wrapper div.dataTables_filter, .cus-datatable div.dataTables_wrapper div.dataTables_info, .cus-datatable div.dataTables_wrapper div.dataTables_paginate {
margin-bottom: .5rem;
}
.cus-datatable div.dataTables_wrapper div.dataTables_paginate ul.pagination {
justify-content: left !important;
}
.cus-datatable .page-link {
padding: .375rem .4rem;
}
}
#shipping-glossary-det {
direction: ltr;
text-align: left;
}
.res-ship-gloss .gloss-title {
color: var(--white-color);
}
.res-ship-gloss .gloss-cra {
color: var(--white-color);
text-align: center;
margin: auto;
display: inline-block;
width: 100%;
font-size: var(--font-size-10);
}
.ship-gloss {
background-color: var(--dark-color-02);
height: 3rem;
border-bottom: 1px solid var(--gray-color);
margin-bottom: 2rem;
}
.ship-gloss-02 {
background-color: var(--dark-color-02);
height: 3rem;
border-top: 1px solid var(--gray-color);
margin-top: 2rem;
}
.res-ship-gloss p {
color: var(--gray-color);
margin-bottom: 1rem;
}
.res-ship-gloss a, .res-ship-gloss a:focus {
color: var(--gray-color);
font-weight: var(--font-weight-04);
}
.res-ship-gloss a:hover, .res-ship-gloss a.active {
color: var(--white-color);
}
.trucking-types {
background-color: var(--white-color);
text-align: center;
}
.trucking-types img {
padding: 1rem;
}
@media (max-width: 576px) {
.trucking-types {
margin-top: 1.5rem;
}
}
.pallet-size {
background-color: var(--white-color);
padding: 3rem 0;
margin-top: 1rem;
}
.stuffing-plan {
background-color: var(--white-color);
text-align: center;
padding: 3rem 0;
}
.vessels-types {
text-align: center;
margin-top: 2rem;
}
.vessels-types img {
border: 1px solid var(--gray-color);
padding: .25rem;
}
.aircrafts-types {
margin-top: 1.5rem;
}
.aircrafts-types img {
border: 1px solid var(--gray-color);
padding: .25rem;
}
@media (max-width: 576px) {
.aircrafts-types {
text-align: center;
}
}
.reso-link img {
border: 1px solid var(--gray-color);
padding: 0.25rem;
margin: .75rem 0;
transform: scale(1);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.reso-link img:hover {
transform: scale(1.01);
padding: 0;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
/****** How To Use It Page ******/
.howtouse-01 {
padding-bottom: 4rem;
}
.howtouse-01.swiper-container-horizontal>.swiper-pagination-bullets,
.howtouse-01.swiper-pagination-custom,
.howtouse-01.swiper-pagination-fraction {
bottom: 0;
}
.howtouse-01 .swiper-pagination-bullet {
font-family: var(--font-family-02);
width: 1.75rem;
height: 1.75rem;
line-height: 1.75rem;
font-size: var(--font-size-03);
background: var(--white-color-01);
opacity: 1;
}
.howtouse-01 .swiper-pagination-bullet-active {
opacity: 1;
background: var(--white-color);
color: var(--dark-color-02);
font-weight: var(--font-weight-04);
}
.howtouse-01.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 .25rem;
}
.howtouse-01 h4 {
font-size: var(--font-size-09);
}
@media (max-width: 576px) {
.howtouse-01 h4 {
font-size: var(--font-size-07);
}
}
.howtouse-02 {
padding-bottom: 4rem;
}
.howtouse-02.swiper-container-horizontal>.swiper-pagination-bullets,
.howtouse-02.swiper-pagination-custom,
.howtouse-02.swiper-pagination-fraction {
bottom: 0;
}
.howtouse-02 .swiper-pagination-bullet {
font-family: var(--font-family-02);
width: 1.75rem;
height: 1.75rem;
line-height: 1.75rem;
font-size: var(--font-size-03);
background: var(--white-color-01);
opacity: 1;
}
.howtouse-02 .swiper-pagination-bullet-active {
opacity: 1;
background: var(--white-color);
color: var(--dark-color-02);
font-weight: var(--font-weight-04);
}
.howtouse-02.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 .25rem;
}
.howtouse-02 h5 {
font-size: var(--font-size-09);
}
@media (max-width: 576px) {
.howtouse-02 h5 {
font-size: var(--font-size-07);
}
}
/****** Testimonials Page ******/
.testimonial-sec .testimonial-logo {
text-align: center;
}
.testimonial-sec .testimonial-quote {
padding: 1rem 1.5rem 7rem 7rem;
position: relative;
border-style: solid;
border-width: 0 0 0 1px;
border-color: var(--white-color-01);
min-height: 16rem;
}
.testimonial-sec .testimonial-quote::before {
content: "";
display: block;
position: absolute;
top: 25%;
left: -32px;
height: 0;
width: 0;
border-color: var(--transparent-color) var(--white-color-01) var(--white-color-01) var(--transparent-color);
border-width: 1rem;
border-style: solid;
}
.testimonial-sec .testimonial-quote::after {
content: "";
display: block;
position: absolute;
top: calc(25% + 1px);
left: calc(-32px + 2px);
height: 0;
width: 0;
border-color: var(--transparent-color) var(--dark-color) var(--dark-color) var(--transparent-color);
border-width: calc(1rem - 1px);
border-style: solid;
background: transparent;
}
.testimonial-sec img {
border-radius: var(--border-radius-02);
width: 11rem;
height: auto;
}
.testimonialswiper-01 .swiper-button-prev, .testimonialswiper-01.swiper-container-rtl .swiper-button-next {
left: 34%;
right: auto;
top: calc(100% - 42px);
border-radius: var(--border-radius-02);
padding: 2rem;
background-color: var(--dark-color-02);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.testimonialswiper-01 .swiper-button-prev::after {
content: "";
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
width: 2rem;
height: 2rem;
position: absolute;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.testimonialswiper-01 .swiper-button-next, .testimonialswiper-01.swiper-container-rtl .swiper-button-prev {
left: 40%;
right: auto;
top: calc(100% - 42px);
border-radius: var(--border-radius-02);
padding: 2rem;
background-color: var(--dark-color-02);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.testimonialswiper-01 .swiper-button-next::after {
content: "";
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
width: 2rem;
height: 2rem;
position: absolute;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
}
@media (max-width: 992px) {
.testimonial-sec .testimonial-quote {
padding: 1rem 1.5rem 6rem 2rem;
min-height: 19rem;
}
.testimonialswiper-01 .swiper-button-prev, .testimonialswiper-01.swiper-container-rtl .swiper-button-next {
left: 39%;
padding: 1.5rem;
}
.testimonialswiper-01 .swiper-button-next, .testimonialswiper-01.swiper-container-rtl .swiper-button-prev {
left: 48%;
padding: 1.5rem;
}
.testimonial-sec img {
width: 10rem;
}
}
@media (max-width: 576px) {
.testimonial-sec .testimonial-logo {
text-align: left;
}
.testimonial-sec .testimonial-quote {
padding: 1.5rem 0 6rem 0;
min-height: auto;
border: none;
}
.testimonialswiper-01 .swiper-button-prev, .testimonialswiper-01.swiper-container-rtl .swiper-button-next {
left: 0;
}
.testimonialswiper-01 .swiper-button-next, .testimonialswiper-01.swiper-container-rtl .swiper-button-prev {
left: 18%;
}
.testimonial-sec .testimonial-quote::before,
.testimonial-sec .testimonial-quote::after {
display: none;
}
}
/****** Blog Page ******/
.blog-link, .blog-link:focus {
color: var(--white-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.blog-link:hover {
color: var(--gray-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.widget-resources li {
display: block;
padding: .5rem 0;
}
.widget-resources li a, .widget-resources li a:focus {
color: var(--gray-color);
}
.widget-resources li a:hover {
color: var(--white-color);
}
/****** Background Page ******/
body.about-page {
background-image: url(../img/images/about/about-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.policy-page {
background-image: url(../img/images/terms-policy/policy-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.terms-page {
background-image: url(../img/images/terms-policy/terms-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.signin-page {
background-image: url(../img/images/signinup/signin-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.signup-page {
background-image: url(../img/images/signinup/signup-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.signup-client-page {
background-image: url(../img/images/signinup/signup-client-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.signup-agent-page {
background-image: url(../img/images/signinup/signup-agent-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.change-password-page {
background-image: url(../img/images/signinup/change-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.forgot-password-page {
background-image: url(../img/images/signinup/forgot-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.contact-page {
background-image: url(../img/images/contact/contact-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.pricing-page {
background-image: url(../img/images/pricing/pricing-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.how-to-use-it-page {
background-image: url(../img/images/howtouse/how-to-use-it-page-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.faqs-page {
background-image: url(../img/images/about/faqs-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.testimonials-page {
background-image: url(../img/images/testimonials/testimonials-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.blog-page {
background-image: url(../img/images/blog/blog-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-page {
background-image: url(../img/images/resources/resources-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-countries-page {
background-image: url(../img/images/resources/resources-countries-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-airports-codes-page {
background-image: url(../img/images/resources/resources-airports-codes-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-sea-ports-codes-page {
background-image: url(../img/images/resources/resources-sea-ports-codes-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-world-cities-codes-page {
background-image: url(../img/images/resources/resources-world-cities-codes-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-incoterms-page {
background-image: url(../img/images/resources/resources-incoterms-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-shipping-glossary-page {
background-image: url(../img/images/resources/resources-shipping-glossary-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-container-size-page {
background-image: url(../img/images/resources/resources-container-size-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-air-container-load-page {
background-image: url(../img/images/resources/resources-air-container-load-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-trailer-measurements-page {
background-image: url(../img/images/resources/resources-trailer-measurements-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-pallet-size-page {
background-image: url(../img/images/resources/resources-pallet-size-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-stuffing-plan-page {
background-image: url(../img/images/resources/resources-stuffing-plan-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-dangerous-goods-page {
background-image: url(../img/images/resources/resources-dangerous-goods-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-vessels-types-page {
background-image: url(../img/images/resources/resources-vessels-types-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-aircrafts-types-page {
background-image: url(../img/images/resources/resources-aircrafts-types-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-shipping-lines-page {
background-image: url(../img/images/resources/resources-shipping-lines-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-airlines-page {
background-image: url(../img/images/resources/resources-airlines-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-commodities-temp-page {
background-image: url(../img/images/resources/resources-commodities-temp-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.resources-egypt-customs-resources-page {
background-image: url(../img/images/resources/resources-egypt-customs-resources-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.email-verification-page {
background-image: url(../img/images/signinup/email-verification-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
body.error-404-page {
background-image: url(../img/images/about/error-404-bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
@media (max-width: 576px) {
body.about-page {
background-image: url(../img/images/about/about-bg-mob.webp);
}
body.policy-page {
background-image: url(../img/images/terms-policy/policy-bg-mob.webp);
}
body.terms-page {
background-image: url(../img/images/terms-policy/terms-bg-mob.webp);
}
body.signin-page {
background-image: url(../img/images/signinup/signin-bg-mob.webp);
}
body.signup-page {
background-image: url(../img/images/signinup/signup-bg-mob.webp);
}
body.signup-client-page {
background-image: url(../img/images/signinup/signup-client-bg-mob.webp);
}
body.signup-agent-page {
background-image: url(../img/images/signinup/signup-agent-bg-mob.webp);
}
body.change-password-page {
background-image: url(../img/images/signinup/change-bg-mob.webp);
}
body.forgot-password-page {
background-image: url(../img/images/signinup/forgot-bg-mob.webp);
}
body.contact-page {
background-image: url(../img/images/contact/contact-bg-mob.webp);
}
body.pricing-page {
background-image: url(../img/images/pricing/pricing-bg-mob.webp);
}
body.how-to-use-it-page {
background-image: url(../img/images/howtouse/how-to-use-it-page-bg-mob.webp);
}
body.faqs-page {
background-image: url(../img/images/about/faqs-bg-mob.webp);
}
body.testimonials-page {
background-image: url(../img/images/testimonials/testimonials-bg-mob.webp);
}
body.blog-page {
background-image: url(../img/images/blog/blog-bg-mob.webp);
}
body.resources-page {
background-image: url(../img/images/resources/resources-bg-mob.webp);
}
body.resources-countries-page {
background-image: url(../img/images/resources/resources-countries-bg-mob.webp);
}
body.resources-airports-codes-page {
background-image: url(../img/images/resources/resources-airports-codes-bg-mob.webp);
}
body.resources-sea-ports-codes-page {
background-image: url(../img/images/resources/resources-sea-ports-codes-bg-mob.webp);
}
body.resources-world-cities-codes-page {
background-image: url(../img/images/resources/resources-world-cities-codes-bg-mob.webp);
}
body.resources-incoterms-page {
background-image: url(../img/images/resources/resources-incoterms-bg-mob.webp);
}
body.resources-shipping-glossary-page {
background-image: url(../img/images/resources/resources-shipping-glossary-bg-mob.webp);
}
body.resources-container-size-page {
background-image: url(../img/images/resources/resources-container-size-bg-mob.webp);
}
body.resources-air-container-load-page {
background-image: url(../img/images/resources/resources-air-container-load-bg-mob.webp);
}
body.resources-trailer-measurements-page {
background-image: url(../img/images/resources/resources-trailer-measurements-bg-mob.webp);
}
body.resources-pallet-size-page {
background-image: url(../img/images/resources/resources-pallet-size-bg-mob.webp);
}
body.resources-stuffing-plan-page {
background-image: url(../img/images/resources/resources-stuffing-plan-bg-mob.webp);
}
body.resources-dangerous-goods-page {
background-image: url(../img/images/resources/resources-dangerous-goods-bg-mob.webp);
}
body.resources-vessels-types-page {
background-image: url(../img/images/resources/resources-vessels-types-bg-mob.webp);
}
body.resources-aircrafts-types-page {
background-image: url(../img/images/resources/resources-aircrafts-types-bg-mob.webp);
}
body.resources-shipping-lines-page {
background-image: url(../img/images/resources/resources-shipping-lines-bg-mob.webp);
}
body.resources-airlines-page {
background-image: url(../img/images/resources/resources-airlines-bg-mob.webp);
}
body.resources-commodities-temp-page {
background-image: url(../img/images/resources/resources-commodities-temp-bg-mob.webp);
}
body.resources-egypt-customs-resources-page {
background-image: url(../img/images/resources/resources-egypt-customs-resources-bg-mob.webp);
}
body.email-verification-page {
background-image: url(../img/images/signinup/email-verification-bg-mob.webp);
}
body.error-404-page {
background-image: url(../img/images/about/error-404-bg-mob.webp);
}
}
/****** Forms & Sweet Alert ******/
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
cursor: pointer;
width: .75rem;
height: .75rem;
background: url("data:image/svg+xml;utf8,") no-repeat !important;
}
select option {
background-color: var(--white-color) !important;
font-weight: var(--font-weight-04) !important;
padding: .25rem 0 !important;
color: var(--dark-color) !important;
border: solid 1px var(--white-color-01) !important;
}
.form-outline {
position: relative;
}
.form-outline .form-control {
display: block;
width: 100%;
position: relative;
padding: .5rem .75rem;
line-height: 1.5;
color: var(--white-color);
background-color: var(--transparent-color);
border: none;
border-bottom: 1px solid var(--gray-color);
border-radius: var(--border-radius);
letter-spacing: var(--letter-spacing-02);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.form-outline .form-control:focus {
border-bottom: 1px solid var(--white-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.form-outline input:-webkit-autofill,
.form-outline input:-webkit-autofill:hover,
.form-outline input:-webkit-autofill:focus,
.form-outline input:-webkit-autofill::first-line,
.form-outline textarea:-webkit-autofill,
.form-outline textarea:-webkit-autofill:hover,
.form-outline textarea:-webkit-autofill:focus,
.form-outline select:-webkit-autofill,
.form-outline select:-webkit-autofill:hover,
.form-outline select:-webkit-autofill:focus {
background-color: var(--transparent-color) !important;
transition: background-color 5000s ease-in-out 0s !important;
-webkit-text-fill-color: var(--white-color) !important;
font-size: var(--font-size-01) !important;
letter-spacing: var(--letter-spacing-02) !important;
}
.form-outline .form-control::placeholder {
color: var(--light-color) !important;
opacity: 1 !important;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.form-outline .form-control:focus::placeholder {
opacity: 0 !important;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.form-outline .form-control:-ms-input-placeholder {
color: var(--light-color) !important;
opacity: 1 !important;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.form-outline .form-control:focus:-ms-input-placeholder {
opacity: 0 !important;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.form-outline .form-control::-ms-input-placeholder {
color: var(--light-color) !important;
opacity: 1 !important;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.form-outline .form-control:focus::-ms-input-placeholder {
opacity: 0 !important;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.form-outline .form-check-input {
border: 1px solid var(--gray-color);
background-color: var(--transparent-color);
border-radius: var(--border-radius);
color: var(--white-color);
width: 1.25rem;
height: 1.25rem;
margin-top: 0.125em;
margin-right: 0.75rem;
}
.form-check-input[type=radio] {
border-radius: var(--border-radius-02);
}
.form-outline.is-invalid .form-control {
border-bottom: 1px solid var(--red-color);
}
.form-outline.is-invalid .form-control:focus {
border-bottom: 1px solid var(--red-color);
}
.form-outline.is-invalid .form-check-input {
border: 1px solid var(--red-color);
}
.form-outline .invalid-feedback, .error {
width: auto;
position: absolute;
bottom: -1.25rem;
left: .25rem;
z-index: 2;
color: var(--red-color);
margin-top: -1rem;
font-size: var(--font-size-02);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.form-outline textarea {
resize: none;
height: auto;
}
.form-outline .btn-light,
.form-outline .btn-light:focus {
color: var(--white-color);
background-color: var(--transparent-color);
border: none;
outline: 0 !important;
box-shadow: none !important;
}
.form-outline .btn.btn-light,
.form-outline .btn.btn-light:focus,
.form-outline .btn.btn-light:hover {
display: inline-block;
line-height: 1.5;
color: var(--white-color);
background-color: var(--transparent-color);
border: none;
padding: 0 .75rem 0 0;
border-radius: var(--border-radius);
outline: 0 !important;
box-shadow: none !important;
}
.form-outline .dropdown-menu {
padding: 0;
margin: 0;
margin-left: -.75rem !important;
font-size: 1rem;
color: var(--dark-color);
text-align: left;
list-style: none;
background-color: var(--white-color);
background-clip: padding-box;
border: none;
border-radius: var(--border-radius);
}
.form-outline .bootstrap-select .dropdown-toggle .filter-option {
left: 0;
right: auto;
float: left;
text-align: left;
}
.form-outline .dropdown-item {
padding: 0.25rem 1.5rem;
}
.form-outline .dropdown-item:focus, .form-outline .dropdown-item:hover {
color: var(--dark-color);
background-color: var(--gray-color-02);
padding: .25rem 1.5rem;
}
.form-outline .dropdown-item.active, .form-outline .dropdown-item:active {
color: var(--white-color);
text-decoration: none;
background-color: var(--blue-color);
}
.form-outline .dropdown-menu input[type=search].form-control {
color: var(--dark-color);
background-color: var(--white-color);
border-bottom: 1px solid var(--gray-color);
}
.form-outline .bootstrap-select .no-results {
padding: .25rem .5rem;
background: var(--gray-color-02);
margin: 0 .25rem .25rem 1rem;
white-space: nowrap;
}
@media (max-width: 992px) {
.form-outline .form-check-label {
font-size: var(--font-size-04);
}
}
.iti {
width: 100%;
}
.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
right: auto;
left: 0;
}
.iti-mobile .iti--container {
top: 30px;
bottom: 30px;
left: 30px;
right: 30px;
position: fixed;
max-width: calc(100% - 3.75rem);
}
.iti--separate-dial-code .iti__selected-flag {
background-color: var(--transparent-color) !important;
}
.iti__country-list {
color: var(--dark-color) !important;
}
.iti__dial-code {
color: var(--gray-color) !important;
}
.form-outline .iti__arrow {
border-top: 4px solid var(--white-color) !important;
}
.form-outline .iti__arrow--up {
border-bottom: 4px solid var(--white-color) !important;
border-top: none !important;
}
.iti__country.iti__highlight {
background-color: var(--blue-color) !important;
color: var(--white-color) !important;
}
.alert-danger {
color: var(--white-color);
background-color: var(--red-color);
border-color: var(--red-color);
border-radius: var(--border-radius);
text-align: center;
}
.alert-success {
color: var(--white-color);
background-color: var(--green-color-02);
border-color: var(--green-color-02);
border-radius: var(--border-radius);
text-align: center;
}
.toggle-password {
position: absolute;
right: .5rem;
top: .5rem;
z-index: 1;
color: var(--gray-color);
cursor: pointer;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.toggle-password ~ input {
padding-right: 2.5rem !important;
}
.eye::before {
content: "\f06e";
font-family: var(--font-family-04);
font-size: var(--font-size-01);
}
.eye-slash::before {
content: "\f070";
font-family: var(--font-family-04);
font-size: var(--font-size-01);
}
.iti input, .iti input[type=tel], .iti input[type=text] {
padding-right: .75rem !important;
}
.form-outline .img-thumbnail {
border-radius: var(--border-radius);
width: 100%;
max-width: 320px;
height: auto;
max-height: 320px;
background-color: var(--white-color);
border: 1px solid var(--white-color);
z-index: 1;
}
.model-frameless .modal-content {
background-color: var(--white-color);
border: none;
border-radius: var(--border-radius);
padding: 1.5rem;
}
@media (max-width: 576px) {
.model-frameless .modal-content {
padding: .5rem;
}
}
.model-frameless .btn-close {
position: absolute;
right: 0;
top: -1.5rem;
}
.model-frameless .modal-content .btn-close {
box-sizing: content-box;
width: .5rem;
height: .5rem;
padding: .25em .25em;
background: url("data:image/svg+xml;utf8,") no-repeat;
border: 0;
border-radius: 0;
opacity: 1;
z-index: 1;
}
.modal-open {
padding-right: 0 !important;
}
.model-frameless .modal-footer {
display: inline-block;
padding: 0;
border-top: none;
text-align: center;
}
.modal-backdrop {
background-color: var(--dark-color-03);
}
.modal-backdrop.show {
opacity: 1 !important;
}
.form-outline .form-control.custom-file-input {
padding-left: 110px;
}
.form-outline .custom-file-label {
font-size: var(--font-size-04);
color: var(--gray-color);
}
.form-control#formsigncorcommercial::before,
.form-control#formsignupagentcommercial::before,
.form-control#formsignupagentsubcommercial::before {
content: "Upload Commercial Register";
position: absolute;
left: 0;
top: 2px;
z-index: 2;
display: block;
background-color: var(--white-color);
color: var(--dark-color);
width: 13rem;
height: 2.25rem;
line-height: 2.25rem;
font-size: var(--font-size-04);
font-weight: var(--font-weight-04);
letter-spacing: 0;
text-align: center;
}
.form-control#formsigncortaxcertificate::before,
.form-control#formsignupagenttaxcertificate::before,
.form-control#formsignupagentsubtaxcertificate::before {
content: "Upload Tax Certificate";
position: absolute;
left: 0;
top: 2px;
z-index: 2;
display: block;
background-color: var(--white-color);
color: var(--dark-color);
width: 13rem;
height: 2.25rem;
line-height: 2.25rem;
font-size: var(--font-size-04);
font-weight: var(--font-weight-04);
letter-spacing: 0;
text-align: center;
}
.form-outline .form-control.profile-img-file {
padding-left: 14px;
}
.form-control#formsigncorphoto::before,
.form-control#formsignagnphoto::before {
content: "Upload Logo";
position: absolute;
left: 0;
top: 2px;
z-index: 2;
display: block;
background-color: var(--white-color);
color: var(--dark-color);
width: 7rem;
height: 2.25rem;
line-height: 2.25rem;
font-size: var(--font-size-04);
font-weight: var(--font-weight-04);
letter-spacing: 0;
text-align: center;
}
.form-control#formsignsubagnphoto::before {
content: "Upload Photo";
position: absolute;
left: 0;
top: 2px;
z-index: 2;
display: block;
background-color: var(--white-color);
color: var(--dark-color);
width: 7rem;
height: 2.25rem;
line-height: 2.25rem;
font-size: var(--font-size-04);
font-weight: var(--font-weight-04);
letter-spacing: 0;
text-align: center;
}
.form-outline .form-control.profile-img-file {
padding-left: 14px;
}
.nav-pills.v-nav-pills .nav-item {
width: 25%;
}
@media (max-width: 992px) {
.nav-pills.v-nav-pills .nav-item {
width: 50%;
}
}
@media (max-width: 576px) {
.nav-pills.v-nav-pills .nav-item {
width: 100%;
}
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: var(--white-color);
background-color: var(--transparent-color);
border: none;
border-radius: var(--border-radius);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.nav-pills.v-nav-pills .nav-link {
background: 0 0;
background-color: var(--transparent-color);
border: none;
pointer-events: none;
cursor: default;
border-radius: var(--border-radius);
font-size: var(--font-size-06);
font-weight: var(--font-weight-04);
color: var(--gray-color);
padding: 0.5rem;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.nav-pills.v-nav-pills .nav-link:hover {
color: var(--white-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.nav-pills.v-nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: var(--white-color);
background-color: var(--transparent-color);
border: none;
border-radius: var(--border-radius);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.form-outline .input-group .form-control {
width: 40%;
display: flex;
}
.form-outline .input-group .input-group-text {
display: flex;
align-items: center;
padding: 0;
color: var(--gray-color) !important;
text-align: center;
white-space: nowrap;
background-color: transparent;
border: none;
border-radius: 0;
width: 60%;
pointer-events: none;
cursor: default;
}
.form-outline .input-group .input-group-text input {
color: var(--gray-color) !important;
text-align: right;
display: flex;
width: 100%;
position: relative;
padding: 0.5rem 0.75rem;
line-height: 1.5;
color: var(--gray-color);
background-color: var(--transparent-color);
border: none;
border-bottom: 1px solid var(--gray-color);
border-radius: var(--border-radius);
letter-spacing: var(--letter-spacing-02);
}
.verification .verified {
color: var(--green-color);
font-size: var(--font-size-16);
}
.verification .invalid {
color: var(--red-color);
font-size: var(--font-size-16);
}
.verification .expired {
color: var(--yellow-color);
font-size: var(--font-size-16);
}
.sweet-alert {
padding: 1rem;
border-radius: 0;
}
.sweet-alert h3 {
font-size: 1.5rem;
margin-top: 2rem;
color: var(--dark-color);
}
.sweet-alert .text-muted {
color: var(--gray-color) !important;
}
.sweet-alert .sa-confirm-button-container {
position: relative;
display: grid !important;
}
.sweet-alert .sa-icon.sa-success .sa-line {
background-color: var(--green-color);
}
.sweet-alert .sa-icon.sa-success .sa-placeholder {
border: 4px solid var(--green-color) !important;
}
.sweet-alert .sa-icon.sa-error .sa-line {
background-color: var(--red-color);
}
.sweet-alert .sa-icon.sa-error {
border-color: var(--red-color);
}
.sweet-alert .btn-primary,
.sweet-alert .btn-primary:focus {
font-family: var(--font-family-03);
font-weight: 500;
text-transform: uppercase;
text-align: center;
padding: .5rem 2.5rem;
border-radius: var(--border-radius-03);
color: var(--white-color);
background-color: var(--blue-color);
border: 1px solid var(--blue-color);
display: inline-block;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.sweet-alert .btn-primary:hover {
color: var(--white-color);
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.sweet-overlay {
background-color: var(--dark-color-03);
opacity: 1 !important;
}
/****** Jssocials Shares ******/
.share-sec {
display: inline-block;
font-size: 1.5rem;
position: relative;
top: 1.125rem;
margin-right: 1.25rem;
}
#shareRoundIcons {
display: inline-block;
}
.jssocials-shares {
margin: 0;
display: inline-block;
}
.jssocials-share {
display: inline-block;
vertical-align: top;
margin: 0 1rem 0 0;
}
.jssocials-share:last-child {
margin: 0;
}
.jssocials-share-link {
display: inline-block;
text-align: center;
text-decoration: none;
line-height: 1;
}
.jssocials-share-logo, .jssocials-share-logo:focus {
width: 3rem;
height: 3rem;
vertical-align: middle;
font-size: 1rem;
color: var(--gray-color);
background-color: var(--dark-color-02);
line-height: 3rem;
border-radius: var(--border-radius-02);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.jssocials-share-logo:hover {
color: var(--white-color);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
@media (max-width: 576px) {
.share-sec {
font-size: 1.25rem;
top: .875rem;
margin-right: 1rem;
}
.jssocials-share {
margin: 0 .5rem 0 0;
}
.jssocials-share-logo, .jssocials-share-logo:focus {
width: 3rem;
height: 3rem;
font-size: 1rem;
line-height: 3rem;
}
}
/****** Custom Loading ******/
.loading-cus {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
height: 100vh;
width: 100vw;
background-color: var(--dark-color-03);
z-index: 9999;
display: none;
}
.loading-cus .three-quarter-spinner {
position: absolute;
top: 50%;
left: 50%;
width: 3.25rem;
height: 3.25rem;
border: 3px solid var(--gray-color);
border-top: 3px solid transparent;
border-radius: var(--border-radius-02);
animation: spin .5s linear 0s infinite;
margin-left: -1.625rem;
margin-top: -1.625rem;
}
.preloader {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
height: 100vh;
width: 100vw;
background-color: var(--dark-color-03);
z-index: 9999;
display: none;
}
.preloader .three-quarter-spinner {
position: absolute;
top: 50%;
left: 50%;
width: 3.25rem;
height: 3.25rem;
border: 3px solid var(--gray-color);
border-top: 3px solid transparent;
border-radius: var(--border-radius-02);
animation: spin .5s linear 0s infinite;
margin-left: -1.625rem;
argin-top: -1.625rem;
}
.preloader.loaded {
display: none;
}
@keyframes spin {
from {
transform: rotate(0);
}
to{
transform: rotate(359deg);
}
}
/****** Button Link ******/
a[type=link], .dmopMx {
display: none;
}