/* ===FONTS=== */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

/* ===RESET=== */
*,*::after,*::before{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
a,a:active{
    color: inherit;
    text-decoration: none;;
}
a:focus-visible{
    border: 1px solid blue;
}
/* ===VARIABLES=== */
:root{
    --header-text-clr: white;
    --primary-text-clr: white;
    --body-text-clr: rgb(4, 4, 5);
    --primary-clr: #063258;
    --secondary-clr: 

    
    --header-bg-clr-dim: rgba(4, 13, 29, .5);
    --header-bg-clr: rgb(4, 13, 29);
    --fixed-bg-clr: rgba(4, 13, 29, 0.9);
    --overlay-bg-clr: #4e9d85;
    --section-bg-clr: rgb(221, 221, 221); 
    --modal-clr: rgb(4, 13, 29, 0.75);
    --shadow-clr: rgba(5, 5, 5, 0.44);
    --hamburger-clr: white;

    --section-spacing: 6em 0;
    --spacing-sm: .5em;
    --spacing-md: 1em;
    --spacing-lg: 2em;

    /* effects */
    --speed: 200ms;
    --blur: .5rem;
    --radius: .5rem;
}

/* ===GLOBAL=== */
html{
    scroll-behavior: smooth;
    scroll-padding-top: 2em;
}
.container{
    width: 90vw;
    margin: 0 auto;
    max-width: 2200px;
}
/* grid/flex */
.flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex>.flex-col>img{
    width: 100%;
}
.grid{
    display: grid;
    justify-content: center;
    justify-items: center;
    align-items: center;
}
/* helpers */
.padding-tb-lg{
    padding-top: 2em;
    padding-bottom: 2em;
}
.padding-tb-md{
    padding-top: 1em;
padding-bottom: 1em;
}
.margin-tb-lg{
    margin-top: 2em;
    margin-bottom: 2em;
}
.margin-tb-md{
    margin-top: 1em;
    margin-bottom: 1em;
}
.margin-t-md{
    margin-top: 1em;
}
.margin-t-lg{
    margin-top: 2em;
}
.margin-b-lg{
    margin-bottom: 2em;
}
.margin-b-md{
    margin-bottom: 1em;
}
/* buttons */
.btn{
    padding: 1em 1.6em;
    margin: 0 auto;
    display: block;
    width: fit-content;
    background: transparent;
    outline: none;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 8px;
    cursor: pointer;
    transition: all 150ms ease-in;
}
.btn:hover{
    background-color: var(--header-text-clr);
    color: var(--body-text-clr);
}
.btn-reverse{
    background-color: white;
    color: var(--header-bg-clr);
}
.btn-text{
    background: none;
    border: none;
    outline: none;
    color: currentColor;
    text-decoration: underline;
    cursor: pointer;
    margin: 0 1em;
}
.btn-grp{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
}

.hover{
    transition: filter 150ms ease-in;
    cursor: pointer;
}
.hover:hover{
    filter: invert(0.5) sepia(1) hue-rotate(
169deg) brightness(0.8) saturate(0.5);
}
/* inputs */
.input-container{
    display: flex;
    border: 2px solid currentColor;
    align-items: center;
    padding: .3em 1em;
    border-radius: 10px;
    position: relative;
}
.input-container input{
    background-color: transparent;
    color: currentColor;
    outline: none;
    border: none;
    padding: 1em;
    font-size: inherit;
}
.input-container input[type=text]{
    width: 100%;
    cursor: text;
}
.input-container input[type=submit]{
    margin-left: auto;
    cursor: pointer;
}
input::placeholder{
    color: currentColor;
    transition: opacity 200ms;
}
input:focus-visible::placeholder{
    opacity: .5;
}
/* text */
h1{
    font-size: 3rem;
}
h2{
    font-size: 2rem;
}
h3{
    font-size: 1.32rem;
}
.section-title{
    font-size: 3rem;
    margin-bottom: 0.7rem;
}
section blockquote{
    position: relative;
    margin: 1em 0 1em 2em;
    font-style: italic;
    letter-spacing: 0.1em;
}
section blockquote::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: -1em;
    display: flex;
    align-self: center;
    width: .3em;
    height: 100%;
    background-color: var(--primary-clr);
}
/* images */
.bg-overlay{
    z-index: 1;
    position: relative;
}
.bg-overlay::after{
    z-index: -1;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg-clr);
    /* mix-blend-mode: hue; */
    opacity: 0.5;
}
/* icons */
.ico{
    background-position: center;
    background-size: contain;
    opacity: 1;
    height: 1.5em;
    width: 1.5em;
    cursor: pointer;
    transition: opacity 200ms ease;
}
.ico:hover{
    opacity: 0.6;
}
.ico.facebook{
    background-image: url(../images/facebook-ico.svg);
}
.ico.twitter{
    background-image: url(../images/twitter-ico.svg);
}
.ico.email{
    background-image: url(../images/email-ico.svg);
}
.ico.git{
    background-image: url(../images/git-ico.svg);
}
/* animation */
@keyframes updownArrow{
    10%{
        transform: translateY(.5em) rotate(90deg);
    }
    20%{
        transform: translateY(-.5em) rotate(90deg);
    }
    0%,30%,100%{
        transform: translateY(0) rotate(90deg);
    }
}
@keyframes mobileScroll{
    to{
        transform: translateX(-100vw);
    }
    
}
/* mobile only */
.mobile-only{
    display: none;
}
.desktop-only{
    display: block;
}


