@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Lato', serif;
}

/* ------header-background ...... */

.header-background {
    width: 100%;
    height: 100vh;
    background-image: url(./images/hdbg3.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    animation: change 20s infinite ease-in-out;
}

@keyframes change {
    0% {
        background-image: url(./images/hdbg2.png);
    }

    60% {
        background-image: url(./images/thum3.jpg);
    }

    80% {
        background-image: url(./images/hdbg4.png);
    }

    100% {
        background-image: url(./images/midimg3.png);
    }
}

.nav-bar {
    display: flex;
    margin-top: 15px;
    justify-content: space-evenly;
    font-size: 1.3rem;
    font-weight: 800;
}

.nav-bar a:any-link {
    text-decoration: none;
    text-align: center;
    color: rgb(251, 255, 251);
    font-size: 1rem;
    background-color: #181818;
    border-radius: 15px;
}

.nav-bar a {
    margin: 0px 15px;
    padding: 10px;
}

.nav-bar h1 {
    font-family: 'Lato', sans-serif;
    line-height: 280px;
    font-size: 11.5rem;
    padding: 0px -0px;
    position: absolute;
    top: 0 !important;
    left: 10px;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
}
/*------------light-------------*/
.nav-bar h1::before {
    content: "";
    width: 100%;
    height: 750px;
    position: absolute;
    top: -400px;
    left: 10px;
    transform: rotate(55deg);
    background: rgba(206, 188, 155, .7);
    background: -moz-linear-gradient(left, rgba(206, 188, 155, .7) 0%, rgba(42, 31, 25, 0) 65%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(206, 188, 155, .7)), color-stop(65%, rgba(42, 31, 25, 0)));
    background: -webkit-linear-gradient(left, rgba(206, 188, 155, .7) 0%, rgba(42, 31, 25, 0) 65%);
    background: -o-linear-gradient(left, rgba(206, 188, 155, .7) 0%, rgba(42, 31, 25, 0) 65%);
    background: -ms-linear-gradient(left, rgba(206, 188, 155, .7) 0%, rgba(42, 31, 25, 0) 65%);
    background: linear-gradient(to right, rgba(206, 188, 155, .7) 0%, rgba(42, 31, 25, 0) 65%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cebc9b', endColorstr='#2a1f19', GradientType=0.7);
}

/*-------3D Effect-------------*/
.nav-bar h1 {
    color: #70869d;
    letter-spacing: .15em;
    text-shadow:
        -1px -1px 1px #efede3,
        0px 1px 0 #2e2e2e,
        0px 2px 0 #2c2c2c,
        0px 3px 0 #2a2a2a,
        0px 4px 0 #282828,
        0px 5px 0 #262626,
        0px 6px 0 #242424,
        0px 7px 0 #222,
        0px 8px 0 #202020,
        0px 9px 0 #1e1e1e,
        0px 10px 0 #1c1c1c,
        0px 11px 0 #1a1a1a,
        0px 12px 0 #181818,
        0px 13px 0 #161616,
        0px 14px 0 #141414,
        0px 15px 0 #121212,
        2px 20px 5px rgba(0, 0, 0, 0.9),
        5px 23px 5px rgba(0, 0, 0, 0.3),
        8px 27px 8px rgba(0, 0, 0, 0.5),
        8px 28px 35px rgba(0, 0, 0, 0.9);
}

.drop-down {
    position: relative;
    display: inline-block;
}

.nav-bar a:hover {
    background-color: #51b43b;
    border-radius: 10px;
}

.dropdwn-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 160px;
    z-index: 1;
}

.dropdwn-content a {
    padding: 10px;
    display: inlin-block;
}

.drop-down:hover .dropdwn-content {
    display: block;
}

.dropdwn-btn::after {
    content: " ";
    font-size: 10px;
}


