@font-face {
   font-family: 'Inter';
   src: url('../assets/fonts/Inter-Light.woff2') format('woff2'),
      url('../assets/fonts/Inter-Light.woff') format('woff'),
      url('../assets/fonts/Inter-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Inter';
   src: url('../assets/fonts/Inter-Bold.woff2') format('woff2'),
      url('../assets/fonts/Inter-Bold.woff') format('woff'),
      url('../assets/fonts/Inter-Bold.ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Inter';
   src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2'),
      url('../assets/fonts/Inter-SemiBold.woff') format('woff'),
      url('../assets/fonts/Inter-SemiBold.ttf') format('truetype');
   font-weight: 600;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Inter';
   src: url('../assets/fonts/Inter-Regular.woff2') format('woff2'),
      url('../assets/fonts/Inter-Regular.woff') format('woff'),
      url('../assets/fonts/Inter-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

:root {
   --primary-color: #f42147;
   --light-gray: #f8f8f8;
   --highlight-color: #fbeb5b;
}

*,
*::before,
*::after {
   box-sizing: border-box;
}

* {
   margin: 0;
   box-sizing: border-box;
}

html,
body {
   height: 100%;
}

body {
   font-family: 'Inter', sans-serif;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
   display: block;
   max-width: 100%;
}

input,
button,
textarea,
select {
   font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
   overflow-wrap: break-word;
}

p {
   font-size: 14px;
}

li {
   font-size: 14px;
   list-style: square;
}

input,
textarea {
   background: #e9e9e9;
   border: none;
   border-radius: 8px;
   padding: 7px 10px;
}

#root,
#__next {
   isolation: isolate;
}

.semi-bold-text {
   font-weight: 600;
}

.btn {
   background: var(--primary-color);
   border: 2px solid transparent;
   padding: 8px 25px;
   border-radius: 25px;
   color: #fff;
   transition: all 0.5s ease;
}

.btn:hover {
   background-color: #fff;
   border: 2px solid #f42147;
   color: #f42147;
}

.btn a {
   text-decoration: none;
   color: #fff;
   transition: all 0.5s ease;
}

.btn:hover a {
   color: #f42147;
}

.notice-card-wrapper {
   display: flex;
   justify-content: center;
   margin-bottom: 80px;
}

.card {
   width: 200px;
   padding: 25px 15px;
   text-align: center;
   border: var(--primary-color) solid 2px;
   border-radius: 10px;
}

.container-padding {
   padding: 50px 40px;
}

.position-left {
   object-position: left;
}

.center-container {
   width: 100%;
   display: flex;
   justify-content: center;
}

.no-padding-top {
   padding-top: 0px;
}

.paragraph-line {
   position: relative;
}

.paragraph-line::before {
   content: '';
   position: absolute;
   width: 65px;
   height: 3px;
   top: -20px;
   background-color: #f42147;
}
/* 
===============================
HEADER
===============================
*/

.header {
   display: none;
   padding: 30px 100px;
   box-shadow: 0px 6px 8px -5px rgba(0, 0, 0, 0.1);
   position: fixed;
   background: #fff;
   z-index: 100;
   width: 100%;
}

.nav__items {
   padding: 0;
   display: flex;
   justify-content: center;
   gap: 45px;
}

.nav__link {
   position: relative;
   list-style: none;
}

.nav__link::before {
   content: '';
   position: absolute;
   bottom: -5px;
   width: 100%;
   height: 5px;
   background-color: #f42147;
   transform: scaleX(0);
   transform-origin: left;
   transition: all 0.5s ease;
}

.nav__link:hover::before {
   transform: scaleX(1);
}

.nav__link a {
   color: #000;
   text-decoration: none;
}

.nav__link a.active {
   color: #f42147;
}

/* 
===============================
HERO
===============================
*/

.hero {
   display: flex;
   flex-direction: column-reverse;
}

.hero-right {
   padding: 50px 50px;
   padding-bottom: 80px;
}

.hero__heading {
   text-align: center;
   font-size: 30px;
   margin-bottom: 10px;
}

.hero__desc {
   max-width: 476px;
}

.hero-left {
   background: #d9d9d9;
   height: 130px;
}

.hero__desc {
   text-align: center;
}

.hero__btns {
   display: none;
}

.hero__img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   object-position: left bottom;
}

/* 
===============================
SKILLS
===============================
*/

.skills {
   background: var(--light-gray);
}

.section__heading {
   font-size: 28px;
   text-align: center;
   margin-bottom: 60px;
}

.skills-container {
   margin-bottom: 60px;
}

.skills-list-wrapper:not(:last-child) {
   margin-bottom: 40px;
}

.skills__small-heading {
   display: inline-block;
   position: relative;
   font-size: 18px;
   margin-bottom: 30px;
}

.skills__small-heading::before {
   content: '';
   bottom: -10px;
   left: 0;
   position: absolute;
   width: 30%;
   height: 3px;
   background: var(--primary-color);
   /* transform: translateX(-50%); */
}

.skills__item {
   max-width: 767px;
}

.skills__headings {
   margin-bottom: 50px;
}

.skills__sub-heading {
   font-size: 22px;
   text-align: center;
}

.skills__sub-heading-info {
   text-align: center;
}

.skills__list--desktop {
   display: none;
}

.skills__paragraph-wrapper {
   margin-bottom: 30px;
}

/* 
===============================
ABOUT
===============================
*/

.about-profile {
   margin-bottom: 180px;
}

.flex-layout {
   display: flex;
   flex-direction: column;
   gap: 40px;
}

.about__heading {
   display: inline-block;
   text-align: left;
   position: relative;
   margin-bottom: 45px;
}

.about__heading::before {
   content: '';
   position: absolute;
   width: 60%;
   height: 5px;
   background-color: #f42147;
   left: 0;
   bottom: -10px;
}

.out-of-work__heading {
   position: relative;
}

.out-of-work__heading::before {
   content: '';
   position: absolute;
   width: 100px;
   height: 5px;
   background-color: #f42147;
   left: 50%;
   bottom: -10px;
   transform: translateX(-50%);
}

.cooking-container {
   position: relative;
}

.cooking-container--end {
	display: flex;
	flex-direction: column;
}

.cooking-img {
   margin-bottom: 35px;
}


/* 
===============================
PORTFOLIO
===============================
*/

.portfolio__heading {
   position: relative;
}

.portfolio__heading::before {
   content: '';
   position: absolute;
   width: 100px;
   height: 5px;
   background-color: #f42147;
   left: 50%;
   bottom: -10px;
   transform: translateX(-50%);
}

.portfolio__filter {
   display: flex;
   gap: 70px;
   justify-content: center;
   margin-bottom: 120px;
}

.portfolio__category {
   list-style: none;
   cursor: pointer;
}

.filter-active {
   color: #f42147;
}

.portfolio-img-wrapper {
   overflow: hidden;
}

.portfolio-grid {
   display: grid;
   grid-template-columns: 1fr;
   justify-items: center;
   gap: 30px;
}

.portfolio__item {
   max-width: 100%;
   border-radius: 10px;
   overflow: hidden;

   -webkit-box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.11);
   box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.11);
}

