@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600&display=swap");



* {

    font-family: 'Montserrat', sans-serif;

    margin: 0;

    padding: 0;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    outline: none;

    border: none;

    text-decoration: none;

    font-size: 15px;

}



html {

    font-size: 62.5%;

    overflow-x: hidden;

    scroll-behavior: smooth;

    scroll-padding-top: 6rem;

}



.data {

    margin-top: 50px;

    padding: 4rem;

    font-size: 1.4rem;

    min-height: 62vh;

}



section {

    padding: 5rem 10%;

}



.heading {

    text-align: center;

    margin-bottom: 3rem;

    font-size: 4rem;

    text-transform: capitalize;

    color: #334;

}



.heading span {

    color: #00A9DE;

    font-size: inherit;

}



.btn-1 {

    display: inline-block;

    margin-top: 1rem;

    padding: 1rem 3rem;

    cursor: pointer;

    background: linear-gradient(45deg, #004B72, #00A9DE);

    border-radius: 3rem;

    font-size: 1.7rem;

    text-transform: capitalize;

    color: #fff;

}



.btn-2 {

    display: inline-block;

    margin-top: 1rem;

    padding: 1rem 3rem;

    cursor: pointer;

    background: #fff;

    border-radius: 3rem;

    font-size: 1.7rem;

    text-transform: capitalize;

    color: #333;

}



.btn-2:hover {

    background: none;

    border: 2px solid #fff;

    transition: cubic-bezier(0.075, 0.82, 0.165, 1);

    color: #fff;

    text-decoration: none;

}



.btn-1:hover {

    background: #00A9DE;

    color: #fff;

}



.header .contact-info {

    padding: 2rem 10%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    background: #00A9DE;

}



.header .contact-info p {

    font-size: 1.5rem;

    color: #fff;

}



.header .contact-info p i {

    padding-right: .5rem;

    color: #04FBFF;

}



.header .main-navbar {

    padding: 2rem 10%;

    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    background: #fff;

    position: relative;

    z-index: 1000;

}



.header .main-navbar.active {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    border-bottom: none;

    -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);

    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);

}



.header .main-navbar .logo {

    font-size: 2.5rem;

    text-transform: capitalize;

    color: #334;

    font-weight: bolder;

}



.header .main-navbar .logo i {

    color: #00A9DE;

}



.header .main-navbar .links a {

    margin-left: 2rem;

    font-size: 2rem;

    text-transform: capitalize;

    color: #334;

}



.header .main-navbar .links a:hover {

    text-decoration: underline;

    color: #00A9DE;

}



.header #menu-btn {

    font-size: 3rem;

    cursor: pointer;

    color: #334;

    display: none;

}



.home {

    background: url(../images/home-bg.svg) no-repeat;

    background-position: center;

    background-size: cover;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 3rem;

    min-height: 100vh;

    margin-top: -10rem;

}



.home .image {

    margin-top: 8rem;

    -webkit-box-flex: 1;

    -ms-flex: 1 1 60rem;

    flex: 1 1 60rem;

}



.home .image img {

    width: 100%;

}



.home .content {

    -webkit-box-flex: 1;

    -ms-flex: 1 1 42rem;

    flex: 1 1 42rem;

}



.home .content h3 {

    font-size: 6rem;

    text-transform: capitalize;

    color: #fff;

}



.home .content p {

    font-size: 1.5rem;

    line-height: 2;

    color: #ddd;

    padding: 1rem 0;

}



