@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


html, body
{
    height: 100%;
    width: 100%;
    font-family: 'poppins', sans-serif;
    color: #222;
}

.navbar
{
    background-color: #eeeeee !important;
}

.navbar li
{
    padding-left: 10px;
    font-size: 18px;
}

.navbar-brand img 
{
    height: 70px;
}

/* For Custom color Change bg-light to bg-custom */
.bg-custom
{
    background: #607d8b  ;
}

.dropdown:hover>.dropdown-menu
{
    display: block;
}


/*  CSS */

.frontImg img
{
    width: 100%;
    height: 100%;
    padding-bottom: 5px;
   
}

.frontImg
{
    padding-top: 30px !important;
}



/* Carousel CSS */
@media (min-width: 250px) { Small devices 
    .carousel-caption h3 { font-size: 0.2;}
    .carousel-caption h2 { font-size: 0.4px;}
    .carousel-caption button {font-size: 3px;}  
  }


@media (min-width: 320px) { Small devices 
    .carousel-caption h3 { font-size: 0.6em;}
    .carousel-caption h2 { font-size: 0.8em;}
    .carousel-caption button {font-size: 7px;}  
  }


  @media (min-width: 400px) { Small devices 
    .carousel-caption h3 { font-size: 0.8em;}
    .carousel-caption h2 { font-size: 1em;}
    .carousel-caption button {font-size: 0.6em;}  
  }

  @media (min-width: 420px) { Small devices 
    .carousel-caption h3 { font-size: 1em;}
    .carousel-caption h2 { font-size: 1.2em;}
    .carousel-caption button {font-size: 0.8em;}  
  }

  @media (min-width: 490px) { Small devices 
    .carousel-caption h3 { font-size: 1.2em;}
    .carousel-caption h2 { font-size: 1.4em;}
    .carousel-caption button {font-size: 1em;}  
  }


  @media (min-width: 525px) { Small devices 
    .carousel-caption h3 { font-size: 1.3em;}
    .carousel-caption h2 { font-size: 1.5em;}
    .carousel-caption button {font-size: 1em;}  
  }

@media (min-width: 606px) { Small devices 
    .carousel-caption h3 { font-size: 1.5em;}
    .carousel-caption h2 { font-size: 1.7em;}
    .carousel-caption button {font-size: 1em;}    
  }

  @media (min-width: 660px) { Small devices 
    .carousel-caption h3 { font-size: 1.6em;}
    .carousel-caption h2 { font-size: 1.8em;}
    .carousel-caption button {font-size: 1.2em;}    
  }

  @media (min-width: 720px) {
    .carousel-caption h3 { font-size: 1.8em;}
    .carousel-caption h2 { font-size: 2em;}
    .carousel-caption button {font-size: 1.4em;}   
  }

  @media (min-width: 740px) {
    .carousel-caption h3 { font-size: 1.9em;}
    .carousel-caption h2 { font-size: 2.1em;}
    .carousel-caption button {font-size: 1.4em;}   
  }

  @media (min-width: 775px) {
    .carousel-caption h3 { font-size: 2em;}
    .carousel-caption h2 { font-size: 2.2em;}
    .carousel-caption button {font-size: 1.4em;}   
  }

  @media (min-width: 829px) {
    .carousel-caption h3 { font-size: 2.2em;}
    .carousel-caption h2 { font-size: 2.4em;}
    .carousel-caption button {font-size: 1.4em;}   
  }

  @media (min-width: 932px) { 
    .carousel-caption h3 { font-size: 2.5em;}
    .carousel-caption h2 { font-size: 2.7em;}
    .carousel-caption button {font-size: 1.4em;}   
  }
  @media (min-width: 1200px) { 
    .carousel-caption h3 { font-size: 3.5em;}
    .carousel-caption h2 { font-size: 2.8em;}
    .carousel-caption button {font-size: 1.4em;}  
  }


.carousel-inner img
{
    width: 100%;
    height: 100%;
}
.carousel-caption
{
    padding-bottom: 30px;
}

.carousel-caption h2 
{
   /*text-transform: uppercase;*/
   text-shadow: 5px 5px 15px #000;
}

.carousel-caption h3
{
   text-shadow: 3px 3px 10px #000;
}

.btn-primary:hover
{
    background-color: #9c2faf;
    border: 1px solid #9c2faf;
}

.btn-primary1:hover
{
    background-color: #cf3428;
    border: 1px solid #cf3428;
}

.mycap
{
    padding-bottom: 5px;
}

