@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



a {

    text-decoration: none;

    color: inherit

}



:root {

    --copri: #092A6F;



    --cosec: #0087CB;

    --cosuc: #6bc27e;

    --cosucsha: #54a173;



    --h1: 48.83px;

    --h2: 39.06px;

    --h3: 31.25px;

    --h4: 25.00px;

    --h5: 20.00px;

    --h6: 16.00px;

    --p:  16.00px;

    --h7: 12.80px;

    --h8: 10.24px;



    --font-primary: 'Poppins', sans-serif;

}



@media screen and (min-width: 1240px){

    :root {

        --h1: 58.00px;

        --h2: 48.83px;

        --h3: 39.06px;

        --h4: 31.25px;

        --h5: 25.00px;

        --h6: 20.00px;

        --p:  20.00px;

        --h7: 16.00px;

        --h8: 12.80px;

    }  

}





html, body {

    background: #012269;

    font-family: var(--font-primary);

    font-weight: 400;

    line-height: 1.6;

    color: #57585A;

    height: 100%;

}



h1 { font-size: var(--h1); }

h2 { font-size: var(--h2); }

h3 { font-size: var(--h3); }

h4 { font-size: var(--h4); }

h5 { font-size: var(--h5); }

h6 { font-size: var(--h6); }



h1, h2 {

    margin-block-start: 0;

    margin-block-end: 0;

}



.h1 { font-size: var(--h1); }

.h2 { font-size: var(--h2); }

.h3 { font-size: var(--h3); }

.h4 { font-size: var(--h4); }

.h5 { font-size: var(--h5); }

.h6 { font-size: var(--h6); }

.h7 { font-size: var(--h7); }



small, .text_small {font-size: 0.8rem;}



.c-white { color: white; }

