:root {

    --rich-black-fogra-39_50: hsla(0, 0%, 5%, 0.5);
    --rich-black-fogra-39: hsl(0, 0%, 5%);
    --indian-yellow_10: hsla(36, 61%, 58%, 0.1);
    --indian-yellow: #CCAC5E;
    --harvest-gold:hsl(36, 66%, 53%);
    --eerie-black-1:hsl(0,0%,14%);
    --eerie-black-2:hsl(0,0%,12%);
    --eerie-black-2_85: hsla(0, 0%,12%,0.85);
    --eerie-black-3:hsl(0,0%,8%);
    --sonic-silver:hsl(0,0%,44%);
    --davys-gray:hsl(210,9%,31%);
    --light-gray:hsl(0,0%,80%);
    --platinum: hsl(0,0%,91%);
    --black_30: hsla(0,0%,0%,0.3);
    --white_10: hsla(0,0%,100%,0.1);
    --white_30:hsla(0,0%,100%,0.3);
    --white_50: hsla(0,0%,100%,0.5);
    --white: hsl(0,0%,100%);
    --jet:hsl(0,0%,21%);
    
    
    
    
        --ff-raleway : 'Raleway', sans-serif;
        --ff-playfair: 'Playfair Display SC', serif;
        --ff-dancingscript: 'Dancing Script', sans-serif;
    
        --fs-40: 4rem;
        --fs-30: 3rem;
        --fs-24: 2.4rem;
        --fs-10:1.8rem;
        --fs-14:1.4rem;
        --fs-13:1.3rem;
    
        --fw-300:300;
        --fw-500: 500;
        --fw-600: 600;
        --fw-700: 700;
    
     --section-padding: 80px;
    
     --shadow-1: 10px 0 60px hsla(0, 0%, 15%, 0.07);
     --shadow-2: 10px 0 60px hsla(0, 0%, 15%, 0.1);
    
     --radius-5:5px;
     --radius-8: 8px;
    
     --transition-1: 0.25s ease;
     --transition-2: 0.5s ease;
     --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
    
    
    }
    
    
     *,
     *::before,
     *::after{
        margin:0;
        padding: 0;
        box-sizing: border-box;
     }
    
     li {list-style:none; }
     a,
     img,
     span,
     data,
     input,
     select,
     button,
     textarea,
     ion-icon { display: block; }
    
     a {
        color:inherit;
        text-decoration: none;
    
     }
    
     img { height: auto;}
    
     input,
     select,
     button,
     textarea{
        background: none;
        border: none;
        font: inherit;
     }
    
     input,
     select,
     textarea { width: 100%; }
    
     button { cursor: pointer; }
    
     ion-icon { pointer-events: none; }
    
     address { font-style: normal; }
    
     html {
        font-family: var(--ff-raleway);
        font-size: 10px;
        scroll-behavior: smooth;
        
     }
    
     body{
        background-color: var(--white);
        color: var(--sonic-silver);
        font-size: 1.6rem;
        line-height:2;
        
    
     }

     html,body{
       
        margin: 0;
        padding:0;
        
     }
    
     :focus-visible { outline-offset: 4px;}
    
     ::-webkit-scrollbar { 
        width:10px;
        display:none;
    }
    
     ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }
    
     ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
    
     ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
    
    
    
    
    
    .container {padding-inline: 15px;}
    
    .section { padding-block: var(--section-padding); }
    
    .has-before,
    .has-after {
        position: relative;
        z-index:1;
    
    }
    
    .has-before::before,
    .has-after::after{
        position:absolute;
        content: "";
    }
    
    .has-bg-image{
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    
    
    .h2,
    .h3 {
        font-family: var(--ff-raleway);
        line-height:1.3;
    }
    
    
    .h2 { text-transform: uppercase; }
    
    
    .h3 { font-weight: var(--fw-600);}
    
    .h1 {
        color:var(--white);
        font-size: 3.3rem;
        font-family: var(--ff-playfair);
        font-weight: 500;
        text-transform:capitalize;
        
        
    }
    
    .h2,
    .h3 { color: var(--eerie-black-1); }
    
    .h2 { font-size: var(--fs-30); }
    
    .h3 { font-size: var(--fs-24); }
    
    .btn {
        color: var(--white);
        background-color: var(--indian-yellow);
        display:flex;
        align-items:center;
        gap:10px;
        max-width:max-content;
        padding: 10px 25px;
        font-family: var(--ff-raleway);
        font-size: var(--fs-14);
        font-weight: var(--fw-600);
        text-transform: uppercase;
        border-radius: var(--radius-5);
        overflow:hidden;
    }
    
    
    .btn::before {
        background-color: var(--eerie-black-1);
        inset:0;
        z-index: -1;
        transform: skewY(-15deg) scaleY(0);
        transition: var(--transition-2);
    }
    
    .btn:is(:hover, :focus)::before { transform: skewY(-15deg) scaleY(2.5);}
    
    .text-center { text-align: center;}
    
    .grid-list {
        display:grid;
        gap:30px;
    }
    
    .img-holder {
        aspect-ratio: var(--width) / var(--height);
        background-color: var(--light-gray);
        overflow: hidden;
    }
    
    .img-cover{
        width: 100%;
        height:100%;
        object-fit: cover;
    }

   
    
    
    
    .header-top-item {display:none;}
    
    .header-top-list,
    .header-top-list .social-list{
        display:flex;
        align-items:center;
    }
    
    .header-top-list { justify-content: center; }
    
    .header-top-list .social-list {
        gap:20px;
        padding-block: 15px;
    }
    
    .header-top-list .social-link{
        color:var(--sonic-silver);
        font-size:15px;
        transition: var(--transition-1);
    
    }
    
    .header-top-list .social-link:is(:hover, :focus) { color: var(--indian-yellow);}
    
    
    .header-bottom {
        position: absolute;
        top:45px;
        left:0;
        width:100%;
        padding-block:10px;
        z-index:4;
    }
    
    .header-bottom.active {
        position:fixed;
        top:0;
        background-color: var(--rich-black-fogra-39);
        transform: translateY(-100%);
        animation:slideIn 0.5s ease forwards;
    
    }
    
    
    @keyframes slideIn {
        0% { transform: translateY(-100%);}
        100% { transform: translateY(0);}
    }
    
    .header-bottom > .container {
        display: flex;
        justify-content: space-between;
        align-items:center;
    }
    
    .logo {
        color: var(--indian-yellow);
        font-family:var(--ff-dancingscript);
        font-style:italic;
        font-size: 3.7rem;
        font-weight: var(--fw-600);
        text-transform: lowercase;
        line-height: 1.4;
    }
    
    .logo .span {
        color: var(--white);
        font-family: var(--ff-raleway);
        font-size: 1.3rem;
        font-weight: var(--fw-300);
        text-transform: capitalize;
        letter-spacing:2px;
    }

    .logo-img {
        width: 150px;
        margin-right: 10px;
        

    }

    .logo {
        flex:1;
    }

    
    .nav-toggle-btn {
        color: var(--white);
        font-size: 40px;
    }
    
    .navbar {
        position:absolute;
        padding-inline: 0;
        top: 100%;
        left: 15px;
        right: 15px;
        background-color: var(--rich-black-fogra-39);
        max-height:0;
        overflow:hidden;
        transition: 0.15s var(--cubic-out);
    
    }
    
    .navbar.active {
        max-height: 321px;
        transition-duration: 0.5s;
    }
    
    
    .navbar-list {
        border-block-start: 1px solid var(--jet);
        margin-block:25px;
    }
    
    .navbar-item { border-block-end: 1px solid var(--jet); }
    
    .navbar-link {
        color: var(--white);
        font-family: var(--ff-raleway);
        font-weight: var(--fw-600);
        text-transform: uppercase;
        line-height: 1.5;
        padding: 10px 30px;
        transition: var(--transition-1);
    }
    
    .navbar-link:is(:hover, :focus) { color: var(--indian-yellow); }
    
    
    
    
    
    
    .hero{
        --section-padding:100px;
        padding-block-start: calc(var(--section-padding) + 40px);
        background-position: left;
        position: relative;
        overflow:hidden;
    }
    .video-bg{
        position: absolute;
        z-index:-1;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        background-image:url("images2/Homepage Vid.mp4");

        min-width:100%;
        min-height:100%;
        
    }
    
    .hero::before {
        inset:0;
        background-color: var(--rich-black-fogra-39_50);
        mix-blend-mode: multiply;
        z-index: -1;
    }
    
    .hero-text {
        color: var(--white);
        margin-block: 15px 40px;
    }

    

    
    
    .service { text-align: center; }
    
    .service .section-text { margin-block: 15px 55px; }
    
    .service-card {
        background-color: var(--white);
        padding: 60px 25px;
        box-shadow: var(--shadow-1);
        border-radius: var(--radius-8);
    }
    
    .service-card .card-icon {
        color: var(--indian-yellow);
        font-size: 70px;
        line-height: 1;
    }
    
    .service-card .card-title {
        margin-block: 15px 12px;
        transition: var(--transition-1);
    }
    
    .service-card .card-title:is(:hover, :focus) { color: var(--indian-yellow); }
    
    .service-card .card-text { margin-block-end: 30px; }
    
    .service-card .card-btn {
        color: var(--indian-yellow);
        background-color: var(--white);
        max-width: max-content;
        margin-inline: auto;
        font-size: 20px;
        padding: 15px;
        box-shadow: var(--shadow-2);
        border-radius: var(--radius-5);
        transition: var(--transition-2);
    }
    
    .service-card:is(:hover, :focus-within) .card-btn {
        background-color: var(--indian-yellow);
        color: var(--white);
    } 

    .gallery-text {
        color:var(--indian-yellow);
    }
    
    
    
    
    
    .pricing::before {
        inset:0;
        background-color: var(--eerie-black-2_85);
        mix-blend-mode: multiply;
        z-index: -1;
    }
    
    .pricing .section-title { color: var(--white); }
    
    .pricing .section-text {
        margin-block: 15px 55px;
        color: var(--white_50);
    }
    
    .pricing-tab-container {
        background-color: var(--white);
        padding: 40px 5px;
    }
    
    .tab-filter {
        display:flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3px;
        margin-block-end: 30px;
    }
    
    .filter-btn {
        color: var(--eerie-black-1);
        font-family: var(--ff-raleway);
        font-size: var(--fs-14);
        font-weight: var(--fw-600);
        text-transform: uppercase;
        min-width: 130px;
        padding-block:12px;
        border: 1px solid var(--platinum);
        transition: var(--transition-1);
    }
    
    .filter-btn .btn-icon { display: none; }
    
    .filter-btn.active {
        background-color: var(--indian-yellow);
        border-color: var(--indian-yellow);
        color: var(--white);
    }
    
    
    .pricing .grid-list { padding-inline: 20px; }
    
    .pricing .grid-list > li.active { animation: popup 0.75s ease forwards; }
    
    @keyframes popup {
        0% { opacity: 0;}
        1000% { opacity: 1;}
    }
    
    .pricing-card {
        background-color: var(--indian-yellow_10);
        padding: 20px 25px;
        border-radius: var(--radius-5);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 15px;
        border-radius: 10%;
        
    }
    
    .pricing-card .card-banner {
        border-radius: 50%;
        overflow:hidden;
    }
    
    .pricing-card .wrapper { order: 1; }
    
    .pricing-card .h3 {
        --fs-24: 2rem;
        margin-block-end: 8px;
        
    }
    
    .pricing-card .card-price {
        color: var(--indian-yellow);
        font-family: var(--ff-raleway);
        font-size: var(--fs-30);
        font-weight: var(--fw-500);
        
    
    }
    
    
    .title-wrapper {
        margin-block-end: 60px;
    }
    .gallery {
        margin-bottom: 0.1rem;
        padding-bottom: 0.1rem;
    }

    
    .gallery .section-text{ margin-block: 12px 15px;}
    
    .gallery-card { position: relative;}
    
    .gallery-card .card-banner .img-cover { transition: var(--transition-2); }
    
    .gallery-card:is(:hover, :focus-within) .card-banner .img-cover { transform: scale(1.1); }
    
    .gallery-card .card-content {
        position: absolute;
        inset: 15px;
        background-color: var(--eerie-black-2_85);
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        opacity: 0;
        transform: scale(0.8);
        transition: var(--transition-2);
    }
    
    .gallery-card:is(:hover, :focus-within)  .card-content {
        opacity:1;
        transform:scale(1);
    }

    .learn-more {
        color: var(--indian-yellow);
    }

    
    .gallery-card :is(.card-title, .card-text) { color: var(--white); }
    
    .gallery-card .card-btn {
        background-color: var(--white);
        color:var(--indian-yellow);
        font-size: 18px;
        padding: 16px;
        border-radius: var(--radius-5);
        margin-block-start:12px;
        transition: var(--transition-1);
    }
    
    .gallery-card .card-btn:is(:hover, :focus) {
        background-color: var(--indian-yellow);
        color: var(--white);
    }
    

     .gallery .grid-list { 
            
        display: grid;
        gap: 0.6rem;
        grid-auto-flow: column;
        grid-auto-columns: 21%;
        padding:0 0.6rem 0.6rem;
        
       
        
        


        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .gallery-card{
        display: grid;
        grid-template-rows: min-content;
        padding: 0.6rem;
        border-radius: 10%;
        
        gap: 0.6rem;
        box-shadow: var(--shadow-2);
        
       

    }

    .grid-list, .gallery-card   {
        inline-size: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        

    }

    .snaps-inline {
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0.6rem;
       
        

    }

    
    .snaps-inline > * {
        scroll-snap-align: start;
    }

    
    .gallery .grid-list::-webkit-scrollbar {
        display: none;
    }

    




    .arrow1 {
        font-size: 50px;
        position: absolute;
        top:70px;
        color: var(--indian-yellow);
        opacity:1;
        cursor: pointer;
        right:0;
        justify-content: flex-end;
        
    }

    .arrow2 {
        font-size: 50px;
        position: absolute;
        top: 70px;
        color: var(--indian-yellow);
        opacity:1;
        cursor: pointer;
        left:0;
        
        
    }

    .instruct {
        padding:0;
        top:0;
        display:flex;
        justify-content: flex-start;
        gap: 0.6rem;
        margin-top: 0;
        color: var(--indian-yellow);
        
       
    }

    .instrunct-text {
        font-family: var(--ff-raleway);
        color: var(--indian-yellow);


    }



    

    
    
    .appoin { padding-block-start: 0; }
    
    .appoin-card .card-banner { display: none;}
    
    .appoin-card .card-content {
        background-color: var(--indian-yellow);
        padding:80px 15px;
        text-align: center;
        color: var(--white);
    }
    
    .appoin-card .section-title { color: var(--white); }
    
    .appoin-card .section-text { margin-block: 15px 55px; }
    
    .input-field {
        background-color: var(--white);
        color: var(--davys-gray);
        min-height: 56px;
        padding-inline: 25px;
        border-radius: var(--radius-5);
        margin-block-end: 20px;
        outline: none;
        outline-offset:0;
    }
    
    .input-field:focus { outline: 3px solid var(--black_30); }
    
    select.input-field { appearance: none; }
    
    select.input-field,
    .input-field::placeholder,
    .input-field.date  {
        font-family: var(--ff-raleway);
        color: var(--eerie-black-1);
        font-weight: var(--fw-500);
    }
    
    .input-field > option {
        color: var(--sonic-silver);
        font-family: var(--ff-raleway);
    
    }
    
    .input-field.date { text-transform: uppercase; }
    
    .input-field::-webkit-calender-picker-indicator { opacity:0.85;}
    
    textarea.input-field {
        padding-block: 15px;
        min-height: 100px;
        height: 120px; 
        max-height: 150px;
        resize: vertical;
    }
    
    .form-btn {
        color: var(--white);
        font-family: var(--ff-raleway);
        font-size: var(--fs-14);
        font-weight: var(--fw-500);
        text-transform: uppercase;
        width: 100%;
        display:flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border: 1px solid var(--white);
        padding: 13px;
        border-radius: var(--radius-5);
        transition: var(--transition-1);
    }
    
    .form-btn:is(:hover, :focus) {
        background-color: var(--white);
        color: var(--eerie-black-1);
    }
    
    
    .footer {
        background-color: var(--eerie-black-2);
        padding-block-end:30px;
    }
    
    .footer-top { margin-block-end: 65px; }
    
    .footer-brand {
        border: 1px solid var(--white_10);
        margin-block-end: 70px;
    }
    
    .footer .logo {
        text-align: center;
        padding: 25px;
        border-block-end: 1px solid var(--white_10);
    
    }
    
    .footer .input-wrapper {
        background-color: var(--white);
        position: relative;
        margin: 25px;
        padding:15px;
    }
    
    .footer .input-wrapper:focus-within { outline: 3px solid var(--white_30); }
    
    .footer .email-field {
        text-align:center;
        margin-block-end:15px;
        color: inherit;
        outline:none;
    }
    
    .footer .btn {
        max-width: 100%;
        width: 100%;
        justify-content: center;
    }
    
    .footer-link-box{
        display:grid;
        gap:50px;
    }
    
    .footer-list-title {
        color: var(--white);
        font-family: var(--ff-raleway);
        font-size: var(--fs-18);
        font-weight: var(--fw-600);
        text-transform: uppercase;
        margin-block-end:30px;
    }
    
    .footer-link::before{
        position: static;
        padding: 2.5px;
        background-color: var(--white_30);
        display:block;
        border-radius: 50%;
        transition: var(--transition-1);
    }
    
    .footer-link,
    .blog-card,
    .blog-card .card-date,
    .footer-list-item {
        display:flex;
        align-items: center;
    }
    
    .footer-link {
        color: var(--white_50);
        gap:10px;
        margin-block-start:8px;
        transition:var(--transition-1);
    }
    
    .footer-link:is(:hover, :focus) { color: var(--white); }
    
    .footer-link:is(:hover, :focus)::before { background-color: var(--white);}
    
    .blog-card {
        gap:25px;
        margin-block-start: 20px;
        
    }
    
    .blog-card .card-banner { flex-shrink:0; }
    
    .blog-card .card-title {
        color: var(--white);
        font-family: var(--ff-raleway);
        font-size: var(--fs-14);
        font-weight: var(--fw-500);
        line-height: 1.5;
        margin-block-end: 5px;
        transition: var(--transition-1);
    }
    
    .blog-card .card-title:is(:hover, :focus) { color: var(--indian-yellow); }
    
    .blog-card .card-date {
        gap:5px;
        font-size: var(--fs-13);
        text-transform: uppercase;
        color: var(--white_50);
    }
    
    .blog-card .card-date ion-icon { --ionicon-stroke-width:50px; }
    
    .footer-list-item {
        align-items: flex-start;
        gap: 10px;
        margin-block-start: 10px;
    }
    
    .footer-list-item ion-icon {
        color: var(--indian-yellow);
        font-size: 18px;
        flex-shrink: 0;
        --ionicon-stroke-width: 50px;
        margin-block: 7px;
    }
    
    .contact-link {
        color: var(--white_50);
        transition: var(--transition-1);
    }
    
    a.contact-link:is(:hover, :focus) { color: var(--white); }
    
    .footer-bottom {
        background-color: var(--eerie-black-3);
        text-align: center;
        padding: 15px;
    }
    
    .copyright-link {
        display:inline-block;
        color: var(--indian-yellow);
    
    }
    
    
    .back-top-btn {
        position: fixed;
        bottom: 10px;
        right: 20px;
        background-color: var(--harvest-gold);
        color: var(--white);
        font-size: 20px;
        padding:10px;
        border-radius: var(--radius-5);
        z-index: 4;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-1);
    }
    
    .back-top-btn.active {
        opacity:1;
        visibility:visible;
        transform: translateY(-10px);
    }


    .row {
        display: flex;
        gap: 30px;
        flex-wrap: wrap;
        justify-content: space-evenly
    }




    .social-links-team a{
        width: 48px;
        height: 48px;
        background-color:var(--eerie-black-2_85);
        display:flex;
        align-items: center;
        justify-content: center;
        

    }

    .social-links-team a:hover {
        background-color: var(--indian-yellow);
        color: white;
    }

    .team-member {
        position: relative;
        margin-top:3rem;
        
        
    }

   

    

    .team-member .social-links-team {
        position: absolute;
        top: 30px;
        left: 0;
        transition: all 0.4s ease;
        opacity:0;
    }

    .team-member:hover .social-links-team {
        opacity:1;
        top: 30px;

    }

    .team-tt{
        color:var(--eerie-black-1);
        font-size:var(--fs-24);
        margin-bottom: 1.5rem;
    }

    .team-t{
        color: var(--eerie-black-1);
        font-size: var(--fs-30);
        text-transform: uppercase;
    }

    

   

    .rev-trex {
        display: grid;
        gap: 1rem;
        grid-auto-flow:column;
        grid-auto-columns: 11%;
        width: 100%;
        
       
        
        margin: 1rem;
        background-color:var(--indian-yellow);
        padding:1rem;
        
        
        
        
        
        
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .reviews {
        display:grid;
        grid-template-rows: min-content;
        height: 250px;
        width:270px;
        justify-content: space-between;
        
        
        
        
        border-radius:5%;
        padding: 2rem;
        background-color: white;
        margin-top: 1rem;
        margin-bottom: 2rem;
        
        
        
        
    }

    .rev-p {
        display: flex;
        flex-wrap: wrap;
        font-size: 0.9rem;
        justify-content: center;
        gap: 1rem;
        
        align-items: center;
        text-align: center;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }










    .scrollbar-ank {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10% auto;

    }

    .intro-sect {
        display: flex;
        background-size: cover;
        background-position: center;

    }

    .intro-text{
       
        justify-content: center;
        align-items: center;
        text-align:center;
        margin-top: 5rem;
        padding: 2rem;
        margin-bottom: 2rem;
        gap: 5rem;

    }

    .intro-text p {
        gap: 0.5rem;
        margin: 0.5em;
        padding: 0.5rem;

    }

    .intro-text ol {
        gap:0.5rem;
        margin: 0.5rem;
        padding:0.5rem;
    }

    .intro-text li {
        gap:0.5rem;
        margin: 0.5rem;
        padding: 0.5rem;
    }

    .cat{
        background-color:var(--indian-yellow_10);
        display:grid;
        grid-auto-flow: column;
        border-radius: 10%;
        margin: 2rem;
        padding: 2rem;
        height:auto;
        margin-top: 1rem;
        max-width: auto;
    }

    .cat-text {
        display: flex;
        flex-wrap: wrap;
        object-fit:contain;
        margin: 1rem;
        padding: 2rem;
        flex-direction: row;
        font-size: 1.1rem;
        
    }

    .cat-text p {
       
        margin-left:0;
        
    }
    .cat-text li{
        gap:0.3rem;
        margin: 0.3rem;
        padding: 0.3rem;
    }

    .bat {
        background-color:var(--indian-yellow_10);
        display:grid;
        grid-auto-flow: column;
        border-radius: 10%;
        margin: 2rem;
        padding: 2rem;
        height:auto;
        margin-top: 1rem;

    }

   .pre-post {
    display: flex;
    flex-wrap: wrap;
    margin: 0.5rem;
    gap:0.5rem;
    padding: 0.5rem;
    max-width:auto;
   }

    .pre li{
        gap: 0.2rem;
        margin: 0.2rem;
        padding: 0.2rem;
        font-size: 1.2rem;
        display:flex;
        flex-wrap: wrap;
    }

    .post li{
        gap:0.5rem;
        margin: 0.5rem;
        padding:0.2rem;
        font-size: 1.2rem;
        display:flex;
        flex-wrap: wrap;


    }

    .pre h2{
        color: var(--indian-yellow);
    }

    .post h2 {
        color: var(--indian-yellow);
    }

    .quest-text {
    font-size: 2rem;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
    color: var(--indian-yellow);
    
    
    }

    .quest-cont {
    
    margin: 0 auto;
    margin-bottom: 2rem;
    }

    .question {
        border-bottom: 1px solid #fff;
    }

    .question button{
        width: 100%;
        background-color: var(--indian-yellow);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 15px;
        border:none;
        outline: none;
        font-size: 1.2rem;
        color: #fff;
        font-weight: 500;
        cursor: pointer;
    }

    .question p{
        font-size: 0.5rem;
        max-height: 0;
        opacity: 0;
        line-height: 1.5;
        overflow: hidden;
        transition: all 0.6s ease;
    }

    .d-arrow{
        transition: transform 0.5s ease-in ;
        color: #fff;
    }

    .question p.show{
        max-height: 200px; 
        opacity: 1;
        padding:0px 15px 30px 15px;
    }
    .question button .d-arrow.rotate{
        transform: rotate(180deg);
    }

    .footer-brand {
        position: center;
        justify-content: center;
       margin-left: 10%;
        align-items: center;
        margin-right: 10%;
    }

    .haga{
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
    }

    .hoe {
        margin: 0,40px;
        max-width: 300px;
        gap: 20px;

    }

    .hoe h2{
        color: var(--indian-yellow);
        text-align: center;
    }

    .hoe .shea{
        position: relative;
        background:var(--indian-yellow);
        padding: 3px;
        box-shadow: 0 15px 25px (0 0 0 0.05);
        border-radius:5px;
        overflow:hidden;
        display:grid;
       gap: 4px;
       

    }

    .hoe .shea input {
        appearance: none;
    }

    .hoe .shea label {
        display:flex;
        align-items:center;
        cursor:pointer;
    }

    .hoe .shea label::after {
        content:'+';
        position:absolute;
        right:20px;
        font-size:2rem;
        color:black;
        transition:transform 1s;

    }

    .hoe .shea:hover label::after {
        color:#333;
    }

    .hoe .shea input:checked ~ label::after {
        transform: rotate(135deg);
    }

    .hoe .shea label h2{
        width: 40px;
        height: 40px;
        background: #333;
        display: flex;
        justify-content:center;
        align-items:center;
        color:#fff;
        font-size:1.25rem;
        border-radius: 5px;
        margin-right: 10px;
    }

    


    .hoe .shea label h3 {
        position: relative;
        font-weight: 500;
        color: black;
        z-index: 10;
        font-size: 1.4rem;
    }

    .hoe .shea .racks {
        max-height:0;
        transition: 1s;
        overflow:hidden;
    }

    .hoe .shea input:checked ~ .racks {
        max-height: 100vh;
    }

    .hoe .shea .racks p{
        position: relative;
        padding: 10px 0;
        color:#333;
        z-index: 10;
    }

    .racks{
        background-color:white;
    }

    .shea {
        padding: 0.1rem;
        margin: 0.1rem;
        border-bottom: solid white;

    }


    .terms-head {
        margin-top: 16.8rem;
        background-color:var(--indian-yellow);
        margin-bottom: 2rem;
        height: 10rem;

    }

    .terms-head h1 {
        text-align: center;
        color: white;
        font-size: 3.85rem;
        font-weight: var(--fw-600);
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        font-family: var(--ff-playfair);
       
       

    }

    .terms-body {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 4rem;
    }

    .terms-body li {
        gap: 2rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
        font-size: var(--fs-18);
        font-family: var(--ff-raleway);
        margin-left: 4rem;
        margin-right: 2rem;
    }

    .terms-bot {
        background-color: black;
        margin-bottom:0;
    }

    .yolo {
        --section-padding:60px;
        padding-block-start: calc(var(--section-padding) + 20px);
        background-position: left;
        position: relative;
        overflow:hidden;
        
    }

    .yolo::before {
        inset:0;
        background-color: var(--rich-black-fogra-39_50);
        mix-blend-mode: multiply;
        z-index: -1;
    }

    .person{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .person-img{
        position: relative;
        margin-top:3rem;
        margin-left: 30%;
        margin-bottom: 2rem;
    }

    .person-word{
        display:flex;
        flex-direction:column;
        position:absolute;
        margin-left: 50%;
    }

    .person-word2{
        display:flex;
        flex-direction:column;
        position:relative;
    
        margin-bottom: 2rem;
       
    }

    .person-img2{
        margin-left:10%;
        margin-top:10rem;
        position:relative;
    }

    .person-word3{
        display:flex;
        flex-direction:column;
        position:absolute;
        margin-top: 0.5rem;
        object-fit: contain;
        margin-bottom:2rem;
        
    }
    
    .person-img3{
        margin-left:50%;
        margin-top:10rem;
        position:relative;
       
      
    }

    .person-img .social-links-team {
        position: absolute;
        top: 30px;
        left: 0;
        transition: all 0.4s ease;
        opacity:0;
    }

   .person-img:hover .social-links-team {
        opacity:1;
        top: 30px;

    }

    .person-img2 .social-links-team {
        position: absolute;
        top: 30px;
        left: 0;
        transition: all 0.4s ease;
        opacity:0;
    }

   .person-img2:hover .social-links-team {
        opacity:1;
        top: 30px;

    }

    .person-img3 .social-links-team {
        position: absolute;
        top: 30px;
        left: 0;
        transition: all 0.4s ease;
        opacity:0;
    }

   .person-img3:hover .social-links-team {
        opacity:1;
        top: 30px;

    }


   






















    


    @media  (max-width: 500px) {
        .pre-post{
            max-width:320px;
        }
    
        .hiw{
            max-width: 320px;
        }

        .terms-head {
            margin-top: 10rem;
            background-color:var(--indian-yellow);
            margin-bottom: 2rem;
            height: 8rem;
    
        }
    
        .terms-head h1 {
            text-align: center;
            color: white;
            font-size: 3rem;
            font-weight: var(--fw-600);
            justify-content: center;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            font-family: var(--ff-playfair);
           
           
    
        }

        .cat {
            margin-left:10%;
            width: 25rem;
            
        }

        .bat {
            margin-left: 10%;
            width: 25rem;
           
        }

        .team-member {
            max-height: 200px;
            position: relative;
           
        }
         .team-img {
           max-width: 90px;

        }

        .social-links-team {
            position:absolute;
            margin-top: 0;
        }

        

        .person{
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            
            
        }
    
        .person-img{
            position: relative;
            margin-top:3rem;
            margin-left: 15%;
            margin-bottom: 2rem;
            
            
        }
    
        .person-word{
            display:flex;
            flex-direction:column;
            position:relative;
            margin-left:20%;
            
            font-size:1rem;
           
            
            
        }
        
        .person-word li {
            gap:1rem;
            margin-top:0.5rem;
            margin-bottom:0.5rem;
            margin-left:0%;
           

        }
    
        .person-word2{
            display:flex;
            flex-direction:column;
            position:relative;
            font-size:1rem;
            margin-left:12%;
           
            
        
            margin-bottom: 2rem;
           
        }
    
        .person-img2{
            margin-left:15%;
            margin-top:3rem;
            position:relative;
            
            
        }
        .person-word2 li {
            gap:1rem;
            margin-top:0.5rem;
            margin-bottom:0.5rem;
            margin-left:0%;
        }
    
        .person-word3{
            display:flex;
            flex-direction:column;
            position:relative;
            margin-top: 0.5rem;
            margin-left:12%;
           
            margin-bottom:2rem;
            font-size:1rem;
           
            
        }

        .ab-img{
            max-width: 300px;
            max-height:300px;

        }
        
        .person-img3{
            margin-left:17%;
            margin-top:3rem;
            position:relative;
            
            
        }
        .person-word3 p{
            max-width:300px;
            display:flex;
        }
    
        .person-img .social-links-team {
            position: absolute;
            top: 30px;
            left: 0;
            transition: all 0.4s ease;
            opacity:0;
        }
    
       .person-img:hover .social-links-team {
            opacity:1;
            top: 30px;
    
        }
    
        .person-img2 .social-links-team {
            position: absolute;
            top: 30px;
            left: 0;
            transition: all 0.4s ease;
            opacity:0;
        }
    
       .person-img2:hover .social-links-team {
            opacity:1;
            top: 30px;
    
        }
    
        .person-img3 .social-links-team {
            position: absolute;
            top: 30px;
            left: 0;
            transition: all 0.4s ease;
            opacity:0;
        }
    
       .person-img3:hover .social-links-team {
            opacity:1;
            top: 30px;
    
        }

       
    }


   


    
    





    
    

    

    

    





    



    

   

    

   
    
    
    @media (min-width: 575px) {
    
    
    
    
        :root{
    
    
            --fs-40: 6rem;
        }
    
    
        .container,
        .header-top {
            max-width: 540px;
            width:100%;
            margin-inline: auto;
        }
    
        .btn { padding: 13px 40px; }
    
        .h2 { --fs-30: 3.5rem; }
    
        .header-top {
            position: absolute;
            top:0;
            left:50%;
            transform: translateX(-50%);
            max-width: 600px;
            z-index: 4;
            background-color: var(--white);
            border-radius: 0 0 20px 20px;
        }
    
        .header-top-item:first-child {
            display:flex;
            align-items: center;
            gap:10px;
        }
    
        .header-top-item ion-icon {
            font-size: 18px;
            color: var(--indian-yellow);
            --ionicon-stroke-width: 50px;
        }
    
        .header-top-item .item-title {
            color: var(--eerie-black-1);
            font-weight: var(--fw-500);
        }
    
        .header-top-item .item-link { transition: var(--transition-1); }
    
        .header-top-item .item-link:is(:hover, :focus) { color: var(--indian-yellow); }
    
        .header-top-list { justify-content: space-between; }
    
        .logo { font-size: 3rem;}
    
        .logo .span { font-size: 1.4rem; }
    
        
        .hero { padding-block-start: calc(var(--section-padding) + 80px); }
    
        .hero-text { font-size: var(--fs-18); }
    
    
        .filter-btn .btn-icon {
            display:block;
            font-size: 55px;
            line-height: 1;
            margin-block-end: 5px;
        }
    
        .pricing-card {
        background-color: var(--indian-yellow_10);
        padding: 20px 25px;
        border-radius: var(--radius-5);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 15px;
        border-radius: 10%;
            
        }
    
        .pricing-card .wrapper { order: 1; }
    
        .pricing-card .card-price {
            align-self: flex-start;
            line-height: 1.6;
        }
    
        .gallery .grid-list { 
            
            display: grid;
            gap: 0.6rem;
            grid-auto-flow: column;
            grid-auto-columns: 21%;
            padding:0  0.6rem 0.6rem;


            overflow-x: auto;
            overscroll-behavior-inline: contain;
        }

        .gallery-card{
            display: grid;
            grid-template-rows: min-content;
            padding: 0.6rem;
            border-radius: 10%;
            
            gap: 0.6rem;
            box-shadow: var(--shadow-2)

        }

        .gallery-card > img {
            inline-size: 100%;
            aspect-ratio: 16/9;
            object-fit: cover;

        }

        .snaps-inline {
            scroll-snap-type: inline mandatory;
            scroll-padding-inline: 0.6rem;

        }

        .snaps-inline > * {
            scroll-snap-align: start;
        }


    
    
        .appoin-card  .card-content { padding-inline: 50px;}
    
        .footer .email-field {
            margin-block-end: 0;
            text-align: left;
            font-size: var(--fs-18);
            padding: 10px 15px;
            padding-inline-end: 210px;
        }
    
        .footer .btn {
            position: absolute;
            top: 15px;
            right: 15px;
            bottom: 15px;
            width: max-content;
    
        }
    
        .footer-link-box { grid-template-columns: 1fr 1fr;}
    
        .footer-list:is(:nth-child(3), :nth-child(4)) {
            grid-column: 1 / 3;
        }
    
        .blog-card .card-title {
            --fs-14: 1.7rem;
            max-width: 25ch;
        }
        footer {
            width:100%;
        }
    
    }
    
    
    @media (min-width: 768px) {
    
    
        :root {
            --fs-40: 8rem;
        }
    
        .container { max-width: 720px; }
    
        .h2 {--fs-30: 4rem; }
    
        .section-text {
            max-width: 50ch;
            margin-inline: auto;
        }
    
    
    
        .header-top { max-width: 780px;}
    
        .service .grid-list { grid-template-columns: 1fr 1fr; }
    
        .pricing-tab-container { padding: 40px; }
    
        .pricing-card .wrapper { margin-inline-end: auto;}
    
    
        .gallery .section-text { margin-inline: 0; }
    
        .gallery-card .card-content { inset: 30px;}
    
    
        .appoin-card .card-banner { display: block;}
    
        .appoin-card { display: flex;}
    
    
        .footer-list:is(:nth-child(3), :nth-child(4)) {
            grid-column: auto;
        }
        footer {
            width:100%;
        }
    }
    
    
    @media (min-width:992px) {
    
        :root {
            --fs-40: 10rem;
        }
    
        .container {max-width: 960px;}
    
    
        .nav-toggle-btn { display: none;}
    
        .header-top { max-width: 1020px; }
    
        .header-bottom { padding-block: 20px; }
    
        .navbar,
        .navbar-list,
        .navbar-item { all: unset;}
    
        .navbar-list,
        .header .btn { display: flex;}
    
        .navbar-link { padding-inline: 10px; }
    
        .hero {
            --section-padding: 150px;
            padding-block-start: calc(var(--section-padding) + 100px);
        }
    
        .hero-title,
        .hero-text { max-width: 600px;}
    
        .service .grid-list { grid-template-columns: repeat(3, 1fr); }

        


        






       
        .pricing .grid-list { grid-template-columns: 1fr 1fr; }

        .pricing-card > .img-holder {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items:space-between;
            width: 120px;
            height:120px;
        }

        
    
    
        
    
        .pricing-card { height:auto; }
    
        .pricing-card .card-banner { flex-shrink: 0; }
    
    
        .gallery .title-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
    
        .gallery .section-text { margin-block-end: 0;}
    
    
        
    
        .footer-brand {
            display: flex;
            align-items: center;
        }
    
        .footer .logo {
            padding: 60px 70px;
            border-block-end: none;
            border-inline-end: 1px solid var(--white_10);
        }
    
        .footer .input-wrapper {
            flex-grow: 1;
            margin-inline: 70px;
        }
        footer {
            width:100%;
        }
        
    }

    

    .rev-trex {
        display: grid;
        gap: 1rem;
        grid-auto-flow:column;
        grid-auto-columns: 61%;
        width: 100%;
        
       
        
        margin: 1rem;
        background-color:var(--indian-yellow);
        padding:1rem;
        
        
        
        
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

     .reviews {
        display:grid;
        grid-template-rows: min-content;
        height: 250px;
        width:210px;
        justify-content: space-between;

        
        gap: 4rem;
        border-radius:5%;
        padding: 5rem;
        background-color: white;
        margin-top: 1rem;
        margin-bottom: 1rem;
        margin-right: 2rem;
        
        
        
        
    }

    .rev-p {
        display: flex;
        flex-wrap: wrap;
        font-size: 0.72rem;
        justify-content: center;
        gap: 0rem;
        object-fit: contain;
        
      
        
        align-items: center;
        text-align: center;
        margin:auto;
       
        
        
    }

    .ed-rev{
        margin-top:50%;
        margin-bottom:50%;
        left: 50%;
        right: 50%;
        align-items: center;
        text-align: center;
        
        font-size: 0.73rem;
        
       
        
    }

    .ed-rev2{
        margin-top:30%;
        margin-bottom:50%;
        left: 50%;
        right: 50%;
        align-items: center;
        text-align: center;
        
        font-size: 0.73rem;

    }

    footer{
        width: 100%;
    }
    .footer{
        width:100%;
    }
    




















    




    
    
    
    @media (min-width: 1200px ) {
    
        :root {
            --fs-40: 11rem;
    
            --section-padding: 120px;
        }
    
        .container { max-width: 1200px; }
    
    
        .header-top { max-width: 1260px; }
    
        .header-top-list { gap: 30px;}
    
        .header-top-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }
    
        .header-top-item:nth-child(2) { margin-inline-end: auto; }
    
        .hero {
            background-position: left;
            padding-block-end: 200px;
        }
    
        .hero-title,
        .hero-text { max-width: 680px; }
    
        .filter-btn { min-width: 178px;}
    
    
        .arrow1 {
            font-size: 100px;
            position: absolute;
            top: 50px;
            color:var(--indian-yellow);
            opacity:0.5;
            cursor: pointer;
            right:0;
        }
    
        .arrow2 {
            font-size: 100px;
            position: absolute;
            top: 50px;
            color:var(--indian-yellow);
            opacity:0.5;
            cursor: pointer;
            left:0;
        }
    
    
        .appoin-card .card-content { flex-grow: 1; }
    
        .footer-link-box { grid-template-columns: 0.5fr 0.5fr 1fr 0.8fr; }
    
        .back-top-btn { padding: 15px; }



        #about {
            position: relative;
    
        }

        
        .h1{
            font-size: var(--fs-40);

        }


        .rev-trex {
            display: grid;
            gap: 2rem;
            grid-auto-flow:column;
            grid-auto-columns: 31%;
            width: 100%;
            
           
            
            margin: 1rem;
            background-color:var(--indian-yellow);
            padding:2rem;
            
            
            
            
            overflow-x: auto;
            overscroll-behavior-inline: contain;
        }
    
        .reviews {
            display:grid;
            grid-template-rows: min-content;
            height: 350px;
            width:350px;
            justify-content: space-between;
            
            
            border-radius:5%;
            padding: 2rem;
            background-color: white;
            margin-top: 2rem;
            margin-bottom: 2rem;
            
            
            
            
        }
    
        .rev-p {
            display: flex;
            flex-wrap: wrap;
            font-size: 1.2rem;
            justify-content: center;
            gap: 1rem;
            
            align-items: center;
            text-align: center;
            margin-top: 4rem;
            margin-bottom: 2rem;
        }



        .ed-rev{
            margin-top:35%;
            margin-bottom:50%;
            left: 50%;
            right: 50%;
            align-items: center;
            text-align: center;
            font-size:var(--fs-13);
            
            
        }


        .ed-rev2{
            margin-top:25%;
            margin-bottom:50%;
            left: 50%;
            right: 50%;
            align-items: center;
            text-align: center;
            font-size:var(--fs-13);
            
        }


        .cat{
            background-color:var(--indian-yellow_10);
            display:grid;
            grid-auto-flow: column;
            border-radius: 25%;
            margin: 2rem;
            padding: 2rem;
            height:auto;
            margin-top: 1rem;
            object-fit: contain;
        }
    
        .cat-text {
            display: flex;
            flex-wrap: wrap;
            object-fit: contain;
            margin: 1rem;
            padding: 2rem;
            flex-direction: row;
            font-size: var(--fs-10);
            
        }
    
        .bat {
            background-color:var(--indian-yellow_10);
            display:grid;
            grid-auto-flow: column;
            border-radius: 25%;
            margin: 2rem;
            padding: 2rem;
            height:auto;
            margin-top: 1rem;
    
        }

        .big-g{
            display: grid;
            grid-auto-flow: column;
            height: auto;
    
    
        }

        .pre li{
            gap: 0.5rem;
            margin: 0.5rem;
            padding: 0.5rem;
            font-size: var(--fs-10);
            display:flex;
            flex-wrap: wrap;
        }
    
        .post li{
            gap:0.5rem;
            margin: 0.5rem;
            padding:0.5rem;
            font-size: var(--fs-10);
            display:flex;
            flex-wrap: wrap;
    
    
        }

        .cat {
            display: flex;
            flex-wrap:wrap;
        }

        

        .cat-text ul{
            gap:0.7rem;
            margin: 0.7rem;
            padding: 0.7rem;
        }

        .cat-text li {
            margin-top: 2rem;
        }


        .cat-text h2{
            margin-bottom: 0.2rem;
            padding: 0.2rem;
            gap:0.2rem;
        }



        .quest-text {
            font-size: 4rem;
            text-align: center;
            margin-top: 40px;
            margin-bottom: 40px;
            text-decoration: underline 4px;
        }



        .quest-cont {
            max-width: 800px;
            margin: 0 auto;
            margin-bottom: 4rem;
            }
        
            .question {
                border-bottom: 1px solid #fff;
            }
        
            .question button{
                width: 100%;
                background-color: var(--indian-yellow);
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px 15px;
                border:none;
                outline: none;
                font-size: 2rem;
                color: #fff;
                font-weight: 500;
                cursor: pointer;
            }
        
            .question p{
                font-size: 2rem;
                max-height: 0;
                opacity: 0;
                line-height: 1.5;
                overflow: hidden;
                transition: all 0.6s ease;
            }





            .haga{
                display: flex;
                justify-content: center;
                align-items: center;
                background: white;
            }
        
            .hoe {
                margin: 0,40px;
                max-width: 800px;
                gap: 20px;
        
            }
        
            .hoe h2{
                color: var(--indian-yellow);
                text-align: center;
            }
        
            .hoe .shea{
                position: relative;
                background:var(--indian-yellow);
                padding: 3px;
                box-shadow: 0 15px 25px (0 0 0 0.05);
                border-radius:5px;
                overflow:hidden;
                display:grid;
               gap: 4px;
               
        
            }
        
            .hoe .shea input {
                appearance: none;
            }
        
            .hoe .shea label {
                display:flex;
                align-items:center;
                cursor:pointer;
            }
        
            .hoe .shea label::after {
                content:'+';
                position:absolute;
                right:20px;
                font-size:2rem;
                color:black;
                transition:transform 1s;
        
            }
        
            .hoe .shea:hover label::after {
                color:#333;
            }
        
            .hoe .shea input:checked ~ label::after {
                transform: rotate(135deg);
            }
        
            .hoe .shea label h2{
                width: 40px;
                height: 40px;
                background: #333;
                display: flex;
                justify-content:center;
                align-items:center;
                color:#fff;
                font-size:2rem;
                border-radius: 5px;
                margin-right: 10px;
            }
        
            
        
        
            .hoe .shea label h3 {
                position: relative;
                font-weight: 500;
                color: black;
                z-index: 10;
                font-size: 2rem;
            }
        
            .hoe .shea .racks {
                max-height:0;
                transition: 1s;
                overflow:hidden;
            }
        
            .hoe .shea input:checked ~ .racks {
                max-height: 100vh;
            }
        
            .hoe .shea .racks p{
                position: relative;
                padding: 10px 0;
                color:#333;
                z-index: 10;
            }
        
            .racks{
                background-color: white;
            }
        
            .shea {
                padding: 0.1rem;
                margin: 0.1rem;
                border-bottom: solid white;
        
            }

            .person{
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
            }
        
            .person-img{
                position: relative;
                margin-top:3rem;
                margin-left: 30%;
            }
        
            .person-word{
                display:flex;
                flex-direction:column;
                position:absolute;
                margin-left: 50%;
            }
        
            .person-word2{
                display:flex;
                flex-direction:column;
                position:relative;
            
                margin-bottom: 2rem;
               
            }
        
            .person-img2{
                margin-left:10%;
                margin-top:3rem;
                position:relative;
                
            }
        
            .person-word3{
                display:flex;
                flex-direction:column;
                position:absolute;
                margin-top: 0.5rem;
                object-fit: contain;
                margin-bottom:2rem;
                
            }
            
            .person-img3{
                margin-left:50%;
                margin-top:3rem;
                position:relative;
               
              
            }

            footer {
                width:100%;
            }

            .footer{
                width:100%;
            }

            #about{
                background-color: white;
            }

            
        
            


            
        
            
        
        
    
        

        






    
    
    
    
    
    
    
    
    
    
        



    }