body {
    margin: 0;
    background-color: rgb(221, 236, 236);
    width: 100vw;
}

main {
    width: 100%;
}

/* navigation section  */
header {
    position: relative;
    top: 0;
    background-color: rgb(148, 100, 236);
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 460px;
    padding: 12px 0;
    width: 100%;
}

/* web icon container */
#web-icon-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

#web-icon-container>p {
    font-size: 20px;
    color: white;
}

/* web icons */
#web-icon-container>.fa-html5,
#web-icon-container>.fa-css3-alt {
    font-size: 40px;
}

#web-icon-container>.fa-js {
    font-size: 35px;
}

/* navigation link  */
nav>a {
    padding: 21px 12px 22px 12px;
    color: rgb(235, 229, 230);
    font-size: 18px;
    font-weight: 600;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-decoration: none;
}

nav>a:hover {
    background-color: rgb(90, 63, 243);
}

/* controlling all section margin  */
section {
    margin: 80px 0;
}

/* input section  */
#inputSection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#email {
    font-size: 17px;
    padding-left: 6px;
    margin-bottom: 10px;
    width: 300px;
    height: 25px;
    border-radius: 8px;
}

form>#submit {
    font-size: 20px;
    font-weight: 700;
    border-radius: 8px;
    width: 180px;
    padding: 4px 0 4px 0;
    background-color: orange;
}

form>#submit:hover {
    background-color: rgb(223, 14, 188);
    border: 1px solid rgb(235, 225, 225);
}

/* web tools section  */
#ToolsContainer {
    text-align: center;
}

#tools {
    display: flex;
    justify-content: center;
    flex-direction: row;
    column-gap: 20px;
    margin: 35px 40px 90px 40px;
}

.tool>p {
    text-align: justify;
}

.tool {
    background-color: rgb(0, 255, 115);
    padding: 0 12px 0 12px;
    border-radius: 12px;
    box-shadow: 1px 1px 4px 2px rgb(211, 13, 178);
    user-select: none;
    width: 500px;

}

.tool:hover {
    opacity: 0.9;
    color: white;
    box-shadow: 1px 1px 12px 5px rgb(211, 13, 178);
    background-color: red;
}

/* web tools making animation */
#animation-first {
    animation: web-tools;
    animation-duration: 0.6s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
}

#animation-second {
    animation: web-tools;
    animation-duration: 0.6s;
    animation-delay: 0.6s;
    animation-timing-function: ease-in-out;
}

#animation-third {
    animation: web-tools;
    animation-duration: 0.6s;
    animation-delay: 1.2s;
    animation-timing-function: ease-in-out;
}

@keyframes web-tools {
    0% {
        transform: translateY(-30px);
        background-color: yellow;
        color: blue;
    }

    25% {
        transform: translateY(-15px);
        background-color: yellow;
        color: blue;
    }

    50% {
        transform: translateY(0);
        background-color: yellow;
        color: blue;
    }

    75% {
        transform: translateY(15px);
        background-color: yellow;
        color: blue;
    }

    100% {
        transform: translateY(30px);
        color: blue;
    }
}

/* sample visualize-about-tool */
#visualize-about-tools {
    text-align: center;
    margin: 40px 0;
}

video {
    user-select: none;
    background-color: rgb(4, 0, 255);
    border: 5px solid transparent;
    border-image: url("./Web\ development.jpg") 40 round;
    width: 600px;
    height: 340px;
    display: flex;
    justify-content: center;
    /* to align center from the parent element*/
    margin: auto auto;
}

/* price section  */
#priceContainer {
    text-align: center;
}

#price {
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 20px;
    margin: 0 40px;
}

#price>.toolPrice {
    position: relative;
    width: 400px;
    display: flex;
    flex-direction: column;
    text-align: justify;
    background-color: rgb(123, 123, 204);
    border-radius: 20px;
    box-shadow: 2px 2px 4px 5px blue;
    height: 300px;
}

#price>.toolPrice>.priceDetail {
    position: absolute;
    top: 50px;
    padding: 0 20px 0 20px;
}

#price>.toolPrice>h1 {
    position: absolute;
    top: 0;
    text-align: center;
    margin: 0;
    background-color: grey;
    width: 100%;
    padding: 12px 0;
    border-radius: 20px 20px 0 0;
}

#price>.toolPrice>.dollar {
    position: absolute;
    bottom: 90px;
    /* Centering child elelement according to the parnet */
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

