@charset "utf-8";

/* CSS Document */

::-webkit-scrollbar {display: none;}
#element::-webkit-scrollbar {display: none;}
::-webkit-scrollbar {width: 16px; background: transparent; /* Hides the scrollbar background */}
::-webkit-scrollbar-thumb {background: linear-gradient(145deg, #ccc, #aaa); border-radius: 10px; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.5);}
::-webkit-scrollbar-button {display: none; /* Hides the scrollbar arrows */}
* {scrollbar-width: thin; scrollbar-color: #ccc transparent; /* Hides the scrollbar background */}
*::-webkit-scrollbar-thumb {background: linear-gradient(145deg, #ccc, #aaa); border-radius: 10px; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.5);}

body, html {height: 100%;}
* {box-sizing: border-box;}
@font-face {font-family: intervogue; src: url(fonts/IntervogueSoftRegular.otf);} 

body {font-size: 100%; font-family: intervogue; font-size: 15.8px; color:#2e2e2e; text-decoration:none; line-height: 22px; background-color:#fff; margin:0px; padding:0px; width:100%; height:100%; -webkit-font-smoothing: antialiased;}

#header {padding-right:10%; padding-left:10%;}
#helloheader {width:100%; float:left; background-color:#05114c; color:#fff; padding-left:10%; padding-right:10%;}
#workarea, #workarea_small {width:100%; display:block; float:left; padding-right:10%; padding-left:10%; padding-top:32px; padding-bottom:32px;}
#workarea p {text-align: justify;}

#logo {width:19%; height:auto; margin-right:auto; margin-left:auto; padding-bottom: 36px; padding-top: 32px;}

#right {float:right;} #left {float:left;}

#footerone {display: flex; justify-content: space-between; align-items: center; width:100%; padding: 12px 9vw; background-color:#85bfc4; text-align:left; font-size: 13px; font-weight: bold; color: #2e2e2e;}
#footertwo {display: flex; justify-content: space-between; align-items: center; width:100%; padding: 12px 9vw; background-color:#2e2e2e; text-align:left; font-size: 13px; font-weight: bold; color: #fff;}
		
#landscapedisplay {display: block;} #portraitdisplay {display: none;}
.mobile {display: none;} .tab {display: none;} .desktop {display: block;}

#pagename {margin-top:95px; width:20%; text-align:right; border-bottom-right-radius: 8px; border-top-right-radius: 8px;}

.topnow {writing-mode:vertical-rl; transform:rotate(180deg); right: 35px; bottom: 35px; position: fixed; color: #b561f5; font-size: 60px; cursor: pointer; display: none;}

#profileimage {width: 14%; height: auto; margin-left: 22px; margin-top: 32px; margin-bottom: 32px; float: right; border-radius: 50%; border: 1px solid #ccc;}

.inner {display: inline-block; vertical-align: middle; margin-right:15px;}

#coverimage {width: 100%; left:0px; height: 260px; background-size:cover; float:left; background-attachment: fixed; background-position:top; background-repeat:repeat-x; position:relative; z-index:-9999;}

#halfdiv {width: 45%}

#switch {
	writing-mode:vertical-rl; transform: translate(0, -50%) rotate(180deg); background-color: #2a3192; padding: 15px; padding-left: 8px; padding-right: 12px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; right: 0px; top: 50%; position: fixed; color: #fff; border: 1px solid #fff; border-left: none; z-index: 999; 
} #switch a {color: #fff; font-size: 15px; font-weight: bold; text-decoration: none;} 

/* Fonts */

h1 {font-size: 24px; font-weight: 400; color:#2e2e2e; padding:25px; background-color:#fff; opacity: 0.9;}
h2 {font-size: 22px; font-weight: bold; color:#2e2e2e; margin-top:15px; margin-bottom:15px; line-height: 34px;}
h3 {font-size: 18px; color:#595959; margin-top:9px; margin-bottom:9px; font-weight: bold; line-height: 24px;}
h4 {font-size: 16px; color:#2e2e2e; margin-top:9px; margin-bottom:9px; font-weight: 250;}
h5 {font-size: 14px; color:#595959; margin-top:12px; margin-bottom:12px; font-weight: 250;}
h6 {font-size: 12px; color:#2e2e2e; margin-top:2px; margin-bottom:2px; line-height:16px;}

a {outline: 0;}
a img {text-decoration: none;}
a:link {text-decoration: none; color: #2e2e2e;}
a:visited {text-decoration: none; color: #2e2e2e;}
a:active {text-decoration: none; color: #2e2e2e;}
a:hover, a:visited {text-decoration: none; color: #2e2e2e;}

.white a:link {text-decoration: none; color: #fff;}
.white a:hover{text-decoration: none; color: #fff;}
.white a:visited {text-decoration: none; color: #fff;}
.white a:active {text-decoration: none; color: #fff;}

/* New CSS */

#footerone {display: flex; justify-content: space-between; align-items: center; width:100%; padding: 12px 9vw; background-color:#85bfc4; text-align:left; font-size: 13px; font-weight: bold; color: #2e2e2e;}
#footertwo {display: flex; justify-content: space-between; align-items: center; width:100%; padding: 12px 9vw; background-color:#2e2e2e; text-align:left; font-size: 13px; font-weight: bold; color: #fff;}

/* mobile landscape */
@media all and (min-width: 414px) and (max-width: 783px) and (orientation: landscape) {
	#logo {width:36%;} #header, #helloheader {padding-right:5%; padding-left:5%;}
	#pagename {opacity:0.7; text-align:center; width:100%;}
	.topnow {right: 25px; bottom: 25px; font-size: 42px;}
	#workarea {padding-right:5%; padding-left:5%;}
	#workarea_small {padding-right:2%; padding-left:2%;}
	#footerone, #footertwo {padding: 12px 3vw}		
	.mobile {display: block;} .desktop {display: none;}
	#profileimage {width: 20%; margin: 12px 0 12px 0; float: none;}
	#halfdiv {width: 100%; border: none;}
}

/* tab landscape */
@media all and (min-width: 784px) and (max-width: 1024px) and (orientation: landscape) {
	#logo {width:28%;} #header, #helloheader {padding-right:5%; padding-left:5%;}
	#pagename {opacity:0.7; text-align:center; width:100%;}
	.topnow {right: 25px; bottom: 25px; font-size: 42px;}
	#workarea {padding-right:5%; padding-left:5%;}
	#workarea_small {padding-right:2%; padding-left:2%;}
	#footerone, #footertwo {padding: 8px 5vw}
	.mobile {display: none;} .desktop {display: block;}
	#halfdiv {width: 48%}
}

/* mobile portrait */
@media all and (max-width: 767px) and (orientation: portrait) {
	#logo {width:68%;} #header, #helloheader {padding-right:5%; padding-left:5%;}
	#pagename {opacity:0.7; text-align:center; width:100%;}
	.topnow {right: 25px; bottom: 25px; font-size: 42px;}
	#workarea {padding-right:5%; padding-left:5%; overflow-x: hidden;}
	#workarea_small {padding-right:2%; padding-left:2%;}
	#right {float:right; width:100%; text-align:center;}
	#left {float:left; width:100%; text-align:center;}
	#footerone, #footertwo {padding: 10px 4vw;} 
	#landscapedisplay {display: none;} #portraitdisplay {display: block;}
	.mobile {display: block;} .desktop {display: none;}
	#corner-pop {max-width: auto; right: 20%;}
	#profileimage {width: 40%; margin: 12px 0 12px 0; float: none;}
	#halfdiv {width: 100%; border: none;}
}

/* tab portrait */
@media all and (min-width: 768px) and (orientation: portrait) {
	#logo {width:32%;} #header, #helloheader {padding-right:5%; padding-left:5%;}
	#pagename {opacity:0.7; text-align:center; width:100%;}
	.topnow {right: 25px; bottom: 25px; font-size: 42px;}
	#workarea {padding-right:5%; padding-left:5%;}
	#workarea_small {padding-right:2%; padding-left:2%;}
	#footerone, #footertwo {padding: 10px 2.5vw;}
	.mobile {display: block;} .desktop {display: none;}
	#profileimage {width: 20%; margin: 12px 0 12px 0; float: none;}
	#halfdiv {width: 47%}
}


/* Menu */

    nav {
      background-color: #fff;
    }

    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex; /* Horizontal alignment for desktop */
      justify-content: center; /* Center menu horizontally */
    }

    nav li {
      position: relative;
    }

    nav a {
      display: block;
      padding: 6px 20px;
      text-decoration: none;
      background-color: #fff;
      color: #2e2e2e;
      font-size: 18px;
      border-right: 2px solid #ccc; /* Right-side border */
      transition: background-color 0.3s ease;
    }

    nav a:hover {
      font-weight: bold;
    }

    /* Remove the border from the last menu item */
    nav li:last-child a {
      border-right: none;
    }

    /* Submenu styles */
    .submenu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #f4f4f4;
      min-width: 200px;
      border-radius: 4px;
	  text-align: left;
	  border: 1px solid #ccc;
	  padding: 5px 0px;	
    }

    .submenu li a {
      padding: 12px 15px;
	  border-right: none;
    }

    .submenu li a:hover {
    	font-weight: bold;
    }

    /* Show submenu on hover */
    li:hover > .submenu {
      display: block;
    }

/* Mob Menu */

.topnav {overflow: hidden; background:none;}
.topnav a {float: left; display: block; color: #b561f5; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 16px; font-weight: bold;}
.topnav a:hover {background-color: #fff; color: black;}
.topnav .icon {display: none;}

  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {float: right; display: block;}

  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {position: absolute; right: 0; top: 0;}
  .topnav.responsive a {float: none; display: block; text-align: left;}


.progress {
  background: linear-gradient(to right, #b561f5 var(--scroll), transparent 0);
  background-repeat: no-repeat; position: fixed; width: 100%; height: 4px; z-index: 999;
}

/* Form Field */

::placeholder {color: #919191;}
:-ms-input-placeholder {color: #919191;}
::-ms-input-placeholder {color: #919191;}

#contact {padding-left:0px; padding-right:0px; margin:0 0; position:relative; width:100%;}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"], fieldset input[type="datetime-local"] { font-family:Arial; }
fieldset {border: medium none !important; margin: 0 0 6px; padding: 0; width: 100%; text-align:center;}
fieldset label {font-size: 11px; padding-bottom: 9px;}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="otp"],#contact input[type="url"], input[type="password"], input[type="file"], fieldset input[type="datetime-local"], #contact textarea, #contact select {
	width:100%; border:1px solid #fff; border-radius: 5px; background:#F9F9F9; margin:0 0 8px; padding:12px; color:#2e2e2e; background-position:right; background-repeat:no-repeat; background-size:28px;
}
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, input[type="password"], input[type="file"], fieldset input[type="datetime-local"], #contact textarea:hover, #contact select{
	-webkit-transition:border-color 0.3s ease-in-out; -moz-transition:border-color 0.3s ease-in-out; transition:border-color 0.3s ease-in-out; border:1px solid #fff;
}
#contact input[type="text"]:focus, #contact input[type="email"]:focus, #contact input[type="tel"]:focus, #contact input[type="url"]:focus, input[type="password"], input[type="file"], fieldset input[type="datetime-local"], #contact textarea:focus {
	-webkit-transition:border-color 0.3s ease-in-out; -moz-transition:border-color 0.3s ease-in-out; transition:border-color 0.3s ease-in-out; border:1px solid #fff;	
}

#contact input[type="text"]:active, #contact input[type="email"]:active, #contact input[type="tel"]:active, #contact input[type="url"]:active, input[type="password"], input[type="file"], fieldset input[type="datetime-local"], #contact textarea:active {outline:0; border:1px solid #999;}
#contact input[type="text"]:focus, #contact input[type="email"]:focus, #contact input[type="tel"]:focus, #contact input[type="url"]:focus, input[type="password"], input[type="file"], fieldset input[type="datetime-local"], #contact textarea:focus {box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5);}

#contact textarea {height:100px; max-width:100%; resize:none;}
#contact button[type="submit"] {background-color:#333; border-radius:5px; width:100%; color:#fff; text-align:center; cursor:pointer; border: 1px solid #ccc; margin-top:6px; padding: 10px; font-size:12px; font-weight: 900; float: left;}
#contact button[type="submit"]:hover {background-color:#FDC100; color: #333;}
#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#contact input:focus, #contact textarea:focus { outline:0; border:1px solid #999;}

.mitraabtn {background-color:#333; border-radius:5px; width:auto; color:#fff; text-align:center; cursor:pointer; border: 1px solid #ccc; margin-top:6px; padding: 10px; font-size:12px; font-weight: 900;}
.mitraabtn:hover {background-color:#FDC100; color: #333;}