html, body {
overflow-x: hidden; 
}



:root {
  --primary-color:#393939;
  --secondary-color:#F3A40A;
  --tertiary-color:#F0F0F0;
  --accent-color: #222220;
  --font-family-main: 'Roboto', sans-serif;
  --font-family-aside: 'Montserrat', sans-serif;
  --font-family-style: 'Mr De Haviland', cursive;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  }

body { 
  background-color:var(--accent-color);
  transition:opacity 0.5s ease;
  }

/* NAV BAR */
.nav-wrapper{
  background-color:var(--primary-color);
  font-family: var(--font-family-main);
  position: fixed;
  width: 100%;
  z-index: 90;
}

.header {
  padding-top: 58px;
}

.logo-box a {
  text-decoration: none;
}

@font-face { 
  font-family:'Franklin Gothic Demi';
  src:url("/assets/css/franklin-gothic-demi/franklin-regular.ttf") format("woff"),
  url("/assets/css/franklin-gothic-demi/franklin-regular.ttf") format('truetype');
  font-weight:normal;
  font-style:normal
 }

#logo-name{
  
font-family:'Franklin Gothic Demi';

 font-weight: 600;
 color: var(--secondary-color);
 font-size: 36px;

}

#dot{
  color: var(--tertiary-color);
}

.hamburger{
  position:relative;
  display:block;
  width:35px;
  cursor:pointer;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background:none;
  outline:none;
  border:none
}

.hamburger .bar{
  content:'';
  display:block;
  width:100%;
  height:5px;
  background-color:var(--secondary-color);
  -webkit-transition:0.4s;
  transition:0.4s;
}

.hamburger .bar-2 {
  margin-top: 17px;
  content:'';
  display:block;
  width:100%;
  height:5px;
  background-color:var(--secondary-color);
  -webkit-transition:0.4s;
  transition:0.4s;
}

.hamburger.is-active .bar{
  -webkit-transform:rotate(-45deg) translate(-8px, 6px);transform:rotate(-45deg) translate(-8px, 6px)
}

.hamburger.is-active .bar-2{
  -webkit-transform:rotate(45deg) translate(-9px, -8px);
  transform:rotate(45deg) translate(-9px, -8px)
}

.mobile-nav{
  position:fixed;
  top:9.0%;
  left:100%;
  width:100%;
  min-height:50vh;
  display:block;
  z-index:98;
  background-color:var(--accent-color);
  opacity: 0.97;
  padding-top:35px;
  -webkit-transition:0.4s;
  transition:0.4s
}

.mobile-nav.is-active{
  left:0
}

.mobile-nav a {
  display:block;
  width:100%;
  max-width:200px;
  margin:0 auto 16px;
  text-align:center;
  padding:12px 16px;
  background-color:#1c1c1c;
  font-family: var(--font-family-main);
  font-weight: 600;
  color:var(--tertiary-color);
  text-decoration:none;
}

 .mobile-nav a:hover {
   background-color:#313131;
   
  }

  .mobile-nav .mobile-active {
    color: var(--secondary-color);
    font-weight: 600;
  }
   

.nav-link-container{
  display: none;
}


.hire-button{
  display: none;
}

.hero-img-block{
  position: relative;
}


.overlay-text{
   position:absolute;
   background-color:none;
   bottom: -10px;
   left:8.7%;
 }

 .intro-overlay{
  font-family: var(--font-family-aside);
  font-weight: 700;
  font-size: 28px;
  color: var(--tertiary-color);
  line-height: 1.2;
}


.hero-content-block{
  width: 90%;
  
}

.content-col{
  background-color: var(--primary-color);
  width: 100%;
  
}
.intro{
  display:none;
}

.hero-name{
  color: var(--secondary-color);
  line-height: 1.3;
}

.hero-text-box{
  font-family: var(--font-family-aside);
}

.hero-title {
  font-family:inherit;
  font-weight: 700;
  color: var(--tertiary-color);
}

.hero-text{
  color: var(--tertiary-color);
  font-family: inherit;
  font-size: 18px;
}

.hire-button-two{
  background-color: var(--secondary-color);
  border-radius: 30px;
  width: 160px;
  text-align: center;
  margin: 35px auto;
  cursor: pointer;
  color: var(--tertiary-color);
  transition: all 0.3s ease-in-out;
}

.hire-button-two a {
  color: inherit;
}

.hire-button-two:hover {
  filter: brightness(120%);
  transform: translateY(-0.25em);
}

.hire-me-two{
  font-family:var(--font-family-main);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  padding: 10px 10px;
  color: inherit;
  
}

