@use '../utils' as *;

/*---------------------------------
	1.2 Theme SCSS
---------------------------------*/

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

    Template Name: Univet - University Education HTML Template
    Author: RSTheme
    Support: https://rstheme.com/support
    Description: Univet - University Education HTML Template
    Version: 1.0.1
	Developer: Nayeem Ahmed

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

	-----------------
    01. THEME SCSS
	-----------------
		1.1 spacing
		1.2 theme
		1.3 typography
		1.4 index

	-----------------
    01. utils SCSS
	-----------------
		1.1 breakpoints
		1.2 extends
		1.3 mixins
		1.4 root
		1.5 index
		1.6 main
		
	-----------------
    02. COMPONENTS SCSS
	-----------------
		2.1 accordion
		2.2 animation
		2.3 background
		2.4 backtotop
		2.5 breadcrumb
		2.6 buttons
		2.7 color
		2.8 common
		2.9 counter
		2.10 cursor
		2.11 forms
		2.12 lenis
		2.13 list
		2.14 navigation
		2.15 offcanvas
		2.16 pagination
		2.17 post-meta
		2.18 post-tag
		2.19 preloader
		2.20 progress-bar
		2.21 scrollbar
		2.22 section-title
		2.23 settings
		2.24 smooth-scroll
		2.25 social
		2.26 index

	-----------------
    03. layout
	-----------------
		-----------------
		3.1.1 banner SCSS
		-----------------
			3.1.1 banner-1
			3.1.2 banner-2
			3.1.3 banner-3
			3.1.4 banner-4
			3.1.5 banner-5
			3.1.6 banner-6
			3.1.7 banner-7
			3.1.8 banner-8
			3.1.10 index

		-----------------
		3.1.2 blog SCSS
		-----------------
			3.2.1 blog-tag
			3.2.2 blog
			3.2.3 postbox
			3.2.4 sidebar-tag
			3.2.5 sidebar
			3.2.6 index

		-----------------
		3.1.3 ecommerce SCSS
		-----------------
			3.3.1 checkout
			3.3.2 shop
			3.3.3 index

		-----------------
		3.1.4 footer SCSS
		-----------------
			3.4.1 footer
			3.4.2 copyright
			3.4.3 index

		-----------------
		3.1.5 header SCSS
		-----------------
			3.5.1 header-1
			3.5.2 header-2
			3.5.3 header-3
			3.5.4 header-common
			3.5.5 header-top
			3.5.6 index
		-----------------
		3.1.6 menu SCSS
		-----------------
			3.6.1 memu
			3.6.2 mobile-menu
			3.6.3 index

	-----------------
    04. Page SCSS
	-----------------
		4.1 about
		4.2 achievement
		4.3 admission
		4.4 alumni
		4.5 award
		4.6 bio
		4.7 campus-life
		4.8 cart
		4.9 contact
		4.10 cta
		4.11 curriculum
		4.12 deadline
		4.13 directory
		4.14 error
		4.15 event
		4.16 experience
		4.17 faculty
		4.18 faq
		4.19 feature
		4.20 filter
		4.21 funfact
		4.22 gallery
		4.23 history
		4.24 libraries
		4.25 login
		4.26 mission
		4.27 overview
		4.28 page-slidebar
		4.29 price-range
		4.30 privacy-policy
		4.30 process
		4.31 program-cost
		4.32 program
		4.33 quantity
		4.34 quote
		4.35 requirement
		4.36 research
		4.37 scholarships
		4.38 team
		4.49 testimonial
		4.40 text-slide
		4.41 thumb
		4.42 tuition
		4.43 video
		4.44 why-choose
		4.45 index

/*----------------------------------------*/
/*  1.1 Theme Default
/*----------------------------------------*/

// Google Fonts
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Prata&display=swap');

/*----------------------------------------
   Bootstrap customize
-----------------------------------------*/
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
	--bs-gutter-x: 3rem;
}

