/*
Theme Name: Consultio Child
Theme URI: http://demo.casethemes.net/consultio/
Author: Case-Themes
Author URI: https://themeforest.net/user/case-themes/portfolio/
Description: Consultio is the Perfect Consulting Finane & Business WordPress Theme. Consultio is best suited for corporate website like Consultioial Advisor, Accountant, Consulting Firms, insurance, loan, tax help, Investment firm etc. This is a business theme that is help full for online presence for Corporate Business and Consultioial Firms.   
Version: 3.2.8
License: ThemeForest
License URI: https://themeforest.net/licenses
Template: consultio
Text Domain: consultio-child
Tags: advisor, attorney, corporate accountant, consulting, consultant, finance, insurance, invest, investment, investor, mutual funds, pensions, retirement, saving, trading 
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
:root {
    --blue-dark: #002244;
    --blue-navy: #171fac;
    --orange: #f36f21;
    --orange-hover: #d55a12;
    --bg-light: #f4f7f6;
    --text-dark: #333333;
    --white: #ffffff;
}
/* HERO BANNER*/
.hero {
    padding: 120px 0 40px;
}
.hero-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
    padding: 5px 20px;
}
.logo-main { font-weight: 900; color: var(--blue-dark); font-size: 1.8rem; letter-spacing: 1px;}
.logo-sub { font-weight: bold; color: var(--orange); font-size: 1.8rem;}
.tagline { font-size: 0.85rem; color: var(--blue-dark); text-transform: uppercase; margin-top: -5px;}

.hero-text h1 {
    font-size: 2.8rem;
    color: var(--blue-dark);
    line-height: 1.1;
    margin: 25px 0 15px 0;
    font-weight: 800;
}

.hero-text h1 .highlight {
    color: var(--blue-dark);
    background: linear-gradient(to right, transparent, transparent); /* Réservé */
}

.sub-h1 {
    font-size: 1.3rem;
    color: var(--blue-navy);
    font-weight: 600;
    margin-bottom: 20px;
}

.badge-date {
    display: inline-block;
    background-color: var(--orange);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    margin-bottom: 25px;
}

.quick-info {
    display: flex;
    gap: 20px;
    margin-bottom: 35px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.info-item i {
    font-size: 2rem;
    color: var(--orange);
}

.cta-buttons {
    display: flex;
    gap: 15px;
}

.btn {
  
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s ease;
}

.btn-orange {
    background-color: var(--orange);
    color: var(--white);
        background-image: none;

}

.btn-orange:hover { background-color: var(--orange-hover); }

.btn-outline {
    border: 2px solid var(--blue-dark);
    color: var(--blue-dark);
        background-image: none;

}



.hero-features {
    background-color: rgba(0, 32, 91, 0.95);
    color: var(--white);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(2555, 255, 255, 0.2);
}
.hero-features h3{
color: var(--white);
font-size: 28px;
}
.hero-features h3 {
    border-bottom: 2px solid var(--orange);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.hero-features ul {
    list-style: none;
}

.hero-features li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
}

.hero-features li i {
    color: var(--orange);
    margin-top: 3px;
}
/* ---*/
.ct-title1.style2 h2 {
    font-size: 36px;
    padding-left: 76px;
    position: relative;
}
.ct-title1.style2 h2 i {
    width: 50px;
    height: 3px;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0, -50%);
    -khtml-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-box-shadow: 0 7px 16px rgba(12, 12, 12, 0.22);
    -khtml-box-shadow: 0 7px 16px rgba(12, 12, 12, 0.22);
    -moz-box-shadow: 0 7px 16px rgba(12, 12, 12, 0.22);
    -ms-box-shadow: 0 7px 16px rgba(12, 12, 12, 0.22);
    -o-box-shadow: 0 7px 16px rgba(12, 12, 12, 0.22);
    box-shadow: 0 7px 16px rgba(12, 12, 12, 0.22);
}

/*contenu*/
@media screen and (max-width: 1199px) {
  .card-formation  .ct-fancy-box-layout1.style1 .item--title {
        font-size: 18px;
       
    }
}
.card-formation  .ct-fancy-box-layout1.style1 .item--title{
color:#002244;
}
.ct-title1.style2 h2 i{

    background-color: #34a1fe;
    background-image: -webkit-gradient(linear, left top, right top, from(#34a1fe), to(#161dad));
    background-image: -webkit-linear-gradient(left, #34a1fe, #161dad);
    background-image: -moz-linear-gradient(left, #34a1fe, #161dad);
    background-image: -ms-linear-gradient(left, #34a1fe, #161dad);
    background-image: -o-linear-gradient(left, #34a1fe, #161dad);
    background-image: linear-gradient(left, #34a1fe, #161dad);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#34a1fe', endColorStr='#161dad', gradientType='1');
}
#ct-header-wrap .ct-header-holder .ct-header-info-item .h-item-meta a{
   color: inherit;
    font-weight: 600!important;
    display: initial!important;;
}
#ct-header-wrap .ct-header-button .btn:not(.btn-icon-fixed) {
    padding: 0 30px;
}
@media screen and (min-width: 1200px) {
    #ct-header-wrap.ct-header-layout1 .ct-header-main:not(.h-fixed) .ct-header-navigation-bg {
        padding: 0 30px 0;
}        
}
@media (min-width: 1440px) {
    body .container , .hero-container { max-width: 1400px;}
   
}
@media (min-width: 1920px) {
   body  .container, .hero-container {
    max-width: 1720px;
  }
  
}
@media(max-width: 992px) {
    .hero { background: var(--white); }
    .hero-container, .intro-grid, .main-grid, .footer-grid {
        grid-template-columns: 1fr;
    }
    .hero-features { margin-top: 20px; }
    .cta-buttons { flex-direction: column; }
    
    .hero-text{max-width:100%;overflow:hidden}
}
@media (max-width: 640px){
   .hero{padding-top:40px}
   .hero-container{padding:0}
   .logo-main,.logo-sub {font-size:1.4em!important}
   .hero-text h1 {font-size: 2rem!important;}
   .quick-info {flex-wrap: wrap;}
   
}