.style-name{
  color: var(--secondary-color);
  font-family: var(--font-family-style);
  font-size: 18px;
  padding-top: 0;
}

.social-media-icons{
  display: none;
}

/* About Me */
.about-me {
  position: relative;
  background-color: var(--accent-color); 
}

.about-title {
  font-family: var(--font-family-aside);
  font-size: 1.13rem;
  color: var(--tertiary-color);
}

.yellow-bar {
  position: absolute;
  background-color: var(--secondary-color);
  height:40px;
  width: 180px;
  top:53%;
}

.detail-title {
  color: var(--tertiary-color);
}

.about-detail {
  border-bottom: 2px var(--secondary-color) solid;
  font-family: var(--font-family-aside);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tertiary-color);
}

.about-value {
  font-family: var(--font-family-aside);
  font-size: 0.9rem;
  color: var(--tertiary-color);
}

.about-detail.dob, .about-value.dob {
  font-size: 0.8rem;
}

.polygon-1.outside{
  position: relative;
  background-color: var(--tertiary-color);
  width:85%;
  height: 400px;
  -webkit-clip-path:polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, calc(27% - 10vw) 50%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, calc(27% - 10vw) 50%); 
}

.polygon-2.inside {
  position: absolute;
  top: 2.5px;
  left: 3px;
  right: 2.5px;
  bottom: 2.5px;
  background-color: var(--accent-color);
  -webkit-clip-path:polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, calc(27% - 10vw) 50%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, calc(27% - 10vw) 50%);
}

.detail-box.name, .detail-box.email{
  margin-left: 15px;
}

.detail-box.dob, .detail-box.phone{
  margin-left: 30px;
}

.detail-box.nationality, .detail-box.address{
  margin-left: 45px;
}

/* SKILLS SECTION */
.skills {
  background-color: var(--primary-color);
}

.mobile-accordion{
  font-family: var(--font-family-aside);
  font-size: 1rem;
  background-color:var(--accent-color);
}

.skills-lg {
  display: none;
}

.accordion-body{
  min-height: 120px;
  width:100%;
  flex-direction: column;
  align-items: center;
}

.skills-wrapper {
  border-bottom: 2px var(--tertiary-color) solid;
  cursor: pointer;
}

.skill-title {
  color: #F0F0F0;
  font-size: 1rem;
  font-weight:700;
}

.skills-details{
  max-height: 0;
  overflow: hidden;
  transition: max-height 1.2s ease;
  background-color: var(--primary-color);
  color: var(--tertiary-color);
}

.lg-body-text {
  font-family:var(--font-family-aside);
  color: var(--tertiary-color);  
}

.tool-name {
  font-family:var(--font-family-aside);
  color: var(--tertiary-color);
  font-size: 14px;
  text-transform: uppercase; 
}

.orange-range {
  height:4px;
  width:12px;
  margin-right: 1px;
  background-color:var(--secondary-color);
}

.empty-range {
  height:4px;
  width:12px;
  margin-right: 1px;
  background-color:var(--primary-color);
  border: 1px var(--tertiary-color) solid;
}

.lg-body-text {
    font-family: inherit;
    font-size: 14px;
}

.skills-wrapper.active .skills-details {
  max-height: 800px;
  padding: 15px;
  animation: fade 1s ease-in-out;
} 

.arrow-button {
  height: auto;
}

.skills-wrapper.active .arrow-button {
  transform:rotate(180deg);
  
}

.arrow-button {
  transition: transform .3s ease-in
}

@keyframes fade {
  from {
    opacity:0;
    transform: translateY(-10px);
  }
  to {
    opacity:1;
    transform: translateY(0px);
  }

}



.grey-hire-btn {
  color: var(--tertiary-color);
  background-color:transparent;
  border-radius: 30px;
  width: 165px;
  text-align: center;
  cursor: pointer;
  margin: 35px auto;
  border: 2px var(--secondary-color) solid;
  transition: color 0.25s, border-color 0.25s, box-shadow 0.25s,transform 0.25s;

}

.grey-hire-btn a{
  color: inherit;
}

.grey-hire-btn:hover{
  border-color: #ecc309f5;
  color: white;
  box-shadow: 0 0.5em 0.5em -0.4em #ecc309f5;
  transform: translateY(-0.25em);
  cursor: pointer;
}

.grey-link {
  font-family:var(--font-family-main);
  text-decoration: none;
  color: var(--tertiary-color);
  display: inline-block;
  text-align: center;
  padding: 12px 20px;
  
}

