html,body {
min-height: 100%;
font-size: 16px;
font-family: "Montserrat", serif;
font-weight: 400;
width: 100%;
}
dl, ol, ul {
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
/*COLOR CLASS ========================*/
:root {
--white: #ffffff;
--primary-color: #EDB51E;
--primary-color-rgb: 237, 181, 30;
--secondary-color: #1F1E1E;
--secondary-color-rgb: 31, 30, 30;
--background-color: #F4F4F4;
--light-yellow: #fdf4dd;
--field-color: #8BA3CB;
--gray: #4A505C;
--light-gray: #909091;
--trasparent: transparent;
--black: #000000;
--active-green:#4CAF50;
--delete-color: #ed2c1e;
--danger:#B9231E;
--blue:#1E7FDF;
--theme-blue: rgba(0, 108, 170, 1);
}
.white {
color: var(--white) !important;
}
.blue {
color: var(--blue) !important;
}
.primary-color {
color: var(--primary-color) !important;
}
.secondary-color {
color: var(--secondary-color) !important;
}
.bg-light-primary {
background-color: rgba(var(--primary-color-rgb), 0.1);
}
.bg-light-primary-gradient {
background: linear-gradient(103.63deg, #FFEFC6 38.4%, #FFF3F3 98.92%);
}
.red-color {
color: var(--danger) !important;
}
/*======================================*/
/*CONTAINER=============================*/
@media (min-width: 1200px) {
.container {
max-width: 1030px;
}
}
@media(min-width:1799px){
.container {
max-width: 1200px;
}
}
/*======================================*/
/*EXTRA CLASS===========================*/
.cursor-pointer {
cursor: pointer;
}
.box-shadow {
box-shadow: 0px 2px 8px 0px #0000001F;
}
.border-color-primary {
border-color: var(--primary-color)!important;
}
.border-radius-10 {
border-radius: 10px !important;
}
.border-radius-20 {
border-radius: 20px !important;
}
.border-bottom-black {
border-bottom: 1px solid #98969680;
}
.section {
padding: 60px 0;
}
.object-cover {
object-fit: cover;
}
.h-150-px {
height: 150px;
}
.vh-50 {
height: 50vh;
}
.vh-80 {
height: 80vh;
}
.font-12 {
font-size: 12px;
}
.font-14 {
font-size: 14px;
}
.font-16 {
font-size: 16px;
}
.font-18 {
font-size: 15px;
}
.font-20 {
font-size: 18px;
}
.font-weight-400 {
font-weight: 400;
}
.font-weight-500 {
font-weight: 500;
}
.font-weight-600 {
font-weight: 600;
}
.font-weight-700 {
font-weight: 700;
}
.font-weight-800 {
font-weight: 800;
}
.section-title-v1 {
position: relative;
letter-spacing: 1px;
/* padding-left: 60px;*/
margin-bottom: 20px;
font-weight: 600;
font-size: 16px;
text-transform: uppercase;
color: var(--primary-color);
}
/*.section-title-v1:after {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
width: 40px;
height: 1px;
background-color: var(--secondary-color);
}*/
.section-title-v1.white:after {
background-color: var(--white);
}
/*.right-line {
padding-right: 60px;
}
.right-line:before {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
width: 40px;
height: 1px;
background-color: var(--secondary-color);
}*/
.heading {
font-size: 32px;
color: #000;
font-weight: 600;
text-transform: capitalize;
}
.title-v1 {
font-size: 24px;
font-weight: 800;
}
.subtext-v1 {
font-size: 16px;
}
.small-title-v2 {
font-size: 17px;
font-weight: 700;
margin-bottom: 15px;
}
.z-index-1 {
z-index: 1;
}
.hover-decoratioin-underline:hover {
text-decoration: underline;
}
.d-xxxl-block {
display: block !important;
}
.px-0 {
padding-inline: none !important;
}
.scale-9 {
transform: scale(0.9);
}
.scale-11 {
transform: scale(1.1);
}
.scale-12 {
transform: scale(1.2);
}
.scale-13 {
transform: scale(1.3);
}
.scale-14 {
transform: scale(1.4);
}
.scale-15 {
transform: scale(1.5);
}
.scale-16 {
transform: scale(1.6);
}
.scale-17 {
transform: scale(1.7);
}
.scale-18 {
transform: scale(1.8);
}
@media(max-width:1799px){
.font-20 {
font-size: 16px;
}
.font-18 {
font-size: 14px;
}
.title-v1 {
font-size: 21px;
}
.small-title-v2 {
font-size: 16px;
}
.section {
padding: 60px 0;
}
.heading {
font-size: 30px;
}
.section-title-v1 {
font-size: 15px;
margin-bottom: 15px;
}
.d-xxxl-block {
display: none !important;
}
}
@media(max-width:1399px){
.section-title-v1:after {
width: 50px;
}
/*.section-title-v1 {
padding-left: 60px;
}
.right-line {
padding-right: 60px;
}*/
.heading {
font-size: 28px;
}
}
@media(max-width:1199px){
.font-18 {
font-size: 15px;
}
.font-20 {
font-size: 17px;
}
.heading {
font-size: 30px;
}
}
@media(max-width:991px){
.title-v1 {
font-size: 20px;
}
.small-title-v2 {
font-size: 16px;
}
.font-18 {
font-size: 13px;
}
.font-20 {
font-size: 16px;
}
.section-title-v1:after {
width: 30px;
}
.section {
padding: 40px 0;
}
.heading {
font-size: 24px;
}
.section-title-v1 {
font-size: 15px;
/* padding-left: 40px;*/
}
/*.right-line {
padding-right: 40px;
}*/
.right-line:before {
width: 30px;
}
.font-16 {
font-size: 14px;
}
}
@media(max-width:767px){
.title-v1 {
font-size: 18px;
}
.small-title-v2 {
font-size: 14px;
}
.section-title-v1 {
margin-bottom: 10px;
font-size: 14px;
}
.w-sm-100 {
width: 100%;
}
.heading {
font-size: 20px;
}
.font-20 {
font-size: 15px;
}
}
@media(max-width:567px){
.section-title-v1 {
font-size: 13px;
}
.heading {
font-size: 19px;
}
.font-xs-13 {
font-size: 13px !important;
}
}
/*======================================*/
/*BUTTON CLASS==========================*/
.primary-btn {
background-color: var(--primary-color);
padding: 8px 15px;
color: var(--white);
border: 1px solid var(--primary-color) !important;
font-size: 15px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
border-radius: 30px;
}
.primary-btn:hover {
background-color: var(--white);
padding: 10p 15px;
color: var(--primary-color) !important;
}
.primary-btn:focus {
color: var(--white);
}
.blue-btn {
background-color: var(--theme-blue);
padding: 8px 15px;
color: var(--white);
border: 1px solid var(--theme-blue) !important;
font-size: 15px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
border-radius: 30px;
}
.blue-btn:hover {
background-color: var(--white);
padding: 10p 15px;
color: var(--theme-blue) !important;
}
.blue-btn:focus {
color: var(--white);
}
.white-btn {
background-color: var(--white);
padding: 10px 20px;
color: var(--primary-color);
border: 1px solid rgba(var(--secondary-color-rgb), 0.2);
font-size: 18px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
border-radius: 30px;
}
.white-btn:hover {
background-color: var(--primary-color);
padding: 10p 15px;
color: var(--white);
}
.icon-btn {
padding: 15px 15px;
border-radius: 50%;
}
.simple-link {
color: var(--primary-color);
font-size: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.simple-link:hover {
text-decoration: underline;
}
.simple-link .small-arrow {
width: 13px;
}
@media(max-width:1799px){
.primary-btn, .blue-btn {
font-size: 13px;
padding: 8px 15px;
}
}
@media(max-width:991px){
.primary-btn, .blue-btn {
font-size: 14px;
}
.icon-btn {
padding: 10px 10px;
}
.simple-link {
font-size: 14px;
}
}
@media(max-width:767px){
.primary-btn, .blue-btn {
font-size: 12px;
}
}
/*======================================*/
/*ELLIPSIS =============================*/
.ellipsis-100 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.ellipsis-20 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(20ch + 1rem);
}
.ellipsis-30 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(30ch + 1rem);
}
.ellipsis-30 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(30ch + 1rem);
}
.ellipsis-40 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(40ch + 1rem);
}
.ellipsis-one-line {
display: -webkit-box !important;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.ellipsis-two-line {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
word-break: break-word;
}
.ellipsis-three-line {
display: -webkit-box !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.ellipsis-four-line {
display: -webkit-box !important;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
word-break: break-word;
}
.ellipsis-six-line {
display: -webkit-box !important;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
word-break: break-word;
}
/*======================================*/
/*CHANHE ICON ON HOVER CLASS ===========*/
.toggle-img-hover {
display: flex;
align-items: center;
}
.toggle-img-hover img {
max-width: 25px;
}
.toggle-img-hover .nav-hover-img {
display: none;
}
.toggle-img-hover:hover .nav-active-img, .toggle-img-hover.active .nav-active-img {
display: none;
}
.toggle-img-hover:hover .nav-hover-img, .toggle-img-hover.active .nav-hover-img {
display: inline-block;
}
/*======================================*/
/*INPUT CSS=============================*/
.form-control:focus {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
border-color: var(--primary-color);
outline: 0;
box-shadow: 0 0 0 .25rem rgba(var(--primary-color-rgb), .25);
}
input.form-control::placeholder {
color: rgba(var(--secondary-color-rgb), 0.5);
font-size: 14px;
}
.form-check-input {
width: 1.1em;
height: 1.1em;
margin-top: 4px;
margin-right: 10px;
border: 2px solid #313131;
}
.form-check-input:focus {
border-color: var(--primary-color);
outline: 0;
box-shadow: 0 0 0 .25rem rgba(var(--primary-color-rgb), .25);
}
.form-check-input:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
/*======================================*/
/*SELECT CSS=============================*/
.form-select:focus {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
border-color: var(--primary-color);
outline: 0;
box-shadow: 0 0 0 .25rem rgba(var(--primary-color-rgb), .25);
}
/*======================================*/
/*TABS==================================*/
.custom-tabs .nav-link {
color: var(--secondary-color);
font-size: 15px;
font-weight: 600;
border: none;
padding: 10px 35px;
}
.custom-tabs .nav-link.active {
color: var(--primary-color);
border-bottom: 2px solid var(--primary-color);
}
.custom-tabs .nav-tabs {
border-bottom: 1px solid #F2F2F2;
}
@media(max-width:1799px) {
.custom-tabs .nav-link {
font-size: 14px;
}
}
@media(max-width:991px) {
.custom-tabs .nav-link {
font-size: 14px;
}
}
@media(max-width:767px) {
.custom-tabs .nav-link {
padding: 10px 15px;
}
}
/*======================================*/
/*Owl Carousel==========================*/
.custom-owl-carousel.owl-carousel .owl-nav {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
left: 50%;
width: calc(100% + 150px);
display: flex;
align-items: center;
justify-content: space-between;
}
.custom-owl-carousel.owl-carousel .owl-nav button {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid var(--primary-color);
background-color: var(--white);
font-size: 40px;
color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s;
-webkit-transition: all 0.5s;
box-shadow: 0px 0px 6px 0px var(--primary-color);
}
.custom-owl-carousel.owl-carousel .owl-nav button.owl-prev span {
display: inline-block;
margin-top: -5px;
margin-left: -3px;
}
.custom-owl-carousel.owl-carousel .owl-nav button.owl-next span {
display: inline-block;
margin-top: -6px;
margin-right: -4px;
}
.custom-owl-carousel.owl-carousel .owl-nav button:hover {
background-color: var(--primary-color);
color: var(--white);
}
.custom-owl-carousel .owl-dots {
text-align: center;
margin-top: 30px;
}
.custom-owl-carousel .owl-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #CFD3D6 !important;
}
.custom-owl-carousel .owl-dot:not(:last-child) {
margin-right: 10px;
}
.custom-owl-carousel .owl-dot.active {
background-color: var(--primary-color) !important;
}
.custom-owl-carousel.owl-carousel .owl-stage {
display: flex;
}
.owl-carousel .owl-stage-outer {
z-index: 1;
}
/*TOP NAV*/
.nav-on-top.owl-carousel .owl-nav {
transform: inherit ;
-webkit-transform: inherit ;
left: inherit;
right: 0;
top: -45px;
width: auto;
gap: 20px;
}
.nav-on-top.owl-carousel .owl-nav button {
width: 55px;
height: 35px;
border-radius: 30px;
border: 1px solid var(--secondary-color);
box-shadow: none;
}
.nav-on-top.owl-carousel .owl-nav button span {
display: none !important;
}
.nav-on-top.owl-carousel .owl-nav button:after {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 18px;
color: var(--secondary-color);
}
.nav-on-top.owl-carousel .owl-nav button.owl-prev:after {
content: "\f060";
}
.nav-on-top.owl-carousel .owl-nav button.owl-next:after {
content: "\f061";
}
.nav-on-top.owl-carousel .owl-nav button:hover {
border-color: var(--primary-color);
}
.nav-on-top.owl-carousel .owl-nav button:hover:after {
color: var(--white);
}
/*TOP NAV*/
/*SIDE BY SIDE*/
.nav-side-by-side.owl-carousel .owl-nav button {
width: 55px;
height: 35px;
border-radius: 30px;
border: 1px solid var(--secondary-color);
box-shadow: none;
}
.nav-side-by-side.owl-carousel .owl-nav button span {
display: none !important;
}
.nav-side-by-side.owl-carousel .owl-nav button:after {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 18px;
color: var(--secondary-color);
}
.nav-side-by-side.owl-carousel .owl-nav button.owl-prev:after {
content: "\f060";
}
.nav-side-by-side.owl-carousel .owl-nav button.owl-next:after {
content: "\f061";
}
.nav-side-by-side.owl-carousel .owl-nav button:hover {
border-color: var(--primary-color);
}
.nav-side-by-side.owl-carousel .owl-nav button:hover:after {
color: var(--white);
}
/*SIDE BY SIDE*/
@media(max-width:1799px) {
.custom-owl-carousel .owl-dot {
width: 10px;
height: 10px;
}
}
@media(max-width:1399px) {
.custom-owl-carousel.owl-carousel .owl-nav {
width: calc(100% + 80px);
}
.custom-owl-carousel.owl-carousel .owl-nav button {
width: 40px;
height: 40px;
font-size: 35px;
}
.nav-on-top.owl-carousel .owl-nav {
width: auto;
}
.nav-on-top.owl-carousel .owl-nav button {
width: 52px;
height: 32px;
}
.nav-on-top.owl-carousel .owl-nav button:after {
font-size: 16px;
}
.nav-side-by-side.owl-carousel .owl-nav {
width: calc(100% + 150px);
}
.nav-side-by-side.owl-carousel .owl-nav button {
width: 52px;
height: 32px;
}
.nav-side-by-side.owl-carousel .owl-nav button:after {
font-size: 16px;
}
}
@media(max-width:1199px) {
.custom-owl-carousel.owl-carousel .owl-nav {
top: inherit;
bottom: -25px;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
width: 80px;
}
.custom-owl-carousel.owl-carousel .owl-nav button {
width: 30px;
height: 30px;
font-size: 25px;
}
.custom-owl-carousel.owl-carousel .owl-nav button.owl-prev span {
margin-top: -3px;
margin-left: -1px;
}
.custom-owl-carousel.owl-carousel .owl-nav button.owl-next span {
margin-top: -4px;
margin-right: -2px;
}
.nav-on-top.owl-carousel .owl-nav {
transform: inherit;
-webkit-transform: inherit;
right: 0;
top: -45px;
gap: 20px;
bottom: inherit;
}
.nav-on-top.owl-carousel .owl-nav {
width: auto;
}
.nav-on-top.owl-carousel .owl-nav button {
width: 52px;
height: 32px;
}
.nav-on-top.owl-carousel .owl-nav button:after {
font-size: 16px;
}
.nav-side-by-side.owl-carousel .owl-nav {
width: auto;
gap: 20px;
}
.nav-side-by-side.owl-carousel .owl-nav button {
width: 52px;
height: 32px;
}
.nav-side-by-side.owl-carousel .owl-nav button:after {
font-size: 16px;
}
}
@media(max-width:991px) {
.nav-side-by-side.owl-carousel .owl-nav {
bottom: -35px;
}
}
@media(max-width:767px) {
.custom-owl-carousel .owl-dots {
margin-top: 20px;
}
.custom-owl-carousel .owl-dot {
width: 8px;
height: 8px;
}
.nav-on-top.owl-carousel .owl-nav button,
.nav-side-by-side.owl-carousel .owl-nav button {
width: 46px;
height: 26px;
}
.nav-on-top.owl-carousel .owl-nav button:after,
.nav-side-by-side.owl-carousel .owl-nav button:after {
font-size: 13px;
}
.nav-on-top.owl-carousel .owl-nav ,
.nav-side-by-side.owl-carousel .owl-nav {
gap: 10px;
}
.nav-on-top.owl-carousel .owl-nav {
top: -31px;
}
}
/*======================================*/
/*PAGINATIONR===========================*/
.pagination-container svg {
width: 25px;
}
.pagination-container nav>div:nth-child(1) {
display: none;
}
.pagination-container nav>div:nth-child(2) p {
display: none;
}
.pagination-container nav>div:nth-child(2) div .relative {
display: flex;
gap: 10px;
}
.pagination-container nav>div:nth-child(2) div .relative.shadow-sm {
box-shadow: none !important;
}
.pagination-container nav>div:nth-child(2) div .relative>a, .pagination-container nav>div:nth-child(2) div .relative span span {
background-color: #EDB51E40 !important;
color: #000000 !important;
border-radius: 5px;
border: none !important;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 5px !important;
font-size: 13px;
}
.pagination-container nav>div:nth-child(2) div .relative span span,.pagination-container nav>div:nth-child(2) div .relative>a:hover {
background-color: #EDB51E !important;
font-weight: 700;
}
.pagination-container nav>div:nth-child(2) div .relative>a[rel="prev"],
.pagination-container nav>div:nth-child(2) div .relative>a[rel="next"] {
width: 30px;
}
.pagination-container nav>div:nth-child(2) div .relative span[aria-disabled="true"] span {
background-color: #EDB51E40 !important;
font-weight: 400;
}
@media(max-width: 767px) {
.pagination-container nav>div:nth-child(2) div .relative>a[rel="prev"],
.pagination-container nav>div:nth-child(2) div .relative>a[rel="next"] {
width: 35px;
}
.pagination-container nav>div:nth-child(2) div .relative>a,
.pagination-container nav>div:nth-child(2) div .relative span span {
height: 30px;
width: 30px;
font-size: 12px;
}
.pagination-container svg {
width: 16px;
}
}
/*LOADER===========================*/
.loader {
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 2000;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
display: none;
}
.loader-content {
width: 50px;
height: 50px;
/* border: 5px solid #fff;*/
/* border-top: 5px solid var(--primary-color);*/
border-radius: 50%;
position: relative;
}
.loader-content span {
position: absolute;
bottom: -34px;
left: -6px;
font-size: 14px;
color: #fff;
animation: loaderText 2s infinite ease-in-out both;
}
.loader-content:after,
.loader-content:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-radius: 10px;
width: 100%;
height: 100%;
}
.loader-content:after {
border: 10px solid rgba(0, 108, 170, 1);
animation: spin 3s infinite linear ;
}
.loader-content:before {
border: 10px solid var(--primary-color);
animation: spin2 3s infinite linear ;
}
@keyframes loaderText {
0% {color: rgba(255, 255, 255, 1);}
50% {color: rgba(255, 255, 255, 0.5); }
100% {color: rgba(255, 255, 255, 1); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
@keyframes spin2 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/*======================================*/