/*font-family: 'Lora', serif;
 font-family: 'Noto Sans', sans-serif; */
body{font-family: 'Lora', serif;padding:0px; margin:0px;font-size:17px;color:#333333;line-height:160%;} 
.container {max-width: 1440px;}
a{color:#001a34;text-decoration:none;outline:none; cursor:pointer; }
a:hover, a:focus {color:#001a34; text-decoration:underline;outline:none;}
p{color:#3d3d3d; font-family: 'Noto Sans', sans-serif; font-size:14px; line-height:23px;}
h1, h2, h3, h4, h5{color:#3e3e3e;}
.noto-sans{font-family: 'Noto Sans', sans-serif; }
.f69{font-size:60px;}
.f24{font-size:24px;}
.f22{font-size:24px;}
.f18{font-size:18px !important;}
.f55{font-size:55px;}
.f45{font-size:45px;}
.f30{font-size:30px;}
.f20{font-size:20px;}
.bg-blue{background:#10a1d6;}
.bg-white{background:#ffffff;}
.col_blue{color:#10a1d6 !important;}
.col_white{color:#fff; }
.bg-gray{background:#f3f3f3;}
.blue{color:#001a34;}
.line-height{ line-height:45px;}
.f-bold{font-weight: bold;}
.shadow{box-shadow: 0px 0px 5px -2px #686868;}
.btn {display: inline-block;font-weight: 500;padding: 0.7rem 1.2rem;font-size: 22px;line-height: 1.5;border-radius: 0;font-family: 'Noto Sans', sans-serif;}
.primaryfot{ font-family: 'Noto Sans', sans-serif;}
.btn-primary {color: #fff;background-color: #001a34;border-color: #001a34;}
.btn-primary:hover {color: #fff;background:none; border-color: #fff;}
.btn-secondary {color: #fff;background:none; border-color: #fff;}
.btn-secondary:hover {color: #fff;background-color: #001a34;border-color: #001a34;}
.headerindex{position: fixed;top: 0;right: 0;left: 0;z-index: 9;width: 100%;background-color: rgba(0,0,0, 0.40);font-family: 'Lora', serif;font-size:18px;}
.navbar.navbar-expand-sm.top-nav {padding:5% 0px !important;transition: padding 0.3s;}
.navbar.navbar-expand-sm.top-nav.navbar-shrink {padding: 2% 0 !important;}
.icon-bg {height: 100px;width: 100px;border-radius: 50%;position: relative;background: #fff;display: flex;-webkit-box-align: center !important;-ms-flex-align: center !important;align-items: center !important;-webkit-box-pack: center !important;-ms-flex-pack: center !important;justify-content: center !important; margin: auto; border: 1px solid #10a1d6;}
.svg_icon_nav {height: 50px;width: 70px;fill: #10a1d6;}
.banner-overlay{ z-index:1;   background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00ffffff',GradientType=1 ); height:100%;width:100%;position:absolute;}
.carousel-caption {bottom: 30%;left: 12.2%;}
.nav-link {	font-size: 22px;padding: 0 15px !important; color:#fff; text-transform: uppercase; transition:all 0.35s;}
.nav-link:hover{ color:#b6b2b2;}
.main-logo.navbar-shrink img {width: 75%;}

.bottom-arrow{ position:absolute; bottom:5%; left: auto;z-index: 10;width: 100%;text-align: center;}
.bottom-arrow i{ font-size:75px;}

.navbar-shrink .scroll-logo{ display:block;}
.navbar-shrink .static-logo{ display:none;}
.scroll-logo{ display:none;}
.logo img {transition:0.5;}
.borderleft{width:5%; border-top:2px solid #001a34;; margin: 0px 15px;}
/* Shine */
figure {overflow: hidden;}
.about-img figure::before {position: absolute;top: 0;left: -87%;z-index: 2;display: block;content: '';width: 50%;height: 100%;background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);-webkit-transform: skewX(-25deg);transform: skewX(-25deg);}
.about-img figure:hover::before {-webkit-animation: shine .75s;animation: shine .75s;}
.navbar-nav li.active a{ color:#b6b2b2}


.home-banner{ background:url(../../Content/images/Main-header-img.jpg) no-repeat; height:100vh; background-attachment:fixed; background-size:cover;}
.about-banner{ background:url(../../Content/images/about-banner.jpg) no-repeat; height:100vh; background-attachment:fixed; background-size:cover;}
.area-banner{ background:url(../../Content/images/area-banner.jpg) no-repeat; height:100vh; background-attachment:fixed; background-size:cover;}
.news-banner{ background:url(../../Content/images/news-event-banner.jpg) no-repeat; height:100vh; background-attachment:fixed; background-size:cover;}
.contact-banner{ background:url(../../Content/images/contact-banner.jpg) no-repeat; height:100vh; background-attachment:fixed; background-size:cover;}
.practise-sec .card-img-overlay{ /*background:rgb(0,0,0,0.5);   left:14px;*/ display:table; width:100%; height:100%;}

.practise-sec .content-detail{ display:table-cell; vertical-align:middle;}
.practise-sec .mt-20{ margin-top:20px;}
.practise-sec .box-view{ overflow:hidden; background:#000;}
.practise-sec .box-view img{ transition:all 0.35s; opacity:.5;}
.practise-sec .box-view:hover img{ transform:scale(1.2);}

@-webkit-keyframes shine {
	100% {left: 125%;}
}

.about-img figure:hover::before {-webkit-animation: shine .75s;animation: shine .75s;}
/* Shine end */

.box-hover-effect img {display: block;max-height: 100%;max-width: 100%;opacity: 1;-webkit-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;}
.box-hover-effect.effect2:hover img {-webkit-transform: scale(2);-ms-transform: scale(2);-o-transform: scale(2);transform: scale(2);-webkit-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.box-hover-effect.effect2 .thumb {position: relative;overflow: hidden;}
.box-hover-effect:hover .overlay.white {background: rgba(0, 0, 0, 0.75);}
.box-hover-effect .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;}
.display-table {display: table;height: 100%;position: relative;width: 100%;z-index: 1;}
.box-hover-effect.effect2 .overlay .overlay-details {opacity: 0;-webkit-transform: scale(0.8, 0.8);-ms-transform: scale(0.8, 0.8);-o-transform: scale(0.8, 0.8);transform: scale(0.8, 0.8);-webkit-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.box-hover-effect.effect2:hover .overlay-details {opacity: 1;-webkit-transform: scale(1, 1);-ms-transform: scale(1, 1);-o-transform: scale(1, 1);transform: scale(1, 1);}
.display-table-cell {display: table-cell;height: 100%;vertical-align: middle;}



/* top menu mobile*/
.togglemenu .nav {position: absolute;top: 0;right: 0;width: auto;z-index: 10000;}
.togglemenu .nav-container {position: fixed;top: -1px;right: 0;z-index: 1;overflow-y: auto;visibility: hidden;width: 100%;height: 100%;min-height: 100%;margin: 0;padding-top: 60px;-webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);transform: translateX(-100%);-webkit-overflow-scrolling: touch;transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;-webkit-transform: translateX(100%);-ms-transform: translateX(100%); transform: translateX(100%);  background: #000;-webkit-overflow-scrolling: touch; }
.togglemenu .nav-container.is-visible {visibility: visible; -webkit-transform: translateX(0); -ms-transform: translateX(0);transform: translateX(0);}
.togglemenu .nav-toggle {line-height: 1;display: inline-block;padding: 0rem 1rem;border: 0;background-color: transparent;float: right;z-index: 9;position: relative;top: 0px;cursor: pointer;padding: 20px; outline: none;}
.nav-toggle .icon-menu {position: relative;display: inline-block;width: 31px;height: 22px;vertical-align: middle;fill: none;}
.icon-menu .line {position: absolute;left: 0;display: block;width: 100%;height: 5px;-webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000);transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000);-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); background-color: #fff;border-radius:4px;}
.togglemenu .icon-menu .line-1 { top: -1px; }
.togglemenu .is-active .icon-menu .line-1 {-webkit-transform: translateY(9px) translateX(0) rotate(45deg); -ms-transform: translateY(9px) translateX(0) rotate(45deg); transform: translateY(9px) translateX(0) rotate(45deg);}
.togglemenu .icon-menu .line-2 {top: 50%;margin-top: -3px;}
.togglemenu .is-active .icon-menu .line-2 { opacity: 0; }
.togglemenu .icon-menu .line-3 { bottom: 0; }
.togglemenu .is-active .icon-menu .line-3 {-webkit-transform: translateY(-9px) translateX(0) rotate(-45deg); -ms-transform: translateY(-9px) translateX(0) rotate(-45deg); transform: translateY(-9px) translateX(0) rotate(-45deg);}
.togglemenu .menu {list-style: none;margin: 0; padding: 0;}
.togglemenu .nav-menu {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.togglemenu .nav-menu .menu-item {text-align:center; }
.togglemenu .nav-menu > .menu-item:hover, .nav-menu > .menu-item.is-active { background-color: transparent; }
.togglemenu .nav-menu > .menu-item .menu-link:hover, .nav-menu > .menu-item.is-active  {color:#10a1d6;}
.togglemenu .nav-menu .menu-link {display: block;text-decoration: none;color: #fff;padding: 1rem 1rem;font-size:21px;}
.togglemenu .has-dropdown {position: relative;cursor: pointer;}
.togglemenu .has-dropdown > .menu-link { display: inline-block; }
.togglemenu .has-dropdown::after {font-size: 40px;position: absolute;	top: 17px;right: 1rem;bottom: 0;content: "+";color: #2b42e9;}
.togglemenu .has-dropdown.is-active:after { content: "\2013";}
.togglemenu .nav-dropdown {display: none;}
.togglemenu .has-dropdown.is-active > .nav-dropdown { display: block; }
.togglemenu .nav-dropdown .nav-dropdown { background-color: #000; }
.togglemenu .nav-dropdown .menu-item { border-color: #fff; }
.togglemenu .nav-dropdown .nav-dropdown .menu-item {background-color: #b0b0b0;border-color: #909090;}
.mainlogofixed{background-color: rgba(0,0,0, 0.40); width: 100%;}
/** areas  section **/
.areas .btn{font-size:18px;}
.areas h5{color:#3d3d3d; font-weight:bold; font-size:15px;}

/** parallax  section **/
.parallax-section {position: relative; padding:135px 0px; background-position:center center; background-size:cover; background-attachment:fixed; background-repeat:no-repeat;}
.parallax-section .auto-container {position: relative;z-index: 1;}
.parallax-section h2 {position: relative; font-size:40px; font-weight:400;  color:#fff;}
.parallax-section .overlay{position:absolute; left:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.8); top: 0;}

/** contact inquiry section **/
.contact-inquiry-form .bg-deep {background-color: #f3f3f3; width: 100%;}
.contact-inquiry-form h2{font-size: 18px;color: #001a34;font-family: Noto Sans; position: relative;}
.contact-inquiry-form .line-bottom::after {border: 1px solid #001a34;}
.contact-inquiry-form .line-bottom::after { bottom: -10px;content: "";height: 1px;left: 0;position: absolute;width: 100px;}
.contact-inquiry-form .form-group {margin-bottom: 0px; position:relative;}
.contact-inquiry-form .form-control {height: 45px; border: 0;border-bottom-width: 0px;border-bottom-style: none;border-bottom-color: currentcolor;border-bottom: 1px solid #c0c0c0;padding-left: 0;background: transparent;border-radius: 0;font-size: 14px;font-family: Noto Sans;}
.contact-inquiry-form .form-control:focus {background-color:transparent; outline:none;box-shadow:none; border-bottom:solid 2px #333;}
.contact-inquiry-form ::-webkit-input-placeholder { /* Chrome */color:#baa4a4;}
.contact-inquiry-form :-ms-input-placeholder { /* IE 10+ */color:#001a34;}
.contact-inquiry-form ::-moz-placeholder { /* Firefox 19+ */color:#baa4a4; opacity: 1;}
.contact-inquiry-form :-moz-placeholder { /* Firefox 4 - 18 */color:#baa4a4; opacity: 1;}
.contact-inquiry-form .btn-dark.btn-theme-colored {color: #fff;background-color: #001a34; border-color: #001a34; font-size: 15px; padding: 8px 22px; font-weight:bold;}
.contact-inquiry-form .btn-dark.btn-theme-colored:hover{color:#001a34;background: none;border-color:#001a34; }
.contact-inquiry-form .form-control.error{position:relative;}
.contact-inquiry-form  textarea.form-control {height: 70px; resize:none;}
.contact-inquiry-form label { color:#e44343; position:absolute; left:0; right:0; font-size:14px; bottom: -14px; }
.contact-inquiry-form .input-name{position: relative;display: inline-block;overflow: hidden;width:100%;}
/*.contact-inquiry-form .underline-animation{transition: all 0.5s;display: inline-block;bottom:20px;left: -100%;position: absolute;width: 100%;height: 2px;background-color:#001a34;}*/
.contact-inquiry-form .input-name > input[type=text]:focus + .underline-animation{left: 0;}
.contact-inquiry-form .input-name > input[type=email]:focus + .underline-animation{left: 0;}
.contact-inquiry-form .input-name > textarea:focus + .underline-animation{left: 0;}

.swal2-content .btn:hover{ background:rgba(0,0,0,0.5);}
.swal2-content .btn:focus{ border:none;}
 /** footer section **/
 
 .contact-info{background:#f3f3f3;}
 .contact-info p{color:#3e3e3e; font-family:Noto Sans; font-size:20px; line-height:25px;}
 .contact-info a{color:#3e3e3e; font-size:20px; line-height:25px;}
 .contact-info a:hover, a:focus {color: #001a34;text-decoration: none;outline: none;}
 .contact-info h2{font-family:Noto Sans; font-size:33px;}
 .social-icon ul{margin:0px; padding:0px;}
 .social-icon ul li{display:inline-block; width: 25px;height: 25px;position:relative; margin-right:40px;}
 .social-icon .icon {height: 100%;margin: 0 auto;text-align: center;vertical-align: middle;width: 100%;fill: #c0c0c0;}
 .social-icon .icon:hover {color:#10a1d6; fill: #10a1d6;}
 .footer-menu ul{margin:0px; padding:0px; display:block;}
 .footer-menu ul li{display:inline-block; padding-right:15px;}
 .footer-menu ul li a{color:#515151; }
 .footer-menu ul li a:hover{color:#b6b2b2; }
 .copyright{font-family:Noto Sans; font-size:14px; color:#c0c0c0;}
 .contact-inquiry-form{    padding: 20px 48px;background: #fff;  margin: 20px 25px;}
  .contact-inquiry-form h2{ font-size:29px;}
.bookmark {
    margin-top:-165px;
    padding-bottom:165px; 
    display:block;
}
.parallax-section a {color: #fff;}
.learn-btn .btn:hover {border-color: #001a34; color: #001a34;}
.flex-caption .f24.col_white.noto-sans {width: 100%; display: block;}
.practise-sec .my-md{ margin:24px 0 !important}
.logotext {
    font-size: 32px;
    color: #fff !important;
    line-height: 35px;
    text-decoration: none;
}
    .logotext:hover {
        text-decoration: none;
        outline:none;
    }
.logotext img{
    width:60% !important;
}
    .marginleft {
	margin-left: 72px;
}




    .overlaypopup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            z-index: 1000;
        }

        .popup {
            background: white;
            border-radius: 12px;
            max-width: 600px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            position: relative;
            animation: slideIn 0.3s ease-out;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

 .popup-content {
	padding: 49px 36px;
}

        .popuplogo {
            text-align: center;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 2px solid #e0e0e0;
        }

        .logo-text {
            font-size: 24px;
            font-weight: 700;
            color: #1a1a1a;
            letter-spacing: -0.5px;
        }

        .logo-subtitle {
            font-size: 12px;
            color: #666;
            margin-top: 4px;
            letter-spacing: 1px;
        }

        .popuph1 {
            font-size: 20px;
            margin-bottom: 20px;
            font-weight: 600;
            text-align: center;
        }

        .notice-text {
            font-size: 15px;
            line-height: 1.7;
            color: #333;
            margin-bottom: 20px;
        }

        .notice-text p {
            margin-bottom: 15px;
        }

        .contact-info {
            background: #f8f8f8;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 25px;
            font-size: 14px;
            line-height: 1.6;
        }

        .contact-info strong {
            color: #1a1a1a;
        }

        .contact-info a {
            color: #0066cc;
            text-decoration: none;
            word-break: break-all;
        }

        .button-container {
            text-align: center;
        }

        .btn-site {
            display: inline-block;
            background: #1a1a1a;
            color: white;
            padding: 14px 40px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 600;
            font-size: 15px;
            transition: background 0.2s ease;
            cursor: pointer;
            border: none;
            width: 100%;
            max-width: 300px;
        }

        .btn-site:hover {
            background: #555;
                 color: white;
        }

        .close-hint {
            text-align: center;
            margin-top: 15px;
            font-size: 12px;
            color: #999;
        }

        @media (max-width: 480px) {
            .popup-content {
                padding: 25px 20px;
            }

            .logo-text {
                font-size: 20px;
            }

            h1 {
                font-size: 18px;
            }

            .notice-text {
                font-size: 14px;
            }

            .btn-site {
                padding: 12px 30px;
                font-size: 14px;
            }
        }










@media only screen and ( max-width:1600px) {
    .flex-caption .f69 {font-size: 50px;}
    .contact-info h2{ font-size:27px;}
}

 @media only screen and ( max-width:1366px)
 
{.contact-inquiry-form{ margin:20px 5px;
    .carousel-caption {top: 27%;left: 2.2%;}
}
@media only screen and ( max-width:1280px)
{
    .parallax-section h2{font-size: 50px;} 
    .practise-sec .card-img-overlay{ width:92%;}
    .practise-sec .my-md{ margin:21px 0 !important}
}
@media only screen and ( max-width:1024px)
{
    .main-logo img{width:95%;}
    .f69 {font-size: 55px;}
    .f24 {font-size: 20px;}
    
    .contact-inquiry-form h2{font-size:16px;}
    .parallax-section{padding: 90px 0px;}
    .parallax-section h2 {font-size:40px;}
    .contact-info p {font-size: 18px;}
    .contact-info a {font-size: 18px;}
    .ipad .home-banner{  height:50vh; background-attachment: scroll !important}
    .ipad .about-banner{  height:50vh; background-attachment: scroll !important}
    .ipad .area-banner{  height:50vh; background-attachment: scroll !important}
    .ipad .news-banner{  height:50vh; background-attachment: scroll !important}
    .ipad .contact-banner{  height:50vh; background-attachment: scroll !important}
    .practise-sec .my-md{ margin:20px 0 !important}
    .main-logo{ width:50% !important;}
    .practise-sec .card-img-overlay{ width:97%; left:5px;}
    .practise-sec .item{ margin:0 5px;}
    p{ font-size:14px;}
    .practise-sec .card-img-overlay {width: 91%;left: 15px;}
    .nav-link {font-size: 17px;}
    
    .flex-caption .f69 {font-size: 40px;}

}
@media only screen and ( max-width:800px)

{
    .togglemenu .nav-menu .menu-link{ font-size:30px;}
    .flex-caption .f69 {font-size: 30px;}
    .contact-inquiry-form h2{ text-align:left;

}
@media only screen and ( max-width:768px)
{

  .f69 {font-size: 45px;} 
  .f24 {font-size: 18px;}
  .parallax-section{padding: 75px 0px;}
  .parallax-section h2 {font-size:30px;} 
  .contact-info{text-align:center;}
  .map_div1{height:480px !important;}
  .contact-info h2 {font-size: 30px; padding-top: 25px;}

}
@media only screen and ( max-width:767px)
{
    .f24 {font-size: 16px;}
    .map_div1 {height: 320px !important;}
    .flex-caption .btn{ margin-bottom:15px;}
    .iphone .home-banner, .iphone .about-banner, .iphone .area-banner, .iphone .news-banner, .iphone .contact-banner{  height:70vh; background-attachment: scroll !important}
    .main-logo {width:300px !important;}

    .practise-sec .card-img-overlay{ width:100%; left:0; }
    .practise-sec .item{ margin:0px;}
}
@media only screen and ( max-width:640px)
{
    .f69 {font-size: 44px;}
    .flex-caption .btn{padding: 0.7rem 0.5rem; font-size: 20px;}
    .parallax-section h2 {font-size: 24px;}
    .parallax-section {padding: 60px 0px;}
    .footer-menu ul li a{font-size: 18px;}
    .logotext {
        font-size: 26px;        
        line-height: 20px;
    }
    .logotext img{
    width:75% !important;
}
}
@media only screen and ( max-width:576px)
{
    .f24 {font-size: 16px;}
    .f69 {font-size: 35px;}
    .flex-caption .btn{font-size: 16px;}
    .footer-menu ul li a {font-size: 16px;}
 
}


@media only screen and ( max-width:480px)
{
    .flex-caption .btn{width: 100%;margin-bottom: 10px; margin-right: 0px !important; font-size: 16px;} 
    .carousel-caption {left: 2.2%;right: 2.2%; top:auto; bottom:15%}
    .welcome p{text-align:justify;}
    .flex-caption .mb-5{margin: 0rem !important;}
    .f18 { font-size: 16px !important;}
    .f69 {font-size: 20px;}
    .f22 {font-size: 18px;}
    .f24 {font-size: 16px;}
    .carousel-inner .f69 {font-size: 25px; margin:10px 0 !important; text-align: center;}
}
@media only screen and ( max-width:320px){

       .carousel-caption { bottom:15%;}



}