:root{
    --primary-color: #4BB4EF;
    --secondary-color: #00CBBA;
    --body-foreground: #000000;
    --color-0: #ffffff;
    --color-1: #F7F2ED;
    --color-2: #FFAC00;
    --color-3: #FFA4CB;
    --color-4: #020303;
    --color-5: #0471AE;
    --color-6: #D6D6D6;
    --search-input: #F3F3F3;
    --search-input-border: #C0C0C0;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2'),
        url('../fonts/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-BoldItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Italic.woff2') format('woff2'),
        url('../fonts/Montserrat-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Light.woff2') format('woff2'),
        url('../fonts/Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2'),
        url('../fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-LightItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2'),
        url('../fonts/Montserrat-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-MediumItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.woff2') format('woff2'),
        url('../fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Regular.woff2') format('woff2'),
        url('../fonts/Outfit-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Medium.woff2') format('woff2'),
        url('../fonts/Outfit-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

img{
    max-width: 100%;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

input::placeholder{
    color: var(--body-foreground);
}

.container.small-container{
    max-width: 1078px;
}

input:focus, input:focus-visible, select:focus, select:focus-visible{
    outline: none;
}
.text-medium{
    font-weight: 500;
}

body{
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--body-foreground);
}
.row{
    --bs-gutter-x: 1.875rem;
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
    --bs-gutter-x: 1.875rem;
}
@media screen and (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
        max-width: 1390px;
    }
}
.site-header{
    padding: 16px 0 0;
    background: var(--color-0);
    position: sticky;
    top: 0;
    z-index: 99;    
}
.brand-logo{
    padding-right: 1rem;
}
.main-navigation{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 3.5rem;
    font-weight: 500;
    font-size: 16px;
    width: 100%;
}
.main-navigation a{
    text-decoration: none;
    color: var(--body-foreground);
    position: relative;
    display: inline-flex;
    line-height: 24px;
}
.main-navigation a:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
    transition: 0.4s;
    border-bottom: 2px solid currentColor;
    opacity: 0;
    visibility: hidden;
}
.main-navigation > li.active > a:after, .main-navigation > li:hover > a:after{
    left: 0;
    right: 0;
    opacity: 1;
    visibility: visible;
}
.right-menu{
    column-gap: 20px;
    padding-left: 1rem;
}
.user-btn{
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-weight: 500;
    background: var(--color-1);
    color: var(--body-foreground);
    min-width: 112px;
    padding: 10px;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    border-radius: 10px;
    border: none;
    line-height: 28px;
    font-size: 16px;
    overflow: hidden;
    transition: 0.4s;
}
.user-btn:hover{
    padding-right: 10px;
}
.user-btn .svg-wrapper{
    width: 24px;
    height: 24px;
    color: var(--color-0);
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
}
.user-btn .svg-wrapper:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 24px;
    transition: 0.4s;
    scale: 1;
    transform-origin: left center;
}
.user-btn:hover .svg-wrapper:before{
    scale: 2.4;
}
.user-btn .svg-wrapper svg{
    width: 16px;
    height: auto;
    position: relative;
    z-index: 1;
    transition: 0.4s;
    left: 0;
}
.user-btn:hover .svg-wrapper svg{
    left: 5px;
}

.user-btn.dropdown-toggle::after{
    content: none;
}

.user-btn.my-account-btn{
    min-width: 160px;
}


.button-group{
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 12px;
}

.btn{
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-weight: normal;
    background: var(--color-1);
    color: var(--body-foreground);
    min-width: 112px;
    padding: 10px 20px;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid var(--color-1);
    line-height: 28px;
    font-size: 16px;
    transition: 0.4s;
}
.btn:hover{
    border-color: var(--color-4);
    background: var(--color-1);
    color: var(--body-foreground);
}
.btn.btn-green{
    background: var(--secondary-color);
}
.btn.btn-green:hover{
    border-color: var(--color-4);
    background: var(--color-1);
    color: var(--body-foreground);
}
.btn.btn-yellow{
    background: var(--color-2);
}
.btn.btn-yellow:hover{
    border-color: var(--color-4);
    background: var(--color-1);
    color: var(--body-foreground);
}
.btn.btn-pink{
    background: var(--color-3);
}
.btn.btn-pink:hover{
    border-color: var(--color-4);
    background: var(--color-1);
    color: var(--body-foreground);
}
.btn.btn-small{
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 14px;
}

