*{margin:0;padding:0;}
@font-face {
    /*font-family: 'yekan';
    src: url('../fonts/yekanweb-regular.eot?#iefix') format('embedded-opentype');*/
    font-family: 'yekan';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/yekanweb-regular.eot?#iefix') format("embedded-opentype"), url('../fonts/yekanweb-regular.woff') format("woff"), url('../fonts/yekanweb-regular.ttf') format("truetype"), url('../fonts/yekanweb-regular.svg') format("svg"), url('../fonts/BNazanin.ttf') format('truetype');
}



body {
    font-family: "yekan";
    /*background-color: #F0EF18;*/
    background-color: #F0EF18;
}
/*---------------------Header Style----------------------*/

.header {
    min-height: 150px;
    background-image: url(../uploads/images/dark.png);
    border-bottom: 3px solid #f29e5d;
}

.image-box-head img {
    margin-left: 35%;
    height: 60px;
    width: 50px;
}

.image-box-head {
    margin-top: 15px;
}



    .image-box-body img {
        max-height: 100%;
        max-width: 100%;
    }

.title-head h4 {
    text-align: right;
    font-size: 13px;
    color: #f4ba33;
}

.title-body h1 {
    text-align: right;
    font-size: 50px;
    color: #fff;
    margin-top: -5px;
    margin-right: 30px;
    font-family:'B Nazanin';
    font-weight:bolder;
}

.contact h4 {
    color: white;
}

.contact i {
    padding-right: 10px;
    color: red;
}

.title-footer h4 {
    text-align: right;
    font-size: 13px;
    color: #f4ba33;
    margin-right: 130px;
    margin-top: 30px;
}

.about h1 {
    text-align: right;
    color: black;
}

.darkgray {
    background-color: rgba(0, 0, 0, 0.15);
    /*background-color: #F0EF18;*/
    border-radius: 5px;
    box-shadow:5px 10px 18px #222222;
}

/***************************************** small slider********************************************************************/
#thumbnail-slider {
    margin: 0 auto; /*center-aligned*/
    width: 100%;
    max-width: 1100px;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}

    #thumbnail-slider div.inner {
        /*the followings should not be changed */
        position: relative;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }

        #thumbnail-slider div.inner ul {
            /*the followings should not be changed */
            white-space: nowrap;
            position: relative;
            left: 0;
            top: 0;
            list-style: none;
            font-size: 0;
            padding: 0;
            margin: 0;
            float: left !important;
            width: auto !important;
            height: auto !important;
        }

    #thumbnail-slider ul li {
        display: inline-block;
        margin-top: 20px;
        margin-bottom: 90px;
        margin-left: -30px;
        margin-right: -30px; /* Spacing between thumbs*/
        -webkit-transform: scale(0.9);
        transform: scale(0.9); /*Note: The scale down will increase the spacing between slides. You can set negative margins as did above to roll back the spacing. */
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        box-sizing: content-box;
        text-align: center;
        vertical-align: middle;
        padding: 0;
        position: relative;
        list-style: none;
        backface-visibility: hidden;
        /*-webkit-filter: grayscale(100%);
        filter: grayscale(100%);*/
    }

        #thumbnail-slider ul li.active {
            -webkit-transform: scale(1.15);
            transform: scale(1.15); /*Note: if scale is greater than 1, the margin-top and margin-bottom in the selector "#thumbnail-slider li" must be set with a sufficient value so the enlarged image will be shown within the margins.*/
            background-color: transparent;
            /*-webkit-filter: initial;
        filter: initial;*/
        }

    #thumbnail-slider .thumb {
        width: 100%;
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        display: block;
        position: absolute;
        font-size: 0;
        cursor: inherit;
        -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255,255,255,0.4)));
        transition: all linear 0.4s;
    }
    /*-- Start 3D --*/
    #thumbnail-slider .thumb {
        -webkit-transform: perspective(500px) translateX(1px) translateZ(-30px) rotateY(30deg);
        transform: perspective(500px) translateX(1px) translateZ(-30px) rotateY(30deg);
    }

    #thumbnail-slider .active .thumb {
        -webkit-transform: translateX(0px) translateZ(0px) rotateY(0deg);
        transform: translateX(0px) translateZ(0px) rotateY(0deg);
    }

    #thumbnail-slider li.active ~ li .thumb {
        -webkit-transform: perspective(500px) translateX(-1px) translateZ(-30px) rotateY(-30deg);
        transform: perspective(500px) translateX(-1px) translateZ(-30px) rotateY(-30deg);
    }
/*-- End 3D --*/

/* --------- navigation controls ------- */
/* The nav id should be: slider id + ("-prev", "-next", and "-pause-play") */

