/* // PRESET FILES */

:root {
  /* color  */
  --primary-color: #429088;
  --secondary-color: #155289;

  --base-white: #fff;
  --base-dark: #000;
  --base-bg: #003951;
  --base-off-white: #e0d9d6;

  --heading-color: #2f2f2f;
  --paragraph-color: #626362;

  --svg-stroke-color:  #2f2f2f;


  --nav-color: #00194c;
  --nav-color-hover: var(--primary-color);

  --white-text: #fff;

  --link-color: var(--heading-color);

  --primary-button-color: #00c1ff;

  --error: #bb2124;
  --success: #38a644;



  /* font */
  --primary-font: "Rajdhani", sans-serif;

  /* Bootstrap override */
  --bs-body-font-family: var(--primary-font);
  --bs-body-font-size: 16px;
  --bs-body-line-height: 1.5;
  --bs-body-font-weight: 600;
  --bs-body-color: var(--heading-color);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

main {
  width: 100%;
  float: left;
  overflow: hidden;
  padding-top: 100px;
}

section {
  width: 100%;
  float: left;
}

.common-section-wrpr {
  width: 100%;
  float: left;
  padding: 90px 0;
}

.common-section-title-link-wrpr{
  display: flex;
  align-items: center;
}
.common-section-title-link-wrpr .vmore-link{
  width: auto;
  padding: 8px 15px;
  border : 1px solid var(--base-off-white);
  margin-bottom: 18px;
  white-space: nowrap;
  border-radius: 35px;
}

body{
  scroll-behavior: scroll;
}

/* ---------COMMON USES---------- */
h1{
  font-size: 50px;
  line-height: 50px;
  font-weight: 600;
  position: relative;
  z-index: 2;
  color: var(--secondary-color);
}

h1::before{
    content: "";
    position: absolute;
    inset-inline-end: auto;
    inset-inline-start: -80px;
    top: 100%;
    margin: auto;
    width: 120px;
    height: 40px;
    background-image: url("../images/main-slider/pattern/slider-pattern.svg");
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}


h2 {
  width: 100%;
  float: left;
  font-size: 42px;
  line-height: 65px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 18px;
}

h3 {
  width: 100%;
  float: left;
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--heading-color);
}

h4{
  width: 100%;
  float: left;
  position: relative;
  font-size: 27px;
  line-height: 42px;
  color: var(--white-text);
  font-weight: 600;
  padding-bottom: 15px;
  margin-bottom: 25px;
}

h4::before{
  content: "";
  position: absolute;
  width: 30px;
  height: 4px;
  border-radius: 10px;
  background-color:  var(--primary-button-color);
  inset-block-start: 100%;
}

h5{
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: var(--base-dark);
  margin-bottom: 20px;
}

p {
  font-size: 19px;
  line-height: 28px;
  font-weight: 500;
  color: var(--paragraph-color);
  margin-bottom: 0;
}

.sub-para {
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  color: var(--paragraph-color);
}

.heading-color{
  color: var(--heading-color);
}

.vmore-link{
  width: auto;
  font-size: 16px;
  line-height: 26px;
  color: var(--secondary-color);
  transition: all 0.3s ease-in-out;
}

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


.common-from-wrpr{
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.form-group{
  width: 100%;
  margin-bottom: 20px;
}

.form-group:last-child {
  margin-bottom: 0;
}


.form-group-split{
  width: calc(50% - 10px);
  float: left;
}

.error-message{
  width: 100%;
  float: left;
  font-size: 10px;
  line-height: 15px;
  padding-top: 2px;
  color: var(--error);
}

.form-control{
  width: 100%;
  float: left;
  border: 1px solid var(--base-off-white);
  padding: 10px 15px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: var(--heading-color);
  resize: none;
}

.form-submit{
  width: auto;
  float: right;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: var(--white-text);
  background-color: var(--primary-button-color);
  padding: 12px 45px;
  border: 0;
  border-radius: 35px;
  cursor: pointer;
  margin-inline-start: auto;
  transition: all 0.3s ease-in-out;
}

.form-submit:hover{
  background-color: var(--secondary-color);
}

.common-btn{
  width: auto;
  float: left;
  padding: 18px 50px;
  border: 1px solid var(--base-off-white);
  font-size: 16px;
  line-height: 16px;
  border-radius: 35px;
  color: var(--secondary-color);
  box-shadow: none;
  transition: all 0.3s ease-in-out;
}

.primary-btn{
  background-color: var(--primary-button-color);
  color: var(--white-text);
  border-color: var(--primary-button-color);
}

.primary-btn:hover{
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--white-text);
}

