/* ==============================
   Responsive
============================== */


@media (max-width: 768px) {
    .header {
        height: 60px;
    }

    .nav-container {
        padding: 0 20px;
    }

    .logo {
        font-size: 20px;
    }

    .mobile-nav-toggle {
        display: block;
    }

    .primary-navigation {
        position: fixed;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.98);
        backdrop-filter: blur(25px);
        padding: 120px 40px;
        transform: translateY(-100%);
        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        left: 0 !important;
        top: 0 !important;
    }

    .mobile-menu-logo {
        display: block;
        font-family: "Cinzel", serif;
        font-size: 32px;
        color: var(--color-gold);
        text-transform: uppercase;
        letter-spacing: 4px;
        margin-bottom: 60px;
        text-align: center;
    }

    .primary-navigation[data-visible="true"] {
        transform: translateY(0%);
    }

    .nav-list {
        flex-direction: column;
        gap: 0; /* Remove gap to handle with padding */
        width: 100%;
        text-align: center;
    }

    .nav-link {
        font-size: 18px;
        display: block;
        padding: 20px 0;
        width: 100%;
        letter-spacing: 2px;
    }

    /* Footer mobile */
    .footer {
        padding: 60px 0 40px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer-brand {
        order: -1;
    }

    .social-links {
        justify-content: center;
    }

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

    .world-bg-desktop {
        display: none;
    }

    .world-bg-mobile-01,
    .world-bg-mobile-02 {
        display: block;
        width: 100%;
        height: auto;
    }

    .world-bg-mobile-01+.world-bg-mobile-02 {
        margin-top: 0;
    }



    /* Hero Banner*/

    .hero {
        height: 90vh;
        min-height: 600px;
        --hero-center-x: 50%;
        --hero-center-y: 45%;
        overflow: hidden;
    }

    .hero-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        opacity: 0.28;
    }

    .hero-glow {
        left: var(--hero-center-x);
        top: var(--hero-center-y);
        width: clamp(220px, 72vw, 360px);
        opacity: 0.85;
    }

    .hero-yellow {
        left: var(--hero-center-x);
        top: var(--hero-center-y);
        width: clamp(50px, 20vw, 120px);
    }

    .circle-large {
        width: clamp(260px, 78vw, 360px);
        height: auto;
    }

    .circle-mid {
        width: clamp(200px, 60vw, 280px);
        height: auto;
    }

    .circle-small {
        width: clamp(150px, 45vw, 210px);
        height: auto;
    }

    .cloud {
        width: clamp(260px, 85vw, 440px);
        opacity: 0.5;
    }

    .cloud-left {
        left: -34%;
        top: 23%;
    }

    .cloud-right {
        right: -36%;
        top: 16%;
    }

    .intro::before {
        top: -14px;
        background-size: cover;
        background-position: center top;
    }


    /* Parshurama Area */

    .intro {
        overflow: hidden;
    }

    .intro-inner {  
        width: 100%;
        min-height: 3160px;
        padding-top: 120px;
    }

    .intro-copy-left {
        left: 10%;
        top: 120px;
        width: 78%;
        text-align: left;
    }

    .intro-copy-left h1 {
        font-size: clamp(28px, 7vw, 38px);
        line-height: 1.15;
        margin-bottom: 40px;
    }

    .intro-copy-left p {
        font-size: clamp(16px, 4vw, 22px);
        line-height: 1.35;
    }

    .intro-copy-top-right {
        display: none;
    }

    .parshurama {
		width: min(70vw, 510px);
		left: 50%;
		top: -80%;
		transform: translateX(-50%);
	}      

    .flock {
        left: 10%;
        top: 720px;
        width: 220px;
    }

    .crow-one {
        right: 8%;
        top: 160px;
        width: 240px;
    }

    .comic-mockup {
		left: 50%;
		right: auto;
		top: -59%;
		width: min(85vw, 450px);
		transform: translateX(-50%);
	}   

    .intro-copy-bottom-right {
		left: 50%;
		right: auto;
		bottom: auto;
		top: -48%; 
		width: 90%;
		transform: translateX(-50%);
		text-align: left;
	}
  
    .intro-copy-bottom-right h2 {
        font-size: clamp(28px, 7vw, 38px);
        line-height: 1.15;
        margin-bottom: 34px;
    }

    .intro-copy-bottom-right p {
        font-size: clamp(16px, 4vw, 22px);
        line-height: 1.35;
    }

    .intro-copy-bottom-right .intro-line {
        margin-left: 0;
        margin-right: 0;
    }

    .piece-a {
        display: block;
        z-index: 3;
        opacity: 0.45;
        left: 4%;
        top: 145px;
        width: 42px;
        transform: rotate(123deg);
    }

    .piece-b {
        display: block;
        z-index: 3;
        opacity: 0.4;
        left: 78%;
        top: 420px;
        width: 42px;
        transform: rotate(-18deg);
    }

    .piece-c {
        display: block;
        z-index: 3;
        opacity: 0.35;
        left: 12%;
        top: 1160px;
        width: 46px;
    }

    .intro-copy-left {
        z-index: 6;
    }

    .crow-one {
        z-index: 2;
        right: -10%;
        top: 210px;
        width: clamp(160px, 42vw, 240px);
        opacity: 0.8;
    }

    .crow-one {
        right: -8%;
        top: 120px;
        width: clamp(150px, 40vw, 220px);
        opacity: 0.75;
    }






    .world-stage {
		padding-top: clamp(50px, 0vh, 270px);   
       /*  padding-top: clamp(100px, 35vh, 270px); */
    }


    .world-layer {
        position: relative;
        inset: auto;
    }


    /* Hide desktop duplicate right heading */
    .world-heading-top {
        display: none;
    }

    /* Shiva mobile */
    .world-shiva {
        left: 38%;
        top: -1%;
        width: 100%;
        max-width: 560px;
        transform: translateX(-50%);
        z-index: 4;
    }

    /* World mythology text */
    .world-mythology-block {
		left: 10%;
		top: -150%;   
		width: 82%;
		text-align: left;
		z-index: 5;
	}       

    .world-mythology-block h2 {
        font-size: clamp(46px, 13vw, 72px);
        line-height: 0.9;
        margin-bottom: 26px;
    }

    .world-mythology-block p {
       font-size: clamp(15px, 4vw, 19px);
		line-height: 27px;
		color: #000;   
    }
	
	.works {
		padding: 150px 0 0px !important;
		position: relative;
		margin: auto;
	}
	
	.intro-inner2 {
		width: auto;
		position: relative;
		margin: auto;
	}
	
	.works_grid {
		grid-template-columns: auto;
		grid-gap: 0 1.8rem;
	}
	
	
	.works-left {
		color: #fff;
		text-align: left;
		padding-right: 25px;
	}

	.works-center {
		position: relative;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		z-index: 5;
	}
	
	.works-strip {
		flex-direction: column;
		height: auto;
		gap: 40px;
		padding: 60px 20px 60px;
	}
	
	.works-center img {
		width: auto;
	}

    .newsletter-box {
		width: 300px;
		height: 40px;
		float: left;
	}
	
	.works-right h3 {  
		text-align: left;  
	}
	
	.works-right p { 
		text-align: left;
	}
	
	.works-section {
		width: 100%;
		padding: 70px 0 0;
	}
	  
	.sec_2last {
		padding:50px 0;     
	}
	
	.intro-inner3 {
		position: relative;
		width: 100%;
	}
	
	.middel_text {
		grid-template-columns: auto;
		grid-gap: 0 1.8rem;
		padding: 20px;
		text-align: left;
	}

	.middel_text p {
		text-align: left;
	}
	
	.middel_text h2 {
		text-align: left;
	}
	
	.mythology-section {
		padding: 0px 0 0px;
	}
	
	.mythology-content {
		width: 100%;
		padding: 10px 25px;
	}
	
	.mythology-content {
		background-size: cover;
		background-position: bottom;
		background-repeat: no-repeat;
		height:620px;
	}
     
	  .mythology-title {
		margin-bottom: 0px;
	}
	
	.mythology-stone {
		width: 100px;
		display: block;
		margin: 0 auto 0;
	}
	
	.mythology-character img {
		width: 100%;
		display: block;
		margin-left: -38px;
	}
	
   .krishna-content {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	.krishna-section {
		padding: 60px 20px 0;
		min-height: auto;
	}
		 

	





    /* Cosmos cards */

    .cosmos-card-left,
    .cosmos-card-right {
        display: none;
    }

    .cosmos-showcase {
        top:-80%;  
        width: 100vw;
        min-height: 760px;
    }

    .cosmos-center {
        width:80%;  
    }

    .cosmos-card-main img {
        width: 100%;
    }

    .cosmos-scroll {
        margin-top: 0;
        width: 100%;
    }

    .cosmos-scroll-copy {
        left: 6%;
        top: 2%;
        width: 90%;
    }

    .cosmos-scroll-copy h2 {
        font-size: clamp(29px, 7vw, 52px);
        line-height: 1.5;
    }

    .cosmos-scroll-copy p {
        font-size: clamp(15px, 4vw, 22px);
        line-height: 1.25;
    }

    .cosmos-scroll-copy .button {
        margin-top: 10px;
    }


    /* Hanuman */
	   .hanuman-figure {
		left: -10%;
		top: 77%;
		width: 71vw;
		max-width: none;
		z-index: 4;
	}  

	.cloud2 {
		position: absolute;
		z-index: 2;
		left: -11%;
		top: -20%;
		width: 260px;
	} 

	.cloud_bird {
		right: 22px;
		top: -48px;
		width: 48px;
		position: absolute;
	}
	
   .right_text {
		padding: 20px;
	}
	
	.right_text .eyebrow {
		margin-bottom: 23px;
		font-size: clamp(20px, 1.4vw, 28px);
		text-transform: uppercase;
	}
	
	.right_text h2 {
		text-align: left;
	}

	.right_text p {
		font-size: clamp(16px, 1vw, 20px);
		line-height: 26px;
		text-align: left;
	}
	
	.right_text .button {
		float: left;
	}
	 
    .world2-block {
        top: 52%; 
        left: 0;
        right: auto;
        width: 100%;
        z-index: 7;
    }

    .world2-copy {
        width: 85%;
        margin-left: 10%;
        text-align: left;
        position: relative;
        top: -500px;
    }

    .world2-copy .eyebrow {
        display: none;
    }

    .world2-copy h2 {
        font-size: clamp(58px, 15vw, 82px);
        line-height: 0.95;
        color: var(--color-gray);
        margin-bottom: 28px;
    }

    .world2-copy p:not(.eyebrow) {
        font-size: clamp(18px, 4.6vw, 24px);
        line-height: 1.35;
    }

    .world2-copy .button {
        margin-top: 32px;
    }

    .garuda-figure {
		width: 355px;
		max-width: none;
		position: relative !important;
		top: 0;
		margin-left: 23px !important;
		margin: 0;
	}

    .feather-1,
    .feather-2 {
        display: none;
    }


    .chakra-section {
        top: 60%;
        left: 0;
        display: block;
    }

    .chakra-card {
        width: 87%;
        margin: 0 auto;
    }


    .myth-panel {
        position: absolute;
        top: 75%;
        width: 86%;
        padding: 10px;
        height: 600px;
        left: 7%;
    }




    .world-bg.world-bg-mobile-02 {
        position: relative;
        top: 1000px;
    }


    img.world-bg.world-bg-mobile-02 {
        position: relative;
        top: 1500px;
    }

    .krishna-talk {
        bottom: -660px;
        left: 4%;
        padding: 20px;
        text-align: justify;
    }
	
	.site {overflow-x: hidden;}
	
	 

	
	
	
	
	
	
	
	

}





