/*-----------------------------------*\

  #style.css

\*-----------------------------------*/



/**

 * copyright 2022 codewithsadee

 */











/*-----------------------------------*\

  #CUSTOM PROPERTY

\*-----------------------------------*/



:root {



  /**

   * colors

   */



  --sefety-orange_10: hsla(24, 100%, 50%, 0.1);

  --sefety-orange: #a3732d;

  --sonic-silver: hsl(220, 1%, 48%);

  --gunmetal_10: hsla(217, 21%, 16%, 0.1);

  --davys-gray: hsl(220, 2%, 31%);

  --light-gray: hsl(0, 0%, 80%);

  --gunmetal: hsl(217, 21%, 16%);

  --cultured: hsl(0, 0%, 95%);

  --black_40: hsla(0, 0%, 0%, 0.4);

  --black_25: hsla(0, 0%, 0%, 0.25);

  --black_15: hsla(0, 0%, 0%, 0.15);

  --white: hsl(0, 0%, 100%);

  --snow: hsl(345, 20%, 96%);

  --bgblack:#000000;



  /**

   * typography

   */



  --ff-jost: 'Jost', sans-serif;



  --fs-1: 3.8rem;

  --fs-2: 2.2rem;

  --fs-3: 2rem;

  --fs-4: 1.8rem;

  --fs-5: 1.4rem;



  --fw-600: 600;

  --fw-500: 500;



  /**

   * spacing

   */



  --section-padding: 80px;



  /**

   * shadow

   */



  --shadow-1: 0px 2px 15px hsla(0, 0%, 0%, 0.05);

  --shadow-2: -10px 10px 40px -2px hsla(217, 21%, 16%, 0.05);



  /**

   * border radius

   */



  --radius-pill: 500px;

  --radius-circle: 50%;

  --radius-4: 4px;



  /**

   * transition

   */



  --transition-1: 0.25s ease;

  --transition-2: 0.5s ease;

  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);

  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);



}











/*-----------------------------------*\

  #RESET

\*-----------------------------------*/



*,

*::before,

*::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



li { list-style: none; }



a,

img,

span,

button,

ion-icon { display: block; }



a {

  color: inherit;

  text-decoration: none;

}



img { height: auto; }



button {

  background: none;

  border: none;

  font: inherit;

  cursor: pointer;

}



ion-icon { pointer-events: none; }



html {

  font-family: var(--ff-jost);

  font-size: 10px;

  scroll-behavior: smooth;

}



body {

  background-color: var(--white);

  color: var(--davys-gray);

  font-size: 1.6rem;

  line-height: 1.7;

}



body.active { overflow: hidden; }



:focus-visible { outline-offset: 4px; }



::-webkit-scrollbar { width: 10px; }



::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }



::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }



::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }











/*-----------------------------------*\

  #REUSED STYLE

\*-----------------------------------*/



.container { padding-inline: 15px; }



.section { padding-block: var(--section-padding); }



.h1,

.h2,

.h3,

.h4 {

  color: var(--gunmetal);

  line-height: 1.3;

}



.h1,

.h2 { font-size: var(--fs-1); }



.h3 { font-size: var(--fs-2); }



.h3,

.h4 { font-weight: var(--fw-600); }



.h4 { font-size: var(--fs-3); }



.section-title .span {

  display: inline-block;

  color: var(--sefety-orange);

}



.section-text { font-size: var(--fs-3); }

.section-text1 { font-size: var(--fs-3); }

.section-text2 { font-size: var(--fs-4); }



.btn {

  background-color: var(--bg, var(--gunmetal));

  color: var(--color, var(--white));

  padding: var(--padding, 10px 20px);

  border: 2px solid var(--border-color, var(--gunmetal));

  border-radius: var(--radius-4);

  transition: var(--transition-1);

}



.btn-primary {

  --bg: var(--sefety-orange);

  --color: var(--white);

  --border-color: var(--sefety-orange);

}



.btn-primary:is(:hover, :focus) {

  --bg: transparent;

  --color: var(--sefety-orange);

}



.btn-secondary:is(:hover, :focus) {

  --bg: var(--sefety-orange);

  --border-color: var(--sefety-orange);

}



.btn-outline {

  --bg: transparent;

  --color: var(--sefety-orange);

  --border-color: var(--sefety-orange);

  --padding: 10px 28px;

  font-weight: var(--fw-500);

}



.btn-outline:is(:hover, :focus) {

  --color: var(--white);

  --bg: var(--sefety-orange);

}



.has-shape {

  position: relative;

  z-index: 1;

}



.shape {

  position: absolute;

  z-index: -1;

}



.w-100 { width: 100%; }



.title-wrapper {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: flex-end;

  gap: 30px;

  margin-block-end: 60px;

}



