/*==================================================
          CALDRIN OFFICIAL
      LUXURY GOLD EDITION
              PART 1
===================================================*/

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

:root{

--bg:#0d0c0b;
--bg2:#171312;
--bg3:#241d18;

--gold:#c39b70;
--gold-light:#e5c9a7;
--gold-soft:#f4e6d3;

--white:#fdfaf6;
--text:#d8cfc6;
--border:rgba(229,201,167,.22);

}

*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;

}

html{

scroll-behavior:smooth;

}

body{


background-color: white;

color:var(--white);

overflow-x:hidden;
overflow-y:auto;

min-height:100vh;

position:relative;

}

/*=========================
      Scrollbar
=========================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#13110f;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

180deg,

#8d6b4d,

#c39b70,

#f1deca

);

border-radius:50px;

}

/*=========================
      Luxury Background
=========================*/

.bg{

position:fixed;

inset:0;

background:

radial-gradient(circle at 15% 20%,
rgba(195,155,112,.13),
transparent 35%),

radial-gradient(circle at 85% 15%,
rgba(245,231,212,.08),
transparent 30%),

radial-gradient(circle at 50% 90%,
rgba(140,107,79,.12),
transparent 35%);

z-index:-15;

}

/*=========================
     Luxury Aurora
=========================*/

.gradient{

position:fixed;

inset:-20%;

background:

linear-gradient(

135deg,

transparent,

rgba(195,155,112,.10),

transparent,

rgba(245,231,212,.06),

transparent

);

filter:blur(150px);

animation:aurora 18s linear infinite;

z-index:-14;

}

@keyframes aurora{

0%{

transform:rotate(0deg) scale(1);

}

50%{

transform:rotate(180deg) scale(1.15);

}

100%{

transform:rotate(360deg) scale(1);

}

}

/*=========================
       Noise
=========================*/

.noise{

position:fixed;

inset:0;

opacity:.025;

pointer-events:none;

background-image:

radial-gradient(circle,#fff 1px,transparent 1px);

background-size:7px 7px;

z-index:-13;

}

/*=========================
       Hero
=========================*/

.hero{

width:100%;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

padding:45px;

position:relative;

}

/*=========================
        Logo
=========================*/

.logo{

text-align:center;

margin-bottom:35px;

animation:fadeDown 1.2s ease;

}

.logo h1{

font-size:72px;

font-weight:800;

letter-spacing:12px;

background:

linear-gradient(

90deg,

#fffdf9,

#f3ddc4,

#c39b70

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

text-shadow:

0 0 25px rgba(195,155,112,.25);

}

.logo p{

margin-top:12px;

font-size:15px;

letter-spacing:5px;

color:#bda991;

}

/*=========================
      Heading
=========================*/

.heading{

text-align:center;

max-width:850px;

margin-bottom:70px;

}

.heading h2{

font-size:58px;

font-weight:700;

line-height:72px;

color:#000000;

}

.heading span{

color:#d9b188;

text-shadow:

0 0 20px rgba(195,155,112,.45),

0 0 60px rgba(195,155,112,.20);

}

.heading p{

margin-top:20px;

font-size:18px;

line-height:32px;

color:#cabfb4;

}
/*==================================================
                LUXURY CARDS
                  PART 2
===================================================*/

.cards{

display:flex;

justify-content:center;

align-items:center;

gap:50px;

flex-wrap:wrap;

width:100%;

}

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

.card{

position:relative;

width:370px;

height:500px;

padding:40px;

overflow:hidden;

border-radius:34px;

cursor:pointer;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:

linear-gradient(

145deg,

rgba(255,255,255,.06),

rgba(255,255,255,.03)

);

backdrop-filter:blur(22px);

border:1px solid rgba(229,201,167,.20);

box-shadow:

0 30px 80px rgba(0,0,0,.45),

inset 0 0 30px rgba(255,255,255,.02);

transition:.6s ease;

}

/*=========================
    GOLD BORDER EFFECT
=========================*/

.card::before{

content:"";

position:absolute;

inset:0;

padding:1.3px;

border-radius:34px;

background:

linear-gradient(

135deg,

rgba(255,255,255,.55),

rgba(229,201,167,.45),

transparent,

rgba(195,155,112,.60)

);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

pointer-events:none;

}

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

.card:hover{

transform:

translateY(-18px)

scale(1.03);

border-color:

rgba(229,201,167,.55);

box-shadow:

0 40px 100px rgba(195,155,112,.22);

}

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

.icon{

width:120px;

height:120px;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:30px;

border-radius:50%;

background:

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

border:

1px solid rgba(229,201,167,.18);

box-shadow:

0 0 35px rgba(195,155,112,.15),

inset 0 0 20px rgba(255,255,255,.04);

transition:.6s;

}

.icon img{

width:72px;

height:72px;

object-fit:contain;

filter:

drop-shadow(0 0 15px rgba(195,155,112,.35));

}

.card:hover .icon{

transform:

scale(1.1)

rotate(6deg);

box-shadow:

0 0 45px rgba(195,155,112,.35);

}

/*=========================
      CARD TEXT
=========================*/

.card h3{

font-size:34px;

letter-spacing:5px;

font-weight:700;

margin-bottom:8px;

color:#fff;

}

.card h4{

font-size:24px;

font-weight:500;

margin-bottom:18px;

color:#d9b188;

}

.card p{

font-size:16px;

line-height:30px;

text-align:center;

color:#cbbfb3;

max-width:280px;

margin-bottom:35px;

}

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

.shine{

position:absolute;

top:-120%;

left:-120%;

width:160%;

height:250%;

background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.22),

transparent

);

transform:rotate(25deg);

transition:1s;

}

