/* Typography styles 
****************
*/

/* bricolage-grotesque-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/bricolage-grotesque-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/inter-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/inter-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/inter-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Custom Variables
  ****************
*/

:root {

    /* Custom Colors */
    --clr-p-50: #FFFEF5;
    --clr-p-500: #A89271;
    --clr-p-600: #675945;
    --clr-n-0: #FFF;
    --clr-n-10: #F5F5F5;
    --clr-n-20: #E5E5E5;
    --clr-n-900: #000;

    /* Light Version */
    --section-bg-1: var(--clr-n-0);
    --section-bg-2: var(--clr-n-10);
    --section-bg-3: var(--clr-n-900);
    --section-bg-4: var(--clr-p-50);
    --clr-text-color: var(--clr-n-900);
    --logo-color: var(--clr-p-500);
    --menu-color: var(--clr-p-500);

    /* Custom Typography */
    --ff-primary: "Inter", sans-serif;
    --ff-secondary: "Bricolage Grotesque", sans-serif;
  
    --ff-body: var(--ff-primary);
    --ff-heading:  var(--ff-secondary);

    --fw-regular: 400;
    --fw-semi-bold: 500;
    --fw-bold: 700;

    --fs-400: 0.875rem; /* 14px */
    --fs-500: 1rem; /* 16px */
    --fs-600: 1.125rem; /*18px*/
    --fs-700: 1.25rem; /* 20px */
    --fs-725: 1.5rem; /* 24px */
    --fs-750: 2rem; /* 32px */
    --fs-775: 2.5rem; /* 40px */
    --fs-800: 3rem; /* 48px */
    --fs-850: 3.5rem; /* 56px */
    --fs-900: 4.5rem; /* 72px */

    --fs-body: var(--fs-500);
    --fs-primary-heading: var(--fs-700);
    --fs-secondary-heading: var(--fs-600);
    --fs-nav: var(--fs-500);
    --fs-btn: var(--fs-500);

    /* Navbar Height */
    --navbar-h: 94px;

}

/* General Styles 
****************
*/
body {
    font-family: var(--ff-primary);
    font-optical-sizing: auto;
    font-weight: var(--fw-regular);
    font-style: normal;
    font-size: 18px;
    color: var(--clr-text-color);
}

p, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
}

.heading-1 {
    font-size: var(--fs-900);
}

.heading-2 {
    font-size: var(--fs-800);
}

.heading-3 {
    font-size: var(--fs-700);
}

.heading-4 {
    font-size: var(--fs-600);
}

.heading-5 {
    font-size: var(--fs-500);
}

h2, h3, h4, h5, h6,
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6{
    font-family: var(--ff-secondary);
    font-weight: var(--fw-semi-bold);
    text-transform: capitalize;
}

.medium-text {
    font-size: var(--fs-500); /* 16px */
}

/*font for form fields & footer text */
.small-text {
    font-size: var(--fs-400); 
}

/* section class */
.section {
  padding: 8rem 0;
}

.section__heading {
  margin-bottom: 3.5rem;
}

.section__text {
  max-width: 700px;
}

/* Images */
img {
    display: block;
}

/* icons */
.icon {
    color: var(--clr-p-500);
}

.icon-s {
    font-size: var(--fs-725);
}

.icon-m {
    font-size: var(--fs-750);
}

.icon-l {
    font-size: var(--fs-775);
}

/* Hexagon icon with numbers */
.icon__container {
    position: relative;
    width: auto;
    height: min-content;
}

.icon__container--l {
    width: var(--icon-l);;
    height: var(--icon-l);
}

.icon__container--s {
    width: var(--icon-s);
    height: var(--icon-s);
}

.icon__container-num {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--clr-n-0);
    font-size: var(--fs-500);
 }

/* Buttons 
****************
*/
.c-btn {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    font-weight: var(--fw-regular);
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-align: center;
    border-radius: .5rem;
    text-transform: capitalize;
    text-decoration: none;
}