#thumbnail-slider-pause-play {
    display: none;
}
/*.pause*/
#thumbnail-slider-prev, #thumbnail-slider-next {
    display: none;
}
.fr .darkgray {
    background-color: rgba(0, 0, 0, 0.15);
    /*background-color: #F0EF18;*/
    border-radius: 0px!important;
    box-shadow:none!important;
}
.fr .caption {
    overflow: hidden; /* Prevent text overflow */
    text-overflow: ellipsis; /* Add ellipsis (...) for overflowed text */
    white-space: normal;
    background-color: #f0ef18b4 !important;
    min-height: 100px !important;
    margin-top: 42% !important
}
.fr .thumbnail{
    border:0!important
}
.fr .thumb  {
border-radius:10px 10px 0 0!important

}
.inline-start {
    float: inline-start !important
}
@media(min-width:200px) and (max-width:767px){
.seeall{
    margin-top:30px!important;
    margin-left:50px!important
}
}

/*.fr .inner ul li{
width:400px!important


}*/
.lightgreen {
    background-color: rgba(24, 141, 23, 0.40);
    /*background-color: #F0EF18;*/
    border-radius: 5px;
    box-shadow: 5px 10px 18px #222222;
}

.lightblue {
    background-color: rgba(63, 170, 248, 0.40);
    /*background-color: #F0EF18;*/
    border-radius: 5px;
    /*min-height: 300px;*/
}

.darkblue {
    background-color: rgba(4, 15, 81, 0.15);
    /*background-color: #F0EF18;*/
    border-radius: 5px;
    
    box-shadow: 5px 10px 18px #222222;
}

.lightred {
    background-color: rgba(211, 4, 4, 0.40);
    /*background-color: #F0EF18;*/
    border-radius: 5px;
    
    box-shadow: 5px 10px 18px #222222;
}

.lightgray {
    margin-top: 20px;
    min-height: 50px;
    background-color: rgba(128, 128, 128, 0.15);
    /*background-color: #F0EF18;*/
    /*padding:30px;*/
}

.yellow {
    background-color: rgba(244, 234, 51, 0.32);
    /*background-color: #F0EF18;*/
    border-radius: 5px;
}

.about {
    direction: rtl;
    /*margin-right: 250px;*/
}

    .about p {
        color: black;
        text-align: justify;
        padding: 10px;
        line-height: 2;
        font-size: 1.4em;
    }

    .about a {
        color: darkred;
        text-decoration: none;
    }

.about-body h3 {
    text-align: right;
    color: black;
}

hr {
    border-color: darkred;
}

.task-title h3 {
    text-align: right;
    font-weight: bold;
    color: black;
}


.task-body p {
    color: black;
    text-align: justify;
    padding: 10px;
    line-height: 2;
    direction: rtl;
}

.projects-title h3 {
    text-align: right;
    font-weight: bold;
    color: black;
    margin-right: 20px;
}

.caption h4 {
    text-align: justify;
    padding: 5px;
    line-height: 1.5;
    direction: rtl;
    color: black;
}
.caption {
    min-height:170px;
}
.thumbnail {
    position: relative;
    padding: 0;
    margin-bottom: 20px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border-color: transparent;
}

    .thumbnail img {
        width: 100%;
    }



.tar {
    text-align: right;
}

.about-content {
    padding: 10px;
    color: #f4ba33;
}

.mgt10 {
    margin-top: 10px;
}

.mgt50 {
    margin-top: 50px;
}
.mgb50 {
    margin-bottom: 50px;
}
.mgt100 {
    margin-top: 100px;
}.mgb100 {
    margin-bottom: 100px;
}
.my-icon {
    position: absolute;
}

.gray {
    background-color: #9b9696;
    padding: 10px;
}

.box-body {
    background-color: #3faaf8;
    text-align: right;
    padding: 10px;
}

.box-head {
    text-align: center;
    color: #d93030
}

.red {
    height: 700px;
    background-color: #dc0e0e;
}

.blue {
    height: 700px;
    background-color: dodgerblue;
}



/*--menu start--*/
body {
    box-sizing: border-box;
}
/* Advanced Checkbox Hack */
body {
    -webkit-animation: bugfix infinite 1s;
    -moz-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
    from {
        padding: 0;
    }

    to {
        padding: 0;
    }
}

input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

label {
    display: none;
    cursor: pointer;
    user-select: none;
}

