/* .nl:active {
  text-decoration: underline;
}
.nl:hover{
    text-decoration:underline;
} */

#nav2 {
    background-color: midnightblue;
}


.vl{
    border-left: 1px solid;
  }
  
  .rw{
    font-size: 64px;
  }
  
  .rw1{
    font-size: 22px;
    font-weight: 600;
  }
  
  input::placeholder{
    font-size: small;
  }
  
  /* .ic{
    position:absolute;
    margin-top: 14px;
    margin-left: 8rem;
  } */
  
  .caad:hover{
  transform: scale(1.1);
  transition: 0.8s;
  }
  
  .caimg{
  position:absolute;
  background-color:  #f6a90a;
  top:10px;
  left:20px;
  display:block;
  }
  
  .mybtn2{
  display: none;
  }
  .mybtn1{
    background-color:#f6a90a;
    }
  
  .ss1{
  font-size: 24px !important;
  }
  
  
  /*----------------------- card1,2,3---------------------------------- */
  .caad{
    margin: auto;
  }
  .caad:hover .mybtn1{
    width: 11rem;
    float: left;
    font-size: 12.5px !important;
    }
    
    .caad:hover .mybtn2{
    display: block;
    width: 12rem;
    background-image: linear-gradient(rgb(0, 0, 51),rgb(0, 0, 84));
    float: right;
    }
    
    .mybtn2:hover{
      background-image: none !important;
      color: black !important;
      border: 1px solid;
      }
  
      /*------------------- extra cards---------------- */
      .cad2{
        width: fit-content !important;
        height: 16rem !important;
        }
    /* ------------------------------------------- */
  
    @media (min-width:250px) and (max-width:300px){
  
      .best{
      font-size: 20px !important;
      margin-left: -10px;
      }
      .explore{
      font-size: 12px !important;
      margin-left: -10px;
      }
      .peace{
      font-size: 20px !important;
      margin-left: -10px;
      }
      .caad{
      width: 12rem !important;
  
      }
      .ss{
      font-size: 10px !important;
      }
      .caimg{
      font-size: 8px;
      }
      .mybtn1{
      font-size: 10px;
      }
      .caad:hover .mybtn1{
      width: 4.5rem;
      float: left;
      font-size: 10px;
      padding: 7px;
      }
      .caad:hover .mybtn2{
      display: block;
      width: 5rem;
      float: right;
      font-size: 7.5px;
      padding: 9.5px;
      }
  
      .cabody{
        font-size: 12px;
      }
      .ft{
        font-size: 12px !important;
      }
      
      
      } 
  /* -------------------------------------------- */
  @media (min-width:301px) and (max-width:400px){
    .ic{
    margin-left: 11rem;
    }
    .best{
    font-size: 20px !important;
    margin-left: -10px;
    }
    .explore{
    font-size: 12px !important;
    margin-left: -10px;
    }
    .peace{
    font-size: 20px !important;
    margin-left: -10px;
    }
    .caad{
    width: 14.5rem !important;
    }
    .ss{
    font-size: 10px !important;
    }
    .caimg{
    font-size: 9px;
    }
    .mybtn1{
    font-size: 11px;
    }
    .caad:hover .mybtn1{
    width: 6rem;
    float: left;
    font-size: 10px;
    padding: 7px;
    }
    .caad:hover .mybtn2{
    display: block;
    width: 6rem;
    float: right;
    font-size: 8.5px;
    padding: 9.5px;
    }
  
    .cabody{
      font-size: 14px;
    }
    .ft{
      font-size: 12px !important;
    }
    
    } 
    
  /* --------------------------------------------- */
  @media (min-width:401px) and (max-width:500px){
    .ic{
      margin-left: 14rem;
        }
    .best{
    font-size: 20px !important;
    }
    .explore{
    font-size: 12px !important;
    }
    .peace{
    font-size: 20px !important;
    }
    .caad{
    width: 20rem !important;
    }
    .ss{
    font-size: 10px !important;
    }
    .caimg{
    font-size: 10px;
    }
    .mybtn1{
    font-size: 13px;
    }
    .caad:hover .mybtn1{
    width: 8.5rem;
    float: left;
    font-size: 11px;
    padding: 7px;
    }
    .caad:hover .mybtn2{
    display: block;
    width: 8.5rem;
    float: right;
    font-size: 9.5px;
    padding: 9px;
    }
    .ft{
      font-size: 13px !important;
    }
    
    } 
  /* -------------------------------------- */
  @media (min-width:501px) and (max-width:700px){
    .ic{
      margin-left: 19rem;
        }
    .best{
    font-size: 20px !important;
    }
    .explore{
    font-size: 12px !important;
    }
    .peace{
    font-size: 20px !important;
    }
    .caad{
    width: 25rem !important;
    }
    .ss{
    font-size: 10px !important;
    }
    .caimg{
    font-size: 10px;
    }
  
    .caad:hover .mybtn1{
    width: 11rem;
    float: left;
    font-size: 14px;
    }
    .caad:hover .mybtn2{
    display: block;
    width: 11rem;
    float: right;
    font-size: 14px;
    padding: auto;
    }
    .ft{
      font-size: 13px !important;
    }
    
    } 
  
  /* ------------------------------------ */
  @media (min-width:701px) and (max-width:766px){
    .op{
      font-size:10px !important ;
    }
    .best{
    font-size: 20px !important;
    }
    .explore{
    font-size: 12px !important;
    }
    .peace{
    font-size: 20px !important;
    }
    .caad{
    width: 20rem !important;
    }
    .ss{
    font-size: 10px !important;
    }
    .caimg{
    font-size: 10px;
    }
    .mybtn1{
      font-size: 13px;
      }
  
    .caad:hover .mybtn1{
    width: 8.5rem;
    float: left;
    font-size: 12px;
    }
    .caad:hover .mybtn2{
    display: block;
    width: 8.5rem;
    float: right;
    font-size: 12px;
    padding: auto;
    }
    .ft{
      font-size: 13px !important;
    }
  
    .nl{
      font-size: medium;
    
    } 
  }
  
  /* -------------------------------------------------- */
  @media (min-width:768px) and (max-width:992px){
    .op{
      font-size:10px !important ;
    }
    .best{
    font-size: 20px !important;
    }
    .explore{
    font-size: 12px !important;
    }
    .peace{
    font-size: 20px !important;
    }
    .caad{
    width: 28rem !important;
    }
    .ss{
    font-size: 10px !important;
    }
    .caimg{
    font-size: 10px;
    }
    .mybtn1{
      font-size: 13px;
      }
  
    .caad:hover .mybtn1{
    width: 12.5rem;
    float: left;
    font-size: 12px;
    }
    .caad:hover .mybtn2{
    display: block;
    width: 12.5rem;
    float: right;
    font-size: 12px;
    padding: auto;
    }
    .ft{
      font-size: 13px !important;
    }
  
    .nl{
      font-size: medium;
    
    } 
  }
  
  /* --------------------------------------------------- */
  @media (min-width:993px) and (max-width:1475px){
    .op{
      font-size:10px !important ;
    }
    .best{
    font-size: 20px !important;
    }
    .explore{
    font-size: 12px !important;
    }
    .peace{
    font-size: 20px !important;
    }
    .caad{
    width: 18rem !important;
    }
    .ss{
    font-size: 10px !important;
    }
    .caimg{
    font-size: 10px;
    }
    .mybtn1{
      font-size: 13px;
      }
  
    .caad:hover .mybtn1{
    width: 7.5rem;
    float: left;
    font-size: 12px;
    }
    .caad:hover .mybtn2{
    display: block;
    width: 7.5rem;
    float: right;
    font-size: 12px;
    padding: auto;
    }
    .ft{
      font-size: 13px !important;
    }
  
    .nl{
      font-size: medium;
    
    } 
  }
  
  /* --------------------------------------------------- */
  @media (min-width:1025px) and (max-width:1475px){
    .op{
      font-size:10px !important ;
    }
    .best{
    font-size: 20px !important;
    }
    .explore{
    font-size: 12px !important;
    }
    .peace{
    font-size: 20px !important;
    }
    .caad{
    width: 18rem !important;
    }
    .ss{
    font-size: 10px !important;
    }
    .caimg{
    font-size: 10px;
    }
    .mybtn1{
      font-size: 13px;
      }
  
    .caad:hover .mybtn1{
    width: 7.5rem;
    float: left;
    font-size: 12px;
    }
    .caad:hover .mybtn2{
    display: block;
    width: 7.5rem;
    float: right;
    font-size: 12px;
    padding: auto;
    }
    .ft{
      font-size: 13px !important;
    }
  
    .nl{
      font-size: medium;
    
    } 
  }
  
  /*-------------------- media queries-------------- */
  
  @media (max-width:850px){
  
    #nav{
      display: none;
      }
  
      .nl{
        font-size: medium;
      }
    .vl{
      border-left: 0px !important;
    }
    
    .logo{
      width: 160px;
      height: 80px;
    }
    
    .rw{
    font-size: 28px;
    }
    .rw1{
    font-size: 15px;
    }
    
    .ca1{
    background-color: transparent !important;
    border: none;
    margin-left: 6.5% !important;
    }
    .cb1{
    width: 150%;
    }
    }
  
    /*----------------------------------------*/
  
    #preloader {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 99999;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(255, 245, 255, 0.5);
  }
  
  .boxes {
    --size: 32px;
    --duration: 800ms;
    height: calc(var(--size) * 2);
    width: calc(var(--size) * 3);
    position: relative;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    margin-top: calc(var(--size) * 1.5 * -1);
    transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
  }
  
  .boxes .box {
    width: var(--size);
    height: var(--size);
    top: 0;
    left: 0;
    position: absolute;
    transform-style: preserve-3d;
  }
  
  .boxes .box:nth-child(1) {
    transform: translate(100%, 0);
    -webkit-animation: box1 var(--duration) linear infinite;
    animation: box1 var(--duration) linear infinite;
  }
  
  .boxes .box:nth-child(2) {
    transform: translate(0, 100%);
    -webkit-animation: box2 var(--duration) linear infinite;
    animation: box2 var(--duration) linear infinite;
  }
  
  .boxes .box:nth-child(3) {
    transform: translate(100%, 100%);
    -webkit-animation: box3 var(--duration) linear infinite;
    animation: box3 var(--duration) linear infinite;
  }
  
  .boxes .box:nth-child(4) {
    transform: translate(200%, 0);
    -webkit-animation: box4 var(--duration) linear infinite;
    animation: box4 var(--duration) linear infinite;
  }
  
  .boxes .box > div {
    --background: #5C8DF6;
    --top: auto;
    --right: auto;
    --bottom: auto;
    --left: auto;
    --translateZ: calc(var(--size) / 2);
    --rotateY: 0deg;
    --rotateX: 0deg;
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--background);
    top: var(--top);
    right: var(--right);
    bottom: var(--bottom);
    left: var(--left);
    transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
  }
  
  .boxes .box > div:nth-child(1) {
    --top: 0;
    --left: 0;
  }
  
  .boxes .box > div:nth-child(2) {
    --background: #145af2;
    --right: 0;
    --rotateY: 90deg;
  }
  
  .boxes .box > div:nth-child(3) {
    --background: #447cf5;
    --rotateX: -90deg;
  }
  
  .boxes .box > div:nth-child(4) {
    --background: #DBE3F4;
    --top: 0;
    --left: 0;
    --translateZ: calc(var(--size) * 3 * -1);
  }
  
  @-webkit-keyframes box1 {
    0%, 50% {
      transform: translate(100%, 0);
    }
  
    100% {
      transform: translate(200%, 0);
    }
  }
  
  @keyframes box1 {
    0%, 50% {
      transform: translate(100%, 0);
    }
  
    100% {
      transform: translate(200%, 0);
    }
  }
  
  @-webkit-keyframes box2 {
    0% {
      transform: translate(0, 100%);
    }
  
    50% {
      transform: translate(0, 0);
    }
  
    100% {
      transform: translate(100%, 0);
    }
  }
  
  @keyframes box2 {
    0% {
      transform: translate(0, 100%);
    }
  
    50% {
      transform: translate(0, 0);
    }
  
    100% {
      transform: translate(100%, 0);
    }
  }
  
  @-webkit-keyframes box3 {
    0%, 50% {
      transform: translate(100%, 100%);
    }
  
    100% {
      transform: translate(0, 100%);
    }
  }
  
  @keyframes box3 {
    0%, 50% {
      transform: translate(100%, 100%);
    }
  
    100% {
      transform: translate(0, 100%);
    }
  }
  
  @-webkit-keyframes box4 {
    0% {
      transform: translate(200%, 0);
    }
  
    50% {
      transform: translate(200%, 100%);
    }
  
    100% {
      transform: translate(100%, 100%);
    }
  }
  
  @keyframes box4 {
    0% {
      transform: translate(200%, 0);
    }
  
    50% {
      transform: translate(200%, 100%);
    }
  
    100% {
      transform: translate(100%, 100%);
    }
  }


  /*-------------------------- propertystyle-------------------- */


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

