@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300&display=swap');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css");

*{

margin: 0;

padding: 0;

user-select: none;

box-sizing: border-box;

font-family: 'Oxygen', sans-serif;
}

::-webkit-scrollbar { width: 0; /* Remove scrollbar space */ background: transparent; /* Optional: just make scrollbar invisible */ }

html {
				scroll-behavior: smooth;
}

:root {

--primary-color: #F9F6EE;
--secondary-color: black;
--tertiary-color: white;
--header-color: white;
--shadow-color: gray;
}

.dark-theme {
--primary-color: black;
--secondary-color: white;
--tertiary-color: #36454F;
--header-color: black;
--shadow-color: black;
}

hr {
border: solid 1px gray;
border-top: solid 0.5px lightgray;
}


/* ebdd */

body {
background-color: var(--primary-color);
font-family: 'Poppins', sans-serif;
}

body .head {
background-color: var(--header-color)	;
height: 54px;
width: 100%;
border-bottom: solid 1px gray;
position: fixed;
font-family: 'Poppins', sans-serif;
}

.menu img {
width: 26.5px;				
position: fixed;
top: 10.4px;		
left: 10.4px;		
}

.menu img:hover {
animation: loadingin 3.5s;				
				
}

.btn{

position: absolute;

top: 5px;

left: 8px;

height: 45px;

width: 45px;

text-align: center;

background: var(--header-color);

border-radius: 3px;

cursor: pointer;

transition: left 0.4s ease;

}

.btn.click{

left: 230px;

}

.btn span{

color: var(--secondary-color);

font-size: 28px;

line-height: 45px;

}

.btn.click span:before{

content: '\f00d';

}

.sidebar{

position: fixed;

width: 235px;

height: 100%;

left: -250px;
top: 0;

background: #1b1b1b;

transition: left 0.4s ease;
box-shadow: 2px 2px 3px gray;
}

.sidebar.show{

left: 0px;

}

.sidebar .text{

color: var(--secondary-color);
font-size: 25px;
font-weight: 600;
line-height: 65px;
text-align: center;
background: #1e1e1e;
letter-spacing: 1px;

}

nav ul{

background: var(--header-color);

height: 100%;

width: 100%;

list-style: none;

}

nav ul li{

line-height: 60px;

border-top: 1px solid rgba(255,255,255,0.1);

}

nav ul li:last-child{

border-bottom: 1px solid rgba(255,255,255,0.5);

}

nav ul li a{

position: relative;

color: var(--secondary-color);

text-decoration: none;

font-size: 18px;

padding-left: 50px;

font-weight: 500;

display: block;

width: 100%;

border-left: 3px solid transparent;

}

nav ul li.active a{

color: yellowgreen;

background: #1e1e1e;

}

nav ul li a:hover{

background: #1e1e1e;

}

nav ul ul{

position: static;

display: none;

}

nav ul .feat-show.show{

display: block;

}

nav ul .serv-show.show1{

display: block;

}

nav ul ul li{

line-height: 42px;

border-top: none;

}

nav ul ul li a{

font-size: 17px;

color: #e6e6e6;

padding-left: 80px;

}

nav ul li.active ul li a{

color: #e6e6e6;

background: #1b1b1b;

border-left-color: transparent;

}

nav ul ul li a:hover{

color: cyan!important;

background: #1e1e1e!important;

}

nav ul li a span{

position: absolute;

top: 50%;

right: 20px;

transform: translateY(-50%);

font-size: 22px;

transition: transform 0.4s;

}

nav ul li a span.rotate{

transform: translateY(-50%) rotate(-180deg);

}



.content{
top: 54px;
position: absolute;
width: 100%;
color: var(--secondary-color);
text-align: center;
background-color: var(--primary-color);
font-family: 'Poppins', sans-serif;
animation: loadingin 0.75s;
}



.header{
position: fixed;
top: 0;
left: 0;
background-color: var(--header-color);
font-weight: 600;
border-bottom: solid 1px gray;
color: black;
height: 54px;
width: 100%;
}

@keyframes loadingin {
				from{
							opacity: 0;	
							transform: rotateX(-30deg);
				}
				
				to {
							opacity: 1;	
							transform: rotateX(0);
				}
}

.header .logo {
position: absolute;
left: 45px;
top: -57.8px;
margin-top: 5px;
height: 10rem;
}

.content p{

font-size: 30px;
font-weight: 500;

}

.content .a1 {
font-weight: bold;
font-size: 15.5px;
margin-top: 30px;
padding-top: 15px;
padding-bottom: 10px;
background-color: var(--tertiary-color);
}


.content .container {
width: 100%;
height: 210px;
margin-top: 0px;
background-color: var(--tertiary-color);
border-radius: 2px;
display: flex;
flex-wrap: auto;
overflow-x: scroll;
padding-left: 5px;
padding-right: 5px;
}

.content .container a img {
height: 140px;
width: 130px;
border-bottom: solid lightgray 1px;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 5px;
background-color: var(--tertiary-color);
animation: loadingin 1s;
border-radius: 10px;
}

