* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



/* =====================================
   MAKE IMAGES RESPONSIVE
===================================== */

        img{
                max-width:100%;
                height:auto;
        }




/* =====================================
   BODY
===================================== */

        body {
            font-family: Arial, sans-serif;
            color: white;
            min-height: 100vh;

            
            display: flex;
            flex-direction: column;

            background: radial-gradient(800px 600px at 85% 80%, rgba(255,255,255,0.35), transparent 50%),
                        radial-gradient(1500px 700px at 10% 20%, rgba(0,0,0,0.35), transparent 70%),
                        linear-gradient(135deg, #0a3d91, #00b4ff);
        }


/* =====================================
   HEADER
===================================== */

        .site-header {
                height: 50px;        
                display: flex;
                align-items: center; /* keeps logo centered vertically */
                background: linear-gradient( to bottom, rgba(0, 0, 0, 0.37),rgba(0, 0, 0, 0.32)); 
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px); 
                padding: 5px 20px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.25);
                border-radius: 8px;   
                margin: 2px;          
                box-shadow: 0 8px 25px rgba(0,0,0,0.35);  /* adds depth */
        } 

        .nav-bar {
                display: flex;
                align-items: center;
                justify-content: space-between; /* logo left, links right */
                width: 100%;
        }

        .nav-right{
                display: flex;
                align-items: center;
                gap: 18px;
                margin-left: auto;   /* pushes links + icon + flags to the far right */
        }


        /* =====================================
           LOGO CONTAINER
        ===================================== */

                .nav-logo {
                        display: flex;
                        align-items: center;
                }

                .nav-logo img {
                        height: 100px;
                        width: auto;
                        padding-top: 13px;
                }

        /* =====================================
           LINKS CONTAINER
        ===================================== */

                .nav-links {
                        order: 1;
                        display: flex;
                        align-items: center;
                        gap: 25px;
                }


        /* =====================================
           INDIVIDUAL LINKS STYLING
        ===================================== */

                .nav-links a {
                        color: #fffffff0;
                        text-decoration: none;
                        font-size: 20px;
                        font-family: 'Montserrat', sans-serif;
                        transition: color 0.2s ease, font-weight 0.2s ease, opacity 0.2s ease;
                        opacity: 0.85;
                        font-weight: 550;
                        text-shadow:
                                0 2px 4px rgba(0,0,0,0.45),
                                0 0 12px rgba(0,180,255,0.35);
                } 

                .nav-links a:hover {
                        text-decoration: none;
                        color: #fffffff0;
                        opacity: 1;
                }

        /* =====================================
           LANGUAGE SWITCHER
        ===================================== */

                .nav-lang{
                        display: flex;
                        align-items: center;
                        gap: 5px;
                        padding-left: 20px;
                }

                .nav-lang .lang{
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;

                        width: 28px;
                        height: 20px;

                        opacity: 0.75;
                        transition: transform 0.2s ease, opacity 0.2s ease;
                }

                .nav-lang .lang img{
                        width: 80%;
                        height: 80%;
                        object-fit: cover;
                        border-radius: 3px;
                        box-shadow: 0 2px 6px rgba(0,0,0,0.35);
                }

                .nav-lang .lang:hover{
                        opacity: 1;
                        transform: scale(1.08);
                }

        /* =====================================
           HAMBURGER BUTTON - hidden on desktop
        ===================================== */
       
                .menu-toggle{
                        display: none;
                        background: transparent;
                        border: none;
                        cursor: pointer;
                        padding: 0;
                }

                .menu-toggle span{
                        display: block;
                        width: 28px;
                        height: 15px;
                        margin: 5px 0;
                        background: rgba(255,255,255,0.95);
                        border-radius: 2px;
                }

                /* =====================================
                   TOP CONTROLS WRAPPER FOR MOBILE
                ===================================== */
                
                .nav-top-controls{
                        order: 2;
                        display: flex;
                        align-items: center;
                        gap: 10px;
                }



