@import url("../lib/fontawesome/css/all.min.css");

/* version 1 */
@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/lib/fontawesome/webfonts/fa-brands-400.woff2") format("woff2"), url("/lib/fontawesome/webfonts/fa-brands-400.ttf") format("truetype");
}

@font-face {
    font-family: "Font Awesome 6 Duotone";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("/lib/fontawesome/webfonts/fa-duotone-900.woff2") format("woff2"), url("/lib/fontawesome/webfonts/fa-duotone-900.ttf") format("truetype");
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url("/lib/fontawesome/webfonts/fa-light-300.woff2") format("woff2"), url("/lib/fontawesome/webfonts/fa-light-300.ttf") format("truetype");
}

.fal,
.fa-light {
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
}

:root,
:host {
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Pro";
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/lib/fontawesome/webfonts/fa-regular-400.woff2") format("woff2"), url("/lib/fontawesome/webfonts/fa-regular-400.ttf") format("truetype");
}

.far,
.fa-regular {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
}

:root,
:host {
    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Pro";
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("/lib/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"), url("/lib/fontawesome/webfonts/fa-solid-900.ttf") format("truetype");
}

.fas,
.fa-solid {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
}

:root,
:host {
    --fa-font-thin: normal 100 1em/1 "Font Awesome 6 Pro";
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 100;
    font-display: block;
    src: url("/lib/fontawesome/webfonts/fa-thin-100.woff2") format("woff2"), url("/lib/fontawesome/webfonts/fa-thin-100.ttf") format("truetype");
}

.fat,
.fa-thin {
    font-family: "Font Awesome 6 Pro";
    font-weight: 100;
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-display: block;
    font-weight: 400;
    src: url("/lib/fontawesome/webfonts/fa-brands-400.woff2") format("woff2"), url("/lib/fontawesome/webfonts/fa-brands-400.ttf") format("truetype");
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-display: block;
    font-weight: 900;
    src: url("/lib/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"), url("/lib/fontawesome/webfonts/fa-solid-900.ttf") format("truetype");
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-display: block;
    font-weight: 400;
    src: url("/lib/fontawesome/webfonts/fa-regular-400.woff2") format("woff2"), url("/lib/fontawesome/webfonts/fa-regular-400.ttf") format("truetype");
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-display: block;
    font-weight: 300;
    src: url("/lib/fontawesome/webfonts/fa-light-300.woff2") format("woff2"), url("/lib/fontawesome/webfonts/fa-light-300.ttf") format("truetype");
}

@font-face {
    font-family: "Font Awesome 5 Duotone";
    font-display: block;
    font-weight: 900;
    src: url("/lib/fontawesome/webfonts/fa-duotone-900.woff2") format("woff2"), url("/lib/fontawesome/webfonts/fa-duotone-900.ttf") format("truetype");
}

@font-face {
    font-family: "FontAwesome";
    font-display: block;
    src: url("/lib/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"), url("/lib/fontawesome/webfonts/fa-solid-900.ttf") format("truetype");
}

@font-face {
    font-family: "FontAwesome";
    font-display: block;
    src: url("/lib/fontawesome/webfonts/fa-brands-400.woff2") format("woff2"), url("/lib/fontawesome/webfonts/fa-brands-400.ttf") format("truetype");
}

@font-face {
    font-family: "FontAwesome";
    font-display: block;
    src: url("/lib/fontawesome/webfonts/fa-regular-400.woff2") format("woff2"), url("/lib/fontawesome/webfonts/fa-regular-400.ttf") format("truetype");
    unicode-range: U+F003, U+F006, U+F014, U+F016-F017, U+F01A-F01B, U+F01D, U+F022, U+F03E, U+F044, U+F046, U+F05C-F05D, U+F06E, U+F070, U+F087-F088, U+F08A, U+F094, U+F096-F097, U+F09D, U+F0A0, U+F0A2, U+F0A4-F0A7, U+F0C5, U+F0C7, U+F0E5-F0E6, U+F0EB, U+F0F6-F0F8, U+F10C, U+F114-F115, U+F118-F11A, U+F11C-F11D, U+F133, U+F147, U+F14E, U+F150-F152, U+F185-F186, U+F18E, U+F190-F192, U+F196, U+F1C1-F1C9, U+F1D9, U+F1DB, U+F1E3, U+F1EA, U+F1F7, U+F1F9, U+F20A, U+F247-F248, U+F24A, U+F24D, U+F255-F25B, U+F25D, U+F271-F274, U+F278, U+F27B, U+F28C, U+F28E, U+F29C, U+F2B5, U+F2B7, U+F2BA, U+F2BC, U+F2BE, U+F2C0-F2C1, U+F2C3, U+F2D0, U+F2D2, U+F2D4, U+F2DC;
}

@font-face {
    font-family: "FontAwesome";
    font-display: block;
    src: url("/lib/fontawesome/webfonts/fa-v4compatibility.woff2") format("woff2"), url("/lib/fontawesome/webfonts/fa-v4compatibility.ttf") format("truetype");
    unicode-range: U+F041, U+F047, U+F065-F066, U+F07D-F07E, U+F080, U+F08B, U+F08E, U+F090, U+F09A, U+F0AC, U+F0AE, U+F0B2, U+F0D0, U+F0D6, U+F0E4, U+F0EC, U+F10A-F10B, U+F123, U+F13E, U+F148-F149, U+F14C, U+F156, U+F15E, U+F160-F161, U+F163, U+F175-F178, U+F195, U+F1F8, U+F219, U+F250, U+F252, U+F27A;
}

.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands";
}

.fab{
    font-weight: 400;
}

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: 1.5;
}

ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    display: block;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
    padding: 0px;
}

@media (max-width : 992px) {
    h1 br,
    h2 br,
    h3 br,
    h4 br,
    h5 br,
    h6 br,
    p br {
        display: none;
    }
}

button {
    border: none;
}

/*========================================
       Accessibility Utilities Start Here
=========================================*/

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--theme-secondary-color);
    outline-offset: 2px;
}

/*========================================
       Accessibility Utilities End Here
=========================================*/

/*========================================
       Color Variable Start Here
=========================================*/

/* Root Level Gobal Css Variables */
:root{
    --dark-rgba-1: rgba(0, 0, 0, 0.8);
    --dark-rgba-2: rgba(0, 0, 0, 0.5);
    --dark-rgba-3: rgba(0, 0, 0, 0.3);
    --dark-rgba-4: rgba(0, 0, 0, 0.2);
    --dark-rgba-5: rgba(0, 0, 0, 0.1);

    --light-rgba-1: rgba(255, 255, 255, 0.8);
    --light-rgba-2: rgba(255, 255, 255, 0.5);
    --light-rgba-3: rgba(255, 255, 255, 0.3);
    --light-rgba-4: rgba(255, 255, 255, 0.2);
    --light-rgba-5: rgba(255, 255, 255, 0.1);
    
    --light: #ffffff;
    --dark: #000000;
    --theme-lightShade-bgcolor1: #f8f4f4;
    --theme-lightShade-bgcolor2: #f0f0f0;
    --theme-lightShade-bgcolor3: #e6e6e6;
    --theme-DarkShade-bgcolor1: #2a2a2a;
    --theme-DarkShade-bgcolor2: #282828;
    --theme-DarkShade-bgcolor3: #181818;
    --theme-primary-color: #b2d238;;
    --theme-secondary-color: #2a2a2a;
    --theme-tertiary-color: #008efb;

    --btn-font-size: 18px;
    --btn-line-height: 28px;
    --btn-font-family: "Assistant-Medium";
    --btn-border-radius: 60px;
    --btn-vertical-padding: 10px;
    --btn-horizontal-padding: 28px;

    --input-font-size: 18px;
    --input-line-height: 28px;
    --input-font-family: "Assistant-Regular";
    --input-border-radius: 60px;
    --input-vertical-padding: 10px;
    --input-horizontal-padding: 18px;
    --input-text-color: #000000;
    --input-text-focus-color: #000000;
    --input-text-placeholder-color: #b5b5b5;
    --input-primary-bg: #ffffff;
    --input-border-color: #d9d9d9;
    --input-border-focus-color: #b2d238;;

    --btn-primary-bg: #b2d238;;
    --btn-primary-text: #000000;
    --btn-primary-hover-bg: #2a2a2a;
    --btn-primary-hover-border: #b2d238;;
    --btn-primary-hover-text: #ffffff;

    --btn-secondary-bg: #2a2a2a;
    --btn-secondary-text: #ffffff;
    --btn-secondary-hover-bg: #b2d238;;
    --btn-secondary-hover-border: #2a2a2a;
    --btn-secondary-hover-text: #ffffff;

    --btn-dark-bg: #000000;
    --btn-dark-text: #ffffff;
    --btn-dark-hover-bg: #000000;
    --btn-dark-hover-border: #cdcdcd;
    --btn-dark-hover-text: #ffffff;

    --btn-light-bg: #ffffff;
    --btn-light-text: #000000;
    --btn-light-hover-bg: #000000;
    --btn-light-hover-border: #cdcdcd;
    --btn-light-hover-text: #ffffff;

    --theme-border-color: #cdcdcd;
    --box-border-color: #cdcdcd;
    --box-border-hover-color: #2a2a2a;
    
    --text-primary: #b2d238;;
    --text-secondary: #2a2a2a;
    --text-tertiary: #008efb;
}

/*========================================
       Color Variable End Here
=========================================*/

/*========================================
       Font Family Variable Start Here
=========================================*/

:root {
    --font-family-light: "Assistant-ExtraLight";
    --font-family-black: "Assistant-Bold";
    --font-family-medium: "Assistant-Medium";
    --font-family-regular: "Assistant-Regular";
    --font-family-extralight: "Assistant-ExtraLight";
    --font-family-extrabold: "Assistant-ExtraBold";
    --font-family-semibold: "Assistant-SemiBold";
    --font-family-thin: "Assistant-Light";
    --font-family-bold: "Assistant-Bold";
}

/*========================================
       Font Family Variable End Here
=========================================*/

:root {
    --box-shadow1: 0px 4px 27px -2px rgba(10, 67, 150, 0.15);
}

/*========================================
       Common Styles Start Here
=========================================*/

/*========================================
       Common Styles End Here
=========================================*/

:root{

    --headings-color: #000000;
    --headings-color-light: #ffffff;
    --headings-line-color: #000000;
    --text-color: #000000;
    --text-color-light: #ffffff;

    --h1-font-size: 36px;
    --h1-line-height: 44px;
    --h1-font-family: "Assistant-Bold";
    --h1-text-color: var(--headings-color);
    --h1-text-color-light: #ffffff;
    --h1-line-bg-color: var(--headings-line-color);
    --h1-line-light-bg-color: #ffffff;

    --h2-font-size: 30px;
    --h2-line-height: 38px;
    --h2-font-family: "Assistant-Bold";
    --h2-text-color: var(--headings-color);
    --h2-text-color-light: #ffffff;
    --h2-line-bg-color: var(--headings-line-color);
    --h2-line-light-bg-color: #ffffff;

    --h3-font-size: 24px;
    --h3-line-height: 32px;
    --h3-font-family: "Assistant-SemiBold";
    --h3-text-color: var(--headings-color);
    --h3-text-color-light: #ffffff;
    --h3-line-bg-color: var(--headings-line-color);

    --h4-font-size: 22px;
    --h4-line-height: 30px;
    --h4-font-family: "Assistant-Medium";
    --h4-text-color: var(--headings-color);
    --h4-line-bg-color: var(--headings-line-color);

    --h5-font-size: 18px;
    --h5-line-height: 28px;
    --h5-font-family: "Assistant-Medium";
    --h5-text-color: var(--headings-color);
    --h5-line-bg-color: var(--headings-line-color);

    --h6-font-size: 18px;
    --h6-line-height: 28px;
    --h6-font-family: "Assistant-Medium";
    --h6-text-color: var(--headings-color);
    --h6-line-bg-color: var(--headings-line-color);
}

h1,
h1 span{
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    font-family: var(--h1-font-family);
    color: var(--h1-text-color);
    margin-bottom: 8px;
    position: relative;
}

h2,
h2 span{
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    font-family: var(--h2-font-family);
    color: var(--h2-text-color);
    margin-bottom: 8px;
    position: relative;
}

h3{
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    font-family: var(--h3-font-family);
    color: var(--h3-text-color);
    width: auto !important;
}

h4{
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
    font-family: var(--h4-font-family);
    width: auto !important;
}

h5{
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height);
    font-family: var(--h5-font-family);
    color: var(--h5-text-color);
    width: auto !important;
}

h6{
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height);
    font-family: var(--h6-font-family);
    color: var(--h6-text-color);
    width: auto !important;
}

h1,h2{
    font-weight: normal;
}

h3,h4,h5,h6{
    margin-bottom: 2px;
    font-weight: normal;
}

p,
span,
strong,
label,
b,
ul,
li,
a,
summary,
details,
table,
tr,
td,
th {
    font-size: 18px;
    line-height: 28px;
    color: var(--text-color);
    font-family: var(--font-family-regular);
}

.product-details-template h1 {
    font-size: 36px;
    line-height: 40px;
    font-family: "Assistant-Bold";
    color: #181818;
    font-weight: normal;
}

.product-details-template h2 {
    font-size: 32px;
    line-height: 32px;
    font-family: "Assistant-Bold";
    color: #181818;
    font-weight: normal;
}

.product-details-template h3 {
    font-size: 24px;
    line-height: 28px;
    font-family: "Assistant-Bold";
    color: #181818;
    font-weight: normal;
}

.product-details-template h4 {
    font-size: 18px;
    line-height: 28px;
    font-family: "Assistant-Bold";
    color: #181818;
    font-weight: normal;
}

.h3-heading{
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    font-family: var(--h3-font-family);
    color: var(--h3-text-color);
    font-weight: normal;
}

.h4-heading{
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
    font-family: var(--h4-font-family);
    color: var(--h4-text-color);
    font-weight: normal;
}

.h5-heading{
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height);
    font-family: var(--h5-font-family);
    color: var(--h5-text-color);
    font-weight: normal;
}

.h6-heading{
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height);
    font-family: var(--h6-font-family);
    color: var(--h6-text-color);
    font-weight: normal;
}

.wrp-start p,
.wrp-right p,
.wrp-center p{
    position: relative;
    z-index: 1;
}

.wrp-center{
    width: 100%;
    max-width: 700px;
    text-align: center;
    margin: 0 auto 30px auto;
}

.wrp-right,
.wrp-start{
    text-align: start;
    margin: 0 0 30px 0;
}

.wrp-end,
.wrp-left{
    text-align: end;
    margin: 0 0 30px 0;
}

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

.text-start{
    text-align: start;
}

.text-end{
    text-align: end;
}

.wrp-w-full{
    max-width: 100% !important;
}

.wrp-w-xlg{
    max-width: 1024px !important;
}

.wrp-w-lg{
    max-width: 900px !important;
}

.wrp-w-md{
    max-width: 700px !important;
}

.wrp-w-sm{
    max-width: 500px !important;
}

.short-desc p:not(:last-child),
.short-desc ul li:not(:last-child),
.col-inr ul li:not(:last-child){
    margin-bottom: 8px;
}

.openingContent-sec .short-desc p span,
.openingContent-sec .short-desc p li,
.openingContent-sec .short-desc p b,
.openingContent-sec .short-desc p strong,
.openingContent-sec .short-desc p font,
.openingContent-sec .short-desc p *{
    color: var(--theme-secondary-color);
}

