body{
        background-color:#222;
    }

         #main {
             height: 450px;
             width: 100%;
             /* display: flex; */
             /* flex-wrap: wrap; */
             justify-content: center;
             align-items: center;
             background-color: teal;
             /* margin-top: -300px; */
             background-position: 10%;
             background-position: cover;
             justify-content: space-between;
             box-sizing: border-box;
             /* position: relative; */
             position: absolute;
             /* background-position: center; */
             background-image: url("https://static.frontendmasters.com/assets/fm/js/static/header_BG.f12eb70699.jpg");
         }
         #main > div {
             display: flex;
             /* flex-wrap: wrap; */
             width: 70%;
             margin: auto ;
             padding-top: 50px;
         }
         #main > div > div:first-child {
             width: 35%;
         }
         #main > div > div:last-child {
            width: 60%;
            margin-top: 30px;
            text-align: left;
        }
         #main img {
             height: 250px;
             width: 250px;
         }
         #main p{
            line-height: 25px;
            color: #e6e6e6;
            margin-top: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
        #main  i{
            font-size:45px;
            margin-left: 20px;
            color:gray;
             padding: 8px;
             box-sizing: border-box;
             background-color: #e6e6e6;
             border-radius: 50%;
             /* margin-top: 20px; */
             margin-top: 35px;
             padding-bottom: 10px;
       
         }  
          button{
            height:60px;
            width:220px;
            border-radius: 30px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 18px;
            background-color: #c02d28;
            color: white;
            border: none;
            margin-top: 35px;
        }
         #main2{
             height:300px;
             width:80%;
             display: flex;
             margin:  auto;
             justify-content: space-evenly;
             border-bottom: 1px solid  #e6e6e6;;
             padding-bottom: 300px;
             margin-top: 500px;
             /* margin-bottom: 50px; */
             /* align-items: center; */

             /* border:2px solid blue; */
         }
         #main2 > div,#swap > div{
            width: 50%;
         }
         #main2 > div:first-child{

            
             margin-top: 50px;
             margin-right: 20px;
         }
         #main h1  {
            color: #e6e6e6;
            /* padding-left: 550px; */
            /* font-size: 16px; */
            font-family: Open, Helvetica, sans-serif;
            line-height: 40px;
         }
           #content{
               /* height:300px; */
               /* width:490px; */
               /* border:1px solid yellow; */
               /* margin-left: 165px; */
               /* margin-top: 70px; */
               line-height: 35px;
               font-size: 18px;
               font-family: Arial, Helvetica, sans-serif;
               color:#e6e6e6;
           }
    
               #content2{
                   line-height: 25px;
                   color: #e6e6e6;
               }
              
               #swap{
                   height:300px;
                   width:80%;
                   /* border: 2px solid green; */
                   /* margin-left: 100px; */
                   margin: 140px auto;
                   display: flex;
                   justify-content: space-evenly;
                   border-bottom: 1px solid  #e6e6e6;;
                   padding-bottom: 80px;
               }
           
              
    
               #swap> div {
                   margin-top: 50px;
                   margin-left: 20px;
                   color: #e6e6e6;
                   /* line-height: 25px; */
                   /* font-size: 19px; */
               }
               #swap h1 {
                   font-size: 30px;
                   margin-bottom: 7px;
               }
               #bootcamp{
                   height:60px;
                   width:25%;
                   /* border:1px solid red; */
                   margin-left: 520px;
                   font-size: 30px;
                   color: #e6e6e6;
                   font-family: Arial, Helvetica, sans-serif;
                   margin-top: 30px;
               }
    
    
               #que{
                   height: 800px;
                   width:60%;
                   /* border: 2px solid cyan; */
                   /* margin-left: 20%; */
                   line-height: 60px;
                   font-size: 20px;
                   font-family: Arial, Helvetica, sans-serif;
               }
               #abc{
                   display: flex;
                   /* grid-template-columns: 400px 200px; */
                   line-height: 30px;
                   margin: auto;
                   /* padding-left: 10px; */
                   width: 40%;
                   margin-top: 0px;
                   justify-content: space-between;
                   border-bottom: 1px solid grey;
                   /* border-right: 1px solid blue; */
               }
               #anchor>a{
                 display: block;
                  color: #dd625e;
                   font-size: 21px;
                   font-family: Arial, Helvetica, sans-serif;
               }
               #anchor{
                   padding-top: 10px;
                   line-height: 60px;
               }
               #hour{
                   font-size: 16px;
                   color:#e6e6e6;
                   line-height: 60px;
                   padding-top: 8px;
                   /* border:1px solid green */
               }
              #total{
                margin-top: 15px;
                   /* margin-left: 400px; */
                   color:white;
                   width: 40%;
                   margin: 15px auto ;
                   font-size: 20px;
                   display: flex;
                   justify-content: space-between;
                   font-family: Arial, Helvetica, sans-serif;
               }
               #to{
                /* margin-top: -25px; */
                /* padding-left:-8px; */
                color: #e6e6e6;
                font-size: 15px;
                font-family: Arial, Helvetica, sans-serif;
            }
            #menu3 {
                width: 70%;
                margin: 100px auto;
                display: flex;
                border-bottom: 1px solid #d3d3d3;
                justify-content: space-between;
                padding-bottom: 90px;
            }
            #content3{
               /* height:350px; */
               /* width:480px; */
               /* border:1px solid yellow; */
               /* margin-left: 145px; */
               margin-top: 70px;
               
               line-height: 45px;
               font-size: 18px;
               font-family: Arial, Helvetica, sans-serif;
               color:#e6e6e6;
               width: 35%;
           }
         #contents h1 {
             margin-bottom: 25px;
         }
           #tag{
               line-height: 25px;
           }
    
    
    
           #form {
      width: 60%;
      /* border:2px solid lime; */
      /* margin: 30px auto; */
     
      
    }
    #form > form {
      background: #3e3e3e;
    
       /* border:2px solid pink;  */
      /* width: 35%; */
      /* height:600px; */
      /* margin: 10px auto; */
      padding: 60px;
      padding-top: 35px;
      /* margin-left: 670px; */
      /* margin-top: -450px; */
      
    }
    /* #form > form > h2 {
      background:#3e3e3e;
      color: #e6e6e6;
      text-align: left;
      /* margin-bottom: 12px; */
      /* font-size: 30px; */
    /* } */
    
    #form > form > #input {
      background-color: #e6e6e6;
      border-radius: 7px;
      border: none;
    }
    #form  input {
      background-color: #e6e6e6;
      border-radius: 7px;
      width: 97%;
      padding: 7px 12px;
      font-size: 17px;
      margin: 0px;
      margin-bottom: 30px;
      outline: none;
      border: none;
      margin-top: 5px;
    }
    #form label {
        color: #e6e6e6;
    }
    #form .form-div {
      display: flex;
      background-color: #3e3e3e;
      width: 100%;
      margin: auto;
      justify-content: space-between;
      box-sizing: border-box;
    }
    #form .form-div > div {
      background-color: #3e3e3e;
      width: 45%;
    }
  #form  #last_name {
        margin-left: -8px;
    }
