:root{
  --mainBackgroundColor : #0567e1;
  --secondaryBackgroundColor: #02479d;
  --thirdTextColor: #02479d;
  --siteWidth: 800px;
  --black: #010101;
  --nero :#1c1c1c;
  --charcoal:#4a4a4a;
  --dimGray:#6d6d6d;
  --white : #ffffff;
}

.emjoi{
  font-family: "Noto Color Emoji"
}
@font-face {
  font-family: DroidKufiBold;
  src: url(../fonts/DroidKufi-Bold.woff);
}
@font-face {
  font-family: DroidKufiRegular;
  src: url(../fonts/DroidKufi-Regular.woff);
}
@font-face {
  font-family: K24KurdishBold;
  src: url(../fonts/K24KurdishBold-Bold.woff);
}

@font-face {
  font-family: K24KurdishLight;
  src: url(../fonts/K24KurdishLight-Light.woff);
}
@font-face {
  font-family: NotoSansBold;
  src: url(../fonts/NotoSans-Bold.woff);
}
@font-face {
  font-family: NotoSansLight;
  src: url(../fonts/NotoSans-Light.woff);
}
@font-face {
  font-family: BebasNeueRegular;
  src: url(../fonts/BebasNeue-Regular.ttf);
}
/** GLOBAL _______________________||| */

*,
*::before,
*::after{
  box-sizing: border-box;
  margin:0;
  padding:0;
  outline:none;
}

body{
  font-size: 18px;
/* background-color: #1d1d1d; */
background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 9%, 1)'/><path d='M40 45a5 5 0 110-10 5 5 0 010 10zM0 45a5 5 0 110-10 5 5 0 010 10zM0 5A5 5 0 110-5 5 5 0 010 5zm40 0a5 5 0 110-10 5 5 0 010 10z'  stroke-width='1.5' stroke='hsla(259, 0%, 18%, 1)' fill='none'/><path d='M20 25a5 5 0 110-10 5 5 0 010 10z'  stroke-width='1.5' stroke='hsla(340, 0%, 12%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-80,-76)' fill='url(%23a)'/></svg>")}
.container {
  width:var(--siteWidth);
  margin:auto;
}

.info, .success, .warning, .error, .validation {
  border: 1px solid;
  margin: 10px 0px;
  padding: 15px 10px 15px 50px;
  background-repeat: no-repeat;
  background-position: 10px center;
}
.info {
  color: #00529B;
  background-color: #BDE5F8;
  background-image: url('https://i.imgur.com/ilgqWuX.png');
}
.success {
  color: #4F8A10;
  background-color: #DFF2BF;
  background-image: url('https://i.imgur.com/Q9BGTuy.png');
}
.warning {
  color: #9F6000;
  background-color: #FEEFB3;
  background-image: url('https://i.imgur.com/Z8q7ww7.png');
}
.error{
  color: #D8000C;
  background-color: #FFBABA;
  background-image: url('https://i.imgur.com/GnyDvKN.png');
}
.validation{
  color: #D63301;
  background-color: #FFCCBA;
  background-image: url('https://i.imgur.com/GnyDvKN.png');
}







