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

body {
    font-family: sans-serif;
    text-align: center;
    background-image: url(images/body.jpg);
    background-color: #f1f9ff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    direction: rtl;
}

.claerfix{
    clear: both;
}
.header{
    display: flex;
    justify-content: space-between;
    height: 330px;
    align-items: center;
    padding: 0 20px;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(0,76,149,1) 41%, rgba(0,212,255,1) 100%);
}

/* هدر */
header img {
    width: 80%;
    height: auto;
    align-items:center;
}
.left-img {
    width: 30%;
}
.right-img {
    width: 30%;
    align-items:right,
}

        /* تنظیمات ریسپانسیو */
        @media screen and (max-width: 768px) {
            .header {
                min-height: auto;
            }
            .center-img{
                width: 80%;
            }

            .left-img, .right-img {
                
                width: 80%;
                max-width: 100px;
            }
        }

        @media screen and (max-width: 480px) {
            .header {
                padding: 10px;
                gap: 10px;
                height: 198px;
            }

            .left-img, .right-img, .center-img {
                width: 90%;
            }
        }

        /* تنظیمات بزرگ‌تر از دسکتاپ */
        @media screen and (min-width: 1200px) {
            .header {
                padding: 40px;
            }}
/* چیدمان فلکس‌باکس برای بخش‌های علمی */
.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 20px;
}