.welcome-text {
    padding-top: 37.5%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.welcome-text h1{
    display: flex;
    flex-direction: column;
    font-family: "", serif;
    font-size: 4rem;
    font-weight: 400;
    letter-spacing: 40px;
    font-style: normal;
}

.hl {
    position: relative;
}


.hl {
    color: #000000;
    font-size: 8em;
    position: absolute;
    transform: translate(-0%, 20%);
}

.hl:nth-child(1) {
    color: transparent;
    -webkit-text-stroke: 2px #ffffff;
}

.hl:nth-child(2) {
    color: #08358F;
    animation: animate 2.5s ease-in-out infinite;
}

@keyframes animate {

    0%,
    100% {
        clip-path: polygon(0% 45%,
                16% 44%,
                33% 50%,
                54% 60%,
                70% 61%,
                84% 59%,
                100% 52%,
                100% 100%,
                0% 100%);
    }

    50% {
        clip-path: polygon(0% 60%,
                15% 65%,
                34% 66%,
                51% 62%,
                67% 50%,
                84% 45%,
                100% 46%,
                100% 100%,
                0% 100%);
    }
}

.fa {
    font-size: 15;
    color: #990000;
}

.form-container {
    position: relative;
    margin-top: -35px;
    display: flex;
    justify-content: center;
    border-radius: 10px;
}

.booking-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: rgb(0, 36, 22);
    background: linear-gradient(90deg, rgba(0, 36, 22, 0.87718837535014) 0%, rgba(9, 9, 121, 0.849) 39%, rgba(0, 212, 255, 1) 100%);
    padding: 15px;
    border-radius: 8px;
    width: 80%;
    height: 10vh;
}

.booking-form label {
    font-size: 1.4rem;
    font-weight: bold;
    color: rgb(253, 253, 251);
}

.booking-form input,
.booking-form select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.booking-form button {
    background: #ebecea;
    color: rgb(235, 56, 24);
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.booking-form button:hover {
    background: #009940;
}

/* ourservices ------------- */
.services {
    align-items: center;
    justify-items: center;
    padding-top: 4%;
    width: 100%;
    /* overflow: hidden; */
}

.serv-ttl h1 {
    display: flex;
    transform: translateX(-40%);
    text-decoration: underline;
    justify-content: space-around;
    font-family: 'Lato', serif;
    font-size: 2.3rem;
    font-weight: 600px;
    color: #730707;
}

.service-container {
    display: flex;
    justify-content: space-around;
    overflow: hidden;

}

.ourservices {
    display: inline-block;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 2%;
    width: 30%;
    height: 40vh;
    justify-content: space-around;
    justify-items: center;
    background-color: #cdcaca2a;
    border-style: groove;
    border-color: rgba(18, 51, 3, 0.068);
    border-radius: 8px;
}


.ourservices img {
    height: 108px;
    width: 110px;
    padding-top: 5%;
    color: #39bb11;
    animation: scroll;
}

.ourservices h1 {
    font-family: 'Lato', serif;
    font-size: 1.4rem;
    color: #189A96;
    font-weight: 800px;
    padding-top: 1%;
}

.ourservices p {
    margin-top: 10px;
    font-family: 'Lato', serif;
    font-size: 1rem;
    justify-content: center;
    align-items: center;

    color: rgba(79, 79, 79, 0.46);
}

.ourservices a {
    text-decoration: none;
    color: #146582;
    font-family: 'Lato', serif;
    font-size: 1.rem;
}

.ourservices a:hover {
    color: #990800;
}

.second-section {
    display: flex;
    width: 100%;
    height: 100vh;
    padding-top: 6%;

}

.img1 {
    background-image: url(./images/hdbg1.png);
    background-color: #095976;
    height: 80vh;
    width: 35%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    border-radius: 1.25rem;
}

.img2 {
    background-image: url('./images/hdbg3.png');
    width: 400px;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 14px;
    transform: translate(-350px, 75px);
    animation: rotate 250s linear infinite;
}

@keyframes rotate {
    100% {
        transform: translate(-10%, -10%) rotate(2turn);
    }
}

.mess {
    height: 300px;
    width: 500px;
    transform: translateX(-10px);
}

.mess h1 {
    font-size: 2.3rem;
    color: #920e05;
    text-decoration: underline;
}

.mess p {
    margin-top: 10px;
    font-size: 1.3rem;
    color: #ffffffb9;
    background: #000000c0;
    line-height: 2;
    text-align: center;
    border-right: solid #920E05;
    border-bottom: solid #920E05;
    border-width: 4px;
}

.hidden,
#quoteSection {
    display: flex;
    background: rgba(216, 216, 216, 0.705);
    background: linear-gradient(0deg, rgba(216, 216, 216, 0.33776838372067575) 15%, rgba(0, 213, 255, 0.226) 50%, rgba(215, 221, 218, 0.192) 85%);
    height: 20vh;
    font-size: 2rem;
    justify-content: center;
    align-items: center;
    color: #e00f0f;
    font-weight: bolder;
}

