*{
	padding:0px;
	margin:0px;
	box-sizing: border-box;
}
:root{
	--font-min-size:17px;
	--black-color: #1C252E;
	--grey-color: #637381;
	--border-color:#e0e2e4;
	--scroll-height:0px;
}
body{
	font-size:var(--font-min-size);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	scroll-behavior: smooth;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='a' width='20' height='20' patternTransform='scale(1.8)' patternUnits='userSpaceOnUse'%3E%3Crect width='100%25' height='100%25' fill='none'/%3E%3Cpath fill='none' stroke='rgba(0, 0, 0, 0.02)' d='M10 0v20M0 10h20'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='800%25' height='800%25' fill='url(%23a)'/%3E%3C/svg%3E");
    background-size: 500px 500px;
}



/**
* Template Name: BizLand
* Template URL: https://bootstrapmade.com/bizland-bootstrap-business-template/
* Updated: Jun 06 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Calibri",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Arial",  sans-serif;
  --nav-font: "Open Sans",  sans-serif;
}
@font-face {
  font-family: "BLKCHCRY";
  src: url("../fonts/BLKCHCRY.TTF") format("truetype");
}

@font-face {
  font-family: "BirdsParadise";
  src: url("../fonts/Birds-Paradise.TTF") format("truetype");
}
/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #1c1c1c; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #222222; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #DC895D; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #222222;  /* The default color of the main navmenu links */
  --nav-hover-color: #106eea; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #222222; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #ffffff; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  font-size: 18px!important;
}

.row {
    margin-right: 0px!important;
    margin-left: 0px!important;
}
a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

 #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    #loader img {
      width: 250px;
    }

    #main-content {
      display: none;
    }
 
.p-2{padding: 1%;}
.carousel-indicators {
        bottom: 0px!important;
    }

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-right: 15%;
    /* margin-bottom: 1rem; */
    margin-left: 15%;
}
#slider::before {
    animation: 0.6s linear 0s infinite normal none running jisSpinner;
    transform: translate3d(0px, 0px, 0px);
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: 4px;
    border-width: 4px;
    border-color: black rgba(0, 0, 0, 0.8) rgba(255, 255, 255, 0.8) rgba(255, 255, 255, 0.8);
    border-style: solid;
    border-radius: 50%;
}

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 16px!important;
     border-left:none;
}

.text-red{
  color: #FF0000 ;
	color: red ;
}
.flex-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn {
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}





/* This container is the flex box for spacing buttons */
.flex-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}



 .accordions {
    max-width: 100%;
    margin: 20px auto;
}

.accordion {
    margin-bottom: 10px;
    /*border: 2px solid #dc8a62;*/
    border-radius: 36px;
    overflow: hidden;
    padding: 6px;
}
.accordion2 {
    margin-bottom: 10px;
    border: 2px solid #dc8a62;
    border-radius: 36px;
    overflow: hidden;
    padding: 6px;
}
.accordion__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
/*    background-color: #f8f9fa;
*/    cursor: pointer;
    font-weight: bold;
    position: relative;
    transition: background-color 0.3s ease;
}

.accordion__header:hover {
/*    background-color: #e9ecef;
*/}

.accordion__icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 9l6 6 6-6"%3E%3C/path%3E%3C/svg%3E') no-repeat center;
    background-size: contain;
        border: solid 1px #1E1E1E;
    border-radius: 50px;
}

.form-title {
  text-align: center;
  margin-top: -18px;  /* reduced top margin */
  margin-bottom: 20px;  /* spacing below the title */
  color: #08298A;  /* your requested color */
}



input[type="checkbox"] {
    display: inline-block !important;
}


input[type="checkbox"]:checked + .accordion__header .accordion__icon {
    transform: rotate(180deg);
}

