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

:root{
    --primary1: 6,108,95; /* #066C5F; */
    --primary2: 160,43,45; /* #A02B2D */
    --primary3: 246,165,118; /* #F6A576 */
    --primary4: 250,247,242; /* #FAF7F2 */
    --color_gary: 130,130,130; /* #828282 */
    --baseColor: 96,96,96; /* #606060 */
    --color_black: 0,0,0;
    --color_white: 255,255,255;
    --baseFont: 'Poppins', sans-serif;    
    --imgPrimary1: invert(29%) sepia(27%) saturate(1721%) hue-rotate(128deg) brightness(101%) contrast(95%);
    --imgPrimary2: invert(14%) sepia(49%) saturate(4915%) hue-rotate(345deg) brightness(104%) contrast(81%);
    --imgPrimary3: invert(74%) sepia(8%) saturate(2878%) hue-rotate(331deg) brightness(100%) contrast(93%);
    --imgPrimary4: invert(96%) sepia(3%) saturate(813%) hue-rotate(327deg) brightness(104%) contrast(96%);
    --imgWhite: invert(100%) sepia(100%) saturate(0%) hue-rotate(13deg) brightness(103%) contrast(102%);
    --imgBlack: invert(0%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(93%) contrast(103%);
    --imgGray:  invert(58%) sepia(0%) saturate(1%) hue-rotate(194deg) brightness(88%) contrast(81%);
    --padding: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem);
}

body {font-family: var(--baseFont); font-weight: 400; color:rgb(var(--baseColor)); font-variant-ligatures: no-common-ligatures;}
a:hover, a:focus {outline: none; -webkit-box-shadow: none; box-shadow: none; text-decoration: none;}
button:focus {outline: none;}
.sprite {background-image: url("../images/sprite.png"); background-position: 0 0; background-repeat: no-repeat; display: inline-block; vertical-align: middle;}
.transition {-webkit-transition: all .3s linear; transition: all .3s linear;}

.container{max-width: 1440px; width: 100%;}
::selection {
  color: rgb(var(--color_white));
  background: rgb(var(--primary2));  
}

.bg{background-color: rgb(var(--primary4));}
.clr-primary1{color: rgb(var(--primary1)) !important;}
.clr-primary2{color: rgb(var(--primary2)) !important;}
.clr-primary3{color: rgb(var(--primary3)) !important;}
.clr-primary4{color: rgb(var(--primary4)) !important;}

#wrapper {max-width: 1920px; margin: 0 auto; position: relative; overflow: hidden;}

/* header */
header {max-width: 1920px; margin: 0 auto; background-color: rgb(var(--color_white));}
header {left: 0; right: 0; top: 0; z-index: 22;}
header .navbar-brand{transition: all .3s linear;}
header .nabh-logo {max-width: 125px;}
header.fixed1{background-color: rgba(var(--color_white),0.7); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); box-shadow: 0px 4px 50px rgb(0 0 0 / 10%);}


header .phone-number{color: rgb(var(--color_black)); text-decoration: none; font-weight: 500; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem);}
header .phone-number .icon{margin-right: 12px;}
header .phone-number:hover{color: rgb(var(--primary2));}

/* banner */
#banner { padding: clac(var(--padding) / 1.5) 0; transition: all 0.3s; position: relative; background-color: rgb(var(--primary1));}
#banner .banner-text h2.title span{color: rgb(var(--color_white));}
#banner .banner-text p{color: rgb(var(--color_white));}
#banner .pic-outer::before{content: ""; width: 773px; height: 781px; display: block; background-size: cover; background-image: url('../images/bg-shape01.png'); background-repeat: no-repeat; background-position: center center;
  position: absolute; top:20px; left: -60px; z-index: 0;}
#banner .pic-outer img{top: 80px; position: relative; z-index: 2;}
.form-group .error-inline{background-color: #dc3545; color: rgb(var(--color_white)) !important; padding: 5px; font-size: 14px;}
 
/* button custom */
.btn-custom *{transition: all .3s linear;}
.btn-custom { position: relative; padding: 16px 24px; line-height: normal; font-weight: 500; color: #121212; background-color: rgb(var(--primary3)); border-radius: 0; display: inline-flex; align-items: center; border: none; }
.btn-custom:hover{background-color: rgb(var(--primary2)); color: rgb(var(--color_white));}
.btn:first-child:active,:not(.btn-check)+.btn:active{border-color: rgb(var(--color_white)); background-color: rgb(var(--primary2)); color: rgb(var(--color_white));}

/* Typography */
.padding { padding:var(--padding) 0;}
.content p, .content ul, .content ol {font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem); line-height: 1.3; margin-bottom: 24px;}
.content p:last-child, .content ul:last-child, .content ol:last-child {margin-bottom: 0;}

h2.title span{font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem); text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; color: rgb(var(--primary2));}
h2.title{font-size: clamp(1.5rem, 1.3rem + 1vw, 2.5rem); line-height: 1.3; font-weight: 600; margin-bottom: 0; color: #121212;}
.sub-text{color: rgb(var(--primary2)); font-weight: 500; font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem); color: rgb(var(--primary2));}

h2.sub-title{font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem); color: rgb(var(--primary1));}

h3{ font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem); font-weight: 700; display: inline-block; margin-bottom: 24px;}

/* about */
#about{padding-top:calc(var(--padding) * 1.5);}


/* departments */
#departments{overflow: hidden; position: relative;}
#departments::before{content: ""; width: 773px; height: 781px; display: block; background-size: cover; background-image: url('../images/bg-shape01.png'); background-repeat: no-repeat; background-position: center center;
  position: absolute; top:-420px; left: -500px; z-index: 0;}