.openingContent-sec .inline-link,
section .inline-link{
    display: inline-block;
    color: var(--theme-primary-color) !important;
    background-color: transparent !important;
    text-decoration: none !important;
    transition: .3s;
}

.openingContent-sec .inline-link:hover,
section .inline-link:hover{
    color: var(--theme-secondary-color) !important;
    background-color: transparent !important;
}

#htmlContent .openingContent-sec .short-desc p span,
#htmlContent .openingContent-sec .short-desc p li,
#htmlContent .openingContent-sec .short-desc p b,
#htmlContent .openingContent-sec .short-desc p strong,
#htmlContent .openingContent-sec .short-desc p font,
#htmlContent .openingContent-sec .short-desc p *{
    display: inline-block;
}

.icon{
    font-size: 24px;
    color: var(--text-color);
}

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

.secondary-bg{
    background-color: var(--theme-secondary-color);
}

.tertiary-bg{
    background-color: var(--theme-tertiary-color);
}

.bg-transparent{
    background-color: transparent;
}

.heart-icon-otr.red-heart:before{
	display: none !important;
}

.heart-icon-otr.red-heart .red-heart:before{
	font-size: 18px !important;
	font-weight: 600 !important;
	content: "\f004" !important;
}

.theme-btn{
    /* Button heights Needs to be  */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: var(--btn-vertical-padding) var(--btn-horizontal-padding);
    font-size: var(--btn-font-size);
    line-height: var(--btn-line-height);
    border-radius: var(--btn-border-radius);
    background-color: var(--btn-primary-bg);
    font-family: var(--btn-font-family);
    color: var(--btn-primary-text);
    text-align: center;
    cursor: pointer;
    transition: .3s !important;
}

.theme-btn:hover{
    color: var(--btn-primary-hover-text);
    background-color: var(--btn-primary-hover-bg);
}

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

.theme-btn .icon{
	font-size: 16px;
	color: var(--btn-primary-text);
	transition: .3s !important;
}

.theme-btn .btn-text{
    transition: .3s !important;
}

.theme-btn .icon{
    color: var(--light);
    font-size: 18px;
    transition: .3s !important;
}

.theme-btn-outline{
    background-color: transparent;
    color: var(--theme-secondary-color);
    border: 2px solid var(--theme-secondary-color);
}

.theme-btn-outline .icon{
    color: var(--theme-secondary-color);
}

.theme-btn-outline:hover .icon{
    color: var(--light);
}

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

.theme-btn-primary:hover{
    background-color: var(--theme-secondary-color);
}

.cta-sec .action{
    display: flex;
    height: 100%;
}

.theme-input,
.form-control{
    /* Input height needs to be  */
    padding: var(--input-vertical-padding) var(--input-horizontal-padding);
    color: var(--input-text-color);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    border-radius: var(--input-border-radius);
    background-color: var(--input-primary-bg) !important;
    font-family: var(--input-font-family);
    border: 1px solid var(--input-border-color);
    text-align: start;
    text-align: right;
    outline: none;
    transition: .3s;
}

.theme-input:focus,
.form-control:focus{
    border: 1px solid var(--input-border-focus-color);
    color: var(--input-text-focus-color);
}

.theme-input:focus::placeholder,
.form-control:focus::placeholder{
    color: var(--input-text-focus-color);
    transition: .3s;
}

.theme-input::placeholder,
.form-control::placeholder{
    color: var(--input-text-placeholder-color);
    transition: .3s;
}

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

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

:root{
    --text-btn-color: #2a2a2a;
    --text-btn-line-bg-color: #b2d238;;
    --text-btn-hover-color: #b2d238;;
    --text-btn-font-size: 18px;
    --text-btn-line-height: 28px;
    --text-btn-font-family: "Assistant-Medium";
    --text-btn-border-radius: 12px;
    --text-btn--vertical-padding: 10px;
    --text-btn-horizontal-padding: 18px;
}

.text-btn{
    padding-bottom: 6px;
    display: inline-flex;
    gap: 12px;
    position: relative;
    font-size: var(--text-btn-font-size);
    line-height: var(text-btn-line-height);
    font-family: var(--text-btn-font-family);
    color: var(--text-btn-color);
    transition: .3s;
}

.text-btn .icon{
    color: var(--text-btn-color);
    font-size: 18px;
    position: relative;
    top: 2px;
    transition: .3s;
}

.text-btn:hover,
.text-btn:hover .icon{
    color: var(--text-btn-hover-color);
}

.text-btn:hover::after{
    width: 100%;
}

.text-btn::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--text-btn-line-bg-color);
    transition: .3s;
}

.title-start h1::after,
.title-start h2::after{
    left: inherit;
    right: 0;
    transform: translate(0);
    bottom: -8;
}

@media (max-width : 992px){
    .title-start h1::after,
    .title-start h2::after{
        bottom: -5px;
    }
}

.custom-ol,
.custom-ul{
    padding: 0;
    margin: 12px 0;
}

.custom-ol li:not(:last-child),
.custom-ul li:not(:last-child){
    margin-bottom: 8px;
}

.style-decimal-ul li,
.custom-ol li{
    list-style: decimal;
    list-style-position: inside;
}

.style-disc-ul li,
.custom-ul li{
    list-style: disc;
    list-style-position: inside;
}

.ul-hypen-style li:before {
    content: "-";
    margin-right: 10px;
}

/* Margin (All Sides) */
.m-0 { margin: 0 !important; }
.m-4 { margin: 4px !important; }
.m-6 { margin: 6px !important; }
.m-8 { margin: 8px !important; }
.m-12 { margin: 12px !important; }
.m-14 { margin: 14px !important; }
.m-16 { margin: 16px !important; }
.m-20 { margin: 18px !important; }
.m-30 { margin: 30px !important; }
.m-40 { margin: 40px !important; }
.m-50 { margin: 50px !important; }

/* Margin X (Left & Right) */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-4 { margin-left: 4px !important; margin-right: 4px !important; }
.mx-6 { margin-left: 6px !important; margin-right: 6px !important; }
.mx-8 { margin-left: 8px !important; margin-right: 8px !important; }
.mx-12 { margin-left: 12px !important; margin-right: 12px !important; }
.mx-14 { margin-left: 14px !important; margin-right: 14px !important; }
.mx-16 { margin-left: 16px !important; margin-right: 16px !important; }
.mx-20 { margin-left: 18px !important; margin-right: 18px !important; }
.mx-30 { margin-left: 30px !important; margin-right: 30px !important; }
.mx-40 { margin-left: 40px !important; margin-right: 40px !important; }
.mx-50 { margin-left: 50px !important; margin-right: 50px !important; }

/* Margin Y (Top & Bottom) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-4 { margin-top: 4px !important; margin-bottom: 4px !important; }
.my-6 { margin-top: 6px !important; margin-bottom: 6px !important; }
.my-8 { margin-top: 8px !important; margin-bottom: 8px !important; }
.my-12 { margin-top: 12px !important; margin-bottom: 12px !important; }
.my-14 { margin-top: 14px !important; margin-bottom: 14px !important; }
.my-16 { margin-top: 16px !important; margin-bottom: 16px !important; }
.my-20 { margin-top: 18px !important; margin-bottom: 18px !important; }
.my-30 { margin-top: 30px !important; margin-bottom: 30px !important; }
.my-40 { margin-top: 40px !important; margin-bottom: 40px !important; }
.my-50 { margin-top: 50px !important; margin-bottom: 50px !important; }

/* Margin T (Top) */
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: 4px !important; }
.mt-6 { margin-top: 6px !important; }
.mt-8 { margin-top: 8px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-14 { margin-top: 14px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-20 { margin-top: 18px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px !important; }

/* Margin B (Bottom) */
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: 4px !important; }
.mb-6 { margin-bottom: 6px !important; }
.mb-8 { margin-bottom: 8px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mb-14 { margin-bottom: 14px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-20 { margin-bottom: 18px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-50 { margin-bottom: 50px !important; }

/* Margin R (Right) */
.mr-0 { margin-right: 0 !important; }
.mr-4 { margin-right: 4px !important; }
.mr-6 { margin-right: 6px !important; }
.mr-8 { margin-right: 8px !important; }
.mr-12 { margin-right: 12px !important; }
.mr-14 { margin-right: 14px !important; }
.mr-16 { margin-right: 16px !important; }
.mr-20 { margin-right: 18px !important; }
.mr-30 { margin-right: 30px !important; }
.mr-40 { margin-right: 40px !important; }
.mr-50 { margin-right: 50px !important; }

/* Margin L (Left) */
.ml-0 { margin-left: 0 !important; }
.ml-4 { margin-left: 4px !important; }
.ml-6 { margin-left: 6px !important; }
.ml-8 { margin-left: 8px !important; }
.ml-12 { margin-left: 12px !important; }
.ml-14 { margin-left: 14px !important; }
.ml-16 { margin-left: 16px !important; }
.ml-20 { margin-left: 18px !important; }
.ml-30 { margin-left: 30px !important; }
.ml-40 { margin-left: 40px !important; }
.ml-50 { margin-left: 50px !important; }

/* Padding (All Sides) */
.p-0 { padding: 0 !important; }
.p-4 { padding: 4px !important; }
.p-6 { padding: 6px !important; }
.p-8 { padding: 8px !important; }
.p-12 { padding: 12px !important; }
.p-14 { padding: 14px !important; }
.p-16 { padding: 16px !important; }
.p-20 { padding: 18px !important; }
.p-30 { padding: 30px !important; }
.p-40 { padding: 40px !important; }
.p-50 { padding: 50px !important; }

/* Padding X (Left & Right) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-4 { padding-left: 4px !important; padding-right: 4px !important; }
.px-6 { padding-left: 6px !important; padding-right: 6px !important; }
.px-8 { padding-left: 8px !important; padding-right: 8px !important; }
.px-12 { padding-left: 12px !important; padding-right: 12px !important; }
.px-14 { padding-left: 14px !important; padding-right: 14px !important; }
.px-16 { padding-left: 16px !important; padding-right: 16px !important; }
.px-20 { padding-left: 18px !important; padding-right: 18px !important; }
.px-30 { padding-left: 30px !important; padding-right: 30px !important; }
.px-40 { padding-left: 40px !important; padding-right: 40px !important; }
.px-50 { padding-left: 50px !important; padding-right: 50px !important; }

/* Padding Y (Top & Bottom) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-4 { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-6 { padding-top: 6px !important; padding-bottom: 6px !important; }
.py-8 { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-12 { padding-top: 12px !important; padding-bottom: 12px !important; }
.py-14 { padding-top: 14px !important; padding-bottom: 14px !important; }
.py-16 { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-20 { padding-top: 18px !important; padding-bottom: 18px !important; }
.py-30 { padding-top: 30px !important; padding-bottom: 30px !important; }
.py-40 { padding-top: 40px !important; padding-bottom: 40px !important; }
.py-50 { padding-top: 50px !important; padding-bottom: 50px !important; }

/* Padding T (Top) */
.pt-0 { padding-top: 0 !important; }
.pt-4 { padding-top: 4px !important; }
.pt-6 { padding-top: 6px !important; }
.pt-8 { padding-top: 8px !important; }
.pt-12 { padding-top: 12px !important; }
.pt-14 { padding-top: 14px !important; }
.pt-16 { padding-top: 16px !important; }
.pt-20 { padding-top: 18px !important; }
.pt-30 { padding-top: 30px !important; }
.pt-40 { padding-top: 40px !important; }
.pt-50 { padding-top: 50px !important; }

/* Padding B (Bottom) */
.pb-0 { padding-bottom: 0 !important; }
.pb-4 { padding-bottom: 4px !important; }
.pb-6 { padding-bottom: 6px !important; }
.pb-8 { padding-bottom: 8px !important; }
.pb-12 { padding-bottom: 12px !important; }
.pb-14 { padding-bottom: 14px !important; }
.pb-16 { padding-bottom: 16px !important; }
.pb-20 { padding-bottom: 18px !important; }
.pb-30 { padding-bottom: 30px !important; }
.pb-40 { padding-bottom: 40px !important; }
.pb-50 { padding-bottom: 50px !important; }

/* Padding R (Right) */
.pr-0 { padding-right: 0 !important; }
.pr-4 { padding-right: 4px !important; }
.pr-6 { padding-right: 6px !important; }
.pr-8 { padding-right: 8px !important; }
.pr-12 { padding-right: 12px !important; }
.pr-14 { padding-right: 14px !important; }
.pr-16 { padding-right: 16px !important; }
.pr-20 { padding-right: 18px !important; }
.pr-30 { padding-right: 30px !important; }
.pr-40 { padding-right: 40px !important; }
.pr-50 { padding-right: 50px !important; }

/* Padding L (Left) */
.pl-0 { padding-left: 0 !important; }
.pl-4 { padding-left: 4px !important; }
.pl-6 { padding-left: 6px !important; }
.pl-8 { padding-left: 8px !important; }
.pl-12 { padding-left: 12px !important; }
.pl-14 { padding-left: 14px !important; }
.pl-16 { padding-left: 16px !important; }
.pl-20 { padding-left: 18px !important; }
.pl-30 { padding-left: 30px !important; }
.pl-40 { padding-left: 40px !important; }
.pl-50 { padding-left: 50px !important; }

.swiper-wrapper{
    box-sizing: border-box !important;
}

.scroll-hidden{
    overflow-y: hidden;
}

.style-decimal-ul li{
    list-style: decimal;
    list-style-position: inside;
}

.style-disc-ul li{
    list-style: disc;
    list-style-position: inside;
}

.style-circle-ul li{
    list-style: circle;
    list-style-position: inside;
}

.style-square-ul li{
    list-style: square;
    list-style-position: inside;
}

/*========================================
      Bootstarp Common Css Start Here
=========================================*/

.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    margin-left: auto;
    margin-right: auto
}

@media (min-width: 576px) {
    .container,.container-sm {
        max-width:540px
    }
}

@media (min-width: 768px) {
    .container,.container-md,.container-sm {
        max-width:718px
    }
}

@media (min-width: 992px) {
    .container,.container-lg,.container-md,.container-sm {
        max-width:960px
    }
}

@media (min-width: 1200px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl {
        max-width:1140px
    }
}

@media (min-width: 1400px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
        max-width:1318px
    }
}

@media (min-width: 992px){
    .container{
        max-width: 1410px;
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 12px;
}

@media (max-width : 992px){
    .row{
        margin: 0 -12px;
    }
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%
}

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%
}

.col-3 {
    flex: 0 0 auto;
    width: 25%
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%
}

.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%
}

.col-6 {
    flex: 0 0 auto;
    width: 50%
}

.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%
}

.col-9 {
    flex: 0 0 auto;
    width: 75%
}

.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%
}

.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%
}

.col-12 {
    flex: 0 0 auto;
    width: 100%
}

