/* ==========================================================
   CUCUPOT GLOBAL STYLESHEET
   Version : 1.0
   ========================================================== */

/* ---------- CSS Variables ---------- */

:root{

    /* Primary Colours */

    --primary-color:#2C7BE5;
    --primary-hover:#1F5DB5;

    --secondary-color:#28A745;
    --secondary-hover:#218838;

    --danger-color:#DC3545;

    --warning-color:#FFC107;

    --light-color:#F8F9FA;

    --dark-color:#343A40;

    --text-color:#333333;

    --border-color:#DDDDDD;

    --background-color:#F5F7FA;

    --white:#FFFFFF;

    /* Fonts */

    --font-family:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    --font-size-small:12px;
    --font-size-normal:14px;
    --font-size-large:20px;
    --font-size-title:28px;

    /* Border Radius */

    --radius-small:5px;
    --radius-medium:8px;
    --radius-large:12px;

    /* Shadow */

    --shadow-light:
        0 2px 6px rgba(0,0,0,.08);

    --shadow-medium:
        0 4px 12px rgba(0,0,0,.12);

    /* Transition */

    --transition:.30s ease;
}


/* ---------- Reset ---------- */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;
}


/* ---------- Body ---------- */

body{

    background:var(--background-color);

    color:var(--text-color);

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

    font-size:var(--font-size-normal);

    line-height:1.6;
}


/* ---------- Images ---------- */

img{

    max-width:100%;

    height:auto;

    display:block;
}


/* ---------- Links ---------- */

a{

    text-decoration:none;

    color:var(--primary-color);

    transition:var(--transition);
}

a:hover{

    color:var(--primary-hover);
}


/* ---------- Headings ---------- */

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

    color:var(--dark-color);

    margin-bottom:12px;

    font-weight:600;
}


/* ---------- Paragraph ---------- */

p{

    margin-bottom:12px;
}


/* ---------- Lists ---------- */

ul{

    list-style:none;
}


/* ---------- Forms ---------- */

input,
select,
textarea,
button{

    font-family:inherit;

    font-size:inherit;
}


/* ---------- Inputs ---------- */

input,
select,
textarea{

    padding:10px;

    border:1px solid var(--border-color);

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

    outline:none;

    transition:var(--transition);
}

input:focus,
select:focus,
textarea:focus{

    border-color:var(--primary-color);

    box-shadow:0 0 4px rgba(44,123,229,.25);
}


/* ---------- Buttons ---------- */

button{

    cursor:pointer;

    transition:var(--transition);
}


/* ---------- Tables ---------- */

table{

    width:100%;

    border-collapse:collapse;
}

th{

    background:var(--primary-color);

    color:white;

    padding:10px;
}

td{

    padding:10px;

    border:1px solid var(--border-color);
}


/* ---------- Horizontal Rule ---------- */

hr{

    border:none;

    border-top:1px solid var(--border-color);

    margin:20px 0;
}


/* ---------- Utility Classes ---------- */

.text-center{

    text-align:center;
}

.text-right{

    text-align:right;
}

.text-left{

    text-align:left;
}

.hidden{

    display:none;
}

.shadow{

    box-shadow:var(--shadow-light);
}

.rounded{

    border-radius:var(--radius-medium);
}

.container{

    width:95%;

    max-width:1400px;

    margin:auto;
}

/* =====================================================
   GLOBAL RESPONSIVE
===================================================== */

@media screen and (max-width:900px){

    body{
        font-size:13px;
    }

}

@media screen and (max-width:768px){

    body{
        font-size:12px;
    }

}

@media screen and (max-width:480px){

    body{
        font-size:11px;
    }

}