/* header image animation */
.button__box{
    border: none;
    background: var(--i);
    box-shadow: 0 0 10px var(--i);
    /* Add effect for animtion more smoothly */
    transition: transform .2s linear;
}

.pr-20 {
    margin-right: 20px;
}

.fS-mm {
    font-size: 20px;
    letter-spacing: 2px;
}

.fS-m {
    font-size: 30px;
    letter-spacing: 2px;
}
  
.d-f-row {
    flex-direction: row;
}

.fs-sm-12 {
    font-size: 12px;
}

.fs-ss-8 {
    font-size: 8px;
}
  
.op-p5 {
    opacity: 0.5;
}

.op-p4 {
    opacity: 0.4;
}

.pb-120 {
    padding-bottom: 120px;
}

/* hidden */
@media (max-width: 936px) and (min-width: 767px) {
    .res-hidden-team {
        display: none;
    }
}

@media (max-width: 792px) and (min-width: 767px) {
    .res-hidden-man {
        display: none;
    }
}

@media (min-width: 767px) and (max-width: 1199px) {
    .about-arc .box-img .img-last { 
        display: none;
    }

}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .res-fs {
        font-size: 12px;
    }
}

@media only screen and (max-width: 1024px) {
    .res-fs {
        font-size: 10px;
    }
}

@media only screen and (max-width: 992px) {
    .box-info {
        display: none;
    }
}

@media only screen and (max-width:992px ) {
    .res-hidden-exp {
        display: none;
    }

    .dsn-style-cards, .dsn-posts.box-image-hover, .post-content {
        width: 80vw;
        height: 70vh;
		margin-left:40px!important;
    }
}
/* card anime */

