/* ----------------------- Font list / Import ------------------------------ */

@font-face {
	font-family: "amaranth";
	src: url("../fonts/Amaranth-Regular.ttf");
}

@font-face {
	font-family: "source-sans-pro";
	src: url("../fonts/SourceSansPro-Regular.ttf");
}

@font-face {
	font-family: "raleway";
	src: url("../fonts/Raleway-Medium.ttf");
}

@font-face {
	font-family: "titillium";
	src: url("../fonts/TitilliumWeb-Regular.ttf");
}

/* PT Sans font all types starts... */
@font-face {
	font-family: "pt-sans";
	src: url("../fonts/PT_Sans-Regular.ttf");
}

@font-face {
	font-family: "pt-sans-bold";
	src: url("../fonts/PT_Sans-Bold.ttf");
}

/* ----------------------- Color Definitions ------------------------------ */
:root {
	--pink: #F25F70;
	--light-pink: #fc84ac;
	--black: #202020;
	--light-black: #6f6f6f;
	--grey: #505050;
	--light-grey: #798897;
	--yellow: #FFDBAA;
	--light-yellow: #F3EED9;
	--blue: #00A0FF;
	--light-blue: #85d2ff;
	--purple: #BFA5A5;
	--light-purple: #dacdcd;
	--green: #00AAA5;
	--light-green: rgb(124, 202, 150);
	;
}

/* ----------------------- Screen customizations ---------------------------- */
@media (min-width: 768px) {
	.container {
		max-width: 92%;
	}
}

@media (max-width: 768px) {
	.container {
		max-width: 97%;
	}
}

/* ----------------------- Major tags customizations ------------------------- */
.container {
	margin-top: 2.2rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "amaranth";
	color: var(--black);

}

p,
span {
	font-family: "source-sans-pro";
	font-size: 1.2rem;
	text-align: justify;
	line-height: 150%;
	color: var(--grey);


}

header>h1 {
	background-color: var(--light-pink);
	color: white;
	text-align: center;
	padding: 0.8rem;
}

code {
	font-size: 14pt;
}

form,
nav li {
	font-family: "pt-sans";
	font-size: 1.1rem;
}

nav li .active {
	color: var(--pink) !important;
	border-radius: 6px;
}

nav .dropdown li .active {
	background-color: #f6f3ea;
}

ul>li {
	color: var(--grey);
}


/* ---------------- Effects Generations ------------------------ */
h1:hover,
h2:hover,
h3:hover,
h4:hover,
h5:hover,
h6:hover {
	cursor: url('/images/global/pointer-01.png'), pointer;
}

img:hover {
	cursor: url('../images/global/logo.png'), pointer;
}

a:hover {
	border: 1px solid var(--blue);
	border-radius: 0.2rem;
}

p:hover {
	cursor: url('/images/global/i-icon-01.png'), pointer;
	font-style: italic;

}

/* ---------------- My Selectors ---------------- */

.responsive-image {
	width: 100%;
	height: auto;
}

.indented {
	text-indent: 50px;
}

/* -------bootstrap component customizations ------*/

.card {
	border-radius: 0.2rem 0.2rem 0 0 !important;
}

.card a {
	text-decoration: none;
	color: darkslategrey;
}


fieldset {
	border: 1px solid rgb(167, 166, 166) !important;
	padding: 1rem;
	border-radius: 0.3rem;
	margin-bottom: 1rem;


}

legend {
	float: initial;
	width: initial;
	margin-left: 0;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
	font-size: 1.2rem;
}

/* custom alert made by me */

.alert {
	border-radius: 0.2rem;
}

.alert-primary {
	background-color: var(--blue);
	color: white;
}

.alert-danger {
	background-color: var(--pink);
	color: white;
}

.alert-success {
	background-color: var(--light-green);
	color: white;
}

.alert-bp {
	--bs-alert-color: var(--black);
	--bs-alert-border-color: var(--grey);
	--bs-alert-link-color: var(--bs-primary-text-emphasis);
	color: var(--light-grey);
}

.modal-header {
	background-color: var(--pink);
	color: white;
}

.modal input {
	border-radius: 0;
}

.modal-backdrop {
	background-color: white;

}

.modal-backdrop.show {
	opacity: 1;
	background-color: white;
}

.carousel-control-prev-icon {
	background-image: url("/images/global/carousel-left-indicator.svg");
}

