/*
===============
    Fonts
===============
 */

 @font-face {
    font-family: "Dana-UltraLight";
    src: url("../fonts/Dana/DanaFaNum-UltraLight.woff") format("woff");
 }
 @font-face {
    font-family: "Dana-Light";
    src: url("../fonts/Dana/DanaFaNum-Light.woff") format("woff");
 }
 @font-face {
    font-family: "Dana-Regular";
    src: url("../fonts/Dana/DanaFaNum-Regular.woff") format("woff");
 }
 @font-face {
    font-family: "Dana-Medium";
    src: url("../fonts/Dana/DanaFaNum-Medium.woff") format("woff");
 }
 @font-face {
    font-family: "Dana-DemiBold";
    src: url("../fonts/Dana/DanaFaNum-DemiBold.woff") format("woff");
 }
 @font-face {
   font-family: "Dana-Bold";
   src: url("../fonts/Dana/DanaFaNum-Bold.woff") format("woff");
}
 @font-face {
    font-family: "Dana-ExtraBold";
    src: url("../fonts/Dana/DanaFaNum-ExtraBold.woff") format("woff");
 }






/* Preloader Start */

.loader-mask {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #fff;
   z-index: 9999;
   display: grid;
   place-items: center;
}

.loader {
 width: fit-content;
 font-size: 40px;
 line-height: 1.5;
 font-family: system-ui,sans-serif;
 font-weight: bold;
 text-transform: uppercase;
 color: #0000;
 -webkit-text-stroke: 1px #000;
 background:
   radial-gradient(1.13em at 50% 1.6em,#000 99%,#0000 101%) calc(50% - 1.6em) 0/3.2em 100% text,
   radial-gradient(1.13em at 50% -0.8em,#0000 99%,#000 101%) 50% .8em/3.2em 100% repeat-x  text;
 animation: l9 2s linear infinite;
 
}

.loader:before {
 content: "Loading";
}
@keyframes l9 {
 to {background-position: calc(50% + 1.6em) 0,calc(50% + 3.2em) .8em}
}

/* Preloader END */



 :root {
    --clr-primary-1: #0081a7;
    --clr-primary-2: #15616d;
    --clr-primary-3: #fdfcdc;
    --clr-primary-4: #f0e6ef;
    --clr-primary-5: #f07167;
    --clr-primary-6: #00b4d8;
    --clr-primary-7: #0077b6;
    --clr-primary-8: #bc4749;
    --clr-primary-9: #182733;
    --clr-primary-10: #edede9;

    --clr-grey-1: #102a42;
    --clr-grey-2: #617d98;
    --clr-grey-3: rgb(241, 245, 248);
    --clr-white: #fff;
    --ff-primary: "Dana-Regular", sans-serif;
    --transition: all 0.3s linear;
    --radius: 0.5rem;
    --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    --max-width: 1170px;
    --overlay-color: rgba(24, 39, 51, 0.851);
    --menu-speed: 0.75s;
}

 /*
===================
   Global Styles
===================
 */

*,
::before,
::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #74b0b5 #f0f0f0;
}

html{
   scroll-behavior: smooth;
}


body{
    font-family: var(--ff-primary);
}

a{
    text-decoration: none;
    color: var(--clr-primary-3) ;
}

ul{
    list-style-type: none;
}

img{
    width: 100%;
    display: block;
}

.container{
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 0 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6
{
   color: var(--clr-primary-3);
}


p{
   color: var(--clr-primary-10);
}

button{
   color: var(--clr-primary-3);
   font-family:"Dana-Medium";
   font-size: 1rem;
   border: none;
   border-radius: 0.5rem;
   
}

.text-center {
   text-align: center;
 }

 /*
===================
      NavBar
===================
 */

 nav{
   background-color: var(--clr-primary-1);
 }

 .nav-item{
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
   height: 4.5rem;
 }

 .nav-item h3{
   font-size: 1.8rem;
   font-family:"Dana-ExtraBold" ;
 }

 .nav_links{
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 2rem;
 }

 .nav_links li{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.7rem;
 }

 .nav_links li a{
   font-size: 1.2rem;
   font-family:"Dana-DemiBold" ;
 }

 .nav_link_icon{
   display: flex;
   color: var(--clr-white);
   font-size: 1.4rem;
   
 }


  /*
===================
  responsive-Menu
===================
 */

 .menu_btn {
   display: none;
}

.nav_menu2 {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   visibility: hidden;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1;
}

.nav_overlay {
   background-color: var(--overlay-color);
   border-radius: 50%;
   width: 400vw;
   height: 400vh;
   display: flex;
   flex: none;
   align-items: center;
   justify-content: center;
   transform: scale(0);
   transition: all 0.4s ease;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   z-index: 2;
}

.nav_overlay  div {
   text-align: center;
   max-width: 90vw;
   max-height: 100vh;
   opacity: 0;
   transition: opacity 0.4s ease;
   -webkit-transition: opacity 0.4s ease;
   -moz-transition: opacity 0.4s ease;
   -ms-transition: opacity 0.4s ease;
   -o-transition: opacity 0.4s ease;
}

.nav_links2 {
   list-style: none;
   color: var(--clr-white);
   font-size: 1.5rem;
   padding: 1rem;
}

.nav_links2 li {
   padding-bottom: 1.5rem;
   display: flex;
   align-items: center;
   gap: 1rem;
   cursor: pointer;
}

.nav_links2 li i {
   display: flex;
}


.nav_links2 a {
   color: var(--clr-primary-3);
}

.navbar-fixed{
   position: fixed;
   width: 100%;
   top: 0;
   left: 0;
   background-color: var(--clr-primary-8);
   box-shadow: var(--light-shadow);
   z-index: 10;
}


  /*
===================
      Header
===================
 */

 header{
   background-color: var(--clr-primary-1);
   padding-bottom: 2rem;
 }

 .header_contenet{
   display: grid;
   grid-template-columns: 1fr 1fr;
   place-items: center;
   min-height: calc(100vh - 4.5rem);
 }

.right_header{
 display: flex;
 flex-direction: column;
 gap: 1.1rem;

}

.right_header h1{
   font-family:"Dana-Bold";
   font-size: 2.5rem;
}


.social_icons{
   display: flex;
   gap: 1rem;
   color: var(--clr-primary-3);
   font-size: 1.8rem;
   cursor: pointer;
}


.insta{
   transition: var(--transition);
   font-size: 2.2rem;
}

.insta:hover{
   transform: scale(1.1);
}

.whatsapp{
   font-size: 2.2rem;
   transition: var(--transition);
}

.whatsapp:hover{
   transform: scale(1.1);
}

.telegram{
   font-size: 2.2rem;
   transition: var(--transition);
}

.telegram:hover{
   transform: scale(1.1);
}

.linkedin{
   font-size: 2.2rem;
   transition: var(--transition);
}

.linkedin:hover{
   transform: scale(1.1);
}

.facebook{
   font-size: 2.2rem;
   transition: var(--transition);
}

.facebook:hover{
   transform: scale(1.1);
}

.btn_right_header button{
   background-color: var(--clr-primary-5);
   padding: 0.6rem;
   cursor: pointer;
   margin-top: 1rem;
}

.btn_right_header button:hover{
   background-color: var(--clr-primary-8);
}



.left_header {
position: relative;
}

.left_header img{
   max-width: 25rem;
   max-height: 30rem;
   border-radius: var(--radius);
   object-fit: cover;
   position: relative;
}

.left_header::before, .img_about::before {
   content: "";
   border: 0.2rem solid var(--clr-primary-4);
   width: 100%;
   height: 100%;
   position: absolute;
   border-radius: var(--radius);
   top: 2rem;
   right: -2rem;
}
   

  /*
===================
   Main-About-Me
===================
 */

 .section_about{
   background-color: var(--clr-primary-2);
   padding: 2rem 0;
 }


.info_about{
   display: grid;
   grid-template-columns: 1fr 1fr;
   place-items: center;
   padding-bottom: 4rem;
}


.img_about{
position: relative;
}

.img_about img{
   max-width: 25rem;
   max-height: 30rem;
   border-radius: 0.8rem;
   object-fit: cover;
   position: relative;
}

.text_about{
padding: 0 0.9rem;
text-align: justify;
}
.text_about h3{
   font-family: "Dana-Bold" ;
   font-size: 2rem;
   margin-bottom: 1.5rem;
   padding-bottom: 1rem;
   border-bottom: 2px dashed var(--clr-primary-3)
}
.text_about p{
   font-family:"Dana-Regular" ;
   font-size:1.2rem ;
}

  /*
===================
   Main-Services
===================
 */

.section_services{
   padding: 2rem 0;
   background-color: var(--clr-primary-1);
}

.content_services{
display: grid;
row-gap: 4rem;
}


.title_services{
   width: max-content;
   display: grid;
   place-self: center;
   
}


.title_services h2{
   font-family:"Dana-Bold" ;
   font-size:2.5rem ;
}

.bottom_line{
   display: block;
   background-color: var(--clr-primary-3);
   height: 0.20rem;;
   
} 

.info_services{
   display: grid;
   grid-template-columns: 1fr 1fr ;
   padding: 0 3rem;
   gap: 2.5rem;
   justify-items: center;
}

.box_services{
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: 1rem;
   background-color:var(--clr-primary-6) ;
   padding: 1rem 1.5rem;
   border-radius: var(--radius);
   max-width: 30rem;
   transition: var(--transition);
}

.box_services:hover{
   background-color: var(--clr-primary-7);
}

.text_services h4{
   font-family:"Dana-DemiBold" ;
   font-size:1.4rem ;
   color: var(--clr-white);
}

.text_services p{
   font-family:"Dana-Regular" ;
   font-size:1rem ;
   
}

.icon_services{
   width: 60px;
   height: 60px;
}


  /*
===================
   Main-Projects
===================
 */

.section_projects{
   padding: 3rem 0;
   background-color: var(--clr-primary-2);

}

.content_projects{
   display: grid;
   gap: 4rem;
}

.title_projects{
   width: max-content;
   display: grid;
   place-self: center;
}

.title_projects h2{
   font-family: "Dana-Bold";
   font-size: 2.5rem;
}

.gallary_projects {
  display: grid;
  gap: 2rem;

}

.project{
   background-color: var(--clr-primary-9);
   position: relative;
   margin-bottom: 2rem;
   border-radius: var(--radius);
   cursor: auto;
}

.Project_info{
   position: absolute;
   color: var(--clr-white);
   top: 50%;
   left: 50%;
   transform: translate(-50% ,-50%);
   transition: var(--transition);
   opacity: 0;
}

.Project_info h4{
   color: var(--clr-white);
   margin-bottom: 0.7rem;
   text-align: center;
}
.Project_info p{
   color: var(--clr-white);
   text-align: center;
}


.project:hover .Project_info{
   opacity: 1;
}

.project_img{
   transition: var(--transition);
   border-radius: var(--radius);
   height: 15rem;
   object-fit: cover;
}

.project:hover .project_img{
   opacity: 0.1;
}

.project::after{
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 0.25rem solid var(--clr-white);
   border-radius: var(--radius);
   opacity: 0;
   transition: var(--transition);
}

.project:hover::after{
   opacity: 1;
   transform: scale(0.8);
}

  /*
===========================
   Main-Connect_container
===========================
 */

 .Connect_container{
   min-height: 40rem;
   margin: 0.5rem 0;
   clip-path: polygon(50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%, 0% 10%);
   position: relative;
   display: grid;
   place-items:center;
   padding: 10rem 0 7rem 0;
 }

 .Connect_container::after{
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--clr-white);
   opacity: 0.7;
   z-index: -1;
 }

 .video_Connect{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -2;
 }

 .contact_us{
   background-color: var(--clr-primary-7);
   display: grid;
   place-items:center;
   gap: 1.5rem;
   padding: 3rem 5rem 12rem 5rem;
   clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
   
 }

 .title_contact_us{
   width: max-content;
   display: grid;
   place-self: center;

 }

 .contact_us h2{
   font-family: "Dana-Bold";
    font-size: 2rem;
 }

 .contact_us p{
   max-width: 30rem;
   text-align: center;
 }

 .btn_contact_us{
   background-color: var(--clr-primary-5);
   padding: 0.6rem;
   cursor: pointer;
   margin-top: 1rem;
 }

 .btn_contact_us:hover{
   background-color: var(--clr-primary-8);
 }


  /*
===========================
   Main-Section_Skills
===========================
 */

 .section_skills{
   background-color: var(--clr-primary-1);
   padding-bottom: 4rem;
 }

.title_section_skills{
   width: max-content;
   display: grid;
   margin-bottom: 3rem;
   place-self: center;
}
.title_section_skills h2{
   font-family: "Dana-Bold";
    font-size: 2rem;
    margin-top: 3rem
}

.content_skills{
   display: grid;
}

.skill_container{
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
}

.skill_Progress{
   margin-bottom: 1.5rem;
}

.skills h3{
   font-family: "Dana-Medium";
   font-size: 1.5rem;
   margin: 1.5rem 0;
}

.skills p{
   margin-bottom: 0.5rem;
}

.progressbar{
   background: rgba(0, 0, 0, 0.25);  
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
   height: 1.2rem;
   border-radius: var(--radius);
   position: relative;
}

.skillbar{
   background-image: 
   linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
 transition: 0.4s linear;  
 transition-property: width, background-color;  
   height: 100%;
   border-radius: var(--radius);
   position: absolute;
   top: 0;
   left: 0;
}


 
 .progress-moved100 .skillbar {
   width: 100%; 
   background-color: #00b4d8;  
 }
 .load100.in-view {
   animation: progressAnimation100 6s;  
}
 @keyframes progressAnimation100 {
   0%   { width: 5%; background-color: #caf0f8;}
   100% { width: 100%; background-color: #00b4d8; }
 }
 

 .progress-moved90 .skillbar {
   width: 90%; 
   background-color: #00b4d8;  
 }
 .load90.in-view {
   animation: progressAnimation90 6s;  
}
 @keyframes progressAnimation90 {
   0%   { width: 5%; background-color: #caf0f8;}
   100% { width: 90%; background-color: #00b4d8; }
 }


 .progress-moved80 .skillbar {
   width: 80%; 
   background-color: #00b4d8;  
 }
 .load80.in-view {
   animation: progressAnimation80 6s;  
}
 @keyframes progressAnimation80 {
   0%   { width: 5%; background-color: #caf0f8;}
   100% { width: 80%; background-color: #00b4d8; }
 }


 .progress-moved65 .skillbar {
   width: 65%; 
   background-color: #00b4d8;  
 }
 .load65.in-view {
   animation: progressAnimation65 6s;  
}
 @keyframes progressAnimation65 {
   0%   { width: 5%; background-color: #caf0f8;}
   100% { width: 65%; background-color: #00b4d8; }
 }


 .progress-moved40 .skillbar {
   width: 40%; 
   background-color: #00b4d8;  
 }
 .load40.in-view {
   animation: progressAnimation40 6s;  
}
 @keyframes progressAnimation40 {
   0%   { width: 5%; background-color: #caf0f8;}
   100% { width: 40%; background-color: #00b4d8; }
 }


 .progress-moved30 .skillbar {
   width: 30%; 
   background-color: #00b4d8;  
 }
 .load30.in-view {
   animation: progressAnimation30 6s;  
}
 @keyframes progressAnimation30 {
   0%   { width: 5%; background-color: #caf0f8;}
   100% { width: 30%; background-color: #00b4d8; }
 }


.Skill_Percentage{
   position: absolute;
   top: -2rem;
   left: 50%;
   transform: translateX(-50%);
}


  /*
===========================
   Main-Section_TimeLine
===========================
 */
 
.section_time_line{
   background-color: var(--clr-primary-2);
   padding: 3rem 0;
   
}
.content_time_line{
   display: grid;
}

.title_section_time_line{
   width: max-content;
   display: grid;
   margin-bottom: 3rem;
   place-self: center;
}

.title_section_time_line h2{
   font-family: "Dana-Bold";
    font-size: 2rem;
}


.info_time_line{
   width: 80vw;
   max-width: 40rem;
   margin: 0 auto;
   
}

.time_line_items{
   border-top: 2px dashed var(--clr-primary-4);
   padding: 3rem 2rem;
   margin: 0;
   position: relative;
   
}

.time_line_items h4{
   margin-bottom: 1rem;
   font-size: 1.2rem;
}

.time_line_items:nth-child(even){
   border-left: 2px dashed var(--clr-primary-4);
   border-top-left-radius: 2rem;
   border-bottom-left-radius: 2rem;
   margin-right: 2rem;
   padding-right: 0;
}

.time_line_items:nth-child(odd){
   border-right: 2px dashed var(--clr-primary-4);
   border-top-right-radius: 2rem;
   border-bottom-right-radius: 2rem;
   margin-left: 2rem;
   padding-left: 0;
}

.time_line_items:first-child{
   border-top: 0;
   border-top-right-radius: 0;
}

.time_line_items:last-child{
   border-bottom-left-radius: 0;
}


.number_time_line{
   position: absolute;
   top: 50%;
   background-color: var(--clr-primary-4);
   border-radius: 50%;
   width: 2rem;
   height: 2rem;
   color: var(--clr-primary-9);
   display: grid;
   place-items: center;
   font-size: 1rem;
   font-family:"Dana-Medium"; 
   transform: translate(-50% ,-50%);
}

.time_line_items:nth-child(even) .number_time_line {
    left: 0;
}

.time_line_items:nth-child(odd) .number_time_line {
    right: 0;
    transform: translate(50% ,-50%);
}

  /*
===========================
   Main-Section_blog
===========================
 */

.blog{
   background-color: var(--clr-primary-1);
   padding: 3rem 0;
}

.content_blog{
   display: grid;
}

.title_blog{
   width: max-content;
   display: grid;
   margin-bottom: 3rem;
   place-self: center;
}

.title_blog h2{
   font-family: "Dana-Bold";
   font-size: 2rem;
}

.box-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   column-gap: 1.5rem;
 }
 
 @media screen and (min-width:1380px) {
   .box-container {
     flex-direction: row
   }
 }
 
 .box-item {
   position: relative;
   -webkit-backface-visibility: hidden;
   margin-bottom: 35px;
   max-width: 100%;
 }
 
 .flip-box {
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   perspective: 1000px;
   -webkit-perspective: 1000px;
 }
 
 .flip-box-front,
 .flip-box-back {
   background-size: cover;
   background-position: center;
   border-radius: 8px;
   min-height: 375px;
   -ms-transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
   transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
   -webkit-transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
 


 #flip-box-front-1{
   background-image: url('../images/img-demo-1.png' );
 }
 #flip-box-front-2{
   background-image: url('../images/img-demo-2.png' );
 }
 #flip-box-front-3{
   background-image: url('../images/img-demo-3.png' );
 }
 #flip-box-front-4{
   background-image: url('../images/img-demo-4.png' );
 }

 .flip-box-front {
   -ms-transform: rotateY(0deg);
   -webkit-transform: rotateY(0deg);
   transform: rotateY(0deg);
   -webkit-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;
 }
 
 .flip-box:hover .flip-box-front {
   -ms-transform: rotateY(-180deg);
   -webkit-transform: rotateY(-180deg);
   transform: rotateY(-180deg);
   -webkit-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;
 }
 
 #flip-box-back-1{
   background-image: url('../images/back-img-demo-1.png');
 }

 #flip-box-back-2{
   background-image: url('../images/back-img-demo-2.png');
 }

 #flip-box-back-3{
   background-image: url('../images/back-img-demo-3.png');
 }

 #flip-box-back-4{
   background-image: url('../images/back-img-demo-4.png');
 }

 .flip-box-back {
   
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   
   -ms-transform: rotateY(180deg);
   -webkit-transform: rotateY(180deg);
   transform: rotateY(180deg);
   -webkit-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;
 }
 
 .flip-box:hover .flip-box-back {
   -ms-transform: rotateY(0deg);
   -webkit-transform: rotateY(0deg);
   transform: rotateY(0deg);
   -webkit-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;
 }
 
 .flip-box .inner {
   position: absolute;
   left: 0;
   width: 100%;
   padding: 60px;
   outline: 1px solid transparent;
   -webkit-perspective: inherit;
   perspective: inherit;
   z-index: 2;
   
   transform: translateY(-50%) translateZ(60px) scale(.94);
   -webkit-transform: translateY(-50%) translateZ(60px) scale(.94);
   -ms-transform: translateY(-50%) translateZ(60px) scale(.94);
   top: 50%;
 }
 
 .flip-box-header {
   font-family: "Dana-Bold";
   font-size: 22px;
 }
 
 .flip-box p {
   font-size: 12px;
   line-height: 1.5em;
 }
 
 .flip-box-img {
   margin-top: 25px;
   width: 61px;
   height: 61px;
   display: grid;
   place-self: center;
 }
 
 .flip-box-button {
   background-color: transparent;
   border: 2px solid #fff;
   border-radius: var(--radius);
   color: #fff;
   cursor: pointer;
   font-size: 20px;
   font-weight: bold;
   margin-top: 25px;
   padding: 15px 20px;
   transition: var(--transition);
 }


 .flip-box-button:hover {
   background-color: var(--clr-primary-10);
   color: var(--clr-primary-9);
 }

 .flip-box-button:hover a {

   color: var(--clr-primary-9);
 }


  /*
=================
      Footer
=================
 */

 .footer{

  background-color: var(--clr-primary-9);
  padding: 3rem 0;

 }

 .footer_container{
   display: grid;
   place-items: center;
 }

 .social_icons_footer{
   display: flex;
   gap: 3rem;
   margin-bottom: 1.5rem;
 }

 .social_icon_footer{
   font-size: 2rem;
 }