/*=============== BASE ===============*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

:root {
  --primary: #52796f;
  --complement: #cad2c5;
  --buttons-red: #ff7161;
  --buttons-gray: #959595;
  --white: #ffffff;
}

.logo {
  list-style: none;
}

.logo p {
  font-weight: bold;
  color: #52796f;
  font-size: 1.7em;
}

.logo a {
  text-decoration: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*=============== SECTIONS ===============*/

.section-one {
  background-color: rgba(202, 210, 197, 0.25);
  height: 95vh;
}

/*=============== HEADER ===============*/

#hamburger-icon {
  display: none;
}

.nav_bar {
  display: flex;
  width: 100%;
  padding: 20px;
  /* background-color: gainsboro; */
  justify-content: center;
  align-content: center;
  vertical-align: middle;
  filter: drop-shadow(0px 0.5px 1px rgba(0, 0, 0, 0.25));
}

.nav_list {
  display: flex;
  width: 65%;
  height: 100%;
  justify-content: space-between;
  vertical-align: middle;
  background-color: var(--white);
  border-radius: 10px;
  padding: 10px 15px 10px 15px;
}

.nav_items {
  display: flex;
  list-style: none;
  vertical-align: center;
  text-align: center;
  align-items: center;
  gap: 50px;
}

.nav_items a {
  color: black;
  text-decoration: none;
  padding: 5px;
  border-radius: 5px;
}

#side-menu {
  display: none;
}

.donate-button {
  padding: 5px 10px 5px 10px;
  background-color: var(--primary);
  border-radius: 5px;
}

.donate-button p {
  color: var(--white);
  font-weight: 500;
}

.donate-button:hover {
  opacity: 0.8;
  transition-duration: 350ms;
}

.donate-link {
  color: var(--primary);
  text-decoration-color: var(--primary);
  text-decoration: none;
  text-decoration: underline;
}

.dl-button {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top:20px;
  margin-bottom: 20px;
}

.dl-button:hover {
  opacity: 0.9;
  transition-duration: 200ms;
}

.dl-button:active{
  opacity: 0.7;
  transition-duration: 100ms;
}

.download-button{
  background-color: var(--primary);
  border: none;
  cursor: pointer;
  border-radius: 5px;
  width: 65%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 5px;
  margin-bottom: 30px;
}

.download-button:active {
  opacity: 0.8;
}

.download-icon {
  height: 35px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(106%) contrast(101%);
}

.download-button p {
  color: white;
  font-weight: 400;
  font-size: 1.1em;
}

.main-headline {
  width: 100%;
  display: flex;
  justify-content: center;
}
.main-headline p{
  font-weight: 600;
  background-color: #ffffff;
  width: fit-content;
  border-radius: 10px;
  padding: 8px;
  color: var(--primary);
}

#loginBtn {
  border: 2px solid var(--primary);
  color: var(--buttons-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--primary);
  font-size: small;
}

#signupBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  font-weight: 600;
  color: white;
  font-size: small;

}

#signupBtn:hover {
  opacity: 0.8;
  transition-duration: 300ms;
}


/*=============== HERO SECTION ===============*/

#hero-logo {
  color: var(--primary);
  margin-top: 25px;
  font-size: 6em;
  font-weight: 700;
}

#hero-image {
  margin-top: 35px;
}

#hero-image a img {
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

#hero-image a img:hover {
  cursor: pointer;
  transition-duration: 400ms;
  box-shadow: 0px 0px 16px 4px #52796F;
}
.hero-container {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  text-align: center;
}

.hero-heading {
  text-align: center;
  font-weight: bold;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}

.hero-heading p {
  font-size: 50px;
  color: #52796f;
  margin-top: 10px;
}

.hero-text {
  margin-top: 30px;
}

.hero-benefits {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.hero-benefits ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  width: 35%;
  text-align: center;
  margin-top: 30px;
}

.hero-benefits ul li {
  text-align: center;
  font-weight: bold;
}

.hero-button {
  display: flex;
  justify-content: center;
  width: 100%;
}

.hero-button a {
  display: flex;
  align-items: center;
  padding: 10px;
  text-decoration: none;
  background-color: var(--primary);
  color: white;
  border-radius: 5px;
  gap: 5px;
  margin-top: 30px;
  font-weight: 600;
}

