img{width:40px;
padding-top:10px;
padding-bottom:10px;}
.ologo{padding: 8px;
margin-top: px; 
object-fit: cover;
}
.pl{display: flex;
justify-content: center;}
.banner{width:100%;
display: block;
height: 200px;
border-radius:10px;
object-fit:cover;
padding:0px;}
section{margin:10px;
display: flex;
flex-direction: column;
height:auto;
animation: fadeInup linear;
animation-timeline: view();
animation-range:entry 0% entry 50% ;
animation-fill-mode: both;
will-change: opacity,transform;
}
.top{display: flex;
flex-direction: row;}
.logo{display: flex;;
justify-content: center;}
#services{display: flex;
flex-direction: row;}
.whourse{display: flex;
flex-direction: row;}
body{background-color: rgb(246, 251, 254);
font-family:'Vazirmatn',sans-serif;
user-select: none;
padding:0px;
margin:0px}
.card,.card2{background-color: rgb(255, 255, 255);
margin: 5px;
border-radius:10px;
padding:8px;
flex-grow:1;
flex-shrink: 1;
flex-basis: 0;
box-shadow:0px 3px 8px #cdd4e0 ;
transition: 0.3s;}
.card:hover{transform:translatey(-5px);}
.top{display: flex;
width: 100%;
justify-content: space-between;}
.buttons{display: flex;
align-items:center;
gap: 5px;
margin-left: 10px;}
.whourse{background-color: rgb(255, 255, 255);
margin: 5px;
border-radius:10px;
box-shadow:0px 3px 8px #c5cddc ;
padding:8px;
flex-grow:1;
flex-shrink: 1;
flex-basis: 0;
transition:0.3s;}
.whourse:hover{transform:scale(1.03);}
.hourse{display: flex;
flex-direction: column;}
.frame{align-items: center;
display: flex;
justify-content: center;}
span{color: #134fb0;
display:block;
text-align: center;
font-size: 15px;}
.btext{display:inline}
.text{text-align: center;
width:100%;
font-family:'Vazirmatn',sans-serif;
color: #000000;}
button{background-color:transparent ;
border-radius: 5px;
border:1px solid transparent;
transition:0.3s;
padding: 8px;
font-family:'Vazirmatn',sans-serif;
font-weight: 500;
font-size: 10px;}
button:hover{
background-color: rgba(0, 149, 255, 0.15);
border: 1px solid rgba(255,255,255,0.2);
color: #000000;
border-radius: 5px;}
h2,p{font-size: 12px;}
h3{font-size: 16px;}
iframe{width:100%;
height: 200px;
border-radius:10px;
box-shadow:0px 3px 8px #c5cddc ;
transition:0.3s}
iframe:hover{transform:scale(1.03);}
.te{display: grid;
grid-template-columns:repeat(2 , 1fr);}
.card2:hover{transform:scale(1.03);}
table{background-color: #ffff;
border-radius: 10px;
box-shadow:0px 3px 8px #c5cddc ;
transition:0.3s;
border: 0px solid #000000;
padding:0px;
overflow: hidden;
border-collapse: collapse;
padding:0px;}
td{text-align: left;
padding-left: 10px;
background-color:#ffff ;
border: 1px solid #dfe6f3;
margin: 0px;
font-size:14px;
padding:8px}
th{text-align: left;
padding-left:10px;
text-align: center;
color: #2265d2;
font-size: 15px;
padding:8px;
text-align: center;}
table:hover{transform: scale(1.03);}
.blue{color:#134fb0;
text-align: left;}
header{position: sticky;
top:0;
z-index:1000;
background:rgba(255,255,255,0.12);
backdrop-filter:blur(12px)saturate(180%);
width: 100;
margin:0px;
border-bottom: 1px solid rgba(255,255,255,0.2);}
@media (max-width:767px) {
    p{font-size: 10px;}
    h2{font-size: 15px;}
    h3{font-size: 12px;}
    button{font-size: 7px;}
    span{font-size:12px}
    img{width:50px}
    .banner{width:100%;
             display: block;
             height: 200px;
             border-radius:10px;
             object-fit:cover;
             padding:0px;}
    .ologo{padding-right:8px;
      width:40px
    }
    #services{display: grid;
    grid-template-columns:repeat(2,1fr);}
    iframe{height:200px}
}
@keyframes fadeInup{
    from{
        opacity: 0;
        transform: translateY(60px) scale(0.95);
    }
    to{
        opacity: 1;
        transform: translateY(0px) scale(1);
    }
}
section:nth-of-type(1){animation-range: entry 0% entry 35%;}
section:nth-of-type(2){animation-range: entry 8% entry 43%;}
section:nth-of-type(3){animation-range: entry 16% entry 51%;}
section:nth-of-type(4){animation-range: entry 24% entry 59%;}
section:nth-of-type(5){animation-range: entry 32% entry 67%;}
section:nth-of-type(6){animation-range: entry 40% entry 75%;}
