/* =========================================
   VISALWEB GLOBAL STYLESHEET
   ========================================= */


/* =========================================
   CSS VARIABLES
   ========================================= */

:root {

    /* Primary Colors */

    --color-orange: #ff6b00;

    --color-blue: #2563eb;

    --color-pink: #ec4899;

    --color-green: #16a34a;


    /* Neutral Colors */

    --color-black: #111111;

    --color-dark: #1f2937;

    --color-gray: #6b7280;

    --color-light-gray: #f3f4f6;

    --color-white: #ffffff;


    /* Background Colors */

    --bg-white: #ffffff;

    --bg-light: #f8fafc;

    --bg-dark: #111827;


    /* Typography */

    --font-primary:
        Arial,
        Helvetica,
        sans-serif;


    /* Container */

    --container-width: 1200px;


    /* Border Radius */

    --radius-small: 6px;

    --radius-medium: 12px;

    --radius-large: 20px;


    /* Shadows */

    --shadow-small:
        0 4px 12px rgba(0, 0, 0, 0.08);

    --shadow-medium:
        0 10px 30px rgba(0, 0, 0, 0.10);

    --shadow-large:
        0 20px 50px rgba(0, 0, 0, 0.12);


    /* Transitions */

    --transition-fast:
        0.2s ease;

    --transition-medium:
        0.3s ease;

    --transition-slow:
        0.5s ease;

}


/* =========================================
   CSS RESET
   ========================================= */

*,
*::before,
*::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


/* =========================================
   HTML
   ========================================= */

html {

    scroll-behavior: smooth;

}


/* =========================================
   BODY
   ========================================= */

body {

    font-family:
        var(--font-primary);

    font-size: 16px;

    line-height: 1.6;

    color: var(--color-black);

    background-color: var(--bg-white);

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}


/* =========================================
   HEADINGS
   ========================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

    margin: 0;

    line-height: 1.2;

    font-weight: 700;

}


/* =========================================
   PARAGRAPHS
   ========================================= */

p {

    margin: 0;

}


/* =========================================
   LINKS
   ========================================= */

a {

    color: inherit;

    text-decoration: none;

}


/* =========================================
   IMAGES
   ========================================= */

img {

    display: block;

    max-width: 100%;

    height: auto;

}


/* =========================================
   FORM ELEMENTS
   ========================================= */

button,
input,
textarea,
select {

    font: inherit;

}


/* =========================================
   BUTTON
   ========================================= */

button {

    border: none;

    cursor: pointer;

}


/* =========================================
   LISTS
   ========================================= */

ul,
ol {

    list-style: none;

}


/* =========================================
   GLOBAL CONTAINER
   ========================================= */

.container {

    width: 100%;

    max-width: var(--container-width);

    margin: 0 auto;

    padding-left: 20px;

    padding-right: 20px;

}


/* =========================================
   SECTION CONTAINER
   ========================================= */

.section-container {

    width: 100%;

    max-width: var(--container-width);

    margin: 0 auto;

    padding-left: 20px;

    padding-right: 20px;

}


/* =========================================
   SECTION LABEL
   ========================================= */

.section-label {

    display: inline-block;

    margin-bottom: 15px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: var(--color-orange);

}


/* =========================================
   SECTION TITLE
   ========================================= */

.section-title {

    margin-bottom: 20px;

    font-size:
        clamp(32px, 5vw, 52px);

    font-weight: 700;

    line-height: 1.15;

    color: var(--color-black);

}


/* =========================================
   SECTION TITLE HIGHLIGHT
   ========================================= */

.section-title span {

    color: var(--color-orange);

}


/* =========================================
   SECTION DESCRIPTION
   ========================================= */

.section-description {

    max-width: 700px;

    margin-bottom: 40px;

    font-size: 17px;

    line-height: 1.8;

    color: var(--color-gray);

}


/* =========================================
   SECTION HEADING
   ========================================= */

.section-heading {

    max-width: 800px;

    margin: 0 auto 50px;

    text-align: center;

}


/* =========================================
   SECTION BUTTON
   ========================================= */

.section-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 24px;

    border-radius: var(--radius-small);

    background-color: var(--color-orange);

    color: var(--color-white);

    font-size: 15px;

    font-weight: 600;

    transition:
        transform var(--transition-medium),
        background-color var(--transition-medium),
        box-shadow var(--transition-medium);

}


/* =========================================
   SECTION BUTTON HOVER
   ========================================= */

.section-button:hover {

    background-color: var(--color-black);

    transform: translateY(-2px);

    box-shadow: var(--shadow-medium);

}


/* =========================================
   GLOBAL ICON
   ========================================= */

i {

    line-height: 1;

}


/* =========================================
   TEXT SELECTION
   ========================================= */

::selection {

    background-color: var(--color-orange);

    color: var(--color-white);

}


/* =========================================
   FOCUS STATES
   ========================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {

    outline:
        3px solid rgba(37, 99, 235, 0.35);

    outline-offset: 3px;

}


/* =========================================
   RESPONSIVE CONTAINER
   ========================================= */

@media (max-width: 768px) {

    .container,
    .section-container {

        padding-left: 16px;

        padding-right: 16px;

    }


    .section-title {

        font-size: 34px;

    }


    .section-description {

        font-size: 16px;

    }

}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {

    .section-title {

        font-size: 30px;

    }


    .section-label {

        font-size: 12px;

        letter-spacing: 1px;

    }


    .section-button {

        width: 100%;

    }

}