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


  .one-grammar-slider{
	margin-bottom: 10px;
  }
  .one-grammar-slider .carousel-item img{
    height: 300px;
    width: 100%;
  }
  .head-nav-section1{
    display:none;
  }
  .head-nav-section2{
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    margin-left:25%;
  }
  .responsive-table{
    width: 100%;
    overflow-x: auto;
  }
  .w-100{
    width:95%;
  }
  .fh{
    height:22vh;
    width:100%;
  }
  .responsive-img{
    width: 100%;
    height: auto;
  }
  .b-responsive-img{
    width: 30vw;
    height: 25vh;
  }
  .error-img{
    width: 100%;
    height: auto;
  }
  .protfolio
  {
    /*background:url('../images/blur-hospital 1.png') no-repeat center center /cover;*/
    height:100%;
  }
  .subscribe-form
  {
    width: 100%;
    height: auto;

    background: #074ef2;
    box-shadow: 0px 0px 21px 7px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
  }

  .footer-dev{
    font-size:.7rem;
  }

  .copyright{
    background:black !important;
  }
  .main-slider{
    text-align: center !important;
  }

  .banner-image{
    width: 100%;
    height: auto;
  }

  .example {
    text-align: center;
    padding: 5px;
    <!-- background: rgba(0, 0, 0, 0.6); -->
    box-shadow: inset 100px 0px 100px -50px #ffffff, 
                inset -100px 0px 100px -50px #ffffff;
                height: auto;
    width: 100%;
 }
  .appointment-form
  {
    width: 100%;
    height: auto;

    background: #FFFFFF;
    box-shadow: 0px 0px 21px 7px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
  }
  .b-font{
    font-size:2rem;
  }

  .footer-dev .foot a{
      color: #ffffff !important;
      text-decoration: none;
      background-color: transparent;
    }
    .footer-dev .foot a:hover{
      color: #270206 !important;
      text-decoration: none;
      background-color: transparent;
    }

}

@media  only screen and (min-width: 1200px) {
  .banner{
    height:220px;
  }
  .w-100{
    width: 25%;
  }
  
  .one-grammar-slider{
	margin-bottom: 10px;
  }
  .one-grammar-slider .carousel-item img{
    height: 600px;
    width: 100%;
  }
  .head-nav{
    background-color: #fdfdff;
  }
  .head-nav-clock-img{
    height: 30px;
    width:30px;
  }

  .main-slider{
    text-align: left !important;
  }
  .fh{
    height: 22vh;
  }
  .slider-right-img
    {
      height:100%;
    }
    .protfolio
    {
      /*background:url('../images/blur-hospital 1.png') no-repeat center center /cover;*/
      height:100%;
    }

    .gallery-lg{

      width: 680px;
      height: 360px;
      background: #C4C4C4;
    }
    .gallery-sm{
      width: 360px;
      height: 360px;
      background: #C4C4C4;
    }

    .subscribe-form
    {
      width: 605px;
      height: 450px;

      background: #074ef2;
      box-shadow: 0px 0px 21px 7px rgba(0, 0, 0, 0.1);
      border-radius: 20px;
    }

    .banner-image{
      width: 100%;
      height: 300px;
    }

    .example {
      text-align: center;
      padding: 5px;
      <!-- background: rgba(0, 0, 0, 0.6); -->
      box-shadow: inset 100px 0px 100px -50px #ffffff, 
                  inset -100px 0px 100px -50px #ffffff;
                  height: auto;
      width: 1140px;
      margin-left: 20%;
      margin-right: auto;
   }
   .appointment-form
    {
      width: 605px;
      height: 300px;

      background: #FFFFFF;
      box-shadow: 0px 0px 21px 7px rgba(0, 0, 0, 0.1);
      border-radius: 20px;
    }

    .error-img{
      width: 500px;
      height: 400px;
    }
    .navbarSupportedContent ul li a{
      color: #000000 !important;
      text-decoration: none;
      background-color: transparent;
    }
    .navbarSupportedContent ul li a:hover{
      color: #448ccb !important;
      text-decoration: none;
      background-color: transparent;
    }
    .footer-dev .foot a{
      color: #ffffff !important;
      text-decoration: none;
      background-color: transparent;
    }
    .footer-dev .foot a:hover{
      color: #270206 !important;
      text-decoration: none;
      background-color: transparent;
    }
}