.icon-btn{
    background-color: var(--color-5);
    color: var(--color-0);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s;
}
.icon-btn:hover{
    background-color: var(--secondary-color);
}
.icon-btn .icon{
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.text-link{
    text-decoration: none;
    color: var(--color-5);
    font-weight: 500;
    font-size: 14px;
    position: relative;
    display: inline-flex;
}
.text-link:after{
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    right: 50%;
    opacity: 0;
    visibility: hidden;
    border-bottom: 1px solid currentColor;
    transition: 0.4s;
}
.text-link:hover:after{
    left: 0;
    right: 0;
    opacity: 1;
    visibility: visible;
}

.media{
    overflow: hidden;
    width: 100%;
}
.media img{
    transition: 0.4s;
}
.media:hover img{
    scale: 1.1;
}

.section{
    padding: 100px 0;
    position: relative;
    z-index: 0;
}
.bg-blue{
    background: #1B7AB5;
}
.bg-lightgrey{
    background: #F5F5F7;
}
.bg-navyblue{
    background: #112132;
}
.bg-light-green{
    background: #F8FCFF;
}

.section-heading{
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 15px;
}

.wave-shape{
    width: 100%;
    margin-bottom: -1px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.wave-shape svg{
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* Login popup */
.dropdown-menu.login{
    border-color: var(--color-1);
}
.login-form{
    width: 300px;
    padding: 15px 30px 30px 16px;
}
.login-form .form-field{
    position: relative;
}
.login-form .form-field svg{
    position: absolute;
    top: 12px;
    left: 5px;
    width: 22px;
}
.login-form .form-field .form-control{
    border-width: 0 0 1px;
    border-radius: 0;
    padding: 10px 5px 10px 35px;
}
.login-form .field-submit .btn{
    column-gap: 10px;
}

.navbar-toggler{
    width: 40px;
    height: 40px;
}
.navbar-toggler .navbar-toggler-icon{
    width: 30px;
    height: 30px;
}
.navbar-toggler svg{
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.navbar-row .main-navigation a{
    color: var(--color-0);
}





/* My account menu */
.my-accounts-nav{
    padding: 20px;
}
.my-accounts-nav ul{
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 30px;
}
.my-accounts-nav ul li{
    margin-bottom: 8px;
}
.my-accounts-nav ul li a{
    text-decoration: none;
    color: var(--body-foreground);
}

/* Main Banner */
.main-banner{
    font-size: 18px;
    font-weight: 600;
    background: #F3F3FA;
    position: relative;
    z-index: 0;
    padding-bottom: 80px;
    overflow: hidden;
}
.main-banner .icon-5{
    position: absolute;
    left: 78px;
    top: 120px;
    z-index: -1;
}
.main-banner .content-block{
    flex: 0 0 auto;
    width: 650px;
    z-index: 2;
}
.main-banner h3{
    font-size: 35px;
    font-weight: 700;
}
.main-banner h2{
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 20px;
}
.main-banner .search-form{
    background-color: rgba(255, 255, 255, 0.64);
    border-radius: 6px;
    padding: 32px 20px;
    margin-right: -80px;
    margin-top: 20px;
}
.search-tabs{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    column-gap: 7px;
}
.search-tabs li{
    background: var(--color-1);
    color: var(--body-foreground);
    padding: 10px 15px;
    line-height: 30px;
    text-align: center;
    border-radius: 7px;
    font-size: 16px;
    font-weight: normal;
}
.search-tabs li.active{
    background: var(--secondary-color);
}

.search-field-group{
    display: flex;
    column-gap: 6px;
    row-gap: 6px;
    font-size: 16px;
}
.search-field-group .field{
    flex: 1 1 auto;
    color: var(--body-foreground);
}
.search-field-group .field .input{
    background: var(--search-input);
    border: 1px solid var(--search-input-border);
    border-radius: 8px;
    padding: 12px 10px;
    line-height: 32px;
    appearance: none;
    width: 100%;
}
.search-field-group .field .select{
    background: var(--search-input);
    border: 1px solid var(--search-input-border);
    border-radius: 8px;
    padding: 12px 20px 12px 10px;
    line-height: 32px;
    appearance: none;
    width: 100%;
}
.select-field{
    position: relative;
}
.select-field .form-select{
    background-image: none;
}
.select-field svg{
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    width: 9px;
    height: 5px;
}
.search-form .select-field{
    min-width: 180px;
}
.search-form .postcode{
    flex: 0 0 auto;
    max-width: 176px;
}
.search-form .search-btn{
    background: var(--primary-color);
    color: var(--color-0);
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
}

.animation-image-wrapper{
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 48px 0 0;
    min-height: 680px;
}
.img-block .animation-image-wrapper .shape-img{
    position: absolute;
}
.img-block .animation-image-wrapper .shape-1{
    left: 30px;
    top: 50px;
    animation: circleMoves 3s infinite;
}
.img-block .animation-image-wrapper .shape-2{
    right: -30px;
    bottom: 38px;
    animation: circleMoves2 3s infinite;
}
.img-block .animation-image-wrapper .icon-img{
    position: absolute;
}
.img-block .animation-image-wrapper .icon-1{
    top: 54px;
    left: 132px;
}
.img-block .animation-image-wrapper .icon-2{
    top: 86px;
    left: -20px;
}
.img-block .animation-image-wrapper .icon-3{
    top: 53%;
    left: 54px;
}
.img-block .animation-image-wrapper .icon-4{
    top: 20px;
    right: 90px;
}
.img-block .animation-image-wrapper .img{
    position: relative;
    z-index: 1;
    right: -20px;
    margin: 0 auto -55px;
    animation: imageMove 3s infinite;
}

/* icon-with-content */
.dot-animation{
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -730px;
}
.box-content{
    margin: 40px 0 0;
}
.icon-with-content{
    font-weight: 500;
    width: 100%;
    height: 100%;
}
.icon-with-content .icon{
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    top: 0;
    transition: 0.4s;
}
.icon-with-content:hover .icon{
    top: -12px;
}
.icon-with-content .icon img{
    height: 97px;
    object-fit: contain;
}
.icon-with-content h3{
    font-size: 24px;
    font-weight: 700;
    margin: 15px 0;
}
.icon-with-content h4{
    font-size: 18px;
    font-weight: 700;
    margin: 25px 0;
}
.icon-with-content p:last-child{
    margin-bottom: 0;
}

.section.browse-category{
    padding: 90px 0 140px;
}
.browse-category .section-heading{
    margin-bottom: 0;
}
.browse-category .col-lg-4{
    max-width: 296px;
}
.icon-with-content.bg-box{
    background: var(--color-0);
    border-radius: 10px;
    padding: 40px;
}
.icon-with-content.bg-box h4:last-child{
    margin-bottom: 0;
}

/* img-with-text */
.img-with-text{
    overflow: hidden;
}
.img-with-text.img-first .img-wrapper{
    float: right;
    width: 55vw;
    padding-right: 40px;
    height: 100%;
}
.img-with-text.img-first .img-wrapper .media{
    height: 100%;
}
.img-with-text.img-first .img-wrapper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* city-list */
.map-block{
    flex: 0 0 auto;
    width: 38%;
}
.city-list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: 500;
    color: var(--primary-color);
    line-height: 33px;
}
.city-list > li{
    width: 25%;
    margin: 25px 0;
    padding-right: 7px;
}
.city-list ul{
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 400;
}
.city-list a{
    color: var(--color-0);
    text-decoration: none;
    position: relative;
}
.city-list a:after{
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 75%;
    opacity: 0;
    visibility: hidden;
    border-bottom: 1px solid currentColor;
    transition: 0.4s;
}
.city-list a:hover:after{
    right: 0;
    opacity: 1;
    visibility: visible;
}

/* ups-section */
.section.ups-section{
    padding: 70px 0;
}
.section.ups-section .container{
    --bs-gutter-x: 4.25rem;
}
.section.ups-section .row{
    --bs-gutter-x: 4.25rem;
}

/* explore-section */
.section.explore-section{
    padding: 75px 0 65px;
    overflow: hidden;
}
.explore-section .row{
    --bs-gutter-x: 2.75rem;
}
.explore-section .container, .explore-section .container-fluid, .explore-section .container-lg, .explore-section .container-md, .explore-section .container-sm, .explore-section .container-xl, .explore-section .container-xxl{
    --bs-gutter-x: 2.75rem;
}
.explore-section .bg-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.explore-section .bg-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 2s;
}
.explore-section:hover .bg-img img{
    transform: scale(1.1);
}
.explore-section .section-heading{
    margin-bottom: 50px;
}
.explore-section .plan-option{
    max-width: 514px;
}
.join-plan{
    background-color: rgba(0, 0, 0, 0.79);
    border-radius: 50px;
    padding: 55px 65px;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    color: var(--color-0);
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    display: flex;
    flex-direction: column;
}
.join-plan h5{
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 7px;
}
.join-plan h3{
    font-size: 44px;
    font-weight: 700;
    margin: 0;
}
.join-plan ul{
    list-style: none;
    padding: 0;
    margin: 38px 0;
}
.join-plan ul li{
    background-image: url(../images/green-tick.svg);
    background-repeat: no-repeat;
    background-position: left 10px;
    padding-left: 30px;
    margin-bottom: 8px;
}
.join-plan .button-wrapper{
    margin-top: auto;
}
.join-plan .button-wrapper .btn{
    width: 100%;
    max-width: 300px;
}


.join-plan.green-color h5, .join-plan.green-color h3{
    color: var(--secondary-color);
}
.join-plan.green-color ul li{
    background-image: url(../images/green-tick.svg);
}
.join-plan.green-color .button-wrapper .btn:not(:hover){
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.join-plan.blue-color h5, .join-plan.blue-color h3{
    color: var(--primary-color);
}
.join-plan.blue-color ul li{
    background-image: url(../images/blue-tick.svg);
}
.join-plan.blue-color .button-wrapper .btn:not(:hover){
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* Newsletter Section */
.section.newsletter-sec{
    background-color: #E5FCFB;
    padding-top: 70px;
    padding-bottom: 90px;
    overflow: hidden;
}
.newsletter-graphics{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 283px;
    height: 238px;
}
.newsletter-graphics img{
    position: absolute;
}
.newsletter-graphics .newsletter-icon-1{
    top: 0;
    left: 45px;
    animation: newsletterIcon1 4s infinite;
}
.newsletter-graphics .newsletter-icon-2{
    bottom: 0;
    left: 0;
    animation: newsletterIcon1 4s infinite;
}
.newsletter-graphics .newsletter-icon-3{
    top: 0;
    right: 0;
    animation: newsletterIcon3 4s infinite;
}
.newsletter-graphics .newsletter-icon-4{
    bottom: 0;
    right: 45px;
    animation: newsletterIcon4 4s infinite;
}

.newsletter-form{
    max-width: 550px;
    margin-left: auto;
}
.newsletter-form .field{
    margin-bottom: 25px;
}
.newsletter-form .field .input{
    border: none;
    border-bottom: 1px solid var(--body-foreground);
    padding: 10px 5px;
    line-height: 30px;
    width: 100%;
    background: none;
}
.newsletter-form .field .input::placeholder{
    color: var(--body-foreground);
}
.newsletter-form .field .select{
    border: none;
    border-bottom: 1px solid var(--body-foreground);
    padding: 10px 5px;
    line-height: 30px;
    appearance: none;
    width: 100%;
    background: none;
}
.newsletter-form .btn{
    min-width: 192px;
    margin-top: 10px;
}

/* site footer */
.site-footer{
    color: var(--color-0);
    padding: 80px 0 0;
    margin-top: auto;
}
.site-footer a{
    color: var(--color-6);
    text-decoration: none;
}
.site-footer ul:not(.social-links) a{
    position: relative;
}
.site-footer ul:not(.social-links) a:after{
    content: '';
    position: absolute;
    bottom: 0;
    border-bottom: 1px solid currentColor;
    left: 0;
    right: 70%;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
}
.site-footer ul:not(.social-links) a:hover:after{
    right: 0;
    opacity: 1;
    visibility: visible;
}
.site-footer .search-menu a{
    font-size: 18px;
    color: #dedede;
    font-weight: 600;
}
.footer-block-heading{
    font-size: 18px;
    font-weight: 600;
    color: var(--color-6);
    margin-bottom: 8px;
    display: inline-block;
    width: 100%;
}
.footer-block-heading.mobile-accordion{
    pointer-events: none;
}
.site-footer ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.site-footer ul.footer-links{
    display: block;
    column-count: 2;
}
.site-footer ul li{
    margin-bottom: 4px;
    line-height: 24px;
}

.social-links{
    display: flex;
    flex-wrap: wrap;
    column-gap: 7px;
}
.social-links a{
    border: 1px solid currentColor;
    border-radius: 40px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s;
}
.social-links a:hover{
    rotate: 720deg;
    color: var(--primary-color);
}

.footer-bottom{
    padding: 65px 0 30px;
}
.footer-bottom p{
    margin: 0;
}


/* Page Banner */
.page-banner{
    position: relative;
    padding: 21px 0;
    z-index: 0;
    min-height: 102px;
}
.page-banner.with-search{
    padding: 75px 0 85px;
}
.page-banner.shape-page-banner{
    padding: 175px 0;
}
.page-banner .banner-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.page-banner .banner-img:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(174.93deg, rgba(0, 202, 215, 0.5695) 4.16%, rgba(10, 132, 207, 0.67) 99.6%);
}
.page-banner .banner-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-banner h1{
    font-size: 50px;
    font-weight: 700;
}
.page-banner h1:only-child{
    margin-bottom: 0;
}
.page-banner p{
    max-width: 780px;
    margin: 0 auto;
    font-weight: 500;
    line-height: 28px;
}
.page-banner.register-page-banner p{
    max-width: 915px;
}
.page-banner .search-form{
    background-color: #F5F5F7E5;
    border-radius: 9px;
    max-width: 940px;
    padding: 34px 50px;
    margin: 24px auto 0;
}
.page-banner .search-form .search-field-group .field .input{
    padding: 8px 10px;
    line-height: 30px;
}
.page-banner .search-form .search-field-group .field .select{
    padding: 8px 20px 8px 10px;
    line-height: 30px;
}
.page-banner .search-form .search-btn{
    height: 48px;
    width: 124px;
}

/* Tutor List page */
.subject-listing{
    padding: 33px 0 20px;
}
.subject-list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 20px;
    row-gap: 20px;
}
.subject-list .subject-item .item-link{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--color-0);
    border-radius: 10px;
    min-width: 96px;
    color: var(--body-foreground);
    height: 100%;
    padding: 18px 10px;
    text-decoration: none;
    transition: 0.4s;
}
.subject-list .subject-item .item-link:hover{
    background-color: #ECECEC;
}
/*.alert {
    padding: 8px 35px 8px 14px;
    margin-bottom: 18px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #b94a48;
    border-color: #eed3d7;
    border: 1px solid #ebccd1;
    background-color: #f2dede;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    line-height: 1.4;
}*/
.subject-list .subject-item.active .item-link{
    background-color: #ECECEC;
}
.subject-list .subject-item .item-link .item-icon{
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
}

.col-filter{
    flex: 0 0 auto;
    max-width: 380px;
}
col-filter.active{
    display: none;
}
.filter-mobile-heading{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}
.filter-mobile-heading h4{
    font-weight: 600;
    font-size: 20px;
    margin: 0;
}
.filter-mobile-heading .filter-close-button{
    border: none;
    background-color: transparent;
    padding: 0;
}
/* Filter */
h4.filter-collapsable-link{
    font-size: 1rem;
    font-weight: normal;
    text-decoration: underline;
    margin: 0;
    display: inline-block;
    cursor: pointer;
}
.col-filter form{
    max-width: 80%;
}
.col-filter label{
    margin-bottom: 7px;
}
.col-filter strong{
    font-weight: 500;
}
.col-filter .noUi-horizontal{
    height: 4px;
    border: none;
    background-color: var(--color-6);
    margin: 15px 0 30px;
}
.col-filter .noUi-connect{
    background-color: var(--primary-color);
}
.col-filter .noUi-horizontal .noUi-handle{
    width: 18px;
    height: 18px;
    border-radius: 18px;
    border: 3px solid var(--primary-color);
    background-color: #9BDBFF;
}
.col-filter .noUi-horizontal .noUi-handle:after, .col-filter .noUi-horizontal .noUi-handle:before{
    content: none;
}
.col-filter form input[type="text"], .col-filter form input[type="number"]{
    border: none;
    width: 100%;
    padding: 7px 15px;
    line-height: 28px;
    background-color: var(--color-0);
    border-radius: 4px;
    margin-bottom: 15px;
}
.col-filter form .select-field{
    margin-bottom: 15px;
}
.col-filter form .select-field select{
    border: none;
    width: 100%;
    padding: 7px 15px;
    line-height: 28px;
    background-color: var(--color-0);
    border-radius: 4px;
    appearance: none;
}
.sortby .select-field select{
    border: none;
    width: 100%;
    padding: 7px 35px 7px 15px;
    line-height: 28px;
    background-color: var(--color-0);
    border-radius: 4px;
    appearance: none;
}
.sortby .select-field svg{
    right: 14px;
}
.sortby label{
    margin-right: 7px;
    font-size: 14px;
}
.tutor-block{
    display: flex;
    flex-wrap: wrap;
    column-gap: 46px;
    row-gap: 20px;
    border-bottom: 1px solid rgba(17, 33, 50, 0.42);
    padding: 20px 0;
}
.tutor-block:last-child{
    border-bottom: none;
}

.tutor-block .tutor-img{
    flex: 0 0 auto;
    width: 248px;
}
.tutor-block .tutor-img .media{
    position: relative;
    padding-bottom: 100%;
    display: inline-block;
    vertical-align: bottom;
    width: 100%;
}
.tutor-block .tutor-img .media img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: top center;
}
.tutor-block .tutor-block-content{
    flex: 1 1 0%;
}
.tutor-block .tutor-title{
    display: flex;
    column-gap: 10px;
    line-height: 22px;
    margin-bottom: 24px;
}
.tutor-block .tutor-title h3{
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}
.tutor-block .tutor-title h3 a{
    color: var(--body-foreground);
    text-decoration: none;
}
.tutor-block .tutor-title h3 a:hover{
    color: var(--color-5);
}
.tutor-block .tutor-title .tutor-subject{
    font-size: 15px;
    font-weight: 500;
}
.tutor-block .tutor-title .tutor-price{
    margin-left: auto;
    font-size: 18px;
    font-weight: 500;
}
.tutor-description{
    line-height: 27px;
    margin-bottom: 20px;
}
.tutor-description p:last-child{
    margin-bottom: 0;
}
.tutor-location{
    display: flex;
    align-items: flex-start;
    color: var(--color-5);
    column-gap: 10px;
}
.tutor-location svg{
    flex: 0 0 16px;
}
.tutoe-meta{
    display: flex;
    flex-wrap: wrap;
    column-gap: 7px;
    row-gap: 7px;
    margin: 10px 0 0;
}
.tutoe-meta > div{
    background-color: rgba(75, 180, 239, 0.32);
    color: var(--body-foreground);
    padding: 0 9px;
    line-height: 27px;
    font-size: 14px;
    border-radius: 3px;
}
.tutoe-meta > div span{
    font-weight: 500;
    color: #128ACE;
}
.tutoe-meta > div.repeat{
    background-color: rgba(75, 180, 239, 0.32);
}
.tutoe-meta > div.repeat span{
    color: #128ACE;
}
.tutoe-meta > div.hours{
    background-color: rgba(0, 203, 186, 0.28);
}
.tutoe-meta > div.hours span{
    color: var(--color-5);
}
.tutoe-meta > div.travels{
    background-color: rgba(255, 172, 0, 0.26);
}
.tutoe-meta > div.travels span{
    color: #D08F07;
}
.tutoe-meta > div.response{
    background-color: rgba(255, 60, 0, 0.26);
}
.tutoe-meta > div.response span{
    color: #D92F01;
}
.tutoe-meta > div.member{
    background-color: rgba(75, 239, 149, 0.13);
}
.tutoe-meta > div.member span{
    color: #12CE18;
}