.bio{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.bio .background{
  background-image:url("../images/background.jpg");
  background-size: cover;
  background-position: center;
  width:var(--siteWidth);
  height:300px;
  display: flex;
  justify-content: center;
  position: relative;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
}
.bio .PhotoAndName{
  position: absolute;
  bottom:-180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bio .photo{
  background-image:url("../images/photo.png");
  background-size: cover;
  width:250px;
  height:250px;
  border-radius: 100%;
  box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.5);
}
.bio .name{
  color:#fff;
  margin-top: 10px;
font-size:30px;
font-family: BebasNeueRegular;
}
.bio .at{
  color:#fff;
font-size:15px;
color:#fff;
}


.cl{cursor: pointer;}
.aboutText > div[class*='about']{
  display: none;
  font-family: DroidKufiRegular,arial;
}
.aboutText > div[class*='aboutArabic']{
  display:block;
  direction: rtl;
}
.aboutText > div[class*='aboutKurdish']{
  direction: rtl;
}
.aboutText{
  padding-top:20px;
  text-align: justify;
}
.sections{
  left:0;
  right:0;
  margin:0 auto;
  width:var(--siteWidth);
  margin-top:200px;
  /* display: flex;
  justify-content:center   */
}
.sections > div{
      background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
      border-radius: 25px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      -ms-border-radius: 25px;
      -o-border-radius: 25px;
      margin-bottom: 20px;
}
.sections .sectionLeftTop{
  width:100%;
  padding:20px;
}
@media only screen and (max-width: 1400px) {
  .aboutText{
    font-size:12px;
  }
  .sections{
    width:90%;
    margin-top:150px;
  }
  .sections .sectionLeftTop{
    width:100%;
    padding:20px;
  }
  .bio{
    margin-top: 0;
  }
  .bio .background{
    width:100%;
    border-radius: 0;
    -webkit-border-bottom-right-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-bottomright: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;

}
.bio .PhotoAndName{
  bottom:-120px;
}
.bio .photo{
  width:150px;
  height:150px;
}
}
.sectionRightBottom .text{

}

/* @font-face {
  font-family: DroidKufiBold;
  src: url(../fonts/DroidKufi-Bold.woff);
}
@font-face {
  font-family: DroidKufiRegular;
  src: url(../fonts/DroidKufi-Regular.woff);
}
@font-face {
  font-family: K24KurdishBold;
  src: url(../fonts/K24KurdishBold-Bold.woff);
}

@font-face {
  font-family: K24KurdishBold;
  src: url(../fonts/K24KurdishLight-Light.woff);
}
@font-face {
  font-family: NotoSansBold;
  src: url(../fonts/NotoSans-Bold.woff);
}
@font-face {
  font-family: NotoSansLight;
  src: url(../fonts/NotoSans-Light.woff);
}
@font-face {
  font-family: BebasNeueRegular;
  src: url(../fonts/BebasNeue-Regular.ttf);
} */

.sections .sectionLeftTop .head,
.sections .sectionLeftTop .heading{
  font-family: BebasNeueRegular, DroidKufiRegular;
  font-size:30px;
  display: flex;
  align-items: center;
}
.sections .heading{
  margin-top:20px;
}


.sectionLeftTopSocial>a>div{
  display: flex;
  
  align-items: center;
  background-image: linear-gradient(to right, #434343 0%, black 100%);
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  margin-top:5px;
}
.sectionLeftTopSocial a{
  text-decoration: none;
}
.sectionLeftTopSocial .sectionLeftTopIcons{
  height:50px;
  width:50px;
  display:flex;
  justify-content: center;
  align-items: center;
  border-radius: 25PX;
  -webkit-border-radius: 25PX;
  -moz-border-radius: 25PX;
  -ms-border-radius: 25PX;
  -o-border-radius: 25PX;
  font-size: 25px;
  margin-left:-10px;
  transition: all .1s cubic-bezier(.17,.67,.79,.54);
  -webkit-transition: all .1s cubic-bezier(.17,.67,.79,.54);
  -moz-transition: all .1s cubic-bezier(.17,.67,.79,.54);
  -ms-transition: all .1s cubic-bezier(.17,.67,.79,.54);
  -o-transition: all .1s cubic-bezier(.17,.67,.79,.54);
  color:#fff;
}
.sectionLeftTopSocial .sectionLeftTopNames{
  Padding-left:10px;
  color:#fff;
}
.sectionLeftTopSocial div:hover{
  cursor: pointer;
}
.sectionLeftTopSocial div:hover > .sectionLeftTopIcons{
  margin-left:20px;
  
}
.Copyrights{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:40px;
    color:#fff;
}