@import "https://noktacenter.iq/static/fonts/fonts/styles.css";

* {
    font-family: 'DroidArabicKufi';

}

a {
    color: inherit;
}

.row {
    position: relative;
}

.column {
    margin-bottom: 5px;
}

img:not(.img) {
    width: 100%;
    height: auto;
}

@keyframes imgbg {
    0% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

a:hover {
    color: inherit;
}

.imgbg {
    width: 100%;
    height: 200px;
    background-position: 100% 0%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.imgbg:hover {
    /*animation: imgbg 3s linear;
    background-position: 0% 100%;*/
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'HacenLinerXL';
}

body {
    background: #252525;
}

.fluid {
    max-width: 100%;
}




.header_ {
background:#79651c;
  height:30px;
  width:100%;
 }
.Calendar{
    color: #fff;
    font-size: 12px;
    margin-top: 6px;
}
.social_image{
    max-width: 20px;
    margin-left: 2px;
    border-radius: 50%;
}
.about_as_{
    cursor: pointer;
    width: 55px;
    font-size: 16px;
    margin-top: -3px;
}
/****************************** social media *********************/

        .c-link--facearticle:hover.c-link--facearticle::after, .c-link--facearticle:hover .social_image {
            background: #3b5998;
        }
             .c-link--pinterest:hover.c-link--pinterest::after, .c-link--pinterest:hover .social_image {
                    background: #bc081b;
                }
           .c-link--telegram:hover.c-link--telegram::after, .c-link--telegram:hover .social_image {
                    background:  #2da5e1;
                }
        .c-link--twitter:hover.c-link--twitter::after, .c-link--twitter:hover .social_image{

            background: #55acee
        }

        .c-link--linked_in:hover.c-link--linked_in::after, .c-link--linked_in:hover .social_image {

            background: #007bb5
        }
        .c-link--instagram:hover.c-link--instagram::after, .c-link--instagram:hover .social_image {

            background: #833ab4
        }

        .c-link {
            top: -1px;
            position: relative;
            color: #bbb;
        }


        .c-link {
            margin-right: 15px;
        }

        .c-tooltip::before,
        .c-tooltip::after {
            display: block;
            position: absolute;
            left: 61%;
            transform: translate(-50%, -10px);
            opacity: 0;
            transition: .2s;
        }

        .c-tooltip::before {
            content: '';
            bottom: calc(-45% + 2px);
            border: solid 9px transparent;
            border-bottom-color: currentColor;
        }

        .c-tooltip::after {
            content: attr(aria-label);
            bottom: calc(-255% + 12px);
            padding: .61em .93em;
            font-size: .875rem;
            color: white;
            border-radius: 3px;
        }

        .c-tooltip:hover::before,
        .c-tooltip:hover::after {
            opacity: 1;
            transform: translate(-50%);
        }

        .c-tooltip:hover::after {
            width: auto;
        }

/*******************************End css social media *******************/
/******************************* animation css3 ************************/

@keyframes transformscale {
    0% {opacity:0.0;transform:scale(0.1);}
    100% {opacity:1;transform:scale(1);}
}
@-webkit-keyframes transformscale {
    0% {opacity:0.0;transform:scale(0.1);}
    100% {opacity:1;transform:scale(1);}
}
@keyframes translateFromBottom {
    0% {opacity:0.0;transform:translate( 150px, 150px);}
    100% {opacity:1;transform:translate(0);}
}
@-webkit-keyframes translateFromBottom {
    0% {opacity:0.0;transform:translate( 150px, 150px);}
    100% {opacity:1;transform:translate(0);}
}
/******************************End animation css3  *********************/

 .decoration{
     z-index: -1;
 position: absolute;
     width: 100%;
     height: 182px;
     background-position: initial;
     background-size: cover;
     background-repeat: no-repeat;
     background-image: url('https://noktacenter.iq/static/images/site/decoration.png');
         top: -40px;
 }
 .menu{
 color:#fff;
    padding-top: 90px;
 margin-top:90px;
 }
 .line{
position: relative;
    height: 194px;
      background:#525355;
   /* background-color: rgb(224, 231, 237);*/
    width: 1px;
    margin-top: -80px;
    float: left;
 }
 .line_bottom{
  /*  top: 99px;*/
      top: 122px;
    background:#525355;
    /* background-color: rgb(224, 231, 237);*/
    width: 90%;
    height: 1px;
    position: relative;
        margin-right: 18px;
 }
 .new_line{
  padding-top: 44px;

 }
 .image{

height: 200px;
   top: -53px;
    position: relative;
background-position: center;
    width: 100%;
background-repeat: no-repeat;
 }

 #qrk :hover  {
 background-image: url('https://noktacenter.iq/static/images/site/qrk_hover.png');

 }
 .a-menu2{
       top: 49px;
    display: block;
    width: 165px;
    margin-right: auto;
    margin-left: auto;
    position: relative;

 }
 .Quran{
 display:block;

 }
 .Quran_hover{
 display:none;

 }
  .a-menu2:hover .Quran {
  display:none;
  }
 .a-menu2:hover .Quran_hover {
  display:block;
  }

  .footer_decoration{

       width: 100%;
     /*  height: 130px; */
     height:156px;
       background-position: top;
       background-size: cover;
       background-repeat: no-repeat;
       background-image: url('https://noktacenter.iq/static/images/site/footer_.png');

  }
  .footer_website{
      padding-top: 7px;
    font-size: 12px;
 color: rgb(231, 231, 231);
  background-color: rgb(88, 88, 88);
height: 29px;
width:100%;
border-bottom:solid 1px #fff;
  }
.pop{
    display: none;
    width: 40px;
    position: absolute;
    right: 83px;
    float: left;
    top: 22px;
}
 .social_image:hover + .pop{
display:block;
}
.a_logo_white{
    display: block;
    max-width: 392px;
    margin-right: auto;
    margin-left: auto;

}

  /************************ anmation*************/
  @keyframes rotation {
      0% , 60%{
          transform: rotatey(0deg);
      }
      80%{

          transform:rotatey(90deg);
      }
  }

/**********************************************************************************************************************/

/***************************
 *	Application Main Styles
 **************************/
#menu_mobile--toggle[type="checkbox"]:not(:checked),
#menu_mobile--toggle[type="checkbox"]:checked {
    display: none;
}

