/*اسکرول بار رو مخفی میکنه*/
::-webkit-scrollbar {
    display: none;
}
a {
    text-decoration: none; 
    color: inherit;        
    cursor: pointer;       
}

@font-face {
    font-family: mahsa-black;
    src: url(../fonts/mahsa\ Black.ttf); 
}
@font-face {
    font-family: mahsa-bold;
    src: url(../fonts/mahsa\ bold.ttf);
}
@font-face {
    font-family: mahsa-regular;
    src: url(../fonts/mahsa\ Regular.ttf);
}
@font-face {
    font-family: typo1;
    src: url(../fonts/typokar-1\ .ttf);
}
@font-face {
    font-family: yekan1;
    src: url(../fonts/YekanBakh-ExtraBlack.ttf);
}
@font-face {
    font-family: yekan2;
    src: url(../fonts/YekanBakh-Bold.ttf);
}
@font-face {
    font-family: yekan3;
    src: url(../fonts/YekanBakh-SemiBold.ttf);
}
:root {
    --mahsa1: mahsa-black;
    --mahsa2: mahsa-bold;
    --mahsa3: mahsa-regular;
    --typo1: typo1;
    --yekan1: yekan1;
    --yekan2: yekan2;
    --yekan3: yekan3;
}
:root{
    --color1: #ffffff;
    --color2: #231f20;
    --color3: #747d8c;
    --color4: #0e9957;
    --color5: #00a693;
    --color6: #327071;
    --color7: #57c5c6;
    --color8: #d99058;
    --color9: #bcab99;
    --shadow-color: #000000;
}
body {
    margin: 0px;
    background-color: var(--color1);
    direction: rtl;
    text-align: right;

}


.shenavar{
    animation: float 4s ease-in-out infinite;
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/*عکس اصلی*/
#header_image_back1{
    width: 100%;
    height: 110dvh;
    overflow: hidden;
    position: relative;
    box-shadow: 0px 1dvh 2dvh -1dvh var(--shadow-color);
    margin-bottom: 5dvw;
}
#header_image_back2{
    width: 100%;
    height: 105%;
    background-image: url(../images/hagh2.webp);
    background-position: center center;
    background-size: cover;
}

/*بک گراند هدر*/
#header_background_color{
    z-index: 100;
    margin: 0;
    background-color: transparent;
    width: 100vw;
    height: 10vh;
    position: fixed;
    top: 0;        
    left: 0;       
    display: flex; 
    align-items: center; 
    box-shadow: none;
    transition: background-color 0.5s ease,
                box-shadow 0.3s ease;
}
#header_background_color.scrolled {
    background-color: var(--color1);
    box-shadow: 0px 1dvh 2dvh -2dvh var(--shadow-color);
}

/*حوزه علمیه آیت الله حق شناس*/
#header_logo_white, #header_logo_black{
    z-index: 101;
    width: 180px;
    height: 10dvh;
    align-items: center;
    overflow: hidden;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    transition: opacity 0.5s ease;
}
@media screen and (min-width: 300px){
    #header_logo_white, #header_logo_black{
        width: 200px;
    }
}
@media screen and (min-width: 400px){
    #header_logo_white, #header_logo_black{
        width: 250px;
    }
}
@media screen and (min-width: 500px){
    #header_logo_white, #header_logo_black{
        width: 300px;
    }
}
@media screen and (min-width: 570px){
    #header_logo_white, #header_logo_black{
        width: 400px;
    }
}
#header_logo_white img, #header_logo_black img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
}
#header_logo_black{
    opacity: 0;
    visibility: hidden;
}
 #header_background_color.scrolled #header_logo_black{
    opacity: 1;
    visibility: visible;
}

/*لوگو*/
#header_tarh_white, #header_tarh_black{
    z-index: 101;
    width: 40px;
    height: 10dvh;
    align-items: center;
    overflow: hidden;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translate(0, -45%);
    transition: opacity 0.5s ease;
}
@media screen and (min-width: 300px){
    #header_tarh_white, #header_tarh_black{
        width: 45px;
    }
}
@media screen and (min-width: 340px){
    #header_tarh_white, #header_tarh_black{
        width: 50px;
    }
}
@media screen and (min-width: 400px){
    #header_tarh_white, #header_tarh_black{
        width: 55px;
        left: 7px;
    }
}
@media screen and (min-width: 570px){
    #header_tarh_white, #header_tarh_black{
        width: 70px;
        left: 10;
    }
}
#header_tarh_white img, #header_tarh_black img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
}
#header_tarh_black{
    opacity: 0;
    visibility: hidden;
}
 #header_background_color.scrolled #header_tarh_black{
    opacity: 1;
    visibility: visible;
}

