html { scroll-behavior: smooth; }

body{
    direction: rtl;
}


body a{
    color: unset;
    text-decoration: unset;
}

.header{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items:flex-start;

}




.none{
    width: 1px;
    height: 1px;
}
.dark_mode{
    width: 100%;
    /* height: 100vh; */
    background-color: #161616;
    position: relative;
    /* z-index: 2000; */
    clip-path: circle(0% at 39px 54px);
    transition: 1.5s;
    /* z-index: 300; */
}

.menu_container{
    width: 100%;
    height: 55px;
    /* background-color: aquamarine; */
    margin-top: 27px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    position: absolute;

    z-index: 100;
    filter: drop-shadow( 0 0 5px #000);


}


.logo_container{
    width: 136px;
    height: 56px;
    /* background-color: black; */
    margin-right: 29px;

}

.logo{
    width:119px ;
    height:36px ;
    /* background-color: blue; */
    background-image: url(/assets/images/logo.svg);
}

.logo_title{
    font-family:KalamehWeb ;
    font-size:12px ;
    font-weight:bold ;
    color:#ffffff ;
    white-space:nowrap;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */



}

.menu_body{
    /* height: 56px; */
    margin-left: 26px;
    display: flex;
    align-items: center;

}

.social{
    width: 144px;
    height: 25px;
    /* background-color: blueviolet; */
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;

}

.social div{
    width: 25px;
    height: 25px;
    /* background-color: brown; */
    
}

.light_mod{
    background-image: url(/assets/icon/light.svg);
    
}

.instagram{
    background-image: url(/assets/icon/instagram.svg);
}

.telegram{
    background-image: url(/assets/icon/telegram.svg);
}

.whatsapp{
    background-image: url(/assets/icon/whatsapp.svg);
}


.menu{
    width:290px ;
    height:18px ;
    /* background-color: bisque; */
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    font-family:KalamehWeb ;
    font-size:16px ;
    font-weight:500 ;
    margin-left: 28px;
    color: #ffffff;

}

/* ------------------end menu------------------- */




/* ------------------center_container------------------ */

.center_container{
    width:780px ;
    height:810px ;
    position: relative;
    /* background-color: aqua; */
}


.video_container{
    width:780px ;
    height:810px ;
    /* background-color: rgb(43, 165, 165); */
    border-radius: 0 0 390px 390px;
    overflow: hidden;
}


.mouse {
	width: 30px;
	height: 45px;
	border: 1px solid #ffffff;
	border-radius: 20px;
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);

    display: flex;
    flex-flow: column;
    align-items: center;
    
}

.scroll{
    width:6px ;
    height:12px ;
    background-color: #ffffff;
    border-radius: 20px;
    margin-top: 6px;
    animation-name: scroll_animation;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;



}

@keyframes scroll_animation{
    0%{margin-top: 8px; opacity: 1; }
    
    100%{margin-top: 20px; opacity: 0; }

}


.header_data{
    position: absolute;
    top: 132px;
    right: -258px;
    /* background-color: yellow; */

}



