/*==================================================
NIRVANA FARMS
MASTER STYLE.CSS
Version 2.0
==================================================*/


/*=============================
GOOGLE FONT
=============================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


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

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

font-size:16px;

color:#4d4d4d;

background:#ffffff;

line-height:1.8;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

transition:.35s;

}

ul{

list-style:none;

}


/*=============================
COLORS
=============================*/

:root{

--green:#214f31;

--dark:#173520;

--gold:#D4AF37;

--light:#f7f9f6;

--text:#5d5d5d;

--white:#ffffff;

--shadow:0 15px 40px rgba(0,0,0,.08);

--radius:22px;

}


/*=============================
CONTAINER
=============================*/

.section{

max-width:1300px;

margin:auto;

padding:90px 25px;

}

.section h2{

font-size:42px;

font-weight:700;

text-align:center;

margin-bottom:20px;

color:inherit;

}

.section-subtitle{

max-width:760px;

margin:0 auto 60px;

text-align:center;

font-size:18px;

color:#777;

}


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

.premium-header{

background:linear-gradient(180deg,#173520,#214f31);

padding:18px 0 10px;

position:sticky;

top:0;

z-index:999;

box-shadow:0 8px 25px rgba(0,0,0,.18);

}


/*=============================
LOGO
=============================*/

.logo-wrapper{

display:flex;

justify-content:center;

align-items:center;

margin-bottom:18px;

}

.site-logo{

height:95px;

width:auto;

transition:.4s;

}

.site-logo:hover{

transform:scale(1.05);

}


/*=============================
NAVIGATION
=============================*/

.premium-nav{

display:flex;

justify-content:center;

align-items:center;

gap:45px;

flex-wrap:wrap;

padding-bottom:15px;

}

.premium-nav a{

color:#ffffff;

font-weight:600;

font-size:16px;

letter-spacing:.3px;

display:flex;

align-items:center;

gap:8px;

position:relative;

}

.premium-nav a i{

color:var(--gold);

font-size:18px;

}

.premium-nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:var(--gold);

transition:.35s;

border-radius:50px;

}

.premium-nav a:hover{

color:var(--gold);

}

.premium-nav a:hover::after{

width:100%;

}


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

.hero{

min-height:88vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:80px 20px;

background:
linear-gradient(rgba(16,40,21,.60),rgba(16,40,21,.60)),
url("../images/hero.jpg");

background-size:cover;

background-position:center;

}

.hero-content{

max-width:900px;

color:#fff;

}

.hero-content h1{

font-size:72px;

font-weight:800;

line-height:1.1;

color:#fff;

margin-bottom:25px;

}

.hero-content p{

font-size:22px;

margin-bottom:40px;

color:#f3f3f3;

}


/*=============================
BUTTONS
=============================*/

