/* #tranding{
display: none;
} */
html,
body {
height: 100%;
margin: 0;
}
#tranding .swiper-container {
position: relative;
width: 100%;
height: 28vw;
transition: opacity 0.6s ease;
/* margin-top: 5%; */
overflow: hidden;
}
#tranding .customreviewshori {
line-height: 20px !important;
margin: auto;
width: 45%;
margin-top: 3% !important;
margin-bottom: 2% !important;
border: 1px solid grey;
margin: auto;
}
#tranding .triangle-swiper-video video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border: 15px solid #625c5c4f;
}
#tranding .triangle-swiper-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 55px;
height: 55px;
/* background-image: url(asset/images/play-button-removebg-preview.png); */
/* background-image: url('asset/images1/Home/play-button (2).png'); */
cursor: pointer;
}
/* #tranding .swiper-container .swiper-slide-activ::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(75, 74, 74, 0.5);
} */
#tranding .swiper-container .swiper-slide-active {
transform: translate3d(0px, 15px, 0px) rotateX(0deg) rotateY(0deg) scale(1) !important;
width: 90%;
}
#tranding .swiper-container .swiper-slide {
width: 50% !important;
max-height: 83%;
/* border: 5px solid black; */
}
#tranding .section-heading {
font-size: 3rem;
color: var(--primary);
padding: 2rem 0;
}
#tranding {
padding: 4rem 0rem 4rem 0rem;
}
@media (max-width:1440px) {
#tranding {
padding: 7rem 0;
}
}
#tranding .tranding-slider {
height: 48rem;
padding: 2rem 0;
position: relative;
}
.tranding-slide {
width: 37rem;
height: 42rem;
position: relative;
}
@media (max-width:500px) {
.tranding-slide {
width: 28rem !important;
height: 36rem !important;
}
.tranding-slide .tranding-slide-img img {
width: 28rem !important;
height: 36rem !important;
}
}
/* .tranding-slide .tranding-slide-img img {
width: 100%;
height: 100%;
border-radius: 20px;
object-fit: cover;
margin:0% 2%;
} */
.tranding-slide .tranding-slide-content {
margin-top: 82% !important;
text-align: center;
/* font-size: 30px; */
}
.tranding-slide .tranding-slide-content p:nth-child(1) {
color: white;
font-size: 25px;
margin-bottom: 10px;
line-height: 24px;
}
.tranding-slide .tranding-slide-content p {
font-size: 15px;
line-height: 24px;
letter-spacing: 0.14px;
}
.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
display: none;
}
@media(min-width:1200px) {
.tranding-slider-control {
position: relative;
bottom: 2rem;
display: flex;
align-items: center;
justify-content: center;
top: -104%;
left: 24%;
}
}
/* .tranding-slider-control {
position: relative;
bottom: 2rem;
display: flex;
align-items: center;
justify-content: center;
} */
.tranding-slider-control .swiper-button-next {
left: 67% !important;
transform: translateX(-58%) !important;
}
@media (max-width:990px) {
.tranding-slider-control .swiper-button-next {
left: 70% !important;
transform: translateX(-70%) !important;
}
}
@media (max-width:450px) {
.tranding-slider-control .swiper-button-next {
left: 80% !important;
transform: translateX(-80%) !important;
}
}
@media (max-width:990px) {
.tranding-slider-control .swiper-button-prev {
left: 30% !important;
transform: translateX(-30%) !important;
}
}
@media (max-width:450px) {
.tranding-slider-control .swiper-button-prev {
left: 20% !important;
transform: translateX(-20%) !important;
}
}
.tranding-slider-control .slider-arrow {
/* background: var(--white); */
width: 57px;
height: 3.5rem;
border-radius: 50%;
left: 61%;
/* transform: translateX(-42%); */
filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}
.tranding-slider-control .slider-arrow ion-icon {
font-size: 2rem;
color: white;
}
.tranding-slider-control .slider-arrow::after {
content: '';
}
.tranding-slider-control .swiper-pagination {
position: relative;
width: 15rem;
bottom: 1rem;
}
.tranding-slider-control .swiper-pagination .swiper-pagination-bullet {
filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}
.tranding-slider-control .swiper-pagination .swiper-pagination-bullet-active {
background: var(--primary);
}
.swiper-slide-prev .triangle-swiper-video::before {
position: absolute;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #030303a1;
z-index: 1;
}
.swiper-slide-next .triangle-swiper-video::before {
position: absolute;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #030303a1;
z-index: 1;
}
.form-select:focus {
box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 13%);
}
.pdf-block .magazine1 select {
width: 100%;
padding: 4.5% 4%;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
/* color: #212529; */
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0.25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
/* text-transform: uppercase; */
cursor: pointer;
}
.pdf-block .magazine1 select option {
padding: 2% 2% !important;
}
.pdf-block {
overflow: hidden;
}
.blog-block {
overflow: hidden;
}
.subscribe-block {
overflow: hidden;
}
.site-footer__bottom {
overflow: hidden;
}
/* ///sticky form button starts here */
.feedback {
display: flex;
align-items: center;
justify-content: center;
background-color: #377f49;
color: white;
font-size: 0px;
width: 50px;
height: 50px;
z-index: 2;
/* padding: 8px 11px; */
/* border-radius: 4px; */
/* border-color: #46b8da; */
border-radius: 100%;
position: relative;
border: 1px solid #377f49;
}
#mybutton1::before {
content: "";
position: absolute;
border: 13px solid #69d183;
border-radius: 50%;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
animation: bloom1 1.5s linear infinite;
opacity: 0;
z-index: 1;
}
#mybutton1::after {
content: "";
position: absolute;
border: 10px solid #69d183;
border-radius: 50%;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
animation: bloom2 2.5s linear infinite;
opacity: 0;
z-index: 1;
animation-delay: .4s;
}
@keyframes bloom1 {
0% {
transform: scale(.5);
}
50% {
opacity: 1;
}
100% {
transform: scale(1.1);
}
}
@keyframes bloom2 {
0% {
transform: scale(.5);
}
50% {
opacity: 1;
}
100% {
transform: scale(0.9);
}
}
#mybutton1 {
position: fixed;
bottom: 20px;
right: 40px;
z-index: 9999;
}
#mybutton1 img {
width: 25px;
}
/* ///sticky form button ends here */
/* ///sticky form starts here */
.enquiry-btn {
position: fixed;
z-index: 9999;
top: 50%;
transform: translateY(-50%);
right: -3%;
background: #377f49;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: all .4s ease;
transform: rotate(7deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.enquiry-btn:hover {
background-color: #377f49;
}
#sticky-form {
position: fixed;
z-index: 9998;
width: 300px;
background: #fff;
right: -300px;
top: 54%;
transform: translateY(-50%);
border-radius: 10px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
transition: all .4s ease;
/* padding: 3% 1% 0% 0%; */
padding: 1% 0%;
}
#sticky-form.show {
right: 0;
}
.enquiry-btn.moved {
right: calc(250px + 8px);
/* move the button to the right of the form */
}
/* .nb-form:hover {
bottom: 100px;
} */
/* .nb-form .title {
background: #377f49;
font-size: 16px !important;
font-weight:600;
text-transform: uppercase;
padding: 20px 18px !important;
color: #fff !important;
border-radius: 10px 10px 0 0;
letter-spacing: 3px;
} */
/*-- Text --*/
.nb-form p {
font-size: 13px;
margin: 0;
padding: 15px;
color: #666;
}
.nb-form p.message {
margin-left: 7px;
}
/*-- Form Elements --*/
.nb-form form {
padding: 0 15px 15px 15px;
}
.nb-form input,
.nb-form textarea {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
width: 254px;
max-width: 254px;
margin-bottom: 10px;
margin-left: 7px;
padding: 6px;
border: none;
border-radius: 4px;
color: #999;
border-bottom: 1px solid #f0f0f0;
/* background-color: #000000ab; */
}
.nb-form input:focus,
.nb-form textarea:focus {
outline: none;
box-shadow: none;
}
.nb-form input[type='submit'] {
display: block;
width: 120px;
margin: 0 auto;
padding: 0 20px;
height: 40px;
line-height: 40px;
border-radius: 20px;
cursor: pointer;
transition: all .4s ease;
color: #fff !important;
border: none;
}
/*.nb-form input[type='submit']:hover {*/
/* box-shadow: 0 3px 3px 0 rgba(0,0,0,0.07),0 1px 7px 0 rgba(0,0,0,0.02),0 3px 1px -1px rgba(0,0,0,0.1);*/
/*}*/
.nb-form textarea {
min-height: 110px;
}
.nb-form ::-webkit-input-placeholder {
color: #ccb0b0;
}
.nb-form ::-moz-placeholder {
color: #ccb0b0;
}
.nb-form :-ms-input-placeholder {
color: #ccb0b0;
}
.nb-form :-moz-placeholder {
color: #ccb0b0;
}
.nb-form input[type='submit'] {
background: #377f49;
}
@media screen and (max-width: 676px) {
.nb-form:hover .user-icon {
display: none;
}
.nb-form .message {
display: none;
}
.nb-form form {
padding-top: 15px;
}
.nb-form {
right: 50%;
bottom: -320px;
left: 50%;
transform: translateX(-50%);
}
}
.background_video {
display: none;
}
.overflowwidth100 {
overflow: hidden;
width: 100%;
}
/* ///sticky form ends here / */
#myVideo {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ///header starts here*/
.sticky {
position: fixed !important;
top: 0;
height: auto;
left: 0;
z-index: 9999;
width: 100%;
background: black;
padding-bottom: 20px;
/* margin-top: 1px; */
}
.sticky .button_container {
display: none;
}
/* .embed-responsive-16by9::before{
padding-top: 54.25% !important;
} */
.nav1 {
display: none;
list-style-type: none;
float: right !important;
width: 75% !important;
}
.nav1 a {
color: white;
font-size: 14px;
}
.nav1 a:hover {
color: green;
}
.whats_app_btn {
position: fixed;
bottom: 30px;
left: 20px;
z-index: 9999;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); */
transition: transform 0.3s, box-shadow 0.3s;
}
.whats_app_btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.whats_app_btn svg {
width: 45px;
height: 45px;
fill: white;
}
.logo_class1 {
display: none;
}
.sticky .nav1 {
text-align: center;
display: flex;
/* justify-content: space-around; */
align-items: center;
margin-top: 1%;
padding-left: 15%;
gap: 4%;
}
.sticky .logo_class {
display: none;
}
.sticky .logo_class1 {
display: contents;
}
.sticky .logo_class1 img {
width: 60% !important;
margin-top: 6% !important;
}
.navbar_two {
position: absolute;
left: 0;
width: 100%;
z-index: 9999;
padding-bottom: 20px;
}
.header__inner {
display: flex;
height: 20%;
}
nav.navbar-expand-lg.navbar-dark.bg-dark.fixed-top {
background: black !important;
}
nav.navbar-expand-lg.navbar-dark.bg-dark.fixed-top.scrolled {
background: transparent !important;
}
.button_container {
position: fixed;
top: 5%;
left: 4%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
}
.button_container:hover {
opacity: 0.7;
}
.button_container.active .top {
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #ffffff;
border: none;
height: 4px;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
border-radius: 20px;
}
.button_container span:nth-of-type(2) {
top: 11px;
}
.button_container span:nth-of-type(3) {
top: 22px;
}
.overlays {
position: fixed;
background: #000000eb;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, height 0.35s;
overflow: hidden;
}
.overlays.open {
opacity: 0.9;
visibility: visible;
height: 100%;
}
.overlays.open li {
-webkit-animation: fadeInRight 0.5s ease forwards;
animation: fadeInRight 0.5s ease forwards;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
.overlays.open li:nth-of-type(2) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.overlays.open li:nth-of-type(3) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.overlays.open li:nth-of-type(4) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.overlays nav {
position: relative;
height: 37%;
top: 36%;
transform: translateY(-50%);
font-size: 25px;
font-family: "Vollkorn", serif;
font-weight: 400;
text-align: center;
}
.overlays ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlays ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlays ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
font-size: 25px;
text-transform: uppercase;
font-family: 'Lato';
letter-spacing: 3px;
}
/* .overlays ul li a:hover:after, .overlays ul li a:focus:after, .overlays ul li a:active:after {
width: 100%;
}
.overlays ul li a:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: 0.35s;
} */
.header__inner {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;
}
.logo_class {
text-align: center;
/* background: #8080808f; */
height: 107px;
width: 14%;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
/* ///header ends */
/* //////start of .residential-block1 */
*/ .residential-block1 .row {
display: flex;
width: 100%;
flex-wrap: nowrap;
}
.residential-block1 .col-lg-6 {
width: 50%;
}
.residential-block1 .slider-sec-img {
width: 100%;
display: flex;
flex-wrap: nowrap;
min-height: 300px;
}
.residential-block1 .slider-sec-img .img {
width: 100%;
display: none;
transition: all 0.5s;
}
.residential-block1 .swiper-slide-prev::before {
position: absolute;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #030303a1;
z-index: 1;
}
.residential-block1 .swiper-slide-next:before {
position: absolute;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #030303a1;
z-index: 1;
}
.residential-block1 .swiper-slide-active::after {
background: #03030363 !important;
z-index: 0;
}
.residential-block1 .swiper-slide-active {
background: transparent !important;
}
.residential-block1 .slider-sec-img .img figure img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s;
}
.residential-block1 .data {
display: none;
}
.residential-block1 .maincontent {
display: flex;
flex-flow: column;
width: 100%;
/* height: 100%; */
justify-content: space-between;
}
.residential-block1 ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
margin-left: -7px;
}
.residential-block1 ul li {
padding: 1% 0% 0% 0% !important;
margin: 10px;
cursor: pointer;
user-select: none;
}
.residential-block1 .slider-sec-img .img.active {
width: 100%;
transition: all 0.5s;
display: block;
background: #03030300;
z-index: 0;
}
.residential-block1 .data.active {
display: block;
}
.residential-block1 ul li.active {
/* border-bottom: 2px solid #000; */
border-bottom: 3px solid #a77b40;
border-color: #dee2e60a #dee2e600 #a77b40 #fff0;
color: black;
font-weight: 600;
}
.residential-block1 .items:has(li:first-child.active)+.content+.arrow .left {
opacity: 0.5;
cursor: no-drop;
}
.residential-block1 .items:has(li:last-child.active)+.content+.arrow .right {
opacity: 0.5;
cursor: no-drop;
}
.residential-block1 .swiper-custom-nav svg:hover {
opacity: 0.6 !important;
background-color: #717171 !important;
border-radius: 25px !important;
fill: white !important;
/* padding-left: 12px;
padding-right: 10px; */
}
.residential-block1 .swiper-custom-nav svg {
padding-left: 12px;
padding-right: 10px;
opacity: 1 !important;
background-color: #00000012 !important;
border-radius: 25px !important;
}
.residential-block1 .swiper-wrapper {
transform: translate3d(23px, 0px, 0px);
}
.residential-block1 .swiper-wrapper .swiper-slide figure {
margin: 0 0 0rem !important;
}
.residential-block1 #swiper-21 .swiper-wrapper .swiper-slide figure img {
border: 1px solid #00000040;
padding: 3.8% 22%;
}
.residential-block1 #swiper-31 .swiper-wrapper .swiper-slide figure img {
border: 1px solid #00000040;
padding: 3.8% 25%;
}
.residential-block1 #swiper-41 .swiper-wrapper .swiper-slide figure img {
border: 1px solid #00000040;
padding: 3.8% 25%;
}
.residential-block1 .swiper-wrapper .swiper-slide figure .logoborder {
border: 1px solid #00000040;
padding: 4% 25% !important;
text-align: center;
font-size: 32px;
color: #000;
}
/* //////end of .residential-block1 */
/* //commercial block starts */
.commercial-block .row {
display: flex;
width: 100%;
flex-wrap: nowrap;
}
.commercial-block .col-lg-6 {
width: 50%;
}
.commercial-block .slider-sec-img {
width: 100%;
display: flex;
flex-wrap: nowrap;
min-height: 300px;
}
.commercial-block .slider-sec-img .img {
width: 100%;
display: none;
transition: all 0.5s;
}
.commercial-block .swiper-slide-prev::before {
position: absolute;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #030303a1;
z-index: 1;
}
.commercial-block .swiper-slide-next:before {
position: absolute;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #030303a1;
z-index: 1;
}
.commercial-block .swiper-slide-active::after {
background: #03030363 !important;
z-index: 0;
}
.commercial-block .swiper-slide-active {
background: transparent !important;
}
.commercial-block .slider-sec-img .img figure img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s;
}
.commercial-block .data {
display: none;
}
.commercial-block .maincontent {
display: flex;
flex-flow: column;
width: 100%;
/* height: 100%; */
justify-content: space-between;
}
.commercial-block ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
}
.commercial-block ul li {
padding: 1% 0% 0% 0% !important;
margin: 3% 4% 2% 0%;
cursor: pointer;
user-select: none;
}
.commercial-block .slider-sec-img .img.active {
width: 100%;
transition: all 0.5s;
display: block;
background: #03030300;
z-index: 0;
}
.commercial-block .data.active {
display: block;
}
.commercial-block ul li.active {
/* border-bottom: 2px solid #000; */
border-bottom: 3px solid #a77b40;
border-color: #dee2e60a #dee2e600 #a77b40 #fff0;
color: black;
font-weight: 600;
padding: 1% 0% 0% 0% !important;
}
.commercial-block .items:has(li:first-child.active)+.content+.arrow .left {
opacity: 0.5;
cursor: no-drop;
}
.commercial-block .items:has(li:last-child.active)+.content+.arrow .right {
opacity: 0.5;
cursor: no-drop;
}
.commercial-block .swiper-custom-nav svg:hover {
opacity: 0.6 !important;
background-color: #717171 !important;
border-radius: 25px !important;
fill: white !important;
/* padding-left: 12px;
padding-right: 10px; */
}
.commercial-block .swiper-custom-nav svg {
padding-left: 12px;
padding-right: 10px;
opacity: 1 !important;
background-color: #00000012 !important;
border-radius: 25px !important;
}
.commercial-block .swiper-wrapper {
transform: translate3d(23px, 0px, 0px);
}
.commercial-block .swiper-wrapper .swiper-slide figure {
margin: 0 0 0rem !important;
}
.commercial-block #swiper-21 .swiper-wrapper .swiper-slide figure img {
border: 1px solid #00000040;
padding: 3.8% 25% !important;
}
.commercial-block #swiper-31 .swiper-wrapper .swiper-slide figure img {
border: 1px solid #00000040;
padding: 3.8% 25% !important;
}
.commercial-block #swiper-41 .swiper-wrapper .swiper-slide figure img {
border: 1px solid #00000040;
padding: 3.8% 25% !important;
}
.commercial-block .swiper-wrapper .swiper-slide figure .logoborder {
border: 1px solid #00000040;
padding: 4% 25% !important;
text-align: center;
}
.parallax-section {
overflow: hidden;
}
/* //commercial block ends */
.video-container {
/* width: 640px; */
border-radius: 4px;
margin: 0 auto;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4);
}
.video-container .video-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.video-container video {
width: 100%;
height: 100%;
border-radius: 4px;
}
.play-button-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
pointer-events: none;
}
.play-button-wrapper #circle-play-b {
cursor: pointer;
pointer-events: auto;
}
.play-button-wrapper #circle-play-b img {
width: 12vh;
top: 50%;
left: 50%;
/* fill: #fff;
stroke: #fff;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 50%;
opacity: 0.9; */
}
.video-background {
position: relative;
width: 100%;
/* height: 100%; */
}
.float-left h1, .float-left p {
top: 58%;
right: 0;
position: absolute;
color: white;
font-size: 30px;
letter-spacing: 3px;
left: 0%;
font-weight: normal;
}
/* //scroll down button starts */
a#scroll-btn {
position: absolute;
height: 2.9em;
width: 1.5em;
border: 0.1em solid white;
margin: auto;
left: 0;
right: 0;
bottom: 0%;
top: 92%;
border-radius: 3em;
}
a#scroll-btn:before {
position: absolute;
content: "";
margin: auto;
left: 0;
right: 0;
top: 0.5em;
height: 0.6em;
width: 0.6em;
background-color: white;
border-radius: 50%;
animation: move-down 3s infinite;
}
@keyframes move-down {
80% {
opacity: 0.7;
}
100% {
transform: translateY(1.4em);
opacity: 0.9;
}
}
a#scroll-btn:after {
position: absolute;
content: "SCROLL DOWN";
/* width: 12em; */
display: block;
width: 13em;
text-align: center;
left: -4.2em;
bottom: -2.5rem;
font-size: 0.6em;
color: white;
letter-spacing: 3px;
font-weight: 600;
}
/* //scroll down button ends */
#explore-btn:hover {
background-color: white;
color: black;
}
#explore-btn {
width: 55%;
margin-top: 3%;
margin-bottom: 6.5%;
}
.btn-check:focus+.btn-dark,
.btn-dark:focus {
/* border-color: transparent !important; */
box-shadow: 0 0 0 0.25rem rgb(66 70 73 / 0%) !important;
border: 2px solid black;
}
/* //residential tabs */
#myTabContent {
color: #888888;
padding: 9% 0% 4% 0%;
}
#myTab .nav-item.show .nav-link,
#myTab .nav-link {
color: #888888;
}
#myTab .nav-item .nav-link {
padding: 1% 0% 0% 1%;
}
#myTab .nav-item.show .nav-link,
#myTab .nav-link:hover {
border-color: #e9ecef00 #e9ecef00 #dee2e600;
}
#close1 {
display: none;
}
#bars1 {
/* font-size:36px; */
font-size: 25px;
}
.active #close1 {
display: contents;
font-size: 25px;
}
.active #bars1 {
display: none;
}
#myTab {
border-bottom: 1px solid #dee2e600;
column-gap: 7%;
}
.nav-block-starts {
padding: 8% 0%;
}
#myTab .nav-item.show .nav-link,
#myTab .nav-link.active {
border-bottom: 3px solid #a77b40;
border-color: #dee2e60a #dee2e600 #a77b40 #fff0;
color: black;
font-weight: 600;
}
/* sidebar end */
.subscribe-block {
background-color: #636363;
align-items: middle;
padding: 3% 0% 2% 0%;
}
.btn {
letter-spacing: 2.8px;
line-height: 17px;
padding-top: 15px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 15px;
}
.environment-block1 {
background-size: cover;
height: 100vh !important;
/* background-attachment: fixed; */
position: relative;
background-position: center;
z-index: 1;
padding: 4.3rem;
}
.environment-block1 .parallax-wrapper {
position: absolute;
top: 20vh;
}
.environment-block1 h1 {
font-size: 45px;
}
.quality-block {
background-size: cover;
height: 100vh;
background-position: center;
/* background-attachment: fixed; */
position: relative;
z-index: 1;
padding: 4.3rem;
}
/* .environment-block1{
background-size: cover;
height:120vh;
position: relative;
z-index: 1;
}
.environment-block1:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200%;
background: url("asset/images1/Home/environmentblock1.jpg") center center / cover no-repeat fixed;
transform: translate3d(0,0,0);
z-index: -1;
}
.environment-block1 .parallax-content {
position: relative;
z-index: 2;
}
.environment-block1 h1,
.environment-block1 hr,
.environment-block1 p {
position: relative;
z-index: 2;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.environment-block1 h1 {
color: black;
font-size: 45px;
}
.environment-block1 hr {
border: 1px solid grey;
}
.environment-block1 p {
color: #707070;
line-height: 1.5;
font-size: 16px;
font-family: lato;
max-width: 450px;
}
.quality-block{
background-size: cover;
height: 150vh;
position: relative;
z-index: 1;
}
.quality-block:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200%;
background: url('asset/images1/Home/qualityblock.jpg') center center / cover no-repeat fixed;
transform: translate3d(0,0,0);
z-index: -1;
} */
.quality-block .parallax-content {
position: relative;
z-index: 2;
}
.quality-block h1 {
padding-bottom: 32px;
}
.countpara {
display: flex;
justify-content: flex-start;
column-gap: 8px;
}
.count-title {
font-size: 45px;
font-weight: 500;
color: black;
}
.count12 {
font-size: 45px;
font-weight: 500;
color: black;
text-align: center;
line-height: 112%;
}
.quality-block .countpara .count3 {
margin-top: 5px !important;
}
hr:not([size]) {
height: 0px !important;
}
.form-control:focus {
border-color: none !important;
box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 0%) !important;
}
/* blog block */
#myCarousel .carousel-inner .carousel-item .row {
--bs-gutter-x: 0px;
--bs-gutter-x: 0px;
}
/* //scroll button starts*/
.ct-btn-scroll {
position: absolute;
bottom: 5%;
color: #fff;
font-size: 48px;
transition: all 0.3s ease-in-out;
}
.ct-btn-scroll:focus,
.ct-btn-scroll:hover {
color: #f59331;
}
.ct-btn-scroll {
background: url('https://www.solodev.com/asset/bouncy-scroll-down/bouncy-arrow-down.png') no-repeat;
width: 100%;
height: 100%;
max-width: 60px;
max-height: 60px;
}
/* //scroll button ends*/
/* blog block ends */
@media (min-width: 1200px) {
.c1 {
max-width: 1397px !important;
}
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media(min-width:1400px) {
.subscribe {
line-height: 42px !important;
}
}
@media(max-width:767px) {
.subscribe {
margin-bottom: 20px !important;
}
.subscribe p {
text-align: center !important;
}
.subscribe1 {
margin-bottom: 20px !important;
text-align: center;
}
}
.subscribe1 #email {
padding: 4.5% 7%;
}
/* //exampnle starts */
/* .example .slider {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.example .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.example .slide.active {
opacity: 1;
}
.example video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateY(0deg);
width: 100%;
height: 100%;
object-fit: cover;
}
.example .play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-image: url(asset/images/play-button-removebg-preview.png);
background-size: cover;
cursor: pointer;
}
.example .arrows {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 50px;
}
.example .prev {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50px;
background-image: url(prev-arrow.png);
background-size: cover;
cursor: pointer;
}
.example .next {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50px;
background-image: url(next-arrow.png);
background-size: cover;
cursor: pointer;
}
*/
/* My custom code */
/* Your existing styles */
/* Mobile view adjustments */
@media (max-width: 767px) {
#tranding .triangle-swiper-video video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 45%;
object-fit: cover;
border: 0;
}
#tranding .triangle-swiper-play-btn {
position: absolute;
top: 22%;
left: 50%;
transform: translate(-50%, -50%);
width: 25px;
height: 25px;
}
.tranding-slide .tranding-slide-content p {
font-size: 15px;
line-height: 20px;
letter-spacing: 0.14px;
}
#tranding .swiper-container .swiper-slide {
width: 50% !important;
max-height: 100%;
/* border: 5px solid black; */
}
#tranding {
padding: 1rem 0;
}
#tranding .tranding-slider {
height: 25rem;
}
.tranding-slider-control .slider-arrow {
/* background: var(--white); */
width: 30px;
height: 25rem;
}
}
@media(max-width: 768px) {
.residential-block1 .slider-sec-img .img figure img {
object-fit: contain;
}
}