@font-face{
  font-family: 'f1';
  src: url('fonts/latinka.ttf');
}
@font-face{
  font-family: 'f2';
  src: url('fonts/latinkados.ttf');
}

@font-face{
  font-family: 'f3';
  src: url('fonts/latinkatres.ttf');
}

@font-face{
  font-family: 'f4';
  src: url('fonts/latinkacuatro.ttf');
}

* {
  box-sizing: border-box;
}

header,
section {
  overflow-x: hidden;
}

:root {
  --light-black: #2e2c2caf;
  --bggradient: #0032a0;
  --light-gray: rgba(255, 255, 255, 0.877);
}

#navigation {

  z-index: 9999;

}



header a {
  font-family: 'f2';
  font-size: 1.0em;
  color: white;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

header .nav-item:last-child {
  padding-right: 10.5em;
}

header .nav-item {
  padding: 0.9em;
}

header .navbar-brand {
  padding-left: 8rem;
}

header .nav-link:hover {
  color: #ffffFF;
  font-family: 'f1';
  font-size: 15px;
}

header .row .col-md-7 {
  padding: 22vmin 1vmin;
  padding-bottom: 35vmin;
}

header .row .col-md-5 {
  padding: 4.2vmin 1vmin;
}

header .row .col-md-5 img {
  width: 90%;
}

header {
  background: #ff512f;
  /* fallback for old browsers */
  background: var(--bggradient);
}

header .container .col-md-7 {
  font-family: "f1";
}



header .container .col-md-7 h1 {
  font-size: 8.5vmin;
  font-weight: bold;
  margin-top: 0.7em;
  
}

header .container .col-md-7 p {
   font-family: "f2";
}

.primary-btn {
  border-radius: 30px;
  font-weight: bold;
  font-size: 14px;
}

/********** section 1 **************/

.section-1 {
  padding: 13vmin 0vmin;
  background-color: #ffffff;
}

.section-1 .row .col-md-6 .pray img {
  opacity: 0.8;
  width: 80%;
  border-radius: 0.7em;
}

.section-1 .row .col-md-6:last-child {
  position: relative;
}

.section-1 .row .col-md-6 .panel {
  position: absolute;
  top: 7vmin;
  left: -18vmin;
  background: #0032a0;
  border-radius: 0.7em;
  text-align: left;
  padding: 13vmin 5vmin 20vmin 10vmin;
  box-shadow: 0px 25px 42px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.section-1 .row .col-md-6 .panel h1 {
  font-weight: bold;
  padding: 0.4em 0;
  font-size: 2em;
  font-family: 'f1';
  color: #ffffff;
}

.section-1 .row .col-md-6 .panel p {
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.5);
  font-family: 'f2';
  color: #ffffff;
}

/*  Section 2  */

.cover {
  width: 100%;
  height: 50vmin;
  background-position: -24rem -19rem;
  background-size: 150%;
  position: relative;
}

.cover .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.cover .content {
  width: 100%;
  height: 100%;
  background-color: #212529;
  padding-top: 14vmin;
}

.cover .content > h1 {
  font-family: 'f1';
  font-size: 6vmin;
  
  color: #fffc;
}

.cover .content > p {
  font-family: 'f2';
  font-size: 2.8vmin;
  color: #fffc;
}



.purchase > h1 {
  padding-top: 15vmin;
  padding-bottom: 0.1em;
  font-family: 'f1';
}

.purchase > p {
  font-family: 'f2';
  font-size: 3vmin;
  padding-bottom: 10vmin;
}

.purchase .cards .card {
  width: 20rem;
  margin: 7vmin 3vmin;

}

.cards div {
  padding: 0;
  margin: 0;

}

.cards .title {
  background: #0032a0;
  padding: 1.4em 2.5em;
  font-size: 2vmin;
  font-family: 'f1';
  color: #ffffff;

}

.card .card-text {
  padding: 3.5rem 3rem;
  color: black;
  font-family: 'f2';
  background-color: #ffffff;
}

.card-body .pricing {
  background-color: #ffffff;
  border-top-right-radius: 170px;
  border-top-left-radius: 170px;
}


/* Section Team */


footer {
  background: #212529;
  overflow-x: hidden;
  padding: 14vmin 18vmin;
  margin-top: 7vmin;
}

footer p{
  font-family: 'f2';
  color: #ffffff;
}
footer h4{
  font-family: 'f1';
}

footer p > span {
  color: #ffffff;

}

footer input {
  border: none !important;
}

footer input::placeholder {
  color: white !important;
}


footer .input-group .input-group-text {
  background: var(--bggradient);
  border: none;
}

footer .column i {
  color: #ffffff;
  cursor: pointer;
}
footer .column i:hover{
  width: 30px;
  border-radius: 5px;
  text-align: center;
 background-color: #0032a0;
}
/* It is Adjacent sibling combinator */

footer .column i + i {
  padding: 0 0.5em;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background: #000000;
  z-index: 9999;
  transition: all 0.5s ease;
}