@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/***** General CSS *****/

body {
    word-break: break-word;
    font: 15px/25px 'Poppins', sans-serif;
    color: #393939;
    overflow-x: hidden;
}

body::-webkit-scrollbar {
    width: 6px;
    /* background-color: #F5F5F5; */
}

body::-webkit-scrollbar-thumb {
    background-color: #103599;
}

a {
    text-decoration: none;
    color: #1a3797;
    white-space: initial;
    display: inline-block;
}

a:hover,
a:focus {
    text-decoration: none;
    color: #393939;
}

a:hover {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}

input[type="text"]:focus,
textarea:focus,
input[type="password"]:focus,
select:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus {
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    outline: none;
}

select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea,
input[type="tel"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* select {
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat center right 16px !important;
    padding: 15px 35px 15px 15px !important;
    background-size: 15px !important;
} */
/* .lineBox {
    height: 40px;
    width: 1px;
    background: black;
    position: absolute;
    top: 10px;
    right: 50px;
} */
.dropdown>a.dropdown-toggle {
    min-height: 44px;
    padding: 9px 20px !important;
    border-radius: 10px !important;
}

::-webkit-input-placeholder {
    color: #000;
}

::-moz-placeholder {
    color: #000;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #000;
}

:-moz-placeholder {
    color: #000;
    opacity: 1;
}

ul {
    margin: 0 0 0px;
    padding: 0;
    list-style-type: none;
}

img {
    max-width: 100%
}


/***** Font Files *****/

@font-face {
    font-family: 'Fonts Awesome';
    src: url(../fonts/fontawesome-webfont.eot);
    src: url(../fonts/fontawesome-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/fontawesome-webfont.woff) format("woff"), url(../fonts/fontawesome-webfont.ttf) format("truetype"), url(../fonts/fontawesome-webfont.svg#fontawesome-webfont) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    /* font-family: 'trj-b'; */
    src: url(../fonts/TrajanPro-Bold.otf);
}

@font-face {
    /* font-family: 'trj-r'; */
    src: url(../fonts/TrajanPro-Regular.ttf);
}


/***** Custom Classes *****/

.noPadding {
    padding: 0;
}

.noLeft {
    padding-left: 0;
}

.noRight {
    padding-right: 0;
}

.mt-5 {
    margin-top: 50px;
}

.mb-5 {
    margin-bottom: 50px;
}

.mt-8 {
    margin-top: 80px;
}

.mt-4 {
    margin-top: 40px;
}

.mt-3 {
    margin-top: 30px;
}

.mt-2 {
    margin-top: 20px;
}

.pt-5 {
    padding-top: 50px;
}

.pb-1 {
    padding-bottom: 10px;
}

.pb-2 {
    padding-bottom: 20px;
}

.pb-3 {
    padding-bottom: 30px;
}

.pb-4 {
    padding-bottom: 40px;
}

.pb-8 {
    padding-bottom: 80px;
}

.m-0 {
    margin: 0 !important;
}

.p-0 {
    padding: 0 !important;
}

.pt-8 {
    padding-top: 80px;
}

.pt-4 {
    padding-top: 40px;
}

.pt-3 {
    padding-top: 30px;
}

.pt-2 {
    padding-top: 20px;
}

.all-section {
    padding: 80px 0;
}

.centerCol {
    float: none;
    margin: 0 auto;
}

.d-flex {
    display: flex;
    align-items: center;
}

.over-flow-h {
    overflow: hidden;
}

.flexRow {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

.flexCol {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    align-items: center;
}

h1 {
    /* font-family: 'trj-r'; */
    font-size: 43px;
    color: #fff;
    font-weight: 500;
    margin: 0 0 0px;
    /* text-transform: uppercase; */
}

h2 {
    /* font-family: 'trj-b'; */
    font-size: 30px;
    color: #000;
    font-weight: 500;
    margin: 0 0 0px;
}

h3 {
    /* font-family: 'trj-b'; */
    font-size: 30px;
    color: #000000;
    font-weight: 600;
    margin: 0 0 0px;
}

h4 {
    /* font-family: 'trj-b'; */
    font-size: 24px;
    color: #000;
    font-weight: 500;
    margin: 0 0 0px;
}

h5 {
    /* font-family: 'trj-b'; */
    font-size: 16px;
    color: #000;
    font-weight: 500;
    margin: 0 0 0px;
}

h6 {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #000;
    font-weight: 500;
    margin: 0 0 0px;
}

p {
    color: #000;
    font-size: 15px;
    font-family: 'Montserrat';
    font-weight: 400;
    letter-spacing: 0px;
    margin: 0px;
}


/*header css start */

.menuSec {
    padding: 10px 0;
    border: 1px solid #ffffffba;
    margin: 0;
    border-left: 0;
    border-right: 0;
    transition: all .5s ease-in-out;
    background: #fff;
}

.menuSec img {
    margin: 0;
    width: 364px !important;
}

.menuSec ul {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0px;
    text-align: center;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menuSec ul li {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
}

div#Header header.sticky {
    position: fixed;
    width: 100%;
    z-index: 999;
}

header.sticky .menuSec {
    margin-top: 0;
}

.menuSec li ul {
    display: none;
}

.menuSec ul li a {
    /* border: 3px solid #235ede; */
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #235ede;
    padding: 6px 27px;
    font-size: 12px !important;
    border-radius: 21px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.dropdown:hover>ul.dropdown-menu {
    display: block;
}

/* Issue #27, item 4 — :hover above was the only thing that opened this menu, so
   keyboard users could focus the Discover button and get nothing. custom.js now
   toggles .is-open, which does not depend on Bootstrap's .show. */
.dropdown.is-open>ul.dropdown-menu {
    display: block;
}

/* The legacy rule `.menuSec li:hover > ul` (below) is what pinned this menu out
   of the document flow — but only while hovered. Opened by click or keyboard
   there is no hover, so the menu fell back into normal flow, inflated the <ul>,
   and .header-btn's align-items:center re-centred that taller box — which is why
   the Discover button jumped upward as the menu opened. Pinning it here, at a
   specificity that wins in every state, keeps the layout still whichever way the
   menu is opened. */
.main_memu>li.dropdown {
    position: relative;
}

.main_memu>li.dropdown>ul.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 1000;
    /* The same legacy rule also forces width:230px while hovered, so the menu
       rendered a different width depending on whether it was hovered or clicked.
       Sizing from content keeps both routes identical — but it has to be
       max-content, not auto: pinning right:0 makes the <li> the containing block,
       and auto then shrink-to-fits inside its ~185px, wrapping the longer category
       names onto two lines. max-content measures the longest label and grows
       leftward from the pinned right edge instead. */
    width: max-content;
    min-width: 230px;
    max-width: 320px;
}

p.terms_p {
    color: #000;
    text-align: start;
    font-family: 'Montserrat', sans-serif;
}

h1.terms_h1 {
    color: #000;
}

.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    /* text-align: left !important; */
    /* list-style: none !important; */
    background: #3060db !important;
    padding: 20px 0 !important;
    border-radius: 10px;
    margin-top: 0px !important;
}

/* Issue #27, item 4 — relocated from the <style> block in _layout/header.php.
   The old `.dropdown-submenu > a::after` CSS triangle is replaced by the
   disclosure button's own icon, since the row markup changed. */
.dropdown-submenu {
    position: relative;
}

/* Moved off the markup (was an inline style on the Discover button). */
.discover-toggle {
    color: #fff !important;
}

.dropdown-submenu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dropdown-submenu-row>a {
    flex: 1 1 auto;
}

.dropdown-submenu-toggle {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 2px 20px 2px 6px;
    cursor: pointer;
    line-height: 1;
}

.dropdown-submenu-icon {
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 4px 0 4px 4px;
    border-left-color: #fff;
}

.dropdown-submenu-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Issue #27, item 4 — the menu had no focus styling at all, so keyboard focus
   landed on a category with only the browser's default ring to show for it, which
   on this #3060db background is nearly invisible. Focus could be moving correctly
   and still look like nothing was happening. */
.main_memu ul.dropdown-menu a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
    background: #1b4bb8;
}

/* Open on hover for mouse users, and on .is-open when opened deliberately via the
   disclosure button or Right arrow. :focus-within is deliberately absent: it made
   merely tabbing onto a category link open its submenu, so the disclosure button
   then read as "open" while actually closing it. */
.dropdown-submenu:hover ul.dropdown-menu,
.dropdown-submenu.is-open>ul.dropdown-menu {
    display: block;
}

.rotate-arrow-head {
    display: inline-block;
    /* transform: rotate(90deg); */
    font-size: 10px !important;
    margin-right: 0px;
    margin-left: 5px;
}

#tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.tag {
    display: flex;
    align-items: center;
    background-color: #28a745;
    color: #fff;
    padding: 5px 10px;
    border-radius: 20px;
}

.tag .remove-tag {
    margin-left: 10px;
    cursor: pointer;
}

.suggestion-item {
    display: inline-block;
    margin: 5px;
    padding: 5px 10px;
    background-color: #f0f0f0;
    border-radius: 20px;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #e0e0e0;
}

.dropdown-submenu a.dropdown-toggle,
ul.dropdown-menu li a {
    display: block;
    padding: 2px 20px;
    color: #fff;
    font-size: 12px;
}

.sh-btn {
    padding: 2px 10px !important;
    border-radius: 0px !important;
    background: #1a3797 !important;
}

.dropdown-toggle::after {
    display: none;
}

/*.menuSec ul li a:after {
    content: '';
    position: absolute;
    top: 35%;
    right: 0;
    width: 1px;
    height: 13px;
    background-color: #393939;
    display: none;
}
*/


/*.menuSec ul li:last-child a {
    padding-right: 0px;
}*/

.menuSec ul li:last-child a:after {
    display: none;
}

.menuSec ul li a:hover,
.menuSec ul li a.active {
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    color: #fff;
    background-color: #235ede;
}

.menuSec li:hover>ul {
    display: block;
    position: absolute;
    z-index: 1000;
    background-color: #000000;
    right: unset;
    left: 0;
    width: 230px;
    text-align: left;
    top: 40px;
}

.menuSec li>ul>li>a {
    border: none;
    padding: 13px 20px !important;
    color: #fff !important;
    overflow: hidden;
    font-size: 13px;
    line-height: 20px;
}

.menuSec li>ul>li,
.menuSec li>ul>li>a {
    display: block;
    margin: 0;
}

.menuSec li>ul>li>a:before,
.menuSec li>ul>li>a:after {
    display: none;
}

.menuSec li:hover li {
    float: none;
}

.menuSec li ul li a:hover {
    background-color: #ffffff;
    color: #000000 !important;
}

.menuSec ul ul ul {
    left: 100%;
    top: 0;
}

.menuSec ul:before,
.menuSec ul:after {
    content: " ";
    display: table;
    display: none;
}

.menuSec ul:after {
    clear: both;
}

.menuSec li>ul>li:hover>ul {
    left: -274px;
    top: 0px;
    width: 270px;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    transition: 1s all;
}

.header-text {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    width: 100%;
    margin-left: auto !important;
    position: relative;
}

.header-text h3 {
    color: #ffffff;
    font-size: 12px;
    font-family: 'Montserrat';
    text-transform: uppercase;
}

button.book-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50px;
    height: 40px;
    border: 0;
    background: #235ede;
    color: #fff;
}

.header-text input {
    width: 100%;
    height: 40px;
    /* right padding clears the absolutely positioned .book-btn (50px wide) */
    padding: 10px 60px 10px 20px;
    background: #00000040;
    border: 1px solid #989898;
    color: #fff;
    font-size: 13px;
    text-overflow: ellipsis;
}

.header-text input::placeholder {
    color: #fff;
    opacity: 1;
}

.header-btn a:hover {
    color: #fff;
}

.btn-1 {
    border: 0;
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    padding: 10px 30px;
    background: #235ede;
    border-radius: 10px;
    /* Never let a tight header column break a button's label onto stacked
       letters (issue #37): keep each button on one line at its natural width. */
    white-space: nowrap;
    flex: 0 0 auto;
}

.header-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.header-btn a {
    font-size: 12px !important;
}

header .header-text {
    margin-top: -200px;
    transition: 1s all;
}

header.sticky {
    position: sticky;
    background: #000;
    transition: 1s all;
    z-index: 999999999;
}

header.sticky .header-text {
    margin: 0;
}

.menuSec .row {
    align-items: center;
}

.header-logo {
    position: relative;
    width: 170px;
    padding: 10px;
}

.header-logo:after {}


/* Header Section End */


/* Banner Section Start */


/*banner css start */

.carousel-inner>.item>a>img,
.carousel-inner>.item>img {
    width: 100%;
}

.carousel-control.right,
.carousel-control.left {
    background: none;
    opacity: 1;
    width: 50px;
    height: 50px;
    top: initial;
    top: 40%;
    background: rgba(255, 255, 255, 0.1);
    text-shadow: none;
}

