:root {
  --primary: #ED701F;
  --secondary: #F29219;
  --gray: #E8E8E8;
  --text-color: #5E5F5F;
}

/* ========================================================================================================= */
/* FONT */
/* ========================================================================================================= */
@font-face {
  font-family: 'Avenir Next LT PRO';
  font-weight: 400;
  src: url(fonts/Avenir-Next-LT-Pro-Regular.otf) format("opentype");
}
@font-face {
  font-family: 'Avenir Next LT PRO';
  font-weight: 700;
  src: url(fonts/Avenir-Next-LT-Pro-Bold.otf) format("opentype");
}

/* ========================================================================================================= */
/* DEFAULT */
/* ========================================================================================================= */
body {
  color: var(--text-color);
  font-family: 'Avenir Next LT PRO', sans-serif;
}
a:hover {text-decoration: none;}

/* FONT WEIGHT */
.font-weight-thin {font-weight: 100 !important;}
.font-weight-extraLight {font-weight: 200 !important;}
.font-weight-medium {font-weight: 500 !important;}
.font-weight-semiBold {font-weight: 600 !important;}
.font-weight-extraBold {font-weight: 800 !important;}
.font-weight-black {font-weight: 900 !important;}

/* LINE HEIGHT */
.line-height-1 {line-height: 1;}
.line-height-2 {line-height: 1.5;}
.line-height-3 {line-height: 2;}

/* TEXT COLOR */
.text-primary,
a.text-primary:hover {color: var(--primary) !important;}
.text-secondary {color: var(--secondary) !important;}
.text-tertiary {color: var(--tertiary) !important;}
.text-gray {color: var(--gray) !important;}

/* BG COLOR */
.bg-primary,
a.bg-primary:hover {background-color: var(--primary) !important;}
.bg-secondary {background-color: var(--secondary) !important;}
.bg-tertiary {background-color: var(--tertiary) !important;}
.bg-transparent {background-color: transparent !important;}

/* BADGE */
.badge {
  border-radius: 1rem;
  padding: .4rem .7rem;
}
.badge-primary {background-color: var(--primary);}
.badge-secondary {background-color: var(--secondary);}
.badge-tertiary {background-color: var(--tertiary);}

/* BTN */
.btn {
  font-size: 15px;
  border-radius: 0;
  border-width: 2px;
  transition: all .2s;
  padding: .8rem 2rem;
}
.btn+.btn{margin-left: .5rem;}

/* BTN PRIMARY */
.btn-primary {
  border-color: var(--primary);
  background-color: var(--primary);
  box-shadow: 0px 10px 30px rgba(0, 26, 65, 0.22);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  border-color: var(--primary);
  background-color: var(--primary) !important;
}
/* BTN SECONDARY */
.btn-secondary {
  border-color: var(--secondary);
  background-color: var(--secondary);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  border-color: var(--secondary);
  background-color: var(--secondary) !important;
}
/* BTN TERTIARY */
.btn-tertiary {
  color: var(--white);
  border-color: var(--tertiary);
  background-color: var(--tertiary);
  box-shadow: 0px 10px 30px rgba(255, 200, 107, 0.22);
}
.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-tertiary:active {
  color: var(--white);
  border-color: var(--tertiary);
  background-color: var(--tertiary) !important;
}
/* BTN OUTLINE TERTIARY */
.btn-outline-tertiary {
  color: var(--primary);
  border-color: var(--tertiary);
}
.btn-outline-tertiary:hover,
.btn-outline-tertiary:focus,
.btn-outline-tertiary:active {
  color: var(--white) !important;
  border-color: var(--tertiary) !important;
  background-color: var(--tertiary) !important;
}
/* BTN OUTLINE LIGHT */
.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active {
  color: var(--tertiary) !important;
  border-color: var(--tertiary) !important;
  background-color: transparent !important;
}
/* BTN OUTLINE GRAY */
.btn-outline-gray {
  color: var(--gray);
  border-color: var(--gray);
}
.btn-outline-gray:hover,
.btn-outline-gray:focus,
.btn-outline-gray:active {
  color: var(--white) !important;
  border-color: var(--gray) !important;
  background-color: var(--gray) !important;
}