.card:hover .shine{

left:150%;

}

/*=========================
    TOP LIGHT EFFECT
=========================*/

.light{

position:absolute;

top:-100px;

right:-100px;

width:220px;

height:220px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(245,231,212,.18),

transparent 70%

);

filter:blur(18px);

transition:.6s;

}

.card:hover .light{

transform:scale(1.35);

}

/*=========================
   REFLECTION EFFECT
=========================*/

.reflection{

position:absolute;

top:0;

left:-130%;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.15),

transparent

);

transform:skewX(-25deg);

transition:1.1s;

}

.card:hover .reflection{

left:160%;

}
/*==================================================
         BUTTONS • LOADER • FOOTER
             LUXURY GOLD EDITION
                 PART 3
===================================================*/

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

.card button{

position:relative;

width:190px;

height:56px;

border:none;

outline:none;

cursor:pointer;

border-radius:50px;

overflow:hidden;

font-size:16px;

font-weight:600;

letter-spacing:2px;

color:#fff;

background:linear-gradient(
135deg,
#7b5a3d,
#c39b70,
#f4e6d3
);

box-shadow:
0 15px 35px rgba(195,155,112,.30);

transition:.45s ease;

}

.card button:hover{

transform:translateY(-6px);

box-shadow:
0 22px 45px rgba(195,155,112,.45);

}

.card button::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.55),
transparent
);

transform:skewX(-25deg);

transition:.8s;

}

.card button:hover::before{

left:160%;

}

/*=========================
        LOADER
=========================*/

#loader{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:#0d0c0b;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:99999;

transition:1s;

}

.loader-ring{

width:90px;
height:90px;

border-radius:50%;

border:4px solid rgba(255,255,255,.08);

border-top:4px solid #d9b188;

animation:loaderSpin 1s linear infinite;

margin-bottom:25px;

}

#loader h2{

font-size:30px;

letter-spacing:8px;

color:#f4e6d3;

}

@keyframes loaderSpin{

100%{

transform:rotate(360deg);

}

}

/*=========================
      SCROLL INDICATOR
=========================*/

.scroll-indicator{

position:absolute;

bottom:85px;

left:50%;

transform:translateX(-50%);

width:28px;
height:46px;

border:4px solid rgba(0, 0, 0, 0.35);

border-radius:30px;

}

.scroll-indicator span{

position:absolute;

left:50%;

top:8px;

transform:translateX(-50%);

width:5px;
height:10px;

border-radius:20px;

background:#b6926f;

animation:scrollDown 2s infinite;

}

@keyframes scrollDown{

0%{

opacity:0;

top:8px;

}

50%{

opacity:1;

}

100%{

opacity:0;

top:24px;

}

}

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

footer{

margin-top:70px;

padding-bottom:30px;

text-align:center;

font-size:14px;

color:#bca48b;

}

footer span{

color:#d9b188;

margin:0 10px;

}

/*=========================
     CURSOR GLOW
=========================*/

#cursor-glow{

position:fixed;

width:280px;

height:280px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(195,155,112,.18),

transparent 70%

);

pointer-events:none;

transform:translate(-50%,-50%);

z-index:-1;

transition:

left .08s linear,

