@use '../utils' as *;

/*---------------------------------
	1.1 Theme SCSS
---------------------------------*/

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

	Template Name: iStudy - Education & Online Courses Template
	Author: Topylo
	Developer: Topylo Team
	Support: https://support.topylo.com
	Description: iStudy - Education & Online Courses Template
	Version: 1.0

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

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

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

	-----------------
    01. utils SCSS
	-----------------
		1.1 breakpoints
		1.2 extends
		1.3 mixins
		1.4 variables
		
	-----------------
    02. COMPONENTS SCSS
	-----------------
		2.1 accordion  
		2.2 advertise  
		2.3 animation  
		2.4 avatar  
		2.5 background  
		2.6 backtotop  
		2.7 badge  
		2.8 breadcrumb  
		2.9 brand  
		2.10 buttons  
		2.11 carousel  
		2.12 color  
		2.13 counter  
		2.14 countdown  
		2.15 event  
		2.16 forms  
		2.17 offcanvas  
		2.18 pagination  
		2.19 popup-search  
		2.20 preloader  
		2.21 progress-bar  
		2.22 section-title  
		2.23 shortcodes  
		2.24 social  
		2.25 style-guide  
		2.26 tab  
		2.27 tooltip  
		2.28 video

	-----------------
    03. layout
	-----------------
		-----------------
		3.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.2 blog SCSS
		-----------------
			3.2.1 blog-tag
			3.2.2 blog
			3.2.3 postbox
			3.2.4 recent-post
			3.2.5 sidebar
			3.2.6 index

		-----------------
		3.3 ecommerce SCSS
		-----------------
			3.3.1 cart-sidebar
			3.3.2 cart
			3.3.3 checkout
			3.3.4 order
			3.3.5 shop

		-----------------
		3.4 footer SCSS
		-----------------
			3.4.1 copyrights
			3.4.2 footer-2
			3.4.3 footer

		-----------------
		3.5 header SCSS
		-----------------
			3.5.1 header-1
			3.5.2 header-2
			3.5.3 header-3
			3.5.4 header-4
			3.5.5 header-common
			3.5.6 header-top
		-----------------
		3.6 menu SCSS
		-----------------
			3.6.1 mean
			3.6.2 mobile-menu

	-----------------
    04. Page SCSS
	-----------------
		4.1 about  
		4.2 campus  
		4.3 career  
		4.4 categories  
		4.5 class  
		4.6 coming-soon  
		4.7 contact  
		4.8 courses  
		4.9 courses-details  
		4.10 cta  
		4.11 dashboard  
		4.12 demo  
		4.13 error  
		4.14 faq  
		4.15 feature  
		4.16 financial  
		4.17 gallery  
		4.18 history  
		4.19 instructor  
		4.20 joining  
		4.21 lesson  
		4.22 live-class  
		4.23 mission-vision  
		4.24 newsletter  
		4.25 offer  
		4.26 price  
		4.27 privacy-policy  
		4.28 program  
		4.29 review  
		4.30 skill  
		4.31 sorting  
		4.32 testimonial  
		4.33 tuition  
		4.34 why-choose

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

// Google Fonts
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


/*----------------------------------------
   Icomoon customize
-----------------------------------------*/
i[class^="icon-"] {
	line-height: 1;
	position: relative;
}

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

.container {
    padding-left: 15px;
    padding-right: 15px;
}
.container {
    max-width: 1350px;
    @media #{$x4l,$x3l,$xxl} {
        max-width: 1320px;
    }
    @media #{$lg} {
        max-width: 960px;
    }
    @media #{$md} {
        max-width: 720px;
    }
    @media #{$sm} {
        max-width: 540px;
    }
    @media #{$xs} {
        max-width: 100%;
    }
}
.custom-container {
	max-width: 1500px;
	@media #{$xxl} {
        max-width: 1680px;
    }
	@media #{$xl} {
        max-width: 1320px;
    }
	@media #{$lg} {
        max-width: 960px;
    }
	@media #{$md} {
        max-width: 720px;
    }
	@media #{$xs} {
        max-width: 100%;
    }
	@media #{$sm} {
        max-width: 540px;
    }
}
.custom-container-two {
	max-width: 1720px;
	@media #{$xxl} {
        max-width: 1680px;
    }
	@media #{$xl} {
        max-width: 1320px;
    }
	@media #{$lg} {
        max-width: 960px;
    }
	@media #{$md} {
        max-width: 720px;
    }
	@media #{$xs} {
        max-width: 100%;
    }
	@media #{$sm} {
        max-width: 540px;
    }
}

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

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

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

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

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