.accordion__content {
    max-height: 0;
    overflow: hidden;
    padding: 0 15px;
    background-color: #fff;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

input[type="checkbox"]:checked ~ .accordion__content {
    max-height: fit-content;
    padding: 15px;
}











/* */

.panel-default>.panel-heading {
  color: #333;
  background-color: #fff;
  border-color: #e4e5e7;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.panel-default>.panel-heading a {
  display: block;
  padding: 10px 15px;
}

.panel-default>.panel-heading a:after {
  content: "";
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: right;
  transition: transform .25s linear;
  -webkit-transition: -webkit-transform .25s linear;
}

.panel-default>.panel-heading a[aria-expanded="true"] {
  background-color: #eee;
}

.panel-default>.panel-heading a[aria-expanded="true"]:after {
  content: "\2212";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.panel-default>.panel-heading a[aria-expanded="false"]:after {
  content: "\002b";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}



.rightbutton{display: flex;
    bottom: auto;
    align-content: flex-end;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;}

.form-select {
    --bs-form-select-bg-img: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 16px!important;
    font-weight: 400;
    line-height: 1.5;

	color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.align-right{ right: 0;}
.br-left{ border-left: 31px solid #dc8a62!important;}
.br-leftNav{ border-left: 4px solid #dc8a62!important;}
.justify{text-align: justify;}
 .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
    
	  width: 100%;
      margin: auto;
  }
.orangebox{
	background: #DC895D;
    border: 2px solid #00269712;
    border-radius: 30px;
    height: auto;
    padding: 20px;
	color: white;
	margin: 40px;
	margin-bottom: 10px;
}
.membership .orangebox {
    
}

.membership ul li{font-size: 18px;}

.text-white {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}



.uvp-list ul {
  display: inline-block;
  border: solid 1px #bababa;
  padding: 1rem 2rem;
    width: 100%;
 }

.uvp-list ul {
  list-style: none;
}

.uvp-list ul > li {
  clear: left;
  padding: .5rem 0;
}
 
.uvp-list ul > li:before {
  content: "";
  height: 1.5rem;
  width: 1.5rem;
  display: block;
  float: left;
  margin-left: -1.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%:
}

.uvp-list ul > li:before { 
  background: url("https://info.openpath.com/hubfs/checkmark-round-orange.svg");
  background-size: cover;
  background-position: center;
  padding: .15rem;
}



 
.mission-list ul {
      display: inline-block;
    border: solid 3px #83431a;
    padding: 21px 23px;
    width: 100%;
    border-radius: 13px;
     box-shadow: inset -1px 3px 13px 1px;
    background-color: #fffef2;
}
  

.mission-list ul {
  list-style: none;
}

.mission-list ul > li {
  clear: left;
  padding: .5rem 0;
}
 
.mission-list ul > li:before {
  content: "";
  height: 1.5rem;
  width: 1.5rem;
  display: block;
  float: left;
  margin-left: -1.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%:
}

.mission-list ul > li:before { 
  background: url("https://info.openpath.com/hubfs/checkmark-round-orange.svg");
  background-size: cover;
  background-position: center;
  padding: 15px;
    margin-left: 0px;
    margin-right: 1%;
}
 
 
.mission-list   li {
            font-size: 18px;
            margin-bottom: 10px;
            white-space: normal;  /* ✅ Allows text wrapping */
            overflow: hidden;
            display: block;  /* ✅ Ensures full width */
            max-width: 100%; /* Adjust width as needed */
            visibility: hidden;  /* ✅ Starts hidden */
        }
        .cursor::after {
            content: "|";
            animation: blink 0.6s infinite;
        }
        @keyframes blink {
            50% { opacity: 0; }
        }
.owl-carousel .item{
    padding:0 !important;
    height:400px !important;;
  }

  .owl-carousel .owl-item div{
           position: relative;
           overflow: hidden;
         }
      .owl-carousel .owl-item img{
           display: block;
           width: 100%;
           height: auto;
           -webkit-border-radius: 3px;
           -moz-border-radius: 3px;
           border-radius: 3px;
           max-height: 1490px;
           -webkit-transition: all 20s;
           -moz-transition: all 20s;
           -o-transition: all 20s;
           transition: all 20s;
           transition-timing-function:linear;
         }
 .owl-carousel .owl-item:nth-child(even) img{
             -webkit-transform: scale(1.4);
             -ms-transform: scale(1.4);
             transform: scale(1.4);
             -webkit-transform-origin: bottom right;
    -moz-transform-origin: bottom right;
     -ms-transform-origin: bottom right;
      -o-transform-origin: bottom right;
         transform-origin: bottom right;
           }
         
.owl-carousel .owl-item:nth-child(odd) img{
             -webkit-transform: scale(1.1);
             -ms-transform: scale(1.1);
             transform: scale(1.1);
             -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
     -ms-transform-origin: bottom left;
      -o-transform-origin: bottom left;
         transform-origin: bottom left;
           }
         

.owl-carousel .owl-item.active:nth-child(even) img{
               -webkit-transform: scale(1.1);
               -ms-transform: scale(1.1);
               transform: scale(1.1);
             }
           
  .owl-carousel .owl-item.active:nth-child(odd) img{
               -webkit-transform: scale(1.4);
               -ms-transform: scale(1.4);
               transform: scale(1.4);
             }

  
       
/* Modal container with fade effect */
.modaln {
display: flex;
visibility: hidden;
opacity: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1000;
transition: opacity 0.3s ease, visibility 0.3s ease;
      height: 90vh;
}

/* Show modal when active */
.modaln.show1 {
visibility: visible!important;
opacity: 1!important;
}

/* Modal content */
.modal-content {
    background-color: white;
    padding: 29px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 50%;
    text-align: justify;
    position: relative;
    top: 0%;
     max-height: calc(100vh - 119px);
    overflow-y: auto;
}

.modal-content p{font-size: 18px;}

.modal-content  ol.a{
  list-style-position: outside;
list-style-type:decimal;
padding: 0;
margin: 0;
}
.modal-content ol li{font-size: 18px;}


/* Modal content */
.modal-content2 {
    background-color: white;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 25%;
    text-align: justify;
    position: relative;
    top: 5%;
    max-height: calc(100vh - 119px);
    overflow-y: auto;
    margin: 0 auto;
}

.modal-content2 p{font-size: 18px;}

.modal-content2  ol.a{
  list-style-position: outside;
list-style-type:decimal;
padding: 0;
margin: 0;
}
.modal-content2 ol li{font-size: 18px;}

.mrl2{ margin-left: 2%;}
.mrl4{ margin-left: 4%;}
.mrR2{margin-right: 2%;}
.mrR4{margin-right: 4%;}
/* Close button */
.close {
position: absolute;
top: 10px;
right: 20px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}





.text-orange {color: #f99665;
text-align: center;
}
.text-orangeD {color: #DC895D;}
.text-blue {color: #08298A;}
.text-lightgray {color: #8F8F8F;}

.btn-login {
  background: var(--accent-color);
  color: var(--contrast-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 20px;
  transition: none;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--heading-font);
  font-weight: 600;
  transition: 0.3s;
	margin-left: 600px;
	margin-top: 50px;
}

.underline{
	color: #025fa6;
}
.whitetxt{
	text-align: center;
}

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 22px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}




.base-template__wrapper {
	max-width: 1560px;
}

.base-template__text {
	margin-bottom: 60px;
}

/**
 * Slider Instance
 */

.swiper {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.emotions-slider {
	--color-gray: #818181;
	--color-gray-dark: #1e1e1e;

	padding-inline: 98px;
	position: relative;
}

.emotions-slider__slide {
	display: flex;
	align-items: center;
	min-height: 550px;
}


.action {
  position: fixed;
  top: 20px;
  right: 30px;
}

.action .profile {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.action .profile img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.action .menu {
  position: absolute;
  top: 75px;
  right: -10px;
  padding: 10px 20px;
  background: #fff;
  width: 215px;
  box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 300ms linear, opacity 300ms linear;
}

.action .menu.active {
  visibility: visible;
  opacity: 1;
}

.action .menu::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 28px;
  width: 20px;
  height: 20px;
  background: #fff;
  transform: rotate(45deg);
}

.action .menu h3 {
  width: 100%;
  text-align: center;
  font-size: 18px;
  padding: 20px 0;
  font-weight: 500;
  font-size: 18px;
  color: #555;
  line-height: 1.2em;
}

.action .menu h3 span {
  font-size: 14px;
  color: #cecece;
  font-weight: 400;
}

.action .menu ul li {
  list-style: none;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

.action .menu ul li img {
  width: 20px;
  max-width: 20px;
  margin-right: 10px;
  opacity: 0.5;
  transition: opacity 300ms linear;
}

.action .menu ul li:hover img {
  opacity: 1;
}

.action .menu ul li a {
  display: inline-block;
  text-decoration: none;
  color: #555;
  font-weight: 500;
  transition: color 300ms linear;
}

.action .menu ul li:hover a {
  color: #ff5d94;
}







@media screen and (max-width: 767.9px) {
	.emotions-slider {
		padding: 0;
		margin-inline: -20px;
	}
}

/**
 * Slider Navigation
 */

.slider-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
	z-index: 1;
	pointer-events: none;
}

.slider-nav__item {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	width: 48px;
	pointer-events: auto;
	cursor: pointer;
	transition: all 0.3s ease-out;
}

.slider-nav__item.disabled {
	cursor: default;
	opacity: 0.5;
}

.slider-nav__item path {
	stroke: currentColor;
}

@media (hover: hover) and (pointer: fine) {
	.slider-nav__item:not(.disabled):hover {
		color: var(--color-blue);
	}
}

@media (hover: none) {
	.slider-nav__item:not(.disabled):active {
		color: var(--color-blue);
	}
}

@media screen and (max-width: 767.9px) {
	.slider-nav {
		display: none;
	}
}

/**
 * Slider Pagination
 */

.slider-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 40px;
}

.swiper-pagination-lock {
	display: none !important;
}

.slider-pagination__item {
	width: 8px;
	height: 8px;
	border-radius: 99px;
	background: #fff;
	transition: all 0.3s ease-out;
	opacity: 0.2;
}

.slider-pagination__item.active {
	width: 30px;
	opacity: 1;
}

/**
 * Slider Item
 */

.swiper-slide {
	width: auto;
	height: auto;
}

@keyframes btn-arrow-move {
	0% {
		translate: 0;
	}

	100% {
		translate: 100% -100%;
	}
}

.emotions-slider-item {
	    --border-radius: 10px;
    width: calc(100dvw - 60px);
    max-width: 400px;
    background: #ffffff;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

.emotions-slider-item__badge {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px 4px 5px;
	background: #00000066;
	border-bottom-right-radius: var(--border-radius);
	font-size: 16px;
	line-height: calc(24 / 14);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

.emotions-slider-item__badge::before {
	content: "";
	flex-shrink: 0;
	display: block;
	aspect-ratio: 1;
	width: 18px;
	background: url("https://bato-web-agency.github.io/bato-shared/img/slider-1/icon-star.svg")
		center center no-repeat;
	background-size: 100%;
}

.emotions-slider-item__image {
	aspect-ratio: 400 / 270;
	overflow: hidden;
}

.emotions-slider-item__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.emotions-slider-item__content {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 30px 20px;
}

.emotions-slider-item__header,
.emotions-slider-item__footer {
	max-height: 50px;
	overflow: hidden;
	transition: max-height 0.6s ease-in;
}

.emotions-slider-item__header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.emotions-slider-item__price {
	font-weight: 600;
	font-size: 22px;
	line-height: calc(24 / 22);
}

.emotions-slider-item__author {
	display: flex;
	align-items: center;
	gap: 4px;
}

.emotions-slider-item__author-image {
	flex-shrink: 0;
	aspect-ratio: 1;
	width: 20px;
	border-radius: 100%;
	overflow: hidden;
}

.emotions-slider-item__author-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.emotions-slider-item__author-name {
	font-family: var(--font-poppins);
	font-size: 16px;

	line-height: calc(20 / 14);
	color: var(--color-gray);
}

.emotions-slider-item__title {
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	margin-bottom: 8px;
}

.emotions-slider-item__text {
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	opacity: 0.7;
}

.emotions-slider-item__btn {
	display: flex;
	align-items: center;
	gap: 4px;
	font-weight: 500;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
}

.emotions-slider-item__btn-icon {
	flex-shrink: 0;
	display: block;
	aspect-ratio: 1;
	width: 24px;
	position: relative;
	overflow: hidden;
}

.emotions-slider-item__btn-icon::before,
.emotions-slider-item__btn-icon::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: url("https://bato-web-agency.github.io/bato-shared/img/slider-1/icon-btn-arrow.svg")
		center center no-repeat;
	background-size: 100%;
}

.emotions-slider-item__btn-icon::after {
	position: absolute;
	top: 100%;
	right: 100%;
}

.emotions-slider__slide:not(.swiper-slide-active) .emotions-slider-item__header,
.emotions-slider__slide:not(.swiper-slide-active)
	.emotions-slider-item__footer {
	max-height: 0;
}

@media (hover: hover) and (pointer: fine) {
	.emotions-slider-item__btn:hover .emotions-slider-item__btn-icon::before,
	.emotions-slider-item__btn:hover .emotions-slider-item__btn-icon::after {
		animation: btn-arrow-move 0.4s ease forwards;
	}
}

@media (hover: none) {
	.emotions-slider-item__btn:active .emotions-slider-item__btn-icon::before,
	.emotions-slider-item__btn:active .emotions-slider-item__btn-icon::after {
		animation: btn-arrow-move 0.4s ease forwards;
	}
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
	background:#DC895D;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 34px;
    margin-top: 0px;
}


.btn-holder {
         display: flex;
    align-items: end;
    padding-top: 10px;
    padding-bottom: 10px;
    align-content: space-around;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
}
.btn-holderall {
    display: inline-flex;
    align-items: end;
    padding-top: 10px;
    padding-bottom: 10px;
    align-content: center;
    justify-content: center;
}

.Login_btn {
padding: 16px 53px;
background: #dc8a62;
text-align: center;
font-size: 16px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
border-radius: 42px;
}
 

.Login_btn:hover {
padding: 16px 53px;
background: #dc8a62;
text-align: center;
font-size: 16px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
border-radius: 42px;
 }

.Login_btn1 {
padding: 16px 53px;
background: #EBA37C;
text-align: center;
font-size: 16px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
border-radius: 42px;
}


.back_btn {
padding: 16px 53px;
background: #dc8a62;
text-align: center;
font-size: 16px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
border-radius: 42px;
}

.back_btn:hover {
padding: 16px 53px;
background: #dc8a62;
text-align: center;
font-size: 16px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
border-radius: 42px;
 }


table {
border-collapse: collapse;
width: 100%;
border: 1px solid #dddddd;

}

td, th {
  text-align: left;
  padding: 20px;
    border-bottom: 1px solid #dddddd;
}

/*tr:nth-child(even) {
  background-color: #dddddd;
}*/
.fill_btn {
padding: 16px 53px;
background: #dc8a62;
text-align: center;
font-size: 18px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
border-radius: 42px;
}

.fill_btn:hover {
padding: 16px 53px;
background: #dc8a62;
text-align: center;
font-size: 18px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
border-radius: 42px;
}






.btn-login:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 20px;
  transition: none;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--heading-font);
  font-weight: 600;
  transition: 0.3s;
}



.btn-fellowship {
    --bs-btn-color: #C87E89;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #d89ca7
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #d89ca7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
    width: 100%;
}

.btn-disorders {
    --bs-btn-color: #7EC8AF;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #d89ca7
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #d89ca7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}



/*form*/
.contact-form{display: block;
    width: 100%;
    height: 48px;
    padding: 7px 19px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #1E1E1E;
    background-color: #FAFAFA;
    background-image: none;
    border: 1px solid #DDDDDD;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
} 


.form-note{
    background: #DC895D99;
    border: 2px solid #d97240;
    border-radius: 20px;
    padding: 20px;
}

.photo-circle{
    border: 1px solid #d8d8d8;
    border-radius: 100%;
    width: 180px;
    height: 180px;
    display: flex;
    padding: 46px;
   
}
 

/* STYLE B */

.checkbox.style-b {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkbox.style-b input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkbox.style-b input:checked ~ .checkbox__checkmark {
  background-color: #fff;
}
.checkbox.style-b input:checked ~ .checkbox__checkmark:after {
  opacity: 1;
}
.checkbox.style-b:hover input ~ .checkbox__checkmark {
  background-color: #eee;
}
.checkbox.style-b:hover input:checked ~ .checkbox__checkmark {
  background-color: #fff;
}
.checkbox.style-b .checkbox__checkmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: #fff;
  border: 1px solid #DDDDDD;
  transition: background-color 0.25s ease;
  border-radius: 4px;
}
.checkbox.style-b .checkbox__checkmark:after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid #81BA00;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.checkbox.style-b .checkbox__body {
  color: #333;
  line-height: 1.4;
  font-size: 16px;
  font-weight: bold;
}

.grybox-blank {
    border: 2px solid #DEDEDE;
    border-radius: 30px;
    height: 345px;
}

.gryboxnh {
    border: 2px solid #DEDEDE;
    border-radius: 30px;
 }
.olcards,
.olcards * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.olcards {
  list-style: none;
  counter-reset: cardCount;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  --cardsGap: 1rem;
  gap: var(--cardsGap);
  padding-bottom: var(--cardsGap);
}
.olcards li {
  counter-increment: cardCount;
  display: flex;
  color: white;
  --labelOffset: 1rem;
  --arrowClipSize: 1.5rem;
  margin-top: var(--labelOffset);
}

.olcards li::before {
  content: counter(cardCount, decimal-leading-zero);
  background: white;
   font-size: 2em;
  font-weight: 700;
  transform: translateY(calc(-1 * var(--labelOffset)));
  margin-right: calc(-1 * var(--labelOffset));
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: -0.5em;
}

.olcards li .content {
/*  background-color: var(--cardColor); 
*/    background-color: #e7e4e4;
  --inlinePadding: 1em;
  --boxPadding: 0.5em;
    color: #100038;
  display: grid;
  padding: var(--boxPadding) calc(var(--inlinePadding) + var(--arrowClipSize))
    var(--boxPadding) calc(var(--inlinePadding) + var(--labelOffset));
  grid-template-areas:
    "icon title"
    "icon text";
  gap: 0.25em 0.25em;
  clip-path: polygon(
    0 0,
    calc(100% - var(--arrowClipSize)) 0,
    100% 50%,
    calc(100% - var(--arrowClipSize)) 100%,
    calc(100% - var(--arrowClipSize)) calc(100% + var(--cardsGap)),
    0 calc(100% + var(--cardsGap))
  );
  position: relative;
}
.olcards li .content::before {
  content: "";
  position: absolute;
  width: var(--labelOffset);
  height: var(--labelOffset);
  background: var(--cardColor);
  left: 0;
  bottom: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  filter: brightness(0.75);
}
 
.olcards li .icon {
  grid-area: icon;
  align-self: center;
  font-size: 2em;
}
.olcards li .content .title {
  grid-area: title;
  font-size: 1.25em;
  /* font-weight: 700; */
}
.olcards li .content .text {
  grid-area: text;
}

 

.text-darkp{ color: #C87E89;}
.card-img {
    width: 100%;
    border-radius: calc(.25rem - 1px);
}   

.card-columns .card {
        display: inline-block;
        width: 100%;
    }

/*
.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 2.25rem;
    background-color: #334FA1;
    background-image: linear-gradient(to right, #334FA1, #051A56);
        top: -69px;
}
*/


.card {-webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 2.25rem;
    background-color: #334FA1;
    background-image: linear-gradient(to right, #334FA1, #051A56);
    top: -73px;
    float: left;
    width: 100%;
}

  /* Basic Styles for Image Box */
.image-box {
    position: relative;
    width: fit-content;
    height: auto;
    overflow: hidden;
}

.image-boxl {
    position: relative;
    width: fit-content;
    height: auto;
    overflow: hidden;
    float: right;
}

.image-boxl img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container while maintaining aspect ratio */
}

/* Image style */
.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container while maintaining aspect ratio */
}

.image-right {
    float: right;
    margin-left: 10px; /* Add spacing between the image and surrounding content */}


/* Description text (overlay) */
.description {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the text */
    color: white;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    padding: 10px;
    border-radius: 5px;
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially hidden */
    transition: opacity 0.3s, visibility 0.3s; /* Smooth transition */
    text-align: center; /* Centers the text */
}

/* Show description on hover */
.image-box:hover .description {
    opacity: 1;
    visibility: visible; /* Show description when hovered */
}

/* Right-aligned image (First image) */
.image-box.right-align img {
    object-position: right center; /* Aligns the image to the right */
}

/* Left-aligned image (Second image) */
.image-box.left-align img {
    object-position: left center; /* Aligns the image to the left */
}

 

/* Image style */
.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container while maintaining aspect ratio */
}

/* Description text (overlay) */
.description {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the text */
    color: white;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    padding: 10px;
    border-radius: 5px;
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially hidden */
    transition: opacity 0.3s, visibility 0.3s; /* Smooth transition */
    text-align: center; /* Centers the text */
}

/* Show description on hover */
.image-box:hover .description {
    opacity: 1;
    visibility: visible; /* Show description when hovered */
}

/* Right-aligned image (First image) */
.image-box.right-align img {
    object-position: right center; /* Aligns the image to the right */
}

/* Left-aligned image (Second image) */
.image-box.left-align img {
    object-position: left center; /* Aligns the image to the left */
}

/* Optional: You can add text styling for card content */
.card p {
    text-align:left!important;
    margin: 0;
     font-size: 20px;
}

 .card span {
     font-size: 18px;
 
}


.card img{
      display: flex;
    justify-content: flex-end;
    flex-direction: row;
    position: absolute;
    right: 32px;
    top: 33%;
}
 

/* Image style */
.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container while maintaining aspect ratio */
    text-align: right!important;
}

/* Description text (overlay) */
.description {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the text */
    color: white;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    padding: 10px;
    border-radius: 5px;
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially hidden */
    transition: opacity 0.3s, visibility 0.3s; /* Smooth transition */
    text-align: center; /* Centers the text */
}

/* Show description on hover */
.image-box:hover .description {
    opacity: 1;
    visibility: visible; /* Show description when hovered */
}

/* Right-aligned image (First image) */
.image-box.right-align img {
    object-position: right center; /* Aligns the image to the right */
}

/* Left-aligned image (Second image) */
.image-box.left-align img {
    object-position: left center; /* Aligns the image to the left */
}

/* Optional: You can add text styling for card content */
.card p {
    text-align: center;
}


.bg-blue{ background-color: #08298A;}
.bg-blue2{ background-color: #2C4695;}
.bg-light{background-color: #d7daeb;}
.triDown {
  width: 0;
  height: 0;
  border-top: 15px solid #17214f;
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
  
  position: absolute;
  top: 101px;
  left: 15px;
}
.text-right {
    text-align: right;
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  background-color: var(--background-color);
}

.header .topbar {
  background-color: var(--accent-color);
  height: 40px;
  padding: 0;
  font-size: 16px;
  transition: all 0.5s;
}
.header .topbar .contact-info{
      width: 80%;
}
.header .topbar .contact-info i {
  font-style: normal;
  color: var(--contrast-color);
   
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  padding-left: 5px;
  color: var(--contrast-color);
}

@media (max-width: 575px) {
    


  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 18px;
  }
}

.header .topbar .contact-info i a {
  line-height: -1px;
  transition: 0.3s;
}









.header .topbar .contact-info i a:hover {
  color: var(--contrast-color);
  text-decoration: underline;
}

.header .topbar .social-links a {
  color: color-mix(in srgb, var(--contrast-color), transparent 40%);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

.header .topbar .social-links a:hover {
  color: var(--contrast-color);
}

.header .branding {
  min-height: 60px;
  padding: 10px 0;
}

   .header .branding  h1{
        font-size: 230% !important;
        font-weight: 700;
        margin-top: 10px;
        margin-bottom: 0px;
       color:#08298A;
 }
    
    .header .branding  h4{
          font-size: 83% !important;
        font-weight: 400;
        color: #DC895D;
    }
 
.header .branding  span{
         color: #3771C8;
        font-size: 96% !important;
 }

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;

  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 600;
  color: var(--heading-color);
}

.header .logo span {
  color: var(--accent-color);
  font-size: 30px;
  font-weight: 700;
}

.scrolled .header {
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {

   .navmenu a.disabled-link {
  pointer-events: none;
  cursor: default;
  color: lightgray;
  text-decoration: none;
  display: inline-block; /* ensures pointer-events works reliably */ 
}

.nav-wrapper {
  background-color: #f0f0f0;
}


  .navmenu {
    padding: 6px;
  }

  .navmenu ul {
   margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
       width: max-content;
        background-color: #F5F5F5;
        border: 1px solid #E5E5E5;
        border-radius: 9px;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 18px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

    
    
  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
      display: none;
  }

 /* .navmenu li:last-child a {
    padding-right: 0;
  }*/

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
    border-bottom: 2px solid #e3e3e3;
    background-color: #dc895d;
    border-radius: 5px;
    color: #FFFFFF;
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  width: auto;
  }
     
    
    
    
  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 18px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 16px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
    
    
    
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
    .slider{display:none;}
        
.calendar {
    background-color: #D6DBEC;
    border-radius: 50px;
     height: auto;
    perspective: 1000;
    transition: .9s;
    transform-style: preserve-3d;
    width: 100%;
 
}
   .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 18px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
     background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
   
    /*color: var(--contrast-color);*/
   color: #dc8a62;
 
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}
    
 /* Navmenu - Mobile */
@media (max-width: 1024px) {
    .slider{display:none;}
        
.calendar {
    background-color: #D6DBEC;
    border-radius: 50px;
     height: auto;
    perspective: 1000;
    transition: .9s;
    transform-style: preserve-3d;
    width: 100%;
 
}
   .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 18px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
     background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
   
    /*color: var(--contrast-color);*/
   color: #dc8a62;
 
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color:#F4DACD;
  font-size: 18px;
 }

.footer-bot{
background-color: #F4DACD;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 12px 16px;
    width: 100%;
}


.footer .footer-newsletter {
  background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
  padding: 50px 0;
}

.footer .footer-newsletter h4 {
  font-size: 24px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  padding: 6px 8px;
  position: relative;
  background-color: var(--contrast-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  box-shadow: 0px 2px 25px color-mix(in srgb, var(--accent-color), transparent 90%);
  display: flex;
  transition: 0.3s;
  border-radius: 4px;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: var(--contrast-color);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 18px;
  padding: 0 20px;
  margin: -7px -8px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-newsletter .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-top: 10px;
}

.footer .footer-newsletter .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: subscription-loading 1s linear infinite;
}

@keyframes subscription-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 18px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 18px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  margin-right: 3px;
  font-size: 18px;
  line-height: 0;
  color: var(--accent-color);
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-about a {
  color: var(--heading-color);
  font-size: 24px;
  font-weight: 600;
  font-family: var(--heading-font);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 18px;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 99;
  /* makes sure it stays on top */
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}



/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: var(--background-color);
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#preloader div {
  width: 13px;
  height: 13px;
  background-color: var(--accent-color);
  border-radius: 50%;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
  position: absolute;
  left: 50%;
}

#preloader div:nth-child(1) {
  left: calc(50% + 8px);
  animation: animate-preloader-1 0.6s infinite;
}

#preloader div:nth-child(2) {
  left: calc(50% + 8px);
  animation: animate-preloader-2 0.6s infinite;
}

#preloader div:nth-child(3) {
  left: calc(50% + 32px);
  animation: animate-preloader-2 0.6s infinite;
}

#preloader div:nth-child(4) {
  left: calc(50% + 56px);
  animation: animate-preloader-3 0.6s infinite;
}