.secondary-btn{
  padding: 0px;
  border-color: transparent;
  color: #555;
}

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

/* --------- EOF COMMON USES---------- */



/* --------------HEADER----------- */
.header-section {
  width: 100%;
  float: left;
  height: 100px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
  padding-top: 35px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  transition: all 0.3s ease-in-out;
  background-color: var(--base-white);
}

.header-section.scroll-down{
  top: -35px;
}


.header-top {
  width: 100%;
  background-color: var(--base-bg);
  height: 35px;
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

.header-link-wrpr {
  width: auto;
  display: flex;
  gap: 30px;
  font-size: 14px;
  line-height: 14px;
  color: var(--white-text);
  height: 40px;
}

.header-link-wrpr li {
  width: auto;
  float: left;
  display: flex;
  gap: 10px;
  align-items: center;
}

.header-link {
  width: auto;
  float: left;
  color: var(--white-text);
  transition: all 0.3s ease-in-out;
}

.header-link i {
  color: #78b3ca;
}

.header-contact-link-wrpr {
  margin-inline-start: auto;
}

.header-social-link-wrpr {
  width: auto;
  height: 100%;
  margin-inline-start: 15px;
  border-inline-start: 1px solid #346d84;
  padding-inline-start: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 14px;
}

.header-social-link {
  color: var(--white-text);
}

.header-bottom {
  width: 100%;
  background-color: var(--base-white);
}

.header-inner {
  width: 100%;
  height: 65px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.logo-wrpr {
  width: 45px;
  height: 45px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-wrpr img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: contain;
}

.hambergur {
  width: 35px;
  height: 40px;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px;
  gap: 4px;
  background-color: transparent;
  box-shadow: none;
  border: 0;
  margin-inline-start: 15px;
  display: none;
}

.hambergur span {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--secondary-color);
}

.header-cover-wrpr{
  width: auto;
  margin-inline-start: auto;
}

.header-cover-wrpr .header-top-logo{
  display: none;
}

.navbar {
  width: auto;
  margin-inline-start: auto;
}

.navbar-nav {
  width: auto;
  float: left;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 50px;
  color: var(--nav-color);
  font-size: 17px;
  line-height: 17px;
  font-weight: 600;
}

.navbar-nav li {
  width: auto;
  float: left;
  position: relative;
}

.navbar-nav li.active {
  color: var(--nav-color-hover);
}

.navbar-nav li:hover {
  color: var(--nav-color-hover);
}

.navbar-nav li::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background-color: var(--nav-color-hover);
  top: auto;
  bottom: -8px;
  left: 0;
  right: 0;
  margin: 0 auto;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.navbar-nav li.active::before {
  opacity: 1;
}

.navbar-link {
  color: inherit;
  transition: all 0.3s ease-in-out;
  font-weight: 600;
}

.navbar-link i{
  position: absolute;
  transform: rotate(-180deg);
  display: inline flow-root list-item;
}

.navbar-sub-nav {
  width: 150px;
  float: left;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1;
  padding: 20px 15px;
  background-color: var(--base-white);
  color: var(--heading-color);
  gap: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.125);
  font-size: 14px;
  line-height: 14px;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  pointer-events: none;
}

.navbar-sub-nav li {
  width: 100%;
  float: left;
}

.navbar-sub-nav li a {
  font-size: inherit;
  color: inherit;
}

.navbar-submenu:hover .navbar-sub-nav {
  opacity: 1;
  pointer-events: auto;
}

.navbar-submenu:target .navbar-sub-nav {
  opacity: 1;
  pointer-events: auto;
}

/* ----- EOF HEADER ------ */



/* MAIN SLIDER */

.slider-section{
  position: relative;
}

.slider {
  width: 100%;
  float: right;
  position: relative;
  display: block;
  max-width: 100vw;
}

.slider-block {
  width: 100%;
  float: left;
  height: 70vh;
  position: relative;
  min-height: 500px;
  /* min-height: calc(100vh - 100px); */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.15);
}