.grid-list {

  display: grid;

  gap: 30px;

}



.portfoliogrid-list {

  display: grid;

  gap: 0px;

}



.card-text { font-size: var(--fs-4); }



.btn-link {

  display: flex;

  align-items: center;

  gap: 5px;

  color: var(--gunmetal);

  font-weight: var(--fw-500);

  transition: var(--transition-1);

}



.btn-link:is(:hover, :focus) { color: var(--sefety-orange); }



.img-holder {

  aspect-ratio: var(--width) / var(--height);

  background-color: var(--light-gray);

}



.img-cover {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: var(--transition-2);

}



.hover\:underline {

  display: inline;

  background-image: linear-gradient(to right, var(--gunmetal), var(--gunmetal));

  background-repeat: no-repeat;

  max-width: max-content;

  background-position-y: bottom;

  background-size: 0 2px;

  transition: var(--transition-2);

}



.hover\:underline:is(:hover, :focus) { background-size: 100% 2px; }











/*-----------------------------------*\

  #HEADER

\*-----------------------------------*/



.header .btn { display: none; }



.header {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  padding-block: 25px;

  z-index: 4;

  



}





.header.active {

  position: fixed;

  background-color: var(--white);

  box-shadow: var(--shadow-1);

  transform: translateY(-100%);

  animation: slideIn 0.5s ease forwards;

}

.logo1{



  width: 300px;

 

}

@media only screen and (max-width: 600px) 



{

.logo1{

  width: 100px;

}

}



@media only screen and (max-width: 992px) 



{

.logo1{

  width: 180px;

}

}



@keyframes slideIn {

  0% { transform: translateY(-100%); }

  100% { transform: translateY(0); }

}



.header .container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;

}



.nav-open-btn {

  background-color: var(--gunmetal_10);

  color: var(--gunmetal);

  font-size: 20px;

  padding: 10px;

  border-radius: var(--radius-circle);

  transition: var(--transition-1);

}



.nav-open-btn ion-icon { --ionicon-stroke-width: 50px; }



.nav-open-btn:is(:hover, :focus) {

  background-color: var(--sefety-orange);

  color: var(--white);

}



.navbar {

  position: fixed;

  top: 0;

  left: -450px;

  width: calc(100% - 70px);

  max-width: 450px;

  height: 100vh;

  background-color: var(--cultured);

  z-index: 1;

  visibility: hidden;

  transition: 0.25s var(--cubic-in);

}



.navbar.active {

  transform: translate(450px);

  visibility: visible;

  transition: 0.5s var(--cubic-out);

}



.navbar-title {

  color: var(--black_40);

  text-align: center;

  padding: 12px;

  border-block-end: 1px solid var(--black_15);

}



.navbar-item { border-block-end: 1px solid var(--black_15); }



.navbar-link {

  color: var(--gunmetal);

  padding: 15px 30px;

  transition: var(--transition-1);

}



.navbar-link:is(:hover, :focus) { color: var(--sefety-orange); }



.overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  background-color: var(--black_25);

  opacity: 0;

  transition: var(--transition-1);

  pointer-events: none;

}



.overlay.active {

  pointer-events: all;

  opacity: 1;

}











/*-----------------------------------*\

  #HERO

\*-----------------------------------*/



.hero { padding-block-start: calc(var(--section-padding) + 90px); }

.hero1 {padding-block-start: calc(var(--section-padding));}







.hero .container {

  display: grid;

  gap: 40px;

}

.hero1 .container {

  display: grid;

  gap: 40px;

}



.hero .section-text { margin-block: 25px 40px; }



.hero-banner .w-100 {

  max-width: 70%;

  margin-inline: auto;

}

.hero1-banner .w-100 {

  max-width: 70%;

  margin-inline: auto;

}

.hero .shape {

  bottom: -10px;

  left: 10px;

}

.hero1 .shape {

  bottom: -10px;

  left: 10px;

}











/*-----------------------------------*\

  #SERVICE

\*-----------------------------------*/



.service { background-color: var(--snow); }



.service .section-text { margin-block-end: 20px; }



.service-card {

  background-color: var(--white);

  padding: 50px 30px;

  border-radius: var(--radius-4);

  box-shadow: var(--shadow-2);

}

.portfolio-card {

  background-color: var(--white);

  padding: 0px 0px;

  border-radius: var(--radius-4);

  box-shadow: var(--shadow-2);

}



.service-card .card-title {

  margin-block: 35px 20px;

  transition: var(--transition-1);

}



.service-card .card-title:is(:hover, :focus) { color: var(--sefety-orange); }



.service .shape-2 { display: none; }



.service .shape-1 {

  bottom: 0;

  left: -50px;

}











