/*==========================================================================================
Product Name:  Themebo Multipurpose Landing Page Template in HTML & Bootstrap  
Version: 1.0.0
Description: Themebo is a sleek and modern multipurpose landing page template built with HTML5, Bootstrap 5, and responsive design principles. Perfect for startups, SaaS, apps, institutes, and more.
Author: Themekarts
Author URI: https://www.demo.themekarts.com/themebo/multipurpose-landing-page-template-in-html-bootstrap/index.html
Location: India
==========================================================================================*/

/*======= 1. PLUGINS ========*/
@import "../plugins/bootstrap/css/bootstrap.min.css";
@import "../plugins/slick/slick.css";
@import "../plugins/slick/slick-theme.css";  

/*====== 2. Utilities =========*/
@import "./utilities/animation.css";

/*====== 3. Layouts =========*/
@import "./layouts/headers/cta.css";
@import "./layouts/footers/centered.css";

/*====== 4. Components ======*/
@import "./components/button.css";
@import "./components/form.css";
@import "./components/gallery.css";
@import "./components/slider.css";
@import "./components/video.css";
@import "./components/countdown.css";


/* 
==============================================
  ROOT VARIABLES
============================================== 
*/
:root {
    --color-primary: #eb0079;
    --color-secondary: #ffc107;
    --color-tertiary: #ffffff;
    --color-grey: #808080;
    --color-pink: rgb(250, 187, 197);
    --color-white: #ffffff;
    --color-black: rgb(7, 7, 7);
    --primary-font-family: Arial;
    --secondary-font-family: sans-serif;

    /*====== BUTTON =======*/
    --btn-default-bg: #ffc107;
    --btn-default-color: #000000;
    --btn-default-hover-bg: #0000ff;
    --btn-default-hover-color: #ffffff;
    --btn-1-bg: #ffc107;
    --btn-1-color: #000000;
    --btn-1-hover-bg: #9a760a;
    --btn-1-hover-color: #ffffff;
    --btn-1-font-weight: 500;
    --btn-2-bg: #1a3047;
    --btn-2-color: #ffffff;
    --btn-2-hover-bg: #3373b6;
    --btn-2-hover-color: #ffffff;
    --btn-3-bg: #0000ff;
    --btn-3-color: #ffffff;
    --btn-3-hover-bg: #0000ff;
    --btn-3-hover-color: #ffffff;
    --btn-4-bg: #0000ff;
    --btn-4-color: #ffffff;
    --btn-4-hover-bg: #0000ff;
    --btn-4-hover-color: #ffffff;
    --btn-5-bg: #5050a1;
    --btn-5-color: #e2a4a4;
    --btn-5-hover-bg: #5050a1;
    --btn-5-hover-color: #e2a4a4;
    --btn-circle-bg: #295dfb1a;
    --btn-circle-color: #000000;
    --btn-circle-hover-bg: #0101d7;
    --btn-circle-hover-color: #ffffff;
    --btn-Coolbean-bg: #1619201a;
    --btn-Coolbean-color: #000000;
    --btn-Coolbean-hover-bg: #2980b9;
    --btn-Coolbean-hover-color: #ffffff;
    --btn-pill-bg: #ffc107;
    --btn-pill-hover-bg: #e1aa04;
    --btn-pill-hover-color: #000000;
    --btn-round-bg: #4747b9;
    --btn-round-color: #fff;
    --btn-round-hover-bg: #0000ff;
    --btn-round-hover-color: #ffffff;
    --sm-btn-bg: var(--color-primary);
    --sm-btn-color: var(--color-white);
    --sm-btn-border-color: #1537d1;
    --sm-btn-hover-bg: var(--color-secondary);
    --sm-btn-hover-color: var(--color-black);
    --sm-btn-hover-border-color: var(--color-black);
    --sm-btn-hover-border-size: 1px;
    --sm-btn-border-size: 2px;

    /*======== HEADER & NAVBAR VARIABLE ======*/
    --header-height: 70px;
    --header-bg: var(--color-primary);
    --header-bottom-border-color: var(--color-grey);
    --header-text-color: var(--color-white);
    --nav-link-color: #e7e2e2;
    --nav-link-hover-color: var(--color-white);
    --nav-link-active-color: var(--color-white);
    --nav-link-text-decoration-color: var(--color-secondary);

    /*=============== HERO VARIABLES ===============*/
    --hero-bg: var(--color-primary);
    --hero-heading-color: linear-gradient(
            190deg,
            var(--color-white) 15%,
            var(--color-secondary) 45%,
            var(--color-pink) 75%,
            var(--color-secondary) 100%
        )
        95% / 200% 100%;
    --hero-sub-heading-color: var(--color-white);
    --hero-sub-heading-fs: calc(1.275rem + 0.3vw);
}

/* 
==============================================
  GLOBAL STYLES
============================================== 
*/
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}

section {
    padding-top: 30px;
    padding-bottom: 45px;
}

h2 {
    font-size: calc(1.325rem + 1.3vw);
    font-weight: 700;
}

tr,
td,
th {
    border: none !important;
}

td,
th {
    padding-top: 25px !important;
}

/*
==============================================
  UTILITY CLASSES
============================================== 
*/

.border-tl-radius-5 {
    border-top-left-radius: 5rem;
}

.border-br-radius-5 {
    border-bottom-right-radius: 5rem;
}

.border-color-2 {
    border-color: var(--color-secondary);
}

.border-width-3 {
    border-width: 3px;
    border-style: solid;
}

.border-width-5 {
    border-width: 5px;
    border-style: solid;
}

.mb-60 {
    margin-bottom: 60px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-60 {
    padding-bottom: 60px;
}

.pb-75 {
    padding-bottom: 75px;
}

.pt-100 {
    padding-top: 100px;
}

.pt-60 {
    padding-top: 60px;
}

.text-grey {
    color: #808080;
}