/* /// start headline_and_image /// */
/* // */
.headline_and_image{
margin-top: 250px;
direction: rtl;
}
.headline_and_image .container{
padding: 0 20px;
}
.headline_and_image_box{
display: flex;
justify-content: center;
column-gap: 200px;
align-items: center;
}
.head_box{
width: 40%;
margin-top: 70px;
margin-right: 50px;
}
.first_head{
font-family: "fawzy";
color: #0C00B5;
font-size: 115px;
transform: rotate(-7deg);
font-weight: 400;
z-index: -1;
margin-right: 110px;
}
.ract_ibda3y_box{
position: relative;
margin-top: -20px;
z-index: -5;
width: fit-content;
}

.ract_ibda3y_image{
height: 200px;
}
.ract_ibda3y_box::before{
position: absolute;
content: "الإبداعي";
font-family: "fawzy";
font-size: 110px;
color: #D7F0F2;
/* width: 100%;
height: 100%; */
top: 19px;
right: 100px;
transform: rotate(-3deg);
}

.ract_ibda3y_frame_image{
height: 97%;
}
.span_rocket_box{
position: absolute;
top: -130px;
left: -110px;
z-index: 5;

}
.span_rocket_image{
width: 295px;
height: 270px;
}
.ract_ibda3y_frame{
position: absolute;
width: 100%;
height: 100%;
top: -10px;
right: -10px;
z-index: 1;

}

.bio{
font-size: 20px;
font-weight: 600;
margin-top: 40px;
line-height: 1.9;
padding-left: 30px;
margin-bottom: 30px;

}
.bio_span{
font-size: 20px;
color: #0618C4;
font-weight: 600;
}
/* //////////////////////////////////////////////////// */
/* ////////////// pixel for contact ////////////////*/
.pixel_a_contact{
text-decoration: none !important;
outline: none !important;
position: relative;
margin-right: 30px;

}
.pixel_a_contact::before{
content: "";
position: absolute;
left: 50%;
top: 40%;
width: 100%;
height: 100%;
padding: 25px 15px;
transform: translate(-50%, -50%);
border: 2px solid #C9E8FF;
border-radius: 78px;
}
.pixel-btn_contact {
position: relative;
width: 220px;
height: 60px;
display: inline;
/* margin-left: 30px; */
/* padding: 12px 30px ; */
background: transparent;
color: #fff;
font-size: 20px;
font-weight: 800;
cursor: pointer;
border: 0;
border: 2px solid transparent;
border-radius: 78px; /* Rounded corners */
overflow: hidden;
text-decoration: none !important;
outline: none !important;
/* margin-top: 30px; */
}
.pixel-btn_contact:hover{
color: #0618C4;
border: 2px solid #0618C4;
transition-duration: 1s;
}

.pixel-btn_contact span {
position: relative;
font-size: 17px;
font-weight: 800;
font-family: "IBM Plex Sans Arabic", sans-serif;
z-index: 1;
}

.pixel-container_contact {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
border-radius: inherit; /* Crucial for rounded mask */
}

.pixel-container_contact .pixel_contact {
position: absolute;
width: 11px;
height: 11px;
background-color: var(--pixel-color);
transition: transform 0.5s ease, opacity 0.5s ease;
border-radius: 0px; /* Soften pixel edges */
}

.pixel-btn_contact:hover .pixel_contact {
opacity: 0;
transform: translate(var(--tx), var(--ty));
}
/* //////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////// */
.contact_me{
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: 800;
background-color: #0618C4;
color: #ffffff;
padding: 10px 40px;
border-radius: 78px;
margin-top: 50px;
position: relative;
transition-duration: 0.3s;
border: 2px solid #0C00B5;

}
.contact_me:hover{
background-color: #eaf6ff;
color: #0618C4;
border: 2px solid #0C00B5;

}
.contact_me::before{
content: "";
position: absolute;
width: 110%;
height: 59.47px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 2px solid #C9E8FF;
border-radius: 40px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 8px;
padding-left: 8px;
}