@media (max-width: 576px) {
    .col-xs-1 {
        flex: 0 0 auto;
        width: 8.33333333% !important;
    }

    .col-xs-2 {
        flex: 0 0 auto;
        width: 16.66666667% !important;
    }

    .col-xs-3 {
        flex: 0 0 auto;
        width: 25% !important;
    }

    .col-xs-4 {
        flex: 0 0 auto;
        width: 33.33333333% !important;
    }

    .col-xs-5 {
        flex: 0 0 auto;
        width: 41.66666667% !important;
    }

    .col-xs-6 {
        flex: 0 0 auto;
        width: 50% !important;
    }

    .col-xs-7 {
        flex: 0 0 auto;
        width: 58.33333333% !important;
    }

    .col-xs-8 {
        flex: 0 0 auto;
        width: 66.66666667% !important;
    }

    .col-xs-9 {
        flex: 0 0 auto;
        width: 75% !important;
    }

    .col-xs-10 {
        flex: 0 0 auto;
        width: 83.33333333% !important;
    }

    .col-xs-11 {
        flex: 0 0 auto;
        width: 91.66666667% !important;
    }

    .col-xs-12 {
        flex: 0 0 auto;
        width: 100% !important;
    }
}


@media (min-width: 576px){
    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%
    }
}

@media (min-width: 768px) {
    .col-md-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-md-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-md-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-md-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-md-12 {
        flex: 0 0 auto;
        width: 100%
    }
}

@media (min-width: 992px) {
    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%
    }
}

@media (min-width: 1200px) {
    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%
    }
}

.img-fluid{
    width: 100%;
    max-width: 100%;
    height: auto;
}

i{
  font-style: normal;
}

body.overflow-hidden {
    overflow: hidden;
}  

/*========================================
      Bootstarp Common Css End Here
=========================================*/

/*========================================
       Mobile Nav Css Start Here
=========================================*/

@media (min-width : 992px){
    .mobile-nav{
        display: none;
    }
}

.mob-header{
    height: 66px !important;
    padding: 15px 0;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

.mob-header .desk-menu .box-menu{
	display: flex;
    align-items: center;
    gap: 12px;
}

.mob-header .container .row{
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mob-header .container .logo-otr,
.mob-header .container .logo-inr,
.mob-header .container .logo-site-inr{
    display: flex;
	position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
}
 
.mob-header .container .logo-site-inr{
    display: flex;
}

.mob-header .container .logo-site-inr .logo-img{
    width: 140px;
    height: 50px;
    object-fit: contain;
}

.mob-header .container .icon-main{
    position: relative;
}

.mob-header .container .icons-ul{
    display: flex;
    align-items: center;
    gap: 12px;
}

.mob-header .container .icons-li{
	position: relative;
}

.mob-header .container .icons-li .icons-link{
	position: relative;
	border: none;
    display: flex;
}
	

.mob-header .container .icons-ul .icon{
    font-size: 26px;
    color: var(--theme-primary-color);
}



.mob-header .hamburger-menu{
    width: 24px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center;
	overflow: hidden;
}

/*========================================
       Mobile Nav Css End Here
=========================================*/

/*========================================
        Header Css Start Here
=========================================*/

.header-main{
    position: relative;
    background-color: var(--light);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    z-index: 1090;
    transition: .3s;
}

/*=============== Search Bar Styles Start Here ===================== */

.search-bar{
    position: relative;
    padding: 4px 0;
}

.search-bar .wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 0;
}

/* Logo styles Start Here */

.search-bar .wrapper .logo-main{
    display: flex;
}

.search-bar .wrapper .logo-otr{
    display: flex;
    position: relative;
}

.search-bar .wrapper .logo-img{
    width: 185px;
    height: auto;
    object-fit: contain;
    position: relative;
    top: 3px;
}

/* Logo styles End Here */

/* Search Input styles Start Here */

.search-bar .wrapper .search-input-main{
    position: relative;
    max-width: 600px;
    width: 100%;
}

.search-bar .wrapper .search-form{
    position: relative;
    width: 100%;
    flex: 1;
    top: 0px;
}

.search-bar .wrapper .theme-input{
    width: 100%;
    padding-left: 90px;
}   

.search-bar .wrapper .search-button{
    position: absolute;
    left: 0;
    top: 0;
    width: 74px;
    height: 49px;
    border-radius: 26px 0 0 26px;
    background-color: var(--theme-primary-color);
    cursor: pointer;
    transition: .3s;
}

.search-bar .wrapper .search-button:hover{
    background-color: var(--theme-secondary-color);
}

.search-bar .wrapper .search-button:hover .icon{
    color: var(--light);
}

.search-bar .wrapper .search-button .icon{
    font-size: 24px;
    color: var(--dark);
    transition: .3s;
}

/* Search Input styles End Here */ 

/* Shop Icons styles Start Here */

.header-main .shop-icons{
    position: relative;
}

.header-main .shop-icons-ul{
    display: flex;
    align-items: center;
    gap: 0 24px;
}

.header-main .shop-icons-ul .icons-li{
    position: relative;
}

.header-main .shop-icons-ul .icons-a{
    position: relative;
    transition: .3s;
} 

.header-main .shop-icons-ul .icons-a:hover .icon{
    color: var(--theme-primary-color);
    transform: scale(1.1);
}

.header-main .shop-icons-ul .icons-a .icon{
    font-size: 28px;
    color: var(--theme-secondary-color);
    transition: .3s;
}

.header-main .shop-icons-ul .icons-a .items-count,
.items-count{
    position: absolute;
    right: -12px;
    top: -6px;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background-color: var(--theme-tertiary-color);
    color: var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: 0.3s;
}

/* Shop Icons styles End Here */

/*=============== Search Bar Styles End Here ===================== */

/*=============== Menu Bar Styles End Here ===================== */

#htmlContent .header-main{
    position: relative;
}

.header-main .menu-main{
    position: initial;
    border-top: 1px solid var(--theme-border-color);
}

.header-main .sticky-nav{
    position: fixed;
    top: -50px;
    left: 0;
    width: 100%;
    background-color: var(--light);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    z-index: 1090;
    transition: .3s;
}

.header-main .sticky-nav-active{
    top: 0;
}

.header-main .menu-main .wrapper{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-main .menu-main .menu-ul{
    display: flex;
    align-items: center;
    gap: 12px 24px;
}

.header-main .menu-main .menu-li{
    position: relative;
}

.header-main .menu-main .menu-link{
    line-height: 48px;
    font-family: var(--font-family-regular);
    transition: .3s;
}

.header-main .menu-main .menu-link:hover,
.header-main .menu-li:hover > .menu-link,
.header-main .menu-li:focus-within > .menu-link,
.header-main .menu-li:has(.vertical-menu-ul:hover) > .menu-link{
    color: var(--theme-secondary-color);
}

.header-main .menu-main .menu-link:hover::after,
.header-main .menu-li:focus-within > .menu-link::after,
.header-main .menu-li:has(.vertical-menu-ul .vertical-menu-link:hover) > .menu-link::after,
.header-main .menu-li:has(.mega-menu-inr .mega-menu-heading:hover) > .menu-link::after,
.header-main .menu-li:has(.mega-menu-inr .mega-menu-list-link:hover) > .menu-link::after{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

.header-main .vertical-menu-li:has(.subdrop-ul:hover) > .vertical-menu-link,
.header-main .vertical-menu-li:focus-within > .vertical-menu-link,
.header-main .vertical-menu-li:has(.subdrop-ul .vertical-menu-link:hover) > .vertical-menu-link {
    color: var(--dark);
    background-color: var(--theme-primary-color);
}

.header-main .vertical-menu-li:has(.subdrop-ul .vertical-menu-link:hover) > .vertical-menu-link .icon{
    color: var(--dark);
}

.header-main .menu-main .menu-link::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) scale(0);
    background-color: var(--theme-secondary-color);
    transition: .3s;
}

/* Header Buttons Css STart here */

.header-main .action{
    display: flex;
}

/* Header Buttons Css End here */

/* Social Icons Css Start Here */

.header-main .social-icons-main{
    position: relative;;
}

.header-main .social-icons-ul{
    display: flex;
    align-items: center;
    gap: 0 18px;
}
.header-main .social-icons-li{
    position: relative;
}
.header-main .social-icons-link{
    position: relative;
}
.header-main .social-icons-link .icon{
    font-size: 28px;
    color: var(--theme-primary-color);
    transition: .3s;
}
.header-main .social-icons-link:hover .icon{
    color: var(--theme-secondary-color);
}

/* Social Icons Css End Here */

/* Vertical Menu Css Start Here */

.header-main .menu-main .menu-li:hover .vertical-menu-ul,
.header-main .menu-main .menu-li:focus-within .vertical-menu-ul{
    top: 48px;
    opacity: 1;
    visibility: visible;
}

.header-main-active .menu-main .menu-li:hover .vertical-menu-ul,
.header-main-active .menu-main .menu-li:focus-within .vertical-menu-ul{
    top: 48px;
}

.header-main .menu-main .vertical-menu-ul{
    position: absolute;
    top: 110px;
    right: -24px;
    padding: 0;
    background-color: #fff;
    min-width: 300px;
    z-index: 100;
    opacity: 0;
	box-shadow: var(--box-shadow1);
    visibility: hidden;
    transition: .3s;
}

.header-main .menu-main .vertical-menu-li{
    position: relative;
}

.header-main .menu-main .vertical-menu-li:not(:last-child){
	border-bottom: 1px solid #c9c9c9;
}

.header-main .menu-main .vertical-menu-link:hover{
    color: var(--dark);
    background-color: var(--theme-primary-color);
}

.header-main .menu-main .vertical-menu-link:hover .icon{
    color: var(--dark);
}

.header-main .menu-main .vertical-menu-link{
    padding: 10px 18px 10px 32px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: .3s;
}

.header-main .menu-main .vertical-menu-link .icon{
    font-size: 18px;
    position: relative;
    top: 2px;
    transition: .3s;
}

.header-main .menu-main .subdrop-ul{
    position: absolute;
    right: 100%;
    top: 18px;
    padding: 0;
	min-width: 300px;
    background-color: #fff;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.header-main .vertical-menu-li:hover .subdrop-ul,
.header-main .vertical-menu-li:focus-within .subdrop-ul{
    top: 0;
    opacity: 1;
    visibility: visible;
}

/* Megamenu Css Start Here */

.header-main .menu-main .mega-menu-otr{
    position: initial;
}

.header-main .menu-main .mega-menu-otr .menu-link{
    position: relative;
}

.header-main .mega-menu-otr:hover .mega-menu-inr,
.header-main .mega-menu-otr:focus-within .mega-menu-inr,
.header-main:has(.logo-otr.active:hover) .mega-menu-inr{
    top: 48px;
    opacity: 1;
    visibility: visible;
}

.header-main-active .mega-menu-otr:hover .mega-menu-inr,
.header-main-active .mega-menu-otr:focus-within .mega-menu-inr{
    top: 60px;
}

.header-main .mega-menu-inr{
    width: 100%;
    position: absolute;
    top: 110px;
    left: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    background-color: var(--light);
    box-shadow: var(--box-shadow1);
    transition: .3s;
}

.header-main .mega-menu-inr .container{
	padding: 0;
}

.header-main .mega-menu-inr .row{
    row-gap: 24px;
	margin: 0;
}

.header-main .mega-menu-inr .mega-menu-col:not(:last-child){
    border-left: 1px solid var(--theme-border-color);
}

.header-main .mega-menu-inr .mega-menu-heading{
    display: block;
    padding: 6px 0;
    border-bottom: 2px solid var(--theme-secondary-color);
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height);
    font-family: var(--font-family-semibold);
    color: var(--theme-primary-color);
    transition: .3s;
}

.header-main .mega-menu-inr .mega-menu-heading:hover{
    color: var(--theme-secondary-color);
}

.header-main .mega-menu-inr .mega-menu-list{
	margin: 12px 0;
}

.header-main .mega-menu-inr .mega-menu-list-li:not(:last-child){
    margin-bottom: 0;
}

.header-main .mega-menu-inr .mega-menu-list-link{
    padding: 2px 0;
    font-family: var(--font-family-regular);
    transition: .3s;
}

.header-main .mega-menu-inr .mega-menu-list-link:hover{
    color: var(--theme-primary-color);
}

/* Sticky Nav Css Start Here */

.header-main-active .logo-img{
    width: 100px;
}

.header-main-active .menu-main .menu-link{
    line-height: 60px;
}

.header-main-active .menu-main .menu-link::after{
    bottom: 0;
    height: 3px;
}

/* Header menuBar Css End Here */

/*=============== Menu Bar Styles End Here ===================== */

@media (max-width : 1400px){
    .header-main .menu-main .menu-ul{
        gap: 12px 18px;
    }
}

@media (max-width: 1200px){
    .header-main .menu-main .menu-ul{
        gap: 12px;
    }
    .header-main .menu-main .menu-link{
        font-size: 16px;
    }
}

@media (max-width : 992px){
    .header-main{
        display: none;
    }
}

.accessbility{
    display: none !important;
}

/*========================================
        Header Css End Here
=========================================*/

/*========================================
        Footer Css Start Here
=========================================*/

:root{
    --footer-bg-color: #1f1d1d;
    --footer-text-color: #ffffff;
    --footer-hover-color: #b2d238;

    --footer-social-icons-bg-color: #ffffff;
    --footer-social-icon-color: #2a2a2a;
    --footer-social-icons-bg-hover-color: #2a2a2a;
    --footer-social-icon-hover-color: #2a2a2a;

    --footer-heading-font-size: 26px;

    --footer-namebar-bg-color: #244d68;
    --footer-border-color: #E7EFFA;
}

.footer-main{
    position: relative;
    background-color: var(--footer-bg-color);
}

@media (min-width: 992px){
    .footer-main .quick-links{
        width: 22.2222%;
    }
    .footer-main .our-products{
        width: 22.2222%;
    }
    .footer-main .contact-info{
        width: 22.2222%;
    }
}

.footer-main *{
    color: var(--footer-text-color);
}

.footer-main .row{
    gap: 30px 0;
    margin: 0;
    padding: 40px 0 30px 0;
}

.footer-main .row .row{
    padding: 0;
}

.footer-main h1,
.footer-main h2,
.footer-main h3{
    margin-bottom: 10px;
    color: var(--footer-text-color);
    font-size: var(--footer-heading-font-size);
}

.footer-main h1::after,
.footer-main h1::before,
.footer-main h2::after,
.footer-main h2::before,
.footer-main h3::after,
.footer-main h3::before{
    display: none;
}

