/* This bit of the stylesheet defines animation properties
 and general custom values */

 @font-face {
    font-weight: normal;
    font-family: ruberoidi;
    src: url('../font/ruberoid/fonnts.com-ruberoid-regular.otf');
 }
 @font-face {
    font-weight: bold;
    font-family: ruberoidi;
    src: url('../font/ruberoid/fonnts.com-ruberoid-bold.otf');
 }

 @font-face {
    font-weight: bolder;
    font-family: ruberoidi;
    src: url('../font/ruberoid/fonnts.com-ruberoid-extrabold.otf');
 }
 @font-face {
    font-weight: lighter;
    font-family: ruberoidi;
    src: url('../font/ruberoid/fonnts.com-ruberoid-light.otf');
 }

 @font-face {
    font-weight: normal;
    font-family: m-barlow;
    src: url('../font/barlow/BarlowMedium-1.ttf');
 }


 .m-btn{outline: none; border: none; padding: 15px; padding-left: 20px; padding-right: 20px;
cursor: pointer; font-weight: bold; position: relative;
overflow: hidden;
}
.m-btn::before{content: ""; position: absolute; width: 100%; height: 50%; background-color: black;
top: 0; right: -100%; transition: 0.3s;}

.m-btn::after{content: ""; position: absolute; width: 100%; height: 50%; background-color: black;
bottom: 0; left: -100%; transition: 0.3s;}

.m-btn span{position: relative; z-index: 10;}

.m-btn:hover{color: white;}
.m-btn:hover::before{right: 0;}
.m-btn:hover::after{left: 0;}


 .filled-accent{background-color: var(--accent-color);}
 .filled-alt{background-color: var(--background-color);}

 .col-accent{color: var(--accent-color);}
 .col-alt{color: var(--background-color);}

.text-alt{color: var(--background-color);}

.font-default{font-family: var(--default-font);}
.font-alt{font-family: var(--alt-font);}

/* Custom Circled Item */
.circled-sm{width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;}
.circled-md{width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center;}
/* Custom Circled Item */

/* Custom Flex Layout */
.flex-mobile-wrap{
   display: flex; align-items: center;
}
 @media screen and (max-width: 900px) {
    .flex-mobile-wrap{
         flex-direction: column; justify-content: center;
      }

      .mobile-row-gap-1{row-gap: 2em;}
 }

 .gap-1{gap:10px;}
/* End of Custom Flex Layout */

/* Custom carousel  */
.custom-carousel{position: relative;}
.custom-carousel-item{display: grid; place-items: center; width: inherit; height: inherit;
display: none;}
.custom-carousel-item.active{display: grid;}
.custom-carousel-controls{position: absolute; bottom: 0; left: 0; display: flex;}

/* Custom carousel ends here */


/* Custom Swiper */
.swiper-wrapper{height: 30em;}
.swiper-slide{width: inherit; height: inherit; display: none;}
.swiper-slide.active{display: block;}
.swiper-slide img{width: 100%; height: 100%; object-fit: cover;}

.swiper-thumb-wrapper{display: flex; gap: 10px;}
.swiper-buttons{width: 100%; position: absolute; top: 50%; display: flex; justify-content: space-between;
padding: 10px;}
/* Swiper ends here */

.section-head{ font-family: var(--default-font); font-weight: bold; position: relative;}
.section-head-main{font-size: calc(var(--huge-font-size) - 10px); color: var(--accent-color); max-width: 500px;}
.section-head-top, .section-head-side{position: relative; margin-left: 45px; color: var(--gray-color);
letter-spacing: 5px; font-size: var(--font-size);}
.section-head-top::before, .section-head-side::before{
    content: ""; position: absolute; width: 30px; height: 2px; background-color: var(--accent-color);
    left: -40px; top: 10px; 
}

.simple-head{font-weight: bold;}

/* Default card */
.default-card{border: 1px solid gray; position: relative;}
.default-card .card-img-top{height: 25em; width: 100%; object-fit: cover;}
.afloat{position: absolute; left: 20px; top: 20px;}
/* Default card ends here */

/* Image card */
.img-card{position: relative; font-family: var(--default-font); overflow: hidden;}
.img-card img{width: 100%; height: 100%; object-fit: cover; transition: 0.2s;}
.img-card-det{position: absolute; bottom: 10px; padding: 20px;}
.img-card:hover img{filter: brightness(40%); transform: scale(1.1,1.1);}
.img-card .hover-det{position: absolute; bottom: 10px; padding: 20px;}
/* Image card ends here */

/* Custom card */
.custom-card{position: relative;}
.custom-card .card-img-top{width: 100%; height: 100%; object-fit: cover;}
.custom-card .card-body{position: absolute; background-color: white; bottom: -40px;
width: calc(100% - 30px); right: 0;}


/* Long card */
.long-card-item{display: flex; gap: 20px; height: 7em; padding: 10px;
border: 1px solid gray; text-decoration: none; margin-bottom: 20px;}
.img-slot{width: 7em; height: 100%;}
.img-slot img{height: 100%; width: 100%; object-fit: cover;}

.section-head-side{position: absolute; left: -150px; top: 50px; transform: rotateZ(270deg);}



 @media screen and (min-width: 900px) {
    .mobile-view{display: none;}
 }
 @media screen and (max-width: 900px) {
    .no-mobile-view{display: none;}
 }

 /* Animated elements */

.obs{opacity: 0;}

.anim-pop-up{
   opacity: 0;
   animation: pop-up 0.4s ease-out forwards;
}

.anim-pop-left{
   opacity: 0;
   transform: translate(-20px,0);
   animation: pop-left 0.4s ease-out forwards;
}

 .delay-1{animation-delay: 0.5s;}
 .delay-2{animation-delay: 1s;}
 .delay-3{animation-delay: 1.5s;}



@keyframes pop-up {
   from{opacity: 0%; transform: translate(0,50px);}
   to{opacity: 100%; transform: translate(0,0);}
}

@keyframes pop-left {
   from{opacity: 0%; transform: translate(-20px,0);}
   to{opacity: 100%; transform: translate(0,0);}
}