/*
Theme Name: Planet 360 Tax & Corporate Consultants
Theme URI: https://planet360.com.pk
Author: Abdur Rafay & ChatGPT
Author URI: https://planet360.com.pk
Description: A custom premium WordPress theme developed exclusively for Planet 360 Tax & Corporate Consultants.
Version: 1.0.1
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: planet360
Tags: custom-theme, responsive, business, corporate, consulting
*/

/* ==========================================================================
   Planet 360 Design System
   ========================================================================== */

:root {

    /* Brand Colors */
    --color-primary: #0F4C81;
    --color-secondary: #00A99D;

    /* Text */
    --color-heading: #1A2533;
    --color-body: #5E6C84;

    /* Backgrounds */
    --color-bg: #F8FAFC;
    --color-white: #FFFFFF;

    /* Borders */
    --color-border: #E5EAF0;

    /* Status */
    --color-success: #16A34A;
    --color-danger: #DC2626;

    /* Layout */
    --container-width: 1200px;

    --section-spacing: 96px;

    --border-radius: 16px;

    --transition: 0.30s ease;
}

/* ==========================================================================
   Basic Reset
   ========================================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Manrope',sans-serif;
    background:var(--color-bg);
    color:var(--color-body);
    line-height:1.7;
    font-size:18px;

}

/* ==========================================================================
   Images
   ========================================================================== */

img{

    max-width:100%;
    display:block;

}

/* ==========================================================================
   Links
   ========================================================================== */

a{

    text-decoration:none;
    color:inherit;
    transition:var(--transition);

}

/* ==========================================================================
   Lists
   ========================================================================== */

ul{

    list-style:none;

}

/* ==========================================================================
   Container
   ========================================================================== */

.container{

    width:92%;
    max-width:var(--container-width);
    margin:auto;

}

/* ==========================================================================
   Headings
   ========================================================================== */

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

    color:var(--color-heading);
    line-height:1.2;
    font-weight:700;

}

h1{

    font-size:56px;

}

h2{

    font-size:42px;

}

h3{

    font-size:30px;

}

h4{

    font-size:24px;

}

/* ==========================================================================
   Sections
   ========================================================================== */

section{

    padding:var(--section-spacing) 0;

}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 32px;

    border-radius:12px;

    font-weight:700;

    transition:var(--transition);

    cursor:pointer;

}

.btn-primary{

    background:var(--color-primary);
    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-3px);

}

.btn-secondary{

    border:2px solid var(--color-primary);

    color:var(--color-primary);

    background:#fff;

}

.btn-secondary:hover{

    background:var(--color-primary);

    color:#fff;

}

/* ==========================================================================
   Cards
   ========================================================================== */

.card{

    background:#fff;

    border-radius:16px;

    padding:32px;

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

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media(max-width:992px){

    h1{

        font-size:44px;

    }

    h2{

        font-size:34px;

    }

}

@media(max-width:768px){

    body{

        font-size:16px;

    }

    h1{

        font-size:36px;

    }

    h2{

        font-size:30px;

    }

    section{

        padding:70px 0;

    }

}