@media (min-width: 1441px) {

	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 1310px;
	}
}

.row {
	--bs-gutter-x: 3rem;
}

.g-20 {
   --bs-gutter-x: 20px;
   --bs-gutter-y: 20px;
}

.g-20,
.gx-20 {
	--bs-gutter-x: 20px;
}

.g-0,
.gx-0 {
	--bs-gutter-x: 0;
}
.g-10,
.gx-10 {
	--bs-gutter-x: 10px;
}

.g-30,
.gx-30 {
	--bs-gutter-x: 30px;
}

.gy-24 {
	--bs-gutter-y: 24px;
}

.g-30,
.gy-30 {
	--bs-gutter-y: 30px;
}

.g-40,
.gx-40 {
	--bs-gutter-x: 40px;
}

.g-40,
.gy-40 {
	--bs-gutter-y: 40px;
}

.g-50,
.gx-50 {
	--bs-gutter-x: 50px;
}

.g-50,
.gy-50 {
	--bs-gutter-y: 50px;
}

.g-60,
.gy-60 {
	--bs-gutter-y: 60px;
}

/*---------------------------------
    1.2 Common Classes
---------------------------------*/
.w-img {
	& img {
		width: 100%;
	}
}

.m-img {
	& img {
		max-width: 100%;
	}
}

.fix {
	overflow: hidden
}

.clear {
	clear: both;
}

.f-left {
	float: left
}

.f-right {
	float: right
}

.z-index-1 {
	z-index: 1;
}

.z-index-11 {
	z-index: 11;
}

.opacity-05 {
	opacity: 0.5;
}

.overflow-y-visible {
	overflow-x: hidden;
	overflow-y: visible;
}

.p-relative {
	position: relative;
}

.position-relative {
	position: relative;
}

.p-absolute {
	position: absolute;
}

.position-absolute {
	position: absolute;
}

.include-bg {
	@include background();
}

.hr-1 {
	border-top: 1px solid rgb(232, 232, 232);
}

.x-clip {
	overflow-x: clip;
}

.o-xs {
	@media #{$xs} {
		overflow-x: hidden;
	}
}

.overflow-visible {
	overflow: visible;
}

/*----------------------------------------
    Body Overlay 
-----------------------------------------*/

.image-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/*----------------------------------------
   Text Underline
-----------------------------------------*/
.underline {
	& a {
		display: inline;
		background-image: -webkit-gradient(linear, left top, right top, color-stop(0, currentColor), to(currentColor));
		background-image: linear-gradient(to right, currentColor 0, currentColor 100%);
		background-position: left 100%;
		background-repeat: no-repeat;
		background-size: 0 1px;
		-webkit-transition: all 0.3s, background-size 0.8s;
		transition: all 0.3s, background-size 0.8s;
		padding-bottom: 0;
		&:hover {
			color: var(--rs-title-primary);
 			 background-size: 100% 1px;
		}
	}
	&.is-white{
		a{
			background-image: linear-gradient(var(--rs-white), var(--rs-white)), linear-gradient(var(--rs-white), var(--rs-white));
			&:hover{
				color: var(--rs-white);
			}
		}
	}
}


/*----------------------------------------
   Mfp customize
-----------------------------------------*/
.mfp-iframe-holder {
	.mfp-content {
		line-height: 0;
		width: 100%;
		max-width: 1280px;
		@media #{$xl} {
			max-width: 850px;
		}
		@media #{$lg} {
			max-width: 820px;
		}
		@media #{$md} {
			max-width: 750px;
		}
	}
}
.mfp-close {
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	&:hover {
		color: var(--rs-white);
	}
	&::after {
		position: absolute;
		content: "\eb98";
		height: 100%;
		width: 100%;
		font-family: var(--rs-ff-remixicon);
		font-size: 31px;
		font-weight: 200;
		right: -20px;
		margin-top: -25px;
		@media #{$md} {
			right: 15px;
			margin-top: -30px;
		}
	}
}