* {
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: auto;
}

h3 {
    margin-bottom: 2rem;
}

header {
    line-height: 1.75;
    height: 100%;
    background-color: #DC2626;
    color: #f8f8f8;
}

.container {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.5;
    margin: 0 auto;
    padding: 5%;
}


/* Series of <span>'s with colors that fade out */
span {
    height: 18px;
    width: 100%;
}

    span:nth-of-type(1) {
        background-color: #F87171;
        box-shadow: 0 0 12px 2px #F87171; /* adds blur to smooth color transitions */
        margin-top: -2px; /* layers it on top of the previous <span> */
    }

    span:nth-of-type(2) {
        opacity: .8;
        background-color: #FECACA;
        box-shadow: 0 0 12px 2px #FECACA;
        margin-top: -2px;
    }

    span:nth-of-type(3) {
        opacity: .6;
        background-color: #FEF2F2;
        box-shadow: inset 0 0 12px 2px #FEF2F2;
        margin-top: -2px;
    }

section {
    overflow: hidden;
    height: 100%;
}

#section1 {
    background-color: #fff;
}

#section2 {
    background-color: #F59E0B;
    padding: 5%;
    transform: skew(0, -2deg); /* makes the section slanted/skewed */
}

    #section2 h3, #section2 p {
        transform: skew(0, 2deg); /* eliminates skew on container's text elements */
    }

#section3 {
    background-color: #1F2937;
    height: 100%;
    color: #f2f2f2;
    margin-top: -5%;
    padding-top: 8%;
    padding-bottom: 8%;
    overflow: hidden;
}

svg {
    overflow: hidden;
    margin-top: -4rem;
    margin-left: -1rem;
    z-index: 1000;
}

#section4 {
    background-color: #F9FAFB;
    margin-top: -10%;
    padding-top: 10%;
    padding-bottom: 12%;
}

/* Wavy background for footer */
.footer-bg {
    background-color: #7F1D1D;
    position: relative;
    margin-top: -18%;
    overflow: hidden;
    z-index: 100;
    height: 300px;
    clip-path: polygon(0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%, 100% 100%, 0% 100%);
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.5;
    height: 200px;
    margin-top: -5px;
    background-color: #7F1D1D;
    color: #fff;
}

@media screen and (max-width: 1024px) {
    .container {
        width: 90vw;
        padding: 5% 5px;
    }

    header, section {
        height: 100%;
    }

        header .container {
            float: none;
            text-align: center;
            padding: 5% 5px;
        }

    #section2 {
        padding: 0 5px;
    }

    #section3 {
        margin-top: -8%;
        padding-bottom: 20%;
    }

    #section4 {
        padding-bottom: 20%;
    }

    .footer-bg {
        height: 200px;
        margin-top: -30%;
    }
}

@media screen and (max-width: 400px) {
    .footer-bg {
        margin-top: -35%;
    }
}








/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

@font-face {
    font-family: Poppins-Regular;
    src: url('../fonts/poppins/Poppins-Regular.ttf');
}

@font-face {
    font-family: Poppins-Bold;
    src: url('../fonts/poppins/Poppins-Bold.ttf');
}

@font-face {
    font-family: Poppins-Medium;
    src: url('../fonts/poppins/Poppins-Medium.ttf');
}

@font-face {
    font-family: Montserrat-Bold;
    src: url('../fonts/montserrat/Montserrat-Bold.ttf');
}

/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}


@media print {
    .card-title h4,
    .card-title a,
    .form-group h6 {
        display: block !important; /* برای اطمینان از نمایش اطلاعات */
    }

    /* اگر می‌خواهید مطمئن شوید که بخشی از وب‌سایت بدون هیچ گونه تغییر هم بنا به صلاحدید قابل چاپ باشد */
    body, html {
        display: block !important; /* برای اطمینان از این که همه قسمت‌ها قابل چاپ باشند */
    }

    body {
        margin: 0;
        padding: 0;
        overflow: hidden; /* جلوگیری از اسکرول */
    }

    table {
        width: 100%; /* عرض جدول به 100% */
        page-break-inside: auto; /* جلوگیری از جدا شدن جدول */
        border-collapse: collapse; /* ترکیب مرزها */
    }

    th, td {
        border: 3px solid black; /* مرز سلول‌ها */
        padding: 1rem; /* padding برای خوانایی بهتر */
        text-align: right; /* راستچین برای متن فارسی */
    }

    tr {
        page-break-inside: avoid; /* جلوگیری از شکست جدول در چاپ */
    }

    /* بهینه‌سازی برای ساختار و اندازه */
    .dt-print-view {
        width: 100%;
        zoom: 0.8; /* این مقدار را مطابق با نیازهای خود تنظیم کنید */
    }
}

body, html {
    height: 100%;
    font-family: Poppins-Regular, sans-serif;
}

@media (min-width: 320px) and (max-width: 679px) {
    .sidebar {
        top: 50px;
    }
}


/*---------------------------------------------*/
a {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
}

    a:focus {
        outline: none !important;
    }

    a:hover {
        text-decoration: none;
        color: #57b846;
    }

/*---------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    margin: 0px;
}

p {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
}

ul, li {
    margin: 0px;
    list-style-type: none;
}


/*---------------------------------------------*/
input {
    outline: none;
    border: none;
}

