body{
    margin: 0px;
    background-color: #212121;
    display:grid;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
}
h2,p,li{
  color:white;
}
#Flow-div-1{
    background-image: url('FlowLanding_Page Images/Flow_img1.png');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; 
    
   
    width: 100%;
    
    /* margin-top: 100px; */
}

.img{
   
   margin-bottom: 20px;
   
}
#fd1--1{
    
    margin:100px 0px 100px 200px;

}
#fd1--1 div{
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
   width:20%;
}
#fd1--1 h2{
    color:white;
    font-size: 30px;
    
    margin:0px 0px 20px;
    width:30%;
}
#fd1--1 p{
    color:#EEEEEE;
    font-size: 20px;
   
    margin:0px 0px 20px;
    width:23%;
}
h3{
    color:white;
    /* margin-top: -2px; */
}
.highlight{
    color:#ec008c;
}

button{
    
      appearance: none;
      backface-visibility: hidden;
      background-color: #2f80ed;
     
      border-style: none;
      box-shadow: none;
      box-sizing: border-box;
      color: #fff;
      cursor: pointer;
      display: inline-block;
      font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
      font-size: 16px;
      font-weight: 500;
      height: 50px;
      letter-spacing: normal;
      line-height: 1.5;
      outline: none;
      overflow: hidden;
      padding: 14px 30px;
      position: relative;
      text-align: center;
      text-decoration: none;
      transform: translate3d(0, 0, 0);
      transition: all .3s;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      vertical-align: top;
      white-space: nowrap;
      margin-top: 10px;
    }
    
    button:hover {
      background-color: #1366d6;
      box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
      opacity: 1;
      transform: translateY(0);
      transition-duration: .35s;
    }
    
    button:hover:after {
      opacity: .5;
    }
    
    button:active {
      box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
      transform: translateY(2px);
      transition-duration: .35s;
    }
    
    button:active:after {
      opacity: 1;
    }
    

/* Flow-div-2 Start */

.Flow-div-2 >div{
  width:70%;
  margin:100px auto ;
  display:grid;
  grid-template-columns: repeat(2,1fr);
  
  
}

.Flow-div-2 >div div{
  width:100%;
  height:400px;
 
  margin:auto;
}
.fd2--1-img{
  width:90%;
}

.Flow-div-2 >div h2{
  color:white;
  font-size: 35px;

  margin:0px 0px 20px;
  width:80%;
  
}
.Flow-div-2 >div p{
  color:#0084BD;
  font-size:15px;
}
.Flow-div-2 >div div li{
  color:white;
}


/* Flow-div-3 Start */
#Flow-div-3{
  background-color: black;
}
#Flow-div-3>div{
  width:70%;
  margin:60px auto 60px auto;
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:30px;
  
}

#Flow-div-3>div div{
  
  
  
  margin:auto;
  padding:auto;
}
.fd3-video{
  /* width:100%;
  height:50%; */
  width:400px;
  height:200px;
  border-radius: 20px;
 
}
#Flow-div-3 >div div h2{
  color:white;
  font-size: 45px;
 
  margin:0px 0px 20px;
  width:80%;
  
}

.fd3--p2{
  color:white;
  font-size:20px;
} 
.fd3--p1{
  
  color:#0084BD;
  font-size:15px;
}
#fd3--l{
  display:flex;
  justify-content:space-around;
}

#fd4--p{
  color:white;
  font-size:20px;
  width:60%;
}
.Flow-div-2>h2{
  text-align:center;
  font-size: 45px;
 
  /* width:90%; */
  margin-top: 100px;

}
#Flow-div-5{
  background-image: url('FlowLanding_Page Images/flow-brand-bgimg.jpg');
  

  /* Set a specific height */
  min-height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  
  width: 100%;
}
#Flow-div-5>div{
  text-align:center;
  margin:100px auto 100px auto;
}
#Flow-div-5>div h2{
  width:28%;
  font-size: 45px;
  margin:auto;

}

.fd5--1{
  /* border: 1px solid red; */
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:30px;
  width:70%;
  /* margin:50px auto 100px auto; */
  margin: auto;
 
  
}
.fd5--1 img {
  width: 100%;
}
.fd5--1 div{
  /* border: 1px solid blue; */
   /* width:300px; */
  
   
}
#fd5--b{
  margin:auto;
  
}


#Flow-div-6{
  background-color: black;
  
}
#Flow-div-6 div{
    text-align:center;
    margin-bottom: 100px;
}

#Flow-div-6 h2{
  
  font-size: 45px;
  margin:auto;
}
#fd6--1{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:10px;
 
  width:70%;
  margin:auto;
  
}

#fd6--1 h3:hover {
  cursor: pointer;
}
#fd6--1 div{
  /* width:300px; */
  height:400px;
  
  background-color: #212121;
  margin:auto;
  text-align: center;
}
#fd6--1 div p{
  margin:40px auto 20px auto;
  width:80%;
}
#fd6--1 div h3{
  margin: 30px auto 30px auto;
}
.fd6--2 {
  height:50%;
  width:100%;
  
 

}
#fd6--p1{
  color:#0084BD;
  font-size:15px;
}
.fd6--3{
  height:50%;
  width:100%;
}


.fd7--1{
  /* border: 1px solid red; */
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:10px;
 
  width:70%;
  margin:auto;
  
}
.fd7--1>div{
  /* width:300px; */
  /* border: 1px solid blue; */
  
  background-color: #212121;
 
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
  
}


#Flow-div-7 img {
  height:150px;
  width:100%;
  
 

}
#Flow-div-7 h2{
  font-size: 45px;
  text-align: center;
}

.fd7--1 div p{
  font-size:15px;
  color:gray;
  width:80%;
}
.fd7--1 div h3{
  font-size:20px;
}
#hig-light{
  margin-top:0px;
  color:#ec008c;
}
#fd7--2{
  margin:auto;
  padding:10px;
}


#Flow-div-8{
  width:55%;
  margin:200px auto 200px auto;
}
#Flow-div-8 h2{
  font-size: 35px;
  width:50%;
}
#Flow-div-8 p{
  width:50%;
}
#Flow-div-8 div{
  width:80%;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#Flow-div-8 div label{
  height: 50px;
  color:white;
}
#Flow-div-8 div input{
  width:70%;
  font-size: 20px;
}

#platformBackground,#resourcesBackground,#productsBackground,#signinBackground {
  top: 15vh;
}























/* Media Queries */
/* Medium screen */
@media only screen and (min-width: 421px) and (max-width: 720px) {
  .Flow-div-2 >div{
        grid-template-columns: repeat(1,1fr);
  }
  #Flow-div-3>div{
    grid-template-columns: repeat(1,1fr);
  }
  .fd5--1{
    grid-template-columns: repeat(2,1fr);
  }
  #fd6--1{
    grid-template-columns: repeat(2,1fr);
  }
  .fd7--1{
    grid-template-columns: repeat(2,1fr);
  }
  
  
}

/* small screens */
@media only screen and (min-width: 0px) and (max-width: 420px) {
  .Flow-div-2 >div{
        grid-template-columns: repeat(1,1fr);
  }
  #Flow-div-3>div{
    grid-template-columns: repeat(1,1fr);
  }
  .fd5--1{
    grid-template-columns: repeat(1,1fr);
  }
  #fd6--1{
    grid-template-columns: repeat(1,1fr);
  }
  .fd7--1{
    grid-template-columns: repeat(1,1fr);
  }
  
  
}