:root {
    --accent-color: #ff8f00;
    --accent-color-dark: #FF6F00;

    --white-f: brightness(0) saturate(100%) invert(97%) sepia(30%) saturate(7432%) hue-rotate(183deg) brightness(122%) contrast(100%);
    --primary-f: brightness(0) saturate(100%) invert(23%) sepia(78%) saturate(2023%) hue-rotate(154deg) brightness(87%) contrast(101%);
    --accent-f: brightness(0) saturate(100%) invert(51%) sepia(81%) saturate(1497%) hue-rotate(1deg) brightness(106%) contrast(107%);
    --dark-f: brightness(0) saturate(100%) invert(22%) sepia(10%) saturate(1701%) hue-rotate(182deg) brightness(98%) contrast(92%);
    --primary-light-f: brightness(0) saturate(100%) invert(81%) sepia(51%) saturate(6210%) hue-rotate(128deg) brightness(94%) contrast(101%);
    --star-color: #ffcc00;
    --secondary: #ffcc00;
    --warm: #fc2b4a;
    --warm-dark: #df1d3a;
    --lightest-gray: #f2f6ff;
    --light-gray: #e1e8f0;

    --navy-500: #acd2d3;
    --navy-200: #c9e6e2;
    --navy-100: #cceeee;
    --primary-color-light: #00c8ad;
    --primary-color: #007869;
    --primary-color-dark: #005044;
    --transition-speed:300ms;
}
* {
    transition: all var(--transition-speed);
}
@font-face {
    font-family: SiteTypeFace;
    src: url("../font/NotoSans.ttf");
}
html {
    direction: ltr !important;
    scroll-behavior: smooth;
    color: black !important;
    scroll-padding-top: 90px !important; /* height of sticky header */
}
section {
    scroll-margin-top: 90px; /* match navbar height */
}
header{
    background-size: cover !important;
}
body{
    direction: ltr !important;
    font-family: "SiteTypeFace";
    margin:  0;
    padding: 0;
    width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll !important;
}
a{
    color: var(--primary-color-light);
}
a:hover{
    color: lightslategrey;
}
.bg-dark{
    background-color: var(--primary-color) !important;
}
.bg-darker{
    background-color: var(--primary-color-dark) !important;
}
.bg-light-grey{
    background-color: var(--lightest-gray) !important;
}
.sticky-top{
    transition: .5s !important;
}
/***btn***/
.btn{
    transition: all 200ms ease-in-out;
    border-radius: 0 !important;
    font-size: medium !important;
    text-transform: none !important;
}
.bg-primary{
    background-color: var(--primary-color) !important;
}
.btn-action:hover{
    transition: 200ms ease-in-out;
}
.btn-action{
    background-color: var(--accent-color-dark) !important;
    color: white;
    font-size: medium !important;
    --mdb-btn-box-shadow:0 4px 9px -4px var(--accent-color-dark) !important;
}
.btn-action:hover{
    background-color: var(--accent-color-dark) !important;
    color: white;
    --mdb-btn-box-shadow:0 4px 9px -4px var(--accent-color-dark) !important;
}

.btn-primary-dark{
    background-color: var(--primary-color) !important;
    color: white;
    transition: .3s;
}
.btn-primary-dark:hover{
    background-color: var(--primary-color-dark) !important;
    color: white;
    transform: translateY(-3px);
    transition: .3s;
}
.btn-primary-outline{
    background:none ;
    color : var(--primary-color);
}
.btn-primary-outline:hover{
    background: #049f64;
    color:white;
}
.dark-shadow-bg{
    text-shadow: -1px 2px 9px var(--primary-color-dark);
}
.btn-outline-primary{
    border-color:var(--primary-color);
    color: var(--primary-color);
}
.btn-outline-primary:hover{
    border-color:var(--primary-color-dark) !important;
    color: var(--primary-color-dark) !important;
}
.text-primary{
    color: var(--primary-color) !important;
}
.text-primary-light{
    color: var(--primary-color-light);
}
.txt-accent{
    color: var(--accent-color);
}
.text-justify {
    text-align: justify !important;
    text-justify: inter-word;
}
.text-shadow{
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
/**** navbar ****/
#top-nav{
    background-color: var(--primary-color-dark) !important;
    padding-bottom: 8px !important;
    padding-top: 8px !important;
}
/*footer*/
footer{
    background-color: var(--primary-color-dark);
    overflow: hidden;
}
footer li{
    list-style: none;
    padding: 8px;
}
footer li a{
    color: whitesmoke;
}
footer li a:hover{
    color: var(--primary-color-light);
}
.txt-small{
    font-size: small !important;
}
/**************************/
.modal-content{
    border-radius: 0 !important;
}
/**************************/
.deco{
   display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}
