/* header */ .header { background-color: #fff; /* box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1); */ /* position: fixed; */ position: absolute; width: 100%; z-index: 3; padding: 1% 2%; } .header ul { margin: 0; padding: 0; list-style: none; overflow: hidden; background-color: #fff; } .header li a { font-size: 16px; font-weight: 500; line-height: 1.4; padding: 15px 30px; display: block; text-decoration: none; } .header li a:hover:not(.button), .header .menu-btn:hover { transform: scale(1.2); /* Increase the size by 10% on hover */ transition: transform 0.3s ease; /* Smooth transition over 0.3 seconds */ } .header .logo { display: block; float: left; font-size: 2em; padding: 7px 10px; text-decoration: none; } .logo-carousel { display: flex; align-items: end; } /* menu */ .header .menu { clear: both; max-height: 0; transition: max-height .2s ease-out; } /* menu icon */ .header .menu-icon { cursor: pointer; display: inline-block; float: right; padding: 28px 20px; position: relative; user-select: none; } .header .menu-icon .navicon { background: #333; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px; } .header .menu-icon .navicon:before, .header .menu-icon .navicon:after { background: #333; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; } .header .menu-icon .navicon:before { top: 5px; } .header .menu-icon .navicon:after { top: -5px; } /* menu btn */ .header .menu-btn { display: none; } .header .menu-btn:checked~.menu { max-height: 480px; } .header .menu-btn:checked~.menu-icon .navicon { background: transparent; } .header .menu-btn:checked~.menu-icon .navicon:before { transform: rotate(-45deg); } .header .menu-btn:checked~.menu-icon .navicon:after { transform: rotate(45deg); } .header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after { top: 0; } /* 48em = 768px */ @media (min-width: 48em) { .header li { float: left; } .header li a { padding: 15px 30px; } .header .menu { clear: none; float: right; max-height: none; } .header .menu-icon { display: none; } } .logo-img { height: auto; width: 200px; } .brand-service-name { font-family: Sora, sans-serif; color: #050505; font-size: 12px; font-weight: 600; line-height: 1.4; text-decoration: none; } /* Remove one of the duplicate blink animations */ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Keyframes for blinking dot */ @keyframes blink { 0%, 50% { width: 4px; /* Initial width */ height: 8px; /* Initial height */ } 51%, 100% { width: 2px; /* Reduced width */ height: 2px; /* Reduced height */ } } /* Apply styles to the dot */ #brandz-stop { display: inline-block; width: 4px; /* Adjust size as needed */ height: 4px; /* Adjust size as needed */ background-color: #000; /* Adjust color as needed */ border-radius: 50%; margin: 4px 4px; } /* Apply animation to blinking dot */ #brandz-stop.blink { animation: blink 0.5s infinite; } /* Keyframes for sliding out the previous word */ @keyframes slide-out { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; } } /* Keyframes for sliding in the new word from bottom */ @keyframes slide-in { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* Apply animation to sliding out the previous word */ .slide-out { animation: slide-out 0.4s ease-in-out; } /* Apply animation to sliding in the new word */ .slide-in { animation: slide-in 0.4s ease-in-out; } /* Define blinking animation */ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* contact-us-btn */ .button { display: inline-block; border-radius: 10rem; color: #fff; transition: all .3s; position: relative; overflow: hidden; z-index: 1; border: 1px solid; } .button:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: #000; border-radius: 10rem; z-index: -2; } .button:before { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; background-color: #c0f705; transition: all .3s; border-radius: 10rem; z-index: -1; } .button:hover { color: #000; border: 1px solid #000; } .button:hover:before { width: 100%; } /* media queries */ @media (max-width: 575.98px) { .logo-img { height: auto; width: 150px; } .brand-service-name { font-size: 11px; } .header li a:hover:not(.button), .header .menu-btn:hover { transform: none; transition: none; } } @media (min-width: 576px) and (max-width: 767.98px) { .logo-img { height: auto; width: 200px; } .header li a:hover:not(.button), .header .menu-btn:hover { transform: none; transition: none; } } @media (min-width: 768px) and (max-width: 991.98px) { .logo-img { height: auto; width: 140px; } .header li a { font-size: 14px; font-weight: 500; line-height: 1.4; padding: 15px 30px; display: block; text-decoration: none; } .header li a:hover:not(.button), .header .menu-btn:hover { transform: none; transition: none; } } @media (min-width: 992px) and (max-width: 1199.98px) { .logo-img { height: auto; width: 140px; } .header li a { font-size: 14px; font-weight: 500; line-height: 1.4; padding: 15px 30px; display: block; text-decoration: none; } } @media (min-width: 1200px) and (max-width: 1399.98px) { .logo-img { height: auto; width: 140px; } .header li a { font-size: 14px; font-weight: 500; line-height: 1.4; padding: 15px 30px; display: block; text-decoration: none; } } @media (min-width: 1400px) {}