/*
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 {
        --bg-dark-gray: #111111;
        --bg-bordeaux: #480611;
        --bs-primary: #F38252;
        --bs-primary-rgb: 243, 130, 82;
        --bs-secondary: #598898;
        --bs-secondary-rgb: 89, 136, 152;
        --bs-info-rgb: 13, 202, 240;
        --body-color: #AAAAAA;
        --bs-heading-color: var(--body-color);
        --bs-secondary-bg: #F6F6F6;
        --bs-secondary-bg-rgb: 246, 246, 246;
        --bs-primary-bg-subtle: #170000;
        --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;
}

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);
   text-transform: capitalize;
}

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

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);
}

a {
   font-weight:bold;
}

.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-hover-color: var(--bg-bordeaux);
}
.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;
   background-color: var(--bs-primary-bg-subtle);
   width: 100%;
   z-index: 999999;
   transition: background-color 0.3s ease;
}
.site-header.sticky{
   background-color: var(--bg-dark-gray);
}

.round-frame {
      width: 150px; /* Adjust size as needed */
      height: 150px;
      border-radius: 50%; /* Makes the image circular */
      border: 0px solid #4CAF50; /* Frame color and thickness */
      overflow: hidden; /* Ensures the image fits within the circle */
      display: flex;
      justify-content: center;
      align-items: center;
    }

.round-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Ensures the image scales properly */
    }