/* ==========================================
           ROOT
        =========================================== */

        :root {

            --navy: #062b68;
            --navy-light: #0b3d91;
            --gold: #b88755;

            --background: #ffffff;
            --section: #f8fafc;

            --text: #1e293b;
            --muted: #64748b;

            --line: #e8edf5;

            --shadow: 0 20px 55px rgba(6, 43, 104, .08);

        }

        /* ==========================================
           RESET
        =========================================== */

        * {

            margin: 0;
            padding: 0;
            box-sizing: border-box;

        }

        html {

            scroll-behavior: smooth;

        }

        body {

            font-family: "Inter", sans-serif;

            background: var(--background);

            color: var(--text);

            line-height: 1.65;

            overflow-x: hidden;

        }

        img {

            display: block;

            max-width: 100%;

        }

        a {

            color: inherit;

            text-decoration: none;

        }

        /* ==========================================
           CONTAINER
        =========================================== */
		.container{
			width:calc(100% - 80px);
			max-width:1700px;
			margin:0 auto;
		}
        /* ==========================================
           NAVBAR
        =========================================== */

        .topbar {

            position: fixed;

            top: 0;
            left: 0;

            width: 100%;

            z-index: 999;

            backdrop-filter: blur(16px);

            background: rgba(255, 255, 255, .80);

            transition: .3s;
			overflow:visible;

        }

        .nav {

            display: flex;

            align-items: center;

            height: 118px;

        }
		.logo{

			display:flex;

			align-items:center;

			justify-content:center;

			width:auto;

			flex-shrink:0;

			margin-right:60px;

		}

		.logo img{

			display:block;

			height:220px;

			width:auto;

			pointer-events:auto;

		}

        .menu {

            display: flex;

            gap: 34px;

            margin-right: auto;

            font-size: 14px;

            font-weight: 800;

            color: var(--navy);

        }

        .menu a {

            transition: .25s;

        }

        .menu a:hover {

            color: var(--gold);

        }

        .buy-online-link {

            color: var(--gold);

        }

		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			border: 0;
			border-radius: 10px;
			background: var(--navy);
			color: #ffffff;
			font-weight: 900;
			padding: 16px 26px;
			box-shadow: 0 12px 26px rgba(6,43,104,.22);
			transition: .2s ease;
			cursor: pointer;
		}

		.btn:hover{

			transform:translateY(-2px);

			background:var(--navy-light);

			color:#fff;

			box-shadow:0 16px 30px rgba(6,43,104,.28);

		}
        /* ==========================================
           HERO
        =========================================== */

        .hero {

            position: relative;

            margin-top: 118px;

            height: 500px;

            overflow: hidden;

        }

        .hero-banner {

            width: 100%;

            height: 100%;

            object-fit: cover;

        }

        .hero-overlay {

            position: absolute;

            inset: 0;

            display: flex;

            align-items: center;

            background:

                linear-gradient(
                    90deg,
                    rgba(6,43,104,.72),
                    rgba(6,43,104,.48),
                    rgba(6,43,104,.12)
                );

        }

        .hero-content {

            width: 640px;

            color: #fff;

        }

        .eyebrow {

            margin-bottom: 20px;

            font-size: 15px;

            font-weight: 800;

            letter-spacing: .08em;

            color: var(--gold);

            text-transform: uppercase;

        }

        .hero h1 {

            margin-bottom: 24px;

            font-family: "Playfair Display", serif;

            font-size: 68px;

            line-height: 1.08;

        }

        .hero p {

            margin-bottom: 42px;

            font-size: 20px;

            opacity: .92;

        }

        /* ==========================================
           SEARCH
        =========================================== */

        .search-box {

            display: flex;

            overflow: hidden;

            border-radius: 14px;

            background: #fff;

            box-shadow: var(--shadow);

        }

        .search-box input {

            flex: 1;

            border: none;

            padding: 20px;

            font-size: 16px;

            outline: none;

        }

        .search-box button {

            width: 72px;

            border: none;

            cursor: pointer;

            background: var(--navy);

            color: #fff;

            font-size: 18px;

        }
		
		/* ==========================================
		   KATEGORIE
		========================================== */

		.categories {

			padding: 36px 0;

			border-top: 1px solid var(--line);
			border-bottom: 1px solid var(--line);

			background: #fff;

		}

		.categories-wrap {

			display: flex;

			justify-content: center;
			align-items: center;
			flex-wrap: wrap;

			gap: 16px;

		}

		.category {

			padding: 12px 24px;

			border: 1px solid var(--line);
			border-radius: 999px;

			background: #fff;

			font-size: 15px;
			font-weight: 700;

			transition: .25s;

		}

		.category:hover {

			background: var(--navy);

			color: #fff;

		}

		.category.active {

			background: var(--gold);

			color: #fff;

			border-color: var(--gold);

		}

		