/*     
    #form .form-div > div > input {
      background-color: #e6e6e6;
      border-radius: 7px;
      width: 92%;
      padding: 7px 12px;
      font-size: 17px;
      margin: 0px;
      margin-bottom: 12px;
      outline: none;
      border: none;
    } */
    
    #form > form > p {
      background: #3e3e3e;
      color: #e6e6e6;
      margin-bottom: 12px;
      font-size: 19px;
    }
    #form > form > p > span {
      background: #3e3e3e;
      color: #e6e6e6;
      margin: 25px 0 0 208px;
      font-size: 19px;
    }
    #form > form > .g-recaptcha {
      margin: 20px 0;
      width: 46%;
      height: 80px;
    }
    #form > form > #terms {
      /* border:2px solid white; */
      /* background-color: #2b2727; */
      color: rgba(255, 255, 255, 0.705);
      width: 100%;
      margin:  0;
      margin-top: -30px;
      padding: 10px 6px;
    }
    #form > form > #terms > p {
      /* background-color: #2b2727; */
      font-size: 15px;
    }
    #form  a {
      color:teal;
      /* background-color: #2b2727; */
      /* margin-top: -20px; */
    }
    #form > form > #button {
      height: 70px;
      width: 200px;
      border-radius: 40px;
      background-color: #c02d28;
      border: none;
      font-size: 22px;
      color: white;
    }
    
    
    
    #la{
        line-height: 25px;
    }
    
  
    
   
    #faQ{
        height:40px;
        width:10%;
        margin: auto;
        /* border: 1px solid cyan; */
        /* margin-top: 40px; */
        /* margin-left: 600px; */
        /* padding-top: 20px; */
        color: white;
        /* padding-left: 10px; */
        font-size: 40px;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    #que{
        height:350px;
        width:65%;
        text-align: center;
        /* border: 1px solid cyan; */
        /* margin-top: 20px; */
        /* margin-left: 270px; */
        padding-top: 20px;
        color: white;
        padding-left: 10px;
        font-size: 40px;
        margin: auto;
        box-sizing: border-box;
        margin-bottom: 70px;
        /* font-family: Arial, Helvetica, sans-serif; */
    }
    #ch1{
        height:40px;
        width:90%;
         /* border: 1px solid cyan;  */
        color: white;
    background-color:#891814;
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
        padding-bottom: 15px;
        align-content: center;
        margin-left: 40px;
        padding-left: 20px;
    }
    #ch2{
           width: 91%;
            font-size: 15px;
            margin-left: 40px;
            margin-right: 30px;
            /* line-height: 28px; */
             /* border: 1px solid red;  */
            background-color: white;
            color: #3e3e3e;
            font-family: Arial, Helvetica, sans-serif;
            padding-left: 20px;
            padding-top: 15px;
            /* margin-top: 20px; */
            line-height: 23px;
            padding-bottom: 15px;
            box-sizing: border-box;
    
    }
    .ch3{
        height:55px;
        width:91%;
        border-bottom: 1px solid black;
        font-size: 15px;
        background-color: #d3d3d3;
        color: rgb(12, 12, 12);
        font-size: 15px;
        font-weight: 700;
        margin-left: 40px;
        padding-left: 9px;
        /* padding-top: -10px; */
        box-sizing: border-box;
        text-align: left;
        padding-top: -5px;
        /* margin-top: -10px; */
        /* background-color: #222; */
    }
    #frame{
        height:320px;
        width:560px;
        /* border:1px solid green; */
        margin-left: 520px;
        margin-top: -280px;
    
    }
    /* #main {
        position: absolute;
    } */

