* {
    margin: 0;
    padding: 0;
    color: var(--webBlue);
}

html,
body {
    height: 100%;
    width: 100%;
}

#sec-header {
    display: none;
}

main {
    overflow-y: scroll;
}

.hamburger {
    height: 40px;
    width: 40px;
    background-color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0 0 10px -5px;


}

.ham {
    height: 3px;
    width: 50%;
    background-color: var(--webBlue);
    margin-top: 2px;
    margin-bottom: 2px;
    border-radius: 12px2;
}

.parent {
    height: 85px;
    width: 100%;
    /* background-color:blue; */
    display: flex;
    align-items: center;
    justify-content: center;

}


.leftbox {
    height: 80%;
    width: 30%;
    /* background-color: yellow; */
    align-items: center;
    display: flex;
    justify-content: center;
}

.sec-leftbox {
    height: 80%;
    width: 70%;
    /* background-color: yellow; */
    align-items: center;
    display: flex;
    box-sizing: border-box;
    padding-left: 10px;


}

.middlebox {
    height: 100%;
    width: 40%;
    /* background-color: salmon; */
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 25px;
    font-size: 20px;
    font-family: 'Lato';

}

.middlebox a {
    color: var(--webBlue);
    text-decoration: none;
    font-family: 'Lato';
}



.rightbox {
    height: 100%;
    width: 30%;
    /* background-color: violet; */
    align-items: center;
    justify-content: center;
    column-gap: 25px;
    display: flex;
    font-family: 'Lato';


}

.sec-rightbox {
    height: 80%;
    width: 30%;
    /* background-color: violet; */
    align-items: center;
    justify-content: right;
    column-gap: 25px;
    display: flex;
    font-family: 'Lato';
    box-sizing: border-box;
    padding-right: 10px;
}


.rightbox a {
    color: var(--webBlue);
    text-decoration: none;
    font-size: 20px;

}

.signupBtn {

    text-decoration: none;
    border-radius: 30px;
    height: 50px;
    width: 120px;
    border: none;
    background-color: var(--webRed);
    color: white;
    font-size: 20px;
    font-weight: bolder;


}


.logoImage {
    /* color: aquamarine; */
    height: 46px;

}







.descBox {
    height: 624px;
    width: 80%;
    /* background-color: yellow; */
    margin: auto;
    display: flex;
}

.left-descbox {
    height: 100%;
    width: 50%;
    /* background-color:salmon; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.right-descbox {
    height: 100%;
    width: 50%;
    /* background-color: khaki; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.right-descbox img {
    height: 500px;
}

.top-left-descbox {
    height: 45%;
    width: 100%;
    /* background-color: blue; */
    display: flex;
    align-items: center;
}

.middle-left-descbox {
    height: 35%;
    width: 100%;
    /* background-color: violet; */
}

.bottom-left-descbox {
    height: 20%;
    width: 100%;
    /* background-color: saddlebrown; */
    display: flex;
    align-items: center;




}

.left-descbox h1 {
    font-size: 50px;
    font-family: 'Poppins';
    line-height: 80px;
    margin: 0;

}

.left-descbox p {
    font-size: 22px;
    font-family: 'Lato';
    width: 434px;


}

.left-descbox button {

    text-decoration: none;
    border-radius: 30px;
    height: 50px;
    width: 250px;
    border: none;
    background-color: var(--webRed);
    color: white;
    font-size: 20px;
    font-weight: bolder;
    margin-top: 20px;


}

.guiderBox {

    height: 700px;
    width: 80%;
    /* background-color: yellow; */
    margin: auto;
    display: flex;
}

.leftside {

    height: 100%;
    width: 50%;
    /* background-color:salmon; */
    display: flex;
    flex-direction: column;


}

.topleftside {
    height: 45%;
    width: 100%;
    /* background-color: blue; */
    display: flex;
    align-items: center;

}

.middleleftside {
    height: 21%;
    width: 100%;
    /* background-color: violet; */
}

.bottomleftside {
    height: 40%;
    width: 100%;
    /* background-color: saddlebrown; */
    /* display: flex; */
    /* align-items: center; */
    flex-direction: column;
    justify-content: center;

}

