/*

  1. Pseudo-class root
  2. Navbar
  3. Jumbotron
  4. About
  5. Skill
  6. Project
  7. Certificate
  8. Gallery
  9. Hobby
  10. Community and support
  11. Contact
  12. Footer
  13. Scroll top
  14. Preload

*/


/*
========================================
1. Pseudo-class root
========================================
*/

:root {

  /* color solid */
  --color-zero: transparent;
  --color-one: #fff;
  --color-two: #000;
  --color-three: #fffb00;
  --color-four: #ac8900;
  --color-five: #ffcb00;
  --color-six: rgba(0,0,0,.5);
  --color-seven: #161616;
  --color-eight: #222222;
  --color-nine: #C49B67;

  /* gradient */
  --gradient-one: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.5));
  --gradient-two: linear-gradient(to top, #000, #fffb00, #fff);
  --gradient-three: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);

  /* image */
  --bg-one: url('../image/bg-1.png');
  --profile: url('../image/me-1.png');

  /* svg */
  --bug-hunter: url('../svg/bug.svg');
  --ux-ui: url('../svg/ux ui.svg');
  --webdev: url('../svg/webdev.svg');
  --bug-hunter-hover: url('../svg/bug-hover.svg');
  --ux-ui-hover: url('../svg/ux ui-hover.svg');
  --webdev-hover: url('../svg/webdev-hover.svg');
  
  /* social links hover */
  --facebook: #3b5998;
  --twitter: #1DA1F2;
  --telegram: #0088cc;
  --whatsapp: #4AC959;
  --email: #BB001B;
  --gradient-instagram: linear-gradient(to top right, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  
  /* font */
  --bebas-neue: 'Bebas Neue', cursive;
  --boycott: 'boycott', sans-serif;
  
}

/* Font */
  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
  
  @font-face {
    font-family: boycott;
    src: url(../font/boycott.ttf);
  }


/*
========================================
2. Navbar
========================================
*/
.navbar{
  transition: background-color .5s;
  z-index: 9999;
}

.navbar-style-1 {
  box-shadow: 0 2px 10px var(--color-two);
}

.navbar-nav {
  padding-bottom: 10px;
}

.navbar-brand {
  font-family: var(--boycott);
}

.link{
   text-align:center;
   position:relative;
   height:40px;
   overflow:hidden;
   width:100%;
   cursor:pointer;
   word-wrap: nowrap;
   line-height: 40px;
}

.link:after{
   content: '';
   position:absolute;
   width: 100%;
   border-bottom:1px solid var(--color-nine);
   bottom:50%;
   left:-100%;
   transition-delay: all 0.5s;
   transition: all 1s;
}

.link:hover:after,
.link.hover:after{
   left:100%;
}

.link .text{
   text-shadow:0px -40px 0px var(--color-nine);
   transition:all 0.75s;
   transform:translateY(70%) translateZ(0);
   transition-delay:all 0.25s;
   word-wrap: nowrap;
   color: var(--color-nine) !important;
}

.link:hover .text,
.link.hover .text{
   text-shadow:0px -40px 0px rgba(255, 255, 255, 0);
   transform:translateY(0%) translateZ(0) scale(1.1);
}

