@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');


:root {
--link-clr: #d40101;
--text-dark: #000000;
--text-light: #4b4a4a;
--btn-bg: #d40101;
--btn-bg-hover: #eb4402;
--primary-textclr: #000000;
--bgdark: #051627;
--bgbluelight: #EFF6FF;
--bglight:#959292;
--primary-font:  "Mulish", sans-serif;
--secondary-font: "Mulish", sans-serif;
--fsbody: 17px;
--whiteclr: #fff;
 
}


.tcolor{color: var(--link-clr);}
.bg-site {background-color: var(--bgdark);color: #fff;}
.bg-light{ background-color: var(--bglight) !important;} 
.bg-dark {background-color: var(--bgdark) !important; color: #fff;} 
.text-light{color:var(--text-light) !important;} 
.bgblue-light{background-color: var(--bgbluelight);}


body{ font-family: var(--primary-font);  font-size: var(--fsbody); font-weight: 400;color: var(--primary-textclr); 
  line-height: 1.7;}
a{color: var(--link-clr);text-decoration:none;outline: none;}

a,
.btn,
button{-webkit-transition: all .3s;-moz-transition: all .3s;-o-transition: all .3s;transition: all .3s; }
a:hover {color: var(--btn-bg-hover); text-decoration: none;}
.fancybox-button{min-width: auto;} 

h1, h2, h3, h4, h5, h6{ font-family: var(--secondary-font); font-weight: 700; line-height: 1.2;  
margin-bottom: 20px; color: var(--text-dark);}
.main-section a.link {word-break: break-all;overflow: hidden;display: inline-block;}
a.link i {font-size: 11px;}
h1{font-size: 45px;}
h2,
.heading-h2{font-size: 40px; }
h3{font-size: 30px;}
h4{font-size: 26px;}
h5{font-size: 22px;}
h6{font-size: 16px;}
img{max-width: 100%;}
button, .btn, input[type="submit"]{  min-width: auto; padding: 11px 35px; cursor: pointer; position: relative; font-family: var(--secondary-font); box-shadow: none !important; color: #fff; background: var(--btn-bg); letter-spacing: 0; font-size: 18px; line-height: 21px; font-weight: 600; border-radius: 0px; 
  text-transform: capitalize; border: 0px; }
.heading-h2{margin-block-end: 10px;}
.headingtag{font-size: 15px; font-weight: 500; color: var(--bglight);}

[type=reset]:hover, [type=submit]:hover, button:hover, .btn:hover, html [type=button]:hover  {
  background: var(--btn-bg-hover);  color: #fff;  cursor: pointer;}
[type=reset]:focus, 
[type=submit]:focus,
button:focus, 
.btn:focus, 
html [type=button]:focus { outline: 0; box-shadow: none;}
input[type="file"] { font-size: 16px;   -webkit-appearance: none;}

.field {margin-bottom: 20px; width: 100%; float: left;}
.field-sm { float: left;  width: 50%;  padding: 0px 10px;}
.field .field-sm:first-child { padding-left: 0px;}
.field .field-sm:last-child { padding-right: 0px;}
form{display: inline-block;width: 100%;}
.form-control {outline: none !important;padding: 10px 15px;border-radius: 4px;
  border: 1px solid var(--bgdark); background: #fff;box-shadow:none !important;
  font-size: 15px;font-weight: 400;color: var(--text-dark);  font-family: var(--secondary-font);}
textarea.form-control { min-height: 91px;}
.form-control:focus {  background-color: transparent;  border-color: inherit;} 
select.form-control:not([size]):not([multiple]) { height: 49px; -webkit-appearance: none;   background-image: url(images/select-arrow.png);
    background-position: 95% center;    background-repeat: no-repeat;}
blockquote { padding: 25px 48px 25px 25px;  border-left: 4px solid #000;
   background: var(--bgbluelight);   font-weight: 400;   position: relative;  line-height: 28px; }
blockquote strong{font-weight:500;}
blockquote:before {content: "";  position: absolute;   top: 0;   right: 0;   border-style: solid;  border-width: 0 41px 41px 0;  
    border-color: #ddd #fff;   transition: all ease .5s;}
.form-group label {display: block;  margin-bottom: 10px;}
.sm-container{padding: 0px 85px;}

 /* nochange*/
 
.font-medium{ font-weight: 500;}
.underline {text-decoration: underline;}
 strong { font-weight: 700;}
.font-light{font-weight: 300;}
.font-semi-bold{font-weight: 600;}
button i { vertical-align: middle;}
.br-5{border-radius: 5px;}
.br-10{border-radius: 10px;}
.box-shadow{ box-shadow: 5px 5px 10px rgb(0 0 0 / 6%);}
.object-fit {overflow: hidden;}
.object-fit img { width: 100% !important; height: 100% !important;  object-fit: cover;}
.zoom-hover img {-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition: all .5s;}
.zoom-hover:hover img {transform: scale(1.1);}
.list-style {padding: 0px; list-style: none;}
.list-style li { display: inline-block;}
 

.white-placeholder .form-control::placeholder {  color:#FFF; opacity: 1;  }
.white-placeholder .form-control::-webkit-input-placeholder { color:#FFF; opacity: 1;}
.white-placeholder .form-control::-moz-placeholder {color:#FFF; opacity:1;}
.white-placeholder .form-control:-ms-input-placeholder {color:#FFF; opacity: 1;}
.white-placeholder .form-control:-moz-placeholder {color:#FFF; opacity: 1;}
.white-text{color: var(--whiteclr);}

.main-section{padding:60px 0px; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important;position: relative;}
.main-section .container{position:relative;}
.main-section:before{content:""; position:absolute; left:0px; top:0px; width:100% !important; height:100% !important; background:transparent; }
.howwork{background-image: url(images/ctabg.png); background-attachment: fixed !important;} 
 .howwork:before {  background: rgb(5 21 39 / 71%);}

  


/* header */
.logo { max-width: 120px;}
.header {position: fixed;top: 0px;left: 0px;width: 100%;z-index: 99;padding: 10px 0px;    }
header.header .header-main { background-color: rgb(255 255 255 / 76%);  padding: 5px 20px;  border-radius: 10px; backdrop-filter: blur(5px);}
.header-nav { display: flex; align-items: center;  justify-content: flex-end;  gap: 40px;}
.menu ul.list-style li {margin-right: 20px;position: relative; font-weight: 600;} 
.menu ul.list-style li:last-child { margin-right: 0; } 
.menu ul.list-style li a {color: #000;} 
.menu ul.list-style > li > a { padding: 12px 10px; display: inline-block; }

.menu ul.list-style li ul { position: absolute; left: 0px; width: 200px; padding: 0px; text-align: left; 
  background: #fff; top: 100%; opacity: 0; pointer-events: none; } 
.menu ul.list-style li:hover > ul{ opacity: 1; pointer-events: all;}  
.menu ul.list-style li ul li { margin: 0px; display: inline-block; width: 100%; } 
.menu ul.list-style li ul li a { display: inline-block; width: 100%; padding: 5px 10px; color: #757575; } 
.menu ul.list-style li ul li:hover > a { background: #eee; color: #757575; }
.nav-link.active,
.nav-link:hover{color: var(--btn-bg) !important; }
.help-btn small { font-size: 11px; font-weight: 600;}
.main-section.item{height: calc(100vh - 0px); display: flex; align-items: end; }
  
.typewrite h1 {  font-size: 33px; line-height: 1.6; font-style: italic;}
.typewrite { font-size: 30px; padding:30px; background: rgba(255, 255, 255, 0.5);   border-radius: 10px; 
   }
.overview { display: flex; align-items: self-start; gap: 40px; justify-content: space-between; padding: 30px; color: var(--whiteclr); background-color: var(--bgdark); } 
.ovitem .num {font-size: 30px;margin-block-end: 5px;line-height: normal;} 
.ovitem h3 { font-size: 18px; margin-block-end: 0px; color: var(--whiteclr);}


.howwork_container{display: flex; align-items: start; justify-content: space-between; gap: 30px;}
.hwitem{width: 100%;padding: 20px;border-radius: 50px;display: flex;flex-direction: column;gap: 10px;text-align: center;}
.hwitem_icon{font-size: 30px;width: 60px;height: 60px;display: flex;align-items: center;margin-inline: auto;background: #d50001;justify-content: center;border-radius: 100%;
margin-block-end: 20px;}
.hwitem h6, .hwitem h4{color: var(--whiteclr);}

.hwitem h6 {  margin-block-end: 0px;}
.hwitem h4 {  margin-block-end: 0px;  font-weight: 400;  font-size: 18px; line-height: 1.4;  opacity: 0.7;}

.main-heading.sticky {  position: sticky; top: 150px;}
.services_item { display: flex; background: linear-gradient(0deg, rgb(193 232 211 / 0%) 0%, rgb(185 204 230 / 44%) 9%, rgb(224 229 230 / 76%) 44%, rgb(158 245 255 / 46%) 88%, rgb(74 135 185 / 12%) 100%); border: 4px solid #fff; 
  box-shadow: rgba(0, 0, 0, 0.04) 0px 0.78363px 0.78363px -0.535714px, rgba(0, 0, 0, 0.04) 0px 1.91965px 1.91965px -1.07143px, rgba(0, 0, 0, 0.04) 0px 3.63745px 3.63745px -1.60714px, rgba(0, 0, 0, 0.04) 0px 6.35004px 6.35004px -2.14286px, rgba(0, 0, 0, 0.04) 0px 11.0519px 11.0519px -2.67857px, rgba(0, 0, 0, 0.03) 0px 20.2428px 20.2428px -3.21429px, rgba(0, 0, 0, 0.02) 0px 40px 40px -3.75px; border-radius: 20px; outline: 1px solid #dddddd; } 
.services_card { display: flex; flex-direction: column; gap: 50px; } .sr_img { width: 45%; border-radius: 10px; overflow: hidden; } 
.sr_content { width: 55%; padding: 20px; } 
.sr_img img { object-fit: contain;  rotate: -11deg;  right: -32px; position: relative;  border-radius: 12px;}
ul.checkbox_list { padding: 0px; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; } 
ul.checkbox_list li:before { content: "\eb80"; font-family: 'remixicon' !important; color: #0d6efd; } 
ul.checkbox_list li { display: flex; gap: 10px; }

.testSlider .item{padding: 2px;}
.c-img { display: inline-block; width: 93px; height: 93px; border-radius: 100%;overflow: hidden; box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);  }
.c-img img { width: 100%;  height: 100%;  object-fit: cover;}
.test-box {padding: 25px; position: relative;  border-radius: 20px; outline: 1px solid #dddddd;}
.testimonials-slider .item {padding-top: 50px;}
span.short-line {display: inline-block;width: 30px;height: 1px;background: var(--btn-bg);position: relative;top: -5px;}
.quott-icon { width: 30px; height: 30px; position: absolute; right: 30px; top: 32px; }
.tstimg img {  max-height: 700px; width: 100%; object-fit: cover; border-radius: 10px;}

.main-heading ul { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; padding: 0px; font-size: 15px; } 
.main-heading ul li { width: calc(50% - 10px); display: flex; gap: 10px; } 
.main-heading ul li:before{ content: "\eb80"; font-family: 'remixicon' !important; color: #999; }

/* owl */
.owl-dots button:before, .owl-dots button:after, 
.owl-dots button span:before, .owl-dots button span:after { display: none;}
.owl-dots { height: auto !important; width: 100%; text-align: center;padding-top:20px;  background: transparent !important;}
.owl-dots button {background-color: var(--primary-textclr) !important;overflow: hidden;display: inline-block;min-width: auto !important;margin-right: 7px;width: 14px;height: 5px;border: 1px solid #fff !important;border-radius:5px;}
.owl-dots button.owl-dot.active {background: var(--btn-bg) !important;}
.owl-dots button{box-shadow:none !important; outline:none !important;}
.owl-nav button { width: 50px; min-width: auto; height: 50px; position: relative; overflow: hidden;border: 1px solid #fff !important; color: #fff !important;pointer-events: all;}
.owl-nav button span {position: absolute;  z-index: 1;   min-width: auto;
    left: 50%;    top: 50%;    transform: translate(-50%, -50%);    line-height: 1;    font-size: 20px;}  
.owl-nav  .fa-angle-right:before {font-family: 'remixicon' !important; content: "\ea6e";}
.owl-nav .fa-angle-left:before {font-family: 'remixicon' !important; content: "\ea64";} 
.owl-carousel .owl-item img {width: auto;}

section.main-section.waysection {
    background: linear-gradient(0deg, rgb(193 232 211 / 73%) 0%, rgb(185 204 230 / 82%) 9%, rgb(224 229 230 / 76%) 44%, rgb(166 246 255 / 67%) 88%, rgb(74 135 185 / 97%) 100%);
}
 .waysection .main-heading{position: sticky; top: 100px;}
.tc_container{display: flex; gap: 100px; flex-direction: column;}
.wayitem{background: var(--whiteclr); padding: 30px; border-radius: 20px; max-width: 70%; margin-inline: auto; width: 100%;
position: sticky; top: 250px; transform: var(--rotate); color: var(--whiteclr); border: 8px solid #f0f1f2; display: flex; align-items: center;
    justify-content: space-between;  gap: 30px;}

.wayimg img { min-width: 300px; width: 300px; height: 300px; border-radius: 20px; object-fit: cover;}
.map-img {  max-width: 70%;  margin-inline-start: auto;}

marquee ul { display: flex; gap: 20px; list-style: none; padding: 0px; margin: 0px; font-size: 12px; } 
.locontainer { display: flex; gap: 30px; align-items: center; } 
.locontainer h5 { margin-block-end: 0px; font-size: 17px; white-space: nowrap; color: var(--whiteclr); } 
.location { background: var(--btn-bg); color: var(--whiteclr); padding: 10px; position: relative;}
.location:before { content: ""; position: absolute; left: 0px; top: 0px; width: 150px; height: 100%; background: #000; clip-path: polygon(0 0, 100% 0, 79% 100%, 0% 100%); } 
.location * { z-index: 1; }


.product_grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));  gap: 20px;}
.product_item { background: #f6f6f6; border-radius: 10px; text-align: center; padding: 20px; } 
.product_item img { max-height: 200px; width: 100%; aspect-ratio: 1; object-fit: contain; margin-block-end: 20px; } 
.product_item h3 { font-size: 17px; text-align: center; margin-block-end: 5px; } 
.rate { margin-block-end: 10px; color: #04b232; font-weight: 700; }
.btn-close{background: transparent !important; color: #000 !important;}
.btn-close:is(:hover, :focus){background: transparent !important;}
label { display: block; color: #605858; margin-block-end: 3px;}

.main-section.item.innerbanner{ height: calc(75vh - 0px);}
 .page_name {
    background: var(--btn-bg) !important;
    color: var(--whiteclr);
    padding: 5px 10px;
}

.error-page{padding-block-start: 200px;}

/* footer  */
 
 .cta-section { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('images/hero4.jpg');
background-attachment: fixed;}
 a.linkbtn {  color: #fff;  font-size: 30px; font-weight: 700; letter-spacing: 2px;}
a.linkbtn:hover span { text-decoration: underline;}

footer { background-color: var(--whiteclr);  padding-block-end: 0px; } 
footer.main-section.footer { background-color: var(--whiteclr); padding-bottom: 0px; font-size: 15px; } 
.footer-widget h3 {      font-size: 20px;  margin-block-start: 35px; border-left: 2px solid var(--btn-bg); padding-inline-start: 10px; } 
.footer-widget ul { list-style: none; padding-left: 10px; margin: 0px; } 
.footer-widget ul li a { color: var(--text-dark); } 
.footer-widget ul li a:hover { color: var(--link-clr);}
.footer-widget ul li { font-size: 15px; margin-block-end: 0px; } 
.contact-info { display: flex; gap: 20px; align-items: self-start; min-height: 40px; margin-block-end: 10px; padding-left: 10px; 
text-align: start;} 
.contact-info span.cnicon { width: 35px; height: 35px; background: var(--btn-bg); color: #fff; font-size: 20px; min-width: 35px; border-radius: 100%; display: flex; align-items: center; justify-content: center; } 
.contact-info a { color: var(--primary-textclr); } 
.contact-info a:hover { color: var(--link-clr); } 
.contact-info p { margin-block-end: 0px;}
.footer-bottom { font-size: 13px; padding-top: 10px; border-top: 1px solid #ddd; margin-block-start: 10px; }
a.whatsapp-btn { position: fixed;  left: 30px; bottom: 30px;  z-index: 99;}
.ringbell {
    -webkit-animation: ring 4s .7s 
ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s .7s 
ease-in-out infinite;
    transform-origin: 50% 4px;
}
.contpg{text-align: start !important;}

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }

  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}
       
 

.back-to-top {    position: fixed;  bottom: 20px;  right: 10px; text-align: center; font-size: 16px; color: #000000; letter-spacing: .308px; z-index: 1111;
    display: inline-block !important;}
.back-to-top span { border-radius: 50%; border: 1px solid #000;width: 42px;  height: 42px;  overflow: hidden;   display: inline-block;
 line-height: 42px;vertical-align: middle;  margin-left: 10px; letter-spacing: .308px; background:#000; color:#fff;}
 



/* breadcrumb */

 
 

 

 

@keyframes fadeInTop {
  from {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


/* container */
 

.container-left {
    padding-left: calc(50% - 570px);
}
 
@media (min-width: 767.98px){ 
.container { max-width: 100%;}
.mobbtn{display: none;}

 }


@media (min-width: 768px){
.container {max-width: 720px;}
}

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

}
@media (min-width: 1200px){
.container {max-width: 1170px;  }
.container-fluid {padding-left: 15px;  padding-right: 15px;}

}

 
@media (min-width: 1400px){
.container, .container-lg{  max-width: 1320px;}


}