landingpage.css

* {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}

/* header */
#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 60px;
    /* border: 2px solid salmon; */
    width: 80%;
    margin: auto;
}

#topbar {
    display: flex;
    align-items: center;
    justify-content: center;
}

#topbar li {
    list-style: none;
    padding: 0 20px;
}

#topbar li a{
    text-decoration: none;
    font-weight: 500;
    color:#5d6166;
    margin-bottom: 2px;
}

#topbar li a:hover{
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

#topbar li:nth-child(1){
    padding: 10px;
    background-color: #eef4ff;
    border-radius: 10px;
}

/* headbar */
#headbar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 00px 20px;
    /* border: 2px solid rgb(190, 24, 6); */
    width: 80%;
    margin: auto;
    margin-top: -15px
}

#navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 2px solid salmon; */
}



#navbar li {
    list-style: none;
    padding: 0 20px;
}

#navbar li a{
    text-decoration: none;
    font-weight: 550;
    color:#5d6166;
}

#navbar li a:hover {
    color: #10847e;
}

/* one */
/* searchbar */
#one {
    /* border: solid red; */
    width: 80%;
    margin: auto;
    padding-top: 35px;
    /* background-color: #e3f6fc; For browsers that do not support gradients */
    background-image: url("images/gradient.jpg");
    background-position: 50%;
}

#one>div>h2{
    margin-left: 300px;
}
#one>div>p{
    margin-left: 900px;
}
#one>div>p a{
    color: #10847e;
    font-weight: 60px;
}

#one>div>p a:hover{
    color: #051d1c;
    font-weight: 60px;
}


#topbar .fa-mobile-button {
    align-self: center;
    padding: 10px 20px;
    color: gray;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.container button:hover{
    background-color: #0a534f;
    
}

#searchbar {
    width: 900px;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.searchslider{
    color: gray;
    position: absolute;
    bottom: 0;
    left: 134px;
    animation: searchslider 6s linear infinite;
    /* z-index: 99; */
    
}


@keyframes searchslider{
    0%{transform: translateY(-55px); }
    5%{transform: translateY(0px); }
    30%{transform: translateY(0px); }
    35%{transform: translateY(55px); }
    65%{transform: translateY(55px); }
    70%{transform: translateY(110px); }
    100%{transform: translateY(110px); }
}

.searchslider div{
    height: 55px;
    display: flex;
    align-items: center;
}

#searchbar p{
    text-align: end;
}

#searchbar p>a {
    color: #10847e;
    font-weight: 200;
}

form {
    background: #fff;
    width: 900px;
    height: 55px;
    display: flex;
    border: 1px solid rgb(202, 202, 202);
    border-radius: 50px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

form input {
    flex: 1;
    border: none;
    outline: none;
    
}

form button {
    background: #10847e;
    padding: 10px 20px;
    border: 3px solid #fff;
    border-left: none;
    outline: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 50px;
    
}

form .fa-magnifying-glass{
    align-self: center;
    padding: 10px 20px;
    color: gray;
}

/* list */

#list {
    padding: 40px 20px;
    /* border: solid red; */
}
#list .listbox {
    padding: 0 10px;
    /* border: solid red; */
    /* width: 150px;
    height: 180px; */
    text-align: center;
}

#list .box:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 15px;
}

.listbox img,h6 {
    width: 80%;
    line-height: normal;
    border-radius: 20px;
    margin: auto;
    padding: 1px;
    color: #5c6165;
    line-height: 30px;
}

.listbox {
    display: flex;
    width: 100%;
    margin: auto;
}

.box {
    /* margin-right: 20px !important; */
    /* margin-left: 20px; */
    margin: 0px 20px;
}

.box>hr{
    margin-top: -4px;
}

/* swiper */

.swiper {
    width: 100%;
    display: flex;
}

.swiper img{
    display: block;
    width: 40%;
    margin: auto;
}

swiper-pagination img {
    width: 100%;
    margin: 15px;
    border-radius: 15px;
}

/* two */


#two {
    align-items: center;
    justify-content: space-around;
    padding: 20px 20px;
    /* border: 2px solid rgb(190, 24, 6); */
    width: 80%;
    margin: auto;
    margin-top: 50px;
    background-color: #f4f9ff;
}

