/**
 * Theme Name:     Bronx Child
 * Author:         WordPressRiver
 * Template:       bronx
 * Text Domain:	   bronx-child
 * Description:    Introducing a WordPress theme tailored for Personal Portfolio WordPress Theme
 */

/* Page single projet */
 .container {
    max-width: 1130px;
    margin: auto;
    width: auto;
 }

 main {
    display: flex;
 }

 .h1-single-projet {
    font-size: 50px;
    letter-spacing: -0.8px;
    font-weight: 700;
    line-height: 50px;
    text-transform: uppercase;
    font-family: "Instrument sans", sans-serif;
 }
 
 .single-project-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
 }

 .content-left {
    width: 70%;
 }
 .content-right {
    width: 30%;
    
 }

 .card {
   width: 100% !important;
   max-width: 21rem !important;
 }
 .card-body {
   font-size: 17px !important;
 }
 .card-body > span {
   text-align: right;
 }

 .btn-card {
    width: auto;
    height: 50px;
    border-radius: 20px;
    color: white;
    font-size: 14px;  
    line-height: 16px;
    border-radius: 100px;
    padding: 12px 14px;
    font-weight: 700;
    background: #212529;
    border: 1px solid white !important;
 }
  .btn-card:hover {
   color: black;
   opacity: 0.8;
   background: white !important;
  }
  .btn-card img {
    width: 30px;
 }

 button.btn-card > span {
    display: inline-block;
 }
  .fa-globe, .fa-github {
      margin-right: 10px;
  }

 .url-card {
   display: flex;
   justify-content: space-between;
 }


 /*** RESPONSIVE DESIGN ***/
 /* `lg` applies to medium devices (tablets, less than 992px)*/
@media (min-width: 375px) and (max-width: 991px) { 
   
   /* Page Single projet */
   .single-project-header {
      display: flex;
      flex-direction: column;
   }

   .url-card {
      display: flex;
      flex-direction: column !important;
   }

   .content-right, .content-left {
      width: 100%;
   }

   .card {
      max-width: 60%;
      margin-top: 15px;
   }
   .card-header {
      border-bottom: 1px solid gray !important;
   }

   .btn-card {
      margin-bottom: 15px;
   }

   .swiper-slide img {
      morder-radius: 20px;
      min-height: 80vh;
   }

   .swiper-container {
      height: auto !important;
      background: white;
   }  
}