/* ===BODY=== */
body{
    font-family: 'Ubuntu', sans-serif;
    min-height: 100vh;
    background: url(../images/pattern.jpg) repeat;
}
section{
    padding: 6em 0;
}
section .container{
    z-index: 100;
}
.scroll-top{
    position: fixed;
    text-align: center;
    bottom: .7em;
    right: .7em;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: var(--header-text-clr);
    background-color: var(--primary-clr);
    border-radius: 50%;
    border: 1px solid var(--header-text-clr);
    z-index: 110;
}
.scroll-top span{
    transform: rotate(-90deg);
    margin-right: 2px;
}
.flex-col ul{
    margin-top: 1em;
    margin-left: 1em;
    list-style: disc;
}
.flex-col ul li{
    margin-bottom: .6em;
}


/* header fixed top */
.header-section.fixed{
    position: fixed;
    width: 100%;
    top: 0;
    background-color: var(--fixed-bg-clr);
    padding: .8em 0;
    border-bottom: 2px solid var(--header-text-clr);
    z-index: 100;
}
.header-section.fixed .profile-btn{
    scale: 0.85;
    transition: scale 0.3;
}

/* -- HEADER SECTION -- */
.header-section{
    background-color: var(--header-bg-clr);
    padding: var(--spacing-md) 0;
    color: var(--header-text-clr);
    transition: all 300ms ease-in-out;
    z-index: 1;
    height: var(--header-height);
}
.header-section.fixed{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    opacity: .85;
    padding: var(--spacing-sm) 0;
}
.header-section.fixed:hover{
    opacity: 1;
}
.header-section .navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* profile button */
.profile-btn{
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    text-align: center;
    display: flex;
}
.profile-btn>img{
    width: 2em;
}
.profile-name{
    font-size: .8em;
}
.profile-name>span{
    display: block;
    font-weight: normal;
    font-size: .6rem;
    opacity: 0.75;
    font-style: italic;
}
/* navbar */
.nav-menu{
    display: flex;
    margin-left: auto;
    background: none;
    justify-content: space-between;
    gap: var(--spacing-lg);
    align-items: center;
    user-select: none;
    font-size: 1.1rem;
    font-weight: 700;
}
.navbar a.btn.nav{
    font-size: .8rem;
    font-weight: 400;
}
.nav-logo{
    max-width: 175px;
}
.nav-logo>img{
    width: 100%;
}
/* append '.restyle-on-scoll' to element */
.nav-logo.restyle-on-scroll.active{
    filter: invert(1);
}
.nav-link{
    position: relative;
    display: inline-block;
    transition: color var(--speed) linear;
}
.nav-link:hover,
.nav-dropdown a:hover{
    color: white;
}
.has-dropdown.active{
    color: white;
}
.nav-menu .hover-animate::before{
    background-color: white;
}
/* animate links on hover */
.hover-animate::before{
    content: "";
    position: absolute;
    display: block;
    left: 0;
    margin-top: .2rem;
    bottom: -.3rem;
    width: 100%;
    height: .2rem;
    transform: scaleX(0);
    background-color: var(--primary-clr);
    transition: transform calc(var(--speed)*.7) ease-in;
}
.hover-animate:hover::before{
    transform: scaleX(1);
}
/* dropdown caret icon */
.has-dropdown>.nav-link::after{
    content: "\2304";
    color: inherit;
    font-size: 1.9rem;
    position: absolute;
    top: -.9rem;
    margin-left: .2em;
    transition: transform var(--speed);
}
.has-dropdown.active>.nav-link::after{
    transform: rotate(180deg);
    top: -.3rem;
}
/* dropdown */
.nav-dropdown{
    position: absolute;
    top: 1.35em;
    transform: scaleY(0);
    transform-origin: top;
    padding: var(--spacing-md);
    padding-top: 0;
    margin-left: calc(var(--spacing-md)*-1);
    z-index: 10;
    background-color: var(--header-bg-clr);
    overflow: hidden;
    border-bottom-left-radius: var(--corners);
    border-bottom-right-radius: var(--corners);
    transition: transform var(--speed);
}
.has-dropdown.active .nav-link{
    color: white;
}

