@charset "utf-8";
/*
/*	Copyright (c) 2022 Marketify
/*	Author: Marketify
/*	This file is made for CURRENT TEMPLATE


01) GRAX BASE
02) GRAX TOPBAR
03) GRAX MOBILE MENU
04) GRAX HERO
05) GRAX ABOUT
06) GRAX PORTFOLIO
07) GRAX TALK
08) GRAX NEWS
09) GRAX CONTACT
10) GRAX COPYRIGHT
11) GRAX CURSOR
12) GRAX PARTICLE EFFECT
13) GRAX GLITCH EFFECT
14) GRAX MEDIA QUERIES (FOR SMALL DEVIVES)


/*---------------------------------------------------*/
/*	01) GRAX BASE
/*---------------------------------------------------*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@font-face {
    font-family: 'BeautiqueDisplay';
    src: url('fonts/BeautiqueDisplay.woff2') format('woff2'),
         url('fonts/BeautiqueDisplay.woff') format('woff'),
         url('fonts/BeautiqueDisplay.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
html {
	overflow-x: hidden;
	padding: 0px;
	margin: 0px
}
body{
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	line-height: 30px;
	letter-spacing: 1px;
	word-wrap: break-word;
	background-color: #fff;
	color: #767676;
	overflow: hidden;
}
svg{
	fill: currentcolor;
	width: 15px;
	height: 15px;
}
img.svg{
	width: 15px;
	height: 15px;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #6f6f6f;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #6f6f6f;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #6f6f6f;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #6f6f6f;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color: #6f6f6f;
}

::placeholder { /* Most modern browsers support this now. */
   color: #6f6f6f;
}

.container{
	max-width: 1200px;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	height:auto;
	padding:0px 15px;
	position:relative;
	clear:both;
}

h1, h2, h3, h4, h5, h6{
	font-weight:500;
	line-height: 1.4;
	color: #000;
}

h1 { font-size: 45px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

.grax_tm_all_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
}
.grax_tm_all_wrap,
.grax_tm_all_wrap *{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.grax_tm_section{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
/* 1. The Viewport: Masks the cards outside the container */
.carousel-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

/* 2. The Track: This moves horizontally */
.scroll-wrapper {
    display: flex;
    width: max-content; /* Critical: allows the track to be as wide as all cards */
    gap: 20px;
    animation: scrollInfinite 50s linear infinite; /* Adjust 30s for speed */
}

/* 3. Pause on Hover */
.carousel-viewport:hover .scroll-wrapper {
    animation-play-state: paused;
    cursor: pointer;
}

/* 4. Card Styling */
.scroll-card {
    flex: 0 0 250px; /* Fixed width for each card */
    background: #fff;
    text-align: center;
}

.scroll-card .wht {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* 5. The Animation Logic */
@keyframes scrollInfinite {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move by exactly half the width (since we duplicated the list) */
        transform: translateX(calc(-50% - 10px)); 
    }
}
.scroll-wrapper {
    display: flex;
    overflow-x: auto; /* Enables scrolling */
    gap: 20px;
    padding: 20px 0;
    cursor: grab; /* Shows the "grab" hand for mouse users */
    scrollbar-width: none; /* Hides scrollbar for Firefox */
}

/* Hide scrollbar for Chrome/Safari */
.scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.scroll-wrapper:active {
    cursor: grabbing;
}

.scroll-card {
    flex: 0 0 280px; /* Each card stays 280px wide and won't shrink */
    background: #fff;
    border-radius: 10px;
    text-align: center;
}

.scroll-card .wht {
    display: block;
	font-size: 16px;
}
/* Accordion Styling */
.custom-location-accordion .accordion-item {
    background-color: #f9f4e8; /* Beige background */
    border: none;
    margin-bottom: 15px;
    border-radius: 8px !important;
    overflow: hidden;
}

.custom-location-accordion .accordion-button {
    background-color: #fff;
    color: #000; /* Dark green/grey text */
    letter-spacing: 1px;
    border: 1px solid #ebebeb;
}

.custom-location-accordion .accordion-button:not(.collapsed) {
    background-color: #fff;
    color: #000;
	 border: 1px solid #ebebeb;
}

.custom-location-accordion .accordion-body {
    background-color: #ffffff;
    padding: 20px 30px;
}

.custom-location-accordion ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-location-accordion ul li {
    color: #000;
    font-size: 16px;
	margin: 10px;
}

.custom-location-accordion ul li:last-child {
    border-bottom: none;
}

/* Map Image Styling */
.map-wrapper {
    border: 1px solid #bcbb9c;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.map-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.map-img:hover {
    transform: scale(1.02);
}
#preloader {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    display: flex;
}
#preloader:before,
#preloader:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* background-color: #fff; */
	background-image: url(../img/slider/Door.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
#preloader:after{
    left: auto;
    right: 0;
}
#preloader .loader_line{
    margin: auto;
    width: 1px;
    height: 250px;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
}
.loader_line:before{
    content: '';
    position: absolute;
    left: 0;
    top: 40%;
    width: 1px;
    height: 0%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #940b0b;
    -webkit-animation: lineheight 1000ms ease-in-out 0s forwards;
    -o-animation: lineheight 1000ms ease-in-out 0s forwards;
    animation: lineheight 1000ms ease-in-out 0s forwards;
}
.loader_line:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #C8C8C8;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-animation: lineround 1200ms linear 0s infinite;
    -o-animation: lineround 1200ms linear 0s infinite;
    animation: lineround 1200ms linear 0s infinite;
    animation-delay: 2000ms;
}

@keyframes lineheight{
    0%{
        height: 0%;
    }
    100%{
        height: 100%;
    }
}