/*-----------------------------------*\

  #ABOUT

\*-----------------------------------*/



.about .container {

  display: grid;

  gap: 50px;

}



.about-banner .w-100 { max-width: 90%; }



.about .shape {

  top: -25px;

  right: -5px;

}



.about .section-text {

  font-size: unset;

  margin-block: 30px 40px;

}



.about .btn { max-width: max-content; }











/*-----------------------------------*\

  #PROJECT

\*-----------------------------------*/



.project { background-color: var(--white); }



.project .section-title { margin-block-end: 30px; }



.project-list {

  display: flex;

  flex-wrap: wrap;

  gap: 60px;

}



.project-card .card-banner { margin-block-end: 35px; }



.project-card .img-holder { overflow: hidden; }



.project-card:is(:hover, :focus-within) .img-cover { transform: scale(1.2); }



.project-card .card-content {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 25px;

}



.project-card .h3 {

  --fs-2: 2.4rem;

  margin-block-end: 4px;

}



.project-card .card-tag { font-size: var(--fs-4); }



.project-card .card-link {

  color: var(--gunmetal);

  font-size: 22px;

  padding: 14px;

  border-radius: var(--radius-circle);

  transform: rotate(-45deg);

  transition: var(--transition-1);

}



.project-card .card-link:is(:hover, :focus) { 

  background-color: var(--sefety-orange_10);

  color: var(--sefety-orange);

}











/*-----------------------------------*\

  #BLOG

\*-----------------------------------*/



.blog .grid-list { gap: 50px; }



.blog-card .card-banner {

  position: relative;

  overflow: hidden;

}



.blog-card .card-banner:is(:hover, :focus) .img-cover { transform: scale(1.2); }



.blog-card .card-tag {

  position: absolute;

  bottom: 10px;

  right: 10px;

  background-color: var(--white);

  color: var(--gunmetal);

  font-size: var(--fs-5);

  font-weight: var(--fw-500);

  text-transform: uppercase;

  padding: 4px 10px;

  border-radius: var(--radius-pill);

  transition: var(--transition-1);

}



.blog-card .card-tag:is(:hover, :focus) {

  background-color: var(--sefety-orange);

  color: var(--white);

}



.blog-card :is(.meta-list, .meta-item) {

  display: flex;

  align-items: center;

}



.blog-card .meta-list {

  column-gap: 20px;

  flex-wrap: wrap;

  margin-block: 25px 15px;

}



.blog-card .meta-item { column-gap: 5px; }



.blog-card .meta-item-text { color: var(--sonic-silver); }



.blog-card .h3 { --fs-2: 2.8rem; }



.blog-card .btn-link {

  font-size: var(--fs-4);

  margin-block-start: 20px;

}











/*-----------------------------------*\

  #FOOTER

\*-----------------------------------*/



.footer { color: var(--gunmetal); }



.footer-top {

  display: grid;

  gap: 30px;

  border-block: 1px solid var(--light-gray);

}



.footer-link {

  font-size: var(--fs-4);

  transition: var(--transition-1);

}



.footer-link:is(:hover, :focus) { color: var(--sefety-orange); }



.footer-brand .footer-link:not(:last-of-type) { margin-block: 30px 15px; }



.social-list {

  display: flex;

  gap: 15px;

  margin-block-start: 25px;

}



.social-link {

  font-size: 20px;

  transition: var(--transition-1);

}



.social-link:is(:hover, :focus) { color: var(--sefety-orange); }



.footer-list .footer-link { padding-block: 5px; }



.footer-list-title { margin-block-end: 20px; }



.copyright {

  padding-block: 35px;

  text-align: center;

}











/*-----------------------------------*\

  #MEDIA QUERIES

\*-----------------------------------*/



/**

 * responsive for large than 575px screen

 */



@media (min-width: 575px) {



  /**

   * CUSTOM PROPERTY

   */



  :root {



    /**

     * typography

     */



    --fs-1: 5rem;



  }







  /**

   * REUSED STYLE

   */



  .container {

    max-width: 540px;

    width: 100%;

    margin-inline: auto;

  }







  /**

   * HERO

   */



  .hero-banner .w-100 { max-width: 100%; }



  .hero .shape {

    bottom: 0;

    left: -50px;

  }







  /**

   * SERVICE

   */



  .service .grid-list {

    grid-template-columns: 1fr 1fr;

    column-gap: 25px;

  }







  /**

   * PROJECT

   */



  .project-list > * { min-width: 100%; }







  /**

   * FOOTER

   */



  .footer-top { grid-template-columns: 1fr 1fr; }



}











/**

 * responsive for large than 768px screen

 */