.footer-main .icons-ul{
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.footer-main .icons-ul .icons-li{
    position: relative;
}

.footer-main .icons-ul .icons-link{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: var(--light);
    position: relative;
    transition: .3s;
}

.footer-main .icons-ul .icons-link:hover{
    background-color: var(--footer-hover-color);
}

.footer-main .icons-ul .icons-link:hover .icon{
    color: var(--footer-social-icon-hover-color);
}

.footer-main .icons-ul .icon{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: var(--footer-social-icon-color);
    transition: .3s;
} 

.footer-main .col-about-inr{
    position: relative;
    padding-left: 44px;
}

.footer-main .col-about-inr .logo-img{
    width: 200px;
    height: auto;
    object-fit: contain;
}

.footer-main .col-about-inr .short-desc{
    margin: 6px 0 22px 0;
}

/* Footer Social Icons Css Strat Here */

.footer-main .social-logo-wrp{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 24px;
}

.footer-main .socail-icons-main{
    position: relative;
}

.footer-main .socail-icons-main .social-icons-ul{
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-main .socail-icons-main .social-icons-link{
    position: relative;
}

.footer-main .socail-icons-main .social-icons-link:hover .icon{
    color: var(--footer-hover-color);
}

.footer-main .socail-icons-main .icon{
    font-size: 36px;
    color: var(--footer-text-color);
    transition: .3s;
}

/* Footer Social Icons Css End Here */

/* Footer Contact Details Css Strat Here */

.footer-main .info-details-main{
    position: relative;
}

.footer-main .info-details-main h3{
    font-size: 18px;
    margin: 0;
}

.footer-main .info-details-main .person-name{
    font-size: 18px;
    margin: 0 0 10px 0;
    color: var(--dark);
}

.footer-main .info-details-main .details-person{
    padding: 10px 0;
}

.footer-main .info-details-main .details-person1{
    padding-top: 0;
}

.footer-main .info-details-main .details-person:not(:last-child){
    border-bottom: 1px solid var(--theme-border-color);
}

.footer-main .info-details-main .info-ul{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-main .info-details-main .info-link{
    display: inline-flex;
    gap: 12px;
}

.footer-main .info-details-main .info-link:hover .info-text,
.footer-main .info-details-main .info-link:hover .icon{
    color: var(--footer-hover-color);
}

.footer-main .info-details-main .info-text{
    line-height: 28px;
    transition: .3s;
}

.footer-main .info-details-main .icon{
    font-size: 22px;
    line-height: inherit;
    width: 24px;
    text-align: center;
    transition: .3s;
}

/* Footer Contact Details Css End Here */

/* Footer menu Column Css Start Here */

.footer-main .menu-ul{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-main .menu-ul .menu-li{
    margin-bottom: 0;
}

.footer-main .menu-link{
    display: inline-flex;
	align-items: flex-start;
    gap: 8px;
    font-size: 18px;
    transition: .3s;
}

.footer-main .menu-link .caret-icon,
.footer-main .menu-link .icon{
    position: relative;
    top: 7px;
    font-size: 16px;
    transition: .3s;
}

.footer-main .menu-link:hover,
.footer-main .menu-link:hover .caret-icon{
    color: var(--footer-hover-color);
}

.footer-main .menu-link .icon{
    font-size: 14px;
    transition: .3s;
}

/* Footer menu Column Css End Here */

/* Footer Bottom Part Css Start Here */

.footer-bottom .all-rights-text{
    padding: 10px 0;
    text-align: center;
    border-top: 1px solid #343434;
}

.footer-bottom .copyrights-text{
    padding: 10px 0;
    text-align: center;
    background-color: var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-primary-color);
}

.footer-bottom .copyrights-text a{
    display: inline;
    color: var(--theme-primary-color);
    transition: .3s;
}

.footer-bottom .copyrights-text a:hover{
    color: var(--theme-secondary-color);
}

.footer-bottom .slasi-logo-img{
    width: 18px;
    height: 18px;
    object-fit: contain;
    position: relative;
    top: 3px;
    margin-right: 8px;
}

/* Footer Bottom Part Css End Here */

/* Footer Copryright Css End Here */

@media (max-width : 992px){
    .footer-main .col-about-inr{
        padding-right: 0;
    }
}

.footer-center {
    padding:  10px 0;
    background-color:  var(--dark);
    border-top:  1px solid #4a4a4a;
}
.footer-center p {
    color:  var(--light);
    text-align:  center;
}
.footer-center p .link {
    color:  var(--light);
    display:  inline-block;
    transition:  .3s;
}
.footer-center p .link:hover {
    color:  var(--theme-color);
}

.copyright-main {
    padding: 9.5px 0;
    background-color: var(--light);
    border-top: 1px solid var(--border-color3);
}
.copyright-main .container {
    max-width: 1440px;
}
.copyright-main .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}
.copyright-main .pay-ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.copyright-main .pay-ul .pay-a {
    display: flex;
    transition: 0.3s;
}
.copyright-main .pay-img {
    width: 60px;
    height: 30px;
    object-fit: contain;
    border: 1px solid var(--theme-border-color);
    box-shadow: var(--box-shadow1);
    padding: 4px 6px;
    transition: 0.3s;
}
.copyright-main .pay-img:hover {
    border: 1px solid var(--theme-border-color);
}
.copyright-main .copy .slasi-logo {
    display: inline-block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    position: relative;
}
.copyright-main .copy .link {
    display: inline-block;
    color: var(--dark);
    transition: 0.3s;
}
.copyright-main .copy:hover .link {
    color: var(--theme-secondary-color);
} 


@media (max-width: 992px) {
    .footer-main .col-otr:nth-child(2) {
        padding: 0 40px 0 0;
    }
}
@media (max-width: 786px) {
    .footer-main .logo-img {
        width: 120px;
        height: auto;
    }
    .copyright-main .wrapper {
        flex-direction: column;
        justify-content: center;
        gap: 10px 0;
    }
    .copyright-main .pay-ul {
        justify-content: center;
    }
    .footer-main .info-ul {
        gap: 30px 0;
    }
    .footer-main .col-otr:nth-child(2) {
        padding: 0 12px;
    }
}

/*========================================
        Footer Css End Here
=========================================*/

.floating-btn-main{
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 101010;
}

.floating-btn-main ul{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.floating-btn-main ul a{
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--theme-secondary-color);
    background-color: var(--footer-bg-color);
    border-radius: 8px;
    padding: 8px 12px;
    transition: .3s;
}

.floating-btn-main ul a .text{
    color: var(--theme-primary-color);
    transition: .3s;
}

.floating-btn-main ul a .icon{
    font-size: 22px;
    line-height: normal;
   color: var(--theme-primary-color);
    transition: .3s;
}

.floating-btn-main ul a:hover{
    background-color: var(--theme-secondary-color);
}

.floating-btn-main ul a:hover *{
    color: var(--light);
}



/*========================================
        Footer Css End Here
=========================================*/



/*========================================
        Footer Css End Here
=========================================*/

/* Header Footer Icons Css Start Here */

.fa-envelope::before {
    content: "\f0e0";
}

.fa-mobile-android:before, 
.fa-mobile-phone:before, 
.fa-mobile:before {
    content: "\f3ce";
}

.fa-phone::before {
    content: "\f095";
}

.fa-whatsapp:before {
    content: "\f232";
}

.fa-facebook:before {
    content: "\f09a";
}

.fa-linkedin:before {
    content: "\f08c";
}

.fa-instagram:before {
    content: "\f16d";
}

.fa-wheelchair::before {
    content: "\f193";
}

.fa-bars::before {
    content: "\f0c9";
}

.fa-text-size::before {
    content: "\f894";
}

.fa-circle-half-stroke::before {
    content: "\f042";
}

.fa-circle-half-stroke::before {
    content: "\f042";
}

.fa-image::before {
    content: "\f03e";
}

.fa-underline::before {
    content: "\f0cd";
}

.fa-eye-slash::before {
    content: "\f070";
}

.fa-font::before {
    content: "\f031";
}

.fa-arrow-rotate-left::before {
    content: "\f0e2";
}

.fa-circle-xmark::before {
    content: "\f057";
}

.fa-circle-info::before {
    content: "\f05a";
}

.fa-circle-info::before {
    content: "\f05a";
}

.fa-download::before {
    content: "\f019";
}

.fa-phone-flip::before {
    content: "\f879";
}

.fa-angle-left::before {
    content: "\f104";
}

.fa-youtube::before {
    content: "\f167";
}

.fa-pinterest::before {
    content: "\f0d2";
}

.fa-play-circle::before {
    content: "\f144";
}

.fa-close::before, .fa-multiply::before, .fa-remove::before, .fa-times::before, .fa-xmark::before {
    content: "\f00d";
}

.fa-waze::before {
    content: "\f83f";
}

.fa-user::before{
    content: "\f007";
}

.fa-linkedin-in:before {
    content: "\f0e1";
}

.fa-angle-right:before {
    content: "\f105";
}

.fa-angle-left:before {
    content: "\f104";
}

.fa-location-dot:before, 
.fa-map-marker-alt:before {
    content: "\f3c5";
}

.fa-arrow-right:before {
    content: "\f061";
}

.fa-arrows-h:before, 
.fa-arrows-left-right:before {
    content: "\f07e";
}

.fa-chevron-right:before {
    content: "\f054";
}

.fa-chevron-left:before {
    content: "\f053";
}

/* Header Footer Icons Css End Here */

/*========================================
       Banner Css Start Here
=========================================*/

.inner-banner-sec{
    position: relative;
    overflow: hidden;
}

.inner-banner-sec .bg-img{
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.inner-banner-sec picture{
    display: flex;
}

.inner-banner-sec picture .bg-img,
.inner-banner-sec .bg-img,
.inner-banner-sec img{
   height: 220px !important;
}

.inner-banner-sec .iframe-video-otr{
    width: 100%;
    height: 220px;
    position: relative;
    overflow: hidden;
}

.inner-banner-sec [data-component-video]{
    width: 100%;
    height: 220px;
    position: relative;
    overflow: hidden;
}

.inner-banner-sec iframe,
#htmlContent .inner-banner-sec iframe{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500% !important;
    height: 500% !important;
}

.inner-banner-sec .wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    width: 100%;
    text-align: center;
    transform: translate(-50%, -50%);
    z-index: 20;
}

#htmlContent .inner-banner-sec .wrapper{
    top: 50%;
}

#htmlContent .inner-banner-sec .wrapper *{
    margin: 0;
    padding: 0;
}

.inner-banner-sec h1{
    font-family: var(--font-family-semibold);
    color: var(--h1-text-color-light);
}

.inner-banner-sec h1::after,
.inner-banner-sec h1::before{
    background-color: var(--h1-line-light-bg-color);
}

.inner-banner-sec p{
    color: var(--text-color-light);
    margin: 0;
}

.inner-banner-sec .action{
    display: flex;
    justify-content: flex-end;
}

.inner-banner-sec .action .theme-btn{
    max-width: 150px;
    width: 100%;
}

@media (max-width : 992px){
    .inner-banner-sec{
        margin-top: 60px;
    }
    .inner-banner-sec .wrapper{
        top: 50%;
    }
}

/*========================================
       Banner Css End Here
=========================================*/

/*========================================
       Opening Section Start Here
=========================================*/

.opening-sec{
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #cfcfcf;
    margin-bottom: 30px;
}

.opening-sec .opening-img{
    height: 300px;
    border-bottom: 1px solid #cfcfcf;
}

.opening-sec .container{
    position: relative;
}

.opening-sec .container h1{
    position: absolute;
    top: -300px;
    right: 0;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
}

.breadcrumb-main{
    border-top: 1px solid #cfcfcf;
    border-bottom: 1px solid #cfcfcf;
	overflow: hidden;
}

.breadcrumb-main .container{
    max-width: 1410px;
}

.breadcrumb{
    padding: 2px 0;
    display: flex;
    align-items: center;
    margin: 0;
    gap: 16px;
}

.breadcrumb .breadcrumb-item{
    display: flex;
    position: relative;
}

.breadcrumb .breadcrumb-item:first-child::after{
    display: none;
}

.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a{
    color: var(--theme-primary-color);
}

.breadcrumb .active,
.breadcrumb .breadcrumb-item .active{
    position: relative;
    color: var(--theme-primary-color) !important;
}

.breadcrumb .breadcrumb-item::before,
.breadcrumb .active::before{
    display: none;
}

.breadcrumb .breadcrumb-item::after,
.breadcrumb .active::after{
    content: "/";
    position: absolute;
    right: -12px;
    top: 0;
    font-size: var(--font-size-18px);
    line-height: var(--line-heights-18px);
    font-family: var(--font-family-regular);
    color: #666666;
}

.breadcrumb-main .breadcrumb li,
.breadcrumb li{
    position: relative;
}

.breadcrumb-main .breadcrumb li::before,
.breadcrumb li::before{
    color: var(--theme-text-color5);
    position: absolute;
    right: -12px;
    top: 0;
}

.openingContent-sec{
    position: relative;
    margin: 30px 0;
}

@media (max-width : 992px){
    .breadcrumb{
        flex-wrap: wrap;
        gap: 4px 14px;
        padding: 4px 0;
    }
    /* .breadcrumb .breadcrumb-item, 
    .breadcrumb .breadcrumb-item a{
        font-size: 14px;
        line-height: 18px;
    } */
    .breadcrumb .breadcrumb-item::after, 
    .breadcrumb .active::after{
        /* font-size: 14px;
        line-height: 18px; */
        right: -10px;
    }
}

@media (max-width : 576px){
    .inner-banner-sec picture .bg-img, 
    .inner-banner-sec .bg-img{
        height: 150px !important;
    }
}

@media (max-width : 992px){
    .inner-banner-sec,
    .only-breadcrumb-main{
        margin-top: 60px;
    }
}

/*========================================
       Opening Section End Here
=========================================*/

#htmlContent .short-desc,
#htmlContent .col-inr ul{
    /* border: 2px solid #999999; */
    padding: 12px;
}

.account-login{
    margin: 118px 0 60px 0;
}

.account-login h3{
    text-align: center;
    margin-bottom: 24px;
}

.account-login .form-group .input-otr{
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

.account-login .form-group label{
    padding: 0 16px 10px 0;
}

.account-login .form-group:nth-child(3) div{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}

.account-login .form-group:nth-child(3) div .theme-btn{
    max-width: 300px !important;
    width: 100% !important;
}

.all-projects-sec .content-div h2,
.all-projects-sec .content-div h3{
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
}

/* Page editor Css Start Here */

#htmlContent h1,
#htmlContent h2,
#htmlContent h3,
#htmlContent h4,
#htmlContent h5,
#htmlContent h6,
#htmlContent .h1-heading,
#htmlContent .h2-heading,
#htmlContent .h3-heading,
#htmlContent .h4-heading,
#htmlContent .h5-heading,
#htmlContent .h6-heading,
#htmlContent p,
#htmlContent li,
#htmlContent ul,
#htmlContent strong,
#htmlContent span,
#htmlContent b,
#htmlContent font,
#htmlContent article,
#htmlContent form,
#htmlContent .action{
    padding: 8px;
    margin: 8px;
    /* border: 2px solid #999999; */
}

#htmlContent div{
    margin-top: 0;
    margin-bottom: 0;
}

#htmlContent section{
    margin: 10px !important;
}

#htmlContent img{
    margin: 10px !important;
    padding: 10px !important;
    border: 2px solid #e2e2e2;
}

#htmlContent .textarea{
    background-color: #fff;
}

#htmlContent .products-layout-v1 .bg-image1,
#htmlContent .products-layout-v1 .bg-image2,
#htmlContent .contact-layout-v1 .bg-image1,
#htmlContent .contact-layout-v1 .bg-image2,
#htmlContent .products-layout-v4 .bg-image2,
#htmlContent .products-layout-v4 .bg-image1{
    width: 20%;
}

/* Page editor Css End Here */

.gallerySec-main-lay1 h1, 
.gallerySec-main-lay1 h2 {
    margin: inherit !important;
}

.gallerySec-main-lay1 .show-popup{
    z-index: 1120 !important;
}

.gallerySec-main .img-show img{
    object-fit: contain !important;
}

#htmlContent .icon-div{
    border: 2px solid #999;
}

.gallerySec-main-lay1 .row1{
    column-gap: 8px !important;
}

.gallerySec-main-lay1 .row1 .col-inr{
    display: flex !important;
}

.gallerySec-main-lay1 .container .row1 .box-link-otr{
    margin-bottom: 8px !important;
}

.product-details-v1 .wrp-start p{
    margin-bottom: 8px;
}

.product-details-v1 .wrp-start p:last-child{
    margin: 0;
}

.product-details-v1 .wrp-start .custom-ul,
.product-details-v1 .wrp-start .custom-ol{
    margin: 8px 0;
}

