.top-navbar {
   padding: 1.875rem 0;
}

#hero-section {
   margin-top: 108px;
   flex-shrink: 0;
   border-radius: 30px;
   background: var(--gray-900);
   color: var(--base-white);
   /* animation: scale-up-center 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; */
}

.navbar-nav {
   gap: 2.5rem;
}

.navbar .nav-item .nav-link {
   color: var(--gray-900);
   font-family: Gilroy;
   font-size: 1rem;
   font-style: normal;
   font-weight: 600;
   line-height: 137.5%;
}

.navbar .nav-item .nav-link:is(.active), 
.navbar .nav-item .nav-link:focus,
.navbar .nav-item .nav-link:hover,
.navbar .nav-item .nav-link:active {
   color: var(--base-black);
   font-weight: 700;
   position: relative;
   display: flex;
   justify-content: center;
}

.navbar .nav-item .nav-link:is(.active)::after { 
   position: absolute; 
   content: ''; 
   bottom: 4px; 
   text-align: center;
   width: 0; 
   height: 2px; background-color: var(--gray-900); 
   animation: activeNavLink 500ms forwards;
} 

.avatar-group {
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

.avatar-group .avatar {
   margin-left: -12px;
}

.avatar-group .avatar img {
   border: 4px solid var(--gray-900);
   border-radius: 50%;
   background-color: var(--base-white);
   height: 2.625rem;
   width: 2.625rem;
   overflow: hidden;
   object-fit: cover;
}

[border-white="true"]{
   border: 4px solid var(--base-white) !important;
}

.title-1 {
   color: var(--base-white);
   font-family: Gilroy;
   font-size: 3rem;
   font-style: normal;
   font-weight: 600;
   line-height: 125%;
   letter-spacing: -0.96px;
}

.title-2 {
   color: var(--base-white);
   font-family: Gilroy;
   font-size: 1.75rem;
   font-style: normal;
   font-weight: 600;
   line-height: 116.667%;
   letter-spacing: -1.2px;
}

.title-3 {
   color: var(--gray-900);
   font-family: Gilroy;
   font-size: 2.25rem;
   font-style: normal;
   font-weight: 600;
   line-height: 122.222%;
   letter-spacing: -0.72px;
}

.title-4 {
   color: var(--base-white);
   font-family: Gilroy;
   font-size: 2.25rem;
   font-style: normal;
   font-weight: 600;
   line-height: 122.222%;
   letter-spacing: -0.72px;
}

.section-title {
   color: var(--gray-900);
   font-family: Gilroy;
   font-size: 1.125rem;
   font-style: normal;
   font-weight: 600;
   line-height: 144.444%;
}

.paragraph-1 {
   font-family: Gilroy;
   font-size: 1.125rem;
   font-style: normal;
   font-weight: 500;
   line-height: 144.444%;
}

.paragraph-2 {
   font-family: Gilroy;
   font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: 137.5%;
}

.paragraph-3 {
   font-family: Gilroy;
   font-size: 0.75rem;
   font-style: normal;
   font-weight: 500;
   line-height: 133.333%;
   opacity: 0.8;
}

.avatar-header {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 1rem;
   margin-left: 8px;
}

.avatar-header img {
   height: 60px;
   width: 60px;
   border-radius: 50%;
}

.detail-banner-top-right {
   position: absolute;
   right: 0%;
   top: 5%;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   transform: scale(0.8);
}

.detail-doctor-left {
   position: absolute;
   left: -18%;
   bottom: 0%;
   transform: scale(0.7);
}

#pra-quem .pra-quem-cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
   grid-gap: 1.3rem;
}

.pra-quem-card {
   display: flex;
   flex-direction: column;
   align-items: start;
   justify-content: flex-start;
   gap: 1rem;
   padding: 2rem 2rem 1rem;
   border-radius: 20px;
}

.pra-quem-card > img {
   border-radius: 10px;
   padding: 10px;
   background: var(--base-white);
   height: 3.625rem;
   width: 3.625rem;
}


.professional-health-card {
   color: var(--gray-700);
   background: var(--gray-300);
}

.professional-health-card h3 {
   color: var(--gray-900);
}

.health-business-card {
   color: var(--base-white);
   background: var(--gray-900);
}

.health-business-card h3 {
   color: var(--base-white);
} 

