:root {
  --primary: #008caf;
  --secondary: #252525;
  --white : white;
  --menu-font : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --text-font : 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  --border-col : hsla(0, 0%, 100%, .6); 
}

@font-face {
    font-family: 'regular';
    src: url('fonts/cRegular.otf') format('opentype');
}

@font-face {
    font-family: 'bold';
    src: url('fonts/cBold.otf') format('opentype');
}
@font-face {
    font-family: 'medium';
    src: url('fonts/cMedium.otf') format('opentype');
}   

* .profile_container :focus-visible{ 
  outline : none !important;  
}  

.splash{
  position: fixed;  
  /* overflow: hidden; */
  opacity: 0.95;  
  height: 100%;
  width: 100%; 
  background-color: #eef2f5;   
  z-index: 1000000; 
}
.splash .splash-loader{
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  margin: auto; 
  height: 80px;
  width: auto; 
}

.topleft_menu a {
    background-image: linear-gradient(
      to right,
      #295768,
      #295768 50%,
      #252525 50%
    );
    background-size: 200% 100%;
    background-position: 100%;
    display: inline-block;
    padding: 5px 0;
    margin-bottom: 10px;
    position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
  }

.topleft_menu a:before{
  content: '';
  background: #54b3d6;
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0; 
  height: 3px;
  transition: all 0.4s ease-in-out;
}

.topleft_menu a:hover {
  background-position: 0;
  transform: translateX(10px);
}

.topleft_menu a:hover::before{
  width: 100%;
}

/* TOOLTIP */

.tt-container + .tooltip > .tooltip-inner {
  background-color: var(--secondary); 
  color: #ebebeb; 
  border: 1px solid var(--secondary); 
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 5px;
  font-size: 12px;
  padding: 5px;
  font-family: var(--menu-font);
}
/* Tooltip on top */
.tt-container + .tooltip.top > .tooltip-arrow {
  border-top: 5px solid var(--secondary);
  margin-bottom: 5px;
} 

label {
  display: inline-block; 
  width: 5em;
}


body{
  font-family: var(--font);
  display: flex;
  flex-direction: column;;
  background-color: rgba(238,242,245,1)!important; 
  scroll-behavior: smooth;
  overflow-x: hidden;
  height: 100%;
}
 

/* Overlay */

#main-sect{
  overflow: hidden;
  height: 100vh;
  max-height: 100%;   
  position: relative; 
}
#overlay_container{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 50px 70px 50px 70px;   
  z-index: 99;  
}

/* Menu */
.main-logo{ 
  position: relative; 
  height: 70px;
  width: auto;
  padding-left: 4px;
  margin-bottom: 20px;
}
.topleft_menu ul{
  list-style-type: none;
  margin: 0;
  padding-left: 10px; 
} 
.topleft_menu li{
  display: list-item;
} 
.topleft_menu a{ 
  transition: 0.3s ease;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
}
.topleft_menu a:hover{ 
  text-decoration: none;
  color: #008caf;
  
}
.topleft_menu a:active,
.topleft_menu a:visited,
.topleft_menu a:link{ 
  text-decoration: none;
  
} 

/*///////////////// Personal Info /////////////////*/
.personal_info{
  position: absolute;
  bottom: 0;
  cursor: default;
  min-height: 100px; 
  align-content: top; 
}
.personal_info .name{
  padding: 0;
  padding-bottom: 10px;
  margin: 0;
  font-weight: 600;
  letter-spacing: 4px;
  font: 800 normal 2em 'tahoma';
  font-family: var(--text-font);
}
.personal_info .moto{
  letter-spacing: 2px;
  font-weight: 600;
  line-height: 25px;
  margin: auto;
  min-height: 25px; 
  font: 600 normal 1.1em 'tahoma';
  /* text-shadow: 2px 3px #2223243b, 1px 1px #222324c7, 1px 1px #222324b0; */
  color: #626262;
  font-style: italic;
  font-family: var(--text-font);
}
.icon-row{ 
  padding: 0;
  list-style: none;
  max-width: 400px;
  margin-bottom: 15px;
}
.icon-row li{
  display: inline-block;
  height: 20px;
  padding: 0;
  margin: 0;
  margin-right: 5px; 
}
.icon-row img{
  height: 100%;
}


