/* =========================================
   Phoenix Paper Products
   Bootstrap 5 Theme
========================================= */

:root{

    --primary:#222831;
    --secondary:#3A4750;

    --accent:#F45A14;
    --accent-hover:#D84315;

    --gold:#F8A300;

    --light:#F9FAFB;
    --white:#ffffff;

    --text:#FFFFFF;
    --border:#E5E7EB;

}

/*-----------------------------------
Global
-----------------------------------*/

body{
    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:#fff;
    overflow-x:hidden;
}

section{
    padding:90px 0;
}

a{
    text-decoration:none;
}

.bg-primary {
	background: #222831;
}

.section-title{
    font-size:42px;
    font-weight:700;
}

.section-subtitle{
    color:var(--accent);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.bg-light-custom{
    background:var(--light);
}


/*-----------------------------------
Navbar
-----------------------------------*/

.navbar{
    background:#fff;
    box-shadow:0 5px 18px rgba(0,0,0,.06);
    padding:18px 0;
}

.navbar-brand img{
    height:58px;
}

.nav-link{
    color:var(--primary);
    font-weight:500;
    margin:0 10px;
}

.nav-link:hover{
    color:var(--accent);
}

.btn-main{

    background:var(--accent);
    color:#fff;
    border-radius:50px;
    padding:12px 28px;
    font-weight:600;

}

.btn-main:hover{

    background:var(--accent-hover);
    color:#fff;

}

.orange-dot {
    color: #ff9800;
    font-size: 8px;
}

.navBullet {
    font-size: 12px;	
}

/*-----------------------------------
Hero
-----------------------------------*/

.hero{

    background:linear-gradient(140deg,#222831,#2d353d);
    color:#fff;

    min-height:700px;

    display:flex;
    align-items:center;

    position:relative;
    overflow:hidden;

}

.hero:before{

    content:"";
    position:absolute;
    width:650px;
    height:650px;
    background:rgba(244,90,20,.10);
    border-radius:50%;
    right:-180px;
    top:-200px;

}

.hero h1{

    font-size:64px;
    font-weight:800;

}

.hero h1 span{

    color:var(--accent);

}

.hero p{

    font-size:18px;
    color:#d7d7d7;

}

.hero-img{

    max-width:100%;

}


/*-----------------------------------
Feature Cards
-----------------------------------*/

.feature-card{

    background:#fff;
    border-radius:20px;
    padding:40px 30px;

    box-shadow:0 15px 35px rgba(0,0,0,.06);

    transition:.35s;

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

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.feature-icon{

    width:80px;
    height:80px;

    border-radius:50%;

    background:rgba(244,90,20,.08);

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

    color:var(--accent);

    font-size:35px;

    margin-bottom:20px;

}

.Htext1 {
	color: #3A4750;
}


/*-----------------------------------
About
-----------------------------------*/

.about-img{

    border-radius:20px;
    overflow:hidden;

    box-shadow:0 25px 40px rgba(0,0,0,.12);

}

.about-list li{

    margin-bottom:14px;

    list-style:none;

}

.about-list li i{

    color:var(--accent);

    margin-right:10px;

}


/*-----------------------------------
Statistics
-----------------------------------*/

.counter{

    background:var(--primary);

    color:#fff;

    text-align:center;

    border-radius:15px;

    padding:35px;

}

.counter h2{

    color:var(--accent);

    font-size:46px;

    font-weight:700;

}


/*-----------------------------------
Products
-----------------------------------*/

.product-box{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.product-box img{

    transition:.4s;

}

.product-box:hover img{

    transform:scale(1.05);

}


/*-----------------------------------
Footer
-----------------------------------*/

footer{

    background:var(--primary);

    color:#fff;

    padding:80px 0 30px;

}

footer a{

    color:#ddd;

}

footer a:hover{

    color:var(--accent);

}

.footer-title{

    color:#fff;
    font-weight:600;
    margin-bottom:20px;

}


/*-----------------------------------
Social
-----------------------------------*/

.social a{

    width:42px;
    height:42px;

    border-radius:50%;

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

    background:#39424b;

    color:#fff;

    margin-right:8px;

}

.social a:hover{

    background:var(--accent);

}


/*-----------------------------------
Responsive
-----------------------------------*/

@media(max-width:991px){

.hero{

    text-align:center;
    min-height:auto;
    padding:120px 0 80px;

}

.hero h1{

    font-size:46px;

}

.section-title{

    font-size:34px;

}

}

@media(max-width:576px){

.hero h1{

    font-size:36px;

}

.btn-main{

    width:100%;

}

.section-title{

    font-size:28px;

}

}