/* BLOG TOOLBAR */
.blog-toolbar{
    display:grid;
    grid-template-columns:1fr 320px;
    column-gap:40px;
    align-items:center;
    margin-bottom:34px;
    padding-bottom:28px;
    border-bottom:1px solid var(--line);
}
.category-nav{
 display:flex;
 flex-wrap:wrap;
 gap:28px;
 align-items:center;
}
.category-nav a{
 padding:14px 0;
 font-weight:600;
 border-bottom:3px solid transparent;
 transition:.25s;
}
.category-nav a.active,
.category-nav a:hover{
 color:var(--navy);
 border-color:var(--gold);
}
.blog-search{
 display:flex;
 align-items:center;
 border:1px solid var(--line);
 border-radius:10px;
 overflow:hidden;
 background:#fff;
 min-width:320px;
}
.blog-search input{
 border:none;outline:none;
 padding:14px 16px;
 flex:1;
}
.blog-search button{
 border:none;
 background:#fff;
 padding:0 16px;
 cursor:pointer;
 color:var(--navy);
}

		/* ==========================================
		   BLOG
		========================================== */

		.blog {

			padding: 90px 0;

			background: #f8fafc;

		}

		.posts {

			display: grid;

			grid-template-columns: repeat(3, 1fr);

			gap: 34px;

		}

		.post-card{

			display:flex;
			flex-direction:column;

			height:100%;

			background:#fff;

			border-radius:22px;

			overflow:hidden;

			box-shadow:var(--shadow);

			transition:.35s;

			}
		.post-content{
			display:flex;
			flex-direction:column;
			flex:1;
			}
		.post-content a{
				margin-top:auto;
			}

		.post-card:hover {

			transform: translateY(-8px);

			box-shadow: 0 30px 60px rgba(0,0,0,.10);

		}

		.post-image{

			display:block;

			aspect-ratio:16 / 9;

			overflow:hidden;

			border-radius:18px 18px 0 0;

		}
.post-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .45s ease;

}

		.post-card:hover img {

			transform: scale(1.06);

		}

.post-category{

    display:block;

    margin:8px 0 14px;

    padding:0;

    background:none;

    border:none;

    border-radius:0;

    color:var(--gold);

    font-size:15px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.03em;

}
		.post-title{
    margin:0 24px 12px;
}

.post-excerpt{
    margin:0 24px 18px;
    line-height:1.65;
    color:#58657f;
}
.post-meta{
    display:flex;
    align-items:center;
    gap:12px;

    margin:0 24px 24px;

    font-size:15px;
    color:#6d7890;
}

.post-meta i{
    color:#c48b43;
}

.post-content{
    padding:8px 28px 28px;
}

		.post-date {

			display: flex;

			gap: 10px;

			align-items: center;

			margin-bottom: 18px;

			color: var(--muted);

			font-size: 14px;

		}

		.post-date span {

			opacity: .35;

		}

		.post-content h2 {

			margin-bottom: 18px;

			font-family: "Playfair Display", serif;

			font-size: 32px;

			line-height: 1.25;

			color: var(--navy);

		}

		.post-content p {

			margin-bottom: 24px;

			color: var(--muted);

		}

		.post-content a {

			display: inline-flex;

			align-items: center;

			gap: 10px;

			color: var(--navy);

			font-weight: 700;

			transition: .25s;
			margin-top:auto;

		}

		.post-content a:hover {

			color: var(--gold);

		}

		.post-content a i {

			transition: .25s;

		}

		.post-content a:hover i {

			transform: translateX(5px);

		}
		
		