.how-to-work-card .card-body {
   border-radius: 20px;
   background: var(--gray-100);
   padding: 4rem 4rem 0 4rem;
   position: relative;
   background-repeat: no-repeat;
   background-size: auto;
   background-position: bottom center;
   height: 420px;
}

.how-to-work-card .card-img-top {
   object-fit: contain;
   width: auto;
}

.how-to-work-card .card-footer {
   padding: 2rem 1rem 0 0;
   background-color: var(--base-white);
   border: none;
}

.how-to-work-card .card-footer {
   color: var(--gray-600);
   font-family: Gilroy;
   font-size: 1.2rem;
   font-style: normal;
   font-weight: 500;
   line-height: 140%;
}

.how-to-work-card .card-title {
   color: var(--gray-900);
   font-weight: 600;
   padding-bottom: 1rem;
}

.how-to-work-card .step-number {
   height: 52px;
   width: 52px;
   position: absolute;
   left: 30px;
   top: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--gray-900);
   font-family: Gilroy;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
   line-height: 140%;
}

.doctor-holding-paper {
   border-radius: 30px;
   position: relative;
   background: url(./../images/doctor-holding-paper.png) no-repeat;
   width: min(600px, 100%);
   height: 485px;
   background-size: contain;
   object-fit: cover;
   background-position: bottom;
}

.detail-doctor-holding-paper {
   position: absolute;
   left: 5%;
   bottom: 5%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-end;
}

.detail-doctor-holding-paper img + img {
   height: 6rem;
   backdrop-filter: blur(20px);
}

.detail-doctor-holding-paper h5, 
.detail-doctor-holding-paper h2 {
   z-index: 2;
}

[data-overlay]::before {
   position: absolute;
   content: '';
   left: 0;
   right: 0;
   bottom: 0;
   height: 40%;
   width: 90%;
   border-radius: inherit;
   margin: 0 auto 1%;
   opacity: 0.45;
   filter: blur(32px);
   background: radial-gradient(circle, rgba(2,0,36,1) 28%, rgba(34,34,44,0.5970982142857143) 150%);
}

#vantagens .advantage-icons {
   width: 3.75rem;
   height: 3.75rem;
   padding: 1rem;
   border-radius: 50%;
   background-color: var(--brand-colors-primary-100);
}

#vantagens .card {
   padding: 1.5rem;
   flex-direction: row;
   gap: 1rem;
}

/* swipwer component */
.swiper-media swiper-container {
   width: 100%;
   height: 100%;
}

.swiper-media swiper-slide {
   background: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   height: auto;
}

.swiper-media swiper-slide img {
   object-fit: cover;
}

.swiper-testimonials {
   height: 100vh;
   max-height: 820px;
   --swiper-scrollbar-drag-bg-color: #fff;
   --swiper-scrollbar-border-radius: 0px;
   --swiper-scrollbar-size: 2px;
   --swiper-scrollbar-bg-color: rgba(255,255,255, 0.2);
}

.swiper-testimonials .customer-testimonials-card {
   height: auto !important;
   max-width: 500px;
   padding: 2rem 2.5rem;
   border-radius: 20px;
   background: var(--base-white);
   opacity: 0.1;
   transition: opacity 0.1s;
}

.swiper-testimonials .customer-testimonials-card svg {
   margin-bottom: 1.5rem;
}

.customer-testimonials-card:is(.swiper-slide-active) {
   opacity: 1;
}

.swiper-testimonials .swiper-scrollbar {
   right: -30px;
   color: #fff;
   max-height: 400px !important;
   margin: auto;
}

.swiper-testimonials .customer-testimonials-card p {
   color: var(--gray-900);
   font-family: Gilroy;
   font-size: 1.2rem;
   font-style: normal;
   font-weight: 500;
   line-height: 133.333%;
   padding-bottom: 1.5rem;
} 

.avatar-testimonials {
   display: flex;
   gap: 1rem;
   align-items: center;
}

.avatar-testimonials img {
   width: 3.75rem;
   height: 3.75rem;
   border-radius: 50%;
}

.avatar-testimonials .advantage-icons {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 3.75rem;
   height: 3.75rem;
   padding: 1rem;
   border-radius: 50%;
   background-color: var(--brand-colors-primary-100);
   color: var(--gray-900);
   font-family: Gilroy;
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
   line-height: 100%;
   gap: 1px;
}
/* end swiper component */