.carousel-control.right:hover,
.carousel-control.left:hover {
    background: rgba(255, 27, 27, 0.6);
    color: #fff;
}

.carousel-control.right .fa,
.carousel-control.left .fa {
    position: relative;
    top: 12px;
    font-size: 20px;
    color: #fff;
    opacity: 0.5;
}

.carousel-control.right {
    right: 0px;
}

.carousel-control.left {
    left: 0px;
}

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    width: 10px;
    height: 10px;
    padding: 0;
    margin: 30px 0 !important;
    text-indent: -999px;
    border-radius: 30px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    /* transition: opacity 0.6s ease; */
    border-radius: 20px;
}

section.main_slider {
    position: relative;
    z-index: 1;
    margin-top: 98px;
}

section.main_slider:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    background: #0000008f;
    z-index: 0;
}

.carousel-item.active img {
    width: 100%;
    height: 650px;
    object-fit: cover;
}

.contact-inpt select {
    width: 100%;
    margin-bottom: 15px;
    padding: 15px 20px;
    border: 1px solid #b7b7b7;
    margin-bottom: 5%;
    border-radius: 0;
}

.carousel-caption {
    position: absolute;
    top: 30px;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 4;
    padding: 0;
    color: #fff;
    text-align: left;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    background: rgb(0 0 0 / 0%);
}

/* review-section */
.review-section {
    background: #f8f9fa;
    padding: 40px 0;
}

.review-section h2 {
    text-align: center;
    /* margin-bottom: 30px; */
}

.review-list {
    margin-bottom: 40px;
    margin-bottom: 40px;
    border: 1px solid #e9ecef;
    padding: 25px;
    background: #f0f5fe;
}

.review-item {
    border-bottom: 1px solid #e9ecef;
    padding: 20px 0;
}

.review-item:last-child {
    border-bottom: none;
}

.review-item h4 {
    margin-bottom: 10px;
}

.review-item p {
    margin-bottom: 5px;
}

.review-form {
    background: #ffffff;
    padding: 30px;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    max-width: 70%;
    margin: 0 auto;
}

.review-form h3 {
    margin-bottom: 20px;
}

.review-form .form-group {
    margin-bottom: 15px;
}

.review-form .form-control {
    width: 100%;
    height: 48px;
    background: #fff;
    border-radius: 0;
    padding: 7px 20px;
    font-family: 'Montserrat';
    color: #666;
    border: 1px solid #ededed;
}

.review-form .form-control:focus {
    border-color: #80bdff;
    outline: none;
}

.review-form button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    background: #235ede;
    border: 0;
    color: #fff;
    border-radius: 50px;
    height: 50px;
    width: 200px;
    position: relative;
    font-weight: 400;
    letter-spacing: 1px;
    font-family: 'Montserrat';
    margin: 0 auto;
}

.review-form button:hover {
    background: #0056b3;
}

/* review-section */

/* pagination styling start  */
.page-item a {
    color: #fff !important;
    background: #000 !important;
    min-width: 44px !important;
    padding: 8px 6px !important;
    text-align: center !important;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.page-item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.pagination {
    justify-content: center !important;
    gap: 2px;
}

/* pagination styling End  */
.search_formSec {
    top: -220px;
    position: relative;
    z-index: 8;
}

/* Search */
ul#forum-search-list {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.2);
    ;
    width: 90%;
    padding-top: 9px;
    right: 82px;
    top: 44px;
    border-radius: 5px;
    text-align: center;
}

#forum-search-list li:hover {
    background: #000000;
    cursor: pointer;
    padding: 5px;
}

/* Search */
.dropdown {
    float: none !important;
}

.service-page>div>.row>.filter {
    display: flex;
    justify-content: end;
}

.carousel-indicators li {
    border: none;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    background: #fff;
    width: 12px;
    height: 12px;
    margin: 0;
}

.carousel-indicators .active {
    margin: 0;
    background-color: #fff;
    width: 10px;
    height: 10px;
    opacity: 1 !important;
    position: relative;
}

.home-banner-text {
    width: 78%;
    margin: 0 auto;
    text-align: center;
}

/* Issue #27, item 2 — moved off the markup (was inline on the hero h3 and in a
   <style> block in home/index.php); bolded to match the other headings. */
.home-banner-heading {
    color: #fff;
    font-size: 33px;
    font-weight: 700;
}

.colors p {
    color: #fff;
}

.home-banner-text p {
    font-size: 20px;
    color: #ffffffb3;
    margin: 20px 0;
}

/* Issue #27, item 1 — the hero search bar was translucent (#98989859 on a
   photographic slide) so it read as decoration rather than the primary action.
   It is now a solid card with a shadow, a brand-blue submit button and a
   visible focus ring. The border radii live here instead of inline on the
   markup: the form clips its children, so no per-field radius is needed. */
.banner-form form {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.banner-form input {
    flex: 0 0 30%;
    /* Flex items default to min-width:auto, which for an <input> is its intrinsic
       ~20-character width. Two of those plus the button exceed a phone-width
       container, and the form clips overflow — so the search button disappeared off
       the right edge. Allowing the fields to shrink keeps the button on screen. */
    min-width: 0;
    height: 52px;
    padding: 10px 20px;
    background: #fff;
    border: 0;
    border-right: 1px solid #e3e3e3;
    color: #1d1816;
    font-size: 16px;
}

.banner-form input:first-child {
    flex: 1 1 auto;
}

.banner-form input::placeholder {
    color: #6b6b6b;
    opacity: 1;
    /* Issue #27, item 1 follow-up: bolder prompt text in the hero search fields. */
    font-weight: 600;
}

.banner-form input:focus {
    outline: 2px solid #235ede;
    outline-offset: -2px;
}

.banner-form {
    /* display: flex; */
    align-items: center;
    justify-content: center;
    position: relative;
    width: 60%;
    margin: 0 auto;
}

#search_btn {
    display: flex;
    flex: 0 0 64px;
}

.banner-form button {
    width: 64px;
    height: 52px;
    background: #235ede;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 0;
    cursor: pointer;
}

.banner-form button:hover {
    background: #1b4bb8;
}

.banner-form button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

.carousel-indicators .active:after {
    position: absolute;
    content: '';
    width: 30px;
    height: 30px;
    border: 1px solid #fff;
    top: 0;
    left: -10px;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    border-radius: 40px;
}

.carousel-indicators {
    position: absolute;
    right: 50px;
    left: auto;
    top: 35%;
    display: block;
    margin: auto;
}


/*banner css end*/


/* Banner Section End */


/* Service Section Start */

.service-sec {
    padding: 50px 0 80px;
}

h2 {}

.sec-head h2 {
    font-size: 36px;
    /* text-transform: uppercase; */
    /* font-family: 'trj-r'; */
    color: #1d1816;
    /* Issue #27, item 2 — bolden section headings on the main and category pages. */
    font-weight: 700;
}

.sec-head {
    text-align: center;
    margin-bottom: 20px;
}

/* Issue #27, item 2 — category page section headings. Moved off the markup
   (were inline styles in home/sub_cat.php) and bolded. */
.catg-section-head {
    background-color: #235ede;
    color: #fff;
    text-align: center;
    margin-top: 25px;
    font-weight: 700;
}

.catg-empty-msg {
    text-align: center;
    color: red;
}

.service-image {
    position: relative;
    z-index: 4;
    min-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.service-image img {
    width: 100%;
}

.service-text {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    z-index: 1;
}

.service-box {
    position: relative;
    border-radius: 15px !important;
    overflow: hidden;
}

.service-box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.service-image:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    background: #00000069;
    z-index: 0;
    border-radius: 15px;
}

.service-box a {
    z-index: 20;
    position: relative;
    width: 100% !important;
}

.service-text h3 {
    font-size: 16px;
    color: #fff;
}

.service-slider .slick-slide {
    margin: 9px 10px;
    opacity: 1;
}

.slick-prev,
.slick-next {
    border: 1px solid #b5b4b4 !important;
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-slider .slick-prev:before,
.service-slider .slick-next:before {
    border-radius: 0;
    color: #b5b4b4;
    font-size: 30px;
    transition: .5s all;
    content: " ";
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    width: 15px;
    height: 15px;
    transform: rotate(45deg) translateX(3px) translateY(0px);
    cursor: pointer;
    display: block;
}

.service-slider .slick-prev:hover:before,
.service-slider .slick-next:hover:before {
    color: #000;
    border-color: #000;
}

.service-slider .slick-next:before {
    transform: rotate(230deg) translateX(1px) translateY(-2px);
}

.service-slider .slick-prev {
    left: -50px;
}

.service-slider .slick-next {
    right: -50px;
}


/* Service Section End */


/* Category Section Start */

.category-box-main {
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 3px 47px 0px rgba(0, 0, 0, 0.08);
    padding: 50px 50px;
}

.category-box-main .sec-head h2 {
    font-size: 30px;
}

.catgory-box {
    background-color: rgb(255, 255, 255);
    /* box-shadow: 0px 3px 47px 0px rgba(0, 0, 0, 0.09); */
    text-align: center;
    padding: 20px;
    margin: 20px 10px;
    /* 👈 not working */
    /* 👈 not working */
    position: relative;
    z-index: 1;
}

.catgory-box:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    border: 1px solid #1e65dc;
    background: #fff;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.catgory-image img {
    height: 70px;
    object-fit: contain;
    margin-bottom: 10px;
}

.catgory-text>h4 {
    font-size: 12px;
    color: #000000;
    text-transform: uppercase;
    min-height: 30px;
    margin-bottom: 0;
}

.category-sec {
    padding: 0px 0 50px;
}

.discover-slider .slick-slide {
    margin: 0 0;
    opacity: 1;
}

.discover-slider .slick-prev:before,
.discover-slider .slick-next:before {
    border-radius: 0;
    color: #b5b4b4;
    font-size: 30px;
    transition: .5s all;
    content: " ";
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    width: 15px;
    height: 15px;
    transform: rotate(45deg) translateX(3px) translateY(0px);
    cursor: pointer;
    display: block;
}

.discover-slider .slick-next:before {
    transform: rotate(230deg) translateX(1px) translateY(-2px);
}

.discover-slider .slick-prev {
    left: -70px;
}

.discover-slider .slick-next {
    right: -70px;
}

.discover-slider .slick-prev:hover:before,
.discover-slider .slick-next:hover:before {
    color: #000;
    border-color: #000;
}


/* Category Section End */


/* Service Section Start */

.our-service-sec {
    padding: 80px 0;
    position: relative;
}

.our-service-sec .our-service-slider {
    width: 108%;
    margin-left: auto;
    margin-right: -150px;
    position: relative;
}

.service-left-text h2 {
    font-size: 41px;
    color: #2b2b33;
    text-transform: uppercase;
}

.service-left-text p {
    font-size: 13px;
    color: #2b2b33;
    font-family: 'Montserrat';
    line-height: 24px;
    margin: 20px 0;
    font-weight: 600;
}

.action {
    display: grid;
}

.action a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0;
    border-top: 1px solid #2b2b337d;
    color: #2b2b33a1;
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
}

.action a:last-child {
    border-bottom: 1px solid #2b2b337d;
}

.action a>i {
    font-size: 20px;
    font-weight: 500;
}

.our-service-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transform: scale(.8);
}

.category-box-main .catgory-box {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.our-service-sec .our-service-slider .slick-slide {
    float: left;
    opacity: 1;
    height: 100%;
}

.our-service-box {
    position: relative;
}


/* .slick-list.draggable {
    padding: 0 !important;
} */

.our-service-text {
    position: absolute;
    top: 20%;
    right: -53px;
}

.our-service-text a {
    border-radius: 0;
    font-family: 'Montserrat';
    color: #ffffff96;
    text-transform: capitalize;
    opacity: 0;
}

.our-service-btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-transform: uppercase;
    /* font-family: 'trj-b'; */
    color: #fff;
    background: #2b2b33;
    padding: 40px 50px;
}

.our-service-btn {
    margin: -50px 0 0 20px;
    z-index: 1;
    position: relative;
}

.slide_counter {
    position: absolute;
    bottom: 77px;
    right: 35.7%;
    z-index: 4;
}

span.start_number {
    font-size: 17px;
    font-family: 'Montserrat';
    color: #2b2b33;
}

span.end_number {
    color: #666666;
    font-size: 12px;
    font-family: 'Montserrat';
}

span.slide_counter-line {
    font-size: 19px;
}

.our-service-slider .slick-prev,
.our-service-slider .slick-next {
    top: auto;
    bottom: -60px;
    left: 26%;
    z-index: 5;
}

.our-service-slider .slick-next {
    left: 40%;
}

.our-service-slider .slick-prev:before,
.our-service-slider .slick-next:before {
    position: absolute;
    content: '\f061';
    width: 30px;
    height: 30px;
    font-size: 17px;
    color: #bababc;
    left: 0;
    top: 0;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
}