textarea {
    outline: none;
    border: none;
}

    textarea:focus, input:focus {
        border-color: transparent !important;
    }

        input:focus::-webkit-input-placeholder {
            color: transparent;
        }

        input:focus:-moz-placeholder {
            color: transparent;
        }

        input:focus::-moz-placeholder {
            color: transparent;
        }

        input:focus:-ms-input-placeholder {
            color: transparent;
        }

        textarea:focus::-webkit-input-placeholder {
            color: transparent;
        }

        textarea:focus:-moz-placeholder {
            color: transparent;
        }

        textarea:focus::-moz-placeholder {
            color: transparent;
        }

        textarea:focus:-ms-input-placeholder {
            color: transparent;
        }

input::-webkit-input-placeholder {
    color: #999999;
}

input:-moz-placeholder {
    color: #999999;
}

input::-moz-placeholder {
    color: #999999;
}

input:-ms-input-placeholder {
    color: #999999;
}

textarea::-webkit-input-placeholder {
    color: #999999;
}

textarea:-moz-placeholder {
    color: #999999;
}

textarea::-moz-placeholder {
    color: #999999;
}

textarea:-ms-input-placeholder {
    color: #999999;
}

/*---------------------------------------------*/
button {
    outline: none !important;
    border: none;
    background: transparent;
}

    button:hover {
        cursor: pointer;
    }

iframe {
    border: none !important;
}


/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
    font-family: Poppins-Regular;
    font-size: 13px;
    line-height: 1.5;
    color: #999999;
}

.txt2 {
    font-family: Poppins-Regular;
    font-size: 13px;
    line-height: 1.5;
    color: #666666;
}


/*//////////////////////////////////////////////////////////////////
[ login ]*/

.limiter {
    width: 100%;
    margin: 0 auto;
}

.container-login100 {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: #d8d7d9;
    background-image: url("/login/img/interior-view-steel-factory.jpg");
    background-size: cover; /* تصویر را به طور کامل پوشش می‌دهد */
    background-position: center; /* تصویر را در مرکز قرار می‌دهد */
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .container-login100 {
        background-size: cover; /* اطمینان از پوشش کامل تصویر در دستگاه‌های کوچک */
    }
}

@media (max-width: 480px) {
    .container-login100 {
        padding: 10px; /* کاهش padding برای دستگاه‌های بسیار کوچک */
    }
}

.container-login101 {
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-image: url("/login/img/almas.png");
    background-repeat: no-repeat;
    opacity: 100;
}


.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wrap-login100 {
    width: 960px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 177px 130px 33px 95px;
}

/*------------------------------------------------------------------
[  ]*/
.login100-pic {
    width: 316px;
}

    .login100-pic img {
        max-width: 100%;
    }


/*------------------------------------------------------------------
[  ]*/
.login100-form {
    width: 290px;
}

.login100-form-title {
    font-family: Poppins-Bold;
    font-size: 24px;
    color: #333333;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    display: block;
    padding-bottom: 54px;
}


/*---------------------------------------------*/
.wrap-input100 {
    position: relative;
    width: 75%;
    z-index: 1;
    margin-bottom: 10px;
}

.input100 {
    font-family: Poppins-Medium;
    font-size: 15px;
    line-height: 1.5;
    color: #666666;
    display: block;
    width: 100%;
    background: #e6e6e6;
    height: 50px;
    border-radius: 25px;
    padding: 0 30px 0 68px;
}


/*------------------------------------------------------------------
[ Focus ]*/
.focus-input100 {
    display: block;
    position: absolute;
    border-radius: 25px;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 0px 0px;
    color: rgba(87,184,70, 0.8);
}

.input100:focus + .focus-input100 {
    -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
    animation: anim-shadow 0.5s ease-in-out forwards;
}

@-webkit-keyframes anim-shadow {
    to {
        box-shadow: 0px 0px 70px 25px;
        opacity: 0;
    }
}

@keyframes anim-shadow {
    to {
        box-shadow: 0px 0px 70px 25px;
        opacity: 0;
    }
}

.symbol-input100 {
    font-size: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    position: absolute;
    border-radius: 25px;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 35px;
    pointer-events: none;
    color: #666666;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.input100:focus + .focus-input100 + .symbol-input100 {
    color: #57b846;
    padding-left: 28px;
}

/*------------------------------------------------------------------
[ Button ]*/
.container-login100-form-btn {
    width: 75%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
}

.login100-form-btn {
    font-family: Montserrat-Bold;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    text-transform: uppercase;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    background: #333333;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

    .login100-form-btn:hover {
        background: #57b846;
    }



/*------------------------------------------------------------------
[ Responsive ]*/



@media (max-width: 992px) {
    .wrap-login100 {
        padding: 177px 90px 33px 85px;
    }

    .login100-pic {
        width: 35%;
    }

    .login100-form {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .wrap-login100 {
        padding: 100px 80px 33px 80px;
    }

    .login100-pic {
        display: none;
    }

    .login100-form {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .wrap-login100 {
        padding: 100px 15px 33px 15px;
    }
}


/*------------------------------------------------------------------
[ Alert validate ]*/

.validate-input {
    position: relative;
}

.alert-validate::before {
    content: attr(data-validate);
    position: absolute;
    max-width: 70%;
    background-color: white;
    border: 1px solid #c80000;
    border-radius: 13px;
    padding: 4px 25px 4px 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 8px;
    pointer-events: none;
    font-family: Poppins-Medium;
    color: #c80000;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

.alert-validate::after {
    content: "\f06a";
    font-family: FontAwesome;
    display: block;
    position: absolute;
    color: #c80000;
    font-size: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 13px;
}

.alert-validate:hover:before {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 992px) {
    .alert-validate::before {
        visibility: visible;
        opacity: 1;
    }
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spinner {
    margin: 20px auto;
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#clock {
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: -1px;
    margin-top: -6px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}