/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

@media only screen and (max-width: 480px){
    * {
    }
    html {
    }
    .html.light::-webkit-scrollbar {
        display: none;
    }
    .html.dark::-webkit-scrollbar {
        display: none;
    }
    .html::-webkit-scrollbar-thumb {
        display: none;
    }
    .body {
    }
    .body.dark {
    }
    .body::after {
    }
    .body.light::after {
        background: url('../media/backGroundMobile.png');
        background-size: cover;
    }
    .body.dark::after {
        background: url('../media/backGroundDarkMobile.png');
        background-size: cover;
    }
    .body.dark::after {
    }
    /* ======================================= */
    /* Navbar */
    .navContainer {
        width: 0;
        border: none !important;
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
        overflow: hidden;
    }
    .navContainer.activate {
        width: 90%;
        border-right: 10px solid var(--navSkyBlue);
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
    }
    .navContent {
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
    }
    /* Logo Detailes */
    .logoInfo {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
    }
    .logoImg {
        width: 100px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        margin: 0;
    }
    .logoTitle {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin: 0;
        letter-spacing: 5px;
    }
    .logoTitle p {
        margin: 0;
    }
    .navMobileMenu {
        display: none;
        width: 65px;
        height: 25px;
        margin: auto 10px;
        -webkit-box-pack: space-evenly;
            -ms-flex-pack: space-evenly;
                justify-content: space-evenly;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        cursor: pointer;
    }
    .navContainer.activate .navMobileMenu{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .navMobileMenu span {
        width: 55%;
        height: 5px;
        margin: auto;
        border-radius: 5px;
        background-color: var(--grayWhite);
    }
    /* Website Sections */
    .ulContainer {
    }
    .ulContainer ul {
    }
    .ulContainer ul li {
    }
    .ulContainer ul li.clicked {
    }
    .ulContainer ul li a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        /* margin-right: 15%; */
    }
    .ulContainer ul li.clicked a {
    }
    .ulContainer ul li.clicked a::before {
        /* left: 51px; */
    }
    .ulContainer ul li.clicked a::after {
        /* left: 51px; */
    }
    .ulContainer ul li a .icon {
        margin: 0;
    }
    .ulContainer ul li a .fa-file-text {
        -webkit-transform: translateX(-5px);
            -ms-transform: translateX(-5px);
                transform: translateX(-5px);
    }
    .ulContainer ul li a .title {
        display: block;
    }
    /* Dark Mood Controls */
    .darkModeContainer {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .darkModeContainer #light, 
    .darkModeContainer #dark {
        height: 50px;
        padding: 0;
    }
    .darkModeContainer .clicked {
    }
    .darkMode {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
    .dateTime {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
    }
    .dateTime .date {
        display: block;
    }
    /* ======================================= */
    /* Main Content */
    .mainContainer {
        width: 100%;
    }
    .mainContainer.activate {
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
        overflow-y: hidden;
    }
    /* Top Bar */
    .mainContainer .topBar {
        width: 100%;
        padding: 0 10px;
    }
    .topBar .logo {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .topBar.activate .logo {
        visibility: hidden;
    }
    .mainContainer .topBar .logo img {
        display: block;
    }
    .mainContainer .topBar .forLightDesktop,
    .mainContainer .topBar .forDarkDesktop {
        display: none;
    }
    .topBar .forLightMobile,
    .topBar .forDarkMobile {
        display: block;
    }
    .mainContainer .topBar .forLightMobile {
        display: block;
    }
    .mainContainer.dark .topBar .forLightMobile {
        display: none;
    }
    .mainContainer .topBar .forDarkMobile {
        display: none;
    }
    .mainContainer.dark .topBar .forDarkMobile {
        display: block;
    }
    .mainContainer .topBar .logo img {
        width: 2.5em;
        height: 2.5em;
        margin: 0;
    }
    .topBar .search {
        margin: 0;
    }
    .topBar.activate .search {
        visibility: hidden;
    }
    .search .searchContainer {
    }
    .topBar .search input {
        width: 15em;
    }
    .topBar .search input::-webkit-input-placeholder {
    }
    .topBar .search input::-moz-placeholder {
    }
    .topBar .search input:-ms-input-placeholder {
    }
    .topBar .search input::-ms-input-placeholder {
    }
    .topBar .search input::placeholder {
    }
    .topBar .search i {
    }
    .menuMobile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 25px;
        height: 25px;
    }
    .mainContainer .topBar .menuMobile span {
        background-color: var(--navSkyBlue);
    }
    .mainContainer.dark .topBar .menuMobile span {
        background-color: var(--grayWhite);
    }
    .topBar.activate .menuMobile {
        display: none;
    }
    /* ======================================= */
    /* Home Page */
    .homePage,
    .sectionsPage,
    .lastNewsPage,
    .contactPage {
        /* overflow: hidden; */
    }
    .mainContainer.dark .homePage {
    }
    .homeContent {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .homeContent div {
    }

    /* Home Info Section */
    .homeContent .homeInfo {
        width: 100%;
        height: 35%;
        top: 5%;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        margin-top: 0;
    }
    .homeInfo .homeLogoImg,
    .homeInfo .homeInfoTitle, 
    .homeInfo .homeBtns {
    }

    /* Logo */
    .mainContainer.light .homeInfo .light {
    }
    .mainContainer.light .homeInfo .dark {
    }
    .mainContainer.dark .homeInfo .light {
    }
    .mainContainer.dark .homeInfo .dark {
    }
    .homeInfo .homeLogoImg {
        height: 28%;
    }
    .homeInfo .homeLogoImg img {
        width: 50%;
    }

    /* Title */
    .homeInfo .homeInfoTitle {
    }
    .homeInfoTitle h6 {
        font-size: 1.5em;
    }
    .homeInfoTitle .Eng {
    }
    .mainContainer.light .homeInfoTitle .Eng {
    }
    .mainContainer.dark .homeInfoTitle .Eng {
    }
    .mainContainer.light .homeInfoTitle h6 {
    }
    .mainContainer.dark .homeInfoTitle h6 {
    }
    .mainContainer.light .homeInfoTitle h6 span {
    }
    .mainContainer.dark .homeInfoTitle h6 span {
    }
    .homeInfoTitle p {
        font-size: 0.85em;
        text-align: center;
    }
    .mainContainer.light .homeInfoTitle p {
    }
    .mainContainer.dark .homeInfoTitle p {
    }

    /* Action Call Btns */
    .homeInfo .homeBtns {
        width: 100%;
        height: 20%;
        margin-top: 5px;
    }
    .homeBtns a {
        height: 30px;
        font-size: 1em;
    }
    .mainContainer.light .homeBtns a {
        background: var(--navSkyBlue);
        border: 1px solid var(--navSkyBlue);
    }
    .mainContainer.dark .homeBtns a {
        background: -o-linear-gradient(315deg, rgba(53,53,53,1) 60%, rgba(22,22,22,1) 150%);
        background: linear-gradient(135deg, rgba(53,53,53,1) 60%, rgba(22,22,22,1) 150%);
        border: 1px solid #333;
    }
    .homeBtns div:hover {
    }
    .homeBtns div a {
    }
    .homeBtns div:hover a {
    }

    /* Home Background Section  */
    .homeContent .homeBackDesign {
        width: 85%;
        height: 60%;
        bottom: 0;
    }
    .homeBackDesign .svgContainer {
        width: 80%;
        height: 65%;
    }
    .svgContainer img {
    }
    .homeContent .homeBackDesign img {
    }
    .mainContainer.light .svgContainer .light {
    }
    .mainContainer.light .svgContainer .dark {
    }
    .mainContainer.dark .svgContainer .light {
    }
    .mainContainer.dark .svgContainer .dark {
    }
    /* ============================================== */

    /* Sections page */
    .sectionsPage {
    }
    .sectionsContent {
        width: 100%;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }
    .mainContainer.light .sectionsContent {
    }
    .mainContainer.dark .sectionsContent {
    }
    .sectionsContent::-webkit-scrollbar {
    }
    .mainContainer.light .sectionsContent::-webkit-scrollbar-thumb {
    }
    .sectionsInfo {
        height: 80px;
        margin-bottom: 0;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }
    .sectionsInfo div {
    }
    .infoContent {
        height: 60px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .infoContent h3 {
        font-size: 1em;
        margin-bottom: 0;
    }
    .infoContent p {
        font-size: 0.75em;
        display: none;
    }
    .mainContainer.light .infoContent {
    }
    .mainContainer.dark .infoContent {
    }
    .websiteControls {
        width: 75%;
        top: 25%;
    }
    .websiteControls a {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    .websiteControls a:hover {
    }
    .mainContainer.light .websiteControls a {
    }
    .mainContainer.dark .websiteControls a {
    }

    .sectionsContainer {
        -ms-grid-columns: (calc(100%/2))[2];
        grid-template-columns: repeat(2, calc(100%/2));
    }
    .section {
    }
    .mainContainer.light .section {
    }
    .mainContainer.dark .section {
    }
    .section:hover {
    }
    .section::before {
    }
    .section:hover::before {
    }
    .mainContainer.dark .section::before {
    }
    .mainContainer.dark .section:hover::before {
    }

    .section .shap {
        font-size: 2.5em;
        height: 25%;
    }
    .mainContainer.light .section .shap {
    }
    .mainContainer.dark .section .shap {
    }
    .section .description {
        height: 60%;
        font-size: 1.25em;
    }
    .mainContainer.light .section .description {
    }
    .mainContainer.dark .section .description {
    }
    .description .sectionTitle {
        font-size: 0.75em;
    }
    .description .sectionDescription {
        line-height: 25px;
        font-size: 0.65em;
    }
    .section .actionCallBtn {
    }
    .actionCallBtn a {
        font-size: 0.5em;
    }
    .actionCallBtn a:hover {
    }
    .mainContainer.light .actionCallBtn a {
    }
    .mainContainer.dark .actionCallBtn a {
    }

    /* ============================== */
    .subjectsContainer {
    }
    .subjectsContainer .backBtn, 
    .subjectsContainer .contentContainer {
    }
    .subjectsContainer .backBtn {
        transform: translateY(-25%);
    }
    .backBtn .btnShape {
    }
    .backBtn .btnShape:hover {
    }
    .backBtn .btnTitle {
        font-size: 1em;
    }
    .mainContainer.light .backBtn .btnShape {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    .mainContainer.light .backBtn .btnTitle {
    }
    .mainContainer.dark .backBtn .btnShape {
    }
    .mainContainer.dark .backBtn .btnTitle {
    }
    .subjectsContainer .contentContainer {
    }
    .mainContainer.light .subjectsContainer .contentContainer {
    }
    .mainContainer.dark .subjectsContainer .contentContainer {
    }
    .contentContainer .sectionDetail, 
    .contentContainer .subjectsContent, 
    .contentContainer .subjectsControls {
    }
    .contentContainer .sectionDetail {
    }
    .sectionDetail .sectionImg {
        font-size: 2em;
        transform: none;
    }
    .mainContainer.light .sectionDetail .sectionImg {
    }
    .mainContainer.dark .sectionDetail .sectionImg {
    }
    .sectionDetail .sectionControls {
    }
    .mainContainer.light .sectionDetail .sectionControls {
    }
    .mainContainer.dark .sectionDetail .sectionControls {
    }
    .sectionControls a {
        width: 45px;
        height: 45px;
        border-radius: 10px;
    }
    .mainContainer.light .sectionDetail .sectionControls a {
    }
    .mainContainer.dark .sectionDetail .sectionControls a {
    }
    .sectionControls a:hover {
    }
    .sectionControls p {
        width: 150px;
        font-size: 0.75em;
    }
    .mainContainer.dark .sectionControls p {
    }

    .subjectsContent {
    }
    .subjectsContent .subjects {
        padding: 15px;
        overflow-y: scroll;
    }

    .subjectsControls {
    }
    .subjectsControls .pageNum {
        width: 40px;
        height: 40px;
    }
    .subjectsControls a {
        width: 45px;
        height: 45px;
        border-radius: 10px;
    }
    .subjectsControls a:hover {
    }
    .mainContainer.light .subjectsControls a {
    }
    .mainContainer.dark .subjectsControls a {
    }


    /* ============================================================================= */
    /* Last News Page */
    .lastNewsPage {
    }
    .lastNewsContent {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }
    .mainContainer.light .lastNewsContent {
    }
    .mainContainer.dark .lastNewsContent {
    }
    .lastNewsContent::-webkit-scrollbar {
    }
    .mainContainer.light .lastNewsContent::-webkit-scrollbar-thumb {
    }
    .lastNewsInfo {
        width: 100%;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .lastNewsInfo div {
    }

    .lastNewsContainer {
        width: 100%;
        padding: 7px;
        margin-top: 5%;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .lastNewsSection {
        width: 100%;
        height: 90%;
        margin: 0;
    }
    .lastNewsDetail {
    }
    .mainContainer.light .lastNewsSection {
    }
    .mainContainer.dark .lastNewsSection {
    }

    .lastNewsDetail {
    }

    .lastNewsImg {
    }
    .mainContainer.light .lastNewsImg {
    }
    .mainContainer.dark .lastNewsImg {
    }
    .lastNewsControls {
        width: 82%;
    }
    .mainContainer.light .lastNewsControls {
    }
    .mainContainer.dark .lastNewsControls {
    }
    .lastNewsControls i {
    }
    .lastNewsControls i:hover {
    }
    .mainContainer.light .lastNewsControls i {
    }
    .mainContainer.dark .lastNewsControls i {
    }
    .lastNewsSecContent {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }
    .lastNewsSecContent.activate {
    }
    .lastNewsSecContent .subInfo {
        height: 11%;
        top: -8.5%;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .lastNewsSecContent .subInfo .subImg {
        font-size: 1.5em;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }
    .lastNewsSecContent .subInfo .subTitle {
    }
    .mainContainer.light .lastNewsSecContent .subInfo .subImg {
    }
    .mainContainer.dark .lastNewsSecContent .subInfo .subImg {
    }
    .mainContainer.dark .lastNewsSecContent .subInfo .subTitle {
    }
    .lastNewsSecContent .subContent {
        width: 98%;
        margin-top: 10%;
    }
    .mainContainer.dark .lastNewsSecContent .subContent {
    }

    .lastNewsSecIcons {
    }
    .lastNewsSecIcons i {
    }
    .lastNewsSecIcons .IT,
    .lastNewsSecIcons .LIN {
    }
    .lastNewsSecIcons .DB,
    .lastNewsSecIcons .WIN {
    }
    .lastNewsSecIcons .NET,
    .lastNewsSecIcons .CPP {
    }
    .mainContainer.light .lastNewsSecIcons i {
    }
    .mainContainer.dark .lastNewsSecIcons i {
    }
    .lastNewsSecIcons i:hover {
    }
    .mainContainer.light .lastNewsSecIcons i.activate {
    }
    .mainContainer.dark .lastNewsSecIcons i.activate {
    }

    .lastNewsSecContent .subContent {
    }
    table {
        padding: 25px 0;
    }
    .mainContainer.light table {
    }
    .mainContainer.dark table {
    }
    table thead {
        font-size: 0.75em;
        height: 45px;
    }
    table th,
    table td {
    }
    .mainContainer.dark table th,
    .mainContainer.dark table td {
    }
    table tr {

    }
    .mainContainer.light table thead {
    }
    .mainContainer.dark table thead {
    }
    table thead th {
    }
    table tbody tr {
        height: 20px;
    }
    .mainContainer.light table tbody tr:nth-child(even) {
    }
    .mainContainer.dark table tbody tr:nth-child(even) {
    }
    tbody .subTitle {
    }
    tbody .subTitle a {
        font-size: 1.25em;
    }
    .mainContainer.light table tbody .subTitle a,
    .mainContainer.light table tbody td {
    }
    .mainContainer.dark table tbody .subTitle a,
    .mainContainer.dark table tbody td {
    }
    table .subWriter,
    table .subDate {
    }
    table .subWriter {
    }
    table .subDate {
    }

    .subActionCall {
        width: 50%;
        height: 30px;
        left: 50%;
        bottom: 7%;
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
    }
    .mainContainer.light .subActionCall {
    }
    .mainContainer.dark .subActionCall {
    }
    .subActionCall:hover {
    }

    .contactPage {
    }
    .contactPageInfo {
        width: 100%;
        padding-top: 0;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .contactPage .contactContainer {
        width: 95%;
    }
    .contactContainer .contactMsg {
        width: 100%;
        left: 0;
        top: 20%;
        height: 80%;
    }
    .mainContainer.light .contactContainer .contactMsg {
    }
    .mainContainer.dark .contactContainer .contactMsg {
    }
    .contactMsg .msgContent {
        width: 100%;
        padding-top: 62%;
    }
    .msgContent h3 {
        display: none;
    }
    .mainContainer.dark .msgContent h3 {
    }
    .msgContent .inputBox {
        margin: 10px 0;
    }
    .clintName {
    }
    .clintName div {
    }
    .msgContent form {
    }
    .msgContent form span {
    }
    .mainContainer.dark .msgContent form span {
    }
    .msgContent form input,
    .msgContent form textarea {
    }
    .msgContent form textarea {
        height: 25%;
    }
    .mainContainer.light .msgContent form input,
    .mainContainer.light .msgContent form textarea {
    }
    .mainContainer.dark .msgContent form input,
    .mainContainer.dark .msgContent form textarea {
    }
    .msgContent form textarea {
    }
    .msgContent form textarea::-webkit-scrollbar {
    }
    .msgContent form textarea::-webkit-scrollbar-thumb {
    }
    .mainContainer.light .msgContent form textarea::-webkit-scrollbar-thumb {
    }
    .mainContainer.dark .msgContent form textarea::-webkit-scrollbar-thumb {
    }
    .msgContent form button[type="submit"] {
        position: relative;
        bottom: 0%;
        left: 32%;
    }
    .msgContent form button[type="submit"]:hover {
    }
    .mainContainer.light .msgContent form button[type="submit"] {
    }
    .mainContainer.dark .msgContent form button[type="submit"] {
    }
    .contactContainer .contactCard {
        width: 90%;
        top: 0px;
        right: 5%;
        height: 35%;
    }
    .mainContainer.light .contactContainer .contactCard {
    }
    .mainContainer.dark .contactContainer .contactCard {
    }
    .contactCard .websiteInfo {
    }
    .websiteInfo a {
    }
    .websiteInfo a img {
        width: 80%;
    }
    h6 {
        font-size: 1.25em;
        margin: 15px;
    }
    h6 .highLine {
    }
    .mainContainer.dark h6 .highLine {
    }
    h6 .Eng {
    }

    .contactCard .contactInfo {
    }
    /* Home Contact Section */
    .homeContact {
    }
    .homeContact div {
    }
    .homeSocialCards {
    }
    .homeSocialCards div {
    }
    .homeSocialCards div:hover {
    }
    .mainContainer.dark .homeSocialCards div {
    }
    .mainContainer.light .homeSocialCards div:hover, 
    .mainContainer.dark .homeSocialCards div:hover {
    }

    .homeSocialCards a {
    }
    .mainContainer.light .homeSocialCards a {
    }
    .mainContainer.dark .homeSocialCards a {
    }
    .mainContainer.light .homeSocialCards div:hover a {
    }
    .homeSocialCards div:hover.instagram {
    }
    .homeSocialCards div:hover.telegram {
    }
    .homeSocialCards div:hover.twitter {
    }
    .twitter {
    }

    .footer {
        width: 90%;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
    }
    .footer h6 {
    }
    .mainContainer.dark .footer h6 .highLine {
    }
    .footer .googleAdsense {
    }
    .footer .googleAdsense a {
        font-size: 0.8em;
        margin: 5px;
    }
    .footer .googleAdsense a:hover {
    }
    .footer p {
        text-align: center;
    }
    .footer p a {
    }
    
    /* Home Contact Section */
    .homeContact {
        width: 100%;
        bottom: 5%;
        z-index: 1;
    }
    .homeContact div {
    }
    .homeSocialCards {
    }
    .mainContainer.light .homeSocialCards div {
        border: 1px solid var(--grayWhite);
    }
    .homeSocialCards div:hover {
    }
    .homeSocialCards a {
    }
    .mainContainer.light .homeSocialCards a {
        color: var(--grayWhite);
    }
    .mainContainer.dark .homeSocialCards a {
    }
    .mainContainer.light .homeSocialCards div:hover a {
    }
    .homeSocialCards div:hover.instagram {
    }
    .homeSocialCards div:hover.telegram {
    }
    .homeSocialCards div:hover.twitter {
    }
    .twitter {
    }
}