.our-service-slider .slick-slide.slick-current.slick-active .our-service-text a {
    opacity: 1;
    z-index: 7;
    position: relative;
}

.our-service-slider .slick-slide.slick-current.slick-active .our-service-image img {
    transform: scale(1.1);
}

.our-service-slider .slick-prev:before {
    position: absolute;
    content: '\f060';
}

.our-service-slider .slick-prev:hover:before,
.our-service-slider .slick-next:hover:before {
    color: #000;
}


/* Service Section End */


/* About Section Start */

.about-sec {
    position: relative;
    z-index: 9;
    padding: 80px 0;
    background: #f0f5fe;
}

.about-sec:after {}

.about-top-btn {
    margin-bottom: 70px;
    border-bottom: 1px solid #acc3f3;
}

.btn-6 {
    font-size: 14px;
    text-transform: uppercase;
    /* font-family: 'trj-b'; */
    color: #235ede;
    letter-spacing: 1px;
    border: 1px solid #acc3f3;
    padding: 25px 40px;
    border-bottom-color: #f0f5fe;
    margin-bottom: -1px;
}

.about-image img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
}

.about-text h2 {
    font-size: 30px;
    color: #010001;
    /* font-family: 'trj-r'; */
    /* text-transform: uppercase; */
    letter-spacing: 2px;
    /* Issue #27, item 2 — bolden the About Us / Latest Blog headings. */
    font-weight: 700;
}

/* Issue #27, item 2 — About Us body copy was 14px, too small to read
   comfortably on either desktop or mobile. */
.about-text p {
    font-size: 16px;
    color: #666;
    padding: 6px 0;
    line-height: 1.7;
}

@media only screen and (max-width: 767px) {
    .about-text p {
        font-size: 15px;
    }
}

.about-text a {
    margin-top: 20px;
}

.about-text a:hover {
    color: #fff;
}


/* About Section End */


/* Blogs Section Start */

.blog-image {
    width: 415px;
}

.blog--box h2 {
    margin-bottom: 15px;
}

.blog-sec {
    padding: 50px 0 80px;
}

.blog-sec .sec-head h2 {
    font-size: 60px;
}

.blog-box {
    position: relative;
}

.blog-image img {
    width: 100%;
    border-radius: 10px;
    height: 270px;
}

.blog-text {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    background: #0000007d;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 20px;
}

.blog-text h6 {
    font-size: 14px;
    color: #fff;
    font-family: 'Montserrat';
}

.blog-text h5 {
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
    margin: 13px 0;
}

.blog-text p {
    font-size: 13px;
    color: #ffffff87;
    font-weight: 500;
}

.blog-right-box .blog-text h5 {
    font-size: 28px;
    border-bottom: 1px solid;
    display: inline-flex;
}

.blog-box:first-child {
    margin-bottom: 30px;
}

.blog-right-box .blog-image img {
    height: 570px;
    object-fit: cover;
}


/* Blogs Section End */


/* Footer Section Start */

.newlettersec {
    background: #1d1f22;
    padding: 80px 0;
}

.dropdown-content>p.filter_h1 {
    color: #fff !important;
}

.dropdown>button {
    min-height: 44px !important;
    border-radius: 10px !important;
}

.newsletter-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
}

.newsletter-box i {
    font-size: 60px;
    color: #fff;
    font-weight: 400;
}

.newsletter-text h4 {
    font-size: 26px;
    color: #fff;
    text-transform: capitalize;
}

.newsletter-text p {
    font-size: 14px;
    color: #fff;
}

/* Issue #27 (follow-up) — the footer newsletter button wrapped onto its own
   line. .newsletter-input-block made the wrapper display:block so the privacy
   note would stack, which left nothing laying the form out: the form is a plain
   block, and a 76%-wide input plus a 150px button overflow the column, so the
   button wrapped. Flexing the form pairs them again while the note still stacks.
   flex-basis 0 means the percentage widths below no longer decide the size, so
   the input simply takes whatever space the button leaves. */
.newsletterform {
    display: flex;
    align-items: center;
}

.newsletter-input input {
    flex: 1 1 0;
    min-width: 0;
    width: 76%;
    height: 44px;
    padding: 10px 20px;
    color: #898989;
    border: 0;
    font-size: 12px;
}

.newsletter-input input::placeholder {
    font-size: 12px;
    font-family: inherit;
    color: #7c7c7c;
}

