:root {
--trangp-font: "Saira", sans-serif;
--trang-font: "Saira", sans-serif;
--trangp-font2: "Figtree", sans-serif;
--trang-heading-font: "Readex Pro", sans-serif;
--trangp-heading-font: "Readex Pro", sans-serif;
--trangp-text-gray: #000;
--trangp-text-gray-rgb: 99, 99, 99;
--trangp-text-gray2: #3E3F43;
--trangp-text-gray2-rgb: 62, 63, 67;
--trangp-text: #92918F;
--trangp-text-rgb: 146, 145, 143;
--trangp-text2: #000;
--trang-text2: #000;
--trangp-text2-rgb: 94, 91, 91;
--trangp-base: #295174;
--tarang-base: #C69A5D;
--tarang-base2: #295174;
--tarang-base3: #1b354c;
--tarang-white: #FFFFFF;
--tarang-black: #222222;
--trangp-base-rgb: 215, 152, 78;
--trangp-black: #222222;
--trangp-black-rgb: 34, 34, 34;
--trangp-black2: #333333;
--trangp-black2-rgb: 51, 51, 51;
--trangp-black3: #151316;
--trangp-black3-rgb: 21, 19, 22;
--trangp-black4: #000000;
--trangp-black4-rgb: 0, 0, 0;
--trangp-black5: #1E1F24;
--trangp-black5-rgb: 30, 31, 36;
--trangp-white: #FFFFFF;
--trangp-white-rgb: 255, 255, 255;
--trangp-gray: #C7C7C7;
--trangp-gray-rgb: 199, 199, 199;
--trangp-gray2: #C0C0C0;
--trangp-gray2-rgb: 192, 192, 192;
--trangp-border-color: #dddddd;
--trangp-border-color-rgb: 221, 221, 221;
--section-space: 80px;
}
/*--------------------------------------------------------------
# Common
--------------------------------------------------------------*/
body {
font-family: var(--trang-font, "Saira", sans-serif);
font-family: var(--trang-heading-font, "Readex Pro", sans-serif);
color: var(--trangp-text, #92918F);
font-size: 16px;
line-height: 1.625;
font-weight: 400;
}
body.locked {
overflow: hidden;
}
a {
color: var(--tarang-base2, #295174);
transition: all 400ms ease;
}
a,
a:hover,
a:focus,
a:visited {
text-decoration: none;
}
::placeholder {
color: inherit;
opacity: 1;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--trang-heading-font, "Readex Pro", sans-serif);
color: var(--tarang-base3, #1b354c);
}
@media (max-width: 575px) {
h1 br,
h2 br,
h3 br,
h4 br,
h5 br,
h6 br {
display: none;
}
}
p {
color: var(--trang-text2, #000);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 162.5%;
}
@media (max-width: 575px) {
p br {
display: none;
}
}
::placeholder {
color: inherit;
opacity: 1;
}
.page-wrapper {
position: relative;
margin: 0 auto;
width: 100%;
min-width: 300px;
overflow: hidden;
}
.section-space {
padding-top: var(--section-space, 60px);
padding-bottom: var(--section-space, 60px);
}
@media (max-width: 767px) {
.section-space {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media (max-width: 575px) {
.section-space {
padding-top: 60px;
padding-bottom: 60px;
}
}
.section-space-top {
padding-top: var(--section-space, 120px);
}
@media (max-width: 767px) {
.section-space-top {
padding-top: 100px;
}
}
@media (max-width: 575px) {
.section-space-top {
padding-top: 80px;
}
}
.section-space-bottom {
padding-bottom: var(--section-space, 120px);
}
@media (max-width: 767px) {
.section-space-bottom {
padding-bottom: 100px;
}
}
@media (max-width: 575px) {
.section-space-bottom {
padding-bottom: 80px;
}
}
.section-space-100 {
padding-top: 100px;
padding-bottom: 100px;
}
@media (max-width: 767px) {
.section-space-100 {
padding-top: 100px;
padding-bottom: 100px;
}
}
@media (max-width: 575px) {
.section-space-100 {
padding-top: 80px;
padding-bottom: 80px;
}
}
.section-space-top-100 {
padding-top: 100px;
}
@media (max-width: 575px) {
.section-space-top-100 {
padding-top: 80px;
}
}
.section-space-bottom-100 {
padding-bottom: 100px;
}
@media (max-width: 575px) {
.section-space-bottom-100 {
padding-bottom: 80px;
}
}
.container-fluid,
.container {
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 1200px) {
.container {
max-width: 1200px;
}
}
.row {
--bs-gutter-x: 30px;
}
.gutter-y-10 {
--bs-gutter-y: 10px;
}
.gutter-y-15 {
--bs-gutter-y: 15px;
}
.gutter-y-20 {
--bs-gutter-y: 20px;
}
.gutter-x-20 {
--bs-gutter-x: 20px;
}
.gutter-x-40 {
--bs-gutter-x: 40px;
}
.gutter-x-50 {
--bs-gutter-x: 50px;
}
.gutter-y-30 {
--bs-gutter-y: 30px;
}
.gutter-y-40 {
--bs-gutter-y: 40px;
}
.gutter-y-50 {
--bs-gutter-y: 50px;
}
.gutter-y-60 {
--bs-gutter-y: 60px;
}
/*--------------------------------------------------------------
# Utility
--------------------------------------------------------------*/
.mt-20 {
margin-top: 20px;
}
.mt-30 {
margin-top: 30px;
}
.mt-40 {
margin-top: 40px;
}
.mt-50 {
margin-top: 50px;
}
.mt-60 {
margin-top: 60px;
}
.mt-80 {
margin-top: 80px;
}
.mt-120 {
margin-top: 120px;
}
.mt--60 {
margin-top: -60px;
}
.mt--120 {
margin-top: -120px;
}
.mb-20 {
margin-bottom: 20px;
}
.mb-30 {
margin-bottom: 30px;
}
.mb-40 {
margin-bottom: 40px;
}
.mb-50 {
margin-bottom: 50px;
}
.mb-60 {
margin-bottom: 60px;
}
.mb-80 {
margin-bottom: 80px;
}
.mb-120 {
margin-bottom: 120px;
}
.mb--60 {
margin-bottom: -60px;
}
.mb--120 {
margin-bottom: -120px;
}
.pt-20 {
padding-top: 20px;
}
.pt-30 {
padding-top: 30px;
}
.pt-40 {
padding-top: 40px;
}
.pt-50 {
padding-top: 50px;
}
.pt-60 {
padding-top: 60px;
}
.pt-80 {
padding-top: 80px;
}
.pt-100 {
padding-top: 100px;
}
.pt-110 {
padding-top: 110px;
}
.pt-115 {
padding-top: 115px;
}
.pt-120 {
padding-top: 120px;
}
.pt-142 {
padding-top: 142px;
}
.pb-20 {
padding-bottom: 20px;
}
.pb-30 {
padding-bottom: 30px;
}
.pb-40 {
padding-bottom: 40px;
}
.pb-50 {
padding-bottom: 50px;
}
.pb-60 {
padding-bottom: 60px;
}
.pb-80 {
padding-bottom: 80px;
}
.pb-90 {
padding-bottom: 90px;
}
.pb-100 {
padding-bottom: 100px;
}
.pb-110 {
padding-bottom: 110px;
}
.pb-115 {
padding-bottom: 115px;
}
.pb-120 {
padding-bottom: 120px;
}
.pl-5 {
padding-left: 5px;
}
.pl-10 {
padding-left: 10px;
}
.pl-15 {
padding-left: 15px;
}
.pl-20 {
padding-left: 20px;
}
.pl-30 {
padding-left: 30px;
}
.pr-5 {
padding-right: 5px;
}
.pr-10 {
padding-right: 10px;
}
.pr-15 {
padding-right: 15px;
}
.pr-20 {
padding-right: 20px;
}
.pr-30 {
padding-right: 30px;
}
.py-5 {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/
@keyframes messageMove {
0%, 100% {
transform: translateX(0);
}
25%, 75% {
transform: translateX(5px);
}
50% {
transform: translateX(10px);
}
}
@keyframes textRotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes shapeRotate {
0% {
transform: rotate(0);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(0);
}
}
@keyframes flowerRotate {
0%, 100% {
transform: rotate(0deg);
}
25%, 75% {
transform: rotate(5deg);
}
50% {
transform: rotate(10deg);
}
}
@keyframes zoomIn {
0% {
transform: scale(1.15);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1.15);
}
}
@keyframes zoomOut {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes moveBackground {
0% {
background-position: -1920px 100%;
}
100% {
background-position: 0 100%;
}
}
@keyframes wobble-horizontal-hover {
16.65% {
transform: translateX(5px);
}
33.3% {
transform: translateX(-3px);
}
49.95% {
transform: translateX(4px);
}
66.6% {
transform: translateX(-2px);
}
83.25% {
transform: translateX(1px);
}
100% {
transform: translateX(0);
}
}
@keyframes shine {
0% {
transform: skewX(-25deg) translateX(0);
}
100% {
transform: skewX(-25deg) translateX(250%);
}
}
.hover\:shine {
overflow: hidden;
position: relative;
z-index: 1;
}
.hover\:shine::before {
position: absolute;
content: "";
top: 0;
left: -140%;
bottom: 0;
width: 100%;
background-image: linear-gradient(to right, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
transform: skewX(-25deg);
transition: 0.5s ease;
z-index: 1;
}
.hover\:shine:is(:hover, :focus-within)::before {
animation: shine 1s ease forwards;
}
@keyframes textScrolling {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
@keyframes topToBottom {
0% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
@keyframes leftToright {
0% {
transform: translateX(0);
}
50% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
@keyframes border-zooming {
100% {
transform: scale(1);
opacity: 0;
}
}
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.main-header {
position: relative;
z-index: 999;
}
.main-header__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.main-header__inner {
padding: 0 20px;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--tarang-white, #FFFFFF);
}
@media (max-width: 1399px) {
.main-header__inner {
padding: 0px 20px;
}
}
@media (max-width: 1199px) {
.main-header__inner {
padding: 20px 0;
}
}
@media (max-width: 360px) {
.main-header__inner {
padding: 20px 0px;
}
}
@media (max-width: 375px) {
.main-header__logo {
margin-right: 20px;
}
}
.main-header__logo img {
max-width: 100%;
height: auto;
}
.logo-retina img {
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
@-webkit-keyframes pulse-animate {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
}
}
@keyframes pulse-animate {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
}
}
.main-header__right {
display: flex;
align-items: center;
justify-content: flex-end;
}
.main-header__nav {
margin-right: 30px;
}
@media (max-width: 1199px) {
.main-header__nav {
display: none;
}
}
.main-header__info {
display: flex;
align-items: center;
gap: 30px;
}
.main-header__info a {
font-size: 22px;
color: var(--tarang-black, #222222);
transition: all 500ms ease;
line-height: 1em;
position: relative;
z-index: 1;
}
@media (max-width: 575px) {
.main-header__info a:last-child {
display: none;
}
}
.main-header__info a:hover {
color: var(--tarang-base2, #295174);;
}
.main-header__info__number {
width: 21px;
height: 21px;
background-color: var(--tarang-base2, #295174);;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--tarang-white, #FFFFFF);
font-size: 10px;
font-style: normal;
font-weight: 700;
line-height: normal;
position: absolute;
top: -12px;
right: -12px;
}
.main-header__btn {
margin-left: 39px;
}
@media (min-width: 1200px) and (max-width: 1299px) {
.main-header__btn {
margin-left: 30px;
}
}
@media (max-width: 991px) {
.main-header__btn {
margin-left: 30px;
}
}
@media (max-width: 767px) {
.main-header__btn {
display: none;
}
}
.main-header__middle {
display: flex;
align-items: center;
}
.main-header__middle__right {
display: flex;
align-items: center;
}
.main-header__bottom {
position: relative;
z-index: 1;
}
.main-header__bottom::after {
content: "";
width: 72px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: var(--tarang-black, #222222);
}
.main-header__laptop-menu {
position: relative;
z-index: 1;
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--tarang-base2, #295174);;
font-size: 34px;
color: var(--tarang-white, #FFFFFF);
}
.main-header__laptop-menu::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--trangp-black3, #1E1F24);
z-index: -1;
transform: scale(0.1);
transition: all 0.4s ease-in-out;
visibility: hidden;
opacity: 0;
}
.main-header__laptop-menu:hover::before {
transform: scale(1);
visibility: visible;
opacity: 1;
}
.main-header__shape {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.main-header--one .mobile-nav__btn span {
background-color: var(--trangp-black5, #1E1F24);
}
@media (max-width: 1660px) {
.main-header--one .topbar::before,
.main-header--one .topbar::after,
.main-header--one .main-header__bottom::after,
.main-header--one .main-header__right,
.main-header--one .main-header__btn,
.main-header--one .main-header__shape {
display: none;
}
.main-header--one .topbar__inner {
margin-right: 0;
}
}
.main-header--two {
background-color: transparent;
}
.main-header--two .mobile-nav__btn span {
background-color: var(--trangp-black5, #1E1F24);
}
@media (min-width: 1737px) {
.main-header--two .container-fluid {
max-width: 1737px;
}
}
.main-header--two .main-header__inner {
margin-top: 40px;
border-radius: 100px;
background-color: var(--tarang-white, #FFFFFF);
margin-bottom: -160px;
padding: 0 30px;
}
.main-header--two .main-menu .main-menu__list > li {
padding-top: 25px;
padding-bottom: 25px;
}
.main-header--two .main-header__group-shape {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -40px;
display: flex;
gap: 15px;
align-items: center;
display: none;
}
.main-header--two .main-header__group-shape span {
width: 45px;
height: 40px;
display: block;
background-color: var(--tarang-base2, #295174);;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.main-header--two .main-header__group-shape span:nth-child(2) {
position: absolute;
transform: rotateX(180deg);
left: 30px;
}
.main-header--two .trangp-btn {
padding: 13.5px 26px;
}
@media (max-width: 1600px) {
.main-header--two .main-header__inner {
margin-top: 0px;
border-radius: 0px;
background-color: var(--tarang-white, #FFFFFF);
margin-bottom: 0px;
}
.main-header--two .main-header__btn,
.main-header--two .main-header__group-shape span {
display: none;
}
}
@media (max-width: 1199px) {
.main-header--two .main-header__inner {
padding: 10px 0;
}
}
.main-header--three {
background-color: transparent;
margin-bottom: -141px;
}
.main-header--three .main-header__inner {
background-color: transparent;
position: relative;
z-index: 2;
}
.main-header--three .main-header__left__call {
display: flex;
align-items: center;
gap: 10px;
}
.main-header--three .main-header__left__call i {
color: var(--tarang-white, #FFFFFF);
font-size: 20px;
}
.main-header--three .main-header__left__call a {
color: var(--tarang-white, #FFFFFF);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
transition: all 0.4s ease-in-out;
}
.main-header--three .main-header__left__call a:hover {
color: var(--tarang-base2, #295174);;
}
.main-header--three::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../images/shapes/header-shape-3-1.png);
background-repeat: no-repeat;
background-position: center center;
}
@media (max-width: 1750px) {
.main-header--three .main-menu .main-menu__list > li + li {
margin-left: 30px;
}
}
.main-header--three .main-header__info a,
.main-header--three .main-menu .main-menu__list > li > a {
color: var(--tarang-white, #FFFFFF);
}
.main-header--three .main-menu .main-menu__list > li > a::after {
background-color: var(--tarang-white, #FFFFFF);
}
.main-header--three .main-header__nav {
margin: 0;
}
.main-header--three .main-header__middle {
gap: 30px;
}
.main-header--three .main-header__middle-one {
display: flex;
}
@media (min-width: 1620px) {
.main-header--three .main-header__middle-one {
display: none;
}
}
.main-header--three .main-header__left .main-header__logo {
display: flex;
}
@media (min-width: 1620px) {
.main-header--three .main-header__left .main-header__logo {
display: none;
}
}
.main-header--three .main-header__info a:last-child {
display: flex;
}
@media (min-width: 1620px) {
.main-header--three .main-header__info a:last-child {
display: none;
}
}
@media (max-width: 475px) {
.main-header--three .main-header__info a:last-child {
display: none;
}
}
.main-header--three .main-header__middle-two {
display: none;
}
@media (min-width: 1620px) {
.main-header--three .main-header__middle-two {
display: flex;
}
}
@media (max-width: 1800px) {
.main-header--three .main-header__left__call {
display: none;
}
}
@media (max-width: 1550px) {
.main-header--three .main-header__btn {
display: none;
}
}
.main-header--five {
background-color: var(--tarang-black, #222222);
}
.main-header--five .main-header__inner {
background-color: transparent;
}
@media (min-width: 1200px) {
.main-header--five .container-fluid {
max-width: 1630px;
}
}
.main-header--five .main-menu .main-menu__list > li > a::after {
background-color: var(--tarang-white, #FFFFFF);
}
.main-header--five .main-menu .main-menu__list > li > a,
.main-header--five .main-header__info__item {
color: var(--tarang-white, #FFFFFF);
}
.main-header--five .main-menu .main-menu__list > li.megamenu > a::after, .main-header--five .main-menu .main-menu__list > li.dropdown > a::after {
color: var(--tarang-white, #FFFFFF);
}
.main-header--five .main-menu .main-menu__list > li {
padding-top: 55px;
padding-bottom: 55px;
}
@media (max-width: 1620px) {
.main-header--five .main-header__btn {
display: none;
}
}
.main-header--five .trangp-btn {
padding: 13.5px 26px;
}
/*Header style*/
.main-header--four .main-header__inner {
padding: 0px 50px;
border-radius: 0 0 20px 20px;
background-color: rgba(27, 53, 76, 0.8);
margin-bottom: -120px;
position: relative;
z-index: 1;
}
.main-header--four {
background-color: transparent;
}
@media (min-width: 1737px) {
.main-header--four .container-fluid {
max-width: 1740px;
}
}
.mobile-nav__btn {
width: 26px;
display: flex;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
cursor: pointer;
z-index: 3;
margin-left: 30px;
}
@media (min-width: 1200px) {
.mobile-nav__btn {
display: none;
}
}
.mobile-nav__btn span {
width: 100%;
height: 2px;
background-color: var(--tarang-white, #FFFFFF);
transition: all 500ms ease;
}
.mobile-nav__btn span:nth-child(2) {
margin-top: 5px;
margin-bottom: 5px;
}
.mobile-nav__btn:hover span {
background-color: var(--tarang-base2, #295174);;
}
.main-menu {
/* after third level no menu */
}
.main-menu .main-menu__list,
.main-menu .main-menu__list ul {
margin: 0;
padding: 0;
list-style-type: none;
align-items: center;
display: none;
}
@media (min-width: 1200px) {
.main-menu .main-menu__list,
.main-menu .main-menu__list ul {
display: flex;
}
}
.main-menu .main-menu__list > li {
position: relative;
padding-top: 48px;
padding-bottom: 48px;
}
.main-menu .main-menu__list > li.dropdown > a {
position: relative;
}
.main-menu .main-menu__list > li + li {
margin-left: 40px;
}
@media (max-width: 1399px) and (min-width: 1200px) {
.main-menu .main-menu__list > li + li {
margin-left: 20px;
}
}
.main-menu .main-menu__list > li > a {
position: relative;
display: flex;
align-items: center;
transition: all 500ms ease;
color: var(--trangp-black2, #333333);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 187.5%;
/*text-transform: uppercase;*/s
}
.main-menu .main-menu__list > li > a i {
font-size: 10px;
margin-left: 5px;
}
.main-menu .main-menu__list > li > a::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 3px;
background-color: var(--tarang-base, #D7984E);
transition: all 0.4s ease-in-out;
}
.main-menu .main-menu__list > li > a::after {
content: "";
position: absolute;
bottom: 0;
left: calc(60% + 5px);
width: 0%;
height: 3px;
background-color: var(--trangp-black2, #333333);
transition: all 0.4s ease-in-out;
}
.main-menu .main-menu__list > li.current > a::before,
.main-menu .main-menu__list > li:hover > a::before {
width: 60%;
}
.main-menu .main-menu__list > li.current > a::after,
.main-menu .main-menu__list > li:hover > a::after {
width: 10%;
}
.main-menu .main-menu__list li ul {
position: absolute;
top: 100%;
left: -25px;
min-width: 270px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
opacity: 0;
visibility: hidden;
transform-origin: top center;
transform: scaleY(0) translateZ(100px);
transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease;
z-index: 99;
background-color: var(--tarang-white, #FFFFFF);
box-shadow: 0px 10px 60px 0px RGBA(var(--trangp-white-rgb, 255, 255, 255), 0.07);
padding: 15px 20px 11px;
box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07);
}
.main-menu .main-menu__list li:hover > ul {
opacity: 1;
visibility: visible;
transform: scaleY(1) translateZ(0px);
}
.main-menu .main-menu__list > .megamenu {
position: static;
}
.main-menu .main-menu__list > .megamenu > ul {
top: 100% !important;
left: 0 !important;
right: 0 !important;
background-color: transparent;
box-shadow: none;
padding: 0;
}
.main-menu .main-menu__list li ul li {
flex: 1 1 100%;
width: 100%;
position: relative;
}
.main-menu .main-menu__list li ul li > a {
font-family: var(--trang-font, "Saira", sans-serif);
font-size: 16px;
line-height: 26px;
color: var(--tarang-black, #222222);
font-weight: 500;
display: flex;
text-transform: capitalize;
padding: 8px 15px;
transition: 400ms;
margin-bottom: 4px;
}
.main-menu .main-menu__list li ul li > a::after {
position: absolute;
right: 15px;
top: 8px;
border-radius: 0;
font-size: 6px;
font-weight: 700;
font-family: "Font Awesome 5 Free";
content: "\f45c";
color: var(--tarang-white, #FFFFFF);
visibility: hidden;
opacity: 0;
transition: all 500ms ease;
transform: scale(0);
}
.main-menu .main-menu__list li ul li.current > a,
.main-menu .main-menu__list li ul li:hover > a {
background-color: var(--tarang-base2, #295174);;
color: var(--tarang-white, #FFFFFF);
}
.main-menu .main-menu__list li ul li.current > a::after,
.main-menu .main-menu__list li ul li:hover > a::after {
visibility: visible;
opacity: 1;
transform: scale(1);
}
.main-menu .main-menu__list li ul li > ul {
top: 0;
left: calc(100% + 20px);
}
.main-menu .main-menu__list li ul li > ul.right-align {
top: 0;
left: auto;
right: 100%;
}
.main-menu .main-menu__list li ul li > ul ul {
display: none;
}
@media (min-width: 1200px) and (max-width: 1400px) {
.main-menu__list li:nth-last-child(1) ul li > ul,
.main-menu__list li:nth-last-child(2) ul li > ul {
left: auto;
right: calc(100% + 20px);
}
}
.main-header--four .main-menu .main-menu__list > li > a,
.main-header--four .main-header__info a {
color: var(--tarang-white, #FFFFFF);
}
.main-header--four .main-menu .main-menu__list > li.megamenu > a::after, .main-header--four .main-menu .main-menu__list > li.dropdown > a::after {
background-color: var(--tarang-white, #FFFFFF);
}
.main-header--four .main-menu .main-menu__list > li {
padding-top: 22px;
padding-bottom: 22px;
}
.main-header--four .trangp-btn {
padding: 13.5px 25px;
}
.main-header--four .trangp-btn::before {
background-color: var(--tarang-white, #FFFFFF);
}
.main-header--four .trangp-btn:hover {
color: var(--tarang-base2, #295174);;
}
.main-header--four .trangp-btn:hover::after {
background-color: var(--tarang-base2, #295174);;
}
.sticky-header--cloned {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
top: 0;
background-color: var(--tarang-white, #FFFFFF);
transform: translateY(-100%);
box-shadow: 0px 3px 18px rgba(var(--trangp-black-rgb, 34, 34, 34), 0.07);
transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
visibility: hidden;
transition: transform 500ms ease, visibility 500ms ease;
}
.sticky-header--cloned.active {
transform: translateY(0%);
visibility: visible;
}
.sticky-header--cloned.main-header--one .main-header__shape,
.sticky-header--cloned.main-header--one .topbar {
display: none;
}
.sticky-header--cloned.main-header--two {
background-color: var(--tarang-white, #FFFFFF);
}
.sticky-header--cloned.main-header--two .main-header__inner {
margin-top: 0;
margin-bottom: 0;
border-radius: 0;
}
.sticky-header--cloned.main-header--three {
background-color: var(--trangp-black3, #1E1F24);
border-bottom: 1px solid rgba(var(--trangp-border-color-rgb, 221, 221, 221), 0.3);
}
.sticky-header--cloned.main-header--three::after {
display: none;
}
.sticky-header--cloned.main-header--three .main-header__inner {
background-color: var(--trangp-black3, #1E1F24);
}
.sticky-header--cloned.main-header--four {
background-color: #1b354c;
}
.sticky-header--cloned.main-header--four .main-header__inner {
border-radius: 0;
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
.sticky-header--cloned.main-header--four .topbar-two {
display: none;
}
/* section title */
.sec-title {
margin-bottom: 20px;
}
.sec-title__top {
display: flex;
align-items: center;
margin-bottom: 13px;
gap: 13px;
position: relative;
z-index: 1;
}
.sec-title__tagline {
text-align: center;
color: var(--tarang-base2, #295174);
font-size: 23px;
font-style: normal;
font-weight: 600;
line-height: normal;
align-items: center;
text-transform: math-auto;
position: relative;
z-index: 1;
margin-bottom: 0;
}
.sec-title .line-left {
width: 25px;
display: inline-block;
position: relative;
}
.sec-title .line-left::after {
content: "";
position: absolute;
background-color: var(--tarang-base2, #295174);
width: 15px;
height: 3px;
top: 50%;
right: 0px;
transform: translateY(-50%) rotate(90deg);
transition: transform 0.3s ease-in-out;
flex-shrink: 0;
}
.sec-title .line-left::before {
content: "";
position: absolute;
background-color: var(--tarang-base2, #295174);
width: 20px;
height: 3px;
top: 50%;
left: -2px;
transform: translateY(-50%);
transition: transform 0.3s ease-in-out;
flex-shrink: 0;
}
.sec-title .line-right {
width: 25px;
display: inline-block;
position: relative;
}
.sec-title .line-right::after {
content: "";
position: absolute;
background-color: var(--tarang-base2, #295174);
width: 15px;
height: 3px;
top: 50%;
left: 0;
transform: translateY(-50%) rotate(90deg);
transition: transform 0.3s ease-in-out;
flex-shrink: 0;
}
.sec-title .line-right::before {
content: "";
position: absolute;
background-color: var(--tarang-base2, #295174);
width: 20px;
height: 3px;
top: 50%;
right: -2px;
transform: translateY(-50%);
transition: transform 0.3s ease-in-out;
flex-shrink: 0;
}
.sec-title__title {
margin: 0;
color: var(--tarang-base3, #1b354c);
font-family: var(--trang-heading-font, "Readex Pro", sans-serif);
font-size: 35px;
font-style: normal;
font-weight: 600;
line-height: 128.571%;
}
/*Slider style*/
.main-slider-two {
position: relative;
background-color: #fff;
overflow: hidden;
z-index: 1;
padding-bottom: 120px;
}
.main-slider-two__item {
position: relative;
height: 100vh;
display: flex;
align-items: center;
min-height: 600px;
}
.main-slider-two__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: -1; /* keep bg behind content */
}
.main-slider-two__content {
padding-top: 150px;
position: relative;
z-index: 1; /* content overlay ke upar dikhai de */
color: #fff;
}
.main-slider-two__bg::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2); /* black with 50% transparency */
z-index: 0;
}
.main-slider-two__bg {
animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
0% { opacity: 0; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}
.main-slider-two__title {
font-size: 80px;
font-weight: 600;
color: #fff;
line-height: 80px;
text-transform: capitalize;
}
.trand__social {
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items: center;
border-top: 1px solid #36383A;
border-bottom: 1px solid #36383A;
transition: transform 1200ms ease, opacity 1200ms ease;
}
.trand__social a {
height: 50px;
width: 45px;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #36383A;
color: var(--tarang-white, #FFFFFF);
background-color: transparent;
}
.trand__social a:last-child {
border-right: 1px solid #36383A;
}
.trand__social a:hover {
background-color: var(--tarang-base2, #295174);
color: var(--tarang-white, #FFFFFF);
border-color: var(--tarang-base2, #295174);
}
.slider-form-wrapper {
position: absolute;
bottom: -56px; /* bottom se distance */
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 1100px;
}
.slider-form {
background-color: rgba(27, 53, 76, 0.95); /* blue with transparency */
padding: 30px;
border-radius: 12px;
display: flex;
gap: 10px;
}
.slider-form .form-control {
flex: 1;
min-width: 200px;
padding: 12px 15px;
border: none;
border-radius: 6px;
font-size: 14px;
}
.slider-form .btn-submit {
background-color: #D7984E;
border: none;
padding: 12px 20px;
border-radius: 6px;
font-weight: 600;
color: #fff;
cursor: pointer;
transition: background 0.3s ease;
}
.slider-form .btn-submit:hover {
background-color: #b97a36;
}
/*About us*/
.about-two {
position: relative;
z-index: 1;
background-color: var(--tarang-white, #FFFFFF);
}
.about-two__thumb {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.about-two__content {
position: relative;
z-index: 1;
margin: 120px 0px;
}
.about-two__content::after {
content: "";
position: absolute;
top: -45px;
left: -58px;
background-color: var(--tarang-white, #FFFFFF);
right: 0;
bottom: -45px;
z-index: -1;
border-radius: 50px 0 0 50px;
}
.about-two__content .sec-title {
margin-bottom: 16px;
}
.about-two__list {
margin: 0;
display: inline-flex;
align-items: center;
border: 1px solid var(--trangp-border-color, #dddddd);
}
.about-two__list__item {
padding: 8px 30px;
font-family: var(--trang-heading-font, "Readex Pro", sans-serif);
display: flex;
align-items: center;
gap: 14px;
background-color: transparent;
transition: all 0.4s ease-in-out;
color: var(--trangp-black2, #333333);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
}
.about-two__list__item i {
font-size: 36px;
color: var(--tarang-base2, #295174);
transition: all 0.4s ease-in-out;
}
.about-two__list li {
margin: 4px;
position: relative;
z-index: 1;
}
.about-two__list li:hover .about-two__list__item {
background-color: var(--tarang-base2, #295174);
color: var(--tarang-white, #FFFFFF);
}
.about-two__list li:hover .about-two__list__item i {
color: var(--tarang-white, #FFFFFF);
}
.about-two__list li + li::after {
content: "";
position: absolute;
top: -4px;
left: -4px;
width: 1px;
bottom: -4px;
background-color: var(--trangp-border-color, #dddddd);
}
.about-two__text + .about-two__list {
margin-top: 20px;
margin-bottom: 20px;
}
.about-two__text {
margin: 0;
}
.about-two__text a {
color: var(--tarang-base2, #295174);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 26px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
}
.about-two__funfact__list {
margin-bottom: 0;
display: flex;
justify-content: space-between;
gap: 40px;
}
.about-two__funfact__item {
width: 25%;
flex: 25%;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 30px 35px;
overflow: hidden;
position: relative;
z-index: 1;
}
.about-two__funfact__item::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--tarang-base2, #295174);
z-index: -1;
transform: rotateX(90deg) rotateY(-40deg);
transition: all 0.4s ease-in-out;
}
.about-two__funfact__item--two {
border: none;
display: flex;
align-items: center;
justify-content: center;
}
.about-two__funfact__item--two::after {
display: none;
}
.about-two__funfact__item:hover .about-two__funfact__card__icon i {
animation: wobble-horizontal-hover 1s ease-in-out 1;
}
.about-two__funfact__item:hover::after {
transform: rotateX(0deg) rotateY(0deg);
}
.about-two__funfact__card {
text-align: center;
}
.about-two__funfact__card__text {
color: var(--tarang-white, #FFFFFF);
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%;
margin: 0;
}
.about-two__happy-client {
display: flex;
align-items: center;
gap: 15px;
background-color: #F6F7F8;
padding: 55px 0 55px 110px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
@media (max-width: 1700px) and (min-width: 1200px) {
.about-two__happy-client {
display: none;
}
}
@media (max-width: 1199px) {
.about-two__happy-client {
position: relative;
z-index: 1;
}
}
@media (max-width: 575px) {
.about-two__happy-client {
padding: 20px 20px;
}
}
@media (max-width: 475px) {
.about-two__happy-client {
flex-direction: column;
}
}
.about-two__happy-client__thumb {
display: flex;
align-items: center;
}
.about-two__happy-client__thumb__item {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid var(--tarang-white, #FFFFFF);
overflow: hidden;
position: relative;
z-index: 1;
}
.about-two__happy-client__thumb__item img {
object-fit: cover;
width: 100%;
}
.about-two__happy-client__thumb__item a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--trangp-black3-rgb, 30, 31, 36), 0.7);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: var(--tarang-white, #FFFFFF);
visibility: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
}
.about-two__happy-client__thumb__item:hover a {
visibility: visible;
opacity: 1;
}
.about-two__happy-client__thumb__item + .about-two__happy-client__thumb__item {
margin-left: -20px;
}
.about-two__happy-client__star {
display: flex;
align-items: center;
}
.about-two__happy-client__star i {
color: var(--tarang-base2, #295174);
font-size: 16px;
}
.about-two__happy-client__star span {
color: var(--trangp-black3, #1E1F24);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 187.5%;
margin: 0;
display: block;
}
.about-two__shape {
position: absolute;
bottom: 40%;
right: 0;
}
.about-two__shape img {
animation: messageMove 4s ease-in-out infinite;
}
.house-solituions {
background-color: transparent;
border: 1px dashed var(--tarang-white, #FFFFFF);
width: 184px;
height: 184px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
}
.house-solituions__icon {
width: 96px;
height: 96px;
border-radius: 50%;
background-color: var(--tarang-base2, #295174);
display: flex;
align-items: center;
justify-content: center;
}
.house-solituions__icon i {
color: var(--tarang-white, #FFFFFF);
font-size: 40px;
transform: rotate(45deg);
}
.house-solituions img {
object-fit: cover;
position: absolute;
top: 10px;
left: 10px;
animation: textRotate 10s ease-in-out infinite;
}
.about-two__happy-client {
display: flex;
align-items: center;
gap: 15px;
background-color: #F6F7F8;
padding: 40px 0 41px 70px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.about-two__happy-client__title {
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 35px;
margin-bottom: 5px;
color: #295174;
max-width: 553px;
}
.house-solituions__icon {
width: 96px;
height: 96px;
border-radius: 50%;
background-color: #fff;
display: flex
;
align-items: center;
justify-content: center;
}
.house-solituions__icon img {
transform: rotate(0deg) !important;
animation: none;
margin-top: 57px;
text-align: center;
margin-left: 41px;
}
.about-two__funfact {
max-width: 1275px;
width: 100%;
margin-left: auto;
margin-right: 0;
background-color: var(--tarang-base2, #295174);
padding: 42px;
border: 20px solid var(--tarang-white, #FFFFFF);
border-bottom: none;
border-right: none;
position: relative;
z-index: 1;
}
.about-two__funfact__card__icon {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
font-size: 50px;
color: #D7984E;
}
.about-two__funfact__item:hover .about-two__funfact__card__icon {
background-color: #D7984E;
color: #FFFFFF;
}
.about-two__funfact__card__count {
display: flex
;
align-items: center;
justify-content: center;
color: var(--tarang-white, #FFFFFF);
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: 100%;
letter-spacing: 1px;
margin-bottom: 18px;
text-transform: uppercase;
}
.contact-two .sec-title__tagline {
text-align: center;
color: #D7984E;
font-size: 23px;
font-style: normal;
font-weight: 600;
line-height: normal;
align-items: center;
text-transform: math-auto;
position: relative;
z-index: 1;
margin-bottom: 0;
}
.contact-two .sec-title .line-left::after {
content: "";
position: absolute;
background-color: #D7984E;
width: 15px;
height: 3px;
top: 50%;
right: 0px;
transform: translateY(-50%) rotate(90deg);
transition: transform 0.3s ease-in-out;
flex-shrink: 0;
}
.contact-two .sec-title .line-left::before {
content: "";
position: absolute;
background-color:#D7984E;
width: 20px;
height: 3px;
top: 50%;
left: -2px;
transform: translateY(-50%);
transition: transform 0.3s ease-in-out;
flex-shrink: 0;
}
/*--------------------------------------------------------------
# Page Header
--------------------------------------------------------------*/
.page-header {
position: relative;
padding-top: 280px;
padding-bottom: 120px;
background-color: var(--trangp-black2, #333333);
}
.page-header__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.page-header__bg::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(0 0 0 / 50%);
}
.page-header .container {
position: relative;
z-index: 1;
}
.page-header__content {
text-align: center;
}
.page-header__title {
font-size: 60px;
font-weight: 600;
color: #fff;
line-height: 80px;
}
.page-header p{
font-family: var(--trangp-font2, "Figtree", sans-serif);
color: var(--tarang-white, #FFFFFF);
font-size: 30px;
font-style: normal;
}
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about-images {
position: relative;
display: flex;
gap: 20px;
align-items: flex-end;
}
.about-images img {
border-radius: 15px;
width: 100%;
height: auto;
object-fit: cover;
}
.img-left {
flex: 1;
}
.img-right {
flex: 1;
position: relative;
}
.experience-badge {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
background: #c49a5d;
color: #fff;
font-weight: 700;
padding: 10px 25px;
border-radius: 10px;
text-align: center;
font-size: 28px;
line-height: 1.2;
z-index: 9;
width: max-content;
}
.experience-badge small {
display: block;
font-weight: 400;
font-size: 14px;
}
.about-content h2 {
font-weight: 700;
margin: 15px 0;
}
.about-content p {
margin-bottom: 15px;
line-height: 1.7;
}
@media(max-width: 992px) {
.about-images {
flex-direction: column;
align-items: center;
}
.img-left, .img-right {
width: 100%;
}
.experience-badge {
top: -30px;
left: 50%;
}
}
/* Section Background */
.visit-rays {
background: linear-gradient(to right, #d6e7f2 0%, #f7e2cc 100%);
}
/* Links */
.visit-rays p strong{
color: var(--tarang-base2, #295174);
}
/* List */
.visit-rays ul li {
margin-bottom: 8px;
font-size: 16px;
color: #000;
font-weight: 400;
}
.visit-rays ul li.check-item {
position: relative;
padding-left: 25px; /* Space for the check icon */
}
.visit-rays ul li.check-item::before {
content: '\2714';
font-size: 20px;
position: absolute;
left: 0;
top: 0;
/*color: green; */
}
/* Paragraph */
.visit-rays p {
font-size: 16px;
color: #333;
line-height: 1.6;
}
/* Image Container */
.visit-rays .position-relative {
max-width: 400px;
}
/* Button on Image */
.visit-rays .btn {
background-color: #a67c52;
border: none;
font-weight: 600;
font-size: 14px;
border-radius: 6px;
}
.visit-rays .btn:hover {
background-color: #8a633f;
color: #fff;
}
.visitraysbtn{
width: max-content;
}
/* Section Background */
.key-features {
background: #fff;
}
/* Feature Box */
.feature-box {
background: #F6F7F8;
border: 1px solid #F6F7F8;
transition: all 0.3s ease;
position: relative;
}
.feature-box:hover {
transform: translateY(-8px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
/* Feature Icon Styling */
.feature-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #fff;
transition: 0.3s;
background-color: var(--tarang-base2, #295174);
}
.feature-box:hover .feature-icon {
transform: scale(1.1);
}
/* Color Variants */
/*.feature-icon.green {
background: #28a745;
}
.feature-icon.orange {
background: #fd7e14;
}
.feature-icon.blue {
background: #007bff;
}
.feature-icon.purple {
background: #6f42c1;
}*/
/*--------------------------------------------------------------
# Room
--------------------------------------------------------------*/
.tabs-box .tabs-content .tab:not(.active-tab) {
display: none;
}
.room-one {
position: relative;
z-index: 1;
background-color: #F2F3F5;
}
.room-one__list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
width: 100%;
margin-bottom: 0;
}
.room-one__list li {
border-radius: 15px;
background: var(--tarang-white, #FFFFFF);
padding: 15px 10px 15px 20px;
width: 100%;
display: flex;
align-items: center;
justify-content: start;
color: var(--trangp-black4, #000000);
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
/*text-transform: uppercase;*/
transition: all 0.4s ease-in-out;
cursor: pointer;
}
@media (max-width: 1199px) and (min-width: 992px) {
.room-one__list li {
font-size: 18px;
}
}
.room-one__list li span {
display: block;
}
.room-one__list li i {
font-size: 45px;
color: var(--tarang-base2, #295174);
padding-right: 20px;
margin-right: 20px;
border-right: 1px solid var(--trangp-border-color, #dddddd);
transition: all 0.4s ease-in-out;
}
@media (max-width: 1199px) and (min-width: 992px) {
.room-one__list li i {
font-size: 25px;
}
}
.room-one__list li + li {
margin-top: 30px;
}
.room-one__list__item {
position: relative;
z-index: 1;
}
.room-one__list__item__shape {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
background: transparent;
overflow: hidden;
z-index: -1;
}
.room-one__list__item__shape::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 100%;
background-color: var(--tarang-base2, #295174);
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: top center;
mask-position: top center;
-webkit-mask-size: auto;
mask-size: auto;
}
.room-one__list__item__shape::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
z-index: -1;
background-color: var(--tarang-base2, #295174);
transition: all 0.4s ease-in-out;
transform: translateX(100%);
}
.room-one__list__item.active-btn, .room-one__list__item:hover {
color: var(--tarang-white, #FFFFFF);
background-color: var(--tarang-base, #D7984E);
}
.room-one__list__item.active-btn i, .room-one__list__item:hover i {
color: var(--tarang-white, #FFFFFF);
border-color: var(--tarang-white, #FFFFFF);
}
.room-one__list__item.active-btn .room-one__list__item__shape::before, .room-one__list__item:hover .room-one__list__item__shape::before {
transform: translateX(0);
}
.room-one__content {
position: relative;
z-index: 1;
}
.room-one__content img {
object-fit: cover;
width: 100%;
}
.room-one__content__title {
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
}
.tabcontent{
width: 60%;
padding: 20px;
position: absolute;
bottom: 30px;
right: 30px;
padding-left: 20px;
background-color: var(--trangp-white);
border-radius: 16px;
}
/* Why Choose Us List */
.tp_why_choose_list {
list-style: none;
padding: 0;
margin: 0;
}
.tp_why_choose_list li {
position: relative;
padding: 0px 0px 10px 50px;
margin-bottom: 20px;
border-bottom: 1px solid #eeeeee75;
border-radius: 8px;
/* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05); */
transition: all 0.3s ease;
font-size: 15px;
line-height: 1.6;
color: #fff;
}
.tp_why_choose_list li:hover {
transform: translateY(-3px);
/*box-shadow: 0 6px 12px rgba(0,0,0,0.08);*/
/*border-color: #f39c12;*/
}
.tp_why_choose_list li i {
position: absolute;
top: 14px;
left: 18px;
transform: translateY(-50%);
font-size: 20px;
color: #f39c12;
/*background: #fff;*/
border-radius: 50%;
padding: 4px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.tp_why_choose_list li b {
display: block;
margin-bottom: 6px;
font-size: 16px;
color: var(--tarang-base, #D7984E);
}
/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials-five {
position: relative;
}
.testimonials-five .testimonials-five__thumb__item {
position: relative;
display: inline-flex;
}
.testimonials-five__carousel .slick-dots {
margin-top: 10px !important;
justify-content: start !important;
}
.testimonials-five__item__top {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 20px;
}
.testimonials-five__item__top span {
color: var(--tarang-base2, #295174);
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: 136.364%;
display: block;
}
@media (max-width: 575px) {
.testimonials-five__item__top span {
font-size: 16px;
}
}
.testimonials-five__item__star {
border-radius: 100px;
background-color: var(--trangp-black3, #1E1F24);
display: flex;
align-items: center;
color: var(--tarang-white, #FFFFFF);
letter-spacing: 8px;
font-size: 22px;
padding: 10px 20px;
}
@media (max-width: 575px) {
.testimonials-five__item__star {
font-size: 16px;
}
}
.testimonials-five__item__text {
color: #535353;
font-size: 28px;
font-style: normal;
font-weight: 400;
line-height: 40px;
margin-bottom: 30px;
}
@media (max-width: 1199px) and (min-width: 992px), (max-width: 767px) {
.testimonials-five__item__text {
font-size: 20px;
}
}
.testimonials-five__item__text i {
color: var(--tarang-base2, #295174);
}
.testimonials-five__item__bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
.testimonials-five__item__name {
color: var(--trangp-black2, #333333);
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 113.636%;
text-transform: capitalize;
margin-bottom: 5px;
}
.testimonials-five__item__dec {
color: #636363;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 162.5%;
margin: 0;
}
.testimonials-five__item__quite {
font-size: 70px;
color: var(--tarang-base2, #295174);
line-height: 1;
}
.testimonials-five__thumb__box {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 991px) {
.testimonials-five__thumb__box {
display: none;
}
}
.testimonials-five__thumb__box .slick-vertical .slick-slide {
width: 118px;
height: 121px;
text-align: center;
border: 0 solid transparent;
}
.testimonials-five__thumb__box .slick-current + .slick-active .testimonials-five__thumb__item {
position: relative;
margin-top: -30px;
z-index: 2;
border-radius: 10px;
padding: 10px;
background-color: var(--tarang-base2, #295174);
}
.testimonials-five__thumb__box .slick-current + .slick-active .testimonials-five__thumb__item img {
width: 200px;
height: 160px;
}
.testimonials-five__thumb__item img {
border-radius: 10px;
object-fit: cover;
width: 118px;
height: 121px;
}
.testimonials-five__thumb__shape {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.testimonials-five__thumb__shape img {
animation: rotate 10s ease-in-out infinite;
}
/*--------------------------------------------------------------
# Project Details Head
--------------------------------------------------------------*/
.page-header.project-details-head {
padding-bottom: 0;
}
.project-details-head .page-header__title{
text-align: left;
font-size: 48px;
font-weight: 600;
color: #fff;
line-height: 58px;
}
.project-details-head .row {
--bs-gutter-x: 100px;
}
.project-details-head p{
text-align: left;
font-size: 22px;
font-weight: bold;
}
.headright {
border-radius: 12px 12px 0 0;
border-bottom: 6px solid #c49a5d;
}
.headright h5{
font-size: 18px;
}
.headright img{
background-color: #eee;
padding: 10px;
width: 60px;
height: 60px;
}
.headrighttext{
text-align: left;
}
.headright .btn h5{
color: #fff;
}
.headright .btn{
background-color: #1B354C;
}
.headright .btn span{
font-size: 1.25rem;
color: #EDA035;
font-weight: bold;
}
/* Trang button */
.trand-btn {
position: relative;
display: inline-flex;
align-items: center;
vertical-align: middle;
-webkit-appearance: none;
border-radius: 6px;
border: none;
outline: none !important;
background-color: var(--tarang-base, #D7984E);
z-index: 1;
color: var(--tarang-white, #FFFFFF);
font-size: 16px;
padding: 10px 29px;
font-style: normal;
font-weight: 500;
line-height: normal;
overflow: hidden;
transition: 500ms;
}
.trand-btn::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--tarang-black, #222222);
z-index: -1;
transition: all 500ms ease;
transform: translateX(-100%);
z-index: -1;
}
.trand-btn::after {
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
left: 5px;
background-color: var(--tarang-black, #222222);
z-index: -1;
transition: all 500ms ease;
clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.trand-btn i {
margin-left: 8px;
}
.trand-btn:hover::after {
background-color: var(--tarang-white, #FFFFFF);
}
.trand-btn:hover::before {
transform: translateX(0%);
}
.trand-btn:hover .trand-btn__text span {
animation: slideRight 500ms;
}
.btn-outline-light.download {
border-width: 2px; /* thicker border like the screenshot */
font-weight: 600; /* bolder text */
padding: 0.6rem 1.4rem; /* adjust for nice proportions */
font-size: 16px;
padding: 10px 29px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.btn-outline-light.download .icon-info-circle {
font-size: 1.1rem; /* tweak icon size */
line-height: 1; /* center vertically */
}
/* List */
ul.rayslist li {
margin-bottom: 8px;
font-size: 16px;
color: var(--tarang-base3, #1b354c);
font-weight: 400;
}
ul.rayslist li.check-item {
position: relative;
padding-left: 25px;
font-size: 18px;
font-weight: 500;
}
ul.rayslist li.check-item::before {
content: '\2714';
font-size: 20px;
position: absolute;
left: 0;
top: 0;
/*color: green;*/
}
/*tran-properties-amenities*/
.tran-properties-amenities{
background-color: #1B354C;
}
.tran-properties-amenities .apartment-five__card__image{
margin-bottom: 0px;
}
.tran-properties-amenities .owl-carousel .owl-item img{
min-height: 280px;
max-height: 280px;
}
/*******
* apartment Five
*******/
.apartment-five {
position: relative;
z-index: 1;
overflow: hidden;
}
.apartment-five--two {
background-color: #F6F7F8;
}
.apartment-five__image {
position: relative;
z-index: 1;
overflow: hidden;
border: 5px solid var(--trangp-white, #FFFFFF);
}
.apartment-five__image img {
object-fit: cover;
width: 100%;
transition: all 0.4s ease-in-out;
transform: scale(1) rotate(0deg);
}
.apartment-five__content {
padding: 1px 30px 30px;
position: relative;
background-color: rgba(var(--trangp-base-rgb, 215, 152, 78), 0.9);
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
z-index: 1;
transition: all 0.4s ease-in-out;
transform: translateY(160%);
}
@media (max-width: 1650px) and (min-width: 991px) {
.apartment-five__content {
padding: 1px 20px 20px;
}
}
.apartment-five__content::after {
content: "";
position: absolute;
height: 90px;
width: 100px;
position: absolute;
top: -90px;
right: 0;
background-color: rgba(var(--trangp-base-rgb, 215, 152, 78), 0.9);
clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.apartment-five__price {
color: var(--trangp-black, #222222);
font-size: 30px;
font-style: normal;
font-weight: 600;
line-height: 83.333%;
text-transform: capitalize;
border-radius: 10px;
background: var(--trangp-white, #FFFFFF);
margin-top: -28px;
padding: 16.5px 20px;
position: absolute;
}
.apartment-five__price::after {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
background-color: transparent;
border: 1px solid var(--trangp-base, #D7984E);
border-radius: 10px;
}
.apartment-five__title {
margin-top: 50px;
color: var(--trangp-white, #FFFFFF);
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 113.636%;
text-transform: capitalize;
margin-bottom: 20px;
}
.apartment-five__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.apartment-five__title a:hover {
background-size: 100% 1px;
}
.apartment-five__house-info {
display: flex;
align-items: center;
border-top: 1px solid var(--trangp-white, #FFFFFF);
border-bottom: 1px solid var(--trangp-white, #FFFFFF);
margin: 0;
display: flex;
margin-bottom: 12px;
align-items: center;
justify-content: start;
}
.apartment-five__house-info li {
padding-top: 15px;
padding-bottom: 15px;
color: var(--trangp-white, #FFFFFF);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
margin: 0;
display: flex;
align-items: center;
gap: 9px;
}
@media (max-width: 1650px) {
.apartment-five__house-info li {
padding-top: 8px;
padding-bottom: 8px;
}
}
@media (max-width: 1199px) and (min-width: 991px), (max-width: 400px) {
.apartment-five__house-info li {
font-size: 14px;
}
}
.apartment-five__house-info li i,
.apartment-five__house-info li span {
line-height: normal;
}
.apartment-five__house-info li + li {
margin-left: 30px;
padding-left: 30px;
border-left: 1px solid var(--trangp-white, #FFFFFF);
}
@media (max-width: 1650px) {
.apartment-five__house-info li + li {
padding-left: 10px;
margin-left: 10px;
}
}
.apartment-five__text {
color: var(--trangp-white, #FFFFFF);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 162.5%;
margin: 0;
}
.apartment-five:hover .apartment-five__image img {
transform: scale(1.1) rotate(5deg);
}
.apartment-five:hover .apartment-five__content {
transform: translateY(0%);
}
.apartment-five__carousel .owl-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 50px;
}
.apartment-five__carousel .owl-dots .owl-dot {
width: 40px;
height: 7px;
display: block;
border-radius: 50%;
background-color: var(--trangp-white, #FFFFFF);
border: 1px solid #9C9C9C;
border-radius: 20px;
position: relative;
padding: 0;
outline: none;
margin: 0;
transition: all 500ms ease-in-out;
}
.apartment-five__carousel .owl-dots .owl-dot span {
display: none;
}
.apartment-five__carousel .owl-dots .owl-dot:hover, .apartment-five__carousel .owl-dots .owl-dot.active {
background-color: var(--trangp-base, #D7984E);
height: 10px;
border-color: var(--trangp-base, #D7984E);
}
.apartment-five__carousel .owl-dots .owl-dot.active {
width: 65px;
}
.apartment-five__carousel .owl-dots.disabled {
display: none;
}
.apartment-five__carousel .owl-nav.disabled + .owl-dots {
margin-top: 45px;
}
.apartment-five__card {
position: relative;
z-index: 1;
background-color: var(--trangp-white, #FFFFFF);
padding: 10px;
border-radius: 10px;
}
.apartment-five__card::after {
content: "";
width: 100%;
height: 159px;
position: absolute;
bottom: 0;
left: 0;
background-color: var(--trangp-base, #D7984E);
border-radius: 10px;
z-index: -2;
transform: translateY(-100px);
transition: all 0.4s ease-in-out;
opacity: 0;
visibility: hidden;
}
.apartment-five__card__image {
overflow: hidden;
position: relative;
border-radius: 10px;
margin-bottom: 10px;
}
.apartment-five__card__image img {
object-fit: cover;
width: 100%;
transform: scale(1);
transition: all 0.4s ease-in-out;
}
.apartment-five__card .heart {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--trangp-base, #D7984E);
font-size: 18px;
background-color: var(--trangp-white, #FFFFFF);
position: absolute;
bottom: 20px;
right: 20px;
}
.apartment-five__card .heart:hover {
background-color: var(--trangp-base, #D7984E);
color: var(--trangp-white, #FFFFFF);
}
.apartment-five__card__populer {
display: flex;
align-items: center;
gap: 10px;
position: absolute;
top: 20px;
left: 20px;
}
.apartment-five__card__populer .popular,
.apartment-five__card__populer .new {
color: #000;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
margin: 0;
padding: 1px 10px;
border-radius: 4px;
text-transform: uppercase;
background-color: var(--trangp-white, #FFFFFF);
}
.apartment-five__card__populer .popular {
background-color: var(--trangp-base, #D7984E);
color: var(--trangp-white, #FFFFFF);
}
.apartment-five__card__list {
display: flex;
align-items: center;
padding: 14px 25px;
background-color: var(--trangp-base, #D7984E);
border-radius: 0 0 10px 10px;
margin: 0;
border-bottom: 1px solid transparent;
transition: all 0.4s ease-in-out;
}
@media (max-width: 991px) and (min-width: 768px), (max-width: 400px) {
.apartment-five__card__list {
padding: 10px 15px;
}
}
.apartment-five__card__list__item {
display: flex;
align-items: center;
gap: 9px;
color: var(--trangp-white, #FFFFFF);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
}
.apartment-five__card__list__item + .apartment-five__card__list__item {
margin-left: 15px;
padding-left: 15px;
border-left: 1px solid rgba(255, 255, 255, 0.5);
}
.apartment-five__card__content {
transition: all 0.4s ease-in-out;
position: relative;
z-index: 1;
}
.apartment-five__card__content__inner {
padding: 20px;
position: relative;
overflow: hidden;
border-radius: 10px;
}
@media (max-width: 991px) and (min-width: 768px), (max-width: 400px) {
.apartment-five__card__content__inner {
padding: 20px 10px;
}
}
.apartment-five__card__content__inner::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 48px;
height: 48px;
background-color: var(--trangp-black, #222222);
clip-path: polygon(0 100%, 100% 100%, 100% 0);
}
.apartment-five__card__title {
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 113.636%;
text-transform: capitalize;
margin-bottom: 16px;
}
@media (max-width: 991px) and (min-width: 768px), (max-width: 400px) {
.apartment-five__card__title {
font-size: 20px;
}
}
.apartment-five__card__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.apartment-five__card__title a:hover {
background-size: 100% 1px;
}
.apartment-five__card__price {
color: var(--trangp-black2, #333333);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
margin-bottom: 16px;
transition: all 0.4s ease-in-out;
}
.apartment-five__card__price span {
text-transform: capitalize;
color: var(--trangp-base, #D7984E);
}
.apartment-five__card__tag a {
color: #636363;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 162.5%;
margin: 0;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.4s ease-in-out;
}
.apartment-five__card__tag a i {
transform: rotateY(180deg);
color: var(--trangp-base, #D7984E);
}
.apartment-five__card__tag a + a {
margin-top: 6px;
}
.apartment-five__card:hover::after {
transform: translateY(0px);
opacity: 1;
visibility: visible;
}
.apartment-five__card:hover .apartment-five__card__image img {
transform: scale(1.1);
}
.apartment-five__card:hover .apartment-five__card__list {
border-radius: 0;
border-color: #78797C;
background-color: var(--trangp-black, #222222);
}
.apartment-five__card:hover .apartment-five__card__content {
background-color: var(--trangp-black, #222222);
border-radius: 0 0 10px 10px;
}
.apartment-five__card:hover .apartment-five__card__tag a,
.apartment-five__card:hover .apartment-five__card__price,
.apartment-five__card:hover .apartment-five__card__title {
color: var(--trangp-white, #FFFFFF);
}
/*******
* apartment Five
*******/
.location-section {
position: relative;
padding: 0px !important;
overflow: hidden;
}
.location-section .map-responsive {
width: inherit;
top: 0;
position: absolute;
left: 0;
padding-right: 50px;
}
.location-content{
padding: 80px 0;
min-height: 450px;
}
.trand1-2{
background-color: #1B354C;
}
.trand1-2 .left-content-box{
height: 100%;
}
.trand1-2 .left-content-box .room-one__content{
height: 100%;
border-radius: 16px;
overflow: hidden;
}
.trand1-2 .left-content-box .room-one__content img {
object-fit: cover;
width: 100%;
height: 100%;
}
.trand1-2 .left-content-box .boxcontent {
width: 75%;
padding: 20px;
position: absolute;
bottom: 30px;
left: 30px;
padding-left: 20px;
background-color: #2D3A4F;
border-radius: 16px;
}
.trand1-2 .left-content-box .boxcontent h4,
.trand1-2 .left-content-box .boxcontent p,
.trand1-2 .left-content-box .boxcontent ul.rayslist li{
color: #fff;
}
.trand1-2 .left-content-box .boxcontent p,
.trand1-2 .left-content-box .boxcontent ul.rayslist li{
font-size: 16px;
font-weight: normal;
}
.trand1-2 .right-col .content-box{
background-color: #E7C873;
padding: 30px;
border-radius: 16px;
margin-top: 15px;
}
.trand1-2 .imgslider{
border-radius: 16px;
overflow: hidden;
}
.trand1-2 .imgslider img{
border-radius: 16px;
min-height: 300px;
max-height: 300px;
object-fit: cover;
}
/* Owl Carousel Nav Buttons */
.trand1-2 .imgslider .owl-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
pointer-events: none; /* Arrow ke alawa click pass ho */
z-index: 10;
}
.trand1-2 .imgslider .owl-nav button {
background-color: #757F6B;
color: #fff;
border: none;
padding: 1px 15px !important;
pointer-events: all;
cursor: pointer;
border-radius: 50px;
line-height: 33px;
font-size: 18px;
transition: background 0.3s, transform 0.3s;
}
.trand1-2 .imgslider .owl-nav button:hover {
background-color: rgba(0, 0, 0, 0.8);
transform: scale(1.1);
}
/* Arrow icons (default) */
.trand1-2 .imgslider .owl-nav .owl-prev:before,
.trand1-2 .imgslider .owl-nav .owl-next:before {
font-family: 'FontAwesome';
font-size: 20px;
color: #fff;
}
/* Optional: Position arrows outside */
.trand1-2 .imgslider .owl-nav .owl-prev {
left: -25px; /* Adjust according to your layout */
}
.trand1-2 .imgslider .owl-nav .owl-next {
right: -25px; /* Adjust according to your layout */
}
.trand1-2 .imgslider .owl-carousel .owl-nav button:first-child {
transform: rotate(180deg);
}
/* Tran USP */
.trang-usp .usp-card{
text-align: center;
padding: 15px;
transition: all 0.3s ease;
position: relative;
border-radius: 16px;
}
.row.gutter-y-30 > div:nth-child(2) .usp-card {
/*background: #E7C873;
color: #000;
transform: translateY(-12px);
box-shadow: 0 8px 18px rgba(0,0,0,0.2);*/
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.trang-usp .icon-box img {
height: 60px;
width: auto;
margin-bottom: 25px;
}
.trang-usp .usp-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
/*Why buy now*/
.whybuynow {
padding: 180px 0 !important;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
margin-bottom: 40px;
}
.whybuynow::after {
content: "";
position: absolute;
inset: 0;
background-color: rgba(30, 31, 36, 0.2);
}
.whybuynow .container {
position: relative;
z-index: 1;
}
/* Common box styling */
.whybuynow .boxcontent {
padding: 30px;
border-radius: 16px;
flex: 1; /* equal height for both */
}
/* Left box (default) */
.whybuynow .row > div:nth-child(1) .boxcontent {
background-color: var(--tarang-base3, #1b354c);
color: #fff;
}
.whybuynow .row > div:nth-child(1) .boxcontent h3,
.whybuynow .row > div:nth-child(1) .boxcontent p,
.whybuynow .row > div:nth-child(1) .boxcontent li {
color: #fff;
}
/* Right box (second) */
.whybuynow .row > div:nth-child(2) .boxcontent {
background: #E7C873;
color: #000;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.whybuynow .row > div:nth-child(2) .boxcontent h3,
.whybuynow .row > div:nth-child(2) .boxcontent p,
.whybuynow .row > div:nth-child(2) .boxcontent li {
color: #000;
}
/* Equal height fix */
.whybuynow .row.full-height {
display: flex;
align-items: stretch;
}
.whybuynow .row.full-height > .col-md-6 {
display: flex;
}
/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.service-card {
position: relative;
z-index: 1;
border-radius: 16px;
background-color: #F6F7F8;
padding: 50px 20px 40px;
transition: all 0.4s ease-in-out;
}
@media (max-width: 1199px) and (min-width: 992px) {
.service-card {
padding: 30px 15px 20px;
}
}
.service-card__icon-box {
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--tarang-white, #FFFFFF);
font-size: 45px;
color: var(--tarang-base2, #295174);;
margin-left: auto;
margin-right: auto;
margin-bottom: 25px;
transition: all 0.4s ease-in-out;
}
@media (max-width: 1199px) and (min-width: 992px) {
.service-card__icon-box {
font-size: 30px;
width: 70px;
height: 70px;
}
}
.service-card__content {
text-align: center;
}
.service-card__title {
color: var(--trangp-black4, #000000);
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 113.636%;
text-transform: capitalize;
margin-bottom: 8px;
}
.service-card__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.service-card__title a:hover {
background-size: 100% 1px;
}
.service-card__text {
color: var(--trangp-text-gray, #636363);
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 162.5%;
margin-bottom: 17px;
transition: all 0.4s ease-in-out;
}
.service-card__link {
color: #444;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 175%;
margin: 0;
transition: all 0.4s ease-in-out;
}
.service-card__link i {
margin-left: 8px;
color: var(--tarang-base2, #295174);;
transition: all 0.4s ease-in-out;
}
.service-card__link:hover {
color: var(--tarang-base2, #295174);;
}
.service-card__link:hover i {
color: var(--tarang-black, #222222);
}
.service-card__shape {
overflow: hidden;
border: 1px solid #DDD;
position: absolute;
top: 6px;
left: 6px;
bottom: 6px;
right: 6px;
border-radius: 16px;
background-color: transparent;
z-index: -1;
transition: all 0.4s ease-in-out;
}
.service-card__shape::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 57px;
height: 57px;
background-color: var(--tarang-base2, #295174);;
clip-path: polygon(0 0, 0% 100%, 100% 0);
transition: all 0.4s ease-in-out;
}
.service-card__image img {
object-fit: cover;
width: 100%;
border-radius: 16px;
}
.service-card:hover {
background-color: #ddd;
}
.service-card:hover .service-card__shape {
background-color: var(--tarang-base2, #295174);;
border-color: #ddd;
}
.service-card:hover .service-card__shape::after {
background-color: var(--tarang-white, #FFFFFF);
}
.service-card:hover .service-card__title,
.service-card:hover .service-card__link,
.service-card:hover .service-card__link i,
.service-card:hover .service-card__text {
color: var(--tarang-white, #FFFFFF);
}
.service-card:hover .service-card__icon {
animation: wobble-horizontal-hover 1s ease-in-out 1;
}
/*Our Best Service*/
.services-three .row.gutter-y-30 {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.services-three .row.gutter-y-30 > [class*="col-"] {
display: flex;
}
.services-three .service-card,
.services-three .service-card__image {
flex: 1;
display: flex;
flex-direction: column;
}
.service-card__image img {
height: 315px;
}
.apartment-two__inner .row {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.apartment-two__inner .col-lg-6 {
display: flex;
flex-direction: column;
}
.apartment-two__thumb {
flex: 1;
display: flex;
}
.apartment-two__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.about-images {
display: flex;
gap: 20px;
height: 100%;
}
.about-images .img-left {
flex: 1;
display: flex;
}
.about-images .img-left img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.about-images .img-right {
display: flex;
flex-direction: column;
justify-content: flex-end;
max-width: 220px; /* adjust size as needed */
}
/* Badge ko alag block banado upar */
.about-images .img-right .experience-badge {
position: relative; /* absolute hata diya */
margin-bottom: 10px; /* image se gap */
background: #E7C873;
color: #000;
font-weight: bold;
padding: 12px 18px;
border-radius: 50px;
text-align: center;
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
z-index: 2;
}
/* Second image */
.about-images .img-right .hover\:shine img {
width: 100%;
height: auto;
border-radius: 12px;
}
@media (max-width: 991px) {
.about-images {
flex-direction: column; /* vertical stack */
}
/* Left image normal width */
.about-images .img-left {
width: 100%;
height: auto;
margin-bottom: 20px; /* gap between image and content */
}
/* Right image content (badge + image) image ke baad */
.about-images .img-right {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
order: 2; /* left image ke baad */
}
/* Badge upar image ke sath */
.about-images .img-right .experience-badge {
margin-bottom: 10px;
margin-top: 0;
position: relative;
}
/* Second image */
.about-images .img-right .hover\:shine img {
width: 100%;
height: auto;
border-radius: 12px;
}
.about-images .img-right {
display: none;
}
}
/*--------------------------------------------------------------
# Faq
--------------------------------------------------------------*/
/*******
* Faqs One
*******/
.apartment-two {
position: relative;
z-index: 1;
background-color: #F6F7F8;
}
.apartment-two__inner {
position: relative;
background-color: var(--tarang-white, #FFFFFF);
border-radius: 30px;
padding: 18px 18px;
}
.apartment-two__thumb img {
object-fit: cover;
width: 100%;
border-radius: 30px;
}
.apartment-two__content {
position: relative;
counter-reset: FAQ;
z-index: 1;
}
.apartment-two__content .accordion {
border-radius: 30px;
background-color: var(--tarang-base3, #1b354c);
}
.apartment-two__content .accordion + .accordion {
margin-top: 30px;
}
.apartment-two__content .accordion-title {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
border-radius: 30px;
padding-right: 7px;
background: #F6F7F8;
}
.apartment-two__content .accordion-title__number {
cursor: pointer;
width: 62px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background-color: var(--trangp-base, #D7984E);
border: 1px solid var(--trangp-base, #D7984E);
border-radius: 30px 0px 0px 30px;
transition: all 500ms ease;
}
@media (max-width: 375px) {
.apartment-two__content .accordion-title__number {
display: none;
}
}
.apartment-two__content .accordion-title__number::after {
content: "0" counter(FAQ) ".";
counter-increment: FAQ;
transition: all 500ms ease;
color: var(--tarang-white, #FFFFFF);
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
}
.apartment-two__content .accordion-title h4 {
margin: 0;
display: flex;
align-items: center;
gap: 16px;
color: var(--trangp-black, #222222);
transition: all 500ms ease;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
@media (max-width: 430px) {
.apartment-two__content .accordion-title h4 {
font-size: 16px;
padding-left: 0px;
}
}
@media (max-width: 375px) {
.apartment-two__content .accordion-title h4 {
padding-left: 10px;
}
}
.apartment-two__content .accordion-title__icon {
max-width: 48px;
width: 100%;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: var(--tarang-white, #FFFFFF);
border-radius: 50%;
transform: rotateX(-190deg);
transition: all 500ms ease;
color: var(--trangp-base, #D7984E);
}
.apartment-two__content .active .accordion-title__number {
background-color: var(--tarang-base3, #1b354c);
border-color: var(--tarang-white, #FFFFFF);
}
.apartment-two__content .active .accordion-title {
background-color: var(--tarang-base2, #295174);
}
.apartment-two__content .active .accordion-title h4 {
color: var(--trang-white, #FFFFFF);
}
.apartment-two__content .active .accordion-title__icon {
transform: rotateX(0);
}
.apartment-two__content .accordion-content {
padding: 13px 27px 30px 40px;
}
@media (max-width: 425px) {
.apartment-two__content .accordion-content {
padding: 13px 18px 20px 20px;
}
}
.apartment-two__content .accordion-content p {
color: var(--tarang-white, #FFFFFF);
line-height: normal;s
margin-bottom: 10px;
}
.apartment-two__content .accordion-content .accordion-list {
margin: 0;
display: flex;
align-items: center;
max-width: 290px;
border-top: 1px solid #78797C;
padding-top: 10px;
}
.apartment-two__content .accordion-content .accordion-list__item {
color: var(--tarang-white, #FFFFFF);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
display: flex;
align-items: center;
gap: 6px;
}
@media (max-width: 375px) {
.apartment-two__content .accordion-content .accordion-list__item {
font-size: 12px;
}
}
.apartment-two__content .accordion-content .accordion-list li + li {
padding-left: 12px;
margin-left: 12px;
border-left: 1px solid #78797C;
}
/*******
* Proparty Value
*******/
.proparty-value {
position: relative;
counter-reset: proparty;
}
.proparty-value__item {
position: relative;
z-index: 1;
padding: 10px 9px 1px;
}
.proparty-value__item:hover .proparty-value__box::after {
background-color: var(--trangp-base, #D7984E);
transform: rotate(0deg);
}
.proparty-value__item:hover .proparty-value__box::before {
transform: translateY(0%);
}
.proparty-value__item:hover .proparty-value__title {
color: var(--tarang-white, #FFFFFF);
}
.proparty-value__item:hover .proparty-value__text {
color: var(--tarang-white, #FFFFFF);
}
.proparty-value__item:hover .proparty-value__number {
background-color: var(--trangp-base, #D7984E);
color: var(--tarang-white, #FFFFFF);
}
.proparty-value__item:hover .proparty-value__image img {
transform: scale(1.1);
}
.proparty-value__image {
margin-bottom: 30px;
overflow: hidden;
border-radius: 50%;
border: 10px solid var(--tarang-white, #FFFFFF);
}
.proparty-value__image img {
object-fit: cover;
width: 100%;
border-radius: 50%;
transform: scale(1);
transition: all 0.4s ease-in-out;
}
.proparty-value__box {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #F6F7F8;
z-index: -1;
border-radius: 1000px 1000px 0 0;
clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
}
.proparty-value__box::after {
content: "";
width: 110%;
height: 150px;
transform: rotate(-13.954deg);
position: absolute;
top: -20px;
left: -25px;
background-color: var(--tarang-base3, #1b354c);
transition: all 0.4s ease-in-out;
}
.proparty-value__box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--tarang-base3, #1b354c);
z-index: -1;
transform: translateY(-100%);
transition: all 0.4s ease-in-out;
}
.proparty-value__title {
color: var(--trangp-black2, #333333);
text-align: center;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 113.636%;
text-transform: capitalize;
margin-bottom: 10px;
}
@media (max-width: 767px) and (min-width: 575px) {
.proparty-value__title {
font-size: 18px;
}
}
.proparty-value__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.proparty-value__title a:hover {
background-size: 100% 1px;
}
.proparty-value__text {
text-align: center;
margin-bottom: 20px;
transition: all 0.4s ease-in-out;
}
@media (max-width: 767px) and (min-width: 576px) {
.proparty-value__text {
font-size: 14px;
}
}
@media (max-width: 575px) {
.proparty-value__text {
margin-bottom: 40px;
}
}
.proparty-value__content {
padding-left: 15px;
padding-right: 15px;
}
.proparty-value__number {
margin-bottom: -20px;
width: 44px;
height: 44px;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--tarang-base3, #1b354c);
transition: all 0.4s ease-in-out;
}
.proparty-value__number::after {
content: "0" counter(proparty);
counter-increment: proparty;
transition: all 500ms ease;
color: var(--tarang-white, #FFFFFF);
font-style: normal;
font-size: 16px;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
}
/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact-page::after {
display: none;
}
.contact-page .contact-four__bottom {
padding-bottom: 0;
}
.contact-page .contact-four__call__text {
color: var(--trangp-black, #222222);
font-size: 35px;
font-style: normal;
font-weight: 600;
line-height: 142.857%;
}
.contact-page .contact-four__call__icon {
width: 100px;
height: 100px;
background-color: var(--trangp-base, #D7984E);
position: relative;
z-index: 1;
}
.contact-page .contact-four__call__icon::after {
content: "";
position: absolute;
top: 6px;
left: 6px;
bottom: 6px;
right: 6px;
background-color: var(--tarang-white, #FFFFFF);
border-radius: 50%;
z-index: -2;
transition: all 0.4s ease-in-out;
}
.contact-page .contact-four__call__icon::before {
content: "";
position: absolute;
top: 6px;
left: 6px;
bottom: 6px;
right: 6px;
border: 2px dashed var(--trangp-base, #D7984E);
border-radius: 50%;
background-color: transparent;
z-index: -1;
animation: rotate 14s linear infinite;
}
.contact-page .contact-four__call:hover .contact-four__call__icon {
color: var(--tarang-white, #FFFFFF);
}
.contact-page .contact-four__call:hover .contact-four__call__icon::after {
background-color: var(--trangp-base, #D7984E);
}
.contact-page .contact-four__call:hover .contact-four__call__icon::before {
border-color: var(--tarang-white, #FFFFFF);
}
.contact-two {
position: relative;
z-index: 1;
padding-top: 150px !important;
margin-top: 111px;
}
@media (max-width: 575px) {
.contact-two {
background-color: var(--tarang-base2, #1b3546);
padding-top: 80px;
margin-top: 80px;
}
}
.contact-two__bg {
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url(../images/shapes/bg-shape.png);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom left;
z-index: -1;
}
@media (max-width: 575px) {
.contact-two__bg {
display: none;
}
}
.contact-two .sec-title {
margin-bottom: 20px;
}
.contact-two .sec-title .sec-title__title {
color: var(--tarang-white, #FFFFFF);
}
.contact-two__text {
color: var(--tarang-white, #FFFFFF);
margin-bottom: 20px;
}
.contact-two__list {
margin-bottom: 35px;
display: flex;
align-items: center;
gap: 20px;
}
@media (max-width: 575px) {
.contact-two__list {
flex-direction: column;
justify-content: start;
align-items: start;
}
}
.contact-two__list li {
display: flex;
align-items: center;
color: var(--tarang-white, #FFFFFF);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 162.5%;
gap: 8px;
transition: all 0.4s ease-in-out;
cursor: pointer;
}
.contact-two__list li span {
color: inherit;
display: block;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.contact-two__list li span:hover {
background-size: 100% 1px;
}
.contact-two__list li:hover {
color: var(--trangp-base, #D7984E);
}
.contact-two__btn .trangp-btn::before {
background-color: var(--tarang-white, #FFFFFF);
}
.contact-two__btn .trangp-btn:hover {
color: var(--tarang-base3, #1b354c);
}
.contact-two__btn .trangp-btn:hover::after {
background-color: var(--tarang-base3, #1b354c);
}
.contact-two__image {
position: absolute;
bottom: 0;
}
@media (max-width: 1199px) {
.contact-two__image {
display: none;
}
}
.contact-two__image img {
animation: leftToright 4s ease-in-out infinite;
}
@media (max-width: 1600px) {
.contact-two__image img {
object-fit: cover;
width: 100%;
}
}
.contact-two__image__title {
display: block;
color: var(--trand-white, #FFFFFF);
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 5px;
}
.contact-two__image__link {
color: var(--trand-white, #FFFFFF);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.contact-two__contact-box {
display: flex;
align-items: center;
gap: 15px;
position: absolute;
bottom: 9%;
right: 0;
width: 37%;
background-color: var(--tarang-base2, #295174);
border-radius: 100px;
padding: 10px;
}
.contact-two__icon {
max-width: 66px;
width: 100%;
height: 66px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--tarang-base3, #1b354c);
color: var(--trang-white, #FFFFFF);
border: 2px solid var(--trang-white, #FFFFFF);
font-size: 30px;
}
.contact-two__shape-one {
position: absolute;
bottom: 0;
right: 7%;
z-index: -1;
}
@media (max-width: 1199px) {
.contact-two__shape-one {
display: none;
}
}
.contact-two__shape-two {
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
@media (max-width: 575px) {
.contact-two__shape-two {
display: none;
}
}
.contact-two__shape-two img {
animation: rotate 25s ease-in-out infinite;
}
.contact-four {
position: relative;
z-index: 1;
}
.contact-four::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 775px;
background-color: var(--trangp-black4, #000000);
background-image: url(../images/shapes/contact-bg-4-1.png);
background-repeat: no-repeat;
background-size: cover;
clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 100%, 0 100%);
background-position: center center;
z-index: -1;
}
@media (max-width: 767px) {
.contact-four::after {
clip-path: none;
}
}
.contact-four__inner {
border: 1px solid #ddd;
background-color: var(--tarang-white, #FFFFFF);
padding: 60px;
position: relative;
z-index: 1;
}
@media (max-width: 1199px) and (min-width: 992px) {
.contact-four__inner {
padding: 20px;
}
}
@media (max-width: 991px) {
.contact-four__inner {
padding: 30px;
}
}
.contact-four__inner::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 322px;
background-color: var(--trangp-base, #D7984E);
clip-path: polygon(0 0, 100% 0, 20% 50%, 100% 100%, 0 100%);
}
@media (max-width: 991px) {
.contact-four__inner::after {
display: none;
}
}
.contact-four__inner .bootstrap-select > .dropdown-toggle,
.contact-four__inner input[type=text],
.contact-four__inner input[type=email] {
height: 48px;
width: 100%;
border: 1px solid #D3D3D3;
background-color: var(--tarang-white, #FFFFFF);
border-radius: 100px;
color: #636363;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 162.5%;
padding-left: 25px;
}
.contact-four__inner .bootstrap-select > .dropdown-toggle::placeholder,
.contact-four__inner input[type=text]::placeholder,
.contact-four__inner input[type=email]::placeholder {
color: #636363;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 162.5%;
}
.contact-four__inner textarea {
height: 107px;
width: 100%;
border: 1px solid #D3D3D3;
background-color: var(--tarang-white, #FFFFFF);
border-radius: 20px;
color: #636363;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 162.5%;
padding-left: 25px;
}
.contact-four__inner textarea::placeholder {
color: #636363;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 162.5%;
}
.contact-four__inner button {
margin-top: 10px;
}
.contact-four__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 70px;
padding-bottom: 70px;
}
@media (max-width: 767px) {
.contact-four__bottom {
flex-direction: column;
justify-content: start;
align-items: start;
gap: 30px;
}
}
.contact-four__call {
display: flex;
align-items: center;
justify-content: center;
gap: 27px;
}
@media (max-width: 767px) {
.contact-four__call {
flex-direction: column;
justify-content: start;
align-items: start;
gap: 30px;
}
}
.contact-four__call__icon {
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--tarang-white, #FFFFFF);
font-size: 40px;
color: var(--trangp-base, #D7984E);
transition: all 0.4s ease-in-out;
}
.contact-four__call__text {
color: var(--tarang-white, #FFFFFF);
font-size: 35px;
font-style: normal;
font-weight: 600;
line-height: 142.857%;
text-transform: capitalize;
}
@media (max-width: 991px) {
.contact-four__call__text {
font-size: 22px;
}
}
.contact-four__call__text a {
color: inherit;
}
.contact-four__call__text a:hover {
color: var(--trangp-base, #D7984E);
}
.contact-four__call:hover .contact-four__call__icon {
background-color: var(--trangp-base, #D7984E);
color: var(--tarang-white, #FFFFFF);
}
.contact-four__maps {
position: relative;
z-index: 1;
}
.contact-four__maps__inner {
position: relative;
z-index: 1;
height: 100%;
}
.contact-four__maps__inner iframe {
position: relative;
display: block;
border: none;
height: 560px;
width: 100%;
}
@media (max-width: 430px) {
.contact-four__maps__inner iframe {
height: 400px;
}
}
.contact-four__maps__logo {
position: absolute;
bottom: 0;
right: 0;
background-color: var(--trangp-black5, #1E1F24);
padding: 15px 15px 14px 24px;
display: inline-block;
border-radius: 30px 0 0 0;
}
.contact-four__maps__info__button {
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
cursor: pointer;
border-radius: 50%;
background-color: var(--trangp-base, #D7984E);
position: relative;
z-index: 1;
}
.contact-four__maps__info__button::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
transform: scale(2.5);
background-color: rgba(var(--trangp-base-rgb, 215, 152, 78), 0.4);
animation: zoomOut 1.2s infinite linear;
}
@keyframes zoomOut {
0% {
transform: scale(2.5);
}
50% {
transform: scale(1);
}
100% {
transform: scale(2.5);
}
}
.contact-four__maps__info__content {
width: 170px;
height: auto;
border-radius: 5px;
background-color: var(--tarang-white, #FFFFFF);
position: absolute;
z-index: 2;
bottom: 25px;
left: -74px;
visibility: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.contact-four__maps__info__content::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 10px;
background-color: var(--tarang-white, #FFFFFF);
clip-path: polygon(0 0, 50% 100%, 100% 0);
bottom: -10px;
}
.contact-four__maps__info__thumb {
background-color: var(--trangp-base, #D7984E);
border: 6px solid var(--trangp-base, #D7984E);
border-radius: 6px 6px 0 0;
}
.contact-four__maps__info__thumb img {
object-fit: cover;
width: 100%;
border: 5px solid var(--tarang-white, #FFFFFF);
}
.contact-four__maps__info__title {
margin-top: 8px;
color: #000;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 3px;
text-align: center;
}
.contact-four__maps__info__text {
color: #636363;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 14px;
text-align: center;
}
.contact-four__maps__info__item {
position: absolute;
top: 60px;
left: 40px;
}
.contact-four__maps__info__item:nth-child(2) {
top: 50%;
left: 50%;
}
.contact-four__maps__info__item:nth-child(3) {
top: 30%;
left: 80%;
}
.contact-four__maps__info__item:nth-child(4) {
top: auto;
left: 80%;
bottom: 20%;
}
.contact-four__maps__info__item:nth-child(5) {
top: auto;
left: 20%;
bottom: 20%;
}
.contact-four .contact-four__maps__info__item:hover .contact-four__maps__info__content {
opacity: 1;
visibility: visible;
}
/* button */
.trangp-btn {
position: relative;
display: inline-flex;
align-items: center;
vertical-align: middle;
-webkit-appearance: none;
border: none;
outline: none !important;
background-color: var(--tarang-base, #D7984E);
z-index: 1;
color: var(--trangp-white, #FFFFFF);
font-size: 16px;
padding: 13.5px 29px;
font-style: normal;
font-weight: 500;
line-height: normal;
/*text-transform: uppercase;*/
clip-path: polygon(90% 0, 100% 35%, 100% 100%, 0 100%, 0 0);
overflow: hidden;
transition: 500ms;
}
.trangp-btn::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--tarang-base3, #1b354c);
z-index: -1;
transition: all 500ms ease;
transform: translateX(-100%);
z-index: -1;
}
.trangp-btn::after {
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
left: 5px;
background-color: var(--tarang-base3, #1b354c);
z-index: -1;
transition: all 500ms ease;
clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.trangp-btn i {
margin-left: 8px;
}
.trangp-btn:hover::after {
background-color: var(--trang-white, #FFFFFF);
}
.trangp-btn:hover::before {
transform: translateX(0%);
}
.trangp-btn:hover .trangp-btn__text span {
animation: slideRight 500ms;
}
/*Our Blogs*/
.blog-two {
position: relative;
}
/*******
* Blog Two
*******/
.blog-two-card {
position: relative;
z-index: 1;
}
.blog-two-card__image {
display: block;
position: relative;
overflow: hidden;
}
.blog-two-card__image img {
width: 100%;
object-fit: cover;
transform: scale(1);
transition: all 0.5s ease-in-out;
}
.blog-two-card__hover__box {
background-color: rgba(var(--trangp-black5-rgb, 30, 31, 36), 0.8);
height: 100%;
top: 0;
opacity: 0;
position: absolute;
transform: scaleX(0);
transition: all 0.5s ease 0s;
width: 25%;
z-index: 1;
}
.blog-two-card__hover__box--1 {
left: 0;
transition-delay: 0.105s;
}
.blog-two-card__hover__box--2 {
left: 25%;
transition-delay: 0.105s;
}
.blog-two-card__hover__box--3 {
left: 50%;
transition-delay: 0.105s;
}
.blog-two-card__hover__box--4 {
left: 75%;
transition-delay: 0s;
}
.blog-two-card__content {
margin-left: 54px;
background-color: #F6F7F8;
transition: all 0.4s ease-in-out;
}
@media (max-width: 1199px) and (min-width: 992px), (max-width: 500px) {
.blog-two-card__content {
margin-left: 20px;
}
}
@media (max-width: 400px) {
.blog-two-card__content {
margin-left: 0px;
}
}
.blog-two-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--trangp-white, #FFFFFF);
}
.blog-two-card__user-image {
margin-top: -37px;
position: relative;
z-index: 1;
border-radius: 100px 100px 0 0;
border: 5px solid var(--trangp-white, #FFFFFF);
border-bottom: none;
}
.blog-two-card__meta__list {
margin: 0;
display: flex;
gap: 24px;
align-items: center;
}
@media (max-width: 375px) {
.blog-two-card__meta__list {
gap: 12px;
}
.blog-two-card__meta__list li {
font-size: 14px;
}
}
.blog-two-card__meta__list li {
color: var(--trangp-text-gray, #636363);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 0;
}
.blog-two-card__meta__list li a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.blog-two-card__meta__list li a:hover {
background-size: 100% 1px;
}
@media (max-width: 375px) {
.blog-two-card__meta__list li {
font-size: 14px;
}
}
.blog-two-card__meta__date {
margin-top: -71px;
margin-right: -1px;
position: relative;
z-index: 1;
border: 4px solid var(--trang-white, #FFFFFF);
width: 95px;
height: 121px;
background-color: var(--trangp-black5, #1E1F24);
display: flex;
justify-content: center;
flex-direction: column;
color: var(--trangp-white, #FFFFFF);
text-align: center;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
border-right: none;
border-bottom: 0;
}
@media (max-width: 500px) {
.blog-two-card__meta__date {
position: absolute;
top: 20px;
right: 20px;
width: 60px;
height: 100px;
margin-top: 0px;
font-size: 18px;
}
}
.blog-two-card__meta__date span {
display: block;
text-align: center;
padding: 10px 0 10px 0;
color: var(--trang-white, #FFFFFF);
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-align: center;
background-color: var(--trangp-base, #D7984E);
}
@media (max-width: 500px) {
.blog-two-card__meta__date span {
font-size: 30px;
}
}
.blog-two-card__content__inner {
padding: 18px 32px 30px;
}
@media (max-width: 400px) {
.blog-two-card__content__inner {
padding: 18px 20px 30px;
}
}
.blog-two-card__title {
color: var(--trangp-black, #222222);
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 136.364%;
margin-bottom: 20px;
}
@media (max-width: 500px) {
.blog-two-card__title {
font-size: 18px;
}
}
.blog-two-card__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.blog-two-card__title a:hover {
background-size: 100% 1px;
}
.blog-two-card .trangp-btn {
background-color: var(--tarang-base, #D7984E);
}
.blog-two-card .trangp-btn::before {
background-color: var(--tarang-base2, #1b354c);
}
.blog-two-card .trangp-btn::after {
background-color: var(--tarang-base2, #1b354c);
}
.blog-two-card .trangp-btn:hover::after {
background-color: var(--tarang-base3, #1b354c);
}
.blog-two-card__shape {
position: absolute;
bottom: 0;
right: 0;
}
.blog-two-card:hover .blog-two-card__content {
background-color: var(--tarang-base3, #1b354c);
}
.blog-two-card:hover .blog-two-card__title {
color: var(--trang-white, #FFFFFF);
}
.blog-two-card:hover .blog-two-card__image img {
transform: scale(1.1);
}
.blog-two-card:hover .blog-two-card__hover__box {
opacity: 1;
transform: scale(1);
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.main-footer {
position: relative;
z-index: 1;
background-color: var(--tarang-base2, #1b3546);
margin-top: 89px;
padding-top: 1px;
}
.main-footer__top {
padding-top: 70px;
padding-bottom: 40px;
}
@media (max-width: 767px) {
.main-footer__top {
padding-top: 75px;
padding-bottom: 60px;
}
}
.main-footer__bottom {
background-color: var(--tarang-base3, #1b354c);
}
.main-footer__bottom__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 0;
}
@media (max-width: 991px) {
.main-footer__bottom__inner {
flex-direction: column;
justify-content: start;
align-items: start;
gap: 20px;
}
}
.main-footer__bottom__list {
display: flex;
align-items: center;
gap: 15px;
margin: 0;
}
.main-footer__bottom__list li a {
margin: 0;
color: var(--trangp-white, #FFFFFF);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.main-footer__bottom__list li a:hover {
background-size: 100% 1px;
}
.main-footer__copyright {
margin: 0;
color: var(--trangp-white, #FFFFFF);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.main-footer__shape-one {
position: absolute;
bottom: 0;
left: 0;
opacity: 0.03;
z-index: -1;
width: 100%;
overflow: hidden;
}
.main-footer__shape-two {
position: absolute;
bottom: 0;
right: 0;
opacity: 0.03;
z-index: -1;
}
.mt-20 {
margin-top: 18px;
}
.footer-widget {
position: relative;
}
.footer-widget__logo {
display: flex;
align-items: center;
justify-content: start;
margin-bottom: 20px;
height: 70px;
}
.footer-widget__logo img {
object-fit: cover;
}
.footer-widget__text {
color: var(--trangp-white, #FFFFFF);
}
.footer-widget__social-links {
display: flex;
align-items: center;
justify-content: start;
gap: 10px;
margin-top: 30px;
}
.footer-widget__social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: transparent;
border: 1px solid #92918F;
color: #92918F;
font-size: 16px;
line-height: 1;
transition: all 0.3s ease-in-out;
}
.footer-widget__social-links a:hover {
background-color: var(--trangp-base, #D7984E);
color: var(--trangp-white, #FFFFFF);
border-color: var(--trangp-base, #D7984E);
transform: translateY(-3px);
}
.footer-widget__title {
color: var(--trangp-white, #FFFFFF);
font-family: var(--trang-heading-font, "Readex Pro", sans-serif);
text-transform: capitalize;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 38px;
}
@media (max-width: 1199px) {
.footer-widget__title {
margin-bottom: 15px;
}
}
.footer-widget__links {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px 16px;
margin: 0;
}
@media (max-width: 575px) {
.footer-widget__links {
grid-template-columns: repeat(1, 1fr);
}
}
.footer-widget__links li {
display: flex;
align-items: center;
color: var(--trangp-white, #FFFFFF);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.footer-widget__links li i {
font-size: 6px;
margin-right: 6px;
transition: all 0.4s ease-in-out;
}
.footer-widget__links li a {
color: inherit;
transition: all 0.4s ease-in-out;
}
.footer-widget__links li:hover {
color: var(--trangp-base, #D7984E);
}
.footer-widget__links-two {
margin: 0;
}
.footer-widget__links-two li {
display: flex;
align-items: center;
color: var(--trangp-white, #FFFFFF);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.footer-widget__links-two li i {
font-size: 6px;
margin-right: 6px;
}
.footer-widget__links-two li a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.footer-widget__links-two li a:hover {
background-size: 100% 1px;
}
.footer-widget__links-two li a:hover {
color: var(--trangp-base, #D7984E);
}
.footer-widget__links-two li + li {
margin-top: 11px;
}
.footer-widget--post {
margin-left: 22px;
}
@media (max-width: 1199px) {
.footer-widget--post {
margin-left: 0;
}
}
.footer-widget--post__item {
display: flex;
align-items: center;
justify-content: start;
gap: 18px;
}
.footer-widget--post__img {
max-width: 74px;
width: 100%;
height: 76px;
border-radius: 6px;
position: relative;
z-index: 1;
}
.footer-widget--post__img img {
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 6px;
}
.footer-widget--post__date {
color: var(--trangp-white, #FFFFFF);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 4px;
display: block;
display: flex;
align-items: center;
gap: 8px;
}
.footer-widget--post__date i {
color: var(--trangp-base, #D7984E);
}
.footer-widget--post__title {
color: var(--trangp-white, #FFFFFF);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 125%;
margin: 0;
}
.footer-widget--post__title a {
color: inherit;
}
.footer-widget--post__title a:hover {
color: var(--trangp-base, #D7984E);
}
.footer-widget--post__item + .footer-widget--post__item {
margin-top: 24px;
}
.footer-widget--post ul {
margin: 0;
}
.main-footer__cta {
position: relative;
z-index: 1;
margin-top: -80px;
}
.main-footer__cta__inner {
background-color: var(--tarang-base3, #1b3546);
padding: 14px 18px;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: space-between;
}
@media (max-width: 991px) {
.main-footer__cta__inner {
flex-direction: column;
align-items: start;
justify-content: start;
gap: 20px;
border-radius: 20px;
}
}
.main-footer__cta__inner:hover .main-footer__cta__icon {
background-color: var(--tarang-base, #D7984E);
color: var(--trang-white, #FFFFFF);
}
.main-footer__cta__content {
display: flex;
align-items: center;
gap: 30px;
flex: 50%;
width: 50%;
}
@media (max-width: 991px) {
.main-footer__cta__content {
width: 100%;
flex: 100%;
}
}
.main-footer__cta__form {
flex: 50%;
width: 50%;
}
@media (max-width: 991px) {
.main-footer__cta__form {
width: 100%;
flex: 100%;
}
}
.main-footer__cta__newsletter .form-group__form {
display: flex;
align-items: center;
position: relative;
}
.main-footer__cta__newsletter .form-group__form input {
border-radius: 100px;
border: none;
background: var(--trang-white, #FFFFFF);
outline: none;
height: 50px;
width: 100%;
padding-left: 30px;
padding-right: 100px;
color: var(--trangp-text-gray, #636363);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.main-footer__cta__newsletter .form-group__form input::placeholder {
color: var(--trangp-text-gray, #636363);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.main-footer__cta__newsletter .form-group__form button {
border: none;
outline: none;
top: 5px;
bottom: 5px;
position: absolute;
right: 6px;
padding-left: 35px;
padding-right: 35px;
justify-content: center;
align-items: center;
border-radius: 100px;
background-color: var(--tarang-base, #D7984E);
color: var(--trang-white, #FFFFFF);
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
transition: all 0.4s ease-in-out;
}
.main-footer__cta__newsletter .form-group__form button:hover {
background-color: var(--tarang-base, #D7984E);
color: var(--trang-white, #FFFFFF);
}
.main-footer__cta__title {
color: var(--trang-white, #FFFFFF);
font-size: 30px;
font-style: normal;
font-weight: 600;
line-height: 133.333%;
margin: 0;
}
@media (max-width: 575px) {
.main-footer__cta__title {
font-size: 22px;
}
}
@media (max-width: 425px) {
.main-footer__cta__title {
font-size: 18px;
}
}
.main-footer__cta__icon {
max-width: 126px;
width: 100%;
height: 126px;
border-radius: 300px;
background-color: var(--trang-white, #FFFFFF);
display: flex;
align-items: center;
justify-content: center;
font-size: 69px;
color: var(--tarang-base, #D7984E);
transition: all 0.4s ease-in-out;
}
@media (max-width: 575px) {
.main-footer__cta__icon {
max-width: 100px;
height: 100px;
font-size: 50px;
}
}
/*--------------------------------------------------------------
# Mobile Nav
--------------------------------------------------------------*/
.mobile-nav__wrapper {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
transform: translateX(-100%);
transform-origin: left center;
transition: transform 500ms ease 500ms, visibility 500ms ease 500ms;
visibility: hidden;
position: fixed;
}
.mobile-nav__wrapper .container {
padding-left: 0;
padding-right: 0;
}
.mobile-nav__wrapper .home-showcase .row [class*=col-] {
flex: 0 0 100%;
}
.mobile-nav__wrapper .home-showcase {
margin-bottom: -1px;
margin-top: 0;
border-bottom: 1px solid RGBA(var(--trangp-white-rgb, 255, 255, 255), 0.1);
}
.mobile-nav__wrapper .home-showcase__inner {
padding: 15px 0px;
background-color: transparent;
box-shadow: none;
}
.mobile-nav__wrapper .home-showcase__title {
color: var(--trangp-white, #FFFFFF);
}
.mobile-nav__wrapper.expanded {
opacity: 1;
transform: translateX(0%);
visibility: visible;
transition: transform 500ms ease 0ms, visibility 500ms ease 0ms;
}
.mobile-nav__wrapper.expanded .mobile-nav__content {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms;
}
.mobile-nav__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000000;
opacity: 0.7;
cursor: url(../images/close.png), auto;
}
.mobile-nav__content {
width: 300px;
background-color: var(--trangp-black2, #333333);
z-index: 10;
position: relative;
height: 100%;
overflow-y: auto;
padding: 20px 15px 30px;
opacity: 0;
visibility: hidden;
transform: translateX(-100%);
transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms;
}
.mobile-nav__content .main-menu__nav {
display: block;
padding: 0;
}
.mobile-nav__content .logo-box {
margin-bottom: 20px;
display: flex;
}
.mobile-nav__content .logo-box img{
height: 63px;
width: auto;
}
.mobile-nav__close {
display: inline-flex;
position: absolute;
top: 20px;
right: 20px;
font-size: 20px;
color: var(--trangp-white, #FFFFFF);
cursor: pointer;
transition: all 500ms ease;
}
.mobile-nav__close svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.mobile-nav__close:hover {
color: var(--trangp-base, #D7984E);
}
.mobile-nav__content .main-menu__list,
.mobile-nav__content .main-menu__list ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.mobile-nav__content .main-menu__list ul {
display: none;
border-top: 1px solid RGBA(var(--trangp-white-rgb, 255, 255, 255), 0.1);
}
.mobile-nav__content .main-menu__list ul li > a {
padding-left: 1em;
}
.mobile-nav__content .main-menu__list li:not(:last-child) {
border-bottom: 1px solid RGBA(var(--trangp-white-rgb, 255, 255, 255), 0.1);
}
.mobile-nav__content .main-menu__list li > a {
display: flex;
justify-content: space-between;
font-family: var(--trangp-font, "Saira", sans-serif);
line-height: 30px;
color: var(--trangp-white, #FFFFFF);
font-size: 16px;
text-transform: capitalize;
font-weight: 500;
height: 46px;
align-items: center;
transition: 500ms;
}
.social-links a {
background: #fff;
width: 35px;
height: 36px;
display: inline-block;
text-align: center;
line-height: 38px;
}
.bxl-twitter {
font-family: "Font Awesome 6 Brands" !important;
font-weight: 400;
font-style: normal;
font-size: 16px;
}
.bxl-twitter::before {
content: "\e61b";
}
@media (max-width: 1199px) {
.mobile-nav__content .main-menu__list li > a .fa-plus {
display: none;
}
}
.mobile-nav__content .main-menu__list > li > ul > li > a {
font-size: 15px;
}
.mobile-nav__content .main-menu__list li a.expanded {
color: var(--trangp-base, #D7984E);
}
.mobile-nav__content .main-menu__list li a button {
width: 30px;
height: 30px;
background-color: var(--trangp-base, #D7984E);
border: none;
outline: none;
color: var(--trangp-white, #FFFFFF);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transform: rotate(-90deg);
transition: transform 500ms ease;
}
.mobile-nav__content .main-menu__list li a button svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.mobile-nav__content .main-menu__list li a button.expanded {
transform: rotate(0deg);
background-color: var(--trangp-white, #FFFFFF);
color: var(--trangp-black, #222222);
}
.mobile-nav__contact {
margin-bottom: 0;
margin-top: 30px;
margin-bottom: 30px;
}
.mobile-nav__contact li {
color: var(--trangp-white, #FFFFFF);
font-size: 16px;
font-weight: 500;
position: relative;
display: flex;
align-items: center;
}
.mobile-nav__contact li + li {
margin-top: 15px;
}
.mobile-nav__contact li a {
color: inherit;
transition: 500ms;
}
.mobile-nav__contact li a:hover {
color: var(--trangp-base, #D7984E);
}
.mobile-nav__contact__icon {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--trangp-base, #D7984E);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 12px;
margin-right: 10px;
color: var(--trangp-white, #FFFFFF);
}
.mobile-nav__contact__icon svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.mobile-nav__container .main-menu__logo,
.mobile-nav__container .main-menu__right {
display: none;
}
/*--------------------------------------------------------------
# Skill
--------------------------------------------------------------*/
.skill-five {
position: relative;
z-index: 1;
}
.skill-five .sec-title__tagline{
color: var(--tarang-base, #D7984E);
}
.skill-five .sec-title .line-left::after {
content: "";
position: absolute;
background-color: var(--tarang-base, #D7984E);
width: 15px;
height: 3px;
top: 50%;
right: 0px;
transform: translateY(-50%) rotate(90deg);
transition: transform 0.3s ease-in-out;
flex-shrink: 0;
}
.skill-five .sec-title .line-left::before {
content: "";
position: absolute;
background-color: var(--tarang-base, #D7984E);
width: 20px;
height: 3px;
top: 50%;
left: -2px;
transform: translateY(-50%);
transition: transform 0.3s ease-in-out;
flex-shrink: 0;
}
.skill-five__bg {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
z-index: -2;
}
@media (max-width: 991px) {
.skill-five__bg {
width: 100%;
}
}
.skill-five__bg::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--trangp-black-rgb, 34, 34, 34), 0.9);
z-index: -1;
}
.skill-five::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 35%;
height: 100%;
background-image: url(../images/shapes/klipartz.png);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
background-color: var(--trangp-base, #D7984E);
border-right: 10px solid var(--trangp-white, #FFFFFF);
z-index: -1;
}
@media (max-width: 991px) {
.skill-five::after {
display: none;
}
}
.skill-five .sec-title {
margin-bottom: 18px;
}
.skill-five .sec-title .sec-title__title {
color: var(--trangp-white, #FFFFFF);
}
.skill-five__top__text {
color: var(--trangp-white, #FFFFFF);
}
.skill-five__feature {
border: 1px solid #898989;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
@media (max-width: 1199px) and (min-width: 991px), (max-width: 575px) {
.skill-five__feature {
flex-wrap: wrap;
}
}
.skill-five__feature__item {
flex: 33%;
width: 33%;
padding: 30px;
}
@media (max-width: 1199px) and (min-width: 991px), (max-width: 575px) {
.skill-five__feature__item {
flex: 50%;
width: 50%;
}
}
@media (max-width: 575px) {
.skill-five__feature__item {
flex: 100%;
width: 100%;
}
}
.skill-five__feature__item + .skill-five__feature__item {
border-left: 1px solid #898989;
}
@media (max-width: 575px) {
.skill-five__feature__item + .skill-five__feature__item {
border-left: none;
}
}
.skill-five__funfact {
color: var(--trangp-white, #FFFFFF);
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: capitalize;
display: flex;
align-items: center;
}
.skill-five__count-bar {
max-width: 108px;
width: 100%;
height: 108px;
border-radius: 50%;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
}
.skill-five__count-bar .circle-progress {
position: absolute;
top: 0;
left: 0;
}
.skill-five__funfact-text {
text-align: center;
color: var(--trangp-white, #FFFFFF);
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: capitalize;
margin: 0;
}
.skill-five__feature {
margin-bottom: 25px;
}
.skill-five__mark-text {
display: flex;
gap: 8px;
align-items: center;
color: var(--trangp-white, #FFFFFF);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
margin-bottom: 30px;
}
.skill-five__mark-text i {
color: var(--trangp-base, #D7984E);
}
.skill-five__left {
position: relative;
z-index: 1;
margin-right: 45px;
margin-left: -75px;
background-color: var(--trangp-white, #FFFFFF);
padding: 20px 12px 80px;
border-radius: 10px;
}
@media (max-width: 1199px) {
.skill-five__left {
margin-right: 0;
margin-left: 0;
}
}
.skill-five__left img {
object-fit: cover;
width: 100%;
}
.trangp-slick__carousel.slick-slider .slick-dots {
list-style: none;
margin: 60px 0px 0px;
padding: 0px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.trangp-slick__carousel.slick-slider .slick-dots li {
width: 40px;
height: 7px;
display: block;
border-radius: 50%;
background-color: var(--trangp-white, #FFFFFF);
border: 1px solid #DDDDDD;
border-radius: 20px;
position: relative;
padding: 0;
outline: none;
margin: 0;
transition: all 500ms ease-in-out;
}
.trangp-slick__carousel.slick-slider .slick-dots li:hover, .trangp-slick__carousel.slick-slider .slick-dots li.slick-active {
background-color: var(--trangp-base, #D7984E);
height: 10px;
width: 50px;
}
.trangp-slick__carousel.slick-slider .slick-dots li button {
display: none;
}
.main-footer__cta {
position: relative;
z-index: 1;
margin-top: -80px;
display: none;
}
.main-footer{
padding: 0px;
margin: 0px;
}
.skill-five p{
color: #fff;
}
.about-section ul,
.location-content ul,
.visit-rays ul{
padding-left: 0;
list-style: none;
}
.about-section ul li,
.location-content ul li,
.visit-rays ul li {
position: relative;
padding-left: 25px;
font-size: 18px;
font-weight: 500;
margin-bottom: 8px;
color: var(--tarang-base3, #1b354c);
}
.about-section ul li::before,
.location-content ul li::before,
.visit-rays ul li::before {
content: '\2714';
font-size: 20px;
position: absolute;
left: 0;
top: 0;
}
.map-responsive iframe {
pointer-events: none; /* cursor leke jane par drag/zoom disable */
}
.main-footer__top li a{
color: #fff;
}
.main-footer__top ul{
padding-left: 0;
list-style: none;
}
.main-footer__top ul li {
position: relative;
padding-left: 25px;
font-size: 16px;
font-weight: 400;
margin-bottom: 8px;
color: var(--tarang-base3, #1b354c);
}
.main-footer__top ul li a::before {
content: '\2749';
font-size: 20px;
position: absolute;
left: 0;
top: -2;
}
.main-footer__top ul li a:hover{
color: var(--tarang-base, #D7984E);
}
.map-responsive iframe{
width: 100% !important;
height: 100% !important;
min-height: 550px;
}
.service-card__icon-box img {
width: 75px;
padding: 10px;
}