/*
Theme Name: Pixelpen School One
Author: Pixelpen
Author URI: https://www.pixel-pen.com/
Description: Built on a solidly designed foundation, Pixelpen Azadfeat embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Pixelpen Azadfeat lies in its opportunity for customization. The theme is built to take advantage of the Full Site Editing features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Pixelpen Azadfeat will help you create a site that is uniquely yours.
Requires at least: 5.9
Tested up to: 5.9
Requires PHP: 5.6
Version: 1.1
*/

/*
 * Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 */

 :root {
	--primary_color: rgb(168, 1, 235);
	--primary_dark_color: rgb(54, 18, 68);
	--secondary_color: rgb(235, 1, 110);
	--text_color:#555;
}




html,
body {
	margin: 0;
	padding: 0;
	/* font-size: 10px; */
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

.color-container-1{
	background-color: rgb(255, 245, 245);
}

.topbar{
	background: white;
	width: 100%;
}
.topbar .logo-container{
	width: 100%;
	justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    display: flex;
    gap: 10px;
}
.topbar .logo-container p{
	font-size: 22px;
	font-weight: bold;
    color: var(--primary_dark_color);
    margin: 0;
}
nav.header {
	padding: 10px 0;
	position: sticky;
	top: 0;
	width: 100%;
	transition: background 0.3s ease-in-out, padding 0.3s ease-in-out;
	z-index: 98;
	font-size: 14px !important;
	padding: 0;
	background: var(--primary_color) !important;
	/* backdrop-filter: blur(30px); */
	border-bottom: 1px solid #ddd;
}

nav.header button {
	font-size: 12px !important;
}


nav.header img {
	max-height: 60px;
}


.top-navigation {
	display: none;
}

@media (max-width:4000px) {
    
    .font-md-20{
        font-size:20px !important;
    }
    #college_name{
    font-size:30px;
    font-weight: 400;
    }
	.top-navigation {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	

	.top-navigation .menu-main-menu-container {
		height: 100%;
	}
	
	.top-navigation .menu-top-menu-container{
	    width:100%;
	}

	.top-navigation ul.menu {
		display: flex;
		list-style: none;
		gap: 10px;
		margin: 0;
		height: 100%;
		justify-content: space-between;
    flex-wrap: wrap;
	}


	.top-navigation ul.menu li.menu-item {
		height: 100%;
		display: flex;
		align-items: center;
		position: relative;
	}

	.top-navigation ul.menu li.menu-item a {
		text-decoration: none;
		color: white;
		font-size: 15px;
		text-transform: uppercase;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
		height: 100%;
		position: relative;
		font-weight: bold;
		white-space: nowrap;
		border-radius: 4px;
	}

	.top-navigation ul.menu li.menu-item a:hover {
		text-decoration: none;
		color: var(--primary_dark_color);
		background: white;
	}

	/* .top-navigation ul.menu li.menu-item a::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 3px;
		border-radius: 30px;
		background-color: var(--primary_dark_color);
		transform: scale(0);
		transition: all 0.2s ease-in-out;
	}

	.top-navigation ul.menu li.menu-item a:hover::before {
		transform: scale(1);
	} */

	.top-navigation ul.menu ul.sub-menu {
		position: absolute;
		top: 50px;
		right: 0;
		background: white !important;
		backdrop-filter: blur(30px);
		white-space: nowrap;
		box-shadow: 0 3px 6px rgb(0 0 0 / 10%), 0 5px 10px rgb(0 0 0 / 20%);
		border-radius: 4px;
		padding: 10px 0;
		transform: scale(0);
		transform-origin: top right;
		transition: 0.2s ease-in-out;
		min-width:120px;
	}

	.top-navigation ul.menu li.menu-item:hover ul.sub-menu {
		transform: scale(1);
	}

	.top-navigation ul.menu ul.sub-menu li.menu-item,
	.top-navigation ul.menu ul.sub-menu li.menu-item a {
		width: 100%;
		color: var(--primary_dark_color);
		border-radius: 0;
	}

	.top-navigation ul.menu ul.sub-menu a:hover {
		background: var(--primary_color);
		color: white !important;
	}

	.sidebar,.header .menu-btn {
		display: none;
	}
}


@media(max-width:991px) {
    
    #college_name{
    font-size:22px;
}
}
@media(max-width:767px) {
    
    #college_name{
    font-size:20px;
}
	.top-navigation {
		display: none;
	}
	.header .menu-btn {
		display: inline-block;
		color: white;
	}
	

	.sidebar {
		display: block;
		position: fixed;
		top: 0;
		width: 250px;
		background: white;
		height: 100vh;
		overflow: auto;
		transform: translateX(-250px);
		transition: 0.2s ease-in-out;
		z-index: 110;
		padding: 10px;
	}
	.sidebar.open {
		transform: translateX(0px);
	}

	.sidebar .topbar{
		background: none;
	}

	.header .menu-btn i{
		font-size: 22px;
	}


	.sidebar-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(30px);
		visibility: hidden;
		transition: all 0.2s ease-in-out;
		z-index: 100;
	}

	.sidebar-overlay.show {
		visibility: visible;
	}

	.sidebar-menu,
	.sidebar-menu .menu-top-menu-container {
		width: 100%;
	}

	.sidebar-menu ul.menu {
		display: flex;
		flex-direction: column;
		width: 100%;
		list-style: none;
		margin: 0;

	}

	.sidebar-menu ul.menu li.menu-item {
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
	}

	.sidebar-menu ul.menu li.menu-item-has-children {
		flex-direction: column;
		align-items: stretch;
		display: flex;
	}

	.sidebar-menu ul.menu li.menu-item a {
		text-decoration: none;
		color: var(--text_color);
		font-size: 15px;
		text-transform: uppercase;
		display: flex;
		align-items: center;
		padding: 10px;
		height: 100%;
		position: relative;
		font-weight: bold;
		width: 100%;
	}

	.sidebar-menu ul.menu ul.sub-menu {
		background: white;
		white-space: nowrap;
		padding: 0 10px;
		
	}

	.sidebar-menu ul.menu ul.sub-menu.opened {
		height: auto;
		visibility: visible;
		transform: scaleY(1);
	}

	.sidebar-menu ul.menu ul.sub-menu li.menu-item,
	.sidebar-menu ul.menu ul.sub-menu li.menu-item a {
		width: 100%;
	}

	.sidebar-menu ul.menu a:hover {
		background: #eee;
		color: var(--primary_color);
	}
}