.portfolio__img {
   overflow: hidden;
   width: 100%;
   object-fit: cover;
   transition: all 0.5s ease-in-out;
}

.portfolio__img:hover {
   transform: scale(1.1);
}

.portfolio-info {
   padding: 30px 35px 30px 35px;
}

.portfolio__link {
   font-weight: 600;
   color: #1b9cfc;
}

/* 
===============================
CONTACT
===============================
*/

.input-group {
   display: flex;
   flex-direction: column;
}

.input-group:not(:last-child) {
   margin-bottom: 20px;
}

.contact-verification {
   width: 150px;
}

#verification {
   width: 200px;
}

.contact-page-form > * {
   margin-bottom: 20px;
}

.contact-page__heading {
   position: relative;
}

.contact-page__heading::before {
   content: '';
   position: absolute;
   width: 100px;
   height: 5px;
   background-color: #f42147;
   left: 50%;
   bottom: -10px;
   transform: translateX(-50%);
}

.contact-page-container {
   display: flex;
   flex-direction: column-reverse;
}

.contact-form {
   margin-bottom: 60px;
}

.contact-info {
   margin-bottom: 50px;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.contact-info__item {
   display: flex;
   gap: 20px;
   align-items: center;
}

.contact-info__icon {
   width: 30px;
}

.contact-info__img {
   height: auto;
   width: auto;
}

.submit-btn {
   margin-top: 30px;
}

/* 
===============================
FOOTER
===============================
*/

.footer {
   padding-bottom: 60px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 35px;
   border-top: #000 1px solid;
}

.footer-copyright {
   margin: 10px;
}

.footer__list {
   display: none;
}

.footer__item {
   list-style: none;
}

.footer__link {
   text-decoration: none;
   color: #000;
}
/* 
===============================
MEDIA QUERY
===============================
*/

@media screen and (min-width: 600px) {
   .container-width {
      max-width: 430px;
   }
}

@media screen and (min-width: 768px) {
   .container-padding {
      padding: 150px 70px;
   }

   .btn--hero {
      font-size: 14px;
      padding: 8px 10px;
   }

   .notice-card-wrapper {
      display: none;
   }

   p {
      font-size: 16px;
   }

   li {
      font-size: 16px;
      list-style: square;
   }

   .header {
      display: block;
   }

   .hero {
      flex-direction: row;
   }

   .hero > * {
      flex: 1 1 100%;
   }

   .hero-right {
      padding: 160px 50px;
   }

   .hero__heading {
      text-align: left;
      font-size: 40px;
   }

   .hero__desc {
      text-align: left;
      font-size: 16px;
      margin-bottom: 40px;
   }

   .hero__btns {
      display: flex;
      justify-content: flex-start;
      gap: 25px;
   }

   .hero-left {
      background: #d9d9d9;
      height: auto;
   }

   .section__heading {
      font-size: 32px;
   }

   .skills-container {
      margin-bottom: 120px;
   }

   .skills-list-wrapper:not(:last-child) {
      margin-bottom: 60px;
   }

   .skills__small-heading {
      display: inline-block;
      position: relative;
      font-size: 18px;
      margin-bottom: 30px;
      background: var(--highlight-color);
      padding: 0 5px;
   }

   .skills__small-heading::before {
      display: none;
   }

   .skills__sub-heading {
      font-size: 25px;
   }

   .skills__sub-heading-info {
      text-align: right;
   }

   .skills__list--desktop {
      display: block;
   }

   .skills__list--mobile {
      display: none;
   }

   .skills__paragraph-date {
      display: flex;
      justify-content: space-between;
   }

	
	.cooking-text p {
		font-size: 25px;
		font-weight: 600;
	}

   .portfolio-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .contact {
      display: none;
   }

   .contact-page {
      display: block;
      padding-top: 150px;
   }

   .footer__list {
      padding: 0;
      display: flex;
      gap: 60px;
   }
}

@media screen and (min-width: 992px) {
   .container-padding {
      padding: 180px 100px;
   }

   .container-width {
      max-width: 1200px;
   }

   .flex-layout {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: 100px;
      width: 100%;
   }

   .column {
      flex: 1 1 100%;
   }

   .about-paragraph {
      max-width: 600px;
   }

   .btn {
      font-size: 16px;
      padding: 8px 25px;
   }

   .hero-right {
      padding: 200px 50px;
   }

   .hero__heading {
      font-size: 50px;
   }

   .hero__desc {
      font-size: 20px;
      margin-bottom: 40px;
   }

   .section__heading {
      font-size: 40px;
   }

   .contact-page {
      padding-top: 180px;
   }

   .contact-page-container {
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      gap: 100px;
   }

   .contact-page-container > * {
      flex: 1 1 100%;
   }

   .contact-info {
      gap: 30px;
   }

   .contact-info__item {
      gap: 50px;
   }

	.cooking-container--end {
		flex-direction: row;
		justify-content: flex-end;
	}

   .cooking-img {
      max-width: 80%;
   }

   .cooking-text {
		position: absolute;
      top: 20%;
      right: 0;
      max-width: 550px;
      background: #fff;
      padding: 50px 50px;
      box-shadow: 0px 12px 38px rgba(0, 0, 0, 0.07);
   }

	.cooking-text--end {
		left: 0;
	}
}

@media screen and (min-width: 1200px) {
   .hero__heading {
      font-size: 60px;
   }

   .hero-right {
      padding: 200px 100px;
   }

   .container-padding {
      padding: 180px 200px;
   }

   .section__heading {
      font-size: 50px;
      margin-bottom: 100px;
   }

   .about-flex {
      align-items: center;
   }

   .about__heading {
      margin-bottom: 50px;
   }

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

   .contact-page {
      padding-top: 200px;
   }

   .input-wrapper {
      display: flex;
      justify-content: center;
      gap: 50px;
   }

   .input-wrapper > * {
      flex: 1 1 100%;
   }

   .about-img {
      max-width: 100%;
   }

   .cooking-img {
      max-width: 70%;
   }

   .cooking-text {
      padding: 60px 50px;
   }
}

@media screen and (min-width: 1400px) {
   .cooking-text {
      padding: 80px 60px;
   }
}