<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <!--- Get Charset from WordPress ----->
  <meta charset="<?php bloginfo('charset'); ?>">
  <!--- Responsive Meta ----->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- 🔹 Preconnect for faster Google Fonts loading -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<?php
// ✅ Get WordPress custom header image dynamically
if ( get_header_image() ) :
    $header_img = get_header_image();
?>
    <link rel="preload" href="<?php echo esc_url( $header_img ); ?>" as="image" fetchpriority="high">
<?php endif; ?>

  <!-- 🔹 Critical CSS to make top area render immediately -->
  <style>
    header, nav, .navbar, .site-wrapper {
      visibility: visible !important;
      opacity: 1 !important;
      transition: none !important;
    }
    body {
      background-color: #fff;
      font-family: 'Roboto', sans-serif;
    }
  </style>
  <!--- Call wp_head() ----->
  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

  <!--- skip link *  ----->
<a class="skip-link" href="#main"><?php echo esc_html__('Skip to content', 'howcan');?></a>

  <!--- site wrapinig start   ----->
<div style="" class="site-wrapper <?php  if (get_theme_mod('howcan_box_layout') == true){
     echo esc_html('container');
     }
     
     ?>">
  <div style="box-shadow: 0 4px 6px rgba(0,0,0,0.5);">
    
 
  <!-- Header with landmark * -->
  <header class="" role="banner">
    <!-- Topbar section  start  -->
    <?php 
    
    
  
    // get topbar part
          get_template_part('template-parts/topbar');
  //check 
    if(! empty(get_theme_mod('show_bfr_nav'))){
      // get header part 
      get_template_part('template-parts/header-image'); 
    }
    
    //check if it check marked from customizer
    if (get_theme_mod('howcan_navbar_enable', true)) : 
      ?>
  <div style="" class="">
    
      <?php // get logo and nav 
       echo '<div style="box-shadow: 0 0px 2px rgba(0,0,0,0.5);">';
        get_template_part('template-parts/logo-nav'); 
        echo '</div>';
    ?>    
   <?php echo get_option('ads_header'); ?>
  </div>  
   <?php     
    endif;
    //check 
    if(! empty(get_theme_mod('show_aftr_nav'))){
      // get header part 
      get_template_part('template-parts/header-image'); 
    }
    
    
    ?>
  </header>
  <!-- end header  -->
  
  <!-- Main content wrapper start -->
  <main id="main" role="main" class="">
    