.pagination-block{
    margin: 80px 0 100px;
}
.pagination{
    column-gap: 5px;
    margin: 0;
}
.pagination .page-link{
    background-color: transparent;
    border: none;
    color: var(--body-foreground);
    padding: 3px 0;
}
.pagination .page-link.next, .pagination .page-link.prev{
    border-radius: 30px;
    background-color: var(--color-0);
    padding: 3px;
    width: 30px;
    text-align: center;
}
.pagination .page-item .page-link{
    width: 32px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    text-align: center;
    border-radius: 0 !important;
}
.pagination .page-item .page-link:hover{
    text-decoration: none;
}
.pagination .page-item.active .page-link{
    background-color: var(--color-5);
    color: var(--color-0);
}
.pagination .page-item .page-link:focus{
    box-shadow: none;
}

/* Tutor Details */
.tutor-full-details{
    padding: 44px 0 120px;
}
.tutor-full-details .col-tutor-description{
    padding-left: 65px;
    line-height: 26px;
}
.tutor-full-details .col-tutor-description h1, .tutor-full-details .col-tutor-description h2{
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 20px;
}
.tutor-full-details .subject-list{
    justify-content: flex-start;
}

.tutor-full-details .col-tutor-info{
    flex: 0 0 auto;
    width: 577px;
}
.tutor-profile{
    background-color: var(--color-0);
    border-radius: 15px;
    padding: 70px 40px 30px;
    text-align: center;
}
.tutor-profile .profile-avatar{
    max-width: 220px;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
.tutor-profile .profile-avatar .media{
    padding-bottom: 100%;
    position: relative;
    margin: 0 auto;
    border-radius: 50%;
}
.tutor-profile .profile-avatar .media img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
}
.tutor-profile h3{
    font-size: 18px;
    font-weight: 600;
    margin: 20px 0 10px;
}
.tutor-profile .tutor-location{
    justify-content: center;
    margin-bottom: 10px;
    text-align: left;
}
.tutor-profile .member-info{
    margin-bottom: 6px;
}
.tutor-profile .member-info p{
    margin: 0 0 6px;
    display: inline-block;
    vertical-align: bottom;
    width: 100%;
}
.tutor-profile .online-info{
    margin-bottom: 20px;
}
.tutor-profile .online-info .btn{
    min-width: 140px;
    column-gap: 15px;
}
.tutor-profile .online-info .btn:not(:hover){
    background-color: #F1F1F1;
}
.tutor-profile .user-btn{
    width: 100%;
    max-width: 300px;
}
.tutor-profile .user-btn:hover{
    background-color: var(--color-2);
}
.tutor-profile .user-btn .svg-wrapper{
    display: none;
}
.tutor-profile .other-information{
    display: flex;
    flex-wrap: wrap;
    column-gap: 36px;
    row-gap: 36px;
    width: 100%;
    margin: 50px 0;
}
.tutor-profile .other-information .info-block{
    flex: 1 1 0;
    text-align: left;
    font-size: 14px;
    position: relative;
}
.tutor-profile .other-information .info-block:nth-child(odd):after{
    content: '';
    position: absolute;
    top: 0;
    right: -18px;
    bottom: 0;
    border-right: 1px solid rgba(0, 0, 0, .54);
}
.tutor-profile .other-information .info-block h5{
    font-size: 16px;
    font-weight: normal;
}
.tutor-profile .other-information .info-block h4{
    font-size: 16px;
    font-weight: 600;
}
.tutor-profile .other-information .info-block p:last-child{
    margin-bottom: 0;
}

