@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

body {font-family: "Cairo", sans-serif;

float: left;

width: 100%;

color: #000;font-weight: 300;

background-attachment: fixed; background-size: 40%;

padding-right: 0 !important;

   -webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-rendering: optimizeLegibility;

}

.modal-open {

padding-right: 0!important;

overflow: hidden;

}

::-moz-selection {

color: #000;

background: #d7c07f;

}

::selection {

color: #000;

background: #d7c07f;

}

html{

    scroll-behavior: smooth;

  }

.btn{ box-shadow: none; outline: none;}

button{ box-shadow: none; outline: none;}

:focus {

outline: 0;

}

h1,

h2,

h3,

h4,

h5,

h6 {

color: #000;  

}

p {

color: #000;

line-height: 26px;

font-size: 14px; font-weight: 500;-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

a{text-decoration: none;}

a:hover{color: #0e2c18;}

ul li,

ul li a,

ol li,

ol li a {

color: #161616;

font-size: 14px; font-weight: 300;

line-height: 26px;text-decoration: none;

}

a:hover,

a:focus {

text-decoration: none;

outline: none;

}

:focus {

outline: none;

}

img{max-width:100%;height:auto;}



:root{

    --main-blue:rgba(22, 67, 124, 1);

}





.otp input{width:100%;border:none;}

.otp{border:1px solid #cdcdcd;padding:10px;}





/* header css */

.nav-link{font-size: 16px;font-weight: 500;text-transform: capitalize;padding: 0 20px !important;}

.sign-in .nav-link{color: var(--main-blue);font-weight: bold !important;}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{font-weight: bold !important;}





/* main-banner css */

.main-banner{height: 500px;background: url(../media/banner-bg.svg) bottom/cover no-repeat;}

.banner-content{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);text-align: center;}

.banner-content h1{font-size: 45px;font-weight: bold;margin-bottom: 1.5rem;}

.banner-content h1 span{color: var(--main-blue);}

.banner-content p{font-weight: 500;margin-bottom: 1.5rem;}

.form-control:focus{box-shadow: none;}

.get-started{display:flex}

.email-btn button{color: #fff;background: var(--main-blue);border: none;height: 100%;border-radius: 3rem;padding: 10px 25px;text-transform: capitalize;margin-left: -40px;position: relative;z-index: 99;}

.email-btn{flex-shrink: 0;}

.get-started input[type="email"]{border-radius: 3rem;}



/* top1 */

.top-title{font-size: 35px;font-weight: bold;margin-bottom: 1.5rem;}

.top-title span{color: var(--main-blue);}

.exp-btn{text-transform: capitalize; border: 1px solid var(--main-blue);padding: 7px 35px;background: transparent;font-size: 15px;font-weight: 500;border-radius: 3rem;color: var(--main-blue);}

.custom-container{margin-left: calc((100% - 1140px)/2);}



/* top2 */

.top2{margin: 5rem 0;padding: 3rem 0; background: url(../media/top2-bg.png) center/cover no-repeat;}

.top2 .exp-btn{margin-top: 2rem;}



/* top3 */

.top3 .top-area{text-align: center;}

.store-box{width: 100%;min-height: 490px;border: 1.5px dashed var(--main-blue);border-radius: 20px;padding:2rem 1.7rem;display: flex;flex-direction: column;justify-content: space-between;margin-top: 2.5rem;}

.s-footer h3{font-size: 16px;font-weight: 700;}

.top3{margin-bottom: 5rem;}





/* top4 */

.top-4-img{margin: 5rem 0 4rem;z-index:10;position: relative;}

.top4{margin-bottom: 0;padding-bottom: 0;}

.t-svg-1{position: absolute;top: -80px;left: 50%;transform: translateX(-50%);}

.t-svg-2{position: absolute;top: 20px;right: 0;}

.top4 .container .row [class^="col-"]{position: relative;}





/* footer */

footer{background: var(--main-blue);padding: 3rem 0 0;}

footer *{color: #fff;}

.f-logo{margin-bottom: 2rem;}

.f-links{font-weight: bold;font-size: 16px;}

.f-ul{padding: 0;list-style: none;margin-top: 2rem;}

.f-logo + p{padding-right: 5rem;}

footer p{font-weight: 300;margin: 0;}

.social,.rights{text-align: center;padding: 1rem;}





/* about banner */

.join-now button{padding: 7px 35px;margin-left: 0;}

.join-started{justify-content: center;gap: 1rem;}

.about-banner{height: 430px;}





/* bottom-abt */

.bottom-img{text-align: center;margin-bottom: -120px;}



/* regsiter page banner */

.reg-banner h1{font-size: 26px;}

.reg-banner{height: 250px;background: #fff;}

.reg-img-1{position: absolute;left:0;bottom: 0;}

.reg-img-2{position: absolute;right:0;bottom: 0;}





/* reg inputs */

.inp input, .inp textarea{width: 100%;border: none;font-size: 14px;}

.inp{border: 1.5px solid rgba(20, 72, 124, 0.4);border-radius: 8px;padding: 0.5rem;}

.inp-grp label{font-size: 15px;text-transform: capitalize;font-weight: 400;color: rgba(105, 105, 105, 1);margin-bottom: 1rem;}

.inp-grp{margin-bottom: 1rem;padding-right: 50px;}

.reg-now{justify-content: flex-start;margin-top: 1.5rem;}

.reg-form-are{padding-bottom: 2.5rem;}







/* dashboard */

.dashboard{background: #f3f3f3;}



.dashboard aside{background: #fff;padding: 20px 7px;position: fixed;width: 210px;left: 0;top: 0;height:100%;padding-right: 0;}

.dashboard aside h6{font-weight: 300;font-size: 18px;padding: 1.5rem 15px;border-top: 1px solid #cdcdcd;}

.dash-nav ul li span{display: inline-block;margin-right: 1rem;vertical-align: middle;}

.dash-nav ul{list-style: none;padding: 0;}

.active-dash{background: rgba(227, 244, 248, 1);color:#2b5785 !important}

.dash-nav ul li{padding-bottom: 1rem;}

.dash-nav ul li a{text-transform: capitalize; display: block;padding:15px 15px;font-size: 15px;font-weight: 600;transition: all 0.2s ease-in-out;color: grey;}

.dash-nav ul li a:hover{background: rgba(227, 244, 248, 1);color: #2b5785 !important;}

.dashboard aside .logo{padding-bottom: 1.5rem;text-align: center;}

.dashboard h1{font-size: 25px;font-weight: bold;}

.dash-h-area{padding: 22px;background: #fff;}

.dashboard .col-10{padding: 0 20px;}

.dash-ico-area span{display: inline-block;background: #e3f4f8;border-radius: 5px;width: 35px;height: auto;display: flex;align-items: center;justify-content: center;box-sizing: content-box;padding: 10px;}



.dash-h-area{display: flex;align-items: center;justify-content: space-between;position: sticky;top: 0;z-index:99}

.dash-ico-area{display: flex;align-items: stretch;gap: 2rem;}

.pro-ico img{width: 35px;height: 35px;border-radius: 50%;}

.my-pro-sec{display: flex;align-items: center;gap: 1rem;}

.pro-cont .nav-link{padding: 0 !important;font-weight: 350;font-size: 13px;}

.pro-cont h6{font-size: 15px;margin: 0;}

.my-pro{padding: 10px;box-sizing: content-box;border-radius: 5px;background: #e3f4f8;display:flex;height: 30px;}

.flex-item-tot{display: flex;align-items: center;justify-content: space-between;margin-bottom: 6px;}

.flex-item-tot:last-of-type{margin-bottom:0;}

.tot-box,.recent-ordr,.pro-filter-area, .add-pro-area{background: #fff;border-radius: 5px;padding: 16px;}

.tot-box h6{font-size: 16px;font-weight: 500;margin: 0;}



.tot-box .nav-link::after, .table-action .nav-link:after{display:none}

.tot-box .nav-link, .table-action .nav-link{font-weight: bold;}

.tot-c-area{margin: 20px 0;}

.tot-box h2{font-weight: bold;font-size: 25px;}

.sale-grow::before{

    content: url(../media/dashicons/growth.png);

    margin-right: 10px;

}

.sale-grow{font-size: 20px;font-weight: 600;color:rgba(6, 137, 58, 1);}

.sale-down::before{

    content: url(../media/dashicons/down.png);

    margin-right: 10px;

}

.sale-down{font-size: 20px;font-weight: 600;color:rgba(137, 6, 6, 1);}

.tot-box h5{font-size: 12px;}

.v-orde{color: #000;text-decoration: underline;font-size: 12px;font-weight: 500;}

.o-table td, .o-table th{font-size: 15px;font-weight: 500;vertical-align: middle;}

.table-img{width: 65px;margin: auto;}

.o-table{margin-bottom: 0;margin-top: 8px;}

.dash-nav{height: 75vh;overflow-y: scroll;}



/* width */

.dash-nav::-webkit-scrollbar {

    width: 3px;

    

  }

  

  /* Track */

  .dash-nav::-webkit-scrollbar-track {

    background: #f1f1f1;

  }

  

  /* Handle */

  .dash-nav::-webkit-scrollbar-thumb {

    background: #cdcdcd;

  }

  

  /* Handle on hover */

  .dash-nav::-webkit-scrollbar-thumb:hover {

    background: #555;

  }



  .recent-title h2{font-size: 18px;font-weight: bold;margin: 0;}

  .recent-title {display: flex;justify-content:space-between;align-items: center;padding-bottom: 16px;border-bottom: 1px solid #cdcd}

  .recent-title button{font-size: 14px;border: none;padding: 5px 15px;background: rgba(227, 244, 248, 1) ;border-radius: 3px;text-transform: capitalize;}

  .pro-title{font-size: 17px;font-weight: bold;}

  .pro-filter-area{display: flex;align-items: center;justify-content: space-between;border-top: 1px solid #cdcdcd;margin-bottom: 20px;border-top-left-radius: 0;border-top-right-radius: 0;}

  .add-prod{background: rgba(22, 67, 124, 1);font-size: 15px;color: #fff;padding: 5px 25px;border-radius: 5px;text-transform: capitalize;border: none;}

  .cancel-pro{border: 1px solid rgba(22, 67, 124, 1);color: rgba(22, 67, 124, 1);;background: #fff;}

  .o-table input[type="checkbox"]{width: 100%;height: 17px;accent-color: rgba(22, 67, 124, 1);}

  .o-table tbody tr:last-child td{border:none;}

.add-pro-area{margin-top: 20px;}

.add-pro-area .inp-grp{padding-right: 0;}

.p-tags{padding: 0;list-style: none;margin: 0}

.tag{background: rgba(238, 238, 238, 1);padding: 2px 10px;font-size: 13px;font-weight: 400;border-radius: 3px;display: flex;align-items: center;gap: 1rem;}



.p-tags{display: flex;gap: 1rem;min-height: 30px;flex-wrap: wrap;}

.p-tags li{flex-grow: 1;}

.tag span{flex-grow: 1;}

.close-btn{flex-grow: 0 !important;cursor: pointer;}

.add-pro-area{background: transparent;padding: 0;}

.p16{padding: 16px;}

.pml,.pmr{padding: 16px;background: #fff;border-radius: 5px}





.image-upload-one{

  grid-area: img-u-one;

  display: flex;

  justify-content: center;

  width: 100%;

 

}

.image-upload-two{

  grid-area: img-u-two;

  display: flex;

  justify-content: center;

  width: 33%;

  flex-grow: 1;

}

.image-upload-three{

  grid-area: img-u-three;

  display: flex;

  justify-content: center;

  width: 33%;

  flex-grow: 1;

}

.image-upload-four{

  grid-area: img-u-four;

  display: flex;

  justify-content: center;

  width: 33%;

  flex-grow: 1;

}

.image-upload-five{

  grid-area: img-u-five;

  display: flex;

  justify-content: center;

}

.image-upload-six{

  grid-area: img-u-six;

  display: flex;

  justify-content: center;

}



.image-upload-container{

  display: flex;

  flex-wrap: wrap;

  /* grid-template-areas: 'img-u-one img-u-two img-u-three img-u-four img-u-five img-u-six'; */

}

.center {

  display:inline;

  margin: 3px;

  width: 100%;

}



.form-input {

  width:100%;

  padding:3px;

  background:#fff;

  border:1.5px dashed #30598c;

  border-radius: 10px;

}

.form-input input {

  display:none;

}

.form-input label {

  text-align: right;

  display:block;

  width:100%;

  height: auto;

  max-height: 100%;

  background:#fff;

  border-radius:10px;

  cursor:pointer;

}



.form-input img {

  width:100%;

  height: 100%;

  margin: 2px;

  opacity: .6;

}



.imgRemove{

  position: relative;

  bottom: 0;

  left:0;

  background-color: transparent;

  border: none;

  font-size: 30px;

  outline: none;

}

.imgRemove::after{

  content: ' \21BA';

  color: #30598c;

  font-weight: 900;

  border-radius: 8px;

  cursor: pointer;

}



.small{

  color: #737373;

}



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

  .image-upload-container{

    grid-template-areas: 'img-u-one img-u-two img-u-three'

     'img-u-four img-u-five img-u-six';

  }

}

.visit-site{background: #1e4c7f;
    color: #ffffff;
    font-weight: 400;
    font-size: 17px;
    border-radius: 7px;
    text-transform: capitalize;
    padding: 0.5rem 2rem;}
.add-prod a{color: #fff !important;}
.cc-area{display: flex;gap: 1rem;margin-bottom: 1rem;}
.cc-box label{display: block;font-size: 17px;font-weight: 600;margin-bottom: 0.5rem;margin-top: 1.5rem;}
.cc-box input{width: 100%;}