.hero-button a:hover {
  opacity: 0.9;
  transition-duration: 300ms;
}

div.overlay {
    display:        none;
    position:       fixed;
    top:            0;
    left:           0;
    width:          100%;
    height:         100%;
}
div.overlay > div {
    display:        table-cell;
    width:          100%;
    height:         100%;
    background:     #ccc;
    text-align:     center;
    vertical-align: middle;
}

#file-upload {
  display: none;

}

/*=============== INVOICE STYLING  ===============*/

/* #invoice-styling {
  display: flex;
  justify-content: center;
  width: 100%;
  gap:10px;
}

#color-picker {
  width: 32.5%;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

#font-picker {
 width: 32.5%;
border: 1px solid rgba(0, 0, 0, 0.25);
}
 */

 /*=============== HERO TILES ===============*/
 #hero-tiles-section {
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;

 }

 #hero-tiles-top{
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;

 }
 #hero-tiles-bottom{
 width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;

 }

 .hero-tiles {
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  margin-top: 20px;
  padding: 20px;
  width: 65%;
 }

 .hero-tiles:hover {
  cursor: pointer;
  transition-duration: 400ms;
  box-shadow: 0px 0px 16px 4px #52796F;
 }

 .hero-tiles h1 {
  color: #52796f;
  display: flex;
  justify-content: left;
  font-size: 3em;
 }

 .hero-tiles p {
  color: #52796f;
  display: flex;
  justify-content: left;
  text-align: left;

 }

 #benefits-heading {
color: var(--primary);
font-size: 4em;
margin-top: 20px;
 }






/*=============== INVOICE GENERATOR ===============*/

#invoice-generator-section {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  overflow: visible;
  width: 100%;
  align-items: center;
}

#invoice-generator {
  border: 1px solid rgba(0, 0, 0, 0.25);
  width: 65%;
  border-radius: 10px;
  padding: 40px 40px 30px 40px;
  background-color: var(--white);
}

#upload-icon {
  height: 50px;
  filter: brightness(0) saturate(100%) invert(45%) sepia(6%) saturate(1838%)
    hue-rotate(114deg) brightness(93%) contrast(82%);
}

/*=============== INVOICE GENERATOR | SECTION 1 ===============*/

.inv-sec-1 {
  display: flex;
  flex-flow: row;
  display: flex;
}

.inv-sec-1-l {
  width: 50%;
}

.inv-sec-1-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.25);
  width: 175px;
  height: 150px;
  border-radius: 10px;
}

.inv-sec-1-logo:hover {
  cursor: pointer;
  opacity: 0.8;
  transition-duration: 300ms;
}

.inv-sec-1-logo p {
  color: rgba(0, 0, 0, 0.5);
}

.inv-sec-1-title {
  margin-top: 15px;
  font-size: 0.7em;
}

.inv-sec-1-title p {
  font-weight: 600;
  color: var(--primary);
  font-size: 3.3rem;
}

.inv-sec-1-r {
  width: 50%;
}
.inv-sec-1-inputs li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 25px;
  justify-content: end;

}

.inv-sec-1-inputs li input {
  padding: 7.5px 10px 7.5px 10px;
  border-radius: 5px;
  border: 0.4px solid rgba(0, 0, 0, 0.25);
  font-size: 1.1em;
  width: 50%;
}
.inv-sec-1-inputs li p {
  display: flex;
  justify-content: flex-start;
  width: 30%;
}

.inv-sec-1-inputs li input[type='date'] {
  padding: 7.5px 10px 7.5px 10px;
  border-radius: 5px;
  border: 0.4px solid rgba(0, 0, 0, 0.25);
  width: 50%;
}

.inv-sec-1-inputs li input:focus {
  border: 1px solid var(--primary);
  outline: none;
}

.inv-sec-1-inputs li input::placeholder {
  font-size: 0.8em;
}



.inv-input-title {
  color: #52796f;
  font-weight: 600;
  font-size: 1.0em;
}

/*=============== INVOICE GENERATOR | SECTION 2 ===============*/

.inv-sec-2 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 50px;
}

.inv-sec-2-l {
  width: 40%;
}

.inv-sec-2-l input:focus {
  border: 1px solid var(--primary);
  outline: none;
}