.has-dropdown.active .nav-dropdown{
    transform: scaleY(1);
}
.has-dropdown{
    margin-right: var(--spacing-md);
    position: relative;
}
.nav-dropdown li{
    margin: var(--spacing-sm) 0;
}

/* -- hamburger toggle button-- */
/* hidden by default */
.hamburger {
    display: none;
    width: 2rem;
}
.hamburger span{
    display: block;
    height: 3px;
    margin: var(--spacing-sm) 0;
    transition: transform var(--speed) ease-in-out;
    background-color: var(--primary-text-clr);
}
.hamburger span:nth-of-type(1) {
    width: 50%;
}
.hamburger span:nth-of-type(2) {
    width: 75%;
}
.hamburger span:nth-of-type(3) {
    width: 100%;
}
.hamburger-toggle{
    display: block;
    position: absolute;
    right: 2em;
    top: 2em;
    cursor: pointer;
}
.hamburger-toggle span:nth-child(1){
    display: block;
    height: 5px;
    width: 2.5rem;
    position: absolute;
    top: -10px;
    background-color: var(--hamburger-clr);
}
.hamburger-toggle span:nth-child(2){
    height: 5px;
    width: 2.5rem;
    background-color: var(--hamburger-clr);
    display: block;
    position: relative;
}
.hamburger-toggle span:nth-child(3){
    display: block;
    height: 5px;
    width: 2.5rem;
    position: absolute;
    bottom: -10px;
    background-color: var(--hamburger-clr);
}
.main-nav{
    display: flex;
    gap: 1.6em;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
    font-weight: 700;
}
.main-nav li{
    font-size: 1rem;
}
.main-nav li:hover{
    color: var(--overlay-bg-clr);
    transition: color .3s linear;
}
.header-logo img{
    width: 60%;
}
.header-logo h1{
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.4rem;
}
.header-logo h1 span{
    font-weight: 300;
}

/* ===HERO=== */
.hero-section{
    background: url(../images/hero-bg2.jpg) no-repeat center;
    background-attachment: fixed;
    background-size: cover;
    padding: var(--spacing-md) 0 var(--spacing-lg) 0;
    color: white;
}
.hero-section .main-title{
    font-size: 7.6em;
    font-weight: 700;
    width: 66%;
    line-height: .8em;
    letter-spacing: -5px;
    text-shadow: 7px 7px 12px var(--shadow-clr);
}
.main-title .dot,
.main-title .period{
    display: inline-block;
    position: relative;
}
.main-title .dot::after{
    content: "";
    width: 0.22em;
    aspect-ratio: 1/1;
    position: absolute;
    top: -2px;
    left: 5px;
    display: inline-block;
    border-radius: 50%;
    background: var(--header-bg-clr);
    /* border: .04em solid white; */
    z-index: 1;
    user-select: none;
}
.main-title .period::after{
    top: auto;
    bottom: 2px;
    left: 3px;
}
.otb-icon{
    width: 5em;
    display: block;
    margin: var(--spacing-lg) 0;
    transform: translateX(7px);
    filter: drop-shadow(3px 5px 2px var(--shadow-clr));
}
.otb-icon #box-g>*{
    fill: white;
    stroke: white;
    box-shadow: 5px 5px 10px var(--header-bg-clr);;
}
.otb-icon #arrow-path{
    fill: none;
    stroke: white;
    stroke-width: 10;
    stroke-dasharray: 0 10;
    animation: line-draw 5s infinite forwards;    
}
@keyframes line-draw{
    100%{
        stroke-dasharray: 12 10;
        stroke: var(--header-bg-clr);
    }
}
.otb-icon #lid{
    animation: lid 1s 1 reverse;
}
@keyframes lid {
    100%{
        transform: rotate(1deg) translateY(25px) translateX(3px);
        transform-origin: center left;
    }
}
.otb-icon #arrow-tip{
    opacity: 0;
    fill: white;
    animation: tip 5s infinite forwards;
}
@keyframes tip{
    100%{
        opacity: 1;
        fill: var(--header-bg-clr);
    }
}
.hero-description{
    margin: var(--spacing-md) 0 0 0;
    width: 65%;
    
}
.hero-description h3{
    font-size: 1.5em;
}
.hero-description p{
    font-size: 1.3em;
    margin-top: var(--spacing-sm);
}
.hero-description .btn{
    display: inline-block;
}
.hero-description .btn:nth-of-type(2){
    background-color: transparent;
    margin: 0.5em;
    color: white;
    box-shadow: 0px 0px 0px 2px white inset;
}
.hero-section .modal-btn{
    margin: 1em 0 0 0;
    padding: 0.6em .9em;
    border-radius: 2em;
    background-color: white;
    color: var(--header-bg-clr);
    font-weight: 700;
    border: none;
}