.resume {
  background-color:var(--secondary-color);
  border-radius: 30px;
  margin: 5px auto;
  cursor: pointer;
  color: var(--tertiary-color);
  transition: all 0.3s ease-in-out;
}

.resume a {
  color: inherit;
}

.resume:hover {
  filter: brightness(120%);
  transform: translateY(-0.25em);
}

.resume-link {
  text-decoration: none;
  display: inline-block;
  font-family:var(--font-family-main);
  text-align: center;
  color: var(--tertiary-color);
  padding: 12px 20px;
  border-radius: 30px;
  color: inherit;
}

/* SERVICES SECTION */
.services {
  background-color: transparent;
  position: relative;
}

.services-header {
  background-color: var(--accent-color);
  height: 150px;
}

.service-heading {
  color: var(--tertiary-color);
  font-family: var(--font-family-aside);
  font-size: 1.1rem;
  font-weight: 600;
  padding-top: 35px;
}

.grey-bg {
  background-color: var(--primary-color);
  height:1550px;
}

.white-bg {
  background-color:var(--tertiary-color);
  border-radius:50px;
  width: 88%;
  position: absolute;
  top:5%;
  left:6%;
}

.white-box {
  padding: 25px 35px;
}

.white-card {
  background-color: #fff;
  border: 1px #c4c4c4 solid;
  padding: 10px 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  transition: all 0.3s ease-in-out;
}

.white-card-last {
  background-color: #fff;
  border: 1px #c4c4c4 solid;
  padding: 10px 15px;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}

.white-card:hover, .white-card-last:hover {
  transform: scale(1.1);
}

.service-title {
  font-family: var(--font-family-aside);
  font-weight: 700;
  font-size: 1.1rem;
  color:#000;
}

.service-content {
  font-family: var(--font-family-aside); 
  font-size: 0.9rem;
  color: #333333;
}

/* WORKS */

.works {
  background-color: transparent;
  position: relative;
}

.works-header {
  background-color: var(--accent-color);
  height: 150px;
}

.work-heading {
  color: var(--tertiary-color);
  font-family: var(--font-family-aside);
  font-size: 1.1rem;
  font-weight: 600;
  padding-top: 35px;
}

.white-box-works {
  padding: 25px 35px;
}

.grey-bg-works {
  background-color: var(--primary-color);
  height:1820px;
}

.white-bg-works {
  background-color:var(--tertiary-color);
  border-radius:50px;
  width: 88%;
  position: absolute;
  top:5%;
  left:6%;
}

.work-content {
  font-family: var(--font-family-aside);
  margin-bottom: 45px;
}

.work-content-last {
  font-family: var(--font-family-aside);
  
}

.work-name {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #333333;
}

.platform {
  font-family: inherit;
  color: #333;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 400;
}

.work-text {
  font-family: inherit;
  color: #333;
  font-size: 0.7rem;
}

.work-wrapper{
  position: relative;
}

.w-img-div{
  overflow: hidden;
}

.w-img-div:hover{
  overflow: hidden;
  background-color:#ffbc00;
  width: 100%;
  height: auto;
  
}

.w-img{
  overflow: hidden;
  transition: transform 750ms cubic-bezier(.5, 0, .5, 1), opacity 250ms linear;
  animation-timing-function: ease-out;
}
.w-img:hover{
  transform: scale(1.075);
  opacity:0.5;
  border-radius: 10px;
  
}

.w-img:focus{
  position: relative;
  z-index: 9999;
}

/* CONTACT SECTION */
.contact-wrapper {
  background-color: var(--accent-color);
  
}

.contact-heading {
  color: var(--tertiary-color);
  font-family: var(--font-family-aside);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 35px 20px 0;
  
}

.box {
  padding: 20px;
}

.box > div > input {
    padding: 10px 0;
    font-size: 1rem;
    width: 100%;
} 

.box > div > textarea {
    height:200px ;
    padding: 10px 0;
    width: 92%;
    
    

}

.box > div > input,
.box > div > textarea {
  
  box-sizing: borderbox;
  outline: none;
  border: none;
  border-bottom:2px var(--tertiary-color) solid;
  background-color: transparent;
  font-size: 16px;
  color: #fff;
} 

.box div {
    position:relative;
}

.box div label {
  position: absolute;
  top:10px;
  left:0;
  color:var(--tertiary-color);
  font-family: var(--font-family-aside);
  font-size: 1rem;
  transition: .5s ;
  pointer-events: none;
}

.box div .msg {
  left:12px;
}

