/* ------------------   CSS ---------------------------*/


/* 
==========================================
   HEADER
========================================== 
*/

.main-header {display:flex;justify-content:space-between;align-items:center;padding:18px 30px;background:#101820;border-bottom:1px solid #00aeef;position:sticky;top:0;z-index:999;gap:20px;flex-wrap:wrap;box-sizing:border-box;}

.main-header-left .logo {display:flex;align-items:center;gap:12px;text-decoration:none;}

.main-header-left img {width:42px;height:auto;display:block;}

.main-header-left span {font-size:24px;font-weight:bold;color:#00aeef;white-space:nowrap;}

.main-header-right {display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:flex-end;}

.main-header-right a {color:white;text-decoration:none;transition:0.3s;padding:8px 12px;border-radius:6px;}

.main-header-right a:hover {color:#00aeef;background:rgba(0,174,239,0.08);}

.main-header .menu-toggle {display: none; background: none; border: none; color: white; font-size: 28px; cursor: pointer;}


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

.main-header {flex-direction:row;justify-content:space-between;align-items:center;padding:15px;}

.main-header-right {width:100%;justify-content:flex-start;gap:10px;}

.main-header-right a {padding:10px 12px;}

}

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

.main-header-left img {width:36px;}

.main-header-left span {font-size:20px;}

.main-header-right {flex-direction:column;align-items:stretch;width:100%;}

.main-header-right a {width:100%;box-sizing:border-box;text-align:center;}

}

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

    .main-header {

        padding:15px;

    }

    .main-header .menu-toggle {
         display:block;
      }

    .main-header-right {display:none;width:100%;flex-direction:column;align-items:stretch;margin-top:10px;gap:5px;}

    .main-header-right.active {

        display:flex;

    }

   .main-header-right a {text-align:center;width:100%;box-sizing:border-box;padding:8px 10px;}

   .main-header-left {display:flex;align-items:center;}

}




/* 
==========================================
   FOOTER
========================================== 
*/

/* ------------ FOOTER ------------ */

.main-footer {background:#101820;border-top:1px solid #00aeef;margin-top:60px;padding-top:40px;}

.main-footer .footer-grid {max-width:1400px;margin:auto;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;}

.main-footer .footer-block h3 {color:#00aeef;margin-bottom:15px;font-size:20px;}

.main-footer .footer-block p {color:#cbd5e1;margin-bottom:8px;font-size:14px;line-height:1.6;}

.main-footer .footer-bottom {margin-top:15px;padding:15px;text-align:center;border-top:1px solid #223446;color:#94a3b8;font-size:13px;}

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

.main-footer {padding-top:30px;}

.main-footer .footer-grid {gap:25px;}

.main-footer .footer-block h3 {font-size:18px;}

}

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

.main-footer .footer-grid {grid-template-columns:1fr;}

.main-footer .footer-bottom {font-size:12px;}

}