.light-theme {
    // GENERAL
    --bodyBg: #f2f2f2;
    --h1Color: #f2f2f2;
    --h2Color: #303538;
    --h3Color: #303538;
    --pColor: #303538;
    --item-white-bg: #fff;
    --logoColor: #26547a;
    --logo-color-extralight: #d9ecfc;
    --fullWhiteColor : #f2f2f2;
    --white-light-transparent: #f6f4f177;
    --gray-light-transparent: #e7e7e7d4;

    // SECTIONS
    --sectionTextColor: #303538;

    // WELCOME (SECTION)
    --welcomeLinear: linear-gradient(151deg, #e2e2e2 0%,#192831 100%);
    --welcomeTextColor: #f2f2f2;
    --welcomeLinear-820px: linear-gradient(151deg, #e2e2e2 0%,#192831 100%);

    // INTRO (SECTION)
    --introItemIconColor: #586167;

    // SKILL (SECTION)
    --skillBannerBg: #26547a;

    // SERVICE (SECTION)
    --serviceItemHoverBg: #013a68be;
    --serviceItemHoverTextColor: #f2f2f2;
    --serviceItemHoverIconColor : #b9b9b9;
    --serviceItemIconBg : #26547a;
    --serviceItemIconColor : #f2f2f2;

    // COMMENT (SECTION)
    --commentLinear: linear-gradient(127deg, #586167 0%, #26547a 100%);
    --commentModalLinear: linear-gradient(360deg, rgba(38,84,122,1) 0%, rgba(38,84,122,1) 52%, rgba(50,109,158,1) 100%);
    --commentTextColor: #f2f2f2;
    --commentItemTextColor: #303538;
    --commentModalTextColor: #f2f2f2;
    --slickDotsColor: #dfdfdf;
    --slickDotsActiveColor: #303538;

    // STEP (SECTION)
    --stepItemTextColor: #f2f2f2;
    --stepItemTextShadow: 1px 1px 1px rgba(150, 150, 150, 1);
    --stepItemBg: linear-gradient(360deg, rgba(38,84,122,1) 0%, rgba(38,84,122,1) 52%, rgba(50,109,158,0.7) 100%);
    --stepItemColor: #f2f2f2;
    --stepContentBg: rgba(38,84,122,1);

    // REA (SECTION)
    --reaBannerIconColor: #f2f2f2;
    --reaBannerTextColor: #f2f2f2;
    --reaBannerBg: linear-gradient(127deg, #586167 0%, #434a4e 91%);
    --reaListTextColor: #f2f2f2;
    --reaListLinear: linear-gradient(127deg, #3d4549ea 0%, #5c666bc2 91%);
    --reaListLinkBg: #26547a;
    
    // OFFER
    --offerFormStartBg: linear-gradient(180deg, #1868a8 0%, #144369 100%);
    --offerFormStartBtnBg: #1868a8;

    // CONTACT
    --contactCoordsBg: #26547a;
    --contactCoordsTextColor: #f2f2f2;
    --contactCoordsIconColor: #303538;
    --contactFormFieldsBg: #fff;
    --contactFormFieldsColor: #303538;
    --contactFomrFieldsShadow: none;
    --contactFormFieldsBorder: 1px solid #ced4da;


    // FOOTER (SECTION)
    --footerShadow: drop-shadow(0 4px 4px rgb(99, 97, 97));
    --footerCRBg: #26547a;
    --footerCRColor: #f2f2f2;

    // BUTTONS
    --headerBtnColor: #f2f2f2;
    --headerBtnHoverColor: #f2f2f2;
    --headerBtnBorderHoverColor: #f2f2f2;
    --headerBtnHoverBg: #26547a;
    --mainBtnColor: #586167;
    --mainBtnBg: #2c628f8f;
    --mainBtnHoverBg: #26547a;
    --mainBtnHoverColor: #f2f2f2;
    --sendBtnBg: #f5f5f5;
    --sendBtnColor: #555;
    --topBtnBg: #586167;
    --topBtnColor: #f2f2f2;
    --slickBtnColor: #f2f2f2;
    --burgerBtnColor: #e2e2e2;
    --burgerBtnScrolledColor: #586167;
    --burgerClickedColor: #586167;
    --serviceBackBtnColor: #26547a;
    --commentBtnBg: #718ca1b7;
    --commentBtnColor: #f2f2f2;
    --commentBtnHoverBg: #f2f2f2;
    --commentBtnHoverColor: #26547a;
    --postBtnBg: #26547a;
    --postBtnColor: #f2f2f2;

    // NAVBAR
    --navSmLinkColor: #586167;
    --navLgLinkColor: #f2f2f2;
    --footerNavHoverLink: #26547a;

    // SHADOWS
    --shadowDark-075: rgba(0, 0, 0, 0.75);
    --shadowLogo: drop-shadow(0px 0px 20px #f2f2f2);
    --aboutAreaShadow: drop-shadow(0 0 5px #e2e2e2);
    --box-shadow-1: 0 0px 10px -3px rgba(0, 0, 0, 0.75);
    --box-shadow-2: 0 0 3px 3px rgba(0, 0, 0, 0.05);
    --box-shadow-3: 0 0px 3px 1px rgba(0, 0, 0, 0.1);
    --shadow-logoColor: 0 0 1px 1px rgba(38, 84, 122, 0.452);

    // OVERLAY
    --overlay-color: rgba(0, 0, 0, 0.3);

    // FLASH
    --flashSuccessBg: #93d496;
    --flashSuccessColor: #f2f2f2;
    --flashErrorBg: #d47474;
    --flashErrorColor: #613535;

    // SHAPES
    --bodyShapeDisplay: block;
    --aboutShape: url('../../public/images/about/about-bg.svg');
    --shapeShadow: drop-shadow(0 0 8px #e2e2e2);


    // SOCIAL
    --facebook: #4867AA;
    --linkedin: #267AA8;

    // POST
    --itemsFilterLabelBg: #26547a;
    --searchBarBg: #fff;
    --searchBarIconColor: #26547a;
    --shadow: 0 0 8px -4px #525252;
    --filtersCtnBg: #fff;
    --sortingBg: #26547a;
    --sortingColor: #f2f2f2;
    --sortingHoverBg: #5581dae0;
    --filterOpenBtnBg: #26547a;
    --filterOpenBtnColor: #fff;
    --isLoadingBg: #f2f2f2;
    --loadingSpinnerColor: #26547a;
    --cardBg: #fff;
    --cardTextColor: #222222;
    --cardMoreBtnBg: #26547a;
    --cardMoreBtnHoverBg: #5581dae0;
    --collapseHeaderBg: #f2f2f2;
    --collapseHeaderColor: #26547a;
    --collapseHeaderHoverColor: #5ca3dd;
    --postBtnHover: #7EAACE;

    /* ALERT COLORS */
    --custom-red-light: #ffe8e8;
    --custom-green: #a9c62b;
    --custom-green-light: #d5e97c;
    --custom-green-dark: #768a1f;
    --custom-error: #ba3e46;
    --custom-error-light1: #f8d7da;
    --custom-error-light2: #f5c2c7;
    --custom-warning: #FEC107;
    --custom-info: #1BA2B8;

    --primary-transparent: color-mix(
      in lch,
      var(--primary),
      60% transparent
    );

    --lychee-transparent: color-mix(
      in lch,
      var(--lychee),
      60% transparent
    );
}


.dark-theme {
    // GENERAL
    --bodyBg: #323C4B;
    --h1Color: #f2f2f2;
    --h2Color: #f2f2f2;
    --h3Color: #f2f2f2;
    --pColor: #f3f3f3;
    --item-white-bg: #252e3a;
    --shadow: 0 0 8px -4px #000;
    --logo-color-extralight: #d9ecfcab;
    --fullWhiteColor : #f2f2f2;
    --white-light-transparent: #394658c4;
    --gray-light-transparent: #394658c4;
    
    // SECTIONS
    --sectionTextColor: #f2f2f2;

    // WELCOME (SECTION)
    --welcomeLinear: linear-gradient(151deg, #5b6175 0%,#101b29 100%);
    --welcomeTextColor: #f2f2f2;
    --welcomeLinear-820px: linear-gradient(151deg, #e2e2e2 0%,#192831 100%);

    // INTRO (SECTION)
    --introItemIconColor: #f2f2f2;

    // SKILL (SECTION)
    --skillBannerBg: var(--item-white-bg);

    // SERVICE (SECTION)
    --serviceItemHoverBg: #162a3bbe;
    --serviceItemHoverTextColor: #f2f2f2;
    --serviceItemHoverIconColor : #b9b9b9;
    --serviceItemIconBg : #1D2E3F;
    --serviceItemIconColor : #f2f2f2;

    // COMMENT (SECTION)
    --commentLinear: linear-gradient(127deg, #586167 0%, #26547a 100%);
    --commentModalLinear: linear-gradient(360deg, rgba(38,84,122,1) 0%, rgba(38,84,122,1) 52%, rgba(50,109,158,1) 100%);
    --commentTextColor: #f2f2f2;
    --commentItemTextColor: #f2f2f2;
    --commentModalTextColor: #f2f2f2;
    --slickDotsColor: #dfdfdf;
    --slickDotsActiveColor: #303538;

    // STEP (SECTION)
    --stepItemTextColor: #f2f2f2;
    --stepItemTextShadow: 1px 1px 1px rgb(16, 24, 49);
    --stepItemBg: linear-gradient(360deg, rgb(19, 42, 61) 0%, rgb(15, 36, 53) 52%, rgba(21, 51, 75, 0.7) 100%);
    --stepItemColor: #f2f2f2;
    --stepContentBg: rgb(19, 44, 65);

    // OFFER
    --offerFormStartBg: linear-gradient(180deg, #0b2133 0%, #103250 100%);
    --offerFormStartBtnBg: #0b2133;

    // REA (SECTION)
    --reaBannerIconColor: #f2f2f2;
    --reaBannerTextColor: #f2f2f2;
    --reaBannerBg: linear-gradient(127deg, #586167 0%, #434a4e 91%);
    --reaListTextColor: #f2f2f2;
    --reaListLinear: linear-gradient(127deg, #3d4549ea 0%, #5c666bc2 91%);
    --reaListLinkBg: #26547a;

    // CONTACT
    --contactCoordsBg: #f2f2f2;
    --contactCoordsTextColor: #303538;
    --contactCoordsIconColor: #f2f2f2;
    --contactFormFieldsBg: #323C4B;
    --contactFormFieldsColor: #f2f2f2;
    --contactFomrFieldsShadow: inset 0px 0px 15px 0px rgba(28,28,28,1);
    --contactFormFieldsBorder: none;
    
    // FOOTER (SECTION)
    --footerBg: var(--bodyBg);
    --footerNavLinkColor: #f2f2f2;
    --footerNavHoverLink: #ffffff;
    --footerCRBg: #102333;
    --footerCRColor: #f2f2f2;
    --footerShadow: drop-shadow(0 4px 4px rgb(43, 43, 43));

    // BUTTONS
    --headerBtnColor: #f2f2f2;
    --headerBtnHoverColor: #f2f2f2;
    --headerBtnBorderHoverColor: #f2f2f2;
    --headerBtnHoverBg: #26547a;
    --mainBtnColor: #f2f2f2;
    --mainBtnBg: #92afc78a;
    --mainBtnHoverBg: #527491;
    --mainBtnHoverColor: #f2f2f2;
    --sendBtnBg: #323C4A;
    --sendBtnColor: #f2f2f2;
    --topBtnBg: #586167;
    --topBtnColor: #f2f2f2;
    --slickBtnColor: #f2f2f2;
    --burgerBtnColor: #e2e2e2;
    --burgerBtnScrolledColor: #e2e2e2;
    --burgerClickedColor: #f2f2f2;
    --serviceBackBtnColor: #f2f2f2;
    --commentBtnBg: #718ca1b7;
    --commentBtnColor: #f2f2f2;
    --commentBtnHoverBg: #f2f2f2;
    --commentBtnHoverColor: #26547a;

    // NAVBAR
    --navSmLinkColor: #f2f2f2;
    --navLgLinkColor: #f2f2f2;
    --activeBurgerColor: #f2f2f2;

    // SHADOWS
    --shadowDark-075: rgba(0, 0, 0, 0.75);
    --shadowLogo: none;
    --aboutAreaShadow: drop-shadow(0 0 5px #272727);
    --box-shadow-1: 0 0px 10px -3px rgba(0, 0, 0, 0.75);
    --box-shadow-2: 0 0 3px 3px rgba(0, 0, 0, 0.05);
    --box-shadow-3: 0 0px 3px 1px rgba(0, 0, 0, 0.1);
    --shadow-logoColor: 0 0 1px 1px rgba(194, 194, 194, 0.452);



    // OVERLAY
    --overlay-color: rgba(0, 0, 0, 0.3);

    // FLASH
    --flashSuccessBg: #93d496;
    --flashSuccessColor: #f2f2f2;
    --flashErrorBg: #d47474;
    --flashErrorColor: #5a3131;

    // SHAPES
    --bodyShapeDisplay: block;
    --aboutShape: url('../../public/images/about/about-bg-dark.svg');
    --shapeShadow: drop-shadow(0 0 8px #272f3a);


    // SOCIAL
    --facebook: #4867AA;
    --linkedin: #267AA8;

    // POST
    --searchBarIconColor: #f2f2f2;
    --searchBarBg: #323C4B;
    --isLoadingBg: #323C4B;
    --filterOpenBtnBg: #252e3a;
    --itemsFilterLabelBg: #323C4B;
    --sortingBg: #252e3a;
    --cardBg: #323C4B;
    --postBtnBg: #252e3a;
    --postBtnHover: #14253B;

    /* ALERT COLORS */
    --custom-red-light: #ffe8e8;
    --custom-green: #a9c62b;
    --custom-green-light: #d5e97c;
    --custom-green-dark: #768a1f;
    --custom-error: #ba3e46;
    --custom-error-light1: #f8d7da;
    --custom-error-light2: #f5c2c7;
    --custom-warning: #FEC107;
    --custom-info: #1BA2B8;
  
    --primary-transparent: color-mix(
      in lch,
      var(--primary),
      60% transparent
    );
    
    --lychee-transparent: color-mix(
      in lch,
      var(--lychee),
      60% transparent
    );
}


  /////////////////////////////////////////////////
  // Mixins
  /////////////////////////////////////////////////
  @mixin crater($top, $left, $size) {
    content: '';
    position: absolute;
    top: $top;
    left: $left;
    width: $size;
    height: $size;
    background-color: #EFEEDA;
    border-radius: 100%;
    border: 4px solid #DEE1C5;
  }
  
  @mixin cloudBubble($top, $right, $width, $height, $deg) {
    content: '';
    display: block;
    position: relative;
    top: $top;
    right: $right;
    width: $width;
    height: $height;
    border: 8px solid #D4D4D2;
    border-radius: 100%;
    border-right-color: transparent;
    border-bottom-color: transparent;
    transform: rotateZ($deg);
    background-color: #fff;
  }
  
  /////////////////////////////////////////////////
  // Day State
  /////////////////////////////////////////////////
.darkmode-toggle {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 40px;
    padding: 4px;  
    border-radius: 40px;
    cursor: pointer;
    transition: 0.3s transform;
    top: -2px;
    @media (max-width: 1200px) {
        position: fixed;
        right: 17%;
        top: 36px;
    }
    @media (max-width: 500px){
        right: 18%;
        top: 23px;
    }
}
  
  .darkmode-toggle:before,
  .darkmode-toggle:after {
    content: '';
    display: table;
  }
  
  .darkmode-toggle:after {
    clear: both;
  }
  
  .darkmode-toggle-bg {
    position: absolute;
    top: 4px;
    left: -4px;
    width: 100%;
    height: 100%;
    background-color: #afc5e0;
    border-radius: 40px;
    border: 3px solid #7eaace;
    transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
  
  .darkmode-toggle-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;  
    height: 100%;
    border: 1px solid red;
    border-radius: 40px;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
  }
  
  .darkmode-toggle-switch {
    position: relative;
    width: 27px;
    height: 27px;
    margin-left: 37px;
    margin-top: 6px;
    background-color: #F5EB42;
    border: 4px solid #E4C74D;
    border-radius: 50%;
    transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
  
  .darkmode-toggle-switch-figure {  
    position: absolute;
    bottom: -14px;
    left: -50px;
    display: block;
    width: 80px;
    height: 30px;
    border: 8px solid #D4D4D2;
    border-radius: 20px;  
    background-color: #fff;
    transform: scale(0.4);
    transition: all .12s cubic-bezier(0.250, 0.460, 0.450, 0.940);
    &:after {
      @include cloudBubble(-41px, -31px, 15px, 15px, 70deg);
    }
    &:before {
      @include cloudBubble(-20px, -10px, 30px, 30px, 30deg);
    }
  }
  
  .darkmode-toggle-switch-figureAlt {
    @include crater(5px, 2px, 2px);
    
    box-shadow: 32px -7px 0 -3px #fcfcfc,
                43px -10px 0 -3px #fcfcfc,
                50px 4px 0 -4px #fcfcfc,
                29px 7px 0 -2px #fcfcfc,
                48px 18px 0 -4px #fcfcfc,
                46px 0px 0 -2px #fcfcfc,
                48px 9px 0 -3px #fcfcfc;
    transition: all .12s cubic-bezier(0.250, 0.460, 0.450, 0.940);
    transform: scale(0);
  }
  
  .darkmode-toggle-switch-figureAlt:before {
    @include crater(-7px, 3px, 5px);
  }
  
  .darkmode-toggle-switch-figureAlt:after {
    @include crater(1px, 4px, 2px);
  }
  
  /////////////////////////////////////////////////
  // Night State
  /////////////////////////////////////////////////
  .darkmode-toggle-input:checked ~ .darkmode-toggle-switch {
    margin-left: 0;
    border-color: #DEE1C5;
    background-color: #FFFDF2;
  }
  
  .darkmode-toggle-input:checked ~ .darkmode-toggle-bg {
    background-color: #14253b;
    border-color: #252e3a;
  }
  
  .darkmode-toggle-input:checked ~ .darkmode-toggle-switch .darkmode-toggle-switch-figure {
    margin-left: 40px;
    opacity: 0;
    transform: scale(0.1);
  }
  
  .darkmode-toggle-input:checked ~ .darkmode-toggle-switch .darkmode-toggle-switch-figureAlt {
    transform: scale(1);
  }