
.About_Us
{
    position: relative;
    background-image: url(img//about-us.jpg);
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: -1!important;
   /* overflow: hidden!important;*/
  
   
    font-family: 'poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
   
  
    
}
.warpper1{display: none;}

.About_Us .boxes h1
{
    position: absolute;
    color: rgb(255, 255, 255);
    top: 110px;
    text-align: centers;
}
.boxes
{
    position: relative;
    background-color: rgb(0, 0, 0);
    opacity: .8;
    width: 100%;
    height: 80%;
    z-index: 1!important;
    margin-top: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    top:0;
    overflow: hidden!important;
}

.wavyContainer
{
    position: absolute;
   
    justify-items: center;
    align-items: center;
    top: 60%;
    left: 20%;
    transform: translate(-50%, -50%);

    height: 60%;
    width: 18%;

}
.wavyContainer .box
{
    position: relative;
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-reflect: below 15px linear-gradient(transparent,transparent,rgba(0,0,0,.2));

}
.wavyContainer .box:hover
{
    color: #000;
    cursor: pointer;
        
}

.wavyContainer .box:before
{
content: '';
position: absolute;
top:0;
left: 0;
width: 100%;
height: 98%;
border: 4px solid #fff;
background: #000;
/*filter: url(#wavy);*/
-webkit-box-reflect: below 15px linear-gradient(transparent,transparent,rgba(0,0,0,.3));
}


.wavyContainer .box:hover:before
{
    background: #fff;
   
   /* filter: url(#wavy);*/

    
}

.wavyContainer .box .conty{
    position: absolute;
    padding: 5px;
    text-align: center;
    top:10px;
    
}




.wavyContainer .box:after
{
content: '';
position: absolute;
top:0;
left: 0;
width: 50%;
height: 98%;
border: 4px solid #fff;
border-right: none;
background: rgba(225, 225, 225, .1);
/*filter: url(#wavy);*/

}
.wavyContainer .box:hover:after
{
    border-left: none;
    border: none;
    background: none;

}

/*------------------------------------------------------------*/



.wavyContainer2
{
    position: absolute;
    justify-items: center;
    align-items: center;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 60%;
    width: 18%;
    
}
.wavyContainer2 .box2
{
    position: relative;
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-reflect: below 15px linear-gradient(transparent,transparent,rgba(0,0,0,.2));
  
}
.wavyContainer2 .box2:hover
{
    color: #000;
    cursor: pointer;
}

.wavyContainer2 .box2:before
{
content: '';
position: absolute;
top:0;
left: 0;
width: 98%;
height: 98%;
border: 4px solid #fff;
background: #000;
/*filter: url(#wavy2);*/
-webkit-box-reflect: below 15px linear-gradient(transparent,transparent,rgba(0,0,0,.3));
}
.wavyContainer2 .box2:hover:before
{
    background: #fff;
    /*filter: url(#wavy2);*/
}

.wavyContainer2 .box2 .conty2{
    position: absolute;
    padding: 5px;
    text-align: center;
    top:10px;
   
}




.wavyContainer2 .box2:after
{
content: '';
position: absolute;
top:0;
left: 0;
width: 50%;
height: 98%;
border: 4px solid #fff;
border-right: none;
background: rgba(225, 225, 225, .1);
/*filter: url(#wavy2);*/
}
.wavyContainer2 .box2:hover:after
{
    border-left: none;
    border: none;
    background: none;

}

/*------------------------------------------------------------*/



.wavyContainer3
{
    position: absolute;
   
    justify-items: center;
    align-items: center;
    top: 60%;
    left: 75%;
    transform: translate(-50%, -50%);

    height: 60%;
    width: 18%;
    
}
.wavyContainer3 .box3
{
    position: relative;
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-reflect: below 15px linear-gradient(transparent,transparent,rgba(0,0,0,.2));
    margin: auto auto auto 50px;
}
.wavyContainer3 .box3:hover
{
    color: #000;
    cursor: pointer;
}

.wavyContainer3 .box3:before
{
content: '';
position: absolute;
top:0;
left: 0;
width: 98%;
height: 98%;
border: 4px solid #fff;
background: #000;
/*filter: url(#wavy3);*/
-webkit-box-reflect: below 15px linear-gradient(transparent,transparent,rgba(0,0,0,.3));
}
.wavyContainer3 .box3:hover:before
{
    background: #fff;
    /*filter: url(#wavy3);*/
}

.wavyContainer3 .box3 .conty3{
    position: absolute;
    padding: 5px;
    text-align: center;
    top:10px;
}

.wavyContainer3 .box3 .conty3 p{
    
    text-align: left;    
   
 }


.wavyContainer3 .box3:after
{
content: '';
position: absolute;
top:0;
left: 0;
width: 50%;
height: 98%;
border: 4px solid #fff;
border-right: none;
background: rgba(225, 225, 225, .1);
/*filter: url(#wavy3);*/
}
.wavyContainer3 .box3:hover:after
{
    border-left: none;
    border: none;
    background: none;

}
.tth{
    font-weight:1000;
}
.pph{
    font-size:1.9vh;
    padding-top:10px;
    padding-left:5px;
    padding-right:5px;
}

@media only screen and (max-width: 1265px) {
    .wavyContainer .box .conty p{
        font-size: 12px;
         
     }
    }

@media (max-device-width: 1100px){
    .wavyContainer2 p{font-size: 12px;}
    .wavyContainer2 h2{font-size: 14px;font-weight: bold;}
    .wavyContainer p{font-size: 12px;}
    .wavyContainer h2{font-size: 14px;font-weight: bold;}
    .wavyContainer3 p{font-size: 12px;}
    .wavyContainer3 h2{font-size: 14px;font-weight: bold;}
    .wavyContainer{width: 20%;}
    .wavyContainer2{width: 20%;}
    .wavyContainer3{width: 20%;}
	
}
@media (max-device-width: 900px){
    .wavyContainer{width: 22%;}
    .wavyContainer2{width: 22%;}
    .wavyContainer3{width: 22%;}
}

@media (max-device-width: 790px){
    .wavyContainer .box .conty p{font-size: 11px;}
}



@media (max-device-width: 750px){
    
    .wavyContainer{width: 24%;}
    .wavyContainer2{width: 24%;}
    .wavyContainer3{width: 24%;}
}


/*----------------------------------------------*/

    #three-panel p{
        text-align: left;
    }
    .warpper1{
        flex-direction: column;
        align-items: center;
      }
      .tab{
        cursor: pointer;
        padding:10px 20px;
        margin:0px 2px;
        background:#000;
        display:inline-block;
        color:#fff;
        border-radius:3px 3px 0px 0px;
        box-shadow: 0 0.5rem 0.8rem #00000080;
        font-size: 15px;
      }
      .panels{
        background:#fffffff6;
        box-shadow: 0 2rem 2rem #00000080;
        min-height:70vh;
        width:100%;
        max-width:600px;
        border-radius:3px;
        overflow:hidden;
        padding:5px;  
        font-size: 20px;
      }
      .panel{
        display:none;
        animation: fadein .8s;
      }
      @keyframes fadein {
          from {
              opacity:0;
          }
          to {
              opacity:1;
          }
      }
      .panel-title{
        font-size:10vw;
        font-weight:bold
      }
      .panelp{
          font-size:5vw;
      }
      .radio{
        display:none;
      }
      #one:checked ~ .panels #one-panel,
      #two:checked ~ .panels #two-panel,
      #three:checked ~ .panels #three-panel{
        display:block
      }
      #one:checked ~ .tabs #one-tab,
      #two:checked ~ .tabs #two-tab,
      #three:checked ~ .tabs #three-tab{
        background:#fffffff6;
        color:#000;
        border-top: 3px solid #000;
      }

      @media (max-device-width: 682px){
        .About_Us .boxes h1{top: 4%;}
      }

      @media (max-device-width: 800px){
    
        .wavyContainer{display: none;}
        .wavyContainer2{display: none;}
        .wavyContainer3{display: none;}
        #ABOUTUS{display: none;}
        .warpper1{display: block;}
    }
    
    @media (max-device-width: 700px){
        
        .panels{
            background:#fffffff6;
            box-shadow: 0 2rem 2rem #00000080;
            min-height:70vh;
            max-width:600px;
            border-radius:3px;
            overflow:hidden;
            padding:5px;  
            font-size: 10px;
          }
    }

    @media (max-device-width: 620px){
        
        .panels{
            background:#fffffff6;
            box-shadow: 0 2rem 2rem #00000080;
            min-height:70vh;
           
            max-width:500px;
            border-radius:3px;
            overflow:hidden;
            padding:5px;  
            font-size: 10px;
          }
    }
    @media (max-device-width: 520px){
        
        .panels{
            background:#fffffff6;
            box-shadow: 0 2rem 2rem #00000080;
            min-height:70vh;
           
            max-width:400px;
            border-radius:3px;
            overflow:hidden;
            padding:5px;  
            font-size: 10px;
          }
    }
    @media (max-device-width: 420px){
        
        .panels{
            background:#fffffff6;
            box-shadow: 0 2rem 2rem #00000080;
            min-height:70vh;
           
            max-width:300px;
            border-radius:3px;
            overflow:hidden;
            padding:5px;  
            font-size: 10px;
          }

          .tab{
            padding:5px;
            font-size: 12px;
          }
    }
    @media (max-device-width: 300px){

        .panels{
            background:#fffffff6;
            box-shadow: 0 2rem 2rem #00000080;
            min-height:70vh;
            max-width:240px;
            border-radius:3px;
            overflow:hidden;
            padding:5px;  
            font-size: 9px;
            }

            .tab{
            padding:5px 5px;
            font-size: 10px;
            }
        }
    @media (max-device-width: 280px){

        .panels{
            background:#fffffff6;
            box-shadow: 0 2rem 2rem #00000080;
            min-height:70vh;
            max-width:210px;
            border-radius:3px;
            overflow:hidden;
            padding:5px;  
            font-size: 8px;
            }

            .tab{
            padding:5px 5px;
            font-size: 9px;
            }
        }


 

    