/* =====================================
   HOME CONTENT
===================================== */

        main {
                flex: 1;                 /* pushes footer to the bottom */
                text-align: center;
                padding: 30px 20px;
                font-family: Arial, sans-serif;
        }

        .main-image {
                display: flex;   
                width: auto;
                margin-top: 5px;
                margin-bottom: 10px;   
                justify-content: center;
        }

        .main-image img {
                width: auto;
                height: 400px;          
                object-fit: cover;      
                border-radius: 12px;    
                display: block;
        }

        .content {
                max-width: 1000px;
                margin: 0 auto;
                text-align: left;
        }

        .content h1 {
                font-size: 60px;
                text-align: center;
                margin-bottom: 70px;
                font-family: 'Montserrat', sans-serif;
                text-shadow: 0 8px 25px rgba(0,0,0,0.35); 
        }

        .content h2 {
                font-size: 30px;
                text-align: center;
                margin-bottom: 10px;
                font-family: 'Montserrat', sans-serif;
                text-shadow: 0 8px 25px rgba(0,0,0,0.35);
                text-align: center; 
        }

        .content p {
                font-size: 18px;
                line-height: 1.6;
                color: rgba(255,255,255,0.9);
                margin-bottom: 18px;
                text-shadow: 0 8px 25px rgba(0,0,0,0.35); 
                 font-family: 'Montserrat', sans-serif;
                text-align: justify; 
        }


        /* =====================================
           SHADOW BOXES / SERVICE CARDS
        ===================================== */

                .services {
                        max-width: 1100px;
                        margin: 40px auto 100px;
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 28px;
                        padding: 0 10px;
                }

                .service-card {
                        background: rgba(255,255,255,0.92); /* white card */
                        color: #1b1b1b;
                        border-radius: 14px;
                        padding: 34px 28px;
                        text-align: center;

                        box-shadow: 0 14px 30px rgba(0,0,0,0.18);
                        border: 1px solid rgba(0,0,0,0.05);

                        transition: transform 0.2s ease, box-shadow 0.2s ease;
                }

                .service-card:hover {
                        transform: translateY(-4px);
                        box-shadow: 0 18px 40px rgba(0,0,0,0.22);
                }

                .service-card h3 {
                        font-size: 35px;
                        margin-bottom: 18px;
                        color: #2a0c2a;

                        display: inline-block;   /* makes underline match text width */
                        position: relative;
                }

                .service-card h3::after {
                        content: "";
                        position: absolute;
                        left: 0;
                        bottom: -8px;
                        width: 100%;             
                        height: 2px;
                        background: rgba(0, 0, 0, 0.75);
                }

                .service-card p {
                        font-size: 14px;
                        line-height: 1.7;
                        color: rgba(0,0,0,0.62);
                        margin-bottom: 26px;
                }

                .service-btn {
                        display: inline-block;
                        padding: 12px 22px;
                        border: 1px solid rgba(42, 12, 42, 0.55);
                        border-radius: 2px;
                        text-decoration: none;
                        font-weight: 700;
                        letter-spacing: 1px;
                        font-size: 12px;
                        color: rgba(0, 0, 0, 0.75);
                        background: transparent;
                }

                .service-btn:hover {
                        background: rgba(42, 12, 42, 0.06);
                }



