/* ==========================================================
   EASY ACCOUNTING - WELCOME PAGE
   Version : 1.0
==========================================================*/


/*==========================================================
  PAGE
==========================================================*/

.welcome-page{

    width:95%;

    max-width:1400px;

    margin:25px auto;

}


/*==========================================================
  HERO SECTION
==========================================================*/

.hero-section{

    display:flex;

    gap:30px;

    align-items:stretch;

    margin-bottom:35px;

}


/*==========================================================
  DASHBOARD IMAGE
==========================================================*/

.hero-image{

    flex:2;

    background:var(--white);

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

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

    padding:20px;

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

}

.hero-image img{

    width:100%;

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

}


/*==========================================================
  LOGIN PANEL
==========================================================*/

.login-panel{

    flex:1;

    background:var(--white);

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

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

    padding:25px;

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

}

.login-panel h2{

    text-align:center;

    margin-bottom:20px;

}


/*==========================================================
  FORM
==========================================================*/

.form-group{

    margin-bottom:18px;

}

.form-group label{

    display:block;

    font-weight:600;

    margin-bottom:6px;

}

.form-group input,
.form-group select{

    width:100%;

}


.btn-login{

    width:100%;

    background:var(--primary-color);

    color:var(--white);

    border:none;

    padding:12px;

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

    font-weight:bold;

}

.btn-login:hover{

    background:var(--primary-hover);

}


/*==========================================================
  LOGIN LINKS
==========================================================*/

.login-links{

    margin-top:18px;

    text-align:center;

    font-size:13px;

    line-height:1.8;

}

.login-links a{

    color:var(--primary-color);

}

.login-links a:hover{

    text-decoration:underline;

}


/*==========================================================
  FEATURES
==========================================================*/

.features-section{

    background:var(--white);

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

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

    padding:30px;

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

}

.features-section h1{

    text-align:center;

    margin-bottom:15px;

}

.intro{

    text-align:center;

    max-width:900px;

    margin:0 auto 30px;

}


/*==========================================================
  FEATURE GRID
==========================================================*/

.feature-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}


/*==========================================================
  FEATURE CARD
==========================================================*/

.feature-card{

    background:var(--light-color);

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

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

    padding:18px;

    transition:var(--transition);

}

.feature-card:hover{

    transform:translateY(-4px);

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

}

.feature-card h3{

    color:var(--primary-color);

    font-size:16px;

}

.feature-card p{

    margin:0;

}


/*==========================================================
  LARGE TABLETS
==========================================================*/

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

    .feature-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


/*==========================================================
  TABLETS
==========================================================*/

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

    .hero-section{

        flex-direction:column;

    }

    .hero-image{

        order:1;

    }

    .login-panel{

        order:2;

    }

    .features-section{

        order:3;

    }

}


/*==========================================================
  MOBILE
==========================================================*/

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

    .welcome-page{

        width:98%;

        margin:15px auto;

    }

    .hero-section{

        gap:18px;

    }

    .hero-image,

    .login-panel,

    .features-section{

        padding:15px;

    }

    .feature-grid{

        grid-template-columns:1fr;

    }

    .btn-login{

        padding:10px;

    }

}