learnmore.css

.header{
    font-family: sans-serif;
    width: 100%;
    min-height: 40px;
    background-color: rgba(119, 136, 153, 0.295);
}
*{
    font-family: sans-serif;
}
.top-h1 {
    font-family: "Times New Roman";
    font-size: 46px;
    font-weight: bolder;
    text-align: center;
    color: #101834;
 
}
.para {
    text-align: center;
    color: grey;
    font-size: 20px;
    padding-top: 5px;
}
#grid {
    width: 80%;
    min-height: 500px;
    margin: auto;
    display: grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-template-rows:1.5fr 0.4fr 1fr  ;
}
.flex {
    display: flex;
    justify-content:space-around
}
#grid  p{
    color:gray;
}
.compare{
    width: 60%;
    min-height: 50px;
    background-color: rgba(135, 206, 250, 0.356);
    margin: auto;
    text-align: center;
    padding-top: 20px;
    color: mediumblue;
    font-size: 20px;
}
.btn1{
    min-width: 180px;
    height: 50px;
    background-color: rgba(211, 211, 211, 0.932);
    border: 1px solid rgba(119, 136, 153, 0.418);
}
.bg-blue,.rec-btn{
    background-color: rgb(25, 108, 255);
    color: whitesmoke;
}
.blue-ul{
    color: blue;
}
#back-blue{
    background-color: rgb(25, 108, 255);
}

.table-1{
    width: 70%;
    margin: auto;
    border-collapse: collapse;
}
.table-1  thead tr{
   text-align: center;
   font-weight: bold;
    font-size: 24px;
}
.table-1  th,.table-1  td{
    padding: 12px 15px;
    font-size: 18px;
}
.table-1 tbody tr:nth-of-type(odd){
    background-color: rgba(211, 211, 211, 0.356);
}

.rec-btn{
    width: 120px;
    height: 25px;
    margin-top: 20px;
    border-radius: 25px;
}
.button-cont2{
    width: 45%;
    min-height: 70px;
    background-color: whitesmoke;
    margin-left: 535px;
    border: 2px solid lightgrey;
}
.btn2{
    min-width: 80px;
    height: 40px;
    margin: 10px;
    margin-left: 50px;
    background-color: rgba(211, 211, 211, 0.932);
}
.bg-blue,.rec-btn{
    background-color: rgb(25, 108, 255);
    color: whitesmoke;
}
.queAndAnswer{
        margin-left: 200px;

}
#new{
    height: 15px;
    color: white;
    background-color: plum;
    margin-left: 100px;
    font-size: 9px;
}
#comimg-soon{
    height: 15px;
    color: white;
    background-color:blueviolet;
    margin-left: 100px;
    font-size: 9px;
}
.bottom-footer{
    width: 100%;
    min-height: 400px;
    margin: auto;
    display: grid;
    grid-template-columns:1fr 0.3fr 1.5fr 1fr 1fr 1fr 1fr 2fr;
    grid-template-rows:1fr;
    background-color: #ECEDEF;
    gap: 10px;

}
.padding-content{
    padding-top: 30px;
}
.padding-logo{
    padding-top: 45px;
}
.padding-mentimeter{
    padding-top: 23px;
}
.padding-connect{
    padding-top: 250px;
}
.btn1:hover{
    background-color: lightslategray;
}
#learnMore:hover{
    color: rgba(0, 0, 255, 0.555);
}
  

