/*-------------------------------------------------------
@File: Default Styles

This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.
------------------------------------------------------ */

/*=======================================================

@Default Styles

Table of Content:
:: 1.0 Includes
:: 2.0 Font Variables
:: 3.0 Root Variables
:: 4.0 Base CSS
:: 5.0 Header section
:: 6.0 First section
:: 7.0 Second section
:: 8.0 Third section
:: 9.0 Fourth section
:: 10.0 Fifth section
:: 11.0 Sixth section
:: 12.0 Seventh section
:: 13.0 Eigth section
:: 14.0 Ninth section
:: 15.0 Footer section

========================================================*/

/* =========================
  :: 1.0 Includes
========================= */
@import url("bootstrap.min.css");
@import url("fontawesome-all.min.css");

/* =========================
  :: 2.0 Font Variables
========================= */
@import url("css2");

/* =========================
  :: 3.0 Root Variables
========================= */
:root {
  --white: #fff;
  --black: #000;
  --mute-white: #efefef;
  --mute-black: #232323;
  --grey: #767676;
  --yellow: #FFD24B;
  --blue: #2b71b1;

  --font-rubik: 'Rubik', sans-serif;
}

/* =========================
  :: 4.0 Base CSS
========================= */
body {
  font: 300 100%/1.5 var(--font-rubik);
}

button, button:focus {
  outline: none;
  box-shadow: none !important;
  border: none;
}

a {
  text-decoration: none;
}

.custom_frame {
  max-width: 1100px;
}

@media screen and (min-width: 1800px) {
  .container,
  .container-fluid,
  .custom_frame {
    max-width: 80%;
  }
}

.mega_button {
  font: 500 1rem var(--font-rubik);
  letter-spacing: 1px;
  border-radius: 3px;
  padding: 1rem 3rem;
  color: var(--white);
  background-color: #E68722 ;
  transition: all 0.3s ease-in-out;
}

.mega_button:hover {
  color: var(--white);
  background-color: #0d0e0e;
}

#scrollUp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  bottom: 2%;
  right: 0.7%;
  width: 33px;
  height: 50px;
  color: var(--white);
  background-color: var(--red);
  text-align: center;
  font: 1rem sans-serif;
  margin: 10px;
  padding: 0 3px;
  border-radius: 3px;
}

#scrollUp i:first-child {
  font-size: .9rem;
}

/* =========================
  :: 5.0 Header section
========================= */
.header_section .navbar {
  position: fixed;
  width: 100%;
  background: var(--white);
}

.navbar .navbar-brand > img {
  width: 125px;
}

.navbar .nav-link {
  font: 500 1rem var(--font-rubik);
  color: var(--black);
}

.navbar .nav-link:hover {
  color: var(--grey);
  transition: all .5s ease;
}

/* =============== Menu Button Start =============== */
.navbar .navbar-toggler input {
  display: block;
  position: absolute;
  width: 44px;
  height: 35px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  transform-origin: 0% 0%;
}

.navbar .navbar-toggler span {
  display: block;
  width: 29px;
  height: 3px;
  margin: 5px;
  position: relative;
  background: var(--black);
  border-radius: 2px;
  z-index: 1;
  transform-origin: 3px 0px;
  transition: transform .5s cubic-bezier(0.77,0.2,0.05,1.0);
}

.navbar .navbar-toggler span:nth-last-child(1) {
  transform-origin: 0% 100%;
}

.navbar .navbar-toggler input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
}

.navbar .navbar-toggler input:checked ~ span:nth-last-child(2) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

.navbar .navbar-toggler input:checked ~ span:nth-last-child(1) {
  transform: rotate(-45deg) translate(0, -1px);
}
/* =============== Menu Button End =============== */

/* =========================
  :: 6.0 First section
========================= */
.first_section {
  padding-top: 50px;
}

@media screen and (max-width: 575.98px) {
  .first_section {
    padding-top: 80px;
  }
}

.first_section h1 {
  font: 700 4.25rem var(--font-rubik);
}

@media screen and (max-width: 767.98px) {
  .first_section h1 {
    font-size: 10vw;
  }
}

.first_section p {
  font: 400 1rem/1.6 var(--font-rubik);
}

/* =========================
  :: 7.0 Second section
========================= */
.second_section h2 {
  font: 700 3rem var(--font-rubik);
}

@media screen and (max-width: 575.98px) {
  .second_section h2 {
    font-size: 8vw;
  }
}

.second_section p {
  font: 300 1rem var(--font-rubik);
}

.second_section .mega_cards .single_card > h3 {
  font: 700 1rem var(--font-rubik);
}

.second_section .mega_cards .single_card > p {
  font: 400 1rem/1.6 var(--font-rubik);
  color: var(--grey);
}