.slider-block::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 100%;
  inset-inline-start: 0;
  top: 0;
  background: linear-gradient(to right, var(--base-off-white) 60%, transparent);
}

.slider-image {
  width: 100%;
  height: 100%;
  float: left;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

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

.slider-content {
  width: 100%;
  position: relative;
}

.slider-title {
  width: 100%;
  float: left;
  font-size: 65px;
  line-height: 55px;
  font-weight: 600;
  color: var(--secondary-color);
  /* transform: scale(2) translateX(-40%) translateY(-100%); */
  transform: scale(0);
  transition: all 0.8s ease-in-out;
  transition-delay: 0.1s;
}

.slider-title small {
  width: 100%;
  float: left;
  font-size: 30px;
  line-height: 30px;
  color: var(--primary-color);
  letter-spacing: -1px;
}

.slider-title span {
  width: 100%;
  float: left;
  padding-inline-start: 57px;
  position: relative;
}

.slider-title span::before {
  content: "";
  position: absolute;
  inset-inline-end: auto;
  inset-inline-start: -80px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 120px;
  height: 40px;
  background-image: url("../images/main-slider/pattern/slider-pattern.svg");
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}

.slick-track {
  float: left;
}


.slider-animation-wrpr{
  width: 385px;
  height: 415px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
  inset-inline-end: 10%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.slider-animation-wrpr:hover .slider-shape{
  /* transform: scale(0.8); */
  transform: scale(0.85);
}

.slider-shape{
  width: 150px;
  height: 150px;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: all 0.5s ease-in-out;  
  cursor: pointer;
  pointer-events: none;
  color: var(--white-text);
}

.slider-animation-wrpr .slider-shape:hover{
  transform: scale(1.2);
  z-index: 2;
}
.slider-shape-link{
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.slider-shape::after{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  z-index: -1;
  opacity: 0.8;
  background-image: url("../images/main-slider/shape/1.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.slider-animation-1{
  left: 0;
  top: 0;
  right: 0;
  margin: auto;
}

.slider-animation-2{
  inset-inline-start: 0;
  top: 70px;
  margin: auto;
  background-image: url();
}

.slider-animation-3{
  left: 0;
  right: 0;
  margin: auto;
  top: 140px;
}

.slider-animation-4{
  inset-inline-end: 0;
  top: 70px;
  margin: auto;
}

.slider-animation-5{
  inset-inline-start: 0;
  top: 210px;
  margin: auto;
}


.slider-animation-6{
  inset-inline-end: 0;
  top: 210px;
  margin: auto;
}

.slider-animation-7{
  left: 0;
  top: 280px;
  margin: auto;
  right: 0;
}

.slider-shape svg{
  width: 100%;
  height: 60px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
  pointer-events: none;
  transition: all 2s ease-in-out;
}

.slider-shape svg path{
  stroke: transparent;
  fill: var(--white-text);
}

.slider-shape img{
  filter: brightness(0) invert(1);
}


.slider-right-images{
  position: absolute;
  top: 0;
  width: 80vw;
  height: 100%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation-name: mini-sway;
  animation-duration: 20s;
 animation-iteration-count: infinite;
}

.slider-right-images img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-right-images.image-1{
  width: 30vw;
  height: 60%;
  right: 25%;
  top: 0;
  bottom: 0;
  margin: auto;
  animation-name: mini-sway-reverse;
  animation-duration: 10s;
 animation-iteration-count: infinite;
 
}

@keyframes mini-sway {
  0% {
    transform: rotate(0.5deg) translateY(35px);
  }
  50% {
    transform: rotate(-0.5deg) translateY(-35px);
  }
  100% {
    transform: rotate(0.5deg) translateY(35px);
  }
}


@keyframes mini-sway-reverse {
  0% {
    transform: rotate(-0.5deg) translateY(-15px) translateX(-15px);
  }
  50% {
    transform: rotate(0.5deg) translateY(15px)  translateX(0px);
  }
  100% {
    transform: rotate(-0.5deg) translateY(-15px)  translateX(-15px);
  }
}



/* EOF MAIN SLIDER */

/* -----HOME SERVICE------ */

.home-service-section{
  width: 100%;
  float: left;
  padding: 180px 0 90px 0;
}

.split-block-wrpr {
  width: 100%;
  float: left;
  padding-top: 45px;
}

.split-block-link {
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.split-block-link .icon {
  width: 60px;
  height: 60px;
  float: left;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* .split-block-link .icon::before{
  content: "";
  position: absolute;
  width: 70px;
  height: 15px;
  inset-inline-start: auto;
  inset-inline-end: auto;
  bottom: -15px;
  margin: auto;
  z-index: -1;
  background-color: #f5f5f5;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  transform: scale(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.125);
} */


.split-block-link svg {
 position: absolute;
 transition: all 0.2s ease-in-out;
 /* transition-delay: 0.2s; */
 /* opacity: 0.5; */
}

.split-block-link svg path {
  stroke: var(--svg-stroke-color); 
  stroke-dasharray: 350px;
  stroke-dashoffset: 0px;
  transition: all 3s ease;
  stroke-width: 1px;
  stroke-linecap: round;
}


.split-block-link:hover svg path {
  stroke-dasharray: 350px;
  stroke-dashoffset: 700px;
}

.split-block-link:hover svg {
  opacity: 1;
}


/* .split-block-link:hover .icon::before{
  transform: scale(1.1);
} */

.split-block-link .sub-para {
  margin-bottom: 35px;
}


.side-image{
  width: 100%;
  min-height: 100%;
  position: relative;
  max-width: 520px;
}

.side-image-pattern{
  width: 200px;
  height: 200px;
  position: absolute;
  top: -70px;
  margin-inline-start: -90px;
  z-index: 1;
  animation-name: spin;  
  animation-duration: 50s; 
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

.side-image-cover{
  position: relative;
  z-index: 2;
}

.slick-slide{
  overflow: hidden;
}

.slick-initialized .slick-active .slider-title{
  transform: scale(1);
}




/* -----EOD HOME SERVICE------ */


/* -----HOME PRODUCT------ */
.home-product-block {
  margin-bottom: 15px;
}

.home-product-block .image-wrpr {
  width: 100%;
  height: 260px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--base-off-white);
  margin-bottom: 25px;
  border: 1px solid var(--base-off-white);
}

.home-product-block .image-wrpr::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.125);
  left: 0;
  top: 0;
  z-index: 2;
  transition: all 0.3s ease-in-out;
}

.home-product-block .image-wrpr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  transition: all 0.3s ease-in-out;
}

.home-product-block .sub-para {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 20px;
}

.home-product-block:hover .image-wrpr img {
  transform: rotate(2deg) scale(1.1);
}
.home-product-block:hover .image-wrpr::after{
  opacity: 0;
}
/* -----EOF HOME PRODUCT------ */



/* -----HOME BRAND------ */

.brand-slider{
  width: 100%;
  float: left;
}

.brand-block{
  width: 100%;
  height: 60px;
  float: left;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}


/* -----EOF HOME BRAND------ */



/* -----FOOTER SECTION------ */


.footer-section{
  width: 100%;
  float: left;
  background-color: var(--base-bg);
  color: var(--white-text);
  font-size: 17px;
  line-height: 20px;
  padding-bottom: 50px;
}

footer p{
  width: 100%;
  float: left;
  color: inherit;
  font-size: inherit;
  line-height: 30px;
}

.footer-bottom{
  width: 100%;
  float: left;
  margin-top: 80px;
  padding-top: 15px;
  border-top: 1px solid #346d84;
}

.footer-info{
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 25px;
  font-weight: 500;
}

.footer-info li{
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
}

.footer-info i{
  width: 30px;
  float: left;
  font-size: 22px;
  line-height: 25px;
}

.footer-info span{
  width: auto;
  float: left;
  flex: 1 0;
}

.footer-info span a{
  color: inherit;
  width: auto;
  transition: all 0.3s ease-in-out;
}

.footer-info span a:hover{
  color: var(--primary-color);
}

.footer-link{
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 15px;
  font-weight: 500;
}
.footer-link li{
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
}

.footer-link a{
  color: inherit;
  width: auto;
  float: left;
  transition: all 0.3s ease-in-out;
}

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

.sub-menu{
  width: 100%;
  float: left;
  font-size: 80%;
  padding-inline-start: 10px;
  padding-top: 10px;
}


.footer-logo{
  width: 55px;
  height: 55px;
  filter: brightness(0) invert(1);
  margin-bottom: 5px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
}

.copyright{
  width: 100%;
  float: left;
  font-size: 14px;
  line-height: 16px;
}

.footer-social{
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 18px;
  line-height: 18px;
  margin-top: -30px;
}

.footer-social a{
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: all 0.3s ease-in-out;
}

.footer-social a:hover{
  background-color: var(--white-text);
  color: var(--base-bg);
}

.back_to_top{
  width: 40px;
  height: 40px;
  position: fixed;
  float: left;
  bottom: 100px;
  z-index: 5;
  background-color: var(--white-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  inset-inline-end: 40px;
  border: 1px solid var(--base-off-white);
  opacity: 0;
  transform: scale(0);
}
.back_to_top.active{
  opacity: 1;
  transform: scale(1);
}

.overlay{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 10;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  opacity: 0;
}

.overlay.active{
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.whatsapp{
  width: 35px;
  height: 35px;
  position: fixed;
  border-radius: 50%;
  background-color: #3a3c41;
  color: var(--white-text);
  bottom: 40px;
  inset-inline-start: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 20px;
  z-index: 5;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.subscribe-from{
  width: 100%;
  float: left;
  padding-top: 25px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 15px;
  position: relative;
}

.subscribe-from .form-control{
  padding-inline-end: 100px;
  border-radius: 20px;
  border: 0;
}

.subscribe-from .form-submit{
  width: auto;
  padding:  10px 20px;
  position: absolute;
  inset-inline-end: -0px;
  top: auto;
  bottom: 0;
  margin: auto;
  height: 38px;
  z-index: 1;
}

.subscribe-from .form-submit:hover{
  background-color: var(--primary-color);
}

.subscribe-text{
  width: 100%;
  float: left;
  padding-top: 25px;
  color: var(--white-text);
  font-size: 10px;
  line-height: 10px;
  font-weight: 500;
}

/* -----EOF FOOTER SECTION------ */


/* -----COMMON INNER BANNER SECTION------ */
.common-banner-section{
  width: 100%;
  float: left;
  position: relative;
  height: 350px;
  background-color: var(--base-off-white);
  overflow: hidden;
  padding: 55px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.common-banner-section::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.5);
}

.common-banner-image-overlay{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  overflow: hidden;
}

.common-banner-image-overlay img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -----EOF COMMON INNER BANNER SECTION------ */




/* ----ABOUT PAGE SECTION-----  */

.vision-mission-section{
  width: 100%;
  float: left;
  padding-top: 80px;
}

.vision-mission-block{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 245px;
  margin: 0 auto;
}

.about-main-icon{
  width: 125px;
  height: 125px;
  float: left;
  text-align: center;
  font-size: 200px;
  line-height: normal;
  color: var(--primary-button-color);
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.vision-mission-block h4{
  color: var(--heading-color);
  padding-bottom: 0;
  margin-bottom: 20px;
}

.vision-mission-block h4::before{
  display: none;
}

.vision-mission-block h4 span{
  color: var(--primary-color);
}

/* -----EOF ABOUT PAGE SECTION----- */


/* -----CONTACT SECTION-----  */

.location-iframe{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--base-off-white);
  min-height: 250px;
}

.location-iframe iframe{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}


/* -----EOF CONTACT SECTION----- */





/* -----PRODUCT TYPE SECTION-----  */
.product-type-section{
  width: 100%;
  float: left;
}

.product-type-block{
  width: 100%;
  height: 100%;
  border: 1px solid var(--base-off-white);
  padding: 15px;
  border-radius: 5px;
}

.product-image-cover{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.product-image-cover img{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
}


/* -----EOF PRODUCT TYPE SECTION-----  */



/* -----PRODUCT BLOCK SECTION-----  */
.product-section{
  width: 100%;
  float: left;
}

.product-section .home-product-block{
  width: 100%;
  float: left;
  height: 100%;
  border: 1px solid var(--base-off-white);
  padding: 15px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.product-section h3{
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-section .sub-para{
  width: 100%;
  float: left;
  margin-bottom: 5px;
}

.product-section .vmore-link{
  width: auto;
  margin-top: auto;
  max-width: fit-content;
}

/* -----EOF PRODUCT BLOCK SECTION-----  */




/* -----PRODUCT DETAIL SECTION-----  */
.product-detail-section{
  width: 100%;
  float: left;
}

.product-detail-img{
  width: 100%;
  height: 60vh;
  position: relative;
  overflow: hidden;
  background-color: var(--base-off-white);
  border: 1px solid var(--base-off-white);
}

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

.product-detail-content{
  width: 100%;
  float: left;
  padding-top: 25px;
}

.product-detail-content h1{
  color: var(--heading-color);
}

.product-detail-content h1::before{
  display: none;
}

.stock-status{
  width: 100%;
  float: left;
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 10px;
}

.in-stock{
  color: var(--success);
}

.out-of-stock{
  color: var(--error);
}

.product-price-wrpr{
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 30px;
}

.product-price-wrpr h4{
  width: auto;
  margin-bottom: 0;
  padding: 0;
  line-height: normal;
  color: var(--heading-color);
}

.product-price-wrpr h4::before{
  display: none;
}

.product-price-wrpr span{
  font-size: 12px;
  line-height: 12px;
  color: var(--heading-color);
}

.product-price-wrpr small{
  width: 100%;
  float: left;
  color: #c66a08;
  /* color: var(--success); */
  font-size: 18px;
  line-height: 20px;
}

.action-btn-wrpr{
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 25px;
}

.product-detail-info{
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  margin-bottom: 35px;
}

/* .product-detail-info li{
  width: auto;
  flex: 1 calc(50% - 25px);
} */

/* -----EOF PRODUCT DETAIL SECTION-----  */



/* ---------------------------------------------- */
/* MEDIA QUERY  */

@media (max-width: 576px) {
  .form-group-split{
    width: 100%;
  }
}

/* ------------- */
[dir="rtl"] .slick-slide {
  float: left;
}

[dir="rtl"] .slider-block {
  background: linear-gradient(to left, var(--base-off-white) 60%, transparent);
}


/* KEYFRAME */
@keyframes spin {
  from {
    transform: rotate(0deg);  /* Start from 0 degrees */
  }
  to {
    transform: rotate(360deg);  /* Rotate to 360 degrees (one full spin) */
  }
}









/* MEDIA QUIERY  */
@media screen and (max-width: 1200px) {
  .hambergur{
    display: flex;
    margin-left: auto;
  }

  .header-cover-wrpr{
    width: 100vw;
    height: 100%;
    position: fixed;
    left: -300px;
    top: 0;
    max-width: 300px;
    background-color: var(--base-white);
    overflow: auto;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start; 
    z-index: 15;
  }

  .header-cover-wrpr.open{
    left: 0;  
  }

  .header-section.scroll-down{
    top: 0;
  }

  .header-section{
    padding-top: 0;
    height: 65px;
  }

  .header-top{
    height: auto;
    width: 100%;
    overflow: unset;
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 20px 15px;
  }

  .header-top .col-12.d-flex{
    flex-wrap: wrap;
  }

  .header-cover-wrpr .header-top-logo{
    display: flex;
    width: 100%;
    /* background-color: var(--base-bg); */
    background-color: var(--base-off-white);
    height: 120px;
    padding: 25px;
    order: 1;
    pointer-events: none;
  }

  .header-cover-wrpr .header-top-logo img{
    position: relative;
    pointer-events: auto;
  }

  .header-link-wrpr{
    width: 100%;
    height: auto;
    justify-content: center;
    margin-top: 15px;
  }

  
  .header-link-wrpr:first-child{
    margin-top: 0;
  }

  .header-link-wrpr i{
    display: none;
  }

  .header-social-link-wrpr{
    width: 100%;
    float: left;
    height: auto;
    display: none;
  }

  .navbar{
    padding: 35px 20px;
    flex: 1 0;
    display: flex;
    flex-direction: column;
  }

  .navbar-nav{
    width: 100%;
    gap: 0px;
  }

  .navbar-nav li{
    width: 100%;
    position: relative;
    margin-bottom: 20px;
  }

  .navbar-nav li:last-child{
    margin-bottom: 0;
  }

  .navbar-sub-nav{
    width: 100%;
    float: left;
    position: relative;
    top: 0;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    gap: 0px;
    z-index: 0;
  }

  main{
    padding-top: 65px;
  }


  .whatsapp{
    display: none;
  }


  .slider-animation-wrpr{
    display: none;
  }


}