@keyframes lineround{
    0%{
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100%{
        -webkit-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
}

/*hiding all*/
.preloaded .loader_line:after{
    opacity: 0;
}
.preloaded  .loader_line{
    opacity: 0;
    height: 100%!important;
}
.preloaded:before,
.preloaded:after{
    -webkit-animation: preloadedzero 300ms ease-in-out 500ms forwards;
    -o-animation: preloadedzero 300ms ease-in-out 500ms forwards;
    animation: preloadedzero 300ms ease-in-out 500ms forwards;
}
@keyframes preloadedzero{
    0%{
        width: 50%;
    }
    100%{
        width: 0%;
    }
}

/*---------------------------------------------------*/
/*	02) GRAX TOPBAR
/*---------------------------------------------------*/
/* 
.grax_tm_topbar{
	left: 0px;
	right: 0px;
	position: fixed;
	z-index: 10;
	padding: 30px 0px;
	transform: translateY(-101%);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.grax_tm_topbar.opened{
	transform: translateY(0);
}
.grax_tm_topbar.animate{
	background-color: rgba(0, 0, 0, 0.815);
	padding: 25px 0px;
	box-shadow: 0px 0px 10px rgba(0,0,0,.1);
}
.grax_tm_topbar .topbar_inner{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.grax_tm_topbar .logo .dark{display: none;}
.grax_tm_topbar.animate .logo .dark{display: block;}
.grax_tm_topbar.animate .logo .light{display: none;}
.grax_tm_topbar .logo img{max-width: 146px;}
.grax_tm_topbar .logo a{display: inline-block;}
.grax_tm_topbar .menu ul{
	margin: 0px;
	list-style-type: none;
	background-color: #000;
	padding:1% 3% 1%  3%;
	border-radius: 20px;
	width: 65rem;
	font-family: 'Noto Serif Semi Condensed';
}
.grax_tm_topbar .menu .enquire{
	background-color: #fff;
	border-radius: 20px;
    padding: 5px 14px;
}
.grax_tm_topbar .menu .enquire a{
	color: #e54b4b;
}
.grax_tm_topbar .menu ul li{
	margin: 0px 9px 0px 0px;
	display: inline-block;
}
.grax_tm_topbar .menu ul li:last-child{margin-right: 0px;}
.grax_tm_topbar .menu ul li a{
	text-decoration: none;
	color: #fff;
	font-family: "Poppins";
	font-weight: 500;
	transition: all .3s ease;
}
.grax_tm_topbar .menu ul li.current a{color: #e54b4b;}
.grax_tm_topbar .menu ul li a:hover{color: #e54b4b;}
.grax_tm_topbar.animate .menu ul li a{color: #fff;}
.grax_tm_topbar.animate .menu .enquire a{color: #e54b4b;} */

/* Main Topbar Container */
/* 1. The Main Wrapper */
.grax_tm_topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #ffffff !important; /* Force White */
    padding: 15px 0;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
    transform: translateY(0) !important; /* Make sure it's visible */
	/* transform: translateY(-101%); */
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}

/* 2. Flex Container */
.grax_tm_topbar .topbar_inner {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Logo Left, Menu Center, Button Right */
    gap: 20px;
}

/* 3. Logo - Stay Left */
.grax_tm_topbar .logo {
    flex-shrink: 0;
}
.grax_tm_topbar .logo img {
    max-width: 200px;
    display: block;
}

/* 4. Menu - The Center Piece */
.grax_tm_topbar .menu {
    flex-grow: 1;
}

.grax_tm_topbar .menu ul {
    display: flex;
    align-items: center;
    justify-content: center; /* This centers the links */
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap; /* CRITICAL: Prevents text from breaking into 2 lines */
}

.grax_tm_topbar .menu ul li {
    margin: 0 12px; /* Adjust spacing between links here */
    display: flex;
    align-items: center;
}

/* 5. Link Styling */
.grax_tm_topbar .menu ul li a {
    text-decoration: none;
    color: #333 !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    transition: 0.3s;
}

.grax_tm_topbar .menu ul li a:hover {
    color: #e54b4b !important;
}

/* 6. Phone Icon & Number */
.grax_tm_topbar .menu ul li i {
    margin-right: 8px;
    color: #333;
    font-size: 14px;
}

/* 7. Enquire Button - The Right Piece */
.grax_tm_topbar .enquire {
    background-color: #e54b4b !important; /* Dark Brown/Orange */
    padding: 10px 25px !important;
    margin-left: 15px;
	border: 1px solid #e54b4b;
	 color: #fff !important;
	text-decoration: none;
}

.grax_tm_topbar .enquire a {
    color: #fff !important;
	text-decoration: none;
}

.grax_tm_topbar .enquire:hover {
    background-color: #c42b2c !important;
}

/* Fix for the 'animate' class if your JS adds it on scroll */
.grax_tm_topbar.animate {
    padding: 10px 0;
    background-color: #fff !important;
}
.grax_tm_topbar .menu ul li.current a{color: #e54b4b;}

.grax_tm_topbar .menu ul li a:hover{color: #e54b4b;}

.grax_tm_topbar.animate .menu ul li a{color: #fff;}

.grax_tm_topbar.animate .menu .enquire a{color: #e54b4b;}

/*---------------------------------------------------*/
/*	03) GRAX MOBILE MENU
/*---------------------------------------------------*/

.grax_tm_mobile_menu{
	width: 100%;
	height: auto;
	position: relative;
	top: 0px;
	left: 0px;
	display: none;
	z-index: 10;
}
.grax_tm_mobile_menu .topbar_inner{
	width: 100%;
	height: auto;
	float: left;
	clear: both;
	background-color: #fff;
	padding: 20px 0px;
	border-bottom: 1px solid rgba(0,0,0,.2);
}
.grax_tm_mobile_menu .topbar_in{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.my_trigger .hamburger{
    padding: 15px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}
.my_trigger .hamburger-box{
    width: 30px;
    height: 18px;
    display: inline-block;
    position: relative;
}
.my_trigger .hamburger-inner{
    display: block;
    top: 50%;
    margin-top: -2px;
}
.my_trigger .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
    width: 30px;
    height: 2px;
    /* background-color: #ffffff!important; */
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
	
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}
.my_trigger .hamburger-inner::before,
.my_trigger .hamburger-inner::after{
    content: "";
    display: block;
}
.my_trigger .hamburger-inner::before{top: -8px;}
.my_trigger .hamburger-inner::after{ bottom: -10px;}
.my_trigger .hamburger--collapse-r .hamburger-inner{
    top: auto;
    bottom: 0;
    transition-duration: 0.13s;
    transition-delay: 0.13s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.my_trigger .hamburger--collapse-r .hamburger-inner::after{
    top: -16px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.my_trigger .hamburger--collapse-r .hamburger-inner::before{
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner{
    transform: translate3d(0, -10px, 0) rotate(45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner::after{
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner::before{
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.my_trigger .hamburger{
	padding: 0px;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}
.my_trigger .hamburger-box{display: block;}
.my_trigger .hamburger .hamburger-inner::before,
.my_trigger .hamburger .hamburger-inner::after,
.my_trigger .hamburger .hamburger-inner{
	background-color: #000;
	width: 30px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.grax_tm_mobile_menu .dropdown{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #000;
	border-bottom: 1px solid rgba(0,0,0,.2);
	display: none;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 25px 0px;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner ul{
	margin: 0px;
	list-style-type: none;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner ul li{
	margin: 0px;
	float: left;
	width: 100%;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner ul li a{
	text-decoration: none;
	color: #000;
	display: inline-block;
	padding: 4px 0px;
	font-weight: 500;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner .enquire{
	background-color: #e54b4b;
	text-decoration: none;
	color: #fff;
	display: inline-block;
	padding: 5px 25px;
	font-weight: 500;
	width: auto;
	margin-top: 10px;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner .enquire a{
	color: #fff
}
.grax_tm_mobile_menu .logo img{max-width: 130px;}

/*---------------------------------------------------*/
/*	04) GRAX HERO
/*---------------------------------------------------*/

.grax_tm_hero{
	width: 100%;
	height: 100vh;
	clear: both;
	float: left;
	position: relative;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 100%);
	overflow: hidden;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.grax_tm_hero.creative{clip-path: none;}
.grax_tm_hero.creative.shape{clip-path:none;}
.grax_tm_hero.shape{clip-path: polygon(0 0, 100% 0, 100% 83%, 25% 100%, 0 83%);}
.grax_tm_hero .bg{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}
.grax_tm_hero .bg .image{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top;
	background-color: #000;
}
.grax_tm_hero .bg .overlay{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
	background-color: rgba(0,0,0,.2);
}
.grax_tm_hero .content{
	width: 100%;
	height: 100%;
	float: left;
	position: relative;
	z-index: 2;
}
.grax_tm_hero .container{height: 100%;}
.grax_tm_hero .details{
	position: absolute;
	top: 65%;
	transform: translateY(-50%);
	z-index: 5;
}
.grax_tm_hero .name{
	font-size: 72px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 11px;
	
}

.grax_tm_hero .details[data-animation="toTop"] .fn_animation .character{top: 15px;}
.grax_tm_hero .details[data-animation="toTop"] .fn_animation .character.opened{top: 0px;}

.grax_tm_hero .details[data-animation="toRight"] .fn_animation .character{right: 15px;}
.grax_tm_hero .details[data-animation="toRight"] .fn_animation .character.opened{right: 0px;}

.grax_tm_hero .details[data-animation="scale"] .fn_animation .character{
	opacity: 1;
	visibility: visible;
	transform: scale(0);
}
.grax_tm_hero .details[data-animation="scale"] .fn_animation .character.opened{transform: scale(1);}

.grax_tm_hero .details[data-animation="rotate"] .fn_animation .character{transform: rotate(30deg);}
.grax_tm_hero .details[data-animation="rotate"] .fn_animation .character.opened{transform: rotate(0);}

.fn_animation{opacity: 0;}
.fn_animation.ready{opacity: 1;}
.fn_animation .character{
	display: inline-block;
	position: relative;
	opacity: 0;
	visibility: hidden;
	transform: translateZ(0);
	
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.fn_animation .character.opened{
	opacity: 1;
	visibility: visible;
}
.fn_animation.job .character{
	-webkit-transition: all .4s ease;
	   -moz-transition: all .4s ease;
	    -ms-transition: all .4s ease;
	     -o-transition: all .4s ease;
	        transition: all .4s ease;
}
.grax_tm_hero .job{
	color: #ddd;
	letter-spacing: 1.5px;
	font-family: "Poppins";
	font-size: 17px;
	font-weight: 500;
	margin-bottom: 40px;
	max-width: 400px;
	font-style: italic;
}
.grax_tm_down{
	position: absolute;
	z-index: 7;
	bottom: 5%;
	display: none;
}
.grax_tm_down.opened{display: block;}
.grax_tm_down[data-position="left"]{left: 0px;}
.grax_tm_down[data-position="right"]{right: 0px;}
.grax_tm_down[data-position="center"]{
	left:50%;
	transform: translateX(-50%);
}
.grax_tm_down .line_wrapper{
	position: absolute;
    width: 1px;
    height: 100%;
    left: 0;
    right: 0;
   	margin: 0px auto;
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible;
	
    -webkit-transition: all .7s;
    -moz-transition: all .7s;
    -ms-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
}
.grax_tm_down .line_wrapper{
    width: 1px;
    height: 50px;
    background: none;
	display: block;
}
.grax_tm_down .line_wrapper:before{
	content: "";
	background-color: #000;
	width: 1px;
    height: 50%;
    display: block;
    top: 0;
	
    -webkit-animation: scroll-down 2s ease-in-out infinite;
    -ms-animation: scroll-down 2s ease-in-out infinite;
    animation: scroll-down 2s ease-in-out infinite;;
}

@-webkit-keyframes scroll-down {
  0% {
    height: 0;
  }
  50% {
    height: 100%;
  }
  70% {
    height: 100%;
    transform: scaleY(0.5);
    transform-origin: bottom;
  }
  100% {
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
.grax_tm_down[data-skin="light"] .line_wrapper:before{background-color: #fff;}

/*---------------------------------------------------*/
/*	05) GRAX ABOUT
/*---------------------------------------------------*/
/* Section Container */
.grax_tm_about {
    width: 100%;
    padding: 50px 0;
    background-color: #fff; /* Changed to white to match image */
}

.grax_tm_about .about_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/* Left Content Styles */
.grax_tm_about .left {
    width: 50%;
}

.project-title {
    font-family: "Playfair Display", serif; /* Or your preferred serif font */
    font-size: 40px;
    color: #000;
    margin-bottom: 25px;
    font-weight: 500;
}

.text-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 30px;
}

/* The Button */
.download-btn {
    display: inline-block;
    padding: 15px 35px;
    background-color: #e54b4b; /* Reddish-brown color from image */
    border: 1px solid #e54b4b;
    color: #fff !important;
    text-decoration: none;
    font-weight: 500;
}

.download-btn:hover {
    background-color: #c42b2c;
}
.dbrobtn{
    display: inline-block;
    padding: 15px 35px;
    background-color: #e54b4b; /* Reddish-brown color from image */
    color: #fff !important;
    text-decoration: none;
    font-weight: 500;
}
.dbrobtn:hover {
    background-color: #c42b2c;
}
/* Right Video Styles */
.grax_tm_about .right {
    width: 50%;
}

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Adds depth like the image */
    border-radius: 8px;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
    .grax_tm_about .about_inner {
        flex-direction: column;
        text-align: center;
    }
    .grax_tm_about .left, .grax_tm_about .right {
        width: 100%;
    }
}
.grax_tm_button{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.grax_tm_button a{
	text-decoration: none;
    color: #fff;
    display: inline-block;
    background-color: #e54b4b;
	border: 2px solid #e54b4b;
    padding: 10px 40px;
    border-radius: 5px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.grax_tm_button a:hover{
	background-color: transparent !important;
	color: #000;
}
.grax_tm_progress_part{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 50px 0px 50px 0px;
	background-image: url('../img/slider/tc.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	color: #ebe0a5;
}
.grax_tm_progress_part .part_inner{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	margin-top: 20px;
}
.grax_tm_progress_part .left{
	width: 50%;
	padding-right: 50px;
}
.grax_tm_progress_part .left h3{
	font-weight: 600;
	margin-bottom: 27px;
}
.grax_tm_progress_part .right{
	width: 50%;
	padding-left: 50px;
}
.kioto_progress{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.progress_inner{
	width:100%;
	margin-bottom:27px;
}
.progress_inner:last-child{margin-bottom: 0px;}
.progress_inner > span{
	margin:0px 0px 7px 0px;
	width:100%;
	display:block;
	text-align:left;
	font-family: "Poppins";
	font-weight: 500;
	color: #000;
}
.progress_inner span.number{float: right;}
.progress_inner .background{
	background:rgba(0,0,0,.09);
	width:100%;
	min-width:100%;
	position:relative;
	height:8px;
	border-radius: 5px;
}
.progress_inner .background .bar_in{
	height:100%;
	background:#e54b4b;
	width:0px;
	overflow:hidden;
	border-radius: 5px;
}
.progress_inner .background .bar{
	width:0px;
	height:100%;
}
.progress_inner .background .bar.open{
	-webkit-animation: wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* Safari 4+ */
	-moz-animation:    wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* Fx 5+ */
	animation:         wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* IE 10+ */
	width:100%;	
}

@-webkit-keyframes wow {0%{ width:0%; } 100%{ width:100%; }}
@-moz-keyframes wow {0%{ width:0%; } 100%{ width:100%; }}
@keyframes wow {0%{ width:0%; } 100%{ width:100%; }}

/*---------------------------------------------------*/
/*	06) GRAX PORTFOLIO
/*---------------------------------------------------*/

.grax_tm_title_holder{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.grax_tm_title_holder span{color: #a5a5a5!important; font-size: 40px;
}
.grax_tm_title_holder h3{
	text-transform: capitalize;
	color: #757052;	
	font-size: 40px;
	font-family: "Playfair Display", serif;
	margin-bottom: 0.3!important;
}
.grax_tm_title_holder1 h3{
	color: #ebe0a5;	
	font-size: 40px;
	text-align: center;
	font-family: "Playfair Display", serif;
}
.grax_tm_portfolio{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 50px 0px 50px 0px;
	background-image: url('../img/slider/sf.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	border-bottom: 1px solid #827742;
}

.grax_tm_portfolio1
{
	width: 100%;
	height: auto;
	padding: 50px 0px 50px 0px;
	color: #000;
}

.grax_tm_portfolio .portfolio_list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding-top: 50px;
}
.grax_tm_portfolio ul{
	margin: 0px 0px 0px -50px;
	list-style-type: none;
}
.grax_tm_portfolio ul li{
	margin: 0px 0px 50px 0px;
	float: left;
	width: 33.3333%;
	padding-left: 50px;
}
.grax_tm_portfolio ul li .list_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	border-radius: 5px;
	overflow: hidden;
}
.grax_tm_portfolio .image{position: relative;}
.grax_tm_portfolio .image img{
	min-width: 100%;
	opacity: 0;
}
.grax_tm_portfolio .image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: 5px;
}
.grax_tm_portfolio .overlay{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
	background-color: #f9f9f9;
	border-radius: 5px;
	
	opacity: 0;
	visibility: hidden;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.grax_tm_portfolio ul li .list_inner:hover .overlay{
	opacity: 1;
	visibility: visible;
}
.grax_tm_portfolio .details{
	position: absolute;
	bottom: 20px;
	left: 30px;
	z-index: 2;
	
	opacity: 0;
	visibility: hidden;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.grax_tm_portfolio ul li .list_inner:hover .details{
	opacity: 1;
	visibility: visible;
	bottom: 30px;
}
.grax_tm_portfolio .details span{font-family: "Poppins";}
.grax_tm_portfolio .details h3{
	font-size: 18px;
	font-weight: 600;
}
.grax_tm_full_link{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 4;
}
.overlay_effect{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 3;
	border-radius: 5px;
}
.overlay_effect:after{
	position: absolute;
	content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: #f9f9f9;
	z-index: 1;
}
.overlay_effect:before{
	position: absolute;
	content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}
.my_waypoint.load .overlay_effect:before{
	z-index: 2;
  	background-color: #000;
  	animation: anim 2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.my_waypoint.load .overlay_effect:after{
 	animation: anim2 2s cubic-bezier(0.77, 0, 0.175, 1) both;
}

@keyframes anim{
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes anim2{
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

/*---------------------------------------------------*/
/*	07) GRAX TALK
/*---------------------------------------------------*/

.project_highlights_section {
    padding: 80px 0;
    background-color: #fff; /* White background as per image */
    color: #000;
}

/* Titles */
.main-title {
    font-family: 'Playfair Display', serif; /* Or similar Serif font */
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 15px;
}

/* Carousel Image Container */
/* Container for the whole section */
.project_highlights_section {
    background-color: #fff;
    padding: 60px 0;
}

/* The wrapper that creates space for the arrows */
.carousel-outer-wrapper {
    position: relative;
    max-width: 90%; /* Shrinks the image area slightly to make room for arrows */
    margin: 0 auto;
}

/* Force arrows OUTSIDE the carousel-inner */
.carousel-control-prev {
    left: -70px !important; /* Adjust this value to move further out */
}

.carousel-control-next {
    right: -70px !important; /* Adjust this value to move further out */
}

/* Style for the thin black arrows (Chevrons) */
.custom-chevron {
    display: block;
    width: 25px;
    height: 25px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    background: transparent;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.custom-chevron.prev {
    transform: rotate(-135deg); /* Points Left */
}

.custom-chevron.next {
    transform: rotate(45deg); /* Points Right */
}

.carousel-control-prev:hover .custom-chevron,
.carousel-control-next:hover .custom-chevron {
    opacity: 1;
}

/* Hide the default white Bootstrap icons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    display: none;
}

/* Responsiveness: Move arrows back inside on small mobile screens */
@media (max-width: 768px) {
    .carousel-outer-wrapper {
        max-width: 100%;
        padding: 0 10px;
    }
    .carousel-control-prev { left: 5px !important; }
    .carousel-control-next { right: 5px !important; }
    
    /* Make arrows white on mobile so they are visible over the image */
    .custom-chevron { border-color: #fff; }
}

.carousel-inner img {
    border: 1px solid #ddd; /* Subtle border like the image layout lines */
    max-height: 600px;
    object-fit: cover;
}

/* Custom Arrows (The thin black chevrons) */
.carousel-control-prev, .carousel-control-next {
    width: 60px;
    opacity: 1;
}

.custom-arrow {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}

.prev-arrow {
    transform: rotate(-135deg);
}

.next-arrow {
    transform: rotate(45deg);
}

.carousel-control-prev:hover, .carousel-control-next:hover {
    opacity: 0.7;
}

/* Remove default bootstrap icons */
.carousel-control-prev-icon, .carousel-control-next-icon {
    display: none;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .carousel-container {
        padding: 0;
    }
    .main-title {
        font-size: 24px;
    }
}

/*---------------------------------------------------*/
/*	08) GRAX NEWS
/*---------------------------------------------------*/
.grax_tm_testimonial{
	padding-top: 50px;
}
.grax_tm_testimonial h3{
	color: #000;
    font-size: 40px;
    text-align: center;
    font-family: "Playfair Display", serif;
}
.grax_tm_faq{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #000;
	padding-top: 50px;
}
.grax_tm_news{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	/* background-color: #000; */
	padding: 50px;
}
.grax_tm_news .news_list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding-top: 90px;
}
.grax_tm_news .news_list ul{
	margin: 0px 0px 0px -50px;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}
.grax_tm_news .news_list ul li{
	margin: 0px 0px 50px 0px;
	float: left;
	width: 33.3333%;
	padding-left: 50px;
}
.grax_tm_news .news_list ul li .list_inner{
	width: 100%;
	height: 100%;
	clear: both;
	float: left;
	position: relative;
}
.grax_tm_news .news_list ul li .image{
	position: relative;
	overflow: hidden;
}
.grax_tm_news .news_list ul li .image img{
	min-width: 100%;
	opacity: 0;
}
.grax_tm_news .news_list ul li .image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position:center; 
	transform: scale(1) translateZ(0);
	border-radius: 5px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.grax_tm_news .news_list ul li .list_inner .image:hover .main{transform: scale(1.1) rotate(3deg);}
.grax_tm_news .news_list ul li .details{
	width: 100%;
	float: left;
	padding-right: 15px;
	padding-top: 32px;
}
.grax_tm_news .news_list ul li .details .title{margin-bottom: 10px;}
.grax_tm_news .news_list ul li .details .title a{
	text-decoration: none;
	color: #000;
	font-size: 18px;
	font-weight: 600;
	display: inline-block;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.grax_tm_news .news_list ul li .details .title a:hover{color: #e54b4b;}
.grax_tm_news .news_list ul li .details .date{
	text-transform: uppercase;
	font-family: "Poppins";
	font-size: 12px;
	color: #767676;
	font-style: italic;
}
.grax_tm_news .news_list ul li .details .date a{
	text-decoration: none;
	color: #767676;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.grax_tm_news .news_list ul li .details .date a:hover{color: #e54b4b;}
.grax_tm_news .news_list ul li .details .date span{
	position: relative;
	margin-left: 11px;
}
.grax_tm_news .news_list ul li .details .date span:before{
	position: absolute;
	content: "";
	margin-top: 1px;
	top: 50%;
	transform: translateY(-50%) rotate(15deg);
	right: 100%;
	background-color: #939393;
	width: 1px;
	height: 9px;
	margin-right: 7px;
}
.grax_tm_news .description{
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: -11;
	display: none;
}
body.modal{
	overflow-y: hidden;
}
.grax_tm_modalbox_news{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 100vh;
	z-index: 15;
	background-color: rgba(0,0,0,.8);
	opacity: 0;
	visibility: hidden;
	transition: all .3s ease;
}
.grax_tm_modalbox_news.opened{
	opacity: 1;
	visibility: visible;
}
.grax_tm_modalbox_news .container{
	height: 100vh;
}
.grax_tm_modalbox_news .box_inner{
	position: absolute;
	top: 70px;
	bottom: 70px;
	width: 1200px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #fff;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	margin-top: -20px;
	transition: all .3s ease;
	transition-delay: .3s;
}
.grax_tm_modalbox_news.opened .box_inner{
	opacity: 1;
	visibility: visible;
	margin-top: 0px;
}
.grax_tm_modalbox_news .close{
	position: fixed;
	left: 100%;
	top: 0px;
	margin-left: 40px;
	z-index: 111111;
}
.grax_tm_modalbox_news .close a{
	text-decoration: none;
	color: #fff;
}
.grax_tm_modalbox_news .close .svg{
	width: 50px;
	height: 50px;
}
.grax_tm_modalbox_news .description_wrap{
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	padding: 50px;
}
.grax_tm_modalbox_news .details{
	width: 100%;
	float: left;
	margin-bottom: 30px;
}
.grax_tm_modalbox_news .description{
	width: 100%;
	float: left;
}
.grax_tm_modalbox_news .description p{
	margin-bottom: 15px;
}
.grax_tm_modalbox_news .description blockquote{
	font-style: italic;
	color: #000;
	border-left: 2px solid #e54b4b;
	padding-left: 20px;
	margin-bottom: 15px;
}
.grax_tm_modalbox_news .description_wrap .image{
	position: relative;
	max-height: 450px;
	z-index: -1;
	margin-bottom: 40px;
}
.grax_tm_modalbox_news .description_wrap .image img{
	min-width: 100%;
}
.grax_tm_modalbox_news .description_wrap .image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 5px;
}
.grax_tm_modalbox_news .details .title{
	font-weight: 600;
	margin-bottom: 5px;
}
.grax_tm_modalbox_news .date{
	text-transform: uppercase;
    font-family: "Poppins";
    font-size: 12px;
    color: #767676;
    font-style: italic;
}
.grax_tm_modalbox_news .date a{
	text-decoration: none;
    color: #767676;
	
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.grax_tm_modalbox_news .date a:hover{color: #e54b4b;}
.grax_tm_modalbox_news .date span{
	position: relative;
    margin-left: 11px;
}
.grax_tm_modalbox_news .date span:before{
	position: absolute;
    content: "";
    margin-top: 0px;
    top: 50%;
    transform: translateY(-50%) rotate(15deg);
    right: 100%;
    background-color: #939393;
    width: 1px;
    height: 9px;
    margin-right: 7px;
}
.grax_tm_modalbox_news .share{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	align-items: center;
}
.grax_tm_modalbox_news .share span{
	font-family: "Poppins";
	color: #000;
	font-weight: 600;
	display: inline-block;
	padding-right: 20px;
}
.grax_tm_modalbox_news .share ul{
	margin: 0px;
	list-style-type: none;
}

.grax_tm_modalbox_news .share ul li{
	margin: 0px 10px 0px 0px;
	display: inline-block;
}
.grax_tm_modalbox_news .share ul li a{
	text-decoration: none;
	color: #000;
}












/*---------------------------------------------------*/
/*	09) GRAX CONTACT
/*---------------------------------------------------*/

/* Section Background */
.grax_tm_contact {
    padding: 50px 0;
    position: relative;
}

/* Left Content Styles */
.display-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    color: #1a1a1a;
    margin-bottom: 20px;
    line-height: 1.2;
}

.sub-text {
    font-size: 17px;
    color: #666;
    margin-bottom: 30px;
}

.btn-download {
    display: inline-block;
    padding: 15px 30px;
    background-color: #e54b4b;
    border: 1px solid #e54b4b !important;
    color: #fff !important;
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 25px;
}
.btn-download:hover{
    background-color: #c42b2c !important;
    color: #fff;
}
.btn-floor-plan{
    width: 20% !important;
    margin: 0 auto;
}
.phone-link {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 20px;
    font-weight: 600;
}

.phone-link a {
    color: #1a1a1a;
    text-decoration: none;
}

.phone-link i {
    font-size: 24px;
}

/* Right Side: The Form Card */
.contact-card {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    max-width: 500px;
    margin: 0 auto;
}
/* Container for the form inputs */
.contact-card form {
    padding-top: 10px;
}

/* Individual Input Styling */
.custom-input {
    border: none !important;
    border-bottom: 1px solid #ccc !important; /* Thin grey line */
    border-radius: 0 !important;
    padding: 12px 0px !important;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    background-color: transparent !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease;
}

/* Placeholder color */
.custom-input::placeholder {
    color: #999;
    font-weight: 300;
}

/* Focus state: bottom border turns to the theme color */
.custom-input:focus {
    border-bottom: 1px solid #a64439 !important; /* Reddish-brown from image */
}




/* ReCAPTCHA centering */
.g-recaptcha {
    display: flex;
    justify-content: center;
    transform: scale(0.9); /* Slightly smaller to fit card better */
    transform-origin: center;
}

.btn-enquire:hover {
    background-color: #8a382f;
}
.form-logo {
    max-width: 200px;
    margin-bottom: 30px;
}

.custom-input {
    border: none;
    border-bottom: 1px solid #ddd !important;
    border-radius: 0;
    padding: 12px 5px;
    font-size: 14px;
    background: transparent !important;
}

.custom-input:focus {
    box-shadow: none;
    border-color: #e54b4b !important;
}

/* Red Button */
.btn-enquire {
    background-color: #e54b4b;
    color: white;
    padding: 15px;
    border: 1px solid #e54b4b;
    font-size: 16px;
    font-weight: 500;
    transition: 0.3s;
	width: 250px;
}

.btn-enquire:hover {
    background-color: #c42b2c;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .display-title { font-size: 32px; }
    .contact_info_wrapper { text-align: center; margin-bottom: 50px; }
    .phone-link { justify-content: center; }
}

/*---------------------------------------------------*/
/*	10) GRAX COPYRIGHT
/*---------------------------------------------------*/

.grax_tm_copyright{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #000;
	padding: 50px 20px;
	position: relative;
}
.grax_tm_copyright .copyright_inner{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #827742;
	margin-top: 15px;
	padding-top:15px;
		padding-bottom:30px;
}
.grax_tm_copyright .logo img{max-width: 100px;}
.grax_tm_copyright .social ul{
	margin: 0px;
	list-style-type: none;
}
.social{
        text-align:center;
}
.grax_tm_copyright .social ul{
    padding-left:0px;
}
.grax_tm_copyright .social ul li{
	margin: 0px 5px 0px 0px;
	display: inline-block;
}
.grax_tm_copyright .social ul li:last{margin-right: 0px;}
.grax_tm_copyright .social ul li a{
	text-decoration: none;
	color: #fff;
}
.grax_tm_copyright .social .svg{
	width: 17px;
	height: 17px;
}
.grax_tm_copyright .copy p{
	text-transform: uppercase;
	color: #fff;
	font-family: "Poppins";
	font-weight: 500;
	font-size: 14px;
}
.grax_tm_copyright .copy a{
	text-decoration: none;
	color: #fff;
}
.my_wave{
	position: absolute;
	top: 0;
	left: 0px;
	width: 100%;
}
.my_wave svg{
	overflow: hidden;
	vertical-align: middle;
  	height: 180px;
	width: 100%;
	fill: #fff;
}

/*---------------------------------------------------*/
/*	11) GRAX CURSOR
/*---------------------------------------------------*/

.mouse-cursor{
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
}
.cursor-inner {
  margin-left: -3px;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  z-index: 50;
  background-color: #7c0a0a;
  -webkit-transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
  transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
}
.cursor-inner.cursor-hover {
  margin-left: -40px;
  margin-top: -40px;
  width: 80px;
  height: 80px;
  background-color: #000;
  opacity: .3;
  cursor: pointer;
}
.cursor-outer {
  margin-left: -15px;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  border: 2px solid #7c0a0a;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 50;
  opacity: .5;
  -webkit-transition: all .08s ease-out;
  transition: all .08s ease-out;
  cursor: pointer;
}
.cursor-outer.cursor-hover{opacity: 0;}
.grax_tm_all_wrap[data-magic-cursor="hide"] .mouse-cursor{
	display: none;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: -1111;
}

/*---------------------------------------------------*/
/*	12) GRAX PARTICLE EFFECT
/*---------------------------------------------------*/

.grax_tm_hero .particle_wrapper{
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
}
#particles-js {
	width: 100%;
	height: 100%;
  	position: absolute;
  	z-index: 2;
}

/*---------------------------------------------------*/
/*	13) GRAX GLITCH EFFECT
/*---------------------------------------------------*/

.grax_tm_hero .glitch_wrap{
	position: relative;
	width: 100%;
	height:100%;
	float: left;
	overflow: hidden;
}
.glitch{
	position: absolute;
 	width: 100%;
 	height: 100%;
	top: 0;
 	left: 0;
	background-image: url("..//img/slider/2.jpg");
	background-size: cover;
	-webkit-background-size: cover;
	background-position: center;
	z-index: -1 !important;
	opacity: 1;
	transform: scale(1);
}
.glitch:before{
	content: "";
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

.grax_tm_hero .ripple{
	width: 100%;
	height: 100%;
	position: absolute;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url(..//img/slider/2.jpg);
}
.grax_tm_hero .ripple:before{
	position: absolute;
	content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: rgba(0,0,0,.3);
	z-index: 1;
}
.container.water{visibility: hidden;}

.my_shape{
	position: absolute;
	width: 100%;
	left: 0px;
	bottom: -11px;
	z-index: 5;
}
.my_shape .svg{
	width: 100%;
	height: 100%;
}
.grax_tm_down.shape{
	bottom: 20%;
}
.my_shape svg{
	width: 100%;
	height: 100%;
	color: #fff;
}

.progressbar {
    position: fixed;
    bottom: 25%;
    right: 25px; /* Changed from -25px to 25px to be visible */
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px; /* Space between Book a Visit and WhatsApp */
	width: 0px;
}

/* Book a Visit Styling */
.progressbar .text {
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    transform: rotate(270deg); /* Better rotation for vertical tabs */
    transform-origin: center;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: rgba(64, 66, 68, 0.9) !important;
    color: #FFF;
    padding: 12px 20px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 60px; /* Offset because rotation shifts the element's space */
}

/* WhatsApp Icon Styling */
.floating-whatsapp {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #25d366;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.floating-whatsapp:hover {
    transform: scale(1.1);
}

.floating-whatsapp img {
    width: 30px;
    height: 30px;
}

.progressbar a {
    text-decoration: none;
}

@media (max-width: 991px) {
    .hidden-sm, .hidden-xs { display: none !important; }
}
@media (min-width: 992px) {
    .hidden-md, .hidden-lg { display: none !important; }
}

/*---------------------------------------------------*/
/*  WAXON SETTINGS
/*---------------------------------------------------*/

.grax_tm_settings{
	position: fixed;
	z-index: 20;
	top: 20%;
	right: -200px;
	width: 200px;
	background-color: rgba(0,0,0,1.00);
	padding: 40px 20px 33px 30px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.grax_tm_settings.opened{
	right: 0px;
}
.grax_tm_settings .wrapper{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.grax_tm_settings .icon{
	position: absolute;
	top: 0px;
	right: 100%;
	background-color: #000;
	padding: 12px 12px 4px 12px;
}
.grax_tm_settings .icon .svg{
	color: #fff;
	width: 25px;
	height: 25px;
	animation: fa-spin 2s infinite linear;
}
.grax_tm_settings .link{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
.grax_tm_settings .title{
	color: #fff;
	font-family: "Montserrat";
	font-weight: 600;
	position: relative;
	display: inline-block;
}
.grax_tm_settings .title:before{
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background-color: rgba(255,255,255,.2);
	left: 0px;
	bottom: 0px;
}
.grax_tm_settings .colors{
	margin: 0px 0px 22px 0px;
	list-style-type: none;
	padding-top: 32px;
}
.grax_tm_settings .colors li{
	margin: 0px;
	display: inline-block;
}
.grax_tm_settings .colors li a{
	text-decoration: none;
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 100%;
}
.grax_tm_settings .direction{
	list-style-type: none;
	margin: 0px 0px 20px 0px;
}
.grax_tm_settings .direction li{
	margin: 0px 20px 0px 0px;
	display: inline-block;
}
.grax_tm_settings .direction li a{
	opacity: .4;
	text-decoration: none;
	color: #fff; 
}
.grax_tm_settings .direction li a.active{
	opacity: 1;
}
.grax_tm_settings .direction li .svg{
	width: 25px;
	height: 25px;
}
.grax_tm_settings .colors li.bl{
	display: inline-block;
}
.grax_tm_settings .colors li.wh{
	display: none;
}
body.dark .grax_tm_settings .colors li.bl,
.grax_tm_settings.changed .colors li.bl{
	display: none;
}
body.dark .grax_tm_settings .colors li.wh,
.grax_tm_settings.changed .colors li.wh{
	display: inline-block;
}
body.dark .grax_tm_settings,
.grax_tm_settings.changed{
	background-color: #fff;
}
body.dark .grax_tm_settings .icon,
.grax_tm_settings.changed .icon{
	background-color: #fff;
}
body.dark .grax_tm_settings .icon .svg,
.grax_tm_settings.changed .icon .svg{
	color: #000;
}
body.dark .grax_tm_settings .title,
.grax_tm_settings.changed .title{
	color: #000;
}
body.dark .grax_tm_settings .title:before,
.grax_tm_settings.changed .title:before{
	background-color: rgba(0,0,0,.5);
}
body.dark .grax_tm_settings .direction li a,
.grax_tm_settings.changed .direction li a{
	color: #000;
}
body.dark .grax_tm_settings .cursor li:nth-child(1) a,
.grax_tm_settings.changed .cursor li:nth-child(1) a{
	border-color: #000;
}
body.dark .grax_tm_settings .cursor li:nth-child(1) a:before,
.grax_tm_settings.changed .cursor li:nth-child(1) a:before{
	background-color: #000;
}
body.dark .grax_tm_settings .cursor li .svg,
.grax_tm_settings.changed .cursor li .svg{
	color: #000;
}
.grax_tm_settings .cursor{
	margin: 0px;
	list-style-type: none;
	padding-top: 15px;
}
.grax_tm_settings .cursor li{
	margin: 0px 20px 0px 0px;
	display: inline-block;
}
.grax_tm_settings .cursor li a{
	text-decoration: none;
	color: #fff;
	opacity: .4;
	font-weight: 600;
}
.grax_tm_settings .cursor li a.showme{
	opacity: 1;
}
.grax_tm_settings .cursor li:nth-child(1) a{
	width: 30px;
	height: 30px;
	border-radius: 100%;
	border: 2px solid #fff;
	position: relative;
	display: inline-block;
}
.grax_tm_settings .cursor li:nth-child(1) a:before{
	position: absolute;
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 100%;
	background-color: #fff;
	transform: translate(-50%,-50%);
	left: 50%;
	top: 50%;
}
.grax_tm_settings .cursor li .svg{
	width: 25px;
	height: 25px;
	color: #fff;
}
.grax_tm_settings .cursor li:nth-child(2){
	position: relative;
	top: -2px;
}
.grax_tm_settings .effect{
	margin: 0px;
	list-style-type: none;
	padding-top: 15px;
	padding-bottom: 25px;
}
.grax_tm_settings .effect li{
	margin: 0px 0px 5px 0px;
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border-radius: 100%;
	background-color: #fff;
	opacity: .4;
}
.grax_tm_settings .effect li a{
	text-decoration: none;
	color: #000;
	font-size: 13px;
	font-weight: 600;
	font-family: "Montserrat";
	display: block;
	position: relative;
	top: 2px;
}
.grax_tm_settings .effect li.selected{
	background-color: #fff;
	opacity: 1;
}

/*---------------------------------------------------*/
/*	GRAX INTRO
/*---------------------------------------------------*/

.grax_tm_intro_hero{
	width: 100%;
	height: 100vh;
	float: left;
	clear: both;
	position: relative;
	margin-bottom: 150px;
}
.grax_tm_intro_hero:before{
	position: absolute;
    content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;  
    background-image: url(..//img/patterns/light-honeycomb.png);
    background-repeat: repeat;
    opacity: .4; 
    z-index: 2;
}
.grax_tm_intro_hero:after{
	position: absolute;
    content: "";
    top: 0px;
   	bottom: 0px;
   	left: 0px;
   	right: 0px;
   	background-color: #000;
   	z-index: 1;
}
.grax_tm_intro_hero .content{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 100%;
	padding: 0px 20px;
	text-align: center;
}
.grax_tm_intro_hero .content .name{
	font-size: 50px;
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 10px;
	margin-bottom: 20px;
}
.grax_tm_intro_hero .content p{
	color: #fff;
	font-size: 20px;
	letter-spacing: 2px;
	font-family: "Poppins";
	font-weight: 500;
}
.grax_tm_intro_hero .grax_tm_down{
	left: 50%;
	transform: translateX(-50%);
	bottom: 5.5%;
}
.grax_tm_intro_hero .fn_animation .character{top: 15px;}
.grax_tm_intro_hero .fn_animation .character.opened{top: 0px;}
.grax_tm_intro_content{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.grax_tm_intro_content .title_holder{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	text-align: center;
}
.grax_tm_intro_content .title_holder h3{
	font-size: 30px;
	font-weight: 800;
	color: #000;
	text-transform: uppercase;
	letter-spacing: 10px;
}
.grax_tm_intro_content .demo_list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding-top: 100px;
	margin-bottom: 70px;
}
.grax_tm_intro_content .demo_list ul{
	margin: 0px 0px 0px -50px;
	list-style-type: none;
}
.grax_tm_intro_content .demo_list ul li{
	margin: 0px 0px 50px 0px;
	float: left;
	width: 50%;
	padding-left: 50px;
	position: relative; 
}
.grax_tm_intro_content .demo_list ul li .list_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	text-align: center;
	transition: all .3s ease;
	top: 0px;
	transform: translateZ(0);
}
.grax_tm_intro_content .demo_list ul li .list_inner:hover{
	top: -10px;
}
.grax_tm_intro_content .demo_list ul li .list_inner h3{
	font-size: 20px; 
	font-weight: 600;
	padding-top: 20px;
}
.pricing-flex-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 40px 10px;
    background-color: #f4f4f4;
    flex-wrap: wrap;
}

.price-card-box {
    background-color: #f4f4f4; /* Beige background from your image */
    border: 1px solid #c8c8c8;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.unit-title {
    font-family: "Playfair Display", serif;
    font-size: 32px;
    color: #c42b2c;
    margin: 0;
}
.unit-title span{
	font-size: 50px;
}
.fancy-line {
    position: relative;
    border-bottom: 1px solid #000;
    margin: 15px auto;
    width: 80%;
}

.fancy-line span {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: #f9f4e8;
    padding: 0 5px;
    font-size: 10px;
}

.price-display {
    font-size: 38px;
    font-weight: bold;
    color: #000;
    margin: 25px 0;
}

.cr-text { font-size: 24px; font-weight: normal; }
.onwards { font-size: 18px; font-weight: normal; }

.size-detail p {
    margin: 4px 0;
    color: #000;
    font-weight: 500;
}

.btn-wrap {
    margin-top: 30px;
    border-top: 1px solid #4a5d4e;
	border-bottom: 1px solid #4a5d4e;
    padding: 10px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.get-sheet-btn {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    letter-spacing: 1px;
}

/* Modal Styles */
.custom-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    align-items: center; justify-content: center;
}

.modal-content {
    background: #fff;
    padding: 25px;
    width: 95%;
    max-width: 90%;
    border-radius: 8px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.close-modal {
    position: absolute;
    right: 20px; top: 15px;
    font-size: 30px; cursor: pointer;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.price-table th, .price-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    font-size: 13px;
}
.enquiry-footer-container {
    display: flex;
    justify-content: center;
}

.enquiry-btn {
    background-color: #612d53; /* Dark purple color from image */
    color: #ffffff !important;
    text-decoration: none;
    font-size: 24px;
    font-weight: 500;
    padding: 20px 60px;
    border-radius: 15px; /* Rounded corners */
    display: inline-flex;
    align-items: center;
    gap: 15px;
    transition: background 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    font-family: sans-serif;
    width: 100%;
    max-width: 600px; /* Adjust based on preference */
    justify-content: center;
}

.enquiry-btn:hover {
    background-color: #4a3146; /* Slightly darker on hover */
}

.phone-icon {
    font-size: 28px;
    /* Optional: rotate it slightly to match the icon angle in image */
    transform: rotate(10deg);
}

/* Responsive adjustment for mobile */
@media (max-width: 600px) {
    .enquiry-btn {
        font-size: 20px;
        padding: 15px 30px;
    }
}
.row-head { font-weight: bold; background: #f9f4e8; }
.grax_tm_intro_content .demo_list ul li:last-child img{filter: blur(5px);}
.grax_tm_intro_fixed_price .pricing-info,
.grax_tm_intro_fixed_price .anim {text-decoration: none;
	color: #fff;
    font-family: "Montserrat";
    background-color: #e54b4b;
    position: fixed;
    font-size: 22px;
    text-align: center;
    z-index: 5;
    border-radius: 100%;
    height: 70px;
    width: 70px;
    line-height: 70px;
	display: inline-block;
	bottom: 80px;
    right: 50px;
		
	-webkit-transition: all 0.2s;
	   -moz-transition: all 0.2s;
	    -ms-transition: all 0.2s;
	     -o-transition: all 0.2s;
	        transition: all 0.2s;	
		
}

@-webkit-keyframes myAnimPrice {
    0% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: 0
    }
    50% {
        opacity: .3
    }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}

@keyframes myAnimPrice {
    0% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: 0
    }
    50% {
        opacity: .3
    }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}

.grax_tm_intro_fixed_price .anim:nth-child(1) {
    -webkit-animation: myAnimPrice 2s infinite;
    animation: myAnimPrice 2s infinite
}

.grax_tm_intro_fixed_price .anim:nth-child(2) {
    -webkit-animation: myAnimPrice 2s infinite .3s;
    animation: myAnimPrice 2s infinite .3s
}

.grax_tm_intro_fixed_price .anim:nth-child(3) {
    -webkit-animation: myAnimPrice 2s infinite .6s;
    animation: myAnimPrice 2s infinite .6s
}

/*---------------------------------------------------*/
/*	14) GRAX MEDIA QUERIES (FOR SMALL DEVIVES)
/*---------------------------------------------------*/

@media (max-width: 1400px) {
	.grax_tm_modalbox_news .box_inner{width: 900px;}
}
@media (max-width: 1200px) {
	.grax_tm_modalbox_news .box_inner{width: 100%;top: 0px;bottom: 0px;}
	.grax_tm_modalbox_news .close{position: absolute;top: 20px;left: auto;right: 20px;margin-left: 0px;}
	.grax_tm_modalbox_news .close .svg{color: #777;width: 25px;height: 25px;}
}
@media (max-width: 1040px) {
	#preloader{display: none;}
	.mouse-cursor{display: none;}
	.cursor-inner{display: none;}
	.cursor-inner.cursor-hover{display: none;}
	.cursor-outer{display: none;}
	.container{padding: 0px 20px;}
	.grax_tm_topbar{display: none;}
	.grax_tm_mobile_menu{display: block;}
	.grax_tm_hero .name{font-size: 55px;}
	.grax_tm_about .about_inner{display: block;}
	.grax_tm_about .left{padding-right: 0px;width: 100%;margin-bottom: 40px;}
	.grax_tm_about .right{padding-left: 0px;width: 100%;}
	.grax_tm_portfolio ul{margin-left: -20px;}
	.grax_tm_portfolio ul li{padding-left: 20px;margin-bottom: 20px;}
	.grax_tm_news .news_list ul{margin-left: -30px;}
	.grax_tm_news .news_list ul li{padding-left: 30px;margin-bottom: 30px;}
}
@media (max-width: 768px) {
	.grax_tm_title_holder h3{letter-spacing: 5px;}
	.grax_tm_hero .name{font-size: 45px;margin-bottom: 5px;}
	.grax_tm_hero .job{font-size: 17px;}
	.grax_tm_about .right .list ul{margin: 0px;}
	.grax_tm_about .right .list ul li{width: 100%;padding-left: 0px;}
	.grax_tm_about .left .text { padding-top: 140px;}
	.grax_tm_portfolio ul li{width: 50%;}
	.grax_tm_progress_part .part_inner{display: block;}
	.grax_tm_progress_part .left{width: 100%;padding-right: 0px;float: left;margin-bottom: 20px;}
	.grax_tm_progress_part .right{width: 100%;padding-left: 0px;}
	.grax_tm_talk .talk_inner{display: block;}
	.grax_tm_talk .text{padding-right: 0px;margin-bottom: 30px;}
	.grax_tm_news .news_list ul li{width: 50%;}
	.grax_tm_news .news_list ul li .details .date span{margin-left: 0px;}
	.grax_tm_news .news_list ul li .details .date span:before{display: none;}
	.grax_tm_contact .contact_inner{display: block;}
	.grax_tm_contact .left{width: 100%;margin-bottom: 20px;float: left;}
	.grax_tm_contact .right{width: 100%;padding-left: 0px;}
	.grax_tm_copyright .copyright_inner{display: block;}
	.grax_tm_copyright .logo{margin-bottom: 17px;}
	.grax_tm_copyright .social{margin-bottom: 10px;}
	.grax_tm_modalbox_news .details .title{font-size: 25px;}
	.grax_tm_modalbox_news .description_wrap{padding: 20px;}
	
	.grax_tm_intro_fixed_price{display: none;}
	.grax_tm_intro_content .title_holder h3{letter-spacing: 4px;}
	.grax_tm_intro_content .demo_list ul{margin: 0px;}
	.grax_tm_intro_content .demo_list ul li{width: 100%;padding-left: 0px;}
	.grax_tm_title_holder span
	{
		padding-left: 0;
		font-size: 35px;
	}
	.grax_tm_title_holder h3
	{
		line-height: 1.0;
	}
	.copy
	{
		text-align: right;
	}
	.btn-floor-plan {width: 80%; margin-top: 20px;}
}
@media (max-width: 768px) {
	.grax_tm_hero .name{font-size: 30px;}
	.grax_tm_hero .job{font-size: 15px;}
	.grax_tm_portfolio ul{margin: 0px;}
	.grax_tm_portfolio ul li{width: 100%;padding-left: 0px;}
	.grax_tm_news .news_list ul{margin: 0px;}
	.grax_tm_news .news_list ul li{width: 100%;padding-left: 0px;}
	.grax_tm_about 
	{
		padding-top: 10px;
		padding-bottom: 50px;
	}
	.grax_tm_about .left{
		padding-left: 0px;
	}
	.wht
	{
		font-size: 10px;
	}
	.grax_tm_title_holder1 h3 
	{
		font-size: 28px;
	}
	.mbt
	{
		margin-top: 20px;
	}
	.grax_tm_title_holder span
	{
		padding-left: 0;
		font-size: 28px;
	}
	.grax_tm_title_holder h3
	{
		line-height: 1.0;
	}
	.copy
	{
		text-align: right;
	}
	.grax_tm_hero .bg .image{
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-color: #000;
	}
	.grax_tm_hero{
		width: 100%;
		height: 80vh !important;
	}
	.bnrtxt_loc {font-size: 12px}
	.grax_tm_hero .details {top:55%}
	.grax_tm_news {padding: 0 20px}
}


.ms-3 {
    font-family: 'Noto Serif Semi Condensed'!important;
	font-weight: 900;
}

.icon-box {
	display: flex;                 /* Use Flexbox */
	flex-direction: column;       /* Arrange items in a column */
	justify-content: center;       /* Center items vertically */
	align-items: center;          /* Center items horizontally */
	height: 70px;                /* Set a fixed height for uniformity */
	border: 1px solid #c0b061;
	
}

.icon-box:hover {
	background-color: #c0b061;
}

.icon-box i {
	font-size: 3em; /* Icon size */
	color: #007bff; /* Icon color */
}

.icon-box h5 {
	margin-top: 15px;
	color: #f4eed1;
	font-family: 'Noto Serif Semi Condensed'!important;
	font-size: 40px;
}
.wht{
	font-family: 'Noto Serif Semi Condensed'!important;
}
.wht1
{
	color: #fff!important;
	font-family: 'Montserrat', sans-serif!important;
	font-size: 15px;
}
.second
{
	color: #fff!important;
	font-family: 'Montserrat', sans-serif!important;
	font-size: 15px;
	text-decoration: none;
	margin-bottom: 0;
}
.second a
{
	color: #fff!important;
	font-family: 'Montserrat', sans-serif!important;
	font-size: 15px;
	text-decoration: none;
}
.list_inner p
{
	margin-bottom: 15px !important;
}
.list_inner p a{
	text-decoration: none;
	color: #fff;
}


.icon-box1 {
	display: flex;                 /* Use Flexbox */
	flex-direction: column;       /* Arrange items in a column */
	justify-content: center;       /* Center items vertically */
	align-items: center;          /* Center items horizontally */
	
}
.kmre
{
	font-family: 'Montserrat', sans-serif!important;
	color: #ebe0a5;
	flex-direction: column;       /* Arrange items in a column */
	justify-content: center;       /* Center items vertically */
	align-items: center; 
	font-size: 20px;
	font-weight: 400;
	margin-top: 60px;
}
.kmre .enquire{
    padding: 20px 30px !important;
    margin-left: 15px;
    border: 1px solid #e54b4b;
    color: #fff !important;
    text-decoration: none;
    font-size: 16px;
}
.cty
{
	color: #a5a5a5;
	font-size: 40px;
	font-family: "Playfair Display", serif;
	text-align: center;
}

.zoom-container {
	overflow: hidden;
	position: relative;
}

.zoom-container img {
	width: 100%; /* Make the image responsive */
	transition: transform 0.4s ease; /* Smooth zoom transition */
	cursor: zoom-in; /* Cursor indicating zoom */
}

/* Increase the zoom level on hover */
.zoom-container img:hover {
	transform: scale(2); /* Zoom the image to twice its size on hover */
}

.carousel-caption {
	
		color: #ebe0a5;
	}

/* slider */
 /* Set custom colors for arrows and dots */

 /* Active dot color */
 .carousel-indicators .active {
	 background-color: #ebe0a5; /* Change to your desired active dot color */
 }
   /* Adjust image size */
   .carousel-item img {
	width: 60%;  /* Set the desired width */
	object-fit: cover; /* Ensure the image covers the area without distortion */
}




.gradient-title {
	position: relative;
	display: inline-block; /* To allow for the gradient effect */
	color: transparent; /* Make text transparent */
	-webkit-background-clip: text; /* Clip the background to the text */
	background-clip: text; /* Clip the background to the text */
}

.gradient-title::after {
	content: '';
	display: block;
	height: 2px; /* Height of the gradient line */
	width: 67%; /* Full width of the title */
	position: absolute;
	bottom: -5px; /* Distance from the text to the line */
	right: 0;
	border-radius: 2px; /* Rounded edges for the line */
}
.amenities-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-end; /* Aligns icons to the bottom baseline */
    flex-wrap: wrap;
    gap: 30px;
	padding-top: 40px;
}

.amenity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 120px;
    transition: transform 0.3s ease;
}

/* Optional hover effect */
.amenity-item:hover {
    transform: translateY(-5px);
}

.icon-wrapper {
    margin-bottom: 15px;
    height: 60px; /* Fixed height to keep icons aligned */
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrapper img {
    width: 50px; /* Adjust based on your icon size */
    height: auto;
    /* This filter can change black icons to the reddish-brown color if they are SVGs */
    /* filter: invert(32%) sepia(45%) saturate(765%) hue-rotate(315deg) brightness(93%) contrast(90%); */
}

.amenity-item span {
    font-size: 16px;
    color: #333;
    font-weight: 400;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .amenities-grid {
        justify-content: center;
    }
    .amenity-item {
        flex: 0 0 30%; /* Shows 3 per row on tablets */
    }
}

@media (max-width: 480px) {
    .amenity-item {
        flex: 0 0 45%; /* Shows 2 per row on small phones */
    }
}

.gradient-title1::after {
	content: '';
	display: block;
	height: 2px; /* Height of the gradient line */
	width: 40%; /* Full width of the title */
	position: absolute;
	bottom: -5px; /* Distance from the text to the line */
	right: 0;
	border-radius: 2px; /* Rounded edges for the line */
}




  .card-body
{
	height: 390px;
	border-radius: 0px!important;
	/* background-color: rgba(0, 0, 0, 1)!important; */
	border: 1px solid #000;
}

.card-body .card-text {
	font-family: 'Montserrat', sans-serif;
	color: #000 !important;
	text-align: left;
	font-size: 16px;
	line-height: 25px;
	height: 260px;  /* Fixed height for the text */
	overflow-y: auto
  }
  
  .card-body .card-text::-webkit-scrollbar {
	width: 2px;  /* Width of the scrollbar */
  }
  
  .card-body .card-text::-webkit-scrollbar-thumb {
	background-color: #888;  /* Scrollbar color */
	border-radius: 4px;  /* Rounded scrollbar */
  }
  
  .card-body .card-text::-webkit-scrollbar-track {
	background-color: #f1f1f1;  /* Track color */
  }

.card-body  .card {
	border-radius: 0px!important;
	background-color: transparent!important;
	padding: 20px;
  }
  .card-body .card-title {
	margin-top: 0px;
	color: #c42b2c!important;
	font-family: 'Montserrat', sans-serif;
	text-align: right;
	font-size: 16px;
	margin-bottom: 0px;
  }
  .card-body .card-subtitle {
	color: #c42b2c!important;
	text-align: right;
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
  }
  .card-body .review {
	text-align: right;
  }

  .card-body .text-warning
  {
	color: #ffc107!important;
	font-size: 10px;
  }

  .boxsch
  {
	 border: 1px solid #ebe0a5;
	 width: 200px;
	 text-align: center;
  }
  .boxsch a
  {
	color: #a5a5a5!important;
  }
  
.btn
{
	border: 1px solid #e54b4b;
    background-color: #e54b4b;
    padding: 10px 10px;
    color: #fff;
    transition: 0.5s ease !important;
    font-family: 'Montserrat', sans-serif;
	border-radius: unset;
	width: 100%;
}
.btn:hover
{
	 background-color: #c42b2c !important;
    color: #fff;
}
input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input
{
	background-color: rgba(171, 172, 173, 0.7)!important;
	border: 0;
	font-family: 'Montserrat', sans-serif;
}
input {
	color: #000!important; /* Change this color to your desired input text color */
}
::placeholder {
	color: #000!important; /* Change this color to your desired placeholder color */
	opacity: 0.5!important;
}
input::placeholder,
        textarea::placeholder {
            color: #000!important; /* Change this color to your desired placeholder color */
			opacity: 0.5!important;
        }

		
		
		.modal-content
		{
			box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
			border-radius: 0px;
			margin: 50px auto;
		}

		.form-control
		{
			background-color:rgba(64,66, 68, 0.7)!important;
		}
		.form-control:focus
		{
			color: #FFF;
		}

		.more-content {
            display: none;
        }
        
        
        
		/* today 	*/
.dropdown {
	position: relative;

}

.dropdown_inner {
	display: block;
	/* Hide the dropdown by default */
	position: absolute;
	/* Position it over the content */
	top: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	/* Background color for visibility */
	z-index: 1000;
	/* Ensure it's on top of other content */
}

.dropdown_inner.active {
	display: block;
	/* Show dropdown when active */
}

.video-wrapper {
    position: relative;
    width: 100%; /* Match your iframe width */
    height: auto; /* Match your iframe height */
    cursor: pointer;
    overflow: hidden;
}

.video-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Creating a simple CSS play button */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
}

.play-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent #fff;
}


/* Scrollbar Track */
::-webkit-scrollbar {
    width: 8px;  /* Width of the scrollbar */
    background-color: #323335;
}

/* Scrollbar Handle (Thumb) */
::-webkit-scrollbar-thumb {
    background-color: #c52929;  /* Bootstrap primary color */
    border-radius: 0px;  /* Rounded edges */
}

/* Scrollbar Handle Hover */
::-webkit-scrollbar-thumb:hover {
    background-color: #c52929;  /* Darker shade on hover */
}

/* Scrollbar Corner (for when there's both vertical and horizontal scrollbars) */
::-webkit-scrollbar-corner {
    background-color: transparent;
}
.dsr-consent-label {
    display: flex;
    align-items: center;
    font-weight: 300;
    font-size: 14px;
    color:#000;
    line-height:20px;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

.dsr-consent-label input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: #a64439; /* Colors the checkbox to match theme */
    flex-shrink: 0;
    margin-right: 6px;
}
#current-year,.copyright{
    font-size:12px;
}
.copyright_inner,.credai{
   font-family: 'Montserrat', sans-serif;
}
@media (max-width: 768px) {
    /* Reset all fixed widths to auto/100% */
    .about-content, 
    .location-content, 
    .amenities-grid,
    section {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 auto !important;
    }

    /* Fix the text stacking */
    h2, h1 {
        font-size: 1.5rem !important;
        line-height: 1;
    }

    /* Ensure images (like your map) don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Force the 2-column grid for amenities */
    .amenity-item.col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

.disclaimer-container{color: #fff !important;}
.disclaimer-container h4{font-family: 'Playfair Display', serif; color: #fff !important; font-size: 20px;}
.disclaimer-container p{font-family: 'Montserrat', sans-serif !important; font-size: 15px;}
/* =========================================================
   LOCATION ACCORDION
   Completely independent from Bootstrap
   ========================================================= */

/* =========================================================
   LOCATION ADVANTAGES ACCORDION
   ========================================================= */

/* =========================================================
   DSR THE COURTYARD - LOCATION ACCORDION
   Completely independent from Bootstrap
   ========================================================= */
/* =========================================================
   LOCATION ACCORDION
   Reference-style design
   ========================================================= */

#courtyardLocationAccordion {
    width: 100%;
    max-width: 100%;
    margin: 35px auto 0;
    position: relative;
    z-index: 20;
}


/* ---------------------------------------------------------
   ITEM
--------------------------------------------------------- */

#courtyardLocationAccordion .courtyard-location-item {
    width: 100%;
    margin-bottom: 24px;
}


/* ---------------------------------------------------------
   HEADER / BUTTON
--------------------------------------------------------- */

#courtyardLocationAccordion .courtyard-location-button {
    width: 100%;
    height: 88px;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 0 32px !important;
    margin: 0 !important;

    background: #ffffff !important;

    border: 1px solid #dfe3e8 !important;
    border-radius: 4px !important;

    color: #111827 !important;

    font-family: inherit !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;

    text-align: left !important;

    cursor: pointer !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* Remove Bootstrap's arrow */

#courtyardLocationAccordion
.courtyard-location-button::after {
    display: none !important;
    content: none !important;
}


/* Hover */

#courtyardLocationAccordion
.courtyard-location-button:hover {
    background: #ffffff !important;
    border-color: #cfd5dc !important;
}


/* ---------------------------------------------------------
   LEFT SIDE
--------------------------------------------------------- */

#courtyardLocationAccordion
.courtyard-location-title {
    display: flex !important;
    align-items: center !important;

    gap: 18px !important;

    min-width: 0;
}


/* ---------------------------------------------------------
   ICON
--------------------------------------------------------- */

#courtyardLocationAccordion
.courtyard-location-icon {
    width: 38px;
    min-width: 38px;

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

    font-size: 29px;
    line-height: 1;
}


/* ---------------------------------------------------------
   PLUS / MINUS
--------------------------------------------------------- */

#courtyardLocationAccordion
.courtyard-location-symbol {
    width: 34px;
    min-width: 34px;

    height: 34px;

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

    margin-left: 20px;

    color: #102d55;

    font-family: Arial, sans-serif;
    font-size: 35px;
    font-weight: 300;

    line-height: 1;

    transition: transform 0.25s ease;
}


/* ---------------------------------------------------------
   OPEN STATE
--------------------------------------------------------- */

#courtyardLocationAccordion
.courtyard-location-item.is-open
.courtyard-location-button {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;

    border-color: #dfe3e8 !important;
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

#courtyardLocationAccordion
.courtyard-location-panel {
    width: 100%;

    padding: 30px 40px 30px 70px;

    background: #ffffff;

    border-left: 1px solid #dfe3e8;
    border-right: 1px solid #dfe3e8;
    border-bottom: 1px solid #dfe3e8;

    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}


/* Hidden */

#courtyardLocationAccordion
.courtyard-location-panel[hidden] {
    display: none !important;
}


/* ---------------------------------------------------------
   LIST
--------------------------------------------------------- */

#courtyardLocationAccordion
.courtyard-location-panel ul {
    margin: 0 !important;

    padding: 0 0 0 25px !important;

    list-style: disc !important;
}


/* ---------------------------------------------------------
   LIST ITEM
--------------------------------------------------------- */

#courtyardLocationAccordion
.courtyard-location-panel li {
    margin: 0 0 16px 0 !important;

    padding: 0 !important;

    color: #252b35 !important;

    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 400 !important;

    line-height: 1.6 !important;

    letter-spacing: 0.5px;
}


#courtyardLocationAccordion
.courtyard-location-panel li:last-child {
    margin-bottom: 0 !important;
}


/* =========================================================
   DESKTOP LARGE
   ========================================================= */

@media (min-width: 1200px) {

    #courtyardLocationAccordion {
        max-width: 100%;
    }

    #courtyardLocationAccordion
    .courtyard-location-button {
        height: 88px;
        padding-left: 35px !important;
        padding-right: 35px !important;
    }

}


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

@media (max-width: 991px) {

    #courtyardLocationAccordion
    .courtyard-location-button {
        height: 75px;

        padding: 0 24px !important;

        font-size: 20px !important;
    }

    #courtyardLocationAccordion
    .courtyard-location-icon {
        width: 32px;
        min-width: 32px;
        font-size: 25px;
    }

    #courtyardLocationAccordion
    .courtyard-location-symbol {
        font-size: 30px;
    }

    #courtyardLocationAccordion
    .courtyard-location-panel {
        padding: 25px 30px 25px 55px;
    }

    #courtyardLocationAccordion
    .courtyard-location-panel li {
        font-size: 17px !important;
    }

}


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

@media (max-width: 767px) {

    #courtyardLocationAccordion {
        margin-top: 20px;
    }

    #courtyardLocationAccordion
    .courtyard-location-item {
        margin-bottom: 12px;
    }


    #courtyardLocationAccordion
    .courtyard-location-button {
        min-height: 62px;
        height: auto;

        padding: 14px 16px !important;

        font-size: 15px !important;

        letter-spacing: 0.5px !important;
    }


    #courtyardLocationAccordion
    .courtyard-location-title {
        gap: 10px !important;
    }


    #courtyardLocationAccordion
    .courtyard-location-icon {
        width: 27px;
        min-width: 27px;

        font-size: 21px;
    }


    #courtyardLocationAccordion
    .courtyard-location-symbol {
        width: 27px;
        min-width: 27px;

        height: 27px;

        margin-left: 10px;

        font-size: 27px;
    }


    #courtyardLocationAccordion
    .courtyard-location-panel {
        padding: 20px 18px 20px 38px;
    }


    #courtyardLocationAccordion
    .courtyard-location-panel ul {
        padding-left: 18px !important;
    }


    #courtyardLocationAccordion
    .courtyard-location-panel li {
        font-size: 14px !important;
        line-height: 1.5 !important;

        margin-bottom: 10px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    #courtyardLocationAccordion
    .courtyard-location-button {
        padding: 12px 13px !important;

        font-size: 13px !important;
    }

    #courtyardLocationAccordion
    .courtyard-location-icon {
        width: 24px;
        min-width: 24px;

        font-size: 18px;
    }

    #courtyardLocationAccordion
    .courtyard-location-symbol {
        font-size: 24px;
    }

    #courtyardLocationAccordion
    .courtyard-location-panel {
        padding-left: 32px;
    }

}