.numbers-info {
   display: flex;
   flex-wrap: wrap;
   gap: 2rem 1rem;
   padding: 1.5rem 0;
}

.numbers-info .card-info {
   display: flex;
   align-items: center;
   flex: 1 0 150px;
   gap: 1rem;
}

.numbers-info .card-info img {
   height: 3.75rem;
   width: 3.75rem;
   border-radius: 50%;
   display: flex;
   padding: 1rem;
   gap: 1rem;
   border: 1px solid var(--gray-200);
}

#o-click-plantao .cards {
   display: grid;
   grid-template-columns: 310px 310px;
   grid-gap: 1.2rem;
}

#o-click-plantao .card {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   border: none;
   border-radius: 30px;
   margin-top: 0;
   padding: 0;
   overflow: hidden;
   background-color: var(--gray-100);
   height: 310px;
   width: 310px;
   background-size: contain;
   background-position: bottom;
   background-repeat: no-repeat;
} 

#o-click-plantao .kp-logo {
   background-color: var(--gray-100);
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 5rem;
   border-radius: 50%;
   border: none;
   background-size: contain;
}

#o-click-plantao .img-2 {
   background-image: url('../images/girl-doctor.png');
}

#o-click-plantao .img-3 {
   background-image: url('../svg/app-home.svg');
}

#o-click-plantao .img-4 {
   background-image: url('../images/team-kp.png');
   position: relative;
}

#o-click-plantao .img-4 img {
   height: 2.5rem;
   width: 2.5rem;
   position: absolute;
   top: 1.5rem;
   left: 1.5rem;
}

#o-click-plantao .img-4 .text-image {
   padding: 0.5rem 2rem;
}

.download-app-section {
   border-radius: 30px;
   padding: 2.5rem 3rem 0;
}

#blog .left-side-image {
   background-image: url("./../images/doctor-left-mask.jpg");
   border-radius: 20px;
   height: 412px;
   width: 100%;
   background-size: cover;
}

#blog .post-info {
   padding: 2rem 0;
}

#blog .post-info p {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 4px;
   color: var(--gray-600);
   font-family: Gilroy;
   font-size: 0.87rem;
   font-style: normal;
   font-weight: 500;
   line-height: 130%;
   padding-bottom: 1rem;
   margin-bottom: 0;
}

.subtitle-1 {
   color: var(--gray-900);
   font-family: Gilroy;
   font-size: 1.5rem;
   font-style: normal;
   font-weight: 600;
   line-height: 133.333%;
}

.subtitle-2 {
   color: var(--base-white);
   font-family: Gilroy;
   letter-spacing: -0.96px;
   font-size: 1.25rem;
   font-style: normal;
   font-weight: 600;
   line-height: 140%;
}

.subtitle-3 {
   color: var(--gray-600);
   font-family: Gilroy;
   font-size: 1.125rem;
   font-style: normal;
   font-weight: 500;
   line-height: 144.444%;
}

#blog .right-side-image {
   background-image: url("./../images/person-with-pen.jpg");
   background-position: bottom;
   background-size: cover;
   border-radius: 20px;
   height: 412px;
   width: 100%;
}

.accordion { 
   border-radius: 20px;
   border: 1px solid var(--gray-200); 
   overflow-x: hidden;
}
 
.accordion-item {
   border: none;
   border-bottom: 1px solid var(--gray-200);
}

.accordion-item:nth-child(7) {
   border-bottom: none;
}

.accordion-button:not(.collapsed), .accordion-item {
   color: var(--gray-900);
   background-color: var(--gray-50);
}

.accordion-button:not(.collapsed) {
   font-weight: 600 !important;
   box-shadow: none;
}

#faqAccordion .subtitle-2 {
   padding: 2rem;
   gap: 12px;
}

#faqAccordion .subtitle-2,
#faqAccordion .paragraph-1 {
   font-size: 1rem;
   font-weight: 500;
}

.accordion-body a {
   text-decoration-line: underline;
   color: var(--gray-600);
}