.bottomleftside p {
    font-size: 30px;
    font-family: 'Lato';
}


.topleftside h1 {
    font-size: 67px;
    font-family: 'PT Serif';

    line-height: 80px;
    color: #091e3f;
    margin-bottom: 32px
}

.middleleftside p {
    font-size: 22px;
    font-family: 'Lato';
    width: 600px;

}

.rightside {
    height: 100%;
    width: 50%;
    /* background-color: khaki; */


    display: flex;



}


.methodBox {
    height: auto;
    width: 80%;
    /* background-color: yellow; */
    margin: auto;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    line-height: 0;

}

.methodBox img {
    height: 100px;


}

.methodBox p {
    font-size: 22px;
    font-family: 'Open Sans';
    width: 600px;
    text-align: center;

}

.methodBox h1 {
    font-size: 67px;
    font-family: 'PT Serif';


}

.securityBox {
    height: 400px;
    width: 80%;
    /* background-color: yellow; */
    margin: auto;
    align-items: center;
    display: flex;
    justify-content: center;


}

.leftDiv {
    height: 100%;
    width: 50%;
    /* background-color:red; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.leftDiv img {
    height: 380px;
}

.rightDiv {
    height: 100%;
    width: 50%;
    /* background-color:saddlebrown; */
    align-items: center;
    display: flex;
}

.rightDiv h1 {
    font-size: 58px;
    font-family: 'PT Serif';
    line-height: 55px;

}

.workFlowBox {

    height: auto;
    width: 80%;
    /* background-color: yellow; */
    margin: auto;
    align-items: center;
    display: flex;
    justify-content: center;
}

.left-workFlowBox {
    width: 60%;
    height: 100%;
    /* background-color: green; */
    display: flex;
    flex-direction: column;
}

.right-workFlowBox {
    width: 40%;
    height: 100%;
    /* background-color: slateblue; */
}

.topFlowBox {
    height: 45%;
    width: 100%;
    /* background-color: blue; */
    display: flex;
    align-items: center;




}

.middleFlowBox {
    height: 35%;
    width: 100%;
    /* background-color: violet; */

}

.bottomFlowBox {
    height: 17%;
    width: 100%;
    /* background-color: saddlebrown; */
    display: flex;
    align-items: center;


}

.leftBottom {
    height: 100px;
    width: 100px;
    /* background-color: aqua; */

}

.rightBottom {
    height: 100px;
    width: 629px;
    /* background-color: yellow; */
    display: flex;
    flex-direction: column;
    justify-content: center;


}

.topFlowBox h1 {
    font-size: 84px;
    font-family: 'PT Serif';
    line-height: 76px;


}

.middleFlowBox p {

    font-size: 29px;
    font-family: 'Open Sans';
    width: 600px;
    text-align: left;


}

.leftBottom img {
    height: 100px;


}

.rightBottom h3 {
    margin: 0;
    font-family: 'PT Serif';
}

.rightBottom p {
    margin: 0;
    font-family: 'Open Sans';
}


.detailsBox {

    height: 700px;
    width: 80%;
    /* background-color: yellow; */
    flex-direction: column;
    margin: auto;



    display: flex;
    justify-content: center;


}

.topDetailBox {
    height: 25%;
    width: 100%;
    /* background-color: blue; */
    display: flex;




}

.BottomDetailBox {
    height: 75%;
    width: 100%;
    /* background-color: salmon; */
    display: flex;
}

.leftTopBox {
    height: 100%;
    width: 50%;
    /* background-color: violet; */
    display: flex;
    align-items: center;
    justify-content: left;
}

.rightTopBox {

    height: 100%;
    width: 50%;
    /* background-color: red; */
    display: flex;
    align-items: center;
    justify-content: right;
    column-gap: 10px;


}

.bottomFirstdiv {
    height: 100%;
    width: 40%;
    /* background-color: green; */
}

.div-card-slideContainer {
    overflow-y: scroll;
    width: 800px;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 0 10px -5px;
}

.bottomSeconddiv {

    height: 100%;
    width: 20%;
    /* background-color:pink; */
    flex-direction: column;
}

.bottomThirddiv {
    height: 100%;
    width: 20%;
    /* background-color:burlywood; */
}

