:root {
    --gold: #c9a84c;
    --gold-light: #e8c97a;
    --gold-dark: #9a7530;
    --dark: #1a0f00;
    --dark2: #2a1a05;
    --dark3: #3a2510;
    --cream: #f5f0e8;
    --white: #ffffff;
    --text-light: #f5e6c8;
    --red-pin: #c0392b;
}

/* =========================================
GLOBAL
========================================= */

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

body{
    font-family:'EB Garamond',serif;
    background:var(--cream);
    color:#333;
    overflow-x:hidden;
}

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

.hero{
    background:
    linear-gradient(
        100deg,
        var(--dark) 45%,
        rgba(26,15,0,0.7) 100%
    );

    position:relative;

    min-height:415px;

    display:flex;

    align-items:center;

    overflow:hidden;
}

.hero-bg{
    position:absolute;
    inset:0;

    background:
    url('images/C1.jpeg')
    center/cover no-repeat;

    opacity:1;
}

.hero-content{
    position:relative;
    padding:60px 60px;
    max-width:560px;
    z-index:2;
}

.hero-sanskrit{
    color:#d4a017;
    font-size:13px;
    letter-spacing:1px;
    margin-bottom:14px;
    font-style:italic;
}

.hero h1{
    font-family:'Cinzel',serif;
    font-size:46px;
    font-weight:700;
    color:var(--white);
    line-height:1.1;
    margin-bottom:8px;
}

.hero-sub{
    font-family:'Cinzel',serif;
    font-size:18px;
    color:#d4a017;
    margin-bottom:20px;
}

.hero p{
    color:white;
    font-size:15px;
    line-height:1.8;
    max-width:420px;
}

/* =========================================
DIVIDER
========================================= */

.divider{
    width:80px;
    height:2px;

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

    margin:10px 0;
}

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

.contact-cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:1px;

    background:#e0d8c8;

    border-top:1px solid #e0d8c8;

    border-bottom:1px solid #e0d8c8;
}

.card{
    background:var(--white);

    padding:36px 20px;

    text-align:center;

    transition:.3s;
}

.card:hover{
    box-shadow:inset 0 -3px 0 #d4a017;
}

.card-icon{
    width:56px;
    height:56px;

    background:
    linear-gradient(
        135deg,
        #240202,
        #320404
    );

    border-radius:50%;

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

    margin:0 auto 14px;

    font-size:22px;

    color:var(--gold);
}

.card h3{
    font-family:'Cinzel',serif;
    font-size:15px;
    font-weight:600;
    color:var(--dark);
    margin-bottom:6px;
}

.card-line{
    width:50px;
    height:1px;

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

    margin:8px auto;
}

.card p{
    font-size:14px;
    color:#555;
    line-height:1.8;
}

/* =========================================
MAIN SECTION
========================================= */

.main-section{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:40px;

    padding:60px;

    background:var(--cream);
}

/* =========================================
FORM BOX
========================================= */