/* ==============================
   Tablets (up to 1024px)
============================== */
@media (max-width: 1024px) {
  .container {
    padding: 0 40px;
  }

  .celestial-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .founders-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .character-grid, .legend-main-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .character-image-area {
    position: static;
    order: -1;
  }
}

/* ==============================
   Additional About/Card Responsiveness (Mobile)
============================== */
@media (max-width: 768px) {
    /* About Page Specifics */
    .about-hero {
        padding-top: 140px;
        padding-bottom: 80px;
    }

    .about-hero h1 {
        font-size: 38px;
    }

    .celestial-grid {
        grid-template-columns: 1fr;
    }

    .celestial-panel {
        min-height: auto;
        padding: 40px 20px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .mission-vision-grid {
        grid-template-columns: 1fr;
    }

    .faq-container {
        padding: 0;
    }

    /* Card detail metadata */
    .character-metadata.full-width {
        grid-template-columns: 1fr 1fr;
        padding: 20px;
    }

    .relatives-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}



     


@media (min-width:1920px) {    
	
	.mythology-content {
		width: 63%;
		padding: 10rem 20rem 10rem 10rem;
		height: 36vw;
		background-size: cover;
	}  

	.mythology-character img {
		width: 100%;
		display: block;
		margin-left: -215px;
	}
    	
	
	.mythology-container {
		justify-content: flex-start;
	}  
	
	.krishna-section {
		min-height:90vh;    
		padding: 0px 6% 0;   
	}
	
	.krishna-image img {
		width: 100%;
		max-width: 90%;
		display: block;
		position: relative;
		z-index: 3;
	}
	
	.krishna-image {
		width: 72%;
		justify-content: flex-end;
	}
 

	.krishna-content {
		max-width: 1620px;
		justify-content: space-between;
	}
	
	.works-strip {
		padding:50px 22%;
	}   
	
	.intro-inner2 {
		width: 1560px;
		position: relative;
		margin: auto;
	}
	
	.world-mythology-block {
		left: clamp(160px, 24vw, 335px);
	} 
	
	  .hanuman-figure {
		position: absolute;
		z-index: 2;
		left: clamp(-547px, -88vw, -88px);
		top: clamp(271px, -1vw, 528px);
		width: clamp(180px, 51vw, 900px);
		height: auto;
		pointer-events: none;
	}
		

	/* .cloud {
		position: absolute;
		z-index: 2;
		left: clamp(-647px, -53vw, -43px);
		top: clamp(-136px, -21vw, 377px);
		width: clamp(300px, 45vw, 720px);
		height: auto;
		pointer-events: none;
		width: 1024px;
	}		
	   */          
	 .works {
		padding: 170px 0 120px;
	}   
	
	.cosmos-showcase {
		bottom: 3%;
	}  


	.parshurama {
		top: clamp(-180px, -22vw, 455px);
		width: clamp(300px, 25vw, 520px);
	}
	
	.intro-copy-bottom-right {
		bottom: -25%;
	}
	
	.comic-mockup {
		right: clamp(130px, 9vw, 260px);
		top: clamp(-32px, -26vw, 690px);
		width: clamp(280px, 28vw, 520px);
		z-index: 5;
	}
	
	.cloud2 {
		left: clamp(-40%, -54vw, -46px);
		top: clamp(-102px, -11vw, 376px);
		width: 1024px;
	} 

	.garuda-figure {
		width: 100%;
	}
		   

 
	   
	
}













/* ================================
   2560px Screen Resolution
   @media screen and (min-width: 2560px) {
   ================================ */
      
    
@media (min-width:2560px) {    
	
	.mythology-content {
		width: 63%;
		padding: 10rem 20rem 10rem 10rem;
		height: 36vw;
		background-size: cover;
	}  

	.mythology-character img {
		width: 100%;
		display: block;
		margin-left: -215px;
	}
    	
	
	.mythology-container {
		justify-content: flex-start;
	}  
	
	.krishna-section {
		min-height:90vh;    
		padding: 0px 6% 0;   
	}
	
	.krishna-image img {
		width: 100%;
		max-width: 90%;
		display: block;
		position: relative;
		z-index: 3;
	}
	
	.krishna-image {
		width: 72%;
		justify-content: flex-end;
	}
 

	.krishna-content {
		max-width: 1620px;
		justify-content: space-between;
	}
	
	.works-strip {
		padding:50px 22%;
	}   
	
	.intro-inner2 {
		width: 1560px;
		position: relative;
		margin: auto;
	}
	
	.world-mythology-block {
		left: clamp(160px, 24vw, 335px);
	} 
	
	  .hanuman-figure {
		position: absolute;
		z-index: 2;
		left: clamp(-547px, -88vw, -88px);
		top: clamp(271px, -1vw, 528px);
		width: clamp(180px, 51vw, 900px);
		height: auto;
		pointer-events: none;
	}
		

	/* .cloud {
		position: absolute;
		z-index: 2;
		left: clamp(-647px, -53vw, -43px);
		top: clamp(-136px, -21vw, 377px);
		width: clamp(300px, 45vw, 720px);
		height: auto;
		pointer-events: none;
		width: 1024px;
	}		
	   */          
	 .works {
		padding: 170px 0 120px;
	}   
	
	.cosmos-showcase {
		bottom: 3%;
	}  


	.parshurama {
		top: clamp(-180px, -22vw, 455px);
		width: clamp(300px, 25vw, 520px);
	}
	
	.intro-copy-bottom-right {
		bottom: -25%;
	}
	
	.comic-mockup {
		right: clamp(130px, 9vw, 260px);
		top: clamp(-32px, -26vw, 690px);
		width: clamp(280px, 28vw, 520px);
		z-index: 5;
	}
	
	.cloud2 {
		left: clamp(-40%, -54vw, -46px);
		top: clamp(-102px, -11vw, 376px);
		width: 1024px;
	} 

	.garuda-figure {
		width: 100%;
	}
		   
 
	   
	
}