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

/* Colour Scheme */
.white-col {
  color: #fff;
}
.black-col {
  color: #000;
}
.blue-col {
  color: #30b9d9;
}
.green-col {
  color: #c3dd1b;
}
.grey-col {
  color: #626567;
}

/* Heading Fonts only */
h1 {
  font-family: "Roboto", sans-serif;
}
h2 {
  font-family: "Roboto", sans-serif;
}
h3 {
  font-family: "Roboto", sans-serif;
}
h4 {
  font-family: "Roboto", sans-serif;
}
h5 {
  font-family: "Roboto", sans-serif;
}
h6 {
  font-family: "Roboto", sans-serif;
}

/* Link Fonts only */
a {
  font-family: "Roboto", sans-serif;
  font-size: 1.3rem;
  line-height: 1.6;
  margin: 0px;
  padding: 0px;
}

/* Paragraph Fonts only */
P {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0px;
  padding: 0px;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Home Page KStudios logo placement and sizing 
.ks-nav-banner {
  background-color: #fff;
  padding-top: 1%;
  padding-bottom: 1%;
} */

/* NAVBAR - Navigation text/button */
/* unvisited link 
.nav-text:link {
  color: #000;
  text-decoration: none;
} */

/* visited link 
.nav-text:visited {
  color: #000;
} */

/* mouse over link 
.nav-text:hover {
  color: #30b9d9;
} */

/* selected link 
.nav-text:active {
  color: #30b9d9;
} */

/* For "Veronica Kallenbach" text at the top left of the page 
.name-font {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 2rem;
  letter-spacing: -0.05rem;
  margin: 0px;
  padding: 0px;
} */

/* For "info@KStudios.co 077 6233 5694" text at the top right of the page 
.contact-font {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.05rem;
  margin: 0px;
  padding: 0px;
} */

/* Medium devices (tablets, 768px and below) for Veronica Kallenbach text at the top left of the page 
@media (max-width: 768px) {
  .name-sm-fs {
    line-height: 1.2rem;
    font-size: 1.5rem;
  }
} */

/* Medium devices (tablets, 768px and below) for Contact Info text at the top right of the page 
@media (max-width: 768px) {
  .contact-sm-fs {
    line-height: 1.2rem;
    font-size: 1rem;
  }
} */

/* Medium devices (tablets, 768px and below) for QUOTE text inbetween portfolio images + video on the page 
@media (max-width: 768px) {
  .quote-sm-fs {
    line-height: 1.8rem;
    font-size: 1.4rem;
  }
} */

/* ------ MAIN HEADER STYLE ------ */

/* Welcome Text (Main Page Header) Text */
/* LARGE HEADING TEXT */
.welcome-page-font {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  letter-spacing: -0.2rem;
  line-height: 6.25rem;
  font-size: 6rem;
  color: #000;
}

/* Welcome Text (Main Page Header) Text */
/* LARGE HEADING TEXT - FOR MOBILE DEVICE */

/* Medium devices (tablets, 768px and below) */
@media (max-width: 768px) {
  .welcome-sm-fs {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    letter-spacing: -0.17rem;
    line-height: 3.8rem;
    font-size: 3.5rem;
  }
}

/* ------ BUTTON STYLES ------ */

/* Button OUTLINE WHITE (currently not in use) */
.btn {
  background-color: none;
  color: #fff;
  border-color: #fff;
  border-radius: 0%;
  margin-top: 10px;
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 32px;
  padding-right: 32px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.1em;
  font-size: calc(0.75rem + 0.2vw);
}

/* Button OUTLINE WHITE – HOVER (currently not in use) */
.btn:hover {
  background-color: #fff;
  color: #000;
}

/* Button SOLID BLUE */
.btn2 {
  background-color: #30b9d9;
  color: #fff;
  border-color: none;
  border-radius: 0%;
  margin-top: 10px;
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 32px;
  padding-right: 32px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.1em;
  font-size: calc(0.75rem + 0.2vw);
}

/* Button OUTLINE WHITE – HOVER */
.btn2:hover {
  background-color: #000;
  color: #fff;
  border-color: #fff;
}

/* For text under each sample of work – explanation 
.contact-font {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: -0.02rem;
  margin: 0px;
  padding: 0px;
} */

/* Medium devices (tablets, 768px and below) for For text under each sample of work – explanation 
@media (max-width: 768px) {
  .contact-sm-fs {
    line-height: 2rem;
    font-size: 1.4rem;
  }
} */

/* ------ FOOTER STYLES ------ */

/* Footer Colour */
.footer-col {
  background-color: #000;
}

.lets-talk-font {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  letter-spacing: -0.5rem;
  line-height: 14rem;
  font-size: 15rem;
  color: #fff;
}

/* Footer Styles: Large devices (desktops, 992px and below) */
@media (max-width: 992px) {
  .fx-container {
    line-height: 11rem;
    font-size: 12rem;
  }
}

/* Footer Styles: Medium devices (tablets, 768px and below)
@media (max-width: 768px) {
  .fx-container {
    line-height: 11rem;
    font-size: 12rem;
  }
}  */

/* Footer Styles: Medium devices (tablets, 576px and below) 
@media (max-width: 576px) {
  .fx-container {
    line-height: 10rem;
    font-size: 11rem;
  }
}  */

/* Lets Talk column padding */
.lets-talk-column {
  padding-top: 5%;
  padding-bottom: 5%;
}

/* FOOTER - form inputs & button */
/* CONTAINER FOR TEXT & FORM */
.contact-right {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
}

/* SPACING - CONTAINER FOR TEXT & FORM */
.contact-right textarea {
  height: 140px;
  padding-top: 15px;
}

/* STYLE FOR FORM INPUT AREAS */
.contact-inputs {
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  padding-left: 25px;
  font-weight: 300;
  color: #000;
}

/* STYLE FOR FORM INPUT AREAS */
.contact-inputs:focus {
  border: 2px solid #30b9d9;
  background-color: #30b9d9;
}

/* STYLE FOR FORM INPUT AREAS */
.contact-inputs::placeholder {
  color: #666;
}

/* Medium devices (tablets, 768px and below) */
@media (max-width: 768px) {
  .contact-inputs {
    width: 100%;
  }
}