@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&family=Rubik:wght@300;400;500;600;700;800;900&display=swap');

body {
    padding: 0px;
    margin: 0px;
    font-size: 16px;
    color: #444;
    background-color: #fff;
    font-family: 'Rubik', sans-serif!important;
    overflow-x: hidden;
    width: 100vw;
    position: relative;
}
h1, h3, h2, h4, h5, h6 {
    font-family: 'Raleway', sans-serif!important;
}

:root {
    --primary: #04395E;
    --secondary: #098DEB;
    --third: #ABAB0F;
    --forth: #5E0F0D;
    --fifth: #AB4518;
    --sixth: #5E2308;
    --ls : .5px;
    --lh: 28px;
    --ts: .35s all ease-in-out;
}


.number{font-family: 'Raleway', sans-serif!important;}
.main-title {
    font-size: 38px;
    font-weight: 700;
    font-family: 'Raleway', sans-serif !important;
    letter-spacing: var(--ls);
}

.title {
    font-size: 16px;
    letter-spacing: var(--ls);
    font-weight: 500;
    color: #fff;
}

.sub-title {
    font-size: 18px
}

.small-sub-title {
    font-size: 12px;
}

.bg-main {
    background-color: var(--sixth);
}

.online-admission h3.text-warning {
    font-weight: 200;
    letter-spacing: .5px;
    line-height: 40px;
    margin-top: 11px;
    font-size: 25px;
    color: #fff!important;
}

    .online-admission h3.text-warning > span {
        font-weight: 600;
        color: var(--third);
    }

#carouselExampleIndicators .card-body h5 {
    font-size: 18px;
    letter-spacing: var(--ls);
    font-weight: 500;
    color: #fff;
    line-height: 24px;
}

#carouselExampleIndicators .card-body {
    background: var(--primary);
    min-height: 125px;
}

    #carouselExampleIndicators .card-body a {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 12px;
        font-weight: 100;
        font-size: 16px !important;
        padding: 4px 23px !important;
        letter-spacing: .5px !important;
    }

.circal-cont > i {
    background: linear-gradient(45deg, #ffffff, transparent);
    padding: 9px 17px;
    border-radius: 10px;
    color: var(--primary) !important;
    backdrop-filter: blur(4px);
}

.online-admission a {
    background: linear-gradient(132deg, #ff1100, #4b01cf);
    border: 0 !important;
    padding: 13px 30px;
    font-size: 20px !important;
    letter-spacing: .5px;
    transition: var(--ts);
}


.menu ul {
    padding-left: 0px;
    margin-bottom: 0px;
    float: right;
}

.menu ul li {
    list-style: none;
    display: inline-block;
    padding: 10px 15px;
    color: #fff;
    text-transform: uppercase;
    position: relative;
}

    .menu ul li a {
    text-decoration: none;
    color: #032238;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .5px;
    transition: var(--ts);
}

.menu ul li a:hover {
    text-decoration: none;
    color: var(--secondary);
    text-transform: uppercase;
}



.move-text {
    animation: move 5s;
    -webkit-animation: move 5s;
}

@keyframes move {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}

@-webkit-keyframes move {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}

.main-color {
    color: #21a7d0;
}

.btn-apply {
    border: none !important;
    color: #fff !important;
    text-transform: inherit;
    padding: 7px 22px !important;
    border-radius: 24px !important;
    margin-top: -7px;
    letter-spacing: var(--ls);
    background-color: var(--primary) !important;
    margin-left: 20px;
}


.btn-apply:hover {
}

.btn-action {
    position: relative;
    display: flex;
    align-items: center;
    width: fit-content;
    background-color: var(--forth) !important;
    border-radius: 25px !important;
    color: #f1f6fc !important;
    padding: 8px 23px !important;
    font-size: 16px !important;
    letter-spacing: .5px;
}

#about-us .row .col-md-3 > .about-box .number {
    color: #150a1a;
    font-weight: 800;
    font-family: 'inter', sans-serif !important;
}



#about-us .row .col-md-3 > .about-box i{
    font-size: 40px;
    margin-bottom: 12px;
}

#about-us .row .col-md-3:nth-child(1) > .about-box i {
    color: #fff;
}

#about-us .row .col-md-3:nth-child(2) > .about-box i {
    color: #fff;
}

