:root {
   --header-height: ;

   /*========== Colors ==========*/
   /* Change favorite color */
   --hue-color: ; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/

   /* HSL color mode */
   --first-color: ;
   --first-color-second: ;
   --first-color-alt: ;
   --first-color-lighter: ;
   --title-color: ;
   --text-color: ;
   --text-color-light: ;
   --input-color: ;
   --body-color: ;
   --container-color: ;

   /*========== Font and typography ==========*/
   --body-font: ;

   /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
   --big-font-size: ;
   --h1-font-size: ;
   --h2-font-size: ;
   --h3-font-size: ;
   --normal-font-size: ;
   --small-font-size: ;
   --smaller-font-size: ;

   /*========== Font weight ==========*/
   --font-medium: ;
   --font-semi-bold: ;

   /*========== Margenes Bottom ==========*/
   /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
   --mb-0-25: ;
   --mb-0-5: ;
   --mb-0-75: ;
   --mb-1: ;
   --mb-1-5: ;
   --mb-2: ;
   --mb-2-5: ;
   --mb-3: ;

   /*========== z index ==========*/
   --z-tooltip: ;
   --z-fixed: ;
   --z-modal: ;
}

/* Font size for large devices */
@media screen and (min-width: 968px) {
   :root {
       --big-font-size: ;
       --h1-font-size: ;
       --h2-font-size: ;
       --h3-font-size: ;
       --normal-font-size: ;
       --small-font-size: ;
       --smaller-font-size: ;
   }
}

*{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat';
}
.header{
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.7));
    background-position: center;
    background-size: cover;
    position: relative;
}
nav{
   display: flex;
   padding: 2% 6%;
   justify-content: space-between;
   align-items: center;
   font-size: 30px;
}
nav img{
   width: 70px;
}
.top{
    display: flex;
    justify-content: space-between;
    list-style: none;
    text-decoration: none;
    display: inline-block;
}
.nav-links{
   display: flex;
   flex: 1;
   text-align: justify;
   justify-content: space-between;
}
.nav-links li{
   list-style: none;
   display: inline-block;
   padding: 8px 12px;
}
.nav-links li a{
   color: rgb(0, 0, 0);
   text-decoration: none;
   font-size: 30px;
}
.image{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    width: 25%;
    z-index: 1;
    animation: bouncing 1.5s ease 0s infinite alternate both;
}

@keyframes bouncing {
   0%{
      bottom: 5px;
   }
   100%{
      bottom: 60px;
   }
}

.footer{
   position: fixed!important;;
   bottom:0!important;
   width: 93%!important;
   margin-left: 3%;
   margin-right: 3%;
   height: 11vh!important;
}
.left_f{
   position:absolute;
   top:0;
   bottom:0;
   right: 0;
   margin:auto;
   width: 48%;
   z-index: 1;
}

.container {
   position :fixed;
   width : 800px;
   display : flex;
   align-items : center;
   justify-content : right;
   padding : 30px;
   margin: 50px;
 }
 
 .container .card {
   position: relative;
   max-width : 400px;
   height : 250px;  
   background-color : #fff;
   margin : 20px 20px;
   padding : 20px 20px;
   
   display : flex;
   flex-direction : column;
   box-shadow : 0 5px 20px rgba(0,0,0,0.5);
   transition : 0.3s ease-in-out;
   border-radius : 15px;
 }
 .container .card:hover {
   height : 400px;    
 }
 
 
 .container .card .image {
   position : relative;
   width : 260px;
   height : 260px;
   border-radius : 15px;
   
   top : -40%;
   left: 8px;
   box-shadow : 0 5px 20px rgba(0,0,0,0.2);
   z-index : 1;
 }
 
 .container .card .image img {
   max-width : 100%;
   border-radius : 15px;
 }
 
 .container .card .content {
   position : relative;
   top : -140px;
   padding : 10px 15px;
   color : #111;
   text-align : center;
   
   visibility : hidden;
   opacity : 0;
   transition : 0.3s ease-in-out;
     
 }
 
 .container .card:hover .content {
    margin-top : 30px;
    visibility : visible;
    opacity : 1;
    transition-delay: 0.2s;
   
 }
 .body{
      display : flex;  
      background-color: #ffffff;
      min-height : 800px;
   }
 