@media (min-width:701px) and (max-width:766px) {
    .op {
        font-size: 10px !important;
    }
    .feature {
        font-size: 10px;
    }
}


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

@media (min-width:768px) and (max-width:992px) {
    .feature {
        font-size: 10px;
    }
}


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

@media (min-width:993px) and (max-width:1475px) and (orientation:landscape) {
    .op {
        font-size: 10px !important;
    }
    .caad {
        width: 18rem !important;
    }
    .feature {
        font-size: 10px;
    }
    .ss {
        font-size: 10px !important;
    }
    .caimg {
        font-size: 10px;
    }
    .mybtn1 {
        font-size: 13px;
    }
    .caad:hover .mybtn1 {
        width: 7.5rem;
        float: left;
        font-size: 12px;
    }
    .caad:hover .mybtn2 {
        display: block;
        width: 8rem;
        float: right;
        font-size: 12px;
        padding: auto;
    }
    .ft {
        font-size: 15px !important;
    }
    .nl {
        font-size: medium;
    }
}


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

@media (min-width:1025px) and (max-width:1475px) {
    .op {
        font-size: 10px !important;
    }
}


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

.offcanvas {
    z-index: 9999;
}

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

/*-------------------------- individualpropertystyle-------------------- */

.mybtn3 {
    background-image: linear-gradient(#151741, #00317e);
}

.nav-tabs .nav-link.active {
    background-color: transparent;
}



/*----------------------- cards---------------------------------- */

@media (min-width:250px) and (max-width:300px) {
    .tex1 {
        font-size: 12px !important;
    }
    .caad0 {
        margin: auto;
        width: 14rem !important;
    }
    .catext1 {
        font-size: 10px !important;
    }
    .catext2 {
        font-size: 10px !important;
        font-weight: normal !important;
    }
    #ph {
        margin-left: 140px !important;
    }
    .caad1 {
        overflow-x: auto;
        white-space: nowrap;
        font-size: 10px !important;
    }
    .caad2 {
        margin: auto;
        width: 14rem !important;
    }
    .caad2b {
        font-size: 10px !important;
    }
    .caad {
        margin: auto;
        width: 14rem !important;
    }
    .similarproject {
        font-size: 25px !important;
    }
    .options {
        font-size: 15px !important;
    }
    
    .sqft {
        font-size: 10px !important;
    }
    .send {
        font-size: 10px !important;
    }
   
}


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