/* FORM CONTROL */
.form-control {
  height: auto;
  border: none;
  border-radius: 0;
  padding: .2rem 0;
  color: white !important;
  box-shadow: none !important;
  background-color: transparent !important;
  border-bottom: 2px solid white !important;
}
.form-control::placeholder {color: white;}

/* CARD */
.card {
  border-width: 0;
  overflow: hidden;
  border-radius: 2.7rem;
  box-shadow: 0px 10px 30px rgba(214, 214, 214, 0.25);
}
.card-header,
.card-footer {background-color: transparent;}

/* IMG */
.img-cover {object-fit: cover;}
.img-contain {object-fit: contain;}

/* TITLE */
.sec-title {
  line-height: 1;
  font-size: 3rem;
}

/* BOX ALERTS */
#box-alerts {
  left: 1.5rem;
  bottom: 1rem;
  right: 1.5rem;
  position: fixed;
}

/* PROGRESS BAR */
.progress {
  overflow: visible;
  border-radius: 50px;
}
.progress-bar {
  overflow: visible;
  position: relative;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.progress-bar-text {
  right: 0;
  top: -10px;
  font-weight: 700;
  position: absolute;
  color: var(--secondary);
}

/* ========================================================================================================= */
/* SLICK */
/* ========================================================================================================= */
.slick-dots {
  bottom: -5.5rem;
  padding: 2rem 0;
}
.slick-dotted .slick-dots li {margin: 0 .2rem;}
.slick-dotted .slick-dots li.slick-active button::before {background-color: var(--primary);}
.slick-dotted .slick-dots li button:before {
  opacity: 1;
  content: '';
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--primary);
}

/* ========================================================================================================= */
/* HEADER */
/* ========================================================================================================= */
header nav {transition: all .5s;}
header nav.navbar-light .logo-white,
header nav.navbar-dark .logo-dark {display: none;}
header nav[data-hidden=true] {transform: translateY(-100%);}

header .navbar-toggler {outline: none;}
header .nav-link {
  transition: all .2s;
  border-bottom: 4px solid transparent;
}
header .navbar-dark .nav-link {color: var(--white) !important;}
header .nav-item .nav-link:hover,
header .nav-item.active .nav-link {border-color: var(--primary);}

/* ========================================================================================================= */
/* FOOTER */
/* ========================================================================================================= */
footer {padding: 4rem 0 2rem 0;}

/* ========================================================================================================= */
/* HOME */
/* ========================================================================================================= */
/* BANNER */
#home #banner {
  padding-top: 8rem;
  padding-bottom: 6rem;
}

/* PROJECTS */
#home #projects {
  position: relative;
}
#home #projects::before {
  top: 35%;
  right: 0;
  left: 10%;
  content: '';
  bottom: 15rem;
  position: absolute;
  background-color: var(--primary);
}
#home #projects .project {
  display: block;
  position: relative;
  text-align: center;
  margin-bottom: 5rem;
  box-shadow: 0px 5px 25px rgba(160, 87, 13, 0.31);
}
#home #projects .project .status {
  top: 0;
  left: 50%;
  position: absolute;
  padding: .2rem 2rem;
  color: var(--primary);
  background-color: white;
  transform: translateX(-50%);
}
#home #projects .project::before {
  top: 0;
  left: 0;
  right: 0;
  content: '';
  bottom: 5.8rem;
  position: absolute;
  transition: all .2s;
  background-image: linear-gradient(180deg, transparent 0%, #F0851B 100%);
}
#home #projects .project .name {
  left: 50%;
  bottom: 5.8rem;
  color: white;
  font-weight: 700;
  position: absolute;
  transform: translateX(-50%);
}
#home #projects .project .footer {
  padding: 1.3rem 2rem;
  background-color: #F0851B;
}
#home #projects .project .btn {
  color: white;
  border-color: white;
}
#home #projects .project:hover .btn {
  color: var(--primary);
  background-color: white;
}
#home #projects .project:hover .name,
#home #projects .project:hover::before {
  opacity: 0;
}