.form-box{
    background:
    linear-gradient(
        135deg,
        #240202,
        #320404
    );

    border-radius:12px;

    padding:40px 36px;

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

.form-box h2{
    font-family:'Cinzel',serif;
    color:var(--gold);

    font-size:22px;

    text-align:center;

    margin-bottom:6px;
}

.form-box .form-subtitle{
    color:white;

    font-size:13.5px;

    text-align:center;

    margin-bottom:28px;
}

/* =========================================
FORM ROW
========================================= */

.form-row{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

    margin-bottom:14px;
}

/* =========================================
FORM FIELD
========================================= */

.form-field{
    position:relative;
}

.form-field i{
    position:absolute;

    left:12px;
    top:50%;

    transform:translateY(-50%);

    color:#d4a017;

    font-size:13px;

    z-index:2;
}

/* =========================================
INPUT / SELECT / TEXTAREA
========================================= */

.form-field input,
.form-field select,
.form-field textarea{

    width:100%;

    background:
    linear-gradient(
        135deg,
        #240202,
        #320404
    ) !important;

    border:1px solid rgba(201,168,76,0.35);

    border-radius:6px;

    padding:12px 14px 12px 38px;

    color:#ffffff !important;

    font-family:'EB Garamond',serif;

    font-size:15px;

    outline:none;

    transition:.25s;
}

/* =========================================
PLACEHOLDER
========================================= */

.form-field input::placeholder,
.form-field textarea::placeholder{

    color:rgba(255,255,255,.75);
}

/* =========================================
FOCUS
========================================= */

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{

    border-color:#d4a017 !important;

    box-shadow:
    0 0 0 2px rgba(212,160,23,.15);

    background:
    linear-gradient(
        135deg,
        #240202,
        #320404
    ) !important;

    color:#ffffff !important;
}

/* =========================================
SELECT FIX
========================================= */

.form-field select{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    cursor:pointer;
}

/* DROPDOWN OPTIONS */

.form-field select option{

    background:#ffffff !important;

    color:#111111 !important;

    padding:10px;
}

/* =========================================
AUTOFILL FIX
========================================= */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{

    -webkit-box-shadow:
    0 0 0 1000px #240202 inset !important;

    -webkit-text-fill-color:
    #ffffff !important;

    caret-color:#ffffff !important;

    transition:
    background-color 9999s ease-in-out 0s;
}

/* =========================================
TEXTAREA
========================================= */

.form-field textarea{

    min-height:110px;

    resize:vertical;

    padding-top:14px;
}

/* =========================================
SELECT WRAP
========================================= */

.select-wrap{
    position:relative;
}

.select-wrap .chevron{
    position:absolute;

    right:14px;
    top:50%;

    transform:translateY(-50%);

    color:#d4a017;

    font-size:11px;

    pointer-events:none;
}

.form-field.full{
    margin-bottom:14px;
}

/* =========================================
SEND BUTTON
========================================= */

.btn-send{
    width:100%;

    background:
    linear-gradient(
        135deg,
        #C00000,
        #7A0000
    );

    color:white;

    border:1.5px solid #D4A017;

    border-radius:6px;

    padding:14px;

    font-family:'Cinzel',serif;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    cursor:pointer;

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

    gap:8px;

    transition:.3s;

    margin-top:6px;
}

.btn-send:hover{

    transform:translateY(-2px);

    box-shadow:
    0 8px 22px rgba(212,160,23,.25);
}

.btn-send:active{
    transform:scale(.99);
}

.form-note{
    text-align:center;

    color:white;

    font-size:12px;

    margin-top:14px;

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

    gap:6px;
}

/* =========================================
MAP
========================================= */

.map-box h2{
    font-family:'Cinzel',serif;

    font-size:22px;

    color:var(--dark);

    margin-bottom:16px;

    text-align:center;
}

.map-container{
    border-radius:12px;

    overflow:hidden;

    border:1px solid #d4c4a0;

    height:380px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);
}

.map-container iframe{
    width:100%;
    height:100%;
    border:none;
}

.btn-branches{
    display:flex;

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

    gap:8px;

    width:100%;

    background:
    linear-gradient(
        135deg,
        #3A0505,
        #1A0101
    );

    color:white;

    border:1.5px solid #D4A017;

    padding:14px;

    border-radius:6px;

    font-family:'Cinzel',serif;

    font-size:13px;

    letter-spacing:1px;

    cursor:pointer;

    margin-top:14px;

    transition:.3s;
}

.btn-branches:hover{
    transform:translateY(-2px);
}

/* =========================================
SOCIAL SECTION
========================================= */

.social-section{
    background:var(--white);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:40px 60px;

    border-top:1px solid #e0d8c8;

    border-bottom:1px solid #e0d8c8;

    gap:40px;

    flex-wrap:wrap;
}

.social-left{
    display:flex;
    align-items:center;
    gap:24px;
}

.social-emblem{
    width:90px;
    height:90px;

    border:1px solid var(--gold);

    border-radius:50%;

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

    font-size:70px;

    color:#d4a017;

    opacity:.7;
}

.social-text h3{
    font-family:'Cinzel',serif;

    font-size:20px;

    color:#3A0505;

    margin-bottom:4px;
}

.social-text p{
    color:black;
    font-size:14px;
}

.social-icons{
    display:flex;
    gap:16px;
}

.social-icon{
    width:52px;
    height:52px;

    border:1.5px solid #d4a017;

    border-radius:50%;

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

    font-size:20px;

    color:#3A0505;

    cursor:pointer;

    transition:.3s;

    text-decoration:none;
}

.social-icon:hover{
    border-color:black;
    color:#d4a017;
    transform:translateY(-2px);
}

/* =========================================
WHATSAPP FLOAT
========================================= */

.wa-float{
    position:fixed;

    bottom:24px;
    right:24px;

    width:56px;
    height:56px;

    background:#25D366;

    border-radius:50%;

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

    font-size:28px;

    color:white;

    box-shadow:
    0 6px 24px rgba(37,211,102,0.4);

    cursor:pointer;

    z-index:999;

    text-decoration:none;

    transition:.3s ease;
}

