body {
    background-color: #f8f8f8;
  }
  /* NAVBAR PART START */
  #navBar {
    /* border: 1px solid red; */
    width: 99%;
    display: flex;
    padding: 5px;
    padding-left: 0%;
    justify-content: space-between;
    /* display: none; */
  }
  .dropBtn {
    border: none;
    background-color: #f8f8f8;
    /* border: 1px solid greenyellow; */
    font-size: 16px;
    font-weight: bold;
    margin: auto;
    padding: 14px;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
  }
  #navBarLeftPart,
  #navBarRightPart {
    display: flex;
    justify-content: space-between;
    /* border: 1px solid black; */
  }
  #navLogoImg {
    height: 73px;
    /* border: 1px solid red; */
  }
  .dropBtn:hover {
    cursor: pointer;
    color: #f37e5d;
  }
  .navRightPartLinks {
    font-size: 16px;
    font-weight: bold;
    margin: auto;
    color: black;
    text-decoration: none;
    /* border: 1px solid red; */
    padding: 14px;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
  }
  #createMyCalendar {
    background-color: #f37e5d;
    color: white;
    border-radius: 5px;
  }
  #createMyCalendar:hover {
    background-color: #eb5227e2;
  }
  .navRightPartLinks:hover {
    color: #f37e5d;
  }
  #pricing {
    text-decoration: none;
    color: black;
  }
  #pricing:hover {
    color: #f37e5d;
  }
  .dropDown {
    margin: auto;
  }
  .dropDownContent {
    /* border: 1px solid rebeccapurple; */
    display: none;
    position: absolute;
    /* z-index: auto; */
  }
  .dropDown:hover .dropDownContent {
    display: block;
    /* border: 1px solid red; */
    /* margin-top: 2%; */
    padding: 10px;
  }
  .dropDown:hover #productsDropDown {
    display: flex;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    justify-content: space-between;
  }
  .dropDown:hover #leftPart > div,
  #rightPart > div {
    display: flex;
    /* border: 1px solid black; */
  }
  .lpdImg {
    margin: auto;
    margin-top: 6%;
    margin-left: 1%;
    margin-right: 5%;
    width: 35px;
    height: 35px;
  }
  .rpdImg {
    margin: auto;
    /* margin-top: 6%; */
    margin-left: 1%;
    margin-right: 3%;
    width: 25px;
    height: 25px;
  }
  #productsDropDown {
    right: auto;
    width: 700px;
    left: 60px;
    padding-left: 30px;
    border-radius: 5px;
    background-color: white;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
    /* padding: 30px 20px; */
  }
  #leftPart {
    border-right: 1px solid #e9e9e9;
    padding-right: 20px;
    width: 59%;
  }
  .leftPara {
    margin-top: -4%;
    /* border: 1px solid red; */
  }
  #leftPartHeading {
    margin-left: 3%;
    color: gray;
    font-weight: bold;
  }
  #rightPart {
    /* margin-left: -5%; */
    /* border: 1px solid red; */
    padding: 2%;
  }
  .rpHeading {
    color: gray;
  }
  .dropDownDiv {
    /* border: 1px solid red; */
    padding-left: 5%;
    padding-right: 5%;
    border-radius: 10px;
  }
  .dropDownDiv:hover {
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
      rgba(0, 0, 0, 0) 0px 0px 1px 0px;
  }
  #whyCoScheduleDropDown {
    /* border: 1px solid red; */
    width: 300px;
    background-color: white;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 5px;
  }
  .whyBoxPara {
    margin-top: -6%;
  }
  #whyCoScheduleDropDown > div {
    padding: 20px;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    border-radius: 10px;
  }
  #whyCoScheduleDropDown > div:hover {
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
      rgba(0, 0, 0, 0) 0px 0px 1px 0px;
  }
  .dropDown:hover #resourcesDropDown {
    display: flex;
    justify-content: space-between;
    /* border: 1px solid red; */
    padding: 35px;
    padding-top: 15px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
  .resourceDropDiv {
    /* border: 1px solid black; */
    padding: 20px;
    padding-top: 0;
    padding-bottom: 0;
  }
  #resourcesDropDown {
    right: auto;
    width: 860px;
    left: 35px;
    /* padding-left: 30px; */
    border-radius: 5px;
    background-color: white;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
  }
  #resourcesfirstdiv {
    width: 35%;
    border-right: 1px solid #e9e9e9;
    /* padding-top: 10px; */
    /* border: 1px solid red; */
  }
  #resourcesfirstdiv > div > p {
    margin-top: -5%;
  }
  .resourceDropDiv > div:hover {
    cursor: pointer;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
      rgba(0, 0, 0, 0) 0px 0px 1px 0px;
  }
  #resourcesDropDown > div > div {
    /* border: 1px solid black; */
    color: gray;
    /* padding: 1px; */
    padding-left: 15px;
    margin-right: 7px;
    /* margin-top: -5%; */
  }
  #resourcesDropDown > div > div > h4 {
    color: black;
  }
  #resourcesfirstdiv > div {
    /* border: 1px solid red; */
    padding: 1px;
  }
  .resourceDropDiv > h5 {
    /* border: 1px solid red; */
    margin-bottom: 5px;
  }
  .clickablePara {
    padding: 7px;
    color: gray;
    border-radius: 10px;
  }
  .clickablePara:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
      rgba(0, 0, 0, 0) 0px 0px 1px 0px;
    cursor: pointer;
  }
  .sideHeading {
    padding-left: 7px;
  }
  #navBar2 {
    display: none;
    width: 100%;
    border-radius: 10px;
    /* border: 1px solid red; */
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
      rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
      rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  }
  .hr {
    border: none;
    background-color: gray;
    height: 3px;
    width: 20px;
  }
  #divHr {
    /* border: 1px solid red; */
    border: none;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-color: white;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 15px;
  }
  #divHr:hover {
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px,
      rgba(0, 0, 0, 0.23) 0px 3px 6px;
  }
  #navBarContent {
    display: none;
    position: absolute;
    /* border: 1px solid red; */
    width: 90%;
    /* height: 200px; */
    left: 2%;
    right: 20px;
    /* margin-top: 10px; */
  }
  #divHr:hover #navBarContent {
    display: block;
    padding: 20px;
    /* padding-top: 5px; */
    cursor: default;
  }
  #navBarContentInnerDiv {
    /* border: 1px solid black; */
    padding: 10px;
    border-radius: 5px;
    background-color: white;
    height: 400px;
    overflow: scroll;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
  .nav2ProductsDiv {
    /* border: 1px solid red; */
    display: flex;
    margin: auto;
    width: 50%;
    text-align: left;
    border-radius: 10px;
    /* justify-content: space-around; */
    padding: 15px;
    padding-bottom: 0px;
  }
  .nav2Img1 {
    width: 35px;
    height: 35px;
    /* margin-top: 5px; */
    /* margin: auto; */
  }
  .nav2Img2 {
    width: 30px;
    height: 30px;
    margin: auto;
    margin-left: 0%;
    margin-right: 0%;
    /* border: 1px solid red; */
  }
  .nav2ProductsDivDiv {
    /* border: 1px solid black; */
    padding: 5px;
    padding-left: 10px;
    padding-top: 0px;
  }
  .nav2ProductsDivDiv > h4 {
    margin-top: 0%;
  }
  .nav2ProductsDiv:hover {
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
      rgba(0, 0, 0, 0) 0px 0px 1px 0px;
  }
  .nav2ProductsDiv > h4 {
    /* text-align: left; */
    /* margin: auto; */
    /* border: 1px solid red; */
    margin-left: 5px;
  }
  #nav2ProductsDiv3,
  #nav2ProductsDiv4 {
    padding-bottom: 5px;
    padding-top: 5px;
    /* border: 1px solid red; */
  }
  .nav2leftPara {
    margin-top: -13px;
    color: gray;
  }
  .whyCoScheduleDiv {
    width: 50%;
    margin: auto;
    text-align: left;
    border-radius: 10px;
    padding: 5px;
    padding-left: 10px;
  }
  .whyCoScheduleDiv > p {
    margin-top: -13px;
    color: gray;
  }
  .whyCoScheduleDiv:hover {
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
      rgba(0, 0, 0, 0) 0px 0px 1px 0px;
  }
  
  #nav2LinksDiv {
    display: flex;
    flex-direction: column;
    width: 33%;
    margin: auto;
    /* border: 1px solid black; */
  }
  .nav2Links {
    display: block;
    text-decoration: none;
    font-size: 14px;
    padding: 15px;
    color: black;
    font-weight: bold;
    border-radius: 10px;
    /* border: 1px solid red; */
  }
  .nav2Links:hover {
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
      rgba(0, 0, 0, 0) 0px 0px 1px 0px; */
    color: #f37e5d;
  }
  #nav2createMyCalender {
    background-color: #f37e5d;
    color: white;
  }
  #nav2createMyCalender:hover {
    background-color: #eb5227e2;
  }
  .nav2Head {
    color: #f37e5d;
  }

  /* NAVBAR PART END */

