@media screen and (max-width: 1600px) {
.abut .lft .imgpnl .btm{
    /* margin-right: -20px; */
    margin-left: -22%;
}
.bnr .rgt .imgPnl .rgtLv{
    width: 70%;
    bottom: -7%;
}
 .bnr .rgt .imgPnl .lftLv{
    width: 70%;
    bottom: -7%;
}
}

@media screen and (max-width: 1440px) {
 .abut .rgt .ctrPnl{ max-width:100%;}
.abut .lft .imgpnl .btm{
    width: 50%;
    margin-left: -19%;
}
 .abut .lft .imgpnl .btm img{ width:100%;}
 .patns h2{
    /* margin-bottom: 250px; */
}
.patns .drPnl{
    max-width: 80%;
    padding-left: 31%;
}
 .patns .drPnl img.nrs{
    left: -5%;
}
 .patns .drPnl .dtlPnl{
    padding-left: 80px;
    padding-right: 100px;
}
 .patns .drPnl img.nrs{
    width: 55%;
}
}

@media screen and (max-width: 1400px) {
 .why:after{
    right: -22%;
    bottom: -6%;
}

.patns .lftLv{
    width: 19%;
}

  .patns .lftLv img{ width:100%;}

.patns .rgtLv{
    width: 19%;
}
 .patns .rgtLv img{
    width: 100%;
}
 
.msg .lft{ padding-left:0px;}
 
.msg .rgt .imgpnl .top{
    left: -37%;
    width: 54%;
}

 .msg .rgt .imgpnl .top img{ width:100%;}
 
.bnr .rgt{
    padding-right: 4%;
}
 .bnr .rgt span{
    width: 80%;
    margin: 0 auto;
}
.bnr .rgt .imgPnl .rgtLv{
    width: 50%;
    bottom: -7%;
    right: 2px;
}
 .bnr .rgt .imgPnl .lftLv{
    width: 50%;
    bottom: -7%;
    left: 0;
}

.bnr .mrgLft{
    padding-left: 7%;
}
 .bnr h1{
    font-size: 85px;
    margin-bottom: 50px;
}
}

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

.bnr .rgt .imgPnl{ right:initial;}
 
.bnr h1 br{ display:none}
 
.patns h2{
    margin-bottom: 150px;
}
 
 .msg .rgt .imgpnl .top{
    left: -30%;
    display: none;
}

.why:after, .abut .lft .imgpnl .btm{ display:none;}
 
 .msg .lft p{
    max-width: 80%;
}
.msg{
    padding-left: 80px;
}
 
 header nav ul li:last-child{
    margin-right: 80px;
}

}

@media screen and (max-width: 1200px) {
 .patns .bgCrl{width:100%;/* background-size: contain; */}
 .abut .lft .imgpnl b{width:100%;right: -70%;bottom: -30%;}
 .bnr .crlc{width:100%;left: 0;}
.bnr .crlc img{ width:100%;}
 .prodcts h2:before{ width:100%; height:100%;}
 ul.opn:before{
    width: 100%;
    left: -40%;
    top: -40%;
    /* background-size: cover; */
}
 .patns .drPnl .lvs{
    left: -11%;
    width: 31%;
    display: flex;
    align-items: baseline;
}
 .patns .drPnl .lvs img{ width:100%;}

 
.patns h2 b{
    font-size: 30px;
    margin-top: 30px;
}
 .patns h2{
    font-size: 100px;
    max-width: 590px;
    line-height: 50px;
}
 .patns h2 span{font-size:30px;margin-bottom: 30px;}
 
 .abut .rgt p{
    padding-left: 50px;
}
.bnr .lft{
    padding-left: 0px;
}
 .bnr h1{
    font-size: 80px;
    line-height: 90px;
}
 .abut .lft .imgpnl .btm{ display:none;}
}


@media screen and (max-width: 1160px) {
 ul.opn li h3{font-size: 38px;}
 ul.opn{
    padding-left: 30px;
    padding-right: 30px;
}
 
}

