* {
    margin         : 0;
    padding        : 0;
    box-sizing     : border-box;
    text-decoration: none;
    text-transform : capitalize;
    text-align     : center;
    /* font-family : Georgia, serif; */
    font-family    : Arial, Helvetica, sans-serif;
    list-style     : none;
    /*  font-family: 'Brush Script MT'; */

}

.cntr {
    display        : flex;
    justify-content: center;
    align-items    : center;
}

body {

    display        : flex;
    justify-content: center;
    align-items    : center;
    flex-direction : column;
}

.container {
    width          : 90%;
    border         : 1px solid red;
    box-shadow     : 1px 0px 5px grey;
    display        : flex;
    justify-content: center;
    align-items    : center;
    flex-direction : column;
    padding        : 10px;
}


.section1 {
    width          : 100%;
    display        : flex;
    justify-content: center;
    align-items    : center;
    /* border      : 1px solid blue; */

}


.section1 .banner {
    position     : relative;
    width        : 20%;
    /* background: rgb(105, 79, 94); */
    background   : transparent;

}

.banner a {
    display        : block;
    color          : #fff;
    text-decoration: none;
    text-align     : center;
    padding        : 10px;
    text-transform : capitalize;
    box-shadow     : 1px 0px 5px grey;
    background     : #078d8283;
    transition     : 1s all;
    font-weight    : bolder;


}

.banner a:hover {
    color       : #078d8283;
    background  : #fff;
    /* transform: rotate(360deg); */
}

.section1 nav {
    display        : flex;
    justify-content: center;
    align-items    : center;
    width          : 80%;
    /* background  : purple; */
}

nav a {
    width          : 20%;
    border-left    : 3px solid black;
    /* background  : red; */
    display        : block;
    color          : #000;
    text-decoration: none;
    text-align     : center;
    padding        : 10px;
    text-transform : capitalize;
    box-shadow     : 1px 0px 5px grey;
}

nav a:nth-child(5) {
    border-right: 3px solid black;
}

nav a:hover {
    background: #078d8283;
    color     : #fff;
}

nav a:active {
    background: #078d8283;
    color     : red;
}

.resMenu {
    display: none;
}

/* ------------------------------slider sart----------------------------------- */

.slider {
    display: none;
}

/* ------------------------------slider end----------------------------------- */
/* ------------------------------after-menues section 2----------------------------------- */
.section2 {
    margin-top: 15px;
    width     : 100%;
    /*  border: 1px solid greenyellow; */
}

.section2>.subSec {
    width   : 100%;
    position: relative;

}

.banrImg {
    width            : 100%;
    height           : auto;
    object-fit       : contain;
    -webkit-filter   : grayscale(100%);
    filter           : grayscale(100%);
    /* -webkit-filter: blur(5px);
    filter           : blur(5px); */
}

.logoSection {
    width                     : 95%;
    height                    : 80%;
    position                  : absolute;
    top                       : 50%;
    left                      : 50%;
    transform                 : translate(-50%, -50%);
    /* -webkit-backdrop-filter: blur(5px);
    backdrop-filter           : blur(5px); */
    box-shadow                : 5px 5px 25px #078d8283;
    border-radius             : 10px;
    border                    : 2px solid #078d8283;
    display                   : flex;
    justify-content           : center;
    align-items               : center;
    flex-direction            : column;
    /* border                 : 1px solid red; */
}



.logContaner {
    width        : 10px;
    height       : 10px;
    background   : rgb(236, 247, 214);
    border-radius: 50%;
    border       : 5px solid #fff;
    padding      : 5px;

}

.logoSection p:nth-child(2),
.logoSection p:nth-child(3) {
    width         : 30%;
    margin-top    : 8px;
    background    : #078d82f6;
    color         : #fff;
    padding       : 10px;
    text-align    : center;
    text-transform: uppercase;
    letter-spacing: 2px;
    border        : 1px solid #fff;
    border-radius : 5px;
    font-size     : 15px;
}

.logoSection p:nth-child(3) {
    animation: work 1s infinite;
    cursor   : pointer;
}

.logoSection p:nth-child(3):hover {
    animation-play-state: paused;
}



@keyframes work {
    0% {
        letter-spacing: 2px;
    }

    50% {
        letter-spacing: 3px;
        border        : 1px solid black;
    }

    100% {
        letter-spacing: 2px;
    }

}

.logContaner img {
    width : 100%;
    height: auto;
}


/* ------------------------------ section 3----------------------------------- */

.section3 {
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
}

.section3 h1 {
    background    : #2D4963;
    width         : 100%;
    padding       : 5px;
    text-align    : center;
    text-transform: capitalize;
}

.section3 h1 a {
    display: block;
    padding: 5px;
    color  : white;
}

.section3 h1 a .fa {
    color    : #fff;
    font-size: 24px;
}

.imgContainer {
    width          : 100%;
    display        : flex;
    justify-content: center;
    align-items    : center;
    margin-top     : 15px;
    /* background  : #000; */
}