/* Small devices (portain phones, 576px and down) */
@media screen and (max-width: 576px) {
  .navbar-nav-color {
    background-color: var(--color-one);
  }
  .nav-link-color{
    color: var(--color-nine) !important;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
  .navbar-nav-color {
    background-color: var(--color-one);
    color: var(--color-two);
  }
  .nav-link-color{
    color: var(--color-two);
  }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
  .navbar-nav-color {
    background-color: var(--color-one);
    color: var(--color-two);
  }
  .nav-link-color{
    color: var(--color-two);
  }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
  .navbar-nav-color {
    background-color: var(--color-zero);
    color: var(--color-one);
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
  .navbar-nav-color {
    background-color: var(--color-zero);
    color: var(--color-two);
  }
}


/*
========================================
3. Jumbotron
========================================
*/

* {
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  background-color: var(--color-one);
}

.jumbotron {
  background-image: var(--bg-one);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: var(--color-one);
  overflow: hidden;
}

.jumbotron::after {
  content: '';
  background-image: var(--gradient-one);
  background-size: cover;
  display: block;
  width: 100%;
  height: 100vh;
  position: absolute;
}

.jumbotron .jumb-img-1 {
  width: 150px;
  height: 150px;
  background-image: var(--profile);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: 2px solid var(--color-three);
  margin: 20px auto;
  transition: .3s;
  z-index: 1;
}

.jumbotron .jumb-img-1:hover {
  transform: scale(1.1);
}

.jumbotron h1 {
  z-index: 1;
}

.jumbotron h2 {
  font-size: 1em;
  z-index: 1;
}

.jumbotron h2 span {
  transition: .3s;
}

.jumbotron h2 span:hover {
  color: var(--color-three);
}

.jumbotron .scroll-down{
	text-align: center;
	display: block;
	position: absolute;
	z-index: 1;
	width: 150px;
	height: 75px;
	left: 50%;
	bottom: 0;
  margin-left: -75px;
	animation: updown 1s ease-in-out infinite;
}

.jumbotron .scroll-down span{
	padding-top: 10px;
	display: block;
	position: relative;
}

.jumbotron .scroll-down span i {
	font-size: 2em;
}

.jumbotron .scroll-down:hover {
	color: var(--color-nine);
}

@keyframes updown {
	0%{
		transform: translateY(0px);
	}
	90%{
		transform: translateY(-20px);
	}
	100%{
		transform: translateY(0px);
	}
}

/*
========================================
4. About
========================================
*/

.about {
  padding-top: 40px;
  padding-bottom: 40px;;
}

.about h2 {
  text-align: center;
}

.about .about-2 p {
  text-align: justify;
  text-indent: 20px;
  font-size: 1em;
}

.about
.about-3-1-1,
.about-3-2-1,
.about-3-3-1 {
  background-color: var(--color-one);
  color: var(--color-two);
  margin: 10px auto;
  box-shadow: 2px 2px 5px var(--color-six);
  border: none;
  transition: .5s ease-in;
}

.about i {
  background-size: cover;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
  margin: 20px auto;
  transition: .5s;
}

.about i.bug-hunter {
  background-image: var(--bug-hunter);
  transition: .5s;
}

.about i.ux-ui {
  background-image: var(--ux-ui);
  transition: .5s;
}

.about i.webdev {
  background-image: var(--webdev);
  transition: .5s;
}

.about .about-3-1-1:hover {
  background-color: var(--color-five);
  color: var(--color-one);
  box-shadow: 5px 5px 10px var(--color-six);
  transform: translate(0, -3px);
}

.about .about-3-2-1:hover {
  background-color: var(--color-five);
  color: var(--color-one);
  box-shadow: 5px 5px 10px var(--color-six);
  transform: translate(0, -3px);
}

.about .about-3-3-1:hover {
  background-color: var(--color-five);
  color: var(--color-one);
  box-shadow: 5px 5px 10px var(--color-six);
  transform: translate(0, -3px);
}

.about .about-3-1-1:hover .bug-hunter {
  background-image: var(--bug-hunter-hover);
}

.about .about-3-2-1:hover .ux-ui {
  background-image: var(--ux-ui-hover);
}

.about .about-3-3-1:hover .webdev {
  background-image: var(--webdev-hover);
}

/* Small devices (portain phones, 576px and down) */
@media screen and (max-width: 576px) {
  .about
  .about-3-1-1,
  .about-3-2-1,
  .about-3-3-1 {
    width: 75% !important;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
  .about
  .about-3-1-1,
  .about-3-2-1,
  .about-3-3-1 {
    width: 80% !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
  .about
  .about-3-1-1,
  .about-3-2-1,
  .about-3-3-1 {
    width: 100% !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
  .about
  .about-3-1-1,
  .about-3-2-1,
  .about-3-3-1 {
    width: 100% !important;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
  .about
  .about-3-1-1,
  .about-3-2-1,
  .about-3-3-1 {
    width: 100% !important;
  }
}

/*
========================================
5. Skill
========================================
*/

.skill {
  padding-top: 40px;
  padding-bottom: 40px;
}

.skillbar-wrapper {
  margin: 1.5em auto;
  max-width: 960px;
}

.skillbar {
  position: relative;
  margin-bottom: 15px;
  width: 100%;
  background: var(--color-two);
  height: 35px;
  border-radius: 3px;
}

.skillbar-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  font-weight: bold;
  font-size: 13px;
  color: #fff;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  margin: 0;
}

.skillbar-title span {
  display: block;
  padding: 0 20px;
  height: 35px;
  line-height: 35px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.skillbar-bar {
  height: 35px;
  width: 0%;
  border-radius: 3px;
  transition: 1000ms linear;
  transition-property: width, background-color;
}

.skill-bar-percent {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 11px;
  height: 35px;
  line-height: 35px;
  color: rgba( 0, 0, 0, 0.4 );
  transition: color 1000ms ease-out;
}

.complete .skill-bar-percent {
  color: var(--color-one);
}

.skillbar-title {
  background: var(--color-zero);
}

.skillbar-bar {
  background: var(--color-five);
}

.skillbar:hover .skillbar-bar {
  background-color: var(--color-four);
}

/*
========================================
6. Project
========================================
*/

.project {
  padding-top: 40px;
  padding-bottom: 40px;
}

.project-1 {
  text-align: center;
  padding-bottom: 10px;
}

.project-2-1-1 {
  border: 2px solid var(--color-five);
  border-radius: 10px;
  padding-top: 20px;
  margin: 10px auto;
  transition: .5s;
  min-height: 575px;
}

.project-2-1-1 .project-2-1-1-1{
  height: 100%;
  float: center;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  margin: auto;
}

.project-2-1-1:hover {
  box-shadow: 5px 5px 10px var(--color-six);
  transform: translate(0, -3px);
  background-color: var(--color-five);
}

.project-2-1-1 img {
  width: 90%;
  margin: auto;
  transition: .5s;
  display: block;
  position: relative;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
  width: 100%;
  margin: auto;
}

.project-2-1-1:hover img {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.project-2-1-1 p {
  text-align: justify;
}

.project-2-1-1 p a {
  text-decoration: none;
  font-weight: bold;
}

.project-2-1-1 a.project-button {
  background-color: var(--color-zero);
  border: 2px solid var(--color-five);
  min-width: 40%;
  outline: none;
  word-wrap: nowrap;
}

.project-2-1-1:hover a.project-button {
  background-color: var(--color-one);
  border: 2px solid var(--color-one);
}

.project-2-1-1 a.project-button:hover {
  background-color: var(--color-six);
  color: var(--color-one);
  border-color: var(--color-one);
  transform: translate(-1px, -3px);
  box-shadow: 2px 2px 5px var(--color-six);
}

/* Small devices (portain phones, 576px and down) */
@media screen and (max-width: 576px) {
  .project-2-1-1 {
    width: 90% !important;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
  .project-2-1-1 {
    width: 90% !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
  .project-2-1-1 {
    width: 100% !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
  .project-2-1-1 {
    width: 100% !important;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
  .project-2-1-1 {
    width: 100% !important;
  }
}

/*
========================================
7. Certificate
========================================
*/

.cert {
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
}

.cert-2-1 {
  margin: 10px auto;
}

.cert-2-1-1 {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.cert-2-1-1 .cert-2-1-1-1 {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 80%;
  left: 0;
  top: 10%;
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #FFF;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  -ms-transform: scale(0,1);
  transform: scale(0,1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cert-2-1-1 img {
  width: 100%;
  margin: auto;
  display: block;
  position: relative;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

.cert-2-1-1 p {
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 1em;
  background-color: var(--color-zero);
  color: var(--color-one);
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}

.cert-2-1-1:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(0.2);
  -webkit-filter: brightness(0.2);
}

.cert-2-1-1:hover .cert-2-1-1-1 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.cert-2-1-1:hover p {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}


/* Small devices (portain phones, 576px and down) */
@media screen and (max-width: 576px) {
  .cert-2-1-1 {
    width: 100% !important;
  }
  
  .cert-2-1-1 p {
    font-size: 1em;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
  .cert-2-1-1 {
    width: 100% !important;
  }
  
  .cert-2-1-1 p {
    font-size: .8em;
  }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
  .cert-2-1-1 {
    width: 100% !important;
  }
  
  .cert-2-1-1 p {
    font-size: .75em;
  }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
  .cert-2-1-1 {
    width: 100% !important;
  }
  
  .cert-2-1-1 p {
    font-size: .75em;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
  .project-2-1-1 {
    width: 100% !important;
  }
  
  .cert-2-1-1 p {
    font-size: .75em;
  }
}


/*
========================================
8. Gallery
========================================
*/

.gallery {
  padding-top: 40px;
  padding-bottom: 40px;
}

.gallery-1 h2 {
  text-align: center;
}

.gallery-2-1-1 {
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  border-radius: 10px;
  margin: 10px auto;
}

.gallery-2-1-1 .gallery-2-1-1-1 {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gallery-2-1-1 img {
  display: block;
  position: relative;
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.7" /><feFuncG type="linear" slope="0.7" /><feFuncB type="linear" slope="0.7" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(0.5);
  -webkit-filter: brightness(0.5);
  width: 100%;
  height: 100%;
}

.gallery-2-1-1:hover img {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.7" /><feFuncG type="linear" slope="0.7" /><feFuncB type="linear" slope="0.7" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(1);
  -webkit-filter: brightness(1);
}

.gallery-2-1-1 p {
  text-transform: uppercase;
  color: var(--color-one);
  text-align: center;
  font-size: 1em;
  padding: 10px;
  width: 100%;
  
}

.gallery-2-1-1:hover p {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
  transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
}

/*
========================================
9. Hobby
========================================
*/

.hobby {
  padding-top: 40px;
  padding-bottom: 40px;
}

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

.hobby-2-1 {
  margin: 10px auto;
}

.hobby-2-1-1 {
  width: 100%;
  height: 100%;
  float: center;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
  background: var(--gradient-three);
}

.hobby-2-1-1 .hobby-2-1-1-1 {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 3em;
  text-align: left;
}

.hobby-2-1-1 img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 60px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
  transition: opacity 0.35s, transform 0.45s;
  -webkit-transform: translate3d(-40px,0,0);
  transform: translate3d(-40px,0,0);
}

.hobby-2-1-1 .hobby-2-1-1-1:before {
  position: absolute;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  border: 1px solid #fff;
  content: '';
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
  transition: opacity 0.35s, transform 0.45s;
  -webkit-transform: translate3d(-20px,0,0);
  transform: translate3d(-20px,0,0);
}

.hobby-2-1-1 p {
  color: var(--color-one);
  opacity: 0;
  font-size: 1em;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
  transition: opacity 0.35s, transform 0.45s;
  -webkit-transform: translate3d(100px,0,0);
  transform: translate3d(100px,0,0);
}

.hobby-2-1-1 p.hobby-2-1-1-1-1 {
  font-size: 2em;
  -webkit-transform: translate3d(-100px,0,0);
  transform: translate3d(-100px,0,0);
}

.hobby-2-1-1 p.hobby-2-1-1-1-2 {
  -webkit-transform: translate3d(100px,0,0);
  transform: translate3d(100px,0,0);
}

.hobby-2-1-1:hover img {
  opacity: 0.25;
  filter: alpha(opacity=60);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.hobby-2-1-1:hover .overlay:before,
.hobby-2-1-1:hover a, .hobby-2-1-1:hover p {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/*
========================================
10. Community
========================================
*/

.community {
  padding-top: 40px;
  padding-bottom: 40px;
}

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

.community-2 {
  margin: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.community-2-1 {
  margin: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


.community-2-1-1 {
  padding: 20px;
  margin: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.community-2-1 img {
  width: 300px;
  height: 300px;
  counter-increment: gallery-cell;
  margin: auto;
  float: center;
  border-radius: 5%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* cell number */
.community-2-1 img:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: var(--color-two);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Small devices (portain phones, 576px and down) */
@media screen and (max-width: 576px) {
  .community-2-1 img {
    width: 300px !important;
    height: 300px !important;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
  .community-2-1 img {
    width: 400px !important;
    height: 400px !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
  .community-2-1 img {
    width: 400px !important;
    height: 400px !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
  .community-2-1 img {
    width: 400px !important;
    height: 400px !important;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
  .community-2-1 img {
    width: 900px !important;
    height: 900px !important;
  }
}

/*
========================================
11. Contact
========================================
*/

.contact {
  padding-top: 40px;
  padding-bottom: 40px;
}

.contact-1 {
  text-align: center;
  margin: 10px auto;
}

.contact-2 {
  color: var(--color-one);
}

.contact-2-1 {
  margin: 10px auto;
}

.contact-2-1 .contact-card {
  border: none;
  margin: auto;
}

.contact-2-1 .contact-card img {
  filter: brightness(.4);
}

.contact-2-1 .contact-card .contact-card-img-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-2-1 .contact-card ul li{
  list-style: none;
}

.contact-2-1 .contact-card a {
  color: var(--color-one);
  margin: 5px 0;
  background-color: var(--color-zero);
  border: 1px solid var(--color-one);
  border-radius: 5px;
  transition: .45s ease-in-out;
}

.contact-2-1 .contact-card a:hover{
  box-shadow: 2px 2px 5px var(--color-one);
  transform: translate(0, -2px);
  border: none;
}

.contact-2-1 .contact-card a.email:hover {
  background-color: var(--email);
}

.contact-2-1 .contact-card a.facebook:hover {
  background-color: var(--facebook);
}

.contact-2-1 .contact-card a.instagram:hover {
  background-image: var(--gradient-instagram);
  color: var(--color-two);
}

.contact-2-1 .contact-card a.telegram:hover {
  background-color: var(--telegram);
}

.contact-2-1 .contact-card a.twitter:hover {
  background-color: var(--twitter);
}

.contact-2-1 .contact-card a.whatsapp:hover {
  background-color: var(--whatsapp);
}

.contact-2-2 {
  margin: 10px auto;
  background-color: var(--color-zero);
  color: var(--color-two);
}

.contact-2-2 .contact-card {
  border: 3px solid var(--color-five);
  margin: 20px auto;
  border-radius: 10px;
}

.contact-2-2 .contact-card ul {
  border: none;
}

.contact-2-2 .contact-card ul li{
  list-style: none;
  background-color: var(--color-zero);
  border: none;
}

.contact-2-2 .contact-card ul li input {
  width: 100%;
  border: 2px solid var(--color-five);
}

.contact-2-2 .contact-card ul li input:hover {
  outline: none;
}

.contact-2-2 .contact-card ul li label{
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-2-2 .contact-card ul li textarea {
  width: 100%;
  border: 2px solid var(--color-five);
}

.contact-2-2 .contact-card ul li .form-check input {
  width: 5px;
}

.contact-2-2 .contact-card ul li button {
  border: 2px solid var(--color-five);
  justify-content: end;
  width: 50%;
}

/* Small devices (portain phones, 576px and down) */
@media screen and (max-width: 576px) {
  .contact-2-1 .contact-card {
    width: 95% !important;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
  .contact-2-1 .contact-card {
    width: 95% !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
  .contact-2-1 .contact-card {
    width: 100% !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
  .contact-2-1 .contact-card {
    width: 100% !important;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
  .contact-2-1 .contact-card {
    width: 100% !important;
  }
}


/*
========================================
12. Footer
========================================
*/

footer {
  background-color: var(--color-seven);
  padding-top: 75px;
  padding-bottom: 50px;
}

footer .footer-1 h2 {
  font-size: 2em;
  text-align: center;
  word-wrap: nowrap;
  color: var(--color-nine);
}

footer .footer-2 {
  margin: 10px auto;
  text-align: center;
  width: 50%;
  display: flex;
  justify-content: center;
}

footer .footer-2 a {
  text-decoration: none;
  width: 50px;
  height: 50px;
  margin: auto;
  text-align: center;
  background-color: var(--color-eight);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  justify-content: center;
  transition: .5s;
}

footer .footer-2 a i {
  color: var(--color-nine);
  font-size: 2em;
  transition: .5s;
}

footer .footer-2 a:hover {
  background-color: var(--color-nine);
  transform: rotate(-45deg);
  transform-origin: center center;
}

footer .footer-2 a:hover i {
  color: var(--color-eight);
  transform: rotate(45deg);
  transform-origin: center center;
}

footer .footer-3 p {
  text-align: center;
  color: var(--color-nine);
  letter-spacing: 3px;
}


/*
========================================
13. Scroll top
========================================
*/

.backtop {
  display: none;
  position: fixed; 
  bottom: 20px; 
  right: 30px; 
  z-index: 99;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: var(--color-seven);
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.backtop i{
  display: block;
  color: var(--color-one);
  font-size: 30px;
  margin: auto;
  text-align: center;
}

.backtop:hover i{
	color: var(--color-nine);
}

/*
========================================
14. Preload
========================================
*/

.preloader {
	width: 100%;
	height: 100%;
	background-color: var(--color-seven);
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	overflow: hidden;
	text-align: center;
	margin: auto;
}

.preloader-1 {
	border: 4px solid var(--color-zero);
	border-right: 4px solid var(--color-nine);
	border-radius: 50%;
	padding: 10px;
	margin: auto;
	animation: spin-1 1s ease-in-out infinite;
}

.preloader-2 {
	border: 4px solid var(--color-zero);
	border-left: 4px solid var(--color-nine);
	border-radius: 50%;
	padding: 10px;
	margin: auto;
	animation: spin-2 1s ease-in-out infinite;
}

.preloader .preloader-img{
	background-image: url('../image/icon-1.png');
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	animation: spinimg 1s ease-in-out infinite;
}

.preloader-loading {
  overflow: hidden;
  height: 100vh;
}

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

@keyframes spin-2 {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-720deg);
    opacity: 1;
  }
}

@keyframes spinimg {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}