* {
    font-family: "Oswald", sans-serif;
}

/*button*/
.btn-bg-hover-transperent-blue {
    background-color: transparent;
    border: white 1px solid;
    transition: .3s ease;

    &:hover {
        background-color: #00234d;
        border-color: transparent;
        transition: .3s ease;
    }
}

/*button*/
.bg-blue {
    background-color: #00234d;
}

/* .bg-white-bottom-to-top { */
    /* background-color: transparent;
    background-image: linear-gradient(180deg, #FFFFFF00 80%, #ffff 100%);
    opacity: 1; */

    /* background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 1) 100%); */
/* } */

.bg-hover-white {
    background-color: transparent;

    &:hover {
        background: rgb(2, 112, 156);
        background: linear-gradient(85deg, rgba(2, 112, 156, 0) 0%, rgba(255, 255, 255, 0.36) 80%);

    }
}
.bg-light-gradient-blue{
   
    background: rgb(11, 124, 169);
        background: linear-gradient(25deg, rgb(43, 190, 248) 0%, rgb(0, 111, 155) 83%);

}

.bg-gradient-blue-white {
    background: rgb(2, 112, 156);
    background: linear-gradient(215deg, rgba(2, 112, 156, 1) 0%, rgba(255, 255, 255, 0.8044467787114846) 83%);
}


