body {
  font-size: 1.1rem;
}

/* Wrapper */
.wrapper {
  position: relative;
}

/* Header */
.header {
  position: sticky;
  top: 0;
  left: 0;
  background-color: var(--PRIMARY-COLOR);
  z-index: 1;
}

.header-sub-container {
  justify-content: space-between;
  width: 90%;
  color: var(--SECONDARY-COLOR);
  margin: var(--XS-N-1) 0;
}

/* Logo */
.logo {
  color: inherit;
}
/* End of Logo */

/* Navigation */
.navigation__li {
  margin-right: 10px;
}

.navigation__a {
  display: block;
  font-size: 1.3rem;
  color: var(--SECONDARY-COLOR);
}
i {
	color: var(--TERTIARY-COLOR);
  }

.navigation__a::after {
  display: block;
  content: "";
  height: 4px;
  width: 0;
  background-color: rgb(255, 255, 143);
  transition: all 0.5s;
}

.active::after {
  display: block;
  content: "";
  height: 4px;
  width: 100%;
  background-color: rgb(247, 188, 5);
}

.navigation__a:hover::after {
  width: 100%;
}
/* End of Navigation */

/* Body of the site */

/* Hero Section */

.hero-details {
  width: inherit;
  flex-flow: column nowrap;
}

.hero__row-1 {
  height: 250px;
}

.hero__row-2 {
}

.hero-headings,
.hero-button {
  text-align: center;
}

/* .hero-sub-heading{
	margin-bottom: var(--SEMI-S-N-1-25)
} */

.hero-btn {
  width: 200px;
  font-size: var(--SEMI-S-N-1-25);
  color: var(--NATURAL);
  background-color: var(--PRIMARY-COLOR);
  border-radius: 10px;
}

.hero-btn:active {
  color: var(--DARK);
  background-color: var(--TERTIARY-COLOR);
}
/*End of Hero Section */

/* Services */
.services-container {
  background-color: var(--DARK-LIGHT);
}

.services__sub-container {
  width: 90%;
}

.services P{
	padding-bottom: 3px;
}

.services__heading {
  text-align: center;
}

.services__details {
  gap: 1rem;
}

.services-items {
  min-height: 200px;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  /* background-color: rgb(11, 1, 56); */
}
.services-bg-img {
  height: 170px;
  border-radius: 5px;
  background-size: cover;
  background-position: 50% 1px;
}

/* Services Item Background Images */
.manually-coding-img {
  background-image: url("../images/services/services-img-1.jpg");
}

.wix-img {
  background-image: url("../images/services/services-img-2.jpg");
}

.wordpress-img {
  background-image: url("../images/services/services-img-3.jpg");
}

.domain-hosting-img {
  background-image: url("../images/services/services-img-4.jpg");
}
.website-fixes-img {
  background-image: url("../images/services/services-img-5.jpg");
}

.web-advice-img {
  background-image: url("../images/services/services-img-6.jpg");
}

.manually-coding-details,
.wix-details,
.wordpress-details,
.website-fixes-details {
  height: 100%;
  width: 100%;
}

.services h3 {
  color: var(--SECONDARY-COLOR);
}

/* .services-items p {
  color: var(--DARK-LIGHT-TEXT);
} */

/* End of Services */

/* Appointment */
.appointment-form {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.appointment-details {
  width: inherit;
  justify-content: space-between;
  gap: var(--XS-N-1);
}
/* Appointment Col-1 */
.appointment-col-1 {
  width: 55%;
}

/* Appointment Col-2 */
.appointment-col-2 {
  flex-flow: column nowrap;
  width: 40%;
  color: var(--PRIMARY-COLOR);
  background-color: var(--SECONDARY-COLOR);
}

.appointment-form-item {
  flex-flow: column nowrap;
  margin-bottom: var(--XXS-N-0-5);
}

.form-input-domain {
  grid-column: 1/3;
}

.form-input-textarea {
  grid-column: 1/3; /* Short For grid-column-start: 1;
	grid-colmn-end: 3;*/
}

.form-input-submit {
  grid-column: 1/3;
}
/* End of Appointment */