.c-grey { color: #F6F6F6;}

.c-primary { color: var(--copri) }

.c-secondary { color: var(--cosec) }



.bg-white { background-color: #fff; }

.bg-dark { background-color: #1D1C2C;}

.bg-grey { background-color: #F6F6F6; }

.bg-primary { background-color: var(--copri);}

.bg-secondary { background-color:  var(--cosec);}



.b100 { font-weight: 100;}

.b200 { font-weight: 200;}

.b300 { font-weight: 300;}

.b400 { font-weight: 400;}

.b500 { font-weight: 500;}

.b600 { font-weight: 600;}

.b700 { font-weight: 700;}

.b800 { font-weight: 800;}

.b900 { font-weight: 900;}



button { font-family: var(--font-primary); }



.center {

    display: flex;

    justify-content: center;

    align-items: center;

}



/* Frame */



    .box {

        border: 1px rgba(0, 0, 0, 0) solid;

        max-width: 100%;

        margin: 0 1.5rem;

        }

        .wrp {

            max-width: 370px;

            margin: 4rem auto;

            }

            .grid1 {

                display: grid;

                grid-template-columns: 1fr;

                grid-template-rows: 1fr auto;

                gap: 1.8rem;

                grid-template-areas: 

                "sidebox1"

                "sidebox2";

                }

                .bnr .grid1 .sidebox1 { grid-area: sidebox1; }

                .bnr .grid1 .sidebox2 { grid-area: sidebox2; }

                

            .grid2 {

                display: grid; 

                grid-template-columns: 1fr ; 

                grid-template-rows: auto 1fr 1fr 1fr; 

                gap: 2.5rem ; 

                grid-template-areas: 

                    "title"

                    "."

                    "."

                    "."; 

                }

                .grid2 .title { grid-area: title; }

                .grid2 .item {

                    display: grid;

                    grid-template-columns: 1fr;

                    grid-template-rows: auto auto 1fr auto;

                    gap: 1rem;

                }

            .grid3 {

                display: flex;

                flex-direction: column;

                gap: 2rem;

            }

            .grid4 {

                display: grid;

                grid-template-columns: 1fr;

                gap: 2rem 4rem;

            }

            .grid5 {

                display: grid; 

                grid-template-columns: 1fr; 

                grid-template-rows: auto 1fr; 

                gap: 1rem; 

                grid-template-areas: 

                  "title"

                  "image"; 

                }

                .grid5 .title { grid-area: title; }

                .grid5 .image {

                    justify-self: center; 

                    align-self: center; 

                    grid-area: image; 

                }

                .grid5 .image img {

                    max-width: 100%;

                }

            .grid6 {

                display: grid;

                grid-template-columns: 1fr;

                gap: 2rem 4rem;

            }

            .grid7 {

                display: grid;

                grid-template-columns: repeat(3, 1fr);

            }

            .grid7 img {

                display: block;

                width: 100%;

            }

            .grid8 {

                display: grid;

                grid-template-columns: repeat(4, 1fr);

            }

            .grid8 img {

                display: block;

                width: 100%;

            }



    .bnr .bnr-title h1 {

        font-weight: 600;

        font-size: var(--h3);

        line-height: var(--h2);

        }

    .bnr .bnr-image img {

        max-width: 100%;

        display: block;

    }

    .bnr .bnr-content {

        display: flex;

        flex-direction: column;

        gap: 1.5rem;

    }

    .bnr .bnr-content .description p {

        margin-bottom: 1rem;

    }

    .bnr .bnr-content .description p:last-child {

        margin-bottom: 0;

    }



    @media screen and (min-width: 520px) {

            .grid2 {

                display: grid; 

                grid-template-columns: 1fr 1fr; 

                grid-template-rows: 1fr 1fr 1fr; 

                gap: 1.5rem ; 

                grid-template-areas: 

                    "title title"

                    ". ."

                    ". ."; 

                }

                .grid2 .description p br {

                    display: none;

                }

                .grid4 {

                    display: grid;

                    grid-template-columns: 1fr 1fr;

                    gap: 2rem 4rem;

                }

                .grid6 {

                    display: grid;

                    grid-template-columns: 1fr 1fr 1fr;

                    gap: 2rem 4rem;

                }

    }



    @media screen and (min-width: 768px){

        .box {

            margin: 0 4rem;

            }

            .wrp {

                padding: 0rem;

                max-width: 768px;

                margin-right: auto;

                margin-left: auto;

                }

                .grid1 {

                    display: grid;

                    grid-template-columns: 1fr 1fr;

                    grid-template-rows: 1fr;

                    gap: 1.8rem;

                    grid-template-areas: 

                    "sidebox1 sidebox2";

                    }

                    .bnr .grid1 .sidebox1 { grid-area: sidebox1; }

                    .bnr .grid1 .sidebox2 { grid-area: sidebox2; }

        

    }



    @media screen and (min-width: 1240px){

        .box {

            max-width: 100%;

            }

            .wrp {

                max-width: 1120px;

                }

                .grid1 {

                    display: grid;

                    grid-template-columns: 1fr 1fr;

                    grid-template-rows: 1fr;

                    gap: 60px;

                    }

                .grid2 {

                    display: grid; 

                    grid-template-columns: 1fr 1fr 1fr; 

                    grid-template-rows:  1fr 1fr; 

                    gap: 3rem; 

                    grid-template-areas: 

                        ". . ."

                        ". . ."; 

                    }

                    .grid2 .title { grid-area: title; }

    }



/* General Styles */



.img-cover {

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    position: relative;

}



.btn {

    display: inline-block;

    height: 40px;

    line-height: 40px;

    padding: 0 1.2rem;

    text-decoration: none;

    font-size: var(--h7);

    font-weight: 600;

    }

    .btn i {

        margin-left: 0.5rem;

    }

    .btn-primary {

        background-color: var(--copri);

        color: white;

    }

    .btn-succes {

        background-color: var(--cosuc);

        color: white;

    }

    

@media screen and (min-width: 1240px){

    .btn {

        height: 54px;

        line-height: 54px;

        padding: 0 2rem;

    }

}



.collapsible {

    cursor: pointer;

    padding: 18px 30px;

    width: 100%;

    border: none;

    text-align: left;

    outline: none;

    font-size: 15px;

    transition: 0.4s;

    border: #d3d3d3 1px solid;

    }

    .collapsible {

        display: flex;

        flex-direction: row;

        justify-content: space-between;

    }

    .collapsible i {

        margin-top: 0.2rem;

        font-size: var(--h6);

    }

    .coll-texts {

        padding: 0 0.2rem;

        max-height: 0;

        overflow: hidden;

        transition: max-height 0.2s ease-out;

    }



/* HEADER */

#header {

    position: fixed;

    top: 0;

    z-index: 100;

    width: 100%;

    background: white;

    padding: 0.5rem;

    border-bottom: 1px rgba(0, 0, 0, 0.15) solid;

    }

    .container {

        margin-top: auto;

    }

    #header .wrp {

        margin-top: 1rem;

        margin-bottom: 1rem;

    }



#header .grid {

    display: grid;

    grid-template-columns: auto 1fr; 

    grid-template-rows: 1fr; 

    gap: 0px 0px;

    }

    .menubtn {

        align-self: center; 

        grid-area: 1 / 1 / 2 / 2; 

    }

    .logo {

        justify-self: center; 

        align-self: center; 

        grid-area: 1 / 1 / 2 / 3; 

    }

    .logo-large {

        display: none;

    }



#header .menubtn {

    margin-bottom: -6px;

}