.newsletter-input {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* margin-left: -4px was pulling the button flush against the input back when
   they shared a line; with the form flexed they are adjacent already. */
.newsletter-input button {
    flex: 0 0 150px;
    height: 45px;
    border-radius: 0;
    text-transform: capitalize;
    font-family: 'Montserrat';
}

footer {
    background: #0f1011;
    padding: 50px 0;
}

.footer-box h3 {
    font-size: 22px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.footer-box a {
    font-size: 15px;
    color: #ffffff87;
    width: 90%;
    text-decoration: underline;
    margin: 10px 0 30px 0px;
}

.StripeElement {
    background-color: white;
    height: 48px !important;
    padding: 14px 12px !important;
    border-radius: 4px;
    border: 1px solid #ededed !important;
    box-shadow: 0 1px 3px 0 #e6ebf100 !important;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

ul.footer-links a {
    margin: 0;
    text-decoration: auto;
    padding: 0 0 10px 0;
    text-transform: uppercase;
}

ul.footer-menu-list {
    display: flex;
    align-items: center;
    justify-content: start;
    border-bottom: 0;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-menu-list-box {
    padding: 46px 30px;
    border: 1px solid;
    border-bottom: none;
}

.footer-menu-list-box h3 {
    font-size: 22px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.ser-category-page .sarvice-page-text h3 {
    font-size: 18px;
}

ul.footer-menu-list a {
    text-transform: uppercase;
    color: #ffffffbd;
    font-size: 13px;
    position: relative;
}

.footer-input {
    text-align: center;
}

.footer-input a {
    color: #fff;
    text-decoration: none;
}

ul.footer-menu-list a:after {
    position: absolute;
    content: '';
    width: 1px;
    height: 100%;
    right: -10px;
    top: 0;
    background: #ffffff8c;
}

.footer-input input,
.footer-input select {
    width: 98%;
    height: 40px;
    padding: 0 20px;
    border: 1px solid #ffffff6e;
    background: transparent;
    color: #fff;
    border-radius: 50px;
    margin: 5px auto;
    -webkit-appearance: auto;
    font-size: 12px;
}

.footer-input select>option {
    background: #000;
    color: #fff;
}

.footer-input textarea::placeholder,
.footer-input input::placeholder {
    color: #ffffffa6;
}

.footer-input textarea {
    width: 100%;
    height: 80px;
    background: transparent;
    padding: 12px 20px;
    border-radius: 20px;
    margin-top: 5px;
    color: #fff;
}

.footer-input button {
    background: #fff;
    color: #235ede;
    font-size: 12px;
    margin-top: 20px;
}

.footer-nav-text p {
    font-size: 12px;
    color: #fefefe;
}

ul.footer-social {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

ul.footer-social i {
    font-size: 20px;
    color: #fff;
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    transition: .5s all;
}

ul.footer-social i:hover {
    background: #235ede;
    border-color: #235ede;
    transform: scale(1.1);
}

.footer-bottom-nav {
    background: #121314;
    padding: 20px 40px;
    margin-top: 0;
    border: 1px solid #3e3f40;
}

.footer-bottom-nav .row {
    align-items: center;
}

.footer-box-2 {
    padding-left: 70px !important;
}

.footer-box {
    padding: 30px 20px;
    border: 1px solid;
    height: 260px;
    border-bottom: 0;
}

.footer-box.footer-appointment {
    height: auto;
    border-left: 0;
}

a.no-border:after {
    display: none;
}


/* Footer Section End */


/* Inner Pages Start */


/* Inner BAnner Start */

.inner-banner-sec {
    position: relative;
    max-height: 481px;
    overflow: hidden;
}

.inner-banner-sec:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #00000052, #0000002b);
}

img.inner-banner-image {
    width: 100%;
    object-fit: fill;
}

.inner-banner-box {
    position: absolute;
    top: 98px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.inner-banner-box .banner-form {
    width: 50%;
}

b {
    font-size: 12px;
    font-weight: bold;
}

.inner-banner-text h1 {
    font-size: 40px;
    letter-spacing: 3px;
    /* Issue #27, item 2 — the category / inner page banner heading was weight
       500; bolded to match the section headings. */
    font-weight: 700;
}

.inner-banner-text p {
    font-size: 14px;
    color: #ffffffb0;
    margin: 10px 0 20px;
}


/* Inner BAnner End */


/* About PAge Start */

.about-page:after {
    display: none;
}

.about-page .about-image img {
    height: 620px;
    object-fit: cover;
}


/* About PAge End */


/* Service Page Start */

.service-page {
    padding: 80px 0px 130px;
}

.serv-page-box {
    position: relative;
    margin: 30px 0 0;
    overflow: hidden;
    border: 1px solid #000;
    /* padding: 10px 0; */
    display: flex;
    justify-content: center;
    border-radius: 10px;
}
.service-price {
    position: absolute;
    top: -34px;
    right: 4px;
    background-color: #00339b;
    padding: 7px 25px;
    border-radius: 30px;
}

.service-price h4 {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.serv-page-box img {
    width: auto;
    max-height: 300px;
    min-height: 300px;
    background-color: #ffffff;
    /* object-position: top; */
    padding: 0px;
}

.datetime {
    display: grid;
    grid-gap: 2%;
    grid-template-columns: 32% 32% 32%;
    grid-row-gap: 10px;
}

.datetime .date_lable>input {
    width: 100%;
    margin-top: -2px;
}

.prices {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
    padding: 10px;
    align-items: center;
}

.title_div h3 {
    margin-top: 0;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 5px;
}

.title_div p {
    font-size: 14px;
    color: #999;
}

.btn_div>button {
    background: #3060db;
    border: navajowhite;
    color: #fff;
    padding: 5px 11px;
    border-radius: 4px;
}

.btn_div>button:nth-child(3) {
    background: red;
}

.date_lable {
    font-size: 14px;
    text-transform: capitalize;
    margin-top: 8px;
}

.datetime input {
    width: 32%;
    height: 31px;
    background: #fff;
    border-radius: 0;
    padding: 7px 20px;
    font-family: 'Montserrat';
    color: #666;
    border: 1px solid #ededed;
}

.sarvice-page-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #151515;
    padding: 30px 0px;
    text-align: center;
    transition: .5s all;
    height: 80px;
}

/* .ser-category-page .sarvice-page-text {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    background: #151515;
    padding: 20px 0px;
    text-align: center;
    transition: .5s all;
    height: 70px;
} */

.sarvice-page-text h3 {
    font-size: 20px;
    color: #fff;
    text-transform: capitalize;
    /* font-family: 'trj-r'; */
    font-weight: 100;
}

.col-lg-12.col-md-12.col-12.bd-example {
    margin-top: 56px;
}

.ser-btn-1 {
    font-size: 13px;
    text-transform: uppercase;
    /* font-family: 'trj-b'; */
    color: #fff;
    border-bottom: 1px solid #fff;
    transition: .5s all;
    margin: 30px 0 -100px 0px;
}

.serv-page-box:hover .ser-btn-1 {
    display: inline-block;
}

.serv-page-box:hover .ser-btn-1 {
    margin: 0;
}

.serv-page-box:hover .sarvice-page-text {
    height: 120px;
    background: #235ede;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.ser-btn-1:hover {
    color: #fff;
}

form#review-form {
    padding: 0 !important;
    border: none !important;
    max-width: 100%;
}

/* Service Page End */


/* Service Category PAge Start */

.ser-category-page .serv-page-box img {
    height: 331px;
    object-fit: cover;
}


/* Service Category PAge End */


/* Services Categories Detail PAge Start */

.catg-detail-page .about-text h2 {
    font-size: 30px;
}

.catg-detail-page .about-image img {
    max-height: 425px;
    min-height: 425px;
    border-radius: 0 !important;
    object-fit: contain;
}


/* Services Categories Detail PAge End */


/* Blog  PAge Start */

.blog-page .blog-image img {
    height: 300px;
}


/* Blog  PAge End */


/* Blog Detail Page Start */

.blog-detail-page .about-text h6 {
    font-size: 14px;
    color: #235ede;
    font-family: 'Montserrat';
}

.blog-detail-page .about-text h2 {
    font-size: 28px;
    margin: 20px 0 0;
}

.blog-detail-page .about-image img {
    height: 530px;
    width: 98%;
    margin-top: -13px;
}


/* Blog Detail Page End */


/* Contact Page Start */

section.contact-sec {
    padding: 100px 0;
}

.get-in-touch-sec {
    background-repeat: no-repeat;
    padding: 40px;
    border-radius: 0;
    /* padding-top: 12%; */
    width: 95%;
    /* padding-bottom: 10%; */
    height: 100%;
    background: #235ede;
}

.get-in-touch-sec h4 {
    font-size: 44px;
    color: #fff;
    margin-bottom: 5%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

.get-in-touch-sec p {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 7%;
    line-height: 35px;
    font-family: 'Montserrat', sans-serif;
}

.get-in-touch-sec ul {
    display: flex;
    margin-bottom: 10%;
    align-items: center;
    gap: 20px;
}

.get-in-touch-sec ul li span {
    color: #ef165d;
    background: #ffffff;
    padding: 20px 20px;
    border-radius: 100%;
    font-size: 22px;
    margin-right: 30px;
}

.get-in-touch-sec ul li span.fa-map-marker-alt {
    padding: 20px 23px;
}

.get-in-touch-sec ul li h6 {
    font-size: 24px;
    color: #fffcf3;
    margin-bottom: 3px;
    font-weight: 300;
    font-family: 'Montserrat', sans-serif;
}

.get-in-touch-sec ul li a {
    font-size: 18px;
    color: #fffcf791;
    font-weight: 300;
    font-family: 'Montserrat', sans-serif;
}

.req-qoute-sec h4 {
    font-size: 47px;
    margin-bottom: 30px;
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-weight: 100;
    color: #235ede;
}

.contact-inpt.about-text a {
    font-size: 20px;
    text-transform: uppercase;
    background: #973416;
    color: #fff;
    padding: 13px 40px;
    background-image: -moz-linear-gradient(90deg, rgb(123, 232, 255) 0%, rgb(41, 137, 204) 100%);
    background-image: -webkit-linear-gradient(90deg, rgb(0 0 0) 0%, rgb(254 0 0) 100%);
    background-image: -ms-linear-gradient(90deg, rgb(123, 232, 255) 0%, rgb(41, 137, 204) 100%);
}

.contact-inpt input::placeholder {
    font-family: 'Montserrat', sans-serif;
    color: #808080c7;
}

.contact-inpt input {
    width: 100%;
    margin-bottom: 15px;
    padding: 15px 20px;
    border: 1px solid #b7b7b7;
    margin-bottom: 5%;
    border-radius: 0;
}

/* Issue #27, item 3 — visible labels for the Preferred Date / Preferred Time
   fields on the contact form. */
.contact-inpt label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

/* Issue #27, item 3 follow-up: an empty input[type=date] renders as a blank box on
   iOS Safari — no mm/dd/yyyy hint, no picker indicator — so the field read as dead
   even though tapping it opens the picker.
   The hint and icon are siblings rather than styling on the input itself: iOS
   applies its own -webkit-appearance rendering, which can paint over an author
   background-image, so a background on the input is not dependable. Real elements
   in a positioned wrapper cannot be overpainted. */
.date-field {
    position: relative;
    display: block;
    margin-bottom: 5%;
}

.contact-inpt .date-field input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    min-height: 52px;
    padding-right: 45px;
    margin-bottom: 0;
}

/* The hint sits where the value will appear and hides as soon as one is picked.
   .has-value is set by the inline script on the contact page, on load and on
   change, so this never lingers over a real date. */
.date-field-hint {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #808080c7;
    font-family: 'Montserrat', sans-serif;
    pointer-events: none;
}

.date-field.has-value .date-field-hint {
    display: none;
}

/* Desktop browsers draw their own "mm/dd/yyyy" inside an empty date input, which
   landed directly under the hint — two strings on top of each other. Hide the
   browser's copy while the field is empty and unfocused, so only the hint shows.
   iOS draws nothing there, so this changes nothing on the phone.
   On focus the native editor comes back and the hint steps aside, otherwise
   digits typed into the field would be invisible until a full date was entered. */
.date-field:not(.has-value) input[type="date"]::-webkit-datetime-edit {
    opacity: 0;
}

.date-field:not(.has-value) input[type="date"]:focus::-webkit-datetime-edit {
    opacity: 1;
}

.date-field:not(.has-value) input[type="date"]:focus~.date-field-hint {
    display: none;
}

.date-field-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

/* Chrome draws its own indicator in the same place; hide it so there is one icon.
   It stays clickable underneath ours. */
.date-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
}

.contact-inpt textarea {
    width: 95%;
    border: 1px solid #b7b7b7;
    margin-bottom: 10px;
    padding: 12px 20px;
    resize: none;
    border-radius: 35px;
    resize: vertical;
}

.contact-inpt input::placeholder {
    font-size: 14px;
}

.contact-inpt textarea::placeholder {
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
}

.req-qoute-sec {
    padding: 40px;
    position: relative;
    background: #fff;
    height: 100%;
    box-shadow: 0 0 25px 0 #9898981a;
}

.req-qoute-sec h4:before {
    content: "";
    position: absolute;
    left: -40px;
    top: 2px;
    height: 55px;
    width: 7px;
    background: #235ede;
}

.get-in-touch-sec ul li i {
    height: 70px;
    z-index: 4;
    width: 70px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 30px;
    position: relative;
    color: #235ede;
}

.booking .form-check .form-check-input {
    margin-left: -2em;
}

.contact-inpt.about-text .btn1 {
    border-radius: 0;
}

.contact-inpt.about-text .btn-1 {
    border-radius: 0;
    font-size: 20px;
    letter-spacing: 0px;
    font-family: 'Montserrat';
}


/* Contact Page End */
.mobileView {
    display: none !important;
}

div#Header header.sticky .mobileView>i>img {
    filter: invert(1);
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999;
    top: 0px;
    right: -200px;
    background-color: #000;
    overflow-x: hidden;
    padding: 60px 30px 30px;
    transition: 0.5s;
}

.gap10 {
    gap: 10px;
}

/* The navigation menu links */
.sidenav a {
    padding: 10px 8px 10px 32px;
    text-decoration: none;
    font-size: 18px;
    color: #ffff !important;
    border-bottom: 2px solid #ffffff2e;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover,
.offcanvas a:focus {
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    border: none;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Inner Pages End */


/*Media Query Start*/

@media only screen and (min-width: 1366px) and (max-width: 1920px) {}

@media only screen and (max-width: 1280px) {
    .header-text {
        width: 100% !important;
    }

    header .header-text form {
        position: relative;
    }

    .header-text {
        flex-direction: column;
    }
}

@media only screen and (max-width: 991px) {
    .menuSec img {
        max-width: 150px !important;
    }

    .aut-form-box {
        /* padding: 0px 0px 0px !important; */
    }

    .newsletter-input input {
        width: 70%;
    }

    ul.footer-menu-list {
        flex-wrap: wrap;
        gap: 20px;
    }

    .chk-bx {
        display: none !important;
    }
}

@media only screen and (max-width: 1024px) {
    .photoBox {
        grid-template-columns: 49% 49% !important;
    }

    .cols__container {
        width: 90%;
        margin: 0 auto;
    }

    .home-banner-text {
        padding-bottom: 50px;
    }

    .widthdefal {
        width: 100% !important;
    }
}

@media only screen and (max-width: 991px) {
    .mobileView {
        display: block !important;
    }

    .mobileView>i img {
        width: 50px !important;
        display: table;
        margin: 0 auto;
        margin-right: 0;
    }

    header.sticky .header-text {
        margin: 0;
        gap: 6px;
    }

    header .header-text {
        margin-top: 0 !important;
        transition: 1s all;
        gap: 5px;
    }
    .header-text h3 {
      text-align: center;
    }
    .date-item {
        min-width: 100px;
        display: flex;
    }

    .auth-head h2 {
        font-size: 30px !important;
    }

    .home-banner-text {
        padding-bottom: 0px;
    }

    .photoBox {
        grid-template-columns: 100%;
    }

    .header-btn {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        gap: 20px;
        justify-content: center;
    }
}

@media only screen and (max-width: 767px) {





    /* .dropdown {
        display: flex !important;
        gap: 8px;
        align-items: center;
    } */

    .sidenav a {
        padding: 10px 15px;
    }

    .service-page>div>.row>.col-lg-12.col-md-12 {
        justify-content: center;
    }

    .service-page>div>.row>.col-lg-12.col-md-12>a {
        /* font-size: 12px !important;
        margin-left: 0 !important;
        padding: 2px 7px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 32px !important; */
    }

    .inner-banner-sec img.inner-banner-image {
        min-height: 300px;
    }

    .category-box-main .sec-head h2 {
        font-size: 24px;
    }

    .service-page>div>.row>.col-lg-12.col-md-12 {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }






    .menuSec {
        background: #fff;
    }


    .header-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }



    header.sticky .menuSec {
        background-color: #000 !important;
    }

    .home-banner-text {
        padding-bottom: 0px;
    }

    .desktopView {
        display: none !important;
    }

    header .searchbar {
        display: none !important;
    }

    header.sticky .searchbar {
        display: block !important;
    }

    .desktopView.logoBox {
        display: block !important;
    }

    header.sticky .desktopView.logoBox {
        display: none !important;
    }



    .header-text h3 {
        display: none;
    }

}


@media only screen and (max-width: 519px) {


    .photoBox {
        grid-template-columns: 100% !important;
    }



    .header-logo {
        max-width: 100px;
    }

    .header-text h3 {
        display: none;
    }

    .header-btn {
        margin-top: 20px;
    }

    .header-text {
        margin-bottom: 5px;
    }

    section.main_slider {
        margin-top: 0;
    }

    h3 {
        font-size: 20px !important;
    }

    .newsletter-input input {
        width: 96%;
    }

    .title_div {
        max-width: 225px;
    }
}

@media only screen and (min-width: 520px) and (max-width: 767px) {}

@media only screen and (min-width: 300px) and (max-width: 519px) {}


/*Media Query End*/

.gorilla-content .gorrila-page-txt .color-red {
    color: #a60000;
    font-weight: 500;
    margin-bottom: 7px;
    margin-top: 30px;
}

.gorrila-page-txt ul {
    list-style: auto;
}

.gorrila-page-txt ul li {
    color: #000000;
    font-size: 14px;
    line-height: 23px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    margin-bottom: 15px;
    margin-left: 15px;
}

.gorrila-page-txt ul li::marker {
    color: #a60000;
}

.accordion-body.gorrila-page-txt {
    padding: 20px 30px;
    background: #ffffff;
    border: 1px solid #e6e7e9;
    border-top: none;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.gorilla-content .accordion-item {
    border: unset;
    margin: 10px 0;
}

.gorilla-content .accordion-button:not(.collapsed) {
    box-shadow: none;
    border: 1px solid #e6e7e9;
    background: unset;
    border-bottom: unset;
    color: #235ede;
    font-size: 23px;
    font-family: 'Montserrat', sans-serif;
    text-transform: capitalize;
    font-weight: 600;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.faqs-main .accordion-collapse.collapse {
    /* border: 1px solid #A60000; */
    border-top: 0;
    border-radius: 0 0 10px 10px;
    /* margin-bottom: 30px; */
}

.gorilla-content button:focus:not(:focus-visible) {
    box-shadow: none;
}

.gorilla-content .accordion-button::after {
    content: "\f067";
    font-weight: 600;
    font-family: "Font Awesome 5 free";
    background-image: none;
    position: absolute;
    top: 20px;
    right: 20px;
}

.right__col nav {
    padding-bottom: 0px !important;
}

.cols__container .right__col nav>ul>li>a {
    color: #1d1d1d;
    font-size: 30px !important;
    font-weight: 600;
    /* font-family: 'trj-b'; */
}

.faqs-main .accordion-button:not(.collapsed)::after {
    content: "\f068";
    font-weight: 900;
    font-family: "Font Awesome 5 free";
}

.address {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.contact-main h2 {
    font-size: 45px;
    color: #000;
    line-height: 45px;
    padding-bottom: 15px;
    font-weight: 400;
}

section.faqs-main p {
    font-size: 18px;
    color: #666666;
    font-family: 'Montserrat';
}

.faqs-main {
    padding: 80px 0;
}

.faqs-main button.accordion-button.collapsed {
    font-size: 22px;
    text-transform: capitalize;
    border: 1px solid #e6e7e9;
}


/*faq end*/


/* Privacy Page Start */

.privacy-page-text p {
    font-size: 16px;
    color: #333;
    padding: 14px 0;
    /* text-align: center; */
}

.privacy-page-text li {
    margin-bottom: 10px;
}

.privacy-page {
    padding: 80px 0;
}


/* Privacy Page End */


/* Account Page Start */

.log-in-wrap {
    padding: 40px 25px;
    background-color: #fdfdfd;
    /* box-shadow: rgba(0, 0, 0, 0.13) 0px 0px 20px; */
    border: 2px solid #E1E1E1;
}

.log-in-wrap h2 {
    margin: 0px 0px 30px;
    text-align: center;
    color: rgb(0, 0, 0);
    font-size: 30px;
    text-transform: uppercase;
    /* font-family: 'trj-r'; */
    font-weight: 300;
}

.log-in-wrap form button {
    padding: 15px 50px;
    font-size: 20px;
    color: rgb(255, 255, 255);
    font-weight: 500;
    font-family: 'Montserrat';
    border: none;
    background-color: #235ede;
    border-radius: 0;
}

.log-in-wrap form button:hover {
    background-color: #235ede;
}

.width-100 {
    width: 100% !important;
}

.log-in-page-main {
    padding: 100px 0px;
}

.log-in-page-main .form-control {
    height: 60px;
    padding-left: 25px;
    margin-bottom: 20px;
    border: 1px solid #e1e1e1;
    border-radius: 0;
    box-shadow: unset !important;
}

.log-in-page-main .form-control::placeholder {
    color: rgb(176, 175, 175);
}

.log-in-page-main .form-check label.form-check-label {
    font-size: 14px;
    font-weight: 600;
    margin: 0px;
    color: rgb(0 0 0);
    font-family: 'Montserrat';
}

.form-check-input:checked {
    background-color: #973416;
}

.log-in-page-main .form-check,
.forgot-pass {
    display: inline-block;
}

.forgot-pass {
    margin-top: 21px;
    width: 100%;
    text-align: right;
}

.forgot-pass a {
    font-size: 14px;
    font-weight: 600;
    font-family: 'Montserrat';
    margin: 0px;
    color: #000;
}

.forgot-pass a:hover {
    color: rgb(213, 0, 0);
}

/* Add this to your CSS file or style tag */
.form-action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* #lead_review_btn {
    background-color: #6c757d;
    border-color: #6c757d;
}

#lead_review_btn:hover {
    background-color: #5a6268;
    border-color: #545b62;
} */

.agree-text {
    font-size: 12px;
    font-weight: 500;
    margin-top: 5px;
    margin-bottom: 15px;
    font-family: 'Montserrat';
    color: black;
    display: inline-block;
    justify-content: start;
    padding: 0 10px;
    flex-wrap: wrap;
    gap: 5px;
}

.term-condition {
    font-weight: 500;
    margin-left: 10px;
    color: #000;
    text-decoration: underline;
}

.terms_chk .form-check-input {
    border-color: #79281f;
    border-radius: 0 !important;
    box-shadow: none !important;
}

ul.account-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

ul.account-list i {
    font-size: 15px;
    color: #000;
    width: 30px;
    height: 30px;
    border: 1px solid #000;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.account-list a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid #000;
    border-radius: 50px;
    transition: 1s all;
    padding: 5px;
}

ul.account-list span {
    color: #000;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    transition: 1s all;
    padding-right: 10px;
}

.log-in-wrap h3 {
    font-size: 26px;
    font-family: 'Montserrat', sans-serif;
    color: #767676;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.log-in-wrap h3:after,
.log-in-wrap h3:before {
    position: absolute;
    content: '';
    width: 30%;
    height: 1px;
    background: #7c7c7c;
    left: 15%;
    bottom: 0;
    top: 0;
    margin: auto;
    z-index: -1;
}

.log-in-wrap h3:before {
    right: 15%;
    left: auto;
}


/* Account Page End */


/* Appointment Section Start */

.customer {
    background-image: url(../images/customer.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
}

.cus-text {
    text-align: center;
    margin-bottom: 40px;
}

.cus-text h3 {
    font-size: 70px;
    line-height: 80px;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
}

.cus-text p {
    font-family: 'Montserrat';
}

.customer-input input {
    width: 100%;
    height: 60px;
    margin-top: 20px;
    background: #fff;
    border: 0;
    font-size: 18px;
    border-radius: 0;
    padding: 0 20px;
    font-family: 'Montserrat';
    color: #666;
    border: 1px solid #ededed;
}

.customer-input select {
    width: 100%;
    height: 60px;
    margin-top: 20px;
    background: #fff;
    border: 0;
    border-radius: 0;
    padding: 0 20px;
    color: #666;
    border: 1px solid #ededed;
    font-family: 'Montserrat';
    font-size: 20px;
}

.customer-input option {
    width: 100%;
    height: 60px;
    margin-top: 20px;
    background: #8b8b8c70;
    border: 0;
    border-radius: 50px;
    padding: 0 20px;
    color: #fff;
}

.customer .customer-input input::placeholder {
    color: #666;
}

.customer-input input::placeholder {
    color: #000 !important;
}

.customer-text.qoute-pg button {
    width: 100%;
    height: 60px;
    border: 0;
    font-size: 20px;
    font-family: 'Montserrat';
    margin-top: 30px;
    text-transform: uppercase;
    background: #235ede;
    color: #fff;
}

.customer-input textarea {
    width: 100%;
    height: 250px;
    margin-top: 20px;
    background: #fff;
    border: 0;
    border-radius: 0;
    padding: 20px 30px;
    color: #666;
    border: 1px solid #ededed;
    font-family: 'Montserrat';
    font-size: 20px;
}

button.btn10.cus-bttn {
    width: 100%;
    margin-top: 30px;
    text-transform: uppercase;
}

.customer-text.qoute-pg h2 {
    font-size: 42px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.customer-text.qoute-pg {
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.09);
    padding: 50px;
}


/* Appointment Section End */


/* Process Page Start */

section.process-page {
    padding: 80px 0 80px;
}

.process-box {
    position: relative;
    background-color: #fff;
    z-index: 99;
    width: 70%;
    margin: 20px 0;
    padding: 30px;
    margin-left: 50px;
}

.process-box:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 20px;
    top: 20px;
    /* background-color: #000; */
    box-shadow: 10px 7px 88.2px 9.8px rgb(0 0 0 / 9%);
    z-index: -6;
    border: 20px solid #cccccc29;
}

.process-image {
    text-align: end;
    margin: 0px 40px 0px 0px;
}

.process-number h2 {
    font-size: 40px;
    color: #fff;
    background: #235ede;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    position: relative;
    font-family: 'Montserrat', sans-serif;
}

.process-image>img {
    max-width: 80px;
}

.process-number h2:after {
    position: absolute;
    content: '';
    width: 160px;
    height: 160px;
    top: 2px;
    left: -20px;
    right: 0;
    bottom: 0;
    background: #235ede24;
    border-radius: 200px;
    z-index: -1;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-number {
    position: absolute;
    top: -30px;
    left: -30px;
    animation: pulsate-bck 2s ease-in-out infinite both;
}

@keyframes pulsate-bck {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.process-text h3 {
    font-size: 18.32px;
    text-transform: uppercase;
}

.process-text p {
    font-size: 15px;
    color: #8f8f8f;
    font-weight: 500;
    padding: 20px 0;
    width: 90%;
}

.process-text {
    position: relative;
    margin-top: 40px;
    margin-bottom: 15px;
}

.process-text:after {
    position: absolute;
    content: '';
    width: 15%;
    left: 0;
    right: 0;
    margin: auto;
    background: #235ede;
    bottom: -10px;
    height: 2px;
}

.proces-box-4 {
    margin-top: 70px;
}

.proces-box-3 {
    margin-top: 70px;
}

.process-box:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    background: #fff;
    z-index: -1;
}

img.prc-d-1 {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: -178px;
}

.process-page .row {
    position: relative;
}

.process-page .row:after {
    position: absolute;
    content: '';
    width: 100px;
    height: 100%;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-image: url(../images/prc-d-2.png);
    background-repeat: no-repeat;
    background-size: inherit;
    background-position: center;
}

input.s_head::placeholder {
    font-size: 13px;
    opacity: 1;
}

textarea#lead_message::placeholder {
    color: #70726b;
}

textarea#message::placeholder {
    color: #70726b;
}

/* Process Page End */
.content ul {
    display: flex;
}

@media (min-width: 868px) {
    .cols__container {
        max-width: 1200px;
        margin: 0 auto;
        width: 90%;
        justify-content: space-between;
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 50px;
    }
}

.cols__container .left__col .about {
    justify-content: space-between;
    position: relative;
    margin: 35px 0;
    display: flex;
}

.title_banner {
    width: 100%;
    background: url(https://images.pexels.com/photos/291732/pexels-photo-291732.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat 50% 20%/cover;
    min-height: calc(100px + 15vw);
}

.cols__container .left__col {
    padding: 25px 20px;
    text-align: center;
    max-width: 350px;
    position: relative;
    margin: 0 auto;
    min-width: 350px;
}

div#carouselExampleControls button {
    z-index: 9999;
}

.photoBox .serv-page-box .sarvice-page-text h3 {
    font-size: 12px !important;
}

@media (min-width: 868px) {
    .cols__container .left__col {
        padding: 25px 0px;
    }
}

@media (min-width: 1017px) {
    .cols__container .left__col {
        margin: 0;
        margin-right: auto;
    }
}

.cols__container .left__col .img__container {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translatex(-50%);
}

.cols__container .left__col .img__container img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    box-shadow: 1px 3px 12px rgba(0, 0, 0, 0.18);
}

.photoBox {
    display: grid;
    grid-gap: 2%;
    grid-template-columns: 32% 32% 32%;
    grid-row-gap: 10px;
}

.photoBox .serv-page-box img {
    height: auto !important;
    min-height: 250px;
}

/* .favBox {
    
} */
.favBox>button {
    position: absolute;
    top: 10px;
    right: 5px;
    height: 42px;
    width: 47px;
    background: #f8f8f8;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    transition: all .5s ease-in-out;
}

.favBox>lable.star {
    position: absolute;
    top: 12px;
    right: 58px;
    height: 40px;
    width: 62px;
    background: #151515;
    border-radius: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    transition: all .5s ease-in-out;
    color: #fff;
}

.favBox>button:hover {
    background: #ffffff;
}

.favBox>button>i {
    color: #ff0000;
    transform: translateY(2px);
}

.favBox>button:hover>i {
    color: #ff0000;
}

/* .cols__container .left__col .img__container span {
    position: absolute;
    background: #2afa6a;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    bottom: 3px;
    right: 11px;
    border: 2px solid #fff;
} */

.cols__container .left__col h2 {
    margin-top: 60px;
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 5px;
}

.cols__container .left__col p {
    font-size: 0.9rem;
    color: #818181;
    margin: 0;
}

.cols__container .left__col .about {
    justify-content: space-between;
    position: relative;
    margin: 20px 0;
}

.cols__container .left__col .about li {
    display: flex;
    flex-direction: column;
    color: #818181;
    font-size: 0.9rem;
}

.cols__container .left__col .about li span {
    color: #1d1d1d;
    font-weight: 600;
}

.cols__container .left__col .about:after {
    position: absolute;
    content: "";
    bottom: -16px;
    display: block;
    background: #cccccc;
    height: 1px;
    width: 100%;
}

.cols__container .content p {
    font-size: 1rem;
    color: #1d1d1d;
    line-height: 1.8em;
}

.cols__container .content ul {
    gap: 30px;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}

.cols__container .content ul li {
    display: flex;
}

.cols__container .content ul i {
    font-size: 1.3rem;
}

.cols__container .right__col nav {
    display: flex;
    align-items: center;
    padding: 30px 0;
    justify-content: space-between;
    flex-direction: column;
}

@media (min-width: 1016px) {
    .cols__container .right__col nav {
        flex-direction: row;
    }
}

.cols__container .right__col nav ul {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

@media (min-width: 868px) {
    .cols__container .right__col nav ul {
        flex-direction: row;
        gap: 10px;
    }
}

.cols__container .right__col nav ul li a {
    text-transform: uppercase;
    color: #818181;
}

.cols__container .right__col nav ul li:nth-child(1) a {
    color: #1d1d1d;
    font-weight: 600;
}

.cols__container .right__col nav button {
    background: #0091ff;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
}

.cols__container .right__col nav button:hover {
    opacity: 0.8;
}

@media (min-width: 1016px) {
    .cols__container .right__col nav button {
        margin-top: 0;
    }
}

.cols__container .right__col .photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 20px;
}

.cols__container .right__col .photos img {
    max-width: 100%;
    display: block;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 868px) {
    .cols__container .right__col .photos {
        height: 365px;
        overflow: auto;
        padding: 0 0 30px;
    }
}



/* Price PAge Start */

.price-page {
    padding: 80px 0;
}

.price-box {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
}

.price-box:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 15%;
    left: 0px;
    /* right: 0; */
    bottom: -19px;
    background-image: url(../images/price--bottom.png);
    background-repeat: no-repeat;
    background-size: 100%;
    margin: auto;
}

.price-top-text {
    background: #235ede;
    padding: 30px 30px;
    text-align: center;
}

.price-box {
    background: #fff;
    box-shadow: 0 0 15px 0 #9898988a;
    padding-bottom: 80px;
}

.price-top-text h3 {
    font-size: 30px;
    color: #fff;
    text-transform: uppercase;
    border-bottom: 2px solid #fff;
    display: inline-block;
    padding-bottom: 6px;
    margin-bottom: 0;
}

.price-top-text p {
    font-size: 13px;
    color: #fff;
}

.price-center-text {
    text-align: center;
    padding: 30px 0;
    position: relative;
    min-height: 180px;
}
.featured-sl>.owl-stage-outer {
    padding: 10px 0;
}

.price-center-text h4 {
    font-size: 60px;
    color: #235ede;
    font-family: 'Montserrat';
    font-weight: 400;
}

span.prc-1 {
    font-size: 36px;
    color: #000000;
    vertical-align: text-top;
}

span.prc-2 {
    font-size: 25px;
    color: #c5c5c5;
}

.price-center-text:after {
    position: absolute;
    content: '';
    width: 25%;
    height: 4px;
    border-radius: 50px;
    background: #c9c5c5;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 15px;
}

ul.price-list {
    width: 60%;
    margin: 20px auto;
}

ul.price-list li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 10px 0;
}

ul.price-list li i {
    font-size: 16px;
    color: #235ede;
}

ul.price-list li p {
    font-size: 14px;
    color: #000000;
    font-weight: 600;
    text-align: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
}

.price-btn {
    text-align: center;
}

.price-btn button {
    border-radius: 0 !important;
    font-family: 'Montserrat';
    font-size: 16px;
    margin-top: 15px;
    border-radius: 100px !important;
}


/* Price PAge End */


/* Inner Pages End */

section.aouther-form-page {
    position: relative;
    padding: 80px 0;
}

section.aouther-form-page select {
    margin-top: 15px;
    text-align: left;
}

section.aouther-form-page input {
    margin-top: 12px;
    /* text-align: left; */
}

section.aouther-form-page .auth-social.chek input {
    margin: 0;
    height: 20px;
    width: 30px;
}

.select-style {
    position: relative;
}

.select-style select {
    appearance: none !important;
}

.select-style i {
    position: absolute;
    right: 20px;
    top: 35px;
    color: #000;
}

.auth-head h2 {
    font-size: 43px;
    color: #010101;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.aut-form-box {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.09);
    padding: 50px 50px 100px;
}

.aut-form-box h4 {
    font-size: 18px;
    color: #000000;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    width: 95%;
}

.auth-form input {
    width: 100%;
    height: 48px;
    background: #fff;
    font-size: 12px;
    border-radius: 0;
    padding: 7px 20px;
    font-family: 'Montserrat';
    color: #666;
    border: 1px solid #ededed;
}

/* Issue #27, item 5 — label for the combined Preferred Date & Time field on the
   quote form. datetime-local ignores `placeholder`, so it needs a real label. */
.lead-datetime-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.auth-form input::placeholder {
    color: #666;
    text-transform: capitalize;
    font-weight: 400;
    font-family: 'Montserrat';
    font-size: 16px;
}

.auth-form select {
    position: relative;
    box-shadow: 0px 2px 10px 0px #c1c1c100;
    font-weight: 400;
    width: 100%;
    height: 48px;
    background: #fff;
    font-size: 14px;
    border-radius: 5px;
    padding: 0 20px;
    font-family: 'Montserrat';
    color: #666;
    border: 1px solid #ededed;
}

.auth-form textarea {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    position: relative;
    color: #666;
    padding: 20px 20px;
    font-size: 16px;
    border: 0;
    margin-top: 20px;
    border: 1px solid #ededed;
}

.aut-form-box h3 {
    font-size: 16px;
    color: #000;
    margin-top: 20px;
    text-transform: capitalize;
    margin-bottom: 11px;
}

.time-slots>h3 {
    font-size: 16px;
    color: #ff1414;
    margin-top: 20px;
    text-transform: capitalize;
    margin-bottom: 11px;
    width: 100%;
    text-align: center;
}

.auth-social a {
    width: 100%;
    height: 60px;
    background: #fff;
    box-shadow: 0 2px 10px 0px #c1c1c1;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 50px;
    margin-bottom: 10px;
}

.auth-social i {
    font-size: 22px;
    margin-top: 4px;
}

i.fab.fa-linkedin {
    color: #0077b5;
}

i.fab.fa-youtube {
    color: #f61c0d;
}

i.fab.fa-twitter {
    /* color: #03a9f4; */
}

i.fal.fa-globe {
    color: #235ede;
}

.upload-btn-wrapper .left {
    margin-right: 20px;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.upload-btn-wrapper .btn {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #666;
    position: relative;
    border-bottom: 0;
    color: #666;
    margin-top: 20px;
    box-shadow: 0px 2px 10px 0px #c1c1c18c;
}

.upload-btn-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.aoth-so-text h6 {
    margin: 0;
    font-size: 16px;
    color: #000;
    text-transform: capitalize;
    opacity: 1;
    transition: 0.5s ease-in-out;
    margin-left: 280px;
}

.auth-social .aoth-so-text h6 {
    margin: 15px;
    /* font-family: 'trj-b'; */
    opacity: 1;
    transition: .5s ease-in-out;
}

.auth-social {
    overflow: hidden;
}


.photoBox .sarvice-page-text {
    padding: 10px 0px !important;
    height: 30px !important;
}

.photoBox .serv-page-box:hover .sarvice-page-text {
    height: 60px !important;
    background: #235ede;
}

.auth-social.chek {
    border: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

.auth-btn button {
    background: #235ede;
    border: 0;
    color: #fff;
    border-radius: 50px;
    height: 50px;
    width: 170px;
    position: relative;
    font-weight: 400;
    letter-spacing: 1px;
    font-family: 'Montserrat';
    margin: 0% auto;
}

.auth-social.chek label {
    color: #666;
    font-weight: 400;
    font-family: 'Montserrat';
}

.auth-btn.byers {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.auth-btn.byers button {
    width: 100%;
}

.service-page .row {
    justify-content: center;
}

ul.customers-link li a {
    margin: 0px 0 10px 0px;
    text-decoration: none;
    text-transform: uppercase;
}


/*Media Query Start*/

@media only screen and (min-width: 1366px) and (max-width: 1920px) {}

@media only screen and (min-width: 1291px) and (max-width: 1365px) {}

@media only screen and (min-width: 992px) and (max-width: 1290px) {
    .menuSec img {
        width: 200px;
    }

    .header-btn {
        gap: 10px;
        margin-left: -20px;
    }

    h1 {
        font-size: 40px;
    }

    .service-slider .slick-prev {
        left: -10px;
        z-index: 1;
    }

    .service-slider .slick-next {
        right: 20px;
        z-index: 1;
    }

    .category-box-main .sec-head h2 {
        font-size: 30px;
    }

    .discover-slider .slick-prev {
        left: -60px;
    }

    .discover-slider .slick-next {
        right: -30px;
    }

    .about-text h2 {
        font-size: 36px;
    }

    .blog-image {
        width: 100%;
    }

    .blog-text {
        bottom: 10px;
        margin: 0 10px;
    }

    .blog-image img {
        height: 240px;
        object-fit: cover;
    }

    .newsletter-box {
        gap: 20px;
    }

    .newsletter-text h4 {
        font-size: 22px;
    }

    .footer-box h3 {
        font-size: 18px;
    }

    .footer-box-2 {
        padding-left: 50px !important;
    }

    .footer-menu-list-box {
        padding: 20px 10px;
    }

    .footer-box a {
        width: 100%;
        margin: 10px 0 10px 0px;
    }

    ul.footer-menu-list a {
        font-size: 11px;
    }

    ul.footer-menu-list a:after {
        width: 1px;
        height: 100%;
        right: -10px;
    }

    .footer-box {
        padding: 30px 15px;
    }

    .footer-menu-list-box h3 {
        margin-bottom: 10px;
        font-size: 17px;
    }

    img.inner-banner-image {
        object-fit: cover;
        height: 400px;
    }

    .log-in-page-main {
        padding: 80px 0px;
    }

    .log-in-wrap h2 {
        margin: 0px 0px 30px;
        font-size: 26px;
    }

    .forgot-pass {
        width: 65%;
    }

    .agree-text {
        font-size: 13px;
        padding: 0 0px;
    }

    .auth-social .aoth-so-text h6 {
        margin: 10px;
    }

    .process-image {
        margin: 30px 0 0px 0px;
    }

    img.prc-d-1 {
        right: -154px;
    }

    .process-box {
        position: relative;
        padding: 30px 20px;
    }

    .price-box:after {
        width: 100%;
        height: 9%;
        left: 0;
        right: 0;
        bottom: -8px;
    }

    ul.price-list {
        width: 70%;
    }

    .about-page .about-image img {
        height: 800px;
    }

    .service-page {
        padding: 40px 0px 20px;
    }

    .sarvice-page-text h3 {
        font-size: 18px;
    }

    .catg-detail-page .about-text h2 {
        font-size: 40px;
    }

    .blog-detail-page .about-text h2 {
        font-size: 24px;
    }

    .get-in-touch-sec {
        padding: 40px 20px;
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .menuSec img {
        width: 150px;
    }

    .search_formSec {
        top: -160px;
    }

    .btn-1 {
        padding: 12px 15px;
    }

    .header-btn {
        gap: 10px;
        margin-left: -40px;
    }

    h1 {
        font-size: 30px;
    }

    .banner-form input {
        flex: 0 0 34%;
    }

    .carousel-item.active img {
        height: 450px;
    }

    .service-sec {
        padding: 50px 0;
    }

    .sec-head {
        margin-bottom: 20px;
    }

    .category-box-main {
        padding: 50px 20px;
    }

    .discover-slider .slick-next {
        right: 0;
    }

    .discover-slider .slick-prev {
        left: -30px;
        z-index: 1;
    }

    .service-box {
        text-align: center;
    }

    .service-slider .slick-prev {
        left: -20px;
        z-index: 1;
    }

    .service-slider .slick-next {
        right: 10px;
        z-index: 1;
    }

    .about-text h2 {
        font-size: 40px;
    }

    .blog-image {
        width: 100%;
    }

    .blog-image img {
        height: 250px;
        object-fit: cover;
    }

    .newsletter-box i {
        font-size: 50px;
    }

    .newsletter-box {
        gap: 15px;
    }

    .newsletter-text h4 {
        font-size: 20px;
    }

    .footer-box {
        padding: 30px 10px;
        height: 100%;
    }

    .footer-box-2 {
        padding-left: 40px !important;
    }

    .footer-box.footer-appointment {
        height: auto;
        margin-left: 12px;
        border: 1px solid;
        width: 100%;
        padding: 25px 30px;
    }

    .footer-menu-list-box {
        padding: 30px 20px;
    }

    .footer-box h3 {
        font-size: 18px;
    }

    ul.footer-menu-list a:after {
        height: 85%;
        right: -6px;
    }

    .footer-box a {
        width: 100%;
        margin: 10px 0 0 0px;
    }

    .footer-bottom-nav {
        padding: 20px 20px;
        width: 102%;
    }

    img.inner-banner-image {
        height: 400px;
    }

    .log-in-page-main {
        padding: 60px 0px;
    }

    .log-in-wrap {
        padding: 30px 15px;
    }

    .log-in-wrap h2 {
        margin: 0px 0px 20px;
        font-size: 20px;
    }

    ul.account-list {
        gap: 10px;
        margin-bottom: 20px;
    }

    ul.account-list span {
        font-size: 10px;
    }

    .log-in-wrap h3:after {
        width: 30%;
        left: 10%;
    }

    .log-in-wrap h3:before {
        right: 10% !important;
        left: auto !important;
    }

    .forgot-pass {
        width: 55%;
    }

    .agree-text {
        display: inline-block;
    }

    .aut-form-box {
        padding: 10px !important;
    }

    .auth-social a {
        padding: 10px 10px;
    }

    .auth-social .aoth-so-text h6 {
        margin: 0 0 0 8px;
    }

    .process-box {
        width: 90%;
        padding: 15px;
        margin: 30px auto;
    }

    .process-number h2 {
        font-size: 55px;
        width: 130px;
        height: 130px;
    }

    .process-number h2:after {
        width: 150px;
        height: 150px;
        top: 0;
        left: -10px;
    }

    .process-image {
        margin: 0px 0 0 0px;
    }

    img.prc-d-1 {
        right: -51px;
        width: 15%;
    }

    .process-text h3 {
        font-size: 17px;
    }

    .process-page .row:after {
        width: 40px;
        right: -20px;
        background-size: contain;
    }

    section.process-page {
        padding: 60px 0;
    }

    .price-page .row {
        justify-content: center;
    }

    .price-box {
        padding-bottom: 60px;
        margin: 15px 0;
    }

    .price-box:after {
        height: 10%;
        bottom: -3px;
    }

    .serv-page-box {
        margin: 20px 0;
    }

    .service-page {
        padding: 40px 0px 50px;
    }

    .inner-banner-text h1 {
        font-size: 34px;
    }

    .get-in-touch-sec {
        padding: 20px;
        width: 100%;
    }

    .get-in-touch-sec h4 {
        font-size: 30px;
        margin-bottom: 3%;
    }

    .req-qoute-sec {
        padding: 20px;
    }

    .req-qoute-sec h4 {
        font-size: 30px;
        margin-bottom: 30px;
    }

    .get-in-touch-sec p {
        font-size: 13px;
        line-height: 26px;
    }

    .get-in-touch-sec ul li a {
        font-size: 16px;
    }

    section.contact-sec {
        padding: 70px 0;
    }

    .faqs-main {
        padding: 60px 0;
    }

    .privacy-page {
        padding: 50px 0;
    }
}

@media only screen and (min-width: 520px) and (max-width: 767px) {
    .search_formSec {
        top: -160px;
    }

    /* Issue #27, item 1 — 60% is too narrow to read on a small tablet. */
    .banner-form {
        width: 90%;
    }

    #search_btn {
        flex: 0 0 56px;
    }

    .banner-form button {
        width: 56px;
        height: 48px;
    }

    .banner-form input {
        flex: 0 0 34%;
        height: 48px;
    }
}

@media only screen and (min-width: 300px) and (max-width: 519px) {
    header {
        position: relative;
        padding: 0 0 0 15px;
    }

    .search_formSec {
        top: -140px;
    }
    .home-banner-text p {
        font-size: 16px;
    }

    .menuSec img {
        margin: 10px auto;
        width: 80%;
        display: flex;
        padding-left: 10px;
    }



    .header-btn a {
        font-size: 11px !important;
        padding: 10px 20px;
    }

    .home-banner-text {
        width: 100%;
    }

    h1 {
        font-size: 30px;
    }

    .banner-form {
        width: 100%;
    }

    #search_btn {
        flex: 0 0 48px;
    }

    .banner-form button {
        width: 48px;
        height: 48px;
    }

    .banner-form input {
        flex: 0 0 38%;
        height: 48px;
        padding: 10px 10px;
    }

    .carousel-item.active img {
        height: 450px;
    }

    .service-sec {
        padding: 50px 0;
    }

    .sec-head h2 {
        font-size: 30px;
    }

    .sec-head {
        margin-bottom: 20px;
    }

    .category-sec {
        padding: 0 0 40px;
    }

    .category-box-main {
        padding: 30px 15px;
    }

    .category-box-main .sec-head h2 {
        font-size: 22px;
    }

    .blog-box {
        margin: 10px 0 !important;
    }

    .blog-image {
        width: 100%;
    }

    .blog-image img {
        height: 250px;
        object-fit: cover;
    }

    .about-text {
        margin: 20px 0;
    }

    .about-text a {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .about-text h2 {
        font-size: 38px;
    }

    .blog-text {
        bottom: 10px;
        margin: 0 10px;
    }

    .newlettersec {
        padding: 30px 0;
    }

    .newsletter-box {
        display: grid;
        justify-content: center;
        gap: 20px;
        text-align: center;
        margin-bottom: 15px;
    }

    .newsletter-text h4 {
        font-size: 20px;
    }

    .newsletter-input input {
        padding: 10px 10px;
    }

    /* Issue #27 (follow-up) — was margin-left: -130px, which overlapped the
       button onto the input. Flex sizing keeps it flush instead. */
    .newsletter-input button {
        flex: 0 0 120px;
    }

    .noLeft {
        padding-left: 12px;
    }

    .noRight {
        padding-right: 12px;
    }

    .footer-box {
        padding: 20px 10px;
        height: auto;
    }

    .footer-box-2 {
        padding-left: 10px !important;
    }

    .footer-box h3 {
        font-size: 17px;
    }

    .footer-menu-list-box {
        padding: 20px 10px;
    }

    ul.footer-menu-list {
        display: block;
        column-count: 2;
    }

    ul.footer-menu-list a:after {
        display: none;
    }

    ul.footer-links a {
        width: 100%;
    }

    .footer-box.footer-appointment {
        border: 1px solid;
        padding: 20px 18px;
    }

    .footer-bottom-nav {
        padding: 10px 10px;
        text-align: center;
    }

    ul.footer-social {
        justify-content: center;
        gap: 10px;
        margin-top: 10px;
    }

    img.inner-banner-image {
        object-fit: cover;
        height: 300px;
    }

    .inner-banner-text h1 {
        font-size: 24px;
        letter-spacing: 0px;
    }

    .log-in-page-main {
        padding: 60px 0px;
    }

    .log-in-wrap {
        padding: 30px 10px;
        margin: 10px 0;
    }

    .log-in-wrap h2 {
        margin: 0px 0px 20px;
        font-size: 20px;
    }

    .log-in-wrap h3:after,
    .log-in-wrap h3:before {
        width: 25%;
    }

    ul.account-list {
        display: grid;
    }

    .forgot-pass {
        width: 50%;
    }

    .agree-text {
        display: inline-block;
    }

    .log-in-wrap form button {
        padding: 15px 40px;
    }

    section.aouther-form-page {
        padding: 50px 0;
    }

    .aut-form-box {
        padding: 20px 10px;
    }

    .inner-banner-box .banner-form {
        width: 100%;
    }

    .inner-banner-box .banner-form input:first-child {
        width: 80%;
    }

    .process-box {
        width: 100%;
        margin: 30px 0;
        padding: 20px;
        margin-left: 0;
    }

    .process-image {
        margin: 20px 0px 0px 0px;
    }

    .process-number h2 {
        font-size: 40px;
        width: 100px;
        height: 100px;
    }

    .process-number h2:after {
        width: 120px;
        height: 120px;
        left: -10px;
    }

    .process-number {
        top: 0;
        left: 0px;
    }

    .process-text {
        margin-top: 40px;
    }

    .process-text h3 {
        font-size: 17px;
    }

    .process-page .row:after {
        display: none;
    }

    section.process-page {
        padding: 50px 0;
    }

    .price-page {
        padding: 50px 0;
    }

    .price-box {
        padding-bottom: 50px;
        margin: 20px 0;
    }

    .price-box:after {
        height: 9%;
        bottom: -4px;
    }

    .about-sec {
        padding: 50px 0;
    }

    .about-page .about-image img {
        height: auto;
    }

    .serv-page-box {
        margin: 10px 0;
    }

    .service-page {
        padding: 50px 0;
    }

    .sarvice-page-text h3 {
        font-size: 18px;
    }

    .catg-detail-page .about-text h2 {
        font-size: 30px;
    }

    .blog-detail-page .about-text h2 {
        font-size: 20px;
    }

    section.contact-sec {
        padding: 50px 0;
    }

    .get-in-touch-sec {
        padding: 20px;
        width: 100%;
    }

    .get-in-touch-sec h4 {
        font-size: 33px;
        margin-bottom: 0;
    }

    .get-in-touch-sec p {
        font-size: 13px;
        margin-bottom: 5%;
        line-height: 25px;
    }

    .get-in-touch-sec ul li a {
        font-size: 14px;
    }

    .get-in-touch-sec ul li i {
        height: 50px;
        width: 50px;
        font-size: 20px;
    }

    .req-qoute-sec {
        padding: 20px;
    }

    .req-qoute-sec h4 {
        font-size: 33px;
        margin-bottom: 20px;
    }

    .req-qoute-sec h4:before {
        left: -20px;
    }

    .contact-inpt input {
        width: 100%;
    }

    .faqs-main {
        padding: 50px 0;
    }

    .faqs-main button.accordion-button.collapsed {
        font-size: 18px;
    }

    .gorilla-content .accordion-button:not(.collapsed) {
        font-size: 18px;
    }

    .accordion-body.gorrila-page-txt {
        padding: 20px 10px;
    }

    section.faqs-main p {
        font-size: 14px;
    }

    .privacy-page {
        padding: 50px 0;
    }

    .header-logo {
        width: 100%;
        text-align: center;
    }

    .carousel-indicators {
        display: none;
    }
}

html {
    overflow-x: hidden;
}


/*Media Query End*/



/* range slider  */

::selection {
    color: #fff;
    background: #003a99;
}

.flexBox .wrapper {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 20px 25px 20px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

header h2 {
    font-size: 24px;
    font-weight: 600;
}

header p {
    margin-top: 5px;
    font-size: 16px;
}

.price-input {
    width: 100%;
    display: flex;
    margin: 25px 0 20px;
}

.price-input .field {
    display: flex;
    width: 100%;
    height: 30px;
    align-items: center;
}

.field input {
    width: 100%;
    max-width: 156px;
    height: 100%;
    padding-left: 7px;
    outline: none;
    font-size: 16px;
    margin-left: 12px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid #999;
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.price-input .separator {
    width: 130px;
    display: flex;
    font-size: 19px;
    align-items: center;
    justify-content: center;
}

.slider {
    height: 5px;
    position: relative;
    background: #ddd;
    border-radius: 5px;
    width: 100%;
    margin: 0 auto !important;
}

.slider .progress {
    height: 100%;
    left: 25%;
    right: 25%;
    position: absolute;
    border-radius: 5px;
    background: #003a99;
}

.range-input {
    position: relative;
}

.range-input input {
    position: absolute;
    width: 100%;
    height: 0px;
    top: -15px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    height: 17px;
    width: 17px;
    border-radius: 50%;
    background: #fc0000;
    pointer-events: auto;
    -webkit-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

li.dropdown-submenu ul.dropdown-menu {
    left: 40% !important;
    max-width: 200px;
}

a#link1 {
    border: none !important;
    text-decoration: underline !important;
}

input[type="range"]::-moz-range-thumb {
    height: 17px;
    width: 17px;
    border: none;
    border-radius: 50%;
    background: #fc0000;
    pointer-events: auto;
    -moz-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

/* Support */
.support-box {
    top: 2rem;
    position: relative;
    bottom: 0;
    text-align: center;
    display: block;
}

.b-btn {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.b-btn.paypal i {
    color: blue;
}

.b-btn:hover {
    text-decoration: none;
    font-weight: bold;
}

.b-btn i {
    font-size: 20px;
    color: yellow;
    margin-top: 2rem;
}


button.prev-days,
button.next-days {
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff !important;
    border: none;
    border-radius: 100px;
}

.time-slot-container {
    background: black;
    padding: 20px;
    border-radius: 10px;
}

.calendar-slider {
    padding: 20px 0 !important;
}

.dropdown-submenu>ul.dropdown-menu {
    position: absolute;
    left: unset !important;
    top: 0;
    margin-left: 5px;
    right: -100%;
}

/* ==========================================================================
   Issue #1 — UI/UX fixes
   ========================================================================== */

/* Site-wide font baseline.
   Montserrat is requested throughout this stylesheet but was never loaded;
   the webfont is now linked in _layout/front_main.php. */
body,
button,
input,
select,
textarea {
    font-family: 'Montserrat', sans-serif;
}

/* Page loader — replaces the misnamed page-loadaer.gif with a CSS spinner.
   Moved out of the inline <style> block in _layout/front_main.php. */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(10px);
}

/* The original animated loader, carried on a div as a background image rather
   than an <img> tag.

   The GIF is a 900x600 canvas but its animation occupies only about 32x64px in
   the middle - roughly 96% of the file is empty padding. Fitting the whole
   canvas with background-size:contain therefore renders the spinner tiny no
   matter how large the box is. Instead the background is scaled well beyond the
   box and centred, so the animation itself renders at a usable size and the
   surrounding padding is cropped. The canvas is transparent, so nothing shows
   at the crop edges. */
.page-loader {
    display: block;
    width: 260px;
    height: 260px;
    max-width: 70vw;
    background-image: url(../images/page-loader.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 600px auto;
}

/* Newsletter — privacy note and inline confirmation.
   Overrides the .newsletter-input flex rule so the note and confirmation
   stack under the form instead of sitting beside it. */
.newsletter-input-block {
    display: block;
}

.newsletter-privacy {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 18px;
    color: #b5b5b5;
}

.newsletter-privacy a {
    color: #fff;
    text-decoration: underline;
}

.newsletter-confirmation {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 18px;
}

.newsletter-confirmation:empty {
    display: none;
}

.newsletter-confirmation.is-success {
    color: #4ad07d;
}

.newsletter-confirmation.is-error {
    color: #ff6b6b;
}

/* Persistent inline success/error region for the callback + contact forms
   (issue #3, item 7). */
.form-status {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 18px;
}

.form-status:empty {
    display: none;
}

.form-status.is-success {
    color: #4ad07d;
}

.form-status.is-error {
    color: #ff6b6b;
}

/* The contact page form sits on a light background — use darker tones there. */
.req-qoute-sec .form-status.is-success {
    color: #1d7a45;
    margin: 0 0 15px 0;
}

.req-qoute-sec .form-status.is-error {
    color: #c62828;
    margin: 0 0 15px 0;
}

/* Carousel touch behaviour — moved out of the inline <style> block in
   _layout/front_main.php. Uses !important to override slider.css. */
div#carouselExampleControls,
.slick-slider,
.owl-carousel {
    touch-action: auto !important;
}

/* ==========================================================================
   Issue #1 — Responsive / mobile fixes
   ========================================================================== */

/* M4 — iOS Safari zooms the whole page when a focused form control computes to
   under 16px. Every control in the callback form measured 15px, so focusing a
   State/City/Category select auto-zoomed the page on iPhone. Desktop sizing is
   left untouched. */
@media only screen and (max-width: 991px) {

    .contact-inpt input,
    .contact-inpt select,
    .contact-inpt textarea,
    .footer-input input,
    .footer-input select,
    .footer-input textarea,
    .newsletter-input input,
    .header-text input,
    input.s_head,
    .banner-form input {
        font-size: 16px;
    }

    .contact-inpt input::placeholder,
    .contact-inpt textarea::placeholder,
    .footer-input input::placeholder,
    .footer-input textarea::placeholder,
    .newsletter-input input::placeholder,
    .header-text input::placeholder,
    input.s_head::placeholder,
    .banner-form input::placeholder {
        font-size: 14px;
    }
}

/* M2 — inner banners were stretched by object-fit: fill; cover preserves the
   aspect ratio and crops instead. object-position keeps the crop off the
   extreme top on narrow screens. */
img.inner-banner-image {
    object-fit: cover;
    object-position: center 40%;
}

@media only screen and (max-width: 767px) {
    img.inner-banner-image {
        object-position: center 35%;
    }
}

/* N1 — the "Latest Blog" heading sat flush against the first blog card (0px
   gap). Scoped to the Latest Blog block so the "About US" heading, which shares
   .about-text, keeps its existing spacing. */
.blog-box > .about-text {
    margin-bottom: 25px;
}

/* N3 — mobile category accordion.
   Replaces the Bootstrap dropdown in the sidenav, which never opened on touch
   because the markup used Bootstrap 4 attributes against Bootstrap 5. */
.mobile-nav {
    margin-top: 25px;
}

.mobile-nav-list,
.mobile-nav-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    border-bottom: 2px solid #ffffff2e;
}

/* Override the generic .sidenav a rule so rows sit flush and size correctly. */
.sidenav .mobile-nav-link {
    flex: 1 1 auto;
    padding: 12px 8px;
    border-bottom: 0;
    font-size: 16px;
    line-height: 1.3;
}

.mobile-nav-toggle {
    flex: 0 0 auto;
    width: 46px;
    background: none;
    border: 0;
    border-left: 2px solid #ffffff2e;
    color: #fff;
    cursor: pointer;
}

/* Plus / minus indicator drawn in CSS so no icon font is required. */
.mobile-nav-icon {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
}

.mobile-nav-icon::before,
.mobile-nav-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 2px;
    margin-top: -1px;
    background: #fff;
    transition: transform 0.2s ease;
}

/* The vertical stroke rotates away, turning the plus into a minus. */
.mobile-nav-icon::after {
    transform: rotate(90deg);
}

.mobile-nav-item.is-open .mobile-nav-icon::after {
    transform: rotate(0deg);
}

.sidenav .mobile-nav-sublink {
    padding: 10px 8px 10px 24px;
    font-size: 15px;
    border-bottom: 1px solid #ffffff1a;
    color: #dcdcdc !important;
}

.mobile-nav-sublist {
    background: #ffffff0d;
}

/* ==========================================================================
   Issue #1 — mobile side navigation design + inner scroll
   ========================================================================== */

/* R1 — layout regression fix.
   The sidenav sits inside .menuSec, which styles every descendant <ul> as a
   flex row (.menuSec ul { display:flex }) and every <li> as inline-block.
   That turned the category accordion into a horizontal strip with one letter
   per line. These rules are scoped to #mySidenav so they outrank .menuSec
   without affecting the desktop menu. */
#mySidenav .mobile-nav-list,
#mySidenav .mobile-nav-sublist {
    display: block;
    text-align: left;
    text-transform: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

#mySidenav .mobile-nav-item,
#mySidenav .mobile-nav-sublist li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* R2 — category rows.
   .menuSec ul li a sets font-size:12px !important and a pill border-radius,
   so those two need !important here to be overridden. */
#mySidenav .mobile-nav {
    margin-top: 25px;
    border: 1px solid #3a3a3a;
}

#mySidenav .mobile-nav-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    border-bottom: 1px solid #3a3a3a;
}

#mySidenav .mobile-nav-item:last-child .mobile-nav-row {
    border-bottom: 0;
}

#mySidenav .mobile-nav-link {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-height: 48px;
  padding: 12px 16px;
  border: 0;
  border-radius: 0 !important;
  font-size: 14px !important;
  line-height: 1.3;
  text-align: left;
  text-transform: uppercase;
  color: #fff !important;
}

#mySidenav .mobile-nav-toggle {
    flex: 0 0 70px;
    width: 70px;
    background: none;
    border: 0;
    border-left: 1px solid #3a3a3a;
    color: #fff;
    cursor: pointer;
}

/* R2 — expanded subcategories sit on a lighter panel. */
#mySidenav .mobile-nav-sublist {
    background: #2b2b2b;
}

#mySidenav .mobile-nav-sublist li + li {
    border-top: 1px solid #3a3a3a;
}

