@font-face {
  font-family: 'Century Gothic';
  src: url(/fonts/CenturyGothic.ttf);
}
@font-face {
  font-family: 'Century Gothic Bold';
  src: url(/fonts/Century_Gothic_Bold.ttf);
}
body {
  overflow: auto;
}
* {
  font-family: "Century Gothic";
  font-size: 14px;
}
a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-size: 15px;
  position: relative;
}
.main {
  /*display: grid;
  gap: 2rem;
  grid-template-areas:
    "title"
    "subtitle"
    "selecttitle"
    "select"
    "selectdesc"
    "footer";
  grid-template-rows: 6.5vh 15vh 9vh 24vh 5vh 0vh;
  justify-content: space-around;*/
  margin-top: 20vh;
 
}
.subtitle p{
  text-align: center;
}

.title,
.subtitle,
.selecttitle,
.selectdesc {
  padding-left: 10vw;
  padding-right: 10vw;
}

.title {
  grid-area: title;
  text-align: center;
  font-weight: 700;
  display: flex;
  flex-direction: column;
}

.title1,
.title2,
.selecttitle1,
.selecttitle2,
.select,
.subtitle,
.selectdesc {
  width: 80vw;
}

.title1,
.title2bg {
  font-size: 18px;
}
.title2{
  line-height: 2.5em;
}
.title2bg {
  background-color: #fad702;
  border-radius: 30px;
  width: 20vw;
  padding-left: 1vw;
  padding-right: 1vw;
  font-family: "Century Gothic Bold";
  padding: 2px 10px;
}

.subtitle {
  grid-area: subtitle;
  text-align: justify;
  display: inline-block;
}

.selecttitle {
  /*grid-area: selecttitle;*/
  text-align: center;
  /*display: block;*/
 margin-top: 20px;
}
@media screen and (min-width: 1000px) {
  .selecttitle {
    margin-top: 40px;
  }
}
.selecttitle1 {
  font-weight: 700;
  font-size: 15px;
}

.select {
  display:flex;
  justify-content: center;
  margin-top: 20px;
 /* grid-area: select;
  display: grid;
  grid-template-areas:
    "ace bravo"
    "conda delta";
  grid-template-rows: 17.5vh 17.5vh;
  justify-content: center;
  gap: 0.5vh 2vw;*/
  padding-left: calc(15% - 5vw);
  padding-right: calc(15% - 5vw);
}

.img1,
.img2,
.img3,
.img4 {
  padding-top: 12vh;
  background-repeat: no-repeat;
  border: 2px solid #fad702;
  width: 30vw;
  position: relative;
}

.img1 {
  grid-area: ace;
  background-image: url("../smart-guard/img/smartphone.png");
  background-position: 50% 25%;
}

.img1 span,
.img2 span,
.img3 span,
.img4 span {
  font-size: 12px;
  display: block;
  text-align: center;
  height: 4vh;
  /*width: 96%;*/
  color: black;
  font-weight: 700;
  background-color: #fad702;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
  margin-bottom: -1px;
  margin-left: -1px;
}

.img2 {
  grid-area: bravo;
  background-image: url("../smart-guard/img/triangle-alert.png");
  background-position: 50% 25%;
}

.img3 {
  grid-area: conda;
  background-image: url("../smart-guard/img/risk.png");
  background-position: 50% 20%;
}

.img4 {
  grid-area: delta;
  background-image: url("../smart-guard/img/automobile.png");
  background-position: 50% 30%;
}

.selectdesc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 40vw;
  /*grid-area: selectdesc;
  text-align: center;
  display: grid;*/
}
@media screen and (min-width: 1000px){
  .selectdesc{
    margin-top: 180px;
  }
}

@media screen and (min-width: 1000px) {
  .facebook2 a,
  .instagram2 a,
  .linkedin2 a,
  .website2 a,
  .email a,
  .location a {
    font-size: 1em;
    margin-left: 2vw;
  }
}
.header1 .logo img,
.footer .footer1 img {
  height: 7vh;
  /*border: black 1px solid;
    border-radius: 90%;
    background-color: #FAD702;*/
}
@media (min-width: 1000px) {
  
}
.coming-soon {
  left: 0;
  position: absolute;
  text-align: center;
  top: 30px;
  width: 100%;
  font-weight: 900;
  color: #fad702;
  background: black;
  padding: 3px 0;
  z-index: 99;
  font-size: 10px;
}
.greyscale {
  -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  -o-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(100%);
  filter: gray;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
}