#header img {

    height: 27px;

    display: block;

}



#header .menu {

    display: none;

}



#header .menu ul {

    list-style-type: none;

    font-size: var(--h7);

}



@media screen and (max-width: 1240px) {

    #header .menuOpen {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows: 1fr auto;

        position: fixed;

        top: 0;

        left: 0;

        z-index: 101;

        width: 100%;

        height: 100%;

        background-color: rgba(9, 41, 111, 0.95);

        color: rgba(255, 255, 255, 0.95);

        padding: 2.5rem;

        font-weight: 600;

    }

    #header .menuOpen > ul {

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }

    #header .menuOpen > ul li {

        font-size: var(--h3);

        margin-bottom: 2.5rem;

    }

    #header .btn-close {

        display: flex;

        justify-content: center;

        align-items: center;

    }

    #header .btn-close .icon-close {

        display: flex;

        background-color: rgba(255, 255, 255, 0.9);

        color: var(--copri);

        height: 44px;

        width: 44px;

        border-radius: 44px;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: var(--h4);

        cursor: pointer;

    }

    #header .btn-close .icon-close:hover {

        background-color: rgba(255, 255, 255, 0.5);

    }

    #header .menuOpen a:hover {

        color: rgba(255, 255, 255, 0.5);

    }

}



@media screen and (min-width: 1240px){

    #header .grid {

        display: grid; 

        grid-template-columns: auto 1fr; 

        grid-template-rows: 1fr; 

        gap: 0px 0px; 

        grid-template-areas: 

          "logo menu"; 

        }

        #header .logo {

            justify-self: start; 

            align-self: center; 

            grid-area: logo; 

        }

        #header .menu {

            justify-self: end; 

            align-self: center; 

            grid-area: menu; 

        }



    #header .menubtn {

        display: none;

    }

    #header .btn-close {

        display: none;

    }

    #header .logo-small {

        display: none;

    }

    #header .logo-large {

        display: inherit;

    }

    #header img {

        height: 54px;

    }

    #header .menu {

        display: block;

    }

    #header .menu ul {

        display: flex;

        flex-direction: row;

        gap: 2rem;

    }

    #header .menu ul li {

        font-weight: 600;

    }
    
    #header .active {

        color: red;

    }



    @media screen and (min-width: 1240px) {

        #header .active {

            color: var(--copri);

        }

    }

}



main {

    margin-top: 76px;

}

@media screen and (min-width: 1240px){

    main {

        margin-top: 104px;

    } 

}



/* --- BANNER MAIN --- */



/* slider */

.slider-container {

    position: relative;

    overflow: hidden;

    }

    .slider {

        display: flex;

        transition: transform 0.5s ease-in-out;

        }

        .slide {

            flex: 0 0 100%;

            background-color: #f2f2f2;

            display: flex;

            justify-content: center;

            align-items: center;

            background-color: var(--copri);

            }

  

            .slider-btn {

                position: absolute;

                top: 50%;

                transform: translateY(-50%);

                width: 40px;

                height: 40px;

                background-color: transparent;

                border: none;

                color: white;

                font-size: 24px;

                cursor: pointer;

                z-index: 2;

                }

                .slider-btn-left {

                    left: 10px;

                    }

                .slider-btn-right {

                    right: 10px;

                    }



/* banner */