.btn{

display:inline-block;

background:linear-gradient(135deg,#D4AF37,#B8860B);

padding:16px 36px;

border-radius:60px;

color:#fff;

font-weight:700;

font-size:16px;

box-shadow:0 15px 35px rgba(212,175,55,.35);

}

.btn:hover{

transform:translateY(-4px);

box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.btn-outline{

background:#fff;

color:var(--green);

border:2px solid var(--green);

}

.btn-outline:hover{

background:var(--green);

color:#fff;

}


/*=============================
CARDS
=============================*/

.card{

background:#fff;

border-radius:var(--radius);

padding:35px;

box-shadow:var(--shadow);

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

}

.grid{

display:grid;

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

gap:35px;

}

.card img{

border-radius:18px;

margin-bottom:25px;

}

.card h3{

font-size:26px;

margin-bottom:15px;

color:var(--dark);

}

.marathi-title{

color:var(--gold);

font-weight:600;

margin-bottom:18px;

font-size:18px;

}

.product-icon{

width:90px;

height:90px;

margin:0 auto 25px;

border-radius:50%;

background:linear-gradient(135deg,#214f31,#173520);

display:flex;

justify-content:center;

align-items:center;

font-size:40px;

color:#fff;

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

}


/*=============================
CTA
=============================*/

.cta-card{

background:linear-gradient(135deg,#173520,#214f31);

color:#fff;

text-align:center;

padding:70px;

border-radius:30px;

}

.cta-card h2{

color:#fff;

}

.cta-card p{

color:#f3f3f3;

}


/*=============================
FADE
=============================*/

.fade-up{

animation:fadeUp 1s ease forwards;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==================================================
PART 2
HOME PAGE
==================================================*/


/*==================================
SECTION BACKGROUNDS
==================================*/

.breeds-section{

background:#f8faf7;

border-radius:40px;

margin:80px auto;

padding:80px 40px;

}


/*==================================
CARD IMAGES
==================================*/

.card img{

width:100%;

height:260px;

object-fit:cover;

border-radius:18px;

transition:.45s;

}

.card:hover img{

transform:scale(1.05);

}


/*==================================
BREED & PRODUCT CARDS
==================================*/

.product-card,
.breeds-section .card{

overflow:hidden;

text-align:center;

position:relative;

}

.product-card::before,
.breeds-section .card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(90deg,var(--gold),#f7d777);

transform:scaleX(0);

transform-origin:left;

transition:.4s;

}

.product-card:hover::before,
.breeds-section .card:hover::before{

transform:scaleX(1);

}


/*==================================
CARD TITLES
==================================*/

.card h3{

font-size:28px;

margin-bottom:12px;

color:var(--dark);

font-weight:700;

}

.card p{

font-size:16px;

color:#666;

line-height:1.8;

}


/*==================================
PRODUCT ICONS
==================================*/

.product-icon{

transition:.4s;

}

.card:hover .product-icon{

transform:rotate(10deg) scale(1.08);

box-shadow:

0 18px 35px rgba(0,0,0,.18);

}


/*==================================
BREED IMAGE SHADOW
==================================*/

.breeds-section .card img{

box-shadow:

0 15px 35px rgba(0,0,0,.10);

}


/*==================================
BUTTONS INSIDE CARDS
==================================*/

.card .btn{

margin-top:20px;

}


/*==================================
ABOUT PREVIEW CARDS
==================================*/

.section .card{

height:100%;

display:flex;

flex-direction:column;

justify-content:flex-start;

}


/*==================================
CTA CARD
==================================*/

.cta-card{

position:relative;

overflow:hidden;

}

.cta-card::before{

content:"";

position:absolute;

right:-80px;

top:-80px;

width:250px;

height:250px;

border-radius:50%;

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

}

.cta-card::after{

content:"";

position:absolute;

left:-60px;

bottom:-60px;

width:180px;

height:180px;

border-radius:50%;

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

}


/*==================================
PREMIUM BUTTON HOVER
==================================*/

.btn{

position:relative;

overflow:hidden;

}

.btn::after{

content:"";

position:absolute;

top:0;

left:-120%;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transition:.7s;

}

.btn:hover::after{

left:120%;

}


/*==================================
SMALL ANIMATION
==================================*/

.card{

animation:appear .8s ease;

}

@keyframes appear{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*==================================
HOME PAGE SPACING
==================================*/

.hero + .section{

margin-top:30px;

}

.section{

position:relative;

}


/*==================================
MARATHI TITLE
==================================*/

.marathi-title{

display:block;

margin-bottom:18px;

color:var(--gold);

font-weight:600;

font-size:17px;

letter-spacing:.4px;

}


/*==================================
BETTER PARAGRAPHS
==================================*/

.section p{

line-height:1.9;

}


/*==================================
HOME HERO BUTTON
==================================*/

.hero .btn{

font-size:18px;

padding:18px 42px;

}

/*==================================================
PART 3
ABOUT PAGE
==================================================*/


/*=============================
FOUNDER SECTION
=============================*/

.founder-premium{

display:grid;

grid-template-columns:340px 1fr;

gap:70px;

align-items:center;

max-width:1200px;

margin:auto;

}

.founder-left{

text-align:center;

}

.founder-premium-img{

width:300px;

height:420px;

object-fit:cover;

border-radius:150px;

border:8px solid #ffffff;

box-shadow:
0 25px 60px rgba(0,0,0,.15);

transition:.45s;

margin:auto;

}

.founder-premium-img:hover{

transform:scale(1.03);

}

.founder-right{

padding:10px;

}

.founder-badge{

display:inline-block;

padding:10px 22px;

background:linear-gradient(135deg,#D4AF37,#B8860B);

color:#fff;

border-radius:40px;

font-size:14px;

font-weight:600;

margin-bottom:20px;

letter-spacing:.5px;

}

.founder-right h2{

text-align:left;

margin-bottom:15px;

}

.founder-right h3{

font-size:42px;

color:var(--dark);

margin-bottom:10px;

}

.founder-right p{

font-size:18px;

line-height:2;

margin-bottom:18px;

color:#666;

}

.founder-role{

text-align:center;

color:#c89d17;

font-weight:600;

font-size:17px;

letter-spacing:.6px;

margin:15px 0 30px;

text-transform:uppercase;

}

/*=============================
MISSION / VISION
=============================*/

.section .card{

overflow:hidden;

position:relative;

}

.section .card::before{

content:"";

position:absolute;

top:0;

left:0;

width:5px;

height:100%;

background:linear-gradient(var(--gold),#eac95c);

}

.section .card:hover{

transform:translateY(-8px);

}


/*=============================
JOURNEY
=============================*/

.breeds-section .product-icon{

margin-bottom:30px;

}

.breeds-section .card{

padding:40px;

}


/*=============================
INFRASTRUCTURE
=============================*/

.section .card img{

height:280px;

object-fit:cover;

border-radius:18px;

transition:.45s;

}

.section .card:hover img{

transform:scale(1.06);

}


/*=============================
FOUNDER QUOTE
=============================*/

.cta-card h2{

font-size:34px;

font-weight:600;

line-height:1.6;

}

.cta-card p{

font-size:18px;

margin-top:20px;

color:#f7f7f7;

}


/*=============================
PREMIUM IMAGE FRAME
=============================*/

.section .card img{

border:6px solid #fff;

box-shadow:

0 20px 40px rgba(0,0,0,.08);

}


/*=============================
GOLD UNDERLINE
=============================*/

.section h2{

font-size:42px;

font-weight:700;

color:var(--dark);

text-align:center;

margin:0 auto 18px;

display:block;

position:relative;

left:auto;

transform:none;

}



.section h2::after{

content:"";

display:block;

width:90px;

height:4px;

margin:18px auto 0;

background:var(--gold);

border-radius:20px;

}


/*=============================
BETTER SPACING
=============================*/

.section{

padding-top:100px;

padding-bottom:100px;

}


/*=============================
SOFT BACKGROUND
=============================*/

body{

background:

linear-gradient(

180deg,

#ffffff,

#fbfcfa

);

}


/*=============================
IMAGE RADIUS
=============================*/

.card img{

border-radius:24px;

}


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

@media(max-width:992px){

.founder-premium{

grid-template-columns:1fr;

text-align:center;

gap:40px;

}

.founder-right h2{

text-align:center;

}

.founder-right h3{

font-size:34px;

}

.founder-premium-img{

width:230px;

height:320px;

border-radius:120px;

}

.founder-right p{

font-size:17px;

text-align:center;

}

}

/*==================================================
PART 4
PRODUCTS • BREEDS • GALLERY
==================================================*/


/*==================================
PRODUCT GRID
==================================*/

.products-grid{

display:grid;

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

gap:35px;

margin-top:40px;

}

.product-card{

text-align:center;

position:relative;

overflow:hidden;

background:#fff;

border-radius:25px;

padding:40px 30px;

transition:.35s;

}

.product-card:hover{

transform:translateY(-12px);

box-shadow:
0 30px 70px rgba(0,0,0,.12);

}

.product-card::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:6px;

background:linear-gradient(90deg,var(--gold),#efc94c);

transform:scaleX(0);

transform-origin:center;

transition:.35s;

}

.product-card:hover::after{

transform:scaleX(1);

}


/*==================================
PRODUCT ICON
==================================*/

.product-icon{

width:95px;

height:95px;

margin:auto;

margin-bottom:25px;

font-size:42px;

background:

linear-gradient(

135deg,

#214f31,

#173520

);

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

box-shadow:

0 18px 35px rgba(0,0,0,.15);

transition:.35s;

}

.product-card:hover .product-icon{

transform:

rotate(10deg)

scale(1.08);

}


/*==================================
PRODUCT BUTTON
==================================*/

.product-card .btn{

margin-top:25px;

}


/*==================================
BREED PAGE
==================================*/

.breeds-section .grid{

gap:40px;

}

.breeds-section .card{

background:#fff;

border-radius:28px;

overflow:hidden;

}

.breeds-section .card img{

height:280px;

object-fit:cover;

transition:.45s;

}

.breeds-section .card:hover img{

transform:scale(1.08);

}


/*==================================
BREED NAME
==================================*/

.breeds-section h3{

font-size:30px;

margin-top:10px;

margin-bottom:8px;

}


/*==================================
BREED BUTTON
==================================*/

.breeds-section .btn{

margin-top:20px;

}


/*==================================
BREED IMAGE OVERLAY
==================================*/

.breeds-section .card{

position:relative;

}

.breeds-section .card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:280px;

background:

linear-gradient(

transparent,

rgba(0,0,0,.12)

);

pointer-events:none;

}


/*==================================
GALLERY
==================================*/

.gallery-grid{

display:grid;

grid-template-columns:

repeat(auto-fill,minmax(320px,1fr));

gap:30px;

margin-top:40px;

}

.gallery-item{

overflow:hidden;

border-radius:25px;

box-shadow:

0 20px 45px rgba(0,0,0,.10);

background:#fff;

}

.gallery-item img{

width:100%;

height:320px;

object-fit:cover;

transition:.45s;

}

.gallery-item:hover img{

transform:scale(1.08);

}


/*==================================
IMAGE SHINE
==================================*/

.gallery-item{

position:relative;

}

.gallery-item::after{

content:"";

position:absolute;

top:-100%;

left:-100%;

width:80%;

height:220%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.28),

transparent

);

transform:rotate(25deg);

transition:.7s;

}

.gallery-item:hover::after{

left:180%;

}


/*==================================
PREMIUM SHADOW
==================================*/

.gallery-item:hover{

box-shadow:

0 30px 65px rgba(0,0,0,.15);

}


/*==================================
SECTION HEADINGS
==================================*/

.section h2{

margin-bottom:18px;

}

.section-subtitle{

margin-bottom:55px;

}


/*==================================
BETTER SPACING
==================================*/

.product-card p,

.breeds-section p{

margin-top:12px;

margin-bottom:10px;

}


/*==================================
SMALL HOVER
==================================*/

.product-card h3,

.breeds-section h3{

transition:.3s;

}

.product-card:hover h3,

.breeds-section .card:hover h3{

color:var(--green);

}


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

@media(max-width:1100px){

.products-grid{

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

}

}

@media(max-width:768px){

.products-grid,

.gallery-grid,

.grid{

grid-template-columns:1fr;

}

.product-icon{

width:80px;

height:80px;

font-size:36px;

}

.gallery-item img{

height:260px;

}

}


/*==================================================
PART 5
FOOTER • CONTACT • WHATSAPP
==================================================*/


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

footer{

background:linear-gradient(180deg,#173520,#102916);

color:#fff;

padding:70px 20px;

text-align:center;

margin-top:80px;

position:relative;

overflow:hidden;

}

footer::before{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

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

top:-150px;

right:-120px;

}

footer::after{

content:"";

position:absolute;

width:250px;

height:250px;

border-radius:50%;

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

left:-120px;

bottom:-120px;

}

footer>*{

position:relative;

z-index:2;

}

footer h3{

color:#fff;

font-size:34px;

margin-bottom:15px;

}

footer p{

color:#d8d8d8;

margin-bottom:10px;

font-size:17px;

}

footer i{

color:var(--gold);

margin-right:8px;

}


/*=============================
WHATSAPP BUTTON
=============================*/

.whatsapp-btn{

position:fixed;

right:25px;

bottom:25px;

background:#25D366;

color:#fff;

padding:15px 22px;

border-radius:60px;

display:flex;

align-items:center;

gap:10px;

font-weight:700;

font-size:16px;

box-shadow:

0 20px 45px rgba(37,211,102,.35);

z-index:999;

transition:.35s;

}

.whatsapp-btn:hover{

transform:translateY(-5px);

box-shadow:

0 25px 50px rgba(0,0,0,.25);

}

.whatsapp-btn i{

font-size:28px;

}


/*=============================
GENERAL LINKS
=============================*/

a{

transition:.35s;

}

a:hover{

text-decoration:none;

}


/*=============================
SECTION ANIMATION
=============================*/

.section{

animation:fadeSection .8s ease;

}

@keyframes fadeSection{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*=============================
SCROLLBAR
=============================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#efefef;

}

::-webkit-scrollbar-thumb{

background:var(--green);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--dark);

}


/*=============================
TEXT SELECTION
=============================*/

::selection{

background:var(--gold);

color:#fff;

}


/*=============================
IMAGE TRANSITION
=============================*/

img{

transition:.4s;

}


/*=============================
SMOOTH CARD SHADOW
=============================*/

.card{

transition:

transform .35s,

box-shadow .35s;

}


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

@media(max-width:768px){

footer{

padding:50px 20px;

}

footer h3{

font-size:28px;

}

footer p{

font-size:15px;

}

.whatsapp-btn{

right:15px;

bottom:15px;

padding:14px 18px;

font-size:14px;

}

.whatsapp-btn i{

font-size:24px;

}

}

/*==================================================
PART 6
BREED DETAILS
==================================================*/


/*==============================
BREED HERO
==============================*/

.breed-hero{

min-height:55vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}

.breed-hero h1{

font-size:68px;

color:#fff;

margin-bottom:15px;

text-shadow:0 5px 20px rgba(0,0,0,.35);

}

.breed-hero p{

font-size:26px;

color:#f3f3f3;

}


/*==============================
PROFILE
==============================*/

.breed-profile{

display:grid;

grid-template-columns:430px 1fr;

gap:70px;

align-items:start;

}

.breed-left{

position:sticky;

top:130px;

}

.breed-main-image{

width:100%;

border-radius:30px;

box-shadow:

0 30px 60px rgba(0,0,0,.15);

transition:.45s;

}

.breed-main-image:hover{

transform:scale(1.02);

}


/*==============================
RIGHT PANEL
==============================*/

.breed-right h2{

font-size:46px;

margin-bottom:10px;

color:var(--dark);

}

.breed-short{

font-size:19px;

line-height:1.9;

margin:30px 0;

color:#666;

}


/*==============================
BADGE
==============================*/

.breed-badge{

display:inline-block;

background:

linear-gradient(135deg,#D4AF37,#B8860B);

color:#fff;

padding:10px 22px;

border-radius:40px;

font-weight:600;

margin-bottom:25px;

}


/*==============================
SPEC GRID
==============================*/

.breed-specs{

display:grid;

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

gap:20px;

margin:40px 0;

}

.spec-box{

display:flex;

gap:18px;

align-items:center;

padding:20px;

background:#fff;

border-radius:20px;

box-shadow:

0 15px 35px rgba(0,0,0,.08);

transition:.35s;

}

.spec-box:hover{

transform:translateY(-6px);

}

.spec-box i{

width:60px;

height:60px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#214f31,#173520);

color:#fff;

font-size:22px;

border-radius:50%;

flex-shrink:0;

}

.spec-box strong{

display:block;

margin-bottom:5px;

color:var(--dark);

font-size:16px;

}

.spec-box span{

color:#666;

}


/*==============================
BUTTONS
==============================*/

/*==================================
BREED CTA BUTTONS
==================================*/

.breed-buttons{

display:flex;

justify-content:center;

align-items:center;

gap:25px;

margin-top:40px;

flex-wrap:wrap;

width:100%;

}

.breed-buttons .btn{

min-width:220px;

text-align:center;

padding:18px 35px;

font-size:17px;

font-weight:600;

border-radius:60px;

}


/*==============================
OVERVIEW
==============================*/

.breed-overview{

max-width:1100px;

margin:auto;

}

.overview-card{

background:#fff;

padding:50px;

border-radius:30px;

box-shadow:

0 20px 45px rgba(0,0,0,.08);

position:relative;

}

.overview-card::before{

content:"";

position:absolute;

left:0;

top:40px;

width:6px;

height:90px;

background:var(--gold);

border-radius:20px;

}

.overview-card p{

font-size:19px;

line-height:2;

color:#555;

}


/*==============================
FEATURE CARDS
==============================*/

.feature-card{

text-align:center;

padding:40px 30px;

}

.feature-card:hover{

transform:translateY(-10px);

}

.feature-card h3{

margin-top:25px;

margin-bottom:18px;

color:var(--dark);

}

.feature-card p{

font-size:16px;

}


/*==============================
AVAILABLE
==============================*/

.farm-benefits{

background:

linear-gradient(135deg,#173520,#214f31);

padding:60px;

border-radius:30px;

color:#fff;

text-align:center;

}

.farm-benefits h2{

color:#fff;

margin-bottom:40px;

}

.benefit-grid{

display:grid;

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

gap:22px;

}

.benefit-grid div{

background:

rgba(255,255,255,.08);

padding:22px;

border-radius:18px;

font-size:18px;

}

.benefit-grid i{

color:var(--gold);

margin-right:8px;

}


/*==============================
CTA
==============================*/

.cta-card{

max-width:1200px;

margin:auto;

background:linear-gradient(135deg,#173520,#214f31);

padding:80px 60px;

border-radius:35px;

text-align:center;

position:relative;

overflow:hidden;

}

.cta-card h2{

color:#fff;

font-size:54px;

margin-bottom:25px;

}

.cta-card p{

font-size:22px;

color:#f5f5f5;

margin-bottom:45px;

max-width:800px;

margin-left:auto;

margin-right:auto;

line-height:1.8;

}


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

@media(max-width:1100px){

.breed-profile{

grid-template-columns:1fr;

}

.breed-left{

position:static;

}

.breed-main-image{

max-width:520px;

margin:auto;

display:block;

}

}

@media(max-width:768px){

.breed-hero h1{

font-size:46px;

}

.breed-right h2{

font-size:34px;

text-align:center;

}

.breed-short{

text-align:center;

}

.breed-specs{

grid-template-columns:1fr;

}

.breed-buttons{

justify-content:center;

}

.benefit-grid{

grid-template-columns:1fr;

}

.overview-card{

padding:30px;

}

.overview-card p{

font-size:17px;

}

}

/*==================================================
PART 7
PREMIUM FINISHING TOUCHES
==================================================*/


/*==================================
SMOOTH PAGE LOADING
==================================*/

body{

animation:pageFade .6s ease;

}

@keyframes pageFade{

from{

opacity:0;

}

to{

opacity:1;

}

}


/*==================================
HEADER GLASS EFFECT
==================================*/

.premium-header{

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

}


/*==================================
NAVIGATION HOVER
==================================*/

.premium-nav a{

padding:8px 5px;

border-radius:8px;

}

.premium-nav a:hover{

transform:translateY(-2px);

}


/*==================================
SECTION TITLE ANIMATION
==================================*/

.section h2{

transition:.35s;

}

.section:hover h2{

letter-spacing:.5px;

}


/*==================================
CARD SHINE EFFECT
==================================*/

.card{

position:relative;

overflow:hidden;

}

.card::after{

content:"";

position:absolute;

top:-150%;

left:-120%;

width:70%;

height:300%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.18),

transparent

);

transform:rotate(25deg);

transition:.8s;

pointer-events:none;

}

.card:hover::after{

left:180%;

}


/*==================================
BUTTON RIPPLE
==================================*/

.btn{

position:relative;

overflow:hidden;

}

.btn span{

position:relative;

z-index:2;

}


/*==================================
IMAGE BORDER GLOW
==================================*/

.card img,

.gallery-item img,

.breed-main-image,

.founder-premium-img{

transition:.45s;

}

.card:hover img,

.gallery-item:hover img,

.breed-main-image:hover,

.founder-premium-img:hover{

box-shadow:

0 25px 55px rgba(212,175,55,.25);

}


/*==================================
PREMIUM ICONS
==================================*/

.product-icon i,

.spec-box i{

transition:.35s;

}

.card:hover .product-icon i,

.spec-box:hover i{

transform:scale(1.15);

}


/*==================================
SCROLL TO TOP BUTTON
(Optional if you add HTML later)
==================================*/

.scroll-top{

position:fixed;

right:25px;

bottom:95px;

width:50px;

height:50px;

background:var(--gold);

color:#fff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

box-shadow:0 15px 35px rgba(0,0,0,.2);

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}

.scroll-top.show{

opacity:1;

visibility:visible;

}


/*==================================
HERO TEXT SHADOW
==================================*/

.hero-content h1{

text-shadow:

0 6px 20px rgba(0,0,0,.35);

}

.hero-content p{

text-shadow:

0 2px 10px rgba(0,0,0,.25);

}


/*==================================
SUBTLE BACKGROUND PATTERN
==================================*/

.section{

background-image:

radial-gradient(circle at top right,

rgba(212,175,55,.03),

transparent 35%);

}


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

footer a{

color:#fff;

}

footer a:hover{

color:var(--gold);

}


/*==================================
HOVER LIFT
==================================*/

.product-card,
.feature-card,
.gallery-item,
.spec-box{

transition:

transform .35s,

box-shadow .35s;

}


/*==================================
FORM INPUTS
(For future contact form)
==================================*/

input,
textarea,
select{

width:100%;

padding:15px;

border:1px solid #ddd;

border-radius:12px;

font-family:'Poppins',sans-serif;

font-size:16px;

transition:.3s;

}

input:focus,
textarea:focus,
select:focus{

outline:none;

border-color:var(--gold);

box-shadow:

0 0 0 4px rgba(212,175,55,.15);

}


/*==================================
TABLES
(Future Admin Pages)
==================================*/

table{

width:100%;

border-collapse:collapse;

}

table th{

background:var(--green);

color:#fff;

padding:15px;

}

table td{

padding:14px;

border-bottom:1px solid #eee;

}


/*==================================
MOBILE POLISH
==================================*/

@media(max-width:768px){

.hero{

min-height:65vh;

padding:50px 20px;

}

.hero-content h1{

font-size:42px;

}

.hero-content p{

font-size:18px;

}

.section{

padding:70px 18px;

}

.section h2{

font-size:32px;

}

.card{

padding:25px;

}

.site-logo{

height:75px;

}

.premium-nav{

gap:18px;

}

.premium-nav a{

font-size:15px;

}

}


/*==================================
END OF MASTER CSS
==================================*/

.cta-card h1,
.cta-card h2,
.cta-card h3{

color:#ffffff !important;

}

.cta-card p{

color:#f3f3f3 !important;

}