.carousel-caption h1
{
    text-shadow: 1px 1px 0px black;
    
}



/* Why a Jungle Gym is good */

.whyClass
{
    padding-bottom: 45px;
}

.imgsizerun img
{
    width: 50%;
    height: 50%;
  
    
}

.imgsizejung img
{
    width: 50%;
    height: 50%;
    padding-top: 4px;
    
}


.imgsizedoc img
{
    width: 24%;
    height: 24%;
    padding-top: 30px;
}

.imgsizedel img
{  
    width: 35%;
    height: 35%;
    padding-top: 12px;
}


/* Our Services */

.list-group-item
{
   background-color: #eeeeee;
}

.my-text
{
    font-size: 20px;
}

.myheading
{
    padding-bottom: 25px;
}


.footer
{
    background-color: #51a8f0 ;
    padding-top: 25px;
    padding-bottom: 5px;
}

.myJumbo
{
    margin: 0;
}


/* Contact Form */

.contactClass
{
    background-color: #64b5f6  ;
}



.contact-form #error
{
    padding: 0px;
    margin: 20px;
    background: #fe8b8e;
    transition: all 0.5s ease;
    text-align: center;
    border-radius: 1rem;
}



.contact-form
{
    width: 70%;
    background-color: rgb(255, 255, 255);
    border-radius: 1rem;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 20px;
}

.contact-form ::placeholder
{
  color: #424242;
}

.contImage img
{
    width: 19%;
    display:block;
    margin:auto;
    padding-bottom: 20px;
}

.contact-form h3
{
    text-align: center;
    padding-bottom: 10px;
}

.submit
{
    width: 100%;
    border-radius: 1rem;
    padding: 0.5%;
    color: #fff;
    background-color: #28B463;
    border: none;
    cursor: pointer;
}

.contact-form .form-control
{
    border-radius: 1rem;
}

.footPad
{
    padding-bottom: 30px;
}

.footerContact
{
    padding-top: 25px;
    padding-bottom: 5px;
    background-color: #e0e0e0;
}


/* All Products */

.allprod
{
    padding-bottom: 20px;
    
}

.row
{
    padding-top: 15px;
}



.purchasePrice h6
{
    margin: 0;
}
    

.allProdHeading
{
    padding-top: 30px;
    text-align: center;
}

.card-title
{
    color: #1976d2;
}

.card-img-top {
    width: 100%;
    height: 55vw;
    object-fit: cover;
}
@media (min-width: 400px) { Small devices 
    .card-img-top {
        width: 100%;
        height: 25vw;
        object-fit: cover;
    }
  }

  @media (min-width: 420px) { Small devices 
    .card-img-top {
        width: 100%;
        height: 21vw;
        object-fit: cover;
    }
  }

  @media (min-width: 490px) { Small devices 
    .card-img-top {
        width: 100%;
        height: 21vw;
        object-fit: cover;
    }
  }


  @media (min-width: 525px) { Small devices 
    .card-img-top {
        width: 100%;
        height: 55vw;;
        object-fit: cover;
    }
}

@media (min-width: 606px) { Small devices 
    .card-img-top {
        width: 100%;
        height: 55vw;
        object-fit: cover;
    }    
  }

  @media (min-width: 660px) { Small devices 
    .card-img-top {
        width: 100%;
        height: 55vw;;
        object-fit: cover;
    }    
  }

  @media (min-width: 720px) {
    .card-img-top {
        width: 100%;
        height: 55vw;;
        object-fit: cover;
    }   
  }

  @media (min-width: 740px) {
    .card-img-top {
        width: 100%;
        height: 35vw;;
        object-fit: cover;
    }  
  }

  @media (min-width: 775px) {
     .card-img-top {
      width: 100%;
        height: 30vw;;
        object-fit: cover;
    } 
  }

  @media (min-width: 829px) {
    .card-img-top {
        width: 100%;
        height: 30vw;
        object-fit: cover;
    }  
  }

  @media (min-width: 932px) { 
    .card-img-top {
        width: 100%;
        height: 30vw;
        object-fit: cover;
    } 
  }
  @media (min-width: 1200px) { 
    .card-img-top {
        width: 100%;
        height: 28vw;
        object-fit: cover;
    }  
  }

  @media (min-width: 1300px) { 
    .card-img-top {
        width: 100%;
        height: 25vw;
        object-fit: cover;
    }  
  }

  @media (min-width: 1400px) { 
    .card-img-top {
        width: 100%;
        height: 21vw;
        object-fit: cover;
    }  
  }