/*///////////////// Mail Button ////////////////*/
.right-section{
  position: absolute;
  display: flex;
  flex-direction: column;
  right: 0;
  top: 0;
  height: 100%;
  margin-top: 7px; 
}
 
.mail_container{
  align-self: flex-start;
  position: relative;
  margin-top: 5px;
  list-style: none;
}
.mail_container a{
  transition: 0.3s ease;
  display: flex;
  
}
.mail_container .primary_contact_item{
  margin-bottom: 25px;
}
.mail_container .primary_contact_item a,   
.mail_container .secondary_contact_item a{  
  outline: none !important; 
}
.primary_contact_image{
  min-width: 60px;
  order: 1;
  margin-bottom: 5px; 
  text-align: center;
} 
.primary_contact_text p{
  right: 15px;
  opacity: 1;
} 
.primary_contact_image img{
  height: 35px;
  width: auto;
  min-width: 35px;
} 

.mail_container .primary_contact_text{
  position: relative;
  width: 130px;
  overflow: hidden;
  top:-5px;
  transition: 0.3s;
}

.mail_container .secondary_contact_image img{ 
  height: 40px;   
}
/* .mail_container a:hover .contact_mail img{
  content:url("images/envelope_open.png");
} */



.mail_container a:active,
.mail_container a:visited,
.mail_container a:link{ 
  text-decoration: none;
} 


/* Secondary contact */
/* .mail_container .secondary_contact_item{
  margin-bottom: 15px;
  margin-right: -30px; 
}  */
.secondary_contact_text p{   
  font-size: 10px;  
  opacity: 0.5;     
}
.mail_container a:hover .secondary_contact_text p{
  right: 15px;  
  opacity: 1;  
}   
.mail_container .secondary_contact_text p{
  font-size: 13px;
} 


/*///////////////// Profile Button ////////////////*/

.simple-button{
  background: none;
  border: none;
  display: flex;
}

.simple-button > div{
  align-self: center;
}

.profile_container{
  position: relative;
  margin-top: auto;
  margin-bottom: 25px; 
  align-self: flex-end;
  right: 0;
  bottom: 0; 
}
.profile_container a{
  transition: 0.3s ease;
  display: flex;
  direction: rtl;
}
.profile_btn{
  /* min-width: 60px; */
  order: 2;  
}
.profile_btn{
  display: block; 
  height: 55px; 
  width: 58px; 
  /* margin-right: 10px; */
  float: right; 
  background:url("../images/profile_idle.png");
  background-repeat: no-repeat;
  background-size: 55px 55px; 
} 
.profile_container .profile-text{
  width: 120px;
  position: relative;
  order: 1;
}
.profile-text p{
  right: 10px;
} 
.profile_container #profile-show:hover .profile-text p{  
  right: 16px;   
} 
.profile-text p,
.primary_contact_text p{
  position: absolute;
  color: #353535; 
  font-weight: bold;
  font-size: 14px;  
  font-family: var(--text-font); 
  letter-spacing: 1px; 
  margin: 0; 
  margin-right: 5px; 
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: 0.4s ease;
}
/* .profile_container a:hover ~ .profile-text p,
.mail_container a:hover ~ .primary_contact_text p{
  text-decoration: none;
  right: 15px;
} */

.profile_container #profile-show:hover .profile_btn{ 
  background:url("../images/profile_hover.png");
  background-repeat: no-repeat;
  background-size: 58px 55px; 
} 

.profile_container #profile-show:active,
.profile_container #profile-show:visited, 
.profile_container #profile-show:link{ 
  text-decoration: none; 
} 


/* Background */
.back-layer{ 
  position: fixed; 
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  filter: blur(0); 
  right: 0;
  z-index: 0;
  background-color: #eef2f5;
}



