@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

@keyframes transitionIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes belowHeaderLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes popUpModel {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
* {
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #fff;
}
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  justify-content: center;
}
.linearGradient {
  background: rgb(111, 68, 181);
  background: linear-gradient(
    39deg,
    rgba(111, 68, 181, 1) 9%,
    rgba(60, 78, 162, 1) 43%,
    rgba(37, 39, 104, 1) 100%
  );
  height: 620px;
  position: absolute;
  top: 0;
  left: 0;
  justify-content: center;
  width: 100%;
}

.custom-shape-divider-bottom-1608655195 {
  position: relative;
  top: 330px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-bottom-1608655195 svg {
  position: relative;
  display: block;
  width: calc(300% + 1.3px);
  height: 300px;
  transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1608655195 .shape-fill {
  fill: #fff;
}
.webContainer {
  width: 75%;
  display: flex;
  align-self: center;
  flex-direction: column;
  /* z-index: 2; */
}

.headerHolder {
  display: flex;
  position: absolute;
  top: 20px;
  width: 75%;

  justify-content: space-between;
}
.headerHolder img {
  max-width: 300px;
  height: 80px;
}
.headerButHolder {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-self: center;
  width: 60%;
}
.headerHolder a {
  padding: 10px;
  border-radius: 100px;
  border: solid 2px rgb(111, 68, 181);
  text-decoration: none;
  color: #fff;
  font-weight: '400';
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

.headerHolder i {
  display: none;
}
#drawerContent {
  display: none;
}
.belowHeader {
  display: flex;
  flex-direction: row;
  width: 100%;
  position: relative;
  top: 110px;
  height: 50vh;
}
.belowHeaderLeft {
  display: flex;
  flex-direction: column;
  width: 50%;
  animation: belowHeaderLeft 2s;
  justify-content: space-evenly;
}
.belowHeaderLeft h2 {
  color: #fff;
  font-family: 'Poppins', sans-serif;

  font-size: 2vw;
  max-width: 100%;
}
.belowHeaderLeft p {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
}
.belowHeaderLeft a {
  display: flex;
  align-items: center;
  font-size: 1vw;
  background-color: rgb(0, 0, 0, 0.4);
  max-width: 50%;
  padding: 10px;
  border-radius: 100px;
  text-decoration: none;
  color: #fff;
  font-weight: '400';
  font-family: 'Roboto', sans-serif;
  justify-content: center;
}
.belowHeaderLeft a:hover {
  background-color: rgb(0, 0, 0, 0.8);
}
.belowHeaderRight {
  display: flex;
  justify-content: center;

  width: 50%;
}
.belowHeaderRight img {
  max-width: 100%;
  align-self: center;
  max-height: 90%;
  animation: transitionIn 2s;
}

  .productContainer {
    position: relative;
    top: 150px;
    display: flex;
    flex-direction: row;
    z-index: 3;
    margin-top: 100px;
    justify-content: center;
    width: 100%;
}

.productLeftHolder {
    width: 50%;
    align-self: center;
    margin-top: 40px;
}
.productRightHolder {
margin-left: 10px;
display: flex;
flex-direction: column;
width: 40%;
row-gap: 40px;
}
.productRightHolder img {
    width: 40%;
}
.productRightHolder h1 {
    font-family: 'Roboto' sans-serif;
    font-size: 40px;
    font-weight: 900;
    color: #000;
    
}
.productRightHolder p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #3F3844;
    line-height: 30px
}
.productButtonContainer {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}

.productButtonContainer a {
    display: flex;
    align-items: center;
    font-size: 16px;
    background-color: rgb(0, 0, 0, 0.1);
    width: 48%;
    padding: 10px;
    border-radius: 100px;
    text-decoration: none;
    color: #3f3844;
    font-weight: '400';
    font-family: 'Roboto', sans-serif;
    justify-content: center;
  }

  .custom-shape-divider-top-1608928872 {
    position: relative;
    top: 0px;
    right: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
  }
  
  .custom-shape-divider-top-1608928872 svg {
    position: relative;
    display: block;
    width: calc(300% + 1.3px);
    height: 300px;
    transform: rotateY(180deg);
    top: 1;
  }
  
  .custom-shape-divider-top-1608928872 .shape-fill {
    fill: #fff;
  }
  .linearGradientBottom {
    background: rgb(111, 68, 181);
    background: linear-gradient(
      199deg,
      rgba(111, 68, 181, 1) 9%,
      rgba(60, 78, 162, 1) 43%,
      rgba(37, 39, 104, 1) 100%
    );
    height: 420px;
    position: relative;
    top: 250px;
    left: 0;
    justify-content: center;
    width: 100%;
  }
  #contactHover:hover {
    background: rgb(111, 68, 181);
    background: linear-gradient(
      199deg,
      rgba(111, 68, 181, 0.3) 9%,
      rgba(60, 78, 162, 0.3) 43%,
      rgba(37, 39, 104, 0.3) 100%
    );
  }

  #belowHeaderLeftMobile img {
    display: none;
  }

  .mainFooterContainer {
    width: 70%;
    z-index: 2;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .mainFooterContainer p {
    color: #c1c1c1;
    font-size: 16px;
    font-family: 'Nunito', sans-serif;
  }
  
  .footerContainer {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-bottom: 50px;
    align-items: center;
    flex-wrap: wrap;
  }
  .footerLeft {
    display: flex;
    width: 30%;
    flex-direction: row;
    margin-top: 10px;
    margin-left: 20px;
  }
  .footerLeft img {
    max-width: 100%;
    max-height: 100%;
  }
  .footerLeft p {
    color: #fff;
    font-size: 16px;
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
    line-height: 30px;
    padding-left: 20px;
  }
  .footerRight {
    display: flex;
    width: 55%;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-evenly;
    column-gap: 20px;
  
  }
  .footerRight h2 {
    color: #fff;
    font-size: 22px;
    font-family: 'Nunito', sans-serif;
  }
  .footerRight p {
    color: #c1c1c1;
    font-size: 16px;
    font-family: 'Nunito', sans-serif;
    margin-top: 10px;
  }
  .footerRight a {
    color: #c1c1c1;
    font-size: 16px;
    font-family: 'Nunito', sans-serif;
    margin-top: 10px;
  }
  .footerRightSection {
    display: flex;
    flex-direction: row;
  justify-content: space-between;
  
  }

  .popUpModal {
    position: fixed;
  
    justify-content: center;
  
    top: 0;
    left: 0;
    z-index: 5;
    background-color: rgb(255, 255, 255, 0.4);
    width: 100%;
    height: 100%;
    animation: popUpModel 0.4s;
 
  }

  .formHolder {
    margin-top: 5%;
    display: flex; 
    border-radius: 7px;
    background-color: #fff;
    height: max-content;
    width: 40%;
    justify-content: center;
    border: solid 1px #c1c1c1;
  }
  
  .form {
    padding: 10px;
    display: flex;
    width: 90%;
    flex-direction: column;
  }
  
  .form h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
  }
  .form p {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    color: #3f3844;
    margin-top: 10px;
  }
  
  .form input[type='text'] {
    width: 100%;
    font-family: 'Roboto', sans-serif;
    padding: 15px;
    border: solid 1px rgba(111, 68, 181, 0.6);
    border-radius: 7px;
  }
  .form input[type='email'] {
    width: 100%;
    font-family: 'Roboto', sans-serif;
    padding: 15px;
    border: solid 1px rgba(111, 68, 181, 0.6);
    border-radius: 7px;
  }
  .form input[type='submit'] {
    background: rgb(111, 68, 181);
    background: linear-gradient(
      90deg,
      rgba(111, 68, 181, 1) 9%,
      rgba(60, 78, 162, 1) 43%,
      rgba(37, 39, 104, 1) 100%
    );
    border-radius: 7px;
    width: 40%;
    font-size: 16px;
    color: #fff;
    padding: 15px;
    border: solid 1px rgba(111, 68, 181, 0.6);
    cursor: pointer;
  }
  .form input[type='button'] {
    width: 40%;
    padding: 15px;
    border: solid 1px rgba(111, 68, 181, 0.6);
    border-radius: 7px;
    cursor: pointer;
  }
  .form textarea {
    width: 100%;
    padding: 15px;
    font-family: 'Roboto', sans-serif;
    border-radius: 7px;
  }

  .statusModal {
    position: fixed;
    justify-content: center;
    top: 0;
    left: 0;
    z-index: 5;
    background-color: rgb(255, 255, 255, 0.4);
    width: 100%;
    height: 100%;
    animation: popUpModel 0.4s;
    display: flex;
    align-items: center;
  }

  .statusContainer {
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
   height: max-content;
    border-radius: 10px;
  border: solid 1px #c1c1c1;
flex-direction: column;
padding: 40px;
  }

  .statusContainer h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
  }

  .statusContainer p {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    color: #3f3844;
    margin-top: 10px;
    text-align: center;

  }

  .statusContainer img {
    width: 15%;
    margin-top: 80px;
  }
  .headerHolder .burgerMenu{
    display: none;
  }
  .footerLogo{
    column-gap: 15.4px;
    display: flex;
  }