.about {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -ms-flex-wrap: wrap-reverse;

    flex-wrap: wrap-reverse;

    gap: 3rem;

    padding-right: 0;

    background: linear-gradient(45deg, #004B72, #00A9DE);

    padding-bottom: 0;

}



.about .image {

    -webkit-box-flex: 1;

    -ms-flex: 1 1 42rem;

    flex: 1 1 42rem;

    margin-bottom: -14rem;

}



.about .image img {

    width: 100%;

}



.about .content {

    -webkit-box-flex: 1;

    -ms-flex: 1 1 42rem;

    flex: 1 1 42rem;

    margin-bottom: 2rem;

}



.about .content h3 {

    font-size: 3rem;

    text-transform: capitalize;

    color: #fff;

    padding-bottom: .5rem;

}



.about .content p {

    font-size: 1.5rem;

    line-height: 2;

    color: #f5f5f5;

    padding: 1rem 0;

}



.about-2 {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    gap: 8rem;

    margin-top: 14rem;

}



.about-2 .image {

    -webkit-box-flex: 1;

    -ms-flex: 1 1 42rem;

    flex: 1 1 42rem;

    position: relative;

}



.about-2 .image::before,

.about-2 .image::after {

    content: '';

    position: absolute;

    z-index: -1;

    background: #04FBFF;

    height: 15rem;

    width: 15rem;

}



.about-2 .image::before {

    top: 0;

    left: 0;

}



.about-2 .image::after {

    bottom: 0;

    right: 0;

}



.about-2 .image img {

    width: 100%;

    padding: 2rem;

}



.about-2 .content {

    -webkit-box-flex: 1;

    -ms-flex: 1 1 42rem;

    flex: 1 1 42rem;

}



.about-2 .content .title {

    font-size: 4rem;

    color: #004B72;

    margin-top: .5rem;

}



.about-2 .content p {

    font-size: 1.5rem;

    color: #555;

    padding: 1rem 0;

    text-align: center;

    line-height: 2;

}



.about-2 .content .box-container {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    gap: 3rem;

    margin-top: 1rem;

}



.about-2 .content .box-container .box {

    -webkit-box-flex: 1;

    -ms-flex: 1 1 40rem;

    flex: 1 1 40rem;

    -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);

    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);

    border-left: 3px solid #00A9DE;

    padding: 1rem 2rem;

}



.about-2 .content .box-container .box h3 {

    font-size: 2rem;

    color: #333;

}



.about-2 .content .box-container .box p {

    text-align: left;

}



.services .box-container {

    display: -ms-grid;

    display: grid;

    -ms-grid-columns: (minmax(27rem, 1fr))[auto-fit];

    grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));

    gap: 2rem;

}



.services .box-container .box {

    text-align: center;

    background: #fff;

    border-right: 0.1rem solid rgba(0, 0, 0, 0.2);

    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.2);

    -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);

    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);

    padding: 3rem 2rem;

}



.services .box-container .box .fa-solid {

    background: linear-gradient(45deg, #00A9DE, #004B72);

    border-radius: 50%;

    color: #ffffff;

    margin-bottom: 1rem;

    height: 7rem;

    width: 7rem;

    line-height: 7rem;

    font-size: 3rem;

}



.services .box-container .box h3 {

    font-size: 2rem;

    text-transform: capitalize;

    color: #334;

    padding: 1rem 0;

}



.services .box-container .box p {

    font-size: 1.5rem;

    line-height: 2;

    color: #777;

}



.facilities {

    background: #e6f7ff;

}



.facilities .box-container {

    display: -ms-grid;

    display: grid;

    -ms-grid-columns: (minmax(30rem, 1fr))[auto-fit];

    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));

    gap: 2rem;

}



.facilities .box-container .box {

    background: #fff;

    padding: 3rem;

    text-align: center;

    -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);

    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);

}



.facilities .box-container .box img {

    height: 10rem;

    margin-bottom: .5rem;

}



.facilities .box-container .box h3 {

    padding: 1rem 0;

    font-size: 2rem;

    text-transform: capitalize;

    color: #334;

}



.facilities .box-container .box p {

    font-size: 1.4rem;

    line-height: 2;

    color: #777;

}



.team .box-container {

    display: -ms-grid;

    display: grid;

    -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];

    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));

    gap: 2rem;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

}



.team .box-container .box {

    overflow: hidden;

    text-align: center;

}



.team .box-container .box:hover .content {

    margin-bottom: 0;

}



.team .box-container .box img {

    width: 65%;

    border-radius: 50%;

}



.team .box-container .box .content {

    padding: 2rem;

}



.team .box-container .box .content h3 {

    font-size: 2rem;

    text-transform: capitalize;

    color: #334;

}



.team .box-container .box .content p {

    font-size: 1.4rem;

    line-height: 2;

    color: #777;

    padding: .5rem 0;

}



.team .box-container .box .content .share {

    margin-top: 1.5rem;

}



.team .box-container .box .content .share a {

    height: 4.5rem;

    width: 4.5rem;

    line-height: 4.5rem;

    font-size: 1.7rem;

    margin: 0 .3rem;

    background: #334;

    color: #fff;

}



.team .box-container .box .content .share a:hover {

    background: #00A9DE;

}



.footer {

    background: #f5f5f5;

}



.footer .box-container {

    display: -ms-grid;

    display: grid;

    -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];

    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));

    gap: 2rem;

}



.footer .box-container .box h3 {

    font-size: 2.2rem;

    text-transform: capitalize;

    color: #334;

    padding: 1rem 0;

}



.footer .box-container .box .link {

    display: block;

    padding: .5rem 0;

    font-size: 1.5rem;

    line-height: 2;

    color: #777;

}