@media (min-width:301px) and (max-width:400px) {
    .tex1 {
        font-size: 12px !important;
    }
    .caad0 {
        margin: auto;
        width: 16rem !important;
    }
    .catext1 {
        font-size: 10px !important;
    }
    .catext2 {
        font-size: 10px !important;
        font-weight: normal !important;
    }
    #ph {
        margin-left: 170px !important;
    }
    .caad1 {
        overflow-x: auto;
        white-space: nowrap;
        font-size: 12px !important;
    }
    .caad2 {
        margin: auto;
        width: 16.5rem !important;
    }
    .caad2b {
        font-size: 10px !important;
    }
    .caad {
        margin: auto;
        width: 16rem !important;
    }
    .similarproject {
        font-size: 25px !important;
    }
    .options {
        font-size: 15px !important;
    }
    
    .sqft {
        font-size: 10px !important;
    }
    .send {
        font-size: 10px !important;
    }
    
}


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

@media (min-width:401px) and (max-width:500px) {
    .tex1 {
        font-size: 12px !important;
        margin-left: 10%;
    }
    .caad0 {
        margin: auto;
        width: 23rem !important;
    }
    .catext1 {
        font-size: 10px !important;
    }
    .catext2 {
        font-size: 10px !important;
        font-weight: normal !important;
    }
    #ph {
        margin-left: 270px !important;
    }
    .caad1 {
        overflow-x: auto;
        white-space: nowrap;
        font-size: 13px !important;
    }
    .caad2 {
        margin: auto;
        width: 23rem !important;
    }
    .caad2b {
        font-size: 12px !important;
    }
    
    .similarproject {
        font-size: 25px !important;
    }
    .options {
        font-size: 15px !important;
    }
   
    .sqft {
        font-size: 10px !important;
    }
    .send {
        font-size: 10px !important;
    }
    
}


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