.icon-btn{
	border-radius: 50%;
	width:36px;
	height:36px;
	font-size:20px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
    text-decoration: none;
	color: var(--text_color);
}
.icon-btn:hover{
	background:rgb(0 0 0 / 10%);
	text-decoration: none;
}

.footer{
	text-align: left;
}

#footer > p{
	display: none;
}


#lightbox-ui{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgb(0 0 0 / 50%);
	backdrop-filter: blur(30px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	transform:scale(1);
	transition: all 0.2s ease-in-out;
	padding: 20px 0;
}

#lightbox-ui img{
	height: 100%;
	border:solid 5px white;
	border-radius: 10px;
}

.lightbox-close-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: white;
	color: rgb(219, 0, 0);
	position: absolute;
	top:20px;
	right:20px;
	border-radius: 50%;
	cursor: pointer;
	font-weight: bold;
}

#lightbox-ui.hidden{
	transform:scale(0);
}


#videobox-ui{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgb(0 0 0 / 50%);
	backdrop-filter: blur(30px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	transform:scale(1);
	transition: all 0.2s ease-in-out;
	padding: 20px 0;
}

#videobox-ui iframe{
    width:50%;
    min-width:300px;
	border:solid 5px white;
	border-radius: 10px;
	height:50%;
}

.videobox-close-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: white;
	color: rgb(219, 0, 0);
	position: absolute;
	top:20px;
	right:20px;
	border-radius: 50%;
	cursor: pointer;
	font-weight: bold;
}

#videobox-ui.hidden{
	transform:scale(0);
}
footer.page-footer .footer-copyright{
	background: orangered !important;
}