/*دکمه منو*/
#header_menu_white, #header_menu_black{
    z-index: 101;
    width: 25px;
    height: 10dvh;
    align-items: center;
    overflow: hidden;
    margin: auto;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translate(0, -50%);
    transition: opacity 0.5s ease;
}
@media screen and (min-width: 300px){
    #header_menu_white, #header_menu_black{
        width: 27px;
    }
}
@media screen and (min-width: 340px){
    #header_menu_white, #header_menu_black{
        width: 35px;
    }
}
@media screen and (min-width: 400px){
    #header_menu_white, #header_menu_black{
        width: 38px;
        right: 7px;
    }
}
@media screen and (min-width: 570px){
    #header_menu_white, #header_menu_black{
        width: 43px;
        right: 10;
    }
}
#header_menu_white img, #header_menu_black img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
}
#header_menu_black{
    opacity: 0;
    visibility: hidden;
}
 #header_background_color.scrolled #header_menu_black{
    opacity: 1;
    visibility: visible;
}


/*المان اول*/
#div1{
    background-color: var(--color1);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 0;
    row-gap: 8dvw;
}
#div1_header{
    display: flex;
    flex-direction: column;
}
#div1_header h1{
    margin: 0;
    font-family: var(--typo1);
    font-size: clamp(none, 8dvw, 70px);
    font-family: var(--typo1);
    color: var(--color6);
}
.div1_title{
    margin: 0 auto 0 auto;
    font-size: clamp(none, 8dvw, 70px);
    font-family: var(--typo1);
    color: var(--color6);
}
.div1_title h2{
    margin: 0;
    font-family: var(--typo1);
    font-size: clamp(none, 8dvw, 70px);
    font-family: var(--typo1);
    color: var(--color6);
}
#div1_header p{
    margin: 0;
    font-family: var(--yekan2);
    color: var(--color2);
}
.div1_p{
    margin: 0 auto 0 auto;
    max-width: 70dvw;
    text-align: center;
    font-size: clamp(5px, 3dvw, 20px);
    margin: 0 auto;
    font-family: var(--yekan2);
    color: var(--color2);

}
.div1_p p{
    margin: 0;
}


#div1_cart_container{
    display: flex;
    flex-direction: column;
    row-gap: 3dvw;
}
#div1_carts1{
    display: flex;
    flex-direction: row;
    margin: 0 0;
    justify-content: space-evenly;
}
#div1_carts2{
    display: flex;
    flex-direction: row;
    margin: 0 0;
    justify-content: space-evenly;
}
.div1_cart {
    width: 17dvw;
    aspect-ratio: 1 / 1;
    background-color: var(--color6);
    border-radius: 2dvw;
    box-shadow: 0px 0px 2dvw 0dvh var(--shadow-color);
    animation: wave-effect 2.5s infinite;
}
@keyframes wave-effect/*real-wave*/ {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.9); opacity: 0.7; }
}
#div1_cart11 { animation-delay: 0.25s; }
#div1_cart12 { animation-delay: 0.5s; }
#div1_cart13 { animation-delay: 0.75s; }
#div1_cart14 { animation-delay: 1s; }
#div1_cart24 { animation-delay: 1.25s; }
#div1_cart23 { animation-delay: 1.5s; }
#div1_cart22 { animation-delay: 1.75s; }
#div1_cart21 { animation-delay: 2s; }

#div1_cart11{
    background-image: url(../images/hagh\ black.png);
    background-position: center center;
    background-size: cover;
}
#div1_cart12{
    background-image: url(../images/hagh\ white.png);
    background-position: center center;
    background-size: cover;
}
#div1_cart13{
    background-image: url(../images/hagh\ black.png);
    background-position: center center;
    background-size: cover;
}
#div1_cart14{
    background-image: url(../images/hagh\ white.png);
    background-position: center center;
    background-size: cover;
}
#div1_cart15{
    background-image: url(../images/hagh\ black.png);
    background-position: center center;
    background-size: cover;
}
#div1_cart21{
    background-image: url(../images/hagh\ white.png);
    background-position: center center;
    background-size: cover;
}
#div1_cart22{
    background-image: url(../images/hagh\ black.png);
    background-position: center center;
    background-size: cover;
}
#div1_cart23{
    background-image: url(../images/hagh\ white.png);
    background-position: center center;
    background-size: cover;
}
#div1_cart24{
    background-image: url(../images/hagh\ black.png);
    background-position: center center;
    background-size: cover;
}
#div1_cart25{
    background-image: url(../images/hagh\ white.png);
    background-position: center center;
    background-size: cover;
}


