:root {
    --primary-color: #5f6553;
    --dark-color: #545454;
    --secondary-color: #e4decd;
    --grey-color: /*#F8F8F8*/ #f6f4ee;
    --white-color: #ffffff;
    --body-fonts: 'Noto Sans', sans-serif;;
    --title-fonts: 'Roboto Condensed', sans-serif;
    --primary-filter-color: brightness(0) saturate(100%) invert(41%) sepia(11%) saturate(579%) hue-rotate(39deg) brightness(89%) contrast(89%);
    --white-filter-color: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7462%) hue-rotate(295deg) brightness(110%) contrast(98%);
    --dark-filter-color: brightness(0) saturate(100%) invert(13%) sepia(2%) saturate(447%) hue-rotate(351deg) brightness(98%) contrast(81%);
    --secondary-filter-color: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(455%) hue-rotate(7deg) brightness(106%) contrast(87%);;
}

/*--------------- TYPOGRAPHY------------------*/
/*------------- General rules ----------------*/
/*----------General-----------*/
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
   font-family: var(--body-fonts);
}

main {
    flex: 1;
    max-height: inherit;
    background-color: var(--white-color);
}

/*----------End General-----------*/

#logo {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: auto;
    max-height: 100%;
}

p, label, h1, h2, h3, h4, h5, h6 {
    letter-spacing: calc(0.02 * 1em);
    line-height: calc(1.5 * 1em);
    word-spacing: calc(0 * 1em);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-fonts);;
    color: var(--dark-color);
    font-style: normal;
    text-transform: capitalize;
    font-weight: 600;
    margin: 0;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

/*14px*/
p {
    font-size: 15px;
    font-weight: normal;
    line-height: 2;
}

label {
    font-size: 0.8125rem;
    font-weight: bold;
    text-transform: uppercase;
}

h1 {
    font-size: 2.75rem;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.375rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1.125rem;
}

.submenu {
    font-size: 0.94rem;
    font-weight: normal;
    text-transform: capitalize;
}

/*13px small details text*/
.caption {
    font-size: 0.8125rem;
    line-height: 1.22rem;
    font-weight: normal;
}

/* 14px */
.fs-7 {
    font-size: 0.875rem;
}

/* 17px */
.large-body {
    letter-spacing: calc(0.05 * 1em) !important;
    line-height: calc(1.5 * 1em);
    word-spacing: calc(0 * 1em);
    font-size: 1.067rem;
    font-weight: normal;
}

.label-note {
    text-transform: capitalize;
    font-weight: 500;
    color: #707070;
}

/*i {
    font-size: 20px;
    margin-right: 5px;
    width: 20px;
    height: 20px;
}*/

.elementor-invisible {
    opacity: 0;
}

.animation-element {
    visibility: hidden;
}

.active {
    opacity: 4;
  }

svg {
    fill: #444444;
}


.st0 {
    fill: var(--white-color);
    stroke: #444444;
    stroke-miterlimit: 10;
}

.st3 {
    font-size: 11px;
}

svg.switch-direction {
    width: 200px;
    margin-left: -35px;
}


a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--primary-color);
}

.disabled {
    pointer-events: none;
    opacity: .65;
}

.theme-primary-text-color {
    color: var(--primary-color);
}

.border-dashed {
    border: 1px dashed;
}

.theme-border-color {
    border-color: var(--primary-color) !important;
}

.section-subtitle {
    font-family: var(--title-fonts);
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--primary-color);
    letter-spacing: 0.1em;
    margin: 0 0 15px;
    display: inline-block;
    position: relative;
    padding-left: 15px;
}

.section-subtitle::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: var(--primary-color);
    height: 100%;
    width: 2px;
}

.section-title {
    font-family: var(--title-fonts);
    font-weight: 600;
    font-size: 48px;
    line-height: 56px;
    z-index: 9;
    color: var(--dark-color);
    padding: 0;
    margin: 0 0;
    position: relative;
    display: block;
    text-transform: capitalize;
}

.section-description {
    z-index: 9;
    position: relative;
    margin: 15px 0 0;
    color: #6C6C6C;
}

/*text truncate*/
.truncate-text-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to show */
    -webkit-box-orient: vertical;
    max-height: 2.6em; /* Adjust based on line height and font size */
}

.truncate-text-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Number of lines to show */
    -webkit-box-orient: vertical;
    max-height: 5.65em; /* Adjust based on line height and font size */
    min-height: 5.65em;
}

.truncate-text-4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Number of lines to show */
    -webkit-box-orient: vertical;
    max-height: 7.3em; /* Adjust based on line height and font size */
    min-height: 7.3em
  }

/*end text truncate*/

/*---------------END TYPOGRAPHY------------------*/

/*-----------------BUTTONS--------------------*/

.btn {
    font-size: 0.875rem;
    letter-spacing: calc(0.12 * 1rem);
    font-weight: 500;
    border: solid 0.06rem var(--primary-color);
    box-shadow: 0 0.1875rem 0.375rem #00000029;
    padding: 0.625rem;
    min-width: 150px;
    min-height: 40px;
}

.btn-sm {
    font-size: 0.875rem;
    padding: 0.238rem;
    min-width: 115px;
    min-height: 30px;
}

.btn-lg {
    font-size: 1.25rem;
    padding: 0.625rem;
    min-width: 155px;
    min-height: 50px;
}


/*button with background solid color*/

.btn-solid {
    color: var(--white-color);
    letter-spacing: calc(0.12 * 1rem);
    background-color: var(--primary-color);
    border-radius: 0;
    transition: 0.8s;
    text-transform: uppercase;
}

.btn-solid:hover {
    color: var(--white-color);
    background-color: #45493c;
    border: solid 0.06rem #45493c;
}

.btn-solid:active {
    background-color: #45493c;
    border-color: #45493c;
}

.btn-solid:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem #0d6efd40;
}

/*.btn-solid:focus-visible {*/
/*    border-color: #174B9E;*/
/*    outline: none;*/
/*    box-shadow: 0 0 0.125rem 0.2rem #0d6efd40;*/
/*}*/

/*button with outline color clear background color*/

.btn-outline {
    background-color: var(--white-color);
    color: #1b55b2;
}

.btn-outline:hover {
    background-color: #1b55b2;
    color: var(--white-color);
}

.btn-outline:active {
    background-color: #174B9E;
    color: var(--white-color);
    border-color: #174B9E;
}

/*.btn i {
    position: relative;
    margin-right: 5px;
    width: 16px;
    text-align: center;
}*/

.btn.btn-link {
    text-decoration: none;
    color: var(--primary-color);
    border: none;
    box-shadow: none;
    padding: 0px;
    min-width: fit-content;
    min-height: fit-content;
    text-transform: uppercase;
    background: transparent;
}

.btn-link:hover {
    color: var(--primary-color);
}

.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
    color: var(--primary-color);
}

.btn .btn-text:not(.btn-cover-text) {
    -webkit-transition: -webkit-transform .2s cubic-bezier(.23, .71, .55, .99), opacity .15s;
    transition: transform .2s cubic-bezier(.23, .71, .55, .99), opacity .15s;
}
.btn .btn-text {
    display: flex;
    align-items: center;
    position: relative;
}

.btn.btn-link .btn-text:after, .btn.btn-link .btn-text:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 100%;
    background: var(--primary-color);
    transition: all 0.5s ease;
}

.btn.btn-link .btn-text:before {
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}

.btn.btn-link .btn-text:after {
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    transform: scaleX(0);
}

.btn.btn-link:hover .btn-text:before {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform .5s cubic-bezier(.86, 0, .07, 1);
    -moz-transition: -moz-transform .5s cubic-bezier(.86, 0, .07, 1);
    transition: transform .5s cubic-bezier(.86, 0, .07, 1);
}