@keyframes animate-preloader-1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes animate-preloader-3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes animate-preloader-2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(24px, 0);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    .modal-content {
    background-color: white;
    padding: 29px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    text-align: justify;
    position: relative;
    top: 0%;
    max-height: calc(100vh - 119px);
    overflow-y: auto;
}
        .header .branding h1 {
        font-size: 140% !important;
        font-weight: 700;
        margin-top: 10px;
        margin-bottom: 0px;
        color: #08298A;
        text-align: center;
    }
    
        .header .branding h4 {
        font-size: 80% !important;
        font-weight: 400;
        color: #DC895D;
        text-align: center;
    }
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 25px 0;
  position: relative;
}

.page-title h1 {
  font-size: 24px;
  font-weight: 600;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  padding: 25px 0;
  scroll-margin-top: 118px;
  overflow: clip;
}
.br-bottom{border-radius: 0px 0px 40px 40px;}
@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 100px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 8px 20px;
  margin: 0;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  display: inline-block;
  text-transform: uppercase;
  border-radius: 50px;
  font-family: var(--default-font);
}

.section-title p {
  color: var(--heading-color);
  margin: 10px 0 0 0;
  font-size: 32px;
  font-weight: 700;
  font-family: var(--heading-font);
}

.section-title p .description-title {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
 /* min-height: 75vh;*/
  position: relative;
/*  padding: 60px 0;
*/  display: flex;
  align-items: center;
/*  background: url("../img/hero-bg-2.svg") top left;
*/  background-size: cover;
}