.name{
    width: 392px;
    height: 157px;
    /* background-color: aqua; */

    background-image: url(/assets/images/name.svg);
    filter: drop-shadow( 0 0 16px #000);

}

.family_name{
    width: 392px;
    height: 157px;
    /* background-color: aqua; */
    background-image: url(/assets/images/family.svg);
    background-repeat: no-repeat;
    margin-top: -14px;
    filter: drop-shadow( 0 0 16px #000);
    
}

.option{
    width:442px ;
    height:77px ;
    /* background-color: yellow; */
    font-family:KalamehWeb ;
    font-size:30px ;
    font-weight:bold ;
    white-space: nowrap;
    color: #ffffff;
    margin-top: 36px;
    filter: drop-shadow( 0 0 16px #000);

}

.call{
    width:316px ;
    height:56px ;
    /* background-color: yellowgreen; */
    margin-top: 86px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;

}



.call_icon{
    width: 56px;
    height: 56px;
    background-color: #ffffff;
    border-radius: 5px;
    background-image: url(/assets/icon/call.svg);
    background-repeat: no-repeat;
    background-size: 19px 19px;
    background-position: center;

}

.call_des{
    margin-right: 10px;
}

.reserve_time{
    font-family: KalamehWeb;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
}


.reserve_call{
    font-family:KalamehWeb ;
    font-size:16px ;
    font-weight:bold ;
    color: #ffffff;
}



/* ------------------skills------------------ */

.skills{
    width: 320px;
    height: 304px;
    /* background-color: violet; */
    position: absolute;
    top: 272px;
    left: -353px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items:flex-start;

}

.skill_child{
    width:100% ;
    /* height:40px ; */
    /* background-color: yellowgreen; */
    display: flex;
    flex-flow: row nowrap;
    align-items:center ;
    justify-content:flex-start;

}


.skill_dash{
    width:10px ;
    height:5px ;
    background-color: #ffffff;
    border-radius: 5px;
}

.skill_title{
    font-family: KalamehWeb;
    font-size:35px ;
    font-weight:800 ;
    color: #ffffff;
    margin-right: 17px;
    
}




/* ------------------biography------------------ */

.biography{
    width: 1172px;
    height: 488px;
    /* background-color: aqua; */
    margin: 279px auto 0 auto ;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: flex-start;
}


.biography_picture_frame{
    width:320px ;
    height:468px ;
    background-color: burlywood;
    border-radius: 300px;
    border: 10px solid #272727;
    background-image: url(/assets/images/IMG-20210911-WA0014.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-width: 320px;
    position: relative;
    

}

.biography_picture_frame>h2{
    font-family:KalamehWeb ;
    font-size:25px ;
    font-weight:800 ;
    color:#ffffff ;
    line-height: 30px;
    width: 380px;
    position: absolute;
    top: 307px;
    right: 80px;    
}





.biography_text{
    margin-right: 41px;
    margin-top: 56px;
}

.biography_text>h3{
    font-family:KalamehWeb ;
    font-size:40px ;
    font-weight:800 ;
    color:#ffffff ;
    line-height: 40px;

}

.biography_name{
    width:375px ;
    height:95px ;
    /* background-color: yellow; */
    background-image: url(/assets/images/biography.svg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 17px;

}
.biography_text>p{
    font-family:KalamehWeb;
    font-size:20px ;
    font-weight:normal ;
    color:#ffffff ;
    text-align: justify;
    line-height: 26px;
    margin-right: 100px;
    margin-top: 40px;
}



/* ------------------skill_des_container------------------ */

.skill_des_container{

    width:1201px ;
    height:656px ;
    /* background-color: yellowgreen; */
    margin:207px auto 0 auto;


    display: flex;
    flex-flow: row wrap;
    justify-content:space-between ;

}


.skills_counseling{
    width:570px ;
    height:262px ;
    /* background-color:red ; */
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;



}

.skills_counseling>.marriage_icon{
    width:49px ;
    height:49px ;
    background-color: #ffffff;
    border-radius: 5px;
    background-image: url(/assets/icon/wedding.svg);
    background-size: 31px;
    background-repeat: no-repeat;
    background-position: center;
    min-width: 49px;

}





.skills_counseling>.family_icon{
    width:49px ;
    height:49px ;
    background-color: #ffffff;
    border-radius: 5px;
    background-image: url(/assets/icon/family.svg);
    background-size: 31px;
    background-repeat: no-repeat;
    background-position: center;
    min-width: 49px;

}



.skills_counseling>.Divorce_icon{
    width:49px ;
    height:49px ;
    background-color: #ffffff;
    border-radius: 5px;
    background-image: url(/assets/icon/hal.svg);
    background-size: 31px;
    background-repeat: no-repeat;
    background-position: center;
    min-width: 49px;

}

.skills_counseling>.indivitual_icon{
    width:49px ;
    height:49px ;
    background-color: #ffffff;
    border-radius: 5px;
    background-image: url(/assets/icon/personal.svg);
    background-size: 31px;
    background-repeat: no-repeat;
    background-position: center;
    min-width: 49px;

}

.skills_counseling_text{
    margin-top:11px ;
    margin-right: 17px;
}




.skills_counseling_text>h2{
    font-family:KalamehWeb ;
    font-size:20px ;
    font-weight:800 ;
    color:#ffffff ;
    line-height: 20px;
}

.skills_counseling_text>p{
    font-family:KalamehWeb ;
    font-size:14px ;
    font-weight:normal ;
    color:#ffffff ;
    text-align: justify;
    line-height: 24px;
    margin-top: 13px;
}




/* ------------------buttom_container------------------ */

.buttom_container{
    width: 288px;
    height: 247px;
    /* background-color: violet; */
    margin:267px auto 0 auto ;
}

.buttom_container>.buttom_name{
    width: 120px;
    height: 46px;
    /* background-color: yellow; */
    margin: 0 auto 0 auto;
    background-image: url(/assets/images/logo.svg);
    background-repeat: no-repeat;
    /* background-size: cover; */

}

.buttom_container>h2{
    font-family:kalamehweb ;
    font-size:12px ;
    font-weight:bold ;
    color: #ffffff;
    text-align: center;

}


.footer_social{
    width: 106px;
    height: 25px;
    /* background-color: blueviolet; */
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 35px auto 0 auto;

}

.footer_social div{
    width: 25px;
    height: 25px;
    /* background-color: brown; */
    
}

.footer_instagram{
    background-image: url(/assets/icon/instagram.svg);
}

.footer_telegram{
    background-image: url(/assets/icon/telegram.svg);
}

.footer_whatsapp{
    background-image: url(/assets/icon/whatsapp.svg);
}


.footer_menu{
    width:290px ;
    height:18px ;
    /* background-color: bisque; */
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    font-family:KalamehWeb ;
    font-size:16px ;
    font-weight:500 ;
    margin-left: 28px;
    color: #ffffff;

    margin: 30px auto 0 auto;

}


.footer_element{
    width:100px ;
    height:50px ;
    background-color: #ffffff;

    margin: 25px auto 0 auto;
    border-radius: 100px 100px 0 0 ;


}



.mobile_scroll_animation{
    display: none;
}


.mobile_menu_section{
    width: 100%;
    height: 100vh;
    background-color:#222222;
    position: fixed;
    z-index: 900;
    transition: 1s;
    clip-path: circle(0% at 92% 30px);
}


.mobile_close_icon{
    width:35px ;
    height:35px ;
    /* background-color: yellow; */
    background-image: url(/assets/icon/close.svg);
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 1000;
    background-repeat: no-repeat;
    background-size: cover;
}


.menu_text_container{
    width:208px ;
    height:320px ;
    /* background-color: #ff0808; */
    margin: 100px auto 0 auto;
    

    
}

.menu_text_container>ul{
    font-family:KalamehWeb ;
    font-size: 24px;
    font-weight:800 ;
    color: #ffffff;
}


.menu_text_container>ul>li{
    margin-bottom:15px ;
    margin-top: 15px;
}


.mobile_menu_social_container{
    width:127px ;
    height:32px ;
    /* background-color:chartreuse ; */
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex: row nowrap;
    justify-content: space-between;

}

.mobile_menu_social_whatsapp{
    width:32px ;
    height:32px ;
    /* background-color: red; */
    background-image: url(/assets/icon/whatsapp.svg);
    background-repeat: no-repeat;
    background-size: cover;

}


.mobile_menu_social_telegram{
    width:32px ;
    height:32px ;
    /* background-color: red; */
    background-image: url(/assets/icon/telegram.svg);
    background-repeat: no-repeat;
    background-size: cover;

}

.mobile_menu_social_instagram{
    width:32px ;
    height:32px ;
    /* background-color: red; */
    background-image: url(/assets/icon/instagram.svg);
    background-repeat: no-repeat;
    background-size: cover;

}




/* --------- light mode -------- */

.light_mode{
    width: 100%;
    /* height: 100vh; */
    background-color: #ffffff;
    position: absolute;
    top: 0;

    /* clip-path: circle(5% at 39px 54px); */
    z-index: 100;
    /* transition: 1.5s; */
    z-index: 100;
   
}


.menu_container_light{

    filter: unset;

}


.logo_light{

    background-image: url(/assets/images/logo_light.svg);

}

.logo_title_light{

    color:#222222

}



.menu_light{

    color:#222222;

    text-shadow: 0 0 10px #fff;


}


.dark_mod{
    background-image: url(/assets/icon/dark.svg);
}

.instagram_light{
    background-image: url(/assets/icon/instagram_gray.svg);
}

.telegram_light{
    background-image: url(/assets/icon/telegram_gray.svg);
}

.whatsapp_light{
    background-image: url(/assets/icon/whatsapp_gray.svg);
}


/* ------------------center_container------------------ */


.name_light{

     filter: drop-shadow( 0 0 16px #ffffff);
    background-image: url(/assets/images/name_light.svg);

}

.family_name_light{

     filter: drop-shadow( 0 0 16px #ffffff);
    background-image: url(/assets/images/family_light.svg);

}

.option_light{

    filter: drop-shadow( 0 0 16px #ffffff);
    color: #222222;
    
}


.call_icon_light{

    background-color: #222222;

    background-image: url(/assets/icon/call_light.svg);


}

.reserve_time_light{
    color: #222222;

}



.reserve_call_light{
    color: #222222;

}



/* ------------------skills------------------ */


.skill_dash_light{
    background-color: #222222;
}

.skill_title_light{
    color: #222222;  
}


/* ------------------biography------------------ */




.biography_picture_frame_light>h2{
    color:#222 ;
    filter: drop-shadow( 0 0 16px #ffffff);

}


.biography_text_light>h3{
    color:#222 ;  
}


.biography_text_light>p{
    color:#222 ;  
}

.biography_name_light{
    background-image: url(/assets/images/biography_light.svg);  
}


.skills_counseling_light>.marriage_icon{
    background-color: #222;
    background-image: url(/assets/icon/wedding_light.svg);

}


.skills_counseling_light>.family_icon{
    background-color: #222;
    background-image: url(/assets/icon/family_light.svg);


}


.skills_counseling_light>.Divorce_icon
{
    background-color: #222;
    background-image: url(/assets/icon/hal_light.svg);


}

.skills_counseling_light>.indivitual_icon{
    background-color: #222;
    background-image: url(/assets/icon/personal_light.svg);


}

.skill_des_container_light h2{
    color: #222;
}


.skill_des_container_light p{
    color: #222;
}

.buttom_container_light>.buttom_name{

    background-image: url(/assets/images/logo_light.svg);

}


.buttom_container_light>h2{
    color: #222;
}

.footer_whatsapp_light{
    background-image: url(/assets/icon/whatsapp_gray.svg);
}

.footer_telegram_light{
    background-image: url(/assets/icon/telegram_gray.svg);
}

.footer_instagram_light{
    background-image: url(/assets/icon/instagram_gray.svg);  
}


.footer_menu_light{

   color: #222;

}


.footer_element_light{
    background-color: #222;
}















/* --------- mobile responsive -------- */




@media (max-width: 450px ) { 









    .mobile_menu_container{
        width: 100%;
        height: 29px;
        position: absolute;
        top: 12px;
        /* background-color: aquamarine; */
        z-index: 100;
        display: flex;
        flex: row nowrap;
        justify-content: space-between;

    }


    .mobile_menu_container>.mobile_menu_icon{ 
        width:27px ;
        height:20px ;
        /* background-color: yellow; */
        background-image: url(/assets/icon/menu.svg);
        background-size: cover;
        background-repeat: no-repeat;
        margin-right: 15px;

    }


    .mobile_menu_container>.mobile_menu_icon_light{ 
        width:27px ;
        height:20px ;
        /* background-color: yellow; */
        background-image: url(/assets/icon/menu_gray.svg);
        background-size: cover;
        background-repeat: no-repeat;
        margin-right: 15px;

    }





    .mobile_menu_container>.light_icon{
        width:29px ;
        height:29px ;
        /* background-color: aliceblue; */
        margin-left:15px;
        background-image: url(/assets/icon/light.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }


    .mobile_menu_container>.dark_icon{
        width:29px ;
        height:29px ;
        /* background-color: aliceblue; */
        margin-left:15px;
        background-image: url(/assets/icon/dark.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }


    .dark_mode{
        overflow: hidden;
    }

    .light_mode{
        overflow: hidden;
    }


    .header{
        height:440px ;
    }
    .menu_container{
        display: none;
    }

    .skills{
        display: none;

    }
    
    .mouse{
        display: none;
    }


    .center_container{
        width:232px ;
        height: 270px;

    }
    .video_container{
        width:232px ;
        height: 270px;
    }

    .video_container>video{
        height: 100%;
    }

    .header_data{
        top: 80px;
        right: -17px;

    }

    .name{
        width:123px ;
        height:49px ;
    }

    .family_name{
        width:140px ;
        height:54px ;
        margin-top: -5px;
        
    }

    .option{
        width:236px ;
        height:43px ;
        font-size:16px ;
        margin-top: 17px ;
        margin-right: 15px;
    }

    .call{
        transform: scale(80%) translateX(40px);
        

    }

    .call_icon{
        background-size:30px 30px ;
    }
    









    .mobile_scroll_animation{
        display: flex;
        position: unset;
        transform: unset;
        margin: auto;
        transform: scale(80%);
    }








    .biography{
        width:100% ;
        height:auto ;
        margin-top: 70px;

    }






    .biography_picture_frame{
        display: none;
    }

    .biography_text{
        margin-right: 24px;
        margin-top: 56px;
    }


    .biography_text>h3{
        font-size:20px;
        line-height: 20px;


    }
    .biography_name{
        width:170px ;
        height:44px ;

    }

    .biography_text>p{
        font-size:16px ;
        margin-right: 0px;
        margin-top: 20px;
        margin-left:24px ;
    }











    .skill_des_container{
        width:100% ;
        height:auto;
        margin:215px auto 0 auto;
        flex-flow: column nowrap;
    
    }

    .skills_counseling{
        width:100% ;
        height: auto;
        margin-bottom: 68px;
    }

    .skills_counseling_text>p{
        transform: translateX(32px);
    }


    .Divorce_icon , .indivitual_icon ,.marriage_icon , .family_icon  {
        transform: scale(80%) translateY(-5px) translateX(-35px);
        
        


    }




    .skills_counseling_text>h2{
        transform: translateX(-20px);

    }













    .buttom_container{
        margin-top: 50px;
    }


    .mouse_mobile_light{
        border-color: #222;
    }
    
    .mouse_mobile_light>.scroll{
        background-color: #222; 
    }

    
}