.image_box{
position: relative;
margin-top: -30px;
margin-left: 50px;

}
.circle{
position: absolute;
width: 112px;
height: 112px;
background-color: #0618C4;
top: 135px;
right: 0;
border-radius: 50%;
filter: drop-shadow(-5px 6px 0px #19127C);

}
.big_right_arrow{
position: absolute;
width: 37px;
height: 54px;
top: 166px;
right: 20px;
filter: drop-shadow(-7px 0px 0px #19127C);
}
.small_right_arrow{
position: absolute;
width: 29px;
height: 37px;
top: 174px;
right: 58px;
filter: drop-shadow(-7px 0px 0px #19127C);
}

.recta_with_name{
position: absolute;
width: 434px;
height: 107px;
bottom: 80px;
right: -40px;
filter: drop-shadow(-20px 25px 0px #0617C0);
}
.fawzy_name{
position: absolute;
font-weight: bold;
font-size: 55px;
color: #0618C4;
bottom: 97px;
right: 0px;
text-wrap: nowrap !important;
}
.first_number{
position: absolute;
font-weight: bold;
font-size: 31px;
color: #0618C4;
left: 0;
top: 82px;
direction: ltr;
}
.second_number{
position: absolute;
font-size: 31px;
color: #ffffff;
left: 0;
top: 50px;
direction: ltr;
-webkit-text-stroke: thin #94D1FF;
font-weight: bold;
}
.third_number{
position: absolute;
font-size: 31px;
color: #ffffff;
left: 0;
top: 18px;
direction: ltr;
-webkit-text-stroke: thin #94d1ff88;
font-weight: bold;
}
.fourth_number{
position: absolute;
font-size: 31px;
color: #ffffff;
left: 0;
top: -12px;
direction: ltr;
-webkit-text-stroke: thin #94d1ff4c;
font-weight: bold;
}

.first_bg_thin_lines{
position: absolute;
width: 310px;
height: 13px;
left: -15px;
top: 140px;
background-color: #0618C4;
z-index: -1;
}
.second_bg_thin_lines{
position: absolute;
width: 310px;
height: 13px;
left: -15px;
top: 165px;
background-color: #0618C4;
z-index: -1;
}
.third_bg_thin_lines{
position: absolute;
width: 310px;
height: 13px;
left: -15px;
top: 190px;
background-color: #0618C4;
z-index: -1;
}
.fourth_bg_thin_lines{
position: absolute;
width: 310px;
height: 13px;
left: -15px;
top: 215px;
background-color: #0618C4;
z-index: -1;
}
.fifth_bg_thin_lines{
position: absolute;
width: 310px;
height: 13px;
left: -15px;
top: 240px;
background-color: #0618C4;
z-index: -1;
}
.sixth_bg_thin_lines{
position: absolute;
width: 310px;
height: 29px;
left: -15px;
top: 265px;
background-color: #0618C4;
z-index: -1;
}
.seventh_bg_thin_lines{
position: absolute;
width: 310px;
height: 53px;
left: -15px;
top: 305px;
background-color: #0618C4;
z-index: -1;
}

.grid_pattern{
position: absolute;
width: 440px;
height: 380px;
top: 140px;
right: -52px;
background-color: transparent;
background-image: linear-gradient(0deg, hsla(206, 100%, 79%, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, hsla(206, 100%, 79%, 0.6) 1px, transparent 1px);
background-size: 28px 28px; 
z-index: -1;
}
/* // */
/* /// end headline_and_image /// */
/* // */
/* /////////////////////////////////// */
/* // start media query for headline_and_image // */
/* // */
@media (min-width:901px) and (max-width:1200px) {
.first_head{
font-size: 85px;
margin-right: 60px;
}
.ract_ibda3y_box{
margin-top: -27px;
z-index: -5;
width: fit-content;
}
.ract_ibda3y_image{
width: 400px;
height: 320px !important;
margin-top: -60px;
}
.ract_ibda3y_box::before{
font-size: 80px;
width: 100%;
height: 100%;
top: 42px;
right: 60px;
}
.ract_ibda3y_frame_image{
width: 400px;
height: 320px !important;
margin-top: -60px;
}
.span_rocket_box{
top: -70px;
left: -55px;
z-index: 5;
}
.bio{
font-size: 18px;
margin-top: -45px;   
}
/***************************/
.headline_and_image_box{
column-gap: 90px;
}
.image_box{
margin-top: -30px;
margin-left: 50px;
}
.fawzy_img{
width: 330px;
height: 462px;
}
.circle{
width: 85px;
height: 85px;
top: 125px;
right: 0;

}
.big_right_arrow{
width: 30px;
height: 47px;
top: 147px;
right: 12px;
}
.small_right_arrow{
width: 22px;
height: 30px;
top: 156px;
right: 45px;
}

.recta_with_name{
width: 390px;
height: 107px;
bottom: 60px;
right: -40px;
filter: drop-shadow(-20px 25px 0px #0617C0);
}
.fawzy_name{
font-size: 52px;
bottom: 80px;
right: -12px;
}
.first_number{
font-size: 27px;
}
.second_number{
font-size: 27px;
}
.third_number{
font-size: 27px;
}
.fourth_number{
font-size: 27px;
}
.grid_pattern{
width: 350px;
height: 380px;
top: 140px;
right: -5px;
background-size: 28px 28px; 
}
.span_rocket_box{
position: absolute;
top: -90px;
left: -70px;
z-index: 5;

}
.span_rocket_image{
width: 230px;
height: 211px;
}
}
/* ******************************************************************************* */
/* ******************************************************************************* */
/* ******************************************************************************* */
@media (min-width:650px) and (max-width:900px) {
.headline_and_image{
margin-top: 250px;
direction: rtl;
}
.headline_and_image .container{
padding: 0 20px;
}
.headline_and_image_box{
display: flex;
justify-content: center;
flex-direction: column-reverse;
align-items: flex-start;
}
.head_box{
width: 100%;
margin-top: 80px;
margin-right: 0px !important;
}
.first_head{
font-family: "fawzy";
color: #0C00B5;
font-size: 110px;
transform: rotate(-7deg);
font-weight: 400;
z-index: -1;
width: fit-content;
margin: 0 auto;
}
.ract_ibda3y_box{
position: relative;
margin-top: -20px;
z-index: -5;
width: fit-content;
margin: 0 auto;

}

.ract_ibda3y_image{
height: 200px;
}
.ract_ibda3y_box::before{
position: absolute;
content: "الإبداعي";
font-family: "fawzy";
font-size: 105px;
color: #D7F0F2;
width: 100%;
height: 100%;
top: 27px;
right: 100px;
transform: rotate(-3deg);

}

.ract_ibda3y_frame_image{
height: 200px;
}
.span_rocket_box{
position: absolute;
top: -110px;
left: -80px;
z-index: 5;

}
.span_rocket_image{
width: 270px;
height: 247px;
}
.ract_ibda3y_frame{
position: absolute;
width: 100%;
height: 100%;
top: -10px;
right: -10px;
z-index: 1;

}

.bio{
font-size: 20px;
font-weight: 600;
margin-top: 40px;

}
.bio_span{
font-size: 20px;
color: #0618C4;
font-weight: 600;
}
/* .pixel_a_contact{
margin-right: 30px;
}
.pixel_a_contact::before{
left: 50%;
top: 40%;
width: 100%;
height: 100%;
padding: 25px 17px;
transform: translate(-50%, -50%);
} */

.contact_me{
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: 800;
background-color: #0618C4;
color: #ffffff;
padding: 10px 40px;
border-radius: 78px;
margin-top: 50px;
position: relative;
margin-right: 30px;

}
.contact_me::before{
content: "";
position: absolute;
width: 110%;
height: 59.47px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 2px solid #C9E8FF;
border-radius: 40px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 8px;
padding-left: 8px;
}

.image_box{
margin: 0 auto;
}
.fawzy_img{
width: 350px;
height: 490px;
}
.circle{
position: absolute;
width: 80px;
height: 80px;
background-color: #0618C4;
top: 128px;
right: 10px;
border-radius: 50%;
filter: drop-shadow(-3px 4px 0px #19127C);

}
.big_right_arrow{
position: absolute;
width: 24px;
height: 48px;
top: 147px;
right: 25px;
filter: drop-shadow(-5px 0px 0px #19127C);
}
.small_right_arrow{
position: absolute;
width: 18px;
height: 37px;
top: 152px;
right: 52px;
filter: drop-shadow(-5px 0px 0px #19127C);
}

.recta_with_name{
position: absolute;
width: 434px;
height: 107px;
bottom: 80px;
right: -40px;
filter: drop-shadow(-20px 25px 0px #0617C0);
}
.fawzy_name{
font-size: 55px;
bottom: 95px;
right: 0px;
}
.first_number{
position: absolute;
font-weight: bold;
font-size: 28px;
color: #0618C4;
left: 0;
top: 90px;
direction: ltr;
}
.second_number{
position: absolute;
font-size: 28px;
color: #ffffff;
left: 0;
top: 54px;
direction: ltr;
-webkit-text-stroke: thin #94D1FF;
font-weight: bold;
}
.third_number{
position: absolute;
font-size: 28px;
color: #ffffff;
left: 0;
top: 22px;
direction: ltr;
-webkit-text-stroke: thin #94d1ff88;
font-weight: bold;
}
.fourth_number{
position: absolute;
font-size: 28px;
color: #ffffff;
left: 0;
top: -8px;
direction: ltr;
-webkit-text-stroke: thin #94d1ff4c;
font-weight: bold;
}
.grid_pattern{
position: absolute;
width: 385px;
height: 380px;
top: 140px;
right: -20px;
background-color: transparent;
background-image: linear-gradient(0deg, hsla(206, 100%, 79%, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, hsla(206, 100%, 79%, 0.6) 1px, transparent 1px);
background-size: 28px 28px; 
z-index: -1;
}

}

/* ******************************************************************************* */
/* ******************************************************************************* */
/* ******************************************************************************* */
@media (min-width:530px) and (max-width:650px) {
.headline_and_image{
margin-top: 250px;
direction: rtl;
}
.headline_and_image .container{
padding: 0 20px;
}
.headline_and_image_box{
display: flex;
justify-content: center;
flex-direction: column-reverse;
align-items: flex-start;
}
.head_box{
width: 100%;
margin-top: 120px;
margin-right: 0px !important;
}
.first_head{
font-size: 85px;
width: fit-content;
margin: 0 auto;
}
.ract_ibda3y_box{
z-index: -5;
width: fit-content;
margin: 0 auto;
margin-top: -20px;

}
.ract_ibda3y_image{
width: 390px;
height: 310px !important;
margin-top: -60px;
}
.ract_ibda3y_box::before{
font-size: 80px;
width: 100%;
height: 100%;
top: 37px;
right: 60px;
}
.ract_ibda3y_frame_image{
width: 390px;
height: 310px !important;
margin-top: -60px;
}
.span_rocket_box{
top: -70px;
left: -80px;
z-index: 5;
}
.bio{
font-size: 18px;
margin-top: -45px;   
}
/* .pixel_a_contact{
margin-right: 30px;
}
.pixel-btn_contact {
position: relative;
width: 170px;
height: 50px;
font-size: 17px;
}
.pixel_a_contact::before{
left: 50%;
top: 49%;
width: 100%;
height: 100%;
padding: 20px 15px;
transform: translate(-50%, -50%);
} */

.contact_me{
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: 800;
background-color: #0618C4;
color: #ffffff;
padding: 10px 40px;
border-radius: 78px;
margin-top: 50px;
position: relative;
margin-right: 30px;

}
.contact_me::before{
content: "";
position: absolute;
width: 110%;
height: 59.47px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 2px solid #C9E8FF;
border-radius: 40px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 8px;
padding-left: 8px;
}

/* *************** image box ********************* */
.image_box{
margin: 0 auto;
}
.fawzy_img{
width: 330px;
height: 462px;
}
.circle{
position: absolute;
width: 80px;
height: 80px;
background-color: #0618C4;
top: 128px;
right: 10px;
border-radius: 50%;
filter: drop-shadow(-3px 4px 0px #19127C);

}
.big_right_arrow{
position: absolute;
width: 24px;
height: 48px;
top: 147px;
right: 25px;
filter: drop-shadow(-5px 0px 0px #19127C);
}
.small_right_arrow{
position: absolute;
width: 18px;
height: 37px;
top: 152px;
right: 52px;
filter: drop-shadow(-5px 0px 0px #19127C);
}

.recta_with_name{
width: 390px;
height: 107px;
bottom: 60px;
right: -40px;
filter: drop-shadow(-20px 25px 0px #0617C0);
}
.fawzy_name{
font-size: 50px;
bottom: 80px;
right: -3px;
}
.first_number{
font-size: 27px;
}
.second_number{
font-size: 27px;
}
.third_number{
font-size: 27px;
}
.fourth_number{
font-size: 27px;
}
.grid_pattern{
width: 380px;
height: 330px;
top: 140px;
right: -40px;
background-size: 28px 28px; 
}

.span_rocket_box{
position: absolute;
top: -100px;
left: -100px;
z-index: 5;

}
.span_rocket_image{
width: 250px;
height: 229px;
}

}
/* ****************************************************** */
/* ****************************************************** */
/* ****************************************************** */
@media (min-width:440px) and (max-width:530px) {
.headline_and_image{
margin-top: 250px;
direction: rtl;
}
.headline_and_image .container{
padding: 0 20px;
}
.headline_and_image_box{
display: flex;
justify-content: center;
flex-direction: column-reverse;
align-items: flex-start;
}
.head_box{
width: 100%;
margin-top: 100px;
margin-right: 0px !important;
}
.first_head{
font-size: 75px;
width: fit-content;
margin: 0 auto;
/* margin-right: 20px; */
}
.ract_ibda3y_box{
z-index: -5;
width: fit-content;
margin: 0 auto;
margin-top: -20px;

}
.ract_ibda3y_image{
width: 350px;
height: 270px !important;
margin-top: -60px;
}
.ract_ibda3y_box::before{
font-size: 68px;
width: 100%;
height: 100%;
top: 26px;
right: 60px;
}
.ract_ibda3y_frame_image{
width: 350px;
height: 270px !important;
margin-top: -60px;
}
.span_rocket_box{
position: absolute;
top: -85px;
left: -75px;
z-index: 5;

}
.span_rocket_image{
width: 200px;
height: 183px;
}
.bio{
font-size: 15px;
margin-top: -25px;   
}
.bio_span{
font-size: 17px;
}
/* .pixel_a_contact{
margin-right: 30px;
}
.pixel-btn_contact {
position: relative;
width: 170px;
height: 50px;
font-size: 17px;
margin-bottom: 50px !important;

}
.pixel_a_contact::before{
left: 50%;
top: 53%;
width: 100%;
height: 100%;
padding: 18px 14px;
transform: translate(-50%, -50%);
} */

.contact_me{
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: 800;
background-color: #0618C4;
color: #ffffff;
padding: 10px 40px;
border-radius: 78px;
margin-top: 20px;
margin-bottom: 70px;
position: relative;
margin-right: 30px;

}
.contact_me::before{
content: "";
position: absolute;
width: 110%;
height: 59.47px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 2px solid #C9E8FF;
border-radius: 40px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 8px;
padding-left: 8px;
}
/* *************** image box ********************* */
.image_box{
margin: 0 auto;
margin-top: -30px;

}
.fawzy_img{
width: 290px;
height: 406px;
}
.circle{
position: absolute;
width: 65px;
height: 65px;
background-color: #0618C4;
top: 105px;
right: 10px;
border-radius: 50%;
filter: drop-shadow(-3px 4px 0px #19127C);

}
.big_right_arrow{
position: absolute;
width: 17px;
height: 48px;
top: 115px;
right: 23px;
filter: drop-shadow(-5px 0px 0px #19127C);
}
.small_right_arrow{
position: absolute;
width: 12px;
height: 37px;
top: 120px;
right: 45px;
filter: drop-shadow(-5px 0px 0px #19127C);
}

.recta_with_name{
width: 325px;
height: 107px;
bottom: 50px;
right: -15px;
filter: drop-shadow(-20px 25px 0px #0617C0);
}
.fawzy_name{
font-size: 43px;
bottom: 75px;
right: 10px;
}
.first_number{
font-size: 23px;
left: -5px;
top: 60px;
}
.second_number{
font-size: 23px;
left: -5px;
top: 29px;
}
.third_number{
font-size: 23px;
left: -5px;
top: -3px;
}
.fourth_number{
font-size: 23px;
left: -5px;
top: -33px;
}
.first_bg_thin_lines{
width: 260px;
height: 10px;
left: -10px;
top: 110px;
}
.second_bg_thin_lines{
width: 260px;
height: 13px;
left: -10px;
top: 135px;
}
.third_bg_thin_lines{
width: 260px;
height: 13px;
left: -10px;
top: 160px;
}
.fourth_bg_thin_lines{
width: 260px;
height: 13px;
left: -10px;
top: 185px;
}
.fifth_bg_thin_lines{
width: 260px;
height: 13px;
left: -10px;
top: 210px;
}
.sixth_bg_thin_lines{
width: 260px;
height: 29px;
left: -10px;
top: 235px;
}
.seventh_bg_thin_lines{
width: 260px;
height: 53px;
left: -10px;
top: 275px;
}
.grid_pattern{
width: 115%;
height: 335px;
top: 100px;
right: -35px;
background-size: 28px 28px; 
}
}
/* ****************************************************** */
/* ****************************************************** */
/* ****************************************************** */
@media (min-width:0px) and (max-width:440px) {
.headline_and_image{
margin-top: 250px;
direction: rtl;
}
.headline_and_image .container{
padding: 0 20px;
}
.headline_and_image_box{
display: flex;
justify-content: center;
flex-direction: column-reverse;
align-items: flex-start;
}
.head_box{
width: 100%;
margin-top: 100px;
margin-right: 0px !important;
}
.first_head{
font-size: 70px;
width: fit-content;
margin: 0 auto;
/* margin-right: 20px; */
}
.ract_ibda3y_box{
z-index: -5;
width: fit-content;
margin: 0 auto;
margin-top: -20px;

}
.ract_ibda3y_image{
width: 340px;
height: 260px !important;
margin-top: -60px;
}
.ract_ibda3y_box::before{
font-size: 65px;
width: 100%;
height: 100%;
top: 24px;
right: 60px;
}
.ract_ibda3y_frame_image{
width: 340px;
height: 260px !important;
margin-top: -60px;
}
.span_rocket_box{
position: absolute;
top: -70px;
left: -45px;
z-index: 5;

}
.span_rocket_image{
width: 150px;
height: 137px;
}
.bio{
font-size: 14px;
margin-top: -50px;   
padding-left: 20px;
}
.bio_span{
font-size: 15px;
}
.contact_me{
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: 800;
background-color: #0618C4;
color: #ffffff;
padding: 10px 40px;
border-radius: 78px;
margin-top: 20px;
margin-bottom: 70px;
position: relative;
margin-right: 30px;

}
/* *************** image box ********************* */
.image_box{
margin: 0 auto;
margin-top: -30px;
}
.fawzy_img{
width: 250px;
height: 350px;
margin-top: -10px;
}
.circle{
position: absolute;
width: 58px;
height: 58px;
background-color: #0618C4;
top: 85px;
right: 0px;
border-radius: 50%;
filter: drop-shadow(-2px 3px 0px #19127C);

}
.big_right_arrow{
position: absolute;
width: 15px;
height: 48px;
top: 93px;
right: 12px;
filter: drop-shadow(-4px 0px 0px #19127C);
}
.small_right_arrow{
position: absolute;
width: 12px;
height: 37px;
top: 98px;
right: 30px;
filter: drop-shadow(-4px 0px 0px #19127C);
}

.recta_with_name{
width: 285px;
height: 107px;
bottom: 30px;
right: -20px;
filter: drop-shadow(-13px 15px 0px #0617C0);
}
.fawzy_name{
font-size: 37px;
bottom: 58px;
right: 5px;
}
.first_number{
font-size: 20px;
left: -5px;
top: 50px;
}
.second_number{
font-size: 20px;
left: -5px;
top: 19px;
}
.third_number{
font-size: 20px;
left: -5px;
top: -13px;
}
.fourth_number{
font-size: 20px;
left: -5px;
top: -43px;
}
.first_bg_thin_lines{
width: 240px;
height: 10px;
left: -10px;
top: 90px;
}
.second_bg_thin_lines{
width: 240px;
height: 13px;
left: -10px;
top: 115px;
}
.third_bg_thin_lines{
width: 240px;
height: 13px;
left: -10px;
top: 140px;
}
.fourth_bg_thin_lines{
width: 240px;
height: 13px;
left: -10px;
top: 165px;
}
.fifth_bg_thin_lines{
width: 240px;
height: 13px;
left: -10px;
top: 190px;
}
.sixth_bg_thin_lines{
width: 240px;
height: 29px;
left: -10px;
top: 215px;
}
.seventh_bg_thin_lines{
width: 240px;
height: 53px;
left: -10px;
top: 255px;
}
.grid_pattern{
width: 112%;
height: 290px;
top: 80px;
right: -20px;
background-size: 28px 28px; 
}
}







/* ////////////////////////////////////////////////////////// */
/* ////////////// views number section ///////////////////// */
/* ////////////////////////////////////////////////////////// */
.views_number_section{
margin-top: 300px;
margin-bottom: 150px;
position: relative;
}
/* .wave_box{
position: relative;
} */
.wave{
width: 100%; 
height: 200%;
position: absolute;
top: 0;
}
.wave_2{
width: 100%; 
position: absolute;
bottom: 0px;
}
.wave_3{
width: 100%; 
position: absolute;
top: 65px;
}

.right_star{
position: absolute;
right: 0px;
bottom: 0px;
z-index: -1;

}

.right_star_rocket{
position: absolute;
right: 0px;
bottom: 50px;
width: 380px;
height: 337px;
}

.left_star{
position: absolute;
left: 0px;
bottom: 0px;
z-index: -1;
}

.left_star_rocket{
position: absolute;
left: 0px;
bottom: 50px;
width: 380px;
height: 337px;
}

.views_count{
position: absolute;
top: -120px;
left: 52%; 
transform: translateX(-50%);
margin-inline: auto; 
width: fit-content;
font-weight: bold;
font-size: 150px;
color: #0618C4;
filter: drop-shadow(0px 13px 0px #94D1FF);
}

.odometer2 {
text-align: center;
display: inline-block;
letter-spacing: 2px;
}
@media (min-width: 1550px){
.odometer2 {
letter-spacing: 12px;

}
}


/* ////////////// */
/* ////////////// */
.plus {
position: relative;
}

.plus::after {
content: "+";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -100px;
font-size: 170px;
}

.odometer2.odometer-auto-theme .odometer-digit .odometer-ribbon-inner,
.odometer2.odometer-theme-minimal .odometer-digit .odometer-ribbon-inner {
-webkit-transition-duration: 1s !important;
-moz-transition-duration: 1s !important;
-ms-transition-duration: 1s !important;
-o-transition-duration: 1s !important;
transition-duration: 2s !important;
}
.views_text{
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
font-weight: bold;
font-size: 60px;
color: #2E3AAF;
}

/*///////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////*/
/*////// start media query for views number section /////////*/
@media (min-width: 1400px) and (max-width: 1900px){

.wave{
top: 0;
}
.wave_2{
width: 100%; 
bottom: 0px;
}
.right_star{
right: 0px;
bottom: 30px;
z-index: -1;
width: 321px;
height: 390px;
}
.right_star_rocket{
right: 0px;
bottom: 30px;
width: 320px;
height: 284px;
}
.left_star{
left: 0px;
bottom: 30px;
z-index: -1;
width: 321px;
height: 390px;
}
.left_star_rocket{
left: 0px;
bottom: 30px;
width: 320px;
height: 284px;
}

.views_count{
top: -90px;
left: 52%; 
transform: translateX(-50%);
font-size: 130px;
filter: drop-shadow(0px 13px 0px #94D1FF);

}

.plus::after {
top: 50%;
transform: translateY(-50%);
left: -100px;
font-size: 130px;
}
.views_text{
bottom: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 55px;
}
}
/* /////////////////////////////////////////////////////////////////////////// */
@media (min-width: 1200px) and (max-width: 1400px){
.wave{
top: 10px;
}
.wave_2{
bottom: 0px;
}
.right_star{
bottom: 20px;
z-index: -1;
width: 290px;
height: 352px;
}
.right_star_rocket{
bottom: 20px;
width: 290px;
height: 257px;
}
.left_star{
bottom: 20px;
width: 290px;
height: 352px;
}
.left_star_rocket{
bottom: 20px;
width: 290px;
height: 257px;
}
}
/* //////////////////////////////////////////////// */
@media (min-width: 1000px) and (max-width: 1200px){
.wave{
top: 10px;
}
.wave_2{
bottom: 0px;
}
.right_star{
bottom: -20px;
width: 290px;
height: 352px;
}
.right_star_rocket{
bottom: 0px;
width: 260px;
height: 231px;
}
.left_star{
bottom: -20px;
width: 290px;
height: 352px;
}
.left_star_rocket{
bottom: 0px;
width: 260px;
height: 231px;
}
}
/* //////////////////////////////////////////////// */
@media (min-width: 1200px) and (max-width: 1400px){
.views_count{
top: -85px;
left: 52%; 
transform: translateX(-50%);
font-size: 100px;
filter: drop-shadow(0px 11px 0px #94D1FF);

}

.plus::after {
top: 50%;
transform: translateY(-50%);
left: -70px;
font-size: 100px;
}
.views_text{
bottom: 0px;
left: 50%;
transform: translateX(-50%);
font-size: 35px;
}
}
/* //////////////////////////////////////////////////////////////////// */
@media (min-width: 1100px) and (max-width: 1200px){
.views_count{
top: -75px;
left: 52%; 
transform: translateX(-50%);
font-size: 85px;
filter: drop-shadow(0px 10px 0px #94D1FF);

}

.plus::after {
top: 50%;
transform: translateY(-50%);
left: -50px;
font-size: 85px;
}
.views_text{
bottom: 0px;
left: 50%;
transform: translateX(-50%);
font-size: 30px;
}
}
@media (min-width: 1000px) and (max-width: 1100px){
.views_count{
top: -72px;
left: 52%; 
transform: translateX(-50%);
font-size: 75px;
filter: drop-shadow(0px 8px 0px #94D1FF);

}

.plus::after {
top: 50%;
transform: translateY(-50%);
left: -55px;
font-size: 75px;
}
.views_text{
bottom: 0px;
left: 50%;
transform: translateX(-50%);
font-size: 30px;
}
}
/* ///////////////////////////////////////// */
@media (min-width: 800px) and (max-width: 1000px){

.wave{
top: 0px;
}
.wave_2{
bottom: 0px;
}
.right_star{
bottom: -20px;
width: 245px;
height: 298px;
}
.right_star_rocket{
bottom: 0px;
width: 210px;
height: 186px;
right: 20px;
}
.left_star{
bottom: -20px;
width: 245px;
height: 298px;
}
.left_star_rocket{
bottom: 0px;
width: 210px;
height: 186px;
left: 20px;
}
}
/* ********************************************************** */
@media (min-width: 900px) and (max-width: 1000px){
.views_count{
top: -60px;
left: 52%; 
transform: translateX(-50%);
font-size: 75px;
filter: drop-shadow(0px 8px 0px #94D1FF);

}

.plus::after {
top: 50%;
transform: translateY(-50%);
left: -45px;
font-size: 75px;
}
.views_text{
bottom: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 30px;
}
}
@media (min-width: 800px) and (max-width: 900px){
.views_count{
top: -55px;
left: 52%; 
transform: translateX(-50%);
font-size: 65px;
filter: drop-shadow(0px 8px 0px #94D1FF);

}

.plus::after {
top: 50%;
transform: translateY(-50%);
left: -38px;
font-size: 65px;
}
.views_text{
bottom: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 30px;
}
}
/* *************************************************** */
@media (min-width: 700px) and (max-width: 800px){
.views_number_section{
margin-top: 220px;
margin-bottom: 150px;
}
.wave{
top: 0px;
}
.wave_2{
bottom: 0px;
}
.right_star{
bottom: -40px;
width: 220px;
height: 267px;
}
.right_star_rocket{
bottom: -30px;
width: 190px;
height: 199px;
right: 10px;
}
.left_star{
bottom: -40px;
width: 220px;
height: 267px;
}
.left_star_rocket{
bottom: -30px;
width: 190px;
height: 199px;
left: 10px;
}
}
@media (min-width: 600px) and (max-width: 700px){
.views_number_section{
margin-top: 220px;
margin-bottom: 150px;
}
.wave{
top: 0px;
}
.wave_2{
bottom: 0px;
}
.right_star{
bottom: -40px;
width: 190px;
height: 231px;
}
.right_star_rocket{
bottom: -10px;
right: 10px;
width: 160px;
height: 142px;
}
.left_star{
bottom: -40px;
width: 190px;
height: 231px;
}
.left_star_rocket{
bottom: -10px;
left: 10px;
width: 160px;
height: 142px;
}
}
/* *************************** */
@media (min-width: 600px) and (max-width: 700px){
.views_count{
top: -40px;
left: 52%; 
transform: translateX(-50%);
font-size: 43px;
filter: drop-shadow(0px 6px 0px #94D1FF);

}

.plus::after {
top: 50%;
transform: translateY(-50%);
left: -30px;
font-size: 43px;
}
.views_text{
bottom: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
}
}
@media (min-width: 700px) and (max-width: 800px){
.views_count{
top: -45px;
left: 52%; 
transform: translateX(-50%);
font-size: 55px;
filter: drop-shadow(0px 8px 0px #94D1FF);

}

.plus::after {
top: 50%;
transform: translateY(-50%);
left: -35px;
font-size: 55px;
}
.views_text{
bottom: -10px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
}
}
/* //////////////////////////////////////////// */
@media (min-width: 500px) and (max-width: 600px){

.views_count{
top: -35px;
left: 52%; 
transform: translateX(-50%);
font-size: 36px;
filter: drop-shadow(0px 4px 0px #94D1FF);

}

.plus::after {
top: 50%;
transform: translateY(-50%);
left: -25px;
font-size: 36px;
}
.views_text{
bottom: -5px;
left: 50%;
transform: translateX(-50%);
font-size: 22px;
}
}



@media (min-width: 500px) and (max-width: 600px){
.views_number_section{
margin-top: 180px;
margin-bottom: 150px;
}
.wave{
top: 0px;
}
.wave_2{
bottom: 0px;
}
.wave_3{
top: 50px;
}
.right_star{
bottom: -20px;
width: 160px;
height: 194px;
}
.right_star_rocket{
bottom: 10px;
right: 10px;
width: 130px;
height: 115px;
}
.left_star{
bottom: -20px;
width: 160px;
height: 194px;
}
.left_star_rocket{
bottom: 10px;
left: 10px;
width: 130px;
height: 115px;
}
}


@media (min-width: 400px) and (max-width: 500px){
.views_count{
top: -25px;
left: 52%; 
transform: translateX(-50%);
font-size: 31px;
filter: drop-shadow(0px 4px 0px #94D1FF);

}
.odometer2 {

letter-spacing: 0px;
}

.plus::after {
top: 50%;
transform: translateY(-50%);
left: -20px;
font-size: 31px;
}
.views_text{
bottom: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
}
}
@media (min-width: 400px) and (max-width: 500px){
.views_number_section{
margin-top: 75px;
margin-bottom: 150px;
}
.wave{
top: 0px;
}
.wave_2{
bottom: 0px;
}
.wave_3{
top: 40px;
}
.right_star{
bottom: -10px;
width: 110px;
height: 134px;
}
.right_star_rocket{
bottom: -8px;
right: 0px;
width: 110px;
height: 100px;
}
.left_star{
bottom: -10px;
width: 110px;
height: 134px;
}
.left_star_rocket{
bottom: -8px;
left: 0px;
width: 110px;
height: 100px;
}
}
@media (max-width: 400px){
.views_count{
top: -25px;
left: 52%; 
transform: translateX(-50%);
font-size: 26px;
filter: drop-shadow(0px 4px 0px #94D1FF);

}
.odometer2 {

letter-spacing: 0px;
}

.plus::after {
top: 50%;
transform: translateY(-50%);
left: -20px;
font-size: 26px;
}
.views_text{
bottom: -10px;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
}
}
@media (max-width: 400px){
.views_number_section{
margin-top: 75px;
margin-bottom: 150px;
}
.wave{
top: 0px;
}
.wave_2{
bottom: 0px;
}
.wave_3{
top: 40px;
}
.right_star{
bottom: -5px;
width: 100px;
height: 124px;
}
.right_star_rocket{
bottom: -3px;
right: 0px;
width: 105px;
height: 95px;
}
.left_star{
bottom: -5px;
width: 100px;
height: 124px;
}
.left_star_rocket{
bottom: -3px;
left: 0px;
width: 105px;
height: 95px;
}
}

/*///////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////*/
/*///////////// start 3maly box ///////////////////////////////*/
.a3maly_box{
direction: rtl;
margin-bottom: 100px;
}
.a3maly_head_box{
display: block;
margin: 0 auto;
width: fit-content;
position: relative;
}
.a3maly_head{
font-weight: 700;
font-size: 91px;
line-height: 136px;
text-align: right;
color: #0618C4;
transform: rotate(-1.99deg);
z-index: 5;
}
.a3maly_sub_head{
font-style: normal;
font-weight: 300;
font-size: 38px;
line-height: 61px;
text-align: center;
color: #000000;
z-index: 5;
}
.a3maly_shape{
position: absolute;
z-index: -1;
width: 630px;
top: 37px;
right: 50%;
transform: translateX(50%);
}
/* //////////////////////////////////// */
/* //////media query for a3maly head //////////// */
@media screen and (max-width: 1400px){
.a3maly_box{
margin-bottom: 100px;
}
.a3maly_head{
font-size: 60px;
line-height: 136px;
}
.a3maly_sub_head{
font-size: 30px;
line-height: 5px;
}
.a3maly_shape{
width: 500px;
top: 37px;
right: 50%;
}
}
@media screen and (max-width: 800px){
.a3maly_box{
margin-bottom: 100px;
margin-top: -20px;
}
.a3maly_head{
font-size: 35px;
line-height: 100px;
}
.a3maly_sub_head{
font-size: 20px;
line-height: 10px;
}
.a3maly_shape{
width: 330px;
top: 37px;
right: 50%;
}
}
@media screen and (max-width: 500px){
.a3maly_box{
margin-bottom: 100px;
margin-top: -75px;
}
.a3maly_head{
font-size: 30px;
line-height: 100px;
}
.a3maly_sub_head{
font-size: 18px;

margin-top: -11px !important;
}
.a3maly_shape{
width: 280px;
top: 37px;
right: 50%;
}
}

/* //////////////////////////////////// */
/* //////////////////////////////////// */
/* //////// start all video box ////////*/
.a3maly_videos_box_video_slider {
width: 100%;
height: 575px;
margin-top: 110px;
background: #0618c4;
position: relative;
z-index: -2;
margin-bottom: 100px;
}
.net_background_video_slider {
position: absolute;
width: 100%;
height: 726px;
bottom: 0px;
right: 0;
background-color: transparent;
background-image: linear-gradient(
0deg,
hsla(206, 100%, 79%, 0.5) 1px,
transparent 1px
),
linear-gradient(90deg, hsla(206, 100%, 79%, 0.5) 1px, transparent 1px);
background-size: 35px 35px;
z-index: -1;
}
/* Animation_videos */
:root {
--gap-width_video_slider: 200px;
--slide-width_video_slider: 300px;
--slide-height_video_slider: 514px;
--scroll-duration_video_slider:35s;
--total-slides_video_slider: 5; /* This is the number of original slides */

/* This calculates the width of N slides and N-1 gaps between them */
--content-width_video_slider: calc(
(var(--total-slides_video_slider) * var(--slide-width_video_slider)) +
((var(--total-slides_video_slider) - 1) * var(--gap-width_video_slider))
);
/* The track needs to be wide enough for its content PLUS the gap that would follow it */
--track-width_video_slider: calc(var(--content-width_video_slider) + 1 * var(--gap-width_video_slider));
}

.all_video_box_video_slider {
position: relative;
}

.carousel_video_slider {
overflow: hidden;
width: 100%;
position: absolute;
top: -735px;
display: flex;
flex-wrap: nowrap;
}

.carousel-track_video_slider {
display: flex;
gap: var(--gap-width_video_slider);
position: relative;
flex-shrink: 0;
min-width: var(--track-width_video_slider);
animation: scroll_video_slider var(--scroll-duration_video_slider) linear infinite;
will-change: transform;
transition: transform 0.5s ease-in-out;
}

.slide_video_slider {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 0 0 var(--slide-width_video_slider);
height: var(--slide-height_video_slider);
position: relative;
overflow: hidden;
cursor: pointer;
transition: 0.3s ease;
z-index: 1;
background: #c9e8ff;
border: 12px solid #c9e8ff;
border-radius: 30px;
margin-top: 90px;
}

.vd_thumb_video_slider {
width: 100%;
height: 100%;
clip-path: inset(0 round 40px);
background: #000000;
}

.video_thumbnail_video_slider {
width: 100%;
height: 100%;
clip-path: inset(0 round 40px);
z-index: 1000000;
}

.hidden_video_slider {
display: none !important;
}

.slide_video_slider:hover {
transform: translateY(-90px);
transition: 0.3s ease;
}

/* Centered slide styles */
.slide_video_slider.centered_video_slider {
position: fixed !important;
top: 40% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 10000000 !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
transition: all 0.5s ease-in-out !important;
width: 390px !important;
height: 678px !important;
}

.slide_video_slider.centered_video_slider:hover {
transform: translate(-50%, -50%) !important;
}

/* Overlay for clicking outside */
.overlay_video_slider {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10000000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}

.overlay_video_slider.active_video_slider {
opacity: 1;
visibility: visible;
}

/* Animation paused state */
.carousel-track_video_slider.paused_video_slider {
animation-play-state: paused !important;
}

@keyframes scroll_video_slider {
0% {
transform: translateX(0);
}
100% {
/* The animation should move by the content width plus one gap,
because the track itself has the gap built-in. */
transform: translateX(
calc(-1 * var(--content-width_video_slider) - 1 * var(--gap-width_video_slider))
);
}
}

@media screen and (max-width: 767px){
:root {
--gap-width_video_slider: 90px;
--slide-width_video_slider: 260px;
--slide-height_video_slider: 440px;
}
.carousel_video_slider {
top: -700px;
}
/* Centered slide styles */
.slide_video_slider.centered_video_slider {
width: 360px !important;
height: 625px !important;
}
}

/* ////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////// */
/* //////////// start video number box ///////////////// */
.vd_number_box{
margin: 150px auto;
margin-bottom: 20px;
}
@media screen and (min-width: 1440px){
.vd_number_box .container{
width: 1100px;
}
}
.vd_number_box .container{
max-width: 1100px;
width: 87%;
}


.vd_main_box{
width: 100%;
height: 170px;
background: #94D1FF;
border-radius: 20px;
position: relative;
margin: 0 auto;
}

.glowing_star{
position: absolute;
left: -80px;
top: -30px;
width: 220px;
height: 220px;
}

.vd_sub_box{
position: absolute;
width: 35%;
height: 100%;
right: 0;
top: 0;
background: #0618C4;
border-radius: 28px;
}

.videos_number{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-weight: 700;
font-size: 115.596px;
line-height: 173px;
text-align: right;
color: #94D1FF;
}

.vd_number_text{
position: absolute;
right:  41%;
top: 20px;
width: 45%;
font-weight: 400;
font-size: 41.1969px;
line-height: 150%;
text-align: center;
color: #5C93BC;
text-decoration: none;
border: none;
letter-spacing: 0;
word-spacing: 0;
text-decoration: none !important;
text-shadow: none !important;
direction: rtl !important;
unicode-bidi: isolate ;
}
/* ///////////////////////////////////////////////// */
/* ///////////// start media query for //////////// */
@media screen and (max-width: 1270px){

/* .vd_number_box .container{
} */
.vd_main_box{
height: 150px;
}

.glowing_star{
position: absolute;
left: -70px;
top: -30px;
width: 200px;
height: 200px;
}

.vd_sub_box{
width: 35%;
height: 100%;
right: 0;
top: 0;
}

.videos_number{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-weight: 700;
font-size: 80px;
line-height: 173px;
}

.vd_number_text{
right:  41%;
top: 30px;
width: 45%;
font-weight: 400;
font-size: 30px;
line-height: 150%;
}
}
/* /////////////////////////////////////////// */
@media screen and (max-width: 1000px){

.vd_number_box .container{
margin-top: -50px;
}
.vd_main_box{
height: 140px;
}

.glowing_star{
position: absolute;
left: -70px;
top: -30px;
width: 180px;
height: 180px;
}

.vd_sub_box{
width: 35%;
height: 100%;
right: 0;
top: 0;
}

.videos_number{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-weight: 700;
font-size: 70px;
line-height: 173px;
}

.vd_number_text{
right:  41%;
top: 30px;
width: 45%;
font-weight: 400;
font-size: 27px;
}
}
@media screen and (max-width: 860px){

.vd_number_box .container{
margin-top: -50px;
}
.vd_main_box{
height: 120px;
}

.glowing_star{
position: absolute;
left: -70px;
top: -30px;
width: 170px;
height: 170px;
}

.vd_sub_box{
width: 35%;
height: 100%;
right: 0;
top: 0;
}

.videos_number{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-weight: 700;
font-size: 50px;
line-height: 173px;
}

.vd_number_text{
right:  41%;
top: 25px;
width: 45%;
font-weight: 400;
font-size: 20px;
}
}
@media screen and (max-width: 767px){

.vd_number_box .container{
margin-top: -50px;
max-width: 455px;
width: 100%;
}
.vd_main_box{
height: 120px;
border-radius: 20px;

}

.glowing_star{
position: absolute;
left: -50px;
top: 50%;
transform: translateY(-50%);
width: 140px;
height: 140px;
}

.vd_sub_box{
width: 35%;
height: 100%;
right: 0;
top: 0;
border-radius: 20px;
}

.videos_number{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-weight: 800;
font-size: 43px;
line-height: 173px;
}

.vd_number_text{
right:  160px;
top: 50%;
transform: translateY(-50%);
width: 45%;
font-weight: 400;
font-size: 20px;
}
}
@media screen and (max-width: 570px){

.vd_number_box .container{
margin-top: -50px;
max-width: 448px;
width: 100%;
}
.vd_main_box{
height: 120px;
border-radius: 20px;

}

.glowing_star{
position: absolute;
left: -50px;
top: 50%;
transform: translateY(-50%);
width: 140px;
height: 140px;
}

.vd_sub_box{
width: 35%;
height: 100%;
right: 0;
top: 0;
border-radius: 20px;
}

.videos_number{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-weight: 800;
font-size: 40px;
line-height: 173px;
}

.vd_number_text{
right:  150px;
top: 50%;
transform: translateY(-50%);
width: 45%;
font-weight: 400;
font-size: 20px;
}
}
@media screen and (max-width: 500px){

.vd_number_box .container{
margin-top: -50px;
max-width: 525px;
width: 100%;
}
.vd_main_box{
height: 120px;
border-radius: 20px;

}

.glowing_star{
position: absolute;
left: -35px;
top: 50%;
transform: translateY(-50%);
width: 140px;
height: 140px;
}

.vd_sub_box{
width: 35%;
height: 100%;
right: 0;
top: 0;
border-radius: 20px;
}

.videos_number{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-weight: 800;
font-size: 40px;
line-height: 173px;
}

.vd_number_text{
right:  160px;
top: 50%;
transform: translateY(-50%);
width: 42%;
font-weight: 400;
font-size: 18px;
}
}
@media screen and (max-width: 460px){

.vd_number_box .container{
margin-top: -50px;
max-width: 525px;
width: 100%;
}
.vd_main_box{
height: 120px;
border-radius: 20px;

}

.glowing_star{
position: absolute;
left: -35px;
top: 50%;
transform: translateY(-50%);
width: 125px;
height: 125px;
}

.vd_sub_box{
width: 35%;
height: 100%;
right: 0;
top: 0;
border-radius: 20px;
}

.videos_number{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-weight: 800;
font-size: 33px;
line-height: 173px;
}

.vd_number_text{
left:  65px;
top: 50%;
transform: translateY(-50%);
width: 42%;
font-weight: 400;
font-size: 15px;
}
}
/* /////////////////////////////////////////////// */
/* ////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////// */
/* //////////// start omala & dowl ///////////////// */
.omla_dowl{
margin: 100px 0;
margin-top: 0;
direction: rtl;
}
@media screen and (min-width: 1440px){
.omla_dowl .container{
width: 1100px;
}
}
.omla_dowl .container{
max-width: 1100px;
width: 100%;

}
.omla_dowl_box{
/* height: 200px; */
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 30px;
}

.omla_box{
width: 50%;
height: 170px;
background-color: #94d1ff;
border-radius: 30px;
position: relative;
}

.omla_text{
position: absolute;
width: 45%;
line-height: 1.3;
left: 10px;
bottom: 10px;
color: #5C93BC;
text-align: right;
font-size: 27px;
z-index: 1;
}
.omala_eub_right_box{
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
border-radius: 30px ;
background-color: #0618C4;
}
.omala_eub_left_box{
position: absolute;
left: 0;
top: 0;
width: 60%;
height: 50%;
border-radius: 30px ;
background-color: #94d1ff;
}
.omla_count{
position: absolute;
height: 158.26px;
left: 53%;
transform: translateX(-50%);
top: 3%;
direction: ltr;
font-weight: 700;
font-size: 110px;
line-height: 174px;
text-align: right;
color: #94D1FF;
}

.ameel_label{
position: absolute;
height: 104px;
left: 58%;
transform: translateX(-50%);
top: -15px;
font-weight: 500;
font-size: 70px;
line-height: 104px;
text-align: center;
color: #19127C;
}


/* ////// */
.dowl_box{
width: 50%;
height: 170px;
background-color: #94d1ff;
border-radius: 30px;
position: relative;
}

.dowl_text{
position: absolute;
width: 40%;
line-height: 1.3;
left: 25px;
bottom: 7px;
color: #5C93BC;
text-align: right;
font-size: 23px;
z-index: 1;
}
.dowl_eub_right_box{
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
border-radius: 30px ;
background-color: #0618C4;
}

.dowl_eub_left_box{
position: absolute;
left: 0;
top: 0;
width: 60%;
height: 50%;
border-radius: 30px ;
background-color: #94d1ff;
}

.dowl_count{
position: absolute;
height: 158.26px;
right: -50%;
top: 50%;
transform: translate(-140%,-50%);
/* top: 20px; */
direction: ltr;
font-weight: 700;
font-size: 110px;
line-height: 174px;
text-align: right;
color: #94D1FF;
}

.dowl_label{
position: absolute;
height: 104px;
font-weight: 500;
font-size: 55px;
line-height: 104px;
text-align: center;
color: #19127C;
left: 73%;
transform: translateX(-50%);
top: -20px;
}
/* //////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////// */
/* ////////// start media query for omla & dowl count //////////////////////// */
@media screen and (max-width: 1100px) {
.omla_dowl{
margin: 80px 0;
margin-top: 0;
}
.omla_dowl .container{
max-width: 900px;
}
.omla_box{
width: 50%;
height: 150px;
}
.omla_text{
width: 45%;
line-height: 1.3;
left: 10px;
bottom: 10px;
font-size: 22px;
}
.omla_count{
left: 53%;
transform: translateX(-50%);
top: -3%;
font-size: 92px;
line-height: 174px;
}

.ameel_label{
height: 104px;
left: 60%;
transform: translateX(-50%);
top: -15px;
font-size: 55px;
line-height: 104px;
}
/* *************************************** */
/* *************************************** */
.dowl_box{
width: 50%;
height: 150px;
}
.dowl_text{
width: 45%;
line-height: 1.2;
left: 6px;
bottom: 9px;
font-size: 19px;
} 
.dowl_count{
height: 158.26px;
right: -50%;
top: 50%;
transform: translate(-130%,-50%);
font-size: 92px;
line-height: 174px;
}

.dowl_label{
height: 104px;
font-size: 55px;
line-height: 104px;
left: 73%;
transform: translateX(-50%);
top: -20px;
}
}
/* ////////////////////////////////// */
@media screen and (max-width: 900px) {
.omla_dowl{
margin: 80px 0;
margin-top: 0;
}
.omla_dowl .container{
max-width: 800px;
}
.omla_box{
width: 50%;
height: 160px;
}
.omla_text{
width: 45%;
line-height: 1.4;
left: 4px;
bottom: 17px;
font-size: 20px;
}
.omla_count{
left: 55%;
top: 50%;
transform: translate(-50%,-50%);
font-size: 75px;
line-height: 174px;
}

.ameel_label{
height: 104px;
left: 58%;
transform: translateX(-50%);
top: -20px;
font-size: 50px;
line-height: 104px;
}
/* *************************************** */
/* *************************************** */
.dowl_box{
width: 50%;
height: 160px;
}
.dowl_text{
width: 45%;
line-height: 1.2;
left: 4px;
bottom: 15px;
font-size: 17px;
} 
.dowl_count{
height: 158.26px;
top: 46%;
left: 45%;
transform: translate(-50%,-50%);
font-size: 75px;
line-height: 174px;
}

.dowl_label{
height: 104px;
font-size: 50px;
line-height: 104px;
left: 70%;
transform: translateX(-50%);
top: -20px;
}
}

@media screen and (max-width: 767px) {
.omla_dowl{
margin: 20px 0;
margin-top: 25px;
}
.omla_dowl .container{
max-width: 500px;
}
.omla_dowl_box{
/* height: 200px; */
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
row-gap: 40px;
margin: 40px 0;
margin-bottom: 120px;

}
.omla_box{
width: 90%;
height: 120px;
border-radius: 20px ;

}

.omala_eub_right_box{
width: 45%;
height: 100%;
border-radius: 20px ;
}
.omala_eub_left_box{
width: 68%;
height: 50%;
border-radius: 20px ;
}
.omla_text{
width: 45%;
line-height: 1.7;
left: 22px;
bottom: 8px;
font-size: 16px;
}
.omla_count{
left: 55%;
top: 50%;
transform: translate(-50%,-50%);
font-size: 50px;
line-height: 174px;
}

.ameel_label{
height: 104px;
left: 70%;
transform: translateX(-50%);
top: -25px;
font-size: 33px;
line-height: 104px;
}
/* *************************************** */
/* *************************************** */
.dowl_box{
width: 90%;
height: 120px;
border-radius: 20px ;
}
.dowl_eub_right_box{
width: 45%;
height: 100%;
border-radius: 20px ;
}

.dowl_eub_left_box{
width: 68%;
height: 50%;
border-radius: 20px ;
}

.dowl_text{
width: 46%;
line-height: 1.8;
left: 18px;
bottom: 10px;
font-size: 14px;
} 
.dowl_count{
height: 158.26px;
top: 46%;
left: 32%;
transform: translate(-50%,-50%);
font-size: 50px;
line-height: 174px;
}

.dowl_label{
height: 104px;
left: 75%;
transform: translateX(-50%);
top: -25px;
font-size: 33px;
line-height: 104px;
}
}

@media screen and (max-width: 500px) {
.omla_box{
width: 100%;
height: 120px;
}
.omla_dowl_box{
margin: 40px 0;

}
/* *************************************** */
/* *************************************** */
.dowl_box{
width: 100%;
height: 120px;
border-radius: 20px ;
}
.dowl_count{
height: 158.26px;
/* top: 46%;
right: 50%;
transform: translate(-50%,-50%); */
top: 50%;
left: 33%;
transform: translate(-50%,-50%);
font-size: 50px;
line-height: 174px;
}
.dowl_text{
width: 49%;
line-height: 1.6;
left: 8px;
bottom: 10px;
font-size: 14px;
} 
}


/* ////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////// */
/* ///////////////// start omlaay section  /////////////////////////////*/
.omlaay_head_cont{
direction: rtl;
margin-bottom: 100px;
}
.omlaay_head_box{
display: block;
margin: 0 auto;
width: fit-content;
position: relative;
}
.omlaay_head{
font-weight: 700;
font-size: 78px;
line-height: 136px;
text-align: right;
color: #0618C4;
transform: rotate(-1.99deg);
z-index: 5;
}
.omlaay_sub_head{
font-style: normal;
font-weight: 300;
font-size: 32px;
line-height: 61px;
text-align: right;
color: #000000;
direction: ltr;
position: relative;
margin-top: 10px;
}

.emoj_hand{
position: absolute;
left: 20px;
top: 0px;
}
.omlaay_shape{
position: absolute;
z-index: -1;
width: 630px;
top: 45px;
right: 50%;
transform: translateX(50%);
}
/* ////////////////////////////////////////////////////////////////////// */
/* ///////////////// start media query omlaay section  /////////////////////////////*/
@media screen and (max-width: 1400px){
.omlaay_head_cont{
margin-bottom: 60px;
margin-top: -50px;
}
.omlaay_head{
font-weight: 700;
font-size: 65px;
line-height: 136px;
}
.omlaay_sub_head{
font-size: 25px;
line-height: 61px;
margin-top: -15px;
}
.emoj_hand{
left: 37px;
top: 7px;
}
.emoj_hand_img{
width: 35px;
height: 36px;
}
.omlaay_shape{
width: 450px;
top: 60px;
right: 50%;
transform: translateX(50%);
}
}
@media screen and (max-width: 800px){
.omlaay_head_cont{
margin-bottom: 40px;
margin-top: -65px;

}
.omlaay_head{
font-weight: 700;
font-size: 47px;
line-height: 136px;
}
.omlaay_sub_head{
font-size: 18px;
line-height: 61px;
margin-top: -45px;
}
.emoj_hand{
left: 32px;
top: 5px;
}
.emoj_hand_img{
width: 24px;
height: 25px;
}
.omlaay_shape{
width: 300px;
top: 58px;
right: 50%;
transform: translateX(50%);
}
}
@media screen and (max-width: 500px){
.omlaay_head_cont{
margin-bottom: 40px;
margin-top: 20px;
}
.omlaay_head{
font-weight: 700;
font-size: 35px;
line-height: 136px;
}
.omlaay_sub_head{
font-size: 13px;
line-height: 61px;
margin-top: -55px;
}
.emoj_hand{
left: 22px;
top: 5px;
}
.emoj_hand_img{
width: 22px;
height: 23px;
}
.omlaay_shape{
width: 250px;
top: 58px;
right: 50%;
transform: translateX(50%);
}
}



/* ///////////////////////////////////////////////////////////// */
/* /////////// start omlaay  orgs logo ///////////////////////// */
.omlaay_box {
width: 100%;
height: 400px;
margin-top: 180px;
position: relative;
z-index: -2;
}
.omlaay_net_background {
position: absolute;
width: 100%;
height: 580px;
top: -180px;
right: 0;
background-color: transparent;
background-image: linear-gradient(
0deg,
hsla(206, 100%, 79%, 0.5) 1px,
transparent 1px
),
linear-gradient(90deg, hsla(206, 100%, 79%, 0.5) 1px, transparent 1px);
background-size: 25px 25px;
z-index: -1;
}

/* Animation_omlaa_logo */
:root {
--gap-width_logos: 150px;
--slide-width_logos: 300px;
--scroll-duration_logos: 50s; /* Adjust for desired speed */
--total-slides_logos: 9; /* Number of original slides */

/* This calculates the width of N slides and N-1 gaps between them */
--content-width_logos: calc(
(var(--total-slides_logos) * var(--slide-width_logos)) +
((var(--total-slides_logos) - 1) * var(--gap-width_logos))
);
/* The track needs to be wide enough for its content PLUS the gap that would follow it */
--track-width: calc(
var(--content-width_logos) + var(--gap-width_logos)
);
}

.all_omlaa_logos_box {
position: relative;
/* Ensure this container is wide enough to hold the carousel */
width: 100%;
}

.logos_carousel {
overflow: hidden; /* Hide anything outside the carousel area */
width: 100%;
position: absolute;
top: -670px; /* Adjust this value as needed for your layout */

/* Use flexbox for the carousel itself to lay out the two tracks side-by-side */
display: flex;
flex-wrap: nowrap; /* Ensure the tracks stay on a single line */
}

.logos_carousel-track {
display: flex;
gap: var(--gap-width_logos);

/* Prevent the track from shrinking and ensure it takes its full calculated width */
flex-shrink: 0;
min-width: var(--track-width); /* Crucial for animation calculation */

/* Apply the animation to both tracks */
animation: scroll_logo var(--scroll-duration_logos) linear infinite;
will-change: transform; /* Hint to the browser for performance optimization */
}

.logos_slide {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* Ensure each slide takes its defined width */
flex: 0 0 var(--slide-width_logos);
position: relative;
overflow: visible; /* Allows content like h4 to overflow if needed */
transition: 0.3s ease; /* Kept from original, but might not be needed for animation */
margin-top: 90px;
}

.logos_slide h4 {
position: absolute;
display: none; /* Text is hidden based on your original code */
text-align: center;
font-size: 18px;
color: #1d1981;
font-weight: 600;
bottom: -10px;
}

.logos_img_comp {
filter: grayscale(100%);
width: 100%;
height: 100%;
object-fit: contain; /* Ensure images fit within their containers */
}
/* Specific image dimensions - adjust as needed */
.akhdar_img {
width: 250px;
height: 85px;
}
.ethad_img {
width: 300px;
height: 300px;
}
.KimCam_img {
width: 250px;
height: 153px;
filter: invert(60%);
}
.Soor_img {
width: 250px;
height: 73px;
filter: invert(50%);
}
.gahezia_img {
width: 300px;
height: 96px;
}
.had_img {
width: 300px;
height: 83px;
}
.qasem_img {
width: 300px;
height: 89px;
}
.shorta_img {
width: 180px;
height: 184px;
}
.lifestyle_img {
width: 330px;
height: 330px;
}

/* Keyframes for the continuous scroll */
@keyframes scroll_logo {
0% {
transform: translateX(0);
}
100% {
/* The animation should move by the content width plus one gap,
because the track itself has the gap built-in. */
transform: translateX(
calc(-1 * var(--content-width_logos) - 1 * var(--gap-width_logos))
);
}
}
/* Optional: Pause animation on hover */
/* .logos_carousel:hover .logos_carousel-track {
animation-play-state: paused;
} */

@media screen and (max-width: 767px){
  :root {
    --gap-width_logos: 20px;
    --slide-width_logos: 200px;
    /* This calculates the width of N slides and N-1 gaps between them */
    --content-width_logos: calc(
    (var(--total-slides_logos) * var(--slide-width_logos)) +
    ((var(--total-slides_logos) - 1) * var(--gap-width_logos))
    );
    /* The track needs to be wide enough for its content PLUS the gap that would follow it */
    --track-width: calc(
    var(--content-width_logos) + var(--gap-width_logos)
    );
  }

  .logos_carousel {
    top: -620px;
    }
  .akhdar_img {
    width: 150px;
    height: 50px;
    }

    .ethad_img {
    width: 180px;
    height: 180px;
    }

    .KimCam_img {
    width: 150px;
    height: 73px;
    }

    .Soor_img {
    width: 150px;
    height: 44px;
    }

    .gahezia_img {
    width: 190px;
    height: 61px;
    }

    .had_img {
    width: 195px;
    height: 54px;
    }

    .qasem_img {
    width: 150px;
    height: 45px;
    }

    .shorta_img {
    width: 150px;
    height: 153px;
    }
    .lifestyle_img {
    width: 200px;
    height: 200px;
    }
    
}

/* //////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////// */
/* Animation_omlaa_logo left */
/* Animation_omlaa_logo left */
:root {
--gap-width_logos_left: 160px;
--slide-width_logos_left: 200px;
--scroll-duration_logos_left: 50s;
--total-slides_logos_left: 9;

/* This calculates the width of N slides and N-1 gaps between them */
--content-width_logos_left: calc(
(var(--total-slides_logos_left) * var(--slide-width_logos_left)) +
((var(--total-slides_logos_left) - 1) * var(--gap-width_logos_left))
);
/* The track needs to be wide enough for its content PLUS the gap that would follow it */
--track-width_logos_left: calc(
var(--content-width_logos_left) + 1 * var(--gap-width_logos_left)
);
}

.all_omlaa_logos_box_left {
position: relative;
width: 100%; /* Ensure this container is wide enough */
}

.logos_carousel_left {
overflow: hidden;
width: 100%;
position: absolute;
top: -360px; /* Adjust this value as needed for your layout */
/* Use flexbox to lay out the two tracks side-by-side */
display: flex;
flex-wrap: nowrap; /* Ensure the tracks stay on a single line */
}

.logos_carousel-track_left {
display: flex;
gap: var(--gap-width_logos_left);
position: relative;
/* Ensure the track takes only the width of its content and doesn't shrink */
flex-shrink: 0;
/* Use the new --track-width_logos_left which includes the final gap */
min-width: var(--track-width_logos_left);
/* border: 2px solid #000000; */
/* Apply the CSS animation for continuous scrolling */
animation: scroll_logo_left var(--scroll-duration_logos_left) linear
infinite;
will-change: transform; /* Hint to the browser for performance optimization */
}

.logos_slide_left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 0 0 var(--slide-width_logos_left);
position: relative;
/* Removed overflow: hidden from here, it will be on the new circular wrapper */
transition: 0.3s ease;
z-index: 55;
margin-top: 90px;
}

/* New CSS for the circular image wrapper */
.logos_img_wrapper {
width: var(
--slide-width_logos_left
); /* Make it square for perfect circle */
height: var(
--slide-width_logos_left
); /* Make it square for perfect circle */
border: 3px solid #0618c4; /* Apply border here */
border-radius: 50%; /* Make it circular */
overflow: hidden; /* Crucial: Hide parts of the image that extend beyond the circle */
display: flex; /* Use flex to center the image if needed, though object-fit handles it */
justify-content: center;
align-items: center;
}

.logos_img {
width: 100%; /* Image fills its wrapper */
height: 100%; /* Image fills its wrapper */
object-fit: cover; /* Image covers the wrapper, cropping if aspect ratio differs */
}

/* Optional: Pause animation on hover */
/* .logos_carousel_left:hover .logos_carousel-track_left {
animation-play-state: paused;
} */

/* Keyframes for the continuous scroll (leftward) */
@keyframes scroll_logo_left {
0% {
transform: translateX(
calc(
-1 * var(--content-width_logos_left) - 1 * var(--gap-width_logos_left)
)
);
}
100% {
/* The animation should move by the content width plus one gap,
because the track itself has the gap built-in. */
transform: translateX(0);
}
}

@media screen and (max-width: 767px){
  :root {
    --gap-width_logos_left: 100px;
    --slide-width_logos_left: 150px;
    }
    .logos_carousel_left {
      top: -400px; 
      }
}


/* ////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////// */
/* //////////////// start media query for all logos slider ///////////////// */
@media screen and (max-width: 800px){
.omlaay_box{
/* direction: rtl; */
height: 400px;
margin-top: 120px;
}
.omlaay_net_background{
height: 520px;
top: -120px;
right: 0;
background-color: transparent;
background-image: linear-gradient(0deg, hsla(206, 100%, 79%, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, hsla(206, 100%, 79%, 0.5) 1px, transparent 1px);
background-size: 25px 25px; 
z-index: -1;
}
}
@media screen and (max-width: 500px){
.omlaay_box{
/* direction: rtl; */
height: 400px;
margin-top: 170px;
}
.omlaay_net_background{
height: 480px;
top: -160px;
right: 0;
background-color: transparent;
background-image: linear-gradient(0deg, hsla(206, 100%, 79%, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, hsla(206, 100%, 79%, 0.5) 1px, transparent 1px);
background-size: 25px 25px; 
z-index: -1;
}
}


/* //////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////// */
/* /////////////// start podcast shorts box /////////////// */
.podcast_shorts_box{
margin: 0 auto;
margin-top: 150px;
margin-bottom: 50px;
scroll-margin-top: 175px; 
}
@media screen and (min-width: 1440px){
.podcast_shorts_box .container{
width: 1300px;
}
}
.podcast_shorts_box .container{
max-width: 1300px;
/* width: 90%; */
}
.podcast_shorts_main{
margin: 0 auto;
background-image: url("../images/podcast_shorts_bg_img.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 330px;
border-radius: 20px;
position: relative;
}
.podcast_shorts_main::before{
position: absolute;
content: "";
width: 100%;
height: 100%;
bottom: 0px;
right: 0;
background-color: transparent;
background-image: linear-gradient(0deg, #94d1ff4d 1px, transparent 1px),
    linear-gradient(90deg, #94d1ff4d 1px, transparent 1px);
background-size: 50px 22px; 
z-index: 0;
border-radius: 30px;
}

.mic_head_box{
position: absolute;
height: 100%;
width: 35%;
left: 0;
top: 0px;
background: #8ACAF0;
box-shadow: 41px -1px 36.6px -7px rgba(19, 14, 87, 0.31);
border-radius: 18px;
}
.mic_img{
position: absolute;
left: 35px;
top: 25px;
}
.mic_text{
position: absolute;
bottom: 30px;
left: 25px;
font-family: 'Montserrat';
font-weight: 500;
font-size: 29px;
line-height: 30px;
color: #0E23C7;
}

.shotrs_text_1{
position: absolute;
right: 80px;
top: 45px;
font-family: 'Montserrat';
font-style: italic;
font-weight: 900;
font-size: 85px;
text-align: right;
color: #B2DEFF;
z-index: 0;
}
.shotrs_text_2{
position: absolute;
right: 84px;
top: 49px;
font-family: 'Montserrat';
font-style: italic;
font-weight: 900;
font-size: 85px;
text-align: right;
color: transparent;
-webkit-text-stroke: thin #B2DEFF;

}


.otlb_khedmty {
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: 800;
color: #ffffff;
padding: 10px 40px;
border-radius: 78px;
margin-top: 30px;
position: absolute;
right: 80px;
bottom: 70px;
background: linear-gradient(120deg, #262d5c, #ae9712, #262d5c);
background-size: 200% 100%;
background-position: 100% 0;
transition: background-position .3s;
animation: gradientAnimation 1s infinite alternate;

}
/* .otlb_khedmty:hover{
background: linear-gradient(120deg, #ae9712, #262d5c, #ae9712);
transition: 0.4s;
} */

@keyframes gradientAnimation {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%;
}
}

.otlb_khedmty::before{
content: "";
position: absolute;
width: 110%;
height: 59.47px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 3px solid #C9E8FF;
border-radius: 40px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 8px;
padding-left: 8px;
}
.otlb_khedmty:hover::before{
border: 3px solid #c4aa16;
transition: 0.4s;
}

/* ///////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////// */
/* ///////// start media query for podcast section ////////////// */
@media screen and (max-width: 1100px){
.podcast_shorts_box{
margin: 0 auto;
margin-top: 120px;
margin-bottom: 50px;
}
.podcast_shorts_box .container{
max-width: 1300px;
width: 90%;
}
.podcast_shorts_main{
width: 100%;
height: 300px;
}
.podcast_shorts_main::before{
width: 100%;
height: 100%;
bottom: 0px;
right: 0;
background-size: 30px 17px; 
border-radius: 30px;
}

.mic_head_box{
height: 100%;
width: 35%;
}
.mic_img{
left: 20px;
top: 20px;
width: 220px;
height: 169px;
}
.mic_text{
bottom: 20px;
left: 25px;
font-size: 23px;
line-height: 32px;
}

.shotrs_text_1{
right: 30px;
top: 20px;
font-weight: 900;
font-size: 70px;
}
.shotrs_text_2{
right: 34px;
top: 24px;
font-weight: 900;
font-size: 70px;
}
.otlb_khedmty {
font-size: 15px;
padding: 10px 30px;
right: 50px;
bottom: 60px;
}
.otlb_khedmty::before{
width: 105%;
height: 50px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 40px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 10px;
padding-left: 10px;
}
}
@media screen and (max-width: 900px){
.podcast_shorts_box{
margin: 0 auto;
margin-top: 100px;
margin-bottom: 50px;
}
.podcast_shorts_box .container{
max-width: 1300px;
width: 95%;
}
.podcast_shorts_main{
width: 100%;
height: 250px;
}
.podcast_shorts_main::before{
width: 100%;
height: 100%;
bottom: 0px;
right: 0;
background-size: 25px 14px; 
border-radius: 30px;
}

.mic_head_box{
height: 100%;
width: 37%;
}
.mic_img{
left: 25px;
top: 25px;
width: 190px;
height: 146px;
}
.mic_text{
bottom: 18px;
left: 25px;
font-size: 19px;
line-height: 25px;
}

.shotrs_text_1{
right: 30px;
top: 30px;
font-size: 50px;
}
.shotrs_text_2{
right: 34px;
top: 30px;
font-size: 50px;
}
.otlb_khedmty {
font-size: 11px;
padding: 10px 30px;
right: 38px;
bottom: 50px;
}
.otlb_khedmty::before{
width: 102%;
height: 45px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 40px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 12px;
padding-left: 12px;
}
}

@media screen and (max-width: 750px){
.podcast_shorts_box{
margin: 0 auto;
margin-top: 60px;
margin-bottom: 50px;
}
.podcast_shorts_box .container{
max-width: 1300px;
width: 95%;
}
.podcast_shorts_main{
width: 100%;
height: 200px;
}
.podcast_shorts_main::before{
width: 100%;
height: 100%;
bottom: 0px;
right: 0;
background-size: 20px 12px; 
border-radius: 30px;
}

.mic_head_box{
height: 100%;
width: 37%;
}
.mic_img{
left: 15px;
top: 15px;
width: 150px;
height: 115px;
}
.mic_text{
bottom: 18px;
left: 25px;
font-size: 17px;
line-height: 22px;
}

.shotrs_text_1{
right: 20px;
top: 20px;
font-size: 38px;
}
.shotrs_text_2{
right: 24px;
top: 20px;
font-size: 38px;
}
.otlb_khedmty {
font-size: 18px;
padding: 8px 22px;
right: 28px;
bottom: 35px;
}
.otlb_khedmty::before{
width: 100%;
height: 45px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 40px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 8px;
padding-left: 8px;
}
}
@media screen and (max-width: 570px){
.podcast_shorts_box{
margin: 0 auto;
margin-top: 70px;
margin-bottom: 50px;
}
.podcast_shorts_box .container{
max-width: 1300px;
width: 95%;
}
.podcast_shorts_main{
width: 100%;
height: 150px;
}
.podcast_shorts_main::before{
width: 100%;
height: 100%;
bottom: 0px;
right: 0;
background-size: 20px 12px; 
border-radius: 30px;
}

.mic_head_box{
height: 100%;
width: 39%;
}
.mic_img{
left: 12px;
top: 12px;
width: 115px;
height: 89px;
}
.mic_text{
bottom: 12px;
left: 20px;
font-size: 15px;
line-height: 20px;
}

.shotrs_text_1{
right: 20px;
top: 20px;
font-size: 38px;
}
.shotrs_text_2{
right: 24px;
top: 20px;
font-size: 38px;
}
.otlb_khedmty {
font-size: 13px;
padding: 8px 16px;
right: 25px;
bottom: 25px;
}
.otlb_khedmty::before{
width: 100%;
height: 35px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 40px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 8px;
padding-left: 8px;
}
}
@media screen and (max-width: 440px){
.podcast_shorts_box{
margin: 0 auto;
margin-top: 0px;
margin-bottom: 50px;
}
.podcast_shorts_box .container{
max-width: 1300px;
width: 95%;
}
.podcast_shorts_main{
width: 100%;
height: 130px;
}
.podcast_shorts_main::before{
width: 100%;
height: 100%;
bottom: 0px;
right: 0;
background-size: 20px 12px; 
border-radius: 30px;
}

.mic_head_box{
height: 100%;
width: 39%;
}
.mic_img{
left: 8px;
top: 8px;
width: 95px;
height: 73px;
}
.mic_text{
bottom: 8px;
left: 20px;
font-size: 12px;
line-height: 17px;
}

.shotrs_text_1{
right: 20px;
top: 20px;
font-size: 30px;
}
.shotrs_text_2{
right: 24px;
top: 20px;
font-size: 30px;
}
.otlb_khedmty {
font-size: 12px;
padding: 7px 16px;
right: 20px;
bottom: 20px;
}
.otlb_khedmty::before{
width: 100%;
height: 30px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 40px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 6px;
padding-left: 6px;
}
}

/* ///////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */
/* ///////////////// start other services section /////////////////////////////// */
.other_services{
margin: 0 auto;
margin-top: 0px;
margin-bottom: 50px;
direction: rtl;
}
@media screen and (min-width: 1440px){
.other_services .container{
width: 1300px;
}
}
.other_services .container{
max-width: 1300px;
}

.other_services_main_box{
display: flex;
gap: 40px;
}

.right_big_box{
position: relative;
width: 48%;
height: 580px;
background: #94D1FF;
border-radius: 18px;
filter: drop-shadow(-10px 12px 38.9px rgba(0, 0, 0, 0.12));
}

.left_two_boxes{
width: 50%;
height: 580px;
display: flex;
flex-direction: column;
row-gap: 20px;
}
.first_box{
position: relative;
width: 100%;
height: 325px;
background: #8ACAF0;
border-radius: 18px;
}

.second_box{
position: relative;
margin: 0 auto;
background-image: url("../images/left_service_box_bg.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 255px;
border-radius: 18px;
}
.second_box::before{
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: transparent;
background-image: linear-gradient(0deg, #94d1ff4d 1px, transparent 1px),
linear-gradient(90deg, #94d1ff4d 1px, transparent 1px);
background-size: 25px 15px; 
z-index: 0s;
border-radius: 20px;
}

.left_service_img_bg{
position: relative;
width: 100%;
height: 100%;
border-radius: 18px;
}
/* //////// */
.whiteboard_img{
position: absolute;
right: 60px;
top: -30px;
}
.Whiteboard_text{
position: absolute;
left: 35px;
bottom: 20px;
font-family: 'IBM Plex Sans Arabic';
font-weight: 500;
font-size: 30px;
color: #19127C;
text-align: left;
line-height: 1.2;
}

.play{
position: absolute;

right: -70px;
top: -45px;

}

.Collage{
position: absolute;
left: 35px;
bottom: 25px;
font-family: 'IBM Plex Sans Arabic';
font-weight: 500;
font-size: 27px;
color: #19127C;
text-align: left;
line-height: 1.2;
}


.clacket_light{
position: absolute;
z-index: 0;
right: -95px;
top: -78px;

}
.clacket_solid{
position: absolute;
z-index: 0;
right: -25px;
top: -67px;

}

.clacket_text{
position: absolute;
left: 35px;
bottom: 25px;
font-family: 'IBM Plex Sans Arabic';
font-weight: 500;
font-size: 27px;
color: #94D1FF;
text-align: left;
line-height: 1.2;
z-index: 0;

}

/* ///////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////// */
/* /////////////// start media query for other servuces ////////////////// */
@media screen and (max-width: 1100px){
.other_services{
margin-top: 0px;
margin-bottom: 50px;
}
.other_services .container{
max-width: 1300px;
width: 90%;
}
.other_services_main_box{
gap: 40px;
}
.right_big_box{
width: 48%;
height: 470px;
border-radius: 18px;
filter: drop-shadow(-10px 12px 38.9px rgba(0, 0, 0, 0.12));
}
.left_two_boxes{
height: 470px;
row-gap: 20px;
}
.first_box{
height: 325px;
}
.second_box{
width: 100%;
height: 255px;
}
.left_service_img_bg{
position: relative;
width: 100%;
height: 100%;
border-radius: 18px;
}
/* //////// */
.whiteboard_img{
right: 50%;
transform: translateX(50%);
top: -30px;
width: 300px;
height: 330px;
}
.Whiteboard_text{
left: 30px;
bottom: 20px;
font-size: 23px;
line-height: 1.3;
}
.play{
right: -50px;
top: -25px;
width: 300px;
height: 214px;
}
.Collage{
left: 30px;
bottom: 20px;
font-size: 23px;
line-height: 1.3;
}
.clacket_light{
right: -75px;
top: -58px;
width: 250px;
height: 250px;
}
.clacket_solid{
right: -5px;
top: -47px;
width: 250px;
height: 250px;
}
.clacket_text{
left: 30px;
bottom: 20px;
font-size: 23px;
line-height: 1.3;
}
}
@media screen and (max-width: 900px){
.other_services{
margin-top: 0px;
margin-bottom: 50px;
}
.other_services .container{
max-width: 1300px;
width: 95%;
}
.other_services_main_box{
gap: 40px;
}
.right_big_box{
width: 48%;
height: 380px;
border-radius: 18px;
filter: drop-shadow(-10px 12px 38.9px rgba(0, 0, 0, 0.12));
}
.left_two_boxes{
height: 380px;
row-gap: 20px;
}
.first_box{
height: 325px;
}
.second_box{
width: 100%;
height: 255px;
}
.left_service_img_bg{
position: relative;
width: 100%;
height: 100%;
border-radius: 18px;
}
/* //////// */
.whiteboard_img{
right: 50%;
transform: translateX(50%);
top: -70px;
width: 230px;
height: 353px;
}
.Whiteboard_text{
left: 25px;
bottom: 15px;
font-size: 19px;
line-height: 1.3;
}
.play{
right: -40px;
top: -25px;
width: 220px;
height: 157px;
}
.Collage{
left: 25px;
bottom: 15px;
font-size: 19px;
line-height: 1.3;
}
.clacket_light{
right: -55px;
top: -48px;
width: 190px;
height: 190px;
}
.clacket_solid{
right: -5px;
top: -37px;
width: 190px;
height: 190px;
}
.clacket_text{
left: 25px;
bottom: 15px;
font-size: 19px;
line-height: 1.3;
}
}
@media screen and (max-width: 700px){
.other_services{
margin-top: 0px;
margin-bottom: 50px;
}
.other_services .container{
max-width: 1300px;
width: 95%;
}
.other_services_main_box{
gap: 25px;
}
.right_big_box{
width: 48%;
height: 280px;
border-radius: 18px;
filter: drop-shadow(-10px 12px 38.9px rgba(0, 0, 0, 0.12));
}
.left_two_boxes{
height: 280px;
row-gap: 20px;
}
.first_box{
height: 325px;
}
.second_box{
width: 100%;
height: 255px;
}
.left_service_img_bg{
position: relative;
width: 100%;
height: 100%;
border-radius: 18px;
}
/* //////// */
.whiteboard_img{
right: 50%;
transform: translateX(50%);
top: -20px;
width: 160px;
height: 176px;
}
.Whiteboard_text{
left: 20px;
bottom: 15px;
font-size: 16px;
line-height: 1.3;
}
.play{
right: -28px;
top: -17px;
width: 175px;
height: 125px;
}
.Collage{
left: 20px;
bottom: 5px;
font-size: 16px;
line-height: 1.3;
}
.clacket_light{
right: -45px;
top: -38px;
width: 140px;
height: 140px;
}
.clacket_solid{
right: -10px;
top: -27px;
width: 140px;
height: 140px;
}
.clacket_text{
left: 20px;
bottom: 5px;
font-size: 16px;
line-height: 1.3;
}
}
@media screen and (max-width: 540px){
.other_services{
margin-top: -10px;
margin-bottom: 50px;
}
.other_services .container{
max-width: 1300px;
width: 95%;
}
.other_services_main_box{
gap: 15px;
}
.right_big_box{
width: 48%;
height: 200px;
border-radius: 18px;
filter: drop-shadow(-10px 12px 38.9px rgba(0, 0, 0, 0.12));
}
.left_two_boxes{
height: 200px;
row-gap: 20px;
}
.first_box{
height: 325px;
}
.second_box{
width: 100%;
height: 255px;
}
.left_service_img_bg{
position: relative;
width: 100%;
height: 100%;
border-radius: 18px;
}
/* //////// */
.whiteboard_img{
right: 50%;
transform: translateX(50%);
top: -20px;
width: 125px;
height: 137px;
}
.Whiteboard_text{
left: 20px;
bottom: 15px;
font-size: 14px;
line-height: 1.3;
}
.play{
right: -18px;
top: -12px;
width: 120px;
height: 86px;
}
.Collage{
left: 15px;
bottom: 5px;
font-size: 13px;
line-height: 1.3;
}
.clacket_light{
right: -25px;
top: -28px;
width: 98px;
height: 98px;
}
.clacket_solid{
right: 0px;
top: -17px;
width: 98px;
height: 98px;
}
.clacket_text{
left: 15px;
bottom: 5px;
font-size: 13px;
line-height: 1.3;
}
}
@media screen and (max-width: 450px){
.other_services{
margin-top: -20px;
margin-bottom: 50px;
}
.other_services .container{
max-width: 1300px;
width: 95%;
}
.other_services_main_box{
gap: 15px;
}
.right_big_box{
width: 48%;
height: 180px;
border-radius: 18px;
filter: drop-shadow(-10px 12px 38.9px rgba(0, 0, 0, 0.12));
}
.left_two_boxes{
height: 180px;
row-gap: 15px;
}
.first_box{
height: 325px;
}
.second_box{
width: 100%;
height: 255px;
}
.left_service_img_bg{
position: relative;
width: 100%;
height: 100%;
border-radius: 18px;
}
/* //////// */
.whiteboard_img{
right: 50%;
transform: translateX(50%);
top: -20px;
width: 100px;
height: 110px;
}
.Whiteboard_text{
left: 15px;
bottom: 15px;
font-size: 13px;
line-height: 1.3;
}
.play{
right: -14px;
top: -10px;
width: 100px;
height: 71px;
}
.Collage{
left: 15px;
bottom: 5px;
font-size: 11px;
line-height: 1.3;
}
.clacket_light{
right: -25px;
top: -22px;
width: 88px;
height: 88px;
}
.clacket_solid{
right: 0px;
top: -11px;
width: 88px;
height: 88px;
}
.clacket_text{
left: 15px;
bottom: 5px;
font-size: 11px;
line-height: 1.3;
}
}






/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* //////////// start youtube % contact section //////////////////*/

.youtube_contact{
margin: 0 auto;
margin-top: 120px;
margin-bottom: 50px;
direction: rtl;

}
@media screen and (min-width: 1440px){
.youtube_contact .container{
width: 1000px;
}
}
.youtube_contact .container{
max-width: 1000px;
}

.youtube_contact_box{
display: flex;
justify-content: center;
align-items: center;
}

.contact_btn{
text-decoration: none;
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 600;
font-size: 23px;
text-align: right;
color: #0618C4;
background: #94D1FF;
border: 3.5px solid #0618C4;
border-radius: 105px;
padding: 0px 55px;
padding-bottom: 5px;
padding-left: 90px;
position: relative;
transition: 0.4s;

}
.contact_tringle{
position: absolute;
/* top: 50%;
transform: translateY(-50%); */
right: -35px;
width: 63px;
height: 140%;
transition: 0.6s;
top: 0;
bottom: 0;
margin: auto 0;

}

.contact_btn:hover{
background: #86bce6;
}
/* .contact_btn:hover .contact_tringle{
transform: rotate(360deg) ;
} */


.youtube_btn{
text-decoration: none;
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 600;
font-size: 23px;
text-align: right;
color: #D7F0F2;
background: #FF7174;
border: 3.5px solid #FF0000;
border-radius: 71px;
padding: 0px 55px;
padding-bottom: 5px;
position: relative;
margin-right: -45px;
transition: 0.4s;

}

.youtube_tringle{
position: absolute;
/* top: 50%;
transform: translateY(-50%); */
left: -35px;
width: 63px;
height: 140%;
top: 0;
bottom: 0;
margin: auto 0;
transition: 0.6s;

}

.youtube_btn:hover{
background: #e26466;
}
/* .youtube_btn:hover .youtube_tringle{
transform: rotate(360deg) ;
} */

/* ///////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////// */
/* /////// start media query for youtube % contact /////////*/
@media screen and (max-width: 1000px){
.youtube_contact{
margin: 0 auto;
margin-top: 120px;
margin-bottom: 50px;  
}
.youtube_contact .container{
max-width: 800px;
}
.contact_btn{
font-size: 18px;
border-radius: 50px;
padding: 3px 35px;
/* padding-bottom: 5px; */
padding-left: 50px;
}
.contact_tringle{
right: -25px;
width: 45px;
height: 130%;
top: 0;
bottom: 0;
margin: auto 0;
}
.youtube_btn{
font-size: 18px;
border-radius: 50px;
padding: 3px 35px;
/* padding-bottom: 5px; */
margin-right: -25px;
padding-right: 40px;
}
.youtube_tringle{
left: -25px;
width: 45px;
height: 130%;
top: 0;
bottom: 0;
margin: auto 0;
}
}
@media screen and (max-width: 767px){
.youtube_contact{
margin: 0 auto;
margin-top: 70px;
margin-bottom: 50px;  
}
.youtube_contact .container{
max-width: 600px;
}
.contact_btn{
font-size: 15px;
border-radius: 50px;
padding: 3px 25px;
/* padding-bottom: 5px; */
padding-left: 30px;
}
.contact_tringle{
right: -25px;
width: 45px;
height: 130%;
top: 0;
bottom: 0;
margin: auto 0;
}
.youtube_btn{
font-size: 15px;
border-radius: 50px;
padding: 3px 25px;
/* padding-bottom: 5px; */
margin-right: -25px;
padding-left: 20px;
}
.youtube_tringle{
left: -25px;
width: 45px;
height: 130%;
top: 0;
bottom: 0;
margin: auto 0;
}
}

/* /////////////////////////////////////////////////////////////// */
/* ////////////// start modaona head  ////////////////////////// */
.modaona_head{
margin: 0 auto;
margin-top: 120px;
margin-bottom: 100px;
direction: rtl;
}
@media screen and (min-width: 1440px){
.modaona_head .container{
width: 1000px;
}
}
.modaona_head .container{
max-width: 1000px;
}

.modaona_head_box{
width: fit-content;
margin: 0 auto;
position: relative;
}

.modaona_shape{
position: absolute;
z-index: -1;
width: 230px;
top: -32px;
right: 50%;
transform: translateX(50%);
}

.modaona_head{
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 600;
font-size: 55px;
text-align: center;
color: #000000;
}

.modaona_pen{
position: absolute;
top: -20px;
left: -100px;
}
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* ///////// start media query for modaona head ////////////////// */
@media screen and (max-width: 900px){
.modaona_head{
margin-top: 100px;
margin-bottom: 80px;
}
.modaona_shape{
width: 180px;
top: -32px;
right: 50%;
transform: translateX(50%);
}
.modaona_head{
font-size: 40px;
}
.modaona_pen{
top: -40px;
left: -90px;

}
.modaona_pen_img{
width: 80px;
height: 80px;
}
}
@media screen and (max-width: 700px){
.modaona_head{
margin-top: 100px;
margin-bottom: 80px;
}
.modaona_shape{
width: 160px;
top: -32px;
right: 50%;
transform: translateX(50%);
}
.modaona_head{
font-size: 30px;
}
.modaona_pen{
top: -25px;
left: -80px;

}
.modaona_pen_img{
width: 65px;
height: 65px;
}
}

/* /////////////////////////////////////////////////////////////// */
/* ////////////// start modaona section  ////////////////////////// */
.modaona_container{
margin: 0 auto;
margin-top: 0px;
margin-bottom: 150px;
direction: rtl;
}
.modaona_boxes{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
gap: 40px;
}
.single_modaona_box{
background: #E8E8E8;
border-radius: 18px;
height: 350px;
padding: 20px 30px;
display: flex;
}

.single_modaona_content{
display: flex;
flex-direction: column;
justify-content: end;
}

.single_modaona_title{
font-family: 'IBM Plex Sans Arabic';
font-weight: 600;
font-size: 22px;
text-align: right;
color: #000000;
margin-bottom: 10px
}

.single_modaona_paragraoh{
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 300;
font-size: 17px;
line-height: 1.7;
text-align: right;
color: #000000;
}

.modaona_arrow{
font-size: 25px;
margin-top: 20px;
color: #000000;
}

.modaona_arrow_box{
width: fit-content;
margin-right: auto;
}

/* /////////////////////////////////////////////////////////////// */
/* //////// start media query for modaona section  /////////////// */
@media screen and (max-width: 600px){
.modaona_boxes{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 40px;
}
}




/* //////////// video thum loader //////////// */
.slide_video_slider {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.video_loader {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 0;
  font-family: sans-serif;
  gap: 10px;
  border-radius: 40px;
  /* display: none !important; */
}

.film-reel-spinner {
  position: relative;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at center, #0C00B5 20%, #0C00B5 80%);
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}

.reel-hole {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #000;
  border-radius: 50%;
}

.hole1 { top: 5px; left: 25px; }
.hole2 { top: 25px; left: 5px; }
.hole3 { top: 25px; right: 5px; }
.hole4 { bottom: 5px; left: 25px; }

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* ///////////////// */
.a3maly_head_box{
  margin-bottom: 150px;
}

.more_shorts {
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: 800;
color: #ffffff;
padding: 10px 40px;
border-radius: 78px;
margin: 0 auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
text-wrap: nowrap;
top: 240px;
background: linear-gradient(120deg, #262d5c, #443ac9, #262d5c);
background-size: 200% 100%;
background-position: 100% 0;
transition: background-position .3s;
animation: gradientAnimation 1s infinite alternate;

}
/* .otlb_khedmty:hover{
background: linear-gradient(120deg, #ae9712, #262d5c, #ae9712);
transition: 0.4s;
} */

@keyframes gradientAnimation {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%;
}
}

.more_shorts::before{
content: "";
position: absolute;
width: 110%;
height: 59.47px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 3px solid #C9E8FF;
border-radius: 40px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 8px;
padding-left: 8px;
}
.more_shorts:hover::before{
border: 3px solid #1027f1;
transition: 0.4s;
}

@media screen and (max-width: 1400px){
.more_shorts {
text-decoration: none;
display: inline-block;
font-size: 17px;
font-weight: 800;
color: #ffffff;
padding: 10px 40px;
top: 200px;

}

}

@media screen and (max-width: 800px){
.more_shorts {
text-decoration: none;
display: inline-block;
font-size: 17px;
font-weight: 800;
color: #ffffff;
padding: 10px 40px;
top: 170px;

}

.more_shorts::before{
content: "";
position: absolute;
width: 110%;
height: 55px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 3px solid #C9E8FF;
border-radius: 40px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 3px;
padding-left: 3px;
}
}

/* //////////////////////////////////// */
.blog_home{
  margin-top: 30px !important;
}



.more_modaona {
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: 800;
color: #ffffff;
padding: 10px 40px;
border-radius: 78px;
margin: 0 auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
text-wrap: nowrap;
top: 150px;
background: linear-gradient(120deg, #262d5c, #443ac9, #262d5c);
background-size: 200% 100%;
background-position: 100% 0;
transition: background-position .3s;
animation: gradientAnimation 1s infinite alternate;

}
/* .otlb_khedmty:hover{
background: linear-gradient(120deg, #ae9712, #262d5c, #ae9712);
transition: 0.4s;
} */

@keyframes gradientAnimation {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%;
}
}

.more_modaona::before{
content: "";
position: absolute;
width: 110%;
height: 59.47px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 3px solid #C9E8FF;
border-radius: 40px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 8px;
padding-left: 8px;
}
.more_modaona:hover::before{
border: 3px solid #1027f1;
transition: 0.4s;
}

@media screen and (max-width: 1400px){
.more_modaona {
text-decoration: none;
display: inline-block;
font-size: 17px;
font-weight: 800;
color: #ffffff;
padding: 10px 40px;
top: 150px;

}

}

@media screen and (max-width: 800px){
.more_modaona {
text-decoration: none;
display: inline-block;
font-size: 17px;
font-weight: 800;
color: #ffffff;
padding: 10px 40px;
top: 120px;

}

.more_modaona::before{
content: "";
position: absolute;
width: 110%;
height: 55px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 3px solid #C9E8FF;
border-radius: 40px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 3px;
padding-left: 3px;
}
}