#confirmModel{
    display: none;
	z-index: 9999999;
}
#confirmModel.modal-backdrop{
	z-index: 999999;
}
@media (max-width : 992px){
   .floating-btn-main{
      display: none;
   }
}



:root{
    --whatsapp-bg-color: #25d366;
    --whatsapp-icon-color: #ffffff;
}

.contact-section-v2 .whatsapp-btn-otr,
.whatsapp-btn-otr{
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 200000;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px 0 30px 0;
    display: none;
}

.contact-section-v2 .whatsapp-btn,
.whatsapp-btn{
    width: 62px;
    height: 62px;
    border-radius: 100%;
    background-color: var(--whatsapp-bg-color);
    position: relative;
    transition: .3s;
}

.contact-section-v2 .whatsapp-btn .icon,
.whatsapp-btn .icon{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    color: var(--whatsapp-icon-color);
    transition: .3s;
}

#htmlContent .contact-section-v2 .whatsapp-btn-otr,
#htmlContent .whatsapp-btn-otr{
    display: flex;
}

#htmlContent .contact-section-v2 .whatsapp-btn::before,
#htmlContent .whatsapp-btn::before{
    top: 0;
    left: 0;
}

#htmlContent .contact-section-v2 .whatsapp-btn,
#htmlContent .whatsapp-btn{
    width: 118px;
    height: 118px;
}

@media (max-width : 992px){
    .contact-section-v2 .whatsapp-btn-otr,
    .whatsapp-btn-otr{
        display: flex;
    }
    .banner-sec picture .bg-img{
         object-position: center top !important;
    }
    .breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item a{
         font-size: 12px;
    }
    h1, h1 span {
        font-size: 28px;
        line-height: 32px;
    }
    h2, h2 span {
        font-size: 24px;
        line-height: 32px;
    }
    .products-layout-v12 .content-div{
        width: 100% !important;
    }
}


.product-details-v1 .col-gallery-bigImage .bigImage,
.product-details-v1 .col-gallery-thumbs .gallery-img{
     object-position: top;
}

#htmlContent .swiper-wrapper{
    flex-wrap: wrap;
    gap: 40px 0;
}

#htmlContent .swiper-wrapper .swiper-slide{
    width: 44%;
    padding: 20px;
    border: 2px solid #cfcfcf;
}

#htmlContent .HomePage-BannerSes{
    height: auto;
}

#htmlContent .BannerSlider .swiper-wrapper .swiper-slide{
    width: 100%;
}

.fa-arrow-left::before {
    content: "\f060";
}

.fa-arrow-right:before {
    content: "\f061";
}

:root{
    --box-shadow1: 0px 4px 27px -2px rgba(10, 67, 150, 0.15)
}

#htmlContent h1, 
#htmlContent h2, 
#htmlContent h3, 
#htmlContent h4, 
#htmlContent h5, 
#htmlContent p, 
#htmlContent span, 
#htmlContent div, 
#htmlContent a, 
#htmlContent li, 
#htmlContent img, 
#htmlContent iframe, 
#htmlContent button, 
#htmlContent section{
    margin-top: 0;
    margin-bottom: 0;
}

#htmlContent .swiper-wrapper .swiper-slide{
    height: auto;
}

.products-layout-v12 .content-div p {
    -webkit-line-clamp: none !important;
    line-clamp: none !important;
}


/* When scrolling down - hide header */
.HomePage-BannerSlider2 .swiper-button-next{
	left: 20px;
    right: inherit;
}
.HomePage-BannerSlider2 .swiper-button-prev{
	right: 20px;
    left: inherit;
}
.products-layout-v1 .box-link{
	height: 100%;
}
.full-page-template-v3 .col-inr .section-inr{
	margin: 12px 0 !important;
}
.full-page-template-v3 .col-inr .Banner-Image-Normal{
	margin: 12px 0 !important;
}
.full-page-template-v3 .wrp-start,
.full-page-template-v3 .wrp-center{
	margin: 0 0 12px 0 !important;
}
.full-page-template-v3 ol,
.full-page-template-v3 ul{
	padding: 0 18px 0 0;
	margin: 8px 0 0 0;
}
.full-page-template-v3 ol li{
	list-style: decimal;
}
.full-page-template-v3 ul li{
	list-style: disc;
}
.full-page-template-v3{
	overflow: hidden;
}
.full-page-template-v3 .col-lg-8{
	margin: 30px auto;
}
.w-full .col-lg-8{
	width: 100%;
}
.ml-auto .row{
	margin: 0 -12px;
}
.ml-auto .col-lg-8{
	margin: 30px 0 30px auto;
	padding: 0;
}
.full-page-template-v3 .gallery-main-slideshow-main{
	padding: 0;
    margin: 0 2px;
}

.products-slider-main .swiper-button-next svg,
.products-slider-main .swiper-button-prev svg,
.HomePage-BannerSlider2 .swiper-button-next svg,
.HomePage-BannerSlider2 .swiper-button-prev svg,
.swiper-button-next svg,
.swiper-button-prev svg{
    display: none;
}














/*========================================
	HP Banner Slider Css Start Here
=========================================*/

.HomePage-BannerSlider2{
	position: relative;
	overflow: hidden;
}
.HomePage-BannerSlider2 .swiper-slide{
	position: relative;
}
#htmlContent .HomePage-BannerSlider2 .swiper-slide{
	border: 2px solid #000 !important;
	padding: 20px;
	margin: 20px 0;
}
#htmlContent .HomePage-BannerSlider2 .swiper-slide .slide-text-overlay{
	display: none;
}
.HomePage-BannerSlider2 .slide-img-otr{
	position: relative;
	display: flex;
}
.HomePage-BannerSlider2 .banner-img{
	width: 100%;
	height: auto;
	aspect-ratio: 21/8;
	object-fit: cover;
	object-position: right center;
}
.HomePage-BannerSlider2 .banner-shape{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	object-fit: fill;
	z-index: 10;
}
.HomePage-BannerSlider2 .slide-text-overlay{
	position: absolute;
	width: 100%;
	height: 40px;
	bottom: -20px;
	left: 0;
	background: linear-gradient(0deg, #FFFFFF 30%, rgba(255, 255, 255, 0) 100%);
	z-index: 10;
}
.HomePage-BannerSlider2 .slide-text-overlay .container{
	position: relative;
}
.HomePage-BannerSlider2 .slide-text-overlay .slide-text{
	position: absolute;
	left: 50px;
	bottom: 20px;
	max-width: 500px;
	width: 100%;
	text-align: start;
	z-index: 20;
}
.HomePage-BannerSlider2 .slide-text h1{
	font-size: 32px;
	line-height: 40px;
	color: var(--light);
	margin-bottom: 14px;
}
.HomePage-BannerSlider2 .slide-text h1::after{
	display: block;
}
.HomePage-BannerSlider2 .short-desc{
	margin: 8px 0 24px 0;
}
.HomePage-BannerSlider2 .short-desc p,
.HomePage-BannerSlider2 .slide-text p{
	color: var(--light);
}
.HomePage-BannerSlider2 .swiper-button-next,
.HomePage-BannerSlider2 .swiper-button-prev{
	width: 46px;
	height: 46px;
	border-radius: 100%;
	background-color: var(--light);
	position: relative;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: .5s;
	z-index: 100;
}
.HomePage-BannerSlider2 .swiper-button-next:hover,
.HomePage-BannerSlider2 .swiper-button-prev:hover{
	background-color: var(--theme-primary-color);
}
.HomePage-BannerSlider2 .swiper-button-next:hover::before,
.HomePage-BannerSlider2 .swiper-button-prev:hover::before{
	color: var(--light);
}
.HomePage-BannerSlider2 .swiper-button-next::after,
.HomePage-BannerSlider2 .swiper-button-prev::after{
	display: none;
}
.HomePage-BannerSlider2 .swiper-button-next::before,
.HomePage-BannerSlider2 .swiper-button-prev::before{
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	color: var(--theme-secondary-color);
	font-size: 20px;
	font-family: "Font Awesome 6 Pro";
	transition: .3s;
}
.HomePage-BannerSlider2 .swiper-button-next::before{
	content: "\f104";
	left: 50%;
}
.HomePage-BannerSlider2 .swiper-button-prev::before{
	content: "\f105";
	left: 50%;
}
.HomePage-BannerSlider2 .swiper-pagination .swiper-pagination-bullet{
	width: 18px;
	height: 18px;
	background-color: var(--theme-primary-color);
	opacity: 1;
	transition: .3s;
}
.HomePage-BannerSlider2 .swiper-pagination .swiper-pagination-bullet-active{
	background-color: var(--theme-secondary-color);
}
#htmlContent .HomePage-BannerSlider2{
	height: auto;          
}
#htmlContent .HomePage-BannerSlider2 .swiper-button-prev,
#htmlContent .HomePage-BannerSlider2 .swiper-button-next{
	display: none;     
}
@media(max-width: 992px){
	.HomePage-BannerSlider2{
		height: auto;
		margin-top: 60px;
	}
	.HomePage-BannerSlider2 .slide-text-overlay .container{
		display: none;
	}
	.HomePage-BannerSlider2 .swiper-button-next,
	.HomePage-BannerSlider2 .swiper-button-prev{
		display: none;
	}
	.HomePage-BannerSlider2 .swiper-pagination{
		bottom: 0;
	}
	.HomePage-BannerSlider2 .swiper-pagination .swiper-pagination-bullet{
		background-color: var(--light);
	}
	.HomePage-BannerSlider2 .swiper-pagination .swiper-pagination-bullet-active{
		background-color: var(--theme-primary-color);
	}
	.HomePage-BannerSlider2 .slide-text-overlay{
		bottom: -16px;
	}
}
@media (max-width: 500px){
	.HomePage-BannerSlider2 .banner-img{
		height: 250px;
	}
}

/*========================================
	HP Banner Slider Css End Here
=========================================*/

/* homePage Circle Sec Css Start Here */

.homePage-circle-sec{
	padding: 30px 0;
	position: relative;
	background-color: #fff;
}

.homePage-circle-sec .row{
	gap: 32px 0;
}

.homePage-circle-sec .box-link{
	position: relative;
	text-align: center;
}

.homePage-circle-sec .box-link:hover .content-div{
	background-color: #f5f5f5;
}

.homePage-circle-sec .box-link:hover .link-text{
	color: #6d6f91;
}

.homePage-circle-sec .circle-inr{
	position: relative;
	border-radius: 100%;
	margin: 0 auto;
	overflow: hidden;
	border: 2px solid #f9f9f9;
	transition: .3s;
}

.homePage-circle-sec .circle-inr .circle-img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: relative;
	aspect-ratio: 1/1;
	border-radius: 100%;
}

.homePage-circle-sec .content-div{
	position: relative;
	margin: 8px 0 0 0;
	padding: 4px 12px 5px 12px;
	text-align: center;
	border-radius: 60px;
	border: 1px solid var(--theme-tertiary-color);
}

.homePage-circle-sec .content-div h3{
	margin: 0 0 0 0;
	transition: .3s;
}

.homePage-circle-sec .content-div .text-btn{
	padding: 0;
}

.homePage-circle-sec .content-div .text-btn:after,
.homePage-circle-sec .content-div .text-btn:before{
	display: none;
}

.homePage-circle-sec .home-category-swiper {
    position: relative;
    width: 100%;
    padding: 0 20px 0;
    overflow: hidden;
    box-sizing: border-box;
}

.homePage-circle-sec .home-category-swiper .swiper-wrapper {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

.homePage-circle-sec .home-category-swiper .swiper-slide {
    flex-shrink: 0;
    height: auto;
    box-sizing: border-box;
}

.homePage-circle-sec .home-category-swiper .box-link {
    display: block;
    width: 100%;
    text-decoration: none;
}

/* Swiper adds swiper-button-lock / swiper-pagination-lock when there aren't
   enough slides to need scrolling (e.g. exactly 6 categories at slidesPerView:6
   on wide screens). Our custom nav/pagination classes below are more specific
   than swiper-bundle's own ".swiper-button-lock{display:none}" rule, so without
   this override the arrows/dots stayed visible and clickable while doing
   nothing - looking like a broken slider instead of correctly having nothing
   to slide. */
.swiper-button-lock,
.swiper-pagination-lock {
    display: none !important;
}

.homePage-circle-sec .home-category-prev,
.homePage-circle-sec .home-category-next {
    position: absolute;
    top: 50%;
    z-index: 20;
    width: 38px;
    height: 38px;
    margin-top: -25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homePage-circle-sec .home-category-prev {
    left: 0;
}

.homePage-circle-sec .home-category-next {
    right: 0;
}

.homePage-circle-sec .home-category-prev::before,
.homePage-circle-sec .home-category-next::before {
    font-family: swiper-icons;
    font-size: 18px;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
}

.homePage-circle-sec .home-category-prev::before {
    content: 'prev';
}

.homePage-circle-sec .home-category-next::before {
    content: 'next';
}

.homePage-circle-sec .home-category-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    z-index: 20;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.homePage-circle-sec .home-category-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    opacity: 1;
    cursor: pointer;
}

.homePage-circle-sec .home-category-mobile-grid {
    display: none;
}

.homePage-circle-sec .home-category-next,
.homePage-circle-sec .home-category-prev {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    background-color: var(--light);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: .5s;
    z-index: 100;
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.1);
}

.homePage-circle-sec .home-category-next {
    left: 2px !important;
    right: inherit;
}

.homePage-circle-sec .home-category-prev {
    right: 2px !important;
    left: inherit;
}

.homePage-circle-sec .home-category-next:hover,
.homePage-circle-sec .home-category-prev:hover {
    background-color: var(--theme-primary-color);
}

.homePage-circle-sec .home-category-next:hover::before,
.homePage-circle-sec .home-category-prev:hover::before {
    color: var(--light);
}

.homePage-circle-sec .home-category-next::after,
.homePage-circle-sec .home-category-prev::after {
    display: none;
}

.homePage-circle-sec .home-category-prev::before,
.homePage-circle-sec .home-category-next::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--theme-secondary-color);
    font-size: 20px;
    font-family: "Font Awesome 6 Pro";
    transition: .3s;
}

.homePage-circle-sec .home-category-next::before {
    content: "\f104";
}

.homePage-circle-sec .home-category-prev::before {
    content: "\f105";
}

.homePage-circle-sec .swiper-button-disabled {
    opacity: 0.2;
    background-color: #f9c5c5 !important;
}

.homePage-circle-sec .swiper-button-disabled:hover:before {
    color: var(--theme-secondary-color) !important;
}

.homePage-circle-sec .home-category-pagination {
    position: relative;
    margin-top: 18px;
}

.homePage-circle-sec .home-category-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: var(--theme-primary-color);
    opacity: 1;
    transition: .3s;
}

.homePage-circle-sec .home-category-pagination .swiper-pagination-bullet-active {
    background-color: var(--theme-secondary-color);
}

@media (max-width: 992px) {
    .homePage-circle-sec .home-category-next,
    .homePage-circle-sec .home-category-prev {
        display: none;
    }
}

@media (max-width: 767px) {
    .homePage-circle-sec .home-category-swiper {
        display: none !important;
    }

    .homePage-circle-sec .home-category-mobile-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 15px;
        width: 100%;
    }

    .homePage-circle-sec .mobile-category-item {
        min-width: 0;
        width: 100%;
    }

    .homePage-circle-sec .mobile-category-item .box-link {
        display: block;
        width: 100%;
        text-decoration: none;
    }

    .homePage-circle-sec .mobile-category-item .circle-inr {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .homePage-circle-sec .home-category-mobile-grid {
        gap: 18px 12px;
    }
}

