@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Headline:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:ital,wght@0,100..900;1,100..900&family=Stack+Sans+Headline:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Slab:wght@100..900&family=Satisfy&display=swap');
*{

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

body{
    margin: 0px;
    padding: 0px;
    background-color: oklch(14.7% 0.004 49.25);
      /* font-family: "Stack Sans Headline", sans-serif; */
        font-family: "Elms Sans", sans-serif;
}

h2,h4,h6{

 font-family: "Stack Sans Headline", sans-serif;     
}

/*-----------callfloat-----------*/

.callfloat{
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    z-index: 10;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: solid 1px #555555;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.callfloat i{
    color: #ffc367;
    font-size: 32px;
}

/*-----------whatsappfloat---------------*/

.whatappfloat{

     position: fixed;
    bottom: 120px;
    right: 30px;
    width: 60px;
    height: 60px;
    z-index: 10;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: solid 1px #555555;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.whatappfloat i{

     color: #ffc367;
    font-size: 32px; 
}

.mt-60{

    margin-top: 60px;
}

.mt-80{

    margin-top: 80px;
}

.mt-100{
    margin-top: 100px;
}

.mt-120{

    margin-top: 120px;
}


/*header*/
/*------------------------------------haedertop--------------------------------------*/

.haedertopbody{

    /* Tailwind gray palette: gray-900 -> gray-700 -> gray-500 */
    background: linear-gradient(90deg, #111827 0%, #374151 50%, #6B7280 100%);
    color: #ffffff;
    padding: 5px;
    display: flex;
    align-items: center;
    /* subtle inner shadow for better separation from content below */
    box-shadow: inset 0 -2px 6px rgba(0,0,0,0.6);
}

.haedertopbodyleft{

    margin: 0px;
    padding: 0px;
}

.haedertopbodyleft ul{
margin: 0px;
padding: 0px;
display: flex;
margin-top: 15px;
}

.haedertopbodyleft ul li{

    margin: 0px;
    padding:0px 12px;
    list-style: none;
}

.haedertopbodylefticon{

    margin: 0px;
    padding: 0px;
    display: flex;
    gap: 12px;
}

.haedertopbodylefticon i{

    color: #ffc367;
    line-height: 25px;
}

.haedertopbodylefticon p, .haedertopbodylefticon p a{
    font-size: 16px;
    color: white;
    text-decoration: none;
}

.haedertopbodyright{

    margin: 0px;
    padding: 0px;

}

.haedertopbodyright ul{

    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: right;
    margin-top: 15px;
}

.haedertopbodyright ul li{
margin: 0px;
padding: 0px 12px;
list-style: none;

}

.haedertopbodyright ul li i{

    color: white;
    
}


/*----------------------banner-----------------------------------*/


.bannerbox{
    width: 100%;
    height: 700px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
 position: relative;
 z-index: 1;
}

.bannerbox::before{

    position: absolute;
    content: '';
    background-color: rgba(0, 0, 0, 0.466);
    width: 100%;
    height: 100%;
    z-index: -1;
}

.headertopnavigation{
    padding: 0px;
    padding-top: 10px;
    display: flex;
    align-items: center;
    /* Use Tailwind gray tones for a cohesive grayscale header (gray-800 -> gray-700 -> gray-600) */
    background: linear-gradient(90deg,  #374151 50%, #161718 100% ,#1f2937 100%);
    color: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    /* gentle elevation to separate header from content */
    box-shadow: 0 3px 8px rgba(3,10,20,0.25);
}

/*banavigation*/

.bannerboxlogo{

    margin: 0px;
    padding: 0px;
}

.bannerboxlogo h2 , .bannerboxlogo h2 a{

    color: rgb(0, 0, 0);
    text-decoration: none;
}

.bannerboxnav{
    margin: 0px;
    padding: 0px;
  
    padding: 8px 12px; /* gives links breathing room */
    border-radius: 8px;
    display: inline-block; /* keeps nav compact in the header */
    
}

.bannerboxnav ul{

    margin: 0px;
    padding: 0px;
    display: flex;
    margin-top: 12px;
    justify-content: center;
    align-items: center;
}

.bannerboxnav ul li{

    margin: 0px;
    padding: 0px;
    list-style: none;
}

.bannerboxnav ul li a{

    color: #fff;
    font-size: 16px;
    margin: 0px;
    padding: 0 40px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
    font-weight: 600;
}

.bannerboxnav ul li a:hover{

    color: #ffc367;
}


.bannerboxright{

    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: right;
    margin-top: 8px;
}


.bannerboxright button{

   
    color: #000;
    background-color: #ffc367;
}

.bannerboxright button:hover{

       color: #000;
    background-color: #ffc367;
}

.bannertext{

    width: 100%;
    display: flex;
    justify-content:right;
    align-items: center;
    height: 700px;
    align-items: center;
}

.bannertext h2{
    color: #fff;
    font-size: 56px;
    text-align: left;
    font-weight: 900;
font-family: "Roboto Slab", serif;
letter-spacing: 4px;
}


/*-----------------------------aboutus-----------------------------------------------*/


.aboutusleft{

    margin: 0px;
    padding: 0px;

}

.aboutusleft img{
    border: solid 1px #ffc367;
    border-radius: 10px;
    width: 100%;
    display: block;
}


.aboutusright{

    margin: 0px;
    padding: 0px;
}


.aboutusright h2{

    text-align: left;
    font-size: 36px;
    color: #ffc367;
    font-weight: 500;
}

.aboutusright p{
    color: rgb(233, 233, 233);
    font-size: 16px;
    margin-top: 16px;
}

.aboutusright button{

    background-color: #ffc367;
    color: rgb(17, 17, 17);

}


.aboutusright button:hover{
    background-color: #ffc367;
    color: rgb(17, 17, 17);

}


/*zordicsighn*/

.zordicmainbox{

    
    padding: 20px;
    margin: 0px;
}

.zordicheadertext{

    margin: 0px;
    padding: 0px;
    text-align: center;
}

.zordicheadertext h2{

    color: #ffc367;
    margin-bottom: 20px;
}

.zordicbox{

    width: 100%;
   
    padding: 0px;
    margin: 0px;
    transition: all 0.4s ease-in-out;
    border-radius: 8px;
   border: solid 1px #555555;
}


.zordicbox:hover{
 border: solid 1px #ffc367;
}

.zordicbox1{
    margin: 0px;
    padding: 20px 8px;  
    border-radius: 8px;
}

.zordicbox:hover .zordicbox1{

    /* Black-gradient shade on hover for emphasis; keep padding/layout unchanged */
    background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(28,28,30,0.9) 50%, rgba(45,45,48,0.85) 100%);
    color: #ffffff;
}

.zordicboxtext h4{

    color: rgb(172, 172, 172);
}

.zordicbox:hover .zordicboxtext h2{
    color: #ffffff;
}

.zordicbox:hover .zordicboxtext p{
    color: #cfcfcf;
}

.zordicbox:hover .zordicboxtext h4{
    color: #ffffff;
}

.zordicboxicon{

    background-color: #ffc367;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
    display: table;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease-in-out;
}

.zordicbox:hover .zordicboxicon{
    transform: rotateX(360deg);
}

.zordicboxtext
{
    margin: 13px 0px;
    text-align: center;
}

.zordicboxtext h2{

color: black;
text-align: center;

}

.zordicboxtext p{

    color: rgb(145, 145, 145);
    
}
.serviceboder{

    width: 100%;
    display: block;
    border: solid 1px #444444;
}

/*service*/

/* .servicebox{

    margin: 0px;
    min-height: 400px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../image/testi_bg.webp);
    padding-bottom: 80px !important;
} */

.servicebox1{

    margin: 0px;
    padding: 20px;
    border: 1px solid #5c5c5c;
    transition: all 0.4s ease-in-out;
    border-radius: 8px;
    /* Vertical black -> gray gradient (top to bottom) */
    background: linear-gradient(180deg, #0b0b0b 0%, #1f2937 55%, #374151 100%);
    color: #ffffff;
    text-align: center;
    width: 100%;
    display: block;
}

.servicebox1:hover{

    box-shadow: 0px 10px 15px -10px #777777;
}


.serviceboxicon{

    width: 90px;
    height: 90px;
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;
text-align: center;
margin: auto;
display: table;
}

.serviceboxicon img{

    margin-top: 20px;
}

.serviceboxtext{

    margin: 15px 0px;
    padding: 0px;
}

.serviceboxtext h4{

    color: #000000;
    text-align: center;
}

/* Contrast overrides for service boxes with dark background */
.servicebox1 .serviceboxtext h4{
    color: #ffffff;
}

.servicebox1 .serviceboxtext p{
    color: #d1d5db;
}

.servicebox1 .serviceboxtext button{
    background-color: #ffc367;
    color: #111;
}

.servicebox1 .serviceboxtext button:hover{
    background-color: #ffc367;
    color: #111;
}

.serviceboxtext p{

    color: #696969;
    text-align: center;
}

.serviceboxtext button{

    background-color: #ff6f00;
    color: white;
    text-align: center;
}

.serviceboxtext button:hover{

    background-color: #ff6f00;
    color: white;
   

}

.pt-60{

    padding-top: 60px;
}


/*Daily Routines*/

.dilyroutinebox{

    border: solid 1px #777777;
    margin: 0px;
    padding: 20px;
}

.dilyroutinebox p{

    margin: 12px 0px;
    color: #fff;
}

.dilyroutinebox h4{

    text-align: center;
    color: #f4f0f0;
    padding-bottom: 15px;
    border-bottom: solid 1px #ffc367;
}

.dilyroutinebox1{

    margin: 8px 0px;
    padding: 16px;
    border-radius: 8px;
    /* Black -> gray vertical gradient (top to bottom) */
    background: linear-gradient(180deg, #000000 0%, #0f172a 45%, #374151 100%);
    color: #e5e7eb; /* light gray for body text */
    transition: background 0.3s ease, transform 0.2s ease;
}

.dilyroutinebox1 ul{
    margin: 0px;
    padding: 0px;
}

.dilyroutinebox1 ul li{

    margin: 0px;
    padding: 5px 12px;
    display: inline-block;
    list-style: none;
    text-align: center;
    margin: 0 auto;
    display: table;
}


.dilyroutineboximg{

    margin: 0 auto;
    display: table;
}

.dilyroutinebox1 ul li h6{
    color: #ffffff;
    margin-top: 15px;
}

.dilyroutinebox1 ul li p{
    color: #d1d5db;
}

.dilyroutineboxboder{

    border-bottom: solid 1px #777777;
}


/*testimonial*/

.testimonialbox{

    margin: 0px;
    padding: 0px;
}


.testimonialbox1{

    margin: 0px;
    padding:0px 20px;
    border: dotted 1px #ffc367;
    border-radius: 8px;
    padding-top: 20px;
    /* Black -> gray vertical gradient for testimonial group */
    background: linear-gradient(180deg, #0b0b0b 0%, #111827 45%, #1f2937 100%);
    height: 455px;
    color:#ffffff;
}

.testimonialbox1 i{

    color: #ffc367;
    font-size: 24px;
}

.testimonialbox1 p{

    color: #b0b0b0;
    font-size: 15px;
    margin-top: 20px;
}

.testimonialbox2{
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    
    
    color: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.04);
}

.testimonialbox2 img{

    width: 60px !important;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.08);
    margin: 0 auto;
}

.testimonialbox2 h6{

    color: #ffc367;
    text-align: center;
    margin-top: 20px;

}


.testimonialbox2 p{
    color: #d1d5db;
   
}




/*footer*/


.footerbody{

    margin: 0px;
    padding: 50px 0px;
    /* Match `.gettouchbox` appearance: vertical black -> gray gradient */
    background: linear-gradient(180deg, #000000 0%, #0b1220 45%, #374151 100%);
    color: #e5e7eb; /* light gray text */
    border-top: 1px solid rgba(255,255,255,0.04);

}


.footerbodyleft{

    margin: 0px;
    padding: 0px;
}

.footerbodyleft h2 a{

    color: white;
    font-size: 36px;
    text-decoration: none;
}

.footerbodyleft p{

    color: white;
    font-size: 16px;
}


.footermiddle{

    margin: 0px;
    padding: 0px;
}


.footermiddle h2{

    color: #ffc367;
    font-size: 30px;
}

.footernav{

    margin: 15px 0px;
    padding: 0px;
}

.footernav ul{
    margin: 0px;
    padding: 0px;
    display: block;
}


.footernav ul li{

    margin: 0px;
    padding: 8px 0px;
    display: block;
    list-style: none;
}

.footernav ul li a{

    margin: 0px;
    padding: 0px;
    font-size: 16px;
    color: white;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s ease-in-out;

}

.footernav ul li a:hover{

    color: #ffc367;
}

.footerright{

    margin: 0px;
    padding: 0px;
}

.footerright h2{

    color: #ffc367;
    font-size: 30px;
    padding-bottom: 15px;
}

.footerrighticon{

    margin: 12px 0px;
    padding: 0px;
    display: flex;
    gap: 12px;
}

.footerrighticon i{
    color: white;
    line-height: 24px;
}

.footerrighticon  p,.footerrighticon  p a{

    font-size: 16px;
    color: white;
    text-decoration: none;
}

.footercopyright{
    /* Vertical black -> gray gradient for footer copyright */
    background: linear-gradient(180deg, #313131 0%, #252525 30%, #1f2937 70%, #14181e 100%);
    margin: 0px;
    padding: 15px;
    display: flex;
    align-items: center;
    width: 100%;
    display: block;
    border-top: 1px solid rgba(255,255,255,0.03);
}

.footercopyright p ,.footercopyright p a {
    text-align: center;
    margin: 0 auto;
    color: #e5e7eb; /* tailwind gray-200 */
    text-decoration: none;
}

.sticky .headertopnavigation{

position: fixed;
top: 0;
left: 0;
z-index: 99;
background-color: white;
width: 100%;
display: block;
border-bottom: solid 1px #ffc367;
}

.resnav{

    margin: 0px;
    padding: 0px;
    float: right;
    display: none;
    margin-top: -50px;
}

/*aboutuspage*/


.aboutuspage{

    width: 100%;
    height: 450px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../image/breadcrumb_bg.jpg);

    position: relative;
    z-index: 1;
}

.aboutuspage::before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(75, 75, 75, 0.555);
    z-index: -1;
}

.aboutuspage1{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin-top: 10%;
}

.aboutuspage1 h2{
    color: white;
    font-size: 48px;
}


.aboutuspage1  h6 a{

    color: white;
    text-decoration: none;
}

.aboutuspage1 h6 span{

    color: #ffc367;
}



/*Contactus*/


.gettouchbox{


    padding: 20px;
    border-radius: 8px;
    /* Vertical black -> gray gradient (top to bottom) */
    background: linear-gradient(180deg, #000000 0%, #0b1220 45%, #374151 100%);
    color: #e5e7eb; /* light gray text */
    border: 1px solid rgba(255,255,255,0.04);
}

.gettouchboxicon{

    margin: 0 auto;
    display: table;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #ffc367;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease-in-out;
}

.gettouchbox:hover .gettouchboxicon{
    transform: rotateY(360deg);
}

.gettouchboxicon i{

    color: white;
    font-size: 24px;
}

.gettouchboxtext{

    text-align: center;
    margin: 15px 0px;
    padding: 0px;
}


.gettouchboxtext h6{

    color: #ffc367;
    font-size: 24px;
} 

.gettouchboxtext p a , .gettouchboxtext p{
    color: #d1d5db; /* tailwind gray-300 */
    text-decoration: none;
}

/*Find&Message Here*/


.findmessageleft{

    margin: 0px;
    padding: 0px;

}


.findmessageright{

    margin: 0px;
    padding: 20px;

border-radius: 8px;
border: dotted 1px #ffc367;

}

.findmessageright input{
width: 100%;
display: block;
border-radius: 8px;
    border: solid 1px #ffc367;
    margin: 0px;
    padding: 15px;
    font-size: 16px;
    color: black;
    margin: 15px 0px;
}

.findmessageright input:focus{
    outline: none;
}

.findmessageright textarea{

    width: 100%;
    height: 150px;
    display: block;
    border-radius: 8px;
        border: solid 1px #ffc367;
        margin: 0px;
        padding: 15px;
        font-size: 16px;
        color: black;
        margin: 15px 0px;
}

.findmessageright textarea:focus{
    outline: none;
}

.findmessageright button{
    background-color: #ffc367;
    color: #000;
}


.findmessageright button:hover{
    background-color: #ffc367;
    color: #000;
}


/*blog*/

.blogbox{

    margin: 0px;
    padding: 0px;
    border-radius: 6px;
    box-shadow: 6px 5px 6px #eee;
    transition: all 0.4s ease-in-out;
}

.blogbox:hover{
    transform: translateY(-10px);
}

.blogimage
{
    margin: 0px;
    padding: 0px;
    border-radius: 6px;
    position: relative;
}
.blogimage1{

    margin: 0px;
    padding: 0px;
    border-radius: 6px;
}

.blogimagedate
{
    padding: 6px 8px;
    background-color: white;
    margin: 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.blogimagedate p{
color: #ff6f00;
font-size: 16px;
text-align: center;
margin-top: 6px;

}

.blogrtext{

    margin: 0px;
    padding: 15px;
}

.blogrtext h4{

    color: #ff6f00;
}

.blogrtext p a{

    color: black;
    text-decoration: none;
}



/*blogdetails*/

.blogdetailsleft{

    margin: 0px;
    padding: 0px;
}

.blogdetailslefttoptext{

    margin: 0px;
    padding: 0px;
    display: flex;
    gap: 15px;
    color: #838383;
}

.blogdetailsleft h4{

    color: black;
    font-weight: 500;
}

.blogdetailsleft p{

    color: #494949;
}

.blogdetailsleftimage{

    margin: 12px 0px;
    padding: 0px;
}

.blogdetailsleftimagemain{

    margin: 0px;
    padding: 0px;
}

.blogdetailslefttext{

    padding: 20px;
    margin: 0px;
    display: flex;
    gap: 10px;
}

.blogdetailslefttick{
    width: 30px;
    height: 30px;
    border: solid 2px #ffa800 ;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blogdetailsleftticktext{

    margin: 0px;
    padding: 0px;
}


.blogdetailsleftticktext p{
    color: black;
    font-weight: 500;
    text-transform: capitalize;
}
.headerleftbottom{

    margin: 15px 0px;
    padding: 15px;
    background-color: #f4f4f4;
    border-left: solid 3px #ffa800;
width: 100%;
display: block;
}

.headerleftbottom i{
    color: #ffa800;
}

.headerleftbottom p{

    color: black;
  
}


.headerlefttag{
    margin: 12px 0px;
    display: flex;
    gap: 12px;
}

.headerlefttag h6{

    color: #9b9b9b;
    line-height: 40px;
}

.headerlefttag button{
    background-color: #f4f0f0;
    color: #504f4f;
}

.headerlefttag button:hover
{
    background-color: #ffa800;
}



.blogdetailsright{

    margin: 0px;
    padding: 20px;
    border: solid 1px #ffa800;
}

.blogdetailsright h4{

    color: black;
    font-weight: 500;
    position: relative;
    display: inline-block;
    padding-top: 30px;
}

.blogdetailsright h4::before{

    position: absolute;
    content: '';
    top: 10px;
    left: 0;
    width: 50%;
    height: 2px;
    background-color: #ffa800;
}

.blogdetailsrightpost{


    margin: 20px 0px;
    padding: 0px;
}

.blogdetailsrightimg{

    margin: 0px;
    padding: 0px;
}

.blogdetailsrightimg img{
    width: 100%;
    display: block;
}

.blogdetailsrighttext{

    margin: 0px;
    padding: 20px 0px;
   
}

.blogdetailsrighttext h6{

    color: #494949;
    font-weight: 600;
}

.blogdetailsrighttext  p a{

    color: #ffa800;
    text-decoration: none;
}








@media (max-width:991px){

    .resnav{

        display: block;
    }

    .dis_none{

        display: none;
    }

    .haedertopbodyleft ul{
        justify-content: center;
    }

    .bannerboxnav{
        width: 200px;
        height: 100%;
        display: block;
        position: fixed;
        z-index: 99;
        top: 0px;
        left:-100%;
        /* Mobile-only vertical black -> gray gradient */
        background: linear-gradient(180deg, #000000 0%, #0b1220 45%, #374151 100%);
        transition: all 0.4s ease-in-out;
        padding-top: 60px; /* keep content below header */
    }

    .bannerboxnav ul{

        margin: 0px;
        padding: 0px;
        display: block;
    }

    /* Mobile nav links should be light on dark background */
    .bannerboxnav ul li a{
        color: #ffffff;
        padding: 12px 20px;
        display: block;
    }

    /* Hamburger icon visible on dark header */
    .resnav i{
        color: #ffffff;
        font-size: 22px;
    }

    .bannerboxnav ul li{

        margin: 0px;
        padding: 12px 0px;
        display: block;
    }

    .bannerboxnav.main{

        left: 0px;
    }
    .servicebox1{
        width: 100%;
        display: block;
    }

    .zordicbox{

        width: 100%;
        display: block;
    }
    .aboutuspage1{

        margin-top: 15%;
    }
    .bannerbox{

        height: 280px;
    }
    .bannertext h2{

        font-size: 18px;
    }
    .aboutuspage{

        height: 200px;
    }
}