:root {
/*In use (our styles)*/
--white-color: #FFFFFF;
--gupter: 'Gupter', serif;
--openSance: 'Open Sans', sans-serif;
--regular: 400;
--medium: 500;
--semi-bold: 600;
--bold: 700;
--green: #20A920;
--blue: #223A54;
--lightGray: rgb(247, 247, 247);
--text-color: #4D4C4C;
--error-color: rgb(230, 87, 87);
--heading-size: 44px;
--paragraph-size: 16px;
--banner-heading: 50px;
--subheading-size: 16px;
--cta-text-size: 20px;
--background-gradient-color: linear-gradient(339deg, #000 -19.36%, #223A54 54.7%, #000 128.75%);
--cinzel: 'Cinzel', serif;

}

.row>* {
padding-right: 10px;
padding-left: 10px;
}

.bulk-form-btn {
margin-right: 12px;
}

.bg-light-green {
background-color: rgb(32, 169, 32, 0.2);
}

.page-catagery-list {
padding: 0;
border-radius: 0;
background-color: transparent;
margin-top: 44px;
}

.form-sections-wrapper {
margin: 0 !important;
width: 100%;
}

.bulk-order-form-left {
padding: 60px 40px;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
}

.column-center {
width: fit-content;
margin-left: auto;
margin-right: auto;
}

.google-map-iframe,
.google-map-iframe iframe,
.contact-us-img figure {
border-radius: 20px !important;
}

.mb-75 {
margin-bottom: 75px !important;
}

.mt-30 {
margin-top: 30px !important;
}

.px-12 {
padding: 0 12px;
}

.service-entry-box-list-1 .service-entry-item p {
margin-top: -0px !important;
padding-left: 0px !important;
}

.colum-center {
max-width: fit-content !important;
display: block;
margin: 0 auto;
}

.form-container input::placeholder {
font-size: 14px;
}

.form-label {
font-family: var(--openSance);
margin-bottom: 8px;
font-size: 16px !important;
}

.gap-y-5 {
display: flex;
flex-direction: column;
gap: 5px;
}

.gap-y-10 {
display: flex;
flex-direction: column;
gap: 10px;
}

.form-check {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--openSance);
font-size: 16px;
margin-bottom: 20px;
position: relative;
}

.form-check input {
display: block !important;
position: absolute;
top: -2px;
}

.form-select {
padding: 10px 18px;
border-radius: 10px;
font-size: 14px;
font-family: var(--openSance);
color: #7B798C;
font-weight: var(--regular);
}

.form-select:focus {
outline: none;
box-shadow: none;
border: 1px solid rgb(123, 121, 140, 0.2);
}

.form-group input {
font-family: var(--openSance);
font-size: 14px !important;
}

.form-group {
display: flex;
flex-direction: column;
}

.w-fit {
width: fit-content !important;
}

.text-center {
text-align: center !important;
}

.middle-section-for-line {
position: relative !important;
}

.mx-auto {
margin-right: auto !important;
margin-left: auto !important;
}

.ml-auto {
margin-left: auto !important;
}

.middle-section-for-line::before {
content: '';
position: absolute !important;
width: 1px;
height: 100px;
background-color: rgba(123, 121, 140, 0.14);
left: 0;
top: 44%;
transform: translateY(-50%);
}

.pr-25 {
padding-right: 25px;
}

.middle-section-for-line::after {
content: '';
position: absolute !important;
width: 1px;
height: 100px;
background-color: rgba(123, 121, 140, 0.14);
right: 0;
top: 44%;
transform: translateY(-50%);
}

.contact-info-content h3 {
color: var(--green);
font-family: var(--gupter) !important;
font-weight: var(--medium);
font-size: 22px;
text-transform: uppercase;
margin-bottom: 10px;
}

.contact-info-content p {
color: var(--text-color);
font-family: var(--openSance);
margin: 0;
}

.contact-info-content p a {
color: inherit;
}

.contact-info-content p span {
font-weight: var(--semi-bold);
color: var(--blue);
}

.contact-item {
width: 30%;
min-height: 200px;
display: flex;
align-items: start;
gap: 15px;
padding-top: 60px !important;
justify-content: center;
}

.contact-item p {
color: var(--text-color);
font-family: var(--openSance);
margin-top: 16px !important;
}