.tutor-contact .user-btn, .student-editprofile .user-btn, .student-updatepro .user-btn{
    padding: 10px 15px;
}
.student-updatepro{
    margin-top: 10px;
}
.dashboard-content .container-fluid{
    padding-left: 0;
    padding-right: 0;
}

/* Search tutor */
.section.tutor-search{
    padding-top: 33px;
}
.search-listing-block{
    border: 1px solid var(--secondary-color);
    padding: 55px 15px 40px;
    border-radius: 16px;
    height: 100%;
}
.search-subject .search-listing-block{
    border-color: var(--color-5);
}
.search-listing-block .search-name-heading{
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 14px;
    margin-bottom: 30px;
}
.search-listing-block .searching-list-option{
    max-width: 365px;
    margin: 0 auto;
}
.search-listing-block ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    column-count: 2;
    line-height: 32px;
}
.searching-list-option ul li a{
    color: var(--body-foreground);
    text-decoration: none;
}
.searching-list-option ul li a:hover{
    color: var(--secondary-color);
}

.search-subject .searching-list-option ul li a:hover{
    color: var(--color-5);
}

/* subject full details  */
.subject-full-details{
    padding: 30px 0 80px;
}
.full-content{
    line-height: 26px;
}
.full-content h2{
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 12px;
}
.full-content h3{
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 12px;
}
.full-content .subject-points{
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 18px;
    row-gap: 18px;
}
.full-content .subject-points .btn{
    column-gap: 14px;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}