.filter {
	/* opacity: 0.25; */
	top: 50%;
	left: 50%;
	position: fixed;
	/* outline: 1px solid red; */
	/* width: max(100vw, 100vh); */
	width: max(75vw, 75vh);
	aspect-ratio: 1;
	user-select: none !important;
	pointer-events: none;
	border-radius: 50%;
	transform: translate(-50%, -50%) scaleY(-1);
	z-index: 100;
	--_m1: radial-gradient(
		rgb(255 255 255 / 1) 0%,
		rgb(255 255 255 / 0.5) 40%,
		rgb(255 255 255 / 0) 65%,
		rgb(255 255 255 / 0) 100%
	);
	--_m: radial-gradient(
		rgb(0 0 0 / 0.9) 0%,
		rgb(0 0 0 / 0.5) 40%,
		rgb(0 0 0 / 0) 65%,
		rgb(0 0 0 / 0) 100%
	);
	-webkit-mask-box-image: var(--_m1);
	mask-border: var(--_m1);

	/* background: var(--_m1); */
	/* mix-blend-mode: color-burn; */
	mix-blend-mode: overlay;
	backdrop-filter: brightness(4) url(#filter);
}

.testimonial-inner-item {
	--border-radius: 2rem;
	width: 100%;
	aspect-ratio: 1;
	position: relative;
	z-index: unset;
	border-radius: var(--border-radius);
	backdrop-filter: blur(1rem);
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);

	&:after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: var(--border-radius);
		z-index: -1;
		background-image: linear-gradient(122.12deg, #166496 0%, #961664 100%);
		--b: 0.5;
		filter: brightness(var(--b));
		transition: all calc(1s / 16 * 4) ease-in-out;

		--border: 4;
		--alpha: 0;
		--gradient: linear-gradient(122.12deg, #166496 0%, #961664 100%);
		--bg-size: calc(100% + (2px * var(--border)));
		background: var(--gradient) center center / var(--bg-size) var(--bg-size);
		border: calc(var(--border) * 1px) solid transparent;
		mask: linear-gradient(
				hsl(0 0% 100% / var(--alpha)),
				hsl(0 0% 100% / var(--alpha))
			),
			linear-gradient(hsl(0 0% 100%), hsl(0 0% 100%));
		mask-clip: padding-box, border-box;
		mask-composite: intersect;
	}

	&:hover {
		&:after {
			--b: 1;
			isolation: isolate;
		}
	}
}

/* header section */
/*=============== VARIABLES CSS ===============*/
:root {
	--header-height: 3rem;
  
	/*========== Colors ==========*/
	/* Change favorite color to match images */
	/*Green dark 190 - Green 171 - Grren Blue 200*/
	--hue-color: 190;
  
	/* HSL color mode */
	--first-color: hsl(var(--hue-color), 64%, 22%);
	--first-color-second: hsl(var(--hue-color), 64%, 22%);
	--first-color-alt: hsl(var(--hue-color), 64%, 15%);
	--title-color: hsl(var(--hue-color), 64%, 18%);
	--text-color: hsl(var(--hue-color), 24%, 35%);
	--text-color-light: hsl(var(--hue-color), 8%, 60%);
	--input-color: hsl(var(--hue-color), 24%, 97%);
	--body-color: hsl(var(--hue-color), 100%, 99%);
	--white-color: #FFF;
	--scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
	--scroll-thumb-color: hsl(var(--hue-color), 12%, 75%);
  
	/*========== Font and typography ==========*/
	--body-font: 'Open Sans', sans-serif;
	--title-font: 'Raleway', sans-serif;
	--biggest-font-size: 2.5rem;
	--h1-font-size: 1.5rem;
	--h2-font-size: 1.25rem;
	--h3-font-size: 1rem;
	--normal-font-size: .938rem;
	--small-font-size: .813rem;
	--smaller-font-size: .75rem;
  
	/*========== Font weight ==========*/
	--font-medium: 500;
	--font-semi-bold: 600;
  
	/*========== Margenes Bottom ==========*/
	--mb-0-25: .25rem;
	--mb-0-5: .5rem;
	--mb-0-75: .75rem;
	--mb-1: 1rem;
	--mb-1-25: 1.25rem;
	--mb-1-5: 1.5rem;
	--mb-2: 2rem;
	--mb-2-5: 2.5rem;
  
	/*========== z index ==========*/
	--z-tooltip: 10;
	--z-fixed: 100;
  
	/*========== Hover overlay ==========*/
	--img-transition: .3s;
	--img-hidden: hidden;
	--img-scale: scale(1.1);
  }
  
  @media screen and (min-width: 968px) {
	:root {
	  --biggest-font-size: 4rem;
	  --h1-font-size: 2.25rem;
	  --h2-font-size: 1.75rem;
	  --h3-font-size: 1.25rem;
	  --normal-font-size: 1rem;
	  --small-font-size: .875rem;
	  --smaller-font-size: .813rem;
	}
  }
  
  /*========== Variables Dark theme ==========*/
  body.dark-theme {
	--first-color-second: hsl(var(--hue-color), 54%, 12%);
	--title-color: hsl(var(--hue-color), 24%, 95%);
	--text-color: hsl(var(--hue-color), 8%, 75%);
	--input-color: hsl(var(--hue-color), 29%, 16%);
	--body-color: hsl(var(--hue-color), 29%, 12%);
	--scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
	--scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);
  }
  
  /*========== Button Dark/Light ==========*/
  .nav__dark {
	display: flex;
	align-items: center;
	column-gap: 2rem;
	position: absolute;
	left: 3rem;
	bottom: 4rem;
  }
  
  .change-theme, .change-theme-name {
	color: var(--text-color);
  }
  
  .change-theme {
	cursor: pointer;
	font-size: 1rem;
  }
  
  .change-theme-name {
	font-size: var(--small-font-size);
  }
  
  /*=============== BASE ===============*/
  * {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
  }
  
  html {
	scroll-behavior: smooth;
  }
  
  body {
	font-family: var(--body-font);
	font-size: var(--normal-font-size);
	background-color: var(--body-color);
	color: var(--text-color);
  }
  
  .h2-about {
	color: var(--title-color);
	font-weight: var(--font-semi-bold);
	font-family: var(--title-font);
  }
  
  .img-about {
	max-width: 100%;
	height: auto;
  }
  
  .mainheader {
	overflow-x: hidden;
  }
  
  /*=============== REUSABLE CSS CLASSES ===============*/
  .section {
	padding:  4.5rem 0;
  }
  
  .section__title {
	font-size: var(--h2-font-size);
	color: var(--title-color);
	text-align: center;
	text-transform: capitalize;
	margin-bottom: var(--mb-2);
  }
  
  .container-about {
	max-width: 1200px;
	margin-left: var(--mb-1);
	margin-right: var(--mb-1);
  }
  
  .header-grid {
	display: grid;
	gap: 1.5rem;
  }
  
  /*=============== ABOUT ===============*/

  .container-about {
	margin-left: auto;
	margin-right: auto;
  }

  .about__data {
	text-align: center;
	padding: 10px;
  }
  
  .about__container {
	row-gap: 2.5rem;
  }
  
  .about__description {
	margin-bottom: var(--mb-2);
	line-height: normal;
  }
  
  .about__img {
	display: flex;
	column-gap: 1rem;
	align-items: center;
	justify-content: center;
  }
  
  .about__img-overlay {
	overflow: var(--img-hidden);
  }
  
  .about__img-one {
	width: 130px;
  }
  
  .about__img-two {
	width: 180px;
  }
  
  .about__img-one, 
  .about__img-two {
	transition: var(--img-transition);
  }
  
  .about__img-one:hover, 
  .about__img-two:hover {
	transform: var(--img-scale);
  }
  /*=============== MEDIA QUERIES ===============*/
  @media screen and (min-width: 768px) {  
	.section {
	  padding: 7rem 0;
	}
	.about__container {
	  grid-template-columns: repeat(2, 1fr);
	  align-items: center;
	}
	.about__data, .about__title {
	  text-align: initial;
	}
	.about__title {
	  margin-bottom: var(--mb-1-5);
	}
	.about__description {
	  margin-bottom: var(--mb-2);
	}
  }
  
  /* For large devices */
  @media screen and (min-width: 1024px) {
	.container-about {
	  margin-left: auto;
	  margin-right: auto;
	}
	.about__img-one {
	  width: 230px;
	}
	.about__img-two {
	  width: 290px;
	}
  }
  
  @media screen and (min-width: 1200px) {
	.container-about {
	  max-width: 1150px;
	}
  } 

