@import url("burger-menu.css");
@import url("headers.css");
@import url("buttons.css");
@import url("form-elements.css");
@import url("page-scroll-progress.css");
@import url("scroll-up.css");
@import url("view-transition.css");

:root {
	--white-color:#fff;
	--black-color:#000;
	--light-color:rgba(0, 0, 0, .1);
	--dark-color:rgba(0, 0, 0, .2);
	--darker-color:rgba(0, 0, 0, .5);
	--semiwhite3-color:rgba(255, 255, 255, .3);
	--semiwhite6-color:rgba(255, 255, 255, .6);
	--gray-color:#B0B0B0;
	--lightgray-color:#dcdcdc;
	--darkgray-color:#747474;
	--bluegray-color:#CBD6E3;
	--red-color:#f00;
	--green-color:#167F16;
}

::-webkit-scrollbar {
	width: 3px;
	height: 5px;
}

::-webkit-scrollbar-track {
	background-color: var(--gray-color);
}

::-webkit-scrollbar-thumb {
	background: var(--black-color);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--white-color);
}

html {
    scroll-behavior: smooth;
}

body {
	font-family: "Poppins", sans-serif;
	font-size:16px;
	font-weight:300;
	color:var(--black-color);
}

a,
label {
	color:var(--black-color);
    text-decoration:none;
    transition:all .5s;
}

a:not(.default-btn):hover,
label:hover {
    opacity:.85;
}

a[nohref],
label {
	cursor:pointer;
}

.relative {
    position:relative;
}

.absolute {
    position:absolute;
}

.overflow-y-auto {
	overflow-y:auto;
}

.block {
    display:block;
}

.grid {
	display:grid;
}

.flex {
    display:flex;
}

.flex-col {
    flex-direction:column;
}

.flex-0-5 {
    flex:.5;
}

.flex-1 {
    flex:1;
}

.flex-1-5 {
    flex:1.5;
}

.flex-2 {
    flex:2;
}

.grid-4-cols {
    grid-template-columns:1fr 1fr 1fr 1fr;
}

.flex-vert-aligned {
    align-items:center;
}

.flex-hor-aligned {
    justify-content:center;
}

.flex-wrap {
	flex-wrap:wrap;
}

.full-width {
    width:100%;
}

:is(.full-height, #abs-id) {
	height:100%;
}

.light-text {
	font-weight:300;
}

.medium-text {
	font-weight:500;
}

.semibold-text {
	font-weight:600;
}

.lora-400 {
  font-family: "Lora", serif;
  font-weight: 400;
}

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

.fs-13 {
    font-size:13px;
}

.fs-14 {
    font-size:14px;
}

.fs-15 {
    font-size:15px;
}

.fs-20 {
    font-size:20px;
}

.fs-24 {
    font-size:24px;
}

.fs-32 {
    font-size:32px;
}

.fs-42 {
    font-size:42px;
}

.fs-48 {
    font-size:48px;
}

.fs-55 {
    font-size:55px;
}

.uppercase {
	text-transform: uppercase;
}

.white-bg {
    background-color:var(--white-color);
}

.black-bg {
    background-color:var(--black-color);
}

.white-text {
    color:var(--white-color);
}

.semiwhite6-text {
    color:var(--semiwhite6-color);
}

.border-1-lightgray {
	border:1px var(--lightgray-color) solid;
}

.border-top-1-light {
	border-top:1px var(--light-color) solid;
}

.border-bottom-1-light {
	border-bottom:1px var(--light-color) solid;
}

.border-bottom-1-semiwhite3 {
	border-bottom:1px var(--semiwhite3-color) solid;
}

.pt-100 {
    padding-top:100px;
}

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

.pt-75 {
    padding-top:75px;
}

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

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

.pt-40 {
    padding-top:40px;
}

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

.pt-30 {
    padding-top:30px;
}

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

.pt-20 {
    padding-top:20px;
}

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

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

.padding-50 {
    padding:50px;
}

.padding-20 {
	padding:20px;
}

.padding-10 {
    padding:10px;
}

.mt-100 {
    margin-top:100px;
}