.box {
    width: 200px;
    background: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.box img {
    width: 100%;
    border-radius: 5px;
}

.box p {
    margin-top: 10px;
    font-weight: bold;
}

/* منوی اصلی */


/**اول صفحه**/

.cotainer{
    width: 100%;
    height: 458px;
    display: flex;
    justify-content: space-between;
}
.left{
    display: flex;
    flex-direction: column;
    margin-left: 63px; 
    margin-top: -11px;
    align-items: self-end;
}
.left img{
    background-color: #0353c4c9;
    max-width: 100%;
    opacity: 1;
    height: 120px;
    margin-top: 15px;
    padding: 4px;
    border-radius: 13px;
    box-shadow: 1px 1px 3px 2px #242426f7;
}

.left img:hover{
    background-color: #00000050;
}
.right{
    width: 74%;
    display: flex;
    margin-right: 53px;
    height: 400px;
    margin-top: 2px;
    margin-left: 17px;
   
}

.right img{
     width: 100%;
    height: 405px;
    border-radius: 19px;
    box-shadow: 1px 1px 6px 4px #242426f7;

}

.abzar{
    width: 30%;
    background-color: #342626;
    margin: 8px;
    height: 900px;
    
}

button:hover {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
}

.boxs{
    background-color: #eff3f7;
    width: 656px;
    margin-left: 40px;
    height: 400px;
    border-radius: 15px;
    overflow-y:auto;
    box-shadow: 1px 1px 6px 4px #58575cd4;
}
.boxs h1{
    font-family:'B Titr Bold' ;
    background-color: #1e56a4;
    color: #ffffff;
    font-size: 31px;
    text-align: center;
}
.boxs p{
    font-family: 'sahel-bold';
    font-size: 18px;
    margin: 4px;
    margin-top: 10px;
    text-align: center;
}
/***معرفی انجمن*/

.main-info-sites2{
    width: 95%;
    height: 410px;
    display: flex;
    margin-top: 30px;
    border-radius:  130px 0px 0px 130px ;
    background: #eef1f3;
    box-shadow: 1px 1px 3px 2px #cdc1fcd4;
    align-items: flex-start;
}

.left1 img {  /*تصویر دختر*/
    width: 507px;
    margin-top: 61px;
}
.left2 img{
    width: 577px;
    margin-top: 5px;

}

.right1 {  /*باکس توضیح  انجمن*/
    display: flex;
    height: 432px;
    width: 813px;
    margin-top: 37px;
    margin-right: 46px;

}
.right1 p{
    font-family: 'sahel-bold';
    color: rgb(93, 26, 155);
    margin-top: 39px;
    font-size: 21px;
    line-height: 2;
}
.right2 {  /*باکس آزمون  انجمن*/
    display: flex;
    height: 432px;
    width: 813px;
    margin-top: 37px;
    margin-right: 46px;

}
.right2 p{
    font-family: 'sahel-bold';
    color: rgb(93, 26, 155);
    margin-top: 39px;
    font-size: 21px;
    line-height: 2;
}

/****باکس های وسط تصویر***/
.img-titr {
    width: 85%;
    height: 350px;
    padding: 10px 10px;
    direction: rtl;
    margin: 20px ;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    border-radius: 120px 0px ;
    background:#fff;
    background-size: 100%;
    box-shadow: 1px 1px 6px 4px #5c5c5cd4;
}
.img-titr img{
    width: 300px;
}
.img-titr img:hover{
    box-shadow: 0 0 12px rgb(109, 44, 0);
    border-radius: 10px;
}
/****فونت h1***/
.font-1{
    font-family: 'b baran';
    font-size: 30px;
    margin: 0px 110px;
    margin-top: 60px;
    text-align: center;
    background: linear-gradient(90deg, rgba(9,9,121,1) 0%, rgb(14, 160, 163) 0%, rgb(113, 186, 255) 100%);
    border-radius: 50px;
    color: #f0f5ff;
    box-shadow:1px 2px 5px #000;
    width: 30%;
    margin-left: auto;

}
/*بوتون ها اسلایدی*/
.new-post{
    box-shadow: 1px 1px 6px 4px #5c5c5cd4;
    background: #fff;
    width: 96%;
    height: 521px;
    padding: 10px 10px;
    direction: rtl;
    margin: 30px 0;
    margin-left: 10px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
    border-radius: 5px;
    overflow-y: auto;
    position: relative;
    white-space: nowrap;
    
}
.new-post-card{
    background: rgb(9,9,121);
    background: linear-gradient(90deg, rgba(9,9,121,1) 0%, rgba(16,200,204,1) 0%, rgba(209,231,252,1) 100%);
    width: 23%;
    height: 480px;
    border-radius: 8px;
    padding: 10px 10px;
    direction: rtl;
    margin: 0px 10px;
    display: inline-block; 
    transform: translateX(100%,);
    animation: slideRight 20s linear infinite; /* حرکت پیوسته */   
}
.new-post-card:hover{   /****وقتی موس میره روش***/
    background: rgb(164, 169, 197);
}

.new-post-pic{
    width: 100%;
    height: 300px;
    margin-left: 8px;
    border-radius: 8px;
    display: inline-block;
}
.new-post-pic img{
    width: 100%;
    height: 400px;
}
.new-post-pic h2{
    font-family: 'rey black';
    font-size: 20px;
    text-align: center;
    padding: 10px;
    text-emphasis: none;
    color: #013112;
}

button {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 24px;
}


/****بوتون تصاویر ***/

.new-post2{
    box-shadow: 1px 1px 6px 4px #5c5c5cd4;
    width: 96%;
    height: 450px;
    padding: 15px 10px;
    display: inline-block;
    background: #fff;
    margin-top: 27px;
    position: relative;
    white-space: nowrap;
    border-radius: 70px 0;
}

.new-post-pic2{
    width: 100%;
    border-radius: 8px;
    display: inline-block;
    text-align: right;
    overflow-y: auto;
}
.new-post-pic2 img{
    width: 625px;
    height: 353px;
    display: inline-block;
    direction: rtl;
    margin: 7px;
    margin-top: 28px;
}

/***معرفی سایت ها**/

.img-info-sites{
    width: 100%;
    height: 18px;
    display: inline-block;
    padding: 0px 10px;
    direction: rtl;
    background: transparent
}

.img-info-sites img{
    width: 600px;
    margin-top: 96px;
}
.main-info-sites{
    display: flex;
    margin-top: 30px;
    border-radius: 0px 130px 130px 0px;
    background: #eef1f3;
    box-shadow: 1px 1px 6px 4px #cdc1fcd4;
    align-items: flex-start;
    width: 95%;
    margin-right: auto;
}
.info-sites{
   padding: 10px 10px;
   margin: 12px;
    width: 638px;
    margin-top: 20px;
    border-radius: 10px;
    border: 3px dotted black;
    flex-direction: column;
    display: flex;
    background-color: #fff;
}
.info-sites p1{
    display: inline-block;
    margin-top: 3px;
    margin-bottom: 40px;
    background: #bbe8cb;
    width: 100%;
    font-family: 'B Titr Bold';
    font-size: 30px;
    border-radius: 14px;
    margin: 10px 10;
}
.info-sites-titr p{
    direction: rtl;
    padding-top: 10px;
    text-align: right;
    font-family: 'Noor nazanin';
    font-weight: bold;
    font-size: 16px;
    border-bottom: 1px solid rgb(3, 108, 55);
}

.bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        .b-example-divider {
            width: 100%;
            height: 3rem;
            background-color: rgba(0, 0, 0, .1);
            border: solid rgba(0, 0, 0, .15);
            border-width: 1px 0;
            box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
        }

        .b-example-vr {
            flex-shrink: 0;
            width: 1.5rem;
            height: 100vh;
        }

        .bi {
            vertical-align: -.125em;
            fill: currentColor;
        }

        .nav-scroller {
            position: relative;
            z-index: 2;
            height: 2.75rem;
            overflow-y: hidden;
        }

        .nav-scroller .nav {
            display: flex;
            flex-wrap: nowrap;
            padding-bottom: 1rem;
            margin-top: -1px;
            overflow-x: auto;
            text-align: center;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }

        .btn-outline-secondary {
            --bs-btn-color: #6c757d;
            --bs-btn-border-color: #6c757d;
            --bs-btn-hover-color: #fff;
            --bs-btn-hover-bg: #6c757d;
            --bs-btn-hover-border-color: #6c757d;
            --bs-btn-focus-shadow-rgb: 108, 117, 125;
            --bs-btn-active-color: #fff;
            --bs-btn-active-bg: #6c757d;
            --bs-btn-active-border-color: #6c757d;
        }


.footer{ /*** فوترسایت***/
            color: white;
            background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(0,76,149,1) 41%, rgba(0,212,255,1) 100%);
            padding: 30px 20px;
            margin-top: 50px;
            box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        .footer-right {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .copyright-section {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .copyright-icon {
            width: 40px;
            height: 40px;
            margin-left: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.922);
            padding: 5px;
        }

        .copyright-text {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0;
            color: #ecf0f1;
            font-family:'sahel-bold';
        }

        .designer {
            font-size: 0.9rem;
            margin: 0;
            color: #bdc3c7;
            font-style: italic;
            margin-right: 40px;
            font-family: 'sahel';
        }

        .footer-left {
            display: flex;
            align-items: center;
        }

        .social-icons {
            display: flex;
            gap: 20px;
        }

        .social-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: white;
            transition: all 0.3s ease;
            padding: 10px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(5px);
        }

        .social-link:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }

        .social-icon {
            width: 30px;
            height: 30px;
            fill: currentColor;
            margin-bottom: 5px;
            transition: all 0.3s ease;
        }

        .social-link span {
            font-size: 0.8rem;
            font-weight: 500;
        }

        .social-link.eitaa:hover {
            background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
        }

        .social-link.instagram:hover {
            background: linear-gradient(135deg, #E1306C, #F77737, #FCAF45);
        }


@font-face{
    font-family: 'b nazanin','Neirizi';
    src: url(images/BNaznnBd.ttf) format('woff2'),
         url(images/BNaznnBd.ttf) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Neirizi';
    src: url(font/Neirizi.ttf) format('woff2'),
         url(font/Neirizi.ttf) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'B Titr Bold';
    src: url(font/B\ Titr\ Bold-.ttf) format('woff2'),
         url(font/B\ Titr\ Bold-.ttf) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Noor nazanin';
    src: url(font/Noor_Nazanin.ttf) format('woff2'),
         url(font/Noor_Nazanin.ttf) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rey black';
    src: url(font/Ray-Black.ttf) format('woff2'),
         url(font/Ray-Black.ttf) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'vazir';
    src: url(font/Vazir.ttf) format('woff2'),
         url(font/Vazir.ttf) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: 'sd';
    src: url(font/SD-Studio-Bold.ttf) format('woff2'),
         url(font/SD-Studio-Bold.ttf) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: 'b baran';
    src: url(font/BBaran.ttf) format('woff2'),
         url(font/BBaran.ttf) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: 'sahel-bold';
    src: url(font/Sahel-Bold.ttf) format('woff2'),
         url(font/Sahel-Bold.ttf) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: 'sahel-black';
    src: url(font/Sahel-Black.ttf) format('woff2'),
         url(font/Sahel-Black.ttf) format('woff');
    font-weight: normal;
    font-style: normal;
}


/* برای موبایل (کمتر از 768px) */
@media (max-width: 768px) {
  .container {
    flex-direction: column;  /* عناصر زیر هم می‌افتن */
  }
}
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
/**ریسپانسیو هدر**/
@media (max-width: 768px) {
 header{
    display: flex;
    height: 200px;
    align-items: center;
 }
    /* هدر */

.left-img img {
    width: 97%;
}
.center-img img{
    width: 162%;
}
.right-img img {
    opacity: 0;
}
}

/*ریسپانسیو منو*/
@media (max-width: 768px) {
/* منوی اصلی */
.menu {
    list-style: none;
    margin: 0;
    background:linear-gradient(#0e3475,#205cc2,#0f326f,#004494);
    display: flex;
    justify-content: center;
    
}

.menu ul li a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 15px;
    display: block;
    transition: 0.3s;
    font-family:'Noor nazanin';
    
}
.menu ul li ul{
   position: absolute;
   width: 115px;
   background:linear-gradient(#205cc2,#205cc2,#1a4a9d,#004494);
   top: 47px;
   box-shadow: 0px 1px 6px #342626;
   opacity: 0;
   visibility: hidden;
   transition: all .2s ease-out;
   display: block;
   border-radius: 10px;
   z-index: 9999;

}

}
/****ریسپانسیو اول صفحه**/
@media (max-width: 768px) {
  
/**اول صفحه**/

.cotainer{
    width: 100%;
    height: 692px;
    display: flex;
    flex-direction: column;
    margin-top: -19px;
}
.left{
    display: flex;
    flex-direction: row;
    margin: auto;
    align-items: center;
    margin-bottom: 37px;
    margin-top: 12px;
}
.left img{
    background-color: #0353c4c9;
    opacity: 1;
    height: 73px;
    border-radius: 13px;
    box-shadow: 1px 1px 3px 2px #242426f7;
}
.left img:hover{
    background-color: #00000050;
}
.right{
    width: 90%;
    display: flex;
    margin-right: 20px;
    height: 300px;
    margin-top: 2px;
}

.right img{
    height: 287px;
    border-radius: 19px;
}

.boxs{
    background-color: #eff3f7;
    width: 82%;
    height: 300px;
    border-radius: 15px;
    overflow-y:auto;
    margin: auto;
    box-shadow: 1px 1px 6px 4px #58575cd4;
}
.boxs h1{
    font-family:'B Titr Bold' ;
    background-color: #1e56a4;
    color: #ffffff;
    font-size: 28px;
}
.boxs p{
    font-family: 'sahel-bold';
    font-size: 16px;
    margin: 4px;
    margin-top: 10px;
}
 .font-1{
    font-size: 25px;
    margin: auto;
    margin-top: 50px;
    width: 90%;
}
}

@media (max-width: 320px){
    .left img{
        height: 60px;}
}


/***ریسپانسیو باکس معرفی انجمن**/
@media (max-width: 768px) {
.main-info-sites2{
    width: 95%;
    height: 210px;
    display: flex;
    margin-top: 19px;
    align-items: flex-start;  
}

.left1 img {  /*تصویر دختر*/
    width: 90%;
    margin-top: 48px;
}
.left2 img{
    width: 104%;
    margin-top: 5px;
}
.right1 {  /*باکس توضیح  انجمن*/
    display: flex;
    height: 200px;
    width: 230%;
    margin-top: 37px; 
}
.right1 p{
    margin-top: -26px;
    font-size: 6px;
}
.right2 {  /*باکس آزمون  انجمن*/
    display: flex;
    height: 200px;
    width: 416%;
    margin-top: 37px; 
}
.right2 p{
    margin-top: -26px;
    font-size: 0.4rem;
}
.new-post-pic{
    width: 100%;
    height: 217px;
}
}
@media(max-width:320px){
    .right1 p{
    font-size: 6px;
 }
 .new-post-pic{
    width: 100%;
    height: 217px;
}
}
/***ریسپانسیو باکس ها**/
@media (max-width: 768px) {
    /*بوتون ها اسلایدی*/
.new-post{
    width: 96%;
    height: 249px;
    margin-top: 18px;
}
.new-post-card{
    width: 51%;
    height: 240px;
    margin: 0px;
    margin-top: -4px;
}

.new-post-pic img{
    height: 195px;
}
.new-post-pic h2{
    font-size: 9px;
    padding: 2px;
    color: #03491b;
}
}


/***گالری تصاویر**/

@media (max-width: 768px) {
  .new-post2 {
    width: 90%;
    height: 230px;
    padding: 0px;
    margin-top: 17px;
    position: relative;
    white-space: nowrap;
    border-radius: 30px ;
    margin-right: 28px;
}
.new-post-pic2{
    width: 98%;
}
.new-post-pic2 img{
    width: 64%;
    height: 200px;
    margin: 2px;
    margin-top: 16px;
    border-radius: 12px;
}

.footer {
    width: 100%;
    height: 192%;
    margin-top: -4px;
    border-top-left-radius: 9%;
    border-top-right-radius: 9%;
}
}
        /* ریسپانسیو فوتر */
        @media screen and (max-width: 768px) {
            .footer {
                padding: 25px 15px;
                text-align: center;
                height: 205px;
            }

            .footer-content {
                flex-direction: column;
                gap: 20px;
            }

            .footer-right {
                align-items: center;
                order: 2;
            }

            .footer-left {
                order: 1;
            }

            .designer {
                margin-right: 0;
                margin-top: 5px;
            }

            .social-icons {
                gap: 30px;
            }
        }

        @media screen and (max-width: 480px) {
            .footer {
                padding: 20px 10px;
            }

            .copyright-text {
                font-size: 10px;
            }

            .designer {
                font-size: 0.8rem;
            }

            .social-icons {
                gap: 25px;
            }

            .social-link {
                padding: 8px;
            }

            .social-icon {
                width: 25px;
                height: 25px;
            }

            .social-link span {
                font-size: 0.7rem;
            }
        }