top .08s linear;

}

/*=========================
   FLOATING LIGHTS
=========================*/

.circle{

position:fixed;

border-radius:50%;

filter:blur(90px);

opacity:.18;

pointer-events:none;

animation:float 10s ease-in-out infinite;

z-index:-5;

}

.circle1{

width:220px;

height:220px;

background:#8c6b4f;

top:10%;

left:-70px;

}

.circle2{

width:260px;

height:260px;

background:#d9b188;

right:-80px;

top:55%;

animation-delay:2s;

}

.circle3{

width:180px;

height:180px;

background:#f4e6d3;

bottom:-50px;

left:45%;

animation-delay:4s;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-35px);

}

100%{

transform:translateY(0);

}

}

/*=========================
    ENTRY ANIMATIONS
=========================*/

.logo{

animation:fadeDown 1s ease;

}

.heading{

animation:fadeUp 1.2s ease;

}

.card{

animation:cardShow 1.4s ease;

}

@keyframes fadeDown{

0%{

opacity:0;

transform:translateY(-60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes cardShow{

0%{

opacity:0;

transform:translateY(100px);

}

100%{

opacity:1;

transform:translateY(0);

}

}
/*==================================================
         RESPONSIVE + FINAL POLISH
              PART 4 (FINAL)
===================================================*/

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

@media (max-width:1200px){

.cards{

gap:35px;

}

.card{

width:340px;
height:480px;

}

.heading h2{

font-size:52px;
line-height:66px;

}

}

@media (max-width:992px){

.hero{

padding:80px 25px 100px;

}

.cards{

flex-direction:column;

gap:35px;

}

.card{

width:90%;
max-width:430px;

height:auto;

padding:35px;

}

.logo h1{

font-size:58px;

letter-spacing:7px;

}

.heading{

margin-bottom:50px;

}

.heading h2{

font-size:45px;

line-height:58px;

}

.heading p{

font-size:17px;

line-height:30px;

}

.scroll-indicator{

display:none;

}

}

@media (max-width:768px){

.hero{

padding:70px 20px 90px;

}

.logo h1{

font-size:44px;

letter-spacing:5px;

}

.logo p{

font-size:13px;

letter-spacing:3px;

}

.heading h2{

font-size:35px;

line-height:46px;

}

.heading p{

font-size:15px;

line-height:28px;

}

.card{

width:100%;

padding:30px;

border-radius:28px;

}

.icon{

width:95px;
height:95px;

}

.icon img{

width:58px;
height:58px;

}

.card h3{

font-size:28px;

}

.card h4{

font-size:21px;

}

.card button{

width:170px;
height:50px;

font-size:15px;

}

.circle{

display:none;

}

#cursor-glow{

display:none;

}

}

@media (max-width:480px){

.logo h1{

font-size:35px;

letter-spacing:3px;

}

.heading h2{

font-size:29px;

line-height:38px;

}

.heading p{

font-size:14px;

line-height:24px;

}

.card{

padding:25px;

}

.card h3{

font-size:24px;

}

.card h4{

font-size:18px;

}

.card p{

font-size:14px;

line-height:24px;

}

.icon{

width:80px;
height:80px;

}

.icon img{

width:48px;
height:48px;

}

.card button{

width:155px;

height:46px;

font-size:14px;

}

footer{

font-size:12px;

line-height:20px;

padding:0 15px 20px;

}

}

/*=========================
      RIPPLE EFFECT
=========================*/

.card button{

overflow:hidden;

position:relative;

}

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

/*=========================
     PERFORMANCE
=========================*/

.card,
.card *,
button,
.icon,
.light,
.reflection,
.shine{

will-change:transform,opacity;

}

/*=========================
   SMOOTH SELECTION
=========================*/

::selection{

background:#c39b70;

color:#fff;

}

/*=========================
      IMAGE QUALITY
=========================*/

img{

max-width:100%;

display:block;

user-select:none;

-webkit-user-drag:none;

}

/*=========================
      FINAL TOUCH
=========================*/

.card:hover h3{

color:#f4e6d3;

}

.card:hover h4{

color:#f0d5b5;

}

.card:hover p{

color:#efe7de;

}

.card:hover{

backdrop-filter:blur(28px);

}

.h1qwer {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.h1qwer h1 {
    font-size: 80px;
    font-weight: bold;
    text-align: center;
    color: #000000;
}

/*==================================================
          END OF STYLE.CSS
==================================================*/