.carousel-control-next-icon {
	background-image: url("/images/global/carousel-right-indicator.svg");
}

/* normal selector customizations */


/* --------------------Custom Animations -------------------- */

@keyframes fade-in-anim {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes slide-right-anim {
	0% {
		transform: translateX(-5%);
		opacity: 0;
	}

	100% {
		transform: translatex(0);
		opacity: 1;
	}
}

@keyframes slide-left-anim {
	0% {
		transform: translatex(5%);
		opacity: 0;
	}

	100% {
		transform: translatex(0);
		opacity: 1;
	}
}

@keyframes slide-up-anim {
	0% {
		transform: translateY(10%);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slide-down-anim {
	0% {
		transform: translateY(-10%);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slide-up-down-anim {
	0% {
		transform: translateY(5%);
	}

	50% {
		transform: translateY(0%);
	}

	100% {
		transform: translateY(5%);
	}
}

@keyframes fade-in-out-anim {
	0% {
		opacity: 0.5;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0.5;

	}
}

@keyframes slide-left-right-anim {
	0% {
		transform: translateX(-3%);
	}

	50% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(-3%);

	}
}

@keyframes zoom-in-out-anim {
	0% {
		transform: scale(98%);
	}

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

	100% {
		transform: scale(98%);

	}
}

.fade-in {
	animation-name: fade-in-anim;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
}

.slide-left {
	animation-name: slide-left-anim;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
}

.slide-right {
	animation-name: slide-right-anim;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
}

.slide-up {
	animation-name: slide-up-anim;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
}

.slide-down {
	animation-name: slide-down-anim;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
}


.fade-in-out {
	animation-name: fade-in-out-anim;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
}

.slide-up-down {
	animation-name: slide-up-down-anim;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
}

.slide-left-right {
	animation-name: slide-left-right-anim;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.zoom-in-out {
	animation-name: zoom-in-out-anim;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}


/* --------------------------- Custom Components -------------------------------  */

/* ---- Alternative of <marquee> element 'scroller' here. ---- 
.scroll-container ------> Main div
.scroller --------------> side div
Change the .scroller's 'animation-duration' to adjust the scrolling properly.*/

@keyframes scroll-anim {
	0% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(-100%);
	}
}


.scroll-container {
	white-space: nowrap;
	overflow: hidden;
	font-family: "pt-sans";
	font-size: 1.2rem;
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
}

.scroll-container>.scroller {
	display: inline-block;
	padding-left: 100%;
}

@media(max-width:568px) {
	.scroll-container>.scroller {
		animation: scroll-anim 30s linear infinite;
	}
}

@media(min-width:569px) {
	.scroll-container>.scroller {
		animation: scroll-anim 50s linear infinite;
	}
}

.scroll-container>.scroller:hover {
	animation-play-state: paused;
}

/* Note: To use the scrolling effect inside any div, create .scroll-container div and wrap the .scoller inside it. */

/* -------- Image hover effect -------------*/
img {
	transition-duration: 0.3s;
}

img:hover {
	filter: saturate(0.7);
	filter: contrast(1.2);
}

/* ------------------------------------------------------------------*/


/* -----------------------------feedback modal ".fixed-box" -------------------------*/
.fixed-box {
	position: fixed;
	overflow: auto;
	top: 5%;
	left: 50%;
	height: 80vh;
	margin: auto;
	transform: translateX(-50%);
	border: 2px groove rgb(58, 186, 196);
	z-index: 99;

	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	font-size: 1.2rem;

	background-color: white;
}

@media (min-width:767px) {
	.fixed-box {
		width: 70%;

	}
}

@media (max-width:768px) {
	.fixed-box {
		width: 95%;
	}
}

.title-container {
	display: flex;
	justify-content: space-between;
	background-color: rgb(58, 186, 196);
	color: white;
	padding: 1rem;
}

.close-button {
	cursor: pointer;
}

.fixed-box .content {
	padding: 1rem;
}

.rating-container {
	cursor: pointer;
}

.content {
	display: flex;
	justify-content: center;
}

.content-inner {
	display: inline-block;
}

.content input,
.content select {
	width: 100%;
}

@media(min-width:767px) {
	.content>div {
		margin-left: 4rem;
		margin-right: 4rem;
	}
}

.content button {
	border-radius: 0.3rem;
	border: 1px solid lightslategray;
}

#improve-text {
	width: 100%;
}

.feedback-response {
	overflow: auto;
}