/*   about start */


.about-main {
  width:100%;
  height:15vw;
  margin:.2rem auto;
  background:url(../img/commonbanner_back.png) repeat-x center center;
  background-size: cover;

}

.mainbanner{
  display: block;
 width:60vw;
 min-width:60vw;
 min-height:10vw;
height:100%;
 margin:0 auto;

 
}

.mainbanner img{
  width:100%;
  height:100%;

}
.main.container{
  margin:0 auto;
  padding:0;

}
.aboutphinx{
 width:100%;
 font-size:1rem;
 position:relative;
 
}

.aboutbox{
  width:100%;
  display:flex;
  flex-direction: row;
  height:auto;
 
}

.aboutbox .about-left{
  transform: translate3d(-100%, 0, 0);
  width:50%;
  font-size:1.2rem;
  padding:2rem 0 2rem 0;
  animation:slideInLeft 1s .5s forwards;
}

.aboutbox .about-left .smalltitle{
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:1.4rem;
}


.aboutbox .about-left .smalltitle:hover{
  color:rgb(229, 129, 22);

}

.about-left .micons{
  
  color:chocolate;

}

.h100{
  padding:1rem;
  margin:1rem 0;
 background-color: rgb(250, 245, 245);

}

.display-4.mb-4{
  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: normal;
  font-size:4rem;

  line-height:4.5rem;


}

.row-mb4{
 width:100%;
 height:auto;
 display:grid;
grid-gap: 10px;
grid-template-columns:repeat(2, 48%);


}
.col-md6{
  align-content: center;
}
.d-flex{
display: flex;
flex-direction: row;
 padding:.2rem 0;
 font-size:1rem;

 align-content: center;
}

.d-flex .micons{

  margin-right:1rem;
}

.content-mb-4{
  font-size:1.1rem;
  line-height:2rem;
  padding:1rem 0;
}

.fs-5{
  display:flex;
  flex-direction: row;

}
.fs-5 .micons{
  color:rgb(13, 213, 116);
  padding-right:1rem;
  vertical-align: middle;
}

.text-span{

  font-size:1rem;
  line-height:2rem;

}

.btn.btn-primary{
  margin:2rem;
  color:white;
}

.aboutbox .about-right{
  position: relative;
  transform: translate3d(100%, 0, 0);
  font-size:1.2rem;

  padding:2rem 0 2rem 0;
  animation:slideInRight 1s .5s forwards;
  width:50%;
  height:auto;
}



.aboutbox .about-right .smalltitle{
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:1.4rem;
}

.about-right .smalltitle .micons{
  color:chocolate;
}

.about-white {
 
  position: relative;
  padding:1rem;
  height:auto;

}
.about-white .aboutimg1{
  margin-top:0;
  margin-left:0;
  position:relative;
  width:80%;
  height:auto;

}
.about-white .aboutimg1 .img1{
  top:0;
  left:0;
  position: absolute;
  width:100%;

  z-index:0;
}
.about-white .aboutimg2{
  margin-top:50%;
  margin-left:20%;
  position:relative;
  width:100%;
  height:auto;

}


.about-white .aboutimg2 .img2{
  top:0;
  left:0;
  position: absolute;
  width:90%;
  height:auto;
  z-index:3;
}



.about-right .aboutimg3{
 margin-top:85%;
  position:relative;
  width:100%;
  height:300px;
  margin-left:1rem;
  background: url(../img/about-img3.png) no-repeat center center;
  background-size: cover;
 line-height:300px;

  text-align:center;
  color:white;
 font-size:1.5rem;

 font-family: "Bagel Fat One", sans-serif;
 font-weight: 400;
 font-style: normal;
 text-shadow: 1px 2px 2px rgb(74, 75, 75);
 z-index:10;
}
.about-right .aboutimg3 .anitxt{

 display:block;
}

.about-right .aboutimg3 .anitxt:hover{
  text-shadow: 1px 2px 2px rgb(226, 132, 43);
  transform: translate3d(0, 0, 0);

  animation:shake  .5s ;
}

@media  screen and  (max-width:1240px){
  
  .main.container{
    width:100%;
   }

   .aboutbox{
    padding:0 1rem;
  }
}


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

  

  .aboutphinx{
    width:100%;
    font-size:.9rem;
    position:relative
    
   }


   .aboutbox .about-left{

    font-size:1.1rem;

  }

  .aboutbox .about-left .smalltitle{

    font-size:1.3rem;
  }

  .aboutbox .about-right .smalltitle{

    font-size:1.3rem;
  }


  .display-4.mb-4{

    font-size:3.5rem;
  
    line-height:4rem;
    word-break:normal;
   
  }