#about-us .row .col-md-3:nth-child(3) > .about-box i {
    color: #fff;
}

#about-us .row .col-md-3:nth-child(4) > .about-box i {
    color: #fff;
}

#about-us .row .col-md-3:nth-child(1) > .about-box {
    background: linear-gradient(180deg, #7f00bf 10%, #9f09eb);
}
#about-us .row .col-md-3:nth-child(2) > .about-box {
    background: linear-gradient(180deg, #018adf 10%, #0998eb);
}
#about-us .row .col-md-3:nth-child(3) > .about-box {
    background: linear-gradient(180deg, #c10063 10%, #f90481);
}
#about-us .row .col-md-3:nth-child(4) > .about-box {
    background: linear-gradient(180deg, #5ec100 10%, #75eb09);
}

.btn-action > i {
    visibility: hidden;
    display: none;
}

    .btn-apply:focus {
        outline: none !important;
    }


.btn-white {
    border: 3px #fff Solid !important;
    font-size: 20px !important;
    border-radius: 25px !important;
    color: #fff !important;
}


.btn-action:hover {
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .30) !important;
    cursor: pointer !important;
    background-color: #21a7d0 !important;

}

.btn-white:hover {
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .30) !important;
    cursor: pointer !important;
    background-color: #21a7d0 !important;
}

.video-bgcolor {
    width: 100%;
    height: 100vh;
    background-image: url(../img/slider.jpg);
    background-size: cover;

}

.about-sec {
    padding: 50px 0px 50px;
}

.color-text {
    color: var(--secondary);
}

.about-box {
    padding: 20px 20px;
    border-radius: 5px 25px 25px;
    background: #fff;
    margin-bottom: 30px;
}

.online-admission {
    padding: 50px 0px;
}

.mentor {
    padding: 50px 0px 70px;
}

.mentor-box {
    padding: 25px;
    border-radius: 15px;
}


.side-controls a {
    font-size: 3rem;
    text-decoration: none;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.mentor-box > img {
    width: 140px;
    box-shadow: 1px 1px 7px #33333352;
    border-radius: 100% !important;
    height: 140px;
    border: 2px solid #fff;
}

div.mentor-box {
    background-image: linear-gradient(180deg, var(--primary) 119px, transparent 0);
    border: 1px solid #e7e7e7;
    padding-top: 40px;
}
    div.mentor-box h5 {
        font-weight: 800;
        letter-spacing: .5px;
        font-size: 18px;
    }

    div.mentor-box p {
        letter-spacing: 4.5px;
        color: var(--primary);
    }



    .study-sec .btn-action {
        margin-top: 15px;
        margin-left: 10px;
    }

.side-controls a[data-slide=prev] {
    left: -4rem;
}

.side-controls a[data-slide=next] {
    right: -4rem;
}

.carousel-control-next,
.carousel-control-prev {
    background: none!important;
    border:none!important;
    opacity: 1!important;
}

.school {
    padding: 70px 0px;
}

.footer {
    background-color: var(--primary);
    position: relative;
    z-index: 0;
}
    .footer::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        opacity: .6;
        height: 100%;
        background-image: url(../img/footer-bg.png);
        background-size: cover;
        z-index: -1;
    }



.footer .footer-bottom:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    width: 100%;
    max-width: 1240px;
    background: rgba(255, 255, 255, 0.1);
}

.footer-top {
    padding: 93px 0 30px;
}

.footer-logo a img {
    max-width: 190px;
}

.footer_list_ad {
    padding-left: 0!important;
}

.footer-bottom {
    padding: 40px 0px 0;
}
.footer .sub-title {
    font-family: 'Raleway',sans-serif !important;
    letter-spacing: 3px;
    font-weight: 700;
    margin-bottom: 18px;
}

.study-sec {
    background: linear-gradient(-180deg,#d9ecff 33%, #d9ecff 72%);
}
    .study-sec .main-title {
        color: #032740!important;
    }

    .study-sec ul.list-circle {
        list-style: circle;
        line-height: 24px;
        letter-spacing: var(--ls);
        color: var(--primary);
        font-size: 16px;
        margin-left: 0;
        margin-top: 23px;
    }


    .footer_list li {
        list-style-type: square;
        color: #21a7d0;
        font-size: 23px;
    }

.footer_list li a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: var(--ls);
}