.imgChildContainer {
    width          : 25%;
    display        : flex;
    justify-content: center;
    align-items    : center;
    flex-direction : column;
    border         : 1px solid greenyellow;
    box-shadow     : 1px 0px 5px grey;
    padding        : 0px 0px 9px 0px;
}

.imgChildContainer a {
    display: block;
    width  : 100%;
    height : auto;
    padding: 8px;

}

.imgChildContainer>a>img {
    width     : 100%;
    height    : 150px;
    min-height: auto;
    object-fit: contain;

}



.imgChildContainer h5 {
    width     : 70%;
    padding   : 5px;
    box-shadow: 1px 0px 5px grey;
    cursor    : pointer;
    transition: all 2s ease-in-out;
}

.imgChildContainer h5 a {
    color    : #000;
    font-size: 15px;
    display  : block;


}

.imgChildContainer h5 a .fa {
    color    : rgb(94, 10, 10);
    font-size: 18px;
}

.section3 p {
    padding        : 20px 35px 20px 35px;
    text-align     : justify;
    text-align-last: center;
    font-size      : 22px;
    line-height    : 1.7;
    text-transform : none;
    font-family    : serif;
    /* font-style  : oblique; */
}

.section3 p::selection {
    background: rgb(57, 8, 90);
    color     : #fff;
}

.socialCotainer {
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.socialCotainer a {
    display      : block;
    padding      : 6px;
    box-shadow   : 1px 0px 5px grey;
    border-radius: 50%;
    margin       : 8px;
}

.socialCotainer a .fab {
    margin   : 5px;
    font-size: 20px;
}



.socialCotainer a:hover>.fab {
    animation: social .5s linear;
}



@keyframes social {
    0% {
        transform: rotate(0deg);

    }

    100% {
        transform: rotate(360deg);

    }
}

/* ------------------------------ section 4----------------------------------- */
.section4 {
    width          : 100%;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    /*  border     : 1px solid green; */

}

.footer {
    display        : flex;
    justify-content: center;
    align-items    : center;
    width          : 100%;
    box-shadow     : 1px 0px 5px grey;
    background     : #2D4963;
}

.group1,
.group2 {
    box-shadow: 1px 0px 5px #fff;
    width     : 50%;
    margin    : 5px;
    padding   : 8px;
}

.group1 h5 {
    color    : #fff;
    padding  : 2px;
    font-size: 18px;
}

.group2 h5,
.group2 h5 a {
    color    : #fff;
    padding  : 2px;
    font-size: 18px;
}

#disclaimer {
    margin-top   : 5px;
    margin-bottom: 5px;
    width        : 100%;
    box-shadow   : 1px 0px 5px grey;
    padding      : 10px 0px 10px 0px;
    display      : flex;
}

#disclaimer a {
    margin     : 1px;
    display    : block;
    width      : 33.33%;
    padding    : 10px;
    background : #2D4963;
    color      : #fff;
    font-size  : 15px;
    font-weight: bold;

}

/* -------------------------------live chat------------------------------- */

input:focus,
text:focus {
    outline: 1px solid #d35400;
}

.form-group {
    padding       : 5px;
    margin-top    : 5px;
    display       : block;
    text-transform: lowercase !important;
}

.form-group input {
    text-transform: lowercase !important;
}

.form-group label {
    display   : block;
    margin-top: 5px;
    text-align: left;
}


.form-group input,
.form-group textarea {
    width        : 100%;
    padding      : 6px 8px;
    box-shadow   : none;
    border       : 1px solid #d35400;
    border-radius: 3px;
}

.form-group input[type="submit"] {
    width         : 100%;
    padding       : 6px 8px;
    box-shadow    : none;
    color         : #fff;
    background    : #d35400;
    cursor        : pointer;
    text-transform: uppercase;
    transition    : background-color 0.5s ease-in-out;

}

.form-group input[type="submit"]:hover {
    background-color: rgba(211, 84, 0, 0.7);
    border          : 1px solid #d35400;
}

.wrapper {
    width   : 300px;
    position: fixed;
    bottom  : 30px;
    right   : 20px;
}


.wrapper .chatHeader {
    background-color: #d35400;
    padding         : 10px;
    box-sizing      : border-box;
    border-radius   : 3px 3px 0 0;
    color           : #fff;
    cursor          : pointer;
}

.wrapper .chatHeader h2 {
    display: inline-block;
}

.wrapper .chatHeader span {
    float: right;
}

.wrapper .chatHeader span img {
    width       : 15px;
    margin-right: 5px;
}


.wrapper .chatArea {
    background-color: #f0ecec;
    height          : auto;
    padding         : 15px;
    display         : none;
}

.wrapper .chatArea #loadChat {
    height    : 250px;
    overflow-x: auto;
    position  : relative;
}



.wrapper .chatArea .admin-chat {
    text-align   : left;
    margin-top   : 10px;
    margin-bottom: 10px;
}

