/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

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

@media (min-width: 1400px) {
    .container,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl {
        max-width:1300px
    }
    #header.header-modern:not(.header-active) { margin: 40px auto 0; width: 1300px; }
}

@media (min-width: 1800px) {
    .container,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl {
        max-width:1600px
    }
    #header.header-modern:not(.header-active) { margin: 40px auto 0; width: 1800px; }
}


h1 {
	font-size: clamp(32px, 3.33333vw, 42px) !important;
	line-height: 120%;
	font-weight: 600;
}

h1 > b, strong {
    font-weight: 600;
    color: rgb(121 45 212);
}

/* ----------------------------------------------------------------------
    Topbar
-------------------------------------------------------------------------*/
#topbar a {
    color: #747474;
}

#topbar a:hover {
    color: rgb(121 45 212);
}

/* ----------------------------------------------------------------------
	Navbar
-------------------------------------------------------------------------*/
#header .header-inner #logo a > img, #header #header-wrap #logo a > img {
	height: 60px;
	margin-top: 12px;
}

#mainMenu nav > ul > li > a:hover {
	color: rgb(121 45 212);
}


/*-----------------------------------------------------------------------
    Cards/Panel
-------------------------------------------------------------------------*/
.card:hover {
    border: 2px solid #ffffff;
    border-radius: .42rem;
    box-shadow: 0px 16px 18px 6px #9e9e9e9e;
    top: -10px;
}

/*-----------------------------------------------------------------------
	Footer
-------------------------------------------------------------------------*/
#footer {
	background-color: #ffffff;
}