@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
:root{
    --color-prime:#e26fa8;
    --color-light-prime:#f4cce2;
    --bg-color-main:#ffffff;
    --header-border:#f5d4e6;
    --footer-bg:#232e5c;
    
}

html {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; margin: 0; padding: 0;}
body { font-family: 'Poppins', sans-serif;  font-size:100%; line-height:1.5; background-color:#ffffff; color:#000000;}
img { margin: 0 auto; display: block;}
/*sup { top: -0.25em!important; }*/
.wrapper {
    overflow: hidden;
    background-color: #fff;
}
.headerSec{ border-bottom: 1px solid #cd6576;}
.headerWrap{ width:100%; min-height: 80px;}
.logo { max-width: 150px; display: inline-block;}
.brand-logo { max-width: 120px; display: inline-block;}
.header-top { background: #d47e88; padding: 10px;  font-size: 1em; color: #532a2b; }
.header-top-hcp { background: #d47e88; padding: 10px;  font-size: 0.875em; color: #fff; }
.btn-pi { padding: 5px; text-decoration: none; background: #ffffff; color: #d47e88; text-align: center; display: inline-block; transition: 0.5s; }
.btn-pi:hover {background:#6a3331; color: #ffffff;} 
/* .mobile-logo {display: none;} */
.optionSec {
    width: 88%;
    /* min-height: calc(100vh - 253px); */
    padding: 25px 0px 0px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
    /* height: calc(100vh - 330px); */
    margin-bottom: 50px;
}
.entryPointBtn{ font-size:28px; line-height:32px; color:#cd6576; text-decoration: none;}
.entryPointBtn:hover{ text-decoration: none; color:#000000;}
.landing-icon { max-width: 150px;}

.navSec{ border-bottom: 1px solid #d47e88; background: #ffffff;}
.navSec .fa {color: #d47e88;}
.navbar-nav .nav-item .nav-link{ color:rgba(51, 51, 51, 1)}
.site-navigation .nav-item { margin: 0 30px;}
.navbar-light .navbar-nav .nav-link {position: relative; padding: 5px 15px;}
.navbar-light .navbar-nav .nav-link.active:after { content: ''; border: solid black; border-width: 0 1px 1px 0;display: inline-block;padding: 3px; transform: rotate(45deg); -webkit-transform: rotate(45deg); position: absolute; right: 0; top: 12px;}
.offcanvas-header{ display:none; }
.screen-darken{height: 100%;width:0%;z-index: 30;position: fixed;top: 0;right: 0;opacity:0;	visibility:hidden;	background-color: rgba(34, 34, 34, 0.6);
	transition:opacity .2s linear, visibility 0.2s, width 2s ease-in;}
.screen-darken.active{z-index:100; transition:opacity .3s ease, width 0s;  opacity:1;    width:100%;  visibility:visible;}
.sticky {position: fixed; top: 0; width: 100%; background-color: #ffffff; z-index: 99;}
.sticky + .section-content {padding-top: 102px;}

/* ============ mobile view ============ */
@media all and (max-width: 991px) {	
	.offcanvas-header{ display:block; margin-bottom: 24px;}
	.mobile-offcanvas{visibility: hidden;transform:translateX(-100%);  border-radius:0; display:block;  position: fixed;   top: 0; left:0;   height: 100%;  z-index: 1200;  width:80%;  overflow-y: scroll;  overflow-x: hidden; transition: visibility .3s ease-in-out, transform .3s ease-in-out; background: #cd6576;	}
	.mobile-offcanvas.show{visibility: visible;	transform: translateX(0);	}
	.mobile-offcanvas .container, .mobile-offcanvas .container-fluid{display: block;}

    .navbar-light .navbar-nav .nav-link { padding: 10px; color: #ffffff !important; }
    .navbar-light .navbar-nav .nav-link.active {color: #ffffff !important; background: rgba(0,0,0,0.5);}
    .site-navigation .nav-item {margin: 0;}
    .navbar-light .navbar-nav .nav-link.active:after {content:none; display: none; transform: rotate(-45deg);    -webkit-transform: rotate(-45deg); border-color: #ffffff;}
    .btn-close { color: #cd6576; font-size: 15px; font-weight: 700;  background: #fff;  padding: 0;  border-radius: 50%; border: 1px solid #cd6576;    line-height: 16px; height: 16px;  width: 16px; opacity: 1;}
}

.footerSec{ background:#6a3331; color: #fff;  padding: 60px 0;}
.copyrightSec{ border-top: 1px solid #ffffff; padding-top: 30px;}
.footerLinkList{ list-style-type: none; display: flex; justify-content: center; padding: 0; margin: 0;}
.footerLinkList li{ position: relative; padding: 0 10px; font-size:0.875em; line-height:1.5;}
.footerLinkList li::after{ content: ""; border-right: 1px solid #fff; height:15px; position: absolute; top:5px; right: -2px;}
.footerLinkList li:last-child:after{ display: none;}
.footerLink{  color:#fff; text-decoration: none;}
.footerLink:hover{color:#ccd6ff; text-decoration: none;}
.footer-user-info {width: 90%; max-width: 800px; margin: 0 auto; font-size:0.875em; line-height:1.5;}
.footer-msg { padding: 15px; border: 1px solid #ffffff; margin-bottom: 25px; text-align: center; font-size:0.875em; line-height:1.5;}

.topSec{ min-height:72px; background:var(--color-light-prime);}



/* Patient Block */
.arrow-section { padding: 3em 0; position: relative; border-bottom: 2px solid #cd6576; }
.arrow-section:after{content: ''; display: block; height: 40px; width: 40px; border: 2px solid #cd6576; background: #ffffff; border-radius: 50%; position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); z-index: 1;} 
.arrow-section:before{content: ''; border: solid #cd6576; border-width: 0 1px 1px 0;display: inline-block; padding: 4px; transform: rotate(45deg) translateX(-50%); -webkit-transform: rotate(45deg) translateX(-50%); transition: 0.5s; position: absolute; left: 50%; bottom: -5px; z-index: 2;  }
.bg-pink{background: #f0d3d5;}
.arrow-section.no-border {border:none;}
.arrow-section.no-arrow:before, .arrow-section.no-arrow:after { content: none;}

.patient-block h2{ color: #cd6576; font-weight: 700; font-size: 2.5em; padding-bottom: 15px;}

ul.list-tick { padding: 0; margin: 0; list-style: none;}
ul.list-tick li { position: relative; padding: 0 0 20px 35px;}
ul.list-tick li:before{content: ''; display: block; height: 23px; width:26px; position: absolute; left: 0; top: 5px; background: url(../images/bullet-tick.webp) no-repeat center center; background-size:cover} 

.btn-round-pink { display: inline-block; padding: 15px 25px; background: #dc969d; color: #ffffff; border-radius: 30px; text-decoration: none; border: 1px solid transparent; text-decoration: none; transition: 0.5s;}
.btn-round-pink:after{ content: ''; border: solid #ffffff; border-width: 0 1px 1px 0;display: inline-block; padding: 4px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transition: 0.5s; margin-left: 5px;}
.btn-round-pink:hover{ color: #dc969d; background: #ffffff; border-color: #dc969d; }
.btn-round-pink:hover:after{border-color: #dc969d;}

.btn-round-pink.small { padding: 5px 15px;}

.icon-white {width: 100px; height: 100px; border: 1px solid #cd6576; border-radius: 50%; background: #ffffff; margin: 0 auto;}

ul.list-pink-box{padding: 0 0 15px 0; margin: 0; list-style: none;}
ul.list-pink-box li { padding: 15px 15px 15px 60px; background: #f0d3d5; position: relative; display: flex; margin: 10px 0;}
ul.list-pink-box li:before{content: ''; display: block; height: 23px; width:26px; position: absolute; left: 20px; top: 20px; background: url(../images/bullet-tick.webp) no-repeat center center; background-size:cover} 
ul.list-pink-box li .content {width: calc(100% - 80px); padding-right: 15px;}
ul.list-pink-box li .count{ height: 80px; width: 80px; border: 1px solid #ffffff; background: #d47e88; border-radius: 50%; color: #ffffff; font-weight: 700; font-size: 2em; line-height: 2.25em; text-align: center; align-self: center}

.pink-box{ padding:15px; background: #f0d3d5; width: 90%; max-width: 700px; margin: 0 auto;}
.pink-box .count{height: 80px; width: 80px; border: 2px solid #ffffff; background: #e6417a; border-radius: 50%; color: #ffffff; font-weight: 700; font-size: 1em; line-height:normal; text-align: center; display: inline-block; margin: auto 2px;}
.pink-box .count.yellow{background: #f9b937;}
.pink-box .count span{display: block; font-size: 2em; line-height: 1em; padding-top: 15px;}

.video-wrapper{width: 100%; max-width: 600px; margin: 0 auto;}
.step-block {padding:50px 30px 30px 30px; margin: 50px auto 0 auto; background: #ffffff; position: relative; width: 90%; max-width: 600px; }
.step-icon {width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: #ffffff; border:2px solid #cd6576; position: absolute; left: 50%; top: -50px; transform: translateX(-50%);}
ul.list-step{padding: 0; margin: 0; list-style: none;}
ul.list-step li { padding: 15px;}
ul.list-step li h3 { color: #cd6576; font-weight: 700; font-size: 2em; padding: 0 0 10px 0; margin: 0;}
ul.list-step li p {padding: 0; margin: 0; line-height: 1.5;}
ul.list-step li:nth-child(even){background: #f5e2e3;} 
ul.list-step li h3 a {text-decoration: none; color: #cd6576; position: relative; display: inline-block; padding-right: 50px;}
ul.list-step li h3 a:before{content: ''; display: block; height: 32px; width: 32px; border: 1px solid #cd6576; border-radius: 50%; background: #ffffff; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
ul.list-step li h3 a:after{content: ''; border: solid #cd6576; border-width: 0 1px 1px 0;display: inline-block; padding: 5px; transform: rotate(-45deg) translateY(-50%); -webkit-transform: rotate(-45deg) translateY(-50%); transition: 0.5s;  position: absolute; right: 9px; top: 50%; margin-top: -2px;}
ul.list-step.step2,
ul.list-step.step3 { display: none;}

.usefull-content {min-height: 170px;}

.modal-content {font-size: 0.875em;}
.modal-content .btn{border-radius: 30px;}
.btn-round-outline { display: inline-block; padding: 15px 25px; background: #ffffff; color: #dc969d; border-radius: 30px; text-decoration: none; border: 1px solid #dc969d; text-decoration: none; transition: 0.5s;}
.btn-round-outline:hover {background: #dc969d; color: #ffffff;}
.btn-round-outline.small { padding: 5px 15px;}

button {outline: none !important; box-shadow: none !important;}



/* professional */
.professional .headerSec { background: #6a3331;}
.professional .navSec {background: transparent; border: none; position: fixed; top: 15px;  left: 50%; transform: translateX(-50%);}
.professional  .site-navigation .nav-item { margin: 0 5px;}
.professional .navbar-light .navbar-nav .nav-link {color: #ffffff; padding:3px;}
.professional .navbar-light .navbar-nav .nav-link.active:after {content: none; display: none;}
.professional .navbar-light .navbar-nav .nav-link.active:before{ content: ''; display: block; height: 1px; width: 100%; background: #ffffff; position: absolute; left: 0; bottom: 0;}
.professional .navSec.sticky { background-color: #6a3331; left: 0; top: 0; transform: none;}
.professional .navSec.mobile-nav { position: relative; background: #6a3331; top: 0;}
.professional .navSec.mobile-nav.sticky {position: fixed;}

.professional .sticky + .section-content {padding-top: 0;}

.btn-line-pink {padding:10px  15px; border:1px solid #dc969d; color:#dc969d; margin-top: 15px; display: inline-block; text-decoration: none; transition: 0.5s;}
.btn-line-pink:hover {text-decoration: none; color: #ffffff; background-color: #dc969d;}



@media all and (max-width: 1279px) {	
    .professional .navbar-light .navbar-nav .nav-link {font-size: 12px;}
}
@media all and (max-width: 991px) {	
.professional .navSec.mobile-offcanvas {background-color: #6a3331; top: 0; left: 0; transform: translateX(-100%); }	
.professional .navSec.mobile-offcanvas.show{transform: translateX(0);} 
.professional .navbar-light .navbar-nav .nav-link.active:before {content: none; display: none;}
.professional .navbar-light .navbar-nav .nav-link.active {background: rgba(0,0,0,0.6);}
}

/* .professional .patient-block h2 { color: #6a3331;} */

.list-bullet {padding: 0; margin: 0; list-style: none;}
.list-bullet li { padding: 5px 0 5px 20px; position: relative;}
.list-bullet li:before{content: '';; display: block; height: 6px; width: 6px; border-radius: 50%; background: #dc969d; position: absolute; left: 0; top: 12px;}
.foot-msg {padding: 10px; text-align: center; background: #d69097; color: #ffffff;}
.footer-professional {background: #fff url(../images/footer-bg.jpg) repeat 0 0; padding-bottom: 30px; position: relative;}
.footer-professional:after{content: ''; display: block; height: 100%; width: 100%; position: absolute; top: 0; right: 0; background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(242,219,218,1) 84%);}
.footer-content {position: relative; z-index: 2;}

.professional .footer-user-info {background: #ffffff; border: 1px solid #000000; color: #000000; max-width: 800px; margin: 25px auto;}
.professional .copyrightSec {border: none; padding-top: 0;}
.professional .footerLinkList li {color: #6a3331;} 
.professional .footerLinkList li::after {border-right: 1px solid #6a3331; top: 2px;}
.professional .footerLink {color: #6a3331;}
.professional .footer-msg {margin-bottom: 0;}

.download-box{ padding: 100px 30px 30px 30px; position: relative; background: rgb(202,104,119);background: linear-gradient(90deg, rgba(202,104,119,1) 0%, rgba(123,106,100,1) 55%); margin-top: 50px;}
.download-box h3 {color: #ffffff; font-weight: 700; text-align: center; line-height: normal; }
.download-box .img-box{ position: absolute; top: -75px; left: 50%; transform: translateX(-50%); height: 150px; width: 150px; border-radius: 50%; overflow: hidden; border: 5px solid #d68a96;}

ol.list-number li {padding-bottom: 10px; padding-left: 15px; }
ol.list-number li a { color: #000000; text-decoration: none;}
ol.list-number li a:hover {text-decoration: underline;}
.modal-content .modal-header { background: #6a3331; border: none; padding:5px 15px; color: #ffffff;}
.modal-content .modal-header h4 { font-weight: 700; padding: 5px 0; margin: 0;}
.modal-content .modal-header .btn-close {background: none; color: #ffffff; font-size: 24px; font-weight: 300; height: 32px; width: 32px; padding: 0;}

.headerDisclaimer {background: #fff url(../images/footer-bg.jpg) repeat 0 0;  position: relative; min-height: 200px; position: relative; z-index: 1;}
.DisclaimerContent { position: relative; z-index: 2;}
.DisclaimerContent h2 { background: #ffffff; box-shadow: 0 5px 5px rgba(0,0,0,0.16); padding: 50px;  font-weight: 700; font-size: 2.5em; margin-top: -80px; margin-bottom: 30px;    }


/*-- Responsive --*/
@media screen and (max-width:1700px) {

}

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


}

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


}

@media screen and (max-width: 991px) {
body {font-size: 80%;}
.patient-block h2 {font-size: 2.5em;}
.desktop-header {display: none !important;}
ul.list-pink-box li .count {line-height: 3em;}
.step-block { padding: 50px 15px 15px 15px;}
ul.list-step li h3 {font-size: 1.5em;}


}

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

    .entryPointBtn{ font-size:22px; line-height:26px; margin-bottom: 20px;}
    .entryPointBtn img{ width: 120px;}


}

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

    .logo,
    .brand-logo { width: 100px;}
    .footerLinkList{display: block; text-align: center;}
    .footerLinkList li::after{display: none;}

    .landing-icon { margin: 0 auto 15px auto!important;}

}

@media screen and (max-height: 450px) {

}

/* ================== INT UPDATE ================== */

.general-public-text{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
}

 .general-public-text h1 a {
    font-size: 24px;
    line-height: 30px;
    color: #cd6576;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
 }

  .general-public-text h1 a:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    width: 0px;
    height: 2px;
    background-color: #cd6576;
    transition: 0.6s all;
  }

.general-public-text h1 a:hover::after{
    width: 100%;
}

.landing-first-modal{
    z-index: 10000;
}

.landing-first-modal p{
    font-size: 15px;
    line-height: 24px;
}

.landing-second-modal p a{
    position: relative;
    text-decoration: none;
    color: #cd6576;
    font-weight: 600;
}

.landing-second-modal p a:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    width: 0px;
    height: 1px;
    background-color: #cd6576;
    transition: 0.6s all;
  }

.landing-second-modal p a:hover::after{
    width: 100%;
}


/* ================== INT CSS UPDATE 12-04-2024 START ================== */

.header-top-hcp {
    background: #d47e88;
    padding: 10px;
    font-size: 0.875em;
    color: #fff;
    position: fixed;
    width: 100%;
    top: 80px;
}

.header-top-hcp.sticky {
  top: 46px;
}

.adverse-section{
  padding-top: 50px;
}

@media all and (max-width: 1200px) {

.header-top-hcp.sticky {
    top: 40px;
}

.header-top-hcp{
    padding: 4px 10px;
}
}



@media all and (max-width: 991px) {	

.entryPointBtn{
    font-size: 22px;
    line-height: 36px;
}

.footer-user-info .btn-round-pink {
    margin-right: 10px;
}
}

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

.entryPointBtn{
    font-size: 18px;
    line-height: 30px;
}

.general-public-text p a{
    font-size: 20px;
}

.footer-user-info .btn-round-pink {
    padding: 12px;
}
}


@media all and (max-width: 575px) {

.entryPointBtn img {
    width: 70px;
}

.general-public-text{
    padding-top: 60px;
}

.general-public-text p a {
    font-size: 18px;
    line-height: 24px;
}

.entryPointBtn{
    font-size: 16px;
    line-height: 22px;
}
}

@media all and (max-width: 410px) {

.general-public-text p a {
    font-size: 16px;
    line-height: 22px;
}
}

/* ================== INT CSS UPDATE 12-04-2024 FINISH ================== */

/* ================== INT CSS UPDATE 14-04-2024 START ================== */

.landing-body-info{
    height: calc(100vh - 254px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* ================== INT CSS UPDATE 14-04-2024 FINISH ================== */


/* ================== INT CSS UPDATE 16-04-2024 START (Responsive Work) ================== */

.landing-body-info .optionSec{
    gap: 30px;
    display: flex;
}

.about-kelhale-banner-img{
    margin-bottom: 20px;
}

.landing-body-info .optionSec .entryPointBtn{
    width: calc(50% - 15px);
    margin-right: 0px !important;
}

.landing-body-info .optionSec .entryPointBtn .landing-icon{
    width: 120px;
    flex: none;
}

.landing-body-info .optionSec .entryPointBtn .landing-icon img{
    width: 100% !important;
}

@media all and (max-width: 1200px) {

.landing-body-info .optionSec{
    width: 100%;
}

.landing-body-info .optionSec .entryPointBtn .landing-icon{
    width: 90px;
}

.landing-body-info .optionSec .entryPointBtn{
    font-size: 24px;
}

.general-public-text p a{
    font-size: 22px;
}
}


@media all and (max-width: 991px) {

.landing-body-info .optionSec .entryPointBtn .landing-icon{
    width: 75px;
}

.landing-body-info .optionSec .entryPointBtn {
    font-size: 20px;
    line-height: 28px;
}

.general-public-text p a{
    font-size: 20px;
}

.professional .navSec.mobile-nav{
    position: fixed;
    width: 100%;
}

.professional .navSec.mobile-nav .row .col.text-end{
    text-align: center !important;
}

.professional .navSec.mobile-nav .row .col.text-end:last-child{
    text-align: right !important;
}

.header-top-hcp{
    top: 79px;
}

.logo {
    max-width: 110px;
}

.professional .navSec.mobile-nav.sticky{
    padding: 0px !important;
}

.header-top-hcp.sticky {
    top: 60px;
}

.adverse-section {
    padding-top: 110px;
}

}

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

.landing-body-info .optionSec .entryPointBtn .landing-icon {
    width: 65px;
}

.landing-body-info .optionSec .entryPointBtn {
    font-size: 18px;
    line-height: 26px;
}

.general-public-text p a {
    font-size: 18px;
}

.landing-body-info{
    height: initial;
}

.header-top-hcp {
    top: 76px;
}

}

@media all and (max-width: 575px) {

.landing-body-info .optionSec{
    flex-direction: column;
}

.landing-body-info .optionSec .entryPointBtn {
    width: 100%;
}

.landing-body-info .optionSec .entryPointBtn .landing-icon {
    width: 80px;
}

.landing-body-info .optionSec{
    margin-bottom: 0px;
    gap: 10px;
}

.general-public-text {
    padding-top: 30px;
}

.general-public-text p a img{
    width: 45px;
    flex: none;
}

.header-top-hcp {
    top: 72px;
}

.header-top-hcp.sticky {
    top: 55px;
}

}

@media all and (max-width: 380px) {

.adverse-section {
    padding-top: 120px;
}
}

/* ================== INT CSS UPDATE 16-04-2024 FINISH (Responsive Work) ================== */