@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    height: 0 !important;
}

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

.top {
    width: 95%;
    margin: 0 auto;
    max-width: 1440px;
}

.top {
    width: 90%;
}

.col_sm2 {
    width: 48%;
    float: left;
    margin: 1%;
}

.col_sm3 {
    width: 31%;
    float: left;
    margin: 1%;
}

.header_left ul,
.header_right ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

.header_left ul li a,
.header_right ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;

}

.header_logo img {
    width: 100px;
}

.hamburger {
    display: none;
    font-size: 26px;
    cursor: pointer;
    color: black;
}
.margin-section{
    margin-top:56px;
    margin-bottom: 56px;
}
.buzz-btn a{
    font-family: "Bricolage Grotesque", sans-serif;
    font-size:20px;
    font-weight:400;
    color:#414753;
    text-decoration: none;
}
.buzz-btn img{
    width:50px;
    height:50px;
}
.header {
    display: flex;
    justify-content: center;
    gap: 100px;
    align-items: center;
    height:100px;
}

.header_left ul {
    display: flex;
    gap: 37px;
    list-style-type: none;
    padding: 0;
}

.header_right ul {
    display: flex;
    gap: 66px;
    list-style-type: none;
    padding: 0;
    margin-top:12px;
}

.header5 {
    display: none;
}

.header_left ul li a {
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 19px;
    line-height: 140%;
}

.header_right ul li a {
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 19px;
    line-height: 140%;
}

.header_right ul li:hover a {
    color: #30bab1;
}

.header_logo img {
    width: 230px;
}

/* Hide dropdowns by default */
.header_right ul li ul {
    display: none;
    position: absolute;
    background-color: white;
    list-style: none;
    margin: 0;
    top: 100%;
    left: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    min-width: 150px;
    z-index: 1000;
}

/* Style dropdown items */
.header_right ul li ul li:hover a {
    color: #fff;
    background: #ec1c24;
}

.header_right ul li ul li a {
    color: #000;
    font-size: 16px;
    display: block;
    text-decoration: none;
    white-space: nowrap;
    padding: 8px 20px;
}

.header_right ul li:hover>ul {
    display: block;
}

/* Optional: make parent list item relative for dropdown positioning */
.header_right ul li {
    position: relative;
}

.about-title h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 70px;
    margin: 10px 0;
    padding: 0;
    margin-left:25px;
}

.about-title p {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #414753;
    text-decoration: none;
    font-size: 20px;
    margin-left:25px;
    padding: 0 !important;
    
}
.about-title-project p{
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #414753;
    text-decoration: none;
    font-size: 30px;
    margin-left:40px;
    padding: 0 !important;
}

.about-title li {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #414753;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
}

.about-para {
    float: right;
    width: 50%;
}

.about-para p {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #414753;
    text-decoration: none;
    font-size: 20px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
}

.about-para a {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000000;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
}

.about-btn {
    display: inline-flex;
    height: 52px;
    padding: 0 8px 0 16px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    border-radius: 30px;
    background-color: #A5CC82;
    margin-top: 20px;
    margin-left: -4px;
}

.about-btn img {
    width: 22px;
}
.counter-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
}

.counter {
    width: 30%;
    float: left;
    background: #67A0EE;
    border-radius: 15px;
    height: fit-content;
    margin-left:50px;
}

.counter-img {
    width: 64%;
    float: right;
}

.clear {
    clear: both;
}

.counter-img {
    border: 13px solid #67A0EE;
    border-radius: 30px;
}

.counter-img img {
    border-radius: 15px;
}

.counter-number {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    margin: 10px;
    align-items: center;
    padding: 22px;
}

.counter-number h3 {
    font-size: 96px;
    color: #fff;
    margin: 0;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 400;
}

.counter-number p {
    text-align: left;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 200;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
    width: 108px;
}

.counter-number:last-child {
    border-bottom: 0px;
}

.our-work h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 53px;
    line-height: 140%;
    margin: 10px 0;
    padding: 0;
    text-transform: capitalize;
}