@media (min-width: 768px) {



  /**

   * REUSED STYLE

   */



  .container { max-width: 720px; }



  .grid-list { grid-template-columns: 1fr 1fr; }







  /**

   * HERO

   */



  .hero .container {

    grid-template-columns: 1fr 0.8fr;

    align-items: center;

  }







  /**

   * SERVICE

   */



  .service .title-wrapper > * {

    max-width: calc(50% - 30px);

    align-items: flex-start;

  }



  .service .section-text { margin-block: 0; }







  /**

   * ABOUT

   */



  .about .container {

    grid-template-columns: 1fr 1fr;

    align-items: center;

  }







  /**

   * PROJECT

   */



  .project-list > * {

    min-width: calc(50% - 30px);

    width: calc(50% - 30px);

  }



}











/**

 * responsive for large than 992px screen

 */



@media (min-width: 992px) {



  /**

   * CUSTOM PROPERTY

   */



  :root {



    /**

     * typography

     */



    --fs-1: 6.5rem;



    /**

     * spacing

     */



    --section-padding: 120px;



  }







  /**

   * REUSED STYLE

   */



  .container { max-width: 960px; }



  .h2 { --fs-1: 5.5rem; }



  .section-text { --fs-3: 2.4rem; }



  .btn {

    --padding: 10px 32px;

    font-weight: var(--fw-500);

  }



  .btn-secondary { --padding: 14px 32px; }







  /**

   * FOOTER

   */



  .footer-top { grid-template-columns: 1fr 0.7fr 0.7fr 0.7fr; }



}











/**

 * responsive for large than 1200px screen

 */



@media (min-width: 1200px) {



  /**

   * CUSTOM PROPERTY

   */



  :root {



    /**

     * typography

     */



    --fs-1: 8rem;



  }







  /**

   * REUSED STYLE

   */



  .container { max-width: 1140px; }



  .h2 { --fs-1: 7.2rem; }



  .grid-list { grid-template-columns: repeat(3, 1fr); }







  /**

   * HEADER

   */



  .nav-open-btn,

  .navbar-title { display: none; }



  .header .btn { display: block; }



  .navbar,

  .navbar.active {

    all: unset;

    margin-inline-start: auto;

  }



  .navbar-list { display: flex; }



  .navbar-item { border: none; }



  .navbar-link {

    text-transform: uppercase;

    font-weight: var(--fw-500);

  }







  /**

   * SERVICE

   */



  .service .grid-list { grid-template-columns: repeat(4, 1fr); }







  /**

   * PROJECT

   */



  .project .title-wrapper > div { width: 75%; }



  .project-list > * {

    min-width: calc(33.33% - 40px);

    width: calc(33.33% - 40px);

  }



  .project-list > *:is(:first-child, :nth-child(2)) {

    width: calc(50% - 30px);

  }



}



.fixed {

	position: fixed;

	top: 0;

	height: 70px;

	z-index: 1;

}



.justi{

  text-align: justify;

  text-justify: inter-word;

}





.float{

	position:fixed;

	width:60px;

	height:60px;

	bottom:40px;

	right:40px;

	background-color:#25d366;

	color:#FFF;

	border-radius:50px;

	text-align:center;

  font-size:30px;

	box-shadow: 2px 2px 3px #999;

  z-index:100;

}



.my-float{

	margin-top:16px;

}

.sectionclass{

  display: flex;

  flex-direction: column;

  align-items: center;

  height: auto;

  background-color:#25d366;

  margin-top: 100px;

 

}



.homeservice{



  background: url("/static/images/banner/make1.jpg") 50% 0 no-repeat fixed;

}

.homeportfolio{



 

}







.aboutsectionbg{



  background: url("/static/images/banner/makeup-artist-in-thrissur.jpg") 50% 0 no-repeat fixed;

}

.footerbg{



  background: url("/static/images/banner/makeup-artist-in-thrissur.jpg") 50% 0 no-repeat fixed;

}

.ccc{

  text-align: center;

  margin-top: 15px;

padding-top: 15px;

margin-bottom: 15px;

padding-bottom: 15px;

}







/*-----------------------------------*\

  #PORTFOLIO CONTAINER

\*-----------------------------------*/

.portfoliocontainer{



  display:flex;

  align-items: center;

  justify-content: center;

  





}

.portfoliogallery{

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr; 

  grid-gap:1px;





}



.portfoliogallery img{

  width:100%

}

.aboutcontainer {
  display: grid;
  grid-template-columns: 1fr 1fr;

  align-items: center;

}

.gridabouthome{

  display: grid;
  grid-template-columns: 1fr 1fr ;
  align-items: center;
}
@media (max-width: 800px) {

  .gridabouthome{

    display: grid;
    grid-template-columns:  1fr ;
    align-items: center;
  }

  

  


}