.footer .box-container .box .link i {

    padding-right: .5rem;

    color: #00A9DE;

}



.footer .box-container .box .link:hover {

    color: #00A9DE;

}



.footer .box-container .box .link:hover i {

    padding-right: 2rem;

}



.footer .box-container .box p {

    padding: .5rem 0;

    font-size: 1.5rem;

    line-height: 2;

    color: #777;

}



.footer .box-container .box p span {

    color: #00A9DE;

}



.footer .box-container .box .share {

    margin-top: 2rem;

}



.footer .box-container .box .share a {

    height: 4.5rem;

    width: 4.5rem;

    line-height: 4.5rem;

    font-size: 1.7rem;

    background: #00A9DE;

    color: #fff;

    border-radius: 50%;

    margin-right: 0.3rem;

    text-align: center;

}



.footer .box-container .box .share a:hover {

    background: #004B72;

}



.footer .credit {

    font-size: 2rem;

    text-transform: capitalize;

    color: #334;

    margin-top: 3rem;

    padding-top: 3rem;

    border-top: 0.2rem solid #334;

    text-align: center;

}



.footer .credit span {

    color: #00A9DE;

}



/* signup page */

.signup-wrapper {

    padding: 4rem;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}



.signup-form {

    margin-top: 60px;

    position: relative;

    width: 100%;

    max-width: 600px;

    padding: 60px 40px 40px;

    border: 2px solid #00A9DE;

    border-radius: 10px;

    color: #fff;

    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);

}



.signup-form h2 {

    text-align: center;

    letter-spacing: 4px;

    margin-bottom: 2rem;

    font-size: 2.4rem;

    color: #00A9DE;

}



.signup-form .input-group {

    position: relative;

    width: 100%;

}



.signup-form .input-group input,

textarea,

select {

    width: 100%;

    padding: 10px 0;

    font-size: 1.4rem;

    color: #333;

    letter-spacing: 1px;

    margin-bottom: 30px;

    border: none;

    border-bottom: 1px solid rgba(0, 0, 0, 0.2);

    outline: none;

    background-color: transparent;

    resize: none;

}



.signup-form .input-group label {

    color: #444;

    font-size: 1.4rem;

}



.submit-btn {

    display: block;

    margin-left: auto;

    border: none;

    outline: none;

    background: #00A9DE;

    font-size: 1.4rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    padding: 10px 20px;

    border-radius: 5px;

    color: #fff;

    cursor: pointer;

    margin-bottom: 1.2rem;

}



/* login-form */

.login-wrapper {

    padding: 7rem;

    display: flex;

    justify-content: center;

    align-items: center;

}



.form {

    margin-top: 40px;

    position: relative;

    width: 100%;

    max-width: 380px;

    padding: 80px 40px 40px;

    border: 2px solid #00A9DE;

    border-radius: 10px;

    color: #fff;

    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);

}



.form img {

    position: absolute;

    top: -50px;

    left: calc(50% - 50px);

    width: 100px;

    background: rgba(255, 255, 255, 0.8);

    border-radius: 50%;

}



.form h2 {

    text-align: center;

    letter-spacing: 4px;

    margin-bottom: 2rem;

    font-size: 2.4rem;

    color: #00A9DE;

}



.form .input-group {

    position: relative;

}



.form .input-group input {

    width: 100%;

    padding: 10px 0;

    font-size: 1.4rem;

    color: #111;

    letter-spacing: 1px;

    margin-bottom: 30px;

    border: none;

    border-bottom: 1px solid #777;

    outline: none;

    background-color: transparent;

}



.form .input-group label {

    color: #333;

    font-size: 1.4rem;

}



/* advertise page */

.content-top {

    margin-top: 80px;

    text-align: center;

    list-style-type: none;

}



.content-top h2 {

    color: #004B72;

    padding: 1rem;

    font-size: 2.1rem;

}



.content-top li {

    padding: .5rem;

    color: #384350;

    font-size: 1.4rem;

}



.content-top ul {

    list-style-type: none;

}



/*dashboard*/

.dash-container {

    position: relative;

    width: 100%;

    display: flex;

    margin: 0rem auto;

    min-height: 100vh;

}



.dash {

    padding: 1rem;

}



