/* Custom Font */

@font-face {
	font-family: "Kollektif";
	font-weight: 400;
	src: url("./font/Kollektif/Kollektif.ttf") format("truetype");
	font-style: normal;
}

@font-face {
	font-family: "Kollektif";
	font-weight: 700;
	src: url("./font/Kollektif/Kollektif-Bold.ttf") format("truetype");
	font-style: normal;
}

@font-face {
	font-family: "Kollektif";
	font-weight: 700;
	src: url("./font/Kollektif/Kollektif-BoldItalic.ttf") format("truetype");
	font-style: italic;
}

@font-face {
	font-family: "Kollektif";
	font-weight: 400;
	src: url("./font/Kollektif/Kollektif-Italic.ttf") format("truetype");
	font-style: italic;
}

@font-face {
	font-family: "icomoon";
	src: url("./font/icon/icomoon.eot?2a9au5");
	src: url("./font/icon/icomoon.eot?2a9au5#iefix") format("embedded-opentype"),
		url("./font/icon/icomoon.ttf?2a9au5") format("truetype"),
		url("./font/icon/icomoon.woff?2a9au5") format("woff"),
		url("./font/icon/icomoon.svg?2a9au5#icomoon") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: "icomoon" !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-line:before {
	content: "\e900";
}

.icon-wechat:before {
	content: "\e901";
}

.icon-phone:before {
	content: "\e902";
}

* {
	font-family: "Kollektif", sans-serif;
}

/* Home Page */

.list-box {
	scrollbar-color: rgba(0, 0, 0, 0.7);
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-button {
	background-color: rgba(197, 197, 195, 0);
}

::-webkit-scrollbar-thumb {
	background-color: rgba(67, 68, 67, 0.767);
	border-radius: 10px;
	opacity: 0;
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgb(67, 68, 67);
}

::-webkit-scrollbar-track {
	background-color: rgba(197, 197, 195, 0);
}

.log {
	position: fixed;
	top: 0;
	left: 42%;
	height: 50px;
	width: 100%;
	background: #272626;
	color: white;
	z-index: 1000;
}

a[x-apple-data-detectors] {
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	cursor: none;
}

.disabled {
	cursor: not-allowed;
}
.reach-point-list li:hover a {
	opacity: 0.8;
}

.reach-point-list li:nth-of-type(5) a {
	background-color: #02808f;
	border: 1px solid #01525c;
}

.reach-point-list li:nth-of-type(2) a {
	background-color: #145da1;
	border: 1px solid #0d3f6d;
}

.reach-point-list li:nth-of-type(3) a {
	background-color: #5eb33a;
	border: 1px solid #438029;
}

.reach-point-list li:nth-of-type(4) a {
	background-color: #008036;
	border: 1px solid #004d20;
}

.reach-point-list li:nth-of-type(1) a {
	background-color: #008036;
	border: 1px solid #004d20;
}
.reach-point-list li a span {
	position: relative;
	z-index: 3;
}
.reach-point-list li a span:nth-of-type(1) {
	transform: translateY(3px);
}
.social-media-list{
	display: flex;
	justify-content: center;
}
.social-media-list li a {
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 8px;
	width: 100%;
	height: 40px;
	padding: 5px;
	transition: 0.25s ease-in-out;
	text-decoration: none;
	color: black;
	font-size: 1.5rem;
	padding: 2px 4px;
}
@media screen and (max-width: 567px) {
	body {
		background: linear-gradient(180deg, #ef6a25 85%, white 85%);
		width: 100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		min-height: 100vh;
		/* mobile viewport bug fix */
		min-height: -webkit-fill-available;
		overflow-y: hidden;
		min-height: var(--real100perc);
		min-height: -webkit-fill-available;
		overflow-y: hidden;
		/* touch-action: none;
	-ms-touch-action: none; */
	}

	.main-content {
		height: 100%;
		overflow-y: hidden;
		display: flex;
		flex-direction: column;
		position: fixed;
		width: 100%;
		inset: 0;
		z-index: 10;
		max-height: 100%;
	}

	.main-content::before {
		content: "";
		background-image: url(../asset/Doodle-black.png);
		background-color: #ef6a25;
		position: absolute;
		inset: 0px;
		opacity: 0.25;
	}

	.profile-img {
		height: 150px;
		width: 150px;
		object-fit: cover;
		object-position: center center;
		border-radius: 100%;
		background-color: white;
		padding: 4px;
		margin: 0 auto;
		left: 0;
		right: 0;
	}

	.logo {
		height: 50px;
		width: auto;
		transform: translateX(2px);
	}

	.icon {
		flex-basis: 25%;
		font-size: 1.5rem;
	}

	.text-icon {
		flex-basis: 75%;
		transform: translateX(-19%);
		text-align: center;
	}

	.upper-part {
		flex-direction: column;
		padding: 2rem 0px 1rem 0px;
		position: relative;
	}

	.profile-name {
		font-size: 1.25rem;
		margin-bottom: 0.5rem;
	}

	p.profile-position,
	p.profile-phone-no {
		font-size: 1rem;
		margin-bottom: 0;
		font-weight: 500;
	}

	.profile-position {
		position: relative;
	}

	.profile-position span,
	.profile-phone-no span {
		position: relative;
		z-index: 10;
		font-weight: 500;
		padding: 0px 8px;
		font-style: italic;
	}

	.add-contact {
		font-size: 1.7rem;
		position: absolute;
		top: 4.8%;
		right: 5%;
	}

	.add-contact a {
		color: white;
		text-decoration: none;
		padding: 5px;
	}

	.reach-point-list,
	.social-media-list {
		list-style-type: none;
		padding-left: 0;
		text-align: center;
		margin-bottom: 0;
	}

	.social-media-list li {
		display: inline-block;
		margin: 0px 3px;
	}



	.reach-point-list li a {
		display: flex;
		align-items: center;
		/* justify-content: center; */
		text-decoration: none;
		color: white;
		position: relative;
		padding: 5px 8px;
		margin: 15px 0px;
		border-radius: 5px;
		background: #fff;
	}

	.text-icon {
		margin-left: 8px;
		font-size: 1.05rem;
		/* font-weight: 700; */
	}


	.social-media-list li a:hover {
		/* background-color: rgb(0, 0, 0, 0.5); */
		background-color: #ef6a25;
		color: white;
		border-color: #bb4d15;
		/* box-shadow: 2px 3px 2px rgb(0 0 0 / 20%); */
	}

	.social-media-list li a:hover span {
		/* background-color: rgb(255, 255, 255, 0.5); */
		color: white;
	}

	/*  */

	.bottom-part {
		/* height: calc(100% - 360px); */
		height: 100%;
		background-color: #f8f9fa;
		position: relative;
		/* padding: 20px 15px; */
		border-top-left-radius: 2rem;
		border-top-right-radius: 2rem;
	}

	.list-box {
		/* border: 1px solid #ccc; */
		padding: 20px 15px;
		overflow-y: auto;
		height: calc(100% - 3rem);
		/* background-color: blue; */
	}
	.social-media-box{
		height: 3rem;
	}
}

@media screen and (min-width: 568px) {
	body {
		background: linear-gradient(180deg, #ef6a25 85%, white 85%);
		width: 100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		min-height: 100vh;
		/* mobile viewport bug fix */
		min-height: -webkit-fill-available;
		overflow-y: hidden;
		min-height: var(--real100perc);
		min-height: -webkit-fill-available;
		/* touch-action: none;
	-ms-touch-action: none; */
	}

	.main-content {
		max-height: 100%;
		overflow-y: hidden;
		height: 100%;
		overflow-y: hidden;
		display: flex;
		flex-direction: column;
		position: fixed;
		width: 100%;
		inset: 0;
		z-index: 10;
	}

	.main-content::before {
		content: "";
		background-image: url(../asset/Doodle-black.png);
		background-color: #ef6a25;
		position: absolute;
		inset: 0px;
		opacity: 0.25;
	}

	.logo {
		height: 60px;
		width: auto;
		transform: translateX(2px);
	}

	.icon {
		flex-basis: 25%;
		font-size: 1.5rem;
	}

	.text-icon {
		flex-basis: 75%;
		transform: translateX(-19%);
		text-align: center;
		margin-left: 8px;
		font-size: 1.05rem;
	}

	.profile-img {
		width: 150px;
		height: 150px;
		border-radius: 100%;
		object-fit: cover;
		object-position: center center;
		background-color: white;
		padding: 4px;
		margin: 0 auto;
		left: 0;
		right: 0;
	}

	.upper-part {
		flex-direction: column;
		padding: 2rem 0px 1rem 0px;
		position: relative;
	}

	.profile-name {
		font-size: 1.25rem;
		margin-bottom: 0.5rem;
	}

	p.profile-position,
	p.profile-phone-no {
		font-size: 1rem;
		margin-bottom: 0;
		font-weight: 500;
	}

	.profile-position {
		position: relative;
	}

	.profile-position span,
	.profile-phone-no span {
		position: relative;
		z-index: 10;
		font-weight: 500;
		padding: 0px 8px;
		font-style: italic;
	}

	.add-contact {
		font-size: 1.7rem;
		position: absolute;
		top: 4.8%;
		right: 5%;
	}

	.add-contact a {
		color: white;
		text-decoration: none;
		/* border: 1px solid white; */
		padding: 5px;
	}

	.reach-point-list,
	.social-media-list {
		list-style-type: none;
		padding-left: 0;
		text-align: center;
	}

	.social-media-list li {
		display: inline-block;
		margin: 0px 3px;
	}

	/* .social-media-list li a {
		display: inline-block;
		border: 1px solid #ccc;
		border-radius: 100%;
		width: 40px;
		height: 40px;
		padding: 5px;
		transition: 0.25s ease-in-out;
	} */

	.social-media-list li a {
		text-decoration: none;
		color: black;
		font-size: 1.5rem;
		padding: 2px 4px;
	}

	.reach-point-list li a {
		display: flex;
		align-items: center;
		/* justify-content: center; */
		text-decoration: none;
		color: white;
		position: relative;
		padding: 5px 8px;
		margin: 15px 0px;
		border-radius: 5px;
		background: #fff;
	}

	.reach-point-list li a span {
		position: relative;
		z-index: 3;
	}

	.reach-point-list li a span:nth-of-type(1) {
		transform: translateY(3px);
	}

	.social-media-list li a:hover {
		/* background-color: rgb(0, 0, 0, 0.5); */
		background-color: #ef6a25;
		color: white;
		border-color: #bb4d15;
		/* box-shadow: 2px 3px 2px rgb(0 0 0 / 20%); */
	}

	.social-media-list li a:hover span {
		/* background-color: rgb(255, 255, 255, 0.5); */
		color: white;
	}

	/*  */

	.bottom-part {
		height: calc(100% - 360px);
		/* background-color: red; */
		/* padding: 20px 15px; */
		position: relative;
	}

	.list-box {
		/* border: 1px solid #ccc; */
		border-top-left-radius: 10%;
		border-top-right-radius: 10%;
		padding: 20px 15px;
		/* overflow-y: auto; */
		height: calc(100%);
		/* background-color: blue; */
		background-color: #f8f9fa;
	}
}

@media screen and (min-width: 768px) {
	body {
		background: rgba(0, 0, 0, 0.7);
		width: 100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		min-height: 100vh;
		/* mobile viewport bug fix */
		min-height: -webkit-fill-available;
		overflow-y: hidden;
		min-height: var(--real100perc);
		min-height: -webkit-fill-available;
		overflow-y: hidden;
		/* touch-action: none;
		-ms-touch-action: none; */
	}

	.main-content {
		width: 80%;
		/* background-color: #ef6a25; */
		position: relative;
		/* border: 1px solid #cecece; */
		border-radius: 2rem;
		height: 100%;
		max-height: 100%;
		overflow-y: hidden;
		display: flex;
		flex-direction: column;
		margin: 0px auto;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 10;
	}

	.main-content::before {
		content: "";
		background-image: url(../asset/Doodle-black.png);
		background-color: #ef6a25;
		position: absolute;
		inset: 0px;
		opacity: 0.25;
	}

	.upper-part {
		flex-direction: column;
		padding: 0.5rem 0px 0.5rem 0px;
		height: 58vh;
		position: relative;
	}

	.bottom-part {
		height: calc(100% - 58vh);
		/* background-color: red; */
		position: relative;
	}

	.list-box {
		/* border: 1px solid #ccc; */
		border-top-left-radius: 10%;
		border-top-right-radius: 10%;
		padding: 20px 15px;
		overflow-y: auto;
		height: calc(100%);
		/* background-color: blue; */
	}

	.profile-img {
		width: 115px;
		height: 115px;
		border-radius: 100%;
		object-fit: cover;
		object-position: center center;
		background-color: white;
		padding: 4px;
		margin: 0 auto;
		left: 0;
		right: 0;
	}

	.icon {
		flex-basis: 25%;
		font-size: 1.5rem;
	}

	.text-icon {
		text-align: center;
		flex-basis: 75%;
		transform: translateX(-19%);
		margin-left: 8px;
		font-size: 1.05rem;
		/* font-weight: 700; */
	}

	.logo {
		height: 60px;
		width: auto;
		transform: translateX(2px);
	}

	.profile-name {
		font-size: 1.25rem;
		margin-bottom: 0.5rem;
	}

	p.profile-position,
	p.profile-phone-no {
		font-size: 1rem;
		margin-bottom: 0;
		font-weight: 500;
	}

	.profile-position {
		position: relative;
	}

	.profile-position span,
	.profile-phone-no span {
		position: relative;
		z-index: 10;
		font-weight: 500;
		padding: 0px 8px;
		font-style: italic;
	}

	.add-contact {
		font-size: 1.7rem;
		position: absolute;
		top: 4.8%;
		right: 5%;
	}

	.add-contact a {
		color: white;
		text-decoration: none;
		/* border: 1px solid white; */
		padding: 5px;
	}

	.reach-point-list,
	.social-media-list {
		list-style-type: none;
		padding-left: 0;
		text-align: center;
	}

	.social-media-list li {
		display: inline-block;
		margin: 0px 3px;
	}

	/* .social-media-list li a {
		display: inline-block;
		border: 1px solid #ccc;
		border-radius: 100%;
		width: 40px;
		height: 40px;
		padding: 5px;
		transition: 0.25s ease-in-out;
	} */

	.social-media-list li a {
		text-decoration: none;
		color: black;
		font-size: 1.5rem;
		padding: 2px 4px;
	}

	.reach-point-list li a {
		display: flex;
		align-items: center;
		/* justify-content: center; */
		text-decoration: none;
		color: white;
		position: relative;
		padding: 5px 8px;
		margin: 15px 0px;
		border-radius: 5px;
		background: #fff;
	}

	.social-media-list li a:hover {
		/* background-color: rgb(0, 0, 0, 0.5); */
		background-color: #ef6a25;
		color: white;
		border-color: #bb4d15;
		/* box-shadow: 2px 3px 2px rgb(0 0 0 / 20%); */
	}

	.social-media-list li a:hover span {
		/* background-color: rgb(255, 255, 255, 0.5); */
		color: white;
	}

	/*  */
}

@media screen and (min-width: 991px) {
	body {
		background: rgb(80, 79, 79);
		width: 100%;
		margin: 0;
		box-sizing: border-box;
		min-height: 100vh;
		/* mobile viewport bug fix */
		min-height: -webkit-fill-available;
		overflow-y: hidden;
		min-height: var(--real100perc);
		touch-action: none;
		-ms-touch-action: none;
		padding: 2rem;
	}

	.main-content {
		/* width: 325px; */
		min-height: 200px;
		/* box-shadow: 0px 0px 20px 3px lightgreen; */
		color: black;
		overflow: hidden;
		width: 80%;
		/* background-color: #ef6a25;
		border: 1px solid #cecece; */
		position: relative;
		border-radius: 2rem;
		max-height: 100%;
		overflow-y: hidden;
		display: flex;
		flex-direction: column;
		margin: 0px auto;
	}

	.main-content::before {
		content: "";
		background-image: url(../asset/Doodle-black.png);
		background-color: #ef6a25;
		position: absolute;
		inset: 0px;
		opacity: 0.25;
	}

	.logo {
		width: auto;
		transform: translateX(2px);
		height: 60px;
		flex-basis: 25%;
		font-size: 1.5rem;
	}

	.text-icon {
		flex-basis: 75%;
		transform: translateX(-19%);
		text-align: center;
		margin-left: 8px;
		font-size: 0.85rem;
		/* font-weight: 700; */
	}

	.icon {
		flex-basis: 25%;
		font-size: 1rem;
	}

	.profile-img {
		width: 115px;
		height: 115px;
		border-radius: 50%;
		object-fit: cover;
		object-position: center center;
		background-color: white;
		padding: 4px;
		margin: 0 auto;
		left: 0;
		right: 0;
	}

	.profile-name {
		font-size: 1rem;
		/* font-weight: 700; */
		/* line-height: 2rem; */
		margin-bottom: 0.5rem;
	}

	p.profile-position,
	a.profile-phone-no {
		font-size: 0.9rem;
		margin-bottom: 0;
		font-weight: 500;
	}

	.profile-position {
		position: relative;
	}

	.profile-position span,
	.profile-phone-no span {
		position: relative;
		z-index: 10;
		font-weight: 500;
		/* background-color: #f8f9fa; */
		padding: 0px 8px;
		font-style: italic;
	}

	.reach-point-list,
	.social-media-list {
		list-style-type: none;
		padding-left: 0;
	}

	.social-media-list li {
		display: inline-block;
	}

	/* .social-media-list li a {
		display: inline-block;
		border: 1px solid #ccc;
		border-radius: 100%;
		width: 40px;
		height: 40px;
		padding: 5px;
		transition: 0.25s ease-in-out;
	} */

	.social-media-list li a {
		text-decoration: none;
		color: black;
		font-size: 1.5rem;
		padding: 3px;
	}

	.reach-point-list li a {
		display: flex;
		align-items: center;
		/* justify-content: center; */
		text-decoration: none;
		color: white;
		position: relative;
		padding: 5px 8px;
		margin: 10px 0px;
		border-radius: 5px;
		background: #fff;
	}


	.social-media-list li a:hover {
		/* background-color: rgb(0, 0, 0, 0.5); */
		background-color: #ef6a25;
		color: white;
		border-color: #bb4d15;
		/* box-shadow: 2px 3px 2px rgb(0 0 0 / 20%); */
	}

	.social-media-list li a:hover span {
		/* background-color: rgb(255, 255, 255, 0.5); */
		color: white;
	}

	.list-box {
		/* border: 1px solid #ccc; */
		border-top-left-radius: 10%;
		border-top-right-radius: 10%;
		padding: 10px 15px;
	}

	.add-contact {
		font-size: 1.7rem;
		/* transform: translate(22vw, -5px); */
		position: absolute;
		top: 4.8%;
		right: 5%;
	}

	.add-contact a {
		color: white;
		text-decoration: none;
		/* border: 1px solid white; */
		padding: 5px;
	}

	/* wadwadwad */

	.upper-part {
		/* height: 47vh; */
		height: 55vh;
		padding: 18px 0px 10px 0px;
		position: relative;
	}

	.upper-part .d-flex {
		margin-top: 5px !important;
	}

	.bottom-part {
		height: calc(100vh - 55vh);
		position: relative;
	}

	.list-box {
		/* border: 1px solid #ccc; */
		border-top-left-radius: 10%;
		border-top-right-radius: 10%;
		padding: 20px 15px;
		overflow-y: auto;
		height: calc(100%);
		/* background-color: blue; */
	}

	.social-media-list {
		text-align: center;
		margin-top: 2rem;
		margin-bottom: 0;
	}
}

@media screen and (min-width: 1024px) {
	body {
		background: rgb(80, 79, 79);
		/* background: rgb(245, 245, 245); */
		width: 100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		min-height: 100vh;
		/* mobile viewport bug fix */
		overflow-y: hidden;
		min-height: var(--real100perc);
		min-height: -webkit-fill-available;
		overflow-y: hidden;
		touch-action: none;
		-ms-touch-action: none;
		padding: 2rem;
	}

	.main-content {
		/* width: 325px; */
		min-height: 200px;
		/* box-shadow: 0px 0px 20px 3px lightgreen; */
		color: black;
		/* overflow: hidden; */
		width: 35%;
		/* background-image: url(../asset/Doodle-black.png); */
		background-color: #ef6a25;
		position: relative;
		/* border: 1px solid #cecece; */
		border-radius: 2rem;
		max-height: 100%;
		overflow-y: hidden;
		display: flex;
		flex-direction: column;
		margin: 0px auto;
	}

	.main-content::before {
		content: "";
		background-image: url(../asset/Doodle-black.png);
		position: absolute;
		inset: 0px;
		opacity: 0.25;
	}

	.logo {
		height: 50px;
		width: auto;
		transform: translateX(2px);
	}

	.icon {
		flex-basis: 25%;
		font-size: 1rem;
	}

	.text-icon {
		flex-basis: 75%;
		transform: translateX(-19%);
		text-align: center;
		margin-left: 8px;
		font-size: 0.85rem;
		/* font-weight: 700; */
	}

	.profile-img {
		width: 115px;
		height: 115px;
		border-radius: 50%;
		object-fit: cover;
		object-position: center center;
		background-color: white;
		padding: 4px;
		margin: 0 auto;
		left: 0;
		right: 0;
	}

	.profile-name {
		font-size: 1rem;
		/* font-weight: 700; */
		/* line-height: 2rem; */
		margin-bottom: 0.5rem;
	}

	p.profile-position,
	a.profile-phone-no {
		font-size: 0.9rem;
		margin-bottom: 0;
		font-weight: 500;
	}

	.profile-position {
		position: relative;
	}

	.profile-position span,
	.profile-phone-no span {
		position: relative;
		z-index: 10;
		font-weight: 500;
		/* background-color: #f8f9fa; */
		padding: 0px 8px;
		font-style: italic;
	}

	.reach-point-list,
	.social-media-list {
		list-style-type: none;
		padding-left: 0;
	}

	.social-media-list li {
		display: inline-block;
	}

	/* .social-media-list li a {
		display: inline-block;
		border: 1px solid #ccc;
		border-radius: 100%;
		width: 100%;
		height: 40px;
		padding: 5px;
		transition: 0.25s ease-in-out;
	} */

	.social-media-list li a {
		text-decoration: none;
		color: black;
		font-size: 1.5rem;
		padding: 3px;
	}

	.reach-point-list li a {
		display: flex;
		align-items: center;
		/* justify-content: center; */
		text-decoration: none;
		color: white;
		position: relative;
		padding: 5px 8px;
		margin: 10px 0px;
		border-radius: 5px;
		background: #fff;
	}

	.social-media-list li a:hover {
		/* background-color: rgb(0, 0, 0, 0.5); */
		background-color: #ef6a25;
		color: white;
		border-color: #bb4d15;
		/* box-shadow: 2px 3px 2px rgb(0 0 0 / 20%); */
	}

	.social-media-list li a:hover span {
		/* background-color: rgb(255, 255, 255, 0.5); */
		color: white;
	}

	.list-box {
		/* border: 1px solid #ccc; */
		border-top-left-radius: 10%;
		border-top-right-radius: 10%;
		padding: 10px 15px;
	}

	.add-contact {
		font-size: 1.7rem;
		/* transform: translate(22vw, -5px); */
		position: absolute;
		top: 4.8%;
		right: 5%;
	}

	.add-contact a {
		color: white;
		text-decoration: none;
		/* border: 1px solid white; */
		padding: 5px;
	}

	/* wadwadwad */

	.upper-part {
		/* height: 47vh; */
		height: 55vh;
		padding: 18px 0px 10px 0px;
		position: relative;
	}

	.upper-part .d-flex {
		margin-top: 5px !important;
	}

	.bottom-part {
		height: calc(100vh - 55vh);
		position: relative;
	}

	.list-box {
		/* border: 1px solid #ccc; */
		border-top-left-radius: 10%;
		border-top-right-radius: 10%;
		padding: 20px 15px;
		overflow-y: auto;
		height: calc(100%);
		/* background-color: blue; */
	}

	.social-media-list {
		text-align: center;
		margin-top: 2rem;
		margin-bottom: 0;
	}
}