.inv-sec-2-bt {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9em;
}

.inv-sec-2-l-cn input {
  width: 100%;
  padding: 7.5px 10px 7.5px 10px;
  border-radius: 5px;
  border: 0.4px solid rgba(0, 0, 0, 0.25);
  font-size: 0.8em;
  margin-top: 5px;
}
.inv-sec-2-l-abn input {
  width: 100%;
  padding: 7.5px 10px 7.5px 10px;
  border-radius: 5px;
  border: 0.4px solid rgba(0, 0, 0, 0.25);
  font-size: 0.8em;
}

.inv-sec-2-l-st {
  width: 100%;
  display: flex;
  gap: 5px;
}

.inv-sec-2-l-snum {
  width: 30%;
}

.inv-sec-2-l-sname {
  width: 70%;
}

.inv-sec-2-l-st input {
  width: 100%;
  padding: 7.5px 10px 7.5px 10px;
  border-radius: 5px;
  border: 0.4px solid rgba(0, 0, 0, 0.25);
  font-size: 0.9em;
  margin-top: 5px;
}

.inv-sec-2-l-sbzc {
  width: 100%;
  display: flex;
  gap: 5px;
}

.inv-sec-2-l-sbzc input {
  width: 100%;
  padding: 7.5px 10px 7.5px 10px;
  border-radius: 5px;
  border: 0.4px solid rgba(0, 0, 0, 0.25);
  font-size: 0.9em;
  margin-top: 5px;
}

.inv-sec-2-l-sb {
  width: 65%;
}
.inv-sec-2-l-zc {
  width: 35%;
}

.inv-sec-2-r {
  width: 40%;
}

.inv-sec-2-r input:focus {
  border: 1px solid var(--primary);
  outline: none;
}

/*=============== INVOICE GENERATOR | SECTION 3 ===============*/

.inv-sec-3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}

#item-titles{
  display: flex;
  gap: 10px;
}

#item-title-1{
  width: 85%;
}
#item-title-2{
  width: 10%;
}
#item-title-3{
  width: 10%;
}
#item-title-4{
  width: 10%;
}
#item-title-5{
  width: 10%;
}

#inv-item-container {
  width: 100%;
  display: flex;
  flex-direction: column;

}

.inv-items {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: start;
  list-style: none;
  gap: 10px;
  page-break-inside: auto;
  page-break-before: avoid;
  margin-bottom: 20px;

  padding-top: 5px;
}

.inv-items div textarea {
  width: 100%;
  display: flex;
  padding:5px;
  border-radius: 5px;
  border: 0.4px solid rgba(0, 0, 0, 0.25);
  margin-top: 5px;
  resize: none;
}

.inv-items div input {
  width: 100%;
  display: flex;
  padding:5px;
  border-radius: 5px;
  border: 0.4px solid rgba(0, 0, 0, 0.25);
  margin-top: 5px;
  resize: none;
}

.inv-items div textarea:focus {
  border: 1px solid var(--primary);
  outline: none;
}

.inv-items div input:focus {
  border: 1px solid var(--primary);
  outline: none;
}

.inv-items div button {
  width: 75%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 5px;
  color: white;
  padding: 5px;
}

.inv-items div button:hover{
  cursor: pointer;
  opacity: 0.8;
  transition-duration: 300ms;
}

.inv-items div button:active {
  opacity: 0.6;
}

.inv-items div input:focus {
  border: 1px solid var(--primary);
  outline: none;
}

.inv-item-desc {
  width: 70%;
  font-size: 0.8em;

}

.inv-item-qty {
  width: 10%;
}

.inv-item-amount {
  width: 10%;
}
.inv-item-total {
  width: 10%;
}

.inv-item-del {
  width: 10%;
}

.inv-item-del button {
  background-color: var(--buttons-red);

}

#remove-button {
  background-color: var(--buttons-red);
  outline: none;
  border: none;
  padding: 5px;
  border-radius: 5px;
  margin-top:5px;
  color: white;
  height: 100%;
  display: flex;


}

#new-item {
  display: none;
}

#inv-biller-inputs{
  margin-top: 10px;
  font-size: 0.9em;
}

#inv-billee-inputs{
  margin-top: 10px;
  font-size: 0.9em;
}

