/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(0, 100%, 25%);
  --first-color-alt: hsl(0, 98%, 26%);
  --text-color: hsl(353, 16%, 32%);
  --white-color: hsl(60, 20%, 99%);
  --body-color: hsl(0, 0%, 100%);
  --container-color: hsl(0, 0%, 95%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Roboto Condensed", sans-serif;
  /* --second-font: "Roboto Condensed", sans-serif; */
  --biggest-font-size: 2.5rem;
  --bigger-font-size: 1.5rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1150px) {
  :root {
    --biggest-font-size: 4.25rem;
    --bigger-font-size: 2.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

input,select,label,textarea{
  font: inherit;
}
/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1120px;
  margin-inline: 1.5rem;
}
.grid {
  display: grid;
  gap: 1.5rem;
}
.section {
  padding: 4rem 1rem;
  min-height: 550px;
}
.section__page__heading {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: var(--h1-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--first-color);
}
.section__page__title {
  width: 90%;
  margin: auto;
  font-size: var(--bigger-font-size);
  color: var(--first-color);
  font-weight: var(--font-semi-bold);
}
.section__hr{
  border: 2px solid var(--first-color);
  margin-top: 1rem;
  display: block;
}
/* ====================== ABOUT PAGE CSS ================== */

/* ===================== SERVICES PAGE CSS ================== */
.services__page__image{
  place-self: center;
  height: auto;
  width: 250px;

}
.services__page h3 {
  color: var(--first-color);
  font-weight: bold;
  line-height: 1.5;
}
.services__page ol{
  margin-inline: 1rem;
}
/* ===================== WEB DEVELOPMENT & DESIGN PAGE CSS ================== */

/* ===================== GRAPHIC DESIGN PAGE CSS ============================ */

/* ===================== DIGITAL MARKETING PAGE CSS ========================= */

/* ===================== SOCIAL MEDIA MANAGEMENT PAGE CSS =================== */

/* ===================== BULK SMS PAGE CSS ================================== */

/* ===================== CHILDREN BOOLS DEVELOPMENT PAGE CSS ================ */

/* ====================== FAQs PAGE CSS ===================================== */

/* ====================== BLOG PAGE CSS ===================================== */

/* ====================== CONTACTS PAGE CSS ================================= */
.contactPage{
  grid-template-columns: 380px;
  justify-content: center;
}

/*===== FORM =====*/
.contactsSlogans{
  font-size: var(--bigger-font-size);
  font-weight: bold;
  color: var(--first-color);
  text-wrap: wrap;
  margin-bottom: 8px;
}
.contactDetails{
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.contactDetailsBox{
  display: flex;
  gap: 5px;
  align-items: center;
  color: var(--first-color);
  font-size: var(--h3-font-size);
}
.contactDetailsBox span{
  font-weight: bold;
}
.form {
  width: 100%;
  font-size: var(--normal-font-size);
}
.form h2{
  color: var(--first-color);
  font-weight: bold;
  text-align: center;
  padding-top: 1rem;
}
.formItems{
  border: 1px solid var(--text-color);
  border-radius: 6px;
  padding: 1rem;
}
.formButton{
  display: inline-block;
  margin: auto;
  width: 100%;
  background-color: var(--first-color);
  color: var(--body-color);
  padding: .5rem;
  border-radius: 6px;
  text-align: center;
}
/* ========================== BREAKPOINTS ================== */
/* For Small Screen */
@media screen and (max-width: 320px){
  .container{
    margin-inline: 1rem;
  }
}
/* For Medium Screen */
@media screen and (min-width: 576px){
  .contactPage{
    grid-template-columns: 380px;
    justify-content: center;
  }
}
@media screen and (min-width: 768px){
  .services__page, .contactPage{
    grid-template-columns: repeat(2, 350px);
    justify-content: center;
  }
  .form h2{
    display: none;
  }
}
/* For Large Screens */
@media screen and (min-width: 1150px){
  .container{
    margin-inline: auto;
  }
  .services__page{
    grid-template-columns: 300px 700px;
  }
  .contactPage{
    grid-template-columns: 500px 500px;
  }
  .form h2{
    display: none;
  }

}