@media (max-width: 768px){
	.homePage-circle-sec .circle-inr{
		width: auto;
	}
	.homePage-circle-sec .content-div{
		margin: 4px 0 0 0;
		padding: 3px;
		border-radius: 30px;
	}
	.homePage-circle-sec .content-div .text-btn{
		position: relative;
		top: -1px;
	}
}

/* homePage Circle Sec Css End Here */

/*========================================
	About Sec layout 1 Css Start Here
=========================================*/

.about-layout-v1{
	position: relative;
	overflow: hidden;
	margin: 30px 0;
}

.about-layout-v1 .bg-img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.about-layout-v1 .row{
	position: relative;
	z-index: 2;
}

.about-layout-v1 .col-content-otr{
	margin-right: auto;
}

.about-layout-v1 .col-content-inr{
	position: relative;
	text-align: center;
	padding: 80px 30px 80px 40px;
	/* background-color: rgba(231, 239, 250, 0.9); */
}

.about-layout-v1 .col-content-inr h1,
.about-layout-v1 .col-content-inr h2,
.about-layout-v1 .col-content-inr h3{
	margin: 0;
}

.about-layout-v1 .col-content-inr h2::after,
.about-layout-v1 .col-content-inr h2::before{
	display: none;
}

.about-layout-v1 .col-content-inr .coin-image{
	width: 100px;
	height: 100px;
	object-fit: cover;
	object-position: center;
	margin-bottom: 20px;
}

.about-layout-v1 .col-content-inr .short-desc{
	margin: 10px 0 30px 0;
}

.about-layout-v1 .col-content-inr .action{
	display: flex;
	justify-content: center;
}

@media (max-width: 992px){
	.about-layout-v1 .col-content-inr{
		padding: 80px 20px;
	}
}

@media (max-width: 768px){
	.about-layout-v1 .col-content-otr{
		padding: 0;
	}
	.about-layout-v1 .col-content-inr{
		background-color: rgba(231, 239, 250, 0.9);
	}
}

/*========================================
	About Sec layout 1 Css End Here
=========================================*/

/*========================================
	Products Css Start Here
=========================================*/

.products-cards-main,
.products-slider-main{
	position: relative;
	margin: 30px 0;
}
.products-cards-main h1 span,
.products-slider-main h1 span,
.products-cards-main h2 span,
.products-slider-main h2 span{
	color: var(--theme-primary-color);
}
.products-cards-main .container,
.products-slider-main .container{
	position: relative;
}
.products-cards-main .row,
.products-slider-main .row{
	gap: 24px 0;
	justify-content: center;
}
@media (max-width : 992px){
	.products-cards-main .row, 
	.products-slider-main .row{
		margin: 0 -8px;
		gap: 8px 0;
	}
	.products-cards-main .box-link-otr, 
	.products-slider-main .box-link-otr{
		padding: 0 4px;
	}
}
.products-cards-main .box-link,
.products-slider-main .box-link{
	position: relative;
				height: 100%;
	padding: 6px 6px 0px 6px;
	border: 1px solid rgba(163, 163, 163, 0.2);
	border-radius: 18px;
	box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.1);
	transition: .3s;
}
.products-cards-main .box-link:hover,
.products-slider-main .box-link:hover{
	border: 1px solid var(--theme-primary-color);
}
.products-cards-main .product-img-otr,
.products-slider-main .product-img-otr{
	display: flex;
	overflow: hidden;
	border-radius: 12px;
	position: relative;
	height: 250px;              
}
@media (max-width : 992px){
	.products-cards-main .product-img-otr,
	.products-slider-main .product-img-otr{
		height: 150px;
	}
}
.products-cards-main .product-img-otr .product-img-link,
.products-slider-main .product-img-otr .product-img-link{
	display: flex;
	width: 100%;
}
.products-cards-main .img-inr,
.products-slider-main .img-inr{
	width: 100%;
	height: 100%;
	aspect-ratio: 1/1;
	object-fit: contain;
	object-position: center;
	border-radius: 12px;
}
.products-cards-main .heart-icon-otr,
.products-slider-main .heart-icon-otr{
	position: absolute;
	top: 6px;
	left: 6px;
	width: 32px;
	height: 32px;
	padding: 0;
	cursor: pointer;
	border-radius: 100%;
	border: 1px solid var(--theme-primary-color);
	box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.1);
	background-color: var(--light);
}
.products-cards-main .heart-icon-otr .heart-icon,
.products-slider-main .heart-icon-otr .heart-icon{
	position: absolute;
	top: 52%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--theme-primary-color);
	font-size: 16px;
}
.products-cards-main .product-content,
.products-slider-main .product-content{
	position: relative;
	margin: 6px 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: calc(100% - 262px);
}
@media (max-width : 992px){
	.products-cards-main .product-content,
	.products-slider-main .product-content{
		height: calc(100% - 162px);
	}
}
.products-cards-main .product-content .title,
.products-slider-main .product-content .title{
	transition: 0.3s;
}
.products-cards-main .product-content .title:hover,
.products-slider-main .product-content .title:hover{
	color: var(--theme-primary-color);
}
.products-cards-main .product-content .product-short-desc,
.products-slider-main .product-content .product-short-desc{
	height: 55px;
	overflow: hidden;
}
.products-cards-main .wrp-quantity-price,
.products-slider-main .wrp-quantity-price{
	display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    margin-bottom: 8px;
}
.products-cards-main .product-details,
.products-slider-main .product-details{
	margin: 6px 0 0 0;
}
.products-cards-main .quantity-controls,
.products-slider-main .quantity-controls{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 40px;
	position: relative;
	box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.1);
}
.products-cards-main .quantity-plus,
.products-slider-main .quantity-plus{
	position: relative;
}
.products-cards-main .quantity-minus,
.products-slider-main .quantity-minus{
	position: relative;
}
.products-cards-main .quantity,
.products-slider-main .quantity{
	width: 36px;
	height: 28px;
	border: none;
	background-color: var(--theme-secondary-color);
	cursor: pointer;
	transition: .3s;
}
.products-cards-main .quantity:hover,
.products-slider-main .quantity:hover{
	opacity: 0.9;
	background-color: var(--theme-secondary-color);
}
.products-cards-main .quantity:hover .icon,
.products-slider-main .quantity:hover .icon{
	color: var(--light);
}
.products-cards-main .quantity .icon,
.products-slider-main .quantity .icon{
	position: absolute;
	left: 50%;
	top: 48%;
	transform: translate(-50%, -50%);
	font-size: 12px;
	color: var(--light);
	transition: .3s;
}
.products-cards-main .quantity-input,
.products-slider-main .quantity-input{
	width: 50px;
	height: 28px;
	border: none;
	background-color: #eeeeee;
	cursor: auto;
	border-top: 1px solid rgba(163, 163, 163, 0.2);
	border-bottom: 1px solid rgba(163, 163, 163, 0.2);
	text-align: center;
	font-size: 18px;
}
.products-cards-main .quantity-input:focus,
.products-slider-main .quantity-input:focus{
	outline: none;
	border: none;
	border-top: 1px solid rgba(163, 163, 163, 0.2);
	border-bottom: 1px solid rgba(163, 163, 163, 0.2);
}
.products-cards-main .quantity-input:hover,
.products-slider-main .quantity-input:hover{
	background-color: #eeeeee;
}
.products-cards-main .product-price,
.products-slider-main .product-price{
	font-size: 22px;
	position: relative;
	margin: 6px 0;
	color: var(--text-color);
}
@media (max-width: 992px){
	.products-cards-main .quantity,
	.products-slider-main .quantity{
		width: 24px;
		height: 24px;
	}
	.products-cards-main .quantity-input,
	.products-slider-main .quantity-input{
		width: 26px;
		height: 24px;
		font-size: 14px;
	}
	.products-cards-main .product-price,
	.products-slider-main .product-price{
		font-size: 14px;
	}
	.products-cards-main .wrp-quantity-price, 
	.products-slider-main .wrp-quantity-price{
		padding: 0 8px;
		margin-bottom: 0px;
	}
	.products-cards-main .product-content .title, 
	.products-slider-main .product-content .title{
		font-size: var(--h4-font-size);
		line-height: var(--h4-line-height);
		font-family: var(--h4-font-family);
		color: var(--h4-text-color);
		font-weight: normal;
	}
	.products-slider-main .img-inr{
		object-fit: contain;
	}
	.products-cards-main .box-link, 
	.products-slider-main .box-link{
		border-radius: 18px;
	}
}
.review-widghet{
	display: none;
}
.products-cards-main .action,
.products-slider-main .action{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.products-cards-main .theme-btn-small,
.products-slider-main .theme-btn-small{
	padding: 6px 20px;
	font-size: 16px;
	width: 100%;
}
.products-cards-main .theme-btn-small.secondary-button,
.products-slider-main .theme-btn-small.secondary-button{
	background-color: var(--theme-secondary-color);
	color: var(--light);
}
.products-cards-main .theme-btn-small.secondary-button .icon,
.products-slider-main .theme-btn-small.secondary-button .icon{
	color: var(--light);
}
.products-cards-main .theme-btn-small.secondary-button:hover,
.products-slider-main .theme-btn-small.secondary-button:hover{
	background-color: var(--theme-primary-color);
	color: var(--dark);
}

@media (max-width : 992px){
	.products-cards-main .theme-btn,
	.products-slider-main .theme-btn{
		padding: 4px 10px;
		font-size: 14px;
		border-radius: 12px;
		line-height: 24px;
	}
}

/* Slider only Css - shared arrow/pagination style also used for product slider */
.products-slider-main .swiper{
	overflow: hidden;
	padding: 6px 4px 20px;
}
.products-slider-main .swiper-slide{
	height: auto;
}
.products-slider-main .swiper-slide .box-link{
	height: 100%;
}
.products-slider-main .swiper-button-next,
.products-slider-main .swiper-button-prev{
	width: 46px;
	height: 46px;
	border-radius: 100%;
	background-color: var(--light);
	position: absolute;
	top: 55%;
	transform: translateY(-50%);
	transition: .5s;
	z-index: 100;
	box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.1);
}
.products-slider-main .swiper-button-next{
	left: -44px !important;
}
.products-slider-main .swiper-button-prev{
	right: -44px !important;
}
.products-slider-main .swiper-button-next:hover,
.products-slider-main .swiper-button-prev:hover{
	background-color: var(--theme-primary-color);
}
.products-slider-main .swiper-button-next:hover::before,
.products-slider-main .swiper-button-prev:hover::before{
	color: var(--light);
}
.products-slider-main .swiper-button-next::after,
.products-slider-main .swiper-button-prev::after{
	display: none;
}
.products-slider-main .swiper-button-next::before,
.products-slider-main .swiper-button-prev::before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--theme-secondary-color);
	font-size: 20px;
	font-family: "Font Awesome 6 Pro";
	transition: .3s;
}
.products-slider-main .swiper-button-next::before{
	content: "\f104";
}
.products-slider-main .swiper-button-prev::before{
	content: "\f105";
}
.products-slider-main .swiper-pagination{
	position: relative;
	margin-top: 18px;
}
.products-slider-main .swiper-pagination .swiper-pagination-bullet{
	width: 12px;
	height: 12px;
	background-color: var(--theme-primary-color);
	opacity: 1;
	transition: .3s;
}
.products-slider-main .swiper-pagination .swiper-pagination-bullet-active{
	background-color: var(--theme-secondary-color);
}
@media(max-width: 992px){
	.products-slider-main .swiper-button-next,
	.products-slider-main .swiper-button-prev{
		display: none;
	}
}

/*========================================
	Products Css End Here
=========================================*/

/*========================================
		About Sec Css Start Here
=========================================*/

.aboutSection-main{
	position: relative;
	overflow: hidden;
	padding: 30px 0;
}

.aboutSection-main .row{
	gap: 24px 0;
	justify-content: space-between;
}

.aboutSection-main .col-inr{
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	text-align: center;
}

.aboutSection-main .content-about{
	margin: 12px 0 24px 0;
}

.aboutSection-main .col-inr .short-desc{
	position: relative;
}

.aboutSection-main .col-inr ul{
	margin: 12px 0 24px 0;
}

.aboutSection-main .col-inr ul li{
	display: flex;
	gap: 12px;
}

.aboutSection-main .col-inr li .icon{
	position: relative;
	top: 3px;
}

.aboutSection-main .web-logo{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 20%;
	height: auto;
	object-fit: contain;
	opacity: 10%;
	z-index: -1;
}

.aboutSection-main .col-inr .action{
	display: flex;
	justify-content: center;
	margin-top: 16px;
}

.aboutSection-main .col-img-inr{
	display: flex;
	margin: 0 16%;
}

.aboutSection-main .col-img-inr .about-img,
.aboutSection-main .col-img-inr .img-inr{
	width: 100%;
	height: auto;
	object-fit: cover;
}

.aboutSection-main .col-img-inr div,
.aboutSection-main .col-img-inr [data-component-video]{
	width: 100%;
	height: 100%;
}

.aboutSection-main .col-img-inr .iframe-video,
.aboutSection-main .col-img-inr iframe{
	width: 100%;
	height: 100%;
	aspect-ratio: 3/2;
}

/* Alternate Direction */

.oposite-direction-about .col-img-inr{
	margin-left: 50px;
	margin-right: 0;
}

@media (max-width: 992px){
	.oposite-direction-about .row{
		flex-direction: column-reverse;
	}
	.aboutSection-main .col-img-inr{
		margin: 0;
	}
}

/*========================================
		About Sec Css End Here
=========================================*/

/* homePage features Sec Css Start Here */

.homePage-features-sec{
	padding: 30px 0;
	position: relative;
	background-color: #fff;
}

.homePage-features-sec .row{
	gap: 32px 0;
}

.homePage-features-sec .box-link{
	position: relative;
	text-align: center;
}

.homePage-features-sec .img-inr{
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	transition: .3s;
}

.homePage-features-sec .img-inr .icon-img{
	width: 100px;
	height: auto;
	object-fit: cover;
	object-position: center;
	position: relative;
	aspect-ratio: 1/1;
	border-radius: 100%;
}

.homePage-features-sec .content-div{
	position: relative;
	margin: 0;
}

.homePage-features-sec .content-div h3{
	margin: 0;
	transition: .3s;
}

/* homePage features Sec Css End Here */

/* Content Sec CSS start Here */

.contentSec-main{
	position: relative;
	margin: 30px 0;
}

/* Content Sec CSS End Here */

/* Catalog Page CSS start Here */

.catelogue-details-page-main {
	position: relative;
}

.catelogue-details-page{
	position: relative;
} 

.catelogue-details-page{
	position: relative;
} 

.categories{
	position: relative;
	overflow: hidden;
	padding: 0;
	margin: 30px 0;
}

.categories #my-swiper-slider{
	position: relative;
    padding: 10px 12px;
}

.categories .col-item-inr {
    padding: 40px 10px 13px 10px;
    border: 1px solid rgba(163, 163, 163, 0.2);
    border-radius: 20px;
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
    background-color: var(--light);
    transition: .3s;
}

.categories .col-item-inr:hover{
	border: 1px solid var(--theme-primary-color);
}