/* ===FEATURES=== */
.service-section{
    text-align: center;
}
.service-section .container.flex{
    justify-content: space-around;
    gap: 3em;
}
.service-section .flex-col h3{
margin: .5em 0;
}
.service-section .flex-col{
    /* flex: 0 0 20em; */
}
.service-section .flex-col>img{
    width: 6em;
}
.service-section .flex-col p{
    text-align: left;
}
/* ===PRODUCT=== */
.product-section .flex{
    gap: 4em;
    padding: 2em 0;
}
.product-section .flex:nth-child(odd){
    flex-direction: row-reverse;
}
.product-section .flex-col{
    flex-basis: 50%;
}
.product-section .flex-col .btn{
    margin: 1em 0;
}
.product-section .flex-col .btn:hover{
    font-weight: 700;
    border: 2px solid;
}
.product-img{
    border-radius: 10px;
}
/* ===NEWSLETTER=== */
.newsletter-section{
    background: url(../images/newsletter-bg.jpg) no-repeat bottom;
    background-attachment: fixed;
    background-size: cover;
    color: white;
    text-align: center;
}
.newsletter-section .container{
    width: 65vw;
    max-width: 920px;
}
.newsletter-section p{
    font-size: 1.7rem;
    margin-bottom: 2em;
}
.newsletter-section .input-container{
    margin: 0 auto;
}

