/*
Theme Name: WeightLoss
Theme URI: https://templatejungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: WeightLoss – WeightLoss Landing Page Bootstrap 5 HTML Website Template
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/
    
/*--------------------------------------------------------------
/** VARIABLES
--------------------------------------------------------------*/
:root {
         font-family: "Montserrat", sans-serif;
         --body-font: "Montserrat", sans-serif;
         --bs-btn-font-family: "Montserrat", sans-serif;
}
:root {
        --bs-primary: #033435;
        --bs-primary-rgb: 243, 130, 82;
        --bs-secondary: #17495a;
        --bs-secondary-rgb: 89, 136, 152;
        --bs-info-rgb: 13, 202, 240;
        --body-color: #515151;
        --bs-heading-color: #333636;
        --bs-secondary-bg: #a8cedb;
        --bs-secondary-bg-rgb: 246, 246, 246;
        --bs-primary-bg-subtle: #edf5f6;
        --bs-link-color: var(--bs-heading-color);
        --bs-link-color-rgb: var(--bs-heading-color);
        --bs-link-hover-color: var(--bs-primary);
        --bs-link-hover-color-rgb: var(--bs-primary-rgb);
        --swiper-theme-color: var(--bs-primary) !important;
        --swiper-pagination-color: var(--bs-primary) !important;
}

/*#F6F6F6;
#F6F1ED;
*/

body {
   font-family: var(--body-font);
   font-weight: 400;
   font-size: 16px;
   color: var(--body-color);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
   text-transform: capitalize;
}

h1 {
   font-size: 51px;
   font-weight: 600;
   font-family: var(--body-font);
   color: var(--bs-secondary); 
}


h2 {
   font-size: 39px;
   font-weight: 600;
   font-family: var(--body-font);
   color: var(--bs-secondary); 
}

h3 {
   font-size: 22px;
   font-weight: 400;
   font-family: var(--body-font);
}

h4 {
   font-size: 21px;
   font-weight: 600;
   font-family: var(--body-font);
}

h5 {
   font-size: 18px;
   font-weight: 500;
   font-family: var(--body-font);
}

h6 {
   font-size: 16px;
   font-weight: 500;
   font-family: var(--body-font);
}

.btn-primary {
   font-family: var(--bs-btn-font-family);
   --bs-btn-color: #fff;
   --bs-btn-bg: var(--bs-secondary);
   --bs-btn-border-color: var(--bs-secondary);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: var(--bs-primary);
   --bs-btn-hover-border-color: var(--bs-primary);
   --bs-btn-focus-shadow-rgb: 49, 132, 253;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: var(--bs-primary);
   --bs-btn-active-border-color: var(--bs-primary);
   text-transform: capitalize;
}

.btn-group-lg>.btn, .btn-lg {
   --bs-btn-padding-y: 0.9rem;
   --bs-btn-padding-x: 2rem;
}

/* section padding and margin */
.section-padding{
   padding-top: 160px;
   padding-bottom: 160px;
}
.section-margin{
   margin-top: 160px;
   margin-bottom: 160px;
}

.navbar {
   --bs-navbar-active-color: var(--bs-secondary); 
}
.nav-link {
   letter-spacing: 1px;
}

.swiper-pagination-bullet{
   background-color: var(--bs-gray-300);
   opacity: 1;
   width: 17px;
   height: 17px;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
   background-color: var(--swiper-pagination-color);
}

.site-header {
   position: fixed;
   top: 0;
   background-color: transparent;
   width: 100%;
   z-index: 999999;
   transition: background-color 0.3s ease;
}
.site-header.sticky{
   background-color: var(--bs-light);
}
.custom-h1 {
   text-align: justify;
   width: 100%; 
   margin: 0 ; 
}

.custom-h1::after {
   content: "";
   display: inline-block;
   width: 100%;
}