/* background for li / select */
/* custom-dropdown */
#navmenu {
    position: relative;
    z-index: 9999;
}
/*nav {
    position: absolute;
    top: 100%; 
    left: 0;
    width: 100%;
    background-color: #ffffff; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    display: none; 
    transition: all 0.3s ease; 
}*/
nav[role="navigation"] {
    position: relative ;
    width: 100%;
    transition: all 0.3s ease;
    z-index: 9999;
   
}
    nav[role="navigation"].fixed-nav {
        position: fixed!important;
        top: 0;
        width: 100%;
    }

    nav[role="navigation"] a,
    nav[role="navigation"] label {
        color: #f4ba33;
        text-decoration: none;
        font: 1.4em yekan;
        transition: color .3s ease-in-out;
    }

    nav[role="navigation"] ul {
        padding: 0;
        margin: 0;
        width: 100%;
        list-style: none;
        display: flex; /* Use flexbox */
        justify-content: center;
        flex-direction: row-reverse;
        
        overflow: hidden;
    }
       
        nav[role="navigation"] ul > li {
            float: right;
            padding: .55em .55em;
            width: 16%;
            background-color: black;
            text-align: center;
            transition-timing-function: ease;
            box-shadow: 0 0.05em 0.25em 0 rgba(0, 0, 0, 0.35);
            cursor: pointer;
        }

            nav[role="navigation"] ul > li:first-child {
                border-bottom-right-radius: 35px;
            }

            nav[role="navigation"] ul > li:last-child {
                border-bottom-left-radius: 35px;
            }

            nav[role="navigation"] ul > li:hover {
                background-color: #222121;
                color: #fff;
                box-shadow: 0 0.05em 0.25em 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2em rgba(0, 0, 0, 0.3);
                border-radius: 20px, 0;
            }

                nav[role="navigation"] ul > li:hover > a {
                    color: #fff;
                }

/* small screens */
@media screen and (max-width: 44em) {
    html,
    body {
        margin: 0;
    }
    .contact{
        margin-top:60px!important
    }
    nav[role="navigation"] {
        position: fixed;
        top: 0;
        width: 100%;
    }
        nav[role="navigation"] ul {
            display: none;
            transition: max-height .50s ease;
            max-height: 0px;
        }

        nav[role="navigation"] label {
            position: relative;
            display: block;
            width: 100%;
            min-height: 3.25em;
            padding: .45em;
            font-size: 1.1em;
            margin: 0;
            border-bottom: 1px solid #f4ba33;
            background-color: black;
        }

    nav[role="navigation"] label:before {
        position: absolute;
        right: .25em;
        top: 0;
        content: "\2261";
        font-size: 1.4em;
        color: #f4ba33!important;
    }

nav[role="navigation"] ul > li:first-child, nav[role="navigation"] ul > li:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

        nav[role="navigation"] input[type=checkbox]:checked ~ ul.open {
            max-height: 500px;
        }

        nav[role="navigation"] input[type=checkbox]:checked ~ ul.closed {
            max-height: 0; /* Set max-height to 0 when closed */
        }

nav[role="navigation"] input[type=checkbox]:checked ~ label:before {
    color: #222;
}

        nav[role="navigation"] input[type=checkbox]:checked ~ ul {
            display: block;
            max-height: 500px;
        }

nav[role="navigation"] input[type=checkbox]:checked ~ ul > li {
    width: 100%;
    opacity: 1;
    text-align: right;
}

/*nav[role="navigation"] input[type=checkbox]:checked ~ ul > li::before {
     position: absolute;
     right: .25em;
     content: "\203A";
     font: bold 1.4em sans-serif;
     direction: rtl;
     margin-right:90%;
}*/
}
/*<!--menu end--!>*/


/*<!------------------------------------------------contact page-----------------------------------------------------------!>*/
.contact-page  {
    min-height:500px;
}
.contact-page .contact-title h4 {
    color: black;
    direction: rtl;
    font-weight:bolder;
}
.contact-page .email-title h4 {
    color: black;
    direction: rtl;
    font-weight: bolder;
}
.contact-page .email-body h3 {
    color: black;
    direction: rtl;
    text-align:center;
    padding:20px;
    
}
    .contact-page .email-body {
        box-shadow: 5px 10px 18px #222222;
        border-radius: 5px;
    }
.contact-page .contact-title{
    margin-top: 30px;
}

.contact-page .contact-body {
    color: black;
    direction: rtl;
    padding: 30px;
    padding-right:50px;
    font-size:larger;
    font-weight:bold;
    box-shadow:5px 10px 18px #222222;
    border-radius:5px;
}
.contact-page .contact-title hr {
    border-color:black;
}
.contact-page .lightgreen {
    background-color: rgba(24, 141, 23, 0.40);
    /*background-color: #F0EF18;*/
    border-radius: 5px;
    min-height: 100px;
    box-shadow: 5px 10px 18px #222222;
}
.contact-page .lightred{
    min-height:70px;
}