/* ===TEAM=== */
.team-section{
    text-align: center;
}
.team-section .container.grid{
    grid-template-columns: repeat(auto-fit, 15em);
    gap: 2em;
}
.team-card{
    width: 100%;
    height: 17em;
    border-radius: 4px;
    box-shadow: 2px 2px 10px var(--shadow-clr);
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.member-photo{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.member-info{
    padding: 0.5em 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: white;
}
.member-contact{
    width: 100%;
    bottom: -5em;
    padding: 1em 0;
    background-color: var(--section-bg-clr);
    position: absolute;
    display: flex;
    gap: 1.5em;
    justify-content: center;
    transition: bottom 250ms ease-in-out;
}
.team-card:hover .member-contact{
    bottom: 0;

}

/* ===PRICING=== */
.pricing-section{
    text-align: center;
}
.pricing-section .container.grid{
    grid-template-columns: repeat(auto-fit, 15em);
    justify-content: space-evenly;
    align-items: center;
    gap: 3em;
}
.pricing-card{
    padding: 3em 0;
    margin: 8px 4px;
    width: 16em;
    position: relative;
    background-color: white;
    border: 1px solid var(--primary-clr);
    border-radius: 6px;
    cursor: pointer;
    transition: all 250ms ease-in;
}
.pricing-card:hover{
    box-shadow: 2px 2px 10px var(--shadow-clr);
    border: 3px solid var(--primary-clr);
}
.pricing-card.selected{
    box-shadow: 2px 2px 10px var(--shadow-clr);
    background-color: var(--primary-clr);
    color: var(--header-text-clr);
}
.pricing-card.selected span{
    color: var(--header-text-clr);
}
.pricing-card button{
    display: block;
    margin: 2em auto;
}
.pricing-card:hover button{
    background-color: var(--primary-clr);
    color: white;
}
.pricing-card small{
    display: block;
}
.price{
    font-size: 5rem;
    position: relative;
    text-align: center;
}
.dollar-sign{
    display: block;
    font-size: 3rem;
    position: absolute;
    left: 30%;
    font-weight: 300;
    color: var(--primary-clr);
}
.pricing-card p{
    margin-top: 2em;
}



/* MODAL */
.modal-window{
    opacity: 0;
    visibility: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-clr);
    z-index: 1000;
    transition: opacity .5s;
}
.modal-window.modal-open{
    opacity: 1;
    visibility: visible;
}
.modal-close{
    position: absolute;
    top: 5px;
    right: 8px;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
}
.modal-close:hover{
    opacity: 0.4;
    transition: opacity var(--speed);
}
.modal-body{
    margin: 0 auto;
    background: url(../images/pattern.jpg) repeat;
    position: relative;
    padding: var(--spacing-md);
    padding-right: var(--spacing-sm);
    border-radius: var(--radius);
    border: 3px inset;
}
.form-title{
    padding: 1em 0;
    margin-bottom: var(--spacing-md);
    text-align: center;
}
.form-title h2{
    display: inline-block;
    border-bottom: 3px solid currentColor;
    padding-bottom: 3px;
    margin-bottom: 3px;
}
.modal-body form{
    position: relative;
    padding-right: var(--spacing-sm);
    max-height: 66vh;
    overflow-y: auto;
    flex-wrap: nowrap;
    flex: 1;
    color: var(--body-text-clr);
}
.modal-body form::-webkit-scrollbar {
    width: .7rem;
  }
  
  /* Track */
  .modal-body form::-webkit-scrollbar-track {
    border: 2px solid currentColor;
    border-radius: var(--radius);
  }
   
  /* Handle */
  .modal-body form::-webkit-scrollbar-thumb {
    background: currentColor; 
    border-radius: var(--radius);
  }
.modal-body form.user-login{
    display: none;
}
.form-description{
    flex-direction: column;
}
.form-description label{
    align-self: flex-start;
    margin-bottom: var(--spacing-sm);
}
.form-description textarea{
    width: 100%;
    background-color: transparent;
    font-family: inherit;
    border: none;
    outline: none;
    font-size: inherit;
}
form.user-login,
form.service-ticket{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
.modal-body .input-grp{
    position: relative;
    width: 100%;
}
.modal-body .input-grp::after{
    content: "";
    display: block;
    margin: var(--spacing-md) 0;
    border-radius: var(--radius);
    width: 100%;
    height: .1rem;
    background-color: black;
}
.modal-body .input-container:focus-within label{
    opacity: .4;
    transition: opacity var(--speed);
}
/* .modal-body .input-grp input:first-of-type{
    margin-right: var(--spacing-sm);
} */
.modal-body .input-container{
    margin-bottom: var(--spacing-sm);
}

/* FORM */
.input-grp input{
    display: flex;
    padding: 1em;
    text-align: right;
}
.input-grp:has(.input-container textarea){
    width: 100%;
}
.input-container textarea{
    height: 15em;
}
.input-container input[type="file"]{
    
}
.input-container input[type="file"]::file-selector-button{
    display: none;
}
.input-grp.form-submit{
    text-align: center;
}
.form-submit .btn{
    border: 2px solid currentColor;
}
.input-grp:nth-last-child(2)::after,
.input-grp.form-submit::after{
    content: none;
}
.input-container select{
    width: 75%;
    margin: 0 auto;
    background: transparent;
    border: none;
    font-size: inherit;
    text-align: right;    width: 75%;
    margin: 0 auto;
    background: transparent;
    border: none;
    outline: none;
    font-size: inherit;
    text-align: right;
}


.footer-section{
    padding: var(--spacing-md) 0;
    background-color: var(--fixed-bg-clr);
    color: var(--header-text-clr);
}
.footer-nav{
    display: flex;
    gap: 4em;
    justify-content: center;
    align-items: center;
}
.footer-nav li{
    text-transform: capitalize;
}
.footer-nav .nav-link:hover{
    color: inherit;
}