/*=============== INVOICE GENERATOR | SECTION 4 ===============*/

.inv-sec-4 {
  width: 100%;
  display: flex;
  justify-content: center;

}
.add-btn {
  background-color: var(--primary);
  color: var(--white);
  padding: 10px 15px 10px 15px;
  border-radius: 5px;
  border: none;
  font-size: 1.05;
  font-weight: 600;
  cursor: pointer;
}

.add-btn:hover {
  opacity: 0.9;
  transition-duration: 350ms;
}

.item-description {
  field-sizing: content;
  word-wrap: break-word;
}

/*=============== INVOICE GENERATOR | SECTION 5 ===============*/

.inv-sec-5 {
  width: 100%;
  display: flex;
  margin-top:10px;
}

.inv-sec-5-l {
  width: 50%;
}

#notes-input p{
  margin-bottom: 5px;
}

.notes-text-area{
  width: 90%;
  padding: 7.5px 10px 7.5px 10px;
  border-radius: 5px;
  border: 0.4px solid rgba(0, 0, 0, 0.25);
  height: 100px;
  display: flex;
  align-items:start;
  outline: none;
  resize: none;
}

#notes-text-area:focus{
  border: 1px solid var(--primary);
}

#notes-text-area::placeholder {
  opacity: 0.9;
}

#bank-input {
  margin-top: 30px;
}

#bank-input p {
  margin-bottom: 5px;
}

.inv-sec-5-r {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;

}

.inv-sec-5-r div input {
  display: flex;
  width: 50%;
  padding: 7.5px 10px 7.5px 10px;
  border-radius: 5px;
  border: 0.4px solid rgba(0, 0, 0, 0.25);
  outline: none;
  justify-content: end;
  align-items: center;
  height: 100%;
}

.inv-sec-5-r div p {
  display: flex;
  align-items: center;
  height: 100%;
}

.inv-sec-5-r div {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 10px;
}

/*=============== INVOICE GENERATOR | SECTION 6 ===============*/

.footer-div{
  margin-top: 25px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.footer-div p {
  color: rgba(0, 0, 0, 0.5);
}

.footer-div p span{
  font-weight: 800;
}

.footer-div p span a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.5);
}

/* ======================= SUPPORT  =========================== */

.section-one-support {
  height: 100vh;
  background-color: rgba(202, 210, 197, 0.25);
}
#support-div {
  width:100%;
  display: flex;
  justify-content: center;
  margin-top: 25px;

}

#support-form {
  width: 30%;
   border: 1px solid rgba(0, 0, 0, 0.25);
   background-color: var(--white);
   padding: 20px;
   border-radius: 10px;
   display: flex;
   flex-flow: column;
   padding: 20px;
   gap:20px;
   justify-content: center;
   align-items: center;
}

#support-email {
  border: 1px solid rgba(0, 0, 0, 0.25);
  width: 60%;
  margin-left: 10px;
  padding: 10px;
  border-radius: 5px;
}


#support-reason {
  border: 1px solid rgba(0, 0, 0, 0.25);
  width: 60%;
  padding: 10px;
  border-radius: 5px;
}

#support-form p {
  color: var(--primary);
  font-size: 1.5em;
  font-weight: 600;
  margin-top: 20px;
}

#contact-form-top {
  width: 100%;
  display: flex;
  flex-flow: column;
  gap: 20px;
}

#contact-form-bottom {
  width: 100%;
  display: flex;
  justify-content: center;
}
#contact-form-bottom textarea{
  resize: none;
  width: 350px;
  height: 150px;;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  padding: 10px;
  margin-top: 5px;
}

#contact-form-bottom textarea:focus {
  border: 1px solid var(--primary);
  outline: none;
}

#contact-form-submit {
  width: 20%;
  height: 20px;
  outline: none;
  border: none;
  background-color: var(--primary);
  color: white;
  border-radius: 5px;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#contact-form-submit:hover {
opacity: 0.7;
transition-duration: 250ms;
cursor: pointer;
}

#hr-div{
  display: flex;
  width: 100%;

  justify-content: center;
  text-align: center;
  align-items: center;
}
#hr {
  border-top:  1px solid rgba(0, 0, 0, 0.25);
  width: 65%;
  margin-top: 30px;
}