.dot,
.dot-pre,
.dot-post {
  position: absolute;  
  height: auto;      
  width: 600px ;  
  max-width: 75%; 
  aspect-ratio: 1/1;        
  margin: auto;
  left: 0;right: 0; top: 10px; bottom: 0;
  /* -ms-transform: translateY(-50%);
  transform: translateY(-50%); */
  margin: auto; 
  background: white /*radial-gradient(circle, #EEF2F5 0%, rgb(255, 255, 255) 100%)*/;  
  border-radius: 50%;   
  z-index: 3;  
  transition: 1ms ;   
  transition-timing-function : ease;   
}

.dot-pre{   
  margin-left: -45em;   
  background-color: rgb(0, 0, 0 , 0.15); 
  right: 1px;
  z-index: 2;  
  display: none; 
} 

.dot-post{ 
  margin-right: -45em;  
  background-color: rgb(0, 0, 0 , 0.15); 
  left: 1px;
  z-index: 1; 
  display: none; 
}


.animation-cont{ 
  width: 80%;
  height: 80%;     
  position: absolute;
  margin: auto;
  opacity: 0.9;    
  z-index: -1; 
  top: 0;bottom: 0;left: 0;right: 0;
}

/*///////////////////////////// Elements ////////////////////////////*/

.sect-sep{
  position: relative;
  height: 30px; 
  margin: 25px auto 10px auto;   
  box-shadow: 0px 3px 5px rgb(214, 214, 214);
  background: linear-gradient(180deg, rgba(238,242,245,1) 0%, #008BAE 75%); 
} 
 
.horiz-expand{
  /* animation: horiz-exp 1s ease forwards;  */
}
@keyframes horiz-exp { 
  from { width:0%;
  opacity: 0;}
  to { width: 100%;
  opacity: .75; } 
}
 
/*///////////////////////////// WORK SECT ////////////////////////////*/
.work-sect{
  position: relative;
  /* height: 550px; */   
  padding: 30px 60px ;   
  /* background-color: #EEF2F5; */
  /* border-top: 5px dashed rgba(0,0,0,0.5);  */
  /* background: rgb(238,242,245); */
} 
.work-sect .work-back{
  position: absolute;z-index: 0; 
  /* opacity: 0;   */
  border-radius: 50px;
  overflow: hidden;
  box-shadow: inset 0px 0px 5px 5px rgb(0, 0, 0, 0.3), 0px 2px 10px 2px rgb(0, 0, 0, 0.3);     
  /* background: linear-gradient(180deg, rgba(238,242,245,0) 30%, rgba(221, 221, 221) 50%, rgba(221, 221, 221) 80%, rgba(238,242,245,0) 100%);  */
}
.sect-warp-anim{
  animation: sect-back-warp 1s ease forwards;  
}
@keyframes sect-back-warp{
  from { 
    opacity: 0; 
  }
  to { 
    opacity: 1;
  }
}

.work-sect ~ .work-sect{
  /* background: rgba(238,242,245,1);    */
}  
.work-head{
  padding-top: 50px;
  width: 100%;  
  text-align: -webkit-center;
  margin-bottom: 50px;
}
.work-head .icon-row{ 
  position: relative;
  align-self: center; 
  right: -2.5px; 
  margin-bottom: 15px;    
}  
.work-head .icon-row li .tooltip{ 
  position: inherit;
}
.work-body{  
  padding: 65px 0 0 0;   
    
} 
.work-title{ 
  /* margin-right: 25px; */ 
  position: relative;
  font: 600 normal 2em var(--text-font);   
  letter-spacing: 2px;
  text-transform:capitalize;margin-top: 0; 
  z-index: 99;
}

/* EFFECTS */
.skewed {
  position: absolute; 
  top: 188px;         
  bottom: 0;    
  right: 0; 
  left: 0; 
  width: 100%;  
  height: 73%;      
  z-index: 0;    
  padding: 35px 0;     
  /* opacity: 0.9 !important;   */
}

.section-red{
  background: rgb(44,62,80);
  background: linear-gradient(90deg, rgb(80, 44, 44, 0.8) 0%, rgb(151, 85, 85, 0.8) 50%, rgb(80, 44, 44, 0.8) 100%); 
}

.section-green{  
  background: rgb(44,62,80);
  background: linear-gradient(90deg, rgb(44, 80, 61, 0.8) 0%, rgb(85, 151, 112, 0.8) 50%,rgb(44, 80, 61, 0.8) 100%); 
} 

.section-yellow{  
  background: rgb(73, 80, 44);
  background: linear-gradient(90deg, rgba(76, 80, 44, 0.8) 0%, rgba(139, 151, 85, 0.8) 50%,rgba(72, 80, 44, 0.8) 100%); 
}   

.section-orange{  
  background: rgb(73, 80, 44);
  background: linear-gradient(90deg, rgba(80, 68, 44, 0.8) 0%, rgba(151, 131, 85, 0.8) 50%,rgba(80, 68, 44, 0.8) 100%); 
}  

.section-blue{
  background: rgb(44,62,80); 
  background: linear-gradient(90deg, rgba(44,62,80,0.8) 0%, rgba(85,118,151,0.8) 50%, rgba(44,62,80,0.8) 100%); 
}
  
.skewed .right{
  /* transform: skewY(2.5deg);  */
  transform-origin: top right; 
} 

.skewed .left{   
  /* transform: skewY(-2.5deg);  */
  transform-origin: top right;
}
 
.skewed-inner{
  position: relative; 
  height: 100%;
  width: 100%; 
  background-color: #efefef;
  /* background: linear-gradient(90deg, #ebebeb 0%, #ebebeb 50%, #ebebeb 100%); */
}    


/* /////////////////// */


.floating-active{
  bottom: 0px !important;  
}  
 
#floatingBtn {
  display: block;
  position: fixed;
  bottom: -200px; 
  min-height: 108px;   
  right: 0px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgb(87, 87, 87);
  color: white;
  cursor: pointer; 
  padding: 20px 10px 10px 10px;  
  text-align: center;
  /* border-radius: 200px; */
  border-top-left-radius: 100px;
  border-bottom-left-radius: 0px;   
  transition: 0.5s;  
  box-shadow: 0px 0px 2px 1px rgb(0,0,0,0.2); 
} 

  
#floatingBtn:hover {
  background-color: rgb(110, 110, 110);
}

