.styled-text {

    font-size: 1.2rem;
    font-weight: bold;
    color: #ffffff; /* رنگ سفید متن */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* سایه متن تیره‌تر برای دیده شدن بهتر */
    padding: 2px;
    border-radius: 10px;
    border: 2px solid #00c3ff; /* حاشیه سفید برای تضاد بیشتر */
    transition: all 0.3s ease;
    
}
.styled-text:hover {
    color: #16ffc5; /* رنگ طلایی در حالت هاور */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}






.navbar {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e5e5e5;
}
.navbar .navbar-brand {
    font-size: 1.75rem;
    font-weight: bold;
    color: #007bff; /* رنگ آبی */
}
.navbar .navbar-brand:hover {
    color: #0056b3; /* رنگ آبی تیره برای حالت هاور */
}
.navbar .form-control {
    border-radius: 20px;
    margin-left:10px;
}
.navbar .btn-outline-success {
    border-radius: 20px;
}
.list-group-item a {
    color: #007bff; /* رنگ آبی */
}
.list-group-item a:hover {
    color: #0056b3; /* رنگ آبی تیره برای حالت هاور */
}
@media (max-width: 576px) {
    .navbar .navbar-brand {
        font-size: 1.2rem;
    }
    .navbar .form-control {
        margin-left: 0;
        max-width: 200px; /* Maximum width for small screens */
    }
}






.container-fluid {
    height: 100%;
}
.row {
    height: 100%;
}
.image-container {
    padding: 0;
    height: 100%;
}
.image-container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 15px; /* میزان گرد شدن لبه‌ها */
}
.text-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa; /* رنگ پس‌زمینه متن */
    padding: 20px;}



    .divf {
        font-family: Arial, sans-serif;
        background-color: #fcfeff;
        direction: rtl;
        text-align: right;
    }

    .toc {
        max-width: auto;
        margin: 10px;
        padding: 20px;
        border: 2px solid #30a6d4;
        border-radius: 10px;
        background-color: #ffffff;
    }

    .toc h2 {
        color: rgb(11, 166, 228);
        text-align: center;
        margin-bottom: 20px;
    }

    .toc ul {
        list-style-type: none;
        padding: 0;
        font-weight: 500;
    }

    .toc ul li {
        color: #05e951fa;
        font-size: 18px;
        margin: 10px 0;
    }

    .toc ul li a {
        color: #034bd1;
        text-decoration: none;
        transition: color 0.3s;
    }

    .toc ul li a:hover {
        color: #24a7a0;
    }



    .containertext {
        max-width: auto;
        margin: auto;
      }
      .box {
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin: 15px;
      }
      .box img {
        width: 100%;
        height: auto;
      }
      .box .text {
        padding: 16px;
        text-align: center;
      }









      .divexample {
        font-family: 'Arial', sans-serif;
        direction: rtl;
        background-color: #f3f3f3;
        color: #333;
        padding: 10px;
        
    }

    .containera {
        background-color: #fff;
        border-radius: 8px;
        padding: 10px;
        box-shadow:0 2px 4px  rgba(0, 0, 0, 0.1);

        
    }

    h1 {
        color: #2c3e50;
        font-size: 24px;
        border-bottom: 2px solid #2c3e50;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .p {
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .simple-explanation {
        font-weight: bold;
        color: #2980b9;
    }

    .example {
        background-color: #ecf0f1;
        padding: 10px;
        border-left: 4px solid #2980b9;
        margin-top: 20px;
        border-radius: 5px;}











        .content-container {
            background-color: #ffffff;
            border-radius: 10px;
            padding: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: auto;
            margin: 0 auto;
        }

        .main-title {
            color: #2980b9;
            font-size: 26px;
            border-bottom: 2px solid #2980b9;
            padding-bottom: 10px;
            margin-bottom: 20px;
            text-align: center;
        }

        .text-paragraph {
            margin-bottom: 20px;
            color: #555;
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .section-header {
            font-weight: bold;
            color: #3498db;
            margin-top: 30px;
            font-size: 22px;
            border-bottom: 1px solid #3498db;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }

        .bullet-list {
            margin-bottom: 20px;
            padding-left: 20px;
            color: #555;
            font-weight: bold;
            
        }

        .bullet-list li {
            margin-bottom: 10px;
            font-size: 16px;
        }

        .highlight-box {
            background-color: #ecf0f1;
            border-left: 5px solid #2980b9;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .highlight-box p {
            margin: 0;
            color: #333;
        }


    






        .content-box {
            background-color: #ffffff;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: auto;
            margin: 0;
        }

        .main-title {
            color: #000000;
            font-size: 28px;
            border-bottom: 3px solid #254ec0;
            padding-bottom: 10px;
            margin-bottom: 20px;
            text-align: center;
        }

        .paragraph {
            margin-bottom: 20px;
            color: #555;
            font-size: 16px;
            font-weight: bold;
            line-height: 1.6;
        }

        .section-title {
            font-weight: bold;
            color: #3498db;
            margin-top: 30px;
            font-size: 22px;
            border-bottom: 1px solid #254ec0;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }

        .list {
            margin-bottom: 20px;
            padding-left: 20px;
            color: #555;
            font-weight: bold;
            line-height: 1.6;
        }

        .list li {
            margin-bottom: 10px;
            font-size: 16px;
        }

        .quote-box {
            background-color: #f9e79f;
            border-left: 5px solid #f39c12;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .quote-box p {
            margin: 0;
            color: #000000;
            font-weight: bold;
        }

        .highlight-title {
            color: #2980b9;
            font-size: 25px;
            font-weight: bold;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 20px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }

        .person{
            color: #117ac0;
            text-shadow: #555;
            font-size: x-large;
            font-weight: 600;


        }







        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            width: 50px; /* افزایش عرض آیکون‌ها */
            height: 50px; /* افزایش ارتفاع آیکون‌ها */
            background-color: rgba(10, 66, 178, 0.679); /* تغییر رنگ پس‌زمینه آیکون‌ها */
            border: 2px solid rgb(8, 11, 169); /* افزودن حاشیه سفید */
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* افزودن سایه */
            border-radius: 50%; /* گرد کردن دکمه‌ها */
            opacity: 0.7; /* کاهش شفافیت */
            background-size: 100% 100%; /* تنظیم اندازه تصویر سفارشی در صورت استفاده */
        }
        
        /* حالت هاور برای دکمه‌ها */
        .carousel-control-prev-icon:hover,
        .carousel-control-next-icon:hover {
            background-color: rgba(7, 11, 242, 0.8); /* تغییر رنگ هنگام قرار گرفتن موس روی دکمه‌ها */
            border-color: yellow; /* تغییر رنگ حاشیه هنگام هاور */
            opacity: 1; /* افزایش شفافیت هنگام هاور */
        }
        
        







        .review-box {
            max-width: auto;
            padding: 20px;
            margin: 20px auto;
            border: 2px solid #3498db;
            border-radius: 8px;
            text-align: center;
            background-color: #e0f7fa; /* هایلایت آبی کمرنگ */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .review-box h1 {
            margin: 0;
            font-size: 24px;
            color: #333;
            font-weight: bold;
        }
        .arrow-icon {
            margin-top: 10px;
            font-size: 24px;
            color: #3498db;
        }
        .info-guide {
            margin-top: 20px;
            font-size: 16px;
            color: #0f0f0f;
            text-align: right;
        }
        .info-guide h2 {
            font-size: 18px;
            margin-bottom: 10px;
            color: #3498db;
            font-weight: bold;
            text-align: center;
        }
        .info-guide ul {
            list-style-type: none;
            padding: 0;

        }
        .info-guide ul li {
            margin-bottom: 10px;
            padding: 5px;
            border-left: 4px solid #3498db;
            background-color: #f9f9f9;
            border-radius: 4px;
            font-size: 15px;
            
        }
        .info-guide ul li strong {
            color: #3498db;
        }











        .contact-box {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: right; 
            position:relative;
            width: 100%;
            box-sizing: border-box;
            }
        .contact-box i {
            font-size: 1.5rem;
            color: #007bff;
            margin-left: 10px;
        }
        .contact-box a {
            text-decoration: none;
            color: #343a40;
        }
        .contact-box a:hover {
            text-decoration: underline;
            color: #007bff;
        }
        .enamad-box {
            margin-top: 20px;
            text-align: center;
            padding-top: 10px;
            border-top: 1px solid #dee2e6;
        }
        .enamad-box img {
            width: 100px;
            height: auto;
        }
        .enamad-box a {
            display: inline-block;
            text-decoration: none;
        }









        .moving-text-container {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
            position: relative;
            margin-bottom: 10px;


            background: linear-gradient(to right, #00aaff, #0047ab); /* رنگ‌های مختلف آبی */
            color: white;
            text-align: center;
            padding: 10px 0; /* کاهش پدینگ */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* سایه کمتر */
        }

        .moving-text {
            display: inline-block;
            animation: move 8s linear infinite;
            color:#ffffff;


            margin: 0;
            font-size: 1.5em; /* کاهش اندازه فونت */
            letter-spacing: 0.5px; /* کاهش فاصله بین حروف */

        }

        @keyframes move {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(-100%);
            }
        }













        .body1 {
            margin: 0;
            padding: 0;
            padding-bottom: 60px; /* ارتفاع فوتر */
        }
        .icon-row {
            display: flex;
            justify-content: center;
            gap: 10px; /* فاصله بین آیکن‌ها */
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #f5f5f5;
            padding: 1px 0;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);

            z-index: 1000; /* برای اطمینان از نمایش در بالای سایر محتویات */
        }
        .icon-container {
            text-align: center;
            flex: 1 1 100px; /* تنظیم عرض قابل تغییر برای آیکن‌ها */
        }
        .icon-container i {
            font-size: 2rem; /* تغییر اندازه آیکن برای موبایل */
            background: linear-gradient(45deg, #00f, #0ff); /* رنگ گرادینت آبی */
            -webkit-background-clip: text;
            color: transparent;
        }
        .icon-container p {
            margin-top: 5px; /* کاهش فاصله بین آیکن و متن */
            font-size: 1rem; /* اندازه فونت برای موبایل */
        }
        .icon-container a{
            text-decoration: none;
        }
        @media (max-width: 768px) {
            .icon-row {
                gap: 8px; /* فاصله کمتر برای صفحات کوچکتر */
            }
            .icon-container i {
                font-size: 1.8rem; /* تغییر اندازه آیکن برای صفحه‌های کوچکتر */
            }
            .icon-container p {
                font-size: 0.9rem; /* اندازه فونت برای صفحه‌های کوچکتر */
            }
        }
        @media (max-width: 576px) {
            .icon-row {
                gap: 5px; /* فاصله کمتر برای صفحات بسیار کوچکتر */
            }
            .icon-container i {
                font-size: 1.5rem; /* تغییر اندازه آیکن برای صفحه‌های کوچکتر */
            }
            .icon-container p {
                font-size: 0.8rem; /* اندازه فونت برای صفحه‌های کوچکتر */
            }
        }


        .nostyle{

            text-decoration: none;
            color: inherit;
        }




        .header-text {
            color: #000;
            font-size: 1.5rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
        }
        .card-container .card-header {
            background-color: #ffffff;
            color: #000;
            display: flex;
            align-items: center;
            justify-content: space-between; /* تغییر از flex-end به space-between */
            border-bottom: 2px solid #007bff;
            padding: 10px;
        }
        .card-container .card-header i {
            font-size: 30px;
            color: #007bff;
        }
        .card-container .card-body {
            padding: 0;
        }
        .card-container .card-body img {
            width: 100%;
            height: auto;
        }
        .card-container .card-body p {
            font-size: 0.9rem;
            margin-top: 10px;
            color: rgb(219, 11, 11);
            font-weight: bold;
        }
        .card-container .card-footer {
            display: flex;
            justify-content: flex-start;
        }
        .card-container .btn {
            margin-top: 10px; /* اضافه کردن فضای بالای دکمه */
        }
        .card-container {
            margin-bottom: 20px;
        }













        .scroll-top-btn {
            position: fixed;
            bottom: 160px;
            left: 10px;      
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 50px;
            font-size: 16px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: background-color 0.3s ease;
            z-index: 1000;
        }
    
        .scroll-top-btn i {
            margin-right: 10px;
        }
    
        .scroll-top-btn:hover {
            background-color: #0056b3;
        }













        

        

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.8); /* Optional: Adds a light background */
        }

        .loader {
            width: 100px; /* Increased size */
            aspect-ratio: 1;
            display: grid;
            animation: l14 4s infinite;
        }

        .loader::before,
        .loader::after {    
            content: "";
            grid-area: 1/1;
            border: 12px solid; /* Increased border width */
            border-radius: 50%;
            border-color: red red #0000 #0000;
            mix-blend-mode: darken;
            animation: l14 1s infinite linear;
        }

        .loader::after {
            border-color: #0000 #0000 blue blue;
            animation-direction: reverse;
        }

        @keyframes l14 { 
            100% { transform: rotate(1turn) }
        }

        /* Hide loader after 2 seconds */
        .hidden {
            display: none;
        }