/*

----------------------------
-------Symbols-------

0. Done = ✓
1. Not Done = ✕
2. Error = ⚠
3. Effects = ⁐

-------Data Str-------

0. Main = ✓
1. Aboutus = ✓
2. single-slider = ✓
4. multipal-slider-area = ✓
5. footer = ✓
6. products = ✓
7. productsdetails = ✓

-------@mediaquerise-------

0. Aboutus = ✓
2. ourproducts = ✓
3. multipal-slider-area = ✓
4. footer = ✓

-------Color Codes-------

0. #393185 - rgb(57,49,133)
1. #fff - rgb(255,255,255)
2. #8C8C8C - rgb(140,140,140)
3. #d3d3d3 - rgb(211,211,211)
4. #333 - rgb(51,51,51)
5. #F6F6F6 - rgb(246,246,246)
6. #000000 - rgb(0,0,0)
7. #393170 - rgb(57,49,112)

-------Social Media Icon Design-------

1. facebook = ✕
2. Instagram = ✕
3. Twitter = ✕
4. Youtube = ✕
5. Telegram = ✕
6. Signal = ✕ 

----------------------------

*/


/* 0. Main */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    outline: none;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}


/* 0. Main - Selection */

a::selection {
    color: #fff;
    background-color: #393185;
}

::selection {
    color: #fff;
    background-color: #393185;
}


/* 0. Main - Scrollbar */

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(57, 49, 133, 0.6);
    border-radius: 50px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}


/* 0. Main - tags */

.h1 {
    padding: 20px;
    padding-bottom: 40px;
    color: #393185;
}

.aava {
    color: #fff;
    background-color: #393185;
    padding: 10px;
    font-weight: 500;
    border-radius: 10px;
    transition: 0.5s;
    text-decoration: none;
    text-transform: capitalize;
    cursor: pointer;
}

.aava:hover {
    background-color: #393185;
}

.links ul li {
    display: inline-block;
    font-size: 15px;
    margin: 10px;
}

.links ul li a {
    color: #F6F6F6;
    font-size: 18px;
    padding: 8px;
    transition: 0.5s;
    border-radius: 15px;
}

.links ul li a:hover {
    background-color: #393185;
}

.underlinediv78p::after {
    content: '';
    height: 2px;
    width: 78%;
    position: absolute;
    background-color: #F6F6F6;
    left: calc(50% -10%);
    bottom: 0;
    border-radius: 100%;
}
body{
    padding-top:60px;
}


/* 0. main social tags */

.socialicon ul li {
    display: inline-block;
    font-size: 15px;
    margin: 10px;
}

.socialicon ul li a i {
    color: #F6F6F6;
    font-size: 18px;
    padding: 8px;
    transition: 0.5s;
    border-radius: 15px;
}

.fa-facebook-f:hover {
    background-color: #4267B2;
}

.fa-twitter:hover {
    background-color: #1DA1F2;
}

.fa-instagram:hover {
    background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888', GradientType=1);
}


/* 1. aboutus */

.aboutus {
    color: #fff;
    background-color: #393185;
    text-transform: capitalize;
    text-align: center;
    justify-content: center;
    align-content: center;
    padding: 20px;
    display: block;
    margin-top: 1px;
    margin-bottom: 2px;
}

.aboutus h1 {
    font-weight: 100;
    font-size: 40px;
}

.aboutus h3 {
    font-weight: 100;
    padding: 20px;
}

.aboutus p {
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 20px;
    font-size: 20px;
}

.aboutus .aboutuslink {
    margin: 20px;
}

.aboutus .aboutuslink a {
    color: #fff;
    /* background-color: #333; */
    border-radius: 20px;
    padding: 10px;
    transition: 0.5s;
    font-size: 20px;
}

.aboutus .aboutuslink a:hover {
    letter-spacing: 10px;
}


/* 2. single-slider */

.single-slider-area {
    text-align: center;
    justify-content: center;
    align-items: center;
    color: #393185;
}

