@font-face {
    font-family: 'InterFont';
    src: url('../fonts/inter-font.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'InterFont-Bold';
    src: url('../fonts/inter-font.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'InterFont-Bold-400';
    src: url('../fonts/inter-font.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

body {
    /* font-family: 'InterFont', sans-serif; */
    background-color: white;
    color: #ffffff;
}

main{
     background-color: white;
    color: black;
}

.container {
      width: min(1100px, 92%);
      margin: 0 auto;
    }

.hero h1 {
    font-weight: 300;
    font-size: 5rem;
}
.hero {
    color: #fff;
    height: 75vmin;
    padding:80px 20px;
    text-align: left;
    background-color: white;}
.hero {
    background-image: url("../images/home-new/table_background.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    overflow: hidden;
    margin-top:-93px;
}


.section {
   background-color: white !important;
}

.section-title {
    font-weight: 600;
    margin-bottom: 20px;
}

.card-custom {
    background-color: #0d1117;
    color: #ffffff;
    border: none;
    border-radius: 10px;
}

.values span {
    margin: 0 10px;
    font-weight: 500;
}


.guru-title{
    font-size:3.5rem;
}
.research-title{
    font-size:3rem;
}
.mobile-app-image{
    background-image: url("../images/home/guru-demo-bg1.png");
    background-repeat:  no-repeat;
    background-size: 50rem; 
    background-position: right center;
}

footer .footer-title, .footer-links a {
    color: #ffffff;
}
.border-top{
    border-color: #30363d !important;
}
.navbar-light .navbar-nav .nav-link {
    color: #ffffff;
}


.navbar-toggler-icon {
    filter: invert(1);
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

.bg-light, .card{
    background-color: white!important;
    color: black !important;
}
.card{
    border-color: #30363d;
}

input,textarea{
    background-color: transparent !important;
    color: black !important;
}

/* input::placeholder,
textarea::placeholder {
    color: black !important;
    opacity: 0.7;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: black !important;
    opacity: 0.7;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: black !important;
    opacity: 0.7;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: black !important;
    opacity: 0.7;
} */

/* Mobile Responsive Styles */
@media (max-width: 768px) {
   
    .hero {
        background-image: none;
        padding: 40px 20px;
        text-align: center;
    }
    
    .hero h1 {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .hero p {
        font-size: 1rem;
        margin-top: 15px;
        margin-bottom: 20px;
    }
    
    .hero .btn {
        margin: 10px 5px !important;
        font-size: 0.9rem;
        padding: 10px 20px;
        display: inline-block;
        width: auto;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .navbar>.container {
        margin-left: 1rem !important;
        padding-left: 15px;
        padding-right: 15px;
    }
    
   
    .guru-title {
        font-size: 2rem;
        text-align: center;
    }
    
    .research-title {
        font-size: 1.5rem;
        text-align: center;
    }
    
    .section-title {
        font-size: 2rem;
        text-align: center;
    }
    
    .mobile-app-image {
        background-image: none;
        margin-top: 30px;
        text-align: center;
    }
    
    .mobile-app-image img {
        max-height: 300px;
        width: 100%;
        height: auto;
    }
    
    .values {
        text-align: center;
        font-size: 0.9rem;
    }
    
    .values span {
        margin: 0 5px;
        display: inline-block;
    }
    
    
    section {
        overflow: hidden;
    }

    .ai-section{
        background:#f7f7f7;
        text-align:center;
        background-image: url('../images/home-new/background.svg'); 
        background-size: cover; 
        background-position: center;
    }
}

@media (max-width: 576px) {
    
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .guru-title {
        font-size: 1.5rem;
    }
    
    .research-title {
        font-size: 1.2rem;
    }
    
    .btn-lg {
        font-size: 0.85rem;
        padding: 8px 16px;
    }
    
    .mobile-app-image img {
        max-height: 250px;
    }
}

.values span{
    margin-left:0px;
}
.w-90{
    width:90% !important;
}

p {
    font-size: 1.2rem;
}
h4{
    font-size: 1.75rem;
}
h3{
    font-size: 1.5rem;
}

h3 p{
    font-size: 1rem;
}
.mission-section p, .vision-section p, .values span{
   font-size:1rem;
}

.modal-content{
    background-color: white;
    color: #000000;
    border: 1px solid #30363d;
}

@media (min-width: 1024px) {
  .navbar{
    margin-left:7.5rem;
    margin-right:7.5rem;
  }
}


.hero-section{
    height: 900px;;
/* height:105vh; */
display:flex;
align-items:center;
}

.hero-text{
    margin-top:50px;
}
.hero-text h1{
font-size:42px;
font-weight:500;
color : black;
}

.hero-text span{
color:#ff4a4a;
font-family: 'InterFont-Bold', sans-serif;
}

.phone{
width:400px;
/* animation:float 10s ease-in-out infinite; */
}

.phone-for-mobile{
    width:280px;
}

.phone-wrapper{
perspective:1200px;
}

.story-section{
padding:120px 0;
background:white;
}

.section-title{
font-size:42px;
}


.ai-demo{
padding:120px 0;
background:#f7f7f7;
}

.demo-phone{
width:240px;
animation:float 5s ease-in-out infinite;
}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-20px)}
100%{transform:translateY(0)}
}

.features{
padding:120px 0;
}

.feature-card{
padding:30px;
border-radius:12px;
background:white;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
transition:.3s;
}

.feature-card:hover{
transform:translateY(-10px);
}


.ai-section{
background:#f7f7f7;
text-align:center;
background-image: url('../images/home-new/background2.png'); 
background-size: cover; 
background-position: center;
background-repeat: repeat;
}
.content-area{
margin-bottom:40px;
}



.col-left{
flex:.7;
}

.col-right{
flex:1.3;
text-align:left;
}

.phone-img{
width:260px;
}

.diagram{
width:100%;
max-width:450px;
margin-top:20px;
}

/* Toggle Buttons */

.toggle-buttons{
display:flex;
justify-content:center;
background:#fff;
border:1px solid #ddd;
border-radius:40px;
width:max-content;
margin:auto;
gap:10px;
}

.toggle-btn{
border:none;
background:transparent;
padding:12px 24px;
border-radius:30px;
cursor:pointer;
font-weight:500;
}

.toggle-btn.active{
background:#000;
color:#fff;
}

.toggle-btn-mobile{
border:none;
background:transparent;
padding:10px 15px;
border-radius:20px;
cursor:pointer;
font-size: 12px;
font-weight:200;
}

.toggle-btn-mobile.active{
background:#000;
color:#fff;
}

/* Tab content */

.tab-content{
display:none;
}

.tab-content.active{
display:block;
}


.text-thin{
    font-size: 16px;
    font-weight: 500;
    color: #555555;
}

.title {
     font-size:5.5rem !important;
     font-weight: 700;
     background: linear-gradient(to right, #332e2e, #fff); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} 

.form-control, .form-select{
    padding:.775rem .75rem;
    border:1px solid #000;
    border-radius:15px;
}
.form-label{
    font-weight: bold;
    color: #000 !important;
}

.user-title{
    margin-top: 14px;
    
    margin-left: -30px;
}

.user-title h2{
    font-size: 1.5rem;
}


@media (max-width: 576px) {

    .title {
     font-size:4.5rem !important;
     font-weight: 700;
     background: linear-gradient(to right, #332e2e, #e0dbdb); 
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    } 
    
    .canvas-mobile{
        margin-top:0px !important;
    }
    .content-area{
        padding: 80px 0px 0px 0px !important;
    }
}