/*!***************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/App.sass ***!
  \***************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.app_OXwE {
  cursor: none;
}
.app_OXwE .cursor_Gwnb {
  position: fixed;
  width: 10px;
  height: 10px;
  background-color: var(--primary1Darker);
  border-radius: 50%;
  z-index: 1000;
  pointer-events: none;
  transition: transform ease-out 5ms, background-color 0.3s;
}
.app_OXwE .cursor_Gwnb.pointer_Sj3w {
  display: none;
}
.app_OXwE .stalker_efM4 {
  position: fixed;
  margin-top: -10px;
  margin-left: -10px;
  width: 30px;
  height: 30px;
  border: 2px solid var(--primary1Darker);
  border-radius: 50%;
  z-index: 999;
  pointer-events: none;
  transition: transform ease-out 160ms, width ease 0.3s, height ease 0.3s, margin-top 0.3s, margin-left 0.3s, border-color 0.3s;
}
.app_OXwE .stalker_efM4.pointer_Sj3w {
  border-color: var(--primary2);
  width: 50px;
  height: 50px;
  margin-top: -20px;
  margin-left: -20px;
}

@media screen and (max-width: 460px) {
  .app_OXwE .cursor_Gwnb {
    display: none;
  }
  .app_OXwE .stalker_efM4 {
    display: none;
  }
}
/*!*********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/sections/header/index.sass ***!
  \*********************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: var(--primaryBg);
  padding: 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: none;
  overflow: hidden;
  z-index: 6;
}
header.open_GO5z .socialMedias_Id_J {
  right: 8.3rem;
}
header span.logo_FF5Y {
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.4rem;
  visibility: visible;
  opacity: 1;
}
header .wrapper_EJU1 {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
header .wrapper_EJU1 .themeButton_LU9Q {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  position: relative;
  box-shadow: inset 10px -10px 0 0 var(--primaryText);
  transform: scale(1) rotate(-2deg);
  transition: box-shadow 0.5s ease 0s, transform 0.4s ease 0.1s;
}
header .wrapper_EJU1 .themeButton_LU9Q:before {
  content: "";
  width: inherit;
  height: inherit;
  border-radius: inherit;
  position: absolute;
  left: 0;
  top: 0;
  transition: background 0.3s ease;
}
header .wrapper_EJU1 .themeButton_LU9Q:after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: -3px 0 0 -3px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 -20px 0 var(--primaryText), 0 20px 0 var(--primaryText), 20px 0 0 var(--primaryText), -20px 0 0 var(--primaryText), 14px 14px 0 var(--primaryText), -14px 14px 0 var(--primaryText), 14px -14px 0 var(--primaryText), -14px -14px 0 var(--primaryText);
  transform: scale(0);
  transition: all 0.3s ease;
}
header .wrapper_EJU1 .themeButton_LU9Q.light_mGKg {
  box-shadow: inset 22px -22px 0 0 var(--primaryText);
  transform: scale(0.5) rotate(0deg);
  transition: transform 0.3s ease 0.1s, box-shadow 0.2s ease 0s;
}
header .wrapper_EJU1 .themeButton_LU9Q.light_mGKg:before {
  background: var(--primaryText);
  transition: background 0.3s ease 0.1s;
}
header .wrapper_EJU1 .themeButton_LU9Q.light_mGKg:after {
  transform: scale(1.5);
  transition: transform 0.5s ease 0.15s;
}
header .socialMedias_Id_J {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  font-size: 0.8rem;
  transition: 0.35s;
  right: -100%;
}
header .socialMedias_Id_J a {
  color: var(--primaryText);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.4rem;
  transition: 0.35s;
}
header .socialMedias_Id_J a:hover {
  color: var(--primary1);
}

@media screen and (min-width: 1300px) {
  header {
    flex-direction: column;
    align-items: end;
    justify-content: start;
    gap: 3rem;
    padding: 2rem 1.3rem;
    right: unset;
    bottom: 0;
    width: 5rem;
  }
  header span.logo_FF5Y {
    white-space: nowrap;
    order: 2;
    transform: rotate(-90deg) translate(-6rem, 5.7rem);
  }
  header .wrapper_EJU1 {
    justify-content: center;
    flex-direction: column-reverse;
    gap: 1.8rem;
    order: 1;
  }
  header .socialMedias_Id_J {
    position: static;
    order: 3;
    transition: unset;
    transform: rotate(-90deg) translate(-15rem, 2rem);
  }
}
@media screen and (max-width: 570px) {
  header.open_GO5z span.logo_FF5Y {
    visibility: hidden;
    opacity: 0;
  }
}
@media screen and (max-width: 410px) {
  header {
    padding: 0.7rem 1rem;
  }
  header span.logo_FF5Y {
    font-size: 0.9rem;
  }
  header .wrapper_EJU1 {
    gap: 0.7rem;
  }
  header .wrapper_EJU1 .themeButton_LU9Q {
    width: 25px;
    height: 25px;
    box-shadow: inset 7px -7px 0 0 var(--primaryText);
  }
  header .wrapper_EJU1 .themeButton_LU9Q:after {
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    box-shadow: 0 -16px 0 var(--primaryText), 0 16px 0 var(--primaryText), 16px 0 0 var(--primaryText), -16px 0 0 var(--primaryText), 12px 12px 0 var(--primaryText), -12px 12px 0 var(--primaryText), 12px -12px 0 var(--primaryText), -12px -12px 0 var(--primaryText);
  }
}
/*!******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/components/hamburgerMenu/index.sass ***!
  \******************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.hamburgerIcon_dvBd {
  width: 2rem;
  height: 1.5rem;
  position: relative;
}
.hamburgerIcon_dvBd.open_Rx5P .line1_qCxy,
.hamburgerIcon_dvBd.open_Rx5P .line3_Dc82 {
  top: 40%;
  width: 100%;
}
.hamburgerIcon_dvBd.open_Rx5P .line1_qCxy {
  transform: rotate(45deg);
}
.hamburgerIcon_dvBd.open_Rx5P .line2_zGvx {
  opacity: 0;
}
.hamburgerIcon_dvBd.open_Rx5P .line3_Dc82 {
  transform: rotate(-45deg);
}
.hamburgerIcon_dvBd .line_hZ9I {
  background-color: var(--primaryText);
  position: absolute;
  height: 0.2rem;
  transition: 0.35s;
}
.hamburgerIcon_dvBd .line1_qCxy {
  top: 0;
  width: 85%;
}
.hamburgerIcon_dvBd .line2_zGvx {
  top: calc(50% - 0.1rem);
  width: 60%;
}
.hamburgerIcon_dvBd .line3_Dc82 {
  top: calc(100% - 0.2rem);
  width: 100%;
}
.hamburgerIcon_dvBd:hover .line_hZ9I {
  width: 100%;
}

@media screen and (max-width: 410px) {
  .hamburgerIcon_dvBd {
    width: 1.8rem;
    height: 1.3rem;
  }
}
/*!************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/main_content/index.sass ***!
  \************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.mainContentPage_MhGg {
  position: relative;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto 4rem auto;
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/main_content/sections/home/index.sass ***!
  \**************************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.home_Iyqi {
  position: relative;
  height: 100vh;
  padding: 4rem;
  display: flex;
  align-items: center;
  gap: 4rem;
}
.home_Iyqi .imageContainer_JZdr {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--secondary2);
  border-radius: 50%;
  height: clamp(15rem, 27vw, 30rem);
  width: clamp(15rem, 27vw, 30rem);
}
.home_Iyqi .imageContainer_JZdr::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--primaryBg));
}
.home_Iyqi .introduce_Zmp3 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 3rem;
}
.home_Iyqi .introduce_Zmp3 .title_aWvm {
  font-size: clamp(2rem, 7.5vw, 5.4rem);
  font-weight: 300;
  line-height: clamp(2.2rem, 8vw, 5.5rem);
}
.home_Iyqi .introduce_Zmp3 .title_aWvm span {
  font-weight: 500;
  display: block;
  font-size: clamp(1rem, 6.6vw, 4.5rem);
}
.home_Iyqi .introduce_Zmp3 .description_i9_M {
  line-height: 1.9rem;
}

@media screen and (max-width: 770px) {
  .home_Iyqi {
    flex-direction: column;
    align-items: start;
    height: auto;
    padding-top: 6rem;
  }
}
@media screen and (max-width: 410px) {
  .home_Iyqi {
    padding: 5rem 1.5rem 1.5rem;
    align-items: center;
    gap: 2rem;
  }
  .home_Iyqi .introduce_Zmp3 {
    gap: 2rem;
  }
}
/*!********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/components/zigzagAnimation/index.sass ***!
  \********************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.zigzag_oMmm {
  position: absolute;
  width: 9rem;
  height: 2rem;
  object-fit: contain;
  z-index: 10;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/main_content/components/template/index.sass ***!
  \********************************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.template_Zji4 {
  display: flex;
}
.template_Zji4.ltr_y0f9 {
  flex-direction: row;
}
.template_Zji4.rtl_dXjK {
  flex-direction: row-reverse;
}
.template_Zji4.first_EhQx {
  --titleContainerBg: var(--primary1);
  --childrenContainerBg: var(--secondary1);
}
.template_Zji4.second_kYE9 {
  --titleContainerBg: var(--primary2);
  --childrenContainerBg: var(--secondary2);
}
.template_Zji4.third__OKd {
  --titleContainerBg: var(--primary3);
  --childrenContainerBg: var(--secondary1);
}
.template_Zji4.third__OKd .title_xWqD {
  color: var(--secondary3) !important;
}
.template_Zji4 .titleContainer_ZXX4 {
  background-color: var(--titleContainerBg);
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.template_Zji4 .titleContainer_ZXX4 .title_xWqD {
  font-size: 3.3rem;
  font-weight: 300;
  letter-spacing: -0.2rem;
  color: var(--secondary1);
}
.template_Zji4 .childrenContainer_HWwk {
  background-color: var(--childrenContainerBg);
  flex: 2;
}

@media screen and (max-width: 1000px) {
  .template_Zji4 .titleContainer_ZXX4 .title_xWqD {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 770px) {
  .template_Zji4 {
    flex-direction: column !important;
  }
  .template_Zji4 .titleContainer_ZXX4 {
    padding: 1.5rem;
  }
}
@media screen and (max-width: 410px) {
  .template_Zji4 .titleContainer_ZXX4 {
    padding: 1.2rem;
  }
  .template_Zji4 .titleContainer_ZXX4 .title_xWqD {
    font-size: 1.9rem;
  }
}
/*!***************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/main_content/sections/about/index.sass ***!
  \***************************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.about_VKDy {
  padding: 6rem 8rem;
  color: var(--secondaryText);
}
.about_VKDy > *:not(:last-child) {
  margin-bottom: 3rem;
}
.about_VKDy h3, .about_VKDy p {
  line-height: 2rem;
}
.about_VKDy h3 {
  font-size: 1.3rem;
  font-weight: 600;
}
.about_VKDy p {
  font-size: 1rem;
}
.about_VKDy .aboutContainer_hQqL {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.about_VKDy .aboutContainer_hQqL .list_AWm6 {
  list-style: none;
}
.about_VKDy .aboutContainer_hQqL .list_AWm6 > *:not(:last-child) {
  margin-bottom: 0.8rem;
}
.about_VKDy .aboutContainer_hQqL .list_AWm6 li .label_pDNK {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1rem;
}
.about_VKDy .aboutContainer_hQqL .list_AWm6 li .value_yINL {
  margin-inline-start: 0.4rem;
  font-weight: 400;
  font-size: 1rem;
}
.about_VKDy .aboutContainer_hQqL .downloadCvContainer_hh4Y a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}
.about_VKDy .aboutContainer_hQqL .downloadCvContainer_hh4Y a .icon__h18 {
  fill: var(--secondaryText);
}
.about_VKDy .aboutContainer_hQqL .downloadCvContainer_hh4Y a .bg_flAW {
  background-color: var(--primary1);
}
.about_VKDy .aboutContainer_hQqL .downloadCvContainer_hh4Y a .downloadCv_ahvN {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

@media screen and (max-width: 1000px) {
  .about_VKDy {
    padding: 4rem 5rem;
  }
}
@media screen and (max-width: 900px) {
  .about_VKDy > *:not(:last-child) {
    margin-bottom: 2rem;
  }
  .about_VKDy .aboutContainer_hQqL {
    flex-direction: column;
    align-items: start;
    gap: 2rem;
  }
  .about_VKDy .aboutContainer_hQqL .downloadCvContainer_hh4Y {
    margin: auto;
  }
}
@media screen and (max-width: 770px) {
  .about_VKDy {
    padding: 1.5rem;
  }
}
/*!*********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/components/icon/index.sass ***!
  \*********************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.iconWrapper_0V9P {
  position: relative;
  margin-bottom: 2.3rem;
  transform: translateX(-0.7rem);
}
.iconWrapper_0V9P .fontawesome_La6D {
  position: relative;
  width: 5rem;
  height: 5rem;
  z-index: 1;
}
.iconWrapper_0V9P .bg_XoFz {
  position: absolute;
  width: 5.5rem;
  height: 5.5rem;
  top: 1rem;
  left: 2rem;
  border-radius: 2rem 0.4rem;
}
/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/main_content/sections/portfolio/index.sass ***!
  \*******************************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.portfolioContainer_Cxfw {
  position: relative;
}
.portfolioContainer_Cxfw .portfolio_ZpGQ {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.portfolioContainer_Cxfw .portfolio_ZpGQ .projects_PQXg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.portfolioContainer_Cxfw .portfolio_ZpGQ .loadMoreButton_aBu4 {
  text-align: center;
  width: 100%;
  background-color: var(--primary1);
}
.portfolioContainer_Cxfw .portfolio_ZpGQ .loadMoreButton_aBu4 a {
  color: var(--secondary1);
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.2rem;
  transition: 0.35s;
  display: block;
  padding: 1.5rem;
}
.portfolioContainer_Cxfw .portfolio_ZpGQ .loadMoreButton_aBu4 a:hover {
  color: var(--primary1Darker);
}

@media screen and (max-width: 770px) {
  .portfolioContainer_Cxfw .portfolio_ZpGQ .projects_PQXg {
    grid-template-columns: 1fr;
  }
}
/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/main_content/components/project/index.sass ***!
  \*******************************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.projectWrapper_t41v {
  overflow: hidden;
}
.projectWrapper_t41v a {
  text-decoration: none;
  color: var(--primaryText);
  position: relative;
}
.projectWrapper_t41v a img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.projectWrapper_t41v a .showMore_fwG2 {
  position: absolute;
  background-color: var(--primaryBg);
  bottom: -3rem;
  left: 0;
  padding: 0.8rem;
  font-size: 0.9rem;
  transition: 0.4s;
}
.projectWrapper_t41v a:hover .showMore_fwG2 {
  bottom: 0;
}
/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/components/triangleAnimation/index.sass ***!
  \**********************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.triangle_PgIW {
  position: absolute;
  width: 7rem;
  height: 5rem;
  object-fit: contain;
  z-index: 10;
}
/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/main_content/sections/skills/index.sass ***!
  \****************************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.skillsContainer_pCGD {
  position: relative;
}
.skillsContainer_pCGD .skills_Jty4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  padding: 6rem 8rem;
}

@media screen and (max-width: 1000px) {
  .skillsContainer_pCGD .skills_Jty4 {
    padding: 4rem 5rem;
  }
}
@media screen and (max-width: 770px) {
  .skillsContainer_pCGD .skills_Jty4 {
    padding: 1.5rem;
  }
}
/*!*****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/main_content/components/skill/index.sass ***!
  \*****************************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.mainContainer_y_7c {
  width: 100%;
  display: flex;
  align-items: center;
  color: var(--secondary2Text);
  gap: 1.7rem;
}
.mainContainer_y_7c .rangeContainer_Mwh8 {
  flex: 1;
  background-color: var(--white);
  height: 0.8rem;
}
.mainContainer_y_7c .rangeContainer_Mwh8 .range_i_Iw {
  background-color: var(--special);
  color: var(--secondary1);
  display: block;
  padding: 0.3rem 0.6rem;
  margin-top: -0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-size: 0.7rem;
  white-space: nowrap;
}
.mainContainer_y_7c .rangeContainer_Mwh8 .range_i_Iw.rangeAnimation_Ozf0 {
  animation: 0.5s rangeWidthAnimation_KxH9 linear;
  animation-fill-mode: forwards;
}
.mainContainer_y_7c .percent_eq4d {
  font-size: 1.3rem;
  font-weight: 500;
}

@keyframes rangeWidthAnimation_KxH9 {
  from {
    width: 0;
  }
}
/*!********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/components/circleAnimation/index.sass ***!
  \********************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.circle_v_7S {
  position: absolute;
  width: 9rem;
  height: 6rem;
  object-fit: contain;
  z-index: 10;
}
/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/main_content/sections/Education/index.sass ***!
  \*******************************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.educationContainer_C4Ub {
  position: relative;
}
.educationContainer_C4Ub .education_jycK {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding: 6rem 8rem;
  color: var(--secondaryText);
}

@media screen and (max-width: 1000px) {
  .educationContainer_C4Ub .education_jycK {
    padding: 4rem 5rem;
  }
}
@media screen and (max-width: 770px) {
  .educationContainer_C4Ub .education_jycK {
    padding: 1.5rem;
  }
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/main_content/components/educationItem/index.sass ***!
  \*************************************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.educationWrapper_flZc {
  position: relative;
  display: flex;
  gap: 1.5rem;
}
.educationWrapper_flZc:not(.lastItem_RbK7)::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 100%;
  background-color: var(--special);
  top: 2.5rem;
  left: 4.6rem;
}
.educationWrapper_flZc:hover .descriptionWrapper_YzNG {
  margin-inline-start: 1rem;
}
.educationWrapper_flZc:hover .circle_iFty::after {
  background-color: var(--special);
}
.educationWrapper_flZc .date_oC_2 {
  font-weight: 600;
  color: var(--special);
}
.educationWrapper_flZc .circle_iFty {
  position: relative;
  min-width: 2rem;
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--special);
  border-radius: 50%;
  margin-top: -0.5rem;
}
.educationWrapper_flZc .circle_iFty::after {
  position: absolute;
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: inherit;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  transition: 0.3s;
}
.educationWrapper_flZc .descriptionWrapper_YzNG {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: 0.3s;
}
.educationWrapper_flZc .descriptionWrapper_YzNG .degree_cRvi {
  font-weight: 600;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/main_content/sections/Experience/index.sass ***!
  \********************************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.experienceContainer_NpRw {
  position: relative;
}
.experienceContainer_NpRw .experience_oQ7C {
  padding: 6rem 8rem;
  color: var(--secondaryText);
}
.experienceContainer_NpRw .experience_oQ7C p {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 3rem;
}
.experienceContainer_NpRw .experience_oQ7C .experienceItems_S92J {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media screen and (max-width: 1000px) {
  .experienceContainer_NpRw .experience_oQ7C {
    padding: 4rem 5rem;
  }
}
@media screen and (max-width: 770px) {
  .experienceContainer_NpRw .experience_oQ7C {
    padding: 1.5rem;
  }
}
/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/main_content/components/experienceItem/index.sass ***!
  \**************************************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.experienceItem_u2eM.open_z1Ma .titleContainer_DGgx .icon_FLHO {
  transform: rotate(180deg);
}
.experienceItem_u2eM.open_z1Ma .collapseWrapper_VF5O {
  height: 6rem;
  opacity: 1;
  visibility: visible;
}
.experienceItem_u2eM .titleContainer_DGgx {
  background-color: var(--special);
  color: var(--white);
  padding: 0.8rem 1rem;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
.experienceItem_u2eM .titleContainer_DGgx .title_PpRr {
  font-weight: 600;
}
.experienceItem_u2eM .collapseWrapper_VF5O {
  background-color: var(--white);
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  font-size: 0.9rem;
}
.experienceItem_u2eM .collapseWrapper_VF5O .collapseContent_CRxk {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.experienceItem_u2eM .collapseWrapper_VF5O .collapseContent_CRxk .date_vF8q {
  font-weight: 600;
}
/*!*****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/main_content/sections/contact/index.sass ***!
  \*****************************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.contactContainer_VC5E {
  position: relative;
}
.contactContainer_VC5E .contact__YEz {
  padding: 6rem 8rem;
  color: var(--secondaryText);
}
.contactContainer_VC5E .contact__YEz p {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 5rem;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3.4rem;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g.invalid_eBCp {
  padding-bottom: 3rem;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g.invalid_eBCp:after {
  position: absolute;
  content: "One or more fields have an error. Please check and try again.";
  color: var(--secondary1);
  background-color: var(--primary1);
  padding: 0.4rem;
  font-size: 0.8rem;
  text-align: center;
  bottom: 0;
  left: 0;
  right: 0;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g.invalid_eBCp .inputWrapper_GGfp.required_ALBR:after {
  position: absolute;
  content: "The field is required.";
  bottom: 0.1rem;
  right: 0;
  text-align: center;
  color: var(--primaryText);
  background-color: var(--primary1);
  padding: 0.4rem;
  font-size: 0.7rem;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g .inputWrapper_GGfp {
  position: relative;
  display: flex;
  flex-direction: column;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g .inputWrapper_GGfp label {
  position: absolute;
  top: -1.5rem;
  font-weight: 600;
  font-size: 1.2rem;
  transition: 0.3s;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g .inputWrapper_GGfp label:has(+ input:focus, + textarea:focus) {
  font-size: 0.8rem;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g .inputWrapper_GGfp input, .contactContainer_VC5E .contact__YEz .contactForm_FX9g .inputWrapper_GGfp textarea {
  border: none;
  background-color: inherit;
  border-bottom: 2px solid var(--secondaryText);
  padding: 0.4rem;
  font-size: 1.1rem;
  color: var(--secondaryText);
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g .inputWrapper_GGfp input:focus, .contactContainer_VC5E .contact__YEz .contactForm_FX9g .inputWrapper_GGfp textarea:focus {
  outline: none;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g .inputWrapper_GGfp textarea {
  resize: vertical;
  font-family: montserrat;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g button {
  position: relative;
  padding: 1.4rem;
  border: 2px solid var(--secondaryText);
  background-color: inherit;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g button span {
  z-index: 1;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--secondaryText);
  transition: 0.6s;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g button::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  width: 0;
  top: var(--y, 0px);
  left: var(--x, 0px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--secondaryText);
  transition: 0.6s ease-out, top 0s, left 0s;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g button:hover span {
  color: var(--secondary1);
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g button:hover::after {
  width: 65rem;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g button .loader_nwCK {
  position: relative;
  width: 2rem;
  height: 2rem;
  background-color: var(--primaryBg);
  border-radius: 50%;
  animation: 1s loaderAnimation_Uboj infinite linear;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g button .loader_nwCK:after {
  position: absolute;
  content: "";
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  top: 0.3rem;
  left: 0.3rem;
  background-color: var(--primary1);
  border-radius: 50%;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g .messageStatus_m__V {
  padding: 0.7rem 1rem;
  display: none;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g .messageStatus_m__V.show_L8te {
  display: block;
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g .messageStatus_m__V.show_L8te.success_fYBV {
  border: 2px solid var(--success);
}
.contactContainer_VC5E .contact__YEz .contactForm_FX9g .messageStatus_m__V.show_L8te.wrong_I7zk {
  border: 2px solid var(--danger);
}

@keyframes loaderAnimation_Uboj {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@media screen and (max-width: 1000px) {
  .contactContainer_VC5E .contact__YEz {
    padding: 4rem 5rem;
  }
}
@media screen and (max-width: 770px) {
  .contactContainer_VC5E .contact__YEz {
    padding: 1.5rem;
  }
}
/*!*****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/main_content/sections/widgets/index.sass ***!
  \*****************************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.widgetContainer_KmR1 {
  position: relative;
}
.widgetContainer_KmR1 .widgets_HGRT {
  display: flex;
}

@media screen and (max-width: 770px) {
  .widgetContainer_KmR1 .widgets_HGRT {
    flex-direction: column;
  }
}
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/main_content/components/widget/index.sass ***!
  \******************************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.widget_yxRH {
  background-color: var(--widgetBg);
  padding: 9rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  --text-color: var(--secondary1);
}
.widget_yxRH .icon_zwFJ {
  fill: var(--icon);
}
.widget_yxRH .bg_DzGF {
  background-color: var(--bg);
}
.widget_yxRH.second_vZWS {
  --widgetBg: var(--primary2);
  --icon: var(--secondary1);
  --bg: var(--secondary2Text);
}
.widget_yxRH.first_Nu0J {
  --widgetBg: var(--primary1);
  --icon: var(--primary2);
  --bg: var(--secondary1);
}
.widget_yxRH.third_KLii {
  --widgetBg: var(--primary3);
  --text-color: var(--secondary3);
  --icon: var(--primary2);
  --bg: var(--secondary1);
}
.widget_yxRH img {
  width: 10rem;
  height: 10rem;
  object-fit: contain;
}
.widget_yxRH .text_P5DR {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: var(--text-color);
}

@media screen and (max-width: 770px) {
  .widget_yxRH {
    padding: 2rem;
  }
}
/*!********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/projects/index.sass ***!
  \********************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.projectsPage_cQdy {
  position: relative;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto 4rem auto;
  padding: 8rem 1.2rem 0 1.2rem;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  justify-items: center;
}
.projectsPage_cQdy .backWrapper_Xj5r {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.1rem;
  color: var(--primaryText);
  left: 1.2rem;
  top: 5rem;
  text-decoration: none;
  transition: 0.35s;
}
.projectsPage_cQdy .backWrapper_Xj5r:hover {
  color: var(--primary1);
}
.projectsPage_cQdy .hoverDim_cpUw {
  position: absolute;
  background-color: var(--specialLowerOpacity);
  opacity: 0;
  visibility: hidden;
  transition: 1s;
  backdrop-filter: blur(2px) grayscale(100%) brightness(80%);
  transform: translate(25px, 25px);
}
.projectsPage_cQdy .hoverDim_cpUw.hover_SlQ2 {
  visibility: visible;
  opacity: 1;
}

@media screen and (max-width: 1299px) {
  .projectsPage_cQdy .backWrapper_Xj5r {
    top: 6rem;
  }
}
@media screen and (max-width: 850px) {
  .projectsPage_cQdy {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 550px) {
  .projectsPage_cQdy {
    grid-template-columns: repeat(1, 1fr);
  }
  .projectsPage_cQdy .backWrapper_Xj5r {
    font-size: 1rem;
  }
}
/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/projects/components/projectItem/index.sass ***!
  \*******************************************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.projectItem_wahH {
  position: relative;
  overflow: hidden;
}
.projectItem_wahH a {
  text-decoration: none;
}
.projectItem_wahH a:hover span {
  visibility: visible;
  opacity: 1;
}
.projectItem_wahH a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.projectItem_wahH a span {
  position: absolute;
  content: "Show More";
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: 1s;
  color: var(--white);
  z-index: 1;
}
/*!*********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/sections/footer/index.sass ***!
  \*********************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.footer_qYHC {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 6rem;
  gap: 1rem;
}
.footer_qYHC .socialsMedias_ChHp {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.footer_qYHC .socialsMedias_ChHp span a {
  font-size: 1.8rem;
}
.footer_qYHC .copyright_VBya {
  text-align: center;
}
.footer_qYHC .copyright_VBya a, .footer_qYHC .socialsMedias_ChHp a {
  color: var(--primaryText);
  text-decoration: none;
  transition: 0.35s;
}
.footer_qYHC .copyright_VBya a:hover, .footer_qYHC .socialsMedias_ChHp a:hover {
  color: var(--primary1);
}
/*!**********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/sections/sidebar/index.sass ***!
  \**********************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.sidebar_Xrt9 {
  position: fixed;
  top: 4rem;
  right: -100%;
  padding: 3rem 7.3rem 3rem 3rem;
  z-index: 5;
  height: 100vh;
  background-color: var(--primaryBg);
  transition: 0.35s;
}
.sidebar_Xrt9 .list_BQZn {
  position: relative;
  display: flex;
  list-style: none;
  flex-direction: column;
  margin-right: 2rem;
  gap: 2rem;
}
.sidebar_Xrt9 .list_BQZn li a {
  text-decoration: none;
  text-transform: capitalize;
  color: var(--primaryText);
  font-weight: 500;
  transition: 0.3s;
}
.sidebar_Xrt9 .list_BQZn li a:hover {
  color: var(--primary1);
}
.sidebar_Xrt9 .list_BQZn li a.active_a3Cz {
  color: var(--primary1);
}
.sidebar_Xrt9 .list_BQZn .line_pYdb {
  position: absolute;
  height: 3px;
  background-color: var(--primary1);
  bottom: -0.5rem;
  z-index: 1;
  transition: 0.3s;
}

.sidebar_Xrt9.open_HTlS {
  right: 0;
}

@media screen and (min-width: 1300px) {
  .sidebar_Xrt9 {
    right: 0;
    left: 0;
    top: -10%;
    height: auto;
    padding: 2rem;
  }
  .sidebar_Xrt9 .list_BQZn {
    flex-direction: row;
    justify-content: center;
  }
  .sidebar_Xrt9.open_HTlS {
    top: 0;
  }
}
@media screen and (max-width: 570px) {
  .sidebar_Xrt9 {
    width: 100%;
    padding: 3rem;
    display: flex;
    justify-content: center;
  }
}
@media screen and (max-width: 410px) {
  .sidebar_Xrt9 {
    top: 1.5rem;
  }
}
/*!********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/pages/notfound/index.sass ***!
  \********************************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

.notFoundPage_rw5C {
  position: relative;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto 4rem auto;
  padding-top: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  color: var(--primaryText);
}
.notFoundPage_rw5C h3 {
  font-size: 2.5rem;
}
.notFoundPage_rw5C p {
  font-size: 1.6rem;
  text-align: center;
  padding: 0 1rem;
}
.notFoundPage_rw5C span {
  font-size: 17rem;
  font-weight: 700;
  color: var(--primary1);
}
.notFoundPage_rw5C .tryAgain_s6Op {
  font-size: 1rem;
}
.notFoundPage_rw5C .tryAgain_s6Op a {
  text-decoration: none;
  color: var(--primary1);
}

@media screen and (max-width: 750px) {
  .notFoundPage_rw5C span {
    font-size: 6rem;
  }
}
/*!*****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/index.sass ***!
  \*****************************************************************************************************************************************************************/