@media (min-width:501px) and (max-width:700px) {
    .tex1 {
        font-size: 14px !important;
        margin-left: 10%;
    }
    .caad0 {
        margin: auto;
        width: 28rem !important;
    }
    .catext1 {
        font-size: 14px !important;
    }
    .catext2 {
        font-size: 12px !important;
        font-weight: normal !important;
    }
    #ph {
        margin-left: 370px !important;
    }
    .caad1 {
        overflow-x: auto;
        white-space: nowrap;
        font-size: 13px !important;
    }
    .caad2 {
        margin: auto;
        width: 28rem !important;
    }
    .caad2b {
        font-size: 14px !important;
    }
   
    .similarproject {
        font-size: 28px !important;
    }
    .options {
        font-size: 17px !important;
    }
    
    .sqft {
        font-size: 10px !important;
    }
    .send {
        font-size: 10px !important;
    }
    
}


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

@media (min-width:701px) and (max-width:990px) {
    .tex1 {
        font-size: 16px !important;
        margin-left: 10%;
    }
    .caad0 {
        margin: auto;
        width: 38rem !important;
    }
    .catext1 {
        font-size: 14px !important;
    }
    .catext2 {
        font-size: 12px !important;
        font-weight: normal !important;
    }
    #ph {
        margin-left: 550px !important;
    }
    .caad1 {
        overflow-x: auto;
        white-space: nowrap;
        font-size: 13px !important;
    }
    .caad2 {
        margin: auto;
        width: 38rem !important;
    }
    .caad2b {
        font-size: 14px !important;
    }
    
    .similarproject {
        font-size: 28px !important;
    }
    .options {
        font-size: 17px !important;
    }
    
    .sqft {
        font-size: 10px !important;
    }
    .send {
        font-size: 10px !important;
    }
    
    .fm {
        width: 38rem;
        margin: auto;
    }
    .fmbtn {
        width: 38rem;
        margin: auto;
    }
}


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