/* ///////////////////// */
 
.footer-cont{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;    
  height: 100%; 
  width: 100%;
  color: #dcdcdc; 
  background: radial-gradient(circle, rgb(69, 69, 69) 50%, rgb(40, 40, 40) 100%);
  box-shadow: inset 0px 5px 15px rgb(0,0,0,0.20);     
  text-align: left;  
  padding: 0 0 0 70px;    
  font-family: var(--text-font); 
  /* border-top-left-radius: 50px;  */
  border-top-right-radius: 50px;    
}  

.footer{
  /* display: grid; */ 
  /* grid-template-columns: 200px 1fr;  */
  margin-top: 175px;  
  position: relative; 
  padding: 40px 50px 0 0; 
  border-top-left-radius: 50px;
  background-color: rgb(0, 0, 0, 0.3);
  height: 150px;
  width: 100%;
} 

.footer .footer-btns{
  padding-right: 60px; 
  /* background-color: blue;  */
}
 

.footer .main-logo{
  position: absolute; 
  top: 5px; 
  height: 60px; 
  left: 60px;      
  z-index: 1;
  margin: 0 auto 0 auto;   
}  

.footer::before{
  content: '';
  position: absolute;
  display: block; 
  height: 120px;  
  width: 120px; 
  z-index: 1;
  box-shadow: -5px -5px 1px rgb(92, 92, 92);     
  background-color: #efefef;
  left: 50px; top: -25px;    
  margin: 0 auto;  
  /* background-color: white;  */
  border-radius: 100px;     
}   

.footer .rights{
  height: 100%;  
  width: 100%; 
  align-content: center; 
  text-align: right; 
  padding-right: 30px;  
  position: relative; 
  font-weight: bold;   
}