.btn.btn-link:hover .btn-text:after {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition: -webkit-transform .5s cubic-bezier(.86, 0, .07, 1) .25s;
    -moz-transition: -moz-transform .5s cubic-bezier(.86, 0, .07, 1) .25s;
    transition: transform .5s cubic-bezier(.86, 0, .07, 1) .25s;
}

/*-----------------end BUTTONS--------------------*/


/*----------------Styling shortcodes---------------------*/
/*Box shadow elements*/
.shadow {
    box-shadow: 0px 3px 6px #00000016 !important;
}

/*Use spacer for consistent standard space between header and contend and where is needed*/
.spacer {
    margin-top: 1.25rem;
}


/*----------------Functions styles----------------------------------*/

/*sticky on top 0*/
.sticky {
    position: sticky;
    top: 0;
}

/*using in login full screen for item positioning*/
.stretched #wrapper {
    width: 100%;
    margin: 0;
    box-shadow: none;
}

#wrapper {
    position: relative;
    float: none;
    width: 100%;
    margin: 0 auto;
    background-color: var(--white-color);
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}

.content-wrap {
    position: relative;
    padding: 0px 0;
    overflow: hidden;
}


/*Login half image*/

.login, .halfScreen-bg-image {
    min-height: 100vh;
}


.halfScreen-bg-image {
    background-image: url("/staticfiles/images/background.jpg");
    background-size: cover;
    background-position: center center;
}

.bg-image {
    background-image: url("/staticfiles/images/background.png");
    background-attachment: fixed;
    background-size: 40%;
    background-position: right bottom;
    background-repeat: no-repeat;
    opacity: 0.3;
    position: fixed;
}

.fullScreen-bg-image {
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("/staticfiles/images/background.jpg");
    background-size: cover;
    width: 100%;
}

/*---------------Login page with full bg styles------------------------*/
.vertical-middle {
    z-index: 3;
    position: relative;
    display: flex;
    width: 100%;
    min-height: 100%;
    justify-content: center;
    flex-flow: column;
}

.form-group {
    margin-bottom: 2rem;
}

.logo-login {
    max-width: 250px;
}

.card-body.login-titles h4 {
    letter-spacing: calc(0.05 * 1em);
    line-height: calc(1.5 * 1em);
    word-spacing: calc(0.05 * 1em);
}

/*---------------End Login page with full bg styles------------------------*/

/*-----------------inner menu styles-----------------------------------*/
.inner-menu {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--white-color);
    z-index: 6;
}

.inner-menu ul li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: var(--white-color);
    display: inline-flex;
}

.inner-menu ul li a {
    display: inline-block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: #444444;
}

.inner-menu ul li.dropdown-item a {
    padding: 5px 10px;
    display: flex;
}

svg:disabled {
    fill: #707070;
}

.sticky.inner-menu {
    top: 80px !important;
    position: sticky;
}

/*------------------end inner menu styles----------------------------*/

/*------------------Page title--------------------------------*/

#page-title {
    position: relative;
    padding: 3rem 0;
    background-color: var(--secondary-bgcolor);
    border-bottom: var(--border-bottom);
}

#page-title.sticky {
    position: sticky;
    top: 4.3rem /*6.35rem*/;
    z-index: 100;
}

/*------------------Tabs position on scroll------------------------------*/
#nav-tabs.sticky {
    position: sticky;
    top: 14rem /*16.1rem*/;
    z-index: 100;
}


/*----------------------------Verification code---------------------------*/
.verify {
    height: 20px;
    width: 20px;
    background-color: var(--white-color);
    border: 1px solid #1B55B2;
    margin-left: 10px;
    border-radius: 50%;
    display: inline-block;
}

/*----------------------------homepage sections---------------------------*/
#homapage-about-us, 
#homapage-choose-us,
#homapage-insta,
#get-touch {
    background-color: var(--grey-color);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 130px 0px 130px 0px;
}

#homapage-what-offer,
#homapage-testimonials,
#homapage-diet-plan {
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 130px 0px 130px 0px;
}

.section-title-style-1 .section-title-box{
    margin-bottom: 60px;
}

.widget-image-container {
    margin: 0px -330px 0px 0px;
} 

/*----------------------------end homepage sections---------------------------*/

/*----------------------------inner page defults---------------------------*/

.inner-page-wrap {
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 130px 0px 130px 0px;
}

.inner-page-wrap .animation-element {
    visibility: visible;
}

.elementor-widget-container {
    margin: 30px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
/*----------------------------end inner page defults---------------------------*/

/*----------------------------inner page sections---------------------------*/
#homapage-choose-us.inner-page-choose-us {
    background-color: var(--white-color);
}

#homapage-choose-us.inner-page-choose-us .fancy-box.style-1 {
    background: var(--grey-color);
}

.servises-inner h4 {
    margin-bottom: 15px;
}
/*----------------------------end inner page sections---------------------------*/

/*----------------------------inner page services menu---------------------------*/
.widget.widget-port {
    background: var(--grey-color);
    box-shadow: none;
    padding: 30px;
}

.widget ul {
    padding: 0;
    margin: 0;
}

.widget.widget-port .menu li {
    margin: 0 0 10px 0;
    list-style: none;
}

.widget.widget-port .menu li a {
    position: relative;
    background-color: var(--white-color);
    padding: 16px 24px;
    border: none;
    display: block;
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    font-size: 16px;
    font-family: var(--title-fonts);
    color: var(--dark-color);
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    text-transform: capitalize;
    text-decoration: none;
}

.widget.widget-port .menu a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.widget.widget-port .menu .active a {
    background: var(--primary-color);
    color: var(--white-color);
}

.widget.widget-port .menu li>a:before {
    position: absolute;
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-size: 12px;
    right: 24px;
    left: auto;
    top: 24px;
    color: inherit;
    line-height: normal;
    font-weight: 500;
}
/*----------------------------end inner page services menu---------------------------*/

/*----------------------------inner page article---------------------------*/
.blog-post {
    margin-bottom: 45px;
    background: var(--grey-color);
    display: inline-block;
    width: 100%;
}    

.blog-post .post-media {
    overflow: hidden;
    margin-bottom: 0;
    position: relative;
    width: 100%;
    height: 240px;
}

.inner-page-style-1 .blog-post .post-media {
    height: 600px;
}

.blog-post .post-media img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    height: 100%;
    object-fit: cover;
}

.blog-post:hover .post-media img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.blog-post .blog-contain {
    padding: 30px;
    display: inline-block;
    position: relative;
    width: 100%;
}

.blog-post .post-meta {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

.blog-post .post-meta .post-date {
    background: var(--primary-color);
    display: flex;
    padding: 10px;
    align-items: center;
    color: var(--white-color);
    font-weight: 600;
    margin-left: -30px;
    font-size: 14px;
    width: 150px;
}

.blog-post .post-meta .post-date i {
    margin-right: 15px;
    font-size: 14px;
}

.blog-post .blog-contain .blog-title {
    font-size: 22px;
    line-height: 30px;
    margin: 0 0 5px;
    min-height: 60px;
}

.blog-post .blog-contain .blog-title a {
    box-shadow: none;
    text-decoration: none;
    color: var(--dark-color);
}

.blog-post .blog-contain .blog-title a:hover {
    color: var(--primary-color);
}

.blog-post .blog-contain .blog-info {
    margin-top: 10px;
}

.blog-post .blog-contain .button-container {
    margin-top: 10px;
}

.post-social-share .post-social-title {
    font-size: 18px;
    line-height: 26px;
    font-family: var(--title-fonts);
    color: var(--dark-color);
    text-transform: capitalize;
    font-weight: 500;
    display: inline-block;
} 

.single-post-shortcode-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-flex;
}

.single-post-shortcode-list li {
    margin: 0 0 0 8px;
    padding: 0;
    list-style: none;
}

