/* GLOBAL */

body{
margin:0;
font-family: 'Cabin', 'Gill Sans Nova', sans-serif;
background:#f5f5f5;
}


/* HEADER */

header{
position:fixed;
top:0;
left:0;
right:0;
height:90px;
background:white;
display:flex;
align-items:center;
padding:0 40px;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
z-index:1000;
box-sizing:border-box;
}


/* LOGO */

.logo{
font-size:22px;
font-weight:bold;
}


/* RIGHT HEADER GROUP */

.header-right{
display:flex;
align-items:center;
margin-left:auto;
gap:25px;
}


/* NAVIGATION */

nav{
display:flex;
gap:20px;
}

nav a{
text-decoration:none;
color:#333;
font-weight:500;
transition:0.2s;
}

nav a:hover{
color:#007bff;
}


/* LOGIN BUTTON */

.login-btn{
border:2px solid #000;
padding:6px 16px;
border-radius:6px;
color:#000;
font-weight:500;
text-decoration:none;
display:inline-block;
}

.login-btn:hover{
background:#000;
color:#fff;
}


/* MAIN CONTENT */

main{
margin-top:100px;
max-width:1400px;
margin-left:auto;
margin-right:auto;
}


/* HERO SECTION */

.hero{
position:relative;
min-height:650px;
display:flex;
align-items:center;
justify-content:center;
padding-top:120px;
overflow:hidden;
}

.hero-video{
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:90%;
max-width:1400px;
height:100%;
z-index:1;
}

.hero-video video{
width:100%;
height:100%;
object-fit:cover;
border-radius:12px;
}

.hero-text{
position:absolute;
z-index:2;
max-width:650px;
left:8%;
top:35%;
}

.hero-text h1{
font-size:52px;
color:white;
}

.hero-text p{
font-size:20px;
color:#e5e5e5;
}


/* SPONSORS */

.sponsors-text{
position:relative;
z-index:2;
text-align:center;
margin-top:25px;
}

.sponsors{
position:relative;
z-index:2;
display:flex;
justify-content:center;
align-items:center;
gap:30px;
margin-top:10px;
}

.sponsor-logos img{
height:60px;
opacity:0.85;
}


/* BUTTON */

.start-btn{
padding:20px 40px;
font-size:24px;
background:#007bff;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
margin-top:25px;
transition:0.2s;
}

.start-btn:hover{
background:#1c69bd;
transform:translateY(-2px);
}


/* PANELS BELOW HERO */

.panel{
min-height:70vh;
padding:60px;
text-align:center;
}

.panel:nth-child(2){
background:#e6ebf0;
}


/* GRIDS AND CARDS */

.category-grid,
.service-grid,
.process-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
gap:20px;
margin-top:15px;
}

.category-card,
.service-card
.process-card{
height:160px;
width:100%;
max-width:160px;
margin:auto;
}


/* CATEGORY */

.category-header{
font-size: 24px;  
text-align: left;  
}

.category-card{
background:#fff;
border:1px solid #000;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
cursor:pointer;
border-radius:12px;
font-weight:600;
transition:0.4s;
box-shadow: 1px 2px 2px #333;
}

.card-icon{
padding-top: 15%;  
padding-bottom: 5%;
}

.category-card-text{
padding-top: 10%;
padding-left: 5%;   
text-align: left;
}

.category-card:hover{
background:#d4af37;
color:#007bff;
}


/* SERVICE */

.service-header{
font-size: 24px;  
text-align: left;  
}

.service-card{
background:#fff;
border:1px solid #000;
padding-left: 8px;
padding-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
border-radius:12px;
overflow: hidden;
cursor:pointer;
font-weight:600;
transition:0.4s;
box-shadow: 1px 2px 2px #333;
}

.service-card img{
display: block;
opacity: 0.9;
width:100%;
height:140px;
object-fit:cover;
border-radius:8px;
}

.service-card-text{
padding: 5%;    
text-align: left;
}

.service-card:hover{
background:#007bff;
color:#d4af37;
}


/* PROCESS */

.process-header{
font-size: 24px;
text-align: left;  
}

.process-card{
height:140px;
background:#000;
border:1px solid #ffffff;
padding: 12px;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
font-weight:600;
transition:0.4s;
cursor:pointer;
box-shadow: 1px 2px 2px #333;
}

.process-card:hover{
background:#ffffff;
color:#000000;
}

.panel:nth-child(3){
height:70vh;
display:flex;
flex-direction:column;
justify-content:center;
}


/* FOOTER */

footer{
background:#8d8401;
color:white;
min-height:70px;
padding:15px 40px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
}


/* FOOTER LEFT */

.footer-left button{
background:#007bff;
border:none;
color:white;
padding:10px 18px;
border-radius:4px;
cursor:pointer;
}


/* FOOTER CENTER */

.footer-center{
font-size:14px;
text-align:center;
max-width:600px;
}


/* FOOTER RIGHT */

.footer-right{
display:flex;
align-items:center;
}

.footer-right a{
margin-left:15px;
}


/* SOCIAL ICON */

.social-icon{
width:24px;
height:24px;
transition:0.2s;
}

.social-icon:hover{
opacity:0.7;
transform:scale(1.1);
}


/* SERVICE INFO */

.service-info-panel{
min-height:100vh;
padding:60px;
background:#e6ebf0;
}

.description{
display: flex;

}

.features{
display: flex;

}

.packages{
display: flex;

}

.templates{
display: flex;

}

.serviceDescription{
display: flex;
height: auto;

}

.serviceFeatures{
display: flex;
height: auto;

}

.servicePackages{
display: flex;
height: auto;

}

.serviceTemplates{
display: flex;
height: auto;

}

.view-bus-btn,
.view-web-btn {
display:inline-block;
border: 2px solid #000;
padding: 6px 16px;
border-radius: 6px;
font-weight: 500;
text-decoration: none;
background: #fff;
color: #000;
}

.view-bus-btn:hover,
.view-web-btn:hover {
background: #000;
color: #fff;
}

.avail-service-btn{
display:inline-block;
border:2px solid #000;
padding:6px 16px;
border-radius:6px;
background: #fff;
color:#000;
font-weight:500;
text-decoration:none;
cursor:pointer;
}

.avail-service-btn:hover{
background:#d4af37;
color:#fff;  
}


/* MOBILE RESPONSIVE */

@media (max-width:768px){

nav {
flex-wrap: wrap;
font-size: 14px;
}
.login-btn {
padding: 6px 12px;
font-size: 14px;
}
.header-right {
flex-wrap: wrap;
gap: 12px;
}

.hero-container{
flex-direction:column;
text-align:center;
}

.hero-text h1{
font-size:32px;
}

nav{
gap:12px;
font-size:14px;
}

.process-grid{
grid-template-columns:repeat(1,200px);
}

footer{
flex-direction:column;
text-align:center;
gap:10px;
}

}