@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face{
    font-family: songfont;
    src: url('fonts/Ogg-Regular.otf');
}
@font-face {
  font-family: naasromanfont;
  src: url('fonts/NeueHaasDisplayRoman.ttf');
}
*,
*::before,
*::after{
  box-sizing: border-box;
}
/* body{
    background-color: #f7f5f2 !important;
    color:#121212 !important;
    margin: 0;
} */



.collective_rotate{
  transform: matrix(0, -1, 1, 0, 0, 0);
}

.socialicon-footer{
width: 20px !important;
}

#lappy{
  background-size: cover;
	background-attachment: fixed;
  background-image: url(images/serv/animal.jpg);
  width: 100%;
  height: auto;
  background-position: center center;
}

#frutybg{
  background-size: cover;
	background-attachment: fixed;
  background-image: url(images/serv/shoes.jpg);
  width: 100%;
  height: auto;
  background-position: center center;
  background-repeat: no-repeat !important;
}

 /* Service Mobile Accordion */
 .accordion{
  background-color: #F7F5F2;
  color: #121212 !important;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
 }

 .panel {
  padding: 0 18px;
  background-color: #f7f5f2;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
 }
 .rotate-on-click {
  transition: transform 0.5s;
}

.rotate-on-click.rotate {
  transform: rotate(45deg);
}
 /* End Service Mobile Accordion */

.song_font{
  font-family: songfont !important;
}
.nas_font{
  font-family: elza, sans-serif !important;
  font-style: normal;
  font-weight: 100;
}

.roman_font_weight{
  font-weight: 55px;
}


.footer_gradient{
  background: transparent linear-gradient(180deg, #12121200 0%, #1A1A1AF7 89%, var(--unnamed-color-121212) 100%) 0% 0% no-repeat padding-box;
}
/* ----------------------------------- */
/* Tablet 2 - medium screens */

.footer_background_color{
 
  background: linear-gradient(
    to top,
    pink 0%,
    pink 50%,
    paleturquoise 50%,
    paleturquoise 100%
  );
}

.be-social{
  font-size: 1.5625rem !important;
}

/* laptop & desktop */




/* fix service page we build brand equity */
/* fix hamburger menu who we are appearing over overlay */
/* position  x on mobile menu properly */
/* fix tablet and desktop first page animation */
/* fix weird margin */
/* fix navbar hide and show on scroll on all viewport including client viewport */
/* fix mobile menu on all pages */
/* fix fade in and out gray animation */


/* Styles that should be applied when viewport width is 1440 or less and height is 800 or less */
/* @media (max-width: 1440px) and (max-height: 800px) { */
  /* .service_abs{
    display: none !important;
  }
 
  .first_slide_image_man{
    width: 200px;
    height: 350px;
  }
  .second_slide_text{
    width: 600px;
    height: 200px;
    
  }
  .home_margin{
    margin-top: 150px;
  }

  .first_slide_im{
    position: absolute;
    left: 840px;
    top: 920px;
  }
  .into_brand_text{
    margin-top: 30px;
  }
  .remove_justify_center_translate{
    display: block;
  }
  .that_translate_text{
    font-size: 9.375rem;
  }
  .image_grid_sizes{
    width: 653px;
    height: 322px;
  }

  .image_bottom_margin{
   margin-top: 0;
  }
  .hidden_abs{
    display: none;
  }
  .abs_viewport{
    display: block;
  } */
  
  /* .about_we_are_passionate_abs{
    transform: translate(70%,250%);
  } */
/* } */


/* @media (min-width: 1024px) and (max-height: 768px) {

  .testi{
    color: red;
  }
  .we_turn_business_margin{
    margin-left: 550px;
  }
  .we_turn_business{
    position: relative;
    left: 250px;
    font-size: 7rem;
    line-height: 125px;
    
  }
  .into_brands{
    font-size: 7rem;
    line-height: 125px;
  }

  .man_slide_image_1200{
    left: 700px;

  }
  .second_slide_text{
    margin-left: 420px;
    font-size: 40px;
  }
} */

/* @media (min-width: 1200px) and (max-height: 768px) {
  .man_slide_image_1200{
    left: 900px;
  }
  .image_bottom_margin{
    margin-top: 0;
   }
} */

/* @media (min-width: 1366px) and (max-height: 768px) {
  .man_slide_image_1200{
    left: 1100px;
  }
  .image_bottom_margin{
    margin-top: 0;
   }
} */

/* @media (min-width: 1680px) and (max-height:1050px){
  .man_slide_image_1200{
    left: 1400px;
    bottom: 20px;
  }
  .image_bottom_margin{
    margin-top: 0;
   }
}

@media (min-width: 1920px) and (max-height:1200px){



  .man_slide_image_1200{
    left: 1640px;
    
  }
  .we_turn_business_margin{
    margin-left: 550px;
  }
  .we_turn_business{
    position: relative;
    right: 100px;
    font-size: 11rem;
    line-height: 179px;
    
  }
  .into_brands{
    font-size: 11rem;
    line-height: 179px;
  }
  .man_image_slide_h_768{
    height: 700px;
    width: 400px;
  }
} */


/* service page using clamp to scale font size to 1200px width*/

/* .services_we_build_brand{
  font-size: clamp(3.625rem, 5vw + 0.975rem, 9.375rem);
} */

/* word wrap  at 1440px*/