.contact-item p span {
font-weight: var(--semi-bold);
}

.contact-item h3 {
font-weight: var(--medium);
color: var(--green);
font-family: var(--gupter);
text-transform: uppercase;
}

.contact-item-holder {
display: flex;
align-items: center;
justify-content: space-between;
}

.contact-info-item {
padding: 30px;
height: calc(100% - 30px);
margin-bottom: 30px;
display: flex;
color: var(--blue);
}

.contact-info-item .icon-box {
border: 1px solid var(--green);
border-radius: 10px;
min-width: 45px !important;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
}

.contact-info-item .icon-box img {
width: 100%;
max-width: 30px;
}

.w-20 {
width: 20px !important;
}

.contact-form .form-control {
font-size: 16px;
font-weight: 400;
line-height: 1.5em;
color: var(--text-color);
background: var(--white-color);
border: 1px solid rgb(123, 121, 140, 0.2);
border-radius: 10px;
padding: 9px 20px !important;
box-shadow: none;
outline: none;
}

.contact-form .form-control::placeholder {
color: #7B798C;
font-family: var(--openSance);
font-weight: var(--regular);
}

.contact-form input,
select {
font-family: var(--openSance);
}

.custom-form {
padding: 55px 40px;
border-radius: 0;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}

.contact-us-img img {
width: 100%;
aspect-ratio: inherit;
object-fit: cover;
border-radius: 20px;
height: 240px;
}

.page-catagery-list ul {
border-radius: 20px;
}

.page-catagery-list ul li {
margin-bottom: 0 !important;
border-radius: 0 !important;
}

.page-catagery-list ul li a {
border-radius: 0;
padding: 20px 12px !important;
background-color: transparent;
}

.page-catagery-list ul li a::after {
display: none;
}

.page-catagery-list ul li a.active-faq-nav-item::after {
display: none;
}

.page-catagery-list ul li a:hover {
color: var(--green) !important;
/* background-color: var(--white-color) !important; */
}

.page-catagery-list ul li a.active-faq-nav-item {
color: var(--green) !important;
}

#quantityInterested {
position: relative;
}

.btn-add-field {
font-family: var(--openSance);
font-size: 10px;
background-color: var(--lightGray);
display: flex;
align-items: center;
gap: 6px;
border: 1px solid var(--text-color);
margin-top: 5px;
border-radius: 5px;
padding: 0 12px !important;
}

.cross-icon-field {
background-color: transparent;
border: none;
position: absolute;
background-color: red;
}

.cross-icon-field svg {
width: 14px;
}

.btn-add-field svg {
width: 10px;
}

/*------------------ Country code dropdown Start ------------------*/
.phone-container {
position: relative;
}

.iti {
width: 100%;
}

#phone {
width: 100%;
padding-left: 83px !important;
/* space for dial code */
padding-right: 21px;
border: 1px solid rgba(123, 121, 140, 0.2);
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
}

.iti--separate-dial-code .iti__selected-flag {
background-color: white !important;
border-radius: 20px;
}

.iti__country-list {
max-width: 200px;
position: relative !important;
}

/* Fixed Search Container Styles */
.iti__search-container {
/* position: sticky;
top: 0; */
z-index: 100 !important;
/* Increased z-index */
background-color: #fff;
padding: 8px;
border-bottom: 1px solid #eee;
}

/* Fixed Search Input Styles */
.iti__search-input {
position: relative !important;
/* Changed from sticky */
top: 0;
width: 100% !important;
box-sizing: border-box !important;
font-size: 14px !important;
color: #333 !important;
/* Darker color for better visibility */
background-color: #fff !important;
/* Ensure white background */
padding: 8px 12px !important;
/* Better padding */
border: 1px solid #ccc !important;
border-radius: 4px !important;
z-index: 101 !important;
outline: none !important;
font-family: inherit !important;
/* Use inherited font */
line-height: 1.4 !important;
margin: 0 !important;
}

/* Focus state for better UX */
.iti__search-input:focus {
outline: none !important;
border-color: #007bff !important;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
}

/* Placeholder styling */
.iti__search-input::placeholder {
color: #999 !important;
opacity: 1 !important;
}

/* No results styling */
.iti__no-results {
padding: 12px;
text-align: center;
color: #666;
font-style: italic;
background-color: #f8f9fa;
}