.categories .col-item-inr .icon-otr {
    width: 80px;
    height: 60px;
    object-fit: contain;
    margin: 0 auto 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.categories .col-item-inr .icon-otr .categories-icon {
    font-size: 40px;
}

.categories .col-item-inr p {
	line-height: var(--h3-line-height);
    font-family: var(--h3-font-family);
    color: var(--h3-text-color);
    font-weight: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: .3s;
}

.categories .swiper-button-next,
.categories .swiper-button-prev{
	width: 46px;
	height: 46px;
	border-radius: 100%;
	background-color: var(--light);
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	transition: .5s;
	z-index: 100;
	box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.1);
}
.categories .swiper-button-next{
	left: 10px !important;
}
.categories .swiper-button-prev{
	right: 10px !important;
}
.categories .swiper-button-next:hover,
.categories .swiper-button-prev:hover{
	background-color: var(--theme-primary-color);
}
.categories .swiper-button-next:hover::before,
.categories .swiper-button-prev:hover::before{
	color: var(--light);
}
.categories .swiper-button-next::after,
.categories .swiper-button-prev::after{
	display: none;
}
.categories .swiper-button-next::before,
.categories .swiper-button-prev::before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--theme-secondary-color);
	font-size: 20px;
	font-family: "Font Awesome 6 Pro";
	transition: .3s;
}
.categories .swiper-button-next::before{
	content: "\f104";
}
.categories .swiper-button-prev::before{
	content: "\f105";
}
.categories .swiper-pagination{
	position: relative;
	margin-top: 18px;
}
.categories .swiper-pagination .swiper-pagination-bullet{
	width: 12px;
	height: 12px;
	background-color: var(--theme-primary-color);
	opacity: 1;
	transition: .3s;
}
.categories .swiper-pagination .swiper-pagination-bullet-active{
	background-color: var(--theme-secondary-color);
}
@media(max-width: 992px){
	.categories .swiper-button-next,
	.categories .swiper-button-prev{
		display: none;
	}
}

ul.breadcrumb li a span {
    position: relative;
    color: var(--theme-primary-color);
}

/*ul.breadcrumb li span a{
	position: relative;
}

ul.breadcrumb li span a::after {
    content: "/";
    position: absolute;
    right: -16px;
    top: -1px;
    font-size: var(--font-size-18px);
    line-height: var(--line-heights-18px);
    font-family: var(--font-family-regular);
    color: #666666;
} */

/* Catalog Page CSS start Here */

.whatsapp-circle{
	width: 52px;
    height: 52px;
    position: fixed;
    bottom: 12px;
    right: 12px;
    z-index: 9999;
    background-color: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.whatsapp-circle:hover{
	opacity: 0.9;
}

.whatsapp-circle .whatsapp-circle-icon{
	font-size: 26px;
	color: #fff;
	transition: 0.3s;
}

.contact-main{
	position: relative;
} 
.contact-main .row{
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width : 992px){
	.Search-cards{
		margin-top: 100px;
	}
}
.mfp-bg{
	z-index: 9999 !important;
}
.mfp-wrap{
	z-index: 9999 !important;
}

.global-main-wrp .order-process .collapsible2 .code-otr .icon-plus{
	background-color: var(--theme-secondary-color) !important;
}

@media (max-width: 992px){
	.opening-section1{
		position: relative;
		width: 100%;
		overflow: hidden;
	}
	.global-main-wrp .order-process .col-otr .procduct-box{
		padding: 0;
		height: auto;
		overflow: visible;
		border: none;
	}
	.global-main-wrp .order-process .col-inr .procduct-box .content{
		margin: 0;
		text-align: start;
	}
	.global-main-wrp .order-process .col-inr .procduct-box .content *{
		font-size: 16px;
	}
	.global-main-wrp .order-process .total-column-heading{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
	.global-main-wrp .order-process .col-otr .col-inr h3{
		margin: 0;
	}
	.global-main-wrp .order-process .procduct-box .price-otr .price {
		font-size: 18px;
		line-height: 28px;
		color: var(--dark);
		margin: 10px 10px 4px 10px;
		text-align: left;
	}
	.global-main-wrp .order-process .promo-otr{
		margin-top: 50px;
	}
	.global-main-wrp .order-process .delete-btn {
		position: absolute;
		top: 68px;
		right: 25px;
		font-size: 14px;
		color: red;
	}
	.global-main-wrp .order-process .terms-check{
		display: flex;
		align-items: baseline;
		text-align: center;
		gap: 10px;
		justify-content: flex-start;
	}
	.global-main-wrp .order-process .terms-check p{
		font-size: 16px;
		text-align: start !important;
		line-height: 19px;
	}
	.global-main-wrp .order-process input{
		direction: rtl !important;
		text-align: start !important;
		text-align: start !important;
	}
		#confirmModel .modal-header .close{
		width: 32px;
		height: 32px;
		padding: 0 !important;
		top: -4px;
		right: -4px;
	}

	.modal-body .row{
		position: relative;
		flex-wrap: nowrap;
		gap: 12px;
        margin: 0;
	}

	.modal-body .row .col-6{
		width: auto;
		padding: 0;
		flex: 1;
	}

	.modal-body .row .col-6 .theme-btn{
		width: 100%;
		font-size: 14px;
        line-height: 20px;
        padding: 8px 10px;
	}
}

.modal{
	z-index: 99999 !important;
}
.modal-backdrop{
	z-index: 9999;
}

/*.product-details-template1 .add-cart-btn a:nth-child(2){
	display: none;
} */

.title-and-desc-wrp{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.title-and-desc-wrp .price-otr,
.title-and-desc-wrp .short-desc,
.title-and-desc-wrp > p{
    flex-basis: 100%;
    width: 100%;
}

.add-to-basket-toast{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--light);
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
    padding: 10px 16px;
    max-width: 320px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
    pointer-events: none;
}

.add-to-basket-toast.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.add-to-basket-toast-img{
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.add-to-basket-toast-name{
    font-size: 14px;
    line-height: 20px;
    color: #000;
}


.loading-spiner{
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(0 0 0 / 20%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	z-index: 999;
}

.loading-spiner img{
	width: 100px;
}

:root {
                                --box-shadow1: 0px 4px 27px -2px rgba(10, 67, 150, 0.15);
                            }
                        	.aboutSection-main-v2{
                          		position: relative;
                          		margin: 30px 0;
                          	}
                          	.aboutSection-main-v2 .row{
                          		gap: 24px 0;
                          	}
                          	.aboutSection-main-v2 .col-inr{
                          		position: relative;
                          	        padding-left: 0;
                                        padding-left: 42px;
                          		display: flex;
                          		flex-direction: column;
                          		justify-content: space-between;
                          		height: 100%;
                          		
                          	}
                          	.aboutSection-main-v2 .col-inr .short-desc p:not(:last-child){
                          		margin-bottom: 8px;
                          	}
                            .aboutSection-main-v2 p b,
                          	.aboutSection-main-v2 p u,
                          	.aboutSection-main-v2 p i,
                          	.aboutSection-main-v2 p font,
                          	.aboutSection-main-v2 p a,
                          	.aboutSection-main-v2 li b,
                          	.aboutSection-main-v2 li u,
                          	.aboutSection-main-v2 li i,
                          	.aboutSection-main-v2 li font,
                          	.aboutSection-main-v2 li a{
                          		color: var(--theme-primary-color);
                          	}
                          	.aboutSection-main-v2 p a,
                          	.aboutSection-main-v2 li a{
                          		display: inline-block;
                          		transition: .3s;
                          	}
                          	.aboutSection-main-v2 p a:hover,
                          	.aboutSection-main-v2 li a:hover{
                          		color: var(--theme-secondary-color);
                          	}
                          	.aboutSection-main-v2 .col-inr .action{
                          		margin: 18px 0 0 0;
                          		display: flex;
                          		justify-content: end;
                          	}
                          	.aboutSection-main-v2 .col-img-inr{
                          		padding: 8px;
                          		border-radius: 8px;
                          		background-color: var(--light);
                          		box-shadow: var(--box-shadow1);
                          		display: flex;
                          		transition: .3s;
                          	}
                            .aboutSection-main-v2 [data-component-video],
                            .aboutSection-main-v2 .col-img-inr iframe{
                          		width: 100%;
                          		height: 100%;
                          		border-radius: 8px;
                          		aspect-ratio: 4/3;
                          	}
                            .aboutSection-main-v2 .col-img-inr iframe{
                          		width: 100%;
                          		height: 100%;
                          		border-radius: 8px;
                          		aspect-ratio: 4/3;
                          	}
                          	.aboutSection-main-v2 .col-img-inr img{
                          		width: 100%;
                          		height: auto;
                          		object-fit: cover;
                          		border-radius: 8px;
                          		aspect-ratio: 4/3;
                          	}
                          	@media (max-width: 992px){
                            	.aboutSection-main-v2 .row{
                                	flex-direction: column-reverse;
                                }
                          		.aboutSection-main-v2 .col-inr{
                          			padding: 0;
                          		}
                          	}
							
							.banner-sec{
    position: relative;
    overflow: hidden;
}

.banner-sec .bg-img{
    width: 100%;
    height: auto;
    object-fit: cover;
}

.inner-banner-sec picture{
    display: flex;
}

.inner-banner-sec picture .bg-img,
.inner-banner-sec .bg-img,
.inner-banner-sec img{
   height: 220px !important;
}

.inner-banner-sec .iframe-video-otr{
    width: 100%;
    height: 220px;
    position: relative;
    overflow: hidden;
}

.inner-banner-sec [data-component-video]{
    width: 100%;
    height: 220px;
    position: relative;
    overflow: hidden;
}

.inner-banner-sec iframe,
#htmlContent .inner-banner-sec iframe{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500% !important;
    height: 500% !important;
}

.banner-sec .wrapper{
    position: absolute;
    top: 50%;
    left: 10%;
    max-width: 450px;
    width: 100%;
    text-align: right;
    transform: translateY(-50%);
    z-index: 2;
}

.banner-sec h1{
    font-size: var(--Icon-font-size-56px);
    line-height: var(--line-heights-56px);
    font-family: var(--font-family-bold);
    color: var(--dark);
}

.banner-sec p{
    font-size: var(--font-size-20px);
    line-height: var(--line-heights-20px);
    color: var(--dark);
    margin: 20px 0 34px 0;
}

.banner-sec .action{
    display: flex;
    justify-content: flex-end;
}

.banner-sec .action .theme-btn{
    max-width: 150px;
    width: 100%;
}

@media (max-width : 992px){
    .inner-banner-sec{
        margin-top: 60px;
    }
}

/*========================================
       Banner Css End Here
=========================================*/

 .contact-layout-v1 {
      padding: 30px 0;
      position: relative;
      overflow: hidden;
    }

    .contact-layout-v1 .container {
      width: 100%;
      max-width: 940px;
    }

    #htmlContent .contact-layout-v1 .editor-section *,
    #htmlContent .contact-layout-v1 .error-template *{
        text-align: start !important;
    }

    .contact-layout-v1 .wrp-center,
    .contact-layout-v1 .wrp-start,
    .contact-layout-v1 .wrp-right,
    .contact-layout-v1 .row,
    .contact-layout-v1 .action {
      position: relative;
      z-index: 10;
    }

    .contact-layout-v1 .row {
      gap: 14px 0;
      max-width: 1000px;
      margin-right: auto !important;
      margin-left: auto !important;
    }

    .contact-layout-v1 .action{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
        
    .contact-layout-v1 .theme-input{
        border-radius: 12px !important;
     }

    .contact-layout-v1 .theme-input,
    .contact-layout-v1 .theme-btn {
      width: 100% !important;
    }

    .contact-layout-v1 .theme-btn {
      max-width: 300px !important;
      width: 100% !important;
      background-color: var(--theme-primary-color) !important;
    }
        
    .contact-layout-v1 .theme-btn:hover{
        background-color: var(--theme-secondary-color) !important;
     }
    
        .contact-layout-v1 .theme-btn,
    .contact-layout-v1 .theme-btn * {
      font-size: var(--btn-font-size);
      line-height: var(--btn-line-height);
      color: var(--dark);
    }

    .contact-layout-v1 .theme-btn:hover * {
      color: var(--light);
    }

    .contact-layout-v1 .textarea {
      height: 200px;
      resize: none;
      display: flex;
      background-color: var(--light);
    }

    .contact-layout-v1 #form-status.success {
      color: #54687d;
      margin-top: 12px;
      font-weight: bold;
    }

    .contact-layout-v1 #form-status.error {
      color: #ef1e07;
      margin-top: 12px;
      font-weight: bold;
    }

    .contact-layout-v1 .btn-spinner {
      display: inline-block;
      animation: spin 1s linear infinite;
    }

    .contact-layout-v1 .btn-spinner.hidden {
      display: none;
    }

    .contact-layout-v1 .theme-btn[disabled] {
      opacity: 0.7;
      cursor: not-allowed;
    }
    
    .contact-layout-v1 .fa-spinner {
      animation: spin 1s linear infinite;
    }

    .contact-layout-v1 .fa-spinner::before {
      content: "\f110";
      animation: spin 1s linear infinite;
    }

    /* Editor styles (visible in editor) */
    .contact-layout-v1 .html-content-area {
      width: 100%;
    }

    .contact-layout-v1 .editor-section {
      border: 2px dashed #ccc;
      padding: 20px;
      background: #f9f9f9;
      border-radius: 8px;
      margin-top: 20px;
    }

    .contact-layout-v1 .editor-section h3 {
      color: #333;
      margin: 0 0 15px 0;
      font-size: 16px;
      text-align: left;
    }

    .contact-layout-v1 .template-item {
      margin: 10px 0;
      display: flex;
      align-items: center;
      gap: 10px;
      text-align: left;
    }

    .contact-layout-v1 .template-item label {
      font-weight: bold;
      color: #555;
      min-width: 120px;
      font-size: 14px;
    }

    .contact-layout-v1 .success-template-text {
      color: #54687d;
      font-size: 14px;
      font-weight: bold;
      border: 1px solid #ddd;
      padding: 5px 10px;
      border-radius: 4px;
      background: white;
      flex: 1;
      text-align: left;
      outline: none;
    }

    /* Hide editor content in preview mode */
    .preview-mode .contact-layout-v1 .editor-section {
      display: none;
    }

    .contact-layout-v1 .editor-section {
      display: none;
    }

    #htmlContent .contact-layout-v1 .editor-section {
      display: block;
    }

.fa-arrow-right::before {
    content: "\f061";
}

.fa-arrow-left::before {
    content: "\f060";
}

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