.bottomFourthdiv {
    height: 100%;
    width: 20%;
    /* background-color:brown; */

}

.logoImg {
    height: 36px;

}

.box-rightTopBox {
    height: 60px;
    width: 60px;
    /* background-color: salmon; */
    border-radius: 60%;
    display: flex;
    align-items: center;
    justify-content: center;

}

.box-rightTopBox img {
    height: 25px;
    width: 25px;

}

.bottomSeconddiv h2 {
    font-family: 'Open Sans';
    margin-bottom: 30px;
}

.bottomSeconddiv a {

    font-family: 'Open Sans';
    font-size: 20px;
    margin-bottom: 20px;
    text-decoration: none;
    color: black;
    line-height: 35px;
}



.bottomThirddiv h2 {
    font-family: 'Open Sans';
    margin-bottom: 30px;
}

.bottomThirddiv a {

    font-family: 'Open Sans';
    font-size: 20px;
    margin-bottom: 20px;
    text-decoration: none;
    color: black;
    line-height: 35px;

}

.bottomFourthdiv h2 {
    font-family: 'Open Sans';
    margin-bottom: 30px;
}

.bottomFourthdiv a {

    font-family: 'Open Sans';
    font-size: 20px;
    margin-bottom: 20px;
    text-decoration: none;
    color: black;
    line-height: 35px;
}






/* Secion 2 */

.featuresBox {
    display: flex;
    flex-direction: column;
    background-color: aliceblue;
    margin-bottom: 30px;
}



.featDescBox {
    height: auto;
    width: auto;
    background-color: aliceblue;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 0 20px 0;
}

.featDescBox h1 {
    font-family: 'Poppins';
    margin: 25px 0 0 0;
    text-align: center;
}

.featDescBox p {
    font-family: 'Lato';
    margin: 0 0 25px 0;
    text-align: center;
}

.btnBox {
    height: auto;
    width: auto;
    /* background-color: aquamarine; */
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 20px;
    margin-bottom: 20px;
}

.featBtnImg {
    height: 70px;
    width: 70px;
    /* background-color: antiquewhite; */
}

.container-btnBox {
    height: auto;
    /* background-color: antiquewhite; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: 'Lato';
    font-size: small;
    text-align: center;
}

.slideContainer {
    height: 400px;
    /* background-color: antiquewhite; */
    display: flex;
    overflow: hidden;
}

.card-slideContainer {
    height: 400px;
    min-width: 100%;
    /* background-color: aqua; */
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-y: scroll;
    text-align: center;

}

.card-slideContainer h2 {
    font-family: 'Poppins';
    margin-top: 20px;
}

.card-slideContainer p {
    font-family: 'Lato';
    margin-bottom: 20px;
}







.pricingBox {
    height: auto;
    width: 100%;
    background-color: var(--webLiteRed);
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
}

.pricingBox h2 {
    font-family: 'Poppins';
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;

}


.tableBox {
    height: auto;
    width: auto;
    /* background-color: antiquewhite; */
    display: flex;
    /* align-items: center; */
    justify-content: center;
    column-gap: 30px;
}

.priceCard {
    height: auto;
    width: 400px;
    background-color: aliceblue;
    display: flex;
    align-items: center;
    font-family: 'Lato';
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 10px -5px;
    box-sizing: border-box;
    padding: 15px;
    text-align: center;
}

.cel {
    height: 40px;
    width: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 10px 0 10px 0;
}





.pricingBox button {

    text-decoration: none;
    border-radius: 30px;
    height: 50px;
    width: 250px;
    border: none;
    background-color: var(--webRed);
    color: white;
    font-size: 20px;
    font-weight: bolder;
    margin-top: 20px;
    margin-bottom: 20px;


}


