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

body{
  font-family:"Segoe UI", Arial, sans-serif;
  color:#333;
  line-height:1.7;
}

/* Body scroll lock */
body.menu-open{
  overflow:hidden;
}

/* LOADING SPINNER */
.loading-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #5a3a1a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* IMAGE LOADING */
.image-container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.image-container img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-container img.loaded {
  opacity: 1;
}

.image-container .loading-spinner {
  display: block;
}

.image-container img.loaded + .loading-spinner {
  display: none;
}

/* PAGE LOADING OVERLAY */
.page-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(246, 241, 232, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.page-loading.hidden {
  opacity: 0;
  pointer-events: none;
}

.page-loading .spinner-large {
  width: 60px;
  height: 60px;
  border: 6px solid #f3f3f3;
  border-top: 6px solid #5a3a1a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* COMMON */
.container{
  max-width:1200px;
  margin:auto;
  padding:0 20px;
}

.section{
  padding:70px 0;
}

/* Mobile section spacing fix */
@media(max-width:1023px){
  body{
    padding-top:0;
  }
  
  .section:first-of-type{
    padding-top:20px;
  }
}

@media(max-width:768px){
  body{
    padding-top:0;
  }
  
  .section:first-of-type{
    padding-top:15px;
  }
}

@media(max-width:480px){
  body{
    padding-top:0;
  }
  
  .section:first-of-type{
    padding-top:10px;
  }
}

.light-bg{
  background:#faf7f2;
}

h2{
  text-align:center;
  margin-bottom:30px;
  color:#5a3a1a;
}

/* HEADER */
.site-header{
  background:rgba(246, 241, 232, 0.95);
  backdrop-filter:blur(20px);
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  box-shadow:0 4px 30px rgba(0,0,0,0.1);
  border-bottom:1px solid rgba(255,255,255,0.2);
  transition:all 0.3s ease;
}

.site-header:hover{
  background:rgba(246, 241, 232, 0.98);
  box-shadow:0 8px 40px rgba(0,0,0,0.15);
}

.header-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 0;
  flex-wrap:wrap;
  position:relative;
}

.logo{
  transition:transform 0.3s ease;
  flex-shrink:0;
  display:flex;
  align-items:center;
}

.logo:hover{
  transform:scale(1.05);
}

.logo img{
  width:65px;
  height:65px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
  transition:all 0.3s ease;
  display:block;
}

.logo img:hover{
  box-shadow:0 8px 25px rgba(0,0,0,0.3);
  transform:rotate(5deg);
}

/* DESKTOP NAVIGATION */
.main-nav{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  background:rgba(255,255,255,0.1);
  padding:8px 15px;
  border-radius:25px;
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.2);
}

.main-nav a{
  margin:0 8px;
  text-decoration:none;
  color:#333;
  font-weight:500;
  font-size:14px;
  white-space:nowrap;
  padding:8px 16px;
  border-radius:20px;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}

.main-nav a::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(90,58,26,0.1), transparent);
  transition:left 0.5s ease;
}

.main-nav a:hover::before{
  left:100%;
}

