*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
nav {
    display: grid;
    grid-template-columns: auto auto auto auto;
    /* border: 2px solid red; */
    background-color: #e9d9d25e;
    height: 78px;
    /* width: 100%; */
    position: relative;
  }
  nav::before {
    content: "";
    background: radial-gradient(
        circle,
        rgba(13, 53, 255, 0) 58%,
        rgb(0, 0, 0) 250%
      ),
      url("../PublicSpeakingFear-1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 700px;
    position: absolute;
    top: -10px;
    left: 0;
    z-index: -1;
    opacity: 1;
    /* margin-top: 77px; */
  }
  nav .heading {
    grid-column-start: 1;
    /* border: 2px solid black; */
    grid-column-end: 3;
    display: flex;
    align-items: center;
    padding-left: 40px;
    font-size: 40px;
    color: rgba(233, 228, 223, 0.979);
    cursor: default;
  }
  .button:hover{
    transform: scale(1.2);
  /* font-size: 10px; */
  width: 120px;
  height: 40px;

}
  .button {
      grid-column-start: 4;
      margin-left:20px;
      grid-column-end: 5;
      width: 130px;
      height: 30px;
      margin: auto;
      border-radius: 3px;
      color: rgba(233, 228, 223, 0.979);
    background-color: #d6ec5579;
    font-weight: bold;
    cursor: pointer;
}
  
/* nav.button:hover{
  transform: scale(3);
} */
nav ul {
  display: flex;
  flex-direction: row;
  align-items: center;
    justify-content: center;
    grid-column-start: 3;
    font-size: 20px;
    /* margin-left: 20px; */
    /* border: 2px solid black; */
    flex-basis: 0;
    grid-column-end: 4;
    width: 200px;
  }

  nav ul li {
    height: 20px;
    list-style: none;
    cursor: pointer;
  }

  nav div{
    font-style:oblique;
  }
  nav ul a li{
    font-style: italic;
  }
  nav button{
    font-style: oblique;
  }
  nav ul a {
    text-decoration: none;
    color: rgba(233, 228, 223, 0.979);
  }
  #item1 {
    /* margin: auto 50px auto 0px; */
    position: relative;
    right: 37px;
    top: 0;
  }
  #item2 {
    position: relative;
    left: 37px;
    top: 0;
  }
  #item3 {
    position: relative;
    left: 110px;
    top: 0;
  }
  nav ul li:hover,#sec-1 span:hover {
    /* border-bottom: 2px solid gray; */
    transform: scale(1.5);
    /* font-size: 25px; */
  }
  #sec-1 > p{
    font-family: cursive;
  }
  #sec-1 {
    /* border: 2px solid white; */
    text-align: center;
    width: 100%;
    height: 350px;
    color: rgb(255, 255, 255);
    position: relative;
    top: 100px;
    font-size: 25px;
    left:0;
    padding-top: 190px;
    cursor: default;
    /* margin-left: 250px; */
  }
  /* #sec-1 div {
    font-size: 35px;
    margin-bottom: 30px;
    padding-left: 42px;
  
  } */
  
  /* #sec-1 .button {
    background-color: #e9d9d2ed;
    margin-top: 20px;
  } */
  .button>a{
      text-decoration: none;
      color: black;
  }
  #sec-1::before {
    content: "";
    background-color: #e3a68866;
    /* background: black; */
    border: 0px solid #edc472b5;
    z-index: -1;
    position: absolute;
    top: 50px;
    left: 270px;
    width:40%;
    height: 405px;
    margin-left: 129px;
    border-radius: 274px 274px 0px 0px;
    opacity: 0.7;
  }
  #sec-1 span {
    border: 2px solid red;
    position: relative;
    top: 290px;
    left: 530px;
    font-size: large;
  
  }
  #sec-1 span a{
      text-decoration: none;
      color: rgb(0, 0, 0);
  }  
  #sec-4{
    height: 370px;
    cursor: default;
    background: #d9af92;
    /* border: 2px solid red; */
    position: relative;;
    top: 200px;
    left: 0;
    padding-top: 70px;
}
#support{
    display: grid;
    grid-template-columns: auto;
    width: 380px;
    height: 323px;
    position: relative;
    top: 0;
    left: 458px;
    border-radius: 50% 50% 0 0;
    /* border: 2px solid red; */
    background: #e6cdb9;
    transform:translate(18px,-24px);
}
#support>h1{
    grid-column-start: 1;
    grid-column-end: 2;
    /* border: 2px solid white; */
    width: 304px;
    height: 52px;
    transform: translate(42px,70px);
    text-align: center;
    font-size: 35px;
     font-weight: lighter;

}
#support>p{
    grid-column-start: 1;
    grid-column-end: 2;
    /* border: 2px solid white; */
    width: 409px;
    height: 74px;
    transform: translate(-11px,32px);
    padding: 0px 21px;
    text-align: center;
}
#support>button{
    grid-column-start: 1;
    grid-column-end: 2;
    /* border: 2px solid white; */
    transform: translate(-12px,-4px);
}
#sec-2 {
  /* border: 2px solid white; */
  text-align: center;
  width: 100%;
  height: 750px;
  color: white;
  position: relative;
  top: 200px;
  background-color: #efe2d9;
  display: grid;
  grid-template-columns: auto auto auto;
  cursor: default;
}
#sec-2 > p {
  /* border: 2px solid white; */
  height: 30px;
  grid-column-start: 1;
  grid-column-end: 4;
  transform: translate(0px, 70px);
  color: #baa796;
  font-family: cursive;
}
#sec-2 > h1 {
  /* border: 2px solid white; */
  height: 30px;
  grid-column-start: 1;
  grid-column-end: 4;
  font-size: 42px;
  font-weight: lighter;
  color: black;
  font-family: cursive; 
}
#sec-2 > div {
  /* border: 2px solid white; */
  height: 500px;
  grid-column-start: 1;
  grid-column-end: 4;
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  transform: translate(0px, -15px);
}
#box-1::before {
  content: "";
  /* background: url("../images/img21.jpg"); */
  background: url("../pexels-donald-tong-66134.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 69%;
  height: 250px;
  border-radius: 200px 200px 0px 0px;
  border: 1px solid rgb(34, 32, 32);
  margin: 30px 0px 0px 131px;
}
#box-2::before {
  content: "";
  background: url("../pexels-anna-nekrashevich-6801648.jpg");
  position: absolute;
  top: 0;
  left: 0;
  width: 69.5%;
  height: 250px;
  border-radius: 200px 200px 0px 0px;
  border: 1px solid rgb(34, 32, 32);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 30px 0px 0px 68px;
}
#box-3::before {
  content: "";
  background: url("../pexels-alex-green-5699474.jpg");
  position: absolute;
  top: 0;
  left: 0;
  width: 69.5%;
  height: 250px;
  border-radius: 200px 200px 0px 0px;
  border: 1px solid rgb(34, 32, 32);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 30px 0px 0px 5px;
}
.item {
  /* border: 2px solid rgb(210, 247, 5); */
  position: relative;
  color: black;
}
.title{
    font-weight:500;
}
.title,
.info,
.more {
  background-color: #e5bfa4;
  /* border: 2px solid red; */
  position: relative;
  top: 284px;
  left: 0;
  width: 70%;
  height: 100px;
}
#box-1 h1 {
  margin-left: 130px;
  height: 35px;
  /* width: 315px; */
  height: 50px;
  padding-top: 20px;
}
#box-2 h1 {
  margin-left: 68px;
  height: 50px;
  padding-top: 20px;
}
#box-3 h1 {
  margin-left: 5px;
  height: 50px;
  padding-top: 20px;
}
#box-1 p {
  margin-left: 130px;
}
#box-2 p {
  margin-left: 68px;
}
#box-3 p {
  margin-left: 5px;
}
.info {
  font-size: 17px;
  padding: 20px 5px 0px 5px;
  text-align: center;
}
.more {
  cursor: pointer;
  padding: 20px 0px 0px 0px;
  height: 63px;
  color: black;
}
#box-1 a,
#box-2 a,
#box-3 a {
  text-decoration: none;
}