#clip1 {
    clip-path: polygon(0 70%, 0% 100%, 100% 100%);
    height: 250px;
    width: 100%;
    background-color: #000000d0;

    margin-top: -110px;

}
#clip2 {
    height: 250px;
    width: 100%;
    background-color: #000000d0;
    
    margin-top: -260px;
    clip-path: polygon(0 100%, 100% 70%, 100% 100%, 0 100%);

}
@media all and (min-width:381px) and (max-width:768px){
#main2 {
   width: 90%;
   /* margin: auto; */
   margin-top: 780px;
    flex-direction: column;
    padding-bottom: 170px;
}
#main2> div {
    width: 100%;
    text-align: center;
    /* margin: auto; */
}
#main2 iframe {
    margin-top: 30px;
    width: 90%;
    margin-bottom: 30px;
}

#main {
    height: 640px;
   
}
#main > div {
    width: 99%;
    flex-direction: column;
    margin: auto;
    text-align: center;
    margin-left: 200px;
}
#main > div > div:last-child {
    width: 550px;
    margin-left: -170px;
    padding-right: 20px;
    /* border:1px solid blue */
}
#clip1,#clip2 {
    display: none;
}
#swap {
    flex-direction: column-reverse;
    margin-top: 100px;
}
#swap > div {
    width: 100%;
    margin-top: 30px;
}
#swap img {
    margin-top: 30px;
}
#bootcamp {
    width: 90%;
    margin: auto;
    text-align: center  ;
}
#abc {
    width: 95%;
}
#anchor a {
    font-size: 15px;
}
#total {
    width: 95%;
}
#menu3 {
    flex-direction: column;
    width: 90%;
    margin: -10px auto;
}
#menu3 > div {
    width: 100%;
    text-align: center;
}
#menu3 h1 {
    font-size: 30px;
    margin-bottom: 15px;
}
#menu3 #form {
    margin-top: 20px;
    text-align: center;
    /* margin-bottom: 50px; */
}
#faQ{
padding-top: 70px;
}
#que {
    width: 80%;
    margin-bottom: 150px;
    text-align: left;
}
#ch1 {
    padding-left: 5px;
}
}
@media all and (min-width:50px) and (max-width:381px){
    #main2 {
       width: 90%;
       /* margin: auto; */
       margin-top:980px;
        flex-direction: column;
        padding-bottom: 170px;
    }
    #main2 h2 {
        margin-bottom: 25px;
    }
    #main2> div {
        width: 100%;
        text-align: center;
        /* margin: auto; */
    }
    #main2 iframe {
        margin-top: 30px;
        width: 90%;
        margin-bottom: 30px;
    }
    
    #main {
        height: 760px;
       
    }
    #main > div {
        width: 99%;
        flex-direction: column;
        margin: auto;
        text-align: center;
        margin-left: 200px;
    }
    #main img {
        margin-left: -170px;
    }
    #main > div > div:last-child {
        width: 250px;
        margin-left: -170px;
        padding-right: 20px;
        text-align: center;
        /* border:1px solid blue */
    }
    #main i {
        display: none;
    }
    #main button {
        width: 250px;
    }
    #clip1,#clip2 {
        display: none;
    }
    #swap {
        flex-direction: column-reverse;
        margin-top: 150px;
    }
    #swap > div {
        width: 100%;
        margin-top: 30px;
    }
    #swap img {
        margin-top: 30px;
    }
    #bootcamp {
        width: 90%;
        margin: auto;
        text-align: center  ;
    }
    #abc {
        width: 97%;
    }
    #anchor a {
        font-size: 10px;
    }
    #hour {
        line-height: 20px;
        margin-top: 25px;
        font-size: 10px;
    }
    #hour p {
        margin-bottom: 40px;
    }
    #total {
        width: 95%;
        font-size: 10px;
    }
    #to {
        font-size: 10px;
    }
    #menu3 {
        flex-direction: column;
        width: 90%;
        margin: -10px auto;
    }
    #menu3 > div {
        width: 100%;
        text-align: center;
        padding: 20px 10px;
    }
    #menu3 h1 {
        font-size: 30px;
        margin-bottom: 15px;
    }
    #menu3 #form {
        margin-top: 20px;
        text-align: center;
        /* margin-bottom: 50px; */
    }
    #faQ{
    padding-top: 70px;
    margin-left: 90px;
    }
    #que {
        width: 95%;
        margin-bottom: 250px;
        text-align: left;
        margin-left: -20px;
    }
    #ch1 {
        padding-left: 5px;
    }
    #form form {
        padding: 20px;
        text-align: left;
    }
    .ch3{
        line-height: 15px;
        padding-top: 5px;
    }
    #form label {
        font-size: 12px;
    }
    #form .form-div{
        flex-direction: column;
    }
    #form .form-div > div {
        width: 100%;
    }
    #form #last_name {
        margin-left: 0px;
    }
    #form input {
        width: 90%;
    }
    #form {
        height: 690px;
        /* padding-bottom: 40px; */
        padding-bottom: 0px;
    }
    .g-recaptcha{
       /* font-size: 80px; */
       display: none;
    }
    #form #la {
        font-size: 11px;
    }
    }