.border-golden{
  border-bottom: 1px solid goldenrod;
}
.logo{
	float: left;
}

.pt-2{
  padding-top: 2px;
}

.onegrammar-logo{
  height: 45px;
}

.nav-bgcolor{
  background-color: #ffffff;
}

.text-red{
  color:red;
}
.text-notfound{
color:#e45890;
}
.text-purpleblue{
color:#6d66fe;
}
.nav-bg{
  background:white;
}
.slider{
	background:url('/asset/home/images/slider.png') no-repeat center center /cover;
  
}
.gradient-container{
  background: background: rgb(2,0,36); background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(7,78,242,1) 35%, rgba(0,212,255,1) 100%);;
  border-radius: 50px 50px 0px 0px;
}

.home-banner-h1-fc{
  color:#ffffff ;
}

.home-banner-h2-fc{
  color:#ffffff ;
}

.home-banner-h3-fc{
  color:#ffffff ;
}


.slider-sm-bold-text
{
	font-size:3em;
}

.slider-bold-text
{
	font-size:3.5em;
	font-weight:bold;
}

.transition { transition: all .1s ease; }

.menu-btn{
  background-color:#3AA1FF !important;
  color:white;
}
.custom-btn {
  @extend  .transition;
  position: relative;
  display: inline-block;
  margin-top: .5em;
  padding: .7em 2em;
  border: 0;
  border-radius: 30px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  font-size:1.1em;
  font-weight: bold;
}

  .custom-btn:hover {
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15);
  }
  
  .custom-btn:active {
    transform: translateY(2px);
    box-shadow: inset 0 5px 0 0 rgba(0,0,0,0.15);
  }
  
  .custom-btn:focus {
    outline: none;
  }
  
.ghost {
    background-color: rgba(255,255,255,0.6);
    border: 2px solid #3AA1FF;
    color: #3AA1FF;
  }

  .quotes{
  	background-color:#595757;
  }

  .c-box-border{
  border-right: 1px solid #448ccb;
  border-right-style: dashed;
  border-radius:20px;
}

.d-box-border{
  border-left: 1px solid #448ccb;
  border-left-style: dashed;
  border-radius:20px;
}



.protfolio-container{
	background-color: #ffffff;
  font-family: Tahoma,Geneva,sans-serif;
  color: #01000a;
  border-radius: 20px;
}


.portfolio-bold-text{
  font-size:3em;
  font-weight:bold;
}

.portfolio-left-text
{
  margin-left:120px;
  margin-top:15%;
}
.portfolio-right-img
{
  height:520px;
  margin-left:-350px;
}


.description{
  background:#ffffff;
  color: #000000;
}


.product
{
  background:url('../images/pore.png') no-repeat center center /cover;
  height:727px;
}

.product-card{
  height: 407px;
  width:277px;
   transition: transform 2s;
}
.product-card:hover{
  transform:  rotateY(360deg) rotateX(30deg);
}

.product-img-top
{
  border-radius:20px 20px 0px 0px;
}
.bg-gray
{
  background: #B6B6B6;
}

.product-text-down{
  border-radius:0px 0px 20px 20px;
}

.product-description{
  height: 86px;     
}


.btn-middle {
          transition: .5s ease;
          position: absolute;
          left: 40%;
          width: 100%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          text-align: center;

        }

.buy-btn {
           transition: all .5s ease;
            color: #fff;
            text-align: center;
            line-height: 1;
            font-size: 18px;
            background: #3AA1FF;
            padding: 4px 25px 4px 25px;
            outline: none;
            border-radius: 15px;
            font-weight:600;

        }

.buy-btn:hover {
            color: #fff;
            background:#27419E;
            text-decoration: none;
        }