/* footer part start */

#footerGrid {
    /* border: 1px solid red; */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 20px;
    padding: 20px;
    padding-left: 100px;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
  }
  #footerGrid > div {
    padding: 20px;
    /* border: 1px solid blue; */
    display: flex;
    flex-direction: column;
  }
  #footerGrid > div > a {
    text-decoration: none;
    color: rgb(51, 51, 51);
    padding: 3px;
  }
  #footerGrid > div > h4 {
    margin-bottom: 3%;
    padding-left: 3px;
  }
  #footerBox {
    display: flex;
  }
  #footerBoxDown {
    display: flex;
    flex-direction: column;
    /* border: 1px solid red; */
    text-align: left;
    padding: 3px;
    padding-top: 35px;
  }
  #footerBoxDown > a {
    margin: auto;
    padding: 5px;
    padding-left: 20px;
    text-decoration: none;
    color: rgb(51, 51, 51);
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
  }
  #termsfoot{
    /* margin: auto; */
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: gray;
  }
  #termsfoot>a{
    color: gray;
  }
/* footer part end */

  #uppermiddlePart {
    /* border: 1px solid red; */
    width: 50%;
    padding: 10px;
    text-align: center;
    margin: auto;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
  }
  #uppermiddlePart > h1 {
    font-size: 45px;
    margin-bottom: -2%;
  }
  #uppermiddlePart > p {
    font-size: 19px;
    margin-bottom: 4%;
    /* margin-top: 0%; */
  }
  #uppermiddlePart > p ~ p {
    font-size: 16px;
    margin-top: 3%;
  }
  #uppermiddlePart > a {
    text-decoration: none;
    background-color: #f37e5d;
    padding: 15px;
    color: white;
    border-radius: 10px;
    padding-left: 50px;
    padding-right: 50px;
  }
  #uppermiddlePart > a:hover {
    background-color: #eb5227e2;
  }
  #middleImgDiv {
    text-align: center;
  }
  #middleImg {
    width: 90%;
  }
  #middleGridDiv {
    border: 1px solid white;
    /* height: 1000px; */
    background-color: white;
    margin-top: -18%;
  }
  #middleGridDivHeading {
    text-align: center;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
    color: rgb(84, 81, 81);
    margin-top: 21%;
  }
  #uppermiddleGrid {
    /* border: 1px solid red; */
    width: 80%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #uppermiddleGrid > div {
    /* margin: auto; */
    padding: 10px;
    /* border: 1px solid black; */
  }
  #gridC {
    display: grid;
    grid-template-areas:
      "a b"
      "c d";
    /* border: 1px solid red; */

    width: 70%;
    padding: 30px;
    gap: 30px;
    justify-content: space-between;
    margin: auto;
    margin-top: 5%;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
  }
  #gridC > div {
    /* border: 1px solid black; */
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
      rgba(0, 0, 0, 0.22) 0px 10px 10px;
    border-radius: 5px;
    text-align: left;
  }
  .colorImg {
    width: 100%;
    height: 120px;
    border-radius: 5px;
  }
  .gridCLogo {
    width: 60px;
    height: 60px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    /* border: 1px solid greenyellow; */
    margin-left: 20px;
    margin-top: -32px;
  }
  .gridCHeading,
  .gridCPara {
    /* border: 1px solid red; */
    padding: 23px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: rgb(66, 62, 62);
  }
  .gridCPara {
    margin-top: -19px;
    font-size: 17px;
    /* padding-right: 40px; */
    color: gray;
  }
  .gridCPara ~ p {
    /* border: 1px solid red; */
    padding-left: 30px;
    color: gray;
  }
  .gridAp::first-letter,
  .gridBp::first-letter {
    color: #f37e5d;
    font-weight: bold;
  }
  .gridCp::first-letter {
    color: #598dd7;
    font-weight: bold;
  }
  .gridDp::first-letter {
    color: #aa95dc;
    font-weight: bold;
  }
  .gridCLinkDiv {
    /* border: 1px solid black; */
    width: 120px;
    padding: 15px;
    border-radius: 5px;
    margin-left: 25px;
    margin-bottom: 40px;
    margin-top: 20px;
    text-align: center;
  }
  .gridCLink {
    /* border: 1px solid red; */
    text-decoration: none;
  }
  #gridCLinkDivA,
  #gridCLinkDivB {
    background-color: #f37e5d3d;
  }
  #gridCLinkDivA > a,
  #gridCLinkDivB > a {
    color: #f46037;
    font-weight: bold;
  }
  #gridCLinkDivA:hover,
  #gridCLinkDivB:hover {
    background-color: #f37e5d65;
    cursor: pointer;
  }
  #gridCLinkDivC {
    background-color: #598dd742;
  }
  #gridCLinkDivC:hover {
    background-color: #598dd76c;
    cursor: pointer;
  }
  #gridCLinkDivC > a {
    color: #3f7dd4;
    font-weight: bold;
  }
  #gridCLinkDivD {
    background-color: #aa95dc4b;
  }
  #gridCLinkDivD:hover {
    background-color: #aa95dc6b;
    cursor: pointer;
  }
  #gridCLinkDivD > a {
    color: #9e83dc;
    font-weight: bold;
  }
  .gridAp,
  .gridBp,
  .gridCp,
  .gridDp {
    padding: 10px;
    margin: 0%;
  }
  #middelVDiv{
    /* border: 1px solid red; */
    width: 80%;
    /* background-color: white; */
    margin: auto;
    padding: 20px;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }
  #middelVDivGrid{
    /* border: 1px solid green; */
    text-align: center;
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    /* display: flex; */
    /* flex-wrap: wrap; */
    gap: 30px;
  }
  #middelVDivGrid>div{
    /* border: 1px solid black; */
    border-radius: 5px;
    box-shadow: 2px 2px 20px 0 rgb(0 0 0 / 5%);