#price>.toolPrice>.select {
    position: absolute;
    bottom: 40px;
    /* Centering child elelement according to the parnet */
    left: 0;
    right: 0;
    margin: auto;
    background-color: rgb(155, 192, 161);
    width: 50px;
    padding: 6px 15px;
    user-select: none;
    cursor: pointer;

}

#price>.toolPrice:hover {
    background-color: yellow;
    color: rgb(255, 0, 0);
    box-shadow: 2px 2px 6px 8px blue;
    user-select: none;
}

#price>.toolPrice:hover h1 {
    background-color: green;
    color: white;
}

#price>.toolPrice:hover .select {
    background-color: rgb(8, 23, 240);
    color: white;
}

#price>.toolPrice:hover .dollar {
    color: rgb(8, 23, 240);
}

/* footer section  */
footer {
    background-color: #9ea6ade3;
    box-shadow: 2px 2px 8px 7px rgb(30, 31, 29);
    padding: 1px 12px 12px 12px;
    height: 200px;
}

footer>#contactHead {
    margin-bottom: 12px;
    text-align: center;
    font-size: 20px;
}

footer>#contactList {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
}

footer>#contactList>a>i {
    font-size: 30px;
}

footer>#contactList>a>p {
    font-size: 20px;
}

footer>#contactList>#contactIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: black;
    transition: all 0.3s linear;
}

footer>#contactList>#contactIcon:hover {
    color: blue;
    transform: scale(1.3);

}

/* making responsive */
@media only screen and (min-width: 5460px) {
    footer {
        height: 800px;
    }
      header {
        column-gap: 3000px;
    }
}

@media only screen and (min-width: 922px) and (max-width: 1250px) {

    /* navigation section  */
    header {
        column-gap: 250px;
    }
}

@media only screen and (max-width: 921px) {
    header {
        column-gap: 50px;
    }
}

@media only screen and (min-width: 701px) and (max-width: 920px) {

    /* navigation section  */
    header {
        column-gap: 80px;
    }

    #web-icon-container>p {
        font-size: 16px;
        color: white;
    }

    #web-icon-container>.fa-html5,
    #web-icon-container>.fa-css3-alt,
    #web-icon-container>.fa-js {
        font-size: 30px;
    }

    nav>a {
        padding: 28px 6px 27px 6px;
        font-size: 16px;
    }

    /* price section  */
    #price>.toolPrice {
        height: 350px;
    }

    /* footer section  */
    footer {
        height: 200px;
    }

    footer>#contactList>a>i {
        font-size: 25px;
    }

    footer>#contactList>a>p {
        font-size: 15px;
    }
}

@media only screen and (min-width: 551px) and (max-width: 700px) {

    /* navigation section  */
    header {
        column-gap: 70px;
    }

    /* web icon container */
    #web-icon-container {
        gap: 8px;
    }

    #web-icon-container>p {
        font-size: 12px;
        color: white;
    }

    /* web icons */
    #web-icon-container>.fa-html5,
    #web-icon-container>.fa-css3-alt,
    #web-icon-container>.fa-js {
        font-size: 20px;
    }

    /* navigation link  */
    nav>a {
        padding: 21px 6px 22px 6px;
        font-size: 12px;
    }

    /* input section  */
    #email {
        font-size: 12px;
        width: 250px;
        height: 17px;
        border-radius: 6px;
    }

    form>#submit {
        font-size: 15px;
        width: 110px;
    }

    #inputSection>#topic {
        font-size: 18px;
    }

    /* web tools section  */
    .tool>p {
        position: relative;
        top: -12px;
        font-size: 12px;
    }

    #ToolsContainer>#about-web-development-tools {
        font-size: 18px;
    }

    /* sample visualize-about-tool */
    #visualize-about-tools {
        font-size: 18px;
        margin: 18px;
    }

    video {
        width: 500px;
        height: 280px;
    }

    /* price section  */
    #priceContainer>#price-of-tools {
        font-size: 18px;
    }

    #price>.toolPrice {
        height: 280px;
    }

    #price>.toolPrice>.priceDetail {
        top: 45px;
        padding: 0 15px 0 15px;
        font-size: 12px;
    }

    #price>.toolPrice>h1 {
        font-size: 15px;
    }

    #price>.toolPrice>.dollar {
        font-size: 15px;
    }

    #price>.toolPrice>.select {
        font-size: 15px;
        padding: 6px 12px;

    }

    /* footer section  */
    footer {
        height: 140px;
    }

    footer>#contactHead {
        font-size: 18px;
    }

    footer>#contactList>a>i {
        font-size: 20px;
    }

    footer>#contactList>a>p {
        font-size: 13px;
    }

}