/* ======================= FOOTER =========================== */
#footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 30px;
}

#footer p {
  font-size: 1.1em;
  font-weight: 400;
}


/* ======================= RESPONSIVE LAYOUT =========================== */

@media (max-width: 768px) {
/* ======================= HOME PAGE =========================== */
.section-one {
  height: 85vh;
}
.nav_list {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.nav_items {
  display: none;

}

.logo {
  display: flex;
  flex-flow: row;
  gap: 10px;
  align-items: center;
}

.logo img{
  margin-top: 3px;
  height: 27px;
}

.logo img:hover{
  cursor: pointer;
  opacity: 0.7;
  transition-duration: 250ms;
}

#hr {
  width: 90%;
}

#hamburger-icon {
  display: flex;
}

#side-menu {
  display: none;
  width: 100%;
  position: fixed;
  height: 100%;
  background: var(--white);
  top: 0;
  padding: 40px;
  z-index: 100;
}

#side-menu ul{
list-style: none;
text-decoration: none;
width: 100%;
}

#side-menu ul li {
  margin-top: 20px;
  width: 100%;
}

#side-menu ul li a {
  text-decoration: none;
  color: black;
  font-size: 1.1em;
}

#side-menu ul li a:hover {
  opacity: 0.7;
  transition-duration: 300ms;
}

#side-menu-close{
  width: 100%;
  display: flex;
  justify-content: end;
}

#side-menu-close button{
  padding: 10px;
  font-size: 1.5em;
  font-weight: 500;
  outline: none;
  border: none;
  background: var(--white);
  cursor: pointer;
}

#side-menu-close button:hover{
  opacity: 0.7;
  transition-duration: 250ms;
}

.hero-benefits ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  width: 80%;
  text-align: center;
  margin-top: 30px;
}

.hero-heading {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding: 10px;
}

.hero-heading p {
  font-size: 25px;
  color: #52796f;
  margin-top: 10px;
  text-align: center;
}

.hero-text {
  padding: 0px 10px 0px 10px;
}

.hero-image {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#hero-logo {
  font-size: 4em;
}

#hero-img {
  width: 90%;
}

#benefits-heading {
  font-size: 2.5em;
}

.hero-tiles {
  width: 90%;
}

.hero-tiles h1 {
  font-size: 1.5em;
}

.hero-tiles p {
  font-size: 0.9em;
}

/* ======================= INVOICE PAGE =========================== */

.inv-sec-1 {
display: flex;
flex-flow: column;
}
.inv-sec-1-r {
  width: 100%;
  justify-content: center;
}

.inv-sec-1-inputs li {
list-style: none;
display: flex;
align-items: center;
gap: 5px;
font-size: 0.95em;
justify-content: center;
}

#invoice-generator {
  width: 90%;
  padding: 20px;
}
.inv-sec-1-l {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}

.inv-sec-1-logo{
  width: 100%;
}

.inv-sec-1-title {
  text-align: center;
}

.inv-sec-2 {
  display: flex;
  flex-flow: column;
  margin-top:10px;
}

.inv-sec-2-l {
  width: 100%;
}

#inv-biller-inputs {
  margin-top: 2px;
  margin-bottom: 15px;
}

#inv-billee-inputs {
  margin-top: 2px;
}

.inv-sec-3 {
  margin-top: 30px;;
}

.inv-items {
  gap:5px;
}

#item-titles{
justify-content: space-between;
  width: 100%;
}

#item-titles div p {
  font-size: 0.8em;
}

.inv-item-desc{
  width: 60%;
}

#item-title-1 p {
  width: 100%;

}

.inv-item-qty{
  width: 12.5%;

}

#item-title-2 p{
  width: 12.5%;
}
.inv-item-amount {
  width: 12.5%;
}

#item-title-3 p{
  width: 12.5%;
  margin-right: 20px;
  margin-left: 2px;

}

.inv-item-total {
  width: 12.5%;
}

#item-title-4 p{
  width: 12.5%;
   margin-left: 15px;
}

.inv-item-del{
  width: 12.5%;
}

#item-title-5 {
  width: 12.5%;
}

#remove-button {
  margin-top: 5px;
}

/* SUPPORT PAGE */

#support-form {
  width: 90%;
  margin-bottom: 20px;
}
}