/*
  Theme Name: Vertex
  Author: Wings Tech Solutions
  Support: buzz@wingsts.com
  Description: Vertex
  Version: 1.0
*/

/* ==============CSS Index================
------------------------------------------
    1. Common CSS
    2. Button 
    3. Header
    4. Hero
    5. About
    6. Service
    7. Logo
    8. Project
    9. Expertise
    10. Feature
    11. Blog
    12. Brochure
    13. Contact
    14. Footer
    15. Copyright
    16. About Page
    17. Service Page
    18. Project Page
    19. Project Deatil Page
    20. Blog Page
    21. Resource Page
    22. Contact Page
    23. Blog Detail Page
    24. Privacy & Terms Page
-----------------------------------------
=======================================*/

/****************
  Common CSS
****************/
/* 
/**********
  Header
**********/
header .navbar {
    padding: 0 8px;
    align-items: center;
}

header .navbar-nav {
    border-radius: 20px;
    background-color: #fff;
    padding: 7px 40px;
}

header .navbar .navbar-brand {
    padding: 0;
    margin: 0;
    width: 130px;
}

header .navbar .navbar-toggler {
    font-size: 16px;
    border: none;
    margin: 5px 0 0;
    padding: 0;
}

header .navbar .navbar-toggler:focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
}

header .hamburger {
    position: absolute;
    width: auto;
    height: 0;
    top: -11px;
    right: 30px;
    transition-duration: 0.5s;
    left: auto;
}

header .hamburger .icon {
    transition-duration: 0.5s;
    position: absolute;
    height: 2px;
    width: 20px;
    top: 27px;
    background-color: var(--black);
}

header .hamburger .icon::before {
    transition-duration: 0.5s;
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: var(--black);
    content: "";
    top: -6px;
    right: 0;
}

header .hamburger .icon::after {
    transition-duration: 0.5s;
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: var(--black);
    content: "";
    top: 6px;
    right: 0;
}

header .hamburger.open .icon {
    transition-duration: 0.5s;
    background: transparent;
    top: 31px;
}

header .hamburger.open .icon::before {
    -webkit-transform: rotateZ(45deg) scaleX(0.75) translate(2px, 2.5px);
    -moz-transform: rotateZ(45deg) scaleX(0.75) translate(2px, 2.5px);
    -ms-transform: rotateZ(45deg) scaleX(0.75) translate(2px, 2.5px);
    -o-transform: rotateZ(45deg) scaleX(0.75) translate(2px, 2.5px);
    transform: rotateZ(45deg) scaleX(0.75) translate(2px, 2.5px);
}

header .hamburger.open .icon::after {
    -webkit-transform: rotateZ(-45deg) scaleX(0.75) translate(8px, -7px);
    -moz-transform: rotateZ(-45deg) scaleX(0.75) translate(8px, -7px);
    -ms-transform: rotateZ(-45deg) scaleX(0.75) translate(8px, -7px);
    -o-transform: rotateZ(-45deg) scaleX(0.75) translate(8px, -7px);
    transform: rotateZ(-45deg) scaleX(0.75) translate(8px, -7px);
}

header .navbar-toggler:focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
}

header .navbar .navbar-collapse {
    justify-content: center;
}

header .nav-item {
    position: relative;
}

header .nav-item:not(:last-child) {
    margin-right: 30px;
}

header .nav-item:last-of-type {
    margin-right: 0 !important;
}

header .navbar-collapse .nav-item .nav-link {
    color: #999;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
    padding: 0;
    margin: 0;
    -webkit-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
    position: relative;
}

header .nav-item .nav-link:hover, header .nav-item .nav-link.active, header .nav-item.active .nav-link {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    color: var(--black);
}

header .contact-btn {
    padding: 7px 20px !important;
    font-size: 16px;
    font-weight: 600;
    background-color: #fff;
    border: 0;
    outline: 0;
    border-radius: 35px;
    color: var(--black);
    border: 1px solid var(--black);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    text-decoration: none;
}

header .contact-btn:hover {
    background-color: var(--black);
    color: #fff;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

header .contact-btn.active {
    background-color: var(--black);
    color: #fff;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.header-sticky {
    border-bottom: 1px solid var(--border-light);
    -webkit-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
    background-color: #f5f5f550;
    backdrop-filter: blur(70px);
} */

/**********
  Hero
**********/
/* *****************
scrollbar design start
********************/
.project-pill-wrapper::-webkit-scrollbar,
.project .nav::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

.project-pill-wrapper::-webkit-scrollbar-thumb,
.project .nav::-webkit-scrollbar-thumb {
    border-radius: 16px;
    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 10%);
    background-color: rgba(255, 255, 255, 0);
}

.project-pill-wrapper::-webkit-scrollbar-track,
.project .nav::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #eeeeee00;
}
.colorbackgound
{
    background: linear-gradient(100.26deg, #FFE3C5 0%, #A6EFFF 100%);
    border-radius: 12px;
}
.footer-color{
    background-color: #6c3090;
    border-radius: 10px 10px 0 0px;
}
.btn-yellow
{
    background: #ffb119 !important;
    color: white !important;
    border: none;
}
.btn-yellow-border
{
    border: 1px solid #ffb119!important;
    color: #ffb119;
    background-color: white!important;
}
.btn-yellow-border:hover
{
    border: 1px solid #8205f7!important;
    color: #8205f7!important;
    background-color: white!important;
}
.text-yellow
{
    color: #ffb119!important;
}

.hover-border-yellow:hover{
    border: 1px solid #ffb119!important;
    box-shadow: 0px 0px 4px 0px #ffb119!important;
}

/* *****************
scrollbar design end
********************/


.header-bg
{
    background-color: #6c3090;
}


/* mobile media query  */
@media (max-width: 767px) {
    .mobile-screen {
        height: 110vh;
        margin-top: -153px;
    }

    .margin-right
    {
        margin-right: 35px;
    }
    .margin-right-1{
        margin-right: 19px;
    }
    .mobile-screen-last
    {
        height: 200vh; 
        
    }
    .mobile-height
    {
        margin-top: -27px;
    }
    .know-more-about
    {
        margin-left: 100px;
        margin-bottom: 13px;
    }
    .home-logo
    {
        margin-top: -195px;
        margin-bottom: 17px;
    }



    .mobile-screen-last {
        height: 111vh!important;
    }

    .brochure-image img {
        margin: 0 0 -115px !important;
    }
}
.top-header {
    width: calc(100% - 31px);
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #9703e3;
    border-radius: 10px 10px 0 0;
    margin: 0px 17px 0px 17px;
}



@media screen and (min-width: 768px) {
    .row.justify-content-center.colorbackgound {
        height: 104vh;
    }
  }
  
@media screen and (max-width: 991px)
  {
    .hero .section-title {
        height: calc(100% - 14px) !important;
        padding-left: 8px;
        height: auto;
    }
    .brochure, .service, .about-icons {
        padding-left: 8px;
        padding-right: 8px;
        height: 575px !important;
    }
  }
  @media screen and (min-width: 320px) {
    .row.justify-content-center.colorbackgound {
        height: 104vh;
    }
    
    section.brochure.mobile-screen-last.mt-5.aos-init.aos-animate{
        height: 85vh;
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .row.justify-content-center.colorbackground {
        height: 14vh;
    }
    
    section.brochure.mobile-screen-last.mt-5.aos-init.aos-animate{
        height: 50vh;
    }
}


  /* Custom CSS to center align button text */
.custom-centered {
    display: flex;
    justify-content: center;
    align-items: center;
  }