.dash-nav {

    position: absolute;

    top: 0;

    width: 250px;

    height: 100%;

    background: linear-gradient(45deg, #004B72, #00A9DE);

    transition: 0.5s;

}



.dash-nav.active {

    width: 10px;

}



.dash-nav ul {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%

}



.dash-nav ul li {

    position: relative;

    width: 100%;

    list-style: none;

}



.dash-nav ul li:hover {

    background: #323131;

    cursor: pointer;

}



.dash-nav ul li:nth-child(1):hover {

    background: transparent;

}



.dash-nav ul li a h2 {

    font-size: 15px;

}



.dash-nav .link .dash-title h2 {

    margin-top: 0px;

    margin-bottom: 10px;

}



.dash-nav ul li .link {

    padding: .5rem;

    position: relative;

    display: block;

    width: 100%;

    text-decoration: none;

    color: #fff;

    font-size: 12px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.2);

}



.dash-nav ul li a {

    color: #fff;

    text-decoration: none;

    text-align: left;

    font-size: 1.6rem;

}



.dash-nav ul li a .icon .fab {

    color: #fff;

    font-size: 15px;

}



.dash-nav ul li .dash-title {

    position: relative;

    display: block;

    padding: 0 30px;

    line-height: 25px;

    white-space: nowrap;

}



.dash-nav ul li a .brand {

    text-transform: uppercase;

    font-size: 15px;

}



.main-container {

    position: relative;

    width: calc(100% - 250px);

    left: 250px;

    transition: 0.5s;

}



.main-container.active {

    width: calc(100% - 10px);

    left: 10px;

}



.main-container .topbar {

    width: 100%;

    background: rgb(181 179 179 / 30%);

    height: 60px;

    padding-left: 0 10px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.toggle h4 {

    position: absolute;

    top: 13px;

    left: 49px;

}



.toggle {

    position: relative;

    width: 60px;

    height: 60px;

    cursor: pointer;

}



.toggle::before {

    content: '\f007';

    font-family: "Font Awesome 5 Free";

    position: absolute;

    width: 100%;

    height: 100%;

    line-height: 60px;

    font-size: 24px;

    text-align: center;

    color: #111;

}



@media (max-width: 1200px) {

    .header .contact-info {

        padding: 2rem 5%;

    }



    .header .main-navbar {

        padding: 2rem 5%;

    }



    section {

        padding: 3rem 5%;

    }

}



@media (max-width: 991px) {

    html {

        font-size: 55%;

    }



    .header .contact-info {

        padding: 2rem;

    }



    .header .main-navbar {

        padding: 2rem;

    }



    section {

        padding: 3rem 2rem;

    }



    .dash-nav {

        left: -300px;

    }



    .dash-nav.active {

        left: 0;

    }



    .main-container {

        width: 100%;

        left: 0px;

    }

}



@media (max-width: 768px) {

    .header .contact-info {

        display: none;

    }



    .header #menu-btn {

        display: inline-block;

    }



    .header #menu-btn.fa-times {

        -webkit-transform: rotate(180deg);

        transform: rotate(180deg);

    }



    .header .main-navbar .links {

        position: absolute;

        top: 99%;

        left: 0;

        right: 0;

        background: #fff;

        border-top: 0.2rem solid #334;

        border-bottom: 0.2rem solid #334;

        -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);

        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);

    }



    .header .main-navbar .links.active {

        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

    }



    .header .main-navbar .links a {

        display: block;

        margin: 2.5rem 2rem;

        font-size: 2rem;

    }



    .home {

        flex-direction: column-reverse;

        margin-top: 0;

    }



    .home .content {

        flex: 1;

        text-align: center;

    }



    .home .image {

        margin-top: 4rem;

        flex: 1;

    }



    .about {

        flex-direction: column;

    }



    .about .image {

        margin-bottom: -19rem;

    }



    .about-2 {

        gap: 3rem;

    }



    .about-2 .image {

        margin-top: 5rem;

    }



    .about-2 .content .title {

        font-size: 3rem;

    }



    .signup-wrapper,

    .login-wrapper {

        padding: 3rem 2rem;

    }

}



@media (max-width: 450px) {

    html {

        font-size: 50%;

    }



    .home .content h3 {

        font-size: 3rem;

    }



    .contact .row form .inputBox input {

        width: 100%;

    }



    .heading {

        font-size: 3rem;

    }

}



@media(max-width: 480px) {

    .dash-nav {

        width: 100%;

        left: -100%;

        z-index: 1;

    }



    .dash-nav.active {

        width: 100%;

        left: 0;

    }



    .toggle.active {

        z-index: 1;

        right: 0;

        left: 275px;

    }



    .toggle.active::before {

        color: #fff;

    }



    .dash-ban {

        left: 0;

    }



    .dash-bottom {

        left: 0;

    }



    .dash-container {

        width: 100%;

    }



    .topbar h4 {

        display: block;

    }



    .toggle.active h4 {

        display: none;

    }

}