.bnr1 {

    color: white;

    width: 100%;

    }

    .bnr1 .sidebox2 {

        display: flex;

        align-items: center;

    }

    .bnr1 .image {

        align-self: center; 

        grid-area: image; 

        }             

    .bnr1 .image {

        display: flex;

        justify-content: center;

        align-items: center;

        }

        .bnr1 .image img {

            max-height: 270px;

            max-width: 300px;

        }



    .bnr1 .bnr-title > h1 {

        font-size: var(--h2);

        line-height: var(--h1);

    }

    

    .bnr1 .description p {

        margin-bottom: 0;

        letter-spacing: 0.02em;

        font-size: var(--h6);

        font-weight: 300;

    }

    .bnr1 .objets {

        display: flex;

        flex-direction: row;

        align-items: center;

        gap: 1rem;

    }

    .bnr .list {

        display: grid;

        grid-template-columns: auto 1fr;

        gap: 1rem 1.2rem;

    }

    .bnr .list .item {

        display: grid;

        grid-template-columns: auto 1fr;

        gap: 0.6rem;

    }

    .bnr .list .item .icon {

        font-size: var(--h7);

        color: var(--cosuc);

        margin-top: 0.3rem;

    }

    .bnr .list .item .label {

        font-size: var(--p);

    }

    @media screen and (max-width: 768px) {

        .bnr1 .bnr-title > h1,

        .bnr1 .description > p {

            text-align: center;

        }

        .bnr1 .objets {

            justify-content: center;

        }

    }



@media screen and (min-width: 1240px) {

        .bnr1 .grid {

            display: grid; 

            grid-template-columns: 1fr 1fr; 

            grid-template-rows: 1fr; 

            gap: 0px 80px; 

            grid-template-areas: 

                "image sidebox"; 

            }

            .bnr1 .image {

                justify-self: end; 

                align-self: center; 

                grid-area: image; 

            }

            .bnr1 .image {

                width: inherit;

            }

            .bnr1 .image img {

                max-height: inherit;

                max-width: inherit;

            }

            .bnr1 .title > * {

                line-height: 4rem;

                font-size: var(--h1);

            }

}



/* Banner DMC */

.bnr-dmc .sidebox1{

    display: flex;

    flex-direction: column;

    gap: 1.6rem;

    }

    .card1 {

        height: 100%;

        padding: 1.6rem;

        }

        .card1-grid {

            display: flex;

            flex-direction: column;

            gap: 2rem;

            }

            .card1-grid .icon span {

                background-color: #0087CB;

                color: white;

                width: 33px;

                height: 33px;

                display: flex;

                justify-content: center;

                align-items: center;

                font-size: 20px;

                margin-top: 0.5rem;

            }

            .card1-grid .item {

                display: flex;

                flex-direction: row;

                gap: 2rem;

                }

                .card1-grid .item .tag {

                    display: flex;

                    flex-direction: column;

                    gap: 0rem;

                }

                .card1-grid .item .tag span:first-child {

                    font-size: var(--h8);

                }

                .card1-grid .item .tag span:last-child {

                    font-size: var(--h6);

                }

    @media screen and (min-width: 1240px) { 

        .card1 {

            height: 100%;

            padding: 3rem;

            }

    }



.bnr4 .wrp {

    margin: 2.4rem auto;

    }

    .bnr4 .sidebox2 {

        display: flex;

        justify-content: start;

        align-items: center;

        }

        .bnr4 img {

            max-width: 100%;

            }

    .bnr4 .sidebox2 h1 {

        text-align: center;

        font-weight: 300;

        line-height: 3.2rem;

        font-size: var(--h2);

        }

        .bnr4 .sidebox2 h1 br {

            display: none;

        }

    @media screen and (min-width: 1240px) {

        .bnr4 .wrp {

            margin: 0rem auto;

            }

            .bnr4 .grid1 {

                grid-template-columns: auto 1fr;

            }

            .bnr4 .grid1 .sidebox1 {

                max-width: 600px;

            }

            .bnr4 .grid1 .sidebox2 h1 {

                font-size: var(--h1);

                line-height: 4.6rem;

            }

            .bnr4 .grid1 .sidebox2 h1 br {

                display: inherit;

            }

    }



/* Banner 5 - What We Do */

.bnr5 .bnr-title {

    display: flex;

    justify-content: center;

    }

    .bnr5 .item .picture  {

        margin-bottom: 0.4rem;

    }

    .bnr5 .item .picture img {

        width: 100%;

    }

    .bnr5 .item .name {

        display: flex;

        justify-content: center;

        margin: 0 1rem;

        line-height: 18px;

    }

    .bnr5 .item .name > * {

        font-size: var(--h5);

    }

    .bnr5 .item .description p { 

        text-align: center;

        margin: 0 1rem 0.5rem;

        font: var(--h6);

    }

    .bnr5 .item .description p br {

        display: none;

    }

    .bnr5 .item .actions {

        display: flex;

        justify-content: center;

        margin: 0 1rem 1.6rem;

    }

    @media screen and (min-width: 1240px) {



    }