@media (min-width:991px) and (max-width:1024px) {
    .tex1 {
        font-size: 16px !important;
        margin-left: 10%;
    }
    .caad0 {
        margin: auto;
        width: 38rem !important;
    }
    .catext1 {
        font-size: 14px !important;
    }
    .catext2 {
        font-size: 12px !important;
        font-weight: normal !important;
    }
    #ph {
        margin-left: 550px !important;
    }
    .caad1 {
        overflow-x: auto;
        white-space: nowrap;
        font-size: 13px !important;
    }
    .caad2 {
        margin: auto;
        width: 38rem !important;
    }
    .caad2b {
        font-size: 14px !important;
    }
 
    .similarproject {
        font-size: 28px !important;
    }
    .options {
        font-size: 17px !important;
    }
    
    .sqft {
        font-size: 10px !important;
    }
    .send {
        font-size: 10px !important;
    }
    
}


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

@media (min-width:1025px) and (max-width:1475px) {
    .tex1 {
        font-size: 16px !important;
        margin-left: 10%;
    }
    .caad0 {
        margin: auto;
        width: 38rem !important;
    }
    .catext1 {
        font-size: 14px !important;
    }
    .catext2 {
        font-size: 12px !important;
        font-weight: normal !important;
    }
    #ph {
        margin-left: 550px !important;
    }
    .caad1 {
        overflow-x: auto;
        white-space: nowrap;
        font-size: 13px !important;
    }
    .caad2 {
        margin: auto;
        width: 38rem !important;
    }
    .caad2b {
        font-size: 14px !important;
    }

    .similarproject {
        font-size: 28px !important;
    }
    .options {
        font-size: 17px !important;
    }
    
    .sqft {
        font-size: 10px !important;
    }
    .send {
        font-size: 10px !important;
    }
    
}