.c-btn--primary {
    border: none;
    background-color: var(--clr-p-500);
    border: 1px solid var(--clr-p-500);
    color: var(--clr-n-0);
}

.c-btn--outline {
    border: 1px solid var(--clr-n-900);
    background-color: transparent;
    color: var(--clr-n-900);
}

.c-btn--primary:hover,
.c-btn--outline:hover {
    transform: scale(1.05);
    text-decoration: none;
}

.c-btn--primary:hover{
    background-color: var(--clr-p-500);
    border-color: var(--clr-p-600);
    border-bottom: 6px solid var(--clr-p-600);
    color: var(--clr-n-0);
}

.c-btn--outline:hover {
    background-color: var(--clr-n-0);
    border-bottom: 6px solid var(--clr-n-900);
}

/* Text Sections */
.text__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

.text__container--items-c {
    place-items: center; /* center img */
    text-align: center;  /*center text */
    align-items: stretch;
}

.text__container--card-lb { /* Left border */
    border-left: 2px solid var(--clr-p-500);
    padding: .5rem 1.5rem;
}

.text__container--card {
    background-color: var(--clr-n-0);
    border: 1px solid var(--clr-p-500);
    padding: 2rem;
    border-radius: 1rem;
}

.text__container--icon {
    display: grid;
    grid-template-columns: auto 1fr;
    gap:1rem;
}

/* links */
a {
  text-decoration: none;
}

a:focus, a:hover {
  text-decoration: none;
}

.icon__link {
    color: var(--clr-p-500);
    transition: color 0.3s ease;
}

.icon__link:hover {
   color: var(--clr-p-600);
}

/* grid with equal rows height */
.grid__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    /* forces every row to be the same height, 
    based on the tallest card in the entire grid */
    grid-auto-rows: 1fr;
    gap: 1.5rem;
}

.grid__item {
    height: 100%;
    display: grid;
}

/* scroll up btn */
.scroll-up-btn {
  font-size: 4rem;
  position: fixed;
  z-index: 1000;
  bottom: 1rem;
  right: -5rem;
  transition: 0.4s ease-in-out all;
  cursor: pointer;
}

.scroll-up-btn svg {
  fill: var(--clr-p-600);
}

.scroll-up-btn:hover {
  font-size: 4.5rem;
}

.scroll-up-btn--show {
  right: 3rem;
}


/* Navbar 
****************
*/
/* override bootstrap with custom class begin with c- */
.c-navbar {
  background: var(--section-bg-1);
  color: var(--text-light); /* Ensure white text */
  border-bottom: 1px solid var(--clr-n-20);
}

.c-navbar__nav {
  padding: 1rem 0px;
}

.c-nav__link {
  text-transform: capitalize;;
  color: var(--clr-text-color);
  transition: color 0.3s ease;
  font-size: var(--fs-500);
  font-weight: var(--fw-regular);
}

.c-nav__link:focus, 
.c-nav__link:hover {
  text-decoration: none;
  color: var(--clr-p-500);
}

/* To override bootstrap styles for active state increase Specificity */
.c-navbar__nav .c-nav__link.active {
  text-decoration: none;
  color: var(--clr-p-500);
  font-weight: var(--fw-bold);
}

.c-navbar__toggler-icon {
  font-size: var(--fs-750);
  background-image: none;
}

.c-navbar__toggler-icon::before {
  vertical-align: middle;
}

.c-navbar__toggler:focus {
  box-shadow: 0 0 0 0.1rem var(--clr-p-500);
}

/* override btn padding in navbar using class Specificity */
.c-navbar .c-navbar__nav .c-btn--primary {
  padding: 0.5rem 1rem; 
}

.logo {
    cursor: pointer;
}