.footer_list_ad li:last-child a
{
   white-space: nowrap;
}

.footer_list_ad li {
    list-style: none;
    color: #21a7d0;
    font-size: 23px;
}

    .footer_list_ad li a {
        color: #fff;
        text-decoration: none;
        font-size: 16px;
        letter-spacing: var(--ls);
        font-weight: 400;
    }

.footer-social li {
    display: inline;
    margin-right: 5px;
}

.footer-social li a {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 28px;
    border-radius: 100%;
    color: #ffffff;
    text-align: center;
    padding-top: 2px;
}

.footer-bottom .col-md-8 > p.text-start {
    padding-top: 10px;
    font-size: 15px;
    letter-spacing: .5px;
    font-weight: 400;
}

.footer-bottom a {
    color: #bfb901;
}

.footer-social li:nth-child(1) a {
    background: #004eff;
}
    .footer-social li:nth-child(2) a {
        background: var(--secondary);
    }
    .footer-social li:nth-child(3) a {
        background: linear-gradient(45deg, #e300a8, #fbba00);
    }
    .footer-social li:nth-child(4) a {
        background: red;
    }

    .logo {
        max-width: 310px;
        margin-top: 5px;
    }

.img-shadow {
    box-shadow: 10px 10px #d8eefb;
}


#welcomeMessage {
    letter-spacing: var(--ls);
    line-height: var(--lh);
    font-size: 17px;
    color: #707070;
}

.menu {
    float: right;
}

.menu li {
    list-style: none;
    display: inline-block;
    padding: 10px 15px;
}

.menu li a {
    color: #fff;
    text-decoration: none;
}

.bg-dark-light {
    background-color: #00000075;
}

.slider-text h2 {
    font-family: 'Nunito', sans-serif !important;
}


/****menu******/
/******menu**start***/
/***menu****/
/*.navbar_header {
      width: auto;
      height: auto;
      display: block;
      letter-spacing: 0.3px;

  }*/

.navbar_header ul li:last-child > ul {
    right: 0;
    left: auto;
}

.navbar_header > ul > li > ul > li > ul {
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    z-index: 999;
}

.navbar_header > ul > li > ul > li > ul > li > a {
    color: #fff;
    width: 100%;
    height: auto;
    display: inline-block;
    border-bottom: 1px dashed #ffffff;
    padding: 10px;
    font-size: 11px;
    position: relative;
    background-color: #ffff;
    text-decoration: none;
    color: #244e86
}

.navbar_header > ul > li > ul > li > ul > li > a:hover {
    background: #CCCCCC;
    border-bottom: 1px solid #244e86;
}

.navbar_header > ul > li > ul {
    position: absolute;
    left: 15px;
    min-width: 220px;
    list-style: none;
    padding: 5px;
    top: 50px;
    z-index: 999;
    margin: 0;
    display: none;
    -moz-animation: zoomIn 0.3s ease;
    -webkit-animation: zoomIn 0.3s ease;
    animation: zoomIn 0.3s ease;
    background-color: #04395e;
    border-radius: 5px;
    transition: var(--ts);
}

    .navbar_header > ul > li > ul > li {
        position: relative;
        width: 100%;
        padding: 0px;
        border-bottom: 1px dashed #dcdcdc24;
    }

        .navbar_header > ul > li > ul > li:last-child {
            border-bottom: none!important;
        }

#MenuItems > ul > li:hover > ul::before {
    content: '';
    position: absolute;
    background: transparent;
    z-index: 0;
    height: 100px;
    width: 100px;
    top: -17px;
    left: 0;
}


.navbar_header > ul > li > ul > li > a {
    width: 100%;
    height: auto;
    display: inline-block;
    padding: 5px 12px;
    font-size: 15px;
    font-weight: 500;
    position: relative;
    text-decoration: none;
    text-align: start;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0.5px;
    transition: var(--ts);
}


            .navbar_header > ul > li > ul > li > a:hover {
                text-decoration: none;
                color: #fff481;
            }

/*.navbar_header > ul {
      list-style: none;
      padding: 0;
      margin: 0;
      position: relative;
      width: 100%;
  }*/