/* BLOG LAYOUT */


/* ===== BLOG V2 ===== */

.blog{
    padding:50px 0 90px;
    background:#f8fafc;
}

.blog-toolbar{
    padding-bottom:28px;
    margin-bottom:34px;
    border-bottom:1px solid var(--line);
}

.category-nav{
    gap:34px;
}

.category-nav a{
    font-weight:600;
    color:#475569;
}

.category-nav a.active,
.category-nav a:hover{
    color:var(--navy);
    border-bottom:3px solid var(--gold);
}

.blog-layout{
    grid-template-columns:minmax(0,1fr) 300px;
    gap:42px;
}

.sidebar-card,
.sidebar-newsletter{
    border-radius:16px;
}

.sidebar-newsletter{
    background:var(--navy);
    color:#fff;
    border:none;
}

.newsletter-header{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:26px;
}

.newsletter-icon{
    width:64px;
    height:64px;
    flex-shrink:0;
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px solid var(--gold);
    border-radius:50%;
    color:var(--gold);
    font-size:24px;
}

.sidebar-newsletter h3{
    color:#fff;
    margin-bottom:8px;
}

.sidebar-newsletter p{
    color:rgba(255,255,255,.82);
    font-size:15px;
    line-height:1.6;
}

.newsletter-form{
    display:flex;
    align-items:stretch;
    margin-top:22px;
    border-radius:10px;
    overflow:hidden;
    background:#fff;
}

.newsletter-form input{
    flex:1;
    border:none;
    padding:16px 18px;
    outline:none;
    font-size:15px;
    color:var(--text);
}

.newsletter-form button{
    border:none;
    padding:0 26px;
    background:linear-gradient(90deg,#c99552,#b88755);
    color:#fff;
    font-weight:700;
    white-space:nowrap;
    cursor:pointer;
    transition:.25s;
}

.newsletter-form button:hover{
    background:#a8733d;
}

.posts{
    min-height:700px;
}


.blog-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:48px;
    align-items:start;
}

.blog-main{
    min-height:600px;
}

.blog-sidebar{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.sidebar-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:28px;
    box-shadow:var(--shadow);
}

.sidebar-newsletter{
    background:var(--navy);
    border:none;
    border-radius:18px;
    padding:28px;
    box-shadow:var(--shadow);
    color:#fff;
}

.sidebar-card h3{
    color:var(--navy);
    margin-bottom:18px;
}

.sidebar-newsletter h3{
    color:#fff;
    margin:0 0 10px;
    font-size:20px;
    font-weight:700;
    line-height:1.2;
}

.sidebar-categories{
	list-style:none;
	margin:0;
	padding:0;
}

.sidebar-categories li{
	border-bottom:1px solid var(--line);
}

.sidebar-categories li:last-child{
	border-bottom:none;
}

.sidebar-categories a{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:14px 0;
	color:#475569;
	text-decoration:none;
	transition:.25s;
}

.sidebar-categories span{
	display:flex;
	align-items:center;
	gap:14px;
}

.sidebar-categories i{
	width:18px;
	font-size:15px;
	color:#64748b;
	text-align:center;
}

.sidebar-categories strong{
	font-size:14px;
	font-weight:600;
	color:#64748b;
}

.sidebar-categories a:hover{
	color:var(--gold);
}

.sidebar-categories a:hover i{
	color:var(--gold);
}



@media(max-width:992px){
    .blog-layout{
        grid-template-columns:1fr;
    }
}


		
/* ===== BLOG6 LAYOUT ===== */

.blog-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 390px;
    gap:48px;
    align-items:start;
}

.blog-main{
    display:flex;
    flex-direction:column;
}

.blog-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:32px;
    align-items:start;
    margin-bottom:34px;
    padding-bottom:28px;
    border-bottom:1px solid var(--line);
}

.category-nav{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:18px 28px;
    white-space:normal;
}

