/* 
   1. Smartphones (Portrait & Landscape)
   Default styles apply here. No media query needed if you design mobile-first!
  */
   body {
  
  }
  
  /* ==========================================================================
     2. Tablets & Small Laptops (Widths from 768px and up)
      */
  @media screen and (min-width: 768px) {

    h2{
        font-size: 44px;
        line-height: 1.1;
        margin-bottom: 20px;
    }

    h3 {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 20px;

    }
   

    header {
        position: relative;
        position: sticky;
        top: 0;
        z-index: 100;
        padding: 0px;
        letter-spacing: 2px;
    
    }
    
    header>nav {
        position: relative;
    
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;

        
        background-color: rgba(241, 243, 243, 0.4);
        backdrop-filter: blur(8px);
        box-shadow: 0px 4px 4px white;
    }
    
    header>nav>.logo {
        align-self: center;
        height: fit-content;
        
    }
    
    header>nav>.logo img {
        display: block;
        position: relative;
        width: 60px;
    }
    
    header>nav>.menu {
        position: relative;
        top: unset;
        background-color: unset;
        display: flex;
        flex-direction: row;
        justify-self: center;
        align-self: center;
       
    
    }
    
    header>nav>.menu>.item>span {
        position: relative;
        display: block;
        padding: 24px 16px;
    }
    
    header>nav>.menu>.item>span:hover a {
        color: rgb(104, 104, 104);
        cursor: pointer;
    }

    /* hamburg btn */
    .hamburg-btn{
        display: none;
    }

    .m-call{
        display: none;
    }
    
    
    /* call */
    header .call {
        display: flex;
        width: 100%;
       
        padding-block: unset;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        align-self: center;
        
    }
    
    header .call a {
        position: relative;
        text-decoration: none;
        color: black;
        background-color: rgb(35, 43, 148);
        padding: 16px 24px;
        display: inline-block;
        border-radius: 100px;
        margin-left: 4px;
        /* border: solid 2px rgb(46, 222, 228); */
        color: white;
        white-space: nowrap;
        /* box-shadow: 0px 0px 20px rgb(46, 222, 228); */
    }
    
    header .call a#bm {
        position: relative;
        width: fit-content;
        /* border: 2px solid rgb(46, 222, 228); */
        background-color: transparent;
        display: inline-block;
        box-sizing: border-box;
        color: black;
        box-shadow: inset 0px 0px 0px 2px rgb(46, 222, 228);
        white-space: nowrap;
    }


    
    
    /* main */
    main {
        margin: 0px;
        padding: 0px;
    }
    
    section {
        box-sizing: border-box;
        position: relative;
        padding: 0px;
        margin: 0px;
    }
    
    section.padding {
    
        padding: 0px 32px;
    }
    
    .hero {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
       
        
        background-blend-mode: lighten;
        /* background-image: url('assets/hero-bg3.svg'); */
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
    
    }
    .hero video{
        position: relative;
        width: 100%;
       
    }
    
    .hero img {
        position: relative;
        display: block;
        width: 100%;
    
        height: 100vh;
        object-fit: cover;
        object-position: top;
        z-index: 1;
        opacity: 0.5;
        
    }
    
    .hero>.content {
        display: block;
        position: absolute;
        z-index: 2;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translateY(-50%);
        padding: 0px 16px;
    }
    
    .hero>.content h1 {
        width: 80%;
        transform: translateX(-50%);
        
        font-size: 64px;
        text-align: center;
        color: black;
        
    }


    .usp{
        position: relative;
        display: flex;
        flex-direction: row;
        margin-bottom: 44px;

    }
    .usp .text{
        position: relative;
        box-sizing: border-box;
        padding: 88px 44px;
        padding-right: 64px;
       
        width: 50%;
        height: auto;
        background-color: rgb(245, 244, 244);
    }
    .usp .image{
        position: relative;
        width: 50%;
        z-index: 10;
        
    }

    .usp .image img{
        position: relative;
        
        width: 100%;
        box-shadow: rgb(214, 214, 214) 0px 0px 4px 1px;
    }

    .usp .image .decor{
        display: none;
    }

    .usp .image .f1{
        left: -32px;
        top: 32px;
    }
    .usp .image .f2{
        right: -32px;
        top: 32px;
    }

    /* whyus */

    .whychoose {
        position: relative;
        padding: 34px;
        /* background-color: whitesmoke; */
    }

    .whychoose .content {
        position: relative;
        padding-top: 44px;
        
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(3, calc(100%/3));
        counter-set: count-item 0;
    }


    .whychoose .content .item {
        position: relative;
        box-sizing: border-box;
        padding: 16px;
        background-color: rgb(245, 244, 244);

        padding-block: 20px;



    }

    .whychoose .content .item:hover {
        background-color: whitesmoke;
    }
    .whychoose .content .item h3{
        padding-top: 44px;
        position: relative;
    }

    .whychoose .content .item h3::before {
        content: counter(count-item);
        counter-increment: count-item;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        top: -20px;
        background-color: rgb(46, 146, 228);
        color: white;

        border-radius: 0px 0px 32px 32px;
    }

    /* sales */

    .salesform {
        position: relative;

        background-image: url('assets/team-discussion.jpg'),linear-gradient(rgba(245, 245, 245, 0.8));

        
        background-blend-mode: darken;
        background-position: top left;
        background-size: cover;
        background-repeat:no-repeat;
        background-position: left top;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 44px 0px;


    }

    .salesform .banner {
        position: relative;
        width: 100%;
        display: none;
    }

    .salesform .banner img {
        position: relative;
        width: 100%;
    }

    .salesform .form {
        position: relative;
        width: 40%;
        padding: 8px;
       
        background-image: linear-gradient(to bottom ,transparent, rgb(255, 255, 255),rgb(255, 255, 255),transparent);

    }

    .salesform .form input,
    textarea {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding: 16px;
        margin-block-start: 24px;
        border: none;
        border-radius: 88px;
        border: dashed 2px rgb(52, 197, 197);
    }

    .form button {
        position: relative;
        width: fit-content;
        margin-block-start: 24px;
        padding: 16px 24px;
        border: none;
        background-color: black;
        color: white;
        border-radius: 32px;

    }

    .frequent-words{
        position: relative;
        display: flex;
        flex-wrap: wrap;
        flex-flow: dense;
        padding: 32px;
    }

    .frequent-words span{
        position: relative;
        padding: 16px 24px;
        border: solid 2px rgb(221, 220, 220);
        border-radius: 44px;
        margin: 8px;
    }

    footer{
        position: relative;
      
        overflow: hidden;
        background-color: whitesmoke;
    }

    footer .sticker{
        position: absolute;
       z-index: 0;
        padding: 0px;
        margin: 0px;
        
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        
    }

    footer .sticker span{
        position: relative;
        color: white;
        line-height: 1;
        font-weight: bold;
        font-size: 200px;
    }

    footer .footer{
        position: relative;
       
        padding: 44px 16px;
      
        
    }

    footer .footer .brand{
        position: relative;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        
        
    }
    footer .footer .brand p{
        font-size: 12px;
        text-align: center;
    }
    footer .footer .brand img{
        position: relative;
        display: block;
        width: 120px;
        }

        footer .footer .socials{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
        }

        footer .footer .socials a img{
            width: 40px;
            position: relative;
            display: block;
        }


  }
  
  /* ==========================================================================
     3. Laptops & Standard Desktops (Widths from 1024px and up)
     */
  /* @media screen and (min-width: 1024px) {
    .container {
      max-width: 960px;
      margin: 0 auto;
    }
  } */
  
  /* ==========================================================================
     4. Large Monitors / Ultra-wide (Widths from 1440px and up)
    */
  /* @media screen and (min-width: 1440px) {
    .container {
      max-width: 1340px;
    }
  } */