input[type="number"] {
  -moz-appearance: textfield;
}

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @media (min-width: 992px) {
      .contact-layout-v1 .row {
        margin: 0;
      }

      .contact-layout-v1 .col-otr {
        padding: 0 7px;
      }
    }
	
	:root{
            --box-shadow1: 0px 4px 27px -2px rgba(10, 67, 150, 0.15)
        }
   
        .services-layout-v1{
            position: relative;
            margin: 30px 0;
        }

        .services-layout-v1 .wrp-center,
        .services-layout-v1 .wrp-start,
        .services-layout-v1 .wrp-right,
        .services-layout-v1 .row,
        .services-layout-v1 .action{
            position: relative;
            z-index: 10;
        }

        .services-layout-v1 .row{
            gap: 14px 0;
        }

        @media (min-width: 992px){
            .services-layout-v1 .box-link-otr{
                padding: 0 7px;
            }
        }

        .services-layout-v1 .box-link{
            position: relative;
            border-radius: 8px;
            height: 100%;
            background-color: var(--light);
            box-shadow: var(--box-shadow1);
            border: 1px solid transparent;
            transition: .3s;
        }

        .services-layout-v1 .box-link:hover{
            border: 1px solid var(--theme-secondary-color);
        }
            
        #htmlContent .services-layout-v1 .box-link:before{
            right: 0;    
        }

        .services-layout-v1 .box-link:hover .h3-heading{
            color: var(--theme-primary-color);
        }

        .services-layout-v1 .img-otr{
            display: flex;
            position: relative;
            padding: 6px 6px 0 6px;
        }

        .services-layout-v1 .img-otr .img-inr{
            width: 100%;
            border-radius: 8px;
            aspect-ratio: 4/3;

        }
            
        #htmlContent .services-layout-v1 .img-otr{
            width: 100%;
            height: auto;
        }

        #htmlContent .services-layout-v1 .img-otr .logo-placeholder-img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;	
            height: auto;
            object-fit: cover;
            aspect-ratio: 4/3;
        }
            
        .services-layout-v1 .img-otr .logo-placeholder-img{
            height: auto;
            aspect-ratio: 4/3;
        }

        .services-layout-v1 .content{
            padding: 7px 16px 28px 16px;
        }

        .services-layout-v1 .content .h3-heading{
            position: relative;
            transition: .3s;
        }

        .services-layout-v1 .action{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 30px;
        }
		
		:root {
                --box-shadow1: 0px 4px 27px -2px rgba(10, 67, 150, 0.15);
            }
            /*========================================
                Banner Css Start Here
            =========================================*/

            .banner-sec{
                position: relative;
                overflow: hidden;
            }

            .banner-sec .bg-img{
                width: 100%;
                height: auto;
                object-fit: cover;
            }

            .inner-banner-sec picture{
                display: flex;
            }

            .inner-banner-sec picture .bg-img,
            .inner-banner-sec .bg-img,
            .inner-banner-sec img{
            height: 220px !important;
            }

            .inner-banner-sec .iframe-video-otr{
                width: 100%;
                height: 220px;
                position: relative;
                overflow: hidden;
            }

            .inner-banner-sec [data-component-video]{
                width: 100%;
                height: 220px;
                position: relative;
                overflow: hidden;
            }

            .inner-banner-sec iframe,
            #htmlContent .inner-banner-sec iframe{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 500% !important;
                height: 500% !important;
            }

            .banner-sec .wrapper{
                position: absolute;
                top: 50%;
                left: 10%;
                max-width: 450px;
                width: 100%;
                text-align: right;
                transform: translateY(-50%);
                z-index: 2;
            }

            .banner-sec h1{
                font-size: var(--Icon-font-size-56px);
                line-height: var(--line-heights-56px);
                font-family: var(--font-family-bold);
                color: var(--dark);
            }

            .banner-sec p{
                font-size: var(--font-size-20px);
                line-height: var(--line-heights-20px);
                color: var(--dark);
                margin: 20px 0 34px 0;
            }

            .banner-sec .action{
                display: flex;
                justify-content: flex-end;
            }

            .banner-sec .action .theme-btn{
                max-width: 150px;
                width: 100%;
            }

            @media (max-width : 992px){
                .inner-banner-sec{
                    margin-top: 60px;
                }
            }

            /*========================================
                Banner Css End Here
            =========================================*/
            .full-page-template-v3{
                position: relative;
                margin: 30px 0;
            }
            .full-page-template-v3 .row-main{
                justify-content: center;
            }
            .full-page-template-v3 .col-inr .section-inr{
                margin: 0 0 30px 0;
            }
            .full-page-template-v3 .date-desc{
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: nowrap;
                padding: 24px 0;
                border-top: 1px solid #cfcfcf;
                border-bottom: 1px solid #cfcfcf;
            }
            .full-page-template-v3 .date-desc p{
                width: auto;
            }
            @media (max-width: 575px){
                .full-page-template-v3 .date-desc{
                    align-items: flex-start;
                    flex-direction: column;
                    gap: 12px;
                }
            }
            .full-page-template-v3 .row{
                gap: 24px 0;
            }
            .full-page-template-v3 .col-inr{
                position: relative;
                display: flex;
                flex-direction: column;
                text-align: start;
                height: 100%;
            }
            .full-page-template-v3 .col-inr .short-desc p:not(:last-child){
                margin-bottom: 8px;
            }
            .full-page-template-v3 p b,
            .full-page-template-v3 p u,
            .full-page-template-v3 p i,
            .full-page-template-v3 p font,
            .full-page-template-v3 p a,
            .full-page-template-v3 li b,
            .full-page-template-v3 li u,
            .full-page-template-v3 li i,
            .full-page-template-v3 li font,
            .full-page-template-v3 li a{
                color: var(--theme-primary-color);
            }
            .full-page-template-v3 p a,
            .full-page-template-v3 li a{
                display: inline-block;
                transition: .3s;
            }
            .full-page-template-v3 p a:hover,
            .full-page-template-v3 li a:hover{
                color: var(--theme-secondary-color);
            }
            .full-page-template-v3 .gallerySec-main{
                position: relative;
                margin: 30px 0;
            }
            @media (min-width: 992px){
                .full-page-template-v3 .gallerySec-main .row{
                    gap: 6px 0;
                    margin: 0 -4px;
                }
                .full-page-template-v3 .gallerySec-main .box-link-otr{
                    padding: 0 3px;
                }
            }
            @media (max-width : 992px){
                .full-page-template-v3 .gallerySec-main .row{
                    gap: 12px 0;
                }
            }
            .full-page-template-v3 .gallerySec-main .col-inr{
                position: relative;
                display: flex;
                border-radius: 8px;
                box-shadow: var(--box-shadow1);
                cursor: pointer;
                height: 100%;
                transition: .3s;
            }
            .full-page-template-v3 .gallerySec-main .col-inr [data-component-video],
            .full-page-template-v3 .gallerySec-main .col-inr .iframe-video-otr{
                position: relative;
                overflow: hidden;
                aspect-ratio: 1/1;
                background-color: var(--dark);
            }
            .full-page-template-v3 .gallerySec-main [data-component-video] iframe,
            .full-page-template-v3 .gallerySec-main .iframe-video-otr iframe{
                width: 100%;
                height: auto;
                aspect-ratio: 1/1;
            }
            .full-page-template-v3 .gallerySec-main .col-inr .gallerySec-img,
            .full-page-template-v3 .gallerySec-main .gallery-main-img,
            .full-page-template-v3 .gallerySec-main .img-inr{
                width: 100%;
                height: auto;
                object-fit: cover;
                object-position: top;
                aspect-ratio: 1/1 !important;
            }
            .full-page-template-v3 .gallerySec-main .gallery-main-popup-main{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: var(--dark-rgba-2);
                z-index: 102020;
                transition: .3s;
            }
            .full-page-template-v3 .gallerySec-main .gallery-main-img-show{
                width: 100%;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .full-page-template-v3 .gallerySec-main .gallery-main-img-show img{
                width: 100%;
                height: 100%;
                object-fit: contain;
                background-color: var(--dark-rgba-2);
                aspect-ratio: 1/1;
            }
            .full-page-template-v3 .gallerySec-main .gallery-main-close-icon-main{
                width: 44px;
                height: 44px;
                border-radius: 100%;
                position: absolute;
                top: 12px;
                right: 12px;
                display: flex !important;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                background-color: var(--theme-primary-color);
                border: 2px solid transparent;
                z-index: 1000;
                transition: .3s;
            }
            .full-page-template-v3 .gallerySec-main .gallery-main-close-icon-main .icon{
                font-size: 24px;
                color: var(--light);
            }
            .full-page-template-v3 .gallerySec-main .gallery-main-close-icon-main:hover{
                background-color: var(--theme-secondary-color);
                border: 2px solid var(--light);
            }
            .full-page-template-v3 .gallerySec-main .gallery-main-close-icon-main:hover .icon{
                color: var(--light);
            }
            .full-page-template-v3 .gallerySec-main #gallery-main-prev-main,
            .full-page-template-v3 .gallerySec-main #gallery-main-next-main{
                width: 44px;
                height: 44px;
                border-radius: 100%;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                background-color: var(--theme-primary-color);
                border: 2px solid transparent;
                z-index: 1000;
                transition: .3s;
            }
            .full-page-template-v3 .gallerySec-main #gallery-main-prev-main .icon,
            .full-page-template-v3 .gallerySec-main #gallery-main-next-main .icon{
                font-size: 24px;
                color: var(--light);
            }
            .full-page-template-v3 .gallerySec-main #gallery-main-prev-main:hover,
            .full-page-template-v3 .gallerySec-main #gallery-main-next-main:hover{
                background-color: var(--theme-secondary-color);
                border: 2px solid var(--light);
            }
            .full-page-template-v3 .gallerySec-main #gallery-main-prev-main:hover .icon,
            .full-page-template-v3 .gallerySec-main #gallery-main-next-main:hover .icon{
                color: var(--light);
            }
            .full-page-template-v3 .gallerySec-main #gallery-main-next-main{
                right: 12px;
            }
            .full-page-template-v3 .gallerySec-main #gallery-main-prev-main{
                left: 12px;
            }
            #htmlContent .full-page-template-v3 .gallerySec-main .row{
                justify-content: center;
            }
            #htmlContent .full-page-template-v3 .gallerySec-main .box-link-otr{
                width: 31.3333%          
            }
            #htmlContent .full-page-template-v3 .gallerySec-main .box-link-otr{
                margin: 12px 0;   
                padding: 20px;
            }
			
.dropdown-toggle::after{
	display: none !important;
}
.dropdown-menu{
	top: 20px !important; 
}

.search-form{
	position: relative;
    border-radius: 30px;
    overflow: hidden;
}

.search-form .search-button{
	position: absolute;
    left: 0;
    height: 100%;
	width: 52px;
}


.cta-sec {
      position: relative;
      padding: 30px 0;
      background: linear-gradient(180deg, #FFFFFF 0%, #E7EFFA 6.7%, #F0F5FC 89.9%, #FFFFFF 120.81%);
    }

    #htmlContent .cta-sec .editor-section *,
    #htmlContent .cta-sec .error-template *{
        text-align: start !important;
    }

    .cta-sec h1,
    .cta-sec h2,
    .cta-sec h3,
    .cta-sec p,
    .cta-sec strong,
    .cta-sec font,
    .cta-sec article {
      color: var(--dark);
    }

    .cta-sec h2::after {
      border-color: #e9f0fa;
    }

    .cta-sec .row {
      gap: 12px 0;
    }

    .cta-sec .theme-input {
      background-color: var(--light);
    }

    .cta-sec .theme-input,
    .cta-sec .theme-btn {
      width: 100% !important;
    }

    .cta-sec .theme-btn {
      max-width: 300px !important;
      width: 100% !important;
	  background-color: var(--theme-primary-color) !important;
    }
    
		.cta-sec .theme-btn:hover{
			background-color: var(--theme-secondary-color) !important;
		}
	
	.cta-sec .theme-btn,
    .cta-sec .theme-btn * {
      font-size: var(--btn-font-size);
      line-height: var(--btn-line-height);
      color: var(--dark);
    }

    .cta-sec .theme-btn:hover * {
      color: var(--light);
    }

    .cta-sec .textarea {
      height: 200px;
      resize: none;
      display: flex;
      background-color: var(--light);
    }

    .cta-sec .message-text {
      text-align: center;
      margin-top: 10px;
    }

    .cta-sec #form-status.success {
      color: #54687d;
      margin-top: 12px;
      font-weight: bold;
    }

    .cta-sec #form-status.error {
      color: #ef1e07;
      margin-top: 12px;
      font-weight: bold;
    }

    .cta-sec .btn-spinner {
      display: inline-block;
      animation: spin 1s linear infinite;
    }

    .cta-sec .btn-spinner.hidden {
      display: none;
    }

    .cta-sec .theme-btn[disabled] {
      opacity: 0.7;
      cursor: not-allowed;
    }

    .cta-sec .fa-spinner {
      animation: spin 1s linear infinite;
    }
    
    .cta-sec .fa-spinner::before {
      content: "\f110";
      animation: spin 1s linear infinite;
    }

    /* Editor styles (visible in editor) */
    .cta-sec .html-content-area{
      width: 100%;
    }
    
    .cta-sec .editor-section {
      border: 2px dashed #ccc;
      padding: 20px;
      background: #f9f9f9;
      border-radius: 8px;
      margin-top: 20px;
    }

    .cta-sec .editor-section h3 {
      color: #333;
      margin: 0 0 15px 0;
      font-size: 16px;
      text-align: left;
    }

    .cta-sec .template-item {
      margin: 10px 0;
      display: flex;
      align-items: center;
      gap: 10px;
      text-align: left;
    }

    .cta-sec .template-item label {
      font-weight: bold;
      color: #555;
      min-width: 120px;
      font-size: 14px;
    }

    .cta-sec .success-template-text {
      color: #54687d;
      font-size: 14px;
      font-weight: bold;
      border: 1px solid #ddd;
      padding: 5px 10px;
      border-radius: 4px;
      background: white;
      flex: 1;
      text-align: left;
      outline: none;
    }

    /* Hide editor content in preview mode */
    .preview-mode .cta-sec .editor-section {
      display: none;
    }

    .cta-sec .editor-section {
      display: none;
    }

    #htmlContent .cta-sec .editor-section {
      display: block;
    }

.fa-arrow-right::before {
    content: "\f061";
}

.fa-arrow-left::before {
    content: "\f060";
}

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

input[type="number"] {
  -moz-appearance: textfield;
}

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @media (max-width: 992px) {
      .cta-sec {
        background: linear-gradient(180deg, #FFFFFF 0%, #E7EFFA 3.7%, #F0F5FC 88.9%, #FFFFFF 100.81%);
      }
    }
	
	/* Turn the existing confirm modal into a polished bottom-right toast — CSS only, no HTML change */
/* Position: centered, below header */
#confirmModel .modal-dialog {
    position: fixed !important;
    top: 90px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    max-width: 320px !important;
    width: calc(100% - 40px) !important;
}
#confirmModel .modal-content {
    border-radius: 12px;
    box-shadow: 0 6px 24px 0 rgba(0,0,0,0.18);
    padding: 0;
    overflow: hidden;
}

/* Header — success message */
#confirmModel .modal-header {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px !important;
    border-bottom: 1px solid #eee;
    background: #f3faf3;
}
#confirmModel .modal-header .close {
    display: none !important;
}
#confirmModel .modal-title {
    font-size: 14px !important;
    font-weight: 600;
    color: #1e7e34;
    margin: 0;
    text-align: center;
}
/* Checkmark - plain unicode, no font dependency */
#confirmModel .modal-title::before {
    content: "\2713";
    margin-left: 6px;
    color: #28a745;
    font-weight: 700;
}

/* Body — image right, name left */
#confirmModel .modal-body {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 16px !important;
    text-align: right;
}
#confirmModel .modal-body img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid #eee;
}
#confirmModel .modal-body h5 {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: #000;
    text-align: right;
    flex: 1;
}
#confirmModel .modal-body hr,
#confirmModel .modal-body .row {
    display: none !important;
}

/* Kill the dark background overlay so only the small box shows */
#confirmModel.modal {
    background: transparent !important;
    pointer-events: none;
}
#confirmModel .modal-dialog,
#confirmModel .modal-dialog * {
    pointer-events: auto;
}
.modal-backdrop {
    display: none !important;
}