/* ABOUT */
#home #about .image-person {
  right: 0;
  bottom: 0;
  position: absolute;
}

/* DEPOIMENTS */
#home #depoiments {padding: 5rem 0;}
#home #depoiments .depoiment {
  display: block;
  margin: 0 3rem;
  padding: 2rem 3rem;
  position: relative;
  color: var(--text-color);
  background-color: #E8E8E8;
}
#home #depoiments .depoiment::before {
  left: -4rem;
  content: '';
  width: 10rem;
  height: 10rem;
  position: absolute;
  color: var(--primary);
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../img/icon/marks.png');
}
#home #depoiments .depoiment .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
#home #depoiments .depoiment .name {
  margin-left: 6rem;
  color: var(--primary);
}
#home #depoiments .slick-arrows {
  padding: 1rem 0;
  text-align: center;
}
#home #depoiments .slick-arrows .arrow-next,
#home #depoiments .slick-arrows .arrow-prev {
  padding: 0;
  border: none;
  outline: none;
  color: #E8E8E8;
  background-color: transparent;
}

/* CONTACT */
#home #contact,
#project #contact {
  padding: 4rem 0;
  position: relative;
}
#home #contact .bg-image,
#project #contact .bg-image {
  top: 0;
  right: 0;
  left: 40%;
  bottom: 0;
  opacity: .2;
  position: absolute;
}
#home #contact form,
#project #contact form {
  width: 100%;
  padding: 3rem 6rem;
}
#home #contact form [type="submit"],
#project #contact form [type="submit"] {
  color: white;
  border-color: white;
}

/* ========================================================================================================= */
/* PROJECT */
/* ========================================================================================================= */
/* BANNER */
#project #banner {padding-top: 8rem;}

/* INFO */
#project #info {padding: 4rem 0;}

/* GALLERY */
#project #gallery .categories {
  display: flex;
}
#project #gallery .categories .category {
  flex-grow: 1;
  cursor: pointer;
  padding: 1rem 2rem;
  text-align: center;
  border-right: 2px solid #707070;
}
#project #gallery .categories .category:last-child {
  border-right: none;
  border-bottom: none;
}
#project #gallery .player {
  height: 25rem;
  display: block;
  overflow: hidden;
  position: relative;
  transition: all .2s;
}
#project #gallery .player::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  opacity: .57;
  position: absolute;
  background-color: #585858;
}
#project #gallery .player .play {
  top: 50%;
  left: 50%;
  z-index: 9;
  width: 80px;
  height: 80px;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}
#project #gallery .thumbnail {opacity: .5;}

/* PROGRESS */
#project #progress {padding-top: 8rem;}
#project #progress .circle-progress>svg {
  width: 200px;
  height: 200px;
}
#project #progress .circle-progress .circle-progress-value {
  stroke-width: 10px;
  stroke: url("#linear-gradient");
}
#project #progress .circle-progress .circle-progress-circle {
  stroke: #E8E8E8;
  stroke-width: 10px;
}
#project #progress .circle-progress .circle-progress-text {
  font-weight: 700;
  font-size: 1.5rem;
  fill: var(--secondary);
}

/* LOCALIZATION */
#project #localization {padding: 5rem 0;}
#project #localization .map {
  overflow: hidden;
  border-radius: 1rem;
}





/*  pagina thanks */


/*
 * Globals
 */


/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}



.nav-masthead .nav-link {
  color: rgba(255, 255, 255, .5);
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}


.videowrapper {
  float: none;
  clear: both;
  width: 50%;
  margin: auto;
  position: relative;
  padding-bottom: 30.25%;
  padding-top: 25px;
  height: auto;
}
.videowrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}