/*
====================================================
Joomlastyle Official Website
Professional Core Stylesheet
Version: 1.0
====================================================
*/

/* =====================================================
   Joomlastyle Official Font
===================================================== */

@font-face{

    font-family:'Joomlastyle';

    src:
        url('../fonts/HelveticaNeueW23forSKY-Reg.eot');

    src:
        url('../fonts/HelveticaNeueW23forSKY-Reg.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeueW23forSKY-Reg.woff') format('woff'),
        url('../fonts/HelveticaNeueW23forSKY-Reg.ttf') format('truetype'),
        url('../fonts/HelveticaNeueW23forSKY-Reg.svg#HelveticaNeueW23forSKY-Reg') format('svg');

    font-weight:400;

    font-style:normal;

    font-display:swap;

}

@font-face{

    font-family:'Joomlastyle';

    src:
        url('../fonts/HelveticaNeueW23forSKY-Bd.eot');

    src:
        url('../fonts/HelveticaNeueW23forSKY-Bd.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeueW23forSKY-Bd.woff') format('woff'),
        url('../fonts/HelveticaNeueW23forSKY-Bd.ttf') format('truetype'),
        url('../fonts/HelveticaNeueW23forSKY-Bd.svg#HelveticaNeueW23forSKY-Bd') format('svg');

    font-weight:700;

    font-style:normal;

    font-display:swap;

}

:root{
  --navy:#081c3a;
  --navy-2:#102a52;
  --gold:#d4af37;
  --gold-dark:#b8901f;
  --white:#ffffff;
  --light:#f7f8fb;
  --text:#374151;
  --border:#e5e7eb;
  --radius:14px;
  --shadow:0 12px 32px rgba(0,0,0,.08);
  --container:1280px;
  --transition:.3s ease;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{

    font-family:'Joomlastyle',Tahoma,Arial,sans-serif;

    font-size:16px;

    font-weight:400;

    line-height:1.8;

    color:var(--text);

    background:#ffffff;

    overflow-x:hidden;

}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
.section-title,
.hero h1,
.btn{

    font-family:'Joomlastyle',Tahoma,Arial,sans-serif;

    font-weight:700;

}

html[dir="rtl"] body{text-align:right}
html[dir="ltr"] body{text-align:left}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit;transition:var(--transition)}
ul{list-style:none}
.container{max-width:var(--container);margin:auto;padding:0 20px}

/* Header */
.header{
  position:sticky;top:0;z-index:999;
  background:rgba(8,28,58,.97);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  min-height:82px;
}
.logo img{height:52px}
.nav-menu{display:flex;gap:28px}
.nav-menu a{
  color:#fff;font-weight:600;position:relative;padding:8px 0;
}
.nav-menu a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;
  background:var(--gold);transition:var(--transition);
}
.nav-menu a:hover::after,
.nav-menu a.active::after{width:100%}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:999px;
  font-weight:700;
  transition:var(--transition);
}
.btn-primary{
  background:var(--gold);
  color:#081c3a;
}
.btn-primary:hover{
  background:var(--gold-dark);
  transform:translateY(-2px);
}
.btn-outline{
  border:2px solid var(--gold);
  color:var(--gold);
}
.btn-outline:hover{
  background:var(--gold);
  color:#081c3a;
}

/* Hero */
.hero{
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff;
  padding:120px 0;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}
.hero h1{
  font-size:54px;
  line-height:1.15;
  margin-bottom:20px;
}
.hero p{
  font-size:20px;
  opacity:.9;
  margin-bottom:35px;
}
.hero-card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  min-height:420px;
}

/* Sections */
.section{padding:90px 0}
.section-title{
  color:var(--navy);
  font-size:40px;
  margin-bottom:18px;
}
.section-subtitle{
  max-width:700px;
  color:#6b7280;
  margin-bottom:45px;
}

/* Cards */
.grid-3{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:30px;
}
.card{
 background:#fff;
 border:1px solid var(--border);
 border-radius:var(--radius);
 padding:32px;
 transition:var(--transition);
 box-shadow:0 5px 20px rgba(0,0,0,.03);
}
.card:hover{
 transform:translateY(-8px);
 box-shadow:var(--shadow);
}
.card h3{
 color:var(--navy);
 margin:18px 0;
}
.card-icon{
 width:70px;height:70px;
 border-radius:18px;
 background:rgba(212,175,55,.15);
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:30px;
}

/* Footer */
.footer{
 background:var(--navy);
 color:#fff;
 padding-top:70px;
}
.footer-grid{
 display:grid;
 grid-template-columns:2fr 1fr 1fr 1fr;
 gap:40px;
}
.footer h3{
 color:var(--gold);
 margin-bottom:20px;
}
.footer li{margin-bottom:12px}
.footer a:hover{color:var(--gold)}
.footer-bottom{
 margin-top:50px;
 border-top:1px solid rgba(255,255,255,.1);
}
.footer-bottom-inner{
 display:flex;
 justify-content:space-between;
 align-items:center;
 min-height:70px;
}

/* Responsive */
@media (max-width:992px){
 .hero-grid,
 .footer-grid,
 .grid-3{
   grid-template-columns:1fr;
 }
 .hero h1{font-size:42px}
 .nav-menu{display:none}
}

@media (max-width:768px){
 .hero{padding:90px 0}
 .section{padding:70px 0}
 .hero h1{font-size:34px}
 .section-title{font-size:30px}
 .footer-bottom-inner{
   flex-direction:column;
   gap:12px;
   padding:20px 0;
 }
}