/* button */
.buttonheader {
	--w: 230px;
	--h: 60px;
	--icon-size: 25px;
	--text-color: rgb(236, 236, 243);
	--box-glow-color: transparent;
	--box-glow-blur: 20px;
	position: relative;
	min-width: var(--w);
	min-height: var(--h);
	border-radius: var(--h);
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	font-family: "Montserrat";
	color: var(--text-color);
	background: rgba(4, 8, 20, 0.618);
	box-shadow: 0 0 0 1px rgb(200 200 220 / 0.22),
		0 0 var(--box-glow-blur) var(--box-glow-color),
		inset 0 0 26px -10px var(--box-glow-color);
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow 500ms ease;
	z-index: 2;
}
.buttonheader::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(200, 200, 220, 0.096);
	box-shadow: inset 0 0px 24px 0 rgb(170 230 250 / 0.12);
	border-radius: var(--h);
	z-index: 1;
	transition: transform 500ms ease, box-shadow 500ms ease;
}

.textbtn,
.iconbtn {
	z-index: 2;
}

.textbtn {
	transform: translateX(-50%);
	font-family: "Montserrat";
	transition: transform 500ms ease;
  	font-size: medium;
}

.iconbtn {
	position: absolute;
	width: var(--icon-size);
	height: var(--icon-size);
	left: 0;
	transform: translateX(calc((var(--w)) / 2 + 8px));
	transition: transform 500ms ease, color 500ms ease;
}