@media screen and (max-width:1100px) {
.patns .drPnl{
    max-width: 88%;
}
 
 .bnr .lft{
    padding-top: 30px;
}
.bnr .rgt{ padding-right:0px;}
}


@media screen and (max-width:1070px) {
footer {
    padding-left: 30px;
    padding-right: 30px;
}
 
header nav ul li, header nav ul li:last-child{
    margin-right: 40px;
}
 .abut .rgt{
    padding-right: 50px;
}
.abut .rgt .btn{
    right: 0;
}
}

@media screen and (max-width:1000px) {
 .bnr .lft{
    width: 100%;
    padding-left: 0px;
    padding-top: 30px;
}
   .bnr .rgt{width:100%;margin-top: 30px;} 
.bnr h1{
    margin-bottom: 30px;
}
   
.bnr .mrgLft{width:100%;padding-left: 0px;}
   .bnr p{
    line-height: 35px;
}
.bnr .rgt .imgPnl .lftLv{
    width: 350px;
    left: -5%;
    bottom: -5%;
    width: 58%;
}
.bnr .rgt .imgPnl .rgtLv{
    width: 315px;
    right: -5%;
    bottom: -5%;
    width: 53%;
}
  .patns h2 span{
    padding-left: 30px;
}
}

@media screen and (max-width:920px) {
 header nav ul li a{ font-size:16px;}
.abut .lft{ width:100%;}
   .abut .rgt{
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}
   .abut .rgt p { padding-left:30px}

.msg{
    padding: 0px 30px;
}
 
.msg .lft{
    width: 100%;
    padding-left: 0px;
}
 .msg .lft p{width:100%;max-width: 100%;}  
   .msg .rgt{
    width: 100%;
}
.msg .rgt .imgpnl .top{
    left: 0;
    transform: rotate(105deg);
    display: none;
}
 .msg .rgt .imgpnl img{
    width: 100%;
}  
 .patns .drPnl .dtlPnl .btn{
    margin-top: 30px;
    width: 100%;
}

.patns .drPnl img.nrs{
    width: 300px;
    width: 50%;
}

.patns .drPnl .dtlPnl{
    padding-right: 0px;
    width: 50%;
    padding-right: 30px;
    padding-left: 0px;
}
.patns .drPnl .dtlPnl p{ font-size:18px;}
.patns .drPnl .lvs{
    width: 150px;
    left: -20px;
    display: flex;
    align-items: initial;
}
 .patns .drPnl .lvs img{
    width: 100%;
}
 .patns .drPnl .lvs .sndLv{
    right: 0;
    margin: 0;
}
 
.patns .drPnl{
    margin-left: 30px;
    margin-right: 30px;
    height: auto;
    align-items: center;
    padding: 40px 20px;
}
}

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

header .logo{
    width: 180px;
}
 header .logo img{ width:100%;}
 
header{
    padding-left: 30px;
    padding-right: 30px;
}
    header nav ul li, header nav ul li:last-child{
    margin-right: 30px;
}
header nav ul li a{ font-size:15px;}
 

}


@media screen and (max-width: 780px) {
header .nvBtn{
    width: 120px;
}
 

   
.abut .lft .imgpnl b{right:0px;bottom: -60%;}
 


ul.opn:before{
    top: 0;
    left: 0;
}
   
ul.opn{/* display:block; */flex-wrap: wrap;align-items: center;}

ul.opn.clrSnd li{
    min-height: 400px;
}
ul.opn.clrSnd li img{/* width:100%; */width: 70%;}
 
 
ul.opn li{
    width: 46%;
    margin-bottom: 30px;
}
ul.opn li:nth-child(2){ margin-right:0px;}   


ul.opn li p br{ display:none;}

   

.why:after{ display:none;}
 .prodcts h2{
    margin-top: 80px;
    margin-bottom: 80px;
    font-size: 30px;
    line-height: 45px;
}
 .abut{
    padding: 0px 30px;
    overflow: hidden;
}
 .abut .lft .imgpnl .btm{ display:none;}
.patns .lftLv{
    width: 120px;
}
.patns .lftLv img{ width:100%;}
.patns .rgtLv{
    width: 50px;
}
.patns .rgtLv img{ width:100%;} 
.patns h2{
    font-size: 80px;
    line-height: 80px;
    width: 380px;
    margin-bottom: 100px;
}
ul.opn li h3{
    font-size: 30px;
}

 
.patns h2 span{
    font-size: 25px;
    line-height: 30px;
    margin-bottom: 20px;
    padding: 0px;
}
 .patns h2 b{font-size: 25px;line-height: 30px;margin-top: 10px;}

footer{
    padding-left: 0;
    padding-right: 0;
}
footer .rgtClm{ width:50%;} 
 
 footer .rgtClm form{width:100%;max-width: 100%;}
 ul.opn{
    padding: 0px 30px;
    margin-bottom: 40px;
}
  .abut .rgt{
    padding-left: 0px;
    padding-right: 0px;
}
}

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