.m60{
  margin-left:60px;
}

.footer{
  background: #484848;
}

.footer-h1
{
  font-weight:600;
  font-size: 1.5em;
}

.footer-h2
{
  font-weight:600;
  font-size: 1em;
}
.text-semi-light
{
  color:#B8B8B8;
}

.b-right{
  border-right:4px solid rgba(196, 196, 196, 0.4);
}

#ip2 {
    border-radius: 15px;
    border: 2px solid rgba(196, 196, 196, 0.4);
    padding: 25px;    
    width:100%;
}

#ip3 {
    border-radius: 15px;
    border: 2px solid rgba(196, 196, 196, 0.4);
    height:50px;   
    width:100%;
    padding:10px;
}

.btn-appointment
{
    background-color: #3AA1FF;
    border: 2px solid #3AA1FF;
    color: #fff;
}

.pproduct-card{
  height: 50vh;
  width:300px;
   transition: transform 2s;
}

.pproduct-card:hover{
  border:3px solid #3AA1FF;

}
/*.pproduct-card:hover{
  transform:  rotateY(360deg) rotateX(30deg);
}*/
.btn-more
{ 
    background-image: url('/asset/home/images/arrow-right.png');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #3AA1FF;
    border: 2px solid #3AA1FF;
    color: #fff;
}
.btn-more:hover
{
    background-color: #27419E;
    border: 2px solid #27419E;
    color: #fff;
}
.required {
    background-image: url('/asset/home/images/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y:center;
    padding: 0 5px 0 0;
}

.date {
    background-image: url('../images/calendar.png');
    background-repeat: no-repeat;
    background-position:95% 50%;
    padding: 0 5px 0 0;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}

.box {
  position: rerative;
}
.img-right {
    float: right;
    position: absolute;
    top: 50%;
    right: 10px;
}

.CalloutBox{
  background-color: #dbd9d9;
  font-family: Tahoma, Geneva, sans-serif;
  color: #595757;
  box-shadow: 3px 3px 3px 0px #595757;
    padding: 2% 5%;
  }

.ImageBlockCenter {
    margin: 15px 0;
    text-align: center;
}
.ImageBlock img {
    margin: 0;
}

.Caption {
    font-size: 85%;
    display: block;
}
.CaptionCenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}
.custome-h1
{
  font-weight:600;
  font-size: 3em;
}

.custome-h2
{
  font-weight:600;
  font-size: 2.5em;
}
.pt-25{
  padding-top:1.5%;
}
.clock {
    padding-right: 15px;
    color: black;
    font-size: .9rem;
    font-family: Orbitron;
    letter-spacing: 2px;
}
.user{
    font-size: 1.2rem;
    font-family: Orbitron;
    letter-spacing: 2px;
}
.br-right{
  border-right: 1px solid pink;
  border-right-style: dashed;
  border-radius:20px;
}

.br-bottom{
  border-bottom: 1px solid pink;
  border-bottom-style: dashed;
  border-radius:20px;
}

.br-top{
  border-top: 1px solid pink;
  border-top-style: dashed;
  border-radius:20px;
}

.br-left{
  border-left: 1px solid pink;
  border-left-style: dashed;
  border-radius:20px;
}


#gTopBtn {
  display: inline-block;
  background-color: #f8f9fa;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  font-size: 2rem;
  color: #000;
}

#gTopBtn:hover {
  cursor: pointer;
  background-color: #000000;
  color: #fff;
}
#gTopBtn:active {
  background-color: #555;
}
#gTopBtn.show {
  opacity: 1;
  visibility: visible;
}

.CalloutBox, html.mobile #PageWrapper .CalloutBox {
  background-color: #dbd9d9;
  font-family: Tahoma,Geneva,sans-serif;
  color: #595757;
  box-shadow: 3px 3px 3px 0 #595757;
  padding: 2% 5%;
  text-align: center;
}

.title{
  background-color: #595757;
   box-sizing: border-box;
   font-size: 32px;
   color: rgb(255, 255, 255);
}

