@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3452b54a;
  margin-top: 50px;
  margin-bottom: 30px;
}
::selection{
  background: #3452b5;
  color: #fff;
}
.container{
  /*max-width: 950px;*/
  width: 100%;
  padding: 40px 50px  40px  40px;
  background: #fff;
  margin: 0 20px;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .topic{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  
  justify-content: center;
    width: 100%;

}
.content{
  display: flex;
  /*align-items: center;*/
  justify-content: space-between;
}
.content .list{
  display: flex;
  flex-direction: column;
  width: 50%;
  margin-right: 50px;
  position: relative;
}
.content .list label{
  height: 60px;
  font-size: 15px;
  font-weight: 500;
  line-height: 60px;
  cursor: pointer;
  padding-left: 25px;
  transition: all 0.5s ease;
  color: #333;
  z-index: 12;
}
#home:checked ~ .list label.home,
#blog:checked ~ .list label.blog,
#help:checked ~ .list label.help,
#code:checked ~ .list label.code,
#about:checked ~ .list label.about{
  color: #fff;
}
.content .list label:hover{
  color: #3452b5;
}
.content .slider{
  position: absolute;
  left: 0;
  top: 0;
  height: 60px;
  width: 100%;
  border-radius: 5px;
  background: #3452b5;
  transition: all 0.4s ease;
}
#home:checked ~ .list .slider{
  top: 0;
}
#blog:checked ~ .list .slider{
  top: 60px;
}
#help:checked ~ .list .slider{
  top: 120px;
}
#code:checked ~ .list .slider{
  top: 180px;
}
#about:checked ~ .list .slider{
  top: 240px;
}
.content .text-content{
  width: 80%;
  height: 600px;
}
.content .text{
  display: none;
}
.content .text .title{
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 500;
}
.content .text p{
  text-align: justify;
  /*padding-right: 20px;*/
}
.content .text-content .home{
  display: block;
  
  
}
.cp-text{ color: rgba(0,0,0,.7); text-shadow: 0 1px rgba(255, 255, 255, 0.1);}
#home:checked ~ .text-content .home,
#blog:checked ~ .text-content .blog,
#help:checked ~ .text-content .help,
#code:checked ~ .text-content .code,
#about:checked ~ .text-content .about{
  display: block;
}
#blog:checked ~ .text-content .home,
#help:checked ~ .text-content .home,
#code:checked ~ .text-content .home,
#about:checked ~ .text-content .home{
  display: none;
}
.content input{
  display: none;
}

.scrol-bar {
  overflow-y: scroll;
}



/* Track */
.scrol-bar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 3px;
}
 
/* Handle */
.scrol-bar::-webkit-scrollbar-thumb {
  background: #3452b5; 
  border-radius: 10px;
}

/* Handle on hover */
.scrol-bar::-webkit-scrollbar-thumb:hover {
  background: #3452b5; 
}

a {
    text-decoration: none;
}

header {
   
    background-color: #f2f2f2;
    height: 110px;
    padding: 10px 0;
    
}

nav {
    width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.logo {
    width: 100px;
}

.logo img {
    width: 100px;
    
}

 #lang-switch h2 {
   
  opacity: 0.5;
  transition: all .5s;
  margin: auto 3px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #3452b5;
    color: #fff;
    border-radius: 5px;
}

#lang-switch h2:hover {
  cursor: pointer;
  opacity: 1;
}


.ar_lang,
.en_lang,
.fr_lang {
  display: none;
  transition: display .5s;
}

.ar_lang
{  
  transition: display .5s;
  direction: rtl;
  font-size: 18px;
  padding-right: 10px;
  font-family: "IBM Plex Sans Arabic", sans-serif;
     
}

h2 {
  margin-left: 10px;
  border: 1px solid #3452b5;
  padding: 10px;
  font-size: 15px;

  }
/* Language */
.active-lang {
  /*display: flex !important;*/
  display: block !important;
  transition: display .5s;
}

.active-flag {
  transition: all .5s;
  opacity: 1 !important;
}
.en:before {
    background-image: url(https://www.countryflags.io/us/flat/32.png);
}
.fr:before {
    background-image: url(https://www.countryflags.io/fr/flat/32.png);
}

.ar:before {
    background-image: url(https://www.countryflags.io/ae/flat/32.png);
}


.lang-menu:hover ul {
    display: block;
}