.mt-30 {
    margin-top:30px;
}

.mb-30 {
    margin-bottom:30px;
}

.mt-10 {
	margin-top:10px;
}

.mb-10 {
	margin-bottom:10px;
}

.mb-5 {
	margin-bottom:5px;
}

.mt-auto {
	margin-top:auto;
}

.center-aligned {
    text-align:center;
}

.object-fit-cover {
    object-fit:cover;
}

.object-fit-contain {
    object-fit:contain;
}

.lh-24 {
    line-height:24px;
}

.lh-30 {
    line-height:30px;
}

.lh-42 {
    line-height:42px;
}

.lh-60 {
    line-height:60px;
}

.remove {
    display:none;
}

.ellipsis-multiline {
	&,
	& p {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

.ellipsis-multiline.line-5 {
	&,
	& p {
		-webkit-line-clamp: 5;
	}
}

.ls-2 {
	letter-spacing:2px;
}

p:not(:last-of-type) {
	margin-bottom:20px;
}

p {
	strong {
		font-weight:bold;
	}
}

.grid-gap-5 {
	grid-gap: 5px;
}

.grid-gap-10 {
	grid-gap: 10px;
}

.grid-gap-20 {
	grid-gap: 20px;
}

.grid-gap-30 {
	grid-gap: 30px;
}

.grid-gap-40 {
	grid-gap: 40px;
}

.grid-gap-100 {
	grid-gap: 100px;
}

.has-shadow {
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
}

.footer {
	.logo {
		filter: invert(1);
	}
	
	a {
		color:var(--white-color);
	}
}

.very-top {
	height:113px;
	
	& .logo-holder {
		margin-right:16px;
		padding-right:16px;
		border-right:1px var(--white-color) solid;
	}
	
	& h1 {
		max-width:300px;
		font-weight:bold;
		line-height:24px;
		color:var(--white-color);
	}
	@media screen and (max-width:1024px) {
		position:sticky;
		top:0;
		z-index:4;
	}
}

.nav {
	height:55px;
	background-color:var(--white-color);
	position:sticky;
	top:0;
	z-index:3;
	transition:all .5s;
	&.is-pinned {
		background-color:var(--black-color);
	}
	@media screen and (max-width:1024px) {
		height:0;
	}
}
			
	.nav-ul > li {
		display: flex;
		align-items: center;
		position:relative;
		&.active,
		&:hover {
			@media screen and (min-width:1025px) {
				&:after {
					content:"";
					position:absolute;
					left:0;
					right:0;
					bottom:0;
					height:3px;
					background-color:var(--black-color);
				}
			}
			@media screen and (max-width:1024px) {
				opacity:.85;
			}
		}
		a {
			height: 100%;
			display: flex;
			place-items: center;
		}
	}
	
.container,
._container {
    width:100%;
	height:inherit;
    margin:auto;
    padding-left: 20px;
    padding-right: 20px;
}

.container {
	max-width:1313px;
}

._container {
	max-width:1580px;
}
	
	.brands {
		height:945px;
		background-size: cover !important;
		background-position: center;
		transition:all .5s !important;
	}
	
	.grid-list {
		li {
			a {
				&:hover {
					box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
				}
			}
		}
	}
	
	.middle-talled-img {
		height:350px;
		@media screen and (max-width:1024px) {
			height:220px;
		}
		.icon {
			bottom: 12px;
			left: 20px;
		}
	}
	.min-talled-img {
		height:250px;
	}
	
	.brand-logo-holder {
		--height:80px;
		height:var(--height);
		img {
			max-width: 100%;
			/*max-height: var(--height);*/
			max-height: calc(var(--height) / 1.5);
			max-width: 80%;
		}
	}
	.brand-logo {
		max-width: 66.6%;
		@media screen and (min-width:1025px) {
			max-width: 284px;
		}
	}
	
	/* sliders */
	:is(.swiper-button-prev, .swiper-button-next, #abstract-id)	{
		background-image:none;
		background-color:var(--darker-color);
		width: 91px;
		height: 52px;
		transition:background-color .5s;
	}
	:is(.swiper-button-prev:hover, .swiper-button-next:hover, #abstract-id) {
		background-color:var(--black-color);
	}
	:is(.swiper-button-prev, #abstract-id) {
		left:0;
	}
	:is(.swiper-button-next, #abstract-id) {
		right:0;
	}
	
	.slider-in-flex {
		width:40%;
		@media screen and (max-width:1024px) {
			width:auto;
		}
	}
	
	.carousel-slider {
		.swiper-slide {
			padding:25px;
			border:1px var(--white-color) solid;
			cursor:pointer;
			transform: scale(.85);
			transition: all .25s ease-out;
			transform-origin: center;
			min-height: 48ch;
			.brand-logo-holder {
				filter:invert(1);
			}
			& > div:not(.brand-logo-holder) {
				opacity:0;
				visibility:hidden;
				transition: all .25s ease-out;
				.default-btn {
					min-width: initial;
				}
			}
		}
		.swiper-slide-active {
			background-color: var(--white-color);
			transform: scale(1);
			.brand-logo-holder {
				filter:invert(0);
			}
			& > div:not(.brand-logo-holder) {
				opacity:1;
				visibility:visible;
			}
		}
	}
	/**/

@media screen and (max-width:1024px) {
	.hide-on-mobile {
		display:none;
	}
	
    .show-on-mobile {
        display:block;
    }
	
	.flex-col-on-mobile {
		flex-direction: column;
	}
	
	.grid-2-col-on-mobile {
		grid-template-columns:1fr 1fr;
	}
	
	.grid-1-col-on-mobile {
		grid-template-columns:1fr;
	}
	
	.grid-gap-0-on-mobile {
		grid-gap: 0;
	}
	
	.grid-gap-5-on-mobile {
		grid-gap: 5px;
	}
	
	.grid-gap-15-on-mobile {
		grid-gap: 15px;
	}
	
	.grid-gap-20-on-mobile {
		grid-gap: 20px;
	}
	
	.grid-gap-40-on-mobile {
		grid-gap: 40px;
	}
	
	.full-width-on-mobile {
		width:100%;
	}
	
	.fs-28-on-mobile {
		font-size:28px;
	}
	
	.fs-32-on-mobile {
		font-size:32px;
	}
	
	.fs-40-on-mobile {
		font-size:40px;
	}
	
	.lh-normal-on-mobile {
		line-height:normal;
	}
	
	.lh-35-on-mobile {
		line-height:35px;
	}
	
	.lh-50-on-mobile {
		line-height:50px;
	}
	
	.pt-50-on-mobile {
		padding-top:50px;
	}
	
	.pb-50-on-mobile {
		padding-bottom:50px;
	}
	
	.pt-25-on-mobile {
		padding-top:25px;
	}
	
	.pb-25-on-mobile {
		padding-bottom:25px;
	}
		
	.pt-20-on-mobile {
		padding-top:20px;
	}
	
	.pb-10-on-mobile {
		padding-bottom:10px;
	}
	
	.pt-0-on-mobile {
		padding-top:0;
	}
	
	.pb-0-on-mobile {
		padding-bottom:0;
	}
	
	.padding-0-on-mobile {
		padding:0;
	}
	
	.padding-20-on-mobile {
		padding:20px;
	}
	
	.mt-15-on-mobile {
		margin-top:15px;
	}
	
	.mt-0-on-mobile {
		margin-top:0;
	}
	
	.margin-inline--20-on-mobile {
		margin-left: -20px;
		margin-right: -20px;
	}
	
	nav[aria-label][role="navigation"] {
		white-space: nowrap;
		overflow-x: auto;
		max-width: calc(100vw - 40px);
		padding-bottom: 10px;
	}
	
	.single-slider {
		height: 220px;
		:is(.swiper-button-prev, .swiper-button-next, #abstract-id)	{
			width: 65px;
		}
	}
	
	:is(.landing-page header.header, #abs-id) {
		background:none;
		height:auto;
	}
	
	.prompt-img {
		max-height:390px;
	}
	
	.prompt-text:not(.flex-1) {
		margin-top: -100px;
	}
	
	iframe {
		min-height:350px;
	}
}