/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 27 2026 | 08:09:55 */
body{
	background: linear-gradient(to right, #cce7ff, #e6f2ff);
}
.responsive-mainnav, .responsive-topnav{
	padding-right: 0px;
}
.responsive-mainnav ul, .responsive-topnav ul{
	padding: 40px;
}
.responsive-mainnav ul ul, .responsive-topnav ul ul{
	padding: 0 30px;
}
@media only screen and (max-width: 991px){
	    .hm-nav-container .main-navigation{
       display: none;
    }
}
@media only screen and (max-width: 399px){
	.page-benner .vc_col-sm-12 .wpb_wrapper h2 {
    font-size: 36px !important;
  }
}

/*Site Content Start*/
.site-content {
    padding-bottom: 0;
}
/*Site Content End*/
/*hitmag-wrapper Start*/
.hitmag-full-width .hitmag-wrapper{
	max-width: 100%;
	background: #f0f3ff;
}

/*hitmag-wrapper End*/

/*Logo Start*/
.hm-logo{
	position: absolute !important;
    top: -42px !important;
    width: clamp(144px, 26vw, 360px) !important;
    aspect-ratio: 1.7 / 1;
    background-image: url(https://milestone1993.org/wp-content/uploads/2026/04/logo-background1.png);
    background-size: contain !important;
    background-repeat: no-repeat;
    display: flex !important;
    align-items: flex-start !important;
    z-index: 1 !important;
    padding: 30px 40px;
}
.hm-logo a{
	float: left;
    width: 91px;
}
.hm-logo img {
    width: clamp(60px, 6.2vw, 133px) !important; 
    height: auto !important;
    object-fit: contain;
}

/*Logo End*/
/*Header Start*/

.site-header{
	display: flex;
    flex-direction: column; /* Sab kuch ek ke neeche ek (vertical) */
    width: 100%;
	margin: 0;
}

.site-header .hm-top-bar {
	display: flex;
    justify-content: flex-end; /* Button aur content ko right par rakhega */
    align-items: center;
    width: 100%;             /* Header poori screen ki width le */
    padding: 0 20px;         /* Choti screen ke liye minimum side padding */
    height: 43px;
    background: #20306e;
}
.site-header .hm-top-bar .hm-container{
	display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    height: 100% !important;
}/* 1. Default (Full Screen ke liye) */
.site-header .hm-top-bar .hm-container .hm-top-bar-content {
	display: flex;
    align-items: center;
    width: clamp(350px, 77vw, 1100px);
    position: relative;
    margin-left: auto;
}
	.site-header .hm-top-bar .top-left-icons {
   display: flex;
    position: relative;
	gap: 10px;
    z-index: 100;
    width: 150px;
    height: auto;
    margin-left: clamp(67px, 22vw, 0px);
}
.site-header .hm-top-bar .top-left-icons .top-left-btn a{
	position: relative; /* Z-index tabhi kaam karega jab position set ho */
    z-index: 9999 !important; /* Logo se high value */
    pointer-events: auto !important; /* Click activate karne ke liye */
}
.site-header .hm-top-bar .top-timing{
	display: flex !important;
    justify-content: center !important;
    align-items: center !important; /* Vertical center ke liye */
	width:100%;
    flex: 2; 
    overflow: hidden !important;    /* Zaruri: Animation ko div ke andar rakhne ke liye */
    position: relative;             /* Animation handle karne ke liye */
	margin-left: clamp(100px, 10vw, 200px) !important;
    margin-right: clamp(100px, 10vw, 200px) !important;
}
.site-header .hm-top-bar .hm-container p{
	margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-family: sans-serif;
    white-space: nowrap;            /* Tekst ko ek line mein rakhne ke liye */
    transform: translateX(100%);
    animation: scrolling 13s linear infinite;
    letter-spacing: 1px;
	width: 100%; /* Yeh zor dega ke text poora cover kare */
    text-align: center;
}
@keyframes scrolling {
 0% { transform: translateX(100%); }      /* Right se start */
  100% { transform: translateX(-110%); }
}

/* Translator ke parent ko right par push karein */
.top-right-header {
    position: static; 
    transform: none;
    /* Ye z-index ab zaroori nahi rahega */
    z-index: auto;
}
.VIpgJd-ZVi9od-ORHb-OEVmcd{
	display: none;
}
#google_language_translator {
    padding-right: 0 !important;
    margin-right: 0 !important;
}
.site-header .hm-top-bar .top-right-translator select{
	
        transform-origin: right; /* Ye button ko right side se scale karega */
        font-size: 14px;
        padding: 2px 5px;
}
.top-right-translator .default-language-en .skiptranslate{
	display: none !important;
}
.skiptranslate-1 .goog-te-combo-1{
	display: none;
	
}

.top-right-header .top-right-translator .default-language-en .skiptranslate .goog-te-combo{
	margin-top: 8px;
	background-color:#fff;
	margin: 0;

}
.site-branding .site-branding-content{
	float: left;
    width: 100%;
}
/*Primary Menu Start*/
.hm-nav-container{
	display: flex !important;
    align-items: center !important;
    position: relative !important;
    padding: clamp(10px, 1.5vw, 26px) 0; /* Jo humne decide kiya tha */
    background: linear-gradient(to bottom, #82c6ed, #20306e);
    margin: 0 auto;
	width: 100%;
}
.main-navigation{
    margin-left: clamp(158px, 23vw, 241px) !important;
	flex: 1; /* Menu ko bachi hui saari jagah mil gayi */
    display: flex;
    justify-content: space-between;
	padding: clamp(0px, 1.5vw, 0px) 0;
	align-items: center;
    background: transparent;
}
.main-navigation .menu-item-has-children > a:after, .main-navigation .page_item_has_children > a:after {
	font-family: FontAwesome;
}
.main-navigation .menu li a{
		float: left;
    width: 100%;
    padding: 8px 11px;
    font-size: clamp(9px, 0.9vw, 15px) !important;
    color: #fff;
    letter-spacing: 1px;
    transition-duration: .5s;
    outline: none;
}
.main-navigation ul ul{
		background-color: #20306e;
		width: 242px;	
		top: 36px;
}
.main-navigation ul ul li{
	width: 93%;
}
/*Primary Menu End*/
/*Primary Menu Border Start*/
.site-header .header-curve{
	width: 100%;
    height: 217px;
    position: absolute;
    top: 307px;
	z-index:1;
    background: url(https://milestone1993.org/wp-content/uploads/2026/03/header-2.png);
}

/*Primary Menu Border End*/

/* Tablet View 991px Query Start */
@media (max-width: 991px){
	
	    .hm-nwrap {
      background: linear-gradient(to bottom, #82c6ed, #20306e);
        max-width: 100%;
        margin: 0;
    }
	#main-nav-button{
		float:right;
	}
		/* Top Bar Start */
	.site-header .hm-top-bar{
		height:35px;
	}
	.site-header .hm-top-bar .hm-container{
		width: 100% !important;
		margin:0 !important;
	}
	.site-header .hm-top-bar .hm-container .hm-top-bar-content{
		width: clamp(400px, 69vw, 1009px);
	}
	.site-header .hm-top-bar .top-left-icons {
		width: 130px;
        margin-left: clamp(0px, 17vw, 0px);
        margin-top: 5px;
	}
	.site-header .hm-top-bar .top-timing{
		margin-left: clamp(50px, 6vw, 100px) !important;
        margin-right: clamp(50px, 6vw, 100px) !important;
	}
	.site-header .hm-top-bar .top-timing p{
		font-size: 12px;
	}
	body #google_language_translator select.goog-te-combo {
        width: clamp(116px, 9vw, 143px) !important;
        font-size: clamp(10px, 1.6vw, 12px) !important;
		padding: 3px !important;
    }
	/* Top Bar End */
	/* Menu Bar Start */
	.hm-nav-container{
		padding: 0;
	}
	.hm-logo{
		top: -35px !important;
        width: 250px !important;
	}
	/* Menu Bar End */
}
/* Tablet View 991px Query Start */

/* Mobile View 768px Start */
@media screen and (min-width: 481px) and (max-width: 767px){
	/* 1. Header ko full width den, clamp hatayein */
    .hm-top-bar-content {
        display: flex !important;
        flex-wrap: wrap !important;
      width: clamp(266px, 61%, 610px) !important;
        max-width: 100% !important;
    }

    .site-header .hm-top-bar {
        height: auto !important;
    }

    /* 2. Buttons (50% + 50% = 100%) */
    .top-left-icons {
        width: 50% !important;
        order: 1 !important;
        display: flex !important;
        justify-content: center !important;
    }
.top-left-icons .top-left-btn{
	width:20px;
	}
    .top-right-header {
        width: 50% !important;
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* 3. Timing area (Ab ye 100% width lega) */
    .hm-top-bar-content .top-timing {
        display: block !important;
        width: 60% !important;
        flex: 0 0 60% !important;
        margin: 10px auto 0 auto !important; 
		margin-top: 0 !important;
        text-align: center !important;
        order: 3 !important;
        overflow: visible !important;
        animation: none !important;
    }

    /* 4. Menu bar fix */
    .hm-logo {
        top: -50px !important; /* Agar -55px zyada upar hai to -40 try karein */
    }
	
}
/* Mobile View 768px End */
/* Mobile View portrait Start */
@media screen and (min-width: 320px) and (max-width: 480px) {
/* 1. Header ko full width den, clamp hatayein */
   

    .site-header .hm-top-bar {
        height: auto !important;
		padding:0 !important;
    }
 .hm-top-bar-content {
        display: flex !important;
        flex-wrap: wrap !important;
		width: clamp(220px, 60%, 480px) !important;
        max-width: 100% !important;
    }
    /* 2. Buttons (50% + 50% = 100%) */
    .top-left-icons {
        width: 50% !important;
		gap: clamp(3px, 1vw, 10px) !important;
        order: 1 !important;
        display: flex !important;
        justify-content: flex-end;
    }
.top-left-icons .top-left-btn{
	width: 15px;
	}
    .top-right-header {
       width: clamp(40%, 33vw, 50%) !important;
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
    }
	body #google_language_translator select.goog-te-combo{
		width: clamp(92px, 18vw, 115px) !important;
       font-size: clamp(9.5px, 0.9vw, 12px) !important;

	}
    /* 3. Timing area (Ab ye 100% width lega) */
    body .site-header .hm-top-bar .top-timing {
        display: block !important;
        width: 55% !important;
        flex: 0 0 55% !important;
        margin-top: 0 !important;
        text-align: center !important;
        order: 3 !important;
        overflow: hidden !important;
        animation: none !important;
        margin-left: clamp(45px, 16vw, 84px) !important;
    }
	.hm-top-bar-content .top-timing p{
		font-size: 10px !important;
	}
    /* 4. Menu bar fix */
    .hm-logo {
        top: -44px !important;
    /* 250px kam se kam, 35vw ideal, 300px zyada se zyada */
    width: clamp(160px, 46.2vw, 220px) !important; 
    padding: 23px 34px;
		padding-top:clamp(15px, 11.2vw, 23px) !important;
    }
	.hm-logo img {
    width: clamp(30px, 11.2vw, 60px) !important;
}
	#main-nav-button{
		font-size: 12px;
		line-height: 40px;
	}
	
}
/* Mobile View portrait End */