/* for phone landscape and tablet protrate */
@media (max-width: 900px) {
    .webContainer {
        width: 100%;
        display: flex;
        align-self: center;
        z-index: 2;
      }
      .headerHolder {
        position: 'absolute';
        top: 10px;
        z-index: 2;
        width: 90%;
      }
      .headerButHolder {
        display: flex;
      flex-direction: row;
      justify-content: space-evenly ;
      align-self: center;
      width: 100%;

      }
      .headerButHolder a{
        display: flex;
        font-size: 14.4px;
        color: #fff;
        font-weight: '400';
        font-family: 'Roboto', sans-serif;
        font-size: 12px;
      }
      .headerHolder img {
        width: 220px;
        height: 60px;
      }
      .headerHolder i {
        display: flex;
        color: #fff;
        align-self: center;
        position: relative;
        right: 30px;
      }
      #drawerContent {
        display: flex;
        flex-direction: row;
        height: 100%;
        width: 0px;
        position: fixed;
        z-index: 2;
        top: 0;
        right: 0;
        background-color: rgb(0, 0, 0, 0.3);
        overflow-x: hidden;
        transition: 0.5s;
      }
      .headerButHolderMobile {
        display: flex;
        flex-direction: column;
        position: relative;
        top: 0;
        left: 0;
        background: #fff;
        width: 80%;
        height: 100%;
    
        align-items: center;
      }
      .headerButHolderMobile a {
        display: flex;
        width: 80%;
        font-size: 16px;
        text-decoration: none;
        color: #000;
        font-weight: '400';
        font-family: 'Roboto', sans-serif;
        padding: 4vw;
      }
      .headerButHolderMobile hr {
        width: 80%;
      }
      .forClose {
        display: flex;
        width: 20%;
        height: 100%;
      }
    
      .belowHeaderLeft {
        width: 70%;
        padding-left: 10px;
        max-height: 100%;
      }
      .belowHeaderLeft h2 {
        font-size: 24px;
        line-height: 26px;
      }
      .belowHeaderLeft p {
        font-size: 16px;
      }
      .belowHeaderLeft a {
        font-size: 14px;
    
        max-width: 50%;
      }
      .belowHeaderRight img {
        max-width: 90%;
        align-self: center;
        max-height: 90%;
        /* clip-path: circle(50.7% at 0 51%); */
      }

      .productContainer {
        position: relative;
        top: 150px;
        display: flex;
        flex-direction: row;
        z-index: 3;
        margin-top: 50px;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }
    
    .productLeftHolder {
        width: 70%;
        align-self: center;
        margin-top: 40px;
    }
    .productRightHolder {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    width: 70%;
    row-gap: 40px;
    }
    .productRightHolder img {
        width: 30%;
    }
    .productRightHolder h1 {
        font-size: 40px;
        font-weight: 900;
        color: #000;
        
    }
    .productRightHolder p {
        font-size: 16px;
        font-weight: 400;
        color: #3F3844;
    }
    .productButtonContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    }
    
    .productButtonContainer a {
        display: flex;
        align-items: center;
        font-size: 16px;
        background-color: rgb(0, 0, 0, 0.1);
        width: 40%;
        padding: 10px;
        border-radius: 100px;
        text-decoration: none;
        color: #3f3844;
        font-weight: '400';
        font-family: 'Roboto', sans-serif;
        justify-content: center;
      }
    
      .mainFooterContainer {
        width: 80%;
        display: flex;
      }

      .footerLeft img{
        object-fit: contain;
        width: 290px;
        margin-bottom: 9%;
      }

      .footerContainer {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-bottom: 20px;
        row-gap: 40px;
      }
      .footerLeft {
        display: flex;
        width: 90%;
        flex-direction: row;
        margin-top: 10px;
        justify-content: center    
      }
      .footerRight {
        width: 93%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        column-gap: 20px;
      }
      .linearGradientBottom {
        background: rgb(111, 68, 181);
        background: linear-gradient(
          199deg,
          rgba(111, 68, 181, 1) 9%,
          rgba(60, 78, 162, 1) 43%,
          rgba(37, 39, 104, 1) 100%
        );
        height: 620px;
        position: relative;
        top: 450px;
        left: 0;
        justify-content: center;
        width: 100%;
      }
  
      .formHolder {
        margin-top: 8%;
        display: flex;
        border: solid 1px #c1c1c1;
        border-radius: 7px;
        background-color: #fff;
        height: max-content;
        width: 80%;
        justify-content: center;
        overflow-y: scroll;
        /* align-items: center; */
      }
      #belowHeaderRightMobile {
        display: none;
      }
      #belowHeaderLeftMobile img {
        display: flex;
        animation: transitionIn 2s;
        max-width: 100%;
        height: 60%;
        margin-top: 10px;
      }
      #belowHeaderLeftMobile {
        text-align: center;
        align-items: center;
        line-height: 20px;
        width: 100%;
        margin-top: 30px;
      }
      #belowHeaderLeftMobile p {
        padding: 20px;
      }
      #belowHeaderLeftMobile a {
        padding: 20px;
      }
      .statusModal {
        position: fixed;
        justify-content: center;
        top: 0;
        left: 0;
        z-index: 5;
        background-color: rgb(255, 255, 255, 0.4);
        width: 100%;
        height: 100%;
        animation: popUpModel 0.4s;
        display: flex;
        align-items: center;
      }
    
      .statusContainer {
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60%;
       height: max-content;
        border-radius: 10px;
      border: solid 1px #c1c1c1;
    flex-direction: column;
    padding: 40px;
      }
    
      .statusContainer h2 {
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        font-size: 30px;
        text-align: center;
      }
    
      .statusContainer p {
        font-size: 18px;
        font-family: 'Roboto', sans-serif;
        color: #3f3844;
        margin-top: 10px;
        text-align: center;
    
      }
    
      .statusContainer img {
        width: 18%;
        margin-top: 80px;
      }
      .headerHolder .burgerMenu{
        display: none;
      }
}