.g-10,
.gy-10 {
	--bs-gutter-y: 10px
}
.g-15,
.gy-15 {
	--bs-gutter-y: 15px
}
.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,
.gx-60 {
	--bs-gutter-x: 60px;
}

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

@media #{$xs} {
	.col-xs-6 {
		-webkit-box-flex:0;
		-webkit-flex:0 0 auto;
		-ms-flex:0 0 auto;
		flex:0 0 auto;
		width:50%
	}
}
@media #{$xxs} {
	.col-xxs-12 {
		-webkit-box-flex:0;
		-webkit-flex:0 0 auto;
		-ms-flex:0 0 auto;
		flex:0 0 auto;
		width:100%
	}
}

/*---------------------------------
    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();
}
.bg-attach-fix {
	background-attachment: fixed;
}
.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 
-----------------------------------------*/
.body__overlay {
	background-color: var(--bd-common-heading);
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 9999;
	left: 0;
	opacity: 0;
	visibility: hidden;
	@extend %bd-transition-3;
}

.body__overlay {
	background-color: var(--bd-common-heading);
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 9999;
	left: 0;
	opacity: 0;
	visibility: hidden;
	@extend %bd-transition-3;
}

.body__overlay.opened {
	opacity: 0.7;
	visibility: visible;
}
.image-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.image-overly {
	position: relative;
	z-index: 5;
	&::before {
		position: absolute;
		content: "";
		inset-inline-start: 0;
		inset-block-start: 0;
		width: 100%;
		height: 100%;
		background-color: rgba($color: #000000, $alpha: .50);
		z-index: -1;
	}
}
/*----------------------------------------
   Mfp customize
-----------------------------------------*/
.mfp-iframe-holder {
	.mfp-content {
		line-height: 0;
		width: 100%;
		max-width: 1280px;

		@media #{$xxl} {
			max-width: 1000px;
		}

		@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(--bd-white);
	}

	&::after {
		position: absolute;
		content: "\f00d";
		height: 100%;
		width: 100%;
		font-family: var(--ff-fontawesome);
		font-size: 31px;
		font-weight: 200;
		right: -20px;
		margin-top: -25px;
		cursor: pointer;
		@media #{$xs,$sm,$md} {
			right: 15px;
			margin-top: -30px;
		}
	}
}

.mfp-wrap {
	z-index: 9999999;
}

/* custom scrollbar */
.custom-scrollbar {
    overflow-y: scroll;
    -ms-overflow-style: thin;
    /* for Internet Explorer, Edge */
    scrollbar-width: thin;
    /* for Firefox */
    &::-webkit-scrollbar-width {
        scrollbar-width: thin;
        /* for Chrome, Safari, and Opera */
    }
    /* Set the width of the scrollbar */
    &::-webkit-scrollbar {
        width: 50px !important;
        /* Adjust as needed */
        height: 8px;
    }
    /* Set the color of the scrollbar thumb (the draggable part) */
    &::-webkit-scrollbar-thumb {
        background-color: #A6A6A6;
        /* Adjust as needed */
    }
    /* Set the color of the scrollbar track when the thumb is being dragged */
    &::-webkit-scrollbar-thumb:hover {
        background-color: #606060;
        /* Adjust as needed */
    }
    /* Set the color of the scrollbar track (the area the thumb moves on) */
    &::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        /* Adjust as needed */
    }
    /* Set the border-radius of the scrollbar thumb */
    &::-webkit-scrollbar-thumb:vertical {
        border-radius: 2px;
        /* Adjust as needed */
    }
}

/* Bootstrap Table */
.table > thead {
	vertical-align: middle;
}
.table > tbody {
	vertical-align: middle;
}
.table > :not(caption) > * > * {
	padding: 10px 10px;
}