.full-content .subject-points .btn:not(:hover){
    background-color: #EAEAEA;
}

/* form CSS */
.form-fields{
    display: flex;
    column-gap: 12px;
}
.form-fields .form-field{
    flex: 1 1 0;
}
.form-field{
    margin-bottom: 20px;
}
.form-select, .form-control{
    border: 1px solid #7E7D7E;
    color: var(--body-foreground);
    padding: 10px 20px;
    line-height: 28px;
}
.form-control:focus, .form-select:focus{
    box-shadow: none;
    border-color: #128ACE;
}
textarea.form-control{
    height: 140px;
}

.form-field .gj-datepicker-md [role=right-icon]{
    top: 13px;
    right: 10px;
}
.form-field .gj-textbox-md:active, .form-field .gj-textbox-md:focus{
    border-bottom-width: 1px;
}

/* Contact Page */
form.contact-form{
    margin-top: 110px;
}
.contact-left{
    padding-bottom: 55px;
}
.contact-middle{
    padding-bottom: 55px;
}
.contact-left .section-heading{
    margin-bottom: 20px;
}
.contact-information{
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    font-weight: 600;
    margin-top: 30px;
}
.contact-information a{
    text-decoration: none;
    color: var(--body-foreground);
}
.contact-information a:hover{
    color: #128ACE;
}
.contact-information > div{
    display: flex;
    column-gap: 8px;
}
.contact-information > div > .icon-wrapper{
    flex: 0 0 auto;
    width: 26px;
}