#mySidenav .mobile-nav-sublink {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 12px 16px;
    border: 0;
    border-radius: 0 !important;
    font-size: 14px !important;
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
    color: #c9c9c9 !important;
}

/* R2 — account actions stack full width above the categories. */
#mySidenav .header-btn {
    display: block;
    margin-top: 20px;
}

#mySidenav .header-btn .btn-1 {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 15px !important;
    text-align: center;
}

#mySidenav .header-btn .btn-1:last-child {
    margin-bottom: 0;
}

/* R3 — the panel scrolls internally once the category list is taller than the
   viewport, and the scroll does not chain through to the page behind it. */
.sidenav {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ==========================================================================
   Issue #1 — submenu hover states + content flash on load
   ========================================================================== */

/* D1 — the sidenav sits inside .menuSec, so the desktop flyout hover rules were
   also matching the mobile submenu:
     .menuSec li:hover > ul   -> position:absolute; width:230px; top:40px
     .menuSec li ul li a:hover-> background:#fff; color:#000 !important
     .menuSec ul li a:hover   -> background:#235ede
   That made the submenu float over the rows below at the wrong width, and its
   display:block overrode the hidden attribute so hovering a *collapsed*
   category popped it open. These rules keep the submenu in normal flow and make
   the .is-open class the single authority on visibility. */
#mySidenav .mobile-nav-sublist,
#mySidenav .mobile-nav-item:hover > .mobile-nav-sublist {
    display: none;
    position: static;
    width: auto;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    background: #2b2b2b;
}