.box > div > input:focus ~ label ,
.box > div > textarea:focus ~ label,
.box > div > input:valid ~ label ,
.box > div > textarea:valid ~ label  {
    top:-12px;
    left:0;
    color: var(--secondary-color); 
    
    font-weight:bold;
}
.box > div > textarea:focus ~ label,
.box > div > textarea:valid ~ label  {
  left:12px;
}

.box div .msg:focus {
  left:12px;
}

.box > div > input:focus,
.box > div > textarea:focus,
.box > div > input:valid,
.box > div > textarea:valid {
   border-bottom: 2px solid var(--secondary-color);    
} 

 .send-button{
  background-color: var(--secondary-color);
  color:var(--tertiary-color);
  border-radius: 30px;
  width: 160px;
  text-align: center;
  margin: 35px auto;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.send-button a{
  color: inherit;
}

.send-button:hover {
  filter: brightness(120%);
  transform: translateY(-0.25em);
}

.send-link{
  font-family:var(--font-family-main);
  text-decoration: none;
  
  display: inline-block;
  
  text-align: center;
  padding: 10px 10px;
  
}


.white-bg-contact{
  background-color: var(--tertiary-color);
}

.footer {
  background-color: var(--accent-color);
}

.social-media-icons .media-box, .footer-icon-box .footer-icon{
  transition: all 0.2s ease-in-out;
}

.social-media-icons .media-box:hover, .footer-icon-box .footer-icon:hover {
  
 cursor: pointer;
  -webkit-animation: animatedIcons linear 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation:animatedIcons linear 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: animatedIcons linear 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: animatedIcons linear 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes animatedIcons{
  0% {
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  20% {
    transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  30% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  40% {
    transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  50% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  60% {
    transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  70% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  80% {
    transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  90% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  100% {
    transform:  rotate(0deg) scaleX(1.20) scaleY(1.20) ;
  }
}

@-moz-keyframes animatedIcons{
  0% {
    -moz-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    -moz-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  20% {
    -moz-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  30% {
    -moz-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  40% {
    -moz-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  50% {
    -moz-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  60% {
    -moz-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  70% {
    -moz-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  80% {
    -moz-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  90% {
    -moz-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  100% {
    -moz-transform:  rotate(0deg) scaleX(1.20) scaleY(1.20) ;
  }
}

@-webkit-keyframes animatedIcons {
  0% {
    -webkit-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    -webkit-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  20% {
    -webkit-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  30% {
    -webkit-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  40% {
    -webkit-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  50% {
    -webkit-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  60% {
    -webkit-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  70% {
    -webkit-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  80% {
    -webkit-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  90% {
    -webkit-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  100% {
    -webkit-transform:  rotate(0deg) scaleX(1.20) scaleY(1.20) ;
  }
}

@-o-keyframes animatedIcons {
  0% {
    -o-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    -o-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  20% {
    -o-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  30% {
    -o-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  40% {
    -o-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  50% {
    -o-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  60% {
    -o-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  70% {
    -o-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  80% {
    -o-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  90% {
    -o-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  100% {
    -o-transform:  rotate(0deg) scaleX(1.20) scaleY(1.20) ;
  }
}

@-ms-keyframes animatedIcons {
  0% {
    -ms-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    -ms-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  20% {
    -ms-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  30% {
    -ms-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  40% {
    -ms-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  50% {
    -ms-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  60% {
    -ms-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  70% {
    -ms-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  80% {
    -ms-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  90% {
    -ms-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  100% {
    -ms-transform:  rotate(0deg) scaleX(1.20) scaleY(1.20) ;
  }
}


.footer-text {
  font-family: var(--font-family-aside);
  font-size: 12px;
  font-weight: 400;
  color: var(--tertiary-color);
}

#splashScreen { 
  position:fixed;
  top:0;
  left:0;
  background-color:#222220;
  width:100vw;
  height:100vh;
  z-index:99;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center
}

#splashScreen.loaded {
  animation:shift-out 0.85s ease 2.5s forwards;
}

@keyframes shift-out {
          
  to { top:-100vh} 
}

.visible { 
  opacity:1;
  transform:translate(0);
  transition-property:opacity, transform;transition-duration:1s;
  transition-timing-function:ease;
}

@keyframes line-anim {
  to{
    stroke-dashoffset: 0;
    fill:transparent ;
    
  }
  0% {
    fill:transparent;
  }
  100% {
    
    fill:#f3a404;
  }
}

#logo-2 {
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) ;
  animation: fill 0.3s ease forwards 3s;
 
}

#logo-2 path:nth-child(1) {
  stroke-dasharray: 138.2;
  stroke-dashoffset: 138.2;
  animation: line-anim 2s ease forwards;
  
}

#logo-2 path:nth-child(2) {
  stroke-dasharray: 12.0;
  stroke-dashoffset: 12.0;
  animation: line-anim 2s ease forwards 0.3s;
}

#logo-2 path:nth-child(3) {
  stroke-dasharray: 85.72;
  stroke-dashoffset: 85.72;
  animation: line-anim 2s ease forwards 0.6s;
}

#logo-2 path:nth-child(4) {
  stroke-dasharray: 142.0;
  stroke-dashoffset: 142.0;
  animation: line-anim 2s ease forwards 0.9s;
}

#logo-2 path:nth-child(5) {
  stroke-dasharray: 126.8;
  stroke-dashoffset: 126.8;
  animation: line-anim 2s ease forwards 1.2s;
}

#logo-2 path:nth-child(6) {
  stroke-dasharray: 140.41;
  stroke-dashoffset: 140.41;
  animation: line-anim 2s ease forwards 1.5s;
}

#logo-2 path:nth-child(7) {
  stroke-dasharray: 138.9;
  stroke-dashoffset: 138.9;
  animation: line-anim 2s ease forwards 1.8s;
}


@keyframes line-anim {
  to{
    stroke-dashoffset: 0;
    
    
  }
  
}

@keyframes fill {
  from {
    fill: transparent;
  }
  to {
    fill:#f3a404;
  }
}






@media only screen and (min-width:375px){

  .mobile-nav {
    top:58px;
  }

    .grey-bg-works {
      height: 1850px;
    }
}

@media only screen and (min-width:411px) {
  
  .mobile-nav {
    top:58px;
  }
    .grey-bg-works {
      height: 1890px;
    }

    .platform {
      font-weight: 500;
    }

    .work-text {
      font-weight:400 ;
    }

}

@media only screen and (min-width:425px) {

    .grey-bg-works {
      height: 1930px;
      
    }
}

@media only screen and (min-width:429px) {
  .grey-bg-works {
    height: 1940px;
  }

}

@media only screen and (min-width:448px) {
  .grey-bg-works {
    padding:1000px 0 ;
  }

}

@media only screen and (min-width:472px) {

    .grey-bg {
      height:1400px ;
    }
}


@media only screen and (min-width:475px) {

  .detail-box.name, .detail-box.email{
    margin-left: 25px;
  }
  
  .detail-box.dob, .detail-box.phone{
    margin-left: 40px;
  }
  
  .detail-box.nationality, .detail-box.address{
    margin-left: 55px;
  }

}

@media only screen and (min-width:478px) {
  .grey-bg-works {
    padding:1010px 0 ;
  }

}

@media only screen and (min-width:487px) {
  .grey-bg-works {
    padding:1025px 0 ;
  }

}

@media only screen and (min-width:497px) {
  .grey-bg-works {
    padding:1040px 0 ;
  }

}

@media only screen and (min-width:521px) {
  .grey-bg-works {
    padding:1070px 0 ;
  }

}

@media only screen and (min-width:531px) {
  .grey-bg-works {
    padding:1090px 0 ;
  }

}



@media only screen and (min-width:540px) {
    .grey-bg-works {
      height: 2200px;
    }
}

@media only screen and (min-width:561px) {
  .grey-bg-works {
    height: 2270px;
  }
}

@media only screen and (min-width:565px) {

  .mobile-nav {
    top:18%;
  }
  .detail-box.name, .detail-box.email{
    margin-left: 30px;
  }
  
  .detail-box.dob, .detail-box.phone{
    margin-left: 50px;
  }
  
  .detail-box.nationality, .detail-box.address{
    margin-left: 70px;
  }

  .grey-bg {
      height:1400px;
    } 

    .grey-bg-works {
      
        height:2240px;
      
    }
  
    .white-bg-works {
      top:3.5%;
      left:6%;
    }
  

}

@media only screen and (min-width:626px) {
  .grey-bg-works {
    height: 2320px;
  }
}

@media only screen and (min-width:640px) {
  
  .mobile-nav {
    top:57px;
  }

  .grey-bg-works {
      
    height:2310px;
  
    }
}

@media only screen and (min-width:667px) {

  .grey-bg-works {
      
    height:2310px;
  
    }
}

@media only screen and (min-width:731px) {
  .mobile-nav {
    top:57px;
  }
}


@media only screen and (min-width:768px) {

  .mobile-nav {
    display:none
  }
  
  .hamburger {
    display:none
  }


  nav-link-container{
    display: flex;
  }

  .nav-link-container > ul > li {
    font-family: var(--font-family-main);
    font-size:18px;
    font-weight: 700;
    margin: 0 18px;
  }
  
  .nav-link-container > ul > li > a{
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-family: inherit;
    color: var(--tertiary-color);
  }

  .nav-link-container > ul > li > a{
    position: relative;
}

.nav-link-container > ul > li > a::before{
  content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 2px;
background-color:var(--secondary-color);
transition: transform 300ms ease-in-out;
transform:scaleX(0);
}

.nav-link-container > ul > li > a:hover::before,
.nav-link-container > ul > li > a:focus::before{
  transform: scaleX(1);
}

.nav-link-container > ul > li > a.be-active {
  color: var(--secondary-color);
  font-weight: 700;
}

  .hire-button{
    background-color: var(--secondary-color);
    border-radius: 40px;
    display: block;
    color: white;
    transition: all 0.3s ease-in-out;
  }


  .hire-button:hover {
    filter: brightness(120%);
    transform: translateY(-0.25em);
  }



  .hire-button a {
    color: inherit;
  }

  .hire-button-two{
    display: none;
  }
  
  .hire-me{
    font-family:var(--font-family-main);
    text-decoration: none;
    color: var(--tertiary-color);
    display: inline-block;
    text-align: center;
    padding: 10px 50px;
    
  }

  .hero-img-block{
    width: 50%;
    }


   .overlay-text{
     display: none;
   }

   .content-col{
    background-color: var(--accent-color);
    width: 50%;
    }
  
  .intro{
    display:block;
    font-family: var(--font-family-aside);
    font-weight: 600;
    font-size: 24px;
    color: var(--tertiary-color);
    line-height: 1.3;
  }
  
  .hero-content-block{
    width: 95%;
    }

    .hero-text{
      font-size: 1rem;
    }
  
    .style-name{
       padding-top: 10px;
    }

    /* About Me */
    .about-title {
      font-size: 1.5rem;
      font-weight: 600;
    }

    .yellow-bar {
      height:42px;
      width: 280px;
      top:57%;
    }
  
    .about-detail.dob, .about-value.dob {
      font-size: 0.8rem;
    }
    
    .polygon-1.outside{
     
      width:94%;
      height: 150px;
      -webkit-clip-path:polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, calc(15% - 10vw) 50%);
      clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, calc(15% - 10vw) 50%);
      
    }
    
    .polygon-2.inside {
      position: absolute;
      top: 2.5px;
      left: 3.5px;
      right: 2.5px;
      bottom: 2.5px;
      background-color: var(--accent-color);
      -webkit-clip-path:polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, calc(15% - 10vw) 50%);
      clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, calc(15% - 10vw) 50%);
      
    }
    
    .detail-box.name, .detail-box.address{
      margin-left: 15px;
    }

    .detail-box.address, .detail-box.phone, .detail-box.email{
      margin-top: 27px;
    }
    
    .detail-box.dob, .detail-box.phone{
      margin-left: 0;
    }
    
    .detail-box.nationality, .detail-box.email{
      margin-left: 0;
    }
    
    /* About Me */

    .about-title {
      font-size: 30px;
    }
    .mobile-accordion {
      display:none;
    }

    .skills-lg {
      display: block;
    }

    .lg-title-text {
      font-family:var(--font-family-aside);
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--tertiary-color);
    }

    .lg-body-text {
      font-family:var(--font-family-aside);
      color: var(--tertiary-color);
      
    }

    .tool-name {
      font-family:var(--font-family-aside);
      color: var(--tertiary-color);
      font-size: 13px;
      text-transform: uppercase;
      
    }

    .orange-range {
      height:3px;
      width:10px;
      margin-right: 1px;
      background-color:var(--secondary-color);
      
    }

    .empty-range {
      height:3px;
      width:10px;
      margin-right: 1px;
      background-color:var(--primary-color);
      border: 1px var(--tertiary-color) solid;
    }

    .lg-body-text{
      font-family:var(--font-family-aside);
      color: var(--tertiary-color);
      font-size: 14px;
    }

    

    .grey-hire-btn{
      margin-right:3%; 
    }
    
    .resume {
      margin-left:3%; 
    }

    /* SERVICES */

    .grey-bg {
      height:680px;
    }

    .service-heading {
      font-size: 30px;
      font-weight: 700;
    }
    
    .white-bg {
      top:12%;
      left:6%;
    }
    
    .white-box {
      padding: 25px 35px;
    }
    
    .white-card {
      padding: 10px 15px;
      margin-bottom: 30px;
    }
    
    .white-card-last {
      background-color: #fff;
      border: 1px #c4c4c4 solid;
      padding: 10px 15px;  
    }
    
    .service-title {
      font-weight: 700;
      font-size: 1.1rem;
      }
    
    .service-content { 
      font-size: 0.9rem;  
    }
    
    /* Works */
    .white-box-works {
      padding: 40px 40px;
    }

    .work-heading {
      font-size: 30px;
      font-weight: 600;
    }

    .white-bg-works {
       top:8%;
      left:6%;
    }
    
   .grey-bg-works {
      background-color: var(--primary-color);
      height:1080px;
      padding:0;
    }
    
    .work-content {
      font-family: var(--font-family-aside);
      margin-bottom: 45px;
    }
    
    .work-content-last {
      font-family: var(--font-family-aside);
      
    }
    
    .work-name {
      font-family: inherit;
      font-size: 1.1rem;
      font-weight: 700;
      
    }
    
    .platform {
      font-family: inherit;
      font-size: 1rem;
      font-weight: 400;
    }
    
    .work-text {
      font-family: inherit;
      color: #333;
      font-size: 0.8rem;
    }

    .contact-heading {
      font-size: 30px;
      
    }

    .box {
      padding:30px ;
    }

    .box > div > textarea {
      height:200px ;
      width: 100%;
    }

    .box div .msg {
      left:0;
    }
    
    .box > div > textarea:focus ~ label,
    .box > div > textarea:valid ~ label  {
      left:0;
    }
    
    .box div .msg:focus {
      left:0;
    }

  
    .send-button{
      width: 180px;
      text-align: center;
      margin: 35px auto;
    }
    
    .send-link{
     padding: 10px 10px;
      }

    .footer-text {
      font-size: 14px;
    }
    
} 

@media only screen and (min-width:1024px) {
  
  .intro{
    font-weight: 700;
    font-size: 30px;
    line-height: 1.3;
  }
  
  .hero-name{
    color: var(--secondary-color);
    line-height: 1.4;
  }
  
  .hero-text{
    font-size: 18px;
  }


  .hero-img-block{
    width: 50%;
    height: 100%;
   
  }
  
  .hero-content-block{
    width: 90%;
    
  }
  
  .content-col{
    background-color: var(--accent-color);
    width: 50%;
    
  }

  .style-name{
    padding-top: 50px;
  }

  .about-title {
    font-size: 32px;
    font-weight: 700;
  }

  .yellow-bar {
    height:45px;
    width: 280px;
  }
  
  .about-detail {
    border-bottom: 2px var(--secondary-color) solid;
    font-family: var(--font-family-aside);
    font-weight: 700;
    font-size: 1rem;
    color: var(--tertiary-color);
  }
  
  .about-value {
    font-family: var(--font-family-aside);
    font-size: 1rem;
    color: var(--tertiary-color);
  }
  
  .about-detail.dob, .about-value.dob {
    font-size: 1rem;
  }
  
  .polygon-1.outside{
   
    width:90%;
    height: 150px;
    -webkit-clip-path:polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, calc(15% - 10vw) 50%);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, calc(15% - 10vw) 50%);
    
  }
  
  .polygon-2.inside {
    position: absolute;
    top: 2.5px;
    left: 3.5px;
    right: 2.5px;
    bottom: 2.5px;
    background-color: var(--accent-color);
    -webkit-clip-path:polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, calc(15% - 10vw) 50%);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, calc(15% - 10vw) 50%);
    
  }
  
  .detail-box.name, .detail-box.address{
    margin-left: 27px;
  }

  .detail-box.address, .detail-box.phone, .detail-box.email{
    margin-top: 27px;
  }
  
  .detail-box.dob, .detail-box.phone{
    margin-left: 0;
  }
  
  .detail-box.nationality, .detail-box.email{
    margin-left: 0;
  }

  .lg-title-text {
    font-size: 1.1rem;
    font-weight: 700; 
  }


  .tool-name {
     font-size: 16px;  
  }

  .orange-range, .empty-range {
    height:4px;
    width:14px;
    margin-right: 2px;
   
  }

  .lg-body-text{
     font-size: 16px;
  }

  /* SERVICES */
  .grey-bg {
    height:680px;
  }

  .service-heading {
    font-size: 32px;
    font-weight: 700;
  }
  
  .white-bg {
    top:12%;
    
  }
  
  .white-box {
    padding: 25px 35px;
  }
  
  .white-card {
    padding: 10px 18px;
    margin-bottom: 30px;
  }
  
  .white-card-last {
    padding: 10px 18px;   
  }
  
  .service-title {
    font-weight: 700;
    font-size: 1.1rem;  
  }
  
  .service-content {
    font-size: 1rem; 
  }

  /* WORKS */

  .work-heading {
    font-size: 32px;
    font-weight: 700; 
  }
  
 .grey-bg-works {
    height:1120px;
  }
  
  .white-bg-works {
     top:8%;
    
  }
  
  .work-content {
    margin-bottom: 50px;
  }
  
  .work-content-last {
    font-family: var(--font-family-aside);
    
  }
  
  .work-name {
    font-size: 1.3rem;
    font-weight: 700;
  }
  
  .platform {
    font-size: 1.1rem;
    font-weight: 600;
  }
  
  .work-text {
    font-size: 0.9rem;
    font-weight: 500;
    
  }

  .contact-heading {
    font-size: 32px;
    font-weight: 700;
    
  }

  .send-button{
    width: 190px;
    font-size: 18px;
    
  }

  
}

@media only screen and (min-width:1200px) {
  .about-title {
    font-size: 34px;
    font-weight: 700;
  }

  .yellow-bar {
    top: 55%;
    height:50px;
    width: 280px;
  }
    
  .polygon-1.outside{
   width:85%;  
  }
  
  .polygon-2.inside {
    position: absolute;
    top: 2.5px;
    left: 3.5px;
    right: 2.5px;
    bottom: 2.5px;
    background-color: var(--accent-color);
    -webkit-clip-path:polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, calc(15% - 10vw) 50%);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, calc(15% - 10vw) 50%);
    
  }
  
  .detail-box.name, .detail-box.address{
    margin-left: 30px;
  }

  .detail-box.address, .detail-box.phone, .detail-box.email{
    margin-top: 28px;
  }

  /* SERVICES */
 
  .grey-bg {
    height:650px;
  }

  .grey-bg-works {
    height:1280px;
  }

  .service-heading {
    font-size: 34px;
    font-weight: 700;
  }
  
  .white-bg {
    top:13%;
    left:6%;
  }
  
  .white-box {
    padding: 25px 35px;
  }
  
  .white-card-last {
   padding: 10px 18px;
   border-radius: 10px;
    
  }
  
  .service-title {
    font-weight: 700;
    font-size: 1.2rem;
    }

    /* WORKS SECTION */

    .work-heading {
      font-size: 34px;
      font-weight: 700;
    }
    .white-bg-works {
      top:7%;
     
   }
    .work-name {
      font-size: 1.4rem;
    }
    
    .platform {
      font-size: 1.2rem;
      
    }
    
    .work-text {
      font-size: 1rem;
     }

     /* CONTACT SECTION */
     .contact-heading {
      font-size: 34px;
      
    }
   
  
}

@media only screen and (min-width:1300px) {

  .about-title {
    font-size: 36px;
  }

  .grey-bg-works {
    height:1450px;
  }

  .service-heading {
    font-size: 36px;
    font-weight: 700;
  }
  
  .white-bg {
    top:13%;
    left:6%;
  }
  
  .white-box {
    padding: 25px 35px;
  }
  
  .white-card-last {
   padding: 10px 18px;
   border-radius: 10px;
    
  }
  .work-heading {
    font-size: 36px;
    font-weight: 700;
  }
  .white-bg-works {
    top:7%;
   
 }
  .work-name {
    font-size: 1.7rem;
  }
  
  .platform {
    font-size: 1.5rem;
    
  }
  
  .work-text {
    font-size: 1.3rem;
   }

   .contact-heading {
    font-size: 36px;
    
  }

   .send-button{
    width: 200px;
    font-size: 19px;

    
  }
}

@media only screen and (min-width:1360px) {

  .grey-bg-works {
    height:1550px;
  }


}

@media only screen and (max-width:1165px) {
  .hide-break{
    display: none;
  }
}

@media only screen and (max-width:865px) {

  #logo-name{
       font-weight: 600;
     font-size: 25px;
    
    }
  
  .nav-link-container > ul > li {
    
    font-size:16px;
    font-weight: 600;
    margin: 0 15px;
  }

  .hire-me{
   
    padding: 7px 40px;
    
  }
}

@media only screen and (max-width:320px) {
  .mobile-nav {
    top:10%;
  }
  .grey-bg {
    height:1670px;
  } 

  .grey-bg-works {
    height:1650px;
  }

  .platform {
    font-size: 0.68rem;
    font-weight: 400;
  }
  
  .work-text {
    font-size: 0.63rem;
  }

}

@media only screen and (max-width:280px) {
  .mobile-nav{
    top:56px;
  }
  .grey-bg {
    height:1950px;
  } 

}