@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
body { font-family: "Inter", sans-serif;color:#704A1C;}

/* common css */
.myBTN {background-color: #704A1C; border-radius: 10px; color: #fff!important;  padding: 10px 35px;font-size: 15px; margin: 0 2px;font-size: 18px;}
.myBTN:hover { text-decoration: none;}
.relative {position:relative;}
.no-border {border: none;}
.width100 {width: 100%;}
.overflow{overflow: hidden;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
 -webkit-appearance: none;
 margin: 0;
}
.header{font-size: 35px;color: #704A1C;font-weight: 300;}
.text-para{font-size: 16px;line-height: 30px;margin-bottom:20px; font-weight: 500;}

.apiWrap {background-image: url(../images/bg.jpg);background-repeat: no-repeat;background-size: cover;padding-top: 100px;padding-bottom: 187px;height: 100vh;}
.apiWrap .logoBG img{height: 180px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
/*.logoBG{background-image: url(../images/bannerimg.png); background-repeat: no-repeat;background-size: cover;height: 100vh; }*/

/*************** Supplier API  ************************/
.supplierapiBG{background-color: #FFFFFF;  text-align: center;padding-top: 20px;padding-bottom: 20px;height: 50vh; }
.supplierapiBG .header{font-size: 30px;}
.supplierapiBG .paratxt{text-align: center;font-size: 14px;padding: 0 40px;   margin-bottom: 30px; font-weight: 500;}
.supplierapiBG img{height: 55px; margin-bottom: 15px;}

/*************** Client API  ************************/
.clientapiBG .header{font-size: 30px;}
.clientapiBG .paratxt{text-align: center;font-size: 14px;padding: 0 40px;margin-bottom: 30px;font-weight: 500;}
.clientapiBG{background-color: #E1D8CF;  text-align: center;padding-top: 30px;padding-bottom: 40px;height: 50vh;}
.clientapiBG img{height: 55px; margin-bottom: 15px;}

/*************** SupplierAPI & ClientAPI  Page ************************/
/*.supplierTXT{background-color: #704A1C; padding-top: 50px; padding-bottom: 40px; position: relative;}*/
/*.supplierTXT .txtBG img{height: 70px;padding: 0px 23px;text-align: left;}*/
/*.supplierTXT .header, .supplierTXT .paratxt{color: #fff;}
.supplierTXT .btnview{margin-top: 30px;}
.supplierTXT a{text-decoration: none;background-color: #fff;border-radius: 30px;
font-weight: 600;color: #704a1c;padding: 10px 28px;margin: 0px 2px;font-size: 15px;}*/
/*.supplierTXT .txtwrap{position: absolute;top: 40%;padding: 0 45px;text-align: left;}*/
/*.supplierWrap::before{content: "";display: block;width: 400px;height: 15px;    background: #fff;position: absolute;transform: rotate(90deg);border-radius: 4px;
    z-index: 2;top: 48%;left: -14%;}*/
.supplierbg img{height: 100vh;width: 100%;}
/* .overflow{max-height: 130px;min-height: 130px;overflow-y: auto;} */


/**************Home-page******************/
.apiWrap .supplierWrap{background-color:#55e6a55e;padding:80px 100px;border-radius:20px;box-shadow:-2px 0 20px 17px #152c24;margin-right:18%;margin-left:8%;backdrop-filter:blur(20px);}
.apiWrap .supplierWrap .header{color:#fff;margin-bottom:30px;margin-top:20px;}
.apiWrap .supplierWrap .paratxt{color:#fff;font-style:italic;margin-bottom:30px}
.apiWrap .supplierWrap img{height:40px;}
.apiWrap .supplierWrap .myBTN{background:#fff; color:#104855!important;min-width: 150px;display: inline-block;}
.apiWrap .supplierWrap .myBTN i{margin-left:20px;}
.apiWrap .marketLOGO {position: absolute;right: -64px;top: 100px;}
.apiWrap .marketLOGO img{height: 270px;}
.apiWrap .clientWrap {padding:15px 12px}
.apiWrap .clientWrap img{height:40px;}
.apiWrap .clientWrap .header{color:#fff;margin-bottom:30px;margin-top:20px;}
.apiWrap .clientWrap .paratxt {color: #fff;padding: 5px 90px;line-height: 25px;font-style:italic;margin-bottom:30px;}
.apiWrap .clientWrap .myBTN{background:#55E6A5; color:#fff!important;}
.apiWrap .clientWrap .myBTN i{margin-left:20px;}

/**************SUPPLIER API******************/
.supplierWrapper {background-image: url(../images/supplierapi.jpg);background-repeat: no-repeat;background-size: cover;padding-top: 100px;padding-bottom: 187px;height: 100vh;}
 .supplierWrapper .header{color:#fff;}
 .supplierWrapper .paratxt{color:#fff;font-style:italic;}
.supplierWrapper .myBTN{background:#fff; color:#104855!important;min-width: 150px;display: inline-block;}
.supplierWrapper .myBTN i{margin-left:20px;}
.supplierWrapper .txtBG{padding:80px 60px;}
.supplierWrapper .marketLOGO {position: absolute;top: 70px;right: -300px;}
.supplierWrapper .marketLOGO img{height:320px;}
.supplierWrapper .txtBG img{margin-bottom:30px;}
.supplierWrapper .txtBG .header{margin-bottom:30px;}
.supplierWrapper .btnview{margin-top:30px;}

/**************CLIENT API******************/
.clientWrapper {background-image: url(../images/clientapi.jpg);background-repeat: no-repeat;background-size: cover;padding-top: 100px;padding-bottom: 187px;height: 100vh;}
 .clientWrapper .header{color:#fff;}
 .clientWrapper .paratxt{color:#fff;font-style:italic;}
.clientWrapper .myBTN{background:#fff; color:#104855!important;min-width: 150px;display: inline-block;}
.clientWrapper .myBTN i{margin-left:20px;}
.clientWrapper .txtBG{padding:80px 60px;}
.clientWrapper .marketLOGO {position: absolute;top: 70px;right: -300px;}
.clientWrapper .marketLOGO img{height:320px;}
.clientWrapper .txtBG img{margin-bottom:30px;}
.clientWrapper .txtBG .header{margin-bottom:30px;}
.clientWrapper .btnview{margin-top:30px;}

/* ---------- Media ----------  */
/* ##Device = Desktops, ##Screen = 1281px to higher resolution desktops */
@media (min-width:1281px) and (max-width:1315px){
.logoBG, .supplierapiBG, .clientapiBG{height: auto!important;}
}
/* ##Device = Laptops, Desktops, ##Screen = B/w 1025px to 1280px */
@media (min-width:1025px) and (max-width:1280px){
.logoBG, .supplierapiBG, .clientapiBG{height: auto!important;}
.apiWrap .logoBG img{height: 80px;}
.supplierWrap::before{display: none;}


}
/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w 768px to 1024px */
@media (min-width:768px) and (max-width:1024px){
.logoBG, .supplierapiBG, .clientapiBG{height: auto!important;}
.apiWrap .logoBG img{height: 80px;}
.supplierWrap::before{display: none;}

}
/* ##Device = Tablets, Ipads (landscape), ##Screen = B/w 768px to 1024px */
@media (min-width:768px) and (max-width:1024px) and (orientation:landscape){

}
/* ##Device = Low Resolution Tablets, Mobiles (Landscape), ##Screen = B/w 481px to 767px */
@media (min-width:481px) and (max-width:767px){
    .logoBG{background-size: cover;height: 25vh;}
    .apiWrap .logoBG img{height: 80px;}
    .supplierapiBG, .clientapiBG{height: auto!important;}
    .supplierbg{display: none;}
    .supplierTXT{height: 100vh;}
    .supplierWrap::before{display: none;}

    .apiWrap .supplierWrap{margin:0px; padding:10px 10px;}

}
/* ##Device = Most of the Smartphones Mobiles (Portrait), ##Screen = B/w 320px to 479px */
@media (min-width:320px) and (max-width:480px){
.supplierapiBG, .clientapiBG{height: auto!important;}
.apiWrap .logoBG img{height: 80px;}
.logoBG{background-size: cover;height: 25vh;}
.supplierapiBG .paratxt {padding: 0 20px;}
.supplierbg{display: none;}
.supplierWrap::before{display: none;}
.supplierTXT .txtwrap{top: 30%;}



    .apiWrap{padding-top:30px;padding-bottom:30px;height:auto;overflow:hidden;}
    .apiWrap .supplierWrap{margin:0px; padding:40px 10px;margin-bottom:40px;backdrop-filter:none;}
    .apiWrap .clientWrap .paratxt{padding:10px 10px;}
    .marketLOGO{display:none;}
    .apiWrap .supplierWrap .header {color: #fff;margin-bottom: 15px;margin-top: 5px;}
    .apiWrap .clientWrap .header{margin-top:10px; margin-bottom:10px;}

    .supplierWrapper {background-image: url(../images/suppmobile.jpg);background-repeat: no-repeat;        background-size: cover;padding-top: 50px;padding-bottom: 50px;}
     .supplierWrapper .txtBG{padding:30px 30px;}
    .clientWrapper {background-image: url(../images/clientmobile.jpg);background-repeat: no-repeat;        background-size: cover;padding-top: 50px;padding-bottom: 50px;}
     .clientWrapper .txtBG{padding:30px 30px;}
 }