#departments .owl-carousel>div { overflow: visible;}
.product-item *{ transition: all .3s linear;}
.item.product-item{margin-bottom: 0;}
.product-item{margin-bottom: 1.5rem;}
.product-item .card{background-color: transparent;}
.product-item .card .ratio{--bs-aspect-ratio: 140%;}
.product-item .card-footer{background-color: transparent;}
.product-item .card-footer .info{color: #606060; }
.product-item .text{ color: rgb(var(--primary2)); margin-bottom: 8px; line-height: normal; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); font-weight: 600;}
#departments .slider .owl-nav{display: flex; justify-content: end; position: absolute; right: 0; top: -100px;}
#departments .slider .owl-nav button{margin-left: 30px;}
#departments .slider .owl-nav button.owl-prev .arrow-left{background-position: -4px -5px; width: 22px;height: 22px; filter: var(--imgGray); transition: none;}
#departments .slider .owl-nav button.owl-next .arrow-right{background-position: -40px -5px; width: 22px;height: 22px; filter: var(--imgGray); transition: none;}
#departments .slider .owl-nav button:hover .arrow-left{filter: var(--imgPrimary2);}
#departments .slider .owl-nav button:hover .arrow-right{filter: var(--imgPrimary2);}
#departments #counter{position: relative; bottom: calc(var(--padding)/2);}

hr{background-color: #D9D9D9; margin:3rem 0;}

/* therapy */
#therapy{background-color: rgb(var(--primary1));}
#therapy .ratio{--bs-aspect-ratio: 73%; margin-bottom: 18px;}
#therapy h4{color: rgb(var(--color_white));  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); font-weight: 600;}

/* packages */
#packages{}
#packages .ratio{--bs-aspect-ratio: 73%; margin-bottom: 16px;}
#packages h4{color: rgb(var(--primary2));  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); margin-bottom: 12px; font-weight: 600;}

/* footer */
#footer .top .f-logo{margin-bottom: 40px;}
#footer .top h4{font-weight: 500; color: rgb(var(--primary2)); font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem); margin-top: 20px;}
#footer .top .address{color: #606060;}
#footer .top a{color: #606060; text-decoration: none;}
#footer .top .contact-info a{margin-top: 30px; display: inline-block; text-decoration: none; color: rgb(var(--color_white)); font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem); font-weight: 700;}
#footer .top .contact-info a:hover{color: rgb(var(--primary2));}
#footer .top ul li {margin-bottom: 15px;}
#footer .top ul li a{color: #aaa; text-decoration: none;}
#footer .top ul li a:hover{color: rgb(var(--color_white));}

#footer .bottom{background-color: rgb(var(--primary2)); color: rgb(var(--color_white));}
#footer .bottom{font-size: 12px; padding: calc(var(--padding) / 3) 0;}
#footer .bottom a{color: rgb(var(--primary3)); text-decoration: none;}
#footer .bottom a:hover{color: rgb(var(--color_white))}

#totop {bottom: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; position: fixed; right: -40px; z-index: 9; background: rgb(var(--primary2)); text-align: center; transition: background-color .2s linear; opacity: 0; border-radius: 50%; box-shadow: 0px 10px 29.7px 3.3px rgba(0, 0, 0, 0.2);}
#totop i{ background-position: -68px -5px; width: 22px; height: 22px; filter: var(--imgWhite);}

 
/* form */
.request-form{margin-top: 30px;}
form .form-control{border-radius: 0; background-color: rgb(var(--color_white)); border: 1px solid rgb(var(--color_white)); padding: 13px 16px; color: rgb(var(--color_black));}
form .form-control:focus{box-shadow: none; border-color: rgb(var(--color_white)); color: rgb(var(--color_black));}
form .form-control::-webkit-input-placeholder {color: #828282;}
form .form-control::-moz-placeholder {color: #828282;}
form .form-control:-ms-input-placeholder {color: #828282;}
form .form-control:-moz-placeholder {color: #828282;}

form .input-group .input-group-addon{background: #f5f5f5;}
form .input-group .input-group-addon .refresh{padding: 15px 10px; cursor: pointer;}

form .input-group .input-group-text.upload-text{background-color: transparent; border: none; padding: 10px 0; height: auto; background-image: url('../images/upload-text.png'); background-repeat: no-repeat; width: 93px; padding: 15px 0;}
form .custom-file-button input[type=file] {margin-left: -2px !important; color: rgb(var(--color_white));}
form .custom-file-button input[type=file]::-webkit-file-upload-button { display: none;}
form .custom-file-button input[type=file]::file-selector-button {display: none;}
form textarea{resize: none; height: 160px;}
.wappicon {position: fixed; width: 60px; height: 60px; bottom: 20px; right: 105px; display: flex; align-items: center; justify-content: center; background-color: #25d366; color: rgb(var(--color_white)) !important; border-radius: 50px; box-shadow: 1px 1px 4px rgba(60, 60, 60, 0.4); transition: box-shadow 0.2s; font-size: 42px; z-index: 100; transition: all 0.4s; text-decoration: none;}
.wappicon:before, .wappicon:after {content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid rgb(37 211 102 / 63%); border-radius: 50%; z-index: -1;}
.wappicon:before {animation: btn_ring_anim 2s linear infinite;}
.wappicon:after {animation: btn_ring_anim 2s linear 1s infinite;}
@keyframes btn_ring_anim {
  0% {transform: scale(1); opacity: 0.1;}
  50% {transform: scale(1.3); opacity: 1;}
  100% {transform: scale(1.6); opacity: 0;}
}