head {
    max-width: 1536px;
}

@media (min-width: 448px) {
    body {
        display: grid;
        grid-template-columns: 448px;
        grid-template-rows: repeat(12, 100px);
        gap: 9px;
        background: linear-gradient(1deg, #000046 0%, rgb(46, 184, 205) 100%);
        border-color: #ffffff;
        border-width: 0px;
        min-width: 448px;
    }
}

@media (min-width:360px) and (max-width:447px) {
    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(12, 100px);
        gap: 9px;
        background: linear-gradient(1deg, #000046 0%, rgb(46, 184, 205) 100%);
        border-color: #ffffff;
        border-width: 0px;
        min-width: 448px;
    }
}

@media (min-width:480px) {
    body {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(30, 100px);
        gap: 9px;
    }
}

@media (min-width: 640px) {
    body {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(30, 100px);
        gap: 9px;
    }
}

@media (min-width: 768px) {
    body {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(30, 100px);
        gap: 9px;
    }
}

@media (min-width: 1024px) {
    body {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(15, 100px);
        gap: 9px;
    }
}

@media (min-width: 1280px) {
    body {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(14, 100px);
        gap: 9px;
        background: linear-gradient(1deg,#000046 0%,#1CB5E0 100%);
        border-color: #ffffff;
        border-width: 20px;
    }
}

@media (min-width: 1536px) {
    body {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(15, 100px);
        gap: 9px;
        background: linear-gradient(1deg,#000046 0%,#1CB5E0 100%);
    }
}

@media (min-width: 1536px) {
    .introvideo {
        grid-area: 1 / 1 / 9 / 4;
    }
}

@media (min-width: 1280px) {
}

@media (min-width:360px) and (max-width:447px) {
    .introvideo {
        grid-area: 1 / 1 / 4 / 2;
        padding-right: 0px;
        margin-right: 55px;
    }
}

@media (min-width: 448px) {
    .introvideo {
        grid-area: 1 / 1 / 4 / 2;
    }
}

@media (min-width: 1280px) {
    .introvideo {
        grid-area: 1 / 1 / 8 / 4;
    }
}

@media (min-width:360px) and (max-width:447px) {
    .h1threeD {
        font-family: 'Poppins', sans-serif;
        text-align: center;
        font-size: 20px;
        color: #bde9ff;
        font-weight: 700;
        margin-top: 0;
        padding-top: 60px;
        grid-area: 3 / 1 / 4 / 1;
        padding-left: 0px;
        padding-right: 48px;
    }
}

@media (min-width: 448px) {
    .h1threeD {
        font-family: 'Poppins', sans-serif;
        text-align: center;
        font-size: 23px;
        color: #bde9ff;
        font-weight: 700;
        margin-top: -33px;
        padding-top: 0px;
        grid-area: 4 / 1 / 5 / 1;
    }
}

@media (min-width: 1280px) {
    .h1threeD {
        font-family: 'Poppins', sans-serif;
        text-align: center;
        font-size: 50px;
        color: #bde9eb;
        font-weight: 700;
        margin-top: 0;
        padding-top: 0;
        grid-area: 8 / 1 / 9 / 4;
    }
}

@media (min-width: 1536px) {
    .h1threeD {
        font-family: 'Poppins', sans-serif;
        text-align: center;
        font-size: 50px;
        color: #bde9ff;
        font-weight: 700;
        margin-top: -45px;
        padding-top: -36px;
        grid-area: 10 / 1 / 11 / 4;
    }
}

@media (min-width:360px) and (max-width:447px) {
    .examplesimg {
        grid-area: 7 / 1 / 8 / 2;
        padding-left: 95px;
    }
}

@media (min-width:448px) {
    .examplesimg {
        grid-area: 7 / 1 / 8 / 2;
        padding-left: 120px;
    }
}

@media (min-width: 1280px) {
    .examplesimg {
        grid-area: 13 / 1 / 14 / 2;
        padding-left: 106px;
        margin-top: -23px;
    }
}

@media (min-width: 1536px) {
    .examplesimg {
        grid-area: 14 / 1 / 15 / 2;
        padding-left: 38px;
        margin-top: 1px;
    }
}

@media (min-width: 448px) {
    .aboutimg {
        grid-area: 11 / 1 / 15 / 2;
        padding-left: 120px;
    }
}

@media (min-width:360px) and (max-width:447px) {
    .aboutimg {
        grid-area: 11 / 1 / 15 / 2;
        padding-left: 95px;
    }
}

@media (min-width: 1280px) {
    .aboutimg {
        grid-area: 13 / 3 / 15 / 4;
        padding-left: 103px;
        margin-top: -23px;
    }
}

@media (min-width: 1536px) {
    .aboutimg {
        grid-area: 14 / 3 / 15 / 4;
        padding-left: 145px;
        margin-top: 1px;
    }
}

@media (min-width: 448px) {
    .fullportimg {
        grid-area: 09/ 1/10 / 2;
        padding-left: 120px;
    }
}

@media (min-width:360px) and (max-width:447px) {
    .fullportimg {
        grid-area: 09/ 1/10 / 2;
        padding-left: 95px;
    }
}

@media (min-width: 1280px) {
    .fullportimg {
        grid-area: 13 / 2 / 14 / 3;
        padding-left: 100px;
        margin-top: -23px;
    }
}

@media (min-width: 1536px) {
    .fullportimg {
        grid-area: 14 / 2 / 15 / 3;
        padding-left: 145px;
        margin-top: 1px;
    }
}

@media (min-width: 448px) {
    .portfoliolink {
        grid-area: 9 / 1 / 10 / 2;
        margin-top: 10px;
    }
}

@media (min-width:360px) and (max-width:447px) {
    .portfoliolink {
        grid-area: 9 / 1 / 10 / 2;
        margin-top: 10px;
    }
}

@media (min-width: 1280px) {
    .portfoliolink {
        grid-area: 13 / 2 / 14 / 3;
        margin-top: 10px;
    }
}

@media (min-width: 1536px) {
    .portfoliolink {
        grid-area: 14 / 2 / 15 / 3;
        margin-top: 0px;
    }
}

@media (min-width: 448px) {
    .hitit {
        grid-area: 9 / 1 / 10 / 2;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        padding-left: 186px;
        padding-top: 23px;
        color: #ffffff;
        text-align: center;
    }
}

@media (min-width:360px) and (max-width:447px) {
    .hitit {
        grid-area: 9 / 1 / 10 / 2;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        padding-left: 162px;
        padding-top: 23px;
        color: #ffffff;
        text-align: center;
    }
}

@media (min-width: 1280px) {
    .hitit {
        grid-area: 14 / 2 / 15 /3;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        padding-left: 163px;
        padding-top: 0px;
        color: #ffffff;
    }
}

@media (min-width: 1536px) {
    .hitit {
        grid-area: 14 / 2 / 15 / 3;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        padding-left: 209px;
        padding-top: 31px;
        color: #ffffff;
    }
}

@media (min-width: 448px) {
    .examplelink {
        grid-area: 7 / 1 / 8 / 2;
    }
}

@media (min-width:360px) and (max-width:447px) {
    .examplelink {
        grid-area: 7 / 1 / 8 / 2;
    }
}

@media (min-width: 1280px) {
    .examplelink {
        grid-area: 13 / 1 / 14 / 2;
        margin-top: 10px;
    }
}

@media (min-width: 1536px) {
    .examplelink {
        grid-area: 14 / 1 / 15 / 2;
        margin-top: 0px;
    }
}

@media (min-width: 448px) {
    .engagebutt {
        grid-area: 7 / 1 /8 / 2;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        color: #ffffff;
        text-align: center;
        padding-top: 32px;
        padding-left: 169px;
    }
}

@media (min-width:360px) and (max-width:447px) {
    .engagebutt {
        grid-area: 7 / 1 /8 / 2;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        color: #ffffff;
        text-align: center;
        padding-top: 32px;
        padding-left: 147px;
    }
}

@media (min-width: 1280px) {
    .engagebutt {
        grid-area: 14 / 1 / 15 / 2;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        color: #ffffff;
        text-align: center;
        padding-top: 0;
        padding-left: 158px;
    }
}

@media (min-width: 1536px) {
    .engagebutt {
        grid-area: 14 / 1 / 15 / 2;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        color: #ffffff;
        text-align: center;
        padding-top: 32px;
        padding-left: 192px;
    }
}

@media (min-width: 448px) {
    .aboutlink {
        grid-area: 11 / 1 / 12 / 2;
    }
}

@media (min-width:360px) and (max-width:447px) {
    .aboutlink {
        grid-area: 11 / 1 / 12 / 2;
    }
}

@media (min-width: 1280px) {
    .aboutlink {
        grid-area: 13 / 3 / 14 / 4;
        margin-top: 10px;
    }
}

@media (min-width: 1536px) {
    .aboutlink {
        grid-area: 14 / 3 / 15 / 4;
        margin-top: 0px;
    }
}

@media (min-width: 448px) {
    .aboutbutt {
        grid-area: 14 / 1 / 15 / 2;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        padding-left: 189px;
        padding-top: 31px;
        color: #ffffff;
    }
}

@media (min-width:360px) and (max-width:447px) {
    .aboutbutt {
        grid-area: 14 / 1 / 15 / 2;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        padding-left: 166px;
        padding-top: 31px;
        color: #ffffff;
    }
}

@media (min-width: 1280px) {
    .aboutbutt {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        padding-left: 172px;
        padding-top: 0px;
        color: #ffffff;
    }
}

@media (min-width: 1536px) {
    .aboutbutt {
        grid-area: 14 / 2 / 15 / 3;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        padding-left: 211px;
        padding-top: 31px;
        color: #ffffff;
    }
}

@media (min-width: 448px) {
    .h1examples {
        grid-area: 6 / 1 / 7 / 2;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        color: #bde9ff;
        padding-top: 32px;
        padding-right: 4px;
    }
}

@media (min-width:360px) and (max-width:447px) {
    .h1examples {
        grid-area: 6 / 1 / 7 / 2;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        color: #bde9ff;
        padding-top: 32px;
        padding-right: 49px;
        padding-left: 0px;
    }
}

@media (min-width: 1280px) {
    .h1examples {
        grid-area: 12 / 1 / 13 / 2;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 35px;
        color: #bde9ff;
        padding-top: 0px;
        padding-right: 8px;
        padding-left: 6px;
    }
}

@media (min-width: 1536px) {
    .h1examples {
        grid-area: 13 / 1 / 14 / 2;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 35px;
        color: #bde9ff;
        padding-top: 24px;
        padding-right: 8px;
        padding-left: 0px;
    }
}

@media (min-width: 448px) {
    .h1fullport {
        grid-area: 8 / 1 / 9 / 2;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        color: #bde9ff;
        padding-top: 32px;
        padding-right: 6px;
        padding-left: 0px;
    }
}

@media (min-width:360px) and (max-width:447px) {
    .h1fullport {
        grid-area: 8 / 1 / 9 / 2;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        color: #bde9ff;
        padding-top: 32px;
        padding-right: 78px;
        padding-left: 19px;
    }
}

@media (min-width: 1280px) {
    .h1fullport {
        grid-area: 12 / 2 / 13 / 3;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 35px;
        color: #bde9ff;
        padding-top: 0px;
        padding-right: 8px;
        padding-left: 6px;
    }
}

@media (min-width: 1536px) {
    .h1fullport {
        grid-area: 13 / 2 / 14 / 3;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 35px;
        color: #bde9ff;
        padding-top: 24px;
        padding-right: 8px;
        padding-left: 6px;
    }
}

@media (min-width: 448px) {
    .h1about {
        grid-area: 10/ 1 / 11 / 2;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        color: #bde9ff;
        padding-top: 32px;
        padding-right: 8px;
        padding-left: 6px;
    }
}

@media (min-width:360px) and (max-width:447px) {
    .h1about {
        grid-area: 10/ 1 / 11 / 2;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 25px;
        color: #bde9ff;
        padding-top: 32px;
        padding-right: 59px;
        padding-left: 0px;
    }
}

@media (min-width: 1280px) {
    .h1about {
        grid-area: 12 / 3 / 13 / 4;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 35px;
        color: #bde9ff;
        padding-top: 0px;
        padding-right: 9px;
    }
}

@media (min-width: 1536px) {
    .h1about {
        grid-area: 13 / 3 / 14 / 4;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 35px;
        color: #bde9ff;
        padding-top: 24px;
        padding-right: 8px;
    }
}

@media (min-width: 448px) {
    .explanation {
        grid-area: 5 / 1 / 6 / 2;
        text-align: center;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        font-size: 15px;
        margin-left: 59px;
        margin-right: 59px;
        line-height: 18px;
        padding-top: 0px;
        margin-top: -89px;
        color: #9fdfff;
    }
}

@media (min-width:360px) and (max-width:447px) {
    .explanation {
        grid-area: 5 / 1 / 6 / 2;
        text-align: center;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        font-size: 15px;
        margin-left: 31px;
        margin-right: 88px;
        line-height: 18px;
        padding-top: 0px;
        margin-top: -89px;
        color: #9fdfff;
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (min-width: 1280px) {
    .explanation {
        margin-left: 250px;
        margin-right: 250px;
        padding-top: 20px;
        grid-area: 9 / 1 / 11 / 4;
        margin-top: 0px;
        font-size: 25px;
        font-weight: 500;
        text-align: center;
        line-height: 34px;
    }
}

@media (min-width: 1536px) {
    .explanation {
        margin-left: 370px;
        margin-right: 370px;
        padding-top: 44px;
        grid-area: 10 / 1 / 12 / 4;
        margin-top: 0px;
        font-size: 25px;
        font-weight: 500;
        text-align: center;
        line-height: 34px;
    }
}