@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Reenie+Beanie&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
html {
    scroll-behavior: smooth;
}
  
body {
    background-color: var(--bgColor);

    min-width: 100%;
    min-height: 100svh;

    overflow-x: hidden;

    position: relative;
    z-index: 0;

    font-family: "Raleway", system-ui;
    font-optical-sizing: auto;
    font-style: normal;

    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.3s, color 0.3s;

    cursor: default;
}
p {
    line-height: 1.5;
}
a {
    text-decoration: none;
    color: var(--textColor);
    cursor: pointer;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--textColor);
}
::-moz-selection {
    color: white;
    background: var(--linkColor);
}

::selection {
    color: white;
    background: var(--linkColor);
}

.h-style {
    font-size: 36px;
    font-weight: 500;
    font-style: italic;
}
.h-span {
    color: var(--primaryColor);
}

:root {
    --bgColor: #dcdad9;
    --secBgColor: rgba(255, 255, 255, 0.5);
    --thirdBgColor: #676767;
    --fourthBgColor: #b2b2b2;
    --fifthBgColor: #989898;
    --divBackground: rgba(255, 255, 255, 0.4);
    --divBorderBg: rgba(228, 228, 228, 0.2);
    --mobilMenuBg: rgba(255, 255, 255, 0.3);
    --mobilMenuBorder: rgba(228, 228, 228, 0.2);
    --themeIcon: #E4E0DD;
    --linkColor: #4A43CB;
    --linkHoverColor: #574fe9;
    --linkActiveColor: rgb(54, 51, 119);
    --primaryColor: #DB7E80;
    --textColor: #333533;
    --footerLinkColor: #b0b0b0;
    --secTextColor: #b0b0b0;
    --thirdTextColor: #676767;
    --darkSecBgColor: #333533;

    --heroBgCover01: rgba(54, 228, 42, 0.5);
    --heroBgCover02: rgba(66, 246, 50, 0.6);
    --footerBg: #181818;
    --buttonBg: #242423;
    --buttonBorder: #E4E0DD;
    --buttonHover: #2f2f2f;
    --buttonText: #E4E0DD;
    --inputBackground: #f1eeee;
    --inputBorderBg: #dedede;
    --backgroundIcon: #dedede;
    --jobsBorder: #e5e1dc;

    --commentBg: #EAE8E5;
    --quoteIcon: #3b373698;

    --patternOpacity: 0.2;
    --borderRadius: 15px;
}
.dark-theme {
    --bgColor: #060B0F;
    --secBgColor: rgba(60, 61, 60, 0.5);
    --thirdBgColor: #333533;
    --fourthBgColor: #b2b2b2;
    --fifthBgColor: #242423;

    /*  DIV background */
    --divBackground: linear-gradient(140deg, rgba(228,224,221,0.1) 0%, rgba(49,127,190,0.1) 100%);
    --divBorderBg: rgba(255, 255, 255, 0.1);
    --divInputText: rgba(255, 255, 255, 0.2);

    --mobilMenuBg: rgba(60, 61, 60, 0.3);
    --mobilMenuBorder: rgba(60, 60, 60, 0.2);
    --themeIcon: #E4E0DD;
    --linkColor: #4A43CB;
    --linkHoverColor: #574fe9;
    --linkActiveColor: rgb(54, 51, 119);
    --primaryColor: #DB7E80;
    --textColor: #E4E0DD;
    
    --secTextColor: #9E9E9E;
    --thirdTextColor: #9E9E9E;
    --darkSecBgColor: #333533;/* 
    --heroBgCover01: rgba(31, 27, 116, 0.89);
    --heroBgCover02: rgb(57, 45, 179); */
    
    --heroBgCover01: rgba(219, 126, 128, 0.2);
    --heroBgCover02: rgba(227, 111, 113, 0.5);

    
    /* Footer */
    --footerBg: #060B0F;
    --footerLinkColor: #9E9E9E;

    /* button styles for button-2*/
    --buttonBg: transparent;
    --buttonBorder: #E4E0DD;
    --buttonHover: #2f2f2f;
    --buttonText: #E4E0DD;

    /* form */
    --inputBackground: #060B0F;
    --inputBorderBg: #1F1E1F;

    --backgroundIcon: #373333;
    --jobsBorder: #3F3E3E;

    --commentBg: #24222198;
    --quoteIcon: #0c0a0a98;

    --patternOpacity: 0.1;
    --borderRadius: 15px;

    /* sun light */
    --stripe-color: #060b0f;
    --bg: var(--stripe-color);
    --maincolor: var(--bg);
}

.custom-cursor-hero {
    width: 100%;
    height: 560px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;

}
#bg {
    width: 100%;
    height: 100svh;
    position: absolute;
    top: -2px;
    left: 0;
    z-index: -1;
    background-size: 50px 50px;
    background-image: linear-gradient(to right, var(--heroBgCover01) 1px, transparent 1px), linear-gradient(to bottom, var(--heroBgCover02) 1px, transparent 1px);

}
#bg2 {
    width: 100%;
    height: 100svh;
    position: absolute;
    top: -2px;
    left: 0;
    z-index: -1;
    background-size: 50px 50px;
    background-image: linear-gradient(to right, rgba(114, 114, 114, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(114, 114, 114, 0.1) 1px, transparent 1px);
}
#bg3 {
    width: 100%;
    min-height: 900px;
    position: absolute;
    opacity: 0.5;
    top: -2px;
    left: 0;
    z-index: -1;
    background-size: 50px 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bgColor));
}

.page { display: none !important }
.active { display: flex !important; }


.hide {
    display: none !important
}

.hover:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.icon, .link {
    -webkit-transition: all 150ms ease-in-out; 
    -moz-transition: all 150ms ease-in-out; 
    transition: all 150ms ease-in-out; 
}
.link:hover {
   color: #f6f0f0; 
}