html, body {
            font-family: 'DM Serif Display', sans-serif;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: flow; 
			  overflow-x: hidden;
  			width: 100%;
        }

body {
    background-color: white;
    color: #333;
     min-height: 100vh; /* Ensure body takes full height */
     min-width: 100vw;
}



/* preloader */

/* Preloader styles */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}

#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.loader-wrapper {
  text-align: center;
}

.logo-text {
  font-family: 'DM Serif Display', serif;
  font-size: 2rem;
  color: #1a73e8;
  margin-bottom: 1rem;
  animation: pulse 1.2s ease-in-out infinite;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #1a73e8;
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Spinner Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Pulse Animation for Logo */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.7; }
}




/* header {
	background-color: #0089f9; 
    padding: 20px;
    text-align: center;
} */

header h1 {
    color: white;
    margin: 0;
}

/* nav */
.navbar-nav .nav-link {
  font-size: 1.1rem;     /* Increase font size */
  font-weight: 600;      /* Semi-bold */
  letter-spacing: 0.5px; /* Optional: spacing between letters */
}

.navbar-brand {
  font-size: 1.5rem;      /* Bigger brand name */
  font-weight: 700;
}

form .form-control,
form .btn {
  font-size: 1rem;
}



section {
    padding: 40px 20px;
}

h2 {
    color: #000000;
    margin-bottom: 20px;
	font-family: "DM Serif Display", serif;
}




footer {
    background-color: #da41e7;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}


/* slider */

/*body { color: #444; font-family: Helvetica, sans-serif; margin: 0; }*/

.stage button { margin-top: 10px; }

.stage ul {
	color: #ECECEC;
	text-align: center;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.stage a {
	color: #c48ec8;
	-webkit-transition: color 0.25s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
       -moz-transition: color 0.25s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
         -o-transition: color 0.25s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
            transition: color 0.25s cubic-bezier(0.860, 0.000, 0.070, 1.000); /* ease-in-out */
}



.stage ul.animate {
	-webkit-transition: -webkit-transform 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
       -moz-transition: transform 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
         -o-transition: transform 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
            transition: transform 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); /* ease-in-out */	
}

.stage {
	min-width: 100vw;
	margin: 0 auto;
	padding: 0 12%;
	text-align: center;
	overflow: hidden;
    cursor: pointer;
}

.stage .sldr {
	max-width: 825px;
	margin: 0 auto;
	overflow: visible;
	position: relative;
	clear: both;
	display: block;
}

.stage .sldr > ul > li {
	float: left;
	display: block;
	width: 825px;
}

.stage  div.skew {
	max-width: 825px;
	margin: 0 auto;

	display: block;
	overflow: hidden;

	-webkit-transform: skewX(16deg);
       -moz-transform: skewX(16deg);
        -ms-transform: skewX(16deg);
            transform: skewX(16deg);
}

.stage div.skew > div.wrap {
	display: block;
	overflow: hidden;

	-webkit-transform: skewX(-16deg);
	   -moz-transform: skewX(-16deg);
	    -ms-transform: skewX(-16deg);
	        transform: skewX(-16deg);

	margin-left: -10.1%;
	width: 122%;
}

.stage img {
	max-width: 1000px;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.selectors {
	/* margin: 15px 0 0; */
}

.stage .selectors li {
	font-size: 46px;
	line-height: 32px;
	display: inline;
	padding: 0 2px;	
}

.stage .selectors li a {
	text-decoration: none;
}

.selectors li.focalPoint a {
	color: #CCC;
	cursor: default;
}

.stage .captions div {
	left: 200%;
	position: fixed;
	opacity: 0;

	-webkit-transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
       -moz-transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
         -o-transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
            transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); /* ease-in-out */
}

.stage .captions div.focalPoint {
	opacity: 1;
	left: inherit;
	position: static;
}

.stage .clear {
	display: block;
	width: 100%;
	height: 0;
	overflow: hidden;
	clear: both;
}




/* side Nav  */
    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        background-color: rgba(1, 87, 155, 0.8);
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
		box-sizing: border-box; /* Prevent padding from increasing width */		
    }

    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: black;
        display: block;
        transition: 0.3s
    }

    .sidenav a:hover {
        color: ghostwhite;
    }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
    }
	#filter:hover{
    /*background-color:rgba(1, 87, 155, 0.7);*/
    margin-top: 10px;
    margin-left: 10px ;
    margin-bottom: 10px;
    padding:10px;
    z-index: 1;
    transition:  all 0.3s;

}


/* call to action */

.call-to-action {
  position: relative;
  background-color: #aae0ff;
  background-size: cover;
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.call-to-action:before {
  content: "";
  position: absolute;
  background-color: #aae0ff;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.5;
}