.downloadBox {
    height: 362px;
    width: 100%;
    background-color: aliceblue;
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.left-downloadBox {
    height: 100%;
    width: 30%;
    /* background-color: fuchsia; */
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.right-downloadBox {
    height: 100%;
    width: 30%;
    /* background-color: darkcyan; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}

.right-downloadBox h2 {
    font-family: 'Poppins';
    text-align: center;
}

.right-downloadBox p {
    font-family: 'Lato';
    text-align: center;
}

.footerBox {
    margin-top: 30px;
    height: auto;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
}

.upper-footerBox {
    height: auto;
    width: auto;
    /* background-color: firebrick; */
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    padding: 10px;

}

.upper-footerBox a {
    text-decoration: none;
    color: black;
    font-family: 'Lato';
}

.lower-footerBox {
    height: auto;
    width: auto;
    background-color: aliceblue;
    font-family: 'Lato';
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}




/* Tooltip */

.dropbtn {
    /* background-color: #04AA6D; */
    /* color: white; */
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  
  .dropdown {
    float: right;
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    right: 0;
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown a:hover {background-color: #ddd;}
  
  .show {display: block;}


/* ?END TOLLTOP */

@media screen and (max-width:1241px) {
    .right-downloadBox div a img {
        height: 35px;
    }
}

@media screen and (max-width:953px) {
    .right-downloadBox div a img {
        height: 35px;
    }

    .right-descbox img {
        height: 350px;
    }

    .downloadBox {
        height: 300px;
    }

    .downloadBox img {
        height: 500px;
    }

    .priceCard {
        width: 320px;
    }

    .left-downloadBox {
        width: 35%;
    }

    .right-downloadBox {
        width: 35%;
    }

    .right-descbox img {
        height: 300px;
    }

    .left-descbox h1 {
        font-size: 40px;
    }

    .left-descbox p {
        font-size: 21px;
        width: fit-content;
    }

    .left-descbox button {
        height: 40px;
        width: 220px;
    }

    .div-card-slideContainer {
        width: 600px;
    }

    .img-card-slideContainer {
        width: 600px;
    }
}




@media screen and (max-width:761px) {
    .descBox {
        height: 450px;
    }

    .featuresBox {
        box-sizing: border-box;
        padding: 10px;
    }

    .tableBox {
        display: grid;
        row-gap: 15px;
    }

    .priceCard {
        width: 450px;
    }

    .left-downloadBox {
        width: 40%;
    }

    .right-downloadBox {
        width: 40%;
    }
}


@media screen and (max-width:700px) {
    #prime-header {
        display: none;
    }

    #sec-header {
        display: contents;
    }
}




@media screen and (max-width:697px) {
    .descBox {
        height: 350px;
    }

    .right-descbox img {
        height: 230px;
    }

    .left-descbox h1 {
        font-size: 30px;
        line-height: 35px;
    }

    .left-descbox p,
    .featDescBox p,
    .card-slideContainer p {
        font-size: 15px;
    }

    .featDescBox h1 {
        font-size: 30px;
    }

    .div-card-slideContainer {
        width: 400px;
    }

    .img-card-slideContainer {
        width: 400px;
    }

    .btnBox {
        margin-bottom: 50px;
    }

    .downloadBox {
        flex-direction: column;
        align-items: center;
        height: auto;
    }

    .left-downloadBox {
        height: 300px;
        width: 80%;
    }

    .right-downloadBox {
        width: 80%;
    }

    .right-downloadBox h2 {
        margin-top: 20px;
    }
}

@media screen and (max-width:575px) {
    .featBtnImg {
        height: 50px;
        width: 50px;
    }

    .priceCard {
        width: 300px;
    }

    .btnBox {
        justify-content: left;
        overflow-x: scroll;
    }

    .descBox {
        display: grid;
        height: auto;
        width: 95%;
        margin-bottom: 50px;
    }

    .featDescBox h1 {
        font-size: 23px;
    }

    .container-btnBox p {
        font-size: 12px;
    }

    .right-descbox {
        width: 100%;
    }

    .left-descbox {
        width: 100%;
        text-align: center;
        order: 1;
    }

    .div-card-slideContainer {
        width: 300px;
    }

    .img-card-slideContainer {
        width: 300px;
    }

    .left-descbox p {
        width: auto;
    }

    .left-descbox button {
        margin: 10px auto 0 auto;
    }

    .pricingBox button {
        height: 40px;
        width: 210px;
    }

    .logoImage {
        height: 36px;
    }

    .pricingBox {
        box-sizing: border-box;
        padding: 10px;
    }

}