.our-work h4 {
    text-transform: uppercase;
    border: 1px solid #aaa8a8;
    width: fit-content;
    text-align: center;
    padding: 11px 21px;
    border-radius: 35px;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
}

.our-work-title {
    float: left;
    width: 51%;
}

.our-work-title h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 72px;
    line-height: 140%;
    margin: 0 0;
    padding: 0;
}

.our-work-para {
    float: right;
    width: 25%;
}

.our-work-para p {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #414753;
    text-decoration: none;
    font-size: 24px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
}

.our-work-para a {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 16px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
}

.our-work-sub img {
    height: fit-content;
    object-fit: cover;
    border-radius: 7%;
    object-position: left;
}

.about-btn img {
    height: auto;
    width:50px;
}
.about-btn a {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
}

.our-work-sub h2 {
    text-align: center;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 24px;
    line-height: 140%;
    margin: 9px 0px 0px;
    padding: 0 !important;
    text-transform: uppercase;
}

.our-work-sub p {
    text-align: center;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #414753;
    text-decoration: none;
    font-size: 20px;
    font-weight: lighter;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
}

.our-work-sub a{
text-decoration: none;
}

.our-work-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.card {
    width: 48%;
    background: linear-gradient(135deg, #00e0c4, #67f4a3);
    border-radius: 30px;
    padding: 20px;
    color: white;
    box-sizing: border-box;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    float: left;
    margin: 1%;
}

.top-row {
    display: flex;
    gap: 12px;
}

.icon-container {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-container img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.text-box {
    font-size: 12px;
    line-height: 1.5;
    flex: 1;
}

.text-box .highlight {
    font-weight: bold;
}

.learn-more {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: white;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
}

.learn-more span {
    margin-left: 5px;
    font-size: 14px;
}

.bottom-title {
    font-family: "Bricolage Grotesque", sans-serif !important;
    color: white !important;
    text-decoration: none !important;
    font-size: 37px !important;
    line-height: 140% !important;
    margin: 10px 0 !important;
    padding: 0 !important;
    text-transform: capitalize !important;
}

.text-box {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: white;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
}

.text-flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

* {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

html,
body {
    margin: 0px;
    height: 100%;
}

/* a blue color as a generic focus style */
button:focus-visible {
    outline: 2px solid #4a90e2 !important;
    outline: -webkit-focus-ring-color auto 5px !important;
}

a {
    text-decoration: none !important;
}

.box {
    width: 1439px;
    height: 955px;
}

.box .rectangle {
    position: fixed;
    width: 1439px;
    height: 955px;
    top: 0;
    left: 0;
    background-color: #121212;
}

.box {
    width: 1373px;
    height: 884px;
}

.box .subtract {
    position: fixed;
    width: 1373px;
    height: 884px;
    top: 0;
    left: 0;
    object-fit: cover;
}

/* Container styles */
.container-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 32px;
    width: 100%;
    background-color: #171717;
    /* neutral-900 */
}

.hero-container {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    padding: 96px 14px 56px 40px;
    width: 100%;
    height: 86vh;
}

/* Background image */
.background-image {
    object-fit: cover;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
}

/* Hero title */
.hero-title {
    position: relative;
    font-size: 48px;
    font-weight: 600;
    text-align: center;
    color: white;
    line-height: 85px;
    width: 893px;
    font-family: "Bricolage Grotesque", sans-serif;
    max-width: 100%;
}

/* Get Started button */
.get-started-button {
    position: relative;
    z-index: 10;
    padding: 9px;
    margin-top: 16px;
    max-width: 100%;
    font-size: 24px;
    text-align: center;
    background-color: white;
    line-height: 140%;
    border-radius: 30px;
    color: #171717;
    width: 265px;
    cursor: pointer;
    font-family: "Bricolage Grotesque", sans-serif;
}

/* Footer container */
.footer-container {
    position: relative;
    align-self: stretch;
    margin-top: 12%;
    width: 100%;
}

.footer-grid {
    display: flex;
    gap: 20px;
}

.footer-column {
    width: 40%;
}

.footer-column:nth-child(2) {
    width: 39%;
    margin-left: 20px;
}

.footer-column:nth-child(3) {
    width: 21%;
    margin-left: 20px;
}

/* Footer logo section */
.footer-logo-section {
    position: relative;
    flex-grow: 1;
    margin-top: 19px;
    font-size: 16px;
    color: #374151;
    /* gray-700 */
}

.footer-logo {
    object-fit: contain;
    aspect-ratio: 4.74;
    width: 436px;
    max-width: 100%;
}

.copyright-text {
    margin-top: 14px;
    margin-right: 28px;
    margin-left: 20px;
    font-family: "Bricolage Grotesque", sans-serif;
}

/* Footer content */
.footer-content {
    position: relative;
}

.footer-grid-inner {
    display: flex;
    gap: 20px;
    width: 142%;
}

.contact-column {
    width: 48%;
}

.links-column {
    margin-left: 20px;
    width: 48%;
}

/* Contact container */
.contact-container {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    font-family: "Bricolage Grotesque", sans-serif;
}

.section-title {
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    color: white;
    text-transform: uppercase;
    font-family: "Bricolage Grotesque", sans-serif;
}

.contact-email {
    align-self: stretch;
    margin-top: 12px;
    font-size: 20px;
    font-weight: 200;
    line-height: 1;
    color: white;
    font-family: "Bricolage Grotesque", sans-serif;
}

.contact-phone {
    margin-top: 12px;
    font-size: 20px;
    font-weight: 200;
    line-height: 24px;
    color: white;
    font-family: "Bricolage Grotesque", sans-serif;
}

.social-icons {
    display: flex;
    margin-top: 28px;
}

.social-icon {
    object-fit: contain;
    flex-shrink: 0;
    margin: auto 0;
    aspect-ratio: 1;
}

.social-icon:nth-child(1) {
    width: 41px;
}

.social-icon:nth-child(2) {
    align-self: flex-start;
    width: 44px;
}

.social-icon:nth-child(3) {
    width: 34px;
}

.social-icon:nth-child(4) {
    width: 48px;
}

/* Quick links container */
.quick-links-container {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    font-size: 20px;
    font-weight: 200;
    line-height: 1;
    color: white;
}

.quick-link {
    margin-top: 6px;
    font-family: "Bricolage Grotesque", sans-serif;
}

.quick-link:first-of-type {
    margin-top: 16px;
}

/* Callback container */
.callback-container {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.8;
    color: #374151;
    /* gray-700 */
}

.input-field {
    z-index: 10;
    padding: 0 16px;
    margin-top: 8px;
    max-width: 100%;
    white-space: nowrap;
    background-color: white;
    border-radius: 24px;
    width: 203px;
    line-height: 2;
}

.input-field:first-of-type {
    margin-top: 20px;
}

.fa-brands {
    color: #fff;
    margin: 0 10px;
    font-size: 30px;
}

.bg {
    background-color: #FCFAEE;
    border-radius: 22px;
}

.bg2 {
    background-color:#A5CC82;
    border-radius: 50px 50px 0 0;
}

.bg3 {
    background: #FCFAEE;
    border-radius: 80px 80px 0 0;
    margin: 0 auto;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 4%;
}

.bg3 img {
    width: 60%;
}

.footer-btn a {
    background: #A5CC82;
    display: flex;
    position: absolute;
    right: 16%;
    top: 15%;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400;
    text-transform: capitalize;
    height: 50px;
    width: 172px;
}

.footer-btn a img {
    width: 27%;
}

.box1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 63px;
    border-bottom: 1px solid #fff;
    padding: 1% 0;
    flex-wrap: wrap;
}

.title {
    width: 30%;
}

.title h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    color: #121212;
    text-decoration: none;
    font-size: 40px;
    line-height: 140%;
    margin: 10px 0;
    padding: 0;
}
.row img{
    width:100%;
    height:100%;
}
.details {
    width: 48%;
}