.d-flex{

  font-size:.9rem;

}

  .content.mb-4{
    font-size:1rem;
    line-height:1.8rem;
    padding:1rem 0;
  }


  .text-span{

    font-size:.9rem;
    line-height:1.8rem;
  
  }


  .aboutbox .about-right{
   
    font-size:1.1rem;
  
  }

  .about-white .aboutimg1{

    width:90%;
 
  }

  .about-white .aboutimg2{
    margin-top:60%;
  }


  .about-right .aboutimg3{
    margin-top:85%;
  }


}


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


  .aboutphinx{

    font-size:.8rem; 
   }


   .aboutbox .about-left{

    font-size:1rem;

  }

  .aboutbox .about-left .smalltitle{

    font-size:1.2rem;
  }
  .aboutbox .about-right .smalltitle{

    font-size:1.2rem;
  }
  .display-4.mb-4{

    font-size:3.2rem;
  
    line-height:3.6rem;
   
  }
.d-flex{

  padding:.2rem 0;
  font-size:.8rem;

}

  .content.mb-4{
    font-size:.9rem;
    line-height:1.7rem;
    padding:1rem 0;
  }


  .text-span{

    font-size:.8rem;
    line-height:1.7rem;
  
  }
  .aboutbox .about-right{

    font-size:1rem;

  }

  .about-white .aboutimg1 {

    width:100%;
 
  }
  .about-white .aboutimg2{
    margin-top:75%;
    margin-left:10%;

  
  }
  
  .about-white .aboutimg2 .img2{
   width:100%;
  }
  
  .about-right .aboutimg3{
    margin-top:90%;
    font-size:1.2rem;
    margin-left:.5rem;
   }

}



@media  screen and  (max-width:680px){
  .aboutphinx{
  
    font-size:.8rem;
  
    
   }


   .aboutbox .about-left{

    font-size:.9rem;

  }

  .aboutbox .about-left .smalltitle{

    font-size:1.1rem;
  }

  .aboutbox .about-right .smalltitle{

    font-size:1.1rem;
  }

  .display-4.mb-4{

    font-size:2.7rem;
  
    line-height:3.1rem;
   
  }
.d-flex{

  padding:.2rem 0;
  font-size:.8rem;

}

  .content-mb-4{
    font-size:.8rem;
    line-height:1.6rem;
    padding:1rem 0;
  }

  .text-span{

    font-size:.8rem;
    line-height:1.6rem;
  
  }
  .aboutbox .about-right{
 
    font-size:.9rem;

  }

  .about-white .aboutimg2{
    margin-top:90%;
    margin-left:0;

  
  }
  
  
  .about-right .aboutimg3{
    margin-top:85%;
    font-size:1.1rem;
 
   }



}




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

  .aboutbox{
    width:100%;
    flex-direction: column;
    height:auto;
    padding:0 .5rem;
    margin:0;
  }

  .aboutbox .about-left{
    order:2;
  width:100%;
  margin:0;
  padding:0;
  font-size:.9rem;
  position: relative;
 
  }


  .aboutbox .about-right{
    position: relative;
    order:1;
    width:100%;
    margin:0;
    padding:.5rem 0;
    }

  .aboutphinx{
  
    font-size:.8rem;
  
    
   }


  .aboutbox .about-left .smalltitle{

    font-size:1.1rem;
  }

  .aboutbox .about-right .smalltitle{

    font-size:1.1rem;

  }
  .display-4.mb-4{

    font-size:2.7rem;
  
    line-height:3rem;
   
  }
.d-flex{

  padding:.2rem 0;
  font-size:.8rem;

}

  .content.mb-4{
    font-size:.8rem;
    line-height:1.6rem;
    padding:1rem 0;
  }

  .text-span{

    font-size:.8rem;
    line-height:1.6rem;
  
  }
  .aboutbox .about-right{
 
    font-size:.8rem;

  }

  
  .about-white {
    position: relative;
    min-height:150px;
    height:auto;
   padding:0;
   margin:0;
  }

  .about-white .aboutimg1{
    margin-top:10px;
    position:relative;
    min-height:150px;
    height:100%;
  }

  .about-white .aboutimg2{
    margin-top:50%;
    margin-left:0;
   
    position: relative;
    width:100%;
    height:auto;
  
  }
  

  .about-right .aboutimg3{
    margin-top:150%;
    font-size:1rem;
    margin-bottom:20px;
    margin-left:0;
    height:auto;
   }



}

/*   about end */