/* display: block; */
    padding: 30px 50px;
  }
  #middelVDivGrid>div:hover{
    cursor: default;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  #middleholderDiv{
    background-color: white;
    margin-top: 4%;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  }
  #lowerVDiv{
    background: #f37e5d;
    background: linear-gradient(90deg,#f37e5d 0,#f9a97d);
    /* height: 100px; */
    border-radius: 5px;
    padding: 70px 20px;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
  }
  #lowerVDiv>a{
    text-decoration: none;
    font-weight: bold;
    color: #f37e5d;
    background-color: whitesmoke;
    padding: 15px;
    padding-left: 40px;
    padding-right: 40px;
    border-radius: 5px;
  }
  
  @media all and (max-width: 990px) {
    #gridC {
      width: 65%;
      grid-template-areas:
        "a"
        "b"
        "c"
        "d";
    }
    #middelVDivGrid{
      grid-template-columns: repeat(2,1fr);
    }
  }
  @media all and (min-width: 569px) and (max-width: 990px) {
    #navBar {
      display: none;
    }
    #navBar2 {
      display: flex;
      justify-content: space-between;
    }
    #footerGrid {
      grid-template-columns: repeat(2, 1fr);
      padding-left: 75px;
    }
  }
  @media all and (max-width: 767px){
    #middelVDivGrid{
      grid-template-columns: repeat(1,1fr);
    }
  }
  @media all and (min-width: 0px) and (max-width: 569px) {
    #navBar {
      display: none;
    }
    #navBar2 {
      display: flex;
      justify-content: space-between;
    }
    #footerGrid {
      grid-template-columns: repeat(1, 1fr);
      padding-left: 30px;
    }
    .nav2ProductsDiv {
      width: 70%;
    }
    #nav2LinksDiv {
      width: 50%;
    }
    .whyCoScheduleDiv {
      width: 70%;
    }
  }