.contact-right-img{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-end;
}

/* Register */
.register-page-banner{
    padding: 75px 0 280px;
}
.register-form{
    margin-top: -200px;
    padding: 35px 135px 30px;
}
.login-form-page{
    margin-top: -200px;
    padding: 35px 135px 30px;
}
.login-form-page form{
    max-width: 600px;
    display: block;
    margin: 0 auto;
    background-color: var(--color-0);
    padding: 2.5rem;
    border-radius: 10px;
}

.form-field > ul{
    padding-left: 0;
    list-style: none;
    color: #ff0000;
}

.alert-dismissible .btn-close:focus{
    box-shadow: none;
}

.progress-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    column-gap: 10px;
}
.progress-nav .step {
    color: var(--body-foreground);
    display: inline-flex;
    align-items: center;
    column-gap: 10px;
}
.progress-nav .step.active{
    color: var(--secondary-color);
}
.progress-nav .step .icon-wrapper, .step-heading .icon-wrapper{
    background-color: var(--secondary-color);
    width: 42px;
    flex: 0 0 42px;
    height: 42px;
    border-radius: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-heading{
    width: 100%;
    display: inline-flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
    column-gap: 7px;
    padding-bottom: 10px;
    border-bottom: 1px solid currentColor;
}

.form-step {
    display: none;
}
.form-step.active {
    display: block;
}


.form-field .form-label{
    vertical-align: bottom;
    width: 100%;
    line-height: 26px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}
.form-step .form-field .form-select, .form-step .form-field .form-control{
    padding: 13px 20px;
}
.form-step .form-field .form-select:not(:focus), .form-step .form-field .form-control:not(:focus){
    border-color: var(--color-0);
}

form .form-check .form-check-label{
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}
form .form-check .form-check-label a{
    color: var(--color-5);
    text-decoration: none;
}
form .form-check .form-check-label a:hover{
    color: var(--body-foreground);
    font-weight: 600;
}
form .form-check{
    padding-left: 2rem;
}
form .form-check + .form-check{
    margin-top: 10px;
}
form .form-check .form-check-input{
    margin-left: -2rem;
    box-shadow: none;
    outline: none;
}
form .form-check .form-check-input[type=checkbox]{
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-color: #D9D9D9;
    outline: none;
    box-shadow: none;
}
form .form-check .form-check-input:checked[type=checkbox]{
    background-color: var(--color-5);
}
.form-step .step-submit{
    margin-top: 10px;
    display: flex;
    column-gap: 10px;
}
.dob-select{
    display: flex;
    column-gap: 10px;
}
.dob-select .select-field{
    flex: 1 1 auto;
}

.profile-accept-conditions{
    padding: 50px 0 80px;
}
.important{
    padding: 8px 35px 8px 14px;
    margin-bottom: 18px;
    border: 1px solid currentColor;
    border-radius: 4px;
    line-height: 1.4;
    font-size: 14px;
}
.important p{
    margin-bottom: 7px;
}
.important p:last-child{
    margin-bottom: 0;
}
.important p a{
    color: currentColor;
    font-weight: 600;
}



/* Dashboard */
.dashboard-with-sidebar{
    padding: 75px 0;
}
.dashboard-menu{
    flex: 0 0 auto;
    width: 320px;
}
.right-sidebar{
    flex: 0 0 auto;
    width: 420px;
}
.dashboard-menu .dashboard-navigation{
    background-color: var(--color-0);
    border-radius: 10px;
    padding: 15px 10px;
    margin: 0;
    list-style: none;
}
.dashboard-menu .dashboard-navigation li{
    margin: 0 0 2px;
}
.dashboard-menu .dashboard-navigation a{
    color: var(--body-foreground);
    text-decoration: none;
    line-height: 26px;
    display: inline-flex;
    align-items: center;
    column-gap: 16px;
    padding: 5px 20px;
    width: 100%;
    border-radius: 5px;
}
.dashboard-menu .dashboard-navigation li:not(.active) a:hover{
    color: var(--primary-color);
}
.dashboard-menu .dashboard-navigation li.active a{
    background-color: var(--primary-color);
    color: var(--color-0);
}

.dashboard-menu .dashboard-navigation a .icon{
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: currentColor;
}

.dashboard-content{
    line-height: 26px;
}
.dashboard-content:not(:only-child, :first-child){
    padding-left: 40px;
}

.dashboard-content h2{
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 12px;
}
.dashboard-content h4{
    font-size: 18px;
}
.dashboard-content a:not(.btn){
    color: var(--color-5);
    text-decoration: none;
}
.dashboard-content .important p a{
    color: currentColor;
}
.dashboard-content a.text-truncate{
    display: inline-block;
    width: 100%;
}
.dashboard-content a:not(.btn):hover{
    text-decoration: underline;
}

.dashboard-box{
    margin-top: 10px;
}
.dashboard-box .inner-box{
    background-color: var(--color-0);
    padding: 40px 15px;
    height: 100%;
    border-radius: 8px;
}
.dashboard-box .inner-box .counting{
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 15px;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
.dashboard-box .inner-box p{
    margin: 0;
}
.dashboard-content .account-alerts{
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgb(var(--bs-warning-rgb));
}
.dashboard-content .account-alerts ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.dashboard-content .account-alerts ul li{
    margin-bottom: 10px;
    padding-left: 30px;
    position: relative;
}
.dashboard-content .account-alerts ul li a{
    background: var(--color-2);
    color: var(--body-foreground);
    padding: 3px 7px;
    border-radius: 4px;    
    display: inline-block;
    margin-right: 5px;
    font-size: 14px;
    transition: 0.4s;
}
.dashboard-content .account-alerts ul li a:hover{
    text-decoration: none;
    background: var(--primary-color);
    color: var(--color-0);
}
.dashboard-content .account-alerts ul li .icon{
    margin-right: 10px;
    color: var(--secondary-color);
    fill: currentColor;
    position: absolute;
    left: 0;
    top: 2px;
}

.dashboard-content .profile-tabs{
    margin: 15px 0 30px;
}
.dashboard-content .profile-tabs ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 10px;
    row-gap: 10px;
}
.dashboard-content .profile-tabs ul li{
    flex: 1 1 0;
}
.dashboard-content .profile-tabs ul li:only-child{
    max-width: 220px;
}
.dashboard-content .profile-tabs ul a{
     background-color: var(--color-0);
     border-radius: 4px;
     padding: 10px 20px;
     color: var(--body-foreground);
     line-height: 24px;
     display: inline-block;
     transition: 0.4s;
     width: 100%;
     text-align: center;
}
.dashboard-content .profile-tabs ul li.active a, .dashboard-content .profile-tabs ul a:hover{
    background-color: var(--primary-color);
    color: var(--color-0);
    text-decoration: none;
}

.dashboard-content a.icon-btn{
    color: var(--color-0);
}

.title-with-link-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.title-with-link-wrapper h2{
    margin-bottom: 0;
}
.title-with-link-wrapper h3{
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 600;
}
.dashboard-content .table{
    margin-bottom: 30px;
}
.dashboard-content .table th{
    padding: 10px 15px;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 600;
    height: 50px;
}
.dashboard-content .table td{
    vertical-align: middle;
    padding: 7px 15px;
    font-size: 14px;
    height: 50px;
}
.dashboard-content .table td.small-col, .dashboard-content .table th.small-col{
    width: 140px;
}
.dashboard-content .table td.col-qualification{
    width: 160px;
}
.dashboard-content .table td.col-institute{
    width: 200px;
}
.dashboard-content .table th.col-qualification.large-col, .dashboard-content .table td.col-qualification.large-col{
    width: auto;
}
.dashboard-content .table th.col-institute.small-col, .dashboard-content .table td.col-institute.small-col{
    width: 120px;
    text-align: center;
}
.dashboard-content .table td.col-grade{
    width: 80px;
}
.dashboard-content .table td.col-date{
    width: 80px;
}
.dashboard-content .table td.col-status{
    width: 140px;
}
.dashboard-content .table td.col-action{
    width: 100px;
}
.dashboard-content .table td.col-action .icon-btn + .icon-btn{
    margin-left: 7px;
}
.dashboard-content .table td .status{
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    display: inline-block;
    width: 100%;
    text-align: center;
}
.dashboard-content .table.default-table td{
    padding: 10px 15px;
    min-height: 50px;
}

.dashboard-content .table-responsive.noscroll{
    overflow: initial;
}

.instruction{
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
}

.uploadContainer input#file{
    display: none;
}
.uploadContainer .upload-area{
    border: 2px dotted #ccc;
    background-color: #E5FCFB;
    text-align: center;
    padding: 20px;
    cursor: pointer;
}
.uploadContainer .upload-area h2{
    margin: 0;
}
.uploadContainer .fileblock{
    display: none;
}
.uploadContainer .upload-area .uploadIcon{
    width: 30px;
    height: 30px;
    fill: currentColor;
    color: var(--body-foreground);
    margin-bottom: 20px;
}
.fileblock{
    border: 2px dotted #ccc;
    background-color: #E5FCFB;
    text-align: left;
    padding: 10px;
}
.closefile{
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    line-height: 30px;
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    font-size: 20px;
}
.closefile:hover{
    background-color: var(--bs-btn-hover-bg);
}

