/* ---------------------------------------
##### - PLACE YOUR CUSTOM CSS HERE - #####
--------------------------------------- */
:root {
--primary-blue: #29387D;
--primary-red: #EA2227;
--text-main: #666666;
--text-black: #202020;
--text-black-dark: #000000;
--border-color: #C3C3C3;
--bg-light: #F4F5F8;
}
body {
color: var(--text-main);
font-size: 16px;
line-height: 1.2;
height: 100%;
position: relative;
background-color: #fff;
overflow-x: hidden;
/*font-family: "Red Hat Display", sans-serif;*/
font-family: "Gilroy-Medium", sans-serif;
}
img{
max-width: 100%;
}
a {
color: var(--text-black);
}
a:hover {
color: var(--primary-red);
}
.modal-backdrop.show {
opacity: .8;
}
.c-5CE1E6 {
color: #5CE1E6;
}
.c-F5C156 {
color: #F5C156;
}
body.light {
background: #f5f5f5;
color: #111;
}
body.light .main{
background: #f5f5f5;
color: #111;
}
body.light .setting-card-box {
background-color: #fff;
color: #111;
border-color: rgba(195, 195, 195, 1);
}
body.light .setting-card-box .setting-card-img {
color: #111;
}
body.light .setting-card-box .setting-card-body p,
body.light .setting-card-box .setting-card-body h4 {
color: #111;
}
body.light .setting-card-box:hover {
background-color: var(--primary-red);
}
body.light .header_panel.sticky {
background: linear-gradient(160.61deg, rgba(25, 25, 25, 0.9) 0%, rgba(0, 0, 0, 0.5) 101.7%);
}
body.dark {
background: #111;
color: #f5f5f5;
}
p{
font-size: 16px;
color: var(--text-main);
line-height: 22px;
font-family: "Gilroy-Light", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6{
color: var(--text-black);
}
strong {
color: var(--text-black);
font-family: 'Gilroy-Bold', sans-serif;
}
/* ===== scrollUp ===== */
#scrollUp {
background: var(--primary-red);
color: #fff;
right: 1rem;
bottom: 10px;
padding: 5px;
border-radius: 7px;
transition: all .4s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
position: absolute;
transform: scale(1);
}
#scrollUp:hover {
background-color: var(--primary-blue);
transform: scale(1.1);
transition: all .4s ease-in-out;
}
.page-wrapper {
position: relative;
transition: all 0.4s ease-in-out;
}
/* Custom Scrollbar using CSS */
.custom-scrollbar-css {
overflow-y: auto;
}
/* scrollbar width */
.custom-scrollbar-css::-webkit-scrollbar {
width: 4px;
margin: 0 auto;
}
/* scrollbar track */
.custom-scrollbar-css::-webkit-scrollbar-track {
background: rgba(234, 239, 244, .6);
border-radius: 7px;
width: 5px;
}
/* scrollbar handle */
.custom-scrollbar-css::-webkit-scrollbar-thumb {
background-color: rgba(187, 201, 215, 1);
border-radius: 7px;
/* background-image: linear-gradient(to top, #CF2129 0%, #F29C1F 100%); */
}
.custom-scrollbar-css::-webkit-scrollbar-thumb:hover {
background: rgba(35, 51, 64, .5);
}
/* ==== Wishlist PopUp ===== */
.wishlist-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-width: 4px 0 0;
font-weight: 600;
line-height: 1.5;
padding: 15px 20px;
width: 250px;
border-radius: 0;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s;
z-index: 100
}
.wishlist-popup .wishlist-popup-msg {
font-weight: 600;
line-height: 1.6;
text-align: center
}
.wishlist-popup.active {
opacity: 1;
visibility: visible;
z-index: 1071
}
/* Magnific Popup CSS */
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #fff;
opacity: 0.4;
}
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mfp-container {
text-align: center;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
box-sizing: border-box;
}
.mfp-container:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.mfp-align-top .mfp-container:before {
display: none;
}
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045;
}
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto;
}
.mfp-ajax-cur {
cursor: progress;
}
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: zoom-out;
}
.mfp-zoom {
cursor: pointer;
cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content {
cursor: auto;
}
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
-webkit-user-select: none;
user-select: none;
}
.mfp-loading.mfp-figure {
display: none;
}
.mfp-hide {
display: none !important;
}
.mfp-preloader {
color: #CCC;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044;
}
.mfp-preloader a {
color: #CCC;
}
.mfp-preloader a:hover {
color: #FFF;
}
.mfp-s-ready .mfp-preloader {
display: none;
}
.mfp-s-error .mfp-content {
display: none;
}
button.mfp-close, button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
top: 0;
right: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: #FFF;
font-style: normal;
font-size: 28px;
}
.mfp-close:hover, .mfp-close:focus {
opacity: 1;
}
.mfp-close:active {
top: 1px;
}
.mfp-close-btn-in .mfp-close {
color: #333;
}
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: #FFF;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%;
}
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #CCC;
font-size: 12px;
line-height: 18px;
white-space: nowrap;
}
.mfp-arrow {
position: absolute;
opacity: 0.65;
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.mfp-arrow:active {
margin-top: -54px;
}
.mfp-arrow:hover, .mfp-arrow:focus {
opacity: 1;
}
.mfp-arrow:before, .mfp-arrow:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent;
}
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px;
}
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7;
}
.mfp-arrow-left {
left: 0;
}
.mfp-arrow-left:after {
border-right: 17px solid #FFF;
margin-left: 31px;
}
.mfp-arrow-left:before {
margin-left: 25px;
border-right: 27px solid #3F3F3F;
}
.mfp-arrow-right {
right: 0;
}
.mfp-arrow-right:after {
border-left: 17px solid #FFF;
margin-left: 39px;
}
.mfp-arrow-right:before {
border-left: 27px solid #3F3F3F;
}
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px;
}
.mfp-iframe-holder .mfp-close {
top: -40px;
}
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto;
}
/* The shadow behind the image */
.mfp-figure {
line-height: 0;
}
.mfp-figure:after {
content: "";
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444;
}
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px;
}
.mfp-figure figure {
margin: 0;
}
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto;
}
.mfp-title {
text-align: left;
line-height: 18px;
color: #F3F3F3;
word-wrap: break-word;
padding-right: 36px;
}
.mfp-image-holder .mfp-content {
max-width: 100%;
}
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer;
}
@media (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
/**
* Remove all paddings around the image on small screen
*/
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0;
}
.mfp-img-mobile img.mfp-img {
padding: 0;
}
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0;
}
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px;
}
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
box-sizing: border-box;
}
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0;
}
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px;
}
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0;
}
}
@media all and (max-width: 900px) {
.mfp-arrow {
transform: scale(0.75);
}
.mfp-arrow-left {
transform-origin: 0;
}
.mfp-arrow-right {
transform-origin: 100%;
}
.mfp-container {
padding-left: 6px;
padding-right: 6px;
}
}
/* overlay at start */
.mfp-fade.mfp-bg {
opacity: 0;
transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
opacity: 0;
}
/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
opacity: 0;
transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
.mfp-bg {
background-color: #777777;
}
button.mfp-close {
position: absolute;
top: 0;
right: 0;
overflow: visible;
opacity: 0.65;
cursor: pointer;
background: transparent;
border: 0;
text-indent: -9999px;
transform: rotateZ(45deg);
color: #838383;
}
button.mfp-close:hover {
opacity: 1;
}
.mfp-image-holder button.mfp-close {
width: 41px;
color: #fff;
text-align: left;
}
button.mfp-close:after {
content: "";
position: absolute;
height: 17px;
top: 12px;
left: 20px;
border-left: 1px solid;
}
button.mfp-close:before {
content: "";
position: absolute;
width: 17px;
top: 20px;
left: 12px;
border-top: 1px solid;
}
.mfp-newsletter.mfp-removing {
transition: opacity 0.35s ease-out;
opacity: 0;
}
.mfp-ready .mfp-preloader {
display: none;
}
.mfp-zoom-out-cur .mfp-bg {
opacity: 0.8;
background-color: #0b0b0b;
}
.mfp-zoom-out-cur .mfp-counter {
color: #fff;
}
.mfp-zoom-out-cur .mfp-arrow-right:before {
border-left: 0;
}
.mfp-zoom-out-cur .mfp-arrow-left:before {
border-right: 0;
}
.mfp-ajax-product.mfp-bg,
.login-popup.mfp-bg {
opacity: 0.6;
background-color: transparent;
}
.mfp-ajax-product .product-single-container {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
max-height: calc( 100vh - 4rem );
overflow-y: auto;
}
.mfp-wrap .mfp-content {
transition: all 0.35s ease-out;
opacity: 0;
}
.login-popup.mfp-wrap .mfp-content {
max-width: 525px;
}
.mfp-ajax-product.mfp-wrap .mfp-content {
max-width: 931px;
}
.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
.mfp-ajax-product {
z-index: 1058;
}
.mfp-bg.mfp-newsletter, .mfp-bg.login-popup,
.mfp-wrap.mfp-newsletter,
.mfp-wrap.login-popup {
z-index: 1058;
}
@media (max-width: 991px) {
.mfp-container {
padding: 0.6rem;
}
}
.mfp-container .mfp-preloader,
.porto-loading-icon {
content: "";
display: inline-block;
width: 40px;
height: 40px;
margin: 0 auto;
border: 2px solid transparent;
border-radius: 50%;
border-top-color: #08C;
border-image: none;
text-indent: -9999px;
animation: spin 0.75s infinite linear;
z-index: 3;
}
.mfp-container .mfp-preloader:before,
.porto-loading-icon:before {
position: absolute;
top: -2px;
right: 0;
left: -2px;
width: inherit;
height: inherit;
border: inherit;
border-radius: inherit;
border-top-color: inherit;
content: "";
animation: spin 1.5s infinite ease;
}
/* Bootstrap TouchSpin */
.bootstrap-touchspin .input-group-btn-vertical {
position: absolute;
right: 0;
height: 100%;
z-index: 11;
}
.bootstrap-touchspin.input-group {
max-width: 68px;
padding-right: 20px;
margin-bottom: 0;
}
.bootstrap-touchspin .form-control {
text-align: center;
margin-bottom: 0;
height: 4.2rem;
max-width: 46px;
padding: 1.1rem 1rem;
}
.bootstrap-touchspin .form-control:not(:focus) {
border-color: #ccc;
}
.bootstrap-touchspin .input-group-btn-vertical > .btn {
position: absolute;
right: 0;
height: 2rem;
padding: 0;
width: 2rem;
text-align: center;
font-size: 1.2rem;
}
.bootstrap-touchspin .input-group-btn-vertical > .btn:before {
position: relative;
margin: 0;
width: auto;
line-height: 1;
width: auto;
top: -0.1rem;
margin-right: -0.2rem;
}
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
border-radius: 0;
top: 0;
}
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
border-radius: 0;
bottom: 0;
}
/* ========== */
.section-title {
margin-bottom: 40px;
}
.section-title h3 {
background-image: url(../img/icons/red_arrow2.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 50px;
font-weight: 600;
font-size: 33px;
line-height: 110%;
text-transform: uppercase;
color: var(--text-black);
margin-bottom: 0;
}
.section-title.no_icon_style h3{
background-image: unset !important;
padding-left: 0 !important;
}
.section-title.text-left h3 {
text-align: left;
}
.section-title.text-right h3 {
text-align: right;
}
.section-title h4 {
font-weight: 500;
font-size: 24px;
line-height: 100%;
text-align: center;
text-transform: uppercase;
color: var(--text-main);
margin-bottom: 0;
}
.section-title h4 span {
font-weight: 600;
color: var(--text-black);
}
.section-title p {
font-weight: 400;
font-size: 16px;
line-height: 130%;
text-align: center;
color: var(--text-main);
margin-bottom: 0;
}
.section-title h3 span {
color: #5CE1E6;
}
.upcomming-btn:focus,
.upcomming-btn {
font-weight: 600;
font-size: 16px;
line-height: 1;
text-align: center;
color: rgba(255, 255, 255, 1);
background-color: var(--primary-blue);
padding: 14px 29px;
border-radius: 7px;
text-decoration: none;
display: inline-block;
width: auto;
transition: all .4s ease-in-out;
border: 1px solid transparent;
}
.btn:active,
.upcomming-btn:active,
.upcomming-btn:hover {
background-color: var(--primary-red)! important;
border-color: var(--primary-red)! important;
color: #fff !important;
transition: all .2s ease-in-out;
}
.track-btn {
border: 1px solid var(--primary-red);
background-color: var(--primary-red);
color: var(--text-black);
font-weight: 500;
font-size: 16px;
line-height: 100%;
text-align: center;
text-transform: capitalize;
padding: 13px 26px;
border-radius: 7px;
text-decoration: none;
display: inline-block;
width: auto;
transition: all .4s ease-in-out;
}
.track-btn:hover {
background-color: rgba(228, 34, 34, 1);
color: rgba(255, 255, 255, 1);
transition: all .4s ease-in-out;
border-color: transparent;
}
/* ========== Header ========= */
.section.header_panel {
padding: 0;
transition: all .4s ease-in-out;
background: #ffffff;
}
.top-header-box {
padding: 5px 1rem;
}
.top-header-box-inner {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 5px 0rem;
}
.header-menu-part{
background: var(--primary-blue);
padding: 0 1rem;
}
.bottom-header-box .navbar{
margin: 0;
padding: 0;
}
.nav-container{
display: flex;
justify-content: space-between;
width: 100%;
}
/* Container for the dropdown */
.category-dropdown {
position: relative; /* Context for the absolute list */
display: inline-block;
}
.category-btn {
background-color: var(--primary-red);
color: white;
padding: 0 25px;
height: 50px; /* Match navbar height */
display: flex;
align-items: center;
font-weight: 500;
font-size: 17px;
cursor: pointer;
gap: 5px;
}
/* Hidden Dropdown List */
.dropdown-content {
display: none; /* Hide by default */
position: absolute;
top: 50px;
left: 0;
background-color: var(--primary-red);
min-width: 100%;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 100;
list-style: none;
border-top: 2px solid #e32626;
max-width: 100%;
margin: 0;
padding: 0 0px 20px 25px;
}
/* Dropdown Items */
.dropdown-content > li {
/*border-bottom: 1px solid #ffffff4a;*/
position: relative;
padding-right: 25px;
}
.dropdown-content li:last-child a{
border-bottom: 0;
}
.dropdown-content a {
color: #fff;
padding: 10px 0;
text-decoration: none;
display: block;
font-size: 17px;
position: relative;
border-bottom: 1px solid #ffffff4a;
}
.dropdown-content > li.have_child > a::after {
content: "\F285";
font-size: 16px;
position: absolute;
right: 0px;
top: 12px;
font-size: 15px;
font-family: 'bootstrap-icons';
}
.dropdown-content a:hover {
color: var(--text-black);
font-size: bolder;
}
.dropdown-content-child{
display: none;
position: absolute;
top: 0;
left: calc(100% + 25px);
left: 100%;
width: 100%;
background: #fff;
color: var(--text-black);
list-style: none;
padding: 10px 20px;
}
.dropdown-content-child li {
}
.dropdown-content-child a {
color: var(--text-black);
padding: 10px 0;
text-decoration: none;
font-size: 16px;
border-bottom: 1px solid var(--text-main)30;
}
.dropdown-content-child li:last-child a{
border-bottom: 0;
}
.dropdown-content-child a:hover {
color: var(--primary-red);
font-size: bolder;
}
/* Show on Hover */
.category-dropdown:hover .dropdown-content {
display: block;
}
/* Show on Hover */
.category-dropdown .dropdown-content li:hover .dropdown-content-child {
display: block;
z-index: 9;
border: 1px solid rgba(0, 0, 0, 0.05); /* Very light border to define the edge */
/* Modern, soft elevation shadow */
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.header_panel.sticky {
position: fixed;
width: 100%;
background-color: #ffffff;
z-index: 1000;
left: 0;
right: 0;
top: 0;
transition: all .4s ease-in-out;
max-width: 100%;
margin: 0 auto;
}
.header_panel .site-logo .logo-img {
max-width: 130px;
width: auto;
transition: all .4s ease-in-out;
}
.header_panel.sticky .site-logo .logo-img {
max-width: 100px;
width: 100%;
transition: all .4s ease-in-out;
}
.navbar-expand-lg .navbar-nav {
gap: 15px;
}
.navbar-nav li {
margin: 0px 25px !important;
padding: 0 !important;
position: relative;
height: 50px;
}
.navbar-nav li:last-child{
margin-right: 0 !important;
}
.navbar-nav li a {
padding: 0! important;
font-weight: 500;
font-size: 17px;
line-height: 50px;
text-align: center;
text-transform: uppercase;
color: #fff;
height: 50px;
}
.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link,
.navbar-nav li a.active {
color: #ffffff; /* cyan highlight */
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 5px;
background-color: var(--primary-red);
border-radius: 15px 15px 0 0;
}
/* Hover effect */
.navbar-nav li a:hover {
color: #ffffff;
}
.navbar-nav li.nav-item .dropdown-menu {
display: none;
margin-top: 10px;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease-in-out;
}
.navbar-nav li.nav-item.dropdown .dropdown-menu {
display: block; /* Bootstrap needs it for positioning */
opacity: 0;
visibility: hidden;
background: rgba(255, 255, 255, 1);
border-radius: 7px;
padding: 0;
border: 1px solid rgba(195, 195, 195, 1);
min-width: 290px;
transform: translateY(30px);
transition: all 0.25s ease;
pointer-events: none;
overflow: hidden;
box-shadow: 10px -6px 34px 0px rgba(0, 0, 0, 0.11);
}
.navbar-nav li.nav-item.dropdown:hover .dropdown-menu {
display: block;
margin-top: -1px;
opacity: 1;
visibility: visible;
transform: translateY(10px);
pointer-events: auto;
}
.navbar-nav li.nav-item .dropdown-menu {
transition-delay: 0s;
}
.navbar-nav li.nav-item a:hover .dropdown-menu {
transition-delay: 0.1s;
}
.navbar-nav li.nav-item.dropdown:hover .dropdown-toggle::after {
border-top: 0;
border-bottom: 0.3em solid;
}
.navbar-nav li.nav-item.dropdown-toggle::after {
border-top: 0;
border-bottom: 0.3em solid;
}
.navbar-nav li.nav-item .dropdown-menu li {
border-bottom: 1px solid rgba(195, 195, 195, .3);
}
.navbar-nav li.nav-item .dropdown-menu li:last-child {
border-bottom: 0;
}
.navbar-nav li.nav-item .dropdown-menu a:focus,
.navbar-nav li.nav-item .dropdown-menu a {
color: var(--text-black);
background-color: transparent;
display: flex;
align-items: center;
padding: 10px 20px;
font-weight: 500;
font-size: 16px;
line-height: 125%;
text-transform: capitalize;
gap: 10px;
transition: all .4s ease-in-out;
}
.navbar-nav li.nav-item .dropdown-menu a span small {
font-size: 12px;
}
.navbar-nav li.nav-item .dropdown-menu a.active,
.navbar-nav li.nav-item .dropdown-menu a:hover {
font-weight: bold;
color: var(--primary-blue);
transition: all .4s ease-in-out;
}
.navbar-nav li.nav-item .dropdown-toggle::after {
transition: all .4s ease-in-out;
}
.navbar-nav li.nav-item a:hover .dropdown-toggle::after {
transition: all .4s ease-in-out;
transform: rotate(180deg);
}
.lang-btn:focus,
.lang-btn {
color: var(--text-black);
background-color: transparent! important;
border: none;
font-weight: 400;
font-size: 18px;
line-height: 120%;
text-align: right;
color: var(--text-black);
padding-left: 8px;
}
.btn.lang-btn:active {
background-color: transparent! important;
border-color: transparent! important;
color: var(--primary-red)! important;
}
.lang-btn:hover {
color: var(--primary-red);
}
.header_panel.sticky .back-btn {
font-size: 1rem;
}
.header_panel .site-logo {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.header_panel .back-btn {
position: absolute;
right: 0;
top: 40%;
font-weight: 600;
font-size: 20px;
line-height: 26px;
text-transform: uppercase;
text-decoration: none;
color: rgba(255, 255, 255, 1);
}
.header_panel .back-btn:hover {
color: var(--primary-red);
}
.header_panel .back-btn i {
color: var(--primary-red);
}
.main {
height: 100%;
padding: 0px;
background-color: #fff;
background-attachment: scroll;
}
.section .container-xxl {
max-width: 1640px;
padding: 0;
}
.header_panel.sticky{
position: fixed;
}
.header-right {
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
width: auto;
}
.header-middle {
}
.header-middle .search-box{
height: 48px;
border: 1px solid #ddd;
border-radius: 8px;
display: flex;
align-items: center;
overflow: hidden;
background: #fff;
}
/* Dropdown */
.header-middle .search-category{
height: 100%;
border: none;
padding: 0 12px;
border-right: 1px solid #ddd;
background: none;
font-size: 14px;
outline: none;
cursor: pointer;
max-width: 200px;
border-radius: 0;
margin: 0;
}
/* Input */
.header-middle .search-input{
height: 100%;
border: none;
padding: 0 15px;
font-size: 14px;
outline: none;
margin: 0;
min-width: 300px;
}
/* Button */
.header-middle .search-btn{
height: 100%;
padding: 0 15px;
border: none;
background: var(--primary-red);
color: #fff;
font-size: 18px;
cursor: pointer;
border-right: 1px solid var(--primary-red);
}
.header-middle .search-btn:hover{
background: #bd2529fc;
border-right: 1px solid #bd2529fc;
}
.header-right .header-action-btns {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
width: auto;
}
.lang-btn {
background-color: #00172E; /* or any color */
border: none;
}
.lang-btn:hover {
background-color: #00294F;
}
.header-section .switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
padding: 4px;
}
.header-section .switch input {
opacity: 0;
width: 0;
height: 0;
}
.header-section .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent;
transition: 0.4s;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px;
font-size: 14px;
color: #fff;
transition: 0.4s;
box-shadow: 0px 4px 4px 0px #00000012 inset;
border: 1px solid rgba(255, 255, 255, 0.5);
}
/* Sun + Moon icons inside */
.header-section .slider .sun {
transition: 0.4s;
position: relative;
z-index: 1;
height: 24px;
width: 24px;
display: flex;
justify-content: center;
align-items: center;
}
.header-section .slider .moon {
transition: 0.4s;
border-radius: 7px;
position: relative;
z-index: 1;
height: 24px;
width: 24px;
display: flex;
justify-content: center;
align-items: center;
}
/* Circle knob */
.header-section .slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: 4px;
bottom: 2px;
background-color: rgba(23, 24, 33, 1);
transition: 0.4s;
border-radius: 50%;
}
.header-section input:checked + .slider {
background-color: transparent;
transform: translate(0, 0);
}
.header-section input:checked + .slider:before {
transform: translate(26px, 0);
}
.outline-btn:focus,
.outline-btn {
border: 1px solid var(--primary-red);
font-size: 16px;
line-height: 100%;
text-align: center;
text-transform: capitalize;
color: var(--primary-red);
padding: 13px 25px;
border-radius: 7px;
text-decoration: none;
transition: all .4s ease-in-out;
display: inline-block;
background-color: transparent;
}
.details-btn:hover,
.outline-btn:hover {
background-color: var(--primary-blue);
border-color: transparent;
transition: all .4s ease-in-out;
color: #fff;
}
.details-btn {
border: 1px solid var(--primary-red);
color: var(--primary-red);
font-weight: 600;
font-size: 16px;
line-height: 100%;
text-align: center;
text-transform: capitalize;
padding: 6px 20px;
border-radius: 7px;
}
.hero-section {
/* background-image: url(../img/hero-banner.png);
background-position: top center;
background-repeat: no-repeat;
background-size: cover; */
height: 100%;
position: relative;
}
.hero-section .home-slider .home-slide {
height: max-content;
max-height: 1080px;
display: flex;
justify-content: flex-start;
align-items: center;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
padding: 170px 0;
}
/*.hero-section .home-slider .owl-item:nth-child(2n) .home-slide .slider-banner-layer{
max-width: 860px;
}*/
.slider-banner-layer {
max-width: 70%;
width: 100%;
margin-left: 0;
margin-right: auto;
}
.more-btn:hover,
.hero-btns .offer-btn:hover,
.submit-btn:hover {
background-color: var(--primary-red);
color: #ffffff;
}
.slider-banner-layer h4 {
font-weight: 500;
font-size: 26px;
line-height: 110.00000000000001%;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 15px;
text-align: left;
}
.slider-banner-layer h1 {
font-family: "Gilroy-Bold", sans-serif;
font-weight: 700;
font-size: 60px;
line-height: 110.00000000000001%;
text-transform: capitalize;
color: #ffffff;
text-align: left;
margin-bottom: 1.5rem;
}
.slider-banner-layer p {
font-weight: 500;
font-size: 20px;
line-height: 130%;
color: #ffffff;
width: 100%;
}
.more-btn,
.hero-btns .offer-btn,
.submit-btn {
background-color: var(--primary-blue);
color: #fff;
font-weight: 600;
font-size: 16px;
line-height: 100%;
text-align: center;
text-transform: capitalize;
padding: 16px 28px;
border-radius: 7px;
}
.submit-btn{
width: revert-layer;
}
.hero-btns a {
background-color: var(--primary-red) !important;
}
.hero-btns a:hover {
background-color: #bd2529fc !important;
color: #fff !important;
}
.banner-title {
margin: 0 auto 12px;
}
.top-banner-section p {
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: rgba(252, 252, 253, 1);
text-align: left;
}
.book-now-box {
background-color: rgba(255, 255, 255, 1);
border-radius: 7px;
padding: 30px 30px 20px;
max-width: 560px;
width: 100%;
}
.book-now-box .nav-pills {
justify-content: center;
align-items: center;
width: 100%;
margin: 0 auto 25px;
border-radius: 7px;
flex-wrap: nowrap;
}
.book-now-box .nav-pills .nav-link {
font-weight: 500;
font-size: 16px;
line-height: 100%;
text-align: center;
color: var(--text-black);
padding: 11px 20px;
width: 250px;
border-radius: 7px;
border: 1px solid var(--text-black);
}
.book-now-box .nav-pills .nav-item:first-child .nav-link {
border-radius: 7px 0 0 7px;
border-right: 0;
}
.book-now-box .nav-pills .nav-item:last-child .nav-link {
border-radius: 0 7px 7px 0;
border-left: 0;
}
.book-now-box .nav-pills .nav-link.active {
background-color: var(--primary-red);
color: var(--text-black);
border-color: transparent;
border-radius: 7px;
}
.stats {
display: flex;
}
/* .stat-box::before {
content: '';
background: rgba(255, 255, 255, 1);
width: 1px;
height: 70px;
} */
.stat-box {
text-align: center;
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 1rem;
padding: 40px 0px;
flex: 1 0 auto;
border-bottom: 1px solid rgba(195, 195, 195, 1);
}
.counting-box {
text-align: left;
}
.count-state .col:nth-child(n+3),
.count-state .col:last-child .stat-box {
padding-bottom: 0;
border-bottom: 0;
}
.stat-box i {
font-size: 40px;
margin-bottom: 10px;
display: block;
}
.stat-number {
font-weight: 500;
font-size: 56px;
line-height: 100%;
color: var(--text-black);
margin-bottom: 5px;
}
.stat-label {
font-weight: 400;
font-size: 16px;
line-height: 125%;
color: var(--text-main);
}
/* === About Section ==== */
/* .section,
.about-section {
padding: 50px 1rem;
} */
.about-section {
background-color: rgba(247, 248, 250, 1);
height: 100%;
padding: 100px 1rem;
}
.left-sata-content h4 {
max-width: 416px;
width: 100%;
}
.left-sata-content p {
padding-right: 1rem;
}
.sata-content h4 {
font-weight: 700;
font-size: 32px;
line-height: 130%;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 15px;
}
.sata-content p {
font-weight: 500;
font-size: 16px;
line-height: 160%;
color: var(--text-main);
margin-bottom: 1rem;
}
.sata-content p:last-child {
margin-bottom: 0;
}
.sata-content ul {
padding: 0 1rem 0 20px;
margin: 0;
}
.sata-content ul li {
font-weight: 500;
font-size: 16px;
line-height: 160%;
color: var(--text-main);
margin-bottom: 10px;
}
.sata-content ul li:last-child {
margin-bottom: 0;
}
.about-section .right-content .card-img {
position: relative;
height: 100%;
width: 100%;
}
.about-section .right-content .card-img > img {
width: 100%;
border-radius: 7px;
}
.about-section .right-content .card-img .overlay-img {
position: absolute;
right: 20px;
bottom: -20px;
}
.about-section .left-content .section-title {
margin-bottom: 30px;
}
.about-section .left-content .section-title h3 {
text-align: left;
}
.about-section .left-content .section-title h4 {
font-weight: 600;
font-size: 36px;
line-height: 130%;
text-transform: capitalize;
color: var(--text-black);
}
.about-section .left-content .section-title p {
text-align: left;
margin-bottom: 40px;
}
.left-content .about-company-info {
margin-bottom: 30px;
}
.left-content .about-card {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
width: 100%;
}
.left-content .about-card-img {
border-radius: 7px;
overflow: hidden;
max-width: 80px;
height: 100%;
width: 100%;
}
.left-content .about-card-img img {
width: 100%;
}
.left-content .about-card-body {
width: calc(100% - 100px);
}
.left-content .about-card-body p {
font-weight: 400;
font-size: 16px;
line-height: 160%;
color: var(--text-main);
margin-bottom: 0;
}
/* ===== Service Section ========= */
/* .service-chose-section {
padding: 100px 1rem;
background-image: url(../img/why_choose_us.png);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
} */
.service-section {
padding: 70px 1rem;
background-color: #fff;
position: relative;
}
.service-section.have_icon {
padding: 80px 1rem 50px 1rem;
background-color: #fff;
border-radius: 7px 7px 0 0;
}
.category-card-box {
border-radius: 30px 0 30px 0;
border: none;
height: 100%;
overflow: hidden;
transition: all .4s ease-in-out;
}
.category-card-box .card-img {
transform: scale(1);
transition: all .4s ease-in-out;
border-radius: 30px 0 30px 0;
overflow: hidden;
}
.category-card-box:hover .card-img {
transform: scale(1.1);
transition: all .4s ease-in-out;
}
.category-card-box .card-img-overlay {
padding: 0;
}
.category-card-box .overlay-content-box {
/* background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 18.91%, rgba(0, 0, 0, 0) 100%); */
background-image: url(../img/overlay-bg.png);
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
padding: 20px 25px;
border-radius: 30px 0 30px 0;
/* position: absolute;
bottom: 0; */
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}
.hair_beauty_cat .card-img-overlay{
position: relative !important;
margin: 5px 0 0 0;
}
.hair_beauty_cat .category-card-box{
background: var(--bg-light) !important;
text-align: center;
/*height: auto;*/
padding: 12px 0 0px 0;
display: grid;
}
.hair_beauty_cat .overlay-content-box{
background-image: unset !important;
background: var(--bg-light) !important;
display: inline-flex;
text-align: left;
}
.category-card-box .overlay-content-box h4 {
font-weight: 600;
font-size: 22px;
line-height: 26px;
color: rgba(255, 255, 255, 1);
margin-bottom: 10px;
width: 100%;
display: block;
}
.category-card-box .overlay-content-box p {
font-weight: 400;
font-size: 16px;
line-height: 130%;
color: rgba(252, 252, 253, 1);
margin-bottom: 0;
/*max-height: 48px;*/
height: max-content;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
}
.hair_beauty_cat .category-card-box .overlay-content-box h4,
.hair_beauty_cat .category-card-box .overlay-content-box p,
.hair_beauty_cat .category-card-box .overlay-content-box a {
color: var(--text-black);
text-decoration: none;
}
.hair_beauty_cat .category-card-box .overlay-content-box a:hover {
color: var(--primary-red);
font-size: bolder;
}
.industry-details-card-box {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 30px;
flex-direction: column;
width: 100%;
height: 100%;
border-radius: 0;
margin-bottom: 0px;
padding-bottom: 30px;
}
.industry-box > .row > .col-12:last-child > .industry-details-card-box {
padding-bottom: 0;
}
.industry-details-card-box .industry-img {
border-radius: 7px;
width: 100%;
height: auto;
overflow: hidden;
}
.industry-card-body h4 {
font-weight: 600;
font-size: 24px;
line-height: 140%;
text-transform: uppercase;
color: var(--text-black);
margin-bottom: 12px;
}
.industry-card-body p {
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: var(--text-main);
margin-bottom: 0;
}
.fly-img-box {
position: absolute;
bottom: 20px;
left: 0;
}
/* ====== featured-section ===== */
.featured-section {
padding: 50px 1rem 100px;
}
.top-title,
.featured-section .section-title {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
position: relative;
}
.overlay-img-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
width: 100%;
}
.opportunities-widget-box .slide-item .col .card {
background: #111;
border-radius: 7px;
overflow: hidden;
text-align: left;
padding-bottom: 15px;
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(35.83000183105469px);
flex-direction: row;
padding: 20px;
gap: 20px;
margin-bottom: 1rem;
}
.product-single-details .rating,
.overlay-img-content .rating {
background-color: rgba(59, 153, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
border-radius: 7px;
padding: 3px 10px;
font-weight: 600;
font-size: 12px;
line-height: 140%;
letter-spacing: -0.5px;
color: rgba(255, 255, 255, 1);
}
.opportunities-widget-box .slide-item .col .card:last-child {
margin-bottom: 0;
}
.opportunities-widget-box .card .card-img {
max-width: 325px;
width: 100%;
height: auto;
display: block;
border-radius: 7px;
position: relative;
overflow: hidden;
}
.opportunities-widget-box .card .card-img img {
height: 100%;
width: 100%;
object-fit: cover;
}
.opportunities-widget-box .card .card-img .card-img-overlay {
padding: 20px;
}
.opportunities-widget-box .card-content {
padding: 0;
}
.opportunities-widget-box .card-content h4 {
font-weight: 600;
font-size: 24px;
line-height: 26px;
color: rgba(255, 255, 255, 1);
margin-bottom: 7px;
}
.opportunities-widget-box .card-content .location {
font-weight: 500;
font-size: 14px;
line-height: 150%;
color: rgba(255, 255, 255, 1);
display: flex;
justify-content: flex-start;
align-items: center;
gap: 6px;
margin-bottom: 1rem;
}
.opportunities-widget-box .card-content p {
font-weight: 500;
font-size: 16px;
line-height: 150%;
color: rgba(255, 255, 255, 1);
margin-bottom: 13px;
}
.opportunities-widget-box .card-content .investment {
font-weight: 500;
font-size: 16px;
line-height: 125%;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
margin-bottom: 0;
}
.opportunities-widget-box .card-content .investment span {
font-weight: 700;
font-size: 24px;
}
.overlay-img-content .tag {
display: inline-block;
background: rgba(245, 193, 86, .9);
padding: 5px 14px;
font-weight: 600;
font-size: 12px;
line-height: 100%;
text-align: center;
text-transform: uppercase;
border-radius: 7px;
color: rgba(0, 0, 0, 1);
}
.card-btn {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
width: 100%;
margin-top: 24px;
}
.card-btn .btn {
padding: 10px 30px;
font-weight: 600;
font-size: 14px;
line-height: 100%;
text-align: center;
color: rgba(0, 0, 0, 1);
}
.card-btn small {
font-weight: 600;
font-size: 12px;
line-height: 150%;
color: rgba(255, 255, 255, 1);
}
.view-btn {
background: transparent;
border: 0;
color: var(--primary-red);
font-family: "Gilroy-Light";
font-weight: 600;
font-size: 16px;
line-height: 100%;
text-transform: capitalize;
position: absolute;
top: 5px;
right: 105px;
}
.view-btn:active,
.view-btn:hover {
color: var(--primary-blue);
background-color: transparent! important;
}
.home-slider.owl-carousel.owl-theme .owl-nav.disabled {
display: none;
}
.owl-carousel.owl-theme .owl-nav,
.owl-carousel.owl-theme .owl-nav.disabled,
.team-cursol-box .owl-carousel .owl-nav,
.opportunities-widget-box .owl-carousel .owl-nav {
/* display: block; */
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
position: absolute;
top: -76px;
right: 0;
margin-top: 0;
line-height: 0
background: #fff;
}
.owl-carousel.owl-theme .owl-nav button,
.owl-carousel.owl-theme .owl-nav.disabled button,
.team-cursol-box .owl-carousel .owl-nav button,
.opportunities-widget-box .owl-carousel .owl-nav button {
transform: none;
border: 1px solid rgba(195, 195, 195, 1);
background-color: transparent;
border-radius: 7px;
width: 42px;
height: 42px;
color: rgba(15, 15, 15, 1);
opacity: 1;
transition: all .4s ease-in-out;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
}
.owl-theme .owl-nav [class*=owl-]:hover {
background-color: var(--primary-red);
}
.owl-theme .owl-nav .disabled:hover {
background-color: #fff;
color: rgba(15, 15, 15, 1);
cursor: no-drop;
}
.owl-carousel.owl-theme .owl-nav [class*=owl-]:not(.disabled):hover,
.owl-carousel.owl-theme .owl-nav.disabled [class*=owl-]:not(.disabled):hover,
.team-cursol-box .owl-theme .owl-nav [class*=owl-]:not(.disabled):hover,
.opportunities-widget-box .owl-theme .owl-nav [class*=owl-]:not(.disabled):hover,
.team-cursol-box .owl-carousel .owl-nav button:hover,
.opportunities-widget-box .owl-carousel .owl-nav button:hover {
background: var(--primary-red);
opacity: 1;
color: #ffffff;
border-color: transparent;
transition: all .2s ease-in-out;
}
.owl-carousel.owl-theme .owl-nav button.owl-prev,
.owl-carousel.owl-theme .owl-nav.disabled button.owl-prev,
.team-cursol-box .owl-carousel .owl-nav button.owl-prev,
.opportunities-widget-box .owl-carousel .owl-nav button.owl-prev {
left: auto;
right: 70px;
}
.owl-carousel.owl-theme .owl-nav button.owl-next,
.owl-carousel.owl-theme .owl-nav.disabled button.owl-next,
.team-cursol-box .owl-carousel .owl-nav button.owl-next,
.opportunities-widget-box .owl-carousel .owl-nav button.owl-next {
right: 0px;
}
.owl-carousel.owl-theme .owl-nav button.owl-next.disabled,
.owl-carousel.owl-theme .owl-nav button.owl-prev.disabled {
opacity: 0.5;
}
.owl-carousel.owl-theme .owl-nav button.owl-prev > span,
.owl-carousel.owl-theme .owl-nav.disabled button.owl-prev > span,
.team-cursol-box .owl-carousel .owl-nav button.owl-prev > span,
.opportunities-widget-box .owl-carousel .owl-nav button.owl-prev > span{
font-size: 30px;
}
.owl-carousel.owl-theme .owl-nav button.owl-next > span,
.owl-carousel.owl-theme .owl-nav.disabled button.owl-next > span,
.team-cursol-box .owl-carousel .owl-nav button.owl-next > span,
.opportunities-widget-box .owl-carousel .owl-nav button.owl-next > span{
font-size: 30px;
}
.owl-theme .owl-dots {
line-height: 1;
text-align: center;
-webkit-tap-highlight-color: transparent
}
.owl-theme .owl-dots .owl-dot {
display: inline-block;
zoom: 1;
}
.owl-theme .owl-dots .owl-dot span {
position: relative;
margin: 2px 2px;
background: transparent;
display: block;
-webkit-backface-visibility: visible;
backface-visibility: visible;
transition: all 0.3s ease;
border: 2px solid #ffffff;
border-radius: 50%;
}
.owl-theme .owl-dots .owl-dot span:before {
content: "";
display: block;
width: 0.7rem;
height: 0.7rem;
position: absolute;
left: 15%;
top: 17%;
background-color: rgba(255, 255, 255, 1);
opacity: 0;
visibility: hidden;
transform: scale(0);
transition: all 0.3s;
border-radius: 50%
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
border-color: var(--primary-blue);
background: transparent
}
.owl-theme .owl-dots .owl-dot.active span:before {
opacity: 1;
visibility: visible;
transform: scale(1)
}
.hero-section .owl-theme .owl-dots .owl-dot.active span {
border-color: var(--primary-red);
border-width: 4px;
}
.hero-section .owl-theme .owl-dots .owl-dot span:before {
top: 5%;
left: 5%;
}
.hero-section .owl-theme .owl-dots {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 25px;
display: flex;
gap: 5px;
}
.hero-section .owl-theme .owl-dots button {
display: block;
}
.owl-theme .owl-nav.disabled+.owl-dots {
margin-top: 0;
}
.owl-carousel .owl-dots .owl-dot span {
width: 16px;
height: 16px;
border-width: 2px
}
.owl-carousel .owl-dots .owl-dot span:before {
margin: 0;
width: 8px;
height: 8px;
transform: translate(-15%, -15%)
}
/* ======= team-section ========== */
.team-section {
padding: 100px 1rem;
background-image: url(../img/MeetOurTeam_bg.png);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
.team-section .section-title {
max-width: 100%;
width: 100%;
margin: 0 auto 40px;
}
.team-member-details {
margin-bottom: 100px;
position: relative;
}
.team-member-details::before {
content: '';
background-image: url(../img/wave.png);
background-position: center;
background-repeat: no-repeat;
background-size: auto;
height: 110px;
width: 1385px;
margin: 0 auto;
position: absolute;
top: 6%;
left: 0;
right: 0;
}
.widget-img {
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(35.83000183105469px);
border-radius: 7px;
display: flex;
justify-content: center;
align-items: center;
max-width: 140px;
width: 100%;
height: 140px;
overflow: hidden;
margin: 0 auto 1rem;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
animation: pulse 4s infinite;
}
.steps {
display: flex;
justify-content: space-between;
position: relative;
z-index: 1;
}
.working-card {
width: 22%;
text-align: center;
position: relative;
z-index: 1;
}
/* Sequential delays (match wave duration: 4s) */
.working-card:nth-child(1) .widget-img { animation-delay: 0s; }
.working-card:nth-child(2) .widget-img { animation-delay: 1s; }
.working-card:nth-child(3) .widget-img { animation-delay: 2s; }
.working-card:nth-child(4) .widget-img { animation-delay: 3s; }
/* Pulse keyframes */
@keyframes pulse {
0% { transform: scale(1); box-shadow: 0 0 5px rgba(0,212,255,0.5); }
10% { transform: scale(1.1); box-shadow: 0 0 25px rgba(255,180,0,0.9); }
20% { transform: scale(1.1); box-shadow: 0 0 25px rgba(255,180,0,0.9); }
30% { transform: scale(1); box-shadow: 0 0 5px rgba(0,212,255,0.5); }
100% { transform: scale(1); box-shadow: 0 0 5px rgba(0,212,255,0.5); }
}
.widget-card-body span {
font-weight: 600;
font-size: 16px;
line-height: 26px;
text-align: center;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
margin-bottom: 10px;
display: block;
}
.widget-card-body h5 {
font-weight: 600;
font-size: 24px;
line-height: 26px;
text-align: center;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
margin-bottom: 10px;
}
.widget-card-body p {
font-weight: 400;
font-size: 16px;
line-height: 125%;
text-align: center;
color: rgba(255, 255, 255, 1);
max-width: 224px;
width: 100%;
margin: 0 auto;
}
.team-card {
background-color: #fff;
border-width: 1px;
border-style: solid;
border-color: rgba(195, 195, 195, 1);
backdrop-filter: blur(35.83000183105469px);
border-radius: 7px;
padding: 20px;
height: 100%;
margin-bottom: 0;
}
.team-card .team-img {
position: relative;
border-radius: 7px;
width: 100%;
height: 100%;
overflow: hidden;
}
.team-card .team-img img {
transition: all .4s ease-in-out;
transform: scale(1);
}
.team-card:hover .team-img img {
transform: scale(1.1);
transition: all .4s ease-in-out;
}
.team-card-body {
padding: 1rem 0 0;
}
.team-card-body p {
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: var(--text-main);
margin-bottom: 0;
}
.author-info-box h4 {
font-weight: 600;
font-size: 24px;
line-height: 26px;
text-transform: uppercase;
color: var(--text-black);
margin-bottom: 5px;
}
.author-info-box span {
font-weight: 500;
font-size: 16px;
line-height: 150%;
color: var(--text-black);
margin-bottom: 5px;
display: block;
}
/* ===== upcoming-section ==== */
.upcoming-service-widget ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
margin-bottom: 0;
}
.upcoming-service-widget ul.list-items {
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
}
/* ==== interest-Section ==== */
.interest-box .email-form {
margin: 0 auto;
}
.interest-box .input-group .form-control {
border-radius: 7px 0 0 7px !important;
border: 0;
padding: 16px 5px;
font-weight: 500;
font-size: 14px;
line-height: 100%;
margin: 0!important;
color: var(--text-main);
}
.interest-box .input-group {
border-radius: 7px;
overflow: hidden;
background-color: #fff;
}
.input-group .input-group-text,
.interest-box .input-group .input-group-text {
border-radius: 0;
background-color: transparent;
border: none;
padding: 10px 4px 10px 20px;
color: var(--text-main);
line-height: 1;
}
.interest-box .input-group .btn {
border-radius: 0 !important;
/* border-top-right-radius: 100px;
border-bottom-right-radius: 100px; */
background-color: var(--primary-red);
color: rgba(255, 255, 255, 1);
font-weight: 600;
font-size: 15px;
line-height: 100%;
text-align: center;
padding: 1rem 40px;
transition: all .4s ease-in-out;
}
.interest-box .input-group .btn:hover {
background-color: #bd2529fc;
transition: all .4s ease-in-out;
}
.interest-box .input-group .form-control:focus {
box-shadow: none;
margin-left: 0! important;
}
/* ========= reward-section ======= */
.reward-section {
padding: 100px 1rem 50px;
background-image: url(../img/benifit-bg.png);
background-repeat: no-repeat;
background-position: top center;
background-size: auto;
height: 100%;
border-radius: 7px 7px 0 0;
}
.reward-member-details {
padding-bottom: 50px;
}
.benifit-img-box {
border-radius: 7px;
overflow: hidden;
height: 100%;
width: 100%;
box-shadow: 0px 14px 54px 0px rgba(0, 0, 0, 0.1);
}
.benifit-card-box {
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(35.83000183105469px);
padding: 20px 20px 25px;
height: 100%;
border-radius: 7px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
}
.benifit-card-box img {
max-width: 60px;
height: auto;
width: auto;
}
.benifit-card-box .benifit-card-body h4 {
font-weight: 600;
font-size: 24px;
line-height: 26px;
color: rgba(255, 255, 255, 1);
margin-bottom: 10px;
text-align: left;
}
.benifit-card-box .benifit-card-body p {
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: rgba(252, 252, 253, 1);
margin-bottom: 0;
text-align: left;
height: 72px;
overflow: hidden;
}
.investor-box {
/* background-image: url(../img/bg-1.png), url(../img/left-circle.png), url(../img/right-circle.png); */
background-image: url(../img/bg-1.png);
background-position: top center;
background-size: auto;
background-repeat: no-repeat;
padding: 70px 20px;
border-radius: 7px;
}
.investor-box h3 {
font-weight: 600;
font-size: 48px;
line-height: 1.2;
text-align: center;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
max-width: 1064px;
width: 100%;
margin: 0 auto;
}
.investor-box h3 span {
text-transform: uppercase;
}
.benifits-details-box {
padding-bottom: 100px;
}
.benifits-details-box .g-5 {
--bs-gutter-y: 2.5rem;
--bs-gutter-x: 2.5rem;
}
.benifits-details-box .section-title p,
.benifits-details-box .section-title h3 {
margin-bottom: 20px;
text-align: left;
}
.benifits-details-box .section-title p:last-child {
margin-bottom: 0;
}
.benifit-items-box .benifit-card-box {
flex-direction: column;
gap: 16px;
width: 100%;
height: 100%;
padding: 20px;
}
.benifit-card-header {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 20px;
width: 100%;
}
.benifit-img-icon {
width: 83px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(35.83000183105469px);
border-radius: 7px;
}
/* ====== coverage-section ===== */
.coverage-section {
background-color: #fff;
padding: 100px 1rem;
}
.coverage-section .section-title {
margin-bottom: 60px;
}
.coverage-section .section-title h3 {
max-width: 240px;
width: 100%;
text-align: left;
margin-bottom: 25px;
}
.coverage-section .section-title p {
color: var(--text-main);
text-align: left;
}
/* ===== achievemnts-section ====== */
.achievemnts-section {
background-image: url(../img/banner-img4.png);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 1rem 0;
}
.achievemnts-section .section-title h3 {
color: #fff;
}
.achievemnts-section .industry-widget-box {
margin-bottom: 40px;
}
.achievemnts-section .left-content h4 {
font-weight: 600;
font-size: 45px;
line-height: 130%;
text-transform: capitalize;
color: #fff;
margin-bottom: 20px;
}
.achievemnts-section .left-content ul.achievemnts-list li {
color: rgba(255, 255, 255, 1);
}
.achievemnts-section .outline-btn {
color: rgba(228, 34, 34, 1);
border-color: rgba(228, 34, 34, 1);
}
.achievemnts-section .outline-btn:hover {
color: #fff;
}
.achievemnts-card {
/* min-height: 317px; */
height: 100%;
max-height: 320px;
border-radius: 7px;
}
.achievemnts-card .card-img {
position: relative;
border-radius: 7px;
overflow: hidden;
width: 100%;
object-fit: cover;
height: 100%;
}
.achievemnts-card .overlay-content-box h5 {
font-weight: 600;
font-size: 24px;
line-height: 28px;
text-transform: uppercase;
color: rgba(255, 255, 255, 1);
}
.achievemnts-card .overlay-content-box p {
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: rgba(255, 255, 255, 1);
margin-bottom: 0;
}
.achievemnts-card .hover-content h5 {
color: var(--primary-red);
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
width: 100%;
}
.achievemnts-card .hover-content,
.achievemnts-card:hover .overlay-img-content {
opacity: 0;
visibility: hidden;
display: none;
transition: all .4s ease-in-out;
}
.achievemnts-card:hover .hover-content {
opacity: 1;
visibility: visible;
display: block;
transition: all .4s ease-in-out;
}
/* ====== mirsal-section ===== */
.artical-section.mirsal-section {
padding: 100px 1rem 50px;
}
.section-content-box .left-content h4 {
font-weight: 600;
font-size: 45px;
line-height: 130%;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 20px;
}
.section .left-content h4 span.c-E99C0E,
.c-E99C0E {
color: #E99C0E;
}
.section .left-content h4 span.c-E42222,
.c-E42222 {
color: #E42222;
}
.left-content p {
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: var(--text-main);
margin-bottom: 30px;
}
.left-content ul {
list-style-type: none;
padding: 0 0 0 30px;
margin: 0 0 40px;
}
.left-content ul li {
font-weight: 500;
font-size: 24px;
line-height: 100%;
color: var(--text-black);
margin-bottom: 20px;
list-style-image: url(../img/icons/checkMark.png);
}
.left-content ul li:last-child {
margin-bottom: 0;
}
/* ===== booking-section ======= */
.booking-section {
background-image: url(../img/banner-img6.png);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
padding: 75px 1rem;
}
.booking-section .section-title {
margin-bottom: 0;
}
.booking-section .section-title h3 {
margin-bottom: 18px;
}
.booking-section .section-title h3 span {
color: rgba(228, 34, 34, 1);
}
.booking-section .section-title p {
font-weight: 400;
font-size: 16px;
line-height: 140%;
text-align: center;
color: var(--text-black);
margin-bottom: 0;
}
.booking-section .section-title a:hover {
background-color: var(--text-black);
color: #fff;
}
/* ===== Artical-section ======== */
.artical-section {
padding: 100px 1rem;
background-color: rgba(255, 255, 255, 1);
}
.artical-details-section{
padding: 100px 1rem;
}
.article-card {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 15px;
width: 100%;
height: 100%;
margin-bottom: 0;
text-decoration: none;
}
.article-card-img {
width: 100%;
overflow: hidden;
}
.article-card-img img {
width: 100%;
}
.border-radius-curved {
border-radius: 30px 0 30px 0;
}
.artical-body span {
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: var(--text-main);
margin-bottom: 10px;
display: block;
}
.artical-body h4 {
font-weight: 600;
font-size: 22px;
line-height: 140%;
color: var(--text-black);
margin-bottom: 10px;
text-transform: uppercase;
}
.artical-body h4 > a {
color: var(--text-black);
text-decoration: none;
display: inline;
}
.artical-body h4 > a:hover {
color: var(--primary-red);
}
.artical-body h2 {
font-weight: 600;
font-size: 40px;
line-height: 140%;
text-transform: uppercase;
color: var(--text-black);
margin-bottom: 10px;
text-align: left;
}
.related-blog .article-card:hover .artical-body h4 {
color: var(--primary-red);
}
.artical-body p {
font-size: 16px;
line-height: 1.5;
color: var(--text-main);
margin-bottom: 0;
}
.inner-artical-section .artical-body p {
height: auto;
overflow: visible;
max-height: 100%;
font-weight: 500;
}
.inner-artical-section .artical-body h4 {
height: auto;
/*max-height: 67px;*/
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2; /* Limits the content to 2 lines */
text-overflow: ellipsis;
}
.artical-body a {
margin-top: 30px;
display: inline-block;
}
.artical-list h5 {
font-weight: 600;
font-size: 20px;
line-height: 1.2;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 10px;
}
.artical-list ul {
padding: 0 0 0 20px;
margin: 0;
}
.artical-list ul li {
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: var(--text-main);
margin-bottom: 10px;
}
.artical-list ul li:last-child {
margin-bottom: 0;
}
.blog-details-wrapper-box{
}
.blog-details-left-box{
}
.blog_details_title{
font-size: 36px;
font-weight: 600;
line-height: 42px;
}
.blog_details_title_wrapper .right_side_anchor {
width: 60px;
}
.blog_details_title_wrapper .right_side_anchor a{
margin-top: 10px;
}
.blog-details-right-box{
padding: 0 0 20px 10px;
}
.blog_content_text{
color: var(--text-main);
}
.blog_content_text p{
margin: 0 0 10px 0;
}
.blog_content_text a{
color: var(--primary-blue);
}
.blog_content_text a:hover{
color: #EA6917;
}
.blog_content_text ul,
.blog_content_text ol{
margin: 20px 0 20px 0;
}
.blog_content_text ul li,
.blog_content_text ol li{
margin: 10px 0;
color: var(--text-main);
}
.blog-details-right-box .destination_option_blog_left{
border-bottom: 1px solid;
border-color: var(--border-color);
margin-bottom: 25px;
padding-bottom: 25px;
}
.latest_blog_sidebar h3{
}
.blog_details_side_latest_blog{
display: grid;
gap: 20px;
}
.blog_details_side_latest_blog .article-card{
border: 0;
padding: 0;
margin: 0;
}
.blog_details_side_latest_blog .article-card-img{
position: relative;
}
.blog_details_side_latest_blog .article-card-img::before {
content: "";
position: absolute;
inset: 0;
/* background: rgba(0,0,0,0.4);*/ /* black overlay with opacity */
background: linear-gradient(
to top, /* bottom → top */
rgba(0,0,0,0.8) 0%, /* bottom = dark */
rgba(0,0,0,0) 100% /* top = transparent */
);
z-index: 1;
border-radius: inherit;
}
.blog_details_side_latest_blog .article-card-img{
/*max-height: 180px;*/
}
.blog_details_side_latest_blog .artical-body{
position: absolute;
bottom: 5px;
left: 15px;
color: #fff;
right: 15px;
z-index: 2;
}
.blog_details_side_latest_blog .blog_date_view,
.blog_details_side_latest_blog .blog_date_view span{
color: #fff;
font-weight: 500;
font-size: 14px;
}
.blog_details_side_latest_blog h4{
color: #fff;
font-size: 16px;
height: auto;
line-height: 22px;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
.blog_details_side_latest_blog h4 a{
color: #fff;
font-size: 16px;
line-height: 22px;
FONT-WEIGHT: 600;
}
.blog_details_side_latest_blog h4 a:hover{
color: #EA6915;
}
/* ===== FAQ ===== */
.faq-section {
padding: 50px 1rem 0;
}
.faq-content-box {
max-width: 1364px;
width: 100%;
margin: 0 auto;
}
.faq-content-box .accordion-item {
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(35.83000183105469px);
border-radius: 7px! important;
padding: 20px 30px;
margin-bottom: 1rem;
}
.faq-content-box .accordion-item:last-child {
margin-bottom: 0;
}
/*.accordion-item .accordion-button:focus,
.accordion-item .accordion-button,
.faq-content-box .accordion-item .accordion-button:focus,
.faq-content-box .accordion-item .accordion-button {
background: transparent;
box-shadow: none;
outline: 0;
font-weight: 600;
font-size: 24px;
line-height: 26px;
padding: 0;
color: rgba(255, 255, 255, 1);
}*/
/*.product-accordion-box .accordion-item .accordion-button:not(.collapsed),
.faq-content-box .accordion-item .accordion-button:not(.collapsed) {
background: transparent;
box-shadow: none;
color: var(--primary-red);
}
.product-accordion-box .accordion-item .accordion-button::after,
.faq-content-box .accordion-item .accordion-button::after {
content: '\F4FE';
background-image: none;
font-family:'bootstrap-icons';
}
.product-accordion-box .accordion-item .accordion-button:not(.collapsed)::after,
.faq-content-box .accordion-item .accordion-button:not(.collapsed)::after {
content: '\F2EA';
background-image: none;
transform: none;
}
.faq-content-box .accordion-item .accordion-body {
padding: 12px 0 0;
}
.accordion-item .accordion-body p,
.faq-content-box .accordion-item .accordion-body p {
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: rgba(255, 255, 255, 1);
margin-bottom: 0;
}*/
/* === Download Section ==== */
.download-section {
padding: 100px 1rem;
}
.download-box {
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(36px);
border-radius: 7px;
padding: 1rem 50px 0;
/* background-image: url(../img/mobilebgroyex.png);
background-position: top center;
background-repeat: no-repeat;
background-size: cover; */
}
.action-btns .download-btns,
.action-btns {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 15px;
width: 100%;
}
.action-btns span {
font-weight: 400;
font-size: 14px;
line-height: 125%;
color: rgba(255, 255, 255, 1);
}
.action-btns a {
text-decoration: none;
}
.mobile-app-img {
margin-top: -60px;
}
/* ===== announcing-section ====== */
.announcing-section {
padding: 50px 1rem 100px;
}
.announcing-section .section-title {
max-width: 970px;
width: 100%;
margin: 0 auto;
text-align: center;
}
.announcing-section .section-title h3 {
margin-bottom: 20px;
}
.announcing-section .section-title .upcomming-btn {
margin-top: 40px;
}
/* === company-section ===== */
.company-section {
background-color: rgba(247, 248, 250, 1);
padding: 25px 1rem;
}
.box-title h4 {
font-weight: 600;
font-size: 56px;
line-height: 110.00000000000001%;
text-transform: uppercase;
color: var(--text-black);
}
.brands-slider img {
max-width: 195px;
width: 100%;
margin: 0 auto;
}
/* ==== Footer Section ====== */
.footer-section {
/*background-color: rgba(1, 3, 38, 1);*/
padding: 0;
position: relative;
}
.footer-section::before{
content: "";
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 10px;
background-color: var(--primary-red);
border-radius: 10px;
}
.footer-section-top {
background-image: url(../img/footer-banner.png);
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
background-color: #040922;
padding: 0 1rem;
border-bottom: 1px solid #2A2E43;
}
.footer-section-bottom {
background-color: #040922;
padding: 0 1rem;
}
.footer-section hr {
border-top: 1px solid rgba(255, 255, 255, 0.2);
margin: 0;
}
.footer-top {
width: 100%;
padding: 100px 0 30px;
}
.footer-menu {
width: 100%;
}
.footer-menu h4 {
background-image: url(../img/icons/red_arrow2.png);
background-repeat: no-repeat;
background-position: left top 2px;
background-size: 28px;
padding-left: 35px;
font-weight: 600;
font-size: 20px;
line-height: 100%;
text-transform: uppercase;
color: rgba(255, 255, 255, 1);
margin-bottom: 20px;
}
.footer-menu ul {
padding: 0;
margin: 0;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
margin-bottom: 0;
list-style-type: none;
}
.footer-menu ul li {
margin-bottom: 15px;
}
.footer-menu ul li a {
font-weight: 500;
font-size: 16px;
line-height: 20px;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
text-decoration: none;
transform: translateX(0%);
transition: transform 0.2s ease, color 0.2s ease;
display: inline-block;
}
.footer-menu ul li a.active,
.footer-menu ul li a:hover {
color: var(--primary-red);
transform: translateX(5%);
transition: transform 0.2s ease, color 0.2s ease;
}
.footer-info-box {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
width: 100%;
margin-bottom: 25px;
}
.footer-info-box i {
color: #fff;
font-size: 20px;
line-height: 1;
}
.footer-info-box:last-child {
margin-bottom: 0;
}
.footer-info-box .info-box-body span {
font-weight: 400;
font-size: 16px;
line-height: 1;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
display: block;
margin-bottom: 5px;
}
.footer-info-box .info-box-body p{
font-weight: 600;
font-size: 16px;
line-height: 22px;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
margin-bottom: 0;
text-decoration: none;
word-break: break-all;
}
.footer-info-box .info-box-body.call_us p{
font-weight: 700;
font-size: 24px;
line-height: 30px;
letter-spacing: 1px;
}
.footer-info-box .info-box-body a {
font-weight: 600;
font-size: 16px;
line-height: 28px;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
margin-bottom: 0;
text-decoration: none;
word-break: break-all;
}
.footer-info-box .info-box-body a:hover {
color: var(--primary-red);
}
/*.footer-section .container-xxl {
max-width: 1640px;
padding: 0;
}*/
.middel-content p a {
color: rgba(92, 225, 230, 1);
text-decoration: underline;
display: inline-block;
}
.middel-content p span {
font-weight: 600;
}
.footer-section p {
font-weight: 400;
font-size: 16px;
line-height: 1.2;
color: rgba(255, 255, 255, 1);
margin: 0;
}
.footer-middle {
position: relative;
padding: 30px 0 60px 0;
}
.support-btn {
position: absolute;
right: 20px;
display: inline-block;
bottom: 100px;
z-index: 99;
}
.support-btn img {
transform: scale(1) rotate(0deg);
transition: all .4s ease-in-out;
}
.support-btn:hover img {
transform: scale(1.1) rotate(5deg);
transition: all .4s ease-in-out;
}
.footer-middle .interest-box {
background: none;
backdrop-filter: none;
border: none;
max-width: 580px;
width: 100%;
margin: 0 auto;
}
.footer-middle h4 {
font-weight: 600;
font-size: 28px;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
color: rgba(255, 255, 255, 1);
margin-bottom: 10px;
}
.footer-middle p {
font-weight: 400;
font-size: 16px;
line-height: 1.2;
text-align: center;
text-transform: capitalize;
color: rgb(255 255 255 / 75%);
margin-bottom: 20px;
}
.footer-bottom {
padding: 27px 0;
}
.copywright span {
font-weight: 600;
color: var(--primary-red);
}
.cradit-info a {
color: #ffffff;
text-decoration: none;
}
.middel-content p a:hover,
.cradit-info a:hover {
color: var(--primary-red);
}
.social-icons-box {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
width: 100%;
}
.social-icons-box a {
background-color: rgba(255, 255, 255, 1);
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
transition: all .3s ease-in-out;
}
.social-icons-box a:hover {
transform: scale(0.8);
}
.header-top-img {
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 1rem;
width: 100%;
}
.right-img {
max-width: 590px;
width: 100%;
}
/* ===== Login ======= */
.login-content-box .overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: none;
z-index: 1050;
opacity: 1;
}
/* Sidebar login form */
.login-content-box .login-sidebar {
position: fixed;
top: 0;
right: -680px; /* hidden initially */
width: 680px;
height: 100%;
background: #fff;
/* backdrop-filter: blur(50px); */
padding: 30px;
transition: right 0.3s ease-in-out;
z-index: 1100;
border-radius: 7px 0 0 7px;
display: flex;
justify-content: center;
align-items: center;
}
.login-content-box .login-sidebar.active {
right: 0; /* slide in */
box-shadow: -2px 0 10px rgba(0,0,0,0.3);
transition: right 0.3s ease-in-out;
}
.login-content-box .overlay.active {
display: block;
}
/* Close button */
.login-content-box .close-btn {
float: right;
font-size: 50px;
line-height: 1;
cursor: pointer;
color: #000;
position: absolute;
top: 20px;
right: 20px;
transition: all .4s ease-in-out;
}
.login-content-box .close-btn:hover {
color: var(--primary-red);
transition: all .4s ease-in-out;
}
.login-content-box .login-sidebar .login-top-title {
margin-bottom: 40px;
}
/* Overlay background */
.login-content-box .login-sidebar .login-top-title h2 {
font-weight: 600;
font-size: 45px;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
color: var(--text-black);
margin-bottom: 0;
}
.login-content-box .login-sidebar .login-top-title p {
font-weight: 500;
font-size: 16px;
line-height: 180%;
text-align: center;
text-transform: capitalize;
color: var(--text-main);
margin-bottom: 0;
}
.login-content-box .login-form {
margin-bottom: 25px;
}
.login-form .form-group label {
font-weight: 500;
font-size: 16px;
line-height: 1;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 10px;
}
.login-form .form-group {
margin-bottom: 20px;
}
.login-form .form-group:last-child {
margin-bottom: 0;
}
.is-invalid {
border-color: #dc3545 !important;
background-color: #fff6f6;
}
.login-form .input-group {
border-radius: 7px;
border: 1px solid rgba(195, 195, 195, 1);
padding: 14px 20px;
}
.login-content-box .login-form .input-group .form-control:focus,
.login-content-box .login-form .input-group .form-control {
border: none;
padding: 0 0 0 10px;
background-color: transparent;
font-weight: 500;
font-size: 14px;
line-height: 14px;
text-transform: capitalize;
color: rgba(167, 167, 167, 1);
}
.login-form .input-group .input-group-text {
padding: 0;
}
.input-box-group {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.input-box-group .input-group {
padding: 12px 15px;
height: 50px;
justify-content: center;
align-items: center;
}
.login-content-box .form-control:focus,
.login-content-box .form-control,
.login-content-box input[type="email"]:focus,
.login-content-box input[type="password"]:focus,
.login-content-box input[type="email"],
.login-content-box input[type="password"] {
width: 100%;
height: auto;
background-color: transparent;
border-radius: 7px;
font-weight: 500;
font-size: 14px;
line-height: 1;
text-transform: lowercase;
border: 1px solid rgba(195, 195, 195, 1);
padding: 16px 23px;
color: rgba(167, 167, 167, 1);
box-shadow: none;
outline: 0;
}
.login-content-box .remember-forgot .form-check-input:focus {
outline: 0;
box-shadow: none;
border: none;
}
.form-check-input:checked[type=radio] {
background-color: var(--primary-red);
border: none;
background-image: url("data:image/svg+xml,");
}
.form-check-input:checked[type=checkbox],
.login-content-box .remember-forgot .form-check-input:checked {
background-color: var(--primary-red);
border: none;
background-image: url("data:image/svg+xml,");
}
/* Password wrapper */
.login-content-box .password-wrapper {
position: relative;
width: 100%;
}
.login-content-box .password-wrapper input {
padding-right: 40px; /* space for eye icon */
width: 100%;
}
.login-content-box .toggle-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 18px;
color: #666;
}
.login-content-box .remember-forgot {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0 20px;
}
.login-content-box .remember-forgot label {
margin-bottom: 0;
font-weight: 400;
font-size: 16px;
line-height: 100%;
color: var(--text-black);
}
.login-content-box .form-group p {
font-weight: 400;
font-size: 16px;
line-height: 100%;
color: var(--text-main);
margin-bottom: 0;
}
.login-content-box .remember-forgot label a {
font-weight: 600;
color: var(--text-black);
}
.login-content-box .remember-forgot .form-check {
margin-bottom: 0;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.login-content-box .remember-forgot .form-check-input[type=checkbox] {
width: 20px;
height: 20px;
outline: 0;
margin-top: 0;
border: 1px solid rgba(195, 195, 195, 1);
margin-right: 5px;
}
.login-content-box .remember-forgot a {
text-decoration: none;
font-weight: 400;
font-size: 16px;
line-height: 100%;
color: var(--text-black);
text-align: right;
}
.login-content-box .remember-forgot a:hover {
color: var(--primary-red);
}
.login-content-box button.login-btn {
width: 100%;
padding: 17px 20px;
background-color: rgba(228, 34, 34, 1);
font-weight: 500;
font-size: 16px;
line-height: 100%;
text-align: center;
color: #fff;
border-radius: 7px;
border: 0;
transition: all .4s ease-in-out;
}
.login-content-box button.login-btn:hover {
background-color: #000;
transition: all .4s ease-in-out;
color: #fff;
}
.login-content-box .divider {
text-align: center;
margin: 10px 0;
position: relative;
}
.login-content-box .divider::before,
.login-content-box .divider::after {
content: "";
position: absolute;
top: 50%;
width: 45%;
height: 1px;
background: var(--text-main);
}
.login-content-box .divider::before {
left: 0;
}
.login-content-box .divider::after {
right: 0;
}
.login-content-box .action-btns {
margin-bottom: 20px;
}
.login-content-box .action-btns button {
width: 100%;
padding: 14px 20px;
border: 1px solid rgba(195, 195, 195, 1);
border-radius: 7px;
background: #fff;
cursor: pointer;
font-size: 15px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
font-weight: 500;
line-height: 22px;
color: rgba(38, 38, 38, 1);
}
.login-content-box .action-btns button:hover {
border-color: var(--primary-red);
background-color: var(--primary-red);
color: rgba(15, 15, 15, 1);
}
.login-content-box .signup {
font-weight: 400;
font-size: 16px;
line-height: 100%;
color: var(--text-black);
text-align: center;
}
.login-content-box .signup a {
text-decoration: none;
color: var(--text-black);
font-weight: 600;
}
.login-content-box .signup a:hover {
text-decoration: underline;
}
.login-info-box {
max-width: 500px;
margin: 0 auto;
width: 100%;
}
.login-content-box .signup-sidebar .login-top-title {
margin-bottom: 20px;
}
.otp-inputs {
display: flex;
justify-content: center;
gap: 10px;
margin: 25px 0 15px;
}
.otp-inputs input {
width: 45px;
height: 50px;
text-align: center;
font-size: 20px;
border: 1px solid #ccc;
border-radius: 7px;
outline: none;
transition: 0.2s;
}
.otp-inputs input:focus {
border-color: #e53935;
box-shadow: 0 0 5px rgba(229, 57, 53, 0.4);
}
.login-content-box .login-sidebar .login-top-title.verification-title h2 {
margin-bottom: 5px;
}
.login-content-box .login-sidebar .login-top-title.verification-title p {
font-weight: 500;
font-size: 16px;
line-height: 1.3;
text-align: center;
text-transform: none;
color: var(--text-main);
max-width: 350px;
width: 100%;
margin: 0 auto;
}
.verify-form .form-group p {
font-weight: 400;
font-size: 14px;
line-height: 100%;
text-align: center;
color: var(--text-main);
}
.verify-form .form-group p span {
font-weight: 500;
color: rgba(38, 165, 65, 1);
}
/* === breadcrumbs-section ==== */
.breadcrumbs-section {
padding: 200px 1rem 110px;
background-image: url(../img/bruadcum-banner.png);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
min-height: 422px;
overflow: hidden;
display: flex;
align-items: center;
position: relative;
}
.breadcum_arrow_img {
position: absolute;
top: 132px;
right: 140px;
}
.page-title {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
height: auto;
gap: 15px;
}
.page-title h1 {
font-weight: 500;
font-size: 56px;
line-height: 66px;
text-align: center;
text-transform: uppercase;
color: rgba(255, 255, 255, 1);
margin-bottom: 0;
}
.breadcrumb-item,
.breadcrumb-item a {
font-weight: 500;
font-size: 18px;
line-height: 26px;
vertical-align: middle;
color: rgba(255, 255, 255, 1);
text-decoration: none;
}
.breadcrumb-item.active {
font-weight: 600;
color: #fff;
}
.breadcrumb-item a:hover {
color: var(--primary-red);
}
.breadcrumb-item+.breadcrumb-item::before {
color: #fff;
}
/* ====== pagignation-box ======= */
.pagignation-box {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 20px;
}
.pagination {
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
}
.pagination .page-link {
border: 1px solid rgba(195, 195, 195, 1);
border-radius: 7px;
padding: 10px 15px;
background: transparent;
font-weight: 600;
font-size: 15px;
line-height: 100%;
color: rgba(15, 15, 15, 1);
transition: all 0.4s ease-in-out;
}
.pagination .page-link:hover {
background: rgba(15, 15, 15, 1);
color: #fff;
border-color: rgba(15, 15, 15, 1);
}
.pagination .active > .page-link {
background: rgba(15, 15, 15, 1); /* Gold/Yellow */
color: #fff;
border-color: rgba(15, 15, 15, 1);
}
.pagination .disabled > .page-link {
opacity: 0.5;
pointer-events: none;
}
/* ========= Inner Service Page ====== */
.inner-service-section {
padding: 100px 1rem;
}
.details-img {
margin-bottom: 40px;
width: 100%;
height: 100%;
border-radius: 7px;
overflow: hidden;
}
.details-content-body h4 {
font-weight: 600;
font-size: 36px;
line-height: 100%;
color: rgba(255, 255, 255, 1);
margin-bottom: 25px;
}
.details-left-content p {
font-weight: 500;
font-size: 16px;
line-height: 150%;
color: rgba(255, 255, 255, 1);
margin-bottom: 20px;
}
.details-left-content p:last-child {
margin-bottom: 0;
}
.details-list-items ul {
margin: 0;
}
.details-list-items ul li {
margin-bottom: 1rem;
font-weight: 500;
font-size: 16px;
line-height: 1.8;
color: rgba(255, 255, 255, 1);
}
.details-list-items ul li:last-child {
margin-bottom: 0;
}
.solution-section {
background-image: url(../img/fras_bg.png);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 1rem;
height: 100%;
}
.solution-box .nav-pills .nav-link {
font-weight: 600;
font-size: 24px;
line-height: 26px;
color: #FFFFFF;
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: #FFFFFF66;
backdrop-filter: blur(35.83000183105469px);
border-radius: 7px;
margin-bottom: 15px;
padding: 17px 20px;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
width: 100%;
transition: all .4s ease-in-out;
}
.solution-box .nav-pills .nav-link.active {
background: #F5C156;
backdrop-filter: blur(35.83000183105469px);
border-color: transparent;
color: #1F2D3A;
transition: all .4s ease-in-out;
}
.solution-box .nav-pills .nav-link.active .img-icon .normal-img,
.solution-box .nav-pills .nav-link .img-icon .active-img {
display: none;
}
.solution-box .nav-pills .nav-link.active .img-icon .active-img {
display: block;
}
.solution-box .nav-pills .nav-link:last-child {
margin-bottom: 0;
}
.solution-tab-box-content h4 {
font-weight: 600;
font-size: 36px;
line-height: 100%;
color: #fff;
margin-bottom: 25px;
}
.solution-tab-box-content p {
font-weight: 500;
font-size: 16px;
line-height: 150%;
color: #FFFFFF;
margin-bottom: 20px;
}
.solution-list-item ul {
padding: 0 0 0 20px;
margin: 0;
}
.solution-list-item ul li {
font-weight: 500;
font-size: 16px;
line-height: 1.5;
margin-bottom: 15px;
color: rgba(255, 255, 255, 1);
}
.solution-list-item ul li:last-child {
margin-bottom: 0;
}
.our-team-box .team-card .team-card-body p {
max-width: 100%;
margin-bottom: 15px;
}
.our-team-box .team-card .team-card-body p:last-child {
margin-bottom: 0;
}
.left-section-title {
margin-bottom: 20px;
}
.left-section-title h4 {
font-weight: 600;
font-size: 36px;
line-height: 120%;
text-transform: uppercase;
color: var(--text-black);
margin-bottom: 0;
}
/* .our-team-box .team-card .author-info-box {
margin-bottom: 10px;
} */
/* ==== */
.product-slider-container {
background: rgba(255, 255, 255, 1);
border: none;
border-radius: 7px;
padding: 0;
box-shadow: 0px 14px 54px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.product-single-carousel.owl-carousel.owl-theme .owl-nav {
top: 45%;
justify-content: space-between;
width: 100%;
}
.product-single-carousel.owl-carousel.owl-theme .owl-nav button {
position: absolute;
background-color: #fff;
color: #000;
}
.product-single-carousel.owl-carousel.owl-theme .owl-nav button.owl-prev {
left: 10px;
right: auto;
}
.product-single-carousel.owl-carousel.owl-theme .owl-nav button.owl-next {
right: 10px;
}
.prod-thumbnail.owl-carousel.owl-theme .owl-nav.disabled {
display: none;
}
.brands-slider.owl-carousel.owl-theme .owl-nav.disabled {
display: none;
}
.prod-thumbnail .owl-dot {
border: 1px solid transparent;
border-radius: 7px;
padding: 5px;
margin-bottom: 10px;
}
.prod-thumbnail .owl-dot:last-child {
margin-bottom: 0;
}
.prod-thumbnail .owl-dot:hover,
.prod-thumbnail .owl-dot.active {
border-color: rgba(92, 225, 230, 1);
}
.prod-thumbnail .owl-dot.active img,
.prod-thumbnail img:hover {
border: none;
}
.product-slider-container:not(.container) {
position: relative;
padding-left: 1px;
padding-right: 1px
}
.product-slider-container:not(.container):hover .prod-full-screen {
opacity: 1
}
.product-slider-container:not(.container) button.owl-next:not(.disabled),
.product-slider-container:not(.container) button.owl-prev:not(.disabled) {
opacity: 1
}
@media screen and (min-width: 1680px) {
.product-center-vertical .prod-thumbnail {
width: 125px;
}
.product-center-vertical .product-slider-container {
width: calc(100% - 125px);
}
}
.product-single-gallery {
gap: 10px;
}
.prod-full-screen {
position: absolute;
right: 1rem;
bottom: 1rem;
transition: all 0.5s ease-in-out;
outline: none;
opacity: 0;
z-index: 1;
}
.product-single-gallery .prod-full-screen {
bottom: auto;
top: 1rem;
background-color: #fff;
padding: 5px;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 7px;
}
.product-single-gallery .prod-full-screen:hover {
background-color: rgba(245, 193, 86, .9);
transition: all .4s ease-in-out;
}
.prod-full-screen i {
color: #000;
font-size: 20px;
line-height: 1;
cursor: pointer
}
.product-top-title {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
width: 100%;
margin-bottom: 10px;
position: relative;
}
.product-top-title .location {
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 5px;
}
.product-order-box {
display: flex;
gap: 15px;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.product-item-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.product-item-box span {
font-weight: 500;
font-size: 16px;
line-height: 125%;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
margin-bottom: 8px;
display: block;
}
.product-item-box h4 {
margin-bottom: 0;
font-weight: 700;
font-size: 24px;
line-height: 125%;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
}
.product-item-box h4 small {
font-size: 14px;
font-weight: 400;
}
.product-single-details .product-single-qty {
margin: 0;
width: auto;
}
/*
.product-single-qty, .single-quantity-box.card-box .product-single-qty {
max-width: 172px;
width: 100%;
margin: 0;
padding: 4px;
border-color: rgba(119, 148, 141, 1);
} */
.product-single-qty {
display: inline-block;
max-width: 165px;
width: 100%;
vertical-align: middle;
}
.product-single-qty .bootstrap-touchspin.input-group {
flex-wrap: nowrap;
max-width: none;
padding-right: 0;
gap: 10px;
}
.product-single-qty .bootstrap-touchspin.input-group .input-group-btn {
margin-bottom: 0;
}
.product-single-qty .bootstrap-touchspin .form-control {
width: 2.7em;
height: 38px;
padding: 10px 2px;
background: transparent;
color: #fff;
font-weight: 600;
font-size: 16px;
line-height: 100%;
text-align: center;
border-radius: 7px! important;
}
.product-single-qty .bootstrap-touchspin .form-control,
.product-single-qty .bootstrap-touchspin .form-control:not(:focus),
.product-single-qty .btn-outline:not(:disabled):not(.disabled):active {
border-color: #dae2e6;
}
.product-single-qty .btn {
border-radius: 7px;
width: 38px;
height: 38px;
padding: 12px;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
color: #fff;
border: 1px solid rgba(195, 195, 195, 1);
}
.product-single-qty .btn:hover {
color: #000;
background-color: var(--primary-red);
}
.product-single-qty .btn.btn-down-icon:hover:before,
.product-single-qty .btn.btn-down-icon:hover:after,
.product-single-qty .btn.btn-up-icon:hover:before,
.product-single-qty .btn.btn-up-icon:hover:after {
background-color: #000;
}
.product-single-qty .btn.btn-outline {
border-color: rgba(195, 195, 195, 1);
}
.product-single-qty .btn.btn-down-icon:after,
.product-single-qty .btn.btn-up-icon:before,
.product-single-qty .btn.btn-up-icon:after {
display: block;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
width: 9px;
height: 1px;
background: #fff;
content: "";
}
.product-single-qty .btn.btn-up-icon:before {
transform: rotate(90deg);
}
.product-single-qty .horizontal-quantity::-webkit-outer-spin-button, .product-single-qty .horizontal-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.produt-action-btns {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
width: 100%;
}
.produt-action-btns p {
font-weight: 600;
font-size: 12px;
line-height: 150%;
color: #fff;
margin-bottom: 0;
width: 25%;
text-align: right;
}
.produt-action-btns p span {
font-weight: 500;
}
.product-body-content p {
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: #fff;
margin-bottom: 20px;
}
.product-body-content p:last-child {
margin-bottom: 0;
}
.product-divider {
color: var(--text-main);
}
.product-accordion-box .accordion-item {
background-color: transparent;
border-color: var(--text-main);
}
.product-accordion-box .accordion-button {
background: transparent;
}
.product-accordion-box .accordion-item .accordion-button:focus,
.product-accordion-box .accordion-item .accordion-button {
font-weight: 500;
font-size: 20px;
line-height: 125%;
text-transform: capitalize;
color: #fff;
}
/* ======= Wizard Form ===== */
.cart-section {
padding: 100px 1rem;
}
.step-content {
background-color: transparent;
border: none;
}
.wizerd_step_content .step-content {
display: none;
}
.wizerd_step_content .step-content.active {
display: block;
animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.wizard-steps {
display: flex;
justify-content: center;
position: relative;
max-width: 1120px;
width: 100%;
margin: 0 auto 80px;
}
.wizard-step {
flex: 1;
text-align: center;
position: relative;
}
.wizard-step p {
font-weight: 400;
font-size: 20px;
line-height: 100%;
text-align: center;
text-transform: capitalize;
color: var(--text-main);
}
.wizard-step.active p {
color: var(--text-black);
font-weight: 500;
}
.wizard-step .icon {
width: 80px;
height: 80px;
line-height: 1;
border-radius: 50%;
background-color: rgba(255, 255, 255, 1);
border: 1px solid var(--text-main);
font-size: 40px;
color: var(--text-main);
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
z-index: 1;
overflow: hidden;
}
.wizard-step.active .icon .active-img,
.wizard-step .icon .normal-img {
display: block;
transition: all .4s ease-in-out;
}
.wizard-step .icon .active-img,
.wizard-step.active .icon .normal-img {
display: none;
transition: all .4s ease-in-out;
}
.wizard-step.active .icon {
border-color: rgba(228, 34, 34, 1);
background: rgba(228, 34, 34, 1);
color: #fff;
}
.wizard-step p {
margin: 0;
font-weight: 500;
}
/* Connector lines */
.wizard-step::before {
content: "";
position: absolute;
top: 40px;
left: -90px;
width: calc(100% - 100px);
height: 2px;
background: var(--text-main);
z-index: 0;
margin: 0 auto;
display: none;
}
/* Connector lines */
.wizard-step::after {
content: "";
position: absolute;
top: 40px;
right: -90px;
width: calc(100% - 100px);
height: 2px;
background: var(--text-main);
z-index: 0;
margin: 0 auto;
}
.wizard-step.active::before {
background: var(--text-main);
display: block;
}
.wizard-step:first-child::before {
display: none;
}
.wizard-step:last-child::after {
display: none;
}
.wizard-step.active::after {
background: rgba(228, 34, 34, 1);
}
.recipient-details-step,
.sender-details-step,
.package-details-step {
max-width: 810px;
width: 100%;
margin: 0 auto;
}
.form-title h5 {
font-weight: 600;
font-size: 24px;
line-height: 118%;
text-transform: uppercase;
color: var(--text-black);
margin-bottom: 0px;
}
.package-details-step .package-box {
border: 0;
border-radius: 0;
border-bottom: 1px solid rgba(195, 195, 195, 1);
}
.package-details-step .package-box:last-child {
border-bottom: 0;
}
.package-details-step .switch {
display: inline-flex;
align-items: center;
gap: 8px;
}
.package-details-step .switch span {
font-weight: 400;
font-size: 14px;
line-height: 120%;
text-align: right;
color: var(--text-main);
}
.switch span.active {
font-weight: 500;
color: var(--text-black);
}
.package-details-step .toggle-btn {
width: 45px;
height: 25px;
background-color: var(--primary-red);
border-radius: 7px;
position: relative;
cursor: pointer;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.07) inset;
}
.package-details-step .toggle-btn::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 19px;
height: 19px;
background: var(--text-black);
border-radius: 50%;
transition: 0.3s;
}
.package-details-step .toggle-btn.active {
background-color: rgba(228, 34, 34, 1);
}
.package-details-step .toggle-btn.active::before {
transform: translateX(20px);
background: #fff;
}
.package-details-step td[contenteditable="true"]:focus {
outline: 2px solid #0d6efd;
background-color: #f8f9fa;
}
.package-box .form-label {
font-weight: 500;
font-size: 16px;
line-height: 14.5px;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 12px;
display: block;
}
.package-box .form-select,
.package-box .form-control {
border-color: rgba(195, 195, 195, 1);
border-radius: 7px;
font-weight: 400;
font-size: 14px;
line-height: 1;
text-transform: capitalize;
color: var(--text-main);
padding: 14px 20px;
height: 50px;
}
.shipping-form-box .form-group .form-select:focus,
.shipping-form-box .form-group .form-control:focus,
.package-box .form-control:focus {
outline: 0;
box-shadow: none;
border-color: rgba(228, 34, 34, 1);
}
/* Order Box */
.order-box {
border: 1px solid rgba(195, 195, 195, 1);
border-radius: 7px;
padding: 20px;
background: transparent;
}
.order-box h5 {
font-weight: 600;
font-size: 24px;
line-height: 180%;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 10px;
}
.order-box h5 span {
font-weight: 500;
font-size: 14px;
line-height: 180%;
text-transform: capitalize;
color: var(--text-main);
display: block;
}
.order-box p {
font-weight: 500;
font-size: 16px;
line-height: 125%;
color: var(--text-black);
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 15px;
}
.order-box ul {
margin: 0;
padding-left: 20px;
}
.order-box ul li {
font-weight: 500;
font-size: 14px;
line-height: 100%;
color: var(--text-main);
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 15px;
}
.order-box p span,
.order-box ul li span {
font-weight: 600;
color: var(--text-black);
}
.order-box hr {
border-color: rgba(195, 195, 195, 1);
width: 100%;
margin: 15px auto;
opacity: 1;
}
.order-box .total {
border-top: 1px solid rgba(195, 195, 195, 1);
padding-top: 15px;
}
.order-box .total p {
margin-bottom: 0;
}
.cart-table-list.table-bordered>:not(caption)>*>* {
border-width: 0;
}
.cart-table-list {
border-radius: 7px;
border: 1px solid rgba(195, 195, 195, 1);
border-collapse: separate;
border-spacing: 0 2px! important;
margin-bottom: 0;
overflow: hidden;
}
.cart-table-list thead {
background-color: rgba(245, 245, 245, 1);
border-color: rgba(195, 195, 195, 1);
vertical-align: middle;
}
.cart-table-list thead tr th {
font-weight: 500;
font-size: 18px;
line-height: 100%;
text-transform: capitalize;
color: var(--text-black);
padding: 12px 20px;
width: auto;
}
.cart-table-list thead tr th:first-child {
width: 10%;
}
.cart-table-list tr:last-child td {
border-bottom: 0;
}
.cart-table-list tbody {
vertical-align: top;
}
.cart-table-list tbody tr td {
padding: 20px;
font-weight: 400;
font-size: 16px;
line-height: 135%;
color: var(--text-main);
}
.cart-table-list tbody tr td input:read-only {
border: none;
padding: 0;
height: auto;
margin: 0;
}
.cart-table-list tbody tr td input:focus,
.cart-table-list tbody tr td input {
background-color: transparent;
border: 1px solid rgba(195, 195, 195, 1);
padding: 10px;
font-weight: 500;
font-size: 16px;
line-height: 135%;
color: #fff;
box-shadow: none;
outline: 0;
}
.cart-table-list tbody tr td p {
white-space: normal;
word-break: break-all;
margin-bottom: 0;
max-width: 400px;
width: 100%;
}
.cart-table-list tbody tr td .action-btns .btn {
height: auto;
}
.cart-action-btns {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin-top: 16px;
}
.cart-action-btns .btn:focus,
.cart-action-btns .btn {
max-width: 180px;
width: 100%;
font-weight: 500;
font-size: 16px;
line-height: 100%;
text-align: center;
text-transform: capitalize;
color: var(--text-black);
padding: 15px;
transition: all .4s ease-in-out;
}
.cart-action-btns .btn.upcomming-btn {
color: #fff;
}
.cart-action-btns .btn.upcomming-btn:active,
.cart-action-btns .btn.upcomming-btn:hover,
.cart-action-btns .btn.outline-btn:hover {
color: var(--text-black-dark);
transition: all .4s ease-in-out;
}
.form-check label {
font-weight: 500;
font-size: 16px;
line-height: 100%;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 0px;
}
/*
select.form-control:not([size]):not([multiple]) {
height: auto;
}
select.form-control-sm:not([size]):not([multiple]) {
padding: 0;
padding-left: 1.2rem;
height: 3.7rem;
font-size: 1.4rem;
letter-spacing: -0.013em
} */
.form-control::placeholder {
font-family: 'Gilroy-Light', sans-serif;
color: var(--text-main)! important;
opacity: 1! important;
font-weight: 400;
}
.form-control:read-only::placeholder {
color: var(--text-black)! important;
opacity: 1! important;
}
textarea.form-control {
padding-top: 0.8rem;
min-height: 151px;
border-color: #ebebeb
}
.shipping-form-box .col .form-group {
margin-bottom: 25px;
}
.shipping-form-box .col:last-child .form-group {
margin-bottom: 0;
}
.shipping-form-box .form-group h4 {
font-weight: 600;
font-size: 20px;
line-height: 118%;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 20px;
}
.shipping-form-box .form-group label {
font-weight: 500;
font-size: 16px;
line-height: 14.5px;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 12px;
}
.upload-box {
border: 1px solid #444;
border-radius: 7px;
padding: 40px 20px;
text-align: center;
background: #111;
cursor: pointer;
transition: border-color 0.3s ease;
}
.upload-box.dragover {
border-color: rgba(255, 255, 255, 0.4); /* bootstrap info color */
}
.shipping-form-box .form-group .upload-box .outline-btn:hover {
color: #000;
}
.formats {
font-size: 14px;
color: #aaa;
margin-top: 15px;
}
/* Thumbnail preview box */
.preview-item {
position: relative;
width: 120px;
height: 120px;
border: 1px solid #444;
border-radius: 7px;
background: #222;
margin: 10px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.preview-item img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
.remove-btn {
position: absolute;
top: 5px;
right: 5px;
background: rgba(0, 0, 0, 0.7);
border: none;
color: #fff;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
line-height: 1;
}
.file-info {
font-size: 12px;
color: #ccc;
text-align: center;
margin-top: 5px;
word-wrap: break-word;
max-width: 120px;
}
.form-radio-box .form-check label {
margin-bottom: 0;
}
/* .shipping-form-box .form-group .form-select {
background-image: url("data:image/svg+xml,");
} */
.shipping-form-box .form-group .form-select,
.shipping-form-box .form-group .form-control {
width: 100%;
padding: 14px 20px;
font-weight: 400;
font-size: 14px;
line-height: 1.2;
text-transform: capitalize;
color: var(--text-main);
background-color: rgba(255, 255, 255, 1);
border-color: rgba(195, 195, 195, 1);
border-radius: 7px;
height: 50px;
}
.shipping-form-box .form-group input[type="date"] {
padding-left: 40px;
}
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
cursor: pointer;
position: absolute;
right: 0;
width: 100%;
}
.shipping-form-box .form-group .form-control:read-only {
background-color: rgba(245, 245, 245, 1);
cursor: not-allowed;
opacity: 1;
border-color: rgba(195, 195, 195, 1);
}
.form-radio-box {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 20px;
width: 100%;
height: 100%;
}
.shiping-info .form-check-input {
margin-top: 0;
}
.form-radio-box .form-check {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 5px;
margin-bottom: 0;
}
.form-radio-box .form-check-input {
margin-top: 0;
}
.shiping-info .form-check-label {
font-weight: 500;
font-size: 14px;
line-height: 100%;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
.breaking {
display: block;
width: 100%;
margin: 10px 0;
}
.shiping-info .form-check-label span {
color: var(--text-black);
font-weight: 600;
}
.shiping-info {
margin-bottom: 20px;
}
.shiping-info .form-check {
margin-bottom: 15px;
}
.shiping-info .form-check:last-child {
margin-bottom: 0;
}
.offer-body-content h4 span {
font-weight: 600;
}
.offer-body-content small {
font-weight: 500;
font-size: 14px;
line-height: 1;
text-align: center;
color: var(--text-main);
display: block;
}
.offer-form .form-group label {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 1rem;
margin-bottom: 15px;
}
.offer-form .form-group .form-control {
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(35.83000183105469px);
color: #fff;
}
.offer-form .form-group textarea.form-control {
border-radius: 7px;
}
.offer-info {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
width: 80%;
}
.offer-info p {
margin-bottom: 0;
font-weight: 500;
font-size: 12px;
line-height: 170%;
text-align: right;
text-transform: uppercase;
color: var(--text-main);
}
.offer-info p span {
font-weight: 600;
}
.offer-action-btns {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
width: 100%;
}
.offer-action-btns button {
border-radius: 7px;
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(35.83000183105469px);
max-width: 180px;
width: 100%;
font-weight: 500;
font-size: 18px;
line-height: 100%;
text-align: center;
text-transform: uppercase;
color: rgba(255, 255, 255, 1);
padding: 15px 20px;
}
.offer-form .form-group .form-label span {
font-weight: 500;
font-size: 14px;
line-height: 14.5px;
text-transform: capitalize;
color: var(--text-main);
}
.offer-form .action-btns .buy-btn {
padding: 15px 20px;
max-width: 100%;
font-weight: 500;
font-size: 20px;
line-height: 100%;
text-align: center;
color: rgba(255, 255, 255, 1);
margin-bottom: 10px;
}
.offer_support a {
font-weight: 500;
font-size: 14px;
line-height: 170%;
text-align: center;
text-decoration: underline;
color: var(--text-black);
display: inline-block;
}
.offer-body-table {
border: 1px solid rgba(195, 195, 195, 1);
border-radius: 7px;
padding: 0 0 5px;
}
.offer-table-header {
padding: 15px 20px;
border-bottom: 1px solid rgba(195, 195, 195, 1);
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
width: 100%;
}
.offer-table-header h4 {
font-weight: 500;
font-size: 18px;
line-height: 100%;
text-transform: capitalize;
margin-bottom: 0;
color: var(--text-black);
}
.offer-bid-list {
padding: 15px 30px 15px 20px;
height: 350px;
overflow-y: auto;
}
.offer-bid-list ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
align-items: flex-start;
justify-content: flex-start;
}
.offer-bid-list ul li {
font-weight: 600;
font-size: 20px;
line-height: 125%;
color: var(--text-black);
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 15px;
}
.offer-bid-list ul li span {
font-weight: 400;
font-size: 16px;
line-height: 125%;
color: var(--text-main);
}
.payment-box {
background: #1b1b26;
border-radius: 7px;
padding: 10px 5px;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
}
.payment-box:hover {
background: #242434;
}
.payment-box input[type="radio"] {
accent-color: #ffbf36;
width: 18px;
height: 18px;
margin-right: 10px;
cursor: pointer;
}
.payment-info {
flex-grow: 1;
}
.payment-info small {
color: #aaa;
}
.card-logo img {
width: 50px;
height: auto;
}
.btn-custom {
background: transparent;
border: 1px solid #ffbf36;
color: #ffbf36;
border-radius: 7px;
padding: 8px 20px;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-custom:hover {
background: #ffbf36;
color: #000;
}
/* ======= THank you ===== */
.thank-you-section {
padding: 100px 1rem;
width: 100%;
height: 100%;
}
.thank-you-content {
max-width: 540px;
margin: 0 auto;
width: 100%;
}
.thank-you-content img {
max-width: 84px;
width: 100%;
margin-bottom: 10px;
}
.thank-you-details {
margin-bottom: 40px;
}
.thank-you-details h1 {
font-weight: 600;
font-size: 45px;
line-height: 180%;
text-align: center;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 0;
}
.thank-you-details span {
font-weight: 500;
font-size: 20px;
line-height: 180%;
text-align: center;
text-transform: capitalize;
color: var(--text-main);
display: block;
margin-bottom: 15px;
}
.thank-you-details p {
font-weight: 400;
font-size: 16px;
line-height: 150%;
text-align: center;
color: var(--text-main);
}
.order-overview {
max-width: 100%;
width: 100%;
margin: 0 auto;
background-color:rgba(245, 245, 245, 1);
border-width: 1px;
border-style: solid;
border-color: rgba(195, 195, 195, 1);
padding: 20px;
border-radius: 7px;
}
.order-overview h5 {
font-weight: 600;
font-size: 24px;
line-height: 1.2;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 15px;
text-align: left;
}
.order-overview ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
width: 100%;
gap: 20px;
}
.order-overview ul li {
font-weight: 500;
font-size: 16px;
line-height: 125%;
color: var(--text-black);
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
width: 100%;
}
.thank-you-footer {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
max-width: 100%;
width: 100%;
margin: 20px auto 0;
}
.thank-you-footer .btn {
max-width: 265px;
width: 100%;
border-radius: 7px;
font-weight: 500;
font-size: 16px;
line-height: 100%;
text-align: center;
color: rgba(15, 15, 15, 1);
padding: 15px 20px;
border-color: rgba(15, 15, 15, 1);
}
.thank-you-footer .btn.upcomming-btn {
color: rgba(255, 255, 255, 1);
border-color: transparent;
}
.login-box.dropdown{
display: flex;
gap: 0;
align-items: center;
padding: 0;
margin-left: 20px;
}
.login-box .profile-toggle.show::after{
transform: rotate(180deg);
transition: all .4s ease-in-out;
}
.login-box .profile-img {
width: 35px;
height: 35px;
border-radius: 50%;
object-fit: cover;
margin-right: 0px;
}
.login-box .profile-toggle {
display: flex;
align-items: center;
color: #000;
font-weight: 500;
cursor: pointer;
text-decoration: none;
}
.login-box .profile-toggle:hover {
color: var(--primary-red);
}
.login-box.dropdown i{
font-size: 20px;
color: var(--text-black);
}
.login-box-cart a:hover i{
color: var(--primary-red);
}
.login-box-cart a {
position: relative;
display: inline-block;
padding: 5px;
}
.login-box-cart i {
font-size: 22px; /* Slightly larger looks better */
color: var(--text-black);
transition: color 0.3s ease;
}
/* The Badge Circle */
.cart-badge {
position: absolute;
top: 0;
right: -5px;
background-color: var(--primary-red);
color: #ffffff;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
line-height: 1;
/* Optional: White border makes it pop against dark backgrounds */
border: 2px solid #ffffff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.login-box-cart a:hover i {
color: var(--primary-red);
}
/* ==== DashBoard ==== */
/* .dashboard-page {
padding: 115px 1rem 0px;
background-image: url(../img/hero-banner.png);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
} */
.dashboard-section {
padding: 100px 1rem;
}
.store-top-section {
margin-bottom: 30px;
}
.dashboard-tab-box .nav-pills {
background: transparent;
border: 1px solid var(--primary-red);
border-radius: 7px;
max-width: max-content;
width: 100%;
margin: 0 auto;
overflow: hidden;
flex-wrap: nowrap;
justify-content: space-between;
}
.dashboard-tab-box .nav-pills .nav-item {
border-right: 1px solid var(--primary-red);
}
.dashboard-tab-box .nav-pills .nav-item:last-child {
border-right: 0;
}
.dashboard-tab-box .nav-pills .nav-item .nav-link {
padding: 13px 25px;
font-weight: 500;
font-size: 16px;
line-height: 100%;
text-align: center;
color: var(--primary-red);
border-radius: 0;
}
.dashboard-tab-box .nav-pills .nav-item:first-child .nav-link {
border-radius: 7px 0 0 7px;
}
.dashboard-tab-box .nav-pills .nav-item:last-child .nav-link {
border-radius: 0 7px 7px 0;
}
.dashboard-tab-box .nav-pills .nav-item .nav-link.active {
background-color: var(--primary-red);
color: rgba(31, 45, 58, 1);
}
.dashboard-card {
background: transparent;
border-width: 1px;
border-style: solid;
border-color: rgba(195, 195, 195, 1);
border-radius: 7px;
width: 100%;
height: 100%;
padding: 20px 25px;
}
.dashboard-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
width: 100%;
}
.dashboard-card-header p {
font-weight: 500;
font-size: 16px;
line-height: 100%;
text-transform: uppercase;
color: rgba(255, 255, 255, 1);
margin-bottom: 0;
}
.dashboard-card-img {
max-width: 150px;
height: 150px;
border-radius: 7px;
overflow: hidden;
margin: 0 auto;
}
.dashboard-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rating-tag {
background-color: rgba(59, 153, 0, 0.1);
display: flex;
border: 0.5px solid rgba(59, 153, 0, 0.5);
justify-content: center;
align-items: center;
gap: 5px;
border-radius: 7px;
padding: 3px 10px;
font-weight: 600;
font-size: 12px;
line-height: 140%;
color: rgba(59, 153, 0, 1);
}
.body-title {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
width: 100%;
margin-bottom: 6px;
}
.body-title h3 {
font-weight: 600;
font-size: 48px;
line-height: 100%;
text-transform: uppercase;
color: rgba(255, 255, 255, 1);
margin-bottom: 0;
}
.dashboard-card-body p {
font-weight: 500;
font-size: 12px;
line-height: 100%;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
margin-bottom: 0;
}
.dashboard-card-header h4 {
font-weight: 500;
font-style: Medium;
font-size: 22px;
line-height: 20px;
letter-spacing: 0%;
color: var(--text-black);
margin-bottom: 0;
}
.dashboard-card-header a span {
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(35.83000183105469px);
border-radius: 7px;
width: 38px;
height: 38px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
line-height: 1;
color: #fff;
}
.dashboard-card-header a.view-btn {
display: flex;
justify-content: center;
align-items: center;
color: rgba(15, 15, 15, 1);
padding: 0;
position: static;
border-radius: 7px;
width: 36px;
height: 36px;
border: 1px solid rgba(195, 195, 195, 1);
}
.dashboard-card-header a.view-btn:active,
.dashboard-card-header a.view-btn:hover {
color: var(--primary-red);
border-color: var(--primary-red);
}
.table.dataTable {
border-spacing: 0 7px! important;
border-collapse: separate! important;
margin-top: 0! important;
margin-bottom: 0! important;
border-top: 0! important;
padding: 0;
background-color: transparent;
border: 1px solid rgba(228, 228, 228, 1);
border-radius: 7px;
}
.pipline-stage-list .table-responsive {
height: 300px;
}
.pipline-stage-list table tr th:first-child,
.pipline-stage-list table tr td:first-child {
text-align: left;
}
.pipline-stage-list table tr th:last-child,
.pipline-stage-list table tr td:last-child {
text-align: right;
}
/*
.chat-table thead tr th {
width: auto! important;
} */
.chat-table thead {
background: rgba(245, 245, 245, 1);
border-width: 1px;
border-style: solid;
border-color: rgba(195, 195, 195, 1);
height: auto;
border-radius: 7px;
vertical-align: middle;
}
.chat-table tbody tr th,
.chat-table tbody tr td {
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: rgba(195, 195, 195, 1);
font-weight: 400;
font-size: 16px;
line-height: 140%;
text-transform: capitalize;
color: var(--text-main);
padding: 10px 20px;
}
.chat-table tbody tr td p {
white-space: normal;
word-break: break-all;
margin-bottom: 0;
max-width: 260px;
width: 100%;
font-weight: 400;
font-size: 16px;
line-height: 140%;
text-transform: capitalize;
color: var(--text-main);
}
.chat-table tbody tr td .action-btns {
margin-top: 0;
}
.chat-table tbody tr td .rating-tag {
padding: 6px 20px;
font-weight: 500;
font-size: 16px;
line-height: 100%;
text-align: center;
text-transform: capitalize;
color: rgba(38, 165, 65, 1);
}
.chat-table tbody tr td .rating-tag.track {
color: var(--primary-red);
border-color: var(--primary-red);
}
.assets_table_list.chat-table thead tr th,
.assets_table_list.chat-table tbody tr td {
padding: 14px 20px;
}
.chat-table tbody tr th:first-child,
.chat-table tbody tr td:first-child {
border-radius: 7px 0 0 7px;
text-align: left;
border-left: 1px solid rgba(195, 195, 195, 1)! important;
}
.chat-table tbody tr td:last-child {
border-radius: 0 7px 7px 0;
text-align: right;
border-right: 1px solid rgba(195, 195, 195, 1)! important;
}
.chat-table thead tr th {
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: rgba(195, 195, 195, 1);
border-left-color: transparent! important;
font-weight: 500;
font-size: 16px;
line-height: 100%;
text-transform: capitalize;
color: var(--text-black);
padding: 10px 20px;
}
.chat-list-right-box .chat-table tbody tr td {
font-weight: 500;
}
.chat-table thead,
.chat-table tbody {
vertical-align: middle;
}
.chat-table tbody tr td:first-child,
.chat-table thead tr th:first-child {
border-left: 1px solid rgba(195, 195, 195, 1)! important;
}
.chat-table thead tr th:last-child {
cursor: default! important;
border-radius: 0 7px 7px 0;
border-right-width: 1px;
}
.chat-table thead tr th:first-child {
cursor: default! important;
border-radius: 7px 0 0 7px;
text-align: left;
border-left-width: 1px;
}
.status-box {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 6px;
width: 100%;
color: rgba(255, 107, 107, 1);
font-weight: 500;
font-size: 14px;
line-height: 100%;
text-transform: capitalize;
}
.status-box.active {
color: rgba(59, 153, 0, 1);
}
.chart-pie-donut .apexcharts-datalabel-label {
font-size: 14px;
font-weight: 400;
line-height: 18.5px;
text-align: center;
margin: 0;
color: rgba(255, 255, 255, 1);
fill: rgba(255, 255, 255, 1);
}
.chart-pie-donut .apexcharts-datalabel-value {
font-size: 28px;
font-weight: 600;
line-height: 33.92px;
text-align: center;
color: rgba(255, 255, 255, 1);
fill: rgba(255, 255, 255, 1);
display: block;
}
.apexcharts-legend-text {
font-weight: 500! important;
font-size: 16px! important;
line-height: 18px! important;
text-transform: capitalize! important;
color: rgba(255, 255, 255, 1)! important;
}
.apexcharts-legend-series {
margin-bottom: 15px! important;
display: inline-flex;
align-items: center;
}
.apexcharts-datalabel {
font-size: 14px;
font-weight: 500;
line-height: 1;
text-align: center;
color: rgba(255, 255, 255, 1);
fill: rgba(255, 255, 255, 1);
}
.apexcharts-xaxis-label,
.apexcharts-yaxis-label,
.apexcharts-yaxis-title-text,
.apexcharts-xaxis-title-text {
font-size: 14px;
font-weight: 400;
line-height: 21px;
letter-spacing: 0.01em;
text-align: center;
color: rgba(255, 255, 255, 1);
fill: rgba(255, 255, 255, 1);
}
.dashboard-card-header .left-box {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 20px;
width: 100%;
}
.dashboard-card-header .right-box {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
width: 100%;
}
.search-bar .input-group {
border: 1px solid rgba(195, 195, 195, 1);
border-radius: 7px;
padding: 6px 20px;
}
.search-bar .input-group .btn {
color: var(--text-black);
padding: 0 10px 0 0;
}
.search-bar .input-group .form-control:focus,
.search-bar .input-group .form-control {
background: transparent;
border: none;
padding: 0;
font-weight: 500;
font-size: 14px;
line-height: 1.2;
color: var(--text-main);
outline: 0;
box-shadow: none;
}
.filter-btn {
background: transparent;
border-radius: 7px;
padding: 11px 20px;
border: 1px solid rgba(195, 195, 195, 1);
font-weight: 500;
font-size: 14px;
line-height: 1;
color: var(--text-black);
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
.btn.filter-btn:active,
.filter-btn:hover {
color: var(--primary-red);
border-color: var(--primary-red);
}
.form-material .form-group {
overflow: hidden; }
.form-material .form-control {
background-color: transparent;
background-position: bottom;
background-repeat: no-repeat;
background-size: 0 2px, 100% 1px;
padding: 0;
transition: background 0s ease-out 0s;
height: calc(2.25rem + 2px);
}
.form-material .form-control,
.form-material .form-control.focus,
.form-material .form-control:focus {
background-image: linear-gradient(var(--primary-red), var(--primary-red)), linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
background-repeat: no-repeat;
border: 0 none;
border-radius: 0;
box-shadow: none !important;
float: none;
background-position: bottom;
font-weight: 500;
font-size: 14px;
line-height: 1;
color: #fff;
}
.form-material .form-control.focus,
.form-material .form-control:focus {
background-size: 100% 2px, 100% 1px;
outline: 0 none;
transition-duration: 0.3s; }
.form-control-line .form-group {
overflow: hidden; }
.form-control-line.form-control {
border: 0px;
border-radius: 0px;
background-color: transparent;
padding-left: 0px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.form-material .form-control-line.form-control.form-select:focus,
.form-material .form-control.form-select {
background-image: url("data:image/svg+xml,")! important;
background-color: #111111;
background-position: 99% center;
background-repeat: no-repeat;
background-size: 16px;
border-bottom: 2px solid rgba(255, 255, 255, 0.4)! important;
border-radius: 0;
font-weight: 500;
font-size: 14px;
line-height: 1;
color: #fff;
padding: 5px 0;
box-shadow: none;
outline: 0;
height: calc(2.25rem + 2px)! important;
}
.form-material textarea.form-control {
min-height: calc(1.5em + .75rem + 2px);
}
.profiletimeline {
position: relative;
padding-left: 40px;
margin: 10px 10px 0 30px;
border-left: 1px solid #e9ecef; }
.profiletimeline .sl-left {
display: flex;
margin-left: -60px;
z-index: 1;
margin-right: 15px; }
.profiletimeline .sl-left img {
max-width: 40px; }
.profiletimeline .sl-item {
margin-top: 8px;
margin-bottom: 30px; }
.profiletimeline .sl-date {
font-size: 12px;
color: #99abb4; }
.profiletimeline .sl-right a {
font-weight: 600;
font-size: 16px;
line-height: 1;
color: var(--primary-red);
text-decoration: none;
}
.profiletimeline .sl-right a:hover {
color: rgba(92, 225, 230, 1);
text-decoration: underline;
}
.profiletimeline .sl-right a.btn:hover {
color: #000;
text-decoration: none;
}
/* ======= Notification ========= */
.notification-box .accordion-item {
background: transparent;
border-width: 0 0 1px 0;
backdrop-filter: none;
border-radius: 0! important;
margin-bottom: 0;
padding: 20px;
}
.notification-box .accordion-button p {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
margin-bottom: 0;
}
.notification-box .accordion-button p span {
font-weight: 400;
font-size: 16px;
line-height: 1.2;
color: rgba(255, 255, 255, 0.7);
display: block;
margin-top: 5px;
}
/*
.invoice-box h2 {
font-weight: 600;
font-size: 24px;
line-height: 32px;
text-decoration: none;
color: var(--text-black);
}
address {
color: #111;
}
.invoice-box h2 span {
color: var(--primary-red);
} */
.notify-msg.unread-msg a {
color: rgba(255, 255, 255, 1);
}
.notify-msg a:hover {
text-decoration: underline;
}
.notify-msg span {
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: rgba(255, 255, 255, 0.7);
}
.notify-msg.unread-msg ~ .unread {
font-size: 12px;
line-height: 1;
color: var(--primary-red);
padding-right: 20px;
display: block;
}
.notify-msg ~ .unread {
display: none;
}
.setting-card-box {
padding: 25px 30px;
text-decoration: none;
transition: all .4s ease-in-out;
}
.setting-card-box .setting-card-img {
max-width: 50px;
width: 100%;
height: auto;
font-size: 40px;
line-height: 1;
color: rgba(92, 225, 230, 1);
transition: all .4s ease-in-out;
}
.setting-box > .row > .col:nth-child(even) .setting-card-box .setting-card-img,
.setting-box > .row > .col:nth-child(even) .setting-card-box .setting-card-img {
color: var(--primary-red);
transition: all .4s ease-in-out;
}
.setting-card-box:hover {
background: var(--primary-red);
color: #000;
transition: all .4s ease-in-out;
}
.setting-card-box:hover .setting-card-img {
color: #000! important;
transition: all .4s ease-in-out;
}
.setting-card-box:hover .setting-card-body h4,
.setting-card-box:hover .setting-card-body p {
color: #000;
transition: all .4s ease-in-out;
}
.setting-card-body h4 {
font-weight: 700;
font-size: 24px;
line-height: 32px;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
transition: all .4s ease-in-out;
}
.setting-card-body p {
margin-bottom: 0;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: rgba(255, 255, 255, 1);
transition: all .4s ease-in-out;
}
.setting-box .search-bar {
max-width: 960px;
width: 100%;
margin: 0 auto 40px;
}
.setting-box .search-bar .input-group {
padding: 12px 20px;
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(35.83000183105469px);
}
.support-box {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 40px;
flex-direction: column;
width: 100%;
height: 100%;
max-width: 1364px;
margin: 0 auto;
}
.support-box .section-title h3 {
text-align: left;
text-transform: capitalize;
}
.support-contact-box {
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border-top: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(35.83000183105469px);
border-radius: 7px;
padding: 40px;
width: 100%;
}
.support-form .form-group {
margin-bottom: 20px;
}
.support-form >.row >.col-12:last-child .form-group {
margin-bottom: 0;
}
.support-form .form-group label {
font-weight: 500;
font-size: 16px;
line-height: 1;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
margin-bottom: 1rem;
display: block;
}
.support-form .form-control {
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border-width: 1px 0px 0 0px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(35.83000183105469px);
border-radius: 7px;
padding: 15px 20px;
font-weight: 500;
font-size: 14px;
line-height: 14.5px;
text-transform: capitalize;
color: #fff;
}
.support-form textarea.form-control {
border-radius: 7px;
}
.support-location-box {
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border-top: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(35.83000183105469px);
border-radius: 7px;
padding: 30px;
}
.support-location-box .location-info {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
width: 100%;
border-bottom: 1px solid rgba(214, 216, 217, 1);
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.support-location-box .location-info:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.support-location-box .location-info span {
font-size: 1rem;
line-height: 1;
}
.support-location-box .location-info .location-details h5 {
font-weight: 600;
font-size: 20px;
line-height: 20px;
color: #fff;
}
.support-location-box .location-info .location-details p {
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
color: #fff;
max-width: 220px;
width: 100%;
margin-bottom: 0;
}
.wallet_box {
max-width: 1088px;
width: 100%;
margin: 0 auto;
}
.wallet_box .wallet-info {
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border-top: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(35.83000183105469px);
border-radius: 7px;
padding: 40px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
width: 100%;
margin-bottom: 40px;
}
.wallet-left {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 1rem;
}
.wallet-left .wallet-body h4 {
font-weight: 700;
font-size: 50px;
line-height: 1;
text-transform: uppercase;
color: rgba(255, 255, 255, 1);
margin-bottom: 0;
}
.wallet-left .wallet-body h6 {
font-weight: 600;
font-size: 22px;
line-height: 1;
text-transform: uppercase;
color: rgba(255, 255, 255, 1);
margin-bottom: 0;
}
.transactions_history_box h4 {
font-weight: 700;
font-size: 24px;
line-height: 1;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
margin-bottom: 1rem;
}
.wallet-modal .modal-dialog {
max-width: 620px;
width: 100%;
}
.wallet-modal .modal-content {
border-radius: 7px;
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border-top: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(35.83000183105469px);
}
.wallet-modal .modal-header {
background: var(--primary-red);
border-top: 1px solid rgba(0, 0, 0, 1);
backdrop-filter: blur(35.83000183105469px);
border-radius: 7px 7px 0 0;
padding: 20px 30px;
border-bottom: 0;
}
.wallet-modal .modal-header .modal-title {
font-weight: 600;
font-size: 24px;
line-height: 100%;
text-transform: capitalize;
color: rgba(0, 0, 0, 1);
margin-bottom: 0;
}
.wallet-modal .modal-header .btn-close {
opacity: 1;
}
.offer-title {
margin-bottom: 1rem;
}
.offer-title h4 {
font-weight: 700;
font-style: Bold;
font-size: 24px;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
color: rgba(255, 255, 255, 1);
margin-bottom: 0;
}
.offer-title small {
font-weight: 500;
font-size: 14px;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
color: rgba(255, 255, 255, 1);
}
.offer-info p {
font-weight: 500;
font-size: 12px;
line-height: 170%;
text-align: right;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
margin-bottom: 0;
}
.card-option {
display: flex;
align-items: center;
padding: 12px;
border-radius: 7px;
margin-bottom: 10px;
cursor: pointer;
transition: 0.3s;
background: linear-gradient(160.61deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 101.7%);
border-top: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(35.83000183105469px);
}
.card-option:hover {
background: #333;
}
.card-option input[type="radio"] {
margin-left: auto;
accent-color: #f4b400;
}
/* Optional: highlight when selected */
.card-option input[type="radio"]:checked + .card-label {
border: 2px solid #f4b400;
}
.card-action-btns {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
width: 100%;
margin-bottom: 1rem;
}
.card-action-btns p {
font-weight: 400;
font-size: 24px;
line-height: 190%;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
margin-bottom: 0;
}
.add-card-btn {
border: 1px solid rgba(255, 255, 255, 1);
background: transparent;
color: #fff;
font-weight: 400;
font-size: 14.23px;
line-height: 100%;
text-align: center;
padding: 10px 24px;
border-radius: 7px;
max-width: 110px;
width: 100%;
}
.add-card-btn:hover {
border-color: var(--primary-red);
color: var(--primary-red);
}
.card-option .form-radio-box {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.card-option .form-radio-box .radio-img {
background-color: rgba(245, 245, 245, 1);
width: 50px;
height: 50px;
border-radius: 7px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.card-option .form-radio-box p {
font-weight: 400;
font-size: 16px;
line-height: 1.2;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
margin-bottom: 0;
}
.card-option .form-radio-box p span {
font-size: 12px;
display: block;
}
.blog-box > .row > .col-12 > .dashboard-card > .industry-card-body p {
min-height: 120px;
height: 100%;
}
.blog-box > .row > .col-12 > .industry-details-card-box .industry-img {
border-radius: 7px;
}
.blog-box > .row > .col-12 > .industry-details-card-box .industry-img img {
transition: all .4s ease-in-out;
}
.blog-box > .row > .col-12 > .industry-details-card-box:hover .industry-img img {
transform: scale(1.1);
transition: all .4s ease-in-out;
}
.related-blog {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
height: 100%;
justify-content: flex-start;
align-items: flex-start;
}
.related-blog .card {
border-radius: 7px;
width: 100%;
}
.related-blog .card .card-img-box {
overflow: hidden;
width: 100%;
border-radius: 7px;
}
.related-blog .card.category-card-box .card-img-box .card-img {
border-radius: 7px;
}
/* ======= delivery-section ======= */
.delivery-section {
background-image: url(../img/Our-Delivery-Solutions.png);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 16px;
width: 100%;
height: 100%;
}
.delivery-card-img {
position: relative;
border-radius: 7px;
width: 100%;
height: 100%;
overflow: hidden;
margin-bottom: 30px;
}
.delivery-card-img > .delivery_img {
width: 100%;
}
.overlay-img-box {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.delivery-card-body h4 {
font-weight: 600;
font-size: 36px;
line-height: 110.00000000000001%;
text-transform: uppercase;
color: var(--text-black);
margin-bottom: 20px;
}
.vision-content-box p,
.delivery-card-body p {
font-weight: 400;
font-size: 16px;
line-height: 160%;
color: var(--text-main);
}
/* ========= our-vision-section ====== */
.our-vision-section {
padding: 100px 16px;
}
.vision-content-box h4 {
font-weight: 600;
font-size: 36px;
line-height: 110%;
text-transform: uppercase;
color: var(--text-black);
margin-bottom: 20px;
}
.mission-box .left-content h4 {
margin-bottom: 40px;
}
.mission-box .stat-box {
padding: 20px 0;
}
.mission-list h5 {
font-weight: 600;
font-size: 20px;
line-height: 118%;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 6px;
}
.section-content-box .left-content .mission-list ul {
columns: 2;
-webkit-columns: 2;
padding-left: 30px;
}
.section-content-box .left-content .mission-list ul li {
font-weight: 500;
font-size: 24px;
line-height: 100%;
color: var(--text-black);
margin-bottom: 20px;
}
.section-content-box .left-content .mission-list ul li:last-child {
margin-bottom: 0;
}
.mission-list ul {
list-style-type: disc;
padding: 0 0 0 20px;
margin: 0;
}
.mission-list ul li {
font-weight: 400;
font-size: 16px;
line-height: 36px;
color: var(--text-main);
margin-bottom: 5px;
}
.mission-list ul li:last-child {
margin-bottom: 0;
}
/* ====== core-section ======= */
.core-section {
padding: 100px 16px;
}
.core-value-content .row .col .core-card {
background-color: rgba(233, 156, 14, .1);
border-radius: 7px;
padding: 35px 30px 20px;
position: relative;
height: 100%;
}
.core-value-content .row .col .core-card.even-card {
background-color: rgba(1, 3, 38, .05);
}
.core-value-content .row .col .core-card::after {
content: '';
background-image: url(../img/icons/placeholder-arrow.png);
background-size: 100% auto;
background-position: top right;
background-repeat: no-repeat;
width: 156px;
height: 77px;
position: absolute;
top: 20px;
right: 20px;
}
.core-card-body h5 {
font-weight: 600;
font-size: 24px;
line-height: 26px;
text-transform: uppercase;
color: var(--text-black);
margin-bottom: 10px;
}
.core-card-body p {
font-weight: 400;
font-size: 14px;
line-height: 165%;
color: var(--text-main);
margin-bottom: 0;
}
.top-title.section-title {
/* flex-direction: column; */
gap: 1rem;
}
.top-title.section-title p {
max-width: 950px;
width: 100%;
margin: 0 auto;
}
.profile-section {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 18px;
width: 100%;
}
.profile-img-container {
position: relative;
width: 120px;
height: 120px;
}
.profile-img {
width: 100%;
height: 100%;
border-radius: 7px;
object-fit: cover;
box-shadow: 10px -6px 34px 0px rgba(0, 0, 0, 0.11);
}
.upload-icon {
position: absolute;
bottom: 5px;
right: 5px;
background: var(--primary-red);
color: rgba(31, 45, 58, 1);
border-radius: 50%;
padding: 7px;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 1);
transition: background 0.3s ease-in-out;
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
}
.upload-icon:hover {
background: rgba(228, 34, 34, 1);
color: var(--text-black);
}
.upload-icon i {
font-size: 14px;
line-height: 1;
}
.profile-info h4 {
margin-bottom: 8px;
font-weight: 600;
font-size: 24px;
line-height: 1;
text-transform: capitalize;
color: var(--text-black);
}
.profile-info p {
font-weight: 400;
font-size: 16px;
line-height: 1;
text-transform: lowercase;
color: var(--text-main);
margin: 0;
}
/* Hide input */
#fileInput {
display: none;
}
/* Toast Notification */
.toast {
position: fixed;
bottom: 30px;
right: 30px;
background: #323232;
color: #fff;
padding: 14px 22px;
border-radius: 7px;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
opacity: 0;
pointer-events: none;
transform: translateY(30px);
transition: all 0.4s ease;
font-size: 14px;
}
.toast.show {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.toast i {
color: #00ff7f;
}
@media(max-width:768px){
.account-details-box .form-group {
flex: 1 1 100%;
}
}
.account-details-box .input-wrapper {
position: relative;
}
.account-details-box input {
width: 100%;
padding: 10px 35px 10px 15px;
border: 1px solid #ccc;
border-radius: 7px;
font-size: 14px;
outline: none;
transition: all 0.2s;
}
.account-details-box input:focus {
border-color: #ff4747;
}
.account-details-box .input-wrapper i {
position: absolute;
right: 12px;
top: 10px;
color: #999;
cursor: pointer;
}
.account-details-box .form-group {
flex: 1 1 45%;
}
.right-filter-box {
max-width: 120px;
width: 100%;
position: absolute;
top: 0;
right: 0;
}
.right-filter-box .form-group {
display: flex;
justify-content: center;
align-items: center;
gap: 0;
border: 1px solid rgba(195, 195, 195, 1);
border-radius: 7px;
padding: 10px 15px;
width: 100%;
}
.right-filter-box .form-group label {
margin-bottom: 0;
font-weight: 500;
font-size: 14px;
line-height: 100%;
color: var(--text-black);
}
.right-filter-box .form-group .form-select,
.right-filter-box .form-group .form-control:focus,
.right-filter-box .form-group .form-control {
border: 0;
padding: 0 5px;
font-weight: 500;
font-size: 14px;
line-height: 100%;
color: var(--text-black);
background-position: right center;
outline: 0;
box-shadow: none;
}
.table-bottom-box {
position: relative;
}
.filter-content-box #selectedDate {
font-size: 0.9rem;
color: #555;
margin-top: 10px;
}
.filter-content-box .tag-container {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 0;
}
.filter-content-box .tag {
background-color: #e9f5ff;
color: #0d6efd;
border-radius: 7px;
padding: 4px 10px;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
transition: background-color 0.2s;
}
.filter-content-box .tag:hover {
background-color: #d7ebff;
}
.filter-content-box .tag .remove-tag {
cursor: pointer;
font-size: 1rem;
line-height: 1;
color: #0d6efd;
}
.filter-content-box {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* ========== Tracking-modal ========== */
.tracking-modal .modal-dialog {
max-width: 620px;
width: 100%;
}
.tracking-modal .modal-content {
border-radius: 7px;
}
.tracking-modal .modal-header {
background-color: rgba(245, 245, 245, 1);
border-color: rgba(228, 228, 228, 1);
border-radius: 7px 7px 0 0;
padding: 20px 30px;
}
.tracking-modal .track-container {
background: transparent;
border-radius: 0;
max-width: 100%;
padding: 30px;
}
.tracking-modal .track-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.tracking-modal .modal-header .track-header h5 {
font-weight: 600;
font-size: 24px;
line-height: 100%;
text-transform: uppercase;
color: var(--text-black);
margin-bottom: 0;
}
.tracking-modal .modal-header .track-header p {
font-weight: 600;
font-size: 18px;
line-height: 100%;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 0;
}
.tracking-modal .modal-header .track-header p span {
color: var(--text-main);
}
.tracking-modal .track-step {
position: relative;
padding-left: 50px;
margin-bottom: 0;
}
.tracking-modal .track-step.active::before {
background-color: rgba(38, 165, 65, 1);
}
.tracking-modal .track-step::before {
content: "";
position: absolute;
left: 17px;
top: 36px;
/* top: 0; */
height: calc(100% + 13px);
width: 2px;
background: rgba(233, 246, 236, 1);
}
.tracking-modal .track-step:last-child::before {
display: none;
}
.tracking-modal .track-step .track-icon {
position: absolute;
left: 0;
top: 0;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: rgba(38, 165, 65, .1);
display: flex;
align-items: center;
justify-content: center;
color: rgba(38, 165, 65, 1);
font-size: 20px;
line-height: 1;
z-index: 1;
}
.tracking-modal .track-step.active .track-icon {
background-color: rgba(38, 165, 65, 1);
color: #fff;
}
.tracking-modal .track-step .track-icon .active-img,
.tracking-modal .track-step.active .track-icon .normal-img {
display: none;
transition: all .4s ease-in-out;
}
.tracking-modal .track-step .track-icon .normal-img,
.tracking-modal .track-step.active .track-icon .active-img {
display: block;
transition: all .4s ease-in-out;
}
.tracking-modal .traking-content-info {
margin-bottom: 50px;
}
.tracking-modal .track-step:last-child .traking-content-info {
margin-bottom: 0;
}
.tracking-modal .track-step h6 {
font-weight: 500;
font-size: 22px;
line-height: 1;
text-align: left;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 15px;
padding-top: 5px;
}
.tracking-modal .track-step h6 span {
color: var(--text-main);
}
.tracking-modal .track-step small {
font-weight: 500;
font-size: 16px;
line-height: 25px;
text-transform: capitalize;
color: var(--text-black);
display: block;
text-align: left;
}
.tracking-modal .track-step time {
font-weight: 500;
font-size: 16px;
line-height: 25px;
text-transform: capitalize;
color: var(--text-main);
display: block;
text-align: left;
}
.new-track-box {
background-color: #fff;
padding: 20px;
box-shadow: 10px -6px 34px 0px rgba(0, 0, 0, 0.11);
border: 1px solid rgba(195, 195, 195, 1);
border-radius: 7px;
display: none;
position: absolute;
left: auto;
right: 250px;
top: 80px;
max-width: 290px;
width: 100%;
z-index: 1;
}
.track-card p {
font-weight: 500;
font-size: 16px;
line-height: 1;
text-align: left;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 15px;
}
.form-group .form-control:focus,
.form-group .form-control {
border: 1px solid rgba(195, 195, 195, 1);
padding: 10px 20px;
font-weight: 400;
font-size: 14px;
line-height: 1;
text-transform: capitalize;
color: rgba(115, 119, 145, 1);
border-radius: 7px;
outline: 0;
box-shadow: none;
}
.track-card a {
display: inline-block;
font-weight: 500;
font-size: 16px;
line-height: 1;
text-align: center;
text-transform: capitalize;
color: var(--text-main);
text-decoration: none;
margin: 0 auto;
}
.blog-title-box {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 20px;
flex-wrap: wrap;
}
.blog-title-box h4 {
font-weight: 600;
font-size: 32px;
line-height: 118%;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 0;
}
.blog-title-box a {
position: static;
}
/* ======== */
.customer-product-work {
padding: 100px 1rem;
}
.works-progess-box .col {
position: relative;
}
.works-progess-box .customer-card-box {
position: relative;
}
.works-progess-box .customer-card-box .customer-product-card-box {
position: relative;
max-width: 360px;
width: 100%;
}
.works-progess-box .col .customer-card-box .customer-card-img {
background-color: rgba(233, 156, 14, .1);
color: var(--primary-red);
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
max-width: 108px;
width: 100%;
height: 108px;
border-radius: 7px;
overflow: hidden;
margin: 0 auto;
}
.works-progess-box .col:nth-child(2n) .customer-card-box .customer-card-img {
background-color: rgba(242, 242, 244, 1);
color: rgba(1, 3, 38, 1);
}
.works-progess-box .col:last-child .customer-card-box .customer-product-card-box {
margin: 0 auto;
}
.works-progess-box .col .customer-card-box::after {
content: '';
background-image: url(../img/icons/arrow-line.png);
background-position: 85% center;
background-repeat: no-repeat;
background-size: 145px 12px;
position: absolute;
top: 95px;
right: -120px;
height: 12px;
width: 100%;
}
.works-progess-box .col:nth-child(2n) .customer-card-box::after {
content: '';
background-image: url(../img/icons/arrow-line1.png);
background-position: 90% center;
background-repeat: no-repeat;
background-size: 145px 12px;
position: absolute;
top: 95px;
right: -120px;
height: 12px;
width: 100%;
}
.customer-product-work .col:last-child .customer-card-box::after {
display: none;
}
.customer-product-work .customer-card-body {
padding: 16px 0;
}
.customer-product-work .customer-card-body span {
font-weight: 600;
font-size: 16px;
line-height: 26px;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 9px;
display: inline-block;
}
.customer-product-work .col:last-child .step-img {
display: none;
}
.customer-card-body {
padding: 10px 0 0;
}
.customer-card-body h5 {
font-weight: 600;
font-size: 22px;
line-height: 26px;
text-align: center;
text-transform: uppercase;
color: var(--text-black);
margin-bottom: 10px;
}
.customer-card-body p {
font-weight: 400;
font-size: 14px;
line-height: 130%;
text-align: center;
color: var(--text-main);
max-width: 300px;
width: 100%;
margin: 0 auto;
}
.works-progess-box .col .customer-card-body p {
max-width: 300px;
}
.works-progess-box .col:nth-child(2n) .customer-card-body p {
max-width: 330px;
}
.inner-tab-content .dashboard-card-box {
background: rgba(244, 235, 225, 1);
border-radius: 0;
width: 100%;
height: 100%;
padding: 0px;
}
.inner-tab-content > .row > .col:nth-of-type(even) .dashboard-card-box {
background: rgba(229, 229, 229, 1);
}
.inner-tab-content .dashboard-card-box .stat-box {
justify-content: center;
align-items: flex-start;
padding: 35px 0;
}
.inner-tab-content .dashboard-card-box .stat-box img {
margin-top: 10px;
}
/* ======= core-strengths-section ======== */
.core-strengths-section {
background-image: url(../img/our_core_strengths.png);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
width: 100%;
position: relative;
padding: 100px 1rem;
}
.core-strengths-section .left-section-title h4 {
font-weight: 600;
font-size: 45px;
line-height: 125%;
text-transform: capitalize;
color: rgba(1, 3, 38, 1);
}
/* ======= contact-section ======== */
.contact-section {
padding: 100px 1rem;
}
.contact-card {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 15px;
width: 100%;
}
.mail-box {
max-width: 55px;
width: 100%;
height: 55px;
overflow: hidden;
border-radius: 7px;
border: 1px solid rgba(228, 34, 34, 1);
background-color: rgba(228, 34, 34, 0.05);
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(228, 34, 34, 1);
font-size: 30px;
line-height: 1;
}
.contact-body span {
font-weight: 400;
font-size: 16px;
line-height: 1;
text-transform: capitalize;
color: var(--text-black);
display: inline-block;
}
.contact-body p {
font-weight: 600;
font-size: 22px;
line-height: 31px;
text-transform: lowercase;
color: var(--text-main);
margin-bottom: 0;
}
.location-card .contact-body p {
text-transform: capitalize;
}
.scan-box {
max-width: 125px;
width: 100%;
height: 125px;
font-size: 105px;
border-color: rgba(2, 2, 46, 1);
background-color: transparent;
color: var(--text-black);
}
.scan-card .contact-body span {
max-width: 98px;
width: 100%;
display: inline-block;
line-height: 1.4;
}
.contact-info h4 {
font-weight: 600;
font-size: 24px;
line-height: 118%;
text-transform: uppercase;
color: var(--text-black);
margin-bottom: 20px;
}
.contact-form label {
font-weight: 500;
font-size: 16px;
line-height: 1;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 10px;
}
.contact-form .form-group {
margin-bottom: 0px;
}
.contact-form .form-group .form-control {
padding: 16px 20px;
line-height: 1.2;
}
.contact-form .form-group textarea.form-control {
border-radius: 7px;
padding: 20px;
}
/* ===== privacy-section ====== */
.privacy-section {
padding: 100px 1rem;
}
.privacy-section .privacy-content-box {
max-width: 1120px;
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 25px;
height: 100%;
}
.privacy-section .privacy-box h4 {
font-weight: 600;
font-size: 40px;
line-height: 140%;
text-transform: uppercase;
color: var(--text-black);
margin-bottom: 10px;
}
.privacy-section .privacy-box p {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: var(--text-main);
margin-bottom: 0;
}
.privacy-section .privacy-box .sub-pag {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: var(--text-main);
margin-bottom: 12px;
display: block;
}
.privacy-section .privacy-box ul {
padding: 0 0 0 20px;
margin: 0;
list-style-type: disc;
}
.privacy-section .privacy-box ul li {
font-weight: 500;
font-size: 16px;
line-height: 1.4;
color: var(--text-main);
margin-bottom: 5px;
}
.privacy-section .privacy-box ul li:last-child {
margin-bottom: 0;
}
.privacy-section .privacy-box ul li span {
font-weight: 600;
color: var(--text-black);
display: inline-block;
margin-bottom: 0;
}
/* ======== */
.location-input {
position: relative;
margin-bottom: 1rem;
}
.location-input i {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
color: #666;
cursor: pointer;
}
.location-input input {
width: 100%;
padding: 10px 15px 10px 40px;
border-radius: 7px;
border: 1px solid #ddd;
outline: none;
}
.map-container {
position: absolute;
top: 0;
right: 0;
width: 100%;
max-width: 600px;
height: 452px;
background: #fff;
transition: right 0.4s ease-in-out;
z-index: 999;
border-radius: 0 7px 7px 0;
/* box-shadow: -4px 0 10px rgba(0,0,0,0.1); */
display: none;
padding: 15px;
}
.map-container.show {
right: -96%;
display: block;
}
.map-section {
min-height: 360px;
}
.map {
width: 100%;
height: 360px;
}
.map-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border-bottom: 1px solid #ddd;
}
.order-details-content {
border: 1px solid rgba(195, 195, 195, 1);
border-radius: 7px;
padding: 20px;
height: 100%;
margin-bottom: 20px;
}
.order-details-content p {
font-weight: 500;
font-size: 16px;
line-height: 1.4;
color: var(--text-main);
margin-bottom: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
width: 100%;
}
.order-details-content p:last-child {
margin-bottom: 0;
}
.order-details-content p span {
font-weight: 600;
}
.c-111 {
color: var(--text-black);
}
.order-info {
position: relative;
}
.order-info::before {
content: '';
border-left: 1px dashed rgba(59, 153, 0, 1);
height: calc(100% - 60px);
width: 1px;
position: absolute;
left: 7px;
top: 0;
}
.order-info .delivery-info {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
width: 100%;
}
.order-info .delivery-info img {
position: relative;
z-index: 1;
background-color: #fff;
}
.order-info .delivery-info .deliver-details span {
color: var(--text-main);
font-size: 14px;
line-height: 1;
font-weight: 400;
display: block;
margin-bottom: 5px;
}
.order-info .delivery-info .deliver-details p {
color: var(--text-black);
font-size: 18px;
line-height: 1;
font-weight: 500;
margin-bottom: 20px;
}
.order-details-content h4 {
color: var(--text-black);
font-size: 24px;
line-height: 1;
font-weight: 500;
margin-bottom: 10px;
}
/* ============= */
.client-feedback-box {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
width: 100%;
box-shadow: 0px 14px 54px 0px rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, .8);
max-width: 300px;
border-radius: 7px;
padding: 10px;
position: absolute;
left: 1rem;
bottom: 50px;
z-index: 1;
}
.client-feedback-box .video-embade-box {
position: relative;
max-width: 86px;
width: 100%;
height: 86px;
overflow: hidden;
border-radius: 7px;
box-shadow: 0px 14px 54px 0px rgba(0, 0, 0, 0.1);
}
.client-feedback-box .video-embade-box img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.play-btn {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 30px;
line-height: 1;
}
.play-btn:hover {
color: var(--primary-blue);
}
.video-card-body p {
font-weight: 600;
font-size: 16px;
line-height: 120%;
color: var(--text-black);
margin-bottom: 0;
text-transform: capitalize;
}
.video-card-body p span {
color: var(--primary-blue);
}
/* ======= Social Bar ======= */
.social-bar {
position: fixed;
top: 50%;
right: 0px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 0px;
z-index: 100;
}
.social-bar a {
width: 40px;
height: 40px;
background-color: #ff6600;
color: #fff;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
font-size: 20px;
font-weight: 400;
box-shadow: 0px 14px 54px 0px rgba(0, 0, 0, 0.1);
}
.social-bar a:nth-of-type(odd) {
background-color: var(--primary-blue);
}
.social-bar a:nth-of-type(even) {
background-color: var(--primary-red);
}
.social-bar a:first-child {
border-radius: 7px 0 0 0;
}
.social-bar a:last-child {
border-radius: 0 0 0 5px;
}
/* Hover animation */
.social-bar a:hover {
transform: scale(1.1) rotate(5deg);
background-color: #ffffff;
color: var(--primary-red);
box-shadow: 0px 14px 54px 0px rgba(0, 0, 0, .6);
}
.my-custom-tooltip .tooltip-inner {
background-color: var(--primary-blue);
font-weight: 600;
font-size: 16px;
line-height: 1;
color: #fff;
text-transform: capitalize;
border-radius: 7px;
padding: 10px 15px;
}
.my-custom-tooltip.bs-tooltip-top .tooltip-arrow::before {
border-top-color: var(--primary-red);
}
.my-custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
border-bottom-color: var(--primary-red);
}
/* ===== Corporate-Section ======== */
.corporate-section{
background-image: url(../img/banner-img1.png);
background-repeat: no-repeat;
background-position: bottom center;
background-size: auto;
width: 100%;
position: relative;
padding: 100px 0 350px 0;
margin: 0px 0 100px 0;
}
.corporate-travel-box{
color: #666;
line-height: 25px;
margin-top: -15px;
}
.corporate-travel-content-box{
background: #ffffff;
padding: 20px;
border-radius: 7px;
}
.corporate-travel-btn-box{
display: inline-grid;
gap: 15px;
font-size: 22px;
margin: 10px 0 0 0;
}
.corporate-travel-btn-box strong{
color: var(--text-black);
}
.corporate-travel-btn-box a{
width: fit-content;
margin: 15px 0 0 0;
}
/* ===== Holiday-section ======== */
.holiday-section{
padding: 50px 1rem 100px 1rem;
}
.holiday-card {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 15px;
width: 100%;
height: 100%;
margin-bottom: 0;
text-decoration: none;
border: 1px solid var(--border-color);
padding: 10px;
border-radius: 7px;
background: #ffffff;
}
.holiday-card-img {
border-radius: 7px;
height: 100%;
/*max-height: 290px;*/
width: 100%;
overflow: hidden;
position: relative;
}
.holiday_tag_left{
position: absolute;
left: 20px;
top:20px;
background: #154B86;
border-radius: 7px;
color: #fff;
padding: 5px 15px;
}
.holiday_tag_right{
position: absolute;
right: 20px;
top:20px;
background: var(--primary-red);
border-radius: 7px;
color: #fff;
padding: 5px 15px;
}
.holiday_tag_tour_count{
position: absolute;
right: 20px;
top:20px;
background: #154B86;
border-radius: 7px;
color: #fff;
padding: 5px 15px;
}
.holiday_tag_best_time{
position: absolute;
left: 20px;
top:60px;
background: var(--primary-red);
border-radius: 7px;
color: #fff;
padding: 5px 15px;
}
.holiday-card-img img {
width: 100% !important;
transform: scale(1);
transition: all .4s ease-in-out;
}
.holiday-card-img img:hover {
transform: scale(1.1);
transition: all .4s ease-in-out;
}
.holiday-body{
width: 100%;
}
.holiday-body span {
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: var(--text-main);
margin-bottom: 10px;
display: block;
}
.holiday-body h4 {
font-weight: 600;
font-size: 24px;
line-height: 140%;
color: var(--text-black);
margin-bottom: 12px;
height: 30px;
overflow: hidden;
text-overflow: ellipsis;
}
.holiday-body h4 > a {
color: var(--text-black);
text-decoration: none;
}
.holiday-body h4 > a:hover {
color: var(--primary-red);
}
.holiday-body h2 {
font-weight: 600;
font-size: 40px;
line-height: 140%;
text-transform: uppercase;
color: var(--text-black);
margin-bottom: 10px;
text-align: left;
}
.related-blog .holiday-card:hover .holiday-body h4 {
color: var(--primary-red);
}
.holiday-body p {
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: var(--text-main);
margin-bottom: 0;
/*max-height: 48px;*/
overflow: hidden;
text-overflow: ellipsis;
display: block;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3; /* Limits the content to 2 lines */
text-overflow: ellipsis;
}
.holiday-body .holiday_price_inner{
color: var(--text-black);
font-size: 22px;
font-weight: 700;
display: flex;
justify-content: flex-start;
gap: 5px;
align-items: baseline;
}
.holiday-body .holiday_price_inner span{
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: var(--text-main);
}
.holiday-body .holiday_ul_list{
margin: 10px 0 5px 0;
}
.holiday-body .holiday_ul_list ul{
color: var(--text-main);
margin-top:8px;
}
.holiday-body .holiday_ul_list li{
color: var(--text-main);
font-size: 14px;
margin: 0 0 4px 0;
line-height: 18px;
}
.holiday-body .holiday_price_div{
display: flex;
justify-content: space-between;
gap:10px;
margin: 5px 0;
align-items: baseline;
}
.inner-holiday-section .holiday-body p {
height: auto;
overflow: visible;
max-height: 100%;
font-weight: 500;
}
.inner-holiday-section .holiday-body h4 {
height: auto;
/*max-height: 67px;*/
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2; /* Limits the content to 2 lines */
text-overflow: ellipsis;
}
.holiday-body a {
margin-top: 0px;
display: inline-block;
}
.holiday-list h5 {
font-weight: 600;
font-size: 20px;
line-height: 1.2;
text-transform: capitalize;
color: var(--text-black);
margin-bottom: 10px;
}
.holiday-list ul {
padding: 0 0 0 20px;
margin: 0;
}
.holiday-list ul li {
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: var(--text-main);
margin-bottom: 10px;
}
.holiday-list ul li:last-child {
margin-bottom: 0;
}
/* ===== Voice of success-Section ======== */
.voiceofsuccess-section{
padding: 70px 1rem 100px 1rem;
margin: 50px 0;
background: #F7F8FA;
}
.voiceofsuccess-card {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 15px;
width: 100%;
height: 100%;
margin-bottom: 0;
text-decoration: none;
}
.swiper-container .voiceofsuccess-card {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 15px;
width: 90%;
height: 100%;
margin-bottom: 0;
text-decoration: none;
margin: 0 5%;
}
.voiceofsuccess-card-img {
border-radius: 7px;
height: auto;
/*max-height: 290px;*/
width: auto;
overflow: hidden;
position: absolute;
top:0px;
left: 15px;
padding-right: 15px;
}
.swiper-container .voiceofsuccess-card-img {
border-radius: 7px;
height: auto;
/*max-height: 290px;*/
width: auto;
overflow: hidden;
position: absolute;
top:0px;
left: 80px;
padding-right: 15px;
}
.voiceofsuccess-card-img img {
width: auto !important;
}
.voiceofsuccess-card-img img.icon_quote{
position: absolute;
border: 0;
bottom: 0;
right: 0px;
}
.voiceofsuccess-body{
width: 100%;
border: 1px solid var(--border-color);
padding: 10px;
border-radius: 7px;
background: #fff;
margin: 70px 0 0 0;
padding: 70px 20px 20px 20px;
}
.voiceofsuccess-body span {
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: var(--text-main);
margin-bottom: 10px;
display: block;
}
.voiceofsuccess_rating{
display: flex;
gap: 5px;
justify-content: flex-end;
align-items: center;
text-align: right;
margin-top: -45px;
}
.voiceofsuccess_rating img{
width: 23px !important;
}
.voiceofsuccess_details {
margin: 30px 0 30px 0;
}
.voiceofsuccess-body p {
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: var(--text-main);
margin-bottom: 0;
/*max-height: 70px;*/
overflow: hidden;
text-overflow: ellipsis;
display: block;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3; /* Limits the content to 2 lines */
text-overflow: ellipsis;
}
.voiceofsuccess-body .voiceofsuccess_ul_list{
margin: 10px 0 5px 0;
}
.voiceofsuccess-body .voiceofsuccess_ul_list ul{
color: var(--text-main);
margin-top:5px;
}
.voiceofsuccess-body .voiceofsuccess_ul_list li{
color: var(--text-main);
font-size: 15px;
margin: 0 0 4px 0;
}
/* ===== engagementsevent-section ======== */
.engagementsevent-section{
padding: 50px 1rem 50px 1rem;
margin: 0 0 50px;
}
.engagementsevent-card {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 0px;
width: 100%;
height: 100%;
margin-bottom: 0;
text-decoration: none;
border: 1px solid var(--border-color);
padding: 15px;
border-radius: 7px;
}
.engagementsevent-card-img {
border-radius: 7px;
height: 100%;
/*max-height: 290px;*/
width: 100%;
overflow: hidden;
position: relative;
}
.engagementsevent-card-img img {
width: 100% !important;
}
.engagementsevent-body{
width: 100%;
padding: 10px 0 0 10px;
}
.engagementsevent-body span {
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: var(--text-main);
margin-bottom: 10px;
display: block;
}
.engagementsevent-body h4 {
font-weight: 700;
font-size: 24px;
line-height: 140%;
color: var(--text-black);
margin-bottom: 12px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; /* Number of lines to show */
-webkit-box-orient: vertical;
}
.engagementsevent-body p {
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: var(--text-main);
margin-bottom: 0;
display: block;
}
.engagementsevent-body .engagementsevent_price_div{
display: flex;
justify-content: space-between;
gap:10px;
margin: 20px 0 5px 0;
align-items: baseline;
}
.engagementsevent-body a {
margin-top: 0px;
display: inline-block;
}
/* ===== Countdow-Section ======== */
.countdown-section{
padding: 40px 1rem;
}
.countdownStart-section {
display: flex;
justify-content: center;
text-align: center;
color: #fff;
}
.countdownStart-box {
flex: 1;
padding: 25px;
background: var(--primary-blue);
display: flex;
justify-content: center;
gap: 15px;
align-items: center;
}
.countdownStart-box .countdownStart-text {
text-align: left;
}
.countdownStart-text h3{
font-size: 22px;
font-weight: 700;
line-height: 26px;
margin: 0 0 5px 0;
text-transform: uppercase;
color: #fff;
}
.countdownStart-text p{
font-size: 16px;
margin: 0;
color: #fff;
line-height: 20px;
}
.countdownStart-box:nth-child(even) {
background: var(--primary-red);
}
.countbox1{
border-radius: 15px 0 0 15px;
}
.countbox4{
border-radius: 0 15px 15px 0;
}
.countdownStart-box img{
width: auto;
height: auto;
}
.counter {
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
}
/* ===== our partner section ======== */
.ourpartners-section{
padding: 50px 1rem 50px 1rem;
margin: 0 0 50px;
}
.ourpartners-box-gsapsa{
display: grid;
gap: 15px;
grid-template-columns: repeat(2, 1fr);
}
.ourpartners-box-gsapsa img{
border: 1px solid var(--border-color);
padding: 25px;
border-radius: 7px;
width: 100%;
height: 100%;
object-fit: contain;
}
.ourpartners-box-partner{
display: grid;
gap: 15px;
grid-template-columns: repeat(3, 1fr);
}
.ourpartners-box-partner img{
border: 1px solid var(--border-color);
padding: 55px 30px;
border-radius: 7px;
width: 100%;
height: 100%;
object-fit: contain;
}
/* ===== inner page breadcrumb ======== */
.breadcrumb_img_div {
position: relative;
}
.breadcrumb_img_div::before {
content: "";
position: absolute;
inset: 0;
background-image:
url(../img/breadcrumb/breadcrumb_icon_left.png),
url(../img/breadcrumb/breadcrumb_icon_right.png);
background-position: left bottom, top right;
background-repeat: no-repeat, no-repeat;
background-size: auto, auto; /* or adjust as needed */
z-index: 2;
}
.page_breadcrum_section{
position: relative;
background-color: var(--bg-light);
background-image: url(../img/icons/red_arrow2.png);
background-position: bottom 5px left 5px;
background-repeat: no-repeat;
background-size: auto;
padding: 35px 1rem;
border-bottom: 1px solid #edeef1;
}
.page_breadcrum_section.thankyou_page{
position: relative;
background-color: #fff;
background-image: url(../img/icons/red_arrow_thankyou.png);
background-position: bottom 5px left 5px;
background-repeat: no-repeat;
background-size: auto;
padding: 60px 1rem;
border-bottom: 0;
}
.page_title_div {
display: flex;
justify-content: space-between;
align-items: center;
}
.page_breadcrumb h3{
color: var(--text-black);
font-size: 30px;
font-weight: 700;
line-height: 110%;
margin:0;
text-transform: uppercase;
}
.page_breadcrumb p{
color: var(--text-black);
font-weight: 600;
margin: 0;
font-size: 16px;
line-height: 18px;
}
.page_breadcrumb a{
text-decoration: none;
color: var(--text-main);
}
.page_breadcrumb a:hover{
color: var(--primary-red);
text-decoration: underline;
}
.corporate_travel_banner {
margin: 0px 1rem;
position: relative;
padding: 50px 0 0 0;
}
.corporate-travel-we-offer{
background: #ffffff;
padding: 70px 1rem;
position: relative;
}
.corporate-travel-we-offer.corporate_page{
background: #F7F8FA;
}
.corporate-travel-why-choose-sata{
padding: 90px 1rem;
position: relative;
}
.corporate_travel_text{
margin: 30px 1rem;
}
.image_radius_16 img{
border-radius: 7px;
}
.image_radius_20 img{
border-radius: 7px;
}
.bottom_border{
border-bottom: 2px solid;
border-color: var(--border-color);
height: 10px;
}
.corporate-travel-description {
margin: 10px 0 30px 0;
padding-top: 15px;
}
.corporate-travel-description h3{
font-size: 24px;
font-weight: 600;
color: var(--text-black);
line-height: 28px;
}
.corporate-travel-description_grid{
display: flex;
justify-content: space-between;
gap: 50px;
}
.corporate-travel-description_grid > div {
width: 100%;
}
.corporate-travel-description_grid p{
color: var(--text-main);
line-height: 24px;
font-size: 18px;
}
.image_left{
padding-right: 20px;
}
.image_right{
padding-left: 20px;
}
.corporate-travel-we-offer .corporate-travel-btn-box,
.corporate-travel-why-choose-sata .corporate-travel-btn-box{
color: var(--text-black);
display: inline-grid;
gap: 15px;
margin: 10px 0 0 0;
font-size: 16px;
}
.corporate-travel-we-offer .corporate-travel-btn-box strong,
.corporate-travel-why-choose-sata .corporate-travel-btn-box strong{
font-size: 18px;
}
.corporate-travel-we-offer .corporate-travel-btn-box ul,
.corporate-travel-why-choose-sata .corporate-travel-btn-box ul{
color: var(--text-black);
}
.corporate-travel-we-offer .corporate-travel-btn-box ul li,
.corporate-travel-why-choose-sata .corporate-travel-btn-box ul li{
color: var(--text-black);
margin: 0 0 8px;
font-weight: 600;
}
.corporate_travel_ul_grid {
display: flex;
justify-content: space-between;
gap: 20px;
}
.corporate_travel_ul_grid ul{
width: 100%;
}
.corporate-travel-box-extra strong{
color: var(--text-black);
font-size: 20px;
margin: 0 0 10px 0;
display: block;
}
.corporate-travel-box-extra{
font-size: 16px;
}
/* ===== services - page ======== */
.services_banner_div{
position: relative;
}
.services_banner_text{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
color: #ffffff;
text-align: center;
padding: 0 20%;
}
.services_banner_text p{
color: #fff;
}
.service_navigation{
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.service_navigation .page_nav_item{
color: var(--text-black);
text-decoration: none;
background: #fff;
border-radius: 7px;
padding: 0;
width: 45px;
height: 45px;
text-align: center;
line-height: 45px;
border: 1px solid var(--border-color);
font-weight: 600;
}
.service_navigation .prev,
.service_navigation .next{
color: var(--text-black);
text-decoration: none;
background: #fff;
border-radius: 7px;
padding: 0;
width: 45px;
height: 45px;
text-align: center;
line-height: 45px;
border: 1px solid var(--border-color);
font-weight: 600;
}
.service_navigation .page_nav_item.active{
color: #fff;
text-decoration: none;
background: var(--primary-red);
border-radius: 7px;
padding: 0;
width: 45px;
height: 45px;
text-align: center;
line-height: 45px;
border: 1px solid var(--primary-red);
}
.service_navigation .page_nav_item:hover{
color: #fff;
background: var(--primary-red);
border: 1px solid var(--primary-red);
}
/* ===== about - page ======== */
.ourjourney-section{
background: #F7F8FA;
padding: 70px 1rem;
margin: 0 0 50px 0;
position: relative;
}
.ourjourney-section::after{
content: "";
position: absolute;
top: 30px;
left: 0;
width: 170px;
height: 380px;
background: url(../img/about/our_journey_icon.png) no-repeat center / contain;
z-index: 2;
}
.timeline-section {
text-align: center;
padding: 60px 20px;
}
/* Timeline container */
.timeline {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
margin: 0 auto;
}
/* Dotted line */
.timeline::before {
content: "";
position: absolute;
top: 20px;
left: 0;
right: 0;
height: 3px;
background: repeating-linear-gradient(
to right,
var(--primary-red),
var(--primary-red) 10px,
transparent 10px,
transparent 20px
);
z-index: 1;
}
/* Each item */
.timeline-item {
width: 15%;
min-width: 160px;
position: relative;
text-align: center;
z-index: 2;
}
/* Icons */
.timeline-icon {
width: 60px;
height: 60px;
margin: 0 auto 15px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
position: relative;
}
.timeline-icon.blue {
/*background-color: #002855;*/
}
.timeline-icon.orange img{
transform: rotate(180deg);
/*background-color: #ff7f32;*/
}
/* Text */
.timeline-item h3 {
font-size: 24PX;
margin-bottom: 10px;
color: var(--text-black);
margin-top: 30px;
FONT-WEIGHT: 700;
}
.timeline-item h4 {
font-size: 18px;
color: var(--text-black);
margin-bottom: 10px;
FONT-WEIGHT: 600;
}
.timeline-item p {
font-size: 1rem;
color: #666;
line-height: 1.4;
}
/* Responsive */
@media (max-width: 900px) {
.timeline {
flex-direction: column;
align-items: center;
}
.timeline::before {
display: none;
}
.timeline-item {
width: 100%;
max-width: 400px;
margin-bottom: 40px;
}
}
.ourleadership-section{
margin: 30px 1rem 50px 1rem;
position: relative;
}
.ourleadership-content-box{
border: 1px solid var(--border-color);
border-radius: 7px;
padding: 20px;
margin: 0 0 30px 0;
}
.ourleadership-content-box-grid{
border: 1px solid var(--border-color);
border-radius: 7px;
padding: 15px;
margin: 0 0px 20px 0;
display: grid;
gap:15px;
background: #fff;
}
.ourleadership-content-box > .row{
align-items: center;
}
.ourleadership-content-box-text{
}
.ourleadership-content-box-text h4{
color: var(--text-black);
font-size: 32px;
line-height: 36px;
font-weight: 600;
}
.ourleadership-content-box-text h5{
color: var(--text-black);
font-size: 20px;
line-height: 24px;
font-weight: 600;
margin-bottom: 20px;
}
.ourleadership-content-box-text p{
color: var(--text-black);
}
.ourleadership-content-box-text-grid h4{
color: var(--text-black);
font-size: 28px;
line-height: 30px;
font-weight: 600;
}
.ourleadership-content-box-text-grid h5{
color: var(--text-black);
font-size: 18px;
line-height: 20px;
font-weight: 600;
margin-bottom: 15px;
}
.ourleadership-content-box-text-grid p{
color: var(--text-black);
}
/*--- service details ---*/
.keyfeatures-section{
background-color: rgba(247, 248, 250, 1);
height: 100%;
padding: 100px 1rem;
}
.keyfeatures-content-body{
width: 100%;
border: 1px solid var(--border-color);
padding: 10px;
border-radius: 7px;
background: #fff;
margin: 0px 0 0 0;
padding: 20px;
}
.keyfeatures-content-body img{
margin-bottom: 10px;
}
.keyfeatures-content-body h4{
font-size: 22px;
}
.keyfeatures-content-body p{
font-size: 14px;
}
/* Button to open popup */
.popup-overlay {
display: none;
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 / 82%);
justify-content: flex-end;
z-index: 1000;
height: 100%;
height: 100vh;
bottom: 0;
}
/* Popup box */
.popup-box {
background: white;
border-radius: 15px 0 0 15px;
padding: 25px;
width: 90%;
max-width: 580px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
position: relative;
animation: fadeIn 0.3s ease-in-out;
overflow: auto;
}
.popup-box-body{
padding: 40px 50px;
}
.popup-box-body .section-title h3{
font-size: 26px;
}
.popup-box-body .contacct_form_block {
margin-bottom: 10px;
}
.popup-box-body button.submit-btn{
margin-top: 20px;
width: 100%;
}
.or-divider {
display: flex;
align-items: center;
text-align: center;
color: #555;
font-weight: 500;
}
.or-divider::before,
.or-divider::after {
content: "";
flex: 1;
border-bottom: 1px solid #999;
}
.or-divider::before {
margin-right: 12px;
}
.or-divider::after {
margin-left: 12px;
}
.login-box-social{
margin: 20px 0;
display: flex;
justify-content: space-between;
gap: 15px;
}
.login-box-social a{
border: 1px solid var(--border-color);
border-radius: 7px;
padding: 10px;
text-decoration: none;
font-size: 15px;
}
.login-box-social a:hover{
border: 1px solid var(--primary-red);
}
.login-box-signUp-link {
text-align: center;
font-size: 16px;
line-height: 110%;
color: var(--text-black-dark);
margin-top:10px ;
font-family: "Gilroy-Medium", sans-serif;
}
.login-box-signUp-link p{
font-size: 16px;
line-height: 110%;
color: var(--text-black-dark);
font-family: "Gilroy-Bold", sans-serif;
}
.login-box-signUp-link a{
color: var(--primary-red);
text-decoration: none;
font-family: "Gilroy-Bold", sans-serif;
}
.login-box-signUp-link a:hover{
color: var(--primary-blue);
}
.term_of_use > div{
display: flex !important;
justify-content: flex-start;
gap: 10px;
align-items: flex-start;
}
.term_of_use input{
margin-top:5px;
}
@media (max-width: 600px)
.popup-box {
max-width: 85%;
}
}
/* Close button */
.close-btn {
position: absolute;
top: 12px;
right: 15px;
font-size: 20px;
background: none;
border: none;
cursor: pointer;
}
.popup-box-header{
display: flex;
justify-content: right;
align-items: center;
gap: 20px;
padding: 0;
border-radius: 0;
}
.enquire_form{
padding: 0px;
}
/* Form fields */
input[type="tel"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
input[type="date"]{
width: 100%;
margin-top: 10px;
margin-bottom: 15px;
padding: 10px 15px;
border-radius: 7px;
border: 1px solid #ccc;
font-size: 15px;
}
textarea {
width: 100%;
margin-top: 10px;
margin-bottom: 15px;
padding: 10px 15px;
border-radius: 7px;
border: 1px solid #ccc;
font-size: 15px;
}
input[type="radio"]{
accent-color: var(--primary-red);
width: 18px;
height: 18px;
cursor: pointer;
}
.close-btn{
border: 0;
font-size: 29px;
background: no-repeat;
padding: 0;
margin: 0 0 .5rem 0;
}
.close-btn:hover{
font-weight: bolder;
color: #F26B17;
}
/* Submit button */
button.submit-btn {
background-color: var(--primary-blue);
color: white;
border: none;
padding: 16px 28px;
border-radius: 7px;
font-size: 16px;
cursor: pointer;
border: 1px solid var(--primary-blue);
margin-bottom: 15px;
}
.reset-btn{
background: #ffffff;
color: var(--primary-red);
padding: 16px 28px;
border-radius: 7px;
font-size: 16px;
cursor: pointer;
border: 1px solid var(--primary-red);
margin-right: 15px;
margin-bottom: 15px;
font-weight: 500;
font-size: 16px;
line-height: 100%;
text-align: center;
text-transform: capitalize;
}
.reset-btn:hover{
background: var(--primary-red);
border-color: var(--primary-red);
color: #ffffff;
}
.popup-box button.submit-btn:hover{
background: var(--primary-red);
border: 1px solid var(--primary-red);
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.thankyou-section{
padding: 60px 1rem;
}
.thankyou_container{
width: 100%;
max-width: 630px;
margin: auto;
text-align: center;
}
@media (max-width: 767px)
.thankyou_container {
max-width: 90%;
}
}
.thankyou_container img{
width: auto;
max-width: 100%;
}
.thankyou_container h1{
font-weight: 700;
margin: 10px 0;
}
.thankyou_container h4{
font-weight: 500;
font-size: 18px;
color: var(--text-main);
}
.thankyou_container p{
font-size: 14px;
line-height: 20px;
}
.success_btn{
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin: 25px 0 0 0;
}
.success_btn a{
font-size: 14px;
padding: 12px 25px;
font-weight: 500;
}
.destination_option{
background: transparent;
border: 0;
color: var(--text-black);
font-weight: 600;
font-size: 16px;
line-height: 100%;
position: absolute;
top: 15px;
right:5px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
}
.destination_option select{
background: transparent;
border: 0;
color: var(--text-black);
font-weight: 600;
font-size: 16px;
line-height: 100%;
border: 1px solid var(--border-color);
border-radius: 7px;
padding: 5px 15px;
}
.price_option{
background: transparent;
border: 0;
color: var(--text-black);
font-weight: 600;
font-size: 16px;
line-height: 100%;
}
/* ===== Photos Section ======== */
.photos-section,
.itinerary-section{
padding: 50px 1rem 100px 1rem;
}
.photos-section .section-title,
.itinerary-section .section-title{
display: flex;
justify-content: space-between;
margin: 0 0 10px 0;
}
.photos-section .section-title h5,
.itinerary-section .section-title h5{
text-align: left;
font-weight: 700;
font-size: 26px;
}
.photos-section .section-title .view-btn{
position: unset;
}
.photos-content-box img{
max-width: 100%;
width: 100%;
border-radius: 7px;
margin: 10px 0 10px 0;
}
.bg_gray{
background: #F7F8FA;
}
.itinerary-content-box{
border-bottom: 1px solid var(--border-color);
padding-bottom: 30px;
}
.event_details_itinerary_section .itinerary-content-box{
border-top: 1px solid var(--border-color);
border-bottom: 0;
padding-top: 50px;
padding-bottom: 30px;
}
.itinerary-content-container{
padding-top: 40px !important;
border-top: 1px solid var(--border-color);
}
.itinerary-content-box-inner > div{
color: var(--text-black);
font-size: 20px;
margin: 0 0 10px 0;
font-weight: 500;
}
.itinerary-content-box-inner strong{
color: var(--text-black);
font-size: 20px;
}
.itinerary-content-box ul,
.itinerary-content-box ul li{
color: var(--text-main);
}
.itinerary-content-box ul li{
color: var(--text-main);
margin: 0 0 6px 0;
}
.package-info-section{
padding: 70px 1rem 70px 1rem;
}
.package-info-content-box{
}
.package-info-content-box-inner{
}
.package-info-content-box-inner ul{
list-style: none;
padding: 0 0 0 8px;
}
.package-info-content-box-inner ul li{
color: var(--text-black);
font-weight: 500;
margin: 0 0 8px 0;
}
.package-info-content-box-inner.right_click ul li{
background: url(../img/holiday/right_icon.png) no-repeat left center;
padding-left: 30px;
list-style: none;
}
.package-info-content-box-inner.cross_click ul li{
background: url(../img/holiday/close_icon.png) no-repeat right center;
padding-right: 30px;
list-style: none;
}
.package-title-section{
padding: 0 1rem 20px 1rem;
}
.package-title-with-btn{
display: flex;
justify-content: space-between;
gap: 20px;
align-items: flex-start;
}
.package-title-with-btn h3{
text-align: left;
}
.right_side_anchor{
display: flex;
justify-content: flex-end;
gap: 20px;
align-items: center;
width: 200px;
margin-top:5px;
}
.icon {
transition: 0.3s ease;
}
.right_side_anchor a:hover .icon{
transform: scale(1.2);
}
.package-details-with-btn{
display: flex;
justify-content: space-between;
gap: 20px;
margin: 0 0 25px 0;
align-items: flex-start;
}
.package-details-duration-price{
display: flex;
justify-content: flex-start;
gap: 25px;
align-items: flex-start;
}
.package-details-duration-price > div{
display: grid;
gap: 5px;
}
.package-details-duration-price h4{
font-size: 22px;
font-weight: 700;
color: var(--text-black);
line-height: 26px;
}
.package-details-duration-price span{
font-size: 16px;
color: #524f4f;
line-height: 20px;
}
.package-details-btns{
display: flex;
justify-content: flex-end;
gap: 15px;
align-items: center;
}
.btn.general-btn{
border-color: var(--text-main);
border-radius: 7px;
padding: 10px 28px;
color: var(--text-black);
background: #fff;
font-weight: 600;
}
.btn.general-btn:hover,
.general-btn.active{
border-color: var(--primary-blue);
color: #ffffff;
background: var(--primary-blue);
}
.btn.contact-btn{
border-color: var(--primary-red);
border-radius: 7px;
padding: 10px 28px;
color: var(--primary-red);
background: #fff;
}
.btn.contact-btn:hover{
border-color: var(--primary-blue);
color: #ffffff;
background: var(--primary-blue);
}
#navbarSupportedContent .dropdown-menu .dropdown-item:after{
display: none !important;
}
.login-box .dropdown-menu {
right: 0;
left: unset;
}
.login-box .dropdown-menu li a.dropdown-item{
padding-top: 10px;
padding-bottom: 10px;
}
.login-box .dropdown-menu li a.dropdown-item:hover{
background: var(--primary-blue);
color: #ffffff;
}
.uae_attraction_ul_div ul li{
font-weight: 400 !important;
}
.uae_attraction_ul_div ul li strong{
font-size: inherit !important;
}
.blog_page_top{
justify-content: space-between;
gap: 20px;
}
.destination_option_blog_left{
background: transparent;
border: 0;
color: var(--text-black);
font-weight: 600;
font-size: 16px;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0px;
width: 100%;
}
.blog_page_top h3{
width: 100%;
}
.destination_option_blog_right{
background: transparent;
border: 0;
color: var(--text-black);
font-weight: 600;
font-size: 16px;
line-height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
width: 100%;
}
.destination_option_blog_right select{
background: transparent;
border: 0;
color: var(--text-black);
font-weight: 600;
font-size: 16px;
line-height: 100%;
border: 1px solid var(--border-color);
border-radius: 7px;
padding: 5px 15px;
}
.blog_search{
background: #fff;
color: var(--text-main);
border: 1px solid var(--border-color);
border-radius: 7px 0 0 7px;
padding: 10px 22px 10px 30px;
width: 250px;
background: url(../img/search_icon.png) left 12px center no-repeat;
margin: 0;
}
.destination_option_blog_left .blog_search{
width: 100%;
}
.blog_search_btn{
background: var(--primary-red);
color: #fff;
border: 1px solid var(--primary-red);
border-radius: 7px;
padding: 10px 25px;
margin-left: -20px;
}
.blog_date_view{
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
/*-- events --*/
.events-widget-box .article-card {
flex-direction: unset;
}
.events-widget-box .artical-body{
width: 60%;
}
.events-widget-box .article-card-img{
height: 100%;
max-height: 100%;
width: 40%;
}
.events-widget-box .artical-body p {
font-size: 14px;
max-height: fit-content;
}
.events-widget-box .article-card-img img {
height: 100%;
}
.event_details_itinerary_section {
padding-top: 0;
padding-bottom: 0;
}
.gallery-widget-box{
}
.gallery-card{
display: grid;
gap: 10px;
border: 1px solid var(--border-color);
border-radius: 7px;
background: #fff;
padding: 15px;
}
.gallery-card h4,
.gallery-card p{
margin: 0;
}
.gallery_article_top{
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.gallery_article_top_1{
display: flex;
justify-content: flex-start;
align-items: center;
gap: 15px;
}
.gallery_article_top_1_right{
display: grid;
gap: 0px;
}
.gallery_article_bottom_inner{
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.gallery_article_bottom_inner_1{
display: flex;
justify-content: flex-start;
align-items: center;
gap: 25px;
}
.gallery_article_bottom > p{
font-size: 13px;
line-height: 18px;
margin-bottom: 14px;
}
.gallery_article_bottom_inner_1 p{
display: flex;
justify-content: flex-end;
align-items: center;
}
.gallery_article_bottom_inner_2 img{
transition: 0.3s ease;
}
.gallery_article_bottom_inner_2 a:hover img{
transform: scale(1.2);
}
.contact_page_title{
text-align: center;
display: grid;
gap: 10px;
max-width: 90%;
margin: 0 auto 30px auto;
}
.feedback_contact_page_title{
width: 100%;
max-width: 100%;
}
.contact_map img{
width: 100%;
height: auto;
border-radius: 7px;
}
.contact_store{
max-height: 800px;
overflow: auto ;
}
.contact_map_address_card{
display: grid;
gap: 10px;
border: 1px solid var(--border-color);
border-radius: 7px;
background: #fff;
padding: 20px;
position: relative;
margin-left: 10px;
}
.contact_map_address_card::before{
content: "";
position: absolute;
top: 50%;
left: -11px;
background: none;
z-index: 3;
height: 23px;
width: 23px;
}
.contact_map_address_card.active::before,
.contact_map_address_card:hover::before{
content: "";
position: absolute;
top: 50%;
left: -11px;
background: url(../img/contact/map_arrow.png) no-repeat;
z-index: 3;
height: 23px;
width: 23px;
}
.contact_map_address_card h4{
font-size: 20px;
line-height: 26px;
margin: 0;
}
.contact_postoffice{
background: url(../img/contact/PO_icon.png) no-repeat left top 3px;
padding: 0 0 0 30px;
font-size: 14px;
line-height: 140%;
font-weight: 400;
margin: 0;
}
.contact_address{
background: url(../img/contact/map_icon.png) no-repeat left top 3px;
padding: 0 0 0 30px;
font-size: 14px;
line-height: 140%;
font-weight: 400;
margin: 0;
}
.contact_phone{
background: url(../img/contact/phone_icon.png) no-repeat left top 3px;
padding: 0 0 0 30px;
font-size: 14px;
line-height: 140%;
font-weight: 400;
margin: 0;
}
.contact_email{
background: url(../img/contact/email_icon.png) no-repeat left top 3px;
padding: 0 0 0 30px;
font-size: 14px;
line-height: 140%;
font-weight: 400;
margin: 0;
}
.contact_time{
background: url(../img/contact/clock_icon.png) no-repeat left top 3px;
padding: 0 0 0 30px;
font-size: 14px;
line-height: 140%;
font-weight: 400;
margin: 0;
}
.contact_map_address_card.active,
.contact_map_address_card:hover{
background: var(--primary-blue);
color: #ffffff;
cursor: pointer;
}
.contact_map_address_card.active,
.contact_map_address_card:hover{
background: var(--primary-blue);
color: #ffffff;
cursor: pointer;
}
.contact_map_address_card.active h4,
.contact_map_address_card:hover h4,
.contact_map_address_card.active .contact_postoffice,
.contact_map_address_card:hover .contact_postoffice,
.contact_map_address_card.active .contact_address,
.contact_map_address_card:hover .contact_address,
.contact_map_address_card.active .contact_phone,
.contact_map_address_card:hover .contact_phone,
.contact_map_address_card.active .contact_email,
.contact_map_address_card:hover .contact_email,
.contact_map_address_card.active .contact_time,
.contact_map_address_card:hover .contact_time{
color: #ffffff;
}
.contact_map_address_card.active .contact_postoffice,
.contact_map_address_card:hover .contact_postoffice{
background: url(../img/contact/PO_icon_hover.png) no-repeat left top 3px;
}
.contact_map_address_card.active .contact_address,
.contact_map_address_card:hover .contact_address{
background: url(../img/contact/map_icon_hover.png) no-repeat left top 3px;
}
.contact_map_address_card.active .contact_phone,
.contact_map_address_card:hover .contact_phone{
background: url(../img/contact/phone_icon_hover.png) no-repeat left top 3px;
}
.contact_map_address_card.active .contact_email,
.contact_map_address_card:hover .contact_email{
background: url(../img/contact/email_icon_hover.png) no-repeat left top 3px;
}
.contact_map_address_card.active .contact_time,
.contact_map_address_card:hover .contact_time{
background: url(../img/contact/clock_icon_hover.png) no-repeat left top 3px;
}
.contact-widget-box{
border: 1px solid var(--border-color);
border-radius: 10px;
}
.contact-widget-box iframe{
border-radius: 10px 0 0 10px;
}
.contact-page-form-div{
margin: 0;
border-radius: 0 10px 10px 0;
background: #fff;
padding: 20px;
}
.no_border_full{
border: 0 !important;
padding: 0 !important;
}
.border_full{
border-radius: 10px;
}
.contact-page-form-div form{
display: grid;
gap: 15px;
}
.contacct_form_block{
display: flex;
justify-content: space-between;
align-items: center;
gap:20px;
color: var(--text-black);
}
.contacct_form_block label{
color: var(--text-black);
}
.contacct_form_block > div{
width: 100%;
}
.top_holiday_distance{
display: flex !important;
justify-content: flex-start;
gap: 5px;
align-items: center;
margin: 0 0 5px 0;
font-size: 14px !important;
}
.top_holiday_destination .holiday-body p{
font-size: 15px;
line-height: 20px;
margin: 0 0 10px 0;
}
.top_holiday_destination .holiday-body .holiday_price_inner span{
margin: 0;
}
.top_holiday_destination .holiday-body {
position: relative;
}
.top_holiday_destination .fly-img-box {
position: absolute;
top: 0;
right: 0px;
transition: all .4s ease-in-out;
}
.top_holiday_distance img {
width: auto !important;
}
.top_holiday_destination .fly-img-box:hover img {
transform: scale(1.1);
}
.privacy_policy_tab{
}
.privacy_policy_tab_box{
display: flex;
justify-content: center;
gap: 15px;
margin: 40px 0 20px 0;
}
.privacy_policy_tab .clickable-id{
border: 1px solid var(--border-color);
padding: 7px 25px;
border-radius: 7px;
background: #fff;
color:var(--text-black);
margin: 0 0px 15px 0;
text-align: center;
cursor: pointer;
font-size: 14px;
}
.privacy_policy_tab .clickable-id.active,
.privacy_policy_tab .clickable-id:hover{
border: 1px solid var(--primary-blue);
padding: 7px 25px;
border-radius: 7px;
background: var(--primary-blue);
color: #fff;
}
.privacy-policy-description{
width: 100%;
float: none;
}
.privacy-policy-description h3{
margin-bottom: 20px;
text-align: left;
font-size: 30px;
line-height: 35px;
}
.privacy-policy-description ,
.privacy-policy-description li,
.privacy-policy-description p{
margin-bottom: 10px;
color: var(--text-main);
font-size: 16px;
line-height: 22px;
}
.career_job_search_div {
display: flex;
justify-content: center;
}
.career_job_search_div select{
padding: 7px 25px;
margin: 0 0 10px 0;
color: var(--text-main);
font-weight: 400;
width: auto;
}
.career_search_btn{
padding: 11px 30px;margin-bottom: 10px;
}
.right_side_anchor_share{
display: flex;
gap: 10px;
justify-content: flex-end;
margin-right: 10px;
}
.right_side_anchor_share a{
background: #E1E1E1;
border-radius: 50%;
text-align: center;
/*height: 40px;
width: 40px;
line-height: 40px;*/
padding: 8px 10px;
}
.right_side_anchor_share i{
color: var(--text-black);
font-size: 17px;
}
.right_side_anchor_share a:hover {
background: #EA6916;
}
.right_side_anchor_share a:hover i{
color: #fff;
}
.close-btn-video{
position: absolute;
margin: 0 !important;
padding: 0px !important;
right: -18px;
top: -23px;
background: #fff !important;
border-radius: 50%;
text-align: center;
align-items: center;
height: 40px;
width: 40px;
line-height: 40px;
}
.play-video-box{
border: 5px solid #fff;
border-radius: 7px;
border-bottom: 0px;
}
.play-video-box video{
border-radius: 7px;
}
/* swiper slider */
.swiper-pagination-bullet{border: 1px solid #1da1f2;}.swiper-pagination-bullet-active{background:#1da1f2}
.swiper-container img:not([draggable]), embed, object, video {
max-width: 100%;
height: auto;
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
z-index: 1
}
.swiper-container-no-flexbox .swiper-slide {
float: left
}
.swiper-container-vertical>.swiper-wrapper {
-webkit-box-orient: vertical;
-ms-flex-direction: column;
flex-direction: column
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
box-sizing: content-box
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.swiper-container-multirow>.swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.swiper-container-free-mode>.swiper-wrapper {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative
}
.slider-image {
height: 100%;
}
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: auto
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: -webkit-transform, height;
-webkit-transition-property: height, -webkit-transform;
transition-property: height, -webkit-transform;
transition-property: transform, height;
transition-property: transform, height, -webkit-transform
}
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000
}
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
touch-action: pan-y
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
touch-action: pan-x
}
.swiper-button-next,
.swiper-button-prev {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: .35;
cursor: auto;
pointer-events: none
}
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: .3s;
transition: .3s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0
}
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: .2
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
appearance: none
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer
}
.swiper-pagination-white .swiper-pagination-bullet {
background: #fff
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #007aff
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000
}
.swiper-container-vertical>.swiper-pagination-bullets {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0)
}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 5px 0;
display: block
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px
}
.swiper-pagination-progress {
background: rgba(0, 0, 0, .25);
position: absolute
}
.swiper-pagination-progress .swiper-pagination-progressbar {
background: #007aff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left top;
transform-origin: left top
}
.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
-webkit-transform-origin: right top;
transform-origin: right top
}
.swiper-container-horizontal>.swiper-pagination-progress {
width: 100%;
height: 4px;
left: 0;
top: 0
}
.swiper-container-vertical>.swiper-pagination-progress {
width: 4px;
height: 100%;
left: 0;
top: 0
}
.swiper-pagination-progress.swiper-pagination-white {
background: rgba(255, 255, 255, .5)
}
.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
background: #fff
}
.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
background: #000
}
.swiper-container-3d {
-webkit-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px
}
.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d
}
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10
}
.swiper-container-coverflow .swiper-wrapper,
.swiper-container-flip .swiper-wrapper {
-ms-perspective: 1200px
}
.swiper-container-cube,
.swiper-container-flip {
overflow: visible
}
.swiper-container-cube .swiper-slide,
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1
}
.swiper-container-cube .swiper-slide .swiper-slide,
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.swiper-container-cube .swiper-slide {
visibility: hidden;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
width: 100%;
height: 100%
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-next+.swiper-slide,
.swiper-container-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
-webkit-transition-property: opacity;
transition-property: opacity
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center
}
.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain
}
.swiper-scrollbar {
border-radius: 7px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, .1)
}
.swiper-container-horizontal>.swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%
}
.swiper-container-vertical>.swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, .5);
border-radius: 7px;
left: 0;
top: 0
}
.swiper-scrollbar-cursor-drag {
cursor: move
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite
}
.swiper-lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg)
}
}
@keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
.swiper-container.one {
padding-top: 40px;
text-align: center;
}
.swiper-container.one .swiper-slide {
padding: 0 43px;
}
.swiper-container {
width: 100%;
padding-bottom: 100px;
}
.swiper-slide img {
/*display: block;
margin: auto;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;*/
max-height: 100%;
}
.swiper-slide {
width: 390px;
height: auto;
padding: 0 15px;
}
.two .swiper-slide {
width: 300px;
}
/*.swiper-slide img {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}*/
.swiper-slide .slider-image .preview-icon {
z-index: -1;
width: calc(100% - 30px);
}
.swiper-slide.swiper-slide-active .slider-image:hover .preview-icon {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
z-index: 1;
}
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 0;
}
.swiper-pagination-bullet {
background: transparent none repeat scroll 0 0;
border: 1px solid #176fcb;
border-radius: 7px;
display: inline-block;
height: 10px;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 10px;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.swiper-pagination-bullet-active {
background: rgba(0, 0, 0, 0) linear-gradient(to right, #176fcb 0%, #3ac9b5 100%) repeat scroll 0 0;
border: medium none;
height: 12px;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 12px;
}
.swiper-slide-shadow-left,
.swiper-slide-shadow-right{
background: unset !important;
}
.swiper-button-prev{
/*top: unset !important;
left: calc(50% - 37px) !important;
transform: translate(-50%, -50%);*/
right: unset !important;
bottom: -10px;
background-image: unset !important;
}
.swiper-button-next{
/*top: unset !important;
right: calc(50% - 37px) !important;
transform: translate(-50%, -50%);*/
left: unset !important;
bottom: -10px;
background-image: unset !important;
}
.swiper-button-prev svg,
.swiper-button-next svg{
display: none !important;
}
.swiper-button-prev::after, .swiper-container-rtl .swiper-button-next::after{
content: "\F284";
font-family: 'bootstrap-icons';
font-size: 25px;
color: var(--primary-blue);
border-radius: 7px;
}
.swiper-button-prev:hover::after, .swiper-container-rtl .swiper-button-next:hover::after{
color: var(--primary-red);
}
.swiper-button-next::after, .swiper-container-rtl .swiper-button-prev::after{
content: "\F285";
font-family: 'bootstrap-icons';
font-size: 25px;
color: var(--primary-blue);
border-radius: 7px;
}
.swiper-button-next:hover::after, .swiper-container-rtl .swiper-button-prev:hover::after{
color: var(--primary-red);
}
/* Default hamburger icon */
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* Close (X) icon when menu is open */
.navbar-toggler.close-icon .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280,0,0,1%29' stroke-width='2' stroke-linecap='round' d='M7 7l16 16M23 7L7 23'/%3E%3C/svg%3E");
}
/*-- Bulk Buy Banner --*/
.bulk-buy-request-section{
padding: 40px 1rem 60px 1rem;
margin-bottom: 20px;
}
.bulk-buy-request-wrapper{
background-image: url(../img/bulk_buy_request_bg.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 50px 2rem 50px 2rem;
text-align: center;
height: 260px;
max-height: 300px;
border-radius: 15px;
}
.bulk-buy-request-wrapper h4{
color: #fff;
font-size: 28px;
text-transform: uppercase;
line-height: 34px;
font-weight: 600;
margin: 0 0 10px 0;
}
.bulk-buy-request-wrapper p{
color: #fff;
font-size: 16px;
margin: 0 0 30px 0;
}
.bulk-buy-request-wrapper a{
}
/*-- brand --*/
.brand-section{
padding: 40px 1rem;
}
.brand-cursol-slider .brand_slide{
background: var(--bg-light);
padding: 20px;
border-radius: 20px 0 20px 0;
height: 150px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.brand-cursol-slider .brand_slide::after{
content: "";
position: absolute;
top: 12px;
right: 12px;
background-image: url(../img/icons/red_arrow2.png);
background-repeat: no-repeat;
background-position: top right;
background-size: 28px;
width: 30px;
height: 30px;
}
.brand-cursol-slider .owl-item:nth-child(even) .brand_slide::after{
content: "";
position: absolute;
bottom: 12px;
right: 12px;
background-image: url(../img/icons/red_arrow2.png);
background-repeat: no-repeat;
background-position: bottom right;
background-size: 28px;
width: 30px;
height: 30px;
top: unset;
}
.brand-cursol-slider .brand_slide > img{
width: auto;
text-align: center;
}
.brand-cursol-slider .owl-nav.disabled{
display: none !important;
}
/*-- Product --*/
.products-slider-section{
padding: 40px 1rem;
margin: 20px 0 30px 0;
}
.best-selling-products-section{
padding: 60px 1rem;
margin: 50px 0 30px 0;
background: var(--bg-light);
}
.product-card{
background:#fff;
position:relative;
}
.best-selling-products-section .product-card{
background:var(--bg-light);
}
.badge{
background: #ffffff;
color: #1ea84f;
padding: 6px 12px;
border-radius: 7px;
font-size: 14px;
position: absolute;
top: 12px;
left: 12px;
border: 1px solid #1ea84f;
line-height: 14px;
}
.product-img{
text-align:center;
background: var(--bg-light);
border-radius: 15px;
}
.best-selling-products-section .product-img {
background: #ffffff;
}
.product-img img{
width:100%;
border-radius: 15px;
}
.product-title{
font-size: 18px;
margin: 12px 0 15px 0;
line-height: 125%;
color: var(--text-main);
font-weight: 500;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
}
.product-title a{
text-decoration: none;
color: var(--text-main);
}
.product-title a:hover{
color: var(--primary-red);
}
.product_pices{
margin: 5px 0 15px 0;
}
.product_pices select{
margin: 0;
}
.product_pices select option:hover,
.product_pices select option:focus,
.product_pices select option:active {
background: linear-gradient(var(--primary-), var(--primary-red)); /* Use your primary blue */
color: #fff !important;
}
.product_pices {
width: 100%; /* Fits your product card width */
position: relative;
margin-top: 10px;
}
.custom-select {
position: relative;
user-select: none;
}
.select-trigger {
padding: 8px 12px;
border: 1px solid var(--border-color);
background: #fff;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-size: 14px;
}
.options-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border: 1px solid var(--border-color);
border-top: none;
border-radius: 0 0 7px 7px;
display: none;
z-index: 999; /* Higher z-index to overlap following products */
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.custom-select.open .options-list {
display: block;
}
.product_pices .option {
padding: 8px 12px;
cursor: pointer;
font-size: 14px;
}
/* Custom Hover Color */
.product_pices .option:hover {
background-color: #2b3d8f;
color: white;
}
.product_pices .arrow { font-size: 12px; color: var(--text-main); }
.price-table{
width:100%;
margin-bottom:10px;
}
.price-table .price_list{
display:flex;
justify-content:space-between;
margin-bottom:6px;
font-size:15px;
color: var(--text-black);
}
.price-table .price_list.heading_price_list strong{
font-size:17px;
color: var(--text-main);
}
.price-table .price_list.heading_price_list span{
font-weight: 300;
font-size: 15px;
color: var(--text-main);
}
.price-table strong{
color:#000;
}
.qty-box{
display:flex;
align-items:center;
gap:0px;
margin:12px 0 15px;
}
.qty-box button{
width:38px;
height:38px;
border-radius:7px;
border:1px solid var(--border-color);
background:#fff;
cursor:pointer;
font-size:18px;
}
.qty-box button.qty_minus{
border-radius:5px 0 0 5px !important;
}
.qty-box button.qty_plus{
border-radius: 0 5px 5px 0 !important;
margin-right: 12px;
}
.qty-box input{
width:55px;
text-align:center;
border:1px solid var(--border-color);
border-radius:0;
height:38px;
margin:0;
border-right: 0;
border-left: 0;
padding: 5px;
padding-inline: 0;
padding-block: 0;
line-height: 100%;
}
.unit{
margin-left:auto;
color:var(--text-main);
}
.cart-btn{
width:100%;
padding:12px 15px;
background:var(--primary-blue);
color:#fff;
border:1px solid var(--primary-blue);
border-radius:7px;
cursor:pointer;
font-size:18px;
font-family: "Gilroy-Light";
}
.cart-btn:hover{
background:var(--primary-red);
color: #ffffff;
border:1px solid var(--primary-red);
}
.quote-btn{
width:100%;
padding:12px 15px;
background: #fff;
color:var(--primary-red);
border: 1px solid var(--primary-red);
border-radius:7px;
cursor:pointer;
font-size:18px;
font-family: "Gilroy-Light";
font-weight: 600;
}
.quote-btn:hover{
background:var(--primary-blue);
color: #ffffff;
border: 1px solid var(--primary-blue);
}
.best-selling-products-section .section-title{
margin-bottom: 20px;
}
.best-selling-products-section .owl-carousel.owl-theme .owl-nav,
.best-selling-products-section .owl-carousel.owl-theme .owl-nav.disabled,
.best-selling-products-section .team-cursol-box .owl-carousel .owl-nav,
.best-selling-products-section .opportunities-widget-box .owl-carousel .owl-nav{
top: -133px;
}
.explore_related_product .owl-carousel.owl-theme .owl-nav,
.explore_related_product .owl-carousel.owl-theme .owl-nav.disabled{
top: -90px;
}
.product_cat_tab{
margin-top: 0px;
margin-bottom: 20px;
}
.tab-container {
display: flex;
gap: 0px;
margin-bottom: 30px;
justify-content: center;
}
.tab-item {
padding: 12px 25px;
border: 1px solid var(--text-black);
border-right: 0;
background: #ffffff;
color: var(--text-black);
}
.tab-item:first-child {
border-radius: 10px 0 0 10px;
}
.tab-item:last-child {
border-radius: 0 10px 10px 0;
border-right: 1px solid var(--text-black);
}
.tab-item.active {
background: #EC2226;
border-color: #EC2226;
color: #fff;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.clickied_style{
list-style: none;
padding: 5px 0 0 0;
margin: 5px 0 0 0;
}
.clickied_style li{
background: url(../img/icons/ul_li_icon.png) no-repeat center left;
padding: 0 0 0 30px;
margin: 0 0 10px 0;
color: var(--text-main);
font-size: 16px;
color: var(--text-main);
line-height: 22px;
font-family: "Gilroy-Light", sans-serif;
}
.why-aussiemed-section{
padding: 50px 1rem 0 1rem;
}
.our_service_card{
background: var(--bg-light);
border-radius: 10px;
flex-direction: row;
justify-content: flex-start;
padding: 20px;
gap: 15px;
}
.our_service_card .article-card-img{
width: 120px;
}
.our_service_card .artical-body{
width: 100%;
}
.our_tema_card{
flex-direction: row;
justify-content: flex-start;
padding: 0px;
gap: 25px;
/*align-items: center;*/
}
.our_tema_card .article-card-img{
width: 100%;
}
.our_tema_card .artical-body{
width: 100%;
}
.our_tema_card .artical-body h4{
margin-bottom: 5px;
}
.our_tema_card .artical-body p{
margin-bottom: 15px;
}
.our_tema_card .artical-body span{
margin-bottom: 30px;
font-family: "Gilroy-Light", sans-serif;
font-weight: 600;
}
#our-team-section{
padding: 50px 0 5px 0;
}
.body_bottom_icon{
background: url(../img/icons/body_bottom_right_icon.png) no-repeat right bottom 10px;
}
.section_bottom_icon{
padding: 0 1rem;
}
.div_bottom_icon{
background: url(../img/icons/body_bottom_right_icon.png) no-repeat right bottom 30px;
height: 100px;
}
.contact-map-section{
padding: 70px 5rem;
}
.contact-map-section.bulk_request{
padding: 70px 10rem;
}
.contact-page-form-section {
padding: 30px 10rem;
}
.contact_page_informations{
display: flex;
justify-content: space-between;
gap: 50px;
color: #666;
}
.contact_page_informations .info-box-body span{
color: #666;
font-size: 15px;
margin-bottom: 5px;
line-height: 110%;
}
.contact_page_informations .info-box-body p,
.contact_page_informations .info-box-body a{
color: var(--text-black);
font-size: 18px !important;
line-height: 24px;
font-weight: 700;
font-family: "Gilroy-Medium", sans-serif;
}
.contact_page_informations .info-box-body a:hover{
color: var(--primary-red);
}
.contact_page_right_form_title{
margin: 0 0 30px 0;
}
.contact_page_right_form_title h3{
text-align: left;
font-size: 24px;
line-height: 120%;
margin: 0 0 5px 0;
}
.contact_page_right_form_title p{
text-align: left;
font-size: 15px;
line-height: 130%;
}
.contact_page_informations .footer-info-box img{
width: 45px;
}
.contact_radio_option_wrapper{
margin: 10px 0 0 0;
display: flex;
justify-content: flex-start;
gap: 20px;
}
.enquire_form_wrapper{
display: flex;
justify-content: space-between;
gap:50px;
margin-bottom: 20px;
}
.enquire_form_left{
}
.enquire_form_right{
}
.contact_radio_option_wrapper > div{
display: flex;
gap: 5px;
align-items: center;
font-size: 15px;
}
.contact_btn_wrapper{
display: unset;
flex-direction: row-reverse;
margin-top: 30px;
}
/* Thankyou page */
.quotation-card {
background: var(--bg-light);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 15px 20px 0px 20px;
margin: 20px 3rem 30px 3rem;
}
.quotation-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.quotation-header h3 {
font-size: 20px;
font-weight: 700;
margin: 0;
line-height: 120%;
}
.quotation-id {
font-size: 13px;
font-weight: 600;
}
.quotation-body .quotation-body-part {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
.quotation-body .quotation-body-product{
display: grid;
gap: 5px;
justify-content: normal;
}
.quotation-body .label {
font-size: 15px;
color: var(--text-black);
min-width: 120px;
text-align: left;
font-weight: 500;
}
.quotation-body .value {
font-size: 15px;
font-weight: 600;
color: var(--text-black);
}
.quotation-body .product-list {
width: 100%;
padding: 0 0 0 20px;
}
.quotation-body .product {
display: flex;
justify-content: space-between;
font-size: 13px;
margin-bottom: 4px;
}
.quotation-body .product strong {
font-weight: 600;
}
.quotation-body .date-row {
align-items: center;
}
.quotation-body .date-row .quotation-date-time{
display: flex;
justify-content: flex-end;
gap: 10px;
}
.quotation-body .time {
font-size: 15px;
font-weight: 600;
color: var(--text-black);
}
.inner-section{
padding: 50px 1rem;
}
.inner-section h1,
.inner-section h2{
margin: 30px 0 20px 0;
}
.inner-section h3,
.inner-section h4,
.inner-section h5{
margin: 20px 0 10px 0;
}
.inner-section ul{
margin: 5px 0 20px 0;
}
.inner-section ul li{
margin: 8px 0;
}
/*-- Product listing -- */
.products-listing-section{
padding: 60px 1rem;
}
.cat-details-section{
display: flex;
justify-content: space-between;
align-items: center;
gap:20px;
}
.category-title {
text-align: left;
}
.category-title h3{
text-align: left;
margin-bottom: 5px;
}
.category-title p{
text-align: left;
}
.product-listing-toolbar{
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
}
.product-listing-toolbar select{
width: auto;
}
.grid_list_view{
display: flex;
justify-content: flex-end;
align-items: center;
gap: 11px;
font-size: 24px;
}
.grid_list_view a.active,
.grid_list_view a:hover{
color: var(--primary-red);
}
.product-listing-section{
display: flex;
justify-content: space-between;
}
.product-listing-sidebar{
width: 100%;
max-width: 300px;
margin-right: 20px;
height: fit-content;
}
.product-listing-wrapper{
width: 100%;
}
.product-listing-wrapper ul{
display: grid;
/* repeat(5, 1fr) creates 5 equal columns */
grid-template-columns: repeat(5, 1fr);
gap: 25px 20px;
list-style: none;
padding: 0;
margin: 0;
margin-block-start: 0px;
margin-block-end: 0em;
padding-inline-start: 0;
}
.product-listing-wrapper.grid_view{
}
.product-listing-wrapper.list_view{
}
.product-listing-wrapper.list_view ul{
grid-template-columns: unset;
margin-block-start: 0;
}
.product-listing-wrapper.list_view .product-card {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: flex-start;
}
.product-listing-wrapper.list_view .product-img{
width: 220px;
margin: 0;
}
.product-listing-wrapper.list_view .title_pices{
width: auto;
padding: 5px 20px 0 0px;
}
.product-listing-wrapper.list_view .product-title {
overflow: unset;
display: unset;
}
.product-listing-wrapper.list_view .priceTable_qtyBox{
width: 230px;
padding:5px 5px 0 10px;
}
.product-listing-wrapper.list_view .cart-btn,
.product-listing-wrapper.list_view .quote-btn{
width: 200px;
margin-top: 5px;
}
.product-listing-sidebar {
border: 1px solid var(--border-color);
padding: 0px;
color: var(--text-main);
border-radius: 7px;
border-color: #c3c3c3ad;
}
.filter-toggle-btn, .mobile-header {
display: none; /* Hide mobile elements on desktop */
}
.sidebar-title {
font-size: 22px;
font-weight: 700;
/* margin-bottom: 20px; */
border-bottom: 1px solid var(--border-color);
padding-bottom: 10px;
color: var(--text-black);
border-radius: 7px 7px 0 0;
padding: 12px;
line-height: 115%;
background: #F5F5F5;
text-transform: uppercase;
border-color: #c3c3c3ad;
}
/* Accordion Sections */
.filter-section {
margin-bottom: 10px;
padding: 10px 12px;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 0 10px 0;
cursor: pointer;
font-weight: 600;
font-size: 19px;
color: var(--text-black);
line-height: 115%;
margin-bottom: 5px;
}
.toggle-icon {
font-size: 20px;
font-weight: normal;
transition: transform 0.2s;
}
/* List Styling */
.filter-list {
list-style: none;
padding: 0;
margin: 0;
max-height: 1000px;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.filter-list.collapsed {
max-height: 0;
}
.filter-item {
display: flex;
align-items: center;
margin-bottom: 13px;
font-size: 16px;
line-height: 118%;
}
.nested-list {
list-style: none;
padding-left: 20px;
margin-top: 10px;
}
/* Custom Checkbox */
.checkbox-container {
display: flex;
align-items: center;
width: 100%;
cursor: pointer;
position: relative;
}
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
height: 16px;
width: 16px;
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 3px;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.checkbox-container:hover input ~ .checkmark {
border-color: var(--primary-blue);
}
.checkbox-container input:checked ~ .checkmark {
background-color: var(--primary-blue);
border-color: var(--primary-blue);
}
.checkmark:after {
content: "✓";
color: white;
display: none;
font-size: 11px;
}
.checkbox-container input:checked ~ .checkmark:after {
display: block;
}
.item-count {
margin-left: auto;
}
.product-listing-sidebar hr {
border: 0;
border-top: 1px solid var(--border-color);
margin: 0 0 10px 0;
border-color: #8f8d8d;
}
/* Price Range */
.price-controls {
padding: 10px 0;
}
.price-slider {
width: 100%;
height: 4px;
background: #ddd;
position: relative;
margin: 15px 0;
}
.slider-thumb {
width: 12px;
height: 12px;
background: #000;
border-radius: 50%;
position: absolute;
top: -4px;
}
.price-inputs {
display: flex;
gap: 10px;
margin-top: 15px;
}
.price-field {
flex: 1;
}
.price-field label {
display: block;
font-size: 11px;
color: var(--text-black);
margin-bottom: 5px;
}
.price-field input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 12px;
box-sizing: border-box;
}
.filter_apply{
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin: 20px 0 20px 0;
}
.filter_apply a{
font-size: 14px;
padding: 12px 25px;
font-weight: 500;
}
.pagination-container {
display: flex;
align-items: center;
gap: 10px; /* Spacing between boxes */
padding: 20px;
justify-content: center;
margin: 50px 0 20px 0;
}
.page-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
text-decoration: none;
color: #333;
border: 1px solid #ccc;
border-radius: 6px; /* Rounded corners */
font-size: 16px;
transition: all 0.2s ease;
}
/* Hover State */
.page-link:hover,
.page-link.active {
background-color: #1a1a1a; /* Dark background */
color: #ffffff; /* White text */
border-color: #1a1a1a;
}
/* Ellipsis Styling */
.page-dots {
padding: 0 5px;
color: #333;
font-weight: bold;
}
/* Specific styling for arrow icons to match your image size/weight */
.page-link:first-child,
.page-link:last-child {
font-weight: bold;
font-size: 18px;
}
/*-- Cart --*/
.shopping-cart-section{
padding: 10px 1rem 70px 1rem;
}
.cart-container {
max-width: 1000px;
margin: 40px auto;
padding: 20px;
}
/* Stepper Logic */
.stepper {
display: flex;
align-items: baseline;
justify-content: center;
margin-bottom: 40px;
}
.cart-container .step {
text-align: center;
color: var(--text-main);
font-weight: 600;
}
.cart-container .step.active {
color: #000;
}
.cart-container .icon-box {
width: 60px;
height: 60px;
border-radius: 12px;
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
font-size: 24px;
}
.cart-container .step.active .icon-box,
.cart-container .step .icon-box:hover {
background-color: var(--primary-red);
border-color: var(--primary-red);
color: white;
}
.cart-container .step-line {
height: 1px;
background-color: var(--primary-red);
width: 150px;
margin: 0 15px -25px 15px; /* Aligns line with icons */
}
/* Table Styling */
.cart-table-wrapper {
border: 1px solid var(--border-color);
border-radius: 10px;
overflow: hidden;
}
.cart-table {
width: 100%;
border-collapse: collapse;
}
.cart-table th {
background-color: #f8f9fa;
text-align: left;
padding: 15px;
border-bottom: 1px solid var(--border-color);
color: #202020;
background: #F4F5F8;
}
.cart-table td {
padding: 20px 15px;
border-bottom: 1px solid var(--border-color);
vertical-align: middle;
}
.price-wrapper{
display: flex;
justify-content: space-between;
gap: 15px;
}
.cart_item_price_edit .actions{
min-width: 75px;
text-align: right;
padding-right: 10px;
}
.cart-container .product-img {
width: 80px;
height: 80px;
object-fit: contain;
border-radius: 7px;
}
.cart-container .product-info {
max-width: 400px;
font-size: 0.9rem;
line-height: 1.4;
color: var(--text-main);
}
.cart-container .actions {
margin-left: 15px;
cursor: pointer;
font-size: 15px;
}
.cart-container .actions i:hover {
color: var(--primary-red);
}
.cart_product_qty{
width: 55px !important;
padding-right: 2px !important;
padding-left: 10px !important;
text-align: center;
}
/* Buttons */
.cart-container .cart-buttons {
justify-content: flex-start;
}
.cart-container .btn {
padding: 12px 30px;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
font-size: 1rem;
transition: 0.3s;
}
.cart-container .btn-outline {
background: transparent;
border: 1px solid var(--primary-red);
color: var(--primary-red);
}
.cart-container .btn-primary {
background: var(--primary-blue);
border: 1px solid var(--primary-blue);
color: white;
min-width: 200px;
}
.cart-container .btn:hover {
opacity: 0.8;
}
.payment-box input[type="radio"] {
accent-color: #ffbf36;
width: 18px;
height: 18px;
margin-right: 10px;
cursor: pointer;
}
/*-- Product details -- */
.products-details-section{
padding: 60px 1rem;
}
/* Base resets based on your body styles */
.product-details-area {
font-family: "Gilroy-Medium", sans-serif;
color: var(--text-main);
line-height: 1.2;
}
.product-thumbs-slider {
width: 85px;
height: 450px;
}
.product-thumbs-slider .swiper-slide {
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 8px;
cursor: pointer;
background: #fff;
transition: 0.3s;
width: 100%;
}
.product-thumbs-slider .swiper-slide-thumb-active {
border-color: var(--primary-red);
}
.product-main-slider {
flex: 1;
background: var(--bg-light);
border-radius: 12px;
border: 1px solid #f0f0f0;
}
.products-details-section .swiper-slide.swiper-slide-active {
display: flex;
justify-content: center;
align-items: center;
}
/* Icons */
.products-details-section .share-icon,
.products-details-section .zoom-icon {
position: absolute;
top: 15px;
background: #fff;
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
color: var(--text-black);
cursor: pointer;
}
.products-details-section .share-icon { right: 15px; }
.products-details-section .zoom-icon { left: 15px; }
.products-details-section .product-title {
color: var(--text-black-dark);
font-weight: 700;
margin: 0 10px 10px 0;
font-size: 26px;
line-height: 118%;
width: 100%;
overflow: unset;
-webkit-line-clamp: unset;
}
.products-details-section .msds-link {
font-size: 12px;
text-decoration: none;
color: var(--text-black);
border: 1px solid var(--text-black);
padding: 6px 12px;
border-radius: 6px;
width: 180px;
text-align: center;
}
.products-details-section .msds-link:hover{
color: var(--primary-red);
border: 1px solid var(--primary-red);
}
.text-success{
font-weight: 700;
color: #3B9900;
}
.products-details-section .item-number { font-size: 15px; }
.products-details-section .item-number strong { color: var(--text-black-dark); }
/* Variations */
.products-details-section .btn-variation {
border: 1px solid var(--text-black);
color: var(--text-black);
font-size: 13px;
padding: 8px 12px;
background: #fff;
cursor: pointer;
}
.products-details-section .btn-variation.disabled {
border: 1px solid var(--border-color);
color: var(--text-main);
font-size: 13px;
padding: 8px 12px;
background: #fff;
cursor: no-drop;
}
.products-details-section .btn-variation:hover ,
.products-details-section .btn-variation.active {
border-color: var(--primary-red);
color: #fff;
background: var(--primary-red);
}
/* Pricing & Quantity */
.products-details-section .qty-selector {
border: 1px solid var(--border-color);
border-radius: 4px;
background: #fff;
}
.products-details-section .qty-btn {
border: none;
background: none;
padding: 8px 15px;
color: var(--text-black);
font-weight: bold;
}
.products-details-section .qty-input {
border: none;
width: 45px;
text-align: center;
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
color: var(--text-black-dark);
}
.products-details-section .pricing-table td {
color: var(--text-black);
font-weight: 600;
padding: 5px 0;
}
/* Buttons */
.products-details-section .btn-quote {
background: var(--primary-blue);
color: #fff;
border: none;
font-weight: 600;
padding: 12px;
}
.products-details-section .btn-cart {
border: 1.5px solid var(--primary-red);
color: var(--primary-red);
background: #fff;
font-weight: 600;
padding: 12px;
}
/* Accordion */
.accordion-item {
border-bottom: 1px solid var(--border-color) !important;
margin-bottom: 15px;
}
.accordion-item:last-child{
border-bottom: 0 !important;
}
.accordion-button {
color: var(--text-black-dark);
font-weight: 700;
padding: 8px 0 20px 0;
box-shadow: unset !important;
}
.accordion-body{
padding: 10px 0 10px 0;
}
.accordion-button:not(.collapsed) {
background-color: transparent;
color: var(--text-black-dark);
font-size: 20px;
}
.accordion-button.collapsed {
background-color: transparent;
color: var(--text-black-dark);
font-size: 20px;
}
.accordion-item strong {
color: var(--text-main);
}
.accordion-item p {
font-size: 15px;
line-height: 20px;
}
.share-icon:hover {
background: var(--primary-red);
color: #fff;
}
/* Give the vertical thumb container a fixed height */
.product-thumbs-slider {
height: 450px; /* Adjust this to match your image heights */
}
/* Ensure images fit the slide properly */
.product-thumbs-slider .swiper-slide {
height: auto !important;
opacity: 0.5;
transition: 0.3s;
cursor: pointer;
}
/* Highlight the active thumbnail */
.product-thumbs-slider .swiper-slide-thumb-active {
opacity: 1;
border: 1px solid var(--primary-red);
}
.product-main-slider {
width: 100%;
height: 450px; /* Match the thumbs height */
}
.product-main-slider .swiper-slide img {
width: 100%;
height: 100%;
object-fit: contain; /* Keeps product aspect ratio */
}
.zoom-icon {
position: absolute;
bottom: 20px;
left: 20px; /* Adjust based on your preferred design */
background: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
color: var(--text-black);
transition: all 0.3s ease;
}
.zoom-icon:hover {
background: var(--primary-red);
color: #fff;
}
/* Ensure the link covers the slide but doesn't break layout */
.product-main-slider .swiper-slide a {
display: block;
width: 100%;
height: 100%;
outline: none;
}
/* Container must hide the overflow for the zoom effect */
.product-main-slider .swiper-slide {
overflow: hidden;
}
/* The Zoom Effect on Hover */
.product-main-slider .swiper-slide img {
transition: transform 0.5s ease; /* Smooth transition */
cursor: zoom-in;
width: 100%;
height: 100%;
object-fit: contain;
}
.product-main-slider .swiper-slide:hover img {
transform: scale(1.5); /* Adjust this number for more/less zoom */
}
/* Optional: Center the image during zoom */
.product-main-slider .swiper-slide a {
display: flex;
align-items: center;
justify-content: center;
}
.scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 45px;
height: 45px;
background-color: var(--primary-red);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
z-index: 999;
transition: all 0.3s ease;
/* Hidden by default */
opacity: 0;
visibility: hidden;
transform: translateY(20px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.scroll-to-top.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-to-top:hover {
background-color: var(--primary-blue);
color: #fff;
transform: translateY(-5px);
}
.customer_images{
border-radius: 50%;
width: 25px;
}
.customer_avater{
width: 200px;
border-radius: 50%;
}
.my_profile{
border: 1px solid var(--border-color);
padding: 30px;
border-radius: 20px;
margin: 0 5rem;
}
.enquire_form_full{
width: 100%;
}
.my_profile .enquire_form_wrapper {
margin-bottom: 0px;
}
.my_profile .contact_btn_wrapper{
margin-top: 10px;
}
.customer_avater_section{
gap:50px;
align-items: center;
margin: 0 0 20px 0 !important;
justify-content: flex-start;
}
.customer_profile_photo_btn{
display: flex;
justify-content: flex-start;
gap: 20px;
}
.customer_profile_photo_btn .delete-btn{
background-color: #E0E0E0;
color: #666666;
padding: 16px 28px;
border-radius: 7px;
cursor: pointer;
border: 1px solid #E0E0E0;
margin-bottom: 15px;
}
.customer_profile_photo_btn .delete-btn:hover{
background-color: #b9b4b4;
color: #202020;
border: 1px solid #b9b4b4;
}
.login-box.loggedin_customer .dropdown-menu li a.dropdown-item{
display: flex;
align-items: center;
}
.login-box.loggedin_customer .dropdown-menu li a.dropdown-item:hover i{
color: #fff;
}
.login-box.loggedin_customer .dropdown-menu li a.dropdown-item.active{
background: var(--primary-blue);
color: #ffffff;
}
.login-box.loggedin_customer .dropdown-menu li a.dropdown-item.active i{
color: #fff;
}
.my_profile input[type="tel"],
.my_profile input[type="text"],
.my_profile input[type="email"],
.my_profile input[type="password"],
.my_profile input[type="email"],
.my_profile input[type="password"],
.my_profile input[type="number"],
.my_profile select,
.my_profile textarea,
.my_profile input[type="date"]{
color: #5a5a5a;
}
button,
.btn,
.button{
line-height: 120%;
}
.my_orders{
border: 1px solid var(--border-color);
padding: 30px;
border-radius: 10px;
}
/* order_tabs */
.order_tabs {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.order_tab {
padding: 10px 40px;
border: 1px solid var(--primary-blue);
background: white;
cursor: pointer;
font-weight: 500;
color: var(--primary-blue);
}
.order_tab:hover,
.order_tab.active {
background: var(--primary-blue);
color: white;
border-color: var(--primary-blue);
}
.order_tab:nth-child(2) { border-right: 0 }
.order_tab:first-child { border-radius: 10px 0 0 10px; }
.order_tab:last-child { border-radius: 0 10px 10px 0; }
/* Main Card */
.history-card {
background: white;
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px;
margin: 0 auto;
}
.history-card h2{
font-weight: 600;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.view-report {
text-decoration: none;
color: var(--primary-blue);
}
.prod-img {
width: 80px;
height: 80px;
background: #F4F5F8;
padding: 10px;
border-radius: 15px;
}
.prod-name { font-weight: 500;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
/* The magic lines */
-webkit-line-clamp: 2; /* Limits text to 2 lines */
line-clamp: 2;
line-height: 140%;
}
/* Badges & Buttons */
.status-badge {
padding: 8px 15px;
border-radius: 6px;
border: 1px solid #3B9900;
display: block;
text-align: center;
}
.status-badge.sent { color: #3B9900; border-color:#3B9900; background: #EBF5E5; }
.status-badge.pending { color: #EB9721; border-color: #EB9721; background: #FDF5E9; }
.btn-view {
background: #F2F2F2;
border: 1px solid #000000;
padding: 8px 15px;
border-radius: 6px;
color: #000000;
cursor: pointer;
}
.btn-view.disabled,
.already_approved.disabled {
cursor: not-allowed;
}
.already_approved{
color: #CCCCCC;
border: 1px solid #CCCCCC;
background: #fff;
padding: 8px 15px;
border-radius: 6px;
cursor: not-allowed;
}
.btn-view:hover{
background: #29387D;
border-color: #29387D;
color: #ffffff;
}
.btn-view.disabled:hover{
background: unset;
color: unset;
}
.btn-status.approved {
background: transparent;
border: 1px solid;
padding: 8px 15px;
border-radius: 6px;
color: #3B9900; border-color:#3B9900; background: #EBF5E5;
}
.btn-status.approved:hover{
background: #29387D;
border-color: #29387D;
color: #ffffff;
}
/* Container Settings */
.table-div {
width: 100%;
display: flex;
flex-direction: column;
}
.table-header, .table-row {
display: flex;
align-items: center;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 12px;
margin: 0 0 12px 0;
}
.table-header {
background-color: #F5F5F5;
font-weight: 600;
color: var(--text-black);
font-size: 18px;
}
/* Cell Sizing */
.cell {
flex: 1; /* Default width */
padding: 3px 8px 2px 8px;
}
.flex-2 { flex: 2; } /* Wider cells for actions */
.flex-3 { flex: 3; } /* Widest cell for product name */