.wa-float:hover{
    transform:scale(1.12);

    box-shadow:
    0 10px 28px rgba(37,211,102,0.55);
}

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

@media screen and (max-width:1024px){

  .hero{
    min-height:360px;
  }

  .hero-content{
    padding:50px 30px;
  }

  .hero h1{
    font-size:38px;
  }

  /* CONTACT CARDS */

  .contact-cards{
    grid-template-columns:repeat(2,1fr);
  }

  .card{
    padding:28px 18px;
  }

  /* MAIN SECTION */

  .main-section{

    grid-template-columns:1fr;

    gap:28px;

    padding:40px 22px;
  }

  /* FORM SMALL */

  .form-box{

    padding:28px 24px;

    border-radius:12px;
  }

  .map-box{

    width:100%;
  }

  .map-container{

    height:320px;
  }

  /* SOCIAL */

  .social-section{

    padding:30px 22px;

    gap:24px;
  }

}


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

@media screen and (max-width:768px){

  /* HERO */

  .hero{

    min-height:auto;

    padding-top:90px;

    padding-bottom:45px;
  }

  .hero-content{

    padding:20px 18px;

    max-width:100%;
  }

  .hero h1{

    font-size:30px;

    line-height:1.2;
  }

  .hero-sub{

    font-size:15px;

    margin-bottom:14px;
  }

  .hero p{

    font-size:13px;

    line-height:1.8;

    max-width:100%;
  }

  /* CONTACT CARDS */

  .contact-cards{

    grid-template-columns:1fr;
  }

  .card{

    padding:24px 16px;
  }

  .card h3{

    font-size:14px;
  }

  .card p{

    font-size:13px;
  }

  /* MAIN SECTION */

  .main-section{

    padding:30px 12px;

    gap:22px;
  }

  /* FORM */

  .form-box{

    padding:22px 16px;

    border-radius:10px;
  }

  .form-box h2{

    font-size:20px;
  }

  .form-subtitle{

    font-size:12px !important;
  }

  .form-row{

    grid-template-columns:1fr;

    gap:12px;

    margin-bottom:12px;
  }

  .form-field.full{

    margin-bottom:12px;
  }

  .form-field i{

    font-size:12px;

    left:11px;
  }

  .form-field input,
  .form-field select,
  .form-field textarea{

    padding:10px 10px 10px 32px;

    font-size:13px;

    border-radius:7px;
  }

  .form-field textarea{

    min-height:100px;
  }

  .btn-send{

    padding:12px;

    font-size:13px;

    border-radius:8px;
  }

  .form-note{

    font-size:11px;

    line-height:1.5;
  }

  /* MAP */

  .map-box h2{

    font-size:20px;
  }

  .map-container{

    height:260px;

    border-radius:10px;
  }

  .btn-branches{

    padding:12px;

    font-size:12px;
  }

  /* SOCIAL */

  .social-section{

    padding:28px 16px;

    flex-direction:column;

    align-items:flex-start;

    gap:20px;
  }

  .social-left{

    gap:16px;
  }

  .social-emblem{

    width:70px;
    height:70px;

    font-size:48px;
  }

  .social-text h3{

    font-size:18px;
  }

  .social-text p{

    font-size:13px;
  }

  .social-icons{

    flex-wrap:wrap;

    gap:12px;
  }

  .social-icon{

    width:46px;
    height:46px;

    font-size:18px;
  }

  /* WHATSAPP */

  .wa-float{

    width:52px;
    height:52px;

    font-size:24px;

    bottom:18px;
    right:18px;
  }

}


/* =========================================
   EXTRA SMALL DEVICES
========================================= */

@media screen and (max-width:480px){

  .hero h1{

    font-size:26px;
  }

  .hero-sub{

    font-size:14px;
  }

  .hero p{

    font-size:12px;
  }

  .form-box h2{

    font-size:18px;
  }

  .map-box h2{

    font-size:18px;
  }

  .social-text h3{

    font-size:16px;
  }

}

/* =================================
NAVBAR BOOK APPOINTMENT BUTTON FIX
================================= */

.book-btn,
.nav-btn,
.cta-btn{

    border: 1.5px solid #D4A017 !important;

    outline: none !important;

    box-shadow: none !important;
}

/* HOVER */

.book-btn:hover,
.nav-btn:hover,
.cta-btn:hover{

    border: 1.5px solid #D4A017 !important;
}