.hero:before {
  content: "";
   position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
 
.hero-mission {
  width: 100%;
  min-height: 45vh;
  position: relative;
  padding: 60px 0;
  display: flex;
  align-items: center;
  background: url("../img/vision-mission-bg.jpg") bottom left;
  background-size: cover;
}

.hero-mission:before {
  content: "";
   position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

.why-become-member {
  width: 100%;
  min-height: 45vh;
  position: relative;
  padding: 60px 0;
  display: flex;
  align-items: center;
  background: url("../img/Join-the-Movements-Dsorders-Society-India.jpg") bottom left;
  background-size: cover;
        background-position: center;
}

.why-become-member:before {
  content: "";
   position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}


 .side-button {
            position: absolute;
            top: 8%;
            left: 0;
            transform: translateY(-50%);
            background-color: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 10;
            outline: none;
        }

        .side-button img {
            width: 50px;
            height: 50px;
            border-radius: 50%; /* Optional: Make it circular */
            transition: transform 0.3s ease;
        }

        .side-button img:hover {
            transform: scale(1.1); /* Enlarge the button slightly on hover */
        }

.side-nav {
position: fixed;
top: 240px;
left: -300px;
width: 300px;
height: auto;
background-color: #FFFFFF;
overflow-x: hidden;
transition: left 0.3s ease;
display: flex;
flex-direction: column;
padding-top: 20px;
z-index: 1000;
border-radius: 0px 30px 30px 0px;
}

        .side-nav a {
            padding: 10px 20px;
            text-decoration: none;
            font-size: 16px;
            color:#171717;
            display: block;
            transition: background-color 0.2s ease;
                border-bottom: 1px solid #171717;
        }

        .side-nav a:hover {
         }

        .side-nav .close-btn {
          position: absolute;
    top: 10px;
    right: 21px;
    font-size: 32px;
    color: #474343;
    cursor: pointer;
 
        }

        /* Open the navigation */
        .side-nav.open {
            left: 0;
        }

.hero .container {
  position: relative;
}

.hero h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
}

.hero h1 span {
  color: var(--accent-color);
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 5px 0 30px 0;
  font-size: 20px;
  font-weight: 400;
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 30px;
  border-radius: 4px;
  transition: 0.5s;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.hero .btn-get-started:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 55%);
}

.hero .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  color: var(--default-color);
  font-weight: 600;
}

.hero .btn-watch-video i {
  color: var(--accent-color);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.hero .btn-watch-video:hover {
  color: var(--accent-color);
}

.hero .btn-watch-video:hover i {
  color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 640px) {
    .calendar {
    background-color: #D6DBEC;
    border-radius: 50px;
     height: auto;
    perspective: 1000;
    transition: .9s;
    transform-style: preserve-3d;
    width: 100%;
 
}
  .hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .hero p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 30px;
  }

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 16px;
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}




.display_h2,
.display_h2b {
    font-weight: 300;
    font-size: 20px;
}

.display_h,
.display_h2b {
    font-weight: 700;
}

.mcard_container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    gap: 60px;
    margin: 40px 0;
    justify-content: space-between;
    align-content: space-around;
    flex-wrap: nowrap;
}

.title_mcard_div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px;
}

.mcard_div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 40px;
}

.mcard_veiw {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
   height: 440px;
    transition: height 0.5s ease;
        margin-top: 10%;
}
.mcard_veiw:hover {
    height: 540px;
}

.profile_img {
    position: relative;
    top: 0px;
    /*width: 100%;*/
    width: 280px;
    height: 380px;
    /*width: 360px;*/
    /*height: 380px;*/
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-box-shadow: 0px 4px 20px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 20px 2px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    border: 6px solid #2C4695;
    margin: 0 auto;
    display: flex;
 }



.pro_content {
    position: relative;
    top: 0px;
    margin-top: -40px;
    /*width: 360px;*/
    width: 340px;
   padding: 16px 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /*padding: 16px 24px 16px;*/
    gap: 6px;
     -webkit-box-shadow: 0px 4px 20px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 20px 2px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-color: #334FA1;
    background-image: linear-gradient(to right, #334FA1, #051A56);
}
 
.pro_textpoint{ font-size: 16px!important; line-height:16px;}

.pro_name {
    width: -webkit-fill-available;
 }

.pro_name>h2 {
    margin-bottom: 4px;
 }

.pro_info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    height: 0px;
     width: 100%;
    opacity: 0.1;
    overflow: hidden;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
       
}