/* =========================
  :: 8.0 Third section
========================= */
.third_section h2 {
  font: 300 3rem var(--font-rubik);
}

.third_section h3 {
  font: 300 1.5rem var(--font-rubik);
  color: var(--grey);
}

@media screen and (max-width: 575.98px) {
  .third_section h2 {
    font-size: 9vw;
  }
  .third_section h3 {
    font-size: 4.5vw;
  }
}

.third_section .mega_column .row {
  border-top: 2px solid var(--mute-white);
}

.third_section .mega_column .row:last-child {
  border-bottom: 2px solid var(--mute-white);
}

.third_section .mega_column .row > div:first-child span {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 300 2rem var(--font-rubik);
  width: 60px;
  height: 60px;
  border: 2px solid var(--mute-white);
  border-radius: 50%;
}

@media screen and (max-width: 575.98px) {
  .third_section .mega_column .row > div:first-child span {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
}

.third_section .mega_column .row h4 {
  font: 700 1rem var(--font-rubik);
}

.third_section .mega_column .row > div p:nth-child(2) {
  font: 400 1rem/1.6 var(--font-rubik);
  color: var(--grey);
}

/* =========================
  :: 9.0 Fourth section
========================= */
.fourth_section h2 {
  font: 300 3rem/1 var(--font-rubik);
}

.fourth_section h3 {
  font: 300 1.5rem var(--font-rubik);
  color: var(--mute-black);
}

@media screen and (max-width: 575.98px) {
  .fourth_section h2 {
    font-size: 9vw;
  }
  .fourth_section h3 {
    font-size: 4.5vw;
  }
}

.fourth_section h4 {
  font: 500 1rem var(--font-rubik);
  color: var(--mute-black);
}

/* =========================
  :: 10.0 Fifth section
========================= */
.fifth_section h2 {
  font: 700 3rem var(--font-rubik);
}

@media screen and (max-width: 575.98px) {
  .fifth_section h2 {
    font-size: 9vw;
  }
}

.fifth_section .nav-tabs {
  border: none;
}

.fifth_section .nav-tabs .nav-link {
  font: 500 1rem var(--font-rubik);
  letter-spacing: 1px;
  border-radius: 3px;
  padding: 1rem 3rem;
  color: #212529;
  background-color: var(--white);
  cursor: pointer;
  border: 1px solid #212529;
  transition: all 0.3s ease-in-out;
}

.fifth_section .nav-tabs .nav-link.active {
  color: var(--white);
  background: #E68722 ;
  border: none;
}

.fifth_section .nav-tabs .nav-link:hover {
  color: var(--white);
  background: #212529;
}

.fifth_section .tab-content p {
  font: 400 1rem/1.6 var(--font-rubik);
  color: var(--mute-black);
}

/* =========================
  :: 11.0 Sixth section
========================= */
.sixth_section h2 {
  font: 700 3rem/1 var(--font-rubik);
}

@media screen and (max-width: 575.98px) {
  .sixth_section h2 {
    font-size: 9vw;
  }
}

.sixth_section ul > li {
  line-height: 1.8;
}

/* =========================
  :: 12.0 Seventh section
========================= */
.seventh_section h2 {
  font: 300 3rem/1 var(--font-rubik);
}

@media screen and (max-width: 575.98px) {
  .seventh_section h2 {
    font-size: 9vw;
  }
}

.seventh_section .card {
  border: none;
}

.seventh_section .card h3 {
  font: 500 1rem var(--font-rubik);
}

.seventh_section .card p {
  font: 400 1rem/1.6 var(--font-rubik);
  color: var(--grey);
}

/* =========================
  :: 13.0 Eight section
========================= */
.eigth_section h2 {
  font: 300 3rem var(--font-rubik);
}

@media screen and (max-width: 575.98px) {
  .eigth_section h2 {
    font-size: 9vw;
  }
}

/* =========================
  :: 14.0 Ninth section
========================= */
.ninth_section h2 {
  font: 300 3rem var(--font-rubik);
}

@media screen and (max-width: 575.98px) {
  .ninth_section h2 {
    font-size: 9vw;
  }
}

.ninth_section .mega_cards .single_card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.ninth_section .mega_cards .single_card > p {
  font: 400 1rem/1.6 var(--font-rubik);
  color: var(--grey);
}

.ninth_section .mega_cards .single_card div > p:first-child {
  font: 700 1rem/1.6 var(--font-rubik);
  color: var(--grey);
}

.ninth_section .mega_cards .single_card div > p:last-child {
  font: 300 1rem/1.6 var(--font-rubik);
  color: var(--grey);
}

/* =========================
  :: 15.0 Footer section
========================= */
.footer_section {
  padding: 80px 20px 40px;
}

.footer_section p {
  font: 400 1rem var(--font-rubik);
  color: var(--black);
}
.responsive {
    width: 100%;
    height: auto;
}