/*<!------------------------------------------------contact page-----------------------------------------------------------!>*/

/*<!------------------------------------------------about-us page-----------------------------------------------------------!>*/
.Aboutus-page {
    min-height: 500px;
}
.Aboutus-page .About-title h4 {
    color: black;
    direction: rtl;
    font-weight: bolder;
    font-size:x-large;
}


.Aboutus-page .About-title {
    margin-top: 30px;
}

.Aboutus-page .About-body {
    color: black;
    direction: rtl;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
    box-shadow:5px 10px 18px #222222;
    border-radius:5px;
}
.Aboutus-page .About-body p {
    text-align:justify;
    line-height:2;
    padding:10px;
}
.Aboutus-page .About-title hr {
    border-color:black;
}
.Aboutus-body .lightred{

}

/*<!------------------------------------------------about-us page-----------------------------------------------------------!>*/


/*<!------------------------------------------------RESPONSIVE-----------------------------------------------------------!>*/

@media (max-width: 350px) and (min-width: 0px) {
.title-head h4 {
    font-size: 10px;
}
.title-body h1 {
    font-size:30px;
}
.title-footer h4 {
    
    margin-right: 40px;
    
}

.image-box-head img {
    margin-left: 11%;
    height: 100%;
    width: 8%;
}

.image-box-head {
    margin-top: 15px;
    text-align:center;
}

.image-box-body {
    margin-left: 30px;
    text-align:center;
}

.image-box-body img {
    max-height: 80%;
    max-width: 30%;
    
}
.task-title h3{
    font-size:15px;
}
.projects-title h3{
    font-size:15px;
    
}



}
@media (max-width: 501px) and (min-width: 351px) {
.title-body h1 {
    font-size:30px;
}
.title-footer h4 {
    
    margin-right: 100px;
    
}

.image-box-head img {
    margin-left: 9%;
    height: 100%;
    width: 9%;
}

.image-box-head {
    margin-top: 15px;
    text-align:center;
}

.image-box-body {
/*    background-color: black;
*/    margin-left: 30px;
    text-align:center;
}

.image-box-body img {
    max-height: 40%;
    max-width: 30%;
    
}
.task-title h3{
    font-size:20px;
}
.projects-title h3{
    font-size:20px;
    
}
}



@media (max-width: 767px) and (min-width: 502px) {
.title-body h1 {
    font-size:30px;
}
.title-footer h4 {
    
    margin-right: 100px;
    
}

.image-box-head img {
    margin-left: 6%;
    height: 100%;
    width: 8%;
}

.image-box-head {
    margin-top: 15px;
    text-align:center;
}

.image-box-body {
    margin-left: 30px;
    text-align:center;
}

.image-box-body img {
    max-height: 100%;
    max-width: 25%;
    
}


}
.carousel-inner {
    border-radius: 15px !important;
}
.carousel-control {
    border-radius: 15px !important;
}


@media (max-width: 991px) and (min-width: 768px) {
    .title-body h1 {
    font-size: 30px;
}
.title-footer h4 {
    
    margin-right: 80px;
    
}
.image-box-head img {
    margin-left: 0;
    height: 50%;
    width: 40%;
}

.image-box-head {
    margin-top: 15px;
    text-align:center;
}

.image-box-body {
    text-align:center;
}

.image-box-body img {
    max-height: 100%;
    max-width: 100%;
}
}




.footeratlas {
    min-height: 325px;
    background-image: url(../uploads/images/dark.png);
    border-top: 3px solid #f29e5d;
   
}

.contact-title, .address-title h4 {
    color: #f4ba33;
    direction: rtl;
}

.contact-title, .address-title {
    margin-top: 30px;
}

.contact-body, .address-body, .site-menu-body {
    color: /*#f4ba33*/ white;
    direction: rtl;
    padding: 10px;
}

.site-menu-body a {
    text-decoration: none;
    color: #f4ba33;
    line-height: 2;
}

.site-menu-body {
    margin-top: 40px;
}

.site-menu-body a:hover {
    color: gray;
}

.contact-title hr, .address-title hr {
    border-color: #f4ba33;
}

.developer-box a {
    text-decoration: none;
    color: white;
}

.developer-box {
    margin-top: 20px;
}







@media (min-width: 1200px) {
    .lightgreen {
        min-height: 300px;
    }

    .darkblue {
        min-height: 300px;
    }

    .lightred {
        min-height: 300px;
    }
}
@media (min-width: 991px) and (max-width: 1200px) {
    .lightgreen {
        min-height: 400px;
    }

    .darkblue {
        min-height: 400px;
    }

    .lightred {
        min-height: 400px;
    }
}