.pro_subtitle {
    letter-spacing: 0.5px;
    font-weight: 600;
/*    text-decoration: underline;
*/}

.mcard_veiw:hover .profile_img {
    -webkit-transform: scale(0.4);
    -ms-transform: scale(0.4);
    transform: scale(0.4);
    top: -160px;
     
}
.mcard_veiw:hover .executive-arow {
    -webkit-transform: scale(0.4);
    -ms-transform: scale(0.4);
    transform: scale(0.4);
    top: -160px;
     transform: rotate(180deg);
    
}


.mcard_veiw:hover .pro_content {
    z-index: -1;
    top:  -210px;
    padding: 40px 24px 16px;
}

.mcard_veiw:hover .pro_info {
    height: 280px;
    /*height: 254px;*/
    opacity: 1;
    /* animation: proinfoHA 0.4s ease-in-out both; */
}




/*--------------------------------------------------------------
# Featured Services Section
--------------------------------------------------------------*/
.featured-services .service-item {
  box-shadow: 0px 0 25px 0 color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 50px 30px;
  transition: all 0.3s ease-in-out;
  height: 100%;
  position: relative;
  z-index: 1;
}

.featured-services .service-item:before {
  content: "";
  position: absolute;
  background: var(--accent-color);
  inset: 100% 0 0 0;
  transition: all 0.3s;
  z-index: -1;
}

.featured-services .service-item .icon {
  margin-bottom: 10px;
}

.featured-services .service-item .icon i {
  color: var(--accent-color);
  font-size: 36px;
  transition: ease-in-out 0.3s;
}
.featured-services  h3 {
  font-weight: 700;
 margin-bottom: 15px;
 font-size: 40px;
 font-family:  var(--default-font);
}

.featured-services p {
  line-height: 24px;
  font-size: 18px;
  margin-bottom: 0;
  transition: ease-in-out 0.3s;
}



.featured-services .service-item h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.featured-services .service-item h4 a {
  color: var(--heading-color);
  transition: ease-in-out 0.3s;
}

.featured-services .service-item p {
  line-height: 24px;
  font-size: 16px;
  margin-bottom: 0;
  transition: ease-in-out 0.3s;
}

.featured-services .service-item:hover h4 a,
.featured-services .service-item:hover .icon i,
.featured-services .service-item:hover p {
  color: var(--contrast-color);
}

.featured-services .service-item:hover:before {
  background: var(--accent-color);
  inset: 0;
  border-radius: 0px;
}



/*--------------------------------------------------------------
# Membership FAQs
--------------------------------------------------------------*/
.membership-FAQs .service-item {
  box-shadow: 0px 0 25px 0 color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 50px 30px;
  transition: all 0.3s ease-in-out;
  height: 100%;
  position: relative;
  z-index: 1;
}

.membership-FAQs .service-item:before {
  content: "";
  position: absolute;
  background: var(--accent-color);
  inset: 100% 0 0 0;
  transition: all 0.3s;
  z-index: -1;
}

.membership-FAQs .service-item .icon {
  margin-bottom: 10px;
}

.membership-FAQs .service-item .icon i {
  color: var(--accent-color);
  font-size: 36px;
  transition: ease-in-out 0.3s;
}
.membership-FAQs  h1 {
  font-weight: 700;
 margin-bottom: 15px;
 font-size: 55px;
 font-family:  var(--default-font);
}

.membership-FAQs p {
  line-height: 24px;
  font-size:  var(--bs-body-font-size);
  margin-bottom: 0;
  transition: ease-in-out 0.3s;
}




/*--------------------------------------------------------------
# Membership FAQs
--------------------------------------------------------------*/

.membership  h1 {
  font-weight: 700;
 margin-bottom: 15px;
 font-size: 40px;
 font-family:  var(--default-font);
}


.membership  h3 {
  font-weight: 700;
 margin-bottom: 15px;
 font-size: 30px;
 font-family:  var(--default-font);
}

.membership  h2 {
  font-weight: 700;
 margin-bottom: 15px;
 font-size: 20px;
 font-family:  var(--default-font);
}

.membership p {
  line-height: 24px;
  font-size:  var(--bs-body-font-size);
  margin-bottom: 0;
  transition: ease-in-out 0.3s;
    font-size: 18px;
}




/*--------------------------------------------------------------
# event  
--------------------------------------------------------------*/

.event  h1 {
      font-weight: 700;
    margin-bottom: 15px;
    font-size: 40px;
    font-family: var(--default-font);
}
.event  h2 {
     font-weight: 700;
    margin-bottom: 15px;
    font-size: 40px;
    font-family: var(--default-font);
    color: #261d87;
}
.event p {
  line-height: 24px;
  font-size:  var(--bs-body-font-size);
  margin-bottom: 0;
  transition: ease-in-out 0.3s;
}

.darkorangebox {
    background:  #FF8343D4;
    border: 2px solid #FF8343;
    border-radius: 30px;
    height: auto;
    padding: 20px;
}


.darkbluebox {
    background: #08298A8F;
    border: 2px solid #08298A;
    border-radius: 30px;
    height: auto;
    padding: 20px;
}

.lightpinkbox {
    background: #FF4346A6;
    border: 2px solid #FF4346;
    border-radius: 30px;
    height: auto;
    padding: 20px;
}


.darkbluebox2 {
    background: #08298A;
    border: 2px solid #d8d9ea;
    border-radius: 30px;
    height: auto;
    padding: 20px;
}

.lightgraybox {
    background: #d7daeb;
    border: 2px solid #08298A;
    border-radius: 30px;
    height: auto;
    padding: 20px;
}


.eventbt1
{
     background-color: #FFFFFF;    border-radius: 36px;    padding: 10px 30px 10px 30px;    color: #F33400
}
 

.eventbt1:hover{
     
   background-color: #FFFFFF;
    border-radius: 36px;
    padding: 10px 30px 10px 30px;
    color: #F33400
}


.accordion .item {
     background: none;
    border-bottom: 1px solid #1E1E1E;
}
.accordion .item .item-header h2 {font-family: var(--default-font);}
.accordion .item2 {
     background: none;
 }
.t-p{
  color:#1E1E1E;
  padding: 10px 10px 10px 10px;
}

.t-p2{
  color:#1E1E1E;
  padding: 10px 10px 10px 10px;
}
.accordion .item .item-header h2 button.btn.btn-link {
       color: #1E1E1E;
    border-radius: 0px;
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 400;
    line-height: 2.5;
    text-decoration: none;
}


.accordion .item2 .item-header2 h2 button.btn.btn-link {
      color: #ffffff;
    border-radius: 0px;
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    background-color: #dc8a62;
    padding: 1%;
    border-radius: 10px;
}
 
 
.accordion .item .item-header {
    border-bottom: none;
    background: transparent;
    padding: 0px;
    margin: 2px;
}

.accordion .item2 .item-header2 {
    border-bottom: none;
    background: transparent;
    padding: 0px;
    margin: 2px;
}

.accordion .item .item-header h2 button {
    color: white;
    font-size: 20px;
    padding: 15px 0px 10px 2px;
    display: block;
    width: 100%;
    text-align: left;
}


.accordion .item2 .item-header2 h2 button {
    color: white;
    font-size: 20px;
    padding: 15px 0px 10px 2px;
    display: block;
    width: 100%;
    text-align: left;
}


.accordion .item .item-header h2 i {
    float: right;
    font-size: 20px;
   color:#000000;
/*    background-color: black;*/
    width: 40px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}


.accordion .item2 .item-header2 h2 i {
    float: right;
    font-size: 20px;
    color: white;
/*    background-color: black;*/
    width: 40px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

button.btn.btn-link.collapsed i {
    transform: rotate(0deg);
}

button.btn.btn-link i {
    transform: rotate(180deg);
    transition: 0.5s;
}



.accordion1 .item {
        background: #dc8a62;
    border: 2px solid #d97240;
    border-radius: 20px;
}
.accordion1 .t-p{
  color:#FFFFFF;
  padding: 15px 0px 10px 12px;
}
.accordion1 .item .item-header h2 button.btn.btn-link {
       color: #1E1E1E;
    border-radius: 0px;
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 400;
    line-height: 2.5;
    text-decoration: none;
}
 
.accordion1 .item .item-header {
    border-bottom: none;
    background: transparent;
    padding: 0px;
    margin: 2px;
}

.accordion1 .item .item-header h2 button {
  color: white;
    font-size: 20px;
    padding: 15px 0px 10px 12px;
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 20px;
}
 

.accordion1 .item .item-header h2 i {
    float: right;
    font-size: 20px;
    color: #ffffff;
/*    background-color: black;*/
    width: 40px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}






 .accordion-button {
  background-color:  #DC895D99;
  color: white;
  font: 20px Roboto, sans-serif;
}
.accordion-button:after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed):after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:hover {
  font: 21px Roboto, sans-serif;
}
.accordion-button:not(.collapsed) {
  background-color:  #dc8a62;
  color: white;
}
.accordion-item {
  background-color: #e1f5fe;
  font: 16px Roboto, sans-serif;
}



/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
}