@media only screen and (min-width: 281px) and (max-width: 550px) {

    /* navigation section  */
    header {
        column-gap: 100px;
    }

    nav {
        display: flex;
        flex-direction: column;
    }

    #web-icon-container>p {
        font-size: 15px;
        margin-left: 12px;
    }

    /* web icons */
    #web-icon-container>.fa-html5,
    #web-icon-container>.fa-css3-alt,
    #web-icon-container>.fa-js {
        font-size: 25px;
    }

    /* navigation link  */
    nav>a {
        padding: 10px 10px 10px 10px;
        font-size: 14px;
    }

    /* input section  */
    #inputSection>#topic {
        font-size: 18px;
        margin-left: 4px;
        margin-right: 4px;
        text-align: center;
    }

    #email {
        font-size: 12px;
        width: 250px;
        height: 20px;
    }

    form>#submit {
        font-size: 14px;
        width: 100px;

    }

    /* web tools section  */
    #ToolsContainer>#about-web-development-tools {
        font-size: 19px;
        margin-top: 0;
    }

    #tools {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 20px;
    }

    .tool {
        width: 100%;
    }

    /* sample visualize-about-tool */
    #visualize-about-tools {
        font-size: 19px;
        margin-top: 0;
        margin-bottom: 30px;
    }

    video {
        width: 80%;
        height: 160px;
    }

    /* price section  */
    #price-of-tools {
        font-size: 19px;
    }

    #price {
        flex-direction: column;
        row-gap: 30px;
    }

    #price>.toolPrice>h1 {
        font-size: 17px;
    }

    #price>.toolPrice {
        width: 100%;
        height: 320px;
    }

    #price>.toolPrice>.dollar {
        font-size: 16px;
    }

    #price>.toolPrice>.select {
        font-size: 16px;
        text-align: center;
    }

    /* footer section  */
    footer {
        height: 120px;
    }

    footer>#contactHead {
        font-size: 19px;
    }

    footer>#contactList>a>i {
        font-size: 10px;
    }

    footer>#contactList>a>p {
        font-size: 7px;
    }

}


@media only screen and (max-width: 280px) {

    /* for all section  */
    section {
        margin: 0 0 30px 0;
    }

    /* navigation section  */
    header {
        column-gap: 70px;
        height: 60px;
    }

    nav {
        display: flex;
        flex-direction: column;
    }

    #web-icon-container>p {
        font-size: 6px;
    }

    /* web icons */
    #web-icon-container>.fa-html5,
    #web-icon-container>.fa-css3-alt,
    #web-icon-container>.fa-js {
        font-size: 10px;
    }

    /* navigation link  */
    nav>a {
        padding: 2px 3px;
        font-size: 8px;
    }

    /* input section  */
    #inputSection {
        margin-top: 30px;
    }

    #inputSection>#topic {
        font-size: 10px;
    }

    #email {
        font-size: 7px;
        width: 150px;
        height: 10px;
        border-radius: 4px;
    }

    form>#submit {
        font-size: 10px;
        width: 80px;
    }

    /* web tools section  */
    #ToolsContainer>#about-web-development-tools {
        position: relative;
        top: 15px;
        font-size: 10px;
    }

    #tools {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 20px;
    }

    .tool {
        width: 100%;
    }

    .tool>h3 {
        font-size: 16px;
    }

    .tool>p {
        font-size: 12px;
    }

    /* sample visualize-about-tool */
    #visualize-about-tools {
        font-size: 10px;
    }

    video {
        width: 75%;
        height: 120px;
    }

    /* price section  */
    #price-of-tools {
        font-size: 10px;
        margin-bottom: 14px;
    }

    #price {
        flex-direction: column;
        row-gap: 30px;
    }

    #price>.toolPrice>h1 {
        font-size: 12px;
    }

    #price>.toolPrice>.priceDetail {
        position: relative;
        top: 35px;
        font-size: 10px;
    }

    #price>.toolPrice {
        width: 100%;
        height: 250px;

    }

    #price>.toolPrice>.dollar {
        font-size: 10px;
    }

    #price>.toolPrice>.select {
        font-size: 10px;
        text-align: center;
    }

    /* footer section  */
    footer {
        height: 60px;
        margin-top: 50px;
    }

    footer>#contactHead {
        font-size: 10px;
    }

    footer>#contactList>a>i {
        font-size: 6px;
    }

    footer>#contactList>a>p {
        font-size: 4px;
    }

}