/*======================================
Variables
========================================*/
/*======================================
Normalize CSS
========================================*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
html {
scroll-behavior: smooth;
}
body {
font-family: "Inter", sans-serif;
font-weight: normal;
font-style: normal;
color: #888;
overflow-x: hidden;
font-size: 15px;
}
p {
margin: 0;
padding: 0;
font-size: 15px;
line-height: 24px;
}
* {
margin: 0;
padding: 0;
}
.navbar-toggler:focus,
a:focus,
input:focus,
textarea:focus,
button:focus,
.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
text-decoration: none;
outline: none;
outline: none !important;
border-color: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.form-check-input:checked {
background-color: #ff6b81;
border-color: #ff6b81;
}
select {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: #081828;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-appearance: menulist;
-moz-appearance: menulist;
appearance: menulist;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
white-space: pre;
-webkit-rtl-ordering: logical;
background-color: -internal-light-dark(white, #3b3b3b);
cursor: default;
margin: 0em;
font: 400 14px;
border-radius: 0px;
border-width: 1px;
border-style: solid;
border-color: -internal-light-dark(#767676, #858585);
-o-border-image: initial;
border-image: initial;
}
span,
a {
display: inline-block;
text-decoration: none;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
img {
max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
margin: 0px;
color: #081828;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: inherit;
}
h1 {
font-size: 50px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 25px;
}
h5 {
font-size: 20px;
}
h6 {
font-size: 16px;
}
ul,
ol {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.mt-5 {
margin-top: 5px;
}
.mt-10 {
margin-top: 10px;
}
.mt-15 {
margin-top: 15px;
}
.mt-20 {
margin-top: 20px;
}
.mt-25 {
margin-top: 25px;
}
.mt-30 {
margin-top: 30px;
}
.mt-35 {
margin-top: 35px;
}
.mt-40 {
margin-top: 40px;
}
.mt-45 {
margin-top: 45px;
}
.mt-50 {
margin-top: 50px;
}
.mt-55 {
margin-top: 55px;
}
.mt-60 {
margin-top: 60px;
}
.mt-65 {
margin-top: 65px;
}
.mt-70 {
margin-top: 70px;
}
.mt-75 {
margin-top: 75px;
}
.mt-80 {
margin-top: 80px;
}
.mt-85 {
margin-top: 85px;
}
.mt-90 {
margin-top: 90px;
}
.mt-95 {
margin-top: 95px;
}
.mt-100 {
margin-top: 100px;
}
.mt-105 {
margin-top: 105px;
}
.mt-110 {
margin-top: 110px;
}
.mt-115 {
margin-top: 115px;
}
.mt-120 {
margin-top: 120px;
}
.mt-125 {
margin-top: 125px;
}
.mt-130 {
margin-top: 130px;
}
.mt-135 {
margin-top: 135px;
}
.mt-140 {
margin-top: 140px;
}
.mt-145 {
margin-top: 145px;
}
.mt-150 {
margin-top: 150px;
}
.mt-155 {
margin-top: 155px;
}
.mt-160 {
margin-top: 160px;
}
.mt-165 {
margin-top: 165px;
}
.mt-170 {
margin-top: 170px;
}
.mt-175 {
margin-top: 175px;
}
.mt-180 {
margin-top: 180px;
}
.mt-185 {
margin-top: 185px;
}
.mt-190 {
margin-top: 190px;
}
.mt-195 {
margin-top: 195px;
}
.mt-200 {
margin-top: 200px;
}
.mt-205 {
margin-top: 205px;
}
.mt-210 {
margin-top: 210px;
}
.mt-215 {
margin-top: 215px;
}
.mt-220 {
margin-top: 220px;
}
.mt-225 {
margin-top: 225px;
}
.mb-5 {
margin-bottom: 5px;
}
.mb-10 {
margin-bottom: 10px;
}
.mb-15 {
margin-bottom: 15px;
}
.mb-20 {
margin-bottom: 20px;
}
.mb-25 {
margin-bottom: 25px;
}
.mb-30 {
margin-bottom: 30px;
}
.mb-35 {
margin-bottom: 35px;
}
.mb-40 {
margin-bottom: 40px;
}
.mb-45 {
margin-bottom: 45px;
}
.mb-50 {
margin-bottom: 50px;
}
.mb-55 {
margin-bottom: 55px;
}
.mb-60 {
margin-bottom: 60px;
}
.mb-65 {
margin-bottom: 65px;
}
.mb-70 {
margin-bottom: 70px;
}
.mb-75 {
margin-bottom: 75px;
}
.mb-80 {
margin-bottom: 80px;
}
.mb-85 {
margin-bottom: 85px;
}
.mb-90 {
margin-bottom: 90px;
}
.mb-95 {
margin-bottom: 95px;
}
.mb-100 {
margin-bottom: 100px;
}
.mb-105 {
margin-bottom: 105px;
}
.mb-110 {
margin-bottom: 110px;
}
.mb-115 {
margin-bottom: 115px;
}
.mb-120 {
margin-bottom: 120px;
}
.mb-125 {
margin-bottom: 125px;
}
.mb-130 {
margin-bottom: 130px;
}
.mb-135 {
margin-bottom: 135px;
}
.mb-140 {
margin-bottom: 140px;
}
.mb-145 {
margin-bottom: 145px;
}
.mb-150 {
margin-bottom: 150px;
}
.mb-155 {
margin-bottom: 155px;
}
.mb-160 {
margin-bottom: 160px;
}
.mb-165 {
margin-bottom: 165px;
}
.mb-170 {
margin-bottom: 170px;
}
.mb-175 {
margin-bottom: 175px;
}
.mb-180 {
margin-bottom: 180px;
}
.mb-185 {
margin-bottom: 185px;
}
.mb-190 {
margin-bottom: 190px;
}
.mb-195 {
margin-bottom: 195px;
}
.mb-200 {
margin-bottom: 200px;
}
.mb-205 {
margin-bottom: 205px;
}
.mb-210 {
margin-bottom: 210px;
}
.mb-215 {
margin-bottom: 215px;
}
.mb-220 {
margin-bottom: 220px;
}
.mb-225 {
margin-bottom: 225px;
}
.pt-5 {
padding-top: 5px;
}
.pt-10 {
padding-top: 10px;
}
.pt-15 {
padding-top: 15px;
}
.pt-20 {
padding-top: 20px;
}
.pt-25 {
padding-top: 25px;
}
.pt-30 {
padding-top: 30px;
}
.pt-35 {
padding-top: 35px;
}
.pt-40 {
padding-top: 40px;
}
.pt-45 {
padding-top: 45px;
}
.pt-50 {
padding-top: 50px;
}
.pt-55 {
padding-top: 55px;
}
.pt-60 {
padding-top: 60px;
}
.pt-65 {
padding-top: 65px;
}
.pt-70 {
padding-top: 70px;
}
.pt-75 {
padding-top: 75px;
}
.pt-80 {
padding-top: 80px;
}
.pt-85 {
padding-top: 85px;
}
.pt-90 {
padding-top: 90px;
}
.pt-95 {
padding-top: 95px;
}
.pt-100 {
padding-top: 100px;
}
.pt-105 {
padding-top: 105px;
}
.pt-110 {
padding-top: 110px;
}
.pt-115 {
padding-top: 115px;
}
.pt-120 {
padding-top: 120px;
}
.pt-125 {
padding-top: 125px;
}
.pt-130 {
padding-top: 130px;
}
.pt-135 {
padding-top: 135px;
}
.pt-140 {
padding-top: 140px;
}
.pt-145 {
padding-top: 145px;
}
.pt-150 {
padding-top: 150px;
}
.pt-155 {
padding-top: 155px;
}
.pt-160 {
padding-top: 160px;
}
.pt-165 {
padding-top: 165px;
}
.pt-170 {
padding-top: 170px;
}
.pt-175 {
padding-top: 175px;
}
.pt-180 {
padding-top: 180px;
}
.pt-185 {
padding-top: 185px;
}
.pt-190 {
padding-top: 190px;
}
.pt-195 {
padding-top: 195px;
}
.pt-200 {
padding-top: 200px;
}
.pt-205 {
padding-top: 205px;
}
.pt-210 {
padding-top: 210px;
}
.pt-215 {
padding-top: 215px;
}
.pt-220 {
padding-top: 220px;
}
.pt-225 {
padding-top: 225px;
}
.pb-5 {
padding-bottom: 5px;
}
.pb-10 {
padding-bottom: 10px;
}
.pb-15 {
padding-bottom: 15px;
}
.pb-20 {
padding-bottom: 20px;
}
.pb-25 {
padding-bottom: 25px;
}
.pb-30 {
padding-bottom: 30px;
}
.pb-35 {
padding-bottom: 35px;
}
.pb-40 {
padding-bottom: 40px;
}
.pb-45 {
padding-bottom: 45px;
}
.pb-50 {
padding-bottom: 50px;
}
.pb-55 {
padding-bottom: 55px;
}
.pb-60 {
padding-bottom: 60px;
}
.pb-65 {
padding-bottom: 65px;
}
.pb-70 {
padding-bottom: 70px;
}
.pb-75 {
padding-bottom: 75px;
}
.pb-80 {
padding-bottom: 80px;
}
.pb-85 {
padding-bottom: 85px;
}
.pb-90 {
padding-bottom: 90px;
}
.pb-95 {
padding-bottom: 95px;
}
.pb-100 {
padding-bottom: 100px;
}
.pb-105 {
padding-bottom: 105px;
}
.pb-110 {
padding-bottom: 110px;
}
.pb-115 {
padding-bottom: 115px;
}
.pb-120 {
padding-bottom: 120px;
}
.pb-125 {
padding-bottom: 125px;
}
.pb-130 {
padding-bottom: 130px;
}
.pb-135 {
padding-bottom: 135px;
}
.pb-140 {
padding-bottom: 140px;
}
.pb-145 {
padding-bottom: 145px;
}
.pb-150 {
padding-bottom: 150px;
}
.pb-155 {
padding-bottom: 155px;
}
.pb-160 {
padding-bottom: 160px;
}
.pb-165 {
padding-bottom: 165px;
}
.pb-170 {
padding-bottom: 170px;
}
.pb-175 {
padding-bottom: 175px;
}
.pb-180 {
padding-bottom: 180px;
}
.pb-185 {
padding-bottom: 185px;
}
.pb-190 {
padding-bottom: 190px;
}
.pb-195 {
padding-bottom: 195px;
}
.pb-200 {
padding-bottom: 200px;
}
.pb-205 {
padding-bottom: 205px;
}
.pb-210 {
padding-bottom: 210px;
}
.pb-215 {
padding-bottom: 215px;
}
.pb-220 {
padding-bottom: 220px;
}
.pb-225 {
padding-bottom: 225px;
}
.img-bg {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container {
width: 450px;
}
}
/* Bread Crumbs */
.breadcrumbs {
position: relative;
padding-bottom: 100px;
padding-top: 180px;
z-index: 2;
text-align: left;
background-color: #ff6b81;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.breadcrumbs {
padding-bottom: 60px;
padding-top: 120px;
}
}
@media (max-width: 767px) {
.breadcrumbs {
padding-bottom: 60px;
padding-top: 120px;
}
}
.breadcrumbs .breadcrumbs-content {
position: relative;
text-align: center;
}
.breadcrumbs .breadcrumbs-content .page-title {
font-size: 32px;
color: #fff;
font-weight: 700;
position: relative;
line-height: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.breadcrumbs .breadcrumbs-content .page-title {
font-size: 28px;
line-height: 42px;
}
}
@media (max-width: 767px) {
.breadcrumbs .breadcrumbs-content .page-title {
font-size: 25px;
line-height: 38px;
}
}
.breadcrumbs .breadcrumbs-content .breadcrumb-nav {
background: transparent;
border-radius: 0;
margin-bottom: 0;
padding: 0;
display: inline-block;
}
.breadcrumbs .breadcrumb-nav {
text-align: center;
margin-top: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.breadcrumbs .breadcrumb-nav {
margin-top: 10px;
}
}
@media (max-width: 767px) {
.breadcrumbs .breadcrumb-nav {
margin-top: 8px;
}
}
.breadcrumbs .breadcrumb-nav li {
display: inline-block;
position: relative;
padding-right: 15px;
margin-right: 15px;
text-transform: capitalize;
}
.breadcrumbs .breadcrumb-nav li:after {
content: "\ea5c";
font-family: lineIcons;
font-size: 10px;
position: absolute;
top: 4px;
right: -7px;
}
.breadcrumbs .breadcrumb-nav li:last-child {
margin: 0;
padding: 0;
}
.breadcrumbs .breadcrumb-nav li:last-child::after {
display: none;
}
.breadcrumbs .breadcrumb-nav li,
.breadcrumbs .breadcrumb-nav li a {
color: #fff;
font-size: 14px;
font-weight: 500;
}
.breadcrumbs .breadcrumb-nav li a {
position: relative;
}
.breadcrumbs .breadcrumb-nav li a:hover {
text-decoration: underline;
}
.section {
padding-top: 50px;
padding-bottom: 50px;
position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.section {
padding-top: 60px;
padding-bottom: 60px;
}
}
@media (max-width: 767px) {
.section {
padding-top: 50px;
padding-bottom: 50px;
}
}
/* Section Title */
.section-title {
text-align: center;
margin-bottom: 80px;
padding: 0 300px;
position: relative;
z-index: 5;
}
.section-title h3 {
font-size: 15px;
font-weight: 600;
display: block;
margin-bottom: 8px;
color: #ff6b81;
text-transform: uppercase;
}
.section-title h2 {
font-size: 36px;
margin-bottom: 25px;
line-height: 42px;
text-transform: uppercase;
position: relative;
font-weight:600;
}
.section-title p {
font-size: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.section-title {
padding: 0px 200px;
margin-bottom: 70px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.section-title {
padding: 0px 20px;
margin-bottom: 70px;
}
.section-title h3 {
font-size: 14px;
}
.section-title h2 {
font-size: 24px;
line-height: 32px;
margin-bottom: 20px;
}
.section-title p {
font-size: 14px;
}
}
@media (max-width: 767px) {
.section-title {
padding: 0px 10px;
margin-bottom: 60px;
}
.section-title h3 {
font-size: 14px;
}
.section-title h2 {
font-size: 20px;
line-height: 30px;
margin-bottom: 18px;
}
.section-title p {
font-size: 14px;
}
}
.section-title.align-right {
padding: 0;
padding-left: 600px;
}
.section-title.align-right h2:before {
display: none;
}
.section-title.align-right h2:after {
position: absolute;
right: 0;
bottom: -1px;
height: 2px;
width: 50px;
background: #ff6b81;
content: "";
}
.section-title.align-left {
padding: 0;
padding-right: 600px;
}
.section-title.align-left h2:before {
left: 0;
margin-left: 0;
}
/* One Click Scrool Top Button*/
.scroll-top {
width: 45px;
height: 45px;
line-height: 45px;
background: #539E10;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
color: #fff !important;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all .3s ease-out 0s;
transition: all .3s ease-out 0s;
border-radius: 5px;
}
.scroll-top:hover {
-webkit-box-shadow: 0 1rem 3rem rgba(35, 38, 45, 0.15) !important;
box-shadow: 0 1rem 3rem rgba(35, 38, 45, 0.15) !important;
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
background-color: #081828;
}
/* Overlay */
.overlay {
position: relative;
z-index: 1;
}
.overlay::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4;
background: #081828;
content: "";
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: -1;
}
/* Pagination CSS */
.pagination {
text-align: left;
margin: 40px 0 0 0;
display: block;
}
.pagination.center {
text-align: center;
}
.pagination.right {
text-align: right;
}
.pagination.left {
text-align: left;
}
.pagination .pagination-list {
display: inline-block;
overflow: hidden;
}
.pagination .pagination-list li {
margin-right: 5px;
display: inline-block;
margin-top: 10px;
}
.pagination .pagination-list li:last-child {
margin-right: 0px;
}
.pagination .pagination-list li a {
background: #fff;
color: #081828;
font-weight: 400;
font-size: 14px;
border-radius: 5px;
padding: 8px 20px;
text-align: center;
border: 1px solid #eee;
}
.pagination .pagination-list li.active a,
.pagination .pagination-list li:hover a {
background: #ff6b81;
color: #fff;
border-color: transparent;
}
.pagination .pagination-list li a i {
font-size: 13px;
}
.blog-grids.pagination {
margin-top: 50px;
text-align: center;
}
.button .btn {
display: inline-block;
text-transform: uppercase;
font-size: 15px;
font-weight: 600;
padding: 13px 30px;
background-color: #ff6b81;
color: #fff;
border: none;
-webkit-transition: 0.2s;
transition: 0.2s;
border-radius: 5px;
position: relative;
z-index: 1;
margin-right: 7px;
overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.button .btn {
padding: 12px 25px;
font-size: 14px;
font-weight: 500;
}
}
@media (max-width: 767px) {
.button .btn {
padding: 12px 25px;
font-size: 14px;
font-weight: 500;
}
}
.button .btn i {
display: inline-block;
margin-right: 5px;
}
.button .btn:last-child {
margin: 0;
}
.button .btn:hover {
color: #fff;
background-color: #081828;
-webkit-box-shadow: 0px 4px 4px #0000000f;
box-shadow: 0px 4px 4px #0000000f;
}
.button .btn-alt {
color: #fff !important;
background: transparent !important;
border: 2px solid #fff;
padding: 11px 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.button .btn-alt {
padding: 10px 30px;
}
}
@media (max-width: 767px) {
.button .btn-alt {
padding: 10px 30px;
}
}
.button .btn-alt:hover {
background-color: #fff !important;
color: #539E10!important;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-center {
text-align: center;
}
/* Preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
z-index: 999999999;
width: 100%;
height: 100%;
background-color: #fff;
overflow: hidden;
}
.preloader-inner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.preloader-icon {
width: 100px;
height: 100px;
display: inline-block;
padding: 0px;
}
.preloader-icon span {
position: absolute;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 100%;
background: #ff6b81;
-webkit-animation: preloader-fx 1.6s linear infinite;
animation: preloader-fx 1.6s linear infinite;
}
.preloader-icon span:last-child {
animation-delay: -0.8s;
-webkit-animation-delay: -0.8s;
}
@keyframes preloader-fx {
0% {
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 0;
}
}
@-webkit-keyframes preloader-fx {
0% {
-webkit-transform: scale(0, 0);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1, 1);
opacity: 0;
}
}
/*======================================
Start Header CSS
========================================*/
.header {
width: 100%;
background: #ffffff;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(83, 158, 16, 0.1);
position: fixed; /* CHANGE: absolute → fixed */
top: 0;
left: 0;
z-index: 99; /* zaroori hai taaki content ke upar rahe */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header {
padding: 18px 0 !important;
}
.header .mobile-menu-btn .toggler-icon {
background-color: #fff;
}
.header .button {
margin: 0 !important;
}
.header .navbar-collapse {
position: absolute;
top: 67px !important;
left: 0;
width: 100%;
background-color: #fff;
z-index: 9;
box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
padding: 10px 20px;
max-height: 350px;
overflow-y: scroll;
border-top: 1px solid #eee;
border-radius: 6px;
}
.header .navbar .navbar-nav .nav-item a:hover {
color: #539E10 !important;
}
.header .navbar .navbar-nav .nav-item a.active {
color: #539E10 !important;
}
.header .navbar-nav .nav-item {
margin: 0;
}
.header .navbar-nav .nav-item:hover a {
color: #ff6b81;
}
.header .navbar-nav .nav-item a {
padding: 12px 16px !important;
}
.header .navbar-nav .nav-item a::before {
display: none;
}
.header .navbar-nav .nav-item .sub-menu {
position: static;
width: 100%;
opacity: 1;
visibility: visible;
box-shadow: none;
padding: 0;
border: none;
margin-left: 15px;
margin-right: 15px;
}
.header .navbar-nav .nav-item .sub-menu .nav-item a {
padding: 12px 12px;
}
.header .navbar-nav .nav-item .sub-menu .nav-item a:hover {
color: #539E10 !important;
}
/* Yeh mobile dropdown ka text hai - background yahan white hi hai, isliye text dark rakha (white pe white text nahi dikhega) */
.header .navbar-nav .nav-item a {
color: #051441;
display: flex;
justify-content: space-between;
padding: 10px 0;
}
.header .navbar-nav .nav-item a::after {
opacity: 1;
visibility: visible;
}
.header .navbar-nav .nav-item .sub-menu li.active {
background: #fff !important;
color: #539E10 !important;
}
.header .navbar-nav .nav-item .sub-menu .nav-item {
margin: 0 !important;
}
.header .navbar-nav .nav-item .sub-menu .nav-item a {
padding: 10px 12px !important;
}
.header .navbar-nav .nav-item .sub-menu li:hover {
background: #fff !important;
color: #539E10 !important;
}
.header .navbar-nav .nav-item a {
font-size: 14px;
}
.header .navbar-nav .nav-item a:hover {
color: #ff6b81;
}
}
@media (max-width: 767px) {
.header {
padding: 18px 0;
}
.header .mobile-menu-btn .toggler-icon {
background-color: #fff;
}
.header .navbar-collapse {
position: absolute;
top: 58px !important;
left: 0;
width: 100%;
background-color: #fff;
z-index: 9;
box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
padding: 10px 20px;
max-height: 350px;
overflow-y: scroll;
border-top: 1px solid #eee;
border-radius: 6px;
}
.header .navbar .navbar-nav .nav-item a:hover {
color: #539E10 !important;
}
.header .navbar .navbar-nav .nav-item a.active {
color: #539E10 !important;
}
.header .navbar-nav .nav-item {
margin: 0;
}
.header .navbar-nav .nav-item:hover a {
color: #ff6b81;
}
.header .navbar-nav .nav-item a {
padding: 12px 16px !important;
}
.header .navbar-nav .nav-item a::before {
display: none;
}
.header .navbar-nav .nav-item .sub-menu {
position: static;
width: 100%;
opacity: 1;
visibility: visible;
box-shadow: none;
padding: 0;
border: none;
margin-left: 15px;
margin-right: 15px;
}
.header .navbar-nav .nav-item .sub-menu .nav-item a {
padding: 12px 12px;
}
.header .navbar-nav .nav-item .sub-menu .nav-item a:hover {
color: #539E10 !important;
}
.header .navbar-nav .nav-item a {
color: #051441;
display: flex;
justify-content: space-between;
padding: 10px 0;
}
.header .navbar-nav .nav-item a::after {
opacity: 1;
visibility: visible;
}
.header .navbar-nav .nav-item .sub-menu li.active {
background: #fff !important;
color: #539E10 !important;
}
.header .navbar-nav .nav-item .sub-menu .nav-item {
margin: 0 !important;
}
.header .navbar-nav .nav-item .sub-menu .nav-item a {
padding: 10px 12px !important;
}
.header .navbar-nav .nav-item .sub-menu li:hover {
background: #fff !important;
color: #539E10 !important;
}
.header .navbar-nav .nav-item a {
font-size: 14px;
}
.header .navbar-nav .nav-item a:hover {
color: #ff6b81;
}
}
@media (max-width: 767px) {
.header .button {
display: none;
}
}
.header .button .btn {
background-color: #539E10;
border: 2px solid #539E10;
color: #fff;
padding: 10px 37px;
}
.header .button .btn:hover {
background-color: #fff;
color: #539E10;
}
.header .navbar-brand img {
width: 165px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header .navbar-brand img {
width: 170px;
}
}
@media (max-width: 767px) {
.header .navbar-brand img {
width: 160px;
}
}
.navbar-expand-lg .navbar-nav {
margin: 0;
margin-left: auto !important;
margin-right: auto !important;
}
.header .navbar .navbar-nav .nav-item a.active {
color: #fff;
text-transform: uppercase;
border-bottom: transparent solid 2px;
}
.header .navbar .navbar-nav .nav-item a:hover {
color: #539E10;
border-bottom: #539E10 solid 2px;
}
.header .navbar .navbar-nav .nav-item a.active {
color: #539E10;
border-bottom: #539E10 solid 2px;
}
.header .navbar .navbar-nav .nav-item .sub-menu a.active {
color: #fff;
}
/*===== NAVBAR =====*/
.navbar-area {
width: 100%;
z-index: 99;
transition: all 0.3s ease-out 0s;
}
.navbar {
padding: 0;
position: relative;
transition: all 0.3s ease-out 0s;
}
.navbar-brand {
padding-left: 0;
border-radius: 0;
}
.mobile-menu-btn {
padding: 0px;
}
.mobile-menu-btn:focus {
text-decoration: none;
outline: none;
box-shadow: none;
}
.mobile-menu-btn .toggler-icon {
width: 30px;
height: 2px;
/* CHANGE: black background pe icon dikhna chahiye isliye white kiya */
background-color: #fff;
display: block;
margin: 5px 0;
position: relative;
transition: all 0.3s ease-out 0s;
}
.mobile-menu-btn.active .toggler-icon:nth-of-type(1) {
transform: rotate(45deg);
top: 7px;
}
.mobile-menu-btn.active .toggler-icon:nth-of-type(2) {
opacity: 0;
}
.mobile-menu-btn.active .toggler-icon:nth-of-type(3) {
transform: rotate(135deg);
top: -7px;
}
.navbar-nav .nav-item {
z-index: 1;
position: relative;
margin-right: 40px;
}
.navbar-nav .nav-item:last-child {
margin-right: 0 !important;
}
.navbar-nav .nav-item:hover a {
color: #fff;
}
.navbar-nav .nav-item a {
font-size: 15px;
/* CHANGE: item text white kar diya (pehle #000 tha) */
color: #000000;
transition: all 0.3s ease-out 0s;
position: relative;
padding: 35px 0;
display: inline-flex;
align-items: center;
font-weight: 600;
}
.navbar-nav .nav-item a::after {
opacity: 0;
visibility: hidden;
}
.navbar-nav .nav-item:hover a:before {
width: 100%;
}
.navbar-nav .nav-item a.active {
color: #fff;
}
.navbar-nav .nav-item a.dd-menu::after {
content: "\ea58";
font: normal normal normal 1em/1 "LineIcons";
position: absolute;
right: 17px;
font-size: 10px;
top: 50%;
margin-left: 5px;
margin-top: 0px;
transition: all 0.3s ease-out 0s;
height: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.navbar-nav .nav-item a.dd-menu::after {
right: 13px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.navbar-nav .nav-item a.dd-menu::after {
top: 18px;
right: 0;
transform: rotate(180deg);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.navbar-nav .nav-item a.collapsed::after {
transform: rotate(0deg);
}
}
.navbar-nav .nav-item:hover > .sub-menu {
top: 100%;
opacity: 1;
visibility: visible;
}
.navbar-nav .nav-item:hover > .sub-menu .sub-menu {
left: 100%;
top: 0;
}
.navbar-nav .nav-item .sub-menu {
padding: 30px;
min-width: 240px;
background: #fff;
box-shadow: 0px 5px 20px #0000001a;
position: absolute;
top: 110% !important;
left: 0;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-out 0s;
border-radius: 5px;
}
.navbar-nav .nav-item:hover .sub-menu {
top: 100% !important;
}
.navbar-nav .nav-item .sub-menu .nav-item {
width: 100%;
margin-bottom: 15px;
}
.navbar-nav .nav-item .sub-menu .nav-item:last-child {
margin: 0;
}
.navbar-nav .nav-item .sub-menu .nav-item a {
padding: 0;
/* Dropdown ka background white hai isliye yahan text dark hi rakha, warna dikhega nahi */
color: #888;
display: block;
width: 100%;
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
position: relative;
z-index: 1;
border-radius: 4px;
overflow: hidden;
transition: all 0.1s ease;
}
.navbar-nav .nav-item .sub-menu .nav-item a:hover {
color: #ff6b81;
}
.navbar-nav .nav-item .sub-menu.left-menu {
left: -100%;
}
.navbar-nav .nav-item .sub-menu.collapse:not(.show) {
display: block;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.navbar-nav .nav-item .sub-menu.collapse:not(.show) {
display: none;
}
}
.navbar-nav .nav-item .sub-menu > li {
display: block;
margin-left: 0;
}
.navbar-nav .nav-item .sub-menu > li:last-child {
border: none;
}
.navbar-nav .nav-item .sub-menu > li.active > a {
color: #539E10 !important;
}
.navbar-nav .nav-item .sub-menu > li > a {
font-weight: 400;
display: block;
padding: 12px 15px;
font-size: 14px;
color: #222;
}
.navbar-nav .nav-item .sub-menu > li:first-child a {
border: none;
}
.add-list-button {
display: inline-block;
margin-left: 10px;
}
.add-list-button .btn i {
font-size: 14px;
display: inline-block;
margin-right: 5px;
}
/*======================================
End Header CSS
========================================*/
/*======================================
Hero Area CSS
========================================*/
.nav-inner{background: #ffffff23; padding: 0 20px; margin: 0px 0;border-radius: 10px;}
.hero-area .framer img{width: 100%;}
.hero-area .framer{position: absolute; width: 100%; bottom: 0;}
.hero-area {
position: relative;
padding: 180px 0 220px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-area {
padding: 150px 0 60px 0;
}
}
@media (max-width: 767px) {
.nav-inner {
padding: 6px 14px;
margin: 0px 0 10px 0;
border-radius: 10px;
}
.header .navbar-brand img {
width: 115px;
}
.hero-area {
padding: 120px 0 50px 0;
}
}
.hero-area .hero-image img {
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-area .hero-image {
margin-top: 40px;
}
}
@media (max-width: 767px) {
.hero-area .hero-image {
margin-top: 40px;
}
}
.hero-area .hero-content {
border-radius: 0;
position: relative;
z-index: 1;
text-align: left;
padding-top: 250px !important;
}
/* our teams button*/
.hero-area .button .Join_now {
margin-top: 20px;
background-color: #539E10 !important;
border: 2px solid #539E10 !important;
color: #ffffff !important;
padding: 14px 40px !important;
font-size: 15px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
letter-spacing: 0.5px !important;
display: inline-block !important;
text-decoration: none !important;
}
/* our teams button*/
/* Hover Effect */
.hero-area .button .Join_now:hover {
background-color: #ffffff !important;
color: #539E10 !important;
border-color: #539E10 !important;
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(83, 158, 16, 0.35) !important;
}
/* ======================================== */
/* CHANGE BY VISHAL - Reverse Button (White to Green) START */
/* ======================================== */
/* Reverse Button - Normal State (White Background, Green Text) */
.hero-area .button .btn-reverse {
background-color: #ffffff !important; /* White background */
border: 2px solid #539E10 !important; /* Green border */
color: #539E10 !important; /* Green text */
padding: 14px 40px !important;
font-size: 15px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
letter-spacing: 0.5px !important;
display: inline-block !important;
text-decoration: none !important;
}
/* Reverse Button - Hover State (Green Background, White Text) */
.hero-area .button .btn-reverse:hover {
background-color: #539E10 !important; /* Green background */
color: #ffffff !important; /* White text */
border-color: #539E10 !important;
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(83, 158, 16, 0.35) !important;
}
/* CHANGE BY VISHAL - Reverse Button END */
/* ======================================== */
/* ======================================== */
/* CHANGE BY VISHAL - Hero Font Improvements START */
/* ======================================== */
/* Hero Content - Better Readability */
.hero-area .hero-content h1 {
font-family: "Inter", sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1.2;
color: #fdfdff;
letter-spacing: -0.02em;
text-shadow: 0px 3px 8px #00000017;
white-space: nowrap !important;
}
.hero-area .hero-content h1 span {
color: #539E10;
font-weight: 700;
}
/* Tagline Style */
.hero-area .hero-content h6 {
font-family: "Inter", sans-serif;
font-size: 20px;
font-weight: 600;
color: #539E10 !important;
letter-spacing: 0.3px;
margin-top: 16px;
}
/* Paragraph Style - Better Readability */
.hero-area .hero-content p {
font-family: "Inter", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.8;
color: #2d3748 !important;
letter-spacing: 0.2px;
max-width: 95%;
margin-top: 15px;
}
/* CHANGE BY VISHAL - Hero Font Improvements END */
/* ======================================== */
.hero-area .hero-content .button .btn {
background-color: #539E10;
border: 2px solid #539E10;
color: #fff;
padding: 12px 30px;
}
.hero-area .hero-content .button .btn i {
font-size: 17px;
}
.hero-area .hero-content .button .btn:hover {
background-color: #fff;
color: #539E10;
}
.hero-area .hero-content .button .btn.btn-alt {
background-color: #ffffff6b;
color: #fff;
}
.hero-area .hero-content .button .btn.btn-alt:hover {
background-color: #fff;
color: #ff6b81;
}
@media (max-width: 767px) {
.hero-area .hero-content .button .video-button {
margin-top: 20px;
}
}
.hero-area .hero-content .button .video-button .text {
display: inline-block;
margin-left: 15px;
color: #fff;
font-weight: 500;
}
.hero-area .hero-content .button .video-button:hover .video {
color: #fff;
background-color: #081828;
}
.hero-area .hero-content .button .video-button .video {
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
color: #ff6b81;
background-color: #fff;
border-radius: 50%;
margin-left: 10px;
font-size: 16px;
padding-left: 3px;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
position: relative;
}
.hero-area .hero-content .button .video-button .video:before {
position: absolute;
content: '';
left: 0;
top: 0;
height: 100%;
width: 100%;
border: 1px solid #fff;
border-radius: 50%;
-webkit-animation: pulse-border-2 2s linear infinite;
animation: pulse-border-2 2s linear infinite;
}
@-webkit-keyframes pulse-border {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
}
@keyframes pulse-border {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
}
@-webkit-keyframes pulse-border-2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 0;
}
}
@keyframes pulse-border-2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-area .hero-content h1 {
font-size: 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-area .hero-content {
text-align: center;
}
.hero-area .hero-content h1 {
font-size: 30px;
font-weight: 700;
line-height: 38px;
}
.hero-area .hero-content p {
font-size: 20px;
}
}
/* // Naya rule - dono buttons ke beech gap dene ke liye */
.hero-area .hero-btn-group {
display: flex;
gap: 20px; /* // yahan se gap kam-zyada kar sakte ho, jaise 15px ya 25px */
flex-wrap: wrap;
}
/* ======================================== */
/* CHANGE BY VISHAL - Responsive Font START */
/* ======================================== */
/* Responsive for Mobile */
@media (max-width: 767px) {
.hero-area .hero-content {
padding: 0 10px;
text-align: center;
}
.hero-area .hero-image img {
width: 48%;
}
.hero-area .hero-content h1 {
font-size: 26px !important;
line-height: 1.3 !important;
}
.hero-area .hero-content h6 {
font-size: 16px !important;
}
.hero-area .hero-content p {
font-size: 14px !important;
line-height: 1.7 !important;
max-width: 100% !important;
margin-top: 15px;
}
.hero-area .hero-content .button .btn {
width: 60%;
margin: 0;
margin-bottom: 7px;
}
.hero-area .hero-content .button .btn:last-child {
margin: 0;
}
}
/* CHANGE BY VISHAL - Responsive Font END */
/* ======================================== */
/*======================================
Features Area CSS
========================================*/
.features .row{display: flex; align-items: center;}
.features {
background-color: #FFF8F4;
}
.hireDeveloper h3{color: #000; font-size: 32px; font-weight: 500}
.hireDeveloper p{margin: 20px 0;}
.hireDeveloper .row{display: flex; align-items: center; color: #fff;}
.hireDeveloper {
padding:50px 0 50px 0;
background-color: #EAEFF7;
}
.features .section-title {
margin-bottom: 30px;
}
.features .single-feature {
text-align: left;
padding: 5px 15px 17px 45px;
background-color: #fff;
border-radius:10px;
position: relative;
margin-top: 20px;
border: 1px solid #D3D3D3;
-webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}
.features .single-feature:hover {
-webkit-box-shadow: 0px 3px 5px #00000017;
box-shadow: 0px 3px 5px #00000017;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.features .single-feature i {
margin-left: -28px;
position: relative;
top: 21px;
}
.features .single-feature h3 {
font-size: 18px;
font-weight: 500;
margin-bottom: 10px;
margin-top: 0px;
}
.features .single-feature p {
line-height: 22px;
}
/*======================================
Our Achievement CSS
========================================*/
.our-achievement {
background-color: #ff6b81;
text-align: center;
padding: 130px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.our-achievement {
padding: 80px 0;
}
}
@media (max-width: 767px) {
.our-achievement {
padding: 60px 0;
}
}
.our-achievement .title h2 {
color: #fff;
font-weight: 700;
font-size: 35px;
margin-bottom: 10px;
}
.our-achievement .title p {
color: #fff;
}
.our-achievement .single-achievement {
margin-top: 50px;
text-align: center;
padding: 0px 10px;
}
.our-achievement .single-achievement h3 {
font-size: 35px;
font-weight: 800;
display: block;
margin-bottom: 5px;
color: #fff;
}
.our-achievement .single-achievement p {
font-size: 15px;
color: #fff;
font-weight: 500;
text-transform: capitalize;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.our-achievement .title h2 {
font-size: 24px;
line-height: 32px;
}
.our-achievement .single-achievement {
margin-top: 30px;
}
.our-achievement .single-achievement h3 {
font-size: 28px;
}
}
/*=============================
Pricing Table CSS
===============================*/
.pricing-table {
background-color: #f9f9f9;
}
.pricing-table .section-title {
margin-bottom: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.pricing-table .section-title {
margin-bottom: 30px;
}
}
.pricing-table .single-table {
border: 1px solid #eee;
border-radius: 10px;
margin-top: 30px;
background-color: #fff;
-webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}
.pricing-table .single-table:hover:hover {
-webkit-box-shadow: 0px 3px 5px #00000017;
box-shadow: 0px 3px 5px #00000017;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.pricing-table .single-table .table-head {
padding: 25px;
border-bottom: 1px solid #eee;
}
.pricing-table .single-table .table-head .title {
font-size: 16px;
font-weight: 600;
margin-bottom: 20px;
}
.pricing-table .single-table .table-head p {
font-weight: 400;
font-size: 14px;
line-height: 22px;
}
.pricing-table .single-table .table-head .price {
padding: 30px 0;
}
.pricing-table .single-table .table-head .price .amount {
font-size: 30px;
font-weight: 700;
display: inline-block;
}
.pricing-table .single-table .table-head .price .amount .duration {
display: inline-block;
font-size: 14px;
color: #888;
font-weight: 400;
margin-left: 3px;
}
.pricing-table .single-table .table-head .button .btn {
width: 100%;
padding: 12px 30px;
font-size: 13px;
background-color: #081828;
}
.pricing-table .single-table .table-head .button .btn:hover {
background-color: #ff6b81;
color: #fff;
}
.pricing-table .single-table .table-content {
padding: 25px;
}
.pricing-table .single-table .table-content .middle-title {
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 25px;
}
.pricing-table .single-table .table-content .table-list li {
position: relative;
padding-left: 25px;
font-size: 14px;
margin-bottom: 13px;
}
.pricing-table .single-table .table-content .table-list li:last-child {
margin: 0;
}
.pricing-table .single-table .table-content .table-list li i {
color: #ff6b81;
font-size: 14px;
position: absolute;
left: 0;
top: 4px;
}
/*======================================
Call To Action CSS
========================================*/
.call-action {
background-color: #ff6b81;
}
.call-action .cta-content {
text-align: center;
padding: 0px 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.call-action .cta-content {
padding: 0;
}
}
@media (max-width: 767px) {
.call-action .cta-content {
padding: 0;
}
}
.call-action .cta-content h2 {
color: #fff;
line-height: 50px;
font-size: 38px;
font-weight: 700;
margin-bottom: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.call-action .cta-content h2 {
font-size: 32px;
line-height: 45px;
}
}
@media (max-width: 767px) {
.call-action .cta-content h2 {
font-size: 25px;
line-height: 35px;
}
}
.call-action .cta-content p {
color: #fff;
padding: 0px 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.call-action .cta-content p {
padding: 0;
}
}
@media (max-width: 767px) {
.call-action .cta-content p {
padding: 0;
}
}
.call-action .cta-content .button {
margin-top: 40px;
}
.call-action .cta-content .button .btn {
background-color: #fff;
color: #ff6b81;
}
.call-action .cta-content .button .btn:hover {
color: #fff;
background-color: #081828;
}
/*======================================
Error 404 CSS
========================================*/
.error-area {
height: 100vh;
text-align: center;
width: auto;
margin-left: auto;
margin-right: auto;
background-color: #fff;
position: relative;
}
.d-table {
width: 100%;
height: 100%;
}
.d-table {
display: table !important;
}
.d-table-cell {
vertical-align: middle;
}
.d-table-cell {
display: table-cell !important;
}
.error-area .error-content h1 {
font-size: 100px;
color: #ff6b81;
margin-bottom: 25px;
font-weight: 800;
line-height: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.error-area .error-content h1 {
font-size: 60px;
line-height: 50px;
}
}
@media (max-width: 767px) {
.error-area .error-content h1 {
font-size: 45px;
line-height: 30px;
}
}
.error-area .error-content h2 {
font-size: 25px;
margin-bottom: 10px;
color: #081828;
font-weight: 700;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.error-area .error-content h2 {
font-size: 22px;
}
}
@media (max-width: 767px) {
.error-area .error-content h2 {
font-size: 18px;
}
}
.error-area .error-content p {
font-weight: 400;
margin-bottom: 40px;
color: #888;
}
/*======================================
Footer CSS
========================================*/
.footer {
background-color: #0B2D1B;
position: relative;
}
.footer .footer-top {
padding: 70px 0 0px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer .footer-top {
padding: 80px 0;
padding-top: 40px;
}
}
@media (max-width: 767px) {
.footer .footer-top {
padding: 60px 0;
padding-top: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer .single-footer {
margin-top: 40px;
}
}
@media (max-width: 767px) {
.footer .single-footer {
margin-top: 40px;
text-align: center;
}
}
@media (max-width: 767px) {
.footer .single-footer.f-about {
padding: 0;
}
}
.footer .single-footer.f-about .logo img {
width: 180px;
}
.footer .single-footer.f-about p {
color: #D2D6DC;
margin-top: 20px;
font-size: 14px;width: 80%;
}
.footer .single-footer.f-about .social li {
display: inline-block;
margin-right: 17px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer .single-footer.f-about .social li {
margin-bottom: 10px;
}
}
@media (max-width: 767px) {
.footer .single-footer.f-about .social li {
margin-bottom: 10px;
}
}
.footer .single-footer.f-about .social li:last-child {
margin: 0;
}
.footer .single-footer.f-about .social li a {
color: #D2D6DC;
font-size: 15px;
}
.footer .single-footer.f-about .social li a:hover {
color: #ff6b81;
}
.footer .single-footer.f-about .social li:last-child {
margin: 0;
}
.footer .single-footer.f-about .copyright-text {
color: #D2D6DC;
font-size: 14px;
margin-top: 40px;
}
@media (max-width: 767px) {
.footer .single-footer.f-about .copyright-text {
margin-top: 20px;
}
}
.footer .single-footer.f-about .copyright-text a {
color: #D2D6DC;
}
.footer .single-footer.f-about .copyright-text a:hover {
color: #ff6b81;
}
.footer .single-footer.f-link li {
display: block;
margin-bottom: 12px;
}
.footer .single-footer.f-link li:last-child {
margin: 0;
}
.footer .single-footer.f-link li a {
font-size: 15px;
font-weight: 400;
color: #D2D6DC;
}
.footer .single-footer.f-link li a:hover {
color: #ff6b81;
}
.social{margin:10px 0 5px 0}
.footer .single-footer h3 {
font-size: 18px;
font-weight: 600;
display: block;
margin-bottom: 10px;
color: #D2D6DC;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer .single-footer h3 {
margin-bottom: 25px;
}
}
@media (max-width: 767px) {
.footer .single-footer h3 {
margin-bottom: 25px;
}
}
.footer .footer-newsletter {
padding-bottom: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer .footer-newsletter {
padding-bottom: 80px;
}
}
@media (max-width: 767px) {
.footer .footer-newsletter {
padding-bottom: 60px;
text-align: center;
}
}
.footer .footer-newsletter .inner-content {
border: 2px solid rgba(238, 238, 238, 0.171);
padding: 50px;
border-radius: 8px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer .footer-newsletter .inner-content {
padding: 30px;
}
}
@media (max-width: 767px) {
.footer .footer-newsletter .inner-content {
padding: 30px;
}
}
.footer .footer-newsletter .title {
position: relative;
}
.footer .footer-newsletter .title h3 {
color: #D2D6DC;
font-size: 18px;
display: block;
margin-bottom: 10px;
font-weight: 600;
text-transform: capitalize;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer .footer-newsletter .title h3 {
font-size: 16px;
}
}
@media (max-width: 767px) {
.footer .footer-newsletter .title h3 {
font-size: 16px;
}
}
.footer .footer-newsletter .title p {
font-size: 15px;
color: #D2D6DC;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer .footer-newsletter .title p {
font-size: 14px;
}
}
@media (max-width: 767px) {
.footer .footer-newsletter .title p {
font-size: 14px;
}
}
.footer .footer-newsletter .title p a {
color: #ff6b81;
text-decoration: underline;
}
.footer .footer-newsletter .title p a:hover {
color: #fff;
}
.footer .footer-newsletter .newsletter-form {
position: relative;
}
@media (max-width: 767px) {
.footer .footer-newsletter .newsletter-form {
margin-top: 30px;
}
}
.footer .footer-newsletter .newsletter-form input {
height: 48px;
width: 300px;
display: inline-block;
background: transparent;
border: none;
color: #fff;
border-radius: 0;
padding: 0 20px;
color: #fff !important;
font-size: 14px;
background-color: #fff3;
border-radius: 5px;
float: right;
margin-right: 148px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer .footer-newsletter .newsletter-form input {
width: 100%;
margin: 0;
padding-right: 144px;
}
}
@media (max-width: 767px) {
.footer .footer-newsletter .newsletter-form input {
width: 100%;
margin: 0;
text-align: center;
}
}
.footer .footer-newsletter .newsletter-form ::-webkit-input-placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #fff;
opacity: 1;
/* Firefox */
}
.footer .footer-newsletter .newsletter-form :-ms-input-placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #fff;
opacity: 1;
/* Firefox */
}
.footer .footer-newsletter .newsletter-form ::-ms-input-placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #fff;
opacity: 1;
/* Firefox */
}
.footer .footer-newsletter .newsletter-form ::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #fff;
opacity: 1;
/* Firefox */
}
.footer .footer-newsletter .newsletter-form :-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #fff;
}
.footer .footer-newsletter .newsletter-form ::-ms-input-placeholder {
/* Microsoft Edge */
color: #fff;
}
.footer .footer-newsletter .newsletter-form .button {
display: inline-block;
position: absolute;
right: 0;
}
@media (max-width: 767px) {
.footer .footer-newsletter .newsletter-form .button {
position: relative;
margin-top: 10px;
left: 0;
bottom: 0;
width: 100%;
}
.footer .footer-newsletter .newsletter-form .button .btn {
width: 100%;
}
}
.footer .footer-newsletter .newsletter-form .button .btn {
display: inline-block;
background: #ff6b81;
color: #fff;
height: 48px;
line-height: 48px;
padding: 0 30px;
}
.footer .footer-newsletter .newsletter-form .button .btn::before {
background-color: #fff;
}
.footer .footer-newsletter .newsletter-form .button .btn:hover {
color: #ff6b81;
background-color: #fff;
}
/*aboutus*/
.about-area{padding: 70px 0;}
.Join_now{background-color: #539E10;
border: 2px solid #539E10;
color: #fff;
padding: 12px 30px; text-transform: uppercase; font-weight: 600; margin-top: 10px;}
.about-area p{color:#6C6C72; margin: 20px 0}
h3{font-size: 32px; font-weight: 600; margin: 20px 0}
.about-area .row{display: flex; align-items: center;}
h2.title{text-align: left; margin-bottom: 30px; font-size: 36px;}
.clients-area{padding: 10px 0; background: #F7F7FA; border-top: #E7DAED solid 1px; border-bottom: #E7DAED solid 1px;}
.clients_logo {margin: 30px 0; text-align: center;}
.clients_logo li{display: inline-block; margin-bottom: 20px; text-align: center; width: 19% !important;}
.clients-area .owl-dots{display: none !important;}
.footer form {
margin-top: 0px;
background: #fff;
padding: 6px 10px 6px 15px;
position: relative;
border-radius: 4px;
}
.footer form input[type=email] {
border: 0;
padding: 4px;
width: calc(100% - 53px);
}
.footer form button{border: 0;}
.footer form input[type=submit]:hover {
background: #149f6e;
}
.bottom_footer{display: flex; justify-content: space-between; align-items: center; border-top: #fff solid 1px; padding: 20px 0; margin: 50px 0 0 0}
.bottom_footer p{color: #fff}
.designedby{color: #ccc !important}
.designedby a{color: #ccc !important}
.owl-carousel.version-1, .owl-carousel.version-2{
position: relative;
padding: 15px 35px 0;
}
.owl-carousel .owl-item {
background: #fff;
padding: 0 0px;
}
.owl-nav button span{ font-size: 700;
color: #fff; font-size: 22px; line-height: 22px;}
.owl-nav button {
width: 30px;
height: 30px;
background: #539E10 !important;
border-radius:100px !important;
margin: auto 0;
}
.owl-nav button.owl-next{
right: 0;
}
.owl-nav button.owl-prev{
left: 0;
}
.version-2 h2 {
margin: 0px;
font-size: 20px;
}
.version-2 p {
font-size: 15px;
}
.version-2 .owl-item{
text-align: center;
padding: 10px 20px 20px;
}
.version-2 .owl-item img{
width: 160px;
margin: 0 auto;
}
.logo-slider{margin: 40px 0}
.owl-dots{margin-top: 20px; display: block !important;}
.owl-theme .owl-nav [class*=owl-]{margin: 0 !important; top: 21px;}
.owl-carousel .owl-nav button.owl-next{right: -4px; position: relative;}
.owl-carousel .owl-nav button.owl-prev{left: -4px; position: relative;}
.login{color: #fff; text-transform: uppercase; font-size: 15px; text-decoration: none;
font-weight: 600; margin-right: 14px;}
.login:hover{color: #fff;}
@media (max-width: 767px) {
.owl-dots{display: none;}
.owl-theme .owl-nav [class*=owl-] {
margin: 0 !important;
top: 12px;}
.studio h3{font-size: 20px; margin: 0 4%;}
.features .section-title img{width: 70%}
.clients-area .col-md-8 img{width: 70%}
.about-area img{width: 70%}
.about-area p{text-align: justify;}
.clients-area .owl-nav {
display: inline !important;
position: relative;
right: auto;
top: auto;
text-align: center;
width: 100%;
display: block !important;
}
h3, h2{font-size: 22px !important; text-transform: uppercase; font-weight: 500}
.about-area {
padding:50px 0 !important;
}
.about-area p{margin-bottom: 30px; }
.about-area{text-align: center;}
.clients_logo li {
width: 48% !important;
}
.clients-area {
padding:50px 0 !important;
}
.studio {text-align: center;}
.Join_now{margin-bottom:30px;}
.footer .single-footer.f-about p {
width: 100%;
}
.bottom_footer {
display: block;
text-align: center;
}
.bottom_footer {
margin: 10px 0 0 0;
}
.social {
margin: 20px 0 5px 0;
}
}
@media (max-width: 425px) {
.navbar-area.sticky{
padding: 3px 0 !important;
}
.hero-area .hero-content h1 {
font-size: 18px;
line-height: 25px;
}
.features .single-feature i {
margin-left: auto;
position: relative;
top: auto;
margin-bottom: 5px;
display: block;
}
.features .single-feature {
padding: 15px;}
.section {
padding-top: 30px;
padding-bottom: 30px;
}
.clients_logo li {
width: 49% !important;
margin-bottom: 5px;
}
.clients-area {
padding: 0px 0 20px 0 !important;
}
.boxes .st_card{margin-bottom: 20px;}
.footer_details h2{margin: 20px 0 6px 0}
.boxes2 .st_card {margin: 10px 0}
.specialists .st_card{margin: 10px 0}
.services_We_Offer .st_card{margin: 10px 0}
.serviestxts {
margin: 26px 0% 0px 0%;
}
.services_We_Offer p {
text-align: center;
margin: 10px 0%;
}
}
.services-offers{background: #fafbff; padding: 50px 0 100px 0}
.services-offers .card_service p{font-size: 16px;}
.services-offers .card_service{ background: #fff; box-shadow: 1px 4px 20px 0px #cccccc5c; border: #fff solid 2px; padding: 30px; border-radius: 10px}
.services-offers .card_service:hover{ border: #6CC04A solid 2px; }
.services-offers .card_service h2{font-size: 20px; padding: 10px 0}
.services-offers .owl-stage-outer{padding: 30px 0}
.services-offers .card_service span{ height: 50px;
width: 50px;
border: #539e10 solid 1px;
font-size: 22px;
text-align: center;
display: inline-block;
line-height: 50px;
border-radius: 100px;
font-weight: 500;}
.owl-nav{display: none;}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background: #539E10 !important;
}
.logo_slider{padding: 100px 0 0 0;}
.clients-area .owl-nav{ display: inline !important;
position: absolute;
right: 15%;
top: -141px;}
.testomonials{padding: 100px 0}
.testomonials .card_service{text-align: center;}
.testomonials h2{font-size: 32px;}
.consulting{
background: rgb(98,164,19);
background: linear-gradient(225deg, rgba(98,164,19,1) 0%, rgba(3,59,155,1) 100%);
padding: 90px 0;
}
.consulting{text-align: center; color: #fff}
.consulting h2{color: #fff; font-size: 32px;}
.consulting .st_card{padding: 30px;}
.consulting .st_card h2{font-size: 22px; padding: 20px 0}
.consulting .st_card span{font-size: 46px; font-weight: 900}
.boxes{padding: 60px 0}
.boxes .st_card{padding: 30px; border:#D2D2D2 solid 2px; border-radius: 15px; text-align: center;}
.boxes .st_card h2{font-size: 22px; padding: 20px 0}
.boxes .st_card span{font-size: 46px; font-weight: 900}
.boxes .st_card img{height: 70px}
.boxes .st_card a{border-radius: 100px; border: #539E10 solid 2px; padding: 3px 17px; display: inline-block; margin-top: 10px; font-weight: 600; color: #539E10}
.clients-area2 .owl-nav{display: none !important;}
.clients-area2{padding: 40px 0; background: #fff !important}
footer{padding: 90px 0}
.faddress i{color:#539E10; margin-right: 5px;}
.faddress p{margin: 7px 0;color: #718096;}
.footer_details ul li a{color: #718096; margin: 5px;}
.footer_details h2{font-size: 20px; font-weight: 400}
.socialmedia a {
box-shadow: #ccc 2px 2px 2px;
background: #FAFAFA;
width: 36px;
height: 36px;
text-align: center;
line-height: 40px;
color: #539e10;
border-radius: 100px;
margin-left: 6px;
}
.about_hero_section{padding: 140px 0 80px 0; text-align: center;}
.about_hero_section h2{font-size: 32px; margin: 30px 0; line-height: 32px;}
.about_hero_section h3{font-size: 19px; color: #539E10}
.about_hero_section p{font-size: 19px;}
.img-fluid {
max-width: 100%;
height: auto;
width: 100%;
}
.boxes2{padding: 100px 0}
.boxes2 .st_card{padding: 30px; background:#EFF8FF; border-radius: 15px; text-align: center;}
.boxes2 .st_card h2{font-size: 32px; padding: 0px 0 5px 0}
.boxes2 .st_card span{font-size: 46px; font-weight: 900}
.boxes2 .st_card img{height: 70px}
.boxes2 .st_card a{border-radius: 100px; border: #539E10 solid 2px; padding: 3px 17px; display: inline-block; margin-top: 10px; font-weight: 600; color: #539E10}
.specialists{padding: 0px 0 60px 0}
.specialists .st_card:hover{padding: 30px; background:#539E10; cursor: pointer;}
.specialists .st_card:hover h2{color:#fff}
.specialists .st_card:hover p{color:#fff}
.specialists .st_card:hover span{background:#fff; width: 70px; height: 70px; line-height: 60px; text-align: center; border-radius: 100px;}
.specialists .st_card{padding: 30px; border:#D2D2D2 solid 2px; border-radius: 15px; text-align: left;}
.specialists .st_card h2{font-size: 22px; padding: 20px 0}
.specialists .st_card span{font-size: 46px; font-weight: 900}
.specialists .st_card img{height: 44px}
.specialists .st_card a{border-radius: 100px; border: #539E10 solid 2px; padding: 3px 17px; display: inline-block; margin-top: 10px; font-weight: 600; color: #539E10}
.servies_hero h2{color: #fff}
.servies_hero{background: url(../images/banner_inner1.png); margin-top: 90px;
padding: 100px 0;
text-align: center;
color: #fff;}
.serviestxts{margin: 0 10%;}
.serviestxts h2{font-size: 32px;}
.serviestxts p{margin:20px 0 }
.serviestxts .knowmore{background-color: #539E10;
border: 2px solid #539E10;
color: #fff;
border-radius: 10px;
padding: 10px 37px;}
.services_We_Offer{padding: 60px 0 60px 0; background: #F9F9FF}
.services_We_Offer .st_card:hover{padding: 30px; background:#539E10; cursor: pointer;}
.services_We_Offer .st_card:hover h2{color:#fff}
.services_We_Offer .st_card:hover p{color:#fff}
.services_We_Offer .st_card:hover span{background:#fff; width: 70px; height: 70px; line-height: 60px; text-align: center; border-radius: 100px;}
.services_We_Offer .st_card{padding: 30px; background: #fff; border-radius: 15px; text-align: center;}
.services_We_Offer .st_card h2{font-size: 22px; padding: 20px 0; margin: 0 !important; text-align: center;}
.services_We_Offer .st_card span{font-size: 46px; font-weight: 900}
.services_We_Offer .st_card img{height: 44px}
.services_We_Offer .st_card a{border-radius: 100px; border: #539E10 solid 2px; padding: 3px 17px; display: inline-block; margin-top: 10px; font-weight: 600; color: #539E10}
.services_We_Offer h2{ text-align: center; }
.services_We_Offer p{ text-align: center; margin: 10px 30%; }
.services_We_Offer .st_card p{ text-align: center; margin: 0px 0%; }
.ulist li{display: flex; margin: 0 0 20px 0; justify-content: center; align-items: center;}
.ulist li img{margin-right:25px; width: 90px }
.ulist li h3{font-size: 22px; margin:0 0 8px 0; padding: 0; }
.howitwork h2{font-size: 32px;}
.howitwork p{ text-align: left; margin: 10px 18% 58px 0;}
.ulist p{margin: 0 !important }
.howitwork{padding: 90px 0 90px 0;}
.about-area1 {
background: #F9F9FF;
padding: 70px 0;
}
.caseStuies_hero h2{color: #fff}
.caseStuies_hero{background: url(../images/banner_inner1.png); margin-top: 90px;
padding: 100px 0;
text-align: center;
color: #fff;}
.blogs{margin-bottom: 100px;}
.blogs h2{font-size: 20px; padding: 10px 0}
.blogs p{font-size: 16px; padding: 0px 0 10px 0}
.blogs .readMore
{background-color: #539E10;
border-radius: 10px; margin-bottom: 20px;
border: 2px solid #539E10;
color: #fff;
padding: 4px 27px;}
.contact_info{background: #F6F1F8;border: #E1D5D5 solid 1px; border-radius: 22px; padding: 30px; text-align: center;}
.contact_form_box{margin: 60px 0}
.contact_info h3{color:#539E10; font-size: 22px; margin:10px 0; padding: 0; }
.contact_form{background: #F6F1F8;border: #E1D5D5 solid 1px; border-radius: 22px; padding: 30px;}
.contact_form h2{font-size: 22px; margin-bottom: 10px; color: #539E10}
.contact_form input{background:#fff; width: 100%; border: #E1D5D5 solid 1px; margin-bottom: 10px; border-radius: 12px; padding:15px; }
.contact_form textarea{background:#fff; width: 100%; height: 91px; border: #E1D5D5 solid 1px; margin-bottom: 10px; border-radius: 12px; padding:15px; }
.contact_form button{background-color: #539E10;
border: 2px solid #539E10;
color: #fff;
padding: 10px 87px; border-radius: 10px;}
.map iframe{border-radius: 22px; margin-top: 20px}
/* show more css */
.more-content {
display: none;
}
/* Background Video Positioning */
.hero-area {
position: relative;
overflow: hidden;
padding: 180px 0 220px 0;
}
.hero-bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
/* Brings text, buttons, and image on top of the video */
.hero-area .container {
position: relative;
z-index: 2;
}
/* ======================================== */
/* HERO SECTION - BOTTOM ALIGN START */
/* ======================================== */
/* Hero Section - Full Height with Content at Bottom */
.hero-area {
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: flex-end;
padding: 80px 0 40px 0;
}
/* Hero Background Video */
.hero-bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
/* Container - Flex column, push content to bottom */
.hero-area .container {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 30px;
}
/* Row - Bottom aligned */
.hero-area .row {
display: flex !important;
align-items: flex-end !important;
width: 100%;
margin: 0 !important;
}
/* Hero Content - No top padding */
.hero-area .hero-content {
border-radius: 0;
position: relative;
z-index: 1;
text-align: left;
padding-top: 0 !important;
padding-bottom: 20px;
width: 100%;
}
/* Heading - Keep as is */
.hero-area .hero-content h1 {
font-family: "Inter", sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1.2;
color: #fdfdff;
letter-spacing: -0.02em;
text-shadow: 0px 3px 8px #00000017;
white-space: nowrap !important;
}
/* Paragraph - Keep as is */
.hero-area .hero-content p {
font-family: "Inter", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.8;
color: #ffffff !important;
letter-spacing: 0.2px;
max-width: 95%;
margin-top: 15px;
}
/* Buttons - Keep as is */
.hero-area .hero-btn-group {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
/* Mobile Responsive */
@media (max-width: 767px) {
.hero-area {
min-height: 90vh;
padding: 60px 0 20px 0;
}
.hero-area .container {
padding-bottom: 15px;
}
.hero-area .hero-content {
padding: 0 10px !important;
text-align: center;
padding-bottom: 10px !important;
}
.hero-area .hero-content h1 {
font-size: 24px !important;
white-space: normal !important;
}
.hero-area .hero-content p {
font-size: 13px !important;
max-width: 100% !important;
}
.hero-area .hero-btn-group {
justify-content: center;
}
}
/* ======================================== */
/* HERO SECTION - BOTTOM ALIGN END */
/* ======================================== */
/* Fixed Center-Right Contact Us Button - VERTICAL */
/* Fixed Center-Right Contact Us Button - VERTICAL */
/* Fixed Center-Right Contact Us Button - VERTICAL with
*/
.floating-contact-btn {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 999;
background-color: #539E10;
color: #ffffff;
border: none;
border-radius: 8px 0 0 8px;
box-shadow: -2px 4px 15px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.3s ease;
/* === VERTICAL TEXT with
=== */
padding: 15px 10px;
min-height: 180px;
width: 40px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.6;
text-align: center;
}
.floating-contact-btn:hover {
background-color: #081828;
color: #ffffff;
box-shadow: -2px 6px 20px rgba(0, 0, 0, 0.3);
}
/* ======================================== */
/* CHANGE BY VISHAL - Contact Form Override START */
/* ======================================== */
/* Modal Background - White */
#contactUsModal .modal-content {
background: #ffffff !important;
border-radius: 16px !important;
border: 1px solid rgba(0,0,0,0.08) !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}
/* Modal Header - Light Green */
#contactUsModal .modal-header {
background: #e8f5e9 !important;
border-bottom: 1px solid rgba(83, 158, 16, 0.15) !important;
padding: 20px 30px 15px 30px !important;
border-radius: 16px 16px 0 0 !important;
}
#contactUsModal .modal-header .modal-title {
color: #1a1a2e !important;
font-size: 22px !important;
font-weight: 700 !important;
}
#contactUsModal .modal-header .btn-close {
filter: none !important;
opacity: 0.6 !important;
}
#contactUsModal .modal-header .btn-close:hover {
opacity: 1 !important;
}
/* Modal Body - White */
#contactUsModal .modal-body {
padding: 15px 30px 30px 30px !important;
background: #ffffff !important;
}
/* Right Column - Light Green Background */
#contactUsModal .modal-body .col-md-7 {
background: #f0f7e8 !important; /* Light Green */
border-radius: 0 0 16px 0 !important;
}
/* Labels - Dark */
#contactUsModal .form-label {
color: #1a1a2e !important;
font-weight: 500 !important;
font-size: 13px !important;
letter-spacing: 0.3px !important;
margin-bottom: 5px !important;
}
/* Inputs - White Background */
#contactUsModal .form-control {
background: #ffffff !important;
border: 1px solid #d4edda !important;
color: #1a1a2e !important;
border-radius: 10px !important;
padding: 12px 16px !important;
font-size: 14px !important;
transition: all 0.3s ease !important;
}
/* Input Placeholder */
#contactUsModal .form-control::placeholder {
color: rgba(0,0,0,0.35) !important;
font-size: 13px !important;
}
/* Input Focus - Green Outline */
#contactUsModal .form-control:focus {
background: #ffffff !important;
border-color: #539E10 !important;
box-shadow: 0 0 0 4px rgba(83, 158, 16, 0.15) !important;
outline: none !important;
color: #1a1a2e !important;
}
/* Textarea */
#contactUsModal textarea.form-control {
resize: vertical !important;
min-height: 80px !important;
}
/* ======================================== */
/* CHANGE BY VISHAL - Submit Button - Green */
/* ======================================== */
/* Submit Button - Green */
#contactUsModal .Join_now {
background: linear-gradient(135deg, #539E10, #3d7a0c) !important;
border: none !important;
color: #ffffff !important;
padding: 14px 30px !important;
font-size: 15px !important;
font-weight: 600 !important;
border-radius: 10px !important;
transition: all 0.3s ease !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
margin-top: 5px !important;
width: 100% !important;
}
/* Submit Button Hover - Darker Green */
#contactUsModal .Join_now:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(83, 158, 16, 0.4) !important;
background: linear-gradient(135deg, #3d7a0c, #2d5e09) !important;
}
/* Submit Button Disabled */
#contactUsModal .Join_now:disabled {
opacity: 0.7 !important;
transform: none !important;
cursor: not-allowed !important;
}
/* ======================================== */
/* Floating Label Effect - Light Theme */
/* ======================================== */
#contactUsModal .form-group-float {
position: relative;
}
#contactUsModal .form-group-float .form-control {
padding-top: 20px !important;
padding-bottom: 8px !important;
}
#contactUsModal .form-group-float .form-label {
position: absolute;
left: 16px;
top: 16px;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
color: rgba(0,0,0,0.4) !important;
pointer-events: none;
transition: all 0.2s ease;
background: transparent;
}
#contactUsModal .form-group-float textarea ~ .form-label {
top: 16px;
}
#contactUsModal .form-group-float .form-control:focus ~ .form-label,
#contactUsModal .form-group-float .form-control:not(:placeholder-shown) ~ .form-label {
top: -9px;
left: 12px;
font-size: 11px !important;
font-weight: 600 !important;
color: #539E10 !important;
background: #f0f7e8;
padding: 0 6px;
letter-spacing: 0.3px;
}
/* Status Messages - Light Theme */
#formStatus .alert-success {
background: rgba(83, 158, 16, 0.1) !important;
color: #2d5e09 !important;
border: 1px solid rgba(83, 158, 16, 0.2) !important;
border-radius: 10px !important;
padding: 12px 16px !important;
font-size: 14px !important;
}
#formStatus .alert-danger {
background: rgba(255, 0, 0, 0.08) !important;
color: #c62828 !important;
border: 1px solid rgba(255, 0, 0, 0.15) !important;
border-radius: 10px !important;
padding: 12px 16px !important;
font-size: 14px !important;
}
/* Responsive */
@media (max-width: 576px) {
#contactUsModal .modal-body {
padding: 15px 20px 25px 20px !important;
}
#contactUsModal .modal-header {
padding: 15px 20px 10px 20px !important;
}
#contactUsModal .modal-header .modal-title {
font-size: 18px !important;
}
#contactUsModal .form-control {
padding: 10px 14px !important;
font-size: 13px !important;
}
#contactUsModal .Join_now {
padding: 12px 20px !important;
font-size: 14px !important;
}
}
/* CHANGE BY VISHAL - Contact Form Override END */
/* ======================================== */
/* Force Hero Row and Columns to Stretch Equally */
.hero-area .row {
display: flex !important;
align-items: stretch !important;
}
/* Force the right image column to pass down the stretched height */
.hero-area .row > [class*="col-"]:last-child {
display: flex !important;
flex-direction: column !important;
}
/* Force hero-image wrapper to fill 100% height */
.hero-area .hero-image {
height: 100% !important;
width: 100% !important;
display: flex !important;
overflow: hidden;
border-radius: 8px;
}
/* Force the image to cover full height without distortion */
.hero-area .hero-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* ==========================================
Model Training Wave Process Styles
========================================== */
.model-process-section {
padding: 80px 0;
background-color: #f8fafc;
position: relative;
}
.section-tag {
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: #64748b;
font-weight: 600;
}
.process-title {
font-size: 38px;
font-weight: 700;
color: #0f172a;
margin-top: 5px;
}
.process-subtitle {
font-size: 15px;
color: #64748b;
}
.wave-timeline-wrapper {
position: relative;
width: 100%;
height: 380px;
margin-top: 40px;
}
.wave-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* Node Positioning & Styling */
.process-node-item {
position: absolute;
transform: translate(-50%, -50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.node-circle {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #ffffff;
border: 2px solid #8b5cf6;
color: #8b5cf6;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.node-label {
margin-top: 10px;
font-size: 12px;
font-weight: 700;
color: #334155;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
transition: color 0.3s ease;
}
/* Hover Interactions */
.process-node-item:hover .node-circle {
background-color: #8b5cf6;
color: #ffffff;
transform: scale(1.15);
box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}
.process-node-item:hover .node-label {
color: #8b5cf6;
}
/* Detail Pop-up Card */
.node-card {
position: absolute;
top: 85px;
width: 260px;
background: #ffffff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
border: 1px solid #e2e8f0;
opacity: 0;
visibility: hidden;
transform: translateY(15px) scale(0.95);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 10;
}
/* Card placement for bottom nodes (02 & 04) */
.node-card.card-top {
top: auto;
bottom: 85px;
}
.node-card h5 {
font-size: 13px;
font-weight: 700;
color: #8b5cf6;
margin-bottom: 8px;
text-transform: uppercase;
}
.node-card p {
font-size: 13px;
line-height: 1.6;
color: #475569;
margin: 0;
}
/* Reveal Card on Hover */
.process-node-item:hover .node-card {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* Mobile Responsiveness */
@media (max-width: 991px) {
.wave-timeline-wrapper {
height: auto;
display: flex;
flex-direction: column;
gap: 30px;
align-items: flex-start;
padding-left: 20px;
}
.wave-svg {
display: none;
}
.process-node-item {
position: relative !important;
left: 0 !important;
top: 0 !important;
transform: none !important;
flex-direction: row;
gap: 15px;
}
.node-card {
position: relative !important;
top: 0 !important;
bottom: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
width: 100%;
}
}
/* ==========================================
Build Faster Scale Smarter Section
========================================== */
.build-scale-section {
background-color: #f8fafc;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
}
.section-tag-sub {
color: #539E10;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.5px;
display: inline-block;
}
.build-card {
background: #ffffff;
border-radius: 12px;
border: 1px solid #e2e8f0;
border-top: 4px solid #539E10;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.build-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 25px rgba(83, 158, 16, 0.15);
border-color: #539E10;
}
.build-card .icon-box {
width: 60px;
height: 60px;
background-color: rgba(83, 158, 16, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.build-card .icon-box i {
font-size: 28px;
color: #539E10;
}
.build-card .card-text {
color: #334155;
font-size: 15px;
line-height: 1.65;
font-weight: 500;
margin: 0;
}
/* ==========================================
Unique Next Great Team Dark Glassmorphism Hub
========================================== */
.next-team-unique-section {
background-color: #0b1329;
}
.unique-team-wrapper {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.glow-accent-bg {
position: absolute;
top: -50%;
left: -20%;
width: 300px;
height: 300px;
background: rgba(83, 158, 16, 0.25);
filter: blur(100px);
border-radius: 50%;
pointer-events: none;
}
.section-tag-pill {
display: inline-block;
background-color: rgba(83, 158, 16, 0.15);
color: #539E10;
font-size: 12px;
font-weight: 700;
padding: 6px 16px;
border-radius: 50px;
letter-spacing: 1.2px;
border: 1px solid rgba(83, 158, 16, 0.3);
}
/* Schematic Visual Diagram Styles */
.team-visual-schematic {
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
}
.schematic-step {
padding: 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}
.schematic-step.active-node {
background: rgba(83, 158, 16, 0.12);
border-color: #539E10;
box-shadow: 0 0 15px rgba(83, 158, 16, 0.2);
}
.step-badge {
width: 38px;
height: 38px;
background: #1e293b;
border: 2px solid #539E10;
color: #ffffff;
font-size: 14px;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.schematic-line {
width: 2px;
height: 24px;
background: linear-gradient(to bottom, #539E10, rgba(255, 255, 255, 0.1));
margin-left: 30px;
}
/* Section Background & Padding Polish */
.row.py-5 {
background-color: #f8fafc;
padding-top: 85px !important;
padding-bottom: 85px !important;
}
/* Heading Style Mapping */
.heading-style {
font-size: 34px;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.5px;
}
/* Individual Card Box Mapping (.boxes_why) */
.boxes_why {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 35px 25px;
height: 100%;
text-align: left;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
position: relative;
}
/* Card Hover Elevation & Glow Effect */
.boxes_why:hover {
transform: translateY(-8px);
border-color: #539E10;
box-shadow: 0 0 25px rgba(83, 158, 16, 0.25), 0 20px 25px -5px rgba(0, 0, 0, 0.08);
}
/* Centered Card Image / Icon Styling */
.boxes_why img {
width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: 24px;
align-self: center; /* Horizontally centers the image in the flex container */
transition: transform 0.3s ease;
}
.boxes_why:hover img {
transform: scale(1.08);
}
/* Card Heading (h4) Typography */
.boxes_why h4 {
font-size: 18px;
font-weight: 700;
color: #1e293b;
margin-bottom: 12px;
line-height: 1.4;
}
/* Card Description (p) Typography */
.boxes_why p {
font-size: 14px;
color: #64748b;
line-height: 1.7;
margin: 0;
}
/* Responsive Fix */
@media (max-width: 991px) {
.boxes_why {
margin-bottom: 20px;
}
}