.details p {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #121212;
    text-decoration: none;
    font-size: 22px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
}

.image-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 68px;
    flex-wrap: wrap;
}

.img-box img {
    width: 150px;
}

.img-box2 {
    background: black;
    padding: 17px;
    width: 213px;
    border-radius: 10px;
}

.img-box3 {
    width: 300px;
}

.img-box4 {
    width: 207px;
}

.banner {
    height: 100vh;
    object-fit: cover;
    object-position: bottom;
}

.project-main p {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #414753;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
}

.project-main h2 {
    text-align: left;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 35px;
    line-height: 140%;
    margin: 9px 0px 0px;
    padding: 0 !important;
    text-transform: uppercase;
}

.sub-img {
    height: 59vh;
    object-fit: cover;
    border-radius: 14px;
}

.box1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 63px;
    border-bottom: 1px solid #fff;
    padding: 1% 0;
}

/* ecothereal */

.bg_brown {
    background-color: #AC512A;
}

.ecothereal img {
    border-radius: 25px;
}

.col_sm8 {
    width: 38%;
    float: left;
    margin: 1%;
}

.col_sm88 {
    width: 58%;
    float: left;
    margin: 1%;
}

.image-box {
    width: 28%;
}

.image-content {
    width: 80%;
}

.ecothereal-sub {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ecothereal-sub h4 {
    font-family: "Manrope", sans-serif;
    font-size: 19px;
    margin: 0;
    padding: 0;
    color: #5a5a5a;
}

.ecothereal-sub h3 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 20px;
    margin: 0;
    padding: 0;
    font-weight: 500;
    color: #000;
}