.main-nav a.active,
.main-nav a:hover{
  color:#fff;
  background:linear-gradient(135deg, #5a3a1a, #8b4513);
  box-shadow:0 4px 15px rgba(90,58,26,0.3);
  transform:translateY(-2px);
}

/* MOBILE MENU ELEMENTS - HIDDEN ON DESKTOP */
.mobile-header,
.nav-close,
.mobile-menu-btn{
  display:none;
}

/* MOBILE MENU BUTTON */
.mobile-menu-btn{
  background:none;
  border:none;
  font-size:20px;
  color:#333;
  cursor:pointer;
  padding:10px;
  border-radius:6px;
  transition:all 0.3s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
}

.mobile-menu-btn:hover{
  background:rgba(0,0,0,0.1);
  transform:scale(1.05);
}

.mobile-menu-btn.active{
  background:rgba(0,0,0,0.15);
}

/* HEADER WHATSAPP BUTTON */
.header-whatsapp{
  background:linear-gradient(135deg,#25D366,#1ebe5d,#25D366);
  background-size:200% 200%;
  color:#fff;
  padding:10px 20px;
  border-radius:25px;
  text-decoration:none;
  font-weight:600;
  font-size:13px;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 6px 20px rgba(37,211,102,0.4), 0 0 20px rgba(37,211,102,0.3);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  animation:whatsappPulse 2s infinite;
}

@keyframes whatsappPulse {
  0% {
    background-position:0% 50%;
    box-shadow:0 6px 20px rgba(37,211,102,0.4), 0 0 20px rgba(37,211,102,0.3);
  }
  50% {
    background-position:100% 50%;
    box-shadow:0 8px 25px rgba(37,211,102,0.6), 0 0 30px rgba(37,211,102,0.5);
  }
  100% {
    background-position:0% 50%;
    box-shadow:0 6px 20px rgba(37,211,102,0.4), 0 0 20px rgba(37,211,102,0.3);
  }
}

.header-whatsapp:hover{
  background:linear-gradient(135deg,#1ebe5d,#128c7e,#1ebe5d);
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 12px 30px rgba(18,140,126,0.6), 0 0 40px rgba(37,211,102,0.7);
  animation:none;
}

/* BANNER SLIDER */
.banner-slider{
  position:relative;
  width:100%;
  height:400px;
  overflow:hidden;
  background:#f6f1e8;
  margin-top:80px;
}

@media(max-width:1023px){
  .banner-slider{
    height:300px;
    margin-top:120px;
  }
}

@media(max-width:768px){
  .banner-slider{
    height:250px;
    margin-top:130px;
  }
}

@media(max-width:480px){
  .banner-slider{
    height:200px;
    margin-top:140px;
  }
}

.slider-container{
  position:relative;
  width:100%;
  height:100%;
}

.slide{
  position:absolute;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 1s ease-in-out;
}

.slide.active{
  opacity:1;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.slider-dots{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
}

.dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  cursor:pointer;
  transition:all 0.3s ease;
}

.dot.active,
.dot:hover{
  background:#fff;
  transform:scale(1.2);
}

/* INTRO */
.intro p{
  max-width:800px;
  margin:auto;
  text-align:center;
  font-size:18px;
}

/* CONSISTENT IMAGE SYSTEM - GLOBAL FIX */
.image-wrapper{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#f8f9fa;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* GLOBAL IMAGE OPTIMIZATION */
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Mobile image fixes */
@media(max-width:768px){
  img{
    max-width:100%;
    height:auto;
    object-fit:cover;
  }
  
  /* Ensure all images are responsive */
  .card img,
  .gallery img,
  .book-preview img,
  .slide img{
    width:100% !important;
    max-width:100% !important;
    object-fit:cover !important;
  }
}

.card{
  background:linear-gradient(145deg, #ffffff, #f8f9fa);
  padding:25px;
  border-radius:20px;
  text-align:center;
  box-shadow:0 15px 35px rgba(0,0,0,.08), 0 5px 15px rgba(0,0,0,.05);
  transition:all 0.4s ease;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(10px);
  width:100%;
  max-width:380px;
}

@media(max-width:768px){
  .card{
    max-width:350px;
    margin:0 auto;
    padding:20px;
  }
}

@media(max-width:480px){
  .card{
    max-width:320px;
    margin:0 auto;
    padding:18px;
  }
}

.card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 25px 50px rgba(0,0,0,.15), 0 10px 25px rgba(0,0,0,.1);
  background:linear-gradient(145deg, #fff, #ffffff);
}

.card img{
  width:100%;
  height:300px;
  object-fit:cover;
  object-position:center 20%;
  border-radius:10px;
  margin-bottom:8px;
}

.card h4{
  margin:2px 0 0 0;
  font-size:14px;
  line-height:1.1;
}

.card p{
  margin:1px 0 4px 0;
  font-size:12px;
  line-height:1.2;
}

/* Mobile card image fixes */
@media(max-width:768px){
  .card img{
    height:420px;
    margin-bottom:6px;
    object-fit:cover;
    object-position:center 40%;
    background:#f8f9fa;
  }
  
  .card h4{
    font-size:13px;
    margin:2px 0 0 0;
    line-height:1.1;
  }
  
  .card p{
    font-size:11px;
    margin:1px 0 3px 0;
    line-height:1.2;
  }
}

@media(max-width:480px){
  .card img{
    height:450px;
    margin-bottom:5px;
    object-fit:cover;
    object-position:center 40%;
    background:#f8f9fa;
  }
  
  .card h4{
    font-size:12px;
    margin:1px 0 0 0;
    line-height:1.1;
  }
  
  .card p{
    font-size:10px;
    margin:0px 0 2px 0;
    line-height:1.2;
  }
}

/* CARDS GRID */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:25px;
  justify-items:center;
}

@media(max-width:768px){
  .cards{
    grid-template-columns:1fr;
    gap:20px;
    max-width:350px;
    margin:0 auto;
  }
}

/* GALLERY - SELECTED MOMENTS - MODERN RESPONSIVE */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:25px;
  padding:20px 0;
}

.gallery img{
  width:100%;
  height:280px;
  object-fit:cover;
  object-position:center 30%;
  border-radius:15px;
  transition:all 0.4s ease;
  cursor:pointer;
  box-shadow:0 8px 25px rgba(0,0,0,0.12);
  border:3px solid #fff;
}

.gallery img:hover{
  transform:scale(1.05) translateY(-5px);
  box-shadow:0 20px 40px rgba(0,0,0,0.25);
  border-color:#5a3a1a;
}

@media(max-width:768px){
  .gallery{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
  }
  
  .gallery img{
    height:320px;
  }
}

@media(max-width:480px){
  .gallery{
    grid-template-columns:1fr;
    gap:15px;
  }
  
  .gallery img{
    height:350px;
  }
}

/* QUICK LINKS */
.quick-links{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
  margin-top:20px;
}

.quick-card{
  background:#fff;
  padding:30px 20px;
  border-radius:15px;
  text-align:center;
  text-decoration:none;
  color:#333;
  box-shadow:0 8px 25px rgba(0,0,0,0.1);
  transition:all 0.3s ease;
  border:2px solid transparent;
}

.quick-card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 35px rgba(0,0,0,0.15);
  border-color:#5a3a1a;
}

.quick-card i{
  font-size:40px;
  color:#5a3a1a;
  margin-bottom:15px;
  display:block;
}

.quick-card h3{
  font-size:20px;
  margin-bottom:10px;
  color:#333;
}

.quick-card p{
  font-size:14px;
  color:#666;
  margin:0;
}

/* PUBLICATION PREVIEW */
.publication-preview{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
  margin-bottom:40px;
  justify-items:center;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}

.book-preview{
  background:#fff;
  padding:25px;
  border-radius:15px;
  text-align:center;
  box-shadow:0 8px 25px rgba(0,0,0,0.1);
  transition:all 0.3s ease;
  width:100%;
  max-width:280px;
}

.book-preview:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

.book-preview img{
  width:120px;
  height:160px;
  object-fit:contain;
  object-position:center;
  border-radius:8px;
  margin:0 auto 8px auto;
  display:block;
  background:#f8f9fa;
  padding:5px;
}

.book-preview h4{
  font-size:18px;
  margin-bottom:4px;
  color:#333;
}

.book-preview p{
  font-size:14px;
  color:#666;
  margin-bottom:8px;
}

.preview-btn{
  background:linear-gradient(135deg,#ff9900,#ffb347);
  color:#111;
  padding:8px 20px;
  border-radius:20px;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  transition:all 0.3s ease;
  display:inline-block;
}

.preview-btn:hover{
  background:linear-gradient(135deg,#e88b00,#ff9900);
  transform:translateY(-2px);
}

.view-all{
  text-align:center;
}

.view-all-btn{
  background:linear-gradient(135deg,#5a3a1a,#8b4513);
  color:#fff;
  padding:12px 30px;
  border-radius:25px;
  text-decoration:none;
  font-size:16px;
  font-weight:600;
  transition:all 0.3s ease;
  display:inline-block;
}

.view-all-btn:hover{
  background:linear-gradient(135deg,#8b4513,#5a3a1a);
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(90,58,26,0.3);
}

/* VIDEO SECTION */
.video-section{
  background:#fff;
}

.video-section h2{
  text-align:center;
  margin-bottom:35px;
  color:#5a3a1a;
}

.video-slider-wrapper{
  position:relative;
  display:flex;
  align-items:center;
}

.video-slider{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:10px;
}

.video-slider::-webkit-scrollbar{
  display:none;
}

.video-card{
  min-width:320px;
  aspect-ratio:16 / 9;
  border-radius:12px;
  overflow:hidden;
  background:#000;
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
}

.video-card iframe{
  width:100%;
  height:100%;
  border:none;
}

.slider-btn{
  background:#4b2e15;
  color:#fff;
  border:none;
  width:36px;
  height:36px;
  border-radius:50%;
  cursor:pointer;
  font-size:18px;
  position:absolute;
  z-index:10;
  opacity:0.9;
}

.slider-btn.left{
  left:-10px;
}

.slider-btn.right{
  right:-10px;
}

.slider-btn:hover{
  background:#000;
}

/* FOOTER */
.site-footer{
  background:linear-gradient(135deg, #0b1c2d 0%, #1a2f42 50%, #0f1f30 100%);
  color:#fff;
  padding:40px 0 0;
  position:relative;
  overflow:hidden;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-bottom:40px;
  position:relative;
  z-index:2;
}

.site-footer h4{
  margin-bottom:20px;
  font-size:18px;
  color:#fff;
  position:relative;
  padding-bottom:10px;
}

.site-footer h4::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:30px;
  height:2px;
  background:linear-gradient(90deg, #4a90e2, #25D366);
  border-radius:2px;
}

.site-footer p,
.site-footer a{
  color:#ccc;
  font-size:15px;
  text-decoration:none;
  line-height:1.6;
  transition:all 0.3s ease;
}

.site-footer a{
  display:block;
  margin-bottom:4px;
  position:relative;
  padding-left:15px;
}

.site-footer a::before{
  content:'▶';
  position:absolute;
  left:0;
  color:#4a90e2;
  font-size:8px;
  top:50%;
  transform:translateY(-50%);
  transition:all 0.3s ease;
}

.site-footer a:hover{
  color:#fff;
  padding-left:20px;
}

.site-footer a:hover::before{
  color:#25D366;
  transform:translateY(-50%) translateX(3px);
}

.footer-left img{
  width:70px;
  border-radius:50%;
  margin-bottom:15px;
  box-shadow:0 8px 25px rgba(0,0,0,0.3);
  transition:transform 0.3s ease;
}

.footer-left img:hover{
  transform:scale(1.1) rotate(5deg);
}

.footer-tagline{
  margin-bottom:25px;
  font-style:italic;
  opacity:0.9;
}

.footer-icon{
  margin-right:8px;
  width:16px;
  text-align:center;
  font-size:13px;
  display:inline-block;
}

.footer-icon.location{
  color:#ff6b6b;
}

.footer-icon.phone{
  color:#4ecdc4;
}

.footer-icon.email{
  color:#45b7d1;
}

/* FOOTER BOTTOM - BALANCED TEXT & RESPONSIVE LAYOUT */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding:20px 0;
  text-align:center;
  background:rgba(0,0,0,0.2);
  backdrop-filter:blur(10px);
  position:relative;
}

.footer-bottom p{
  margin:0;
  color:#ccc;
  line-height:1.5;
}

.client-text{
  font-weight:600;
  color:#fff;
}

.developer-text{
  font-weight:600;
  color:#fff;
}

.developer-text a{
  color:#4a90e2;
  text-decoration:none;
  font-weight:600;
}

.developer-text a:hover{
  color:#25D366;
  text-decoration:underline;
}

/* FOOTER SOCIAL ICONS - PERFECT ALIGNMENT */
.footer-social{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:12px;
}

.footer-social a{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  font-size:18px;
  transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow:0 6px 14px rgba(0,0,0,0.25);
  position:relative;
  overflow:hidden;
  z-index:1;
  padding:0;
  margin:0;
  text-decoration:none;
}

.footer-social a i{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  line-height:1;
}

.footer-social a:hover{
  transform:translateY(-8px) scale(1.15);
  box-shadow:0 15px 30px rgba(0,0,0,0.4);
}

.footer-social .yt{background:linear-gradient(135deg, #FF0000, #cc0000);}
.footer-social .fb{background:linear-gradient(135deg, #1877F2, #0d5dbf);}
.footer-social .ig{background:linear-gradient(135deg, #E1306C, #b02454);}

/* FIXED BUTTONS */
.fixed-buttons{
  position:fixed;
  bottom:80px;
  width:100%;
  pointer-events:none;
  z-index:9999;
}

.fixed-buttons a{
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  color:#fff;
  position:fixed;
  pointer-events:auto;
  box-shadow:0 8px 25px rgba(0,0,0,.4), 0 0 20px rgba(0,0,0,0.2);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation:float 3s ease-in-out infinite;
  overflow:hidden;
}

@keyframes float {
  0%, 100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-8px) scale(1.05); }
}

.call-btn{
  left:20px;
  bottom:20px;
  background:linear-gradient(135deg, #0b5ed7, #0056d2, #0b5ed7);
  background-size:200% 200%;
  animation:callPulse 2.5s infinite, float 3s ease-in-out infinite;
}

@keyframes callPulse {
  0% {
    background-position:0% 50%;
    box-shadow:0 8px 25px rgba(11,94,215,.4), 0 0 20px rgba(11,94,215,0.3);
  }
  50% {
    background-position:100% 50%;
    box-shadow:0 12px 35px rgba(11,94,215,.6), 0 0 30px rgba(11,94,215,0.5);
  }
  100% {
    background-position:0% 50%;
    box-shadow:0 8px 25px rgba(11,94,215,.4), 0 0 20px rgba(11,94,215,0.3);
  }
}

.whatsapp-btn{
  right:20px;
  bottom:20px;
  background:linear-gradient(135deg, #25D366, #1ebe5d, #25D366);
  background-size:200% 200%;
  animation:whatsappBtnPulse 2s infinite, float 3s ease-in-out infinite 1s;
}

@keyframes whatsappBtnPulse {
  0% {
    background-position:0% 50%;
    box-shadow:0 8px 25px rgba(37,211,102,.4), 0 0 20px rgba(37,211,102,0.3);
  }
  50% {
    background-position:100% 50%;
    box-shadow:0 12px 35px rgba(37,211,102,.6), 0 0 30px rgba(37,211,102,0.5);
  }
  100% {
    background-position:0% 50%;
    box-shadow:0 8px 25px rgba(37,211,102,.4), 0 0 20px rgba(37,211,102,0.3);
  }
}

.fixed-buttons a:hover{
  transform:scale(1.2) translateY(-5px);
  animation:none;
}

/* MOBILE OVERLAY */
.mobile-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.4);
  opacity:0;
  visibility:hidden;
  transition:all 0.4s ease;
  z-index:999;
  backdrop-filter:blur(2px);
}

.mobile-overlay.active{
  opacity:1;
  visibility:visible;
}

/* ================= MOBILE RESPONSIVE ================= */
@media(max-width:1023px){
  /* Show mobile menu button */
  .mobile-menu-btn{
    display:flex !important;
  }
  
  /* Hide desktop WhatsApp button */
  .header-whatsapp{
    display:none;
  }
  
  /* Mobile header adjustments - HORIZONTAL LAYOUT */
  .header-wrap{
    padding:8px 0;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:70px;
  }
  
  /* Logo mobile styling - LEFT ALIGNED */
  .logo{
    order:1;
    margin:0;
  }
  
  /* Mobile title - CENTER */
  .mobile-title{
    order:2;
    font-size:14px;
    font-weight:600;
    color:#5a3a1a;
    text-align:center;
    flex:1;
    display:block;
  }
  
  /* Mobile menu button - RIGHT ALIGNED */
  .mobile-menu-btn{
    order:3;
  }
  
  .logo img{
    width:60px;
    height:60px;
  }
  
  /* Container mobile padding */
  .container{
    padding:0 15px;
  }
  
  /* MOBILE NAVIGATION - CLEAN WHITE DESIGN */
  .main-nav{
    position:fixed;
    top:0;
    right:-100%;
    width:320px;
    max-width:85vw;
    height:100vh;
    background:#fff;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    padding:0;
    box-shadow:-8px 0 25px rgba(0,0,0,0.15);
    transition:right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index:1001;
    overflow-y:auto;
  }
  
  .main-nav.active{
    right:0;
  }
  
  /* Mobile header inside nav */
  .mobile-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    border-bottom:1px solid rgba(0,0,0,0.08);
    background:#f8f9fa;
    min-height:80px;
  }
  
  .mobile-logo{
    display:flex;
    align-items:center;
    gap:12px;
  }
  
  .mobile-logo img{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
  }
  
  .mobile-logo span{
    font-size:16px;
    font-weight:600;
    color:#333;
  }
  
  /* Close button */
  .nav-close{
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    font-size:22px;
    color:#666;
    cursor:pointer;
    width:40px;
    height:40px;
    border-radius:50%;
    transition:all 0.3s ease;
  }
  
  .nav-close:hover{
    background:rgba(0,0,0,0.1);
    color:#333;
  }
  
  /* Mobile nav links */
  .main-nav a{
    margin:0;
    padding:18px 20px;
    font-size:16px;
    color:#666;
    border:none;
    border-radius:0;
    background:none;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:15px;
    border-bottom:1px solid rgba(0,0,0,0.05);
    transition:all 0.3s ease;
    position:relative;
    min-height:50px;
    cursor:pointer;
  }
  
  .main-nav a:hover{
    background:#f8f9fa;
    color:#333;
    padding-left:25px;
  }
  
  .main-nav a.active{
    background:#e3f2fd;
    color:#1976d2;
    border-left:4px solid #1976d2;
    font-weight:600;
  }
  
  .main-nav a i{
    width:20px;
    text-align:center;
    font-size:16px;
  }
  
  /* Banner mobile - adjusted for vertical header */
  .banner-slider{
    height:250px;
    margin-top:120px;
  }
  
  .slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
  
  /* Cards mobile */
  .cards{
    grid-template-columns:1fr;
    gap:20px;
  }
  
  .card{
    padding:20px;
    margin:0 auto;
    max-width:100%;
  }
  
  .card img{
    height:220px;
    width:100%;
    object-fit:cover;
    object-position:center;
  }
  
  /* Gallery mobile - STACKED LAYOUT */
  .gallery{
    grid-template-columns:1fr;
    gap:15px;
  }
  
  .gallery img{
    height:auto;
    max-height:250px;
    object-fit:contain;
    width:100%;
  }
  
  /* Quick links mobile */
  .quick-links{
    grid-template-columns:1fr;
    gap:20px;
  }
  
  .quick-card{
    padding:25px 15px;
  }
  
  .quick-card i{
    font-size:35px;
  }
  
  /* Publication preview mobile */
  .publication-preview{
    grid-template-columns:1fr;
    gap:20px;
  }
  
  .book-preview{
    padding:20px;
  }
  
  .book-preview img{
    width:100px;
    height:130px;
  }
  
  /* Footer mobile */
  .footer-grid{
    grid-template-columns:1fr;
    gap:30px;
    text-align:center;
  }
  
  /* FOOTER RESPONSIVE LAYOUT - TWO LINES MAX */
  .footer-bottom{
    padding:15px 10px;
  }
  
  .footer-bottom p{
    font-size:12px;
    line-height:1.4;
  }
  
  .client-text,
  .developer-text{
    font-size:12px;
  }
  
  /* Social icons mobile alignment */
  .footer-social{
    justify-content:center;
  }
  
  /* Video slider mobile */
  .video-card{
    min-width:280px;
  }
  
  .slider-btn{
    width:32px;
    height:32px;
    font-size:14px;
  }
  
  .slider-btn.left{
    left:-5px;
  }
  
  .slider-btn.right{
    right:-5px;
  }
}

@media(max-width:480px){
  .container{
    padding:0 10px;
  }
  
  .banner-slider{
    height:200px;
    margin-top:110px;
  }
  
  .section{
    padding:30px 0;
  }
  
  h2{
    font-size:20px;
    margin-bottom:20px;
  }
  
  .card{
    padding:15px;
  }
  
  .card img{
    height:180px;
    width:100%;
    object-fit:cover;
  }
  
  .gallery img{
    height:auto;
    max-height:200px;
    object-fit:contain;
    width:100%;
  }
  
  /* Mobile text adjustments */
  .intro p{
    font-size:16px;
    padding:0 10px;
  }
  
  .quick-card{
    padding:20px 15px;
  }
  
  .quick-card h3{
    font-size:18px;
  }
  
  .quick-card i{
    font-size:32px;
  }
  
  .footer-bottom p{
    font-size:10px;
  }
  
  .client-text,
  .developer-text{
    font-size:10px;
  }
  
  .fixed-buttons a{
    width:55px;
    height:55px;
    font-size:22px;
    cursor:pointer;
  }
  
  .call-btn{
    left:15px;
    bottom:15px;
  }
  
  .whatsapp-btn{
    right:15px;
    bottom:15px;
  }
  
  /* Mobile competition buttons */
  .action-btn{
    width:180px;
    min-height:45px;
    font-size:14px;
  }
  
  .join-btn{
    width:220px;
    min-height:50px;
    font-size:16px;
  }
  
  /* Book preview mobile fix for small screens */
  .book-preview img{
    width:100px;
    height:auto;
    object-fit:contain;
    object-position:center;
    margin-bottom:5px;
    background:#f8f9fa;
    max-height:150px;
  }
  
  .book-preview h4{
    margin-bottom:2px;
    font-size:15px;
  }
  
  .book-preview p{
    margin-bottom:5px;
    font-size:12px;
  }
}

/* DESKTOP ONLY - HIDE MOBILE ELEMENTS & FOOTER ONE LINE */
@media(min-width:1024px){
  .mobile-header,
  .nav-close,
  .mobile-menu-btn,
  .mobile-title{
    display:none !important;
  }
  
  .mobile-overlay{
    display:none !important;
  }
  
  /* FOOTER DESKTOP - RESPONSIVE ONE LINE */
  .footer-bottom{
    padding:18px 0;
  }
  
  .footer-bottom .container{
    max-width:100%;
    padding:0 40px;
  }
  
  .footer-bottom p{
    font-size:clamp(11px, 1.2vw, 16px) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    line-height:1.2 !important;
  }
  
  .client-text{
    font-size:clamp(11px, 1.2vw, 16px) !important;
  }
  
  .developer-text{
    font-size:clamp(11px, 1.2vw, 16px) !important;
  }
  
  .developer-text a{
    font-size:clamp(11px, 1.2vw, 16px) !important;
  }
}

/* TABLET & MOBILE - FOOTER TWO LINES MAX */
@media(max-width:1023px){
  .footer-bottom{
    padding:15px 10px;
  }
  
  .footer-bottom p{
    line-height:1.4;
    font-size:11px;
  }
  
  .client-text{
    display:inline;
    margin-right:5px;
    font-size:11px;
  }
  
  .developer-text{
    display:inline;
    font-size:11px;
  }
  
  .developer-text a{
    font-size:11px;
  }
}

/* EXTRA SMALL MOBILE */
@media(max-width:480px){
  .footer-bottom p{
    font-size:10px;
    line-height:1.3;
  }
  
  .client-text{
    font-size:10px;
  }
  
  .developer-text{
    font-size:10px;
  }
  
  .developer-text a{
    font-size:10px;
  }
}

/* Additional page styles */
.contact-page .contact-modern{
  padding:80px 0;
  background:#fafafa;
  text-align:center;
  margin-top:80px;
}

/* Mobile spacing fix for pages without banner */
@media(max-width:1023px){
  .contact-page .contact-modern,
  .publication-page .publication-section,
  .about-page,
  .programs-section,
  .our-team-page .team-section{
    margin-top:120px;
  }
}

@media(max-width:768px){
  .contact-page .contact-modern,
  .publication-page .publication-section,
  .about-page,
  .programs-section,
  .our-team-page .team-section{
    margin-top:130px;
  }
}

@media(max-width:480px){
  .contact-page .contact-modern,
  .publication-page .publication-section,
  .about-page,
  .programs-section,
  .our-team-page .team-section{
    margin-top:140px;
  }
}

.contact-page .contact-heading{
  font-size:36px;
  margin-bottom:60px;
  color:#4a250a;
  font-weight:700;
}

.contact-page .contact-icon-grid{
  display:flex;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
  margin-bottom:80px;
}

.contact-page .contact-icon-box{
  width:300px;
  padding:50px 30px;
  border-radius:22px;
  color:#fff;
  text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,0.18);
  transition:0.35s ease;
  text-decoration:none;
  display:block;
}

.contact-page .contact-icon-box:hover{
  transform:translateY(-12px) scale(1.04);
}

.contact-page .contact-icon-box i{
  font-size:42px;
  margin-bottom:20px;
}

.contact-page .contact-icon-box span{
  color:#fff;
  font-weight:500;
  display:block;
  font-size:14px;
  line-height:1.4;
  word-break:break-all;
}

.contact-page .phone{
  background:linear-gradient(135deg,#00c6ff,#0072ff);
}

.contact-page .whatsapp{
  background:linear-gradient(135deg,#25d366,#128c7e);
  animation:float 4s ease-in-out infinite;
}

.contact-page .email{
  background:linear-gradient(135deg,#ff6a88,#ff99ac);
}

.phone-ring{
  animation:ring 1.5s infinite;
}

@keyframes ring{
  0%{transform:rotate(0);}
  20%{transform:rotate(15deg);}
  40%{transform:rotate(-15deg);}
  60%{transform:rotate(10deg);}
  100%{transform:rotate(0);}
}

.contact-page .contact-form-box{
  max-width:650px;
  margin:auto;
  background:#fff;
  padding:60px;
  border-radius:26px;
  box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

.contact-page .contact-form-box h3{
  margin-bottom:30px;
  font-size:24px;
}

.contact-page .contact-form-box input,
.contact-page .contact-form-box textarea{
  width:100%;
  padding:16px;
  margin-bottom:18px;
  border-radius:12px;
  border:1px solid #ddd;
  font-size:16px;
}

.contact-page .contact-form-box button{
  width:100%;
  padding:16px;
  background:linear-gradient(135deg,#8b4513,#5c2d0c,#8b4513);
  background-size:200% 200%;
  color:#fff;
  border:none;
  border-radius:30px;
  font-size:17px;
  cursor:pointer;
  transition:all 0.4s ease;
  box-shadow:0 6px 20px rgba(139,69,19,0.4), 0 0 15px rgba(139,69,19,0.3);
}

.contact-page .contact-form-box button:hover{
  background:linear-gradient(135deg,#5c2d0c,#8b4513,#5c2d0c);
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 12px 30px rgba(139,69,19,0.7), 0 0 35px rgba(139,69,19,0.6);
}

.word-counter{
  text-align:right;
  font-size:12px;
  color:#666;
  margin-top:5px;
  margin-bottom:15px;
}

.word-counter.warning{
  color:#ff6b6b;
}

.word-counter.limit{
  color:#e74c3c;
  font-weight:bold;
}

@media(max-width:768px){
  .contact-page .contact-icon-box{
    width:100%;
    max-width:300px;
  }
}

/* Publication page styles */
.publication-page .publication-section{
  padding:80px 0;
  background:#fafafa;
  margin-top:80px;
  width:100%;
}

.publication-page .publication-section .container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  width:100%;
}

.publication-heading{
  text-align:center;
  font-size:36px;
  margin-bottom:30px;
  color:#4a250a;
  width:100%;
}

.publication-logo{
  width:100%;
  text-align:center;
  margin:0 auto 50px auto;
  display:block;
  clear:both;
}

.publication-logo img{
  width:180px;
  height:180px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  transition:transform 0.3s ease;
  margin:0 auto;
  display:block;
}

.publication-logo img:hover{
  transform:scale(1.05);
}

/* Mobile responsive for publication logo */
@media(max-width:768px){
  .publication-logo{
    width:100%;
    text-align:center;
    padding:0 20px;
  }
  
  .publication-logo img{
    width:150px;
    height:150px;
    margin:0 auto;
    display:block;
  }
}

.book-card{
  display:flex;
  gap:50px;
  align-items:center;
  background:#fff;
  padding:50px;
  border-radius:24px;
  box-shadow:0 18px 45px rgba(0,0,0,0.12);
  margin-bottom:60px;
}

.book-image img{
  width:200px;
  height:280px;
  object-fit:contain;
  object-position:center;
  border-radius:12px;
  box-shadow:0 8px 25px rgba(0,0,0,0.15);
  transition:transform 0.3s ease;
  background:#fff;
  padding:5px;
}

.book-image img:hover{
  transform:scale(1.05);
}

.book-content h3{
  font-size:28px;
  color:#2c1a0e;
}

.book-content .tagline{
  font-size:18px;
  color:#8b4513;
  margin-bottom:15px;
}

.book-content p{
  font-size:16px;
  color:#444;
  margin-bottom:15px;
}

.book-content ul{
  margin-left:20px;
  margin-bottom:15px;
}

.book-content li{
  margin-bottom:6px;
  font-size:15px;
}

.book-content .author{
  margin-top:20px;
  font-size:15px;
  font-weight:600;
}

.amazon-btn{
  display:inline-block;
  margin-top:15px;
  padding:12px 28px;
  background:linear-gradient(135deg,#ff9900,#ffb347);
  color:#111;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  border-radius:30px;
  transition:all 0.3s ease;
  box-shadow:0 6px 18px rgba(255,153,0,0.35);
}

.amazon-btn:hover{
  background:linear-gradient(135deg,#e88b00,#ff9900);
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 10px 25px rgba(255,153,0,0.55);
}

@media(max-width:768px){
  .book-card{
    flex-direction:column;
    text-align:center;
    padding:25px;
  }

  .book-image img{
    width:160px;
    height:220px;
    margin:0 auto;
    object-fit:contain;
  }
  
  .publication-logo img{
    width:120px;
    height:120px;
  }
  
  /* Book preview mobile fix */
  .book-preview img{
    width:120px;
    height:auto;
    object-fit:contain;
    object-position:center;
    margin-bottom:6px;
    background:#f8f9fa;
    max-height:180px;
  }
  
  .book-preview h4{
    margin-bottom:3px;
    font-size:16px;
  }
  
  .book-preview p{
    margin-bottom:6px;
    font-size:13px;
  }
}

/* About page styles */
.about-page{
  padding:80px 0;
  background:#fafafa;
  margin-top:80px;
}

.about-heading{
  text-align:center;
  font-size:36px;
  margin-bottom:15px;
  color:#4a250a;
}

.about-intro{
  max-width:900px;
  margin:0 auto 60px;
  text-align:center;
  font-size:18px;
  color:#555;
}

.about-highlights{
  margin-bottom:80px;
}

.highlight-row{
  display:grid;
  gap:30px;
  margin-bottom:40px;
}

.highlight-row.three{
  grid-template-columns:repeat(3,1fr);
}

.highlight-row.two{
  grid-template-columns:repeat(2,1fr);
  max-width:800px;
  margin:0 auto;
}

.highlight-card{
  background:#fff;
  padding:30px 25px;
  border-radius:18px;
  text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:0.35s ease;
}

.highlight-card:hover{
  transform:translateY(-10px);
  box-shadow:0 18px 40px rgba(0,0,0,0.15);
}

.highlight-card i{
  font-size:32px;
  color:#8b4513;
  margin-bottom:15px;
}

.highlight-card h4{
  font-size:18px;
  margin-bottom:10px;
  color:#3b1f0b;
}

.highlight-card p{
  font-size:15px;
  color:#555;
  line-height:1.7;
}

.founder-section{
  display:flex;
  gap:40px;
  align-items:center;
  background:#fff;
  padding:40px;
  border-radius:20px;
  box-shadow:0 12px 30px rgba(0,0,0,0.1);
}

.founder-section img{
  width:260px;
  height:300px;
  object-fit:cover;
  object-position:center;
  border-radius:16px;
}

.founder-text h3{
  font-size:26px;
  color:#3b1f0b;
}

.founder-text span{
  display:block;
  margin-bottom:15px;
  color:#8b4513;
  font-weight:600;
}

.founder-text p{
  font-size:16px;
  color:#444;
  line-height:1.8;
}

@media(max-width:900px){
  .highlight-row.three{
    grid-template-columns:1fr;
  }

  .highlight-row.two{
    grid-template-columns:1fr;
  }

  .founder-section{
    flex-direction:column;
    text-align:center;
  }
}

/* Programs page styles */
.programs-section{
  padding:80px 0;
  background:#fafafa;
  margin-top:80px;
}

.programs-heading{
  text-align:center;
  font-size:38px;
  font-weight:700;
  color:#4a250a;
  margin-bottom:10px;
}

.programs-subheading{
  text-align:center;
  font-size:18px;
  color:#666;
  margin-bottom:60px;
}

.programs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:35px;
}

.program-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  transition:0.35s ease;
  text-align:center;
}

.program-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  object-position:center;
  display:block;
}

.program-card:hover{
  transform:translateY(-10px);
  box-shadow:0 18px 45px rgba(0,0,0,0.15);
}

.program-card h3{
  font-size:20px;
  margin:18px 15px 10px;
  color:#3b1f0b;
}

.program-card p{
  font-size:15px;
  padding:0 18px 22px;
  color:#555;
  line-height:1.7;
}

@media(max-width:768px){
  .programs-heading{font-size:30px;}
}

/* ================= COMPETITION SECTION STYLES ================= */
.competition-section{
  background:linear-gradient(135deg, #f8f4e6, #fff9f0);
  padding:60px 0;
}

.competition-card{
  background:#fff;
  border-radius:25px;
  padding:40px;
  box-shadow:0 20px 60px rgba(0,0,0,0.1);
  border:3px solid #ff6b35;
  position:relative;
  overflow:hidden;
}

.competition-card::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,107,53,0.1), transparent);
  transition:left 0.8s ease;
}

.competition-card:hover::before{
  left:100%;
}

.competition-header h2{
  font-size:32px;
  color:#d63031;
  text-align:center;
  margin-bottom:15px;
  text-shadow:2px 2px 4px rgba(0,0,0,0.1);
}

.competition-tagline{
  font-size:18px;
  color:#2d3436;
  text-align:center;
  margin-bottom:40px;
  font-style:italic;
}

.benefits-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
  margin:30px 0;
}

.benefit-item{
  background:linear-gradient(135deg,#74b9ff,#0984e3);
  color:#fff;
  padding:20px;
  border-radius:15px;
  text-align:center;
  transition:all 0.3s ease;
  cursor:pointer;
}

.benefit-item:hover{
  transform:translateY(-8px) scale(1.05);
  box-shadow:0 15px 30px rgba(116,185,255,0.4);
}

.benefit-item i{
  font-size:24px;
  margin-bottom:10px;
  display:block;
}

.prizes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
  margin:30px 0;
}

.prize-item{
  background:#fff;
  border-radius:20px;
  padding:25px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.1);
  transition:all 0.4s ease;
  border:2px solid transparent;
}

.prize-item.gold{
  border-color:#ffd700;
  background:linear-gradient(135deg,#fff9e6,#ffffff);
}

.prize-item.silver{
  border-color:#c0c0c0;
  background:linear-gradient(135deg,#f8f9fa,#ffffff);
}

.prize-item:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.prize-images{
  display:flex;
  justify-content:center;
  gap:15px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.prize-images img{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:12px;
  transition:transform 0.3s ease;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  border:2px solid #fff;
}

.prize-images img:hover{
  transform:scale(1.3) rotate(8deg);
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
}

.special-offer{
  display:flex;
  align-items:center;
  gap:25px;
  background:linear-gradient(135deg,#00b894,#00a085);
  color:#fff;
  padding:25px;
  border-radius:20px;
  margin:20px 0;
}

.special-offer img{
  width:80px;
  height:100px;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}

.special-text ul{
  margin:15px 0;
  padding-left:20px;
}

.details-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  margin:25px 0;
}

.detail-item{
  background:#f8f9fa;
  padding:15px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:10px;
  transition:all 0.3s ease;
}

.detail-item:hover{
  background:#e9ecef;
  transform:translateX(5px);
}

.whatsapp-info-btn{
  background:linear-gradient(135deg,#25d366,#128c7e);
  color:#fff;
  padding:8px 15px;
  border-radius:20px;
  text-decoration:none;
  font-size:12px;
  font-weight:600;
  transition:all 0.3s ease;
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.whatsapp-info-btn:hover{
  background:linear-gradient(135deg,#128c7e,#25d366);
  transform:scale(1.05);
  box-shadow:0 5px 15px rgba(37,211,102,0.4);
}

.join-btn{
  background:linear-gradient(135deg,#e17055,#d63031);
  color:#fff;
  padding:15px 30px;
  border-radius:30px;
  text-decoration:none;
  font-size:18px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:20px 0;
  transition:all 0.4s ease;
  box-shadow:0 8px 25px rgba(230,112,85,0.4);
}

.join-btn:hover{
  background:linear-gradient(135deg,#d63031,#e17055);
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 15px 35px rgba(214,48,49,0.6);
}

.urgency{
  color:#d63031;
  font-weight:600;
  text-align:center;
  font-size:14px;
  animation:pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity:1; }
  50% { opacity:0.7; }
}

/* PROGRAMS PAGE COMPETITION HIGHLIGHT */
.competition-highlight{
  margin-bottom:50px;
}

.competition-banner{
  background:linear-gradient(135deg,#ff7675,#fd79a8,#fdcb6e);
  color:#fff;
  padding:30px;
  border-radius:25px;
  text-align:center;
  box-shadow:0 15px 40px rgba(255,118,117,0.3);
  position:relative;
  overflow:hidden;
}

.competition-banner::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left 0.6s ease;
}

.competition-banner:hover::before{
  left:100%;
}

.competition-quick-info{
  display:flex;
  justify-content:space-around;
  align-items:center;
  margin:25px 0;
  flex-wrap:wrap;
  gap:20px;
}

.prize-showcase{
  display:flex;
  gap:8px;
}

.prize-showcase img{
  width:40px;
  height:40px;
  object-fit:cover;
  border-radius:8px;
  border:2px solid #fff;
  transition:transform 0.3s ease;
}

.prize-showcase img:hover{
  transform:scale(1.3) rotate(10deg);
}

.quick-bonus img{
  width:50px;
  height:60px;
  object-fit:cover;
  border-radius:8px;
  border:2px solid #fff;
}

.competition-actions{
  display:flex;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap;
  margin-top:25px;
}

.action-btn{
  padding:12px 20px;
  border-radius:25px;
  text-decoration:none;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  transition:all 0.3s ease;
  color:#fff;
}

.date-btn{
  background:linear-gradient(135deg,#0984e3,#74b9ff);
}

.fee-btn{
  background:linear-gradient(135deg,#00b894,#55efc4);
}

.join-btn-main{
  background:linear-gradient(135deg,#e17055,#d63031);
  font-size:16px;
  padding:15px 25px;
}

.action-btn:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}

/* MOBILE RESPONSIVE */
@media(max-width:768px){
  .competition-card{
    padding:20px;
  }
  
  .competition-header h2{
    font-size:24px;
  }
  
  .competition-tagline{
    font-size:16px;
  }
  
  .benefits-grid{
    grid-template-columns:1fr;
    gap:15px;
  }
  
  .benefit-item{
    padding:15px;
  }
  
  .prizes-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  
  .prize-images{
    gap:10px;
  }
  
  .prize-images img{
    width:60px;
    height:60px;
  }
  
  .special-offer{
    flex-direction:column;
    text-align:center;
    padding:20px;
  }
  
  .special-offer img{
    width:60px;
    height:80px;
  }
  
  .details-grid{
    grid-template-columns:1fr;
    gap:15px;
  }
  
  .competition-quick-info{
    flex-direction:column;
    gap:15px;
  }
  
  .competition-actions{
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  
  .action-btn{
    width:200px;
    justify-content:center;
    min-height:45px;
    font-size:14px;
  }
  
  .whatsapp-info-btn{
    min-height:40px;
    padding:8px 12px;
    font-size:12px;
  }
  
  .join-btn{
    width:250px;
    min-height:50px;
    font-size:16px;
  }
}

/* Our team page styles */
.our-team-page .team-section{
  padding:70px 0;
  background:#fafafa;
  margin-top:80px;
}

.our-team-page .team-heading{
  text-align:center;
  font-size:38px;
  font-weight:700;
  margin-bottom:8px;
  color:#4a250a;
}

.our-team-page .team-subheading{
  text-align:center;
  font-size:18px;
  margin-bottom:60px;
  color:#666;
}

.our-team-page .team-card{
  display:flex;
  gap:40px;
  background:#ffffff;
  padding:35px;
  border-radius:18px;
  margin-bottom:50px;
  align-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  transition:all 0.3s ease;
}

.our-team-page .team-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,0.12);
}

.our-team-page .team-card.founder{
  border-left:8px solid #8b4513;
  background:linear-gradient(135deg,#fffaf2,#ffffff);
}

.our-team-page .team-photo img{
  width:260px;
  height:300px;
  object-fit:cover;
  object-position:center 20%;
  border-radius:14px;
}

.our-team-page .team-info h3{
  font-size:24px;
  margin-bottom:6px;
  color:#3b1f0b;
}

.our-team-page .team-info .role{
  font-size:15px;
  font-weight:600;
  color:#8b4513;
  margin-bottom:14px;
}

.our-team-page .team-info p{
  font-size:16px;
  line-height:1.8;
  color:#444;
  max-width:650px;
}

@media(max-width:768px){
  .our-team-page .team-card{
    flex-direction:column;
    text-align:center;
    padding:25px;
  }

  .our-team-page .team-photo img{
    width:220px;
    height:400px;
    object-position:center 20%;
  }
}

/* Additional Mobile Fixes */
@media(max-width:768px){
  /* Prevent horizontal scroll */
  body{
    overflow-x:hidden;
  }
  
  /* Better text readability */
  p, span, div{
    word-wrap:break-word;
    overflow-wrap:break-word;
  }
  
  /* Competition section mobile improvements */
  .competition-section .container{
    padding:0 10px;
  }
  
  .competition-card{
    margin:0 5px;
    border-radius:15px;
  }
  
  /* Video section mobile */
  .video-card{
    min-width:280px;
    max-width:100%;
  }
  
  /* Footer mobile improvements */
  .footer-grid{
    padding:0 10px;
  }
  
  /* Fixed buttons mobile adjustment */
  .fixed-buttons a{
    width:50px;
    height:50px;
    font-size:20px;
  }
  
  .call-btn{
    left:10px;
    bottom:10px;
  }
  
  .whatsapp-btn{
    right:10px;
    bottom:10px;
  }
}

/* Extra small mobile devices */
@media(max-width:360px){
  .container{
    padding:0 8px;
  }
  
  .competition-card{
    padding:15px;
    margin:0;
  }
  
  .banner-slider{
    height:180px;
  }
  
  h2{
    font-size:18px;
  }
  
  .card{
    padding:12px;
  }
}

/* Books Section */
.books-section {
  margin: 60px 0;
  text-align: center;
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.book-item {
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.book-item:hover {
  transform: translateY(-8px);
}

.book-item img {
  width: 120px;
  height: auto;
  object-fit: contain;
  margin-bottom: 15px;
}

/* Certificates Section */
.certificates-section {
  margin: 60px 0;
  text-align: center;
}

.certificates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.certificate-item img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.certificate-item img:hover {
  transform: scale(1.05);
}

/* Detailed Biography */
.detailed-bio {
  margin: 60px 0;
  background: #f8f9fa;
  padding: 40px;
  border-radius: 20px;
}

.bio-content p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 20px;
  text-align: justify;
}

.achievement-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin: 40px 0;
}

.stat-item {
  text-align: center;
  background: #fff;
  padding: 30px 20px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.stat-item h3 {
  font-size: 36px;
  color: #5a3a1a;
  margin-bottom: 10px;
}

.initiatives {
  margin-top: 30px;
}

.initiative-item {
  background: #fff;
  padding: 25px;
  border-radius: 15px;
  margin-bottom: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.initiative-item h4 {
  color: #5a3a1a;
  margin-bottom: 15px;
  font-size: 18px;
}

.initiative-item i {
  margin-right: 10px;
  color: #8b4513;
}

@media(max-width: 768px) {
  .books-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .certificates-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .achievement-stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .detailed-bio {
    padding: 25px;
  }
}
/* Updated Books Section */
.book-item {
  background: #fff;
  padding: 30px 20px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.book-item img {
  width: 120px;
  height: auto;
  object-fit: contain;
  margin: 0 auto 20px auto;
  display: block;
}

.book-item h4 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #333;
}

.book-item p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

@media(max-width: 768px) {
  .book-item {
    min-height: 300px;
    padding: 25px 15px;
  }
  
  .book-item img {
    width: 100px;
    margin-bottom: 15px;
  }
}
/* Updated Books Section - Bigger Images & Lower Text */
.book-item {
  background: #fff;
  padding: 40px 20px 25px 20px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.book-item img {
  width: 160px;
  height: auto;
  object-fit: contain;
  margin: 0 auto 30px auto;
  display: block;
  flex-grow: 1;
}

.book-item h4 {
  margin-bottom: 8px;
  font-size: 18px;
  color: #333;
  margin-top: auto;
}

.book-item p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

@media(max-width: 768px) {
  .book-item {
    min-height: 380px;
    padding: 35px 15px 20px 15px;
  }
  
  .book-item img {
    width: 140px;
    margin-bottom: 25px;
  }
}
/* Final Books Section - Full Box Image */
.book-item {
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.book-item img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  margin: 0 auto 15px auto;
  display: block;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 10px;
}

.book-item h4 {
  margin-bottom: 8px;
  font-size: 18px;
  color: #333;
}

.book-item p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

@media(max-width: 768px) {
  .book-item {
    min-height: 300px;
    padding: 15px;
  }
  
  .book-item img {
    height: 220px;
    margin-bottom: 12px;
  }
}
/* Mobile Responsive Fixes */
@media(max-width: 768px) {
  /* Header mobile title fix */
  .mobile-title {
    font-size: 12px;
    font-weight: 600;
    color: #5a3a1a;
    text-align: center;
    flex: 1;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Competition section mobile */
  .competition-card {
    padding: 20px 15px;
    margin: 0 5px;
  }
  
  .competition-header h2 {
    font-size: 20px;
    line-height: 1.3;
  }
  
  .competition-tagline {
    font-size: 14px;
    line-height: 1.4;
  }
  
  /* Benefits grid mobile */
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .benefit-item {
    padding: 15px;
    font-size: 14px;
  }
  
  /* Prize section mobile */
  .prizes-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .prize-images {
    gap: 8px;
    justify-content: center;
  }
  
  .prize-images img {
    width: 50px;
    height: 50px;
  }
  
  /* Special offer mobile */
  .special-offer {
    flex-direction: column;
    text-align: center;
    padding: 20px 15px;
  }
  
  .special-offer img {
    width: 60px;
    height: 80px;
    margin-bottom: 15px;
  }
  
  /* Details grid mobile */
  .details-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .detail-item {
    padding: 12px;
    font-size: 14px;
  }
  
  .whatsapp-info-btn {
    padding: 6px 12px;
    font-size: 11px;
  }
  
  /* Join button mobile */
  .join-btn {
    width: 100%;
    max-width: 280px;
    padding: 12px 20px;
    font-size: 14px;
    margin: 15px auto;
    display: block;
  }
  
  /* Quick links mobile */
  .quick-links {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .quick-card {
    padding: 20px 15px;
    margin: 0 auto;
    max-width: 300px;
  }
  
  /* Cards section mobile */
  .cards {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 320px;
    margin: 0 auto;
  }
  
  .card {
    max-width: 100%;
    padding: 15px;
  }
  
  .card img {
    height: 350px;
    object-position: center 30%;
  }
  
  /* Video section mobile */
  .video-slider {
    gap: 15px;
    padding: 5px;
  }
  
  .video-card {
    min-width: 280px;
    max-width: 90vw;
  }
  
  .slider-btn {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  
  /* Gallery mobile */
  .gallery {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .gallery img {
    height: 250px;
    object-fit: cover;
    object-position: center;
  }
  
  /* Publication preview mobile */
  .publication-preview {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 280px;
    margin: 0 auto;
  }
  
  .book-preview {
    padding: 20px 15px;
    max-width: 100%;
  }
  
  /* Footer mobile */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 25px;
    text-align: center;
    padding: 0 15px;
  }
  
  .footer-social {
    justify-content: center;
    gap: 15px;
  }
  
  .footer-social a {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  /* Footer bottom mobile */
  .footer-bottom {
    padding: 15px 10px;
  }
  
  .footer-bottom p {
    font-size: 10px;
    line-height: 1.4;
    word-wrap: break-word;
  }
  
  /* Fixed buttons mobile */
  .fixed-buttons a {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }
  
  .call-btn {
    left: 10px;
    bottom: 10px;
  }
  
  .whatsapp-btn {
    right: 10px;
    bottom: 10px;
  }
}

/* Extra small mobile */
@media(max-width: 480px) {
  .container {
    padding: 0 10px;
  }
  
  .mobile-title {
    font-size: 11px;
  }
  
  .competition-card {
    padding: 15px 10px;
    margin: 0;
  }
  
  .competition-header h2 {
    font-size: 18px;
  }
  
  .join-btn {
    max-width: 250px;
    font-size: 13px;
  }
  
  .card img {
    height: 300px;
  }
  
  .video-card {
    min-width: 260px;
  }
  
  .footer-bottom p {
    font-size: 9px;
  }
}
/* About Page Mobile Responsive Fixes */
@media(max-width: 768px) {
  /* About page specific */
  .about-page {
    padding: 60px 0;
    margin-top: 120px;
  }
  
  .about-heading {
    font-size: 28px;
    margin-bottom: 20px;
    text-align: center;
    padding: 0 10px;
  }
  
  .about-intro {
    font-size: 16px;
    padding: 0 15px;
    text-align: center;
    margin-bottom: 40px;
  }
  
  /* Highlights mobile */
  .about-highlights {
    margin-bottom: 50px;
  }
  
  .highlight-row.three {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .highlight-row.two {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .highlight-card {
    padding: 25px 20px;
    margin: 0 auto;
    max-width: 320px;
  }
  
  .highlight-card i {
    font-size: 28px;
    margin-bottom: 12px;
  }
  
  .highlight-card h4 {
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .highlight-card p {
    font-size: 14px;
    line-height: 1.6;
  }
  
  /* Founder section mobile */
  .founder-section {
    flex-direction: column;
    text-align: center;
    padding: 30px 15px;
    gap: 25px;
  }
  
  .founder-section img {
    width: 200px;
    height: 240px;
    margin: 0 auto;
    object-fit: cover;
    object-position: center 20%;
  }
  
  .founder-text h3 {
    font-size: 22px;
    margin-bottom: 8px;
  }
  
  .founder-text span {
    font-size: 14px;
    margin-bottom: 15px;
  }
  
  .founder-text p {
    font-size: 15px;
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 15px;
  }
  
  /* Detailed bio mobile */
  .detailed-bio {
    margin: 50px 0;
    padding: 25px 15px;
    border-radius: 15px;
  }
  
  .detailed-bio h2 {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .bio-content p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 18px;
    text-align: justify;
    padding: 0 5px;
  }
  
  .achievement-stats {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 30px 0;
  }
  
  .stat-item {
    padding: 25px 15px;
    max-width: 280px;
    margin: 0 auto;
  }
  
  .stat-item h3 {
    font-size: 32px;
    margin-bottom: 8px;
  }
  
  .stat-item p {
    font-size: 14px;
    line-height: 1.5;
  }
  
  .initiatives {
    margin-top: 25px;
  }
  
  .initiative-item {
    padding: 20px 15px;
    margin-bottom: 15px;
    border-radius: 12px;
  }
  
  .initiative-item h4 {
    font-size: 16px;
    margin-bottom: 12px;
  }
  
  .initiative-item p {
    font-size: 14px;
    line-height: 1.6;
    text-align: justify;
  }
  
  /* Books section mobile */
  .books-section {
    margin: 50px 0;
  }
  
  .books-section h2 {
    font-size: 24px;
    margin-bottom: 30px;
  }
  
  .books-grid {
    grid-template-columns: 1fr;
    gap: 25px;
    max-width: 300px;
    margin: 0 auto;
  }
  
  .book-item {
    min-height: 320px;
    padding: 20px 15px;
    margin: 0 auto;
  }
  
  .book-item img {
    height: 200px;
    margin-bottom: 15px;
  }
  
  .book-item h4 {
    font-size: 16px;
    margin-bottom: 6px;
  }
  
  .book-item p {
    font-size: 13px;
    line-height: 1.4;
  }
  
  /* Certificates section mobile */
  .certificates-section {
    margin: 50px 0;
  }
  
  .certificates-section h2 {
    font-size: 24px;
    margin-bottom: 30px;
  }
  
  .certificates-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 320px;
    margin: 0 auto;
  }
  
  .certificate-item img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }
}

/* Extra small mobile for about page */
@media(max-width: 480px) {
  .about-page {
    margin-top: 110px;
    padding: 40px 0;
  }
  
  .about-heading {
    font-size: 24px;
    padding: 0 5px;
  }
  
  .about-intro {
    font-size: 15px;
    padding: 0 10px;
  }
  
  .highlight-card {
    padding: 20px 15px;
    max-width: 280px;
  }
  
  .founder-section {
    padding: 25px 10px;
  }
  
  .founder-section img {
    width: 180px;
    height: 220px;
  }
  
  .detailed-bio {
    padding: 20px 10px;
  }
  
  .detailed-bio h2 {
    font-size: 20px;
  }
  
  .bio-content p {
    font-size: 14px;
    padding: 0;
  }
  
  .stat-item {
    padding: 20px 10px;
    max-width: 260px;
  }
  
  .stat-item h3 {
    font-size: 28px;
  }
  
  .books-grid {
    max-width: 280px;
  }
  
  .book-item {
    min-height: 300px;
    padding: 15px 10px;
  }
  
  .book-item img {
    height: 180px;
  }
  
  .certificates-grid {
    max-width: 280px;
  }
  
  .certificate-item img {
    max-height: 350px;
  }
}