@media screen and (max-width: 650px) {
footer .rgtClm h2{ margin-bottom: 15px;}
.resmn{ display:none;} 
.bnr h1{ font-size: 65px; line-height: 75px;}
.bnr p{ font-size:18PX; line-height: 26px;} 
header{ display: block; border-bottom: 1px solid #f4f4f4; padding:15px 20px; position:relative; z-index:2;}
header .logo{ display: block; /* margin: 0 auto; */ /* border-bottom: 1px solid #f4f4f4; */}
.hem.toggle span{ display:none;}
.hem.toggle:before{ transform: rotate(45deg); top: 20px;}
.hem.toggle:after{ transform: rotate(-45deg); top: 12px;}
.hem{ display: block; width: 40px; height: 38px;background: #8cd1bf;position: absolute;right: 20px; top: 30px; padding: 10px;}
.hem span{
    width: 100%;
    display: block;
    height: 2px;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    width: 70%;
    margin: auto;
    top: 0;
    bottom: 0;
}
 
.hem:before,.hem:before{ content:''; display:block; }
 .hem:after{content:'';display:block;height: 2px;background: #fff;width: 100%;position: absolute;left: 0;bottom: 10px;width: 70%;right: 0;margin: auto;transition: 0.3s ease;}
 .hem:before{content:'';display:block;width: 70%;height: 2px;background: #fff;position: absolute;left: 0;right: 0;margin: auto;top: 10px;transition: 0.3s ease;}
 
 
 
 header nav{
    width: 100%;
    border-top: 1px solid #dddddd;
    margin-top: 20px;
    padding-top: 20px;
    justify-content: center;
}


header nav { width: calc(100% - 40px); padding-top: 20px; position: absolute;
    background: #8cd1bf;
    padding-top: 0;
    right: 20px;
    display: block;
    top: calc(100% - 30px);
    margin: 0;
    border-top: none;}

header nav ul li, header nav ul li:last-child { margin-right: 30px; width: 100%; margin-right: 0px;}

header nav ul li a {
    font-size: 15px;
    text-align: left;
    padding: 15px 20px;
    border-bottom: 1px solid #f4f4f4;
}

 header .nvBtn{
    border-radius: 0px;
    width: 100%;
    text-align: left;
    padding: 15px 20px;
    background: #d1e063;
    font-size: 15px;
    display: block;
    min-width: 100%;
    max-width: 100%;
}

.patns .drPnl .dtlPnl{
    width: 54%;
}
.patns .drPnl .dtlPnl p{
    line-height: 26px;
    font-size: 16px;
}
 
footer .lftClm{ width:100%;} 
 footer .rgtClm{ width:100%;}  
 ul.opn{
    /* padding-left: 30px; */
    /* padding-right: 30px; */
}
 ul.opn li{
    /* width: 100%; */
    /* margin-right: 0px; */
    /* text-align: right; */
}
ul.opn li img{
    /* width: 50%; */
    /* width: 70%; */
}
 .abut .lft .imgpnl .top{
    width: 80%;
    top: -15%;
}
}

@media screen and (max-width: 600px) {
.patns h2{ margin-left: 0px; /* margin-top: 100px; */  padding-top: 70px; padding-left: 30px;} 
ul.opn li{ width: 100%;  margin-right: 0px; text-align: right;  min-height: 400px; padding:50px 30px;}
ul.opn li h3{margin-bottom:15px;}
ul.opn li img{ width: 85%; text-align: right; margin-right: 0px; left: initial; right: 0;}
ul.opn li:nth-child(2) img{ width: 100%; bottom: -20px;}
.patns .drPnl{ justify-content: left;}
.patns .drPnl .dtlPnl{ width: 100%;  padding: 0px;}
.patns .drPnl .dtlPnl .btn{ width: 215px;}
.patns .drPnl{ padding-bottom: 320px;}
.patns .drPnl img.nrs{width: 280px;}
.msg .rgt .imgpnl .btm { top: -50px; width: 200px;}
.prodcts h2 {  margin-top: 80px; margin-bottom: 20px; font-size: 23px; line-height: 32px;}
footer .cpyrt { padding-top: 15px;     flex-direction: column;
    padding-bottom: 15px;
    margin-top: 60px;
    flex-wrap: wrap;
    gap: 15px;}
footer .cpyrt p, footer .cpyrt a{font-size:13px;}
.msg .rgt .imgpnl .top {left: -104px; transform: rotate(16deg);  display: block; transform-origin: bottom right; bottom: -1px;}

}

@media screen and (max-width: 550px) {
.abut .lft{ padding-top: 80px;}
.abut .rgt h2, .msg .lft h2{ font-size: 35px; line-height: 45px; margin-bottom: 15px; padding-left: 0px;  width: 100%;}
.abut .rgt .ctrPnl{max-width: 100%;}
.abut .rgt .btn{ margin-top: 0px; right: 0px; position:static;}
.abut .rgt p{ padding:0px;}
.bnr{padding-bottom:100px;}
.msg .lft p{margin-top:0;}
}


@media screen and (max-width: 500px) {
 .prodcts{
    padding: 0px 30px;
}
ul.opn.clrSnd{ padding:0px;}
 
.prodcts h2{
    /* padding-left: 30px; */
    /* padding-right: 30px; */
}
 .prodcts h2 br{ display:none;}
 
.abut .lft .imgpnl .top{
    /* top: -80px; */
}
 
header nav ul li, header nav ul li:last-child{
    margin-right: 20px;
}
 
 header nav ul li a{font-size: 14px;}
 header .nvBtn{font-size:16px;width: 100px;}
 .btn{ font-size:15px;}
ul.opn.clrSnd li{
    min-height: 350px;
}

.bnr .lft{padding-top:0;}
.bnr h1 { FONT-SIZE: 60PX;  LINE-HEIGHT: 64PX; margin-bottom: 6px;}
.bnr .btn{margin-top:22px;}

}


@media screen and (max-width: 450px) {
.patns h2{ font-size: 70px; line-height: 60px; text-align: left;}
.patns h2 span{ font-size: 22px;}
.patns h2 b{font-size: 22px; text-align: left;} 
.abut .lft{ padding-top: 40px; margin-left:-30px;}
.abut .rgt h2, .msg .lft h2{ font-size: 30px; line-height: 40px;}
}

@media screen and (max-width: 400px) {
 header{ padding-left:20px; padding-right:20px;}
 header nav ul li a{
    font-size: 13px;
}
  header .nvBtn{ font-size:14px;}

ul.opn.clrSnd li{
    min-height: 320px;
}
 
}

@media screen and (max-width: 375px) {
.bnr h1{
    FONT-SIZE: 60PX;
    LINE-HEIGHT: 70PX;
}
}


@media screen and (max-width: 360px) {
  header nav ul li a{
    word-break: break-all;
    /* width: 87%; */
}
 header nav ul li, header nav ul li:last-child{ margin-right:15px;}
 header .nvBtn{
    padding: 4px 8px;
    width: 90px;
}
}