:root {
    --bg-gradient: linear-gradient(
        90deg,
        rgba(28, 70, 84, 0.9) 0%,
        rgba(28, 70, 84, 0.8) 50%,
        rgba(28, 70, 84, 0) 100%);
    --background: 40 15% 97%;
    --foreground: 200 18% 12%;
    --card: 0 0% 100%;
    --card-foreground: 200 18% 12%;
    --popover: 0 0% 100%;
    --popover-foreground: 200 18% 12%;
    --primary: 195 50% 22%;
    --primary-foreground: 40 15% 97%;
    --secondary: 150 14% 52%;
    --secondary-foreground: 0 0% 100%;
    --muted: 210 14% 93%;
    --muted-foreground: 200 8% 46%;
    --accent: 150 10% 92%;
    --accent-foreground: 195 50% 22%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 210 12% 88%;
    --input: 210 12% 88%;
    --ring: 195 50% 22%;
    --radius: .25rem;
    --petrol: 195 50% 22%;
    --petrol-light: 195 40% 30%;
    --sage: 150 14% 52%;
    --sage-light: 150 10% 92%;
    --graphite: 200 12% 28%;
    --warm-white: 40 15% 97%;
    --light-grey: 210 14% 93%;
    --section-alt: 210 12% 95%;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
}




/*.dark {*/
/*    --background: 200 20% 7%;*/
/*    --foreground: 210 15% 90%;*/
/*    --card: 200 18% 10%;*/
/*    --card-foreground: 210 15% 90%;*/
/*    --popover: 200 18% 10%;*/
/*    --popover-foreground: 210 15% 90%;*/
/*    --primary: 190 40% 45%;*/
/*    --primary-foreground: 200 20% 7%;*/
/*    --secondary: 150 12% 38%;*/
/*    --secondary-foreground: 210 15% 90%;*/
/*    --muted: 200 14% 14%;*/
/*    --muted-foreground: 210 8% 55%;*/
/*    --accent: 195 15% 15%;*/
/*    --accent-foreground: 210 15% 90%;*/
/*    --destructive: 0 62.8% 30.6%;*/
/*    --destructive-foreground: 210 40% 98%;*/
/*    --border: 200 12% 18%;*/
/*    --input: 200 12% 18%;*/
/*    --ring: 190 40% 45%;*/
/*    --petrol: 190 40% 45%;*/
/*    --petrol-light: 190 35% 55%; */
/*    --sage: 150 12% 45%;*/
/*    --sage-light: 195 15% 15%;*/
/*    --graphite: 200 8% 65%;*/
/*    --warm-white: 200 20% 7%;*/
/*    --light-grey: 200 14% 14%;*/
/*    --section-alt: 200 16% 9%;*/
/*    --sidebar-background: 240 5.9% 10%;*/
/*    --sidebar-foreground: 240 4.8% 95.9%;*/
/*    --sidebar-primary: 224.3 76.3% 48%;*/
/*    --sidebar-primary-foreground: 0 0% 100%;*/
/*    --sidebar-accent: 240 3.7% 15.9%;*/
/*    --sidebar-accent-foreground: 240 4.8% 95.9%;*/
/*    --sidebar-border: 240 3.7% 15.9%;*/
/*    --sidebar-ring: 217.2 91.2% 59.8%;*/
/*}*/

.dark {
    --background: 200 20% 7%;
    --foreground: 210 15% 90%;
    --card: 200 18% 10%;
    --card-foreground: 210 15% 90%;
    --popover: 200 18% 10%;
    --popover-foreground: 210 15% 90%;
    --primary: 199 93% 82%;
    /* 190 40% 45% */
    --primary-foreground: 200 20% 7%;
    --secondary: 150 12% 38%;
    --secondary-foreground: 210 15% 90%;
    --muted: 200 14% 14%;
    --muted-foreground: 210 8% 55%;
    --accent: 195 15% 15%;
    --accent-foreground: 210 15% 90%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 200 12% 18%;
    --input: 200 12% 18%;
    --ring: 190 40% 45%;
    --petrol: 190 40% 45%;
    --petrol-light: 199 93% 82%;
    /* 190 35% 55%  */
    --sage: 150 12% 45%;
    --sage-light: 195 15% 15%;
    --graphite: 200 8% 65%;
    --warm-white: 200 20% 7%;
    --light-grey: 200 14% 14%;
    --section-alt: 200 16% 9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --bg-gradient: linear-gradient(
        90deg,
        rgba(166, 225, 252, 0.9) 0%,
        rgba(166, 225, 252, 0.8) 50%,
        rgba(166, 225, 252, 0) 100%);
}

* {
    box-sizing: border-box;
    border-color: hsl(var(--border));
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Manrope', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
}

.gradient_background{
    background: var(--bg-gradient);
}

.section-padding {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.section-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}


@media (min-width: 640px) {
    .section-padding {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 768px) {
    .section-padding {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media (min-width: 1024px) {
    .section-padding {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

@media (min-width: 1280px) {
    .section-padding {
        padding-left: 7rem;
        padding-right: 7rem;
    }
}