.about h3 { color:#DC895D;
        font-size: 30px;

}
.about .imgbox {
        background: #F6F6F6;
        border: 2px solid #DEDEDE;
        border-radius: 30px;
        height: 345px;
    }
.about .about-content h3 {
  font-weight: 700;
  font-size: 26px;
}





.about .about-content ul {
  list-style: none;
  padding: 0;
}

.about .about-content ul li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 35px;
}

.about .about-content ul li:first-child {
  margin-top: 35px;
}

.about .about-content ul i {
  background: var(--contrast-color);
  box-shadow: 0px 6px 15px color-mix(in srgb, var(--accent-color), transparent 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  font-size: 24px;
  margin-right: 15px;
  color: var(--accent-color);
  border-radius: 50px;
}

.about .about-content ul h4 {
  font-size: 16px;
  font-weight: 600;
}

.about .about-content ul p {
  font-size: 18px;
}

.about .about-content p:last-child {
  margin-bottom: 0;
}


.patients-md .imgbox {
        background: #F6F6F6;
        border: 2px solid #DEDEDE;
        border-radius: 30px;
        height: 345px;
    }
.patients-md  h3 {
  font-weight: 700;
  font-size: 26px;
}

.patients-md ul {
  list-style: none;
  padding: 0;
}

.patients-md ul li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 35px;
}

.patients-md ul li:first-child {
  margin-top: 35px;
}