#two img {
    /* border: 2px solid rgb(190, 24, 6); */
    width: 10%;
}

#twobar {
    display: flex;
    justify-content: space-around;
    border-bottom: 50px;
}

#twobar>div{
    /* border: 2px solid rgb(190, 24, 6); */
    width: 12%;
    display: flex;
    
}

#twobar div>i{
    align-self: center;
    padding: 10px 20px;
    color: gray;
}

/* two .twoslide div{
    border: 2px solid rgb(190, 24, 6);
} */

.twowrapper {
    display: flex;
    justify-content: space-around;
}

/* three  */

#threea {
    width: 80%;
    margin: auto;
    /* border: 2px solid rgb(190, 24, 6); */
    padding: 0 10px;
}

#threea .imgtag {
    /* border: 2px solid rgb(190, 24, 6); */
    cursor: pointer;
    white-space: nowrap;
    display: flex;
}

#threea .imgtag>div{
    padding: 10px;
    
}

#threea .imgtag>div:hover{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

#threea .imgtag div {
    object-fit: cover;
    width: calc(100% / 4);
    height: 70px;
    margin-left: 15px;
    border: 1px solid rgba(112, 110, 110, 0.452);
    border-radius: 10px;
    display: flex;
    /* border: 2px solid rgb(190, 24, 6); */
}

#threea .imgtag div img,p {
    margin: 10px;
    align-items: center;
    justify-content: space-around;
    /* width: 90%; */
}

#threea .imgtag img:first-child{
    margin-left: 0px;
}



/* -------------- */
#threeb {
    width: 80%;
    margin: auto;
    /* border: 2px solid rgb(190, 24, 6); */
    padding: 0 10px;
}

#threeb .imgtag {
    /* border: 2px solid rgb(190, 24, 6); */
    cursor: pointer;
    white-space: nowrap;
    width: 95%;
}

#threeb .imgtag img {
    object-fit: cover;
    width: calc(100% / 3);
    margin-left: 15px;
}


#threeb .imgtag img:first-child{
    margin-left: 0px;
}

/* four */


#four {
    width: 80%;
    margin: auto;
}

.productbox {
    display: flex;
}

#four #product{
    width: 300px;
    /* height: 400px; */
    /* border: 2px dotted rgb(190, 24, 6); */
    margin: auto;
    display: grid;
    text-align: center;
}



#four #product img{
    width: 60%;
    margin: auto;
    border: 1px solid rgba(223, 222, 222, 0.658);
    border-radius: 10px;
    padding: 20px;
    
}

#product>img:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    /* border-radius: 15px; */
}

/* adimg */

#adimg {
    width: 80%;
    margin: auto;
    margin-top: 50px;
}

#adimg div{
    display: flex;
    
}

#adimg div>img{
    width: 300px;
    margin-left: 20px;
    border-radius: 10px;
}

#adimg div>img:first-child{
    margin-left: 0px;
}

#bottomimg {
    width: 80%;
    margin: auto;
}

#bottomimg img{
    width: 100%;
    margin-top: 25px;
    margin-bottom: 25px;
}

#lasttext{
    width: 80%;
    margin: auto;
    margin-bottom: 60px;
    margin-top: 60px;
    line-height: 25px;
}

#lasttext p{
    margin-bottom: 25px;
}

/* footer */
.footer{
    padding: 10px;
    display: flex;
    background-color: rgb(238,244,255);
    justify-content: space-around;
    height: 500px;
}

.myfooter{
    background-color: rgb(238,244,255);
    width: 80%;
    margin: auto;
}

.footer > h{
    font: bold;
}

dt{
    margin-top: 20px;
    margin-bottom: 20px;
    color: #5c6165;
}

.footer h3{
    margin-top: 50px;
}

.paymentp{
    /* position: absolute; */
    bottom: 30px;
    width: 80%;
    /* background-color: rgb(238,244,255); */
    margin: auto;
    margin-bottom: -200px;
    /* margin-left: 200px;   */
}

.paymentp >img{
    width: 40px;
    height: 40px;
    padding: 10px 10px;
    margin-top: -20px;
    margin-bottom: 50px;
}