.menu_mobile--toggle__trigger,
.menu_mobile--toggle__burger,
.menu_mobile--toggle__burger:before,
.menu_mobile--toggle__burger:after {
    position: absolute;
    top: 0.2em;
    right: 0.2em;
    width: 2em;
    height: 5px;
    background-color: #282828;
    border-radius: 2px;
    cursor: pointer;
    z-index: 100;
    -webkit-transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.menu_mobile--toggle__trigger {
    height: 2em;
    background: none;
}

.menu_mobile--toggle__burger:before {
    content: "";
    top: 10px;
    right: 0;
}

.menu_mobile--toggle__burger:after {
    content: "";
    top: 20px;
    right: 0;
}

.menu__body {
    right: 0px;
    top: -2px;
    position: absolute;
    width: 3em;
    height: 3em;
    margin: 0;
    padding: 0;
    background-color: #fcfcfc;
    border-bottom-left-radius: 100%;
    -webkit-box-shadow: 3px 3px 7px rgba(40, 40, 40, 0.2);
    box-shadow: 3px 3px 7px rgba(40, 40, 40, 0.2);
    z-index: 10;
    -webkit-animation: checkboxUncheckedAnimation 0.35s both;
    animation: checkboxUncheckedAnimation 0.35s both;
}

.menu__body-element,
.menu__body-link {
    display: none;
    height: 40px;
    font-weight: normal;
    color: #282828;
    text-decoration: none;
    text-transform: none;
    list-style: none;
    outline: 0;
    width: 80% !important;
    margin-right: 30px;
    background:  #79651c;
    border-radius: 10px;
    color: #fff;
    margin-top: 10px;
}

.menu__body-element {
    text-indent: 2em;
}

#menu_mobile--toggle:checked + .menu_mobile--toggle__trigger ~ .menu__body .menu__body-element:nth-child(1) {
    margin-top: 50px;
    -webkit-animation: anmation_top 0.05s;
    animation: anmation_top 0.05s;
}

#menu_mobile--toggle:checked + .menu_mobile--toggle__trigger ~ .menu__body .menu__body-element:nth-child(2) {

    -webkit-animation: anmation_top 0.1s;
    animation: anmation_top 0.1s;
}

#menu_mobile--toggle:checked + .menu_mobile--toggle__trigger ~ .menu__body .menu__body-element:nth-child(3) {

    -webkit-animation: anmation_top 0.15s;
    animation: anmation_top 0.15s;
}

#menu_mobile--toggle:checked + .menu_mobile--toggle__trigger ~ .menu__body .menu__body-element:nth-child(4) {

    -webkit-animation: anmation_top 0.2s;
    animation: anmation_top 0.2s;
}

#menu_mobile--toggle:checked + .menu_mobile--toggle__trigger ~ .menu__body .menu__body-element:nth-child(5) {

    -webkit-animation: anmation_top 0.25s;
    animation: anmation_top 0.25s;
}

#menu_mobile--toggle:checked + .menu_mobile--toggle__trigger ~ .menu__body .menu__body-element:nth-child(6) {

    -webkit-animation: anmation_top 0.3s;
    animation: anmation_top 0.3s;
}

#menu_mobile--toggle:checked + .menu_mobile--toggle__trigger ~ .menu__body .menu__body-element:nth-child(7) {

    -webkit-animation: anmation_top 0.35s;
    animation: anmation_top 0.35s;
}

