@import url('colors.css');

:root {
    --theme-orange-1: rgba(255, 106, 0, 0.45);
    --theme-orange-2: rgba(255, 130, 40, 0.4);
    --theme-orange-3: rgba(255, 160, 80, 0.35);
    --theme-orange-4: rgba(255, 190, 120, 0.3);
    --theme-orange-5: rgba(255, 220, 180, 0.35);
    --theme-orange-6: rgba(255, 240, 220, 0.38);
    --theme-orange-7: rgba(255, 255, 255, 0.4);
    --lightBlue: 142, 202, 230;
    --medGreen: 42, 145, 52;
    --darkGreen: 5, 74, 41;
    --darkBlue: 2, 48, 71;
    --yellow: 255, 183, 3;
    --orange: 251, 133, 0;
    --red: 201, 30, 50;
    --warmGrey: 240, 240, 240;
    --arial: Arial, sans-serif;
    --verdana: Verdana, Geneva, Tahoma, sans-serif;
    --inter: 'Inter Variable', 'Inter', sans-serif;
    --roboto: 'Roboto', sans-serif;
}


/* Main site styles */
body {
    font-family: var(--roboto);
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 0;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('/img/json_bg_white.png');
    background-repeat: repeat;
    background-size: auto;
    background-position: top left;
    opacity: .95;
    z-index: -2;
    pointer-events: none;
}

    body::after {
        content: "";
        position: fixed;
        inset: 0;
        background: 
            linear-gradient( 
                78deg, 
                rgba(var(--medGreen), .6),
                rgba(var(--yellow), .6),
                rgba(var(--darkBlue), .75),
                rgba(var(--lightBlue), .9));
        z-index: -1;
        pointer-events: none;
    }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--inter) !important;
    font-weight: bold;
}



/*.bg-color-opacity {
    background: linear-gradient( to bottom, rgba(255, 106, 0, 0.4), rgba(255, 255, 255, 0.4) );
}*/

/*to bottom
to top
to right
to bottom right
45deg*/
/*.mainBannerBg {
    background: linear-gradient( to bottom right, var(--theme-orange-1) 0%, var(--theme-orange-2) 16%, var(--theme-orange-3) 33%, var(--theme-orange-4) 50%, var(--theme-orange-5) 67%, var(--theme-orange-6) 84%, var(--theme-orange-7) 100% );
}*/

.fs-featureHeading {
  font-size: clamp(2.4rem, 1.75vw + 1rem, 2.75rem);
}

.fs-featureText {
  font-size: clamp(1.75rem, 1.5vw + 1rem, 1.9rem);
  line-height: 3rem !important;
}

.fs-nav  {
  font-size: clamp(1.4rem, 1.5vw + 0.5rem, 2rem);
}

.dropdown-item:hover { background-color:transparent !important; }

.topBgWrapper {
    background: linear-gradient( 
    185deg,
    rgba(var(--lightBlue), 0.6),
    rgba(var(--medGreen), 0.8),
    rgba(var(--orange), 0.6),
    rgba(var(--lightBlue), 0.6),
    rgba(var(--lightBlue), 0.7));
}

.navBg {
    background: linear-gradient( 
        175deg, 
        rgba(var(--lightBlue), 0.4),
        rgba(var(--medGreen), 0.7),
        rgba(var(--orange), 0.5),
        rgba(var(--lightBlue), 0.7));
}

.mainBannerBg {
    background: linear-gradient( 
        12deg,
        rgba(var(--lightBlue), 0.6),
        rgba(var(--medGreen), 0.8),
        rgba(var(--orange), 0.6),
        rgba(var(--lightBlue), 0.6),
        rgba(var(--lightBlue), 0.7));
}

.feature1Bg {
    background: linear-gradient( 
        10deg, 
        rgba(var(--medGreen), 0.7) 30%,
        rgba(var(--lightBlue), 0.8) 70%);
}

.feature2Bg {
    background: linear-gradient( 
        175deg, 
        rgba(var(--darkGreen), 0.6), 
        rgba(var(--medGreen), 0.6),
        rgba(var(--lightBlue), 0.7),
        rgba(var(--lightBlue), 0.8),
        rgba(var(--darkBlue), 0.35));
}

.feature3Bg {
    background: linear-gradient( 
        174deg, 
        rgba(var(--lightBlue), 0.5),
        rgba(var(--lightBlue), 0.65),
        rgba(var(--darkBlue), 0.65), 
        rgba(var(--darkBlue), 0.75),
        rgba(var(--darkBlue), 0.55),
        rgba(var(--yellow), 0.55),
        rgba(var(--orange), 0.6));
}

.feature4Bg {
    background: linear-gradient( 
        174deg, 
        rgba(var(--orange), 0.6),
        rgba(var(--yellow), 0.55),
        rgba(var(--lightBlue), 0.65), 
        rgba(var(--medGreen), 0.75));
}

.downloadBg {
    background: linear-gradient( 
        10deg, 
        rgba(var(--darkGreen), 0.6), 
        rgba(var(--medGreen), 0.6),
        rgba(var(--lightBlue), 0.7),
        rgba(var(--lightBlue), 0.8),
        rgba(var(--darkBlue), 0.35));
}


/*editor.html CSS*/
.fs-editorHeading {
  font-size: clamp(2.4rem, 1.75vw + 1rem, 3rem);
}

.fs-editorSubHeading {
  font-size: clamp(1.75rem, 1.75vw + 1rem, 2rem);
}

.fs-editorText {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 1.75rem);
  line-height: 3rem !important;
}

@media (max-width: 1750px) {
  #FeatureImg2 {
    width: 100% !important;
    max-width: 600px;
  }

  .feature2Bg .col-md-5 {
    order: 2 !important;
    width: 100%;
    margin-top: 2rem;
  }

  .feature2Bg .col-md-7 {
    order: 1 !important;
    width: 100%;
  }

  .feature2Bg .row {
    flex-direction: column !important;
    align-items: center;
  }
}