/*.navbar_header > ul > li:hover > a {
      text-decoration: none;
      background: #303c6c;
      color: white;
  }
*/
/*.navbar_header > ul > li {
      position: relative;
      float: left;
      width: auto;
      display: inline-block;

  }*/

.navbar_header > ul > li:last-child {
    border-right: none !imortant;
}

.navbar_header > ul li:hover > ul,
.navbar_header > ul li > ul > li:hover > ul {
    /* On hover, display the next level's menu */
    display: inline;
}


/* Menu Link Styles */

/*.navbar_header > ul > li > a

  
      {
      display: inline-block;
       padding: 15px 10px; 
      color: white;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 20px;
      padding-bottom: 20px;
      letter-spacing: 0.3px;
      text-decoration: none;
      position: relative;
      transition: 0.5s;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
  }*/

/*.navbar_header > ul > li > a:after {
      content: '';
      position: absolute;
      left: auto;
      bottom: auto;
      top: auto;
      right: 9px;
      width: 0;
      bottom: 16px;
      height: 0;
      border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #e8e8e8;
      clear: both;
  }*/

/*.navbar_header > ul > li:first-child {
        background-color: #e80303;
  }
*/

/*.navbar_header > ul a:hover {
      color: #000000;
  }
*/
.MobileMenubar {
    display: none;
}

.Navbartoggle {
    font-size: 20px;
    color: #fff;
}