.right-tick{
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.small-icon{
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.right-sidebar .card-header h4{
    margin: 0;
}
.right-sidebar .card-body h6{
    color: var(--primary-color);
}

.profileblock .text-primary{
    color: var(--primary-color) !important;    
}

.profileblock .profileline{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}



.bg-heighlight1{
    animation: svgColor1 2s infinite;
}
.bg-heighlight2{
    animation: svgColor2 2s infinite;
}
.bg-heighlight3{
    animation: svgColor3 2s infinite;
}

.cms-page-content h2{
    font-size: 26px;
    font-weight: 600;
    background-color: var(--primary-color);
    padding: 10px 20px;
    color: var(--color-0);
    border-radius: 6px;
    margin-top: 30px;
    margin-bottom: 25px;
}
.cms-page-content h2:first-child{
    margin-top: 0;
}
.cms-page-content h3{
    font-size: 24px;
    margin: 15px 0;
}
.cms-page-content h4{
    font-size: 20px;
    font-weight: 600;
    margin: 15px 0 5px;
}
.cms-page-content p{
    margin: 0 0 15px;
}


.nav.nav-tabs{
    border-bottom: none;
}
.nav.nav-tabs .nav-link{
    color: currentColor;
}

button.action-button .icon{
    margin-right: 0;
    margin-left: 5px;
    width: 10px;
    height: 10px;
}


@keyframes circleMoves{
    0%{
        transform: translate(0px, 0px); 
    }
    16.66%{
        transform: translate(-25px, 25px);
        
    }
    33.33%{
        transform: translate(-25px, 25px);
    }
    50%{
        transform: translate(-5px, 35px);
    }
    66.66%{
        transform: translate(-5px, 35px);
    }
    83.33%{
        transform: translate(0px, 0px);
    }
    100%{
        transform: translate(0px, 0px);    
    }
}
@keyframes circleMoves2{
    0%{
        transform: rotate(0) translateX(0); 
    }
    16.66%{
        transform: rotate(5deg) translateX(-50px);
        
    }
    33.33%{
        transform: rotate(5deg) translateX(-50px);
    }
    50%{
        transform: rotate(-3deg) translateX(10px);
    }
    66.66%{
        transform: rotate(-3deg) translateX(10px);
    }
    83.33%{
        transform: rotate(0) translateX(0);
    }
    100%{
        transform: rotate(0) translateX(0);   
    }
}

@keyframes imageMove{
    0%{
        transform: translateY(0); 
    }
    16.66%{
        transform: translateY(-10px);
        
    }
    33.33%{
        transform: translateY(-10px);
    }
    50%{
        transform: translateY(-20px);
    }
    66.66%{
        transform: translateY(-20px);
    }
    83.33%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(0);   
    }
}

@keyframes newsletterIcon1{
    0%{
        rotate: 0deg; 
    }
    16.66%{
        rotate: -5deg;
        
    }
    33.33%{
        rotate: -5deg;
    }
    50%{
        rotate: 0deg;
    }
    66.66%{
        rotate: 0deg;
    }
    83.33%{
        rotate: 0deg;
    }
    100%{
        rotate: 0deg;   
    }
}

@keyframes newsletterIcon4{
    0%{
        rotate: 0deg; 
    }
    16.66%{
        rotate: 5deg;
        
    }
    33.33%{
        rotate: 5deg;
    }
    50%{
        rotate: 0deg;
    }
    66.66%{
        rotate: 0deg;
    }
    83.33%{
        rotate: 0deg;
    }
    100%{
        rotate: 0deg;   
    }
}

@keyframes newsletterIcon3{
    0%{
        rotate: 0deg; 
    }
    16.66%{
        rotate: 10deg;
        
    }
    33.33%{
        rotate: 10deg;
    }
    50%{
        rotate: -10deg;
    }
    66.66%{
        rotate: -10deg;
    }
    83.33%{
        rotate: 0deg;
    }
    100%{
        rotate: 0deg;   
    }
}
@keyframes svgColor1{
    0%{
        fill: var(--secondary-color);
    }
    50%{
        fill: var(--color-2);
    }
    100%{
        fill: var(--secondary-color);
    }
}
@keyframes svgColor2{
    0%{
        fill: var(--color-2);
    }
    50%{
        fill: #FFD57D;
    }
    100%{
        fill: var(--color-2);
    }
}
@keyframes svgColor3{
    0%{
        fill: var(--color-3);
    }
    50%{
        fill: var(--secondary-color);
    }
    100%{
        fill: var(--color-3);
    }
}