/* --------------------------
   RESET
--------------------------- */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Segoe UI', sans-serif;
    line-height:1.6;
    scroll-behavior:smooth;
}

/* --------------------------
   NAVBAR
--------------------------- */
.navbar{
    background:rgba(15,32,39,0.95);
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px 60px;

    position:fixed;
    width:100%;
    top:0;

    z-index:1000;
    backdrop-filter:blur(6px);
}

.logo-container{
    display:flex;
    align-items:center;
    position:relative;
}

.logo-container img{
    width:150px;      /* increase logo size */
    height:auto;
    position:absolute;
    left:-30px;       /* move logo slightly left */
}

.logo-container div{
    margin-left:90px; /* keeps text position fixed */
}
.tagline{
    font-size:13px;
    margin-top:-8px;
    color:#ccc;
}

nav a{
    color:white;
    margin-left:25px;
    text-decoration:none;
    font-weight:500;
    transition:0.3s;
}

nav a:hover{
    color:#00c6ff;
}

.logo-link {
    text-decoration: none; /* remove underline */
    color: inherit;        /* keep text color same */
}

/* --------------------------
   HERO SECTION
--------------------------- */
.hero{
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    background-color:#87CEEB;
    background-image:url("images/banner-img.png");
    background-repeat:no-repeat;
    background-size:450px auto;
    background-position:right 80px bottom -200px;
    color: #0f2027;
    padding-left:120px;
}

.hero h2{
    font-size:40px;
    margin-bottom:15px;
    white-space:nowrap;
    color:#0f2027;
}

.hero p{
    font-size:20px;
    margin-bottom:25px;
    width:500px;
    text-align:center;
    color:#243b6b; 
}

.hero button{
    display:block;
    margin-left:200px;
    padding:14px 40px;

    background:linear-gradient(to right,#00c6ff,#0072ff);

    border:none;
    border-radius:30px;
    color:white;

    font-size:16px;
    cursor:pointer;
    transition:0.3s;
}

.hero button:hover{
    transform:scale(1.05);
}

.hero a{
text-decoration:none;
color:white;
}
/* --------------------------
   COMMON SECTION
--------------------------- */
.section{
    padding:60px 120px;
    text-align:center;
}

/* --------------------------
   ABOUT SECTION
--------------------------- */
#about{
    background-image:
    linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
    url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO2UsIc31HFrmqG6SyW6bn0pljpk05_xD_k1RVEm_vu3hnWxcFk3G3vnJi3eelOrx6gang_sBBFvUhWkkvnlsEu_UT77x5RS07Puvba03Tn26LtMeIPeH0nGF6TmXgshDFHNtPXT8ji5qZ/s1600/Web-design.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    color:#243b6b;
}

/* --------------------------
   SERVICES SECTION
--------------------------- */
#services{
    background:
    linear-gradient(rgba(15,32,39,0.9), rgba(32,58,67,0.9)),
    url('https://cdn.dribbble.com/userupload/6508147/file/original-11794da09cf2fda821918b0be52877cf.jpg?format=webp&resize=400x300&vertical=center');
    
    background-size:auto;
    background-position:center;
    color:white;
}

.cards{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:40px;
}

.card{
    background:white;
    color:#243b6b;
    padding:30px;
    margin:15px;

    width:260px;

    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);

    transition:0.3s;
}

.card:hover{
    transform:translateY(-10px);
    box-shadow:0 15px 35px rgba(0,0,0,0.25);
}

.card h3{
    margin-bottom:15px;
}

/* --------------------------
   GALLERY
--------------------------- */
#gallery{
    background-color:#f7f7f7;
}

.gallery{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    justify-content:center;
}

.gallery img{
    width:200px;
    height:150px;
    object-fit:cover;
    border-radius:8px;
}

/* --------------------------
   TESTIMONIALS
--------------------------- */
/* Testimonials cards */
#testimonials .card {
    background: white;
    color: #243b6b;
    padding: 50px 30px; /* increase top/bottom padding to make card taller */
    margin: 15px;
    width: 300px;      /* optional: increase width */
    min-height: 250px; /* set minimum height */
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    background-color: #f2f2f2;
}

#testimonials .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}

/* --------------------------
   CONTACT
--------------------------- */
#contact{
    background:
    linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.9)),
    url('https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1950&q=80');

    background-size:cover;
    background-position:center;
    color:white;
}

/* --------------------------
   FOOTER
--------------------------- */
footer{
    background:#111;
    color:white;
    text-align:center;
    padding:20px;
}

/* --------------------------
   DROPDOWN
--------------------------- */
.dropdown{
    position:relative;
    display:inline-block;
}