.deco-line{
    background-color: var(--primary-color);
    border-radius: 16px;
    width: 100px;
    height: 5px;
}
.deco-dot{
    background-color: var(--accent-color);
    border-radius: 16px;
    margin-top: 4px;
    width: 35px;
    height: 5px;
}

@media all and (min-width: 992px) {
    .navbar .dropdown-menu-end{ right:0; left: auto;  }
    .navbar .nav-item .dropdown-menu{  display:block; opacity: 0;  visibility: hidden; transition:.3s; margin-top:0;  }
    .navbar .nav-item:hover .nav-link{ color: #fff;  }
    .navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
    .navbar .dropdown-menu.fade-up{ top:180%;  }
    .navbar .nav-item:hover .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; top:100%; transform: rotateX(0deg); }
    nav{padding-top: 12px !important;padding-bottom: 12px !important;}
}

@media (max-width: 768px) {
    .head-ic img{
        margin-right: 10px;
    }
    #specs-list{
        padding-right: 16px !important;
        padding-left: 16px !important;
    }
    #footer-inner{
        flex-direction: column !important;
        align-items: start !important;
        padding: 0  !important;
    }
    .footer-col{
        width: 100%  !important;
        padding: 0 !important;
    }
    .desc-ul, .href-ul{
        width: 100% !important;
        padding: 0 !important;
    }
}
/* Common fade-in settings */
.fade-in {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in.visible{
    opacity: 1;
}
/* Fade In Up */
.fade-in-up { transform: translateY(20px); }
.fade-in-up.visible { opacity: 1; transform: translateY(0); animation: fadeInUp 0.8s ease-out forwards; }
@keyframes fadeInUp { from { opacity:0; transform: translateY(20px);} to { opacity:1; transform: translateY(0);} }

/* Fade In Down */
.fade-in-down { transform: translateY(-20px); }
.fade-in-down.visible { opacity: 1; transform: translateY(0); animation: fadeInDown 0.8s ease-out forwards; }
@keyframes fadeInDown { from { opacity:0; transform: translateY(-20px);} to { opacity:1; transform: translateY(0);} }

/* Fade In Left */
.fade-in-left { transform: translateX(-20px); }
.fade-in-left.visible { opacity: 1; transform: translateX(0); animation: fadeInLeft 0.8s ease-out forwards; }
@keyframes fadeInLeft { from { opacity:0; transform: translateX(-20px);} to { opacity:1; transform: translateX(0);} }

/* Fade In Right */
.fade-in-right { transform: translateX(20px); }
.fade-in-right.visible { opacity: 1; transform: translateX(0); animation: fadeInRight 0.8s ease-out forwards; }
@keyframes fadeInRight { from { opacity:0; transform: translateX(20px);} to { opacity:1; transform: translateX(0);} }

/* Delay classes */
.delay-1 { transition-delay: 0.4s; }
.delay-2 { transition-delay: 0.8s; }
.delay-3 { transition-delay: 1.2s; }
.delay-4 { transition-delay: 1.6s; }

/*
.zoom-container {
    overflow: hidden;
    cursor: zoom-in;
}

.zoom-image {
    transition: transform 0.2s ease;
    width: 100%;
    height: auto;
}*/
.zoom-container {
    overflow: hidden;
    cursor: zoom-in;
    touch-action: none; /* important for mobile */
}

.zoom-image {
    transition: transform 0.15s ease;
    width: 100%;
    height: auto;
    cursor: zoom-in !important;
}