:root {
  --black: #000;
  --white: #fff;
  --primaryText: #fff;
  --secondaryText: #605777;
  --secondary2Text: #605777;
  --primaryBg: #171321;
  --primary1: #f393a4;
  --primary1Darker: #ed5c76;
  --secondary1: #f8f3f7;
  --primary2: #362f47;
  --secondary2: #eae0e9;
  --primary3: #7e5a7b;
  --secondary3: #f8f3f7;
  --special: #605777;
  --specialLowerOpacity: #60577777;
  --success: #46b450;
  --danger: #bb1d3b;
}

@font-face {
  font-family: montserrat;
  src: url(7179b7d2ac9b599db5f9.ttf);
  font-weight: 300;
}
@font-face {
  font-family: montserrat;
  src: url(24785cc015b27a3e964b.ttf);
  font-weight: 400;
}
@font-face {
  font-family: montserrat;
  src: url(b8c6753baa964ccac1ba.ttf);
  font-weight: 500;
}
@font-face {
  font-family: montserrat;
  src: url(93b37a465fc4ec0d0415.ttf);
  font-weight: 600;
}
@font-face {
  font-family: montserrat;
  src: url(50f0257aa1e905f4bfaf.ttf);
  font-weight: 700;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  user-select: none;
  cursor: none;
}

body {
  font-family: montserrat;
  background-color: var(--primaryBg);
  color: var(--primaryText);
  overflow-x: hidden;
}
body[data-theme=light] {
  --primaryText: #7a5932;
  --secondaryText: #7a5932;
  --secondary2Text: #bea17d;
  --primaryBg: #faeddf;
  --primary1: #188497;
  --primary1Darker: #24c1dc;
  --secondary1: #fcf7f1;
  --primary2: #f8a577;
  --secondary2: #f0deca;
  --special: #188497;
  --specialLowerOpacity: #18849744;
  --primary3: #fff48f;
  --secondary3: #9e7e63;
}

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

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
  background: var(--special);
  border-radius: 2rem;
}

/*# sourceMappingURL=main.css.map*/