.collaborate-main {
    display: flex;
    align-items: center;
}

.collaborate h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 53px;
    line-height: 140%;
    margin: 10px 0;
    padding: 0;
}

.collaborate p {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
}

/* ecothereal */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}

.col_sm4 {
    width: 23%;
    margin: 1%;
    float: left;
}

.col_sm5 {
    width: 18%;
    margin: 1%;
    float: left;
}

.col_sm10 {
    width: 13%;
    margin: 1%;
    float: left;
}

.col_sm100 {
    width: 83%;
    margin: 1%;
    float: left;
}

.counter-number {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    margin: 10px;
    align-items: center;
    padding: 12px 2px;
}

.text-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-container {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    padding: 96px 14px 56px 40px;
    width: 100%;
    height: 87vh;
}

.footer-column {
    width: 46%;
}

.footer-grid-inner {
    display: flex;
    gap: 20px;
}

.links-column {
    margin-left: 20px;
    width: 31%;
}

/* ecothereal */
.banner-bg {
    position: relative;
}

.background-image2 {
    position: static;
    inset: 0;
    width: 100%;
}

.small-bg {
    position: absolute;
    top: 0px;
    right: 9%;
}

.small-bg img {
    width: 114vh;
}

.icon {
    position: absolute;
    top: 22%;
    left: 23%;
}

.content {
    position: absolute;
    top: 50%;
    text-align: center;
    width: 100%;
    left: 0;
}

.content h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 60px;
    margin: 0 !important;
}

.content p {
    font-family: "Bricolage Grotesque", sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

.content2 {
    position: absolute;
    top: 10%;
    right: 13%;
}

.content2 p {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 28px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
}

.body-content h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 53px;
    line-height: 140%;
    text-align: center;
    margin: 0;
}

.body-content p {
    text-align: center;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #414753;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 10%;
}

.tab_flex {
    display: flex;
    justify-content: center;
    gap: 4%;
    flex-wrap: wrap;
}

.tab_flex img {
    width: 70%;
}

