@import url('https://fonts.googleapis.com/css2?family=Beau+Rivage&family=Inter:wght@300;400;500;600;700&family=Overpass+Mono:wght@400;500;600;700&family=Pacifico&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,200;1,400&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300&family=Rubik:wght@300;400;500;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Overpass Mono', monospace;
}

body{
    background-color: #0B1D26;
}

/* home style */

.main-section{
    background-image: url(img/main.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 230px;
    padding-bottom: 450px;
}

.home-section-header {display: flex;justify-content: space-between;transition: .3s;align-items: center;padding: 40px 3%;width: 100%;position: fixed;top: 0;left: 0;z-index: 5;}

.home-section-header.toggle-header{position: fixed;top: 0;left: 0;width: 100%;background-color: #0B1D26;}

.header-logo h1 {font-size: 20px;color: #fff;text-transform: uppercase;margin: 0;font-weight: 700;}

.header-menu ul {list-style: none;margin: 0;padding: 0;}

.header-menu ul li {display: inline-block;}

.header-menu ul li a {font-size: 18px;color: #fff;font-weight: 600;text-decoration: none;text-transform: capitalize;padding: 0 15px;}

button.header-btn {font-size: 17px;font-weight: 600;color: #fff;background: transparent;border: none;outline: none;text-transform: capitalize;}

button.header-btn i {padding-right: 10px;}

.main-section{position: relative;}

.gradiant {height: 400px;width: 100%;background: linear-gradient(180deg, rgba(11, 29, 38, 0) 0%, #0B1D26 61.38%);position: absolute;bottom: 0;}

.main-item {position: relative;}

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

.main-item .main-left-text {position: absolute;top: 80px;left: 3%;transform: rotate(90deg);display: inherit;}

.main-left-text h4 {font-size: 13px;text-transform: capitalize;color: #ffff;font-weight: 600;}

.main-left-text i {margin: 0;font-size: 13px;color: #fff;padding: 0 5px;}

.main-center-text h5 {font-size: 18px;color: #0B1D26;position: relative;margin-left: 72px;}

.main-center-text h5::after {position: absolute;top: 50%;transform: translateY(-50%);height: 2px;left: -69px;width: 50px;background: #0B1D26;content: '';}

.main-center-text h1 {font-size: 50px;color: #fff;text-transform: capitalize;padding-top: 10px;}

button.main-btn {background: transparent;color: #ffff;font-size: 18px;text-transform: capitalize;font-weight: 600;border: none;outline: none;margin-top: 30px;}

.owl-dots button:nth-child(1)::before {content: "01";}

.owl-dots button:nth-child(2)::before {content: "02";}

.owl-dots button:nth-child(3)::before {content: "03";}

.owl-dots button::before {color: #ffff;font-size: 18px;}

.owl-dots button {display: block;margin: 20px 0;}

.owl-dots {position: absolute;top: 15px;right: 10%;}

#barIcon , #barcrossIcon{display: none;font-size: 20px;color: #ffff;z-index: 5;}


/* blog style */

.blog-item-content h4 {font-size: 18px;text-transform: uppercase;color: rgba(251, 215, 132, 1);position: relative;margin-left: 64px;}

.blog-item-content h4::after {position: absolute;top: 50%;transform: translateX(-50%);height: 2px;width: 45px;background: rgba(251, 215, 132, 1);content: '';left: -40px;}

.blog-item-content h1 {font-size: 40px;color: #ffff;padding-top: 20px;font-weight: 600;}

.blog-item-content p {color: #ffff;font-size: 16px;padding-top: 20px;}

button.blog-btn {border: none;outline: none;background: transparent;color: rgba(251, 215, 132, 1);font-size: 18px;font-weight: 600;text-transform: capitalize;margin-top: 15px;}

.blog-item img {width: 100%;margin-top: 200px;border-radius: 10px;}

.blog-item-content {margin-top: 200px;padding: 50px 60px;}

.blog-section {margin-top: -450px;z-index: 2;position: relative;}


/* footer style */

.footer-section {padding: 150px 0;}

.footer-item {margin-top: 50px;padding: 0 5px;}

.footer-item h1 {font-size: 32px;font-weight: 700;text-transform: capitalize;color: rgba(255, 255, 255, 1);}

.footer-item p {font-size: 18px;color: #ffff;font-weight: 600;padding-top: 10px;}

span.copyright {padding-top: 90px;display: block;color: gray;font-size: 16px;font-weight: 500;}

.footer-item h2 {font-size: 25px;color:  rgba(251, 215, 132, 1);font-weight: 600;}

.footer-item a {font-size: 18px;color: rgba(255, 255, 255, 1);text-transform: capitalize;display: block;padding-top: 10px;text-decoration: none;transition: .3s;}

.footer-item a:hover {margin-left: 5px;}



/* Responsive Layout */

@media(max-width: 991px){
    .main-item .main-left-text{
        display: none;
    }
}


@media(max-width: 768px){
    .owl-dots button::before {color: #ffff;font-size: 18px;margin: 0 10px;}

    .owl-dots button {display: inline-block;margin: 20px 0;}

    .owl-dots {position: relative;top: 0;right: 0;text-align: center;}

    .header-menu {position: fixed;top: 0;transition: .3s;right: -100%;height: 100%;width: 50%;background: #0B1D26;padding: 40px;}

    .header-menu ul li {display: block;padding: 20px 0;border-bottom: 1px solid gray;}

    .header-menu ul li a {padding: 0;}

    button.header-btn{display: none;}

    #barIcon{display: block;}
}


@media(max-width: 576px){
    .header-menu{width: 90%;}

    .main-center-text{padding: 40px;}
}