.wrapper .chatArea .chat span {
    width: 100%;

}





.wrapper .chatArea .chat p {
    width: 85%;
}

.wrapper .chatArea .chat p.admin {
    padding      : 10px 5px;
    border       : 1px solid #d35400;
    margin-left  : 10px;
    border-radius: 0px 11px 11px 11px;
    text-align   : left;
}

.wrapper .chatArea .chat p.user {
    padding      : 10px 5px;
    border       : 1px solid #d35400;
    margin-right : 10px;
    border-radius: 11px 0px 11px 11px;
    text-align   : right;
}

.wrapper .chatArea .chat .chatForm {
    width : 100%;
    height: 100px;
}

/* ------------------------responsive menue------------------------ */

@media screen and (min-width:1300px) {
    .logContaner {
        width : 100px;
        height: 100px;

    }
}



@media screen and (max-width:1300px) {
    .section1 {
        flex-direction: column;
    }

    .section1>.banner {
        width: 100% !important;

    }

    .section1 nav {
        width: 100%;
    }

    .logContaner {
        width : 100px;
        height: 100px;

    }

}

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

@media screen and (max-width:960px) {

    .logoSection p:nth-child(2),
    .logoSection p:nth-child(3) {
        width     : 40%;
        font-size : 15px;
        margin-top: 4px;
    }
}

@media screen and (max-width:900px) {

    .logoSection p:nth-child(2),
    .logoSection p:nth-child(3) {
        width     : 40%;
        font-size : 10px;
        margin-top: 4px;
    }

    .logContaner {
        width : 80px;
        height: 80px;

    }

    .imgContainer {
        flex-wrap: wrap;
    }

    .imgChildContainer {

        width: 50%;
    }

    .imgChildContainer h5 {
        width: 100%;
    }
}



@media screen and (max-width:780px) {

    .logoSection p:nth-child(2),
    .logoSection p:nth-child(3) {
        width      : 40%;
        font-size  : 10px;
        margin-top : 2px;
        padding    : 5px;
        font-weight: bolder;
    }

    .logContaner {
        width : 70px;
        height: 70px;

    }

    .footer {
        flex-wrap: wrap;
    }

    .group1,
    .group2 {

        width: 100%;

    }

    .section3 p {
        text-align : center !important;
        line-height: 1.6;
        font-size  : 18px;
        padding    : 10px;
        box-shadow : 1px 0px 5px grey;

    }


    #disclaimer {
        flex-direction: column;
    }

    #disclaimer a {

        width: 100%;


    }

}

@media screen and (max-width:580px) {

    .logoSection p:nth-child(2),
    .logoSection p:nth-child(3) {
        width     : 60% !important;
        padding   : 3px;
        margin-top: 1px;

    }

    .logContaner {
        width : 70px;
        height: 70px;

    }


    #mobile,
    #txtanimt {
        display: none;
    }

    .imgContainer {
        order: 2;
    }

    .imgChildContainer {

        width: 100%;
    }

    .imgChildContainer a img {

        box-shadow: 1px 0px 5px grey;
    }

    .imgChildContainer h5 {
        width: 100%;
    }

    .section2 {
        display: none;
    }

    .slider {
        display: block;
        width  : 100%;
        padding: 10px 0px 10px 0px;

    }

    .childSlider {
        width: 100%;

    }

    .childSlider>img {
        width     : 100%;
        height    : auto;
        object-fit: contain;
    }

}

@media screen and (max-width:600px) {

    .banner {
        display: flex;
    }

    .banner .frtBtn {
        width: 80%;
    }

    .resMenu {
        position  : relative;
        display   : block;
        font-size : 20px;
        cursor    : pointer;
        order     : 2;
        width     : 20%;
        box-shadow: 1px 0px 5px grey;
    }

    .resMenu>.fa-bars {
        position : absolute;
        top      : 50%;
        left     : 50%;
        transform: translate(-50%, -50%);
    }


    i.fa-window-close {
        color: red;
    }


    .section1>.banner>.frtBtn {
        padding: 10px;

    }

    .section1 nav {
        display: none;
    }

    nav.reponsive_nav {
        display: block;
        width  : 100% !important;
    }

    nav.reponsive_nav a {
        width     : 100% !important;
        margin-top: 5px;
    }

    nav a:nth-child(5) {
        border-right: none;
    }

    .banner a {
        background: #fff;
        color     : #078d8283;

    }


    .group1 h5 {
        font-size: 13px !important;
    }

    .group2 h5 a {
        font-size: 15px !important;

    }

    .resMenu>.bars {
        font-size: 15px !important;
    }

    .banner>a {
        font-size: 19px !important;

    }

    .banner>a>.fa-home {
        font-size: 13px !important;
    }

}

@media screen and (max-width:325px) {

    .banner>a,
    .banner>a .fa,
    .resMenu {
        font-size: 15px;
    }

    .resMenu {
        margin-left: 5px !important;
    }
}