#div1_gallery{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    row-gap: 5dvw;
}
#div1_gallery_big{
    width: 90dvw;
    aspect-ratio: 3 / 2;
    border-radius: 6dvw;
    background-image: url(../images/hagh3.webp);
    background-position: center center;
    background-size: cover;
    box-shadow: 0px 1dvh 2dvw -1dvh var(--shadow-color);
}
#div1_gallery_small{
    width: 90dvw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#div1_gallery_small1{
    width: 42.5dvw;
    aspect-ratio: 3 / 2;
    border-radius: 6dvw;
    background-image: url(../images/hagh\ white.png);
    background-position: center center;
    background-size: cover;
    box-shadow: 0px 1dvh 2dvw -1dvh var(--shadow-color);
}
#div1_gallery_small2{
    width: 42.5dvw;
    aspect-ratio: 3 / 2;
    border-radius: 6dvw;
    background-image: url(../images/hagh\ black.png);
    background-position: center center;
    background-size: cover;
    box-shadow: 0px 1dvh 2dvw -1dvh var(--shadow-color);
}


/*المان های بخش دوم*/
#div2{
    background-color: var(--color2);
    width: 100%;
    box-shadow: 0px -1dvh 2dvh -1dvh var(--shadow-color),
                0px 1dvh 2dvh -1dvh var(--shadow-color);
    z-index: 5;
    margin-top: 5dvw;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    row-gap: 7dvw;
    margin-top: 5dvw;
    height: max-content;
    padding-top: 5dvw;
    padding-bottom: 10dvw;
    box-sizing: border-box;
}
#div2_header{
    display: flex;
    flex-direction: column;
}
#div2_header h2{
    margin: 0;
    font-family: var(--typo1);
    font-size: clamp(none, 8dvw, 70px);
    color: var(--color7);
}
#div2_title{
    margin: 0 auto 0 auto;
}
#div2_header p{
    margin: 0;
    font-family: var(--yekan2);
    color: var(--color1);
}
#div2_p{
    margin: 0 auto 0 auto;
    max-width: 90dvw;
    text-align: center;
    font-size: clamp(5px, 3dvw, 20px);
}
#div2_div1{
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    justify-content: space-around;
    align-items: end;
    width: 100%;
}
#div2_image{
    width: 45dvw;
    overflow: hidden;
    position: relative;
}
#div2_image img{
    width: 100%;
    height: 100%;
}
#div2_div1_p{
    width: 40dvw;
    height: 100%;
    font-size: clamp(none, 1.5dvw, 10px);
    color: var(--color1);
    font-family: var(--yekan3);
    text-align: justify;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-evenly;
}
#div2_div1 h2{
    margin: 0;
    font-family: var(--yekan1);
    font-size: clamp(none, 4dvw, 70px);
    color: var(--color7);
}
#div2_div1 p{
    margin: 0;
    font-family: var(--yekan3);
    font-size: clamp(none, 1.5dvw, 20px);
    color: var(--color1);
}
.floating_icon{
    position: absolute;
    max-width: 3dvw;
    max-height: 3dvw;
    height: auto;
    z-index: 10;
    animation: floatAnimation 2s ease-in-out infinite;
}
@keyframes floatAnimation {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-1dvw);
    }
    100% {
        transform: translateY(0px);
    }
}
#div2_icon1{
    right: 80%;
    top: 20%;
}
#div2_icon2{
    right: 10%;
    top: 20%;
    animation-delay: 0.5s;
}
#div2_icon3{
    right: 30%;
    top: 5%;
    animation-delay: 1s;
}
#div2_icon4{
    right: 65%;
    top: 5%;
    animation-delay: 1.5s;
}
@media (orientation: portrait) {
  #div2_div1 {
    flex-direction: column; 
    align-items: center;
}
  #div2_image{
    width: 90dvw;

}
#div2_div1_p{
    width: 90dvw;
    align-items: center;
}
#div2_div1 h2{
    font-size: clamp(none, 8dvw, 30px);
}
#div2_div1 p{
    font-size: clamp(none, 4dvw, 15px);
}
.floating_icon{
    max-width: 5dvw;
    max-height: 5dvw;
}
}