.category-nav a{
    padding: 14px 0;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    color: #475569;
	flex:0 0 auto;

}



.category-nav a.active,
.category-nav a:hover{
    color:var(--navy);
    border-color:var(--gold);
}

.blog-search{
    width:100%;
    display:flex;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
}

.blog-search input{
    flex:1;
    border:none;
    padding:14px 16px;
    outline:none;
}

.blog-search button{
    border:none;
    background:#fff;
    padding:0 18px;
    cursor:pointer;
}


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

		.footer {

			background: #041d46;

			color: rgba(255,255,255,.82);

			padding: 70px 0 30px;

		}

		.footer-grid {

			display: grid;

			grid-template-columns: 2fr 1fr 1fr 1fr;

			gap: 50px;

		}

		.footer-logo img {

			width: 220px;

			margin-bottom: 25px;

		}

		.footer h4 {

			color: #fff;

			margin-bottom: 22px;

			font-size: 20px;

		}

		.footer ul {

			list-style: none;

		}

		.footer li {

			margin-bottom: 14px;

		}

		.footer a {

			transition: .25s;

		}

		.footer a:hover {

			color: var(--gold);

		}

.footer{

    background:#0B2454;

    padding:18px 0;

}

.footer-bottom{

    margin:0;

    padding:0;

    border:none;

    text-align:center;

    font-size:14px;

    color:rgba(255,255,255,.8);

}
		/* ==========================================
		   RESPONSIVE
		========================================== */

		@media (max-width:1200px){

			.posts{

				grid-template-columns:repeat(2,1fr);

			}

		}

		@media (max-width:992px){

			.hero{

				height:auto;

			}

			.hero-overlay{

				position:relative;

				background:var(--navy);

				padding:70px 0;

			}

			.hero-banner{

				display:none;

			}

			.hero-content{

				width:100%;

			}

			.cta-wrap{

				flex-direction:column;

				text-align:center;

			}

			.footer-grid{

				grid-template-columns:repeat(2,1fr);

			}

		}

		@media (max-width:768px){

			.menu{

				display:none;

			}

			.hero h1{

				font-size:44px;

			}

			.posts{

				grid-template-columns:1fr;

			}

			.footer-grid{

				grid-template-columns:1fr;

			}

			.cta-buttons{

				flex-direction:column;

				width:100%;

			}

			.btn,
			.btn-outline{

				width:100%;

			}
			.blog-main{
				width:100%;
			}

			.post-card{
				width:100%;
				max-width:100%;
			}
		}
	

		@media (max-width:500px){

			.container{

				width:calc(100% - 24px);

			}

			.hero{

				margin-top:90px;

			}

			.logo img{

				height:170px;

			}

			.hero h1{

				font-size:36px;

			}

.post-content{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:18px 28px 28px;
}

		}
.footer-top{
    background:var(--navy);
    padding:16px 0;
}

.footer-top-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:center;
    gap:28px;
}

.footer-feature{
    display:flex;
    align-items:center;
    gap:14px;
}

.footer-feature i{
    font-size:38px;
    color:var(--gold);
    min-width:42px;
    text-align:center;
}

.footer-feature strong{
    display:block;
    color:#fff;
    font-size:18px;
    margin-bottom:4px;
}

.footer-feature span{
    color:rgba(255,255,255,.78);
    font-size:15px;
    line-height:1.5;
}

.footer-brand{
    display:flex;
    justify-content:flex-end;
}

.footer-brand img{
    width:180px;
}
.latest-post{
    display:flex;
    gap:14px;
    margin-bottom:18px;
    padding-bottom:18px;
    border-bottom:1px solid var(--line);
}

.latest-post:last-child{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:none;
}

.latest-post img{
    width:90px;
    height:70px;
    object-fit:cover;
    border-radius:10px;
    flex-shrink:0;
}

.latest-post-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.latest-post-date{
    font-size:13px;
    color:var(--muted);
    margin-bottom:6px;
}

.latest-post-title{
    font-size:15px;
    font-weight:600;
    color:var(--navy);
    line-height:1.4;
    transition:.25s;
}