/* Banner 6 - Portfolio */

.bnr6 .title {

    font-size: var(--h5);

    color: white;

    font-weight: 200;

    line-height: 1rem;

}

.bnr6 .subtitle {

    color: white;

    font-size: var(--h3);

    font-weight: 600;

}



.bnr6 img {

    display: block;

    max-width: 100%;

}



/* banner 7 */

.bnr7 {

    background-color: white;

    }

            .bnr7 .sidebox1 {

                display: flex;

                flex-direction: column;

                justify-content: flex-end;

                gap: 1rem;

                }

            .bnr7 .sidebox2 {

                display: flex;

                justify-content: center;

            }



                .bnr7 .counters {

                    display: grid;

                    grid-template-columns: 1fr 1fr 1fr;

                    gap: 1rem;

                    margin: 1rem 0 1.6rem 0;

                }

                .bnr7 .counters .counts {

                    display: flex;

                    flex-direction: column;

                }

                .bnr7 .counters .counts .number {

                    font-size: var(--h3);

                }

                .bnr7 .counters .counts .label {

                    font-size: var(--h7);

                }



                .bnr7 .objets {

                    display: flex;

                    flex-direction: row;

                    align-items: center;

                    gap: 1.2rem;

                }

                .bnr7 .list {

                    display: grid;

                    grid-template-columns: auto 1fr;

                    gap: 1rem 2.4rem;

                }

                .bnr7 .list .item {

                    display: grid;

                    grid-template-columns: auto 1fr;

                    gap: 0.6rem;

                }

                .bnr7 .list .item .icon {

                    font-size: var(--h7);

                    color: var(--cosuc);

                    margin-top: 0.3rem;

                }

                .bnr7 .list .item .label {

                    font-size: var(--p);

                }

@media screen and (min-width: 1240px) { 

            .bnr7 img {

                max-width: 100%;

                display: block;

                }

            .bnr7 .counters .counts .number {

                font-size: var(--h3);

            }

}

@media screen and (min-width: 1440px) {

        .bnr7 .grid1 {

            gap: 80px;

        }

}



/* Banner Pixelart - 8 */

.bnr8 img {

    max-width: 100%;

    display: block;

}



.bnr8 .sidebox2 {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



/* Banner Mision - Vision - 9 */

.bnr9 .wrp {

    margin-top: 0;

}

.bnr9 .wrp > div {

    padding: 1rem;

}

.bnr9 .item {

    max-width: 752px;

    margin: auto;

}



.bnr9 .item:first-child .coll-texts p {

    margin-top: 1rem;

    margin-bottom: 1rem;

}

.bnr9 .item:last-child .coll-texts p {

    margin-top: 1rem;

    margin-bottom: 0rem;

}



.bnr-maintitle .wrp {

    margin: 0.5rem auto;

}



/* FOOTER */



.bnr-footer ul {

    list-style: none;

    }

    .bnr-footer .grid {

        display: grid;

        grid-template-rows: auto auto auto;

        gap: 3rem;

        }

        .bnr-footer .social .list {

            display: flex;

            flex-direction: row;

            gap: 1rem;

            }

            .bnr-footer .social .list li {

                border-radius: 6px;

                background-color: rgba(255, 255, 255, 0.2);

                height: 36px;

                width: 36px;

                display: flex;

                justify-content: center;

                align-items: center;

                }

                .bnr-footer .grid .title {

                    color: white;

                    font-size: var(--h5);

                    margin-bottom: 2.4rem;

                    font-weight: 600;

                }

            .bnr-footer .maceus ul,

            .bnr-footer .contactus ul {

                display: flex;

                flex-direction: column;

                gap: 1.5rem;

            }

    .bnr-foot .wrp {

        margin: 1.2rem auto;

        }

        .bnr-foot .grid{ 

            display: flex;

            justify-content: center;

            font-size: var(--h7);

            }

    @media screen and (min-width: 768px) {

        .bnr-footer .grid {

            display: grid;

            grid-template-columns: 1fr 1fr 1fr;

            grid-template-rows: 1fr;

            gap: 3rem;

        }

        .bnr-footer .grid .title { font-size: var(--h6); }

    }