/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#111;background:#ededed;line-height:1.6}

/* === Site shell: right aligned white container (950px) === */
.site-shell{position:relative;max-width:950px;width:100%;margin-top: 50px;margin-left:auto;margin-right:2vw;padding:16px 16px 8px;border-radius:8px}
.container,.container-wide{width:100%;margin:0;padding:0}
.myextra {background: #fff;padding: 15px;}

/* Header */
.site-header{display:flex;align-items:center;gap:16px;padding:8px 0;}
.site-branding{display:flex;align-items:center;gap:10px; width: 150px;}
.site-branding img {width: 100%;height: auto;}
.site-title,.site-title a{text-decoration:none;color:inherit;margin:0}

/* Primary nav (optional text menu) */
.main-navigation{margin-left:auto}
.main-navigation ul{list-style:none;display:flex;align-items:center;gap:18px;padding:0;margin:0;flex-wrap:wrap}
.main-navigation a{text-decoration:none;color:#111;display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px}
.main-navigation a:hover,.main-navigation .current-menu-item>a{background:#f2f2f2}
.menu-icon{display:inline-flex;line-height:0;font-size:1.05rem}

/* Layout columns (Flexbox) */
.main-area{display:flex;gap:24px;align-items:flex-start}
.col-left{display:flex;flex-direction:column;gap:24px; width: 35%;}
.col-center{width: 35%}
.col-right{width: 30%}

/* Boxes */
.box1{background:#fff;min-height:220px;display:flex;align-items:center;justify-content:center}
.content-box{background:#fff;padding:18px;min-height:360px}
.content-box--full{border:2px solid #111;background:#fff;padding:24px;min-height:360px}
.sidebar-box{color:#fff;padding:18px;min-height:360px}

/* 2x2 widget grid */
.widget-grid{display:flex;flex-wrap:wrap}
.widget-grid .widget{width:50%;min-height:150px}
.widget-grid .widget section {height: 100%!important; width: 100%!important;}
.widget-grid .widget:nth-child(1){position: relative;}
    .widget-grid .widget:nth-child(1) a {width: 100%; height: 100%; display: block;}
    .widget-grid .widget:nth-child(1) img {display: block;  width: 100%; height: 100%;object-fit: cover;z-index: 5; left: 0; top: 0;position: absolute;}
    .widget-grid .widget:nth-child(1) span {display: block; background: rgba(0, 0, 0, .5); width: 100%; height: 100%;z-index: 10; left: 0; top: 0;position: absolute;}
    .widget-grid .widget:nth-child(1) h2 {color: #fff; position: absolute; bottom: 20px; left: 10px;z-index: 30; font-size: 15px;}

.widget-grid .widget:nth-child(2){position: relative;}
    .widget-grid .widget:nth-child(2) a {width: 100%; height: 100%; display: block;}
    .widget-grid .widget:nth-child(2) img {display: block; width: 100%; height: 100%;object-fit: cover;z-index: 5; left: 0; top: 0;position: absolute;}
    .widget-grid .widget:nth-child(2) span {display: block; background: rgba(0, 0, 0, .5); width: 100%; height: 100%;z-index: 10; left: 0; top: 0;position: absolute;}
    .widget-grid .widget:nth-child(2) h2 {color: #fff; position: absolute; bottom: 20px; left: 10px;z-index: 30; font-size: 15px;}

.widget-grid .widget:nth-child(3){position: relative;}
    .widget-grid .widget:nth-child(3) a {width: 100%; height: 100%; display: block;}
    .widget-grid .widget:nth-child(3) img {display: block; width: 100%; height: 100%;object-fit: cover;z-index: 5; left: 0; top: 0;position: absolute;}
    .widget-grid .widget:nth-child(3) span {display: block; background: rgba(0, 0, 0, .5); width: 100%; height: 100%;z-index: 10; left: 0; top: 0;position: absolute;}
    .widget-grid .widget:nth-child(3) h2 {color: #fff; position: absolute; bottom: 20px; left: 10px;z-index: 30; font-size: 15px;}

.widget-grid .widget:nth-child(4){position: relative;}
    .widget-grid .widget:nth-child(4) a {width: 100%; height: 100%; display: block;}
    .widget-grid .widget:nth-child(4) img {display: block; width: 100%; height: 100%;object-fit: cover;z-index: 5; left: 0; top: 0;position: absolute;}
    .widget-grid .widget:nth-child(4) span {display: block; background: rgba(0, 0, 0, .5); width: 100%; height: 100%;z-index: 10; left: 0; top: 0;position: absolute;}
    .widget-grid .widget:nth-child(4) h2 {color: #fff; position: absolute; bottom: 20px; left: 10px;z-index: 30; font-size: 15px;}

/* Footer */
.site-footer{padding:12px 0;font-size:.95rem; text-align: right;padding-right: 10px;color: #999}

/* Elementor compatibility */
.elementor-page .entry-content{max-width:100%;margin:0}
.elementor-page .content-box,.elementor-page .content-box--full{border:0;padding:0;min-height:0}

/* === Icon-only vertical dock nav === */
.nav-dock{position:absolute;left:-50px;top:100px;width:48px;background:#fff;border-radius:14px;padding:10px 6px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #f0f0f0}
.nav-dock .menu{list-style:none;display:flex;flex-direction:column;gap:12px;padding:0;margin:0}
.nav-dock .menu a{display:inline-flex;align-items:center;justify-content:center;padding:8px;border-radius:10px; text-decoration: none;}
.nav-dock .menu a {color:#0B1215}

.nav-dock .menu a:hover,.nav-dock .current-menu-item>a{color:#ff3d00}
.nav-dock .menu-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-dock .dashicons{font-size:22px;line-height:1}

.menu-item-type-custom:before {display: none}

.wp-block-search__button {color: #fff; font-weight: bold; background: #ff3d00;}
h1, h2, h3, h4, h5, h6 {font-family: "Rozha One", Sans-serif!important;font-weight: 500}
h1, h2 {margin-top: 0;}
h1 {font-size: calc(1.5vw + 20px);}
h1 + p, h2 + p, h3 + p {margin-top: -15px;}

p > a, p + a {color:#0B1215; text-decoration: underline!important;}
p > a:hover, p + a:hover {color:#ff3d00}
.e-hosted-video {width: 100%;height: 100%;}
.e-hosted-video video {width: 100%;height: 100%;object-fit: fill!important}


/* Responsive */
@media(max-width:1024px){
  .main-area{flex-direction:column}
  .sidebar-box{min-height:auto}
  .box1{min-height:160px}
  .site-shell {margin-top: 20px;border-radius: 0;}
  .site-header {position: absolute; top: -5px;}
  .site-header .container .site-branding {justify-content: center;}
  .nav-dock{position:absolute; top: 75px;left: 2.5%;width: 95%;}
  .nav-dock .menu{flex-direction:row;gap:12px; width: 95%;justify-content: space-between;}
  .myextra {margin-top: 130px;}
  .col-left{display:flex;flex-direction:column;gap:24px; width: 100%;}
  .col-center{width: 100%}
  .col-right{width: 100%}
  .site-footer {text-align: center;}

  h1 {font-size: calc(2.5vw + 30px);}
}