/** For mobile devices **/

@media (max-width: 600px) {
    .custom-shape-divider-bottom-1608655195 svg {
        width: calc(300% + 1.3px);
        height: 230px;
      }
      .custom-shape-divider-bottom-1608655195 {
        top: 300px;
      }
      .linearGradient {
        background: rgb(111, 68, 181);
        background: linear-gradient(
          39deg,
          rgba(111, 68, 181, 1) 9%,
          rgba(60, 78, 162, 1) 43%,
          rgba(37, 39, 104, 1) 100%
        );
        height: 515px;
      }
      .headerHolder img {
        width: 220px;
        height: 60px;
      }
      .webContainer {
        width: 100%;
        display: flex;
        align-self: center;
        z-index: 2;
      }
      .headerHolder {
        position: 'absolute';
        top: 20px;
        z-index: 2;
        width: 100%;
      }
      .headerButHolder {
        display: none;
      }
    
      .belowHeader {
        width: 100%;
        position: relative;
        top: 130px;
        flex-direction: column;
        height: auto;
       
      }
      .belowHeaderLeft {
        width: 100%;
        height: 60vh;
      }
      .belowHeaderRight {
        width: 100%;
        height: 50vh;
        /* background-color: #000; */
      }
      .belowHeaderRight img {
        max-width: 100%;
        height: 90%;
        align-self: flex-start;
    
        /* clip-path: circle(50.7% at 0 51%); */
      }
      .belowHeaderLeft h2 {
        font-size: 22px;
        line-height: 28px;
        font-family: 'Poppins', sans-serif;
      }
      .belowHeaderLeft p {
        font-size: 15px;
      }
      .belowHeaderLeft a {
        display: flex;
        align-items: center;
        font-size: 16px;
        background-color: rgb(0, 0, 0, 0.3);
        max-width: 40%;
        padding: 10px;
        border-radius: 100px;
        text-decoration: none;
        color: #fff;
        font-weight: '400';
        font-family: 'Roboto', sans-serif;
      }

      .productContainer {
        position: relative;
        top: 150px;
        display: flex;
        flex-direction: row;
        z-index: 3;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }
    
    .productLeftHolder {
        width: 90%;
        align-self: center;
        margin-top: 40px;
    }
    .productRightHolder {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    width: 90%;
    row-gap: 40px;
    }
    .productRightHolder img {
        width: 40%;
    }
    .productRightHolder h1 {
        font-size: 40px;
        font-weight: 900;
        color: #000;
        
    }
    .productRightHolder p {
        font-size: 16px;
        font-weight: 400;
        color: #3F3844;
    }
    .productButtonContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    }
    
    .productButtonContainer a {
        display: flex;
        align-items: center;
        font-size: 16px;
        background-color: rgb(0, 0, 0, 0.1);
        width: 40%;
        padding: 10px;
        border-radius: 100px;
        text-decoration: none;
        color: #3f3844;
        font-weight: '400';
        font-family: 'Roboto', sans-serif;
        justify-content: center;
      }


      .mainFooterContainer {
        position: relative;
        top: 0px;
        width: 100%;
        z-index: 2;
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .footerContainer {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-bottom: 20px;
      }
      .footerLeft {
        display: flex;
    width: 90%;
    flex-direction: column;
    margin-top: 20px;
    justify-content: center;
      }
      .footerRight {
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        column-gap: 20px;
      }
      .linearGradientBottom {
        background: rgb(111, 68, 181);
        background: linear-gradient(
          199deg,
          rgba(111, 68, 181, 1) 9%,
          rgba(60, 78, 162, 1) 43%,
          rgba(37, 39, 104, 1) 100%
        );
        height: 530px;
        position: relative;
        top: 410px;
        left: 0;
        justify-content: center;
        width: 100%;
      }
      .formHolder {
        margin-top: 8%;
        display: flex;
        border: solid 1px #c1c1c1;
        border-radius: 7px;
        background-color: #fff;
        height: max-content;
        width: 90%;
        justify-content: center;
      }
      .statusModal {
        position: fixed;
        justify-content: center;
        top: 0;
        left: 0;
        z-index: 5;
        background-color: rgb(255, 255, 255, 0.4);
        width: 100%;
        height: 100%;
        animation: popUpModel 0.4s;
        display: flex;
        align-items: center;
      }
    
      .statusContainer {
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90%;
       height: max-content;
        border-radius: 10px;
      border: solid 1px #c1c1c1;
    flex-direction: column;
    padding: 40px;
      }
    
      .statusContainer h2 {
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        font-size: 30px;
        text-align: center;
      }
    
      .statusContainer p {
        font-size: 18px;
        font-family: 'Roboto', sans-serif;
        color: #3f3844;
        margin-top: 15px;
        text-align: center;
    
      }
    
      .statusContainer img {
        width: 18%;
        margin-top: 80px;
      }
      .footerLeft img{
        width: 80%;
        margin-bottom: 3%;
        margin-left: 12%;
      }
      .mobileSpace{
        margin-top: 5%;
      }
      .headerHolder .burgerMenu{
        display: flex;
        margin-top: 5%;
        margin-right: 3%;
      }
}