* {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

/* -------------------- HERO SECTION -------------------- */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 650;
  overflow: hidden;
}

.hero .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .boxer {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 95%;
}

@media(max-width:768px){
  .hero{
    aspect-ratio:auto;
  }
  .hero .boxer{
    position: relative;
    height: auto;
    width: 100%;
    transform: none;
    left: auto;
  }
}

/* -------------------- MOUNTAINS SECTION -------------------- */
.mountains-section {
  width: 100%;
  display: flex;
  justify-content: center;
}

.mountains-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 600px;
  overflow: hidden;
}

.bg-mountains {
  width: 100%;
  height: 100%;
  object-fit: cover;      
  object-position: center; 
}

.text {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  padding: 0 10px;
  color: #000;
  font-size: 1rem;
  line-height: 1.7;
}

@media(max-width:768px){
  .mountains-container { height: 350px; }
  .text {
    width: 90%;             
    top: 50%;               
    transform: translateX(-50%) translateY(-50%);
    font-size:1rem;
    justify-content: center;
  }
}

@media(max-width:480px){
  .mountains-container { height: 420px; }
  .text {
    font-size: 0.9rem;
    top: 30%;
  }
}

/* -------------------- BIO SECTIONS -------------------- */
.bio-sections {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: #fdfbfb;

}

.bio-text {
  max-width: 50%;
  margin: 20px auto;
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
  color: #000;
  padding: 15px;
}

.bio-text.highlight {
  color: #ed1c24;
  font-weight: 600;
  font-size: 1.35rem;
}

