/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jun 25, 2025, 2:21:26 PM
    Author     : DELL
*/
@media (max-width:768px){
 .bacColor{
        background-color: #f5f5f5;
        /*filter:brightness(1.1);*/
    }

h1 {
    text-align: center;
    font-family: monospace;
    font-size: 5vw;
    font-family: 'Poppins', sans-serif;
    font-weight: bolder;
    line-height: 1.6;
    color: #00aeef;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.image-section {
  margin: 0;
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 1%;
  width: 98%;
  height: auto;
}
.slideshow {
    position: relative;
    width: 100%;
    height:250px;
    overflow: hidden;
    border-radius: 5px;
}

.slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
     border-radius: 5px;
}

/* وضعیت‌ها */
.from-top {
    transform: translateY(-100%);
}

.to-bottom {
    transform: translateY(100%);
}

.in-view {
    transform: translateY(0);
}

/* انیمیشن‌ها */
.animate-in {
    animation: slideIn 1s ease forwards;
}

.animate-out {
    animation: slideOut 1s ease forwards;
}

@keyframes slideIn {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

@keyframes slideOut {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}
.text{
    width: 90%;
    margin: 0 5%;
}
.text p{
    text-align: justify;
    hyphens: manual;
    text-wrap: pretty;
    font-family: 'Poppins', sans-serif;
    font-size: 4vw;
}
.text ul li{
    font-weight: bolder;
}
/*.eduList{
    display: flex;
    justify-content: center;
    width: 100%;
}
.eduList div{
    width: 50%;
    text-align: left;
}*/
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jun 25, 2025, 2:21:26 PM
    Author     : DELL
*/
@media (min-width:768px){
    .bacColor{
        background-color: #f5f5f5;
        /*filter:brightness(1.1);*/
    }

h1 {
    text-align: center;
    font-family: monospace;
    font-size: 2.5vw;
    font-family: 'Poppins', sans-serif;
    font-weight: bolder;
    line-height: 1.6;
    color: #00aeef;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.image-section {
/*  background-image: url('../icon/ws.png');
  background-position: 15% 70%;
  background-repeat: no-repeat;
  background-size: 10%;*/
  margin: 0;
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 1%;
  width: 100%;
  height: auto;
}
.slideshow {
    position: relative;
    width: 85%;
    height:700px;
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* وضعیت‌ها */
.from-top {
    transform: translateY(-100%);
}

.to-bottom {
    transform: translateY(100%);
}

.in-view {
    transform: translateY(0);
}

/* انیمیشن‌ها */
.animate-in {
    animation: slideIn 1s ease forwards;
}

.animate-out {
    animation: slideOut 1s ease forwards;
}

@keyframes slideIn {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

@keyframes slideOut {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

/* ---------- FADE ---------- 
.fade.active{animation:fade 3s}
@keyframes fade{from{opacity:0}to{opacity:1}}

.fade-up.active{animation:fadeUp 3s}
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1}}

.fade-down.active{animation:fadeDown 3s}
@keyframes fadeDown{from{opacity:0;transform:translateY(-40px)}to{opacity:1}}

.fade-left.active{animation:fadeLeft 3s}
@keyframes fadeLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1}}

.fade-right.active{animation:fadeRight 3s}
@keyframes fadeRight{from{opacity:0;transform:translateX(60px)}to{opacity:1}}

 ---------- SLIDE ---------- 
.slide-left.active{animation:slideLeft 3s}
@keyframes slideLeft{from{transform:translateX(-100%)}to{transform:none}}

.slide-right.active{animation:slideRight 3s}
@keyframes slideRight{from{transform:translateX(100%)}to{transform:none}}

.slide-up.active{animation:slideUp 3s}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}

.slide-down.active{animation:slideDown 3s}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:none}}

.slide-diagonal.active{animation:slideDiag 3s}
@keyframes slideDiag{from{transform:translate(-100%,100%)}to{transform:none}}

 ---------- ZOOM ---------- 
.zoom-in.active{animation:zoomIn 3s}
@keyframes zoomIn{from{transform:scale(.3)}to{transform:none}}

.zoom-out.active{animation:zoomOut 3s}
@keyframes zoomOut{from{transform:scale(2)}to{transform:none}}

.zoom-rotate.active{animation:zoomRotate 3s}
@keyframes zoomRotate{from{transform:scale(.3) rotate(-180deg)}to{transform:none}}

.zoom-left.active{animation:zoomLeft 3s}
@keyframes zoomLeft{from{transform:scale(.3) translateX(-100px)}to{transform:none}}

.zoom-right.active{animation:zoomRight 3s}
@keyframes zoomRight{from{transform:scale(.3) translateX(100px)}to{transform:none}}

 ---------- ROTATE ---------- 
.rotate-left.active{animation:rotateLeft 3s}
@keyframes rotateLeft{from{transform:rotate(-360deg)}to{transform:none}}

.rotate-right.active{animation:rotateRight 3s}
@keyframes rotateRight{from{transform:rotate(360deg)}to{transform:none}}

.rotate-scale.active{animation:rotateScale 3s}
@keyframes rotateScale{from{transform:rotate(-180deg) scale(.3)}to{transform:none}}

.spin.active{animation:spin 3s}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.swing.active{animation:swing 3s}
@keyframes swing{
20%{transform:rotate(15deg)}
40%{transform:rotate(-10deg)}
60%{transform:rotate(5deg)}
100%{transform:none}
}

 ---------- 3D ---------- 
.flip-x.active{animation:flipX 3s}
@keyframes flipX{from{transform:rotateX(90deg)}to{transform:none}}

.flip-y.active{animation:flipY 3s}
@keyframes flipY{from{transform:rotateY(90deg)}to{transform:none}}

.cube-left.active{animation:cubeLeft 3s}
@keyframes cubeLeft{from{transform:rotateY(-90deg)}to{transform:none}}

.cube-right.active{animation:cubeRight 3s}
@keyframes cubeRight{from{transform:rotateY(90deg)}to{transform:none}}

.fold.active{animation:fold 3s}
@keyframes fold{from{transform:rotateX(90deg)}to{transform:none}}

 ---------- DYNAMIC ---------- 
.bounce.active{animation:bounce 3s}
@keyframes bounce{
0%{transform:translateY(-200px)}
60%{transform:translateY(20px)}
100%{transform:none}
}

.elastic.active{animation:elastic 3s}
@keyframes elastic{
0%{transform:scale(.2)}
60%{transform:scale(1.2)}
100%{transform:scale(1)}
}

.wobble.active{animation:wobble 3s}
@keyframes wobble{
15%{transform:translateX(-20px)}
30%{transform:translateX(15px)}
45%{transform:translateX(-10px)}
60%{transform:translateX(5px)}
}

.shake.active{animation:shake .8s}
@keyframes shake{
25%{transform:translateX(-10px)}
75%{transform:translateX(10px)}
}

 ---------- CREATIVE ---------- 
.blur-in.active{animation:blurIn 3s}
@keyframes blurIn{from{filter:blur(20px)}to{filter:none}}

.grayscale-in.active{animation:gray 3s}
@keyframes gray{from{filter:grayscale(100%)}to{filter:none}}

.skew-left.active{animation:skewLeft 3s}
@keyframes skewLeft{from{transform:skewX(30deg)}to{transform:none}}

.skew-right.active{animation:skewRight 3s}
@keyframes skewRight{from{transform:skewX(-30deg)}to{transform:none}}

.roll-in.active{animation:rollIn 3s}
@keyframes rollIn{from{transform:translateX(-100%) rotate(-360deg)}to{transform:none}}

 ---------- EXTRA ---------- 
.drop.active{animation:drop 3s}
@keyframes drop{from{transform:translateY(-300px)}to{transform:none}}

.tilt-in.active{animation:tilt 3s}
@keyframes tilt{from{transform:rotate(20deg) scale(.7)}to{transform:none}}

.spotlight.active{animation:spot 3s}
@keyframes spot{from{filter:brightness(.2)}to{filter:brightness(1)}}

.curtain.active{animation:curtain 3s}
@keyframes curtain{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}

.reveal.active{animation:reveal 3s}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

.pulse.active{animation:pulse 3s}
@keyframes pulse{
0%{transform:scale(.8)}
50%{transform:scale(1.05)}
100%{transform:scale(1)}
}*/
/* .totalBene{
        display: flex;
        width: 100%;
        justify-content: center;    افقی 
        align-items: center;        عمودی 
        height: fit-content;              لازم است ارتفاع داشته باشد 
        border: 0px solid black;
        padding: 2%;
    }
.counter-box{
    width:30%;
    background-color: white;
    height: auto;
    padding: 2%;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    justify-content: right;  وسط‌چین 
    border-radius: 18px;
    
}
 .counter-box:hover{
    filter:brightness(120%);
}
.counter-number{
    width: 100%;
    font-size: 3vw;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #09204a;
}
.counter-label{
    width: 100%;
    font-size: 2vw;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #09204a;
}
.box:nth-of-type(4){
    padding: 1%;
}*/
.text{
    width: 90%;
    margin: 0 5%;
}
.text p{
    text-align: justify;
    hyphens: manual;
    text-wrap: pretty;
    font-family: 'Poppins', sans-serif;
    font-size: 1.3vw;
}
.text ul li,text ul li ul li{
    font-family: 'Poppins', sans-serif;
}
.eduList{
    display: flex;
    justify-content: center;
    width: 100%;
}
.eduList div{
    width: 50%;
    text-align: left;
}
}