.img_design {
      width: 30%;
      height: 100%;
      object-fit:cover;
      -webkit-box-reflect:below 2px linear-gradient(transparent, transparent, #0004);
      transform-origin:center;
      transform:perspective(800px) rotateY(25deg);
      transition:0.5s;
    }
.container_design {
      max-width:600px;
      max-height:400px;
      display:flex;
      justify-content:center;
      align-items:center;
      gap:20px;
      margin-left: 200px;
      margin-top: 50px;
    }
.container_design:hover img {
      opacity:0.3;
    }
.container_design img:hover {
      transform:perspective(800px)       rotateY(0deg);
      opacity:1;
    }

    
    .owl-prev,
    .owl-next {
      position: absolute;
      top: 35%;
      transform: translate(-50%, -50%);
    }
    
    .owl-prev {
      left: -50px;
    }
    
    .owl-next {
      right: -50px;
    }
    
    .fa-chevron-left,
    .fa-chevron-right {
      font-size: 40px;
      color: rgb(0, 0, 0);
      transition: all 0.2s;
    }
    
    .fa-chevron-left:hover,
    .fa-chevron-right:hover {
      color: #777;
    }
    .heading{
      margin:auto;
      position:relative;
      text-align: center;
   }
   .space{
      margin-bottom: 30px;
   }
   .space2{
      margin: 20px;
   }
   .space3{
      margin-top: 10px;
   }


   @media screen and (max-width: 700px){
      .header{
         min-height: 100vh;
         width: 100%;
         background-image: linear-gradient(rgba(255, 255, 255, 0.7));
         background-position: center;
         background-size: cover;
         position: relative;
     }
     nav{
        display: flex;
        padding: 2% 6%;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
     }
     nav img{
        width: 40px;
     }
     .top{
         display: flex;
         justify-content: space-between;
         list-style: none;
         text-decoration: none;
         display: inline-block;
     }
     .nav-links{
        display: flex;
        flex: 1;
        text-align: justify;
        justify-content: space-between;
     }
     .nav-links li{
        list-style: none;
        display: inline-block;
        padding: 8px 12px;
     }
     .nav-links li a{
        color: rgb(0, 0, 0);
        text-decoration: none;
        font-size: 15px;
     }
     .image{
         position:absolute;
         top:0;
         left:0;
         right:0;
         bottom:0;
         margin:auto;
         width: 50%;
         z-index: 1;
         animation: bouncing 1.5s ease 0s infinite alternate both;
     }
     
     @keyframes bouncing {
        0%{
           bottom: 5px;
        }
        100%{
           bottom: 60px;
        }
     }
     
     .footer{
        position: fixed!important;;
        bottom:0!important;
        width: 93%!important;
        margin-left: 3%;
        margin-right: 3%;
        height: 11vh!important;
     }
   .left_f{
      position:absolute;
      top:0;
      bottom:0;
      right: 0;
      margin:auto;
      width: 0%;
      z-index: 1;
   }
   .container_design {
      max-width:200px;
      max-height:300px;
      display:flex;
      justify-content:center;
      align-items:center;
      gap:20px;
      margin: 130px;
      margin-top: 50px;
    }
    .owl-prev,
    .owl-next {
      position: absolute;
      top: 35%;
      transform: translate(-30%, -30%);
    }
    
    .owl-prev {
      left: -30px;
    }
    
    .owl-next {
      right: -40px;
    }
    .img_design {
      width: 40%;
      height: 100%;
      object-fit:cover;
      -webkit-box-reflect:below 2px linear-gradient(transparent, transparent, #0004);
      transform-origin:center;
      transform:perspective(800px) rotateY(25deg);
      transition:0.5s;
    }
    .heading{
      margin:auto;
      position:relative;
      text-align: center;
   }
   .space{
      margin: 30px;
      font-size: 30px;
   }
   .space2{
      margin: 20px;
      font-size: 20px;
   }
   .space3{
      margin: 10px;
      font-size: 15px;
   }
   .space4{
      margin: 10px;
      font-size: 10px;
   }
   }

   /* The Modal (background) */
.modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   padding-top: 80px; /* Location of the box */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }
 
 /* Modal Content */
 .modal-content {
   background-color: #fefefe;
   margin-left: auto;
   padding: 20px;
   border: 2px solid #888;
   width: 80%;
 }
 
 /* The Close Button */
 .close {
   color: #aaaaaa;
   float: right;
   font-size: 15px;
   font-weight: bold;
 }
 
 .close:hover,
 .close:focus {
   color: #000;
   text-decoration: none;
   cursor: pointer;
 }
.social{
   align-items: center!important;
   size: 10px;
}