.dropdown-content{
    display:none;
    position:absolute;

    background:white;
    min-width:200px;

    border-radius:6px;
    box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

.dropdown-content a{
    color:#243b6b;
    padding:12px 16px;
    display:block;
    text-decoration:none;
}

.dropdown-content a:hover{
    background:#f2f2f2;
}

.dropdown:hover .dropdown-content{
    display:block;
}






.footer-container{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}

.footer-col{
flex:1;
min-width:250px;
margin-left:20px;
}

.footer-col ul{
list-style:none;
padding:0;
}

.footer-col ul li{
margin-bottom:10px;
}

.footer-col ul li a{
text-decoration:none;
color:white;
}

.footer-col ul li a:hover{
color:#00c6ff;
}






.contact-social{
margin-top:15px;
display:flex;
padding-left: 120px;
gap:15px;

}

.contact-social img{
width:30px;
/* padding-left: 50px; */
cursor:pointer;
}

.contact-social img:hover{
transform:scale(1.2);
}


/* Chatbot Styles */
.chatbot {
    position: fixed;
    bottom: 80px;
    right: 30px;
    width: 300px;
    max-height: 400px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: none; /* hidden initially */
    flex-direction: column;
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
    z-index: 2000;
}

.chatbot-header {
    background: #0072ff;
    color: white;
    padding: 12px;
    text-align: center;
    font-weight: bold;
}

.chatbot-body {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    background: #f4f4f4;
    display: flex;
    flex-direction: column;
}

.chatbot-body p {
    margin: 5px 0;
    padding: 8px 12px;
    border-radius: 15px;
    max-width: 80%;
}

.chatbot-body .user-msg {
    background: #0072ff;
    color: white;
    align-self: flex-end;
}

.chatbot-body .bot-msg {
    background: #e0e0e0;
    color: black;
    align-self: flex-start;
}

#chatbot-input {
    border: none;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    outline: none;
}

.chatbot-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #0072ff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    z-index: 2001;
}







/* --------------------------
   ENQUIRY FORM SECTION
--------------------------- */
.enquiry-section {
    background-color: #f9f9f9; /* light background */
    padding: 60px 120px;
    text-align: center;
    color: #243b6b;
}

.enquiry-section h2 {
    font-size: 32px;
    margin-bottom: 15px;
}

.enquiry-section p {
    font-size: 18px;
    margin-bottom: 30px;
    color: #555;
}

.enquiry-section form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    max-width: 600px;
    margin: 0 auto;
}

.enquiry-section input,
.enquiry-section textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
    box-sizing: border-box;
}

.enquiry-section textarea {
    resize: vertical;
    min-height: 100px;
}

.enquiry-section button {
    padding: 14px 40px;
    background: linear-gradient(to right, #00c6ff, #0072ff);
    border: none;
    border-radius: 30px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.3s;
}

.enquiry-section button:hover {
    transform: scale(1.05);
}


.enquiry-section {
    background-color: #e0f7fa; /* updated background */
    padding: 60px 120px;
    text-align: center;
    border-radius: 15px; /* optional: adds rounded corners */
}



.company-info{
display:flex;
align-items:center;
gap:0px;
text-align:left;
margin-left:-100px;   /* moves logo and text to the left */
}



.footer-logo{
width:150px;
height:auto;
margin-right:-20px;   /* pulls text closer to logo */
}


.company-info h2{
margin:0;
white-space:nowrap;   /* keeps Sree Technologies in one line */
}

.company-info p{
margin:0;
color:#ccc;
font-size:14px;
white-space:nowrap;   /* keeps tagline in one line */
}




.enroll-section{
width:80%;
margin:auto;
text-align:center;
padding:60px 0;
}

.enroll-section h2{
font-size:40px;
margin-bottom:40px;
}

.enroll-section h2 span{
color:#ff5a5f;
}

.enroll-form input,
.enroll-form select,
.enroll-form textarea{
width:100%;
padding:18px;
border-radius:12px;
border:1px solid #ccc;
font-size:16px;
margin-bottom:25px;
}

.form-row{
display:flex;
gap:25px;
}

textarea{
height:150px;
resize:none;
}

button{
background:#1e6bd6;
color:white;
border:none;
padding:15px 40px;
border-radius:10px;
font-size:18px;
cursor:pointer;
}

button:hover{
background:#0f55b8;
}

@media(max-width:768px){
.form-row{
flex-direction:column;
}
}







/* --------------------------
   MOBILE RESPONSIVE
--------------------------- */

@media (max-width:768px){

/* Navbar */
.navbar{
flex-direction:column;
padding:10px 20px;
}

nav{
margin-top:10px;
}

nav a{
display:block;
margin:10px 0;
}

/* Hero Section */
.hero{
padding-left:30px;
text-align:center;
align-items:center;
}

.hero h2{
font-size:28px;
white-space:normal;
}

.hero p{
width:100%;
font-size:18px;
text-align:center;
}

.hero button{
margin-left:0;
}

/* Sections */
.section{
padding:50px 20px;
}

/* Cards */
.cards{
flex-direction:column;
align-items:center;
}

.card{
width:90%;
}

/* Gallery */
.gallery img{
width:100%;
height:auto;
}

/* Footer */
.footer-container{
flex-direction:column;
text-align:center;
}

.company-info{
justify-content:center;
}

.contact-social{
justify-content:center;
padding-left:0;
}

}