.patients-md ul i {
  background: var(--contrast-color);
  box-shadow: 0px 6px 15px color-mix(in srgb, var(--accent-color), transparent 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  font-size: 24px;
  margin-right: 15px;
  color: var(--accent-color);
  border-radius: 50px;
}

.patients-md ul h4 {
  font-size: 16px;
  font-weight: 600;
}

.patients-md  ul p {
  font-size: 18px;
}

.patients-md p:last-child {
  margin-bottom: 0;
}
.patient-box {
background-color: #d7daeb;
border-radius: 30px;
height: auto;
perspective: 1000;
transition: .9s;
transform-style: preserve-3d;
width: 100%;

}

.patient-box h3 {
    color: #DC895D;
    font-weight: 700;
    font-size: 26px;
 }

.patient-box-head {
border-bottom: 1px solid rgba(73, 114, 133, .6);
    display: flex;
    padding: 0px 38px;
    background-color: #2C4695;
    border-radius: 21px 21px 0px 0px;
    align-content: stretch;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    gap: 33px;
}


 .grybox {
background: #F6F6F6;
border: 2px solid #00269712;
border-radius: 30px;
height: 305px;
}
 
.grybox h3 {
    color: #1E1E1E;
    font-weight: 700;
    font-size: 120%;
 }
    .circle-icon {
         background: #ffffff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        text-align: center;
        line-height: 100px;
        vertical-align: middle;
        padding: 25px;
        display: flex;
        border: solid 1px #DEDEDE;
        flex-direction: column-reverse;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
    }

.learn-btn{ border-radius: 45px; background-color: #DC895D; color: #FFFFFF;font-size: 18px;  }
.learn-btn:hover{ border-radius: 45px; background-color: #DC895D; color: #FFFFFF; font-size: 18px; }
.announcement h3 { color:#DC895D; font-size: 30px;}
.announcement .imgbox {
        background: #F6F6F6;
        border: 2px solid #DEDEDE;
        border-radius: 30px;
        height: 345px;
    }
.announcement  h3 {
  font-weight: 700;
  font-size: 26px;
}

.announcement  ul {
  list-style: none;
  padding: 0;
}

.announcement  ul li {
 display: flex;
    align-items: flex-start;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}
/*
.announcement  ul li:first-child {
  margin-top: 35px;
}*/

.announcement  ul i {
  background: var(--contrast-color);
  box-shadow: 0px 6px 15px color-mix(in srgb, var(--accent-color), transparent 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  font-size: 24px;
  margin-right: 15px;
  color: var(--accent-color);
  border-radius: 50px;
}

.announcement  ul h4 {
  font-size: 16px;
  font-weight: 600;
}

.announcement  ul p {
  font-size: 18px;
}

.announcement  p:last-child {
  margin-bottom: 0;
}

.fello-box {
background-color: #D6DBEC;
border-radius: 21px;
height: auto;
perspective: 1000;
transition: .9s;
transform-style: preserve-3d;
width: 100%;

}
/*
.fello-box{
        background-color: #172145;
    border-radius: 21px;
     display: flex;
    flex-direction: row;
    height: auto;
}
*/

.fello-box p{ font-size: 18px; font-weight: 700;}
.fello-box span{ font-size: 14px; font-weight: 700;}

.fello-box-right{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px 20px 20px 0px;
    background-color: #d79da7;
        height: auto;
}


.fello-box-head {
border-bottom: 1px solid rgba(73, 114, 133, .6);
    display: flex;
    padding: 0px 20px;
    background-color: #2C4695;
    border-radius: 21px 21px 0px 0px;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}


.annals-disorders-box{ 
  /* background-color: #7EC8AF;*/
    /*background-color: #ebc94e;*/
    border: 2px solid #261d87c2;
    border-radius: 21px;
    display: flex;
    flex-direction: row;
    height: auto;
    padding: 10px;
    justify-content: center;
}

.annals-disorders-box p{ font-size: 18px; font-weight: 700;}
.annals-disorders-box span{ font-size: 14px; font-weight: 700;}

 
.calendar {
    background-color: #D6DBEC;
    border-radius: 21px;
     height: auto;
    perspective: 1000;
    transition: .9s;
    transform-style: preserve-3d;
    width: 100%;
 
}
/* Front - Calendar */
.front {
  transform: rotateY(0deg);
}

.current-date {
border-bottom: 1px solid rgba(73, 114, 133, .6);
    display: flex;
    padding: 0px 16px;
    background-color: #2C4695;
    border-radius: 21px 21px 0px 0px;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}
.current-month{height: auto;
    padding: 26px;}
.current-date h1 {
  color: #000000;
  font-size: 1.4em;
  font-weight: 300;
}

.week-days {
    color: #000000;
    display: flex;
    /* justify-content: space-between; */
    font-weight: 600;
    padding: 8px 7px !important;
    list-style-type: none;
}
 

.week-days li{
	width:14%!important;
}

.days {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.weeks {
  color: #000000;
    display: flex;
    flex-direction: column;
    padding: 0px 8px;
        text-align: center;
}
 

.weeks div {
  display: flex;
    font-size: 18px;
    font-weight: 300;
    /* justify-content: space-between; */
    width: 100%;
}


.last-month {
  opacity: .3;
}

.months{
	width:150px;
	background: transparent;
}

.current-date .carousel{
	background-color:#887abe;
	color:#fff;
	font-size:18px;
}


.weeks span {
    padding: 4px;
  width:14%;
}

.weeks span.active {
  background: #f79500;
  width:14%;
  color: #000000;
}

.weeks span:not(.last-month):hover {
  cursor: pointer;
  font-weight: 600;
  color: #000000;
}




.event {
  position: relative;
}

.event:after {
  content: '•';
  color: #f78536;
  font-size: 1.4em;
  position: absolute;
  right: -4px;
  top: -4px;
  display:none;
}

/* Back - Event form */

.back {
  height: 100%;
  transform: rotateY(1deg);
}

.back input {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(73, 114, 133, .6);
  color: #dfebed;
  font-size: 1.4em;
  font-weight: 300;
  padding: 30px 40px;
  width: 100%;
}

.info {
  color: #000;
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 1.2em;
  padding: 30px 40px;
}

.info div:not(.observations) {
  margin-bottom: 10px;
}

.info span {
  font-weight: 300;
}

.info h4{
	font-family:poppins;
	font-size:20px;
	color:#000;
	font-weight:600;
	margin-bottom:15px;
	border-bottom:1px solid #331b90;
}


.info .date {
  display: flex;
  justify-content: space-between;
  border-bottom:1px dotted #bfbfbf;
}

.info .date p {
  width: 50%;
}

.info .address p {
  width: 100%;
  border-bottom:1px dotted #bfbfbf;
}

.actions {
  bottom: 0;
  border-top: 1px solid rgba(73, 114, 133, .6);
  display: flex;
  justify-content: space-between;
	width: 100%;
	background: #000;
	padding: 10px
}

.actions button {
  background: none;
  border: 0;
  color: #fff;
  font-weight: 600;
  letter-spacing: 3px;
  margin: 0;
  padding: 0 0;
  text-transform: uppercase;
  width: 50%;
}

.actions button:first-of-type {
  border-right: 1px solid rgba(73, 114, 133, .6);
}

.actions button:hover {
  background: #497285;
  cursor: pointer;
}

.actions button:active {
  background: #5889a0;
  outline: none;
}

/* Flip animation */

.flip {
  transform: rotateY(180deg);
}

.front, .back {
  backface-visibility: hidden;
}

.modal-body{
	padding:0px !important;
}

/*--------------------------------------------------------------
#Gallery Section
--------------------------------------------------------------*/

.gallery{
  background: #E6E9F2;
    border-radius: 66px;
    background-image: url(../img/rectangle.svg);
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: 24%;
    height: auto;
    margin: 0 auto;
}
 

.gallery h3 { color:#DC895D; font-size: 30px;}
.gallery img {
    border-radius: 30px;}
.dark-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
     border-radius: 30px;
        }

   .image-container {
            position: relative;
            display: inline-block;
        }

        .image-container img {
            display: block;
            width: 100%;
            height: auto;
              background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));

        }

        .explore-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /*background-color: rgba(0, 0, 0, 0.7);*/
            color: white;
            padding: 10px 5px;
            font-size: 16px;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .explore-button i {
            font-size: 16px;
        }

        
.gallery .imgbox img {
         border-radius: 30px;
    }
.gallery .imgbox {
    border: 35px solid #e7e9f2;
    border-radius: 70px;
}
.gallery h3 {
  font-weight: 700;
  font-size: 30px;
}
.gallery p {
  font-weight: 700;
  font-size: 16px;
}
.gallery ul {
  list-style: none;
  padding: 0;
}

.gallery ul li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 35px;
}

.gallery ul li:first-child {
  margin-top: 35px;
}

.gallery ul i {
  background: var(--contrast-color);
  box-shadow: 0px 6px 15px color-mix(in srgb, var(--accent-color), transparent 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  font-size: 30px;
  margin-right: 15px;
  color: var(--accent-color);
  border-radius: 50px;
}

.gallery ul h4 {
  font-size: 30px;
  font-weight: 600;
}

.gallery ul p {
  font-size: 18px;
}

/*--------------------------------------------------------------
socialmedia
--------------------------------------------------------------*/

.socialmedia{
    margin: 0 auto;
}
 

 .socialmedia img {
    border-radius: 30px;}


        
.socialmedia .imgbox img {
         border-radius: 30px;
    }
.socialmedia .imgbox {
    border: 35px solid #e7e9f2;
    border-radius: 70px;
}
.socialmedia h3 {
    color:#DC895D;
  font-weight: 700;
  font-size: 30px;
}
 
.socialmedia ul {
  list-style: none;
  padding: 0;
}

.socialmedia ul li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 35px;
}

.socialmedia ul li:first-child {
  margin-top: 35px;
}

.socialmedia ul i {
  background: var(--contrast-color);
  box-shadow: 0px 6px 15px color-mix(in srgb, var(--accent-color), transparent 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  font-size: 24px;
  margin-right: 15px;
  color: var(--accent-color);
  border-radius: 50px;
}

.socialmedia ul h4 {
  font-size: 16px;
  font-weight: 600;
}

.socialmedia ul p {
  font-size: 18px;
}

.social-buttons {
   position: absolute;
    bottom: 3%;
    /* left: 0; */
    /* transform: translateX(-50%); */
    display: flex;
    z-index: 2;
    justify-content: flex-start;
    right: 0;
    flex-direction: column-reverse;
    width: 70px;
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}

.skills .progress .skill {
  color: var(--heading-color);
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: var(--heading-font);
}

.skills .progress .skill .val {
  float: right;
  font-style: normal;
}

.skills .progress-bar-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  height: 10px;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats i {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: 6px solid var(--contrast-color);
  width: 64px;
  height: 64px;
  font-size: 24px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.stats .stats-item {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  margin-top: -32px;
  padding: 40px 30px 35px 30px;
  width: 100%;
  position: relative;
  text-align: center;
  border-radius: 4px;
  z-index: 0;
}

.stats .stats-item span {
  font-size: 36px;
  display: block;
  font-weight: 700;
}

.stats .stats-item p {
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 16px;
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
  padding: 25px 0;
}

.clients .swiper {
  padding: 10px 0;
}

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-slide img {
  transition: 0.3s;
}

.clients .swiper-slide img:hover {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 80px 20px;
  transition: border ease-in-out 0.3s;
  height: 100%;
}

.services .service-item .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: var(--accent-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
}

.services .service-item .icon i {
  color: var(--contrast-color);
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: 0.3s;
}

.services .service-item p {
  line-height: 24px;
  font-size: 16px;
  margin-bottom: 0;
}

.services .service-item:hover {
  border-color: var(--accent-color);
}

.services .service-item:hover h3 {
  color: var(--accent-color);
}


/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-wrap {
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
}

@media (max-width: 575px) {
    .featured-services  h3 {
  font-weight: 700;
 margin-bottom: 15px;
 font-size: 15px;
 font-family:  var(--default-font);
}

.featured-services p {
  line-height: 24px;
  font-size: 16px;
  margin-bottom: 0;
  transition: ease-in-out 0.3s;
    text-align: justify!important;
}

    .slider{display:none;}
    .btn-holder {
    display: inline-flex;
    align-items: end;
    float: right;
    padding-top: 0px;
    margin-right: 0px;
    padding-bottom: 10px;
}
    .header .branding h1 {
    font-size: 140% !important;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 0px;
    color: #08298A;
    text-align: center;
        display: none;
    }
    

    .header .branding h4 {
    font-size: 80% !important;
    font-weight: 400;
    color: #DC895D;
    text-align: center;
         display: none;
}
    
    .membership h1 {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 26px;
    font-family: var(--default-font);
}
    .why-become-member {
    width: 100%;
    min-height: 19vh;
    position: relative;
    padding: 60px 0;
    display: flex;
    align-items: center;
    background: url(../img/Join-the-Movements-Dsorders-Society-India.jpeg) bottom left;
    background-size: cover;
    background-position: center;
}
    .hero-mission {
    width: 100%;
    min-height: 19vh;
    position: relative;
    padding: 60px 0;
    display: flex;
    align-items: center;
    background: url(../img/vision-mission-sm.png) bottom left;
    background-size: cover;
}
    .fello-box{
       background-color: #D6DBEC;
    border-radius: 21px;
     display: flex;
    flex-direction: row;
    height: auto;
        margin-top: 4%;
}

.fello-box p{ font-size: 20px; font-weight: 700;}
.fello-box span{ font-size: 18px; font-weight: 700;}

.fello-box-right{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px 20px 20px 0px;
    background-color: #d79da7;
    height: auto;
}

    
    .calendar {
    background-color: #D6DBEC;
    border-radius: 50px;
     height: auto;
    perspective: 1000;
    transition: .9s;
    transform-style: preserve-3d;
    width: 100%;
 
}
    
    
/* Front - Calendar */
.front {
  transform: rotateY(0deg);
}

.current-date {
border-bottom: 1px solid rgba(73, 114, 133, .6);
    display: flex;
    justify-content: space-between;
    padding: 10px 40px;
    background-color: #2C4695;
    border-radius: 40px 40px 0px 0px;
}

.current-date h1 {
  color: #000000;
  font-size: 1.4em;
  font-weight: 300;
}

.week-days {
  color: #000000;
  display: flex;
  /* justify-content: space-between; */
  font-weight: 600;
  padding: 12px 40px;
  list-style-type:none;
}

.week-days li{
	width:14%!important;
}

.days {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.weeks {
  color: #000000;
  display: flex;
  flex-direction: column;
  padding: 0 5px;
}

.weeks div {
  display: flex;
    font-size: 18px;
    font-weight: 300;
    /* justify-content: space-between; */
    width: 100%;
}


.last-month {
  opacity: .3;
}

.months{
	width:150px;
	background: transparent;
}

.current-date .carousel{
	background-color:#887abe;
	color:#fff;
	font-size:18px;
}


.weeks span {
    padding: 4px;
  width:14%;
}

.weeks span.active {
  background: #f79500;
  width:14%;
  color: #000000;
}

.weeks span:not(.last-month):hover {
  cursor: pointer;
  font-weight: 600;
  color: #000000;
}

    
    
      .contact .info-wrap {
    padding: 20px;
  }
}

.contact .info-item {
  margin-bottom: 40px;
}

.contact .info-item i {
  font-size: 20px;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  font-size: 20px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 16px;
}

.contact .info-item:hover i {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.contact .php-email-form {
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 575px) {
    .patient-box {
background-color: #d7daeb;
border-radius: 30px;
height: auto;
perspective: 1000;
transition: .9s;
transform-style: preserve-3d;
width: 100%;

}

.patient-box h3 {
    color: #DC895D;
    font-weight: 700;
    font-size: 20px;
 }

.patient-box-head {
border-bottom: 1px solid rgba(73, 114, 133, .6);
    display: flex;
    padding: 0px 38px;
    background-color: #2C4695;
    border-radius: 21px 21px 0px 0px;
    align-content: stretch;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    gap: 33px;
}

     .membership p a{
     font-size: 18px !important;
        color: #432982;
        text-decoration: underline;
}
    .annals-disorders-box{
    border: 2px solid #261d87c2;
    border-radius: 21px;
    display: flex;
    flex-direction: row;
    height: auto;
    padding:16px;
        margin-top: 6%;
}

.annals-disorders-box p{ font-size: 18px; font-weight: 700;}
.annals-disorders-box span{ font-size: 16px; font-weight: 700;}


    
    .modal-content {
         background-color: white;
        padding: 29px;
        border-radius: 5px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        width: 97%;
        text-align: justify;
        position: relative;
        top: 15%;
    }
 
    .calendar {
    background-color: #D6DBEC;
    border-radius: 50px;
     height: auto;
    perspective: 1000;
    transition: .9s;
    transform-style: preserve-3d;
    width: 100%;
 
}
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 16px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 25%);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 18px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 18px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 18px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}










main {
    width: 100%;
    height: 100%;
}
.wrapper{
	width: fit-content;
    min-width: 100vw;
    min-height: 100vh;
	height:var(--wraper-height);
    position: relative;
	/* position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}
.form-container{
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	overflow:auto;
    min-width: 425px;
    padding: 30px 6px 30px 10px;
}
.form-input-container .form-subcontainer, .submit-button{
	max-width: 400px;
}
.form-title{
    font-size: 26px;
    font-weight: 600;
    text-align: center;
	color: var(--black-color);
    margin-bottom: 12px;
    padding: 8px;
    border-radius: 8px;
	position:relative;
	 color: #08298A; 
}

.ml{
	text-align: center;
	color: #08298A;
}



.back-btn-svg{
    width: 35px;
    height: 35px;
    border-radius: 8px;
    position: absolute;
    top: 20%;
    font-size: 15px;
    left: 0px;
    border: 1px solid var(--black-color);
    cursor: pointer;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    text-decoration: none;
    color: var(--black-color);
    padding: 6px 10px;
    text-align: end;
	
}
.back-btn-svg::before{
	content: '';
    position: absolute;
    top: 9px;
    left: 9px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -6.5 38 38' fill='%231C252E'%3E%3Cg transform='translate(-291, -38)'%3E%3Cpath d='M317.812138,38.5802109 L328.325224,49.0042713 L328.41312,49.0858421 C328.764883,49.4346574 328.96954,49.8946897 329,50.4382227 L328.998248,50.6209428 C328.97273,51.0514917 328.80819,51.4628128 328.48394,51.8313977 L328.36126,51.9580208 L317.812138,62.4197891 C317.031988,63.1934036 315.770571,63.1934036 314.990421,62.4197891 C314.205605,61.6415481 314.205605,60.3762573 314.990358,59.5980789 L322.274264,52.3739093 L292.99947,52.3746291 C291.897068,52.3746291 291,51.4850764 291,50.3835318 C291,49.2819872 291.897068,48.3924345 292.999445,48.3924345 L322.039203,48.3917152 L314.990421,41.4019837 C314.205605,40.6237427 314.205605,39.3584519 314.990421,38.5802109 C315.770571,37.8065964 317.031988,37.8065964 317.812138,38.5802109 Z' id='left-arrow' transform='translate(310.000000, 50.500000) scale(-1, 1) translate(-310.000000, -50.500000) '%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
	background-size: 15px 15px;
    width: 15px;
    height: 15px;
}
.form-title svg{
	width: 12px;
	transform: translateY(-2px) rotate(180deg);
}
/* Active and Inactive toggle starts*/
.actv-inactv-subcontainer{
	margin: 22px 0px 20px;
}
.act-sta-lbl{
	margin-bottom: 14px;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 35px;
    color: #08298A;
    font-size: var(--font-min-size);
    font-weight: 600;
}
.tgl-swtch {
    display: inline-block;
    width: 230px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: 45px;
    position: relative;
    cursor: pointer;
    user-select: none;
    background-color: #eee;
}
.tgl-swtch::before{
    content: '';
    width: 48%;
    height: 100%;
    border-radius: 8px;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: rgb(9 8 8 / 32%) 0px 4px 12px;
	background-image: linear-gradient(#5b5b5b 0%, #4d5054 100%);
    transition: .3s;
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1.2);
}
.tgl-swtch:has(.tgl-input:checked)::before{
	left: 52%;
}
.tgl-lbl{
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    z-index: 11;
}
.tgl-input{
	display:none;
}
.tgl-actv, .tgl-inactv{
	color:var(--black-color);
	display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.tgl-actv{
	left:29px;
}
.tgl-inactv{
	right:24px;
}
.tgl-input:checked + .tgl-lbl .tgl-inactv, 
.tgl-input:not(:checked) + .tgl-lbl .tgl-actv{
	color:#fff;
	font-weight:600;	
}
/* Active and Inactive toggle ends*/
.form-subcontainer, .category-container{
	margin: 22px 0px 28px;
	position: relative;
}
.form-subcontainer:has(.pass-desgn){
	margin: 0px 0px 28px;
}
.form-subcontainer:has(.error-active){
	margin: 22px 0px 34px;
}

.category-subcontainer {
    background-color: #eee;
    border: 1px solid var(--border-color);
    padding: 6px 2px;
    max-width: 400px;
    border-radius: 8px;
    text-align: center;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
.category-option {
    text-align: center;
    cursor: pointer;
	user-select:none;
}
.role-nme {
    background-color: transparent;
    font-size: 16px;
    color: var(--black-color);
    border-radius: 8px;
    padding: 10px 25px;
    margin: 0px 2px;
    transition: all 0.15s ease-in-out;
    display: inline-block;
}
.category-option:hover .role-nme {
    background-color: rgba(255, 255, 255, 0.5);
}
.category-input:checked + .role-nme {
    position: relative;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    background-color: #DC895D;
    font-weight: 600;
    animation: scaleAnimation 0.4s ease forwards;
	color: #fff;
}
@keyframes scaleAnimation {
    0% {
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
/* Bubble animation starts */
.category-input:checked + .role-nme::before,
.category-input:checked + .role-nme::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #555;
	opacity: 0;
	animation: bubbles 0.6s ease forwards;
}
.category-input:checked + .role-nme::before {
	--direction: -12px;
	top: -8px;
}
.category-input:checked + .role-nme::after {
	--direction: 12px;
	bottom: -8px;
}
@keyframes bubbles {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(var(--direction));
  }
}
/* Bubble animation ends */
.form-label,.form-heading{
	display: block;
    color: #08298A;
    font-size: var(--font-min-size);
    font-weight: 600;
    margin-bottom: 8px;
}
.form-label{
	max-width: 166px;
}
.form-label::before{
    content: '';
    position: absolute;
    top: 30px;
    left: 42px;
    width: 1px;
    height: 50px;
    background-color: var(--border-color);
	transition: 0.3s ease-out;
}
.form-input{
    font-family: inherit;
    width: 100%;
    height: 50px;
    outline: none;
    background: none;
	padding: 16.5px 14px 16.5px 52px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--black-color);
    font-size: 16px;
    letter-spacing: 0.4px;
	transition: 0.3s ease-out;
	background-color: #f9f9f9;
}
.form-input:focus{
	border: 1px solid var(--black-color);
}
.form-label:has( + .form-input:focus)::before{
	background-color:var(--black-color);
}
.profile-svg, .lock-svg{
	position: absolute;
    width: 21px;
    top: 44px;
    left: 12px;
}
#usr-nme::placeholder{
	letter-spacing:0.4px;
	font-size:15px;
}
#usr-passwrd::placeholder, .pass-desgn::placeholder{
	letter-spacing:3px;
	font-size:15px;
}
#usr-passwrd, .pass-desgn{
	padding: 16.5px 60px 16.5px 52px;
}
.passwrd-svgs, .edit-svg {
    width: 35px;
    display: inline-block;
    position: absolute;
    top: 37px;
    right: 19px;
    height: 35px;
    border-radius: 50%;
    pointer-events: none;
    overflow: hidden;
}
.edit-svg {
	border-radius:10px;
}
.passwrd-svgs:hover,.edit-svg:hover {
    background-color: #eaecef;
}
.passwrd-svgs::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #9d9e9f;
    display: block;
    transform: scale(0);
    opacity: 1;
    border-radius: 50%;
}
.passwrd-svgs.ripple-active::before { 
    transform: scale(3);
    opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.passwrd-close-svg, .passwrd-open-svg{
    margin: 8px;
    width: 20px;
    cursor: pointer;
    pointer-events: auto;
    z-index: 11;
    user-select: none;
}
.passwrd-close-svg{
	display:none;
}
.edit-svg svg {
    margin: 8px 6px;
    width: 22px;
    cursor: pointer;
    pointer-events: auto;
    z-index: 11;
}
.pass-hidden-container{
	height: var(--scroll-height);
    overflow: hidden;
    transition: height 0.3s ease-out;
}
.submit-button{
    width: 100%;
    height: 48px;
    font-family: inherit;
	background-color: #DC895D;
	background-position: top center;
    color: #fff;
    padding: 8px 16px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    margin-bottom: 10px;
    letter-spacing: 0.6px;
    cursor: pointer;
	position: relative;
    overflow: hidden;
    transition: 0.8s ease-out;
}
.submit-button .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none; 
}
@keyframes ripple-animation {
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
.error-msg{
	display:none;
    font-size: 13px;
    position: absolute;
    color: #ff0000;
	letter-spacing: 0.3px;
	margin: 4px 0px 0px 4px;
}
.error-msg svg{
	width: 17px;
    vertical-align: bottom;
}
.error-active{
	display:block;
}
@media(max-width: 425px){
	.form-container {
		min-width: max-content;
		padding: 30px 10px;
	}
	.act-sta-lbl {
		font-size: 16px;
		margin-right: 10px;
	}
	.tgl-swtch {
		width: 190px;
	}
	.tgl-actv {
		left: 22px;
	}
	.tgl-inactv {
		right: 17px;
	}
	.tgl-actv, .tgl-inactv {
		font-size:15px;
	}
	.category-subcontainer {
		max-width: 330px;
	}
	.role-nme{
		padding: 10px 15px;
		font-size:15px;	
	}
	.form-label, .form-heading {
		font-size: 16px;
	}
	.form-title {
		font-size: 22px;
	}
	#usr-nme::placeholder, #usr-passwrd::placeholder{
		font-size:14px;
	}
	.form-input {
		font-size:15px;
	}
	.profile-svg, .lock-svg {
		width: 20px;
	}
	.form-label::before {
		top: 29px;
	}
}