/* =====================================
   ABOUT (2 SECTIONS)
===================================== */

        .about-page { padding: 0; }

        .about-wrap{
                max-width: 1100px;
                margin: 0 auto;
                padding: 0 18px;
        }

        /* =====================================
           ABOUT - SECTION 1
        ===================================== */

                .about-featureboard{
                        padding: 90px 0 70px;
                }

                .about-row{
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 44px;
                        align-items: center;
                        margin-bottom: 70px;
                }

                .about-row--reverse .about-text{ order: 2; }
                .about-row--reverse .about-collage{ order: 1; }

                .about-text{
                        padding: 10px 0;
                        max-width: 520px;
                }

                .about-text h2{
                        font-family: 'Montserrat', sans-serif;
                        font-size: 32px;
                        margin-bottom: 12px;
                        color: rgba(255,255,255,0.95);
                        text-shadow: 0 8px 25px rgba(0,0,0,0.35);
                }

                .about-text p{
                        font-family: 'Montserrat', sans-serif;
                        font-size: 16px;
                        line-height: 1.7;
                        text-align: justify;
                        color: rgba(255,255,255,0.88);
                        text-shadow: 0 6px 20px rgba(0,0,0,0.25);
                }
   
                .about-collage{
                        position: relative;
                        height: 360px;
                }

                .about-img{
                        position: absolute;
                        border-radius: 18px;
                        object-fit: cover;
                        border: 1px solid rgba(255,255,255,0.14);
                        box-shadow: 0 22px 55px rgba(0,0,0,0.35);
                }

                /* LARGE IMAGE */

                        .about-img--big{
                                width: 85%;
                                height: 320px;
                                top: 0;
                                right: 0;
                                z-index: 1;
                        }

                /* SMALL OVERLAPPING IMAGE */

                        .about-img--small{
                                width: 45%;
                                height: 180px;
                                bottom: -20px;
                                left: 0;
                                z-index: 2;
                        }

                .about-row--reverse .about-img--big{
                        left: 0;
                        right: auto;
                }

                .about-row--reverse .about-img--small{
                        right: 0;
                        left: auto;
                }


                .about-collage--right .about-img--small{ left: 0; }
                .about-collage--left  .about-img--small{ right: 0; }

        /* =====================================
           ABOUT - SECTION 2
        ===================================== */

                .about-team{
                        padding: 80px 0 90px;
                        padding: 80px 0 90px;

                        background:
                                radial-gradient(800px 600px at 15% 20%, rgba(255,255,255,0.35), transparent 50%),
                                radial-gradient(1500px 700px at 90% 80%, rgba(0,0,0,0.35), transparent 70%),
                                linear-gradient(315deg, #0a3d91, #00b4ff);
                }

                .about-team-title{
                        text-align: center;
                        font-family: 'Montserrat', sans-serif;
                        font-size: 40px;
                        margin-bottom: 10px;
                        color: rgba(255,255,255,0.95);
                        text-shadow: 0 8px 25px rgba(0,0,0,0.35);
                }

                .about-team-sub{
                        text-align: center;
                        font-family: 'Montserrat', sans-serif;
                        color: rgba(255,255,255,0.86);
                        margin: 0 auto 36px;
                        max-width: 850px;
                        line-height: 1.7;
                }

                /* =====================================
                   TEAM GRID
                ===================================== */

                        .team-grid{
                                display: grid;
                                grid-template-columns: repeat(2, auto);
                                justify-content: center;                               
                                gap: 50px;
                        }

                        .team-card{
                                width: 200px;
                                background: rgba(255,255,255,0.08);
                                border: 1px solid rgba(255,255,255,0.18);
                                border-radius: 16px;
                                overflow: hidden;
                                backdrop-filter: blur(12px);
                                -webkit-backdrop-filter: blur(12px);
                                box-shadow: 0 18px 45px rgba(0,0,0,0.35);
                        }

                        .team-card img{
                                width: 100%;
                                height: 240px;                  
                                object-fit: cover;
                                object-position: top;           
                                display: block;
                        }

                        .team-meta{
                                padding: 16px;
                                text-align: center;
                                background: rgba(0,0,0,0.15);
                                border-top: 1px solid rgba(255,255,255,0.12);
                        }

                        .team-card h3{
                                font-family: 'Montserrat', sans-serif;
                                font-size: 18px;
                                margin: 12px 14px 2px;
                                color: rgba(255,255,255,0.95);
                                text-shadow: 0 8px 25px rgba(0,0,0,0.35);
                        }

                        .team-card p{
                                font-family: 'Montserrat', sans-serif;
                                font-size: 13px;
                                margin: 10px 14px 14px;
                                color: rgba(255,255,255,0.80);
                                text-shadow: 0 8px 25px rgba(0,0,0,0.35);
                        }

/* =====================================
   PRODUCTS
===================================== */

        .products-page { padding: 0; }

        .product-section {
                padding: 90px 20px;
                background: transparent;
        }

        .product-inner {
                max-width: 1000px;
                margin: 0 auto;
                text-align: center;
        }

        .product-section h1 {
                font-size: 52px;
                margin-bottom: 16px;
                font-family: 'Montserrat', sans-serif;
                text-shadow: 0 8px 25px rgba(0,0,0,0.35);
        }

        .product-section p {
                max-width: 900px;
                margin: 0 auto 24px;
                font-size: 20px;
                line-height: 1.6;
                color: rgba(255,255,255,0.92);
                text-shadow: 0 8px 25px rgba(0,0,0,0.35);
                font-family: 'Montserrat', sans-serif;
        }

        .product-points {
                max-width: 660px;
                margin: 0 auto;
                text-align: left;
                background: rgba(0,0,0,0.18);
                border: 1px solid rgba(255,255,255,0.14);
                border-radius: 14px;
                padding: 22px 22px;
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
        }

        .product-points ul {
                list-style: none;
                padding: 0;
                margin: 0;
        }

        .product-points li {
                padding: 10px 0;
                border-bottom: 1px solid rgba(255,255,255,0.10);
                color: rgba(255,255,255,0.92);
                font-family: 'Montserrat', sans-serif;
        }

        .product-points li:last-child {
                border-bottom: none;
        }

        /* =====================================
           MOBILE PARALLAX BACKGROUND LAYER
        ===================================== */

                .product-section--bg-image {
                        position: relative;
                        background-size: cover;
                        background-position: center;
                        background-repeat: no-repeat;
                        background-attachment: fixed;
                        overflow: hidden;
                }

                .product-section--bg-image::before {
                        content: "";
                        position: absolute;
                        inset: 0;
                        background: linear-gradient(135deg, rgba(10,61,145,0.45), rgba(0,0,0,0.65));
                        z-index: 1;
                }


                .product-section--bg-image > .product-inner {
                        position: relative;
                        z-index: 2;
                }

                .product-inner--glass {
                        background: rgba(0,0,0,0.22);
                        border: 1px solid rgba(255,255,255,0.14);
                        border-radius: 18px;
                        padding: 36px 22px;
                        backdrop-filter: blur(12px);
                        -webkit-backdrop-filter: blur(12px);
                        box-shadow: 0 22px 55px rgba(0,0,0,0.35);
                }





                .product-section--bg-image::after {
                        content: "";
                        position: absolute;
                        inset: -60px 0;

                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center center;

                        transform: translateY(var(--parallax-y, 0px));
                        will-change: transform;

                        z-index: 0;
                        pointer-events: none;

                        display: none;
                }

        /* =====================================
           DESKTOP SECTION BACKGROUND
        ===================================== */

                .product-section--image2 {
                        background-image: url("../images/Projects Background/Wind.jpg");
                }

                .product-section--image4 {
                        background-image: url("../images/Projects Background/Hybrid.png");
                }

                /* mobile moving background layer */
                        .product-section--image2::after {
                                background-image: url("../images/Projects Background/Wind.jpg");
                        }

                        .product-section--image4::after {
                                background-image: url("../images/Projects Background/Hybrid.png");
                        }

                /* overlay above image */

                        .product-section--bg-image::before {
                                z-index: 1;
                        }


                /* content above everything */

                        .product-section--bg-image > .product-inner {
                                position: relative;
                                z-index: 2;
                        }






/* =====================================
   PROJECTS
===================================== */

        .content_projects {
                max-width: 1000px;
                margin: 0 auto;
                text-align: left;
        }

        .content_projects h1 {
                font-size: 60px;
                text-align: center;
                margin-top: 60px;
                margin-bottom: 70px;
                color: rgba(255,255,255,0.9);
                font-family: 'Montserrat', sans-serif;
                text-shadow: 0 8px 25px rgba(0,0,0,0.35); 
        }

        
        .content_projects p {
                font-size: 25px;
                line-height: 1.6;
                color: rgba(255,255,255,0.9);
                margin-bottom: 18px;
                text-shadow: 0 8px 25px rgba(0,0,0,0.35); 
                font-family: 'Montserrat', sans-serif;
                text-align: center; 
        }




/* =====================================
   CONTACT
===================================== */

        .contact-page { padding: 0; }

        .contact-callback{
                padding: 90px 0 110px;
                background: transparent; /* keep your main site background */
        }

        .contact-callback-inner{
                max-width: 980px;
                margin: 0 auto;
                padding: 0 18px;
                text-align: center;
        }

        .contact-callback h1{
                font-family: 'Montserrat', sans-serif;
                font-size: 54px;
                margin-bottom: 10px;
                color: rgba(255,255,255,0.95);
                text-shadow: 0 8px 25px rgba(0,0,0,0.35);
        }

        .contact-callback-sub{
                max-width: 760px;
                margin: 0 auto 34px;
                font-family: 'Montserrat', sans-serif;
                color: rgba(255,255,255,0.86);
                text-shadow: 0 6px 18px rgba(0,0,0,0.25);
        }

        .contact-panel{
                text-align: left;
                max-width: 760px;
                margin: 0 auto;

                background: rgba(255,255,255,0.94);
                border-radius: 14px;
                padding: 28px 28px 26px;

                box-shadow: 0 24px 60px rgba(0,0,0,0.35);
                border: 1px solid rgba(255,255,255,0.35);
        }

        .contact-required-note{
                margin: 0 0 18px;
                font-size: 12px;
                color: rgba(0,0,0,0.55);
                font-family: 'Montserrat', sans-serif;
        }

        .contact-required-note span{
                color: rgba(0,180,255,1);
                font-weight: 700;
        }

        .callback-form .field{
                margin-bottom: 16px;
        }

        .callback-form label{
                display: block;
                font-family: 'Montserrat', sans-serif;
                font-weight: 700;
                letter-spacing: 1px;
                font-size: 12px;
                color: rgba(0,0,0,0.65);
                margin-bottom: 8px;
                text-transform: uppercase;
        }

        .callback-form label span{
                color: rgba(0,180,255,1);
                font-weight: 800;
        }

        .callback-form input,
        .callback-form textarea{
                width: 100%;
                padding: 12px 12px;

                border-radius: 4px; /* screenshot-style */
                border: 1px solid rgba(0,0,0,0.45);
                background: rgba(255,255,255,1);

                font-family: 'Montserrat', sans-serif;
                font-size: 14px;
                color: rgba(0,0,0,0.80);

                outline: none;
        }

        .callback-form textarea{
                resize: vertical;
                min-height: 180px;
        }

        .callback-form input:focus,
        .callback-form textarea:focus{
                border-color: rgba(0,180,255,0.95);
                box-shadow: 0 0 0 3px rgba(0,180,255,0.20);
        }

        .callback-btn{
                width: 100%;
                margin-top: 10px;

                padding: 14px 16px;
                border-radius: 10px;
                border: 1px solid rgba(255,255,255,0.18);

                background: rgba(0,0,0,0.18);
                color: rgba(255,255,255,0.95);

                font-family: 'Montserrat', sans-serif;
                font-weight: 800;
                letter-spacing: 2px;
                cursor: pointer;

                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                box-shadow: 0 18px 45px rgba(0,0,0,0.25);
        }

        .callback-btn:hover{
                background: rgba(0,0,0,0.26);
        }



/* =====================================
   FOOTER
===================================== */

        footer {
                text-align: center;
                padding: 22px 20px;
                font-family: Arial, sans-serif;
                font-size: 13px;
                letter-spacing: 3px;
                color: rgba(255,255,255,0.95);
                background: rgba(0, 0, 0, 0.45);   /* Dark transparent layer */
                border-top: 1px solid rgba(255,255,255,0.12);    /* Slight separation */
                text-shadow:
                        0 2px 4px rgba(0,0,0,0.45),
                        0 0 12px rgba(0,180,255,0.35);  
        }


        html {
        scroll-behavior: smooth;
        }



/* =====================================
   TABLET RESPONSIVE
===================================== */


/* =====================================
   MOBILE NAVIGATION + MOBILE LAYOUT
===================================== */

        @media (max-width: 768px) {
                .site-header {
                        padding: 4px 8px;
                        margin: 2px;
                        border-radius: 6px;
                        position: relative;
                        z-index: 3000;
                }

                .nav-bar {
                display: flex;
                        align-items: center;
                        justify-content: space-between;
                        position: relative;
                        z-index: 3001;
                }

                .nav-logo {
                        grid-area: logo;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        line-height: 0;
                        z-index: 3002;
                }

                .nav-logo img {
                        height: 100px;
                        width: auto;
                        padding-top: 8px;
                        padding-bottom: 0;
                        margin: 0;
                        display: block;
                }

                .nav-right {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        margin-left: auto;
                        position: static;
                        z-index: 3002;
                }

                .nav-top-controls {
                        grid-area: controls;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        gap: 8px;
                        margin: 0;
                        padding: 0;
                        line-height: 1;
                        z-index: 3003;
                }

                .nav-lang {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        padding: 0;
                        margin: 0;
                        line-height: 1;
                }

                .nav-lang .lang {
                        width: 24px;
                        height: 18px;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                }

                .nav-lang .lang img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                }

                .menu-toggle {
                        display: block;
                        flex-shrink: 0;
                        padding: 0 12px;
                        margin: 0;
                        background: transparent;
                        border: none;
                        cursor: pointer;
                        line-height: 1;
                        z-index: 3004;
                }

                .menu-toggle span {
                        display: block;
                        width: 42px;
                        height: 5px;
                        margin: 6px 0;
                        background: rgba(255,255,255,0.95);
                        border-radius: 2px;
                        transition: transform 0.25s ease, opacity 0.25s ease;
                }

                /* transform hamburger into X */

                        .menu-toggle.active span:nth-child(1) {
                                transform: translateY(11px) rotate(45deg);
                        }

                        .menu-toggle.active span:nth-child(2) {
                                opacity: 0;
                        }

                        .menu-toggle.active span:nth-child(3) {
                                transform: translateY(-11px) rotate(-45deg);
                        }

                .nav-links {
                        display: none;
                        position: absolute;
                        top: calc(100% - 12px);
                        left: 0;
                        right: 0;
                        width: 100%;

                        flex-direction: column;
                        align-items: flex-start;
                        gap: 10px;
                        padding: 16px;

                        background: linear-gradient(
                                to bottom,
                                #143567 0%,
                                #1a3f78 25%,
                                #133666 100%
                                        );
                        backdrop-filter: blur(14px);
                        -webkit-backdrop-filter: blur(14px);

                        border-top: none;
                        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
                        border-left: 1px solid rgba(255, 255, 255, 0.12);
                        border-right: 1px solid rgba(255, 255, 255, 0.12);
                        border-radius: 8px;
                        margin-top: -4px;

                        box-shadow: 0 8px 25px rgba(0,0,0,0.35);
                        z-index: 4000;
                        box-sizing: border-box;
                }

                .nav-links.active {
                        display: flex;
                }

                .nav-links a {
                        font-size: 26px;
                        font-weight: 600;
                        line-height: 1.4;
                        text-align: left;
                        width: 100%;
                        padding: 2px 0;
                        color: #fffffff0;
                        text-decoration: none;
                        text-shadow:
                                0 2px 4px rgba(0,0,0,0.45),
                                0 0 12px rgba(0,180,255,0.35);
                }

                .content h2 {
                        font-size: 24px;
                }

                .content p,
                .about-text p,
                .contact-callback-sub,
                .product-section p,
                .content_projects p {
                        font-size: 16px;
                        line-height: 1.6;
                }

                .services {
                        grid-template-columns: 1fr;
                }

                .team-grid {
                        grid-template-columns: 1fr;
                }

                .team-card {
                        width: 100%;
                        max-width: 280px;
                        margin: 0 auto;
                }


                /* ABOUT COLLAGE — KEEP OVERLAP ON MOBILE */

                        .about-row {
                                grid-template-columns: 1fr;
                                gap: 40px;
                        }


                /* cancel desktop reverse ordering */

                        .about-row--reverse .about-text{
                                order: 0;
                        }

                        .about-row--reverse .about-collage{
                                order: 0;
                        }

                .about-collage{
                        position: relative;
                        height: 280px;
                        margin-top: 10px;
                }

                .about-img{
                        position: absolute;
                        border-radius: 18px;
                        object-fit: cover;
                        border: 1px solid rgba(255,255,255,0.14);
                        box-shadow: 0 18px 40px rgba(0,0,0,0.35);
                }

                .about-img--big{
                        width: 85%;
                        height: 220px;
                        top: 0;
                        right: 0;
                }

                .about-img--small{
                        width: 55%;
                        height: 140px;
                        bottom: -10px;
                        left: 0;
                }

                .service-card {
                        padding: 24px 18px;
                }

                .service-card h3 {
                        font-size: 28px;
                }

                .product-section {
                        padding: 60px 14px;
                }

                .product-section--bg-image {
                        background-image: none !important;
                        background-attachment: scroll;
                }

                .product-section--bg-image::after {
                        display: block;
                }

                .about-featureboard,
                .about-team,
                .contact-callback {
                        padding: 50px 0;
                }

                .contact-panel {
                        padding: 20px;
                }

                footer {
                        font-size: 11px;
                        letter-spacing: 1.5px;
                        padding: 16px 10px;
                }
                }

/* =====================================
   SMALL PHONES
===================================== */