.latest-post:hover .latest-post-title{
    color:var(--gold);
}
.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:50px 0;
}

.pagination button{
    width:42px;
    height:42px;
    border:none;
    border-radius:10px;
    background:#fff;
    color:var(--navy);
    font-weight:700;
    cursor:pointer;
    box-shadow:var(--shadow);
    transition:.25s;
}

.pagination button:hover{
    background:var(--gold);
    color:#fff;
}

.pagination button.active{
    background:var(--navy);
    color:#fff;
}
.no-posts{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:80px 30px;
    text-align:center;
    background:#fff;
    border-radius:18px;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}

.no-posts i{
    font-size:60px;
    color:var(--gold);
    margin-bottom:20px;
}

.no-posts h2{
    font-size:28px;
    color:var(--navy);
    margin-bottom:12px;
}

.no-posts p{
    color:var(--muted);
    max-width:480px;
    line-height:1.7;
}
/* ==========================================
   MOBILE
========================================== */

.hamburger{
    display:none;
}

@media (max-width:980px){

    .nav{
        height:82px;
        justify-content:space-between;
    }

    .logo{
        margin-right:0;
    }

    .logo img{
        height:150px;
    }

    .btn{
        display:none;
    }

    .hamburger{
        display:flex;
        width:44px;
        height:44px;
        border:none;
        border-radius:10px;
        background:var(--navy);
        cursor:pointer;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:5px;
    }

    .hamburger span{
        width:22px;
        height:2px;
        background:#fff;
        border-radius:99px;
    }

    .menu{

        display:none;

        position:absolute;

        top:82px;

        left:20px;

        right:20px;

        background:#fff;

        border-radius:18px;

        box-shadow:0 18px 45px rgba(6,43,104,.14);

        padding:12px;

        flex-direction:column;

        gap:0;

        z-index:999;

    }

    .menu.open{

        display:flex;

    }

    .menu a{

        padding:14px 16px;

        border-radius:12px;

    }

    .menu a:hover{

        background:#f4f7fb;

    }

}
@media (max-width:768px){

    .hero{

        height:330px;

        margin-top:82px;

    }

    .hero h1{

        font-size:42px;

    }

    .hero p{

        font-size:16px;

    }

    .blog-toolbar{

        display:flex;

        flex-direction:column;

        gap:20px;

    }

    .blog-search{

        min-width:100%;

        width:100%;

    }



		.category-nav{
			display:flex;
			overflow-x:auto;
			overflow-y:hidden;

			flex-wrap:nowrap;

			width:100%;
			max-width:100%;

			gap:18px;

			padding-bottom:8px;

			scrollbar-width:none;
			-webkit-overflow-scrolling:touch;
		}

		.category-nav::-webkit-scrollbar{
			display:none;
		}

		.category-nav a{
			flex:0 0 auto;
		}



    .posts{

        grid-template-columns:1fr;

    }

    .blog-layout{

        grid-template-columns:1fr;

    }

    .footer-top-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-feature{

        justify-content:center;

    }

    .footer-brand{

        justify-content:center;

    }

}
/* ===== MOBILE FIX ===== */

@media (max-width:768px){

    .container{
        width:calc(100% - 32px);
        max-width:100%;
    }

    .blog-main,
    .blog-sidebar{
        width:100%;
    }

    .posts{
        width:100%;
    }

    .post-card{
        width:100%;
        max-width:100%;
        height:auto;
    }

}
@media (max-width:768px){

    .hero .container,
    .blog .container,
    .footer-top .container{
        width:calc(100% - 40px);
        margin:0 auto;
    }

}
@media (max-width:768px){

    .blog-layout,
    .blog-main,
    .blog-sidebar{
        min-width:0;
    }

    .posts{
        width:100%;
        min-width:0;
    }

    .post-card,
    .sidebar-card,
    .sidebar-newsletter{
        width:100%;
        max-width:100%;
        min-width:0;
    }
	.blog-search,
	.newsletter-form{
		width:100%;
		min-width:0;
	}

	.blog-search input,
	.newsletter-form input{
		min-width:0;
	}
}