.tab_bg h2 {
    background: linear-gradient(91deg, #C84E89, #F15F79);
    padding: 10px 32px;
    border-radius: 35px;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    font-size: 22px;
}

.tab_bg2 h2 {
    background: linear-gradient(91deg, #00F5A0, #00D9F5);
    padding: 10px 32px;
    border-radius: 35px;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    font-size: 22px;
}

.tab_bg3 h2 {
    background: linear-gradient(91deg, #9400D3, #4B0082);
    padding: 10px 32px;
    border-radius: 35px;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    font-size: 22px;
}

.tab_bg4 h2 {
    background: linear-gradient(91deg, #091E3A, #2F80ED, #2D9EE0);
    padding: 10px 32px;
    border-radius: 35px;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    font-size: 22px;
}

.tab_bg5 h2 {

    background: linear-gradient(91deg, #BF5AE0, #A811DA);
    padding: 10px 32px;
    border-radius: 35px;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    font-size: 22px;
}

.tab_bg6 h2 {

    background: linear-gradient(91deg, #FFE000, #799F0C);
    padding: 10px 32px;
    border-radius: 35px;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    font-size: 22px;
}

.table {
    width: 100%;
    border: 7px solid #d9f2f1;
    border-radius: 21px;
}

.table h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 30px;
    line-height: 140%;
    text-align: left;
    margin: 0;
    font-weight: 500;
}

.table tr {
    border-right: 1px solid;
}

.table td {
    border-right: 1px solid #000;
    padding: 0 17px !important;
    border-bottom: 1px solid #000;
}

.table td:last-child {
    border-right: none;
}

.table p {
    text-align: left;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #414753;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
}

.table a {
    text-align: left;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000000;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    text-transform: uppercase;
}

.blue {
    color: #4490ff;
}

.green {
    color: #00aa9f;
}

.orange {
    color: #cb9b62;
}

.bullet li {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #414753;
    text-decoration: none;
    font-size: 18px;
    line-height: 190%;
    margin: 0 !important;
    padding: 0 !important;
}

.tic-images img {
    width: 100%;
    height: 50vh;       /* adjust height for mobile */
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    .tic-images img {
        height: 30vh;   /* smaller height for mobile */
    }
}
.about_flex {
    display: flex;
    align-items: end;
    gap: 13px;
}

.about_flex .img2 {
    width: 40%;
}

.about_flex .img3 {
    width: 60%;
}

.bullet2 ul {
    list-style: none;
    padding-left: 0;
}

.bullet2 ul li {
    position: relative;
    padding-left: 25px !important;
    font-size: 20px;
    font-weight: bold;
    font-family: "Bricolage Grotesque", sans-serif;
    color:#000000;
}

.bullet2 ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
}

.project h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 72px;
    line-height: 140%;
    margin: 0px 0;
    padding: 0;
    text-transform: capitalize;
}


.project p {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #414753;
    text-decoration: none;
    font-size: 22px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
}

.project_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}


.project_btn a {
    display: flex;
    gap: 3%;
    border-radius: 34px;
    padding-left: 2%;
    width: 52%;
    margin-top: 3%;
    font-family: "Bricolage Grotesque", sans-serif;
    color: white;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    align-items: center;
    margin-left:40px;
    background-color: #A5CC82;
}

.project_btn img {
    width: 58px;
    object-fit: contain;
    height: 50px;
}

.count1 {
    background-color:#67A0EE;
    border-radius: 60px;
    width: 100%;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.count1 h3 {
    font-size: 120px;
    color: #fff;
    margin: 0;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 400;
    text-align: center;
}

.count1 p {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
}

.contact-info {
    background: url(../images/contact.png);
    background-repeat: no-repeat;
    min-height: 91vh;
    border-radius: 20px;
    width: 40%;
    padding: 4%;
}

.contact-info h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 30px;
    margin: 0 !important;
    text-align: left;
    padding: 7% 2% 0;
}

.contact-info p {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    padding: 1% 2% 1% 2%;

}


.contact-info a {
    color: #fff;
}

.social-links {
    margin-top: 22%;
}

.social-icons1 {
    margin-top: 22%;
}

.app-development-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.app-development {
    background: #d9f2f1;
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.app-development img {
    width: 100px;
    background: #76afff;
    border-radius: 50%;
    padding: 11px;
    height: 100px;
    object-fit: contain;
}

.app-development p {
    text-align: left;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #414753;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 2%;
}

.app-development span {
    font-weight: 800;

}


.footer_top h2 {
    font-size: 64px;
    color: #fff;
    margin: 0;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    padding: 2%;
    text-shadow: 2px 1px 2px grey;
    text-align: center;
}

.footer-body {
    background-color: #000;
}

.footer-body-sub p{
    margin-top: 1rem;
}

.footer-body-sub h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 25px;
    line-height: 140%;
    margin: 0 0;
    padding: 0;
    text-transform: uppercase;
    font-weight: 400;
}

.footer-body-sub a {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400;
}

.quick-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


.quick-links li {
    margin: 0;
    padding: 2% 0;
}

.quick-links li a {
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400;
    text-transform: capitalize;
}



.pricing-table-wrapper {
    width: 100%;
    overflow-x: auto;
    /* enables horizontal scroll on small screens */
    margin-top: 20px;
    border-radius: 43px;
    border: 12px solid #d9f2f1;
}

.pricing-table {
    width: 100%;
    min-width: 600px;
    /* ensures table doesn’t collapse too small */
    border-spacing: 0;
    font-family: sans-serif;
    border-radius: 12px;
    overflow: hidden;
}

.pricing-table thead th {
    background-color: #fff;
    padding: 10px 32px;
    border: 1px solid #ddd;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #000;
    font-size: 27px;
    line-height: 140%;
    text-align: left;
}

.pricing-table thead th.plan {
    font-weight: bold;
}

.pricing-table tbody td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 16px;
}

/* Zebra striping */
.pricing-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.pricing-table tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* First column style */
.pricing-table tbody td:first-child {
    font-weight: 600;
    text-align: left;
    background-color: #fafafa;
}

/* Plan header styles */
.plan-header {
    font-size: 27px;
    text-align: center;
    font-weight: bold;
}

.plan-price {
    font-size: 32px;
    color: #000;
    margin-top: 5px;
    text-align: center;
}

.plan-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-connect {
    display: inline-block;
    background: linear-gradient(90deg, #4CB8C4, #3CD3AD);
    color: white;
    padding: 0px 14px;
    border-radius: 25px;
    margin-top: 8px;
    text-decoration: none;
    font-size: 16px;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-connect img {
    width: 27%;
}

/* Color classes */
.orange {
    color: #BF843D;
}

.blue {
    color: #2980FF;
}

.green {
    color: #00AA9F;
}

/* Media Query for small devices */
@media (max-width: 768px) {

    .pricing-table thead th,
    .pricing-table tbody td {
        font-size: 14px;
        padding: 10px;
    }

    .plan-header {
        font-size: 20px;
    }

    .plan-price {
        font-size: 24px;
    }

    .btn-connect {
        font-size: 14px;
        padding: 4px 10px;
    }
}


/* Submenu */
.submenu {
  display: none;
  background-color: #049991;
  padding-left: 15px;
  flex-direction: column;
}

.submenu li {
  border-bottom: 1px solid #ffffff;
}

.dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.dropdown-toggle {
  font-size: 18px;
  color: white;
  margin-left: 10px;
}

/* When open */
.submenu.open {
  display: flex;
}



@media only screen and (max-width: 1600px) {

    .icon {
        left: 7%;
    }

    .tic-images img {
        height: 83vh;

    }

    .small-bg img {
        width: 113vh;
    }

    .small-bg {
        right: 6%;
    }


    .footer-container {
        margin-top: 12%;
    }

    .hero-container {
        height: 110vh;
    }

    .image-flex {
        gap: 59px;
    }

    .counter-number {
        padding: 13px;
    }

}

@media only screen and (max-width: 1500px) {
    .counter-number {
        padding: 8px;
    }
}

@media only screen and (max-width: 1400px) {
    .counter-number {
        padding: 4px;
    }

    .footer-container {
        margin-top: 9%;
    }
}

@media only screen and (max-width: 1300px) {
    .icon {
        left: 12%;
    }


    .footer-container {
        margin-top: 7%;
    }

    .counter-number {
        padding: 0px;
        margin: 8px;
    }
}

@media only screen and (max-width: 1200px) {
    .icon {
        left: 9%;
        top: 10%;
    }

    .tic-images img {
        height: 87vh;
    }

    .footer-container {
        margin-top: 9%;
    }

    .small-bg img {
        width: 117vh;
    }

    .content2 {
        top: 9%;
    }

    .footer-logo {
        width: 346px;
    }

    .contact-column {
        width: 45%;
    }

    .counter-number {
        padding: 0px;
        margin: 0px 11px;
    }
}

@media only screen and (max-width: 1100px) {
    .tic-images img {
        height: 80vh;
    }

    .small-bg img {
        width: 106vh;
    }

    .content {
        top: 42%;
    }

    .counter-number h3 {
        font-size: 89px;
    }
}


@media only screen and (max-width: 1000px) {
    .icon {
        display: none;
    }

    .tic-images img {
        height: 72vh;
    }

    .counter-number h3 {
        font-size: 82px;
    }

    .small-bg img {
        width: 98vh;
    }

    .content h2 {

        font-size: 47px;
    }
}


@media only screen and (max-width: 960px) {
      .header_right li:hover > .submenu {
    display: flex;
  }

  .dropdown-toggle {
    display: none; /* Hide plus/minus on desktop */
  }

  .dropdown-header {
    display: block;
  }
    .col_sm4 {
        width: 48%;
    }

    .image-box {
        width: 14%;
    }

    .col_sm2 {
        width: 98%;
    }

    .count1 .col_sm3 {
        width: 31%;
    }

    .col_sm10 {
        width: 24%;
    }

    .footer-grid-inner {
        width: 100%;
    }

    .contact-column {
        width: 100%;
    }


    .small-bg img {
        width: 80vh;
        display: none;
    }

    .background-image2 {
        height: 40vh;
    }

    .content2 {
        top: 9%;
        display: none;
    }

    .footer-grid {
        margin-top: 13%;
    }

    .footer-logo {
        width: 272px;
    }

    .header_right ul li ul {
        min-width: 100%;
    }

    .header5 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 999999;
        position: relative;
    }

    .hamburger {
padding: 15px;
        display: block;
    }

    .header {
        display: none;
    }

    .col_sm3 {
        width: 48%;
    }

    .our-work-para {
        width: 48%;
    }

    .title h2 {
        font-size: 24px;
    }

    .details {
        width: 42%;
    }

    .hero-container {
        height: 151vh;
    }

    .footer-container {
        margin-top: 101px;
    }

    .footer-logo-section {
        margin-top: 0px;
    }

    .footer-grid-inner {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .links-column {
        margin-left: 0px;
        width: 100%;
    }

    .menu {
        display: none;
        flex-direction: column;
        background-color: #05aca1;
        position: absolute;
        top: 60px;
        width: 100%;
        left: 0;
    }

    .header_right ul {
        display: block;
        list-style: none;
        padding: 0px;
        margin: 0px;
    }

    .header_right li {
        width: 100%;
        padding: 9px 5px;
        border-bottom: 1px solid #ffffff;
    }

    .menu ul li:hover {
        background-color: #ec1c24;
    }

    .menu ul {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .menu.show {
        display: flex;
    }

    .header {
        flex-direction: column;
        align-items: flex-start;
    }

    .header_logo {
        margin: 10px 0;
        align-self: center;
    }


}

@media only screen and (max-width: 800px) {

    .counter-flex {
    flex-wrap: wrap;
}

.about-para {
    width: 98%;
}

.counter {
    width: 98%;
    margin-left: 0;
}

.counter-img {
    width: 98%;
}

.bg3 {
    width: 98%;
}

.project_btn a {
    margin-left: 0;
}

.footer-btn a {
    background: #A5CC82;
    display: flex
;
    position: absolute;
    right: 9%;
    top: 7%;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    text-align: justify;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    line-height: 140%;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400;
    text-transform: capitalize;
    height: 38px;
    width: 166px;
}

.about-title-project p {
    margin-left: 0;
}

.project h2 {
    font-size: 45px;
}



    .tic-images img {
        height: 57vh;
    }

    .project_btn a {
        width: 100%;

    }

    .footer-column:nth-child(2) {
        width: 50%;
        margin-left: -20px;
    }

    .footer-column:nth-child(3) {
        width: 50%;
        margin-left: 46%;
    }

    .footer-logo-section {
        margin-top: -103px;
    }

    .hero-container {
        height: 192vh;
    }

    /* .footer-column:nth-child(3) {
        width: 100%;
        margin-left: 0px;
    } */

    .footer-grid {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .container-wrapper {
        height: 270vh;
    }

    .footer-container {
        margin-top: 149px;
    }
}

/* Responsive styles */
@media (max-width: 768px) {
    .container-wrapper {
        padding: 20px;
    }

    .hero-container {
        padding: 96px 20px 56px 20px;
    }

    .hero-title {
        font-size: 36px;
        line-height: 54px;
    }

    .get-started-button {
        padding: 0 20px;
        padding-bottom: 10px;
    }

    .footer-container {
        margin-top: 40px;
    }

    .footer-grid {
        flex-direction: column;
    }

    .footer-logo-section {
        margin-top: 40px;
    }

    .copyright-text {
        margin: 14px 10px;
    }

    .footer-grid-inner {
        flex-direction: column;
    }

    .contact-column,
    .links-column {
        width: 100%;
        margin-left: 0;
    }

    .contact-container,
    .quick-links-container,
    .callback-container {
        margin-top: 40px;
    }


    .footer-grid-inner {
        display: flex;
        gap: 20px;
        width: 100%;
    }

    .footer-grid-inner {
        padding-left: 261px;
        margin-top: 8px;
    }

    .container-wrapper {
        display: block;
    }

    .container-wrapper {
        height: 255vh;
    }
}

@media only screen and (max-width:700px) {
    .bg3 {
        padding-top: 10%;
    }

    .project_btn img {
        display: none;
    }

    .footer-column:nth-child(3) {
        margin-left: 39%;
    }

    .col_sm8 {
        width: 98%;

    }

    .col_sm88 {
        width: 98%;

    }
}

@media only screen and (max-width: 600px) {

    .about-btn {
    height: 41px;
    }
    .count1 .col_sm3 {
        width: 98%;
    }

    .details {
        width: 98%;
    }

        .title {
        width: 98%;
    }

    .box1 {
        gap: 37px;
        padding-top: 32px;
    }


    .about-para {
        width: 100%;
    }

    .counter {
        width: 100%;
    }

    .counter-img {
        margin-top: 4%;
        width: 100%;
    }

    .card {
        width: 100%;
    }

    .our-work-title {
        width: 100%;
    }


    .our-work-para {
        width: 100%;
    }

    .col_sm3 {
        width: 100%;
    }


    .blog {
        display: none;
    }

    .footer-logo-section {
        margin-top: -8px;
    }

    .footer-logo {
        width: 281px;

    }

    .footer-grid-inner {
        padding-left: 198px;
        margin-top: 37px;
    }

    .collaborate-main {
        flex-wrap: wrap;
    }

    .col_sm10 {
        width: 40%;
    }

    .about-title h2 {
        font-size: 40px;
    }

}


@media only screen and (max-width: 500px) {


    .footer-logo-section {
        margin-top: -8px;
    }

    .footer-logo {
        width: 281px;

    }

    .footer-grid-inner {
        padding-left: 151px;
    }

    .footer-grid-inner {
        padding-left: 83px;
    }

    .footer_top h2 {
        font-size: 41px;

    }

    .bg3 {
        padding-top: 22%;
    }

}


@media only screen and (max-width: 400px) {
    .col_sm4 {
        width: 98%;
    }


    .footer-grid-inner {
        padding-left: 83px;
    }

    .hero-container {
        padding: 44px 20px 56px 20px;
    }

    .footer-btn a {
        height: 38px;
        width: 153px;
    }

    .bg3 img {
        width: 89%;
    }
}


@media only screen and (max-width: 360px) {

    .footer-grid-inner {
        padding-left: 41px;
    }
}