/* Hero 
****************
*/
.hero {
    padding: 9.5rem 0;
    /* shift hero section to bottom by navbar height */
    /* solve overlap fixed position navbar & hero section*/
    position: relative;
    top: var(--navbar-h);
}

.hero__heading,
.hero__text {
    margin-bottom: 2rem;
}

/* About 
****************
*/
.about{
    background-color: var(--clr-p-50);
}

/* Why 
****************
*/
.why{
    background-color: var(--clr-n-0);
}

/* Why 
****************
*/
.how {
    background-color: var(--clr-p-50);
}
.how__img {
    background-color: var(--clr-n-0);
    border: 1px solid var(--clr-p-500);
    border-radius: 1rem;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 3.5rem;
    margin-bottom: 3.5rem;
}

/* Positioning 
****************
*/
.positioning {
    background-color: var(--clr-n-0);
}

/* Cases 
****************
*/
.cases {
    background-color: var(--clr-n-10);
}

/* Partners 
****************
*/
.partners {
    background-color: var(--clr-p-50);
}

/* Team
****************
*/
.team {
    background-color: var(--clr-n-10);
}

/* Contact
****************
*/
.contact {
    background-color: var(--clr-p-50);
}

.contact__heighlight { 
    color: var(--clr-p-500)
}

.contact__separator {
    color: var(--clr-n-20);
    opacity: 1;
    margin: 3.5rem 0 2rem;
    border-top-width: 2px
}

/* Override Boostrap Styles for form */
.c-form-control,
.c-form-select {
    font-size:var(--fs-500);
    border-radius: 0;
    /* solve required mark* getting input not focused */
    position: relative;
     z-index: 2;
}

.c-form-floating .c-form-control-lg {
    height: 2.5rem;
}

.c-form-control::placeholder {
    color: var(--clr-n-900);        
    opacity: 1; /* for firefox */
}

/* Browser reads only the selector it understands */
.c-form-control::-webkit-input-placeholder {
    color: var(--clr-n-900);
}

.c-form-control:-ms-input-placeholder{
    color: var(--clr-n-900);
}


.c-form-floating > label {
    left: 16px;
    font-size: var(--fs-500);
    color: var(--clr-p-600);
}

.c-form-floating > textarea.c-form-control {
    min-height: 100px;
}

.form__group {
    position: relative;
}

.required__mark {
    width: 100%;
    display: inline-block;
    text-align: right;
    color: red;
    position: absolute;
    left: 0;
    z-index: 1;
}

/* Footer 
****************
*/
.footer {
    background-color: var(--clr-n-900);
    color: var(--clr-p-500);
    padding: 3.5rem 0;
}

.footer__links {
  list-style: none;
  padding-left: 0;
  gap: .5rem;
  text-align: left;
}

.footer__link {
  text-decoration: none;
  color: var(--clr-p-500);
  text-transform: capitalize;
  
}

.footer__link:hover, 
.footer__link:active{
  text-decoration: none;
  color: var(--clr-p-600);
  font-weight: 500;
}

.footer__separator {
    color: var(--clr-p-500);
    opacity: 1;
    margin: 2.5rem 0 2rem;
    border-top-width: 1px
}

/* Media Queries 
****************
*/
/* For medium screen */
@media screen and (max-width: 1199px) {
    .hero__img {
        margin: auto;
        width: 100%;
    } 
}
/* For medium screen */
@media screen and (max-width: 991px) {
    :root {
        --navbar-h: 75px;
    }

    .hero {
        padding: 5.5rem 0;
    }

    /* to solve overflow in small screens */
    .grid__container {
        grid-template-columns: 1fr;
    }

}

/* For Small Screens */
@media screen and (max-width: 767px) {
    .hero__heading {
        font-size: var(--fs-800);
    }
    .heading-2 {
        font-size: var(--fs-725);
    }
}

@media screen and (max-width: 461px) {
  .hero__heading {
    font-size: var(--fs-750);
  }

  .c-navbar-brand {
    width: 50%;
  }

}