#mySidenav .mobile-nav-item.is-open > .mobile-nav-sublist,
#mySidenav .mobile-nav-item.is-open:hover > .mobile-nav-sublist {
    display: block;
}

/* D1 — readable hover states in place of the white/blue desktop ones.
   .menuSec li ul li a:hover sets color:#000 !important, so colour needs
   !important here to win. */
#mySidenav .mobile-nav-link:hover,
#mySidenav .mobile-nav-link:focus {
    background-color: #1c1c1c;
    color: #fff !important;
}

#mySidenav .mobile-nav-sublink:hover,
#mySidenav .mobile-nav-sublink:focus {
    background-color: #383838;
    color: #fff !important;
}

#mySidenav .mobile-nav-toggle:hover,
#mySidenav .mobile-nav-toggle:focus {
    background-color: #1c1c1c;
}

/* D2 — the loader was fully transparent (only a backdrop blur), so partially
   rendered content -- blog titles and slider slides before slick initialises --
   was visible through it during load. A solid background hides the page until
   window.load fires. */
.loader-container {
    background-color: #ffffff;
}

/* Mobile blog cards: let the anchor take layout, and drop the inset overlay
   offset added at <=519px so the caption panel sits flush to the card. */
@media only screen and (max-width: 991px) {

    .blog-box a {
        display: inline-block;
        /* the card image is width:100%, so an inline-block anchor has no
           intrinsic width to shrink-wrap to and collapses to 0 - this pins it
           to the column width instead */
        width: 100%;
    }

    .blog-text {
        bottom: 0;
        margin: 0;
    }
}