/*اسکرول*/
.scroll-timeline-container {
  height: 350vh; 
  position: relative;
  background-color: #ffffff;
}
.sticky-box {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.anim-text {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.1s linear, transform 0.1s linear;
  margin: 0;
}
.text-one {
  font-size: clamp(none, 10vw, 60px);
  color: var(--color6);
  font-family: var(--mahsa1);
  margin-bottom: 25px;
}
.sub-text-container {
  position: relative;
  width: 100%;
  height: 40px; 
}
.text-two, .text-three {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: clamp(none, 6dvw, 30px);
  color: var(--color3);
  font-family: var(--mahsa3);
}





/*بخش اسلاید شو ثبت نام */
#div3 {
    background-color: var(--color2);
    width: 100%;
    margin-bottom: 5dvw;
    box-shadow: 0px -1dvh 2dvh -1dvh var(--shadow-color),
                0px 1dvh 2dvh -1dvh var(--shadow-color);
    z-index: 5;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    row-gap: 6dvw;
    height: max-content;
    padding-top: 8dvw;
    padding-bottom: 8dvw;
    box-sizing: border-box;
    overflow: hidden;
}
#div3_content {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}
#div3_content h2 {
    margin: 0;
    font-family: var(--typo1);
    font-size: clamp(none, 8dvw, 70px);
    color: var(--color7);
}
#div3_content p {
    margin: 15px auto 0 auto;
    max-width: 90dvw;
    font-family: var(--yekan2);
    color: var(--color1);
    font-size: clamp(5px, 3dvw, 20px);
    line-height: 1.7;
}
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    direction: ltr; 
}

.marquee-track {
    display: flex;
    width: max-content;
}

.marquee-item {
    width: 25dvh;
    height: 25dvh;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    margin: 0 10px; 
    border-radius: 3dvw;
    overflow: hidden;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
}

.marquee-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top-marquee .marquee-track {
    animation: scroll-left-infinite 25s linear infinite;
}

.bottom-marquee .marquee-track {
    animation: scroll-right-infinite 25s linear infinite;
}

@keyframes scroll-left-infinite {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); 
    }
}

@keyframes scroll-right-infinite {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}
@media (orientation: portrait) {
    .marquee-item {
        width: 35dvw;
        height: 35dvw;
        border-radius: 4dvw;
    }
    #div3 {
        row-gap: 10dvw;
    }
}






/*تکرار اولی*/
#div11{
    background-color: var(--color1);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 0;
    row-gap: 8dvw;
}
#div11_header{
    display: flex;
    flex-direction: column;
}
#div11_header h1{
    margin: 0;
    font-family: var(--typo1);
    font-size: clamp(none, 8dvw, 70px);
    font-family: var(--typo1);
    color: var(--color6);
}
#div11_title{
    margin: 0 auto 0 auto;
}
#div11_header p{
    margin: 0;
    font-family: var(--yekan2);
    color: var(--color2);
}
#div11_p{
    margin: 0 auto 0 auto;
    max-width: 70dvw;
    text-align: center;
    font-size: clamp(none, 2dvw, 15px);
}


#div11_cart_container{
    display: flex;
    flex-direction: column;
    row-gap: 3dvw;
}
#div11_carts1{
    display: flex;
    flex-direction: row;
    margin: 0 0;
    justify-content: space-evenly;
}
#div11_carts2{
    display: flex;
    flex-direction: row;
    margin: 0 0;
    justify-content: space-evenly;
}
.div11_cart {
    width: 17dvw;
    aspect-ratio: 1 / 1;
    background-color: var(--color6);
    border-radius: 2dvw;
    box-shadow: 0px 0px 2dvw 0dvh var(--shadow-color);
    animation: wave-effect 2.5s infinite;
}
@keyframes wave-effect/*real-wave*/ {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.9); opacity: 0.7; }
}
#div11_cart11 { animation-delay: 0.25s; }
#div11_cart12 { animation-delay: 0.5s; }
#div11_cart13 { animation-delay: 0.75s; }
#div11_cart14 { animation-delay: 1s; }
#div11_cart24 { animation-delay: 1.25s; }
#div11_cart23 { animation-delay: 1.5s; }
#div11_cart22 { animation-delay: 1.75s; }
#div11_cart21 { animation-delay: 2s; }