/* form start */
.form-control {
    border: 1px solid #e3e3e3;
    margin-bottom: 17px;
    background: linear-gradient(0deg, #f3f3f3, #f9f8f8);
    box-shadow: 0px 0px 13px #33333321;
}
label {
    font-family: 'inter', sans-serif;
    letter-spacing: .5px;
    color: #000;
    margin-bottom: 3px;
}


@media only screen and (max-width: 768px) {
    .MobileMenubar {
        display: inline-block;
        padding: 0px 10px;
        float: right;
    }


    #myCarousel {
        padding-top: 48px;
    }

    .header::before {
        background-size: 340px;
    }

    #ltrlData {
        font-size: 15px;
    }

    .navbar_header > ul {
        padding: 5px;
        list-style: none;
        margin: 0px;
        width: 100%;
        height: auto;
        display: inline-block;
        position: relative;
        background-color: transparent;
    }

    a.btn-apply {
        margin-left: 0;
        border-radius: 5px !important;
        margin-top: 17px;
        font-weight: 500;
        font-size: 15px;
        letter-spacing: 2px;
    }

        .navbar_header > ul > li {
            position: relative;
            float: left;
            width: 100%;
            display: inline-block;
            border-bottom: 1px solid #ffffff24;
        }

    .header {
        padding: 10px 0!important;
    }

    .navbar_header > ul > li > a {
        width: 100%;
        text-align: start;
        font-family: 'inter', sans-serif;
        color: #fff;
        font-weight: 200;
        letter-spacing: .5px;
    }

                .navbar_header > ul > li > ul {
        display: inline-block;
        position: static;
        width: 100%;
    }

    .navbar_header {
        width: 0px;
        right: -100%;
        position: fixed;
        left: auto;
        height: 100%;
        overflow: auto;
        background-image: linear-gradient(153deg, #00467e, #03a9f4);
        top: 0px;
        bottom: 0px;
        z-index: 999;
    }

    .div_Logo {
        position: static;
        z-index: 99;
        width: 60%;
        height: auto;
        background-color: White;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .Header_address {
        padding: 5px;
    }
}

/*.affix {
    position: fixed;
    z-index: 999;
    top: 0px;
    box-shadow: 0px 2px 6px 0px;
}*/

.menuBar {
    height: auto;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.mobileMenu {
    width: 100%;
    display: none;
}


@media only screen and (max-width: 768px) {
    .navbar_header > ul > li > ul {
        display: inline-block;
        position: static;
        width: 100%;
        width: 100%;
        margin-top: 10px;
    }

    .video-bgcolor {
        height: 250px!important;
        width: 100%!important
    }

        .btn-action {
        font-size: 14px!important;
    }

    .circal-cont > i {
        display: none!important;
        font-size: 20px;
        padding: 7px 14px;
    }

    .btn-apply {
        margin-left: 0;
        border-radius: 5px !important;
        margin-top: 17px;
        font-weight: 500;
        font-size: 15px;
        letter-spacing: 2px;
    }

    .online-admission h3.text-warning {
        font-weight: 200;
        letter-spacing: .5px;
        line-height: 30px;
        margin-top: 10px;
        font-size: 18px;
        color: #fff !important;
    }

    .online-admission a {
        padding: 8px 30px;
        font-size: 16px!important;
       }

    .main-title {
        font-size: 25px;
    }
    #welcomeMessage {
        font-size: 15px;
    }

    .mobileMenu {
        width: 100%;
        display: inline-block;
        padding: 10px;
        text-align: left;
        margin-top: 10px;
        display: block;
    }

    .menuBar {
        width: 0px;
        height: 100%;
        top: 0px;
        bottom: 0px;
        left: 0px;
        display: block;
    }

    .closebtn {
        position: fixed;
        font-size: 25px;
        text-transform: uppercase;
        left: -30px;
        z-index: 999;
        height: 100%;
        width: 0px;
        top: 0px;
        display: inline-block;
        padding: 0;
        background-color: #f9f9f9;
        padding: 8px;
    }

}

.Togglebtn {
    display: none;
}

@media only screen and (max-width: 768px) {
    .Togglebtn {
        padding: 5px;
        border: 1px solid gray;
        display: inline-block;
        color: orange;
        font-size: 25px;
    }

}

.btn-light {
    color: #273c66 !important;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

/******menu**end***/
.ddlSchoolList {
    width: 100%;
    list-style: none;
    padding: 0px;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    display: inline-block;
}

.ddlSchoolList a {
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #dadada;
    display: inline-block;
    color: #000;
    border-radius: 4px;
    text-decoration: none;
}

.ddlSchoolList a:hover {
    background-color: #001f46;
    color: #fff;
}

.contact-us-list li a {
    color: #333;
    text-decoration: none;
    font-size: 16px;
}

.contact-us-list li {
    color: #333;
    text-decoration: none;
    font-size: 23px;
}

.header {
    position: relative;
    width: 100%;
    padding: 10px 30px;
    background: #fff;
    z-index: 2;
    box-shadow: 1px 1px 20px #33333340;
}

    .header::before {
        content: '';
        position: absolute;
        bottom: -33px;
        left: 0;
        width: 100%;
        height: 33px;
        background-image: url(../img/top_bg.png);
        background-size: 520px;
        background-repeat: repeat-x;
    }


.hover-btn {
    position: absolute;
    bottom: 50px;
    left: 20%;
    right: 20%;
    z-index: 3;
}

.circal-cont {
   
    padding: 35px 18px 4px 18px;
   
}

i.vert-move {

    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}

i.vert-move {
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}

@-webkit-keyframes mover {
    0% {
        transform: translateY(10);
    }

    100% {
        transform: translateY(-20px);
    }
}

@keyframes mover {
    0% {
        transform: translateY(20);
    }

    100% {
        transform: translateY(-10px);
    }
}

.pulse-button {
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    /*position: relative;
  top: 50%;
  left: 50%;
  margin-left: -20px;
  margin-top: -20px;
  display: block;
  width: 36px;
  height: 36px;
  padding-bottom: 8px;
  font-size: 1.3em;
  font-weight: bold;
  color: #fff;
  border: none;
  
  border-radius: 100%;
  v-align: middle;
  background: #5a99d4;*/
    box-shadow: 0 0 0 0 #f0f0f0, 0 0 0 0 rgba(90, 153, 212, 0.7);
    cursor: pointer;
    transform: translate3d(0, 0, 0);
    animation: pulse 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
}

.pulse-button:hover {
    animation-play-state: paused;
}

@keyframes pulse {
    to {
        box-shadow: 0 0 0 12px transparent, 0 0 0 24px rgba(90, 153, 212, 0);
    }
}

.bg_divinner {
    background: #172e58;
    padding: 10px;
}

.bg_divinner a {
    color: #fff;
    text-decoration: none;
}

.bubbles {
    display: inline-block;
    position: relative;
    width: 100%;
}

.bubbles h3 {
    position: relative;
    color: #fff;
    z-index: 2;
    background: #142554;
    font-family: 'Dancing Script', cursive;
    -webkit-text-fill-color: transparent;
    background-size: 100%;
    padding-top: 7px;
    -webkit-background-clip: text;
    text-shadow: 3px 1px 0px #ffe928;
    letter-spacing: 2px;
}

.individual-bubble {
    position: absolute;
    border-radius: 100%;
    bottom: 10px;
    background: #21a7d0;
    clip-path: circle(50% at 50% 50%);
    z-index: 1;
    opacity: .5;
}

/*.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
    background-color: #fff;
}*/

.sticky + .content {
    padding-top: 102px;
}

.award{position: relative;width:100%;}
.award-cont{position: absolute;left: 20%;right:20%;top:300px;}
.banner-cont{width:100%;height: 100%;position: relative;}

h2.lblheading1 {
    font-weight: 800;
    color: var(--primary);
    letter-spacing: var(--ls);
    margin-bottom: 18px;
    display: block;
    border-bottom: 1px solid #e7e7e79e;
    padding-bottom: 10px;
}


#ltrlData {
    line-height: 28px;
    font-size: 17px;
    letter-spacing: var(--ls);
    color: #727272;
}


/* gallery start */
/* == Gallery == */
div#imageGallery {
    display: inline-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.gallery {
    text-align: center;
}

.galleryD {
    display: inline-block;
    margin: 15px;
    border: 1px dashed #0d325c94;
    border-radius: 100%;
    padding: 5px;
}

.galleryImg {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 100%;
    transition: 1s all ease;
}

    .galleryImg a:hover .img {
        -webkit-transform: rotate(-120deg);
        -moz-transform: rotate(-120deg);
        -ms-transform: rotate(-120deg);
        -o-transform: rotate(-120deg);
        transform: rotate(-120deg);
        z-index: 1;
    }

    .galleryImg .img {
        -webkit-transform-origin: 95% 40%;
        -moz-transform-origin: 95% 40%;
        -ms-transform-origin: 95% 40%;
        -o-transform-origin: 95% 40%;
        transform-origin: 95% 40%;
    }

    .galleryImg .img {
        width: 220px;
        height: 220px;
        position: relative;
        border-radius: 50%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .galleryImg .img {
        z-index: 11;
        -webkit-transition: all .35s ease-in-out;
        -moz-transition: all .35s ease-in-out;
        transition: all .35s ease-in-out;
        opacity: 1;
    }

    .galleryImg a:hover .img {
        opacity: 0;
    }

    .galleryImg .img::before {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        box-shadow: inset 1px 1px 20px 6px #33333373;
        -webkit-transition: all .35s ease-in-out;
        -moz-transition: all .35s ease-in-out;
        transition: all .35s ease-in-out;
        display: block;
        content: '';
        position: absolute;
    }

    .galleryImg .img::after {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        top: 40%;
        left: 95%;
        margin: -4px 0 0 -4px;
        background: whitesmoke;
        box-shadow: 0 0 1px rgba(255,255,255,.9);
        position: absolute;
    }

    .galleryImg .galleryN {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        border-radius: 50%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        background: #333;
        -webkit-transition: all .35s ease-in-out;
        -moz-transition: all .35s ease-in-out;
        transition: all .35s ease-in-out;
    }

.galleryN {
    display: table;
    height: 100%;
    width: 100%;
}

.galleryImg .galleryN h3 {
    color: #fff;
}

.galleryImg .galleryN h3 {
    position: relative;
    display: table-cell;
    font-size: 18px;
    height: 110px;
    border-radius: 100%;
    margin: 0 30px;
    padding: 0 30px 0;
    text-shadow: 0 0 1px #fff, 1px 2px 0px rgb(0 0 0 / 30%);
    text-transform: uppercase;
    vertical-align: middle;
    z-index: 12;
    background: #00000047;
}

/* == Gallery Album == */
.galleryAlbumD {
    display: inline-flex;
    width: auto;
    flex-wrap: wrap;
}

.galleryAlbumC {
    background-image: url(../images/gallery-default.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 179px;
    margin: 13px;
    width: 244px;
    transition: all .5s ease-in-out;
    border: 2px solid #fff;
    box-shadow: 0 0 2px 2px #ddd;
    display: inline-block;
}


    .galleryAlbumC:hover {
        border: 10px solid #8BC34A;
    }
/* gallery end */