* {
                margin: 0;
                padding: 0;
                font-family: sans-serif;
                  
            }
            /*--------background head image-----*/
            
            
            .container {
                margin-right;
                100px;
                margin-left: 100px;
            }
            
            .logo {
                margin-top: 30px;
                width: 140px;
            }
            
            .header-text {
                max-width: 350px;
                margin-top: 140px;
            }
            
            h1 {
                font-size: 34px;
            }
            
            .red-symbol {
                color: red;
            }
            
            .square {
                height: 12px;
                width: 12px;
                display: inline-block;
                background: red;
                margin: 6px 0;
            }
            /*----Start Botton-----*/
            
            .common-btn {
                padding: 18px 40px;
                background: transparent;
                outline: none;
                border: 2px solid red;
                font-weight: bold;
                font-size: 12px;
                color: white;
                cursor: pointer;
            }
            
            a {
                color: seashell;
                text-decoration: none;
            }
            /*-------End Botton------*/
            /*----start parghraph----*/
            
            p {
                font-size: 20px;
                line-height: 18px;
                color: seashell;
            }
            /*----End Parghraph----*/
            /*----Start header-text--*/
            
            .header-text button {
                margin-top: 20px;
                margin-bottom: 60px;
            }
            /*----End Header-text---*/
            
            .line-1 {
                width: 15px;
                height: 15px;
                background-color: white;
                display: inline-block;
            }
            
            .line-2 {
                width: 80px;
                height: 1px;
                background-color: white;
                display: inline-block;
            }
            
            .line-3 {
                width: 60px;
                height: 1px;
                background-color: white;
                display: inline-block;
            }
            
            .line {
                line-height: 8px;
            }
            /*----start nav----*/
            
            #sideNav {
                width: 250px;
                height: 100vh;
                position: fixed;
                right: -250px;
                top: 0;
                background: rgba(132, 0, 255, 0.815);
                z-index: 2;
                transition: .7s;
            }
            
            nav ul li {
                list-style: none;
                margin: 50px 20px;
            }
            
            nav ul li a {
                text-decoration: none;
            }
            
            #menuBTN {
                width: 50px;
                position: fixed;
                right: 65px;
                top: 35px;
                z-index: 2;
                cursor: pointer;
            }
            /*---- End Nav-----*/
            /*----Start about & Event section-----*/
            
            #about,
            #event {
                padding: 100px 0;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                text-align: left;
            }
            
            .about-right-col h1 {
                color: white;
                text-align: left;
            }
            
            .about-left-col {
                flex-basis: 50%;
            }
            
            .about-left-col img {
                width: 100%;
            }
            
            .about-right-col {
                padding-top: 125px;
                padding-bottom: 120px;
                flex-basis: 50%;
                text-align: right;
                background-color: blue;
            }
            
            .about-right-col p {
                text-align: left;
                font-size: 16px;
            }
            
            .about-text {
                max-width: 500px;
                margin-right: 100px;
                display: inline-block;
            }
            
            .about-btn {
                margin-top: 15px;
                margin-bottom: 10px;
                padding: 18px 40px;
                margin-right: 350px;
                background: transparent;
                outline: none;
                border: 2px solid red;
                font-weight: bold;
                font-size: 12px;
                color: white;
                cursor: pointer;
            }

            /*-------End about & Event section----*/
            /*----start history section-----*/
            
            #history {
                padding-top: 50px;
                padding-bottom: 50px;
            }
            
            .history-row {
                width: 80%;
                margin: auto;
                display: flex;
                align-items: center;
                justify-content: space-around;
                flex-wrap: wrap;
            }
            
            .history-col {
                flex-basis: 25%;
                text-align: center;
            }
            
            .history-col img {
                width: 240px;
              
            }
            
            .history-col p {
                color: slategray;
                text-align: left;
                font-size: 12px;
                margin: 15px 15px;
            }
            
            .history-col h4 {
                margin-bottom: 15px;
                font-size: 20px;
                font-weight: 400;
            }
            
            .history-btn {
                margin-top: 80px auto 0;
                display: flex;
                align-items: flex-end;
                justify-content: center;
                font-weight: bold;
            }
            
            .history-btn a {
                color: blue;
                text-decoration: none;
            }
            /*-------End history section-----*/
            /*-------Start bells section------*/
            
            
            .bell-row {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }
            
            .bells-right-col {
                flex-basis: 50%;
            }
            
            .bells-right-col img {
              width: 80%;
}
                .bells-left-col {
                    flex-basis: 50%;
                }
            
            
            .bells-left-col {
                flex-basis: 50%;
            }
            
            .bells-text .line-1 {
                width: 15px;
                height: 15px;
                background-color: red;
                display: inline-block;
            }
            
            .bells-text .line-2 {
                width: 80px;
                height: 1px;
                background-color: red;
                display: inline-block;
            }
            
            .bells-text .line-3 {
                width: 60px;
                height: 1px;
                background-color: red;
                display: inline-block;
            }
            
            .bells-text {
                max-width: 350px;
            }
            
            .bells-left-col p {
                font-size: 14px;
                color: whitesmoke;
            }
            
            .bells-text button {
                margin: 30px 0;
            }
            /*--------End bells section--------*/
            /*---------Start Contact section-------*/
            
            .contact-row {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }
            
            .contact-left-col,
            .contact-right-col {
                flex-basis: 50%;
            }
            
            .contact-right-col img {
                width: 100%;
            }
            
            form {
                max-width: 350px;
                margin: 30px 0;
            }
            
            form input {
                width: 100%;
                padding: 12px 10px;
                margin-bottom: 5px;
                outline: none;
                box-shadow: none;
                box-sizing: border-box;
                border: 2px solid blue;
            }
            
            .btn-box {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }
            
            .btn-box button {
                flex-basis: 48%;
                padding: 18px 0;
                font-weight: bold;
                color: slategray;
            }
            
            .line-1 {
                width: 15px;
                height: 15px;
                background-color: red;
                display: inline-block;
            }
            
            .line-2 {
                width: 80px;
                height: 1px;
                background-color: red;
                display: inline-block;
            }
            
            .line-3 {
                width: 60px;
                height: 1px;
                background-color: red;
                display: inline-block;
            }
            /*--------------End Contact section--------*/
            /*---------Start Footer section-------------*/
            
            #footer {
                padding: 50px 0 30px;
            }
            
            hr {
                width: 100%;
                border: 0;
                border-top: 1px solid blue;
            }
            
            .footer-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            
            .footer-left-col {
                flex-basis: 50%;
                margin-top: 60px;
            }
            
            .footer-right-col {
                flex-basis: 50%;
            }
            
            .footer-links {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            
            .link-title h4 {
                color: red;
                margin-bottom: 20px;
            }
            
            .link-title small {
                font-size: 14px;
                color: slategray;
            }
            
            .footer-info {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            
            .footer-logo img {
                width: 120px;
            }
            
            .footer-logo button {
                padding: 12px 38px;
                margin-top: 20px;
                font-size: 10px;
                color: red;
            }
            
            .copyright-text,
            .footer-logo {
                flex-basis: 33%;
                margin-left: auto;
            }
            /*----- start Social icons------*/
            
            .social-icons {
                width: 50px;
                position: fixed;
                top: 40%;
                left: 2%;
                transform: translate(-50%);
                z-index: 1;
            }
            
            .social-icons img {
                display: block;
                width: 90px;
                margin: 0 auto 20px;
                cursor: pointer;
            }
            
            @media only screen and (max-width: 780px) {
                #header {
                    background-attachment: fixed;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 800px 720px;
                }
                .container {
                    margin-right;
                    50px;
                    margin-left: 50px;
                }
                .logo {
                    margin-top: 27px;
                    width: 90px;
                }
                .header-text {
                    margin-top: 100px;
                }
                h1 {
                    font-size: 25px;
                }
                #menuBTN {
                    width: 40px;
                    right: 50px;
                }
                .common-btn {
                    padding: 10px 16px;
                }
                .social-icons img {
                    width: 14px;
                    margin: 15px auto;
                }
                .about-left-col,
                .about-right-col {
                    flex-basis: 100%;
                }
                .about-text {
                    margin: 50px 0 10px;
                    display: inline-block;
                }
                .about-text p {
                    font-size: 12px;
                }
                .history-col {
                    flex-basis: 100%;
                    margin-bottom: 20px;
                }
                .bells-left-col {
                    flex-basis: 100%;
                }
                .bells-right-col {
                    flex-basis: 100%;
                    margin-top: 70px;
                }
                .contact-left-col,
                .contact-right-col {
                    flex-basis: 100%;
                }
                .contact-right-col {
                    margin-top: 50px;
                }
                .footer-left-col,
                .footer-right-col {
                    flex-basis: 100%;
                }
                link-title {
                    flex-basis: 50%;
                    margin-bottom: 30px;
                }
                /*------ End Social icons--------*/
                /*---------- End Footer section-------------*/