.social-icon{
  max-width:100%;height:auto;
  text-decoration: none;
   width: 48px;
}

/* .footer-menu ul li{
  float:left;
  margin-right:20px;
  list-style: none;
} */

.form-width{
  width:90%;
}

.footer-dev{
  border-radius:20px 20px 0px 0px;
  background: #ffffff;
}

.br-radius{
  border-radius:20px 20px 0px 0px;
}

.br-circle-radius{
  border-radius: 20px;
}

.b-shadow{
  box-shadow: 0 0px 0px #fff, 
        0 -1px 15px #ccc, 
        0 0px 0px #fff, 
        0 -1px 15px #ccc;
}

.protfolio-container-shadow {
  box-shadow: 0 0px 0px #fff, 
        0 -1px 15px #ccc, 
        0 0px 0px #fff, 
        0 -1px 15px #ccc;
}

.banner-h1-5-fc{
  color: #000000;
}
.banner-h1-6-fc{
  color: #000000;
}

 .example h1{
    color: black;
    font-size:3rem;
    margin:auto;
    -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000000;
  font-weight: 600;
 }

 .page{
  font-family: Tahoma,Geneva,sans-serif;
line-height: 30px;
word-spacing: 1px;
 }

 .zoom {
  transition: transform .2s; /* Animation */
}

.zoom:hover {
  transform: scale(1.05);
  cursor: pointer; /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}



.img-round{
  border-radius:20px;

}

.pproduct-name{
  height:1.2vh;
  font-size: 1.5em;
}

.pbtn-middle {
          transition: .5s ease;
          width: 100%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          text-align: center;

        }

.product-image{
  height: 35vh;
   opacity: 1;
          display: block;
          width: 100%;
          transition: .5s ease;
          backface-visibility: hidden;
}

#all ul{
  list-style: none;
  margin:0;
  padding: 0;

}

#all ul li {
  float: left;
 margin:0;
  padding: 0;
  
}
#all ul li a{
  text-decoration: none;
  margin:0;
  padding: 0;
  
}

.text-sky
{
  color:  #3AA1FF;
}

.search-name {
  top:30%;
  position:absolute;
  left: 30%;
  font-weight: bold;
}
.hover-middle {
          transition: .5s ease;
          opacity: 0;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          text-align: center;

        }
        .pproduct-card:hover .product-image{

           -webkit-filter: brightness(50%);
        }


        .pproduct-card:hover .hover-middle {
           opacity: 1;
        }

        .details-btn {
           transition: all .5s ease;
            color: #000;
            text-align: center;
            line-height: 1;
            font-size: 18px;
            background-color : white;
            padding: 5px 25px 5px 25px !important;
            outline: none;
            border-radius: 15px;
            font-weight:600;
            border:1px solid #3AA1FF;
        }

        .details-btn:hover {
            color: #fff;
            background:#3AA1FF;
            text-decoration: none;
        }

        .mt-auto .my-auto{
          margin-top:auto !important;
        }
        .mb-auto .my-auto{
          margin-top:auto !important;
        }
        .p-top{
          padding-top:150px;
        }

        .beguni{
          background-color: #EC00FF;
           box-sizing: border-box;
           font-size: 32px;
           color: rgb(255, 255, 255);
        }
        .lblue{
          background-color: #bbf8fd;
           box-sizing: border-box;
           font-size: 32px;
           color: #000;
        }
        
        .nil{
          background-color: #005DC7;
           box-sizing: border-box;
           font-size: 32px;
           color: rgb(255, 255, 255);
        }
.bkash-img{
  border: 1px solid #e4516d;
  padding:4px;
}
.rocket-img{
  border: 1px solid #8d428f;
  padding:4px;
}
.nagad-img{
  border: 1px solid #e54925;
  padding:4px;
}
.bkash-color{
  color:#e4516d;
}

.rocket-color{
  color:#8d428f;
}

.nagad-color{
  color:#e54925;
}
.hidden{
  display: none;
}