.single-post-shortcode-list li a {
    width: 45px;
    height: 45px;
    background: var(--grey-color);
    color: var(--dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-post-shortcode-list li a:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.widget .widget-title {
    margin-bottom: 0;
    padding: 0 0 15px;
    font-size: 22px;
    position: relative;
    line-height: 30px;
}    

.recent-post {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 15px;
}

.recent-post .recent-post-media {
    margin-right: 15px;
    min-width: 100px;
    min-height: 100px;
    height: 100px;
    width: 100px;
}

.recent-post .recent-post-media img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent-post a {
    text-decoration: none;
    color: var(--dark-color);
    font-size: 16px;
    font-weight: 600;
}

.recent-post a:hover {
    text-decoration: none;
    color: var(--primary-color);
}

.recent-post .recent-post-date {
    font-size: 14px;
    color: var(--primary-color);
    margin-top: 5px;
}

.recent-post .recent-post-date i {
    margin-right: 7px;
}

/*recipes*/
.post-meta .details {
    min-width: 270px;
    margin: auto auto 0;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    margin-top: 5px;
}        

.post-meta .details .spec-item {
    line-height: 1;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5%;
}     

.post-meta .details .spec-item:before {
    content: "";
    display: block;
    margin: 0 auto 3px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    filter: var(--primary-filter-color);
}

.post-meta .details .time:before {
    width: 32px;
    height: 32px;
    margin: 0 0 10px;
    background-image: url(../../images/svg/time.svg);
}

.post-meta .details .difficulty {
    min-width: 108px;
}

.post-meta .details .difficulty:before {
    width: 32px;
    height: 32px;
    margin: 0 0 10px;
    background-image: url(../../images/svg/cook.svg);
}

.post-meta .details .portions:before {
    width: 42px;
    height: 32px;
    margin: 0 0 10px;
    background-image: url(../../images/svg/bown.svg);
}
/*----------------------------end inner page article---------------------------*/

/*----------------------------inner page recipes---------------------------*/
#header-style-1 {
    position: relative;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

#header-style-1 .color-overlay{
    padding: 220px 0px;
    background-color: rgba(0, 0, 0, 0.3);
}

#header-style-1 .page-title h1 {
    color: var(--grey-color);
}

#header-style-1 .post-meta {
    margin-top: 35px;
    color: var(--grey-color);
}

#header-style-1 .post-meta .details .spec-item:before {
    filter: var(--secondary-filter-color);
}

#header-style-1 .post-meta .details .spec-item {
    font-size: 16px;
}

#header-style-1 .post-meta .details .time:before {
    width: 42px;
    height: 42px;
}

#header-style-1 .post-meta .details .difficulty:before {
    width: 42px;
    height: 42px;
}

#header-style-1 .post-meta .details .portions:before {
    width: 42px;
    height: 42px;
}

.content-style-1 .blog-post{
    background-color: var(--white-color);
}

.content-style-1 {
    position: relative;
    z-index: 99;
    top: -100px;
}

.line {
    clear: both;
    position: relative;
    width: 100%;
    border-top: 1px solid rgba(0,0,0, 0.1);
}

#printbtn.btn {
    min-width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-unstyled ol {
    padding-left: 0;
    list-style: none;
}

ol {
    margin-left: 40px;
}

ol li {
    counter-increment: step-counter;
    font-size: 16px;
    line-height: 28px;
    font-weight: 400;
    margin-bottom: 12px;
}

ol li::before {
    display: inline-block;
    position: absolute;
    content: counter(step-counter) ". ";
    margin-right: 14px;
    color: var(--primary-color);
    font-weight: 700;
    margin-left: -38px;
    margin-top: 2px;
}

.recent-recipes-container {
    margin-top: 35px;
}

.recent-recipes-container .blog-post .post-media {
    height: 145px;
}

.recent-recipes .blog-post {
    border: 1px solid var(--grey-color);
}

.recent-recipes .post-meta .details {
    min-width: 100%;
}

.recent-recipes .blog-post .post-meta {
    margin: 10px 0;
}

.recent-recipes .post-meta .details .difficulty {
    min-width: 90px;
}

.recent-recipes .blog-contain {
    padding: 12px;
}

.recent-recipes .blog-contain .blog-title {
    font-size: 17px;
    line-height: 21px;
    min-height: auto;
}

.recent-recipes .blog-contain .post-meta .details .time:before {
    width: 20px;
    height: 20px;
}

.recent-recipes .blog-contain .post-meta .details .difficulty:before {
    width: 20px;
    height: 20px;
}

.recent-recipes .blog-contain .post-meta .details .portions:before {
    width: 20px;
    height: 20px;
}
/*----------------------------end inner page recipes---------------------------*/

/*----------------------------homepage service sections---------------------------*/
.what-offer {
    padding: 30px;
    background: var(--grey-color);
}  

.what-offer .service-number {
    font-size: 36px;
    line-height: 44px;
    text-align: center;
    opacity: 0.5;
    -webkit-text-stroke-width: 2px;
}

.what-offer:hover .service-number {
    color: var(--dark-color);
    opacity: 1;
}

.what-offer .service-media{
    position: relative;
    text-align: center;
}