.bio-text.image-container img {
  max-width: 85%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media(max-width:768px){
  .bio-text { max-width: 90%; font-size: 1rem; }
  .bio-text.highlight { font-size: 1.1rem; }
}

@media(max-width:480px){
  .bio-text { font-size: 0.95rem; }
  .bio-text.highlight { font-size: 1rem; }
}

	.bgtop {width:100%; height: 282px; background-image: url("../images/main_background.png"); background-size: cover; background-position: center top;align-items: flex-end; text-align:center; margin-top:0px}
	@media (min-width: 768px) {  .bgtop {height: 357px; background-size: cover; background-position: center top; }}
	@media (min-width: 992px) {  .bgtop {height: 427px; }}
	@media (min-width: 1200px) {  .bgtop {height: 525px;}}
	@media (min-width: 1500px) {  .bgtop {height: 595px; }}
	
	.bgtop1 {width:100%; height: 282px; background-image: url("../images/main_background2.png"); background-size: cover; background-position: center top;align-items: flex-end; text-align:center; margin-top:0px}
	@media (min-width: 768px) {  .bgtop1 {height: 357px; background-size: cover; background-position: center top; }}
	@media (min-width: 992px) {  .bgtop1 {height: 417px; }}
	@media (min-width: 1200px) {  .bgtop1 {height: 510px;}}
	@media (min-width: 1500px) {  .bgtop1 {height: 580px; }}
	
	.nisarpic1 {width: 338px; height: 238px; background-size: 338px 238px; background-repeat: no-repeat; background-position: center top;vertical-align:bottom; margin:auto; margin-top:6px }
	@media (min-width: 768px) {  .nisarpic1 {width: 438px; height: 309px; background-size: 438px 309px; margin-top:3px }}
	@media (min-width: 992px) {  .nisarpic1 {width: 538px; height: 372px; background-size: 538px 372px; margin-top:0px}}
	@media (min-width: 1200px) {  .nisarpic1 {width: 638px; height: 450px; background-size: 638px 450px; margin-top:16px}}
	@media (min-width: 1500px) {  .nisarpic1 {width: 738px; height: 520px; background-size: 738px 520px; margin-top:15px}}
	
	.nisarpic {width: 338px; height: 238px; background-size: 338px 238px; background-repeat: no-repeat; background-position: center top;vertical-align:bottom; margin:auto; margin-top:6px }
	@media (min-width: 768px) {  .nisarpic {width: 438px; height: 309px; background-size: 438px 309px; margin-top:3px }}
	@media (min-width: 992px) {  .nisarpic {width: 538px; height: 379px; background-size: 538px 379px; margin-top:4px}}
	@media (min-width: 1200px) {  .nisarpic {width: 638px; height: 450px; background-size: 638px 450px; margin-top:30px}}
	@media (min-width: 1500px) {  .nisarpic {width: 738px; height: 520px; background-size: 738px 520px; margin-top:31px}}
	
	.balochistan {width:100%; height: 680px; background-image: url("../images/mountains.jpg"); background-size: cover; background-position: center center;align-items: flex-end; text-align:center}
	@media (min-width: 768px) {  .balochistan {height: 550px; }}
	@media (min-width: 992px) {  .balochistan {height: 500px;}}
	@media (min-width: 1200px) {  .balochistan {height: 500px;}}
	@media (min-width: 1500px) {  .balochistan {height: 500px;}}
	
	.contenttext { max-width: 100%; font-family: 'Open Sans', sans-serif;  font-weight: 400; font-style: normal; font-size: 14px; line-height: 170%; color: #000; text-align:center; margin:auto; padding:20px 20px 0;}
	@media (min-width: 768px) {  .contenttext {max-width: 500px; font-size: 15px;padding:20px 0 0;}}
	@media (min-width: 992px) {  .contenttext {max-width: 550px;padding:25px 0 0;}}
	@media (min-width: 1200px) {  .contenttext {max-width: 600px; padding:30px 0 0;}}
	@media (min-width: 1500px) {  .contenttext {max-width: 650px; padding:35px 0 0; }}
	
	.contenttextbold { width:100%; max-width: 90%; font-family: 'Open Sans', sans-serif;  font-weight: 700; font-style: normal; font-size: 16px; padding:20px 20px 0; line-height: 170%; color: #ed1c24; text-align:center; margin:auto;}
	@media (min-width: 768px) {  .contenttextbold {max-width: 500px; font-size: 16px; padding:20px 0 0}}
	@media (min-width: 992px) {  .contenttextbold {max-width: 500px; font-size: 18px; padding:25px 0 0}}
	@media (min-width: 1200px) {  .contenttextbold {max-width: 550px; font-size: 18px; padding:30px 0 0}}
	@media (min-width: 1500px) {  .contenttextbold {max-width: 650px; font-size: 20px; padding:35px 0 0}}
	
	.gallerypix {width:375px; height: 254px; background-image: url("../images/gallerypix.png"); background-size: 375px 254px; background-repeat: no-repeat; background-position: center top; text-align:center; margin:auto}
	@media (min-width: 768px) {  .gallerypix {width:600px; height: 407px; background-size: 600px 407px; }}
	@media (min-width: 992px) {  .gallerypix {width:700px; height: 475px; background-size: 700px 475px;}}
	@media (min-width: 1200px) {  .gallerypix {width:800px; height: 543px; background-size: 800px 543px;}}
	@media (min-width: 1500px) {  .gallerypix {width:900px; height: 610px; background-size: 900px 610px;}}
	
	.dojologo {height: 100px; margin:20px auto 0; background-repeat: no-repeat; background-position: center top;vertical-align:bottom; text-align:centre}
	@media (min-width: 768px) {  .dojologo {height: 120px; margin:20px auto 0}}
	@media (min-width: 992px) {  .dojologo {height: 120px; margin:25px auto 0}}
	@media (min-width: 1200px) {  .dojologo {height: 120px; margin:30px auto 0}}
	@media (min-width: 1500px) {  .dojologo {height: 120px; margin:35px auto 0}}
	
	.nalogo {width:100px; height: 52px; margin:20px auto; background-size: 100px 52px; background-repeat: no-repeat; background-image: url("../images/na_logo.png"); background-position: center center;vertical-align:center; text-align:centre}
	@media (min-width: 768px) {  .nalogo {width:100px; height: 52px; background-size: 100px 52px; margin:20px auto}}
	@media (min-width: 992px) {  .nalogo {width:120px; height: 63px; background-size: 120px 63px; margin:25px auto}}
	@media (min-width: 1200px) {  .nalogo {width:120px; height: 63px; background-size: 120px 63px; margin:30px auto}}
	@media (min-width: 1500px) {  .nalogo {width:142px; height: 74px; background-size: 142px 74px; margin:35px auto}}
	
	.nisarboxerlogo {width:180px; height: 42px; background-size: 180px 42px; margin:20px auto 0; background-repeat: no-repeat; background-image: url("../images/nisar_boxer_logo2.png"); background-position: center center;vertical-align:center; text-align:centre}
	@media (min-width: 768px) {  .nisarboxerlogo {width:220px; height: 52px; background-size: 220px 52px;  margin:20px auto 0}}
	@media (min-width: 992px) {  .nisarboxerlogo {width:220px; height: 52px; background-size: 220px 52px; margin:25px auto 0}}
	@media (min-width: 1200px) {  .nisarboxerlogo {width:240px; height: 56px; background-size: 240px 56px; margin:30px auto 0}}
	@media (min-width: 1500px) {  .nisarboxerlogo {width:240px; height: 56px; background-size: 240px 56px; margin:35px auto 0}}
	
	.groupphoto {width:375px; height: 189px; background-size: cover; background-position: center center;align-items: flex-end; text-align:center}
	@media (min-width: 768px) {  .groupphoto {width:99.5%; height: 475px; }}
	@media (min-width: 992px) {  .groupphoto {height: 500px;}}
	@media (min-width: 1200px) {  .groupphoto {height: 500px;}}
	@media (min-width: 1500px) {  .groupphoto {height: 500px;}}
	
	.contenttextboldred { max-width: 100%; font-family: 'Open Sans', sans-serif;  font-weight: 700; font-style: normal; font-size: 16px; padding:20px; margin:auto; margin-top:-6px; line-height: 150%; color:#fff; background-color: #ed1c24; text-align:center;  position: relative;}
	@media (min-width: 768px) {  .contenttextboldred {max-width: 590px; font-size: 18px; padding:20px; margin-top:-50px}}
	@media (min-width: 992px) {  .contenttextboldred {max-width: 660px; font-size: 20px; padding:20px; margin-top:-50px}}
	@media (min-width: 1200px) {  .contenttextboldred {max-width: 660px; font-size: 20px; padding:20px; margin-top:-50px}}
	@media (min-width: 1500px) {  .contenttextboldred {max-width: 730px; font-size: 22px; padding:20px; margin-top:-50px}}
	
	.contenttextboldblack { width:100%; max-width: 90%; font-family: 'Open Sans', sans-serif;  font-weight: 600; font-style: normal; font-size: 16px; padding:20px 0; line-height: 170%; color: #000; text-align:center; margin:auto;}
	@media (min-width: 768px) {  .contenttextboldblack {max-width: 500px; font-size: 16px; padding:20px 0}}
	@media (min-width: 992px) {  .contenttextboldblack {max-width: 500px; font-size: 18px; padding:25px 0}}
	@media (min-width: 1200px) {  .contenttextboldblack {max-width: 550px; font-size: 17px; padding:30px 0}}
	@media (min-width: 1500px) {  .contenttextboldblack {max-width: 650px; font-size: 18px; padding:35px 0}}
	
	.pkflag {width:100%; height: 500px; background-image: url("../images/pkflag.jpg"); background-size: cover; background-position: center top;align-items: flex-end; text-align:center}
	@media (min-width: 768px) {  .pkflag {height: 550px; }}
	@media (min-width: 992px) {  .pkflag {height: 600px;}}
	@media (min-width: 1200px) {  .pkflag {height: 750px;}}
	@media (min-width: 1500px) {  .pkflag {height: 750px;}}
	
	.nisarwithbelts {width:333px; height: 500px; background-image: url("../images/nisarwithbelts.jpg"); background-size: 333px 500px; background-repeat: no-repeat; background-position: center top; text-align:center; margin:auto}
	@media (min-width: 768px) {  .nisarwithbelts {width:367px; height: 550px; background-size: 367px 550px; }}
	@media (min-width: 992px) {  .nisarwithbelts {width:400px; height: 600px; background-size: 400px 600px;}}
	@media (min-width: 1200px) {  .nisarwithbelts {width:500px; height: 750px; background-size: 500px 750px;}}
	@media (min-width: 1500px) {  .nisarwithbelts {width:500px; height: 750px; background-size: 500px 750px;}}
	
	.achievements {width:375px; height: 258px; background-image: url("../images/achievements.jpg"); background-size: 375px 258px; background-repeat: no-repeat; background-position: center top; text-align:center; margin: 20px auto 0}
	@media (min-width: 768px) {  .achievements {width:500px; height: 344px; background-size: 500px 344px; margin: 20px auto 0}}
	@media (min-width: 992px) {  .achievements {width:600px; height: 413px; background-size: 600px 413px; margin: 25px auto 0}}
	@media (min-width: 1200px) {  .achievements {width:700px; height: 484px; background-size: 700px 482px; margin: 30px auto 0}}
	@media (min-width: 1500px) {  .achievements {width:700px; height: 484px; background-size: 700px 482px; margin: 35px auto 0}}
	
	.grayfooter {width:100%; height: 100px; background-color: #f1f1f1}
	@media (min-width: 768px) {  .grayfooter {height: 112px; }}
	@media (min-width: 992px) {  .grayfooter {height: 130px; }}
	@media (min-width: 1200px) {  .grayfooter {height: 160px;}}
	@media (min-width: 1500px) {  .grayfooter {height: 160px; }}
	
	.grayfootercontainer {width:100%; height: 100px; margin:auto; text-align:center}
	@media (min-width: 768px) {  .grayfootercontainer {max-width:700px; height: 112px; }}
	@media (min-width: 992px) {  .grayfootercontainer {max-width:900px; height: 130px; }}
	@media (min-width: 1200px) {  .grayfootercontainer {max-width:1000px; height: 160px;}}
	@media (min-width: 1500px) {  .grayfootercontainer {max-width:1200px; height: 160px; }}
	
	.grayfooterdiv {width:70px; height: 100px; display:inline-block}
	@media (min-width: 768px) {  .grayfooterdiv {width:160px;height: 112px; }}
	@media (min-width: 992px) {  .grayfooterdiv {width:200px;height: 130px; }}
	@media (min-width: 1200px) {  .grayfooterdiv {width:220px;height: 160px;}}
	@media (min-width: 1500px) {  .grayfooterdiv {width:250px; height: 160px; }}
	
	.logofooter {height: 35px; background-repeat: no-repeat; background-position: center top;vertical-align:top; text-align:centre; margin-top:25px}
	@media (min-width: 768px) {  .logofooter {height: 60px; margin-top:26px}}
	@media (min-width: 992px) {  .logofooter {height: 70px; margin-top:30px}}
	@media (min-width: 1200px) {  .logofooter {height: 80px; margin-top:40px}}
	@media (min-width: 1500px) {  .logofooter {height: 85px;}}
	
	.logofooterdeline {height: 45px; background-repeat: no-repeat; background-position: center top;vertical-align:top; text-align:centre; margin-top:25px}
	@media (min-width: 768px) {  .logofooterdeline {height: 75px; margin-top:20px}}
	@media (min-width: 992px) {  .logofooterdeline {height: 85px; margin-top:20px}}
	@media (min-width: 1200px) {  .logofooterdeline {height: 95px; margin-top:30px}}
	@media (min-width: 1500px) {  .logofooterdeline {height: 100px;}}
	
	    .copyright {
        bottom: 0;
        width: 100%;
        background-color: #333;
        color: #8c8c8c;
        text-align: center;
        padding: 8px 0;
        font-family: 'Open Sans', sans-serif; 
        font-weight: 400; 
        font-style: normal; 
        font-size: 12px;
    }
		.contact-form {
            max-width:1000px; 
            margin: 0px auto 20px;
            padding: 30px;
            background: #fff;
            border-radius: 20px;

        }
        input, textarea {
            width: 80%;
            padding: 10px;
            margin: 8px 0;
            border: 1px solid #d7d7d7;
            border-radius: 10px;
        }
        button {
            background: #787878;
            color: white;
            border: none;
            padding: 10px;
            width: 100px;
            cursor: pointer;
            border-radius: 15px;
			text-align: center;
			margin:auto;
			transition: background 0.6s ease;
        }
        button:hover {
            background: #ed1c24;
        }
		h2 {
        text-align: center;
        margin-bottom: 10px;
		font-family: 'Open Sans', sans-serif; 
		font-weight:400;
		color:#494949;
		font-size:26px;
		
    }
	
	    .contact-text {
        font-size: 14px;
        color: #494949;
		font-family: 'Open Sans', sans-serif; 
        font-weight: 400; 
        font-style: normal;
    }
	.contact-text a {color:#494949 !important; text-decoration:none !important; font-size: 14px; font-weight: 400; font-family: 'Open Sans', sans-serif; }
	.contact-text a:hover{color:#ed1c24 !important; text-decoration:none !important;}
	
    .social-icons {
        display: flex;
        gap: 8px; /* spacing between icons */
    }

    .social-icons a svg {
        display: block;
        width: 20px;
        height: 20px;
        transition: fill 0.4s ease;
    }

    .social-icons a:hover svg {
        fill: #ed1c24; /* hover color */
    }


	
	.headerright {width:340px; display: flex; align-items: center; gap: 20px; padding: 6px; }
	.containerheaderright{width:340px; text-align:center; margin:auto; padding-right:6px}
		@media (min-width: 768px) {  .containerheaderright {width:354px; margin-left:auto; text-align:right; margin-right:10px; padding-top:6px}}

    #backToTop {
    display: none;                /* hidden by default */
    position: fixed;
    bottom: 24px;                 /* bottom-6 (24px) */
    right: 24px;                  /* right-6 (24px) */
    z-index: 50;
    width: 50px;   /* h-6 w-6 */
    height: 50px;
    background-color: #fff;
    color: #bebebe;

    border: solid 1px #d7d7d7;
    border-radius: 50%;
    padding: 12px;                /* p-3 (12px) */

    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    cursor: pointer;

    transition: opacity 0.3s ease, background-color 0.3s ease;
    }

    #backToTop:hover {
        background-color: #bebebe;
		color: #fff;
		
    }

    #backToTop .icon {
        width: 20px;   /* h-6 w-6 */
        height: 20px;
    }
    
/* FULL WIDTH SECTION */
.video-section{
background:#2f2f2f;
padding:30px 0;
position:relative;
width:100%;
margin-top: 25px;
}

.video-slider{
display:flex;
gap:40px;
overflow-x:auto;
scroll-behavior:smooth;
padding:0 30px;
scrollbar-width: none;

/* FIX */
max-width:1200px;
margin:0 auto;
}

@media (max-width: 768px) {
  .video-slider {
    gap: 0;
  }
}

.video-slider::-webkit-scrollbar{
display:none; /* Chrome/Safari */
}

/* Desktop: default - show multiple videos */
.video-slider > div {
  flex: 0 0 calc(25% - 30px); /* 4 videos per view, adjust gap if needed */
  cursor: pointer;
}

/* Mobile: only 1 video per view */
@media (max-width: 768px) {
  .video-slider > div {
    flex: 0 0 100%;
    min-width: 100%;
  }
  
    @media (max-width: 380px) {
    .video-slider {
      gap: 20px; /* or whatever tiny spacing you like */
    }
  }
}

.video-slider div img {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.video-slider div:hover img {
  transform: scale(1.1);
}

 /*VIDEO CARD */
/*.video-item{*/
/*min-width:300px;*/
/*height:200px;*/
/*position:relative;*/
/*flex:0 0 auto;*/
/*cursor:pointer;*/
/*}*/

/*.video-item img{*/
/*width:100%;*/
/*height:100%;*/
/*object-fit:cover;*/
/*}*/

 /*PLAY ICON (exact style) */
/*.video-item::after{*/
/*content:'';*/
/*position:absolute;*/
/*top:50%;*/
/*left:50%;*/
/*transform:translate(-50%,-50%);*/
/*width:50px;*/
/*height:50px;*/
/*border:4px solid white;*/
/*border-radius:50%;*/
/*}*/

/*.video-item::before{*/
/*content:'▶';*/
/*position:absolute;*/
/*top:50%;*/
/*left:50%;*/
/*transform:translate(-40%,-50%);*/
/*font-size:32px;*/
/*color:white;*/
/*z-index:2;*/
/*}*/

/* ARROWS (SIDE OVERLAY) */
.nav-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(255,255,255,0.8);
border:none;
color:#000;
font-size:30px;
cursor:pointer;
z-index:20;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius: 25px;
}

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

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

.nav-btn:hover{
color:#fff;
background:rgba(255,255,255,0.2);
}

.video-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.95);
z-index:99999;
align-items:center;
justify-content:center;
}

.video-modal-content{
position:relative;
width:90%;
max-width:900px;
}

.video-modal iframe{
width:100%;
height:500px;
}

.close-btn{
position:absolute;
top:-40px;
right:0;
color:#fff;
font-size:35px;
cursor:pointer;
}