#div11_cart11{
    background-image: url(../images/hagh\ black.png);
    background-position: center center;
    background-size: cover;
}
#div11_cart12{
    background-image: url(../images/hagh\ white.png);
    background-position: center center;
    background-size: cover;
}
#div11_cart13{
    background-image: url(../images/hagh\ black.png);
    background-position: center center;
    background-size: cover;
}
#div11_cart14{
    background-image: url(../images/hagh\ white.png);
    background-position: center center;
    background-size: cover;
}
#div11_cart15{
    background-image: url(../images/hagh\ black.png);
    background-position: center center;
    background-size: cover;
}
#div11_cart21{
    background-image: url(../images/hagh\ white.png);
    background-position: center center;
    background-size: cover;
}
#div11_cart22{
    background-image: url(../images/hagh\ black.png);
    background-position: center center;
    background-size: cover;
}
#div11_cart23{
    background-image: url(../images/hagh\ white.png);
    background-position: center center;
    background-size: cover;
}
#div11_cart24{
    background-image: url(../images/hagh\ black.png);
    background-position: center center;
    background-size: cover;
}
#div11_cart25{
    background-image: url(../images/hagh\ white.png);
    background-position: center center;
    background-size: cover;
}

#div11_gallery{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    row-gap: 5dvw;
}
#div11_gallery_big{
    width: 90dvw;
    aspect-ratio: 3 / 2;
    border-radius: 6dvw;
    background-image: url(../images/صحن\ حضرت\ زهرا.jpg);
    background-position: center center;
    background-size: cover;
    box-shadow: 0px 1dvh 2dvw -1dvh var(--shadow-color);
}
#div11_gallery_small{
    width: 90dvw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#div11_gallery_small1{
    width: 42.5dvw;
    aspect-ratio: 3 / 2;
    border-radius: 6dvw;
    background-image: url(../images/hagh\ white.png);
    background-position: center center;
    background-size: cover;
    box-shadow: 0px 1dvh 2dvw -1dvh var(--shadow-color);
}
#div11_gallery_small2{
    width: 42.5dvw;
    aspect-ratio: 3 / 2;
    border-radius: 6dvw;
    background-image: url(../images/hagh\ black.png);
    background-position: center center;
    background-size: cover;
    box-shadow: 0px 1dvh 2dvw -1dvh var(--shadow-color);
}


/*تکرار دومی*/
#div22{
    background-color: var(--color2);
    width: 100%;
    box-shadow: 0px -1dvh 2dvh -1dvh var(--shadow-color),
                0px 1dvh 2dvh -1dvh var(--shadow-color);
    z-index: 5;
    margin-top: 5dvw;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    row-gap: 7dvw;
    margin-top: 5dvw;
    height: max-content;
    padding-top: 5dvw;
    padding-bottom: 10dvw;
    box-sizing: border-box;
}
#div22_header{
    display: flex;
    flex-direction: column;
}
#div22_header h2{
    margin: 0;
    font-family: var(--typo1);
    font-size: clamp(none, 8dvw, 70px);
    color: var(--color7);
}
#div22_title{
    margin: 0 auto 0 auto;
}
#div22_header p{
    margin: 0;
    font-family: var(--yekan2);
    color: var(--color1);
}
#div22_p{
    margin: 0 auto 0 auto;
    max-width: 90dvw;
    text-align: center;
    font-size: clamp(5px, 3dvw, 20px);
}
#div22_div1{
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    justify-content: space-around;
    align-items: end;
    width: 100%;
}
#div22_image{
    width: 45dvw;
    overflow: hidden;
    position: relative;
}
#div22_image img{
    width: 100%;
    height: 100%;
}
#div22_div1_p{
    width: 40dvw;
    height: 100%;
    font-size: clamp(none, 1.5dvw, 10px);
    color: var(--color1);
    font-family: var(--yekan3);
    text-align: justify;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-evenly;
}
#div22_div1 h2{
    margin: 0;
    font-family: var(--yekan1);
    font-size: clamp(none, 4dvw, 70px);
    color: var(--color7);
}
#div22_div1 p{
    margin: 0;
    font-family: var(--yekan3);
    font-size: clamp(none, 1.5dvw, 20px);
    color: var(--color1);
}
.floating_icon{
    position: absolute;
    max-width: 3dvw;
    max-height: 3dvw;
    height: auto;
    z-index: 10;
    animation: floatAnimation 2s ease-in-out infinite;
}
@keyframes floatAnimation {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-1dvw);
    }
    100% {
        transform: translateY(0px);
    }
}
#div22_icon1{
    right: 80%;
    top: 20%;
}
#div22_icon2{
    right: 10%;
    top: 20%;
    animation-delay: 0.5s;
}
#div22_icon3{
    right: 30%;
    top: 5%;
    animation-delay: 1s;
}
#div22_icon4{
    right: 65%;
    top: 5%;
    animation-delay: 1.5s;
}
@media (orientation: portrait) {
  #div22_div1 {
    flex-direction: column; 
    align-items: center;
}
  #div22_image{
    width: 90dvw;

}
#div22_div1_p{
    width: 90dvw;
    align-items: center;
}
#div22_div1 h2{
    font-size: clamp(none, 8dvw, 30px);
}
#div22_div1 p{
    font-size: clamp(none, 4dvw, 15px);
}
.floating_icon{
    max-width: 5dvw;
    max-height: 5dvw;
}
}