@media only screen and (max-width: 600px) {
    #grid{
        grid-template: "a"
                   "i"
                   "e"
                   "b"
                   "j"
                   "f"
                   "c"
                   "k"
                   "g"
                   "d"
                   "l"
                   "h";
    }

    .table-1{
        display: none;
    }
    .queAndAnswer{
        margin-left: 0;
    }
    .button-cont2{
        display: none;
    }
    .compare{
        display: none;
    }
    .bottom-footer{
        grid-template: " a a"
                         "b c "
                         "d d "
                         "e e "
                         "f f"
                         "g g"
                         "h h";
    }
    .bottom-footer{
        width: 100%;
        min-height: 400px;
        margin: auto;
        display: grid;
        grid-template-columns:auto;
        grid-template-rows:auto;
        background-color: #ECEDEF;
        gap: 10px;
    
    }
    .hide{
        display: none;
    }
}
@media only screen and (min-width: 600px) {
    #grid{
        grid-template: "a"
                   "i"
                   "e"
                   "b"
                   "j"
                   "f"
                   "c"
                   "k"
                   "g"
                   "d"
                   "l"
                   "h";
    }
    .table-1{
        display: none;
}
.button-cont2{
    display: none;
}
.btn1{
    min-width: 500px;
    height: 50px;
    background-color: rgba(211, 211, 211, 0.932);
    border: 1px solid rgba(119, 136, 153, 0.418);
}
.compare{
    display: none;
}
.bottom-footer{
    grid-template: "a b c d e f g h" ;
}
.bottom-footer{
    width: 100%;
    min-height: 400px;
    margin: auto;
    display: grid;
    grid-template-columns:1fr 0.3fr 1.5fr 1fr 1fr 1fr 1fr 2fr;
    grid-template-rows:1fr;
    background-color: #ECEDEF;
    gap: 10px;

}
.hide{
    display: none;
}
}
@media only screen and (min-width: 768px) {
    #grid{
        grid-template: "a"
                   "i"
                   "e"
                   "b"
                   "j"
                   "f"
                   "c"
                   "k"
                   "g"
                   "d"
                   "l"
                   "h";
    }
    .table-1{
        display: none;
}
.button-cont2{
    display: none;
}
.btn1{
    min-width: 700px;
    height: 50px;
    background-color: rgba(211, 211, 211, 0.932);
    border: 1px solid rgba(119, 136, 153, 0.418);
}
.compare{
    display: none;
}
.bottom-footer{
    grid-template: " a b c d e f g h";
}
.bottom-footer{
    width: 100%;
    min-height: 400px;
    margin: auto;
    display: grid;
    grid-template-columns:1fr 0.3fr 1.5fr 1fr 1fr 1fr 1fr 2fr;
    grid-template-rows:1fr;
    background-color: #ECEDEF;
    gap: 10px;

}
.hide{
    display: inline-block;
}


}
@media only screen and (min-width: 992px) {
    #grid{
        grid-template: " a b c d"
                       "e f g h"
                       "i j k l"
    }
    .table-1{
        display:table;
    }
    .btn1{
        min-width: 180px;
        height: 50px;
        background-color: rgba(211, 211, 211, 0.932);
        border: 1px solid rgba(119, 136, 153, 0.418);
    }
    .compare{
        display:block;
    }
    .bottom-footer{
        grid-template: " a b c d e f g h";
    }
    .bottom-footer{
        width: 100%;
        min-height: 400px;
        margin: auto;
        display: grid;
        grid-template-columns:1fr 0.3fr 1.5fr 1fr 1fr 1fr 1fr 2fr;
        grid-template-rows:1fr;
        background-color: #ECEDEF;
        gap: 10px;
    
    }
    .hide{
        display: inline-block;
    }
    
}
    


    
#free{
    grid-area: a;
}
#basic{
    grid-area: b;
}
#pro{
    grid-area: c;
}
#enterprise{
    grid-area: d;
}
#get-started{
    grid-area: e;
}
#buy-basic{
    grid-area: f;
}
#buy-pro{
    grid-area: g;
}
#learn-more{
    grid-area: h;
}
#text1{
    grid-area: i;
}
#text2{
    grid-area: j;
}
#text3{
    grid-area: k;
}
#text4{
    grid-area: l;
}
  /* footer area */

#footer1{
    grid-area: a;
}
#footer2{
    grid-area: b;
}
#footer3{
    grid-area: c;
}
#footer4{
    grid-area: d;
}
#footer5{
    grid-area: e;
}
#footer6{
    grid-area: f;
}
#footer7{
    grid-area: g;
}
#footer8{
    grid-area: h;
}