@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("https://use.typekit.net/bha1sks.css");

:root {
/*
//////////////////////////////
Zoraflexx
//////////////////////////////
*/
--primary-purple: #320548;
--secondary-purple: #653277;
--primary-green: #539819;
--secondary-green: #91CB53;
--primary-gray: #2A2B2A;
--secondary-gray: #AAA8AA;
--primary-white: #FFF;
}
/*
//////////////////////////////
Section Formatting
//////////////////////////////
*/
section {
    min-height: 300px;
}

footer {
    /* background-size: cover; */
    background-position: 10% 25%;
    background-repeat: no-repeat;
    background-image: url(assets/design.svg);
    min-height: 300px;
    background-color: var(--primary-purple);
    padding: 8em;
}

.background-section-white {
    padding: 8rem;
    background-color: var(--primary-white);
    color: #2A2B2A;
}

.background-section-purple {
    max-height: 50vh;
    background-color: var(--primary-purple);
    padding: 5em;
}

.background-section-primary-gry {
    padding: 6rem;
    background-color: var(--primary-gray);
    color: var(--primary-white);
}

.background-section-secondary-gry {
    padding: 8rem;
    background-color: var(--secondary-gray);
    color: var(--primary-gray);
}
/*
//////////////////////////////
Typography
//////////////////////////////
*/
h1, h2, h3, h4, h5, h6, p, ul, i {
    font-family: 'Montserrat', sans-serif;
}

a:hover {
    color: var(--secondary-green) !important;
  }
/*
//////////////////////////////
Reset Properties
//////////////////////////////
*/
/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/

/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
all: unset;
display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}

/*
Remove list styles (bullets/numbers)
in case you use it with normalize.css
*/
ol, ul {
list-style: none;
}

.footer-menu {
    padding-left: 0em;
}

a.footer-menu {
    padding-left: 0em;
}

li.footer-menu {
    padding-left: 0em;
}

li.footer-link a {
    color: #FFF;
}

/* For images to not be able to exceed their container */
img {
max-width: 100%;
}

/* Removes spacing between cells in tables */
table {
border-collapse: collapse;
}

/* Revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}

/* Navigation */
.main-nav-menu {
    list-style-type: none;
    margin: 0 20rem 0 0;
    padding: 1rem;
    overflow: hidden;
    background-color: #FFF;
  }
  
.main-nav-menu li {
float: left;
}
  
.main-nav-menu li a {
display: block;
color: var(--primary-gray);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
  
.main-nav-menu li a:hover {
}

.carousel-inner{
    width:100%;
    max-height: 600px !important;
}

.footer-link {
    display: inline-block;
}

.footer-link::after {
    content: " | ";
}

.paragraph-header {
    font-weight: 900;
}

/* CSS */
.zoraflexx-button {
  align-items: center;
  background-color: var(--primary-purple);
  border: 2px solid var(--primary-purple);
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  fill: #000;
  font-family: Inter,sans-serif;
  font-size: 16px;
  font-weight: 600;
  height: 48px;
  justify-content: center;
  letter-spacing: -.8px;
  line-height: 24px;
  min-width: 140px;
  outline: 0;
  padding: 0 17px;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.zoraflexx-button:focus {
  color: #171e29;
}

.zoraflexx-button:hover {
  background-color: var(--secondary-purple);
  border-color: var(--secondary-purple);
  fill: #06f;
}

.zoraflexx-button:active {
  background-color: var(--secondary-purple);
  border-color: var(--secondary-purple);
  fill: #06f;
}
    
.hero-text {
    font-weight: 900;
    font-size: 3rem;
    font-style: italic;
    color: #FFF;
    margin-left: 35%;
}

.hero-text::before {
    content: "";
}

.bi-caret-right-fill {
    color: var(--secondary-green) !important;
}

a {
    color: var(--primary-white);
    text-decoration: none !important;
}

a:hover {
    cursor: pointer;
}

form {
    padding-left: 25%;
    padding-right: 25%;
}

.name-input {
    display: block;
    border: 1px solid var(--primary-gray);
    border-radius: 2%;
    width: 100%;
}

.email-input {
    display: block;
    border: 1px solid var(--primary-gray);
    border-radius: 2%;
    width: 50%;
}

.message-input {
    display: block;
    border: 1px solid var(--primary-gray);
    border-radius: 1%;
    width: 100%;
    height: 30%;
}

.submit-button {
    margin: 10px;
    margin-left: 0px;
    padding: 10px 30px 10px 30px;
    background-color: var(--secondary-purple);
    color: var(--primary-white);
}

.submit-button:hover {
    background-color: var(--primary-purple);
}

.zoraflexx-logo {
    float: left;
    padding: 14px 16px;
    margin-left: 20rem;
}

a,
a:focus,
a:hover,
a:visited {
 text-decoration:none;
 transition:.1s linear;
 -o-transition:.1s linear;
 -ms-transition:all linear .1s;
 -moz-transition:.1s linear;
 -webkit-transition:.1s linear
}
a:focus {
 border-radius:1px;
 outline:#000 solid 2px
}

@media (min-width: 768px) {
    .zoraflexx-button {
    min-width: 170px;
  }
}

@media (max-width: 768px) {
    .background-section-white {
        padding: 2rem;
      }

    .background-section-purple {
        padding-left: 0px;
        padding-right: 0px;
    }

    .background-section-primary-gry {
        padding: 2rem;
    }

      .main-nav-menu {
        width: 35%;
      }

      .hero-text {
        font-size: 2.5rem;
        margin-left: 0px;
      }

    .zoraflexx-logo {
        float: none; 
        padding: 0px; 
        margin-left: 0rem;
    }
}