.accordion-button:not(.collapsed)::after {
   height: 2rem;
   width: 2rem;
   content: '';
   border-radius: 50%;
   background-position: center;
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.0227 4.66675L10.0088 15.3334" stroke="white" stroke-width="1.6"/><path d="M4.6665 10H15.3332" stroke="white" stroke-width="1.6"/></svg>');
   transform: rotate(-45deg);
   background-color: var(--brand-colors-primary-500);
   border: 1px solid var(--brand-colors-primary-500);
}
.accordion-button:is(.collapsed)::after {
   height: 2rem;
   width: 2rem;
   content: '';
   border-radius: 50%;
   background-position: center;
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.0227 4.66675L10.0088 15.3334" stroke="%23101828" stroke-width="1.6"/><path d="M4.6665 10H15.3332" stroke="%23101828" stroke-width="1.6"/></svg>');
   transform: rotate(0);
   background-color: var(--base-white);
   border: 1px solid var(--gray-200);
   transition: all 0.2s;
}

#baixar-app .avatar-group .avatar img {
   border: 4px solid var(--gray-900);
   border-radius: 50%;
   background-color: var(--gray-100);
   height: 4.75rem;
   width: 4.75rem;
   overflow: hidden;
   object-fit: cover;
}

#baixar-app .avatar-group {
   margin-bottom: 2rem;
}

#rodape .logo {
   height: 3rem;
   margin-bottom: 3rem;
}

#rodape .qr-code {
   height: 8.75rem;
}

#rodape .nav-link {
   color: var(--gray-900);
   font-family: Gilroy;
   font-size: 1.125rem;
   font-style: normal;
   font-weight: 600;
   line-height: 144.444%;
}

#rodape .subtitle {
   color: var(--gray-600);
   font-family: Gilroy;
   font-size: 0.875rem;
   font-style: normal;
   font-weight: 500;
   line-height: 128.571%;
}

#rodape .form-control {
   border-radius: 10px;
   border-color: var(--gray-200);
   height: 3.25rem;
   padding-left: 1rem;
}

#rodape .form-control::placeholder {
   color: var(--gray-600);
   font-family: Gilroy;
   font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: 137.5%;
}

.navbar-collapse:is(.show) {
   overflow-y: scroll !important;
}

/* overwrite */
.tab-content>.active {
   display: flex;
   gap: 1.75rem;
}

/* animations */
@keyframes activeNavLink {
   from { width: 0; }
   to { width: 96%; }
}

/* .ani-scale-up-center {
	animation: scale-up-center 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes scale-up-center {
   0% {
      transform: scale(0.5);
   }
   100% {
      transform: scale(1);
   }
}

.ani-slide-right {
	animation: slide-right 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-right {
   0% {
      transform: translateX(-100px);
   }
   100% {
      transform: translateX(0px);
   }
}

.ani-slide-left {
	animation: slide-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-left {
   0% {
      transform: translateX(100px);
   }
   100% {
      transform: translateX(0px);
   }
} */

/* end animations */