/* ==========================================================================
   Issue #1 — header and sticky design
   ========================================================================== */

/* The sticky bar was solid black with white heading text and a dark translucent
   search field. It is now white with dark text and a slight shadow, matching the
   supplied reference. Mobile keeps its existing dark treatment (see below). */
header.sticky {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Show the heading and search in the default desktop header too - they were
   parked off-screen with margin-top:-200px and only revealed once sticky. */
@media only screen and (min-width: 992px) {

    header .header-text {
        margin-top: 0;
    }
}

/* Dark heading, held to the two lines shown in the reference. */
.header-text h3 {
    color: #111111;
    white-space: nowrap;
}

/* White search field with a grey border, replacing the dark translucent one. */
.header-text input {
    background: #ffffff;
    border: 1px solid #d5d5d5;
    color: #111111;
}

.header-text input::placeholder {
    color: #767676;
    opacity: 1;
}

/* Mobile keeps the dark sticky bar from the reference screenshot, so the
   light treatment above is reverted below the tablet breakpoint. */
@media only screen and (max-width: 767px) {

    header.sticky {
        background: #000000;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    }

    .header-text input {
        background: #00000040;
        border: 1px solid #989898;
        color: #ffffff;
    }

    .header-text input::placeholder {
        color: #ffffff;
        opacity: 1;
    }
}

/* The hamburger is a black icon inverted to white for the old black sticky bar
   (div#Header header.sticky .mobileView>i>img { filter: invert(1) }). Now that
   the sticky header is light from the tablet breakpoint up, that inversion
   would render it white-on-white, so it is cancelled there. Below 768px the
   sticky bar stays dark and the inversion still applies. */
@media only screen and (min-width: 768px) {

    div#Header header.sticky .mobileView>i>img {
        filter: none;
    }
}

/* The header search field was sized by the input's default width, leaving the
   form at 240px inside a 526px container. The placeholder needed 176px of text
   space but only had 160px, so it truncated to "Search for service/busi...".
   Letting the form take the free space gives the text room. The search button
   is positioned against .header-text, so it stays aligned to the right edge. */
.header-text form {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- Issue #37: zip code field in the sticky header search bar ---- */
/* The form becomes a keyword + zip + button flex row. The search button is
   pulled OUT of its absolute position (it used to overlap the last input's
   right edge) and becomes a normal flex item, so neither input is covered. */
header .header-text form {
    display: flex;
    gap: 8px;
    position: relative;
    align-items: center;
}
header .header-text form input.s_head {
    flex: 1 1 auto;
    min-width: 200px;
    padding: 10px 20px;
}
header .header-text form input.s_head_zip {
    flex: 0 0 150px;
    width: 150px;
    min-width: 120px;
    padding: 10px 15px;
    -moz-appearance: textfield;
}
header .header-text form input.s_head_zip::-webkit-outer-spin-button,
header .header-text form input.s_head_zip::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
header .header-text form > div {
    flex: 0 0 auto;
}
/* Let the search form take the width; keep the intro heading from hogging it */
header .header-text form {
    flex: 1 1 auto;
    min-width: 0;
}
/* Guarantee breathing room between the search button and the Discover/nav
   buttons in the next column, at every width (issue #37). */
header .header-text form {
    margin-right: 22px;
}
header .header-text h3 {
    flex: 0 1 auto;
}
header .header-text form button.book-btn {
    position: static;
    width: 50px;
    height: 40px;
    display: block;
}
/* Below xl the search shares its row with the Discover + Dashboard + Logout
   buttons (and, on mobile, the sticky bar has little room). Keep the fields
   compact here so the wide xl sizes above never crowd or overlap those
   buttons; the widened search applies only at >=1200px. */
@media (max-width: 1199px) {
    header .header-text form input.s_head {
        min-width: 110px;
    }
    header .header-text form input.s_head_zip {
        flex: 0 1 100px;
        width: 100px;
        min-width: 80px;
    }
    header .header-text form {
        margin-right: 12px;
    }
    /* Below xl the search row also carries Discover + Dashboard + Logout;
       tighten the button padding/gap so all three fit beside the search
       instead of overlapping it. */
    header .header-btn {
        gap: 10px;
    }
    header .header-btn .btn-1,
    header .header-btn .discover-toggle {
        padding: 9px 16px;
    }
}
@media (max-width: 575px) {
    header .header-text form input.s_head {
        min-width: 90px;
    }
    header .header-text form input.s_head_zip {
        flex: 0 1 85px;
        width: 85px;
        min-width: 70px;
    }
}
/* Zip suggestions dropdown, anchored under the zip input */
header .header-text form #header-zip-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 1000;
    background: #fff;
    width: 220px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 6px 6px;
}