.main-blue-bg-01 {
    background-image: url(/images/bg-04-free-img.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-blue-bg-03 {
    background-image: url(/images/bg-05-free-img.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-blue-bg {
    background-image: url(/images/bg-06-free-img.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.double-dolphin-bg-white {
    background-image: url(/images/bg-01-free-img.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-size: 105rem, auto; */

}
.double-dolphin-bg-red {
    background-image: url(/images/bg-01-free-img\(2\).png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-size: 105rem, auto; */

}

/* background size others fishes  */
.side-fish-bg-01 {
    background-image: url(/images/bg-0008-free-img.png);
    background-repeat: no-repeat;
}

.side-fish-bg-02 {
    background-image: url(/images/bg-0007-free-img.png);
    background-repeat: no-repeat;
}

.side-fish-bg-03 {
    background-image: url(/images/bg-003-free-img.png);
    background-repeat: no-repeat;
    
}

.side-fish-bg-04 {
    background-image: url(/images/bg-04-free-img.jpg);
    background-repeat: no-repeat;
}

.side-fish-bg-05 {
    background-image: url(/images/animals-005-free-img.png);
    background-repeat: no-repeat;
    background-position:center center;
    background-size: contain;
    /* background-size: 100%; */
}

.side-fish-bg-06 {
    background-image: url(/images/bg-006-free-img.png);
    background-repeat: no-repeat;
}
.side-fish-bg-07 {
    background-image: url(/images/bg-09-free-img.png);
    background-repeat: no-repeat;
}
.penguin-bg{
    background-image: url(/images/animals-06-free-img.jpg);
    background-repeat: no-repeat;
    background-position:top center;
    background-size: cover;
}
.shark-bg{
    background-image: url(/images/animals-08-free-img.jpg);
        background-repeat: no-repeat;
        background-position:top center;
        background-size: cover;
}
.manta-bg{
    background-image: url(/images/animals-05-free-img.jpg);
        background-repeat: no-repeat;
        background-position:top center;
        background-size: cover;
}
.sea-lion-bg{
    background-image: url(/images/animals-04-free-img.jpg);
        background-repeat: no-repeat;
        background-position:top center;
        background-size: cover;
}
.bicolor-fish-bg{
    background-image: url(/images/animals-09-free-img.jpg);
        background-repeat: no-repeat;
        background-position:top center;
        background-size: cover;
}
.dolphin-bg{
    background-image: url(/images/animals-10-free-img.jpg);
        background-repeat: no-repeat;
        background-position:top center;
        background-size: cover;
}
.Axilspot-Wrasse-bg{
    background-image: url(/images/animals-07-free-img.jpg);
        background-repeat: no-repeat;
        background-position:top center;
        background-size: cover;
}
.Seahorse-bg{
    background-image: url(/images/animals-02-free-img.jpg);
        background-repeat: no-repeat;
        background-position:top center;
        background-size: cover;
}
.Anemonefish-bg{
    background-image: url(/images/animals-03-free-img.jpg);
        background-repeat: no-repeat;
        background-position:top center;
        background-size: cover;
}
.Tortoise-bg{
    background-image: url(/images/animals-01-free-img.jpg);
        background-repeat: no-repeat;
        background-position:top center;
        background-size: cover;
}
/* background size others fishes  */
/* background positions */
.bg-center{
    background-position: top center;
}
/* background positions */
/* all background  */
/* shadow */
.box-shadow {
    box-shadow: 0 90px 90px -20px rgba(0, 0, 0, .5);
}

/* shadow */
/* padding */
.pt-6 {
    padding-top: 6rem !important;
}

.py {
    padding-top: 10rem;
    padding-bottom: 10rem;
}
.pt-10rem{
    padding-top: 10rem;
}
.pt-15rem{
    padding-top: 15rem;
}
/* padding */

/* font family  */
.six-caps-font {
    font-family: "Six Caps", sans-serif;
    font-weight: 400;
    font-style: normal;
}



.oswald-font {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* font family  */
/* font size */
.display-20rem {
    font-size: clamp(3rem, 8vw + 5rem, 20rem);
}

.display-10rem {
    font-size: clamp(2rem, 4vw + 3rem, 10rem);
}

.display-5rem {
    font-size: clamp(1.5rem, 2vw + 1.5rem, 5rem);
}

/* Media query for finer control on very large screens */
@media (min-width: 992px) {
    .display-20rem {
        font-size: 20rem;
    }

    .display-10rem {
        font-size: 10rem;
    }

    .display-5rem {
        font-size: 5rem;
    }
}
@media (max-width: 240px) {
    .display-20rem {
        font-size: 4rem;
    }

    .display-10rem {
        font-size: 1rem;
    }

    .display-5rem {
        font-size: .5rem;
    }
}

/* font size */
/* line height */

.lh-1-3{
    line-height: 1.3 !important;
}

/* line height */
/* letter spacing  */
.ls-1 {
    letter-spacing: 1rem;
}

/* letter spacing  */
/* margin  */
.mt-9rem{
    margin-top: 9rem;
}
.mt-minus-259px {
    margin-top: -259px;
}

.mt-minus-50px {
    margin-top: -50px;
}

.mt-minus-100px {
    margin-top: -100px;
}

.mt-minus-25px {
    margin-top: -1.5rem;
}

.mb-minus-25px {
    margin-bottom: -25px;
}
/* margin  */

/* height  */
.h-1px {
    height: 1px;
}

.h-2px {
    height: 2px;
}

.h-3px {
    height: 0.3rem;
   
}

.h-2rem{
    height: .20rem;
}

.vh-125 {
    height: 125vh;
}

/* height  */

/* width  */
.w-5rem {
    width: 5rem;
}

/* width  */

/* hover effects  */
.start-border-blue-hover {
    border-left: 2px solid white;
    transition: .3s ease;


    &:hover {
        background-color: #00234d;
        transition: .3s ease;
        border-left: 2px solid #00234d;

    }
}

.btn-hover-border-blue {
    border: 1px solid white;
    transition: .2s ease-in;

    &:hover {
        background-color: #00234d;
        transition: .2s ease-out;
        border: none;
    }
}

/* hover effects  */


/* responsive  */
@media (max-width:576px) {

    /* display size */
  

    /* display size */
}

@media (min-width:768px) {
    .w-md-50{
        width: 50% !important;
    }
}


@media (min-width:992px) {
    .w-lg-50{
        width: 50% !important;
    }
    .mt-lg-minus-100px{
        margin-top: -100px;
    }

}


@media (max-width:992px) {

    /* display size */
  

    /* display size */
}

@media (max-width:1200px) {
    /* display size */

    /* display size */
}

/* responsive  */