.single-slider-pro {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    color: #393185;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}

.single-slider-area .single-slider-pro .single-slider-product-product {
    margin: 20px;
    box-shadow: 4px 4px 40px #8c8c8c;
    height: auto;
    width: 300px;
}

.single-slider-area .single-slider-pro .single-slider-product-product .single-slider-product-product-img {
    width: 300px;
    height: 26rem;
}

.single-slider-area .single-slider-pro .single-slider-product-product .single-slider-product-product-img img {
    height: 26rem;
    width: 100%;
}

.single-slider-area .single-slider-pro .single-slider-product-product .single-slider-product-product-text {
    width: 100%;
    height: 3rem;
    padding: 20px;
    margin-bottom: 20px;
}

.single-slider-area .single-slider-pro .single-slider-product-product .single-slider-product-product-text h3 a {
    color: #393185;
}


/* multipal-slider */

.multipal-slider-area {
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: #F6F6F6;
    color: #393185;
    margin-top: 4rem;
    height: auto;
    overflow-x: hidden;
    overflow-y: hidden;
}

.multipal-slider-area .multipal-slider img {
    /*width: 200px;*/
    margin: 20px;
    height:130px;
}

.multipal-slider-area .viewall {
    margin-top: 50px;
    margin-bottom: 10px;
    height: 40px;
}


/* footer */

footer {
    /* display: block; */
    bottom: 0!important;
    text-align: center;
    background-color: #393185;
    color: #F6F6F6;
    padding: 20px;
}

footer .footerlinklogo {
    /* background-color: #333; */
    height: auto;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    overflow: hidden;
    position: relative;
    height: 4rem;
}

footer .footerlinklogo .footerlogo h1 {
    color: #F6F6F6;
    font-size: 40px;
}

.footersocialicon ul li {
    /* background-color: #333; */
    margin: 20px;
}

.footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    /* background-color: #393185; */
    color: #F6F6F6;
    padding: 20px;
    border-radius: 100%;
}

.footer .footerarea {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 25rem;
    height: 14rem;
    border-radius: 20px;
}

.footer .footerarea i {
    margin: 10px;
    margin-bottom: 30px;
}

.footer .footerarea a {
    color: #F6F6F6;
    margin: 10px;
}


/* 6. product */

.detailsproduct {
    height: 20rem;
    width: 100%;
    background-size: 100% 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
}

.catagary {
    color: #000;
    background: rgba(255, 255, 255, 0.674);
    margin: 20px;
    padding: 10px;
    margin-left: 40px;
    border-radius: 10px;
}


/* 7. productsdetails */

.productdetails1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: justify;
    margin: 40px;
}

.productdetailsimg1 img {
    width: 300px;
}

.productdetailstext1 {
    width: 600px;
    margin-left: 20px;
}

.productdetailstext1 h1 {
    color: #393185;
    margin-bottom: 20px;
    text-transform:capitalize;
}

.productdetailstext1 h4 {
    margin-bottom: 20px;
}

.productdetailstext1 p {
    margin-bottom: 20px;
}

.productdetails1 .inquirenow {
    margin-top: 40px;
}


/* 8. Carasol */