.what-offer .service-media .service-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 100%;
    z-index: 9;
    background: var(--white-color);
    position: relative;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.what-offer:hover .service-media .service-icon {
    background: var(--primary-color);
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.what-offer .service-media .service-icon img {
    width: 48px;
    filter: var(--primary-filter-color);
}

.what-offer:hover .service-media .service-icon img {
    filter: var(--white-filter-color);
}

.what-offer .service-media .service-media-img {
    overflow: hidden;
    margin-top: -45px;
    height: 315px;
    width: 100%;
}

.what-offer .service-media .service-media-img img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.what-offer:hover .service-media .service-media-img img {
    -webkit-transform: scale(1);
    transform: scale(1.2);
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.what-offer .service-info {
    padding-top: 30px
}

.section-title-style-1 .service-title{
    margin-bottom: 5px;
    font-size: 22px;
    line-height: 30px;
    min-height: 3.8rem
}

.section-title-style-1 .service-description {
    margin-bottom: 0;
    line-height: 2;
}
/*----------------------------end homepage service sections---------------------------*/

/*----------------------------fancy box style 1---------------------------*/
.fancy-box.style-1 {
    background: var(--white-color);
    padding: 40px 25px;
}

.fancy-box.style-1 .icon {
    position: relative;
    margin-bottom: 35px;
    display: inline-block;
    margin-left: 15px;
    min-height: 78px
}

.fancy-box.style-1 .icon:before {
    content: "";
    position: absolute;
    top: -10px;
    left: -15px;
    display: inline-block;
    width: 45px;
    height: 45px;
    background: var(--primary-color);
    border-radius: 100%;
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: all 0.5s ease;
}

.fancy-box.style-1:hover .icon:before {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.fancy-box.style-1 .icon img {
    position: relative;
    z-index: 9;
    filter: var(--secondary-filter-color);
    width: 64px;
}

.fancy-box.style-1 .right-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease;
}

.fancy-box.style-1:hover .right-icon {
    visibility: visible;
    opacity: 0.2;
    right: 15px;
    
}

.fancy-box.style-1 .right-icon img {
    width: 65px;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.fancy-box.style-1 .fancy-box-info {
    position: relative;
}

.fancy-box.style-1 .fancy-box-info .fancy-box-title {
    font-size: 22px;
    line-height: 30px;
    min-height: 3.8rem
}

.fancy-box.style-1 .fancy-box-info .fancybox-description {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.9;
}
/*----------------------------end fancy box style 1---------------------------*/

/*----------------------------pricebox box style 1----------------------------*/
.pricebox-style-1 {
    background: var(--grey-color);
    padding: 45px;
}  

.pricebox-style-1 .price-detail {
    position: relative;
    font-family: var(--title-fonts);
    border-bottom: 1px solid var(--grey-color);
    padding-bottom: 30px;
}

.pricebox-style-1 .price-detail .price-title {
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
    letter-spacing: 0.1em;
    color: var(--dark-color);
    text-transform: capitalize;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}

.pricebox-style-1 .price-detail .pricing-description {
    margin-bottom: 0;
}

.pricebox-style-1 .price-detail .price-media {
    margin: 20px 0 30px;
}

.pricebox-style-1 .price-media img {
    height: 64px;
    margin-bottom: 25px;
    filter: var(--primary-filter-color);
}

.pricebox-style-1 .price-detail .price {
    font-size: 48px;
    line-height: 56px;
    display: inline-block;
}

.pricebox-style-1 .price-detail .price-duration {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    text-transform: capitalize;
}

.pricebox-style-1 .list-info {
    margin: 0;
    padding: 15px 0 0px 0;
    min-height: 13rem;
}

.pricebox-style-1 .list-info li {
    list-style: none;
    line-height: 45px;
}
/*----------------------------end pricebox box style 1----------------------------*/

/*----------------------------testimonials---------------------------*/
.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 35px;
}

.owl-item.active.center {
    background-color: var(--grey-color);
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--primary-color);
}

.owl-theme .owl-dots .owl-dot span {
    background: var(--grey-color);
}

.testimonial-box.style-1 {
    /* background: var(--white-color); */
    padding: 60px 45px;
}      

.testimonial-box.style-1 .testimonial-content {
    display: flex;
}

.testimonial-box.style-1 .testimonial-content .testimonial-icon {
    margin-right: 30px;
}

.testimonial-box.style-1 .testimonial-content .testimonial-icon i {
    color: var(--primary-color);
    font-size: 36px;
    line-height: 44px;
    -webkit-text-stroke: 2px var(--primary-color);
}

.testimonial-box.style-1 .testimonial-media {
    display: flex;
    position: relative;
    align-items: center;
    margin-left: 60px;
}

.testimonial-box.style-1 .testimonial-media .testimonial-img {
    margin-right: 15px;
}

.testimonial-box.style-1 .testimonial-media .testimonial-img img {
    width: 80px;
    height: 80px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.testimonial-box.style-1 .testmonial-title {
    font-size: 22px;
    line-height: 30px;
}

.testimonial-box.style-1 .testimonial-media .testimonial-meta span {
    color: var(--primary-color);
    letter-spacing: 0.1em;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    font-family: var(--title-fonts);
    text-transform: uppercase;
}
/*----------------------------end testimonials---------------------------*/

/*----------------------------Carousel---------------------------*/
.full-page-carousel {
    height: 93vh;
}

.full-page-carousel img {
    height: 93vh;
    object-fit: cover;
}

.carousel-control-next,
.carousel-control-prev {
    width: 5%;
}

.carousel-caption {
    right: 0%;
    left: 0%;
    height: 93vh;
    display: flex;
    align-items: center;
    padding: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.5);
}

/*----------------------------End Carousel---------------------------*/

/*----------------------------Gallery---------------------------*/
.gallery {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
    margin: 10px auto;
    padding: 0 10px;
}

.gallery__item {
    /*align-items: center;
    justify-content: center;*/
    display: list-item;
    position: relative;
}

.gallery__item img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.gallery__item--hor {
    grid-column: span 2;
}

.gallery__item--vert {
    grid-row: span 2;
}

.gallery__item--lg {
    grid-column: span 2;
    grid-row: span 2;
}

.video ::before {
    font-family: 'Font Awesome 6 Free';
    color: white;
    content: "\f04b";
    opacity: 0.9;
    font-size: 44px;
    position: absolute;
    left: 20px;
    bottom: 10px;
}

.img-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.img-list figure {
    border: 5px solid transparent;
    box-sizing: border-box;
    width: 33.3%;
    height: 250px;
    float: left;
    position: relative;
    cursor: pointer;
}

/*.img-list figure:hover ::before{
    font-family: 'Font Awesome 6 Free';
    color: white;
    content: "\f04b";
    opacity: 0.9;
    font-size: 44px;
    position: absolute;
    left: 20px;
    bottom: 10px;
}*/

.img-list img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*----------------------------End Gallery---------------------------*/


/*----------------------------Page Header---------------------------*/
.page-header {
    background: var(--grey-color);
    color: var(--white-color);
    position: relative;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.page-header .page-title h1 {
    font-size: 56px;
    line-height: 64px;
    margin-bottom: 15px;
    color: var(--dark-color);
}

.color-overlay {
    background-color: rgba(255, 255, 255, 0.3);
    padding: 130px 0;
}

.headerTextBox {
    min-height: 220px;
}

/*----------------------------End Page Header---------------------------*/

/*----------------------- Pagination---------------------------- */
.page-link {
    font-size: 14px;
    padding: 7px 16px;
}

.pagination-lg .page-link {
    font-size: 16px;
    padding: 9px 14px;
}

.pagination li.disabled .page-link {
    color: var(--white-color);
    background-color: #79816a;
    border-color: #79816a;
}

.pagination li {
    margin-right: 7px;
}

.pagination li .page-link {
    color: var(--dark-color);
    background-color: transparent;
    border-color: var(--grey-color);
}

.page-item.active .page-link {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.page-item:hover .page-link {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.page-item:last-child .page-link {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}


.page-item:first-child .page-link {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

/**/
.insta-link {
    text-decoration: none;
}

.insta-link h5{
    text-transform: lowercase;
}

.insta-link:hover h5{
    color: var(--primary-color);
}

.insta-link i {
    font-size: inherit;
}

.insta-link:hover i{
    color: var(--primary-color);
}
/**/

/*---------------------- Progress Bar--------------------------- */
.progressbar-content {
    padding-bottom: 20px;
    display: inline-block;
    width: 100%;
}  

.progressbar-content .progress-title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-family: var(--title-fonts);
    color: var(--dark-color);
    font-weight: 600;
    text-transform: capitalize;
}

.progressbar-content .progress-value {
    color: var(--dark-color);
    margin: 0;
    float: right;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.progressbar-content .progress {
    margin-top: 5px;
    margin-bottom: 10px;
    border-radius: 0px;
    height: 10px;
    background-color: var(--secondary-color);
}

.progressbar-content .progress-bar {
    background: var(--primary-color);
    border-radius: 0px;
    width: 0;
    transition: width 2s ease; /* Adjust the duration and easing as needed */
}

/*--------------------------Rating------------------------------------ */
.rating-wrapper {
    align-self: center;
    display: inline-flex;
    direction: rtl !important;
    margin-left: auto;
    position: relative;
    margin-bottom: 20px;
}

.rating-wrapper label {
    color: #1b55b2;
    cursor: pointer;
    display: inline-flex;
    font-size: 16px;
    padding: 10px 50px;
    border: 1px solid #1b55b2;
    margin-right: 1px;
    font-weight: 400;
    white-space: normal !important;
}

.rating-wrapper .rating-label:nth-child(3) {
    border-radius: 0px 3px 3px 0px;
}

.rating-wrapper label:last-child {
    border-radius: 3px 0px 0px 3px;
}

.rating-wrapper input {
    height: 100%;
    width: 100%;
}

.rating-wrapper input {
    display: none;
}

.rating-wrapper label:hover,
.rating-wrapper label:hover ~ label {
    color: var(--white-color);
    background-color: #246AD9;
}

.rating-wrapper input:checked ~ label {
    color: var(--white-color);
    background-color: #1b55b2;
}

.rating-description {
    font-size: 13px;
    color: var(--primary-font-color);
    text-transform: uppercase;
    font-weight: 400;
}

.rating-description span:first-child {
    position: absolute;
    left: 0%;
    top: 110%;
}

.rating-description span:last-child {
    position: absolute;
    right: 0%;
    top: 110%;
}

/*--------------------------------Badge-------------------- */
.badge {
    /*min-width: 88px;*/
    text-align: center;
    /*font-size: 14px;*/
    font-weight: 300;
    color: var(--white-color);
    border-radius: 3px 0 0 0;
    padding: 7px 10px;
    margin-bottom: 0;
}

.w-badge {
    min-width: 88px;
}

/*bg colors*/
.bg-pacific-blue {
    background-color: #0B9FC5;
}

.bg-orange {
    background-color: #E36219;
}

.bg-blue {
    background-color: #1861B5;
}

.bg-shamrock-green {
    background-color: #33CE95;
}

.bg-yellow {
    background-color: #FDBA36;
}

.bg-dark-red {
    background-color: #D63031;
}

.bg-red {
    background-color: #F30000;
}

.bg-cadet-blue {
    background-color: #36A5B2;
}

.bg-electron-blue {
    background-color: #0984e3;
}

.bg-dark-green {
    background-color: #348F6E;
}

.bg-purple {
    background-color: #9050E0;
}

.bg-dark-gray {
    background-color: #707070;
}

.bg-mint {
    background-color: #00b894;
}

/*-------------------- Card types------------------ */
/*-------------------- Card general styles------------------ */

.card {
    /* background-color: var(--white-color); */
    border-radius: 0;
    border: none;
}

.card-link {
    text-decoration: none;
}

.card-link:hover .card {
    text-decoration: none;
    background-color: #f5d208;
    transition: all 0.2s ease-out;
}

.article_date {
    background-color: #f5d208;
    font-size: 1rem;
    line-height: 1.9rem;
    text-align: right;
    color: #000;
    display: block;
    padding: 0 0.625rem;
    width: 140px;
    height: 28px;
    margin-top: 10px;
    font-weight: bold;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.article_date i{
font-size: 12px;
position: relative;
top: -1px;
}

.card-link:hover .article_date {
background-color: #000;
color: #f5d208;
}

.article_image {
    width: 100%;
    height: 250px;
}

.article_image img{
    max-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}

/*use this padding for login cards*/
.card-img,
.card-img-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.card-title {
    padding-top: 5px;
    color: #000;
    min-height: 97px;
    font-size: 20px;
    font-weight: bold;
}

.card-text {
    font-size: 16px;
    color: #000;
}

.card-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #eeeeeeb3;
    border-radius: 5px;
}

/*-------------------------Card login------------------------------*/

.card-login {
    max-width: 410px;
}

.card-login .card-body {
    padding: 3rem;
}

.card-login form button {
    width: 100%;
}

/*----------------------Card Feature-------------------------------------*/

.card-feature {
    min-height: 235px;
}

.card-feature .card-body {
    padding: 1rem;
}

.card-feature:hover {
    cursor: pointer;
}

.card-feature.zoom-card:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
    transform-origin: top left;
    cursor: pointer;
}

/*------------------Extra features on card------------------------------------*/
.card-badge {
    position: absolute;
    top: 0%;
    left: 0%;
}

.card-badge-middle {
    margin-bottom: 20px;
}

.close-button {
    position: absolute;
    right: 5.5%;
    top: 4%;
}

.card-menu {
    position: absolute;
    right: -0.5%;
    top: 4%;
}

.card-menu .dropdown-menu {
    min-width: 30px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 1px;
    background-color: var(--card-text-dropdown-backround-color);
    border: none;
    padding: 0px;
    transform: translate(-18px, 24px) !important;

}

.card-menu .dropdown-menu .dropdown-item {
    text-align: center;
    padding: 5px 10px;
    color: var(--primary-font-color);
}

.card-menu .dropdown-menu .dropdown-item i {
    font-size: 16px;
}

.card-menu .dropdown-menu .dropdown-item:hover {
    color: #1b55b2;
    background-color: var(--white-color);
}

.card-menu .dropdown-menu i {
    margin-right: 0;
}


.card-pill {
    background-color: var(--badge-bgstatus);
    border-radius: 3px;
    text-align: center;
    padding: 5px 10px;
    color: var(--badge-font-status);
    min-width: 77px;
    min-height: 26px;
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 0;
    margin-right: 10px;
    margin-top: 10px;
}

.card-pill.indicator {
    background-color: #F2FFEE;
    color: #00851F;
    text-align: left;
    max-width: max-content;
}


/*--------------------End Card types------------------ */

/*------------------------------Horizontal Nav Pills----------------------------------------*/
.nav-pills .nav-item {
    border-right: 1px solid #707070;
}

.nav-pills .nav-item:last-child {
    border-right: none;
}

.nav-pills .nav-item:first-child .nav-link {
    padding-left: 2px;
}

.nav-pills .nav-link {
    font-size: 16px;
    padding: 0rem 1rem
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:active,
.nav-pills .nav-link.active,
.nav-pills .nav-link:focus {
    background-color: transparent;
    color: #1b55b2;
    font-weight: normal;
    font-size: 16px;
}

/*------------------------------End Horizontal Nav Pills----------------------------------------*/

/*------------------------------Secondary Navigation----------------------------------------*/
.second-nav-container {
    overflow-x: auto;
    white-space: nowrap;
}

.second-nav .nav-item {
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 15px;
}

.second-nav .nav-item .nav-link {
    background-color: var(--grey-color);
    color: var(--dark-color);
    padding: 0.5rem 1rem;
    transition: 0.8s;
}

.second-nav .nav-item:hover .nav-link:hover {
    color: var(--white-color);
    background-color: var(--primary-color);
}

.second-nav .nav-item .nav-link.active {
    color: var(--white-color);
    background-color: var(--primary-color);
}
/*------------------------------END Secondary Navigation----------------------------------------*/

/*------------------------------Vertical Navigation----------------------------------------*/
.vertical-nav .nav-item {
    margin-bottom: 15px;
}

.vertical-nav .nav-item .nav-link {
    background-color: var(--grey-color);
    color: var(--dark-color);
    transition: 0.8s;
}

.vertical-nav .nav-item:hover .nav-link:hover {
    color: var(--white-color);
    background-color: var(--primary-color);
}

.vertical-nav .nav-item .nav-link.active {
    color: var(--white-color);
    background-color: var(--primary-color);
}
/*------------------------------END Vertical Navigation----------------------------------------*/


/*-----------------------Nav Tabs (underline the active tab)-------------------------------*/
.navTab {
    background-color: var(--primary-bgcolor);
    padding: 10px 0 10px 8px;
}


.nav-tabs .nav-link {
    color: var(--primary-font-color);
    font-size: 17px;
    font-weight: 400;
    text-transform: uppercase;
    margin-left: 15px;
    margin-right: 15px;
    padding: 0px 5px;
    border-bottom: 2px solid;
    border: transparent;
}

.nav-tabs .nav-link:first-child {
    margin-left: 0px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--primary-font-color);
    border: transparent;
    border-bottom: 2px solid #1b55b2;
    background-color: transparent;
    transition: 0s;
    font-weight: 600;
}

/*-----------------------End Nav Tabs (underline the active tab)-------------------------------*/

/*-----------------------Tabs scrolling on small screens------------------------*/
.scroller {
    text-align: center;
    cursor: pointer;
    display: none;
    padding: 7px;
    padding-top: 7px;
    white-space: no-wrap;
    vertical-align: middle;
    background-color: var(--white-color);
}

.scroller-right {
    float: right;
}

.scroller-left {
    float: left;
}

.wrapper {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    padding: 5px;
    height: 40px;
}

.list {
    position: absolute;
    left: 0px;
    top: 0px;
    min-width: 3000px;
    margin-left: 0px;
    margin-top: 0px;
}

.list li {
    display: table-cell;
    position: relative;
    text-align: center;
    cursor: grab;
    cursor: -webkit-grab;
    color: #efefef;
    vertical-align: middle;
}


/*----------------------Right sidebar----------------------------------------*/

/*-------------Conversion right sidebar to filter button------------------- */
.scw-switcher-wrap.scw-switcher-open {
    width: 360px;
    height: 65%;
    padding: 35px 25px;
    overflow-y: scroll;
}

.scw-switcher-wrap {
    top: 215px;
    right: 19px;
    padding: 23px;
    width: 0;
    height: 0;
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: 3px;
    box-shadow: 0 13px 42px 11px rgba(0, 0, 0, .05);
    z-index: 1;
    overflow: hidden;
    -webkit-transition: all .45s ease;
    -o-transition: all .45s ease;
    transition: all .45s ease;
}

.scw-switcher-wrap, .scw-trigger-icon {
    position: fixed;
    left: auto;
    background-color: var(--white-color);
}

.scw-trigger-icon {
    width: 44px;
    height: 44px;
    top: 217px;
    right: 20px;
    border: 0;
    padding: 0;
    text-align: center;
    z-index: 5;
    cursor: pointer;
}


.scw-trigger-icon i {
    width: 42px;
}

/*-------------End Conversion right sidebar to filter button------------------- */

/*----------------------Right sidebar widgets----------------------------------------*/

.right-sidebar-widgets-wrap .widget:first-child {
    padding-top: 0;
    border-top: 0;
}

.widget:first-child {
    margin-top: 0;
}

.right-sidebar-widgets-wrap .widget {
    padding-top: 25px;
    border-top: 1px solid #eee;
}

.widget {
    position: relative;
    margin-top: 25px;
}

.right-sidebar-widgets-wrap .widget > h5 {
    letter-spacing: 1px;
}

/*.widget > h5 {*/
/*    margin-bottom: 25px;*/
/*    font-size: 15px;*/
/*    font-weight: 600;*/
/*    letter-spacing: 2px;*/
/*    text-transform: uppercase;*/
/*}*/

.widget-reminder {
    background-color: #F3F8FF;
    border-radius: 3px;
    padding: 25px;
    max-width: 100%;
}

/*----------------------End Right sidebar widgets----------------------------------------*/

/*----------------------Used as right sidebar widget ---------------------------------------*/
/*------------------Droptdown bootstrap select colors stages--------------------------------*/
.dropdown-item.active, .dropdown-item:active {
    color: var(--white-color);
    text-decoration: none;
    background-color: #1b55b2;
}

.opencall {
    background-color: #E36219;
    color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.newposition {
    background-color: #0B9FC5;
    color: var(--white-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}


.upcoming {
    background-color: #707070;
    color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.review {
    background-color: #1861B5;
    color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.closed {
    background-color: #D63031;
    color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.applied {
    background-color: #33CE95;
    color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.interview {
    background-color: #FDBA36;
    color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.shortlist {
    background-color: #36A5B2;
    color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.rejected {
    background-color: #D63031;
    color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.offer {
    background-color: #0984E3;
    color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.declined {
    background-color: #F30000;
    color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.accepted {
    background-color: #348F6E;
    color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.hired {
    background-color: #9050E0;
    color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.onhold {
    background-color: #707070;
    color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/*------------------End Droptdown bootstrap select colors stages--------------------------------*/

/*-----------------------Radio button & checkbox & switches---------------------------- */

.checkbox-style-1, .radio-style-1 {
    opacity: 0;
    position: absolute;
}

.checkbox-style-1, .checkbox-style-1-label, .radio-style-1, .radio-style-1-label {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    cursor: pointer;
}

.checkbox-style-1:checked + .checkbox-style-1-label:before {
    content: "\f00c";
    font-family: 'Font Awesome 6 Free';
    color: var(--white-color);
    background: #1B55B2;
    border: 1px solid #1b55b2;
}

.checkbox-style-1:disabled + .checkbox-style-1-label:before {
    opacity: 0.5;
}

.radio-style-1:checked + .radio-style-1-label:before {
    background: #1B55B2;
    box-shadow: inset 0px 0px 0px 4px var(--white-color);
}

.radio-style-1:disabled + .radio-style-1-label:before {
    opacity: 0.5;
}

.checkbox-style-1-label:before {
    border-radius: 4px;
}

.radio-style-1-label:before {
    border-radius: 50%;
}

.checkbox-style-1-label, .radio-style-1-label {
    position: relative;
}

.checkbox-style-1-label:before, .radio-style-1-label:before {
    content: '';
    background: var(--white-color);
    border: 1px solid #D9D9D9;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 3px;
    margin-right: 10px;
    line-height: 1;
    text-align: center;
}

.checkbox-style-1-label.large-body:before {
    padding: 0px;
    text-transform: capitalize;

}

/*---------------------End Checkboxes & Radios-------------------------*/

/*-------------------------Single Switches-------------------------*/
.switch-toggle {
    position: absolute;
    margin-left: -9326px;
    visibility: visible;
}

input.switch-toggle-round + label {
    padding: 2px;
    width: 60px;
    height: 30px;
    background-color: #ddd;
    -webkit-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}

.switch-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: 15px;
}

.switch label {
    align-self: center;
    cursor: pointer;
}

input.switch-toggle-round:checked + label::before {
    background-color: #1B55B2;
}

input.switch-toggle-round + label::before {
    right: 1px;
    background-color: #f1f1f1;
    -webkit-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: background .4s;
    -moz-transition: background .4s;
    -o-transition: background .4s;
    transition: background .4s;
}

input.switch-toggle-round + label::after, input.switch-toggle-round + label::before {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
}

input.switch-toggle-round:checked + label::after {
    margin-left: 30px;
}

input.switch-toggle-round + label::after {
    width: 28px;
    background-color: var(--white-color);
    -webkit-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    -webkit-box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    -webkit-transition: margin .4s;
    -moz-transition: margin .4s;
    -o-transition: margin .4s;
    transition: margin .4s;
}

input.switch-toggle-round + label::after, input.switch-toggle-round + label::before {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
}

/*--------------------End Switches-----------------------------*/


/*-------------------------Single Switches-------------------------*/
.switch-toggle-text {
    position: absolute;
    margin-left: -9326px;
    visibility: visible;
}

input.switch-toggle-round-text + label {
    padding: 2px;
    width: 105px;
    height: 35px;
    background-color: #ddd;
    -webkit-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 25px;
}

input.switch-toggle-round-text:checked + label::before {
    background-color: #1B55B2;
}

input.switch-toggle-round-text + label::before {
    right: 1px;
    background-color: #f1f1f1;
    -webkit-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: background .4s;
    -moz-transition: background .4s;
    -o-transition: background .4s;
    transition: background .4s;
}

input.switch-toggle-round-text + label::after, input.switch-toggle-round-text + label::before {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
}

input.switch-toggle-round-text:checked + label::after {
    margin-left: 73px;
}

input.switch-toggle-round-text + label::after {
    width: 31px;
    background-color: var(--white-color);
    -webkit-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    -webkit-box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    -webkit-transition: margin .4s;
    -moz-transition: margin .4s;
    -o-transition: margin .4s;
    transition: margin .4s;
}

input.switch-toggle-round-text:checked + label .toggle-activate {
    display: block;
}

input.switch-toggle-round-text:checked + label .toggle-deactivate {
    display: none;
}

.toggle-activate {
    display: none;
    color: var(--white-color);
    top: 24%;
    left: 10%;
}

.toggle-deactivate {
    color: #1b55b2;
    top: 26%;
    left: 33%;
}

.toggle-activate, .toggle-deactivate {
    position: absolute;
    font-size: 8px;
}

.switch-toggle-text + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: 15px;
}

.switch1 label {
    align-self: center;
    cursor: pointer;
}

/*--------------------End Switches-----------------------------*/


/*----------------------Triple switches-------------------------*/

.tribbleSwitch {
    height: 26px;
    width: 26px;
    appearance: none;
    background-color: var(--white-color);
    border-radius: 50%;
    opacity: 0;
    border: 1px solid #DEDFDF;
    box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
}

.tribble-toggle-switch .inactive-toggle {
    transform: translateX(-12px);
}

.tribble-toggle-switch .active-toggle {
    transform: translate(10px, 1px);
}

.tribbleSwitch:hover {
    cursor: pointer;
}

.tribble-toggle-switch {
    display: inline-flex;
    justify-content: center;
    border-radius: 50px;
    width: 97px;
    height: 28px;
    margin-left: 15px;
}

.tribble-toggle-switch .default-toggle {
    opacity: 1;
}

.default-tribble-toggle {
    border: 1px solid #dddddd;
    background-color: #f1f1f1;
}

.inactive-tribble-toggle {
    border: 1px solid #A4A4A4;
    background-color: #A4A4A4;
}

.active-tribble-toggle {
    border: #1B55B2;
    background-color: #1B55B2;
}

/*----------------------End Triple switches-------------------------*/

/*----------------------Yes No Switch------------------------*/

.btn-outline-switch {
    color: #1b55b2;
    border-color: #1b55b2;
    background-color: var(--white-color);
    font-size: 15px;
    min-width: 90px;
    min-height: 40px;
    padding: 8px;
    box-shadow: none;
}

.btn-check:checked + .btn-outline-switch,
.btn-outline-switch:active {
    color: var(--white-color);
    background-color: #1b55b2;
    border-color: #1b55b2;
}

.btn-outline-switch:hover {
    color: #003DB7;
    background-color: var(--white-color);
    border-color: #003DB7;
}

.btn-check:active + .btn-outline-switch:focus,
.btn-check:checked + .btn-outline-switch:focus,
.btn-outline-switch.active:focus,
.btn-outline-switch.dropdown-toggle.show:focus,
.btn-outline-switch:active:focus,
.btn-outline-switch:focus,
.btn-check:focus + .btn-outline-switch {
    box-shadow: 0 0 0 0.25rem transparent;
}

.btn-check:disabled + .btn-outline-switch {

}

/*----------------------End Yes No Switch------------------------*/

/*-------------------Checkboxes Colors-----------------------*/

/* checkboxes background color */
.checkbox-style-1.bg-shamrock-green:checked + :before {
    background-color: #33CE95;
    border-color: #33CE95;
}

.checkbox-style-1.bg-yellow:checked + :before {
    background-color: #FDBA36;
    border-color: #FDBA36;
}

.checkbox-style-1.bg-cadet-blue:checked + :before {
    background-color: #36A5B2;
    border-color: #36A5B2;
}

.checkbox-style-1.bg-dark-red:checked + :before {
    background-color: #D63031;
    border-color: #D63031;
}

.checkbox-style-1.bg-electron-blue:checked + :before {
    background-color: #0984e3;
    border-color: #0984e3;
}

.checkbox-style-1.bg-red:checked + :before {
    background-color: #F30000;
    border-color: #F30000;
}

.checkbox-style-1.bg-dark-green:checked + :before {
    background-color: #348F6E;
    border-color: #348F6E;
}

.checkbox-style-1.bg-purple:checked + :before {
    background-color: #9050E0;
    border-color: #9050E0;
}

.checkbox-style-1.bg-dark-gray:checked + :before {
    background-color: #707070;
    border-color: #707070;
}

.checkbox-style-1.bg-orange:checked + :before {
    background-color: #E36219;
    border-color: #E36219;
}

.checkbox-style-1.bg-pacific-blue:checked + :before {
    background-color: #0B9FC5;
    border-color: #0B9FC5;
}

.checkbox-style-1.bg-blue:checked + :before {
    background-color: #1861B5;
    border-color: #1861B5;
}

/*--------------- End checkboxes Colors --------------*/


/*------------------------ End radio button & checkbox Switches---------------------------------- */


/*------------------Forms and Form fields styles----------------------------------------- */

/*-----------------------General form styles---------------------------------*/

.invalid-feedback {
    font-size: 13px;
    color: #dc3545;
}

.form-control {
    padding: 0.375rem 0.75rem;
    color: var(--primary-color);
    background-color: var(--white-color);
    border: 1px solid #fff;
    border-radius: 0rem;
}

.form-control::placeholder {
    font-size: 14px;
    color: #A4A4A4;
}

.form-control:disabled, .form-control[readonly] {
    opacity: 0.5;
}

.form-control:focus {
    box-shadow: 0px 0px 6px #fff;
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--white-color);
}

/*-----------------------Fields with floating------------------------------------------- */

.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    transform: scale(1) translateY(-2rem) translateX(-0.80rem) !important;
    color: var(--primary-font-color);
    text-transform: capitalize;
    opacity: 1;

}

.form-floating > label {
    color: var(--primary-font-color);
    text-transform: capitalize;
    opacity: 1;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    font-weight: 500;
}

.form-floating > .form-control, .form-floating > .form-control-plaintext {
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #d9d9d9;
    height: 40px;
    background-color: var(--white-color);
}

.form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown), .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
    padding: 5px 9px;
    color: var(--primary-font-color);
}

.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
    border: 1px solid #d9d9d9;
    box-shadow: none;
}


/*.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: url("../../images/warning-sign.svg");
    background-size: calc(.55em + .275rem) calc(.75em + .375rem);
}*/

.form-group.form-floating {
    margin-bottom: 40px;
}

/*-----------------------End Fields with floating------------------------------------------- */

/*------------------------Datepicker fields----------------------------------------*/

/* .datepicker-icon {
    background-image: url(/staticfiles/images/calendar-regular.svg);
    background-position: right 13px center;
    background-size: 14px;
    background-repeat: no-repeat;
} */

/*-----------------------End datepicker---------------------------------------*/

/*------------------------Search field----------------------------------------*/

/* .search-field {
    background-image: url(/staticfiles/images/magnifying-glass-solid.svg);
    background-position: right 15px center;
    background-size: 17px;
    background-repeat: no-repeat;
} */

/*-----------------------End Search field---------------------------------------*/


/*--------------------Uploading files field---------------------------------*/
/*-------------------selected file box width----------------------------------*/
.fragment.selected-file {
    max-width: max-content;
    min-width: 350px;
    font-size: .875rem;
    margin-bottom: 10px;
}

/*--------------------Remove the default bootstrap label "upload" from uploading field---------------------------------*/

input[type=file]::-webkit-file-upload-button {
    display: none;
}

input[type=file]::file-selector-button {
    display: none;
}


/*------------------------Accordion------------------------------*/
.accordion-item {
    background-color: var(--white-color);
    border: 1px solid #eeeeee;
    margin-top: 10px;
    border-radius: 0rem;
}

.accordion-item:first-of-type {
    border-top-left-radius: 0rem;
    border-top-right-radius: 0rem;
}

.accordion-item:last-of-type {
    border-bottom-right-radius: 0rem;
    border-bottom-left-radius: 0rem;
}

.accordion-item:not(:first-of-type) {
    border-top: 1px solid #eee;
}

.accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: var(--white-color);
    background-color: var(--primary-color);
    box-shadow: none;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.accordion-header {
    line-height: 2.5;
}

.accordion-button {
    font-size: 18px;
    font-weight: 600;
    padding: 0rem 1rem;
    background-color: var(--grey-color);
    color: var(--dark-color);
}

.accordion-button::after {
    background-size: 15px;
    background-position: 2px;
    filter: brightness(0) saturate(100%) invert(45%) sepia(1%) saturate(523%) hue-rotate(3deg) brightness(96%) contrast(86%);
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(1deg) brightness(104%) contrast(101%);
}

.accordion-body {
    background-color: var(--white-color);
    position: relative;
}

/*------------------------end accordion----------------------------------- */

/*---------------------Accordion Style 1-------------------------------*/
.accordion-style-1 .accordion-item {
    border-color: transparent;
}

.accordion-style-1 .accordion-header {
    position: relative;
}

.accordion-style-1 .accordion-header .badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

.accordion-style-1 .accordion-header-icon {
    margin-top: 0.8rem;
}

.accordion-style-1 .accordion-header-icon i {
    margin-right: 0.5rem;
    font-size: 18px;
}

.accordion-style-1 .accordion-header-details {
    margin-top: 2.2rem;
    margin-bottom: 0.5rem;
}

.accordion-style-1 .accordion-button {
    border-color: transparent;
    box-shadow: 0px 3px 6px #00000029;
    line-height: 1.5;
    color: #444444;
    background-color: var(--white-color);
    z-index: 3;
}

.accordion-style-1 .accordion-button:hover {
    cursor: pointer;
}

.accordion-style-1 .accordion-button:not(.collapsed)::after {
    filter: brightness(0) saturate(100%) invert(24%) sepia(89%) saturate(1066%) hue-rotate(194deg) brightness(102%) contrast(99%);
}

.accordion-style-1 .accordion-collapse {
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-left: 3px solid #1B55B2;
}

/*---------------------End Accordion Style 1-------------------------------*/


/*-----------------------------Table------------------------------------*/
.table-style-1 {
    vertical-align: middle;
}

.table-style-1 thead .sorting {
    cursor: pointer;
    position: relative;
}

.table-style-1 thead .sorting:before,
.table-style-1 thead .sorting:after {
    right: 20px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 13px;
}

.table-style-1 thead .sorting:before {
    content: "\f077";
}

.table-style-1 thead .sorting:after {
    content: "\f078";
}

.table-style-1 thead .sorting:before,
.table-style-1 thead .sorting:after {
    position: absolute;
    display: block;
    opacity: .3;
}

.table-style-1 thead .sorting:before {
    bottom: 0.9em;
}

.table-style-1 thead .sorting:after {
    bottom: 0.2em;
}

.table-style-1 > :not(:last-child) > :last-child > * {
    border-bottom-color: inherit;
}

/*-----------------------------End Table------------------------------------*/

/*--------------------Overwrite legendary changes--------------------------------------*/
/*-------------overwrite livesearch opacity bg color--------------------*/
.livesearch-select .dropdown-menu {
    z-index: 80;
}

/*-------------overwrite livesearch placeholder--------------------*/
.livesearch-select .bs-placeholder .filter-option .filter-option-inner .filter-option-inner-inner {
    font-size: 14px;
    color: var(--placeholder-font-color);
    line-height: 1.75;
}

/*--------------------End Overwrite legendary changes--------------------------------------*/

/*--------------------------------Alert Box-------------------------------------*/
.alert-style-1 {
    position: absolute;
    width: 560px;
    right: 15px;
}

.alert-style-1.alert-warning {
    color: #856404;
}

/*--------------------------------End Alert Box-------------------------------------*/

/*------------------------Box with records or whatever box with actions-----------------------------------------------------*/
.fragment {
    height: auto;
    display: block;
    padding: 10px;
    border-radius: 0px;
    box-sizing: border-box;
    text-decoration: none;
    margin-bottom: 20px;
    background-color: #f5d208;
}

.fragment .btn-close {
    right: 10px;
    top: 10px;
    width: 12px;
    height: 12px;
    padding: 0;
}

.fragment.pill-fragment {
    color: #1b55b2;
    font-size: 15px;
    border-radius: 10px;
    padding: 5px 10px;
    margin-bottom: 0px;
}

.pill-fragment .btn-close {
    filter: brightness(0) saturate(100%) invert(24%) sepia(77%) saturate(1596%) hue-rotate(200deg) brightness(96%) contrast(96%);
    opacity: 1;
    width: 13px;
    padding: 0;
    margin-top: 3px;
}

/*------------------Box With Icon------------------------------*/
.box-with-icon {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;

}

.boxWithIcon-icon {
    width: 6.5rem;
    height: 4rem;
    padding: 0 0.75rem;
}

.boxWithIcon-content {
    flex-grow: 1;
    min-width: 0;
    flex-basis: 0;
    max-width: 100%;
    padding: 0 0.5rem;

}

.icon-box {
    padding: 60px 30px 60px 30px;
    background-color: var(--grey-color); 
}        

.icon-box .icon-box-icon {
    margin-bottom: 15px;
    margin-right: auto;
    margin-left: auto;
}

.icon-box .icon-box-icon .elementor-icon {
    background-color: var(--primary-color);
    fill: var(--white-color);
    color: var(--white-color);
    font-size: 40px;
    width: 75px;
    display: flex;
    height: 75px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.icon-box .icon-box-content .icon-box-title {
    margin-bottom: 10px;
}

.icon-box .icon-box-content .icon-box-description {
    min-height: 48px;
}
/*------------------End Box With Icon------------------------------*/

/*-------------------------Ul List-----------------------------*/
/*bullet point align left*/
.list-bullets {
    margin-left: -12px;
}

/*-------------------------End Ul List-----------------------------*/

.edit-record {
    float: right;
    display: inline-block;
    padding: 2px 5px;
    font-size: 1rem;
}

.btn-edit {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #444;
    background: transparent url(/staticfiles/images/edit.svg);
    border: 0;
    border-radius: 0.25rem;


}


/*modal icons*/
.styled-icons {
    max-width: 80px;
}


.status-msg.success {
    background-color: rgba(95,101,83, 0.7);
    padding: 10px 20px 10px 20px;
    color: var(--white-color);
    border: 1px solid #5f6553;
}

.status-msg.error {
    background-color: rgba(179,0,0, 0.7);
    padding: 10px 20px 10px 20px;
    color: var(--white-color);
    border: 1px solid #b30000;
}

.status-msg p {
    margin-bottom: 0;
}

.error-block .errot-text {
    font-size: 420px;
    font-family: var(--title-fonts);
    color: var(--primary-color);
    line-height: 0.8;
    margin-bottom: 30px;
    font-style: normal;
    text-transform: uppercase;
    font-weight: 600;
}

@media (max-width: 1340px) {
    
}


@media (max-width: 1200px) {

}

@media (max-width: 1023px) {
    .section-title {
        font-size: 36px;
        line-height: 44px;
    }

    .error-block .errot-text {
        font-size: 320px;
    }
}

@media (max-width: 990px) {
    #header-wrap {
        padding: 5px 0;
    }

    #nutrition-skills {
        transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 130px 0px 130px 0px;
    }

    .widget-image-container {
        margin: 0px 0px 0px 0px;
    }

    .page-header .page-title h1 {
        font-size: 45px;
        line-height: 50px;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }
    
    .page-header .page-title h1 {
        font-size: 35px;
        line-height: 40px;
    }
    
    .color-overlay {
        padding: 75px 0;
    }

    .accordion-button {
        line-height: 1.3;
        padding: 9px 10px;
        font-size: 16px;
    }

    .error-block .errot-text {
        font-size: 200px;
    }

    .carousel-caption {
        background-color: rgba(255, 255, 255, 0.65);
    }
}

@media (max-width: 600px) {
    
}

@media (max-width: 580px) {
    
}


@media (max-width: 480px) {
    .section-title {
        font-size: 28px;
        line-height: 36px;
    }

    .error-block .errot-text {
        font-size: 130px;
    }
}

@media (max-width: 425px) {

}

@media (max-width: 375px) {
    .testimonial-box.style-1 {
        padding: 35px 20px;
    }
}

@media (max-width: 320px) {
    
}