/*-----------------------common------------------------------- */



@media(max-width:702px) {
     ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
        border-radius: 10px;
        background-color: #CCCCCC;
    }
     ::-webkit-scrollbar {
        height: 4px;
        background-color: #F5F5F5;
    }
     ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #050505;
    }
}


/* ---------------------maps style ------------------------------- */

.map-container {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.map-container iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.map {
    height: 100vh;
    filter: grayscale(100%) invert(100%) contrast(93%);
}


/*--------------------------------- contactusstyle-------------------- */
@media(min-width:250px) and (max-width:600px) {
    .contact {
        font-size: 20px !important;
    }
    .giveus {
        font-size: 15px !important;
    }
    .getin {
        font-size: 20px !important;
    }
    .fmbtn {
        font-size: 10px !important;
    }
    .question {
        font-size: 20px !important;
    }
    .corporate {
        font-size: 14px !important;
    }
    .address {
        font-size: 13px !important;
    }
    .phem {
        font-size: 10px !important;
    }
}

/*------------------------------- thankyoustyle----------------------- */
@media(min-width:250px)and (max-width:600px) {
    .checkmark {
        width: 12rem !important;
        height: 12rem !important;
        border-radius: 50%;
        display: block;
        stroke-width: 1;
        stroke: #6fff00;
        stroke-miterlimit: 10;
        margin: auto;
        box-shadow: inset 0px 0px 0px #6fff00;
        animation: ease-in-out 0.4s forwards, scale 1.3s ease-in-out 0.9s both;
    }
    .thank {
        font-size: 30px !important;
    }
    .enq {
        font-size: 15px !important;
    }
}

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

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 1;
    stroke-miterlimit: 10;
    stroke: #6fff00;
    fill: none;
    animation: stroke 0.8s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    display: block;
    stroke-width: 1;
    stroke: #6fff00;
    stroke-miterlimit: 10;
    margin: auto;
    box-shadow: inset 0px 0px 0px #6fff00;
    animation: ease-in-out 0.4s forwards, scale 1.3s ease-in-out 0.9s both;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 1.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%,
    100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}
/*----------------------------------------*/
/* Modal on load  */
.modalzoomin{
  animation: zoomeffect 1.5s forwards;
}

@keyframes zoomeffect {
  0%{
    transform: scale(0.1);
    opacity: 0;
  }

  60%{
    transform: scale(1.05);
    opacity: 0.5;
  }

  100%{
    transform: scale(1.0);
    opacity: 1.0;
  }
  
}
@media (min-width:250px) and (max-width:700px){
      .reduced{
        font-size: 7px !important;
      }
    }
    
    @media (min-width:701px) and (max-width:1200px){
      .reduced{
        font-size: 10px !important;
      }
    }