@media (max-width: 768px) {
   .navbar-nav {
      height: auto;
      gap: 0.75rem;
      padding: 2rem 0 0 0;
   }
   .navbar-nav .logo {
      height: 3rem;
      width: 3rem;
   }

   .navbar .nav-item .nav-link {
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 133.33%;
   }
   .detail-doctor-holding-paper .subtitle-2 {
      font-size: 1.125rem;
   }   
   .detail-doctor-holding-paper .title-1 {
      font-size: 1.625rem;
   }
   #faq .title-3 {
      font-size: 1.75rem;
   }
   #faq .accordion-body {
      padding: 0 2rem 2rem;
   }
   #faq .accordion {
      border-radius: 0;
   }
   #blog .title-3 {
      font-size: 1.875rem;
   }
   #o-click-plantao .card {
      width: 160px;
      height: 160px;
   } 
   #o-click-plantao .kp-logo img {
      width: 80px;
      height: auto;
   }
   #o-click-plantao .title-3 {
      font-size: 1.75rem;
   }
   #o-click-plantao .cards {
      grid-template-columns: 160px 160px;
      justify-content: center;
      grid-gap: 1.2rem;
   }
   .title-4 {
      font-size: 1.75rem;
   }
   #o-click-plantao .text-image .section-title {
      font-size: 0.578rem;
   }
   #o-click-plantao .paragraph-3 {
      font-size: 0.386rem;
   }
   #o-click-plantao .img-4 img {
      height: 1.5rem;
      width: 1.5rem;
      position: absolute;
      top: 1rem;
      left: 1rem;
   }
   #o-click-plantao .img-4 .text-image {
      padding: 0.5rem 1rem;
   }
   .how-to-work-card .card-img-top {
      width: 100%;
   }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
   #hero-section {
      max-width: 1350px;
      max-height: 700px;
   }

   .title-2 {
      font-size: 3.5rem;
   }

   .detail-doctor-left {
      left: -15%;
      bottom: 12%;
   }

   .detail-banner-top-right {
      right: 8%;
      top: 5%;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
   }

   .doctor-holding-paper {
      height: 710px;
   }  

   .detail-doctor-holding-paper {
      left: 7%;
   }

   .detail-doctor-holding-paper img + img {
      height: 8.75rem;
   }

   .numbers-info .card-info {
      flex: 1 0 250px;
      gap: 1rem;
   }

   #baixar-app .avatar-group {
      margin-bottom: 7rem;
   }

   #faqAccordion .subtitle-2,
   #faqAccordion .paragraph-1 {
      font-size: 1.25rem;
      font-weight: 600;
   }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

 }

 /* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
   #vantagens {
      margin-bottom: 10rem;
   } 
   #vantagens .card {
      flex-direction: column;
      gap: 1rem;
   }
}

/* menu mobile */
.navbar-toggler {
   position: relative;
   width: 3rem;
   height: 3rem;
   border-radius: 50%;
}
.navbar-toggler, 
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus{
   outline: none;
   box-shadow: none;
}
.navbar-toggler.collapsed {
   background-color: var(--base-white);
}
.navbar-toggler:not(.collapsed) {
   background: var(--gray-900);
}
.navbar-toggler:not(.collapsed) .toggler-icon {
   background: var(--base-white);
}
.navbar-toggler span {
   padding: 0;
   margin: 0;
}
.toggler-icon {
   display: block;
   position: absolute;
   height: 2.7px;
   width: 1.5rem;
   background: var(--gray-900);
   border-radius: 0;
   opacity: 1;
   margin-inline: auto;
   transform: rotate(0deg);
   transition: 0.3s ease-in-out;
}
.navbar-toggler .top-bar {
   margin-top: 0;
   transform: rotate(135deg);
}
.navbar-toggler .bottom-bar {
   margin-top: 0;
   transform: rotate(-135deg);
}
.navbar-toggler.collapsed .top-bar {
   margin-top: -10px;
   transform: rotate(0deg);
}
.navbar-toggler.collapsed .bottom-bar {
   margin-top: 10px;
   transform: rotate(0deg);
} 

/* end responsive */
/* custom classes */
.text-gray-100 { color: #F2F4F7; }
.text-gray-200 { color: #EAECF0; }
.text-gray-300 { color: #D0D5DD; }
.text-gray-600 { color: #475467; }
.text-gray-700 { color: #344054; }
.text-gray-900 { color: #101828; }

.bg-gray-100 { background-color: #F2F4F7; }
.bg-gray-200 { background-color: #EAECF0; }
.bg-gray-300 { background-color: #D0D5DD; }
.bg-gray-600 { background-color: #475467; }
.bg-gray-700 { background-color: #344054; }
.bg-gray-900 { background-color: #101828; }

/* custom variables */
:root {
   --base-white: #FFFFFF;
   --gray-50: #F9FAFB;
   --gray-100: #F2F4F7;
   --gray-200: #EAECF0;
   --gray-300: #D0D5DD;
   --gray-600: #475467;
   --gray-700: #344054;
   --gray-800: #1D2939;
   --gray-900: #101828;
   --base-black: #000000;
   --brand-colors-primary-100: #FFF3F3;
   --brand-colors-primary-500: #FB3B3B;
   --brand-colors-primary-600: #FA0A0A;
   --brand-colors-primary-900: #CD0404;
   --brand-colors-secondary-600: #084EBA;
   --brand-colors-secondary-900: #063989;
   --swiper-pagination-color: var(--base-black);
   --swiper-pagination-bullet-size: 6px;
   --swiper-pagination-bullet-opacity: 1;
   --swiper-pagination-bullet-inactive-opacity: 0.3;
}


/* .ani-rtl { animation: rightToLeft 0.8s ease-out; }
@-webkit-keyframes rightToLeft {
   from { left: 50%; }
   to { left: 0; }
}
@keyframes rightToLeft {
   from { left: 50%; }
   to { left: 0; }
}

.ani-ltr { animation: leftToRight 0.8s ease-out; }
@-webkit-keyframes leftToRight {
   from { right: 50%; }
   to { right: 0; }
}
@keyframes leftToRight {
   from { right: 50%; }
   to { right: 0; }
} */