.homedivcarasoljs{
    display: flex;
    flex-wrap:wrap;
    flex-direction: row;
    list-style: none;
}
.homedivcarasoljs .homedivcarasoljsmainsection{
    width: 100vw;
    height: 600px;
    background: url(http://mannengineers.in/admin/img/Banner/Home_Full_Scap_Banner.jpg);
    background-size: 100% 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}

/* 9. signinform */

.logsigform{
    display: flex;
    /* flex-wrap: wrap; */
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* background-color: #D3D3D3; */
    height: auto;
    width: 100vw - 20px;
    overflow: hidden;
    margin: 20px;
    padding: 20px;
    border-radius: 20px;
}
.logsigforma{
    background-color: #f5f5f5;
    justify-content: center;
    align-items: center;
    margin: 10px;
    border-radius: 20px;
    width: 100vw;
    padding: 20px;
    position: revert;
}
.logsigforma h1{
    text-align: center;
}
.logsigformb{
    color: #393185;
    position: revert;
    margin-bottom: 20px;
}
.logsigformbb::after{
    content: '';
    height: 3.5px;
    width: 15%;
    position: absolute;
    background-color: #393185;
    left: 42.5%;
    bottom: -6px;
}
.logsigformba::after{
    content: '';
    height: 3.5px;
    width: 28%;
    position: absolute;
    background-color: #393185;
    left: 36.5%;
    bottom: -6px;
}
.logforma{
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 10px, -10px;
    padding: 10px;
}
.logforminputtextdivb{
    display: block;
    width: 100%;
    margin: 10px, -10px;
    padding: 8px;
    color: #000;
    /* background-color: #393185; */
    border: none;
    margin-top: 5px;
    font-size: 16px;
    transition: 1s;
    border-bottom: 2px solid #000;
}
.logforminputtextdivb:focus{
    border-bottom: 3px solid #393185;
}.logforminputtextdivb::placeholder{
    color: #000;
    letter-spacing: 1px;
}
.logforminputsubmit{
    display: block;
    width: 100%;
    margin: 10px, -10px;
    padding: 8px;
    color: #fff;
    background-color: #393185;
    border: none;
    margin-top: 5px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.5s;
}
.logforminputsubmit:hover{
    background-color: rgb(20, 18, 18);
}

/* 10. Inquary Now Div */

.category-card-single-name label{
    display: block;
    font-size: 20px;
}
.inquarynowsectin{
    width: 98%;
    height: auto;
    background-color: #393185;
    margin: 20px;
    display: none;
    padding: 20px;
    border-radius: 20px;
}
.inquarynowsectincard{
    background-color: #fff;
    color: #000;
    border-radius: 20px;
    padding: 20px;
}
.inquarynowsectdetailsinput{
    margin: 20px;
}

.categorypage-cards {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 20px;
    width: 100%;
}
.category-card-single-input-main{
    margin-top: 20px;
    height: 40px;
    width: 100%;
    position: relative;
}
.category-card-single-input-main input{
    height: 100%;
    width: 100%;
    border: none;
    font-size: 20px;
    border-bottom: 2px solid #c0c0c0;
}
.category-card-single-input-main textarea{
    height: 100%;
    width: 100%;
    border: none;
    font-size: 20px;
    border-bottom: 2px solid #c0c0c0;
}

.category-card-single-input input:focus ~ label,
.category-card-single-input textarea:focus ~ label,
.category-card-single-input input:valid ~ label{
    transform: translateY(-20px);
    font-size: 15px;
    color: #4158d0;
}
.category-card-single-input-main label{
    position: absolute;
    bottom: 10px;
    left: 0;
    color: #808080;
    pointer-events: none;
    transition: all 0.3s ease;
}
.category-card-single-input:focus ~ label{
    transform: translateY(-25px);
}
.category-card-single-input-main-underline{
    position: absolute;
    bottom: 0px;
    height: 2px;
    width: 100%;
}
.category-card-single-input-main-underline::before{
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    /* background: #393185; */
    transform: scaleX(0);
    transition: all 0.3s ease;
}
.category-card-single-input input:focus ~ .category-card-single-input-main-underline
,.category-card-single-input input:valid ~ .category-card-single-input-main-underline
,.category-card-single-input textarea:focus ~ .category-card-single-input-main-underline
,.category-card-single-input textarea:valid ~ .category-card-single-input-main-underline{
    transform: scaleX(1);
    background: #393185;
}
.category-card-single-input-main-button input,
.category-card-single-input-main-button textarea{
    /* height: 30px; */
    width: 100%;
    border-radius: 10px;
    border: none;
    font-size: 17px;
    margin-top: 20px;
}
.category-card-single-input-main-buttona{
    color: #ffffff;
    background-color: #393185;
    padding: 10px;
    font-size: 100px;
    font-weight: bolder;
    cursor: pointer;
}
.category-card-single-input-main-buttona:hover{
    background-color: #333;
}

/* 11. setting */
        
.settingadmin {
    background-color: #ede8e8;
    color: #000000;
    height: 100%;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 20px
}

.dat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000000;
}

.aboutusadminsystem h3 {
    color: #000000;
    margin: 50px;
}

/* 12. Cart Order Inquary */

.productsdetailsdatatable {
    margin-top: 20px;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.productsdetailsdatatable table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 1em;
    min-width: 100%;
}

.productsdetailsdatatable table thead th {
    background-color: #393185;
    color: #F6F6F6;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    font-size: 20px;
}

.productsdetailsdatatable table thead th,
.productsdetailsdatatable table tbody td {
    padding: 12px 15px;
    font-weight: bold;
}

.productsdetailsdatatable table tbody tr {
    border-bottom: 1px solid #F6F6F6;
    color: #000!important;
}

.productsdetailsdatatable table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.productsdetailsdatatable table tbody tr:last-of-type {
    border-bottom: 4px solid #393185;
}

.descproductsdetailsdatatable {
    text-align: justify;
    text-transform: capitalize;
}