/* Highlight styling for keyboard navigation */
.iti__country.iti__highlight {
background-color: #007bff !important;
color: white !important;
}

/* Mobile specific fixes */
.iti-mobile .iti--container {
right: 30px !important;
}

/* Additional fixes for text visibility */
.iti__country-list .iti__search-input {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

/* Override any potential conflicting styles */
.iti__country-list input[type="text"] {
color: #333 !important;
background: #fff !important;
border: 1px solid #ccc !important;
}

/* Force text visibility in search input */
.iti__search-input,
.iti__search-input:focus,
.iti__search-input:active {
color: #000 !important;
-webkit-text-fill-color: #000 !important;
background-color: #ffffff !important;
caret-color: #000 !important;
text-shadow: none !important;
}

/* Override any intl-tel-input default styles */
.iti__country-list input {
color: #000 !important;
-webkit-text-fill-color: #000 !important;
}

/* Placeholder styling */
.iti__search-input::placeholder {
color: #666 !important;
opacity: 1 !important;
-webkit-text-fill-color: #666 !important;
}

/* ---------------  Error style --------------- */
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
border: 1px solid #e3342f !important;
background-image: none !important;
/* Remove Bootstrap icon */
box-shadow: none !important;
}

#error-consent {
margin-top: -20px !important;
}

/*------------------ Country code dropdown End ------------------*/

@media only screen and (max-width: 991px) {
.contact-info-content h3 {
font-size: 20px;
margin-bottom: 5px;
}

.pl-12 {
padding-left: 0;
}

.contact-info-content {
width: calc(100% - 65px);
}

.contact-info-item {
padding: 20px;
}

.contact-info-item .icon-box {
min-width: 40px;
min-height: 40px;
margin-right: 15px;
}

.contact-info-item .icon-box img {
max-width: 26px;
}

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

.form-container {
padding: 0;
}

.bulk-order-form-left {
/*width: 80%;*/
width:96.5%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 0;
/* padding-top: 30px; */
}

.custom-form {
width:96.5% !important;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-right-radius: 0;
/* padding-top: 30px; */

}

.bulk-form-btn{
margin-left:12px !important;
margin-right:auto !important;
}
}

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

.mb-75 {
margin-bottom: 50px !important;
}

.column-center {
display: block;
text-align: left !important;
}

.row>* {
padding-right: 20px;
padding-left: 20px;
}

.contact-info-content h3 {
font-size: 18px;
}

.contact-info-content {
width: calc(100% - 80px);
}

.custom-form,
.bulk-order-form-left {
width: 90% !important;
padding: 15px;
padding-top:50px;
}

.bulk-order-form-left .page-catagery-list{
margin-top:15px;
}


.bulk-order-form-left {
padding-top:50px;
}

.custom-form{
padding-bottom:50px;
}

.dynamic-bulk-order-form>div{
padding-left:0 !important;
padding-right:0 !important;
}

}


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

.colum-center {
margin: 0 !important;
}

label {
line-height: 24px;
}

.ml-auto{
margin-left:0 !important;
margin-right:auto !important;
}
}

/*  ---------------- Three box styling ---------------- */


.hide-above-phone{
display:none;
}


@media (max-width: 540px) {
.contact-item{
flex-direction:column !important;
padding:25px !important;
padding-top:40px !important;
}

.service-entry-item-top{
align-items:center;
}

.hide-above-phone{
display:block;
}

.hide-below-phone{
display:none;
}

.contact-item h3{
margin-bottom: 12px !important;
}

.service-entry-item-content{
margin-top:-10px !important;
}

.service-entry-item .icon-box{
min-width: 40px !important;
height: 40px !important;
}

}

/* TAB VIEW: 768px – 1024px */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

/* Remove center alignment */
.column-center,
.colum-center,
.text-center,
.mx-auto {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
}

/* General left alignment for content blocks */
.row > * {
text-align: left !important;
padding-left: 10px !important;
padding-right: 10px !important;
}

/* Specific bulk-order left alignment */
.bulk-order-form-left,
.custom-form,
.dynamic-bulk-order-form,
.contact-us-content {
text-align: left !important;
justify-content: flex-start !important;
align-items: flex-start !important;
}
}