new.anwisystems.com/styles/style.scss

@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/variables";
@import "base/base";
@import "base/typography";
@import "base/utilities";
// components
@import "components/button";
// pages
@import "pages/productOverview";
@import "pages/productOverview/designedpro";
@import "pages/productOverview/popupkeyboard";
@import "pages/productOverview/dragondisplay";
@import "pages/productOverview/lens";
@import "pages/productOverview/professinalGrade";
@import "pages/productOverview/stunningsound";
@import "pages/productOverview/wifisection";
@import "pages/productOverview/tablesection";
@import "pages/productOverview/proConnectivity";
@import "pages/productOverview/osPlusSoftware";
@import "pages/productOverview/controlPanel";


@import "pages/home";
@import "pages/shopping-cart";
@import "pages/allInOne";
/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop

$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1em = 16px
*/


/* Orbitron */

@font-face {
    font-family: "Orbitron";
    src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Orbitron";
    src: url("../assets/font/orbitron/Orbitron-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Orbitron";
    src: url("../assets/font/orbitron/Orbitron-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Orbitron";
    src: url("../assets/font/orbitron/Orbitron-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}


/* Orbitron end */


/* Satoshi */

@font-face {
    font-family: "Satoshi";
    src: url("../assets/font/satoshi/Satoshi-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Satoshi";
    src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Satoshi";
    src: url("../assets/font/satoshi/Satoshi-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
    font-family: "Orbitron", sans-serif;
}




html {
    font-size: 100%;
}

body {
    box-sizing: border-box;
    overflow-x: hidden;
}


@media only screen and (max-width: 56.25em) {
    body {
        padding: 0;
    }
}

// html {
//   font-size: 100%; }
// body {
//   box-sizing: border-box; 
//   overflow-x: hidden;
// }
//   @media only screen and (max-width: 56.25em) {
//     body {
//       padding: 0; } 
//   }
$color_1: #000;
$font-family_1: "Satoshi", sans-serif;
$background-color_1: #3bb78f;
$background-color_2: #fff;


.bg-green {
    background-color: $background-color_1;
	background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%);
}
/* button */
.button_dark {
	clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
	padding-right: 1.7rem;
	padding-bottom: 0.6rem;
	padding-top: 0.6rem;
	border-radius: 10px;
}
/* navbar */
#navbar-head {
	position: fixed;
	width: 100%;
	z-index: 9999;
	top: 0;
	.biz-nav-wrapper {
		.navbar-brand {
			img {
				width: 150px;
			}
		}
		.dropdown.has-mega-menu {
			position: static !important;
		}
		.dropdown-menu {
			.dropdown-items-row {
				width: 100%;
				margin: 0px;
			}
		}
	}
	.navbar-nav {
		gap: 2rem;
		.nav-item {
			.nav-link {
				color: $color_1;
				font-family: $font-family_1;
				margin-top: 0.25rem;
			}
		}
		.dropdown.has-mega-menu {
			&:hover {
				>.navbar {
					background-color: $background-color_2;
				}
			}
		}
	}
	.button_dark.btn-dark {
		font-weight: bold;
	}
	.dropdown-menu {
		width: 100%;
		left: 0;
		// margin-top: 1.5rem;
	}
	.dropdown {
		&:hover {
			>.dropdown-menu {
				display: block;
			}
		}
	}
	.dropdown-item-img {
		img {
			width: 200px;
		}
	}
}
/* footer */
.footer-wrapper {
	background-image: url(../dist/assets/imgs/Home/Footer-bg-1.png);
	background-size: cover;
	.footer-content-main-container {
		background-image: url(../dist/assets/imgs/Home/Footer-pattern.png);
		background-size: contain;
		background-position: right 30px;
		background-repeat: no-repeat;
	}
	.last-col-footer {
		width: 23%;
	}
	.footer-logo {
		img {
			width: 120px;
		}
	}
	li {
		line-height: 2rem;
		font-family: $font-family_1;
	}
	.footer-sub-content {
		p {
			line-height: 2rem;
			font-family: $font-family_1;
		}
	}
}
.footer-socailImg {
	width: 30px;
}
@media (min-width: 1990px) {
	.footer-wrapper {
		.footer-rkt {
			right: 45px !important;
		}
	}
}

@media (max-width:1024px) {
    $color_1: rgb(255 32 32 / 0%);
    $background-color_1: #4f4f4f;
    #navbar-head {
        .navbar-nav {
            gap: 0;
            .dropdown-menu{
                margin-top: 0;
        }
        }
    }
    .navbar-toggler {
        color: $color_1;
        span {
            display: block;
            background-color: $background-color_1;
            height: 3px;
            width: 25px;
            margin-top: 5px;
            margin-bottom: 5px;
            position: relative;
            left: 0;
            opacity: 1;
            transition: all 0.35s ease-out;
            transform-origin: center left;
            &:nth-child(1) {
                transform: translate(0%, 0%) rotate(0deg);
                margin-top: 0.3em;
            }
            &:nth-child(2) {
                opacity: 1;
            }
            &:nth-child(3) {
                transform: translate(0%, 0%) rotate(0deg);
            }
        }
        &:not(.collapsed) {
            span {
                &:nth-child(1) {
                    transform: translate(15%, -33%) rotate(45deg);
                }
                &:nth-child(2) {
                    opacity: 0;
                }
                &:nth-child(3) {
                    transform: translate(15%, 33%) rotate(-45deg);
                }
            }
        }
    }
}
@media (max-width:991px) {
    #navbar-head{
        .accordion-button:not(.collapsed){
            background-color: #fff;
            color:rgb(0, 0, 0);
            box-shadow: none;
            font-weight: bold;
        }
        .accordion-button{
            font-family: "Satoshi", sans-serif;   
        }
        .accordion-body {
            ul{
                li{
                font-size: 1rem;
                  font-family: "Satoshi", sans-serif;   
                  color: #635c5c;   
                  line-height: 2.5rem;
                }
            }
        }
        .accordion-button:focus{
            // border-color:#ffffff00;
            box-shadow:none
        }
        .accordion-button::after {
            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
            transform: scale(.7) !important;
          }
          .accordion-button:not(.collapsed)::after {
            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
          }
    }
    .delivery-to-sec{
       .d-flex{
        font-size: 0.7rem;
       }
       .button_dark{
        font-size: 0.7rem;
       }
    }
    
}
#footer-head{
    .accordion-item{
        border: 1px solid;
        box-shadow: none;
        .accordion-button:not(.collapsed){
        box-shadow: none !important;}
    }
   
}

// footer 
.footer-socailImg{
    width: 30px;
}

.footer-rkt:hover{
    animation: rocketRotate 2s;
}

@keyframes rocketRotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
  }

.mbil-name, .navbar-brand img{
    transition: all .2s ease;
}