.svgbtn {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.buttonheader:active {
	--box-glow-blur: 36px;
}
.buttonheader:hover,
.buttonheader:active {
	--box-glow-color: var(--color);
}
.buttonheader:hover::before,
.buttonheader:active::before {
	transform: translateX(65%);
	box-shadow: inset 0 0px 0px 0 transparent;
}
.buttonheader:hover .textbtn,
.buttonheader:active .textbtn {
	transform: translateX(0%);
	animation-play-state: running;
}
.buttonheader:hover .iconbtn,
.buttonheader:active .iconbtn {
	transform: translateX(calc(var(--w) - var(--icon-size) - 19px));
	color: var(--color);
}

.buttonheader:focus-visible {
	outline: none;
}
.buttonheader:focus-visible:not(:hover, :active) {
	--box-glow-color: rgb(114 114 114 / 0.5);
}

/* ========= CARD ========= */
.carddef {
	line-height: 1.5em;
	font-size: small;
  }
  
  .cardh1 + .carddef, .carddef + .carddef {
	margin-top: 10px;
  }
  .card-wrapimage {
	/* margin: 10px;*/
	transform: perspective(800px);
	transform-style: preserve-3d;
	cursor: pointer;
  }
  .card-wrapimage:hover .card-infoimage {
	transform: translateY(0);
  }
  .card-wrapimage:hover .card-infoimage .carddef {
	opacity: 1;
  }
  .card-wrapimage:hover .card-infoimage, .card-wrapimage:hover .card-infoimage .carddef {
	transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .card-wrapimage:hover .card-infoimage:after {
	transition: 5s cubic-bezier(0.23, 1, 0.32, 1);
	opacity: 1;
	transform: translateY(0);
  }
  .card-wrapimage:hover .card-bgimage {
	transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 5s cubic-bezier(0.23, 1, 0.32, 1);
	opacity: 0.8;
  }
  .card-wrapimage:hover .card {
	transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);
	box-shadow: rgba(255, 255, 255, 0.2) 0 0 40px 5px, white 0 0 0 1px, rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset white 0 0 0 6px;
  }
  
  /* .cardimg1 {
	position: relative;
	flex: 0 0 240px;
	width: 240px;
	height: 320px;
	background-color: #333;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.66) 0 10px 40px 0, inset #333 0 0 0 5px, inset rgba(255, 255, 255, 0.5) 0 0 0 6px;
	transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  } */
  
  .cardimg2 {
	position: relative;
	flex: 0 0 240px;
	width: 500px;
	height: 340px;
	background-color: #504e4e;
	overflow: hidden;
	border-radius: 10px;
	/* box-shadow: rgba(0, 0, 0, 0.66) 0 10px 40px 0, inset #333 0 0 0 5px, inset rgba(255, 255, 255, 0.5) 0 0 0 6px; */
	box-shadow: rgba(0, 0, 0, 0.66) 0 10px 40px 0;
	transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  
  .dis-flex {
	display: inline-flex;
	align-items: center;
  }
  
  .card-bgimage {
	opacity: 0.5;
	position: absolute;
	top: -30px;
	left: -20px;
	width: 110%;
	height: 117%;
	padding: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
	pointer-events: none;
  }
  
  .card-infoimage {
	padding: 20px;
	position: absolute;
	bottom: 0;
	color: #fff;
	transform: translateY(40%);
	transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .card-infoimage .carddef {
	opacity: 0;
	text-shadow: black 0 2px 3px;
	transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  
  .card-infoimage * {
	position: relative;
	z-index: 1;
  }
  .card-infoimage:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	/* background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 100%); */
	background-blend-mode: overlay;
	opacity: 0;
	transform: translateY(100%);
	transition: 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  
  .card-infoimage .cardh1 {
	font-family: "Playfair Display";
	font-size: 36px;
	font-weight: 700;
	text-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px;
  }

  /* our values background */
  .slideshow-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  }
  
  .mySlidesimg {
    display: none;
  }
  
  .slideimg {
    width: 100%;
	position: absolute;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	height: 100%;
  }
  
  /* Fading animation */
  .fadeimg {
    animation: fadeEffect 5s ease-in-out infinite;
  }
  
  @keyframes fadeEffect {
    0%, 100% {
		opacity: 0;
	}
	20%, 80% {
		opacity: 1;
	}
  }

  .milky {
	text-transform: uppercase;
	text-shadow: 2px 2px 4px #3f3f3e, 2px 2px 4px #3f3f3e;
  }