.hidden
/* ---------------------------testimonies-------------------- */

a:link,
a:active,
a:visited,
a:hover {
    color: #3f51b5;
}

.outerdiv {
    width: 100%;
    min-height: 100vh;
    background: #EDF2F8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.innerdiv {
    transform: scale(0.9);
    margin: 1rem;
    display: grid;
    grid-gap: 1.5rem;
    grid-template-rows: repeat(2, 22rem);
    grid-template-columns: repeat(4, 17rem);
}

.eachdiv {
    padding: 1rem 2rem;
    border-radius: 0.8rem;
    box-shadow: 5px 5px 20px #6d6b6b6b;
    color: white;
}

.div1 {
    background: #21a0c6;
    grid-column: 1/3;
    grid-row: 1/2;
    background-repeat: no-repeat;
    background-position-x: 25rem;
}

.div2 {
    background: #49556B;
    grid-column: 3/4;
    grid-row: 1/2;
}

.div3 {
    background: white;
    grid-column: 4/5;
    grid-row: 1/3;
    color: black;
}

.div4 {
    background: white;
    grid-column: 1/2;
    grid-row: 2/3;
    color: black;
}

.div5 {
    background: #18202D;
    grid-column: 2/4;
    grid-row: 2/3;
}

.userdetails {
    display: flex;
}

.imgbox {
    margin-right: 1rem;
}

.imgbox img {
    border-radius: 50%;
    width: 2rem;
    border: 2px solid #cec5c5;
}

.detbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.detbox p {
    margin: 0;
}

.detbox .name {
    color: hsl(0, 0%, 81%);
    font-size: 0.9rem;
    margin-bottom: 0.1rem;
    font-weight: 600;
}

.detbox .name.dark {
    color: #49505A;
}

.detbox .designation {
    color: hsl(0, 0%, 81%);
    opacity: 50%;
    font-size: 0.8rem;
}

.detbox .designation.dark {
    color: #49505A;
}

.review h4 {
    font-size: 1.4rem;
    color: #F3DEFF;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 0.8rem;
}

.review.dark h4 {
    color: #4B5258;
}

.review p {
    font-size: 0.95rem;
    color: #F3DEFF;
    font-weight: 500;
    opacity: 50%;
    line-height: 1.5;
}

.review.dark p {
    color: #0e0e0e;
}

.attribution {
    font-size: 1rem;
    line-height: 1.5;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    text-align: right;
}

.attribution a {
    text-decoration: none;
}

@media only screen and (max-width: 1000px) {
    .innerdiv {
        transform: scale(0.7);
    }
}

@media only screen and (max-width: 800px) {
    .innerdiv {
        transform: scale(0.6);
    }
}

@media only screen and (max-width: 600px) {
    .div1 {
        background-position-x: 10rem;
    }

    .innerdiv {
        display: flex;
        flex-direction: column;
        transform: scale(1);
        margin: 2rem;
        margin-bottom: 5rem;
    }

    .attribution {
        position: relative;
    }
}

/* ---------------------Fooooter---------------------- */
.ftr ul {
    list-style-type: none;
    display: flex;
    grid-auto-flow: column;
    grid-gap: 24px;
    justify-items: center;
    margin: auto;
    font-size: 2rem;
}

@media (min-width: 500px) {
    ul {
        grid-auto-flow: column;
    }
}

.ftr a:any-link {
    color: white;
    box-shadow: inset 0 -1px 0 hsla(0, 0%, 100%, 0.4);
}

.ftr a:hover {
    box-shadow: inset 0 -1.2em 0 hsla(0, 0%, 100%, 0.4);
}

.ftr li:hover~li p,
span {
    animation: wave-animation 0.3s infinite;
}


.ftr div {
    display: flex;
    height: 20vh;
    width: 100%;
    background-color: #002a38;
    line-height: 1.3;
}

@keyframes wave-animation {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(20deg);
    }

    75% {
        transform: rotate(-15deg);
    }
}