.swiper {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    direction: ltr !important; 
}
.swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}
.swiper-slide {
    width: 50dvh !important;
    height: 50dvh !important;
    transition: transform 0.5s ease, opacity 0.4s ease !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    opacity: 0.3 !important; 
    transform: scale(0.85) !important; 
    flex-shrink: 0 !important;
    border-radius: 4dvw;
}
#swiperup .swiper-slide{
    width: 70dvh !important;
    box-shadow: 0px 0dvh 2dvh 0dvh var(--color2);
}
.swiper-slide p{
    font-family: var(--yekan2);
    color: var(--color1);
    font-size: clamp(none, 2dvw, 40px);
    text-shadow: 0 0 15px black;
}
.swiper-slide a{
    position: absolute;
        margin: 30dvh auto 0 auto;
}
.swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important; 
    box-shadow: 0px 0dvh 4dvh -2dvh var(--color1);
}
.swiper-slide-active {
    opacity: 1 !important; 
    transform: scale(1) !important; 
    z-index: 5 !important;
}

@media (orientation: portrait){
    .swiper-slide {
        width: 50dvw !important;
        height: 50dvw !important;
}
    #swiperup .swiper-slide{
        width: 70dvw !important;
}
.swiper-slide a{
        margin: 30dvw auto 0 auto;
}
.swiper-slide p{
        font-size: clamp(none, 2dvh, 70px);
}
}

/*بخش ایتم های نشریات*/
#div_publications {
    background-color: var(--color1);
    width: 100%;
    max-width: 100dvw;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;       
    justify-content: center;
    align-items: center; 
    z-index: 10;
    margin-top: 7dvw;
    margin-bottom: 7dvw;
}
.publications-card {
    flex: 1;                   
    max-width: 45dvw;    
    background-color: var(--color1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 3dvw;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}
.pub-card-header {
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-family: var(--mahsa2);
    color: var(--color1);
}
.moshahede{
    background-color: var(--color6);
    border-radius: 1dvw;
    width: 10dvw;
    display: flex;
    justify-content: center;
    font-size: clamp(none, 2dvw, 35px);
    padding: 3px;
}
.pub-title {
    margin: 0;
    font-family: var(--yekan1);
    font-size: clamp(none, 6dvh, none);
    color: var(--color6);
}
@media (orientation: portrait){
    .pub-title {
    font-size: clamp(none, 6dvw, none);
}
}

.pub-view-all-btn:hover {
    background-color: rgba(50, 112, 113, 0.15);
}

.pub-list {
    display: flex;
    flex-direction: column;
}

.pub-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pub-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pub-text {
    flex: 1;
    padding-left: 4dvw;
}

.pub-text p {
    margin: 0;
    font-family: var(--yekan2);
    font-size: clamp(none, 1.8dvw, 20px);
    color: var(--color2);
    line-height: 1.6;
    text-align: right;
}

.pub-image {
    width: 9dvw;
    height: 6dvw;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.06);
}

.pub-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

    #div_publications{
        flex-direction: column;
        align-items: center;
        gap: 3dvw;
    }
    .publications-card {                  
    max-width: 90dvw; 
    min-width: 89dvw;
    }
    .pub-text p {
    font-size: clamp(none, 3dvw, 30px);
    }

.pub-image {
    width: 21dvw;
    height: 14dvw;
    }