#menu_mobile--toggle:checked + .menu_mobile--toggle__trigger ~ .menu__body .menu__body-element:nth-child(8) {

    -webkit-animation: anmation_top 0.4s;
    animation: anmation_top 0.4s;
}

.menu__body-link:hover {
    display: block;
    width: 0;
    background:#a78405;


}

#menu_mobile--toggle:checked + .menu_mobile--toggle__trigger + .menu_mobile--toggle__burger {
    top: 35px;
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#menu_mobile--toggle:checked + .menu_mobile--toggle__trigger + .menu_mobile--toggle__burger:before {
    top: 0;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#menu_mobile--toggle:checked + .menu_mobile--toggle__trigger + .menu_mobile--toggle__burger:after {
    top: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#menu_mobile--toggle:checked + .menu_mobile--toggle__trigger + .menu_mobile--toggle__burger + .menu__body {
    -webkit-animation: checkboxCheckedAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
    animation: checkboxCheckedAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

#menu_mobile--toggle:checked + .menu_mobile--toggle__trigger ~ .menu__body .menu__body-element, #menu_mobile--toggle:checked + .menu_mobile--toggle__trigger ~ .menu__body .menu__body-link {
    display: block;
}

/**
 *	Animations
 *
 *  @note checkboxCheckedAnimation - added fix for Microsoft Edge
 */
@-webkit-keyframes checkboxCheckedAnimation {
    50% {
        width: 100vw;
        height: 100vh;
    }
    100% {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}

@keyframes checkboxCheckedAnimation {
    50% {
        width: 100vw;
        height: 100vh;
    }
    100% {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}

@-webkit-keyframes checkboxUncheckedAnimation {
    0% {
        width: 100vw;
        height: 100vh;
    }
}

@keyframes checkboxUncheckedAnimation {
    0% {
        width: 100vw;
        height: 100vh;
    }
}

@-webkit-keyframes changeWidthOfElementAnimation {
    50% {
        width: 0;
    }
    100% {
        width: 80%;
    }
}

@keyframes changeWidthOfElementAnimation {
    50% {
        width: 0;
    }
    100% {
        width: 80%;
    }
}

@-webkit-keyframes anmation_top {
    0% {
        opacity: 0;
        margin-right: -100px;
    }
    50% {
        opacity: 0.5;
        margin-right: -50px;
    }
    100% {
        opacity: 1;
        margin-right: 0px;
    }
}

@keyframes anmation_top {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) translate3d(2em, 0, 0) scale3d(0.5, 1, 1);
        transform: translate3d(100%, 0, 0) translate3d(2em, 0, 0) scale3d(0.5, 1, 1);
    }
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.56, 1.19, 0.2, 1.05);
        transition-timing-function: cubic-bezier(0.56, 1.19, 0.2, 1.05);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/*********************************************************************************************************************/
/**** End response ****/
@media only screen and (max-width: 1100px){
.header_{
padding-left: 25px;
}
}
@media only screen and (max-width: 600px){
.reveal{
width:100%!important;
}
.footer_website{
font-size:10px;
height:auto;
min-height:40px;
}
.menu{
margin-top:0px;
}
.a-menu3{
top: -2px!important;

}
.a-menu2 {

    top: 81px;

}
.line {
       margin-top: -10px;
       height: 124px;

}
#logo_white{
    max-width: 290px!important;
}
.mobile_social_media{
    text-align: left!important;
    margin-top: 13px;
}
.header_{
    height: 43px;

}
.line_bottom{

    margin-right: 9px;
}

.a-menu2{
width:auto;
}
.line_bottom_small{
    top: 116px;

}
.line_bottom_small2{
    margin-right: 9px;
    width: 83%;
    top: 120px!important;

}
.line_bottom_small1{
    width: 83%;

}
#logo_yellow{
max-width: 290px!important;

}
.logo_site_text{
    padding-left: 8px;
    padding-right: 8px;
}
}
   .ataba {
        position: absolute;
        top: 57px;
        margin-right: -17px;
    }
    .articles_{
    padding-right: 30px;
    padding-left: 30px;
        min-height:500px;
        border-radius: 6px;
        background-color: rgb(248, 248, 248);
        box-shadow: 0px 0px 7.12px 0.88px rgba(0, 0, 0, 0.08);
    }
    .contents_title{
        color: rgb(115, 95, 50);
        font-weight: bold;
   font-size: 18px;
       margin-top: 30px;

    }
    .date{
    font-size: 12px;
    color: rgb(182, 184, 184);
    margin-top: 10px;
    margin-right: 30px;
    }
    .description {
        margin-bottom: 70px;
    font-size: 16px;
    font-family: "DroidArabicKufi";
    color: rgb(115, 95, 50);
    font-weight: bold;
    margin-top: 36px;
    }