.content .container a {
font-size: 16px;
max-width: 170px;
padding-top: 8px;
margin-top: 10px;
height: 195px;
text-decoration: none;
background-color: var(--tertiary-color);
color: var(--secondary-color);
display: flex;
flex-direction: column;
margin: 5px;
}

.content .container a:hover {
transform: scale(0.92);
cursor: pointer;
transition: .5s;
}

.footer {
margin-top: 40px;
margin-bottom: 40px;
width: 100%;
border-top: solid black 2px;
}

.footer p {
font-size: 15px;
text-align: center;
}

.footer a {
color: gray;
}

.search {
position: absolute;
height: 40px;
width: 40px;
top: 5px;
right: 6px;
background-color: transparent;
border-radius: 3px;
padding: 5px;
font-size: 25px;
}

.search span {
width: 20px;			
				
}

.more {
margin-top: 10px;
height: 30px;
width: 100%;
display: flex;
justify-content: center;
}

.content .more a {
position: absolute;
text-decoration: none;
color: var(--secondary-color);
background-color: var(--tertiary-color);
border-radius: 2px;
padding-left: 0px;
padding-right: 10px;
width: 95px;
padding-top: 3.3px;
padding-bottom: 3.3px;
}

.content .more a:hover {
animation: loadingin 1s;
box-shadow: 1px 1px 2px gray;
}

.more img {
top: 3px;
position: absolute;
margin: 0;
height: 20px;
}

.btn-toggle {
position: absolute;
top: 8px;
right: 50px;
font-size: 28px;
}

.btn-toggle img:hover {
height: 27.5px;
width: 27.5px;
cursor: pointer;				
box-shadow: 2px 2px 3px gray;
fill: white;
}

.dark1 {
position: absolute;
top: 13px;
right: 50px;

}

.dark1 img {
height: 26px;
width: 26px;
}

.content .box1 {
text-align: center;
background-color: var(--tertiary-color);
margin-top: 20px;
text-align: center;
font-size: 15px;
color: var(--secondary-color);
animation: loadingin 0.75s;
}

.content .box1 img {
height: 94.7px;
width: 94.7px;
box-shadow: 2px 2px 3px var(--shadow-color);
border-radius: 15px;
margin-top: 20px;
animation: loadingin 1s;
}

.content .download a {
}

.content .download #download5:hover {
box-shadow: 2px 2px 3px darkgray;
cursor: pointer;
}

.content .download1 {
background-color: var(--tertiary-color);
	height: 50px;
	display: flex;
	justify-content: center;	
	align-items: center;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
}

.content .download1 a {
font-size: 17px;
background-color: var(--tertiary-color);
text-decoration: none;
color: var(--secondary-color);
width: 100%;
padding-top: 8px;
padding-bottom: 8px;
}

#download5 {
width: 160px;	
height: 50px;		
				
}

.acc {
width: 100%;
height: 70px;
}

.acc img {
height: 65px;
width: 65px;
border-radius: 50%;
border: solid 1px black;
padding: 10px;
background-color: white;
}

.content .download1:hover {
box-shadow: 3px 3px 4px gray;				
animation: loadingin 1.5s;
}

#desc {
margin: 2.5px;
}

.content {box-sizing:border-box}


.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.screenshot .detail {
color: gray;
font-size: 15px;
}

#desc {
font-size: 13px;
color: gray;
				
}

#dl {
font-size: 20px;
				
}

#a4 img {
margin-left: 10px;
}

/* Popup box BEGIN */ .hover_bkgr_fricc{ background:rgba(0,0,0,.4); cursor:pointer; display:none; height:100%; position:fixed; text-align:center; top:0; width:100%; z-index:10000; } .hover_bkgr_fricc .helper{ display:inline-block; height:100%; vertical-align:middle; } .hover_bkgr_fricc > div { background-color: #fff; box-shadow: 10px 10px 60px #555; display: block; height: auto; max-width: 551px; min-height: 100px; vertical-align: middle; width: 60%; position: relative; border-radius: 8px; padding: 15px 5%; } .popupCloseButton { background-color: #fff; border: 3px solid #999; border-radius: 50px; cursor: pointer; display: block; font-family: arial; font-weight: bold; position: absolute; top: -20px; right: -20px; font-size: 25px; line-height: 30px; width: 30px; height: 30px; text-align: center; } .popupCloseButton:hover { background-color: #ccc; } .trigger_popup_fricc { cursor: pointer; font-size: 20px; margin: 20px; display: block; font-weight: bold; 
top: 0px; right: 60px; position: absolute;} /* Popup box BEGIN */



/*    MEDIA     */

@media only screen and (max-width: 1000px) {

.btn.click{

left: 455px;
}

.sidebar {
width: 440px;
left: -550px;
top: 0;
}

}


@media only screen and (max-width: 650px) {

.btn.click{

left: 240px;
}

.sidebar {
width: 240px;
left: -250px;
top: 0;
}

}