@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Nanum+Gothic+Coding&display=swap');

/*Global*/

    :root {
  --primary-bg-color: #FFFCF5;
  --secondary-bg-color: #e3e3ff;
  --third-bg-color: #FFE6D6;
  --fourth-bg-color: #AAD9BB;
  --fifth-bg-color: #F3CEDA;


  --primary-color: #028C6A;
  --secondary-color: #FF8C42;
  --third-color: #62C370;
  --fourth-color: #CC3363;
  --fifth-color: #20063B;
  
  --primary-text-color: #361107;
  --secondary-text-color: #802B0F;
  --contrast-text-color: #F760FF;
  --contrast-d-text-color: #480000;
  --link-color-1: #a513e4;

  --base-font: font-family: Karla, sans-serif;
}


    body {
        margin: 0 0 0 0;
        font-family: Karla, sans-serif;
         position: relative;
         background-color: var(--primary-bg-color);
         color: var(--primary-text-color);
    }

    .hide-section {
        display: none;
    }


.box-wrap-voice {
    display: flex; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    gap: 10px;
    margin: 30 0;
}

.orange-box {
    border: 1px solid var(--secondary-color); 
    width: 350px;
}

.inner-box {
margin: 20 auto; 
width: 80%;
display: flex; 
justify-content: space-between; 
flex-direction: column;
}

.inner-text {

}

.test2 {

}

.test2 > p {
    height: 300px;
}

.audio-1 {
    margin: 20 auto;
    width: 240;
    height: 40;
}



    /* Text Styles Font*/

    h1 {
        font-size: 4.5rem;
        margin: 0;
        padding: 15 0 35 0;
    }

    h2 {
        font-size: 3.2rem;
        margin: 0;
        padding: 15 0 25 0;
    }

    h3 {
        font-size: 1.7rem;
        margin: 10 0; 
        padding: 0;
    }

    h3.testimonials {
        font-size: 18px;
        font-weight: 400;
        margin: 0;
    }

    h3.demo {
        font-size: 20px;
        margin: 30 0 0 0;
        padding: 0;
    }

    h4 {
        font-size: 20px;
    }


    p {
        font-size: 18px;
        margin: 0;
        padding: 0;
    }

    li {
        font-size: 18px;
        margin: 5 0;
    }

    a {
        color: var(--primary-text-color);
        text-decoration: none;
    }


    a.testimonials {
        color: var(--contrast-d-text-color);
        font-weight: 600;
        text-decoration: none;
    }

    .featured-add-text {
        font-size: 18px; 
        text-transform: uppercase; 
        color: var(--primary-text-color);
        font-weight: 400;
        text-shadow: -1px -1px var(--secondary-color);
    }

    .small-head {
        font-size: 22px;
        padding: 0;

    }

    .big-title {
        font-size: 2.7rem;
        font-weight: bold;
        margin: 0;
        padding: 15 0 25 0;
    }

    .center-text {
    display: flex; 
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

    .small-header1 {
    font-weight: 300;
    font-size: 20px;
    padding: 0;
    margin: 0 0 15 0;
    color: var(--primary-color);

    border-bottom: 2px solid var(--third-color);
}

.footer-text > h2 {
    font-size: 22px;
    margin: 0;
    padding: 10 0;
}

.footer-links {
    text-decoration: none;
    color: var(--primary-text-color)
    cursor: pointer;
}



.content-spacer {

}

.content-spacer > p {
    margin: 0em 0em 1.5em 0em;
}

.content-space1 {
    width: 10%;
    height: 10%;
}


.blog-style-format > p > a {
    color: var(--link-color-1);
}
.blog-style-format > h2 {
    margin: 40 0 0 0;
}



    .paperOverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: repeat;
  background-image: url("/images/waves-test.jpg");
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
    }

   .back-image-style {
position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: repeat;
  background-image: url("/images/waves-test.jpg");
  mix-blend-mode: overlay;
   }

    

    
/* Header */

            .topblock {
            height: 30px;
            width: 100%;
            display: flex;
            justify-content: right;
            padding: 5 0 0 0;
            align-items: center;

            background-color: var(--primary-bg-color);
            }
            .topnav {
                padding-left: 5px;
            }
            .toplogos {

            }
            .main-nav {
                width: 150%;
                margin-left: 10%;
                display: flex; 
                flex-wrap: wrap;
                justify-content: space-around;
            }
            .socialimg {
    width: 20px;
    padding: 5px;
}

        /* style*/

            .title-text {
                font-size: 35px;
                color: var(--primary-text-color);
                text-decoration: none;
                text-align: left;
                width: auto;
                padding-left: 20px;

            }
            .service-navtext {
                color: var(--secondary-text-color);
                font-weight: 500;
                margin: 0;
                text-decoration: none;
               }
            ul.service-navtext {
                list-style-type: none;
               }

         /*links*/

                a.homelink:link {
                    color: var(--primary-text-color);
                    text-decoration: none;
                }
                a.homelink:visited {
                    color: var(--primary-text-color);
                }

               a.nav-link:link {
                color: var(--primary-text-color);
                text-decoration: none;
                font-size: 20px;
               }
               a.nav-link:visited {
                color: var(--primary-text-color);
               }
               a.nav-link:hover {
                padding-top: 5px;
               }
               a.nav-link:active {
                padding-top: 15px;
               }



               .button-style-A {
                text-decoration: none;
                font-size: 18px;
                color:var(--primary-text-color);

                background-color: var(--fourth-bg-color);
                border: var(--third-color);
                padding: 20px;
                margin: 25 0;
                width: auto;
               }

                .button-style-A:hover {
                text-decoration: none;
                color:#361107;

                background-color: var(--fifth-bg-color);
                border: var(--fifth-bg-color);
                padding: 20px;
                margin: 25 0;
                width: auto;
               }

                .button-style-B {
                text-decoration: none;
                font-size: 18px;
                color:var(--primary-text-color);

                background-color: inherit;
                border: 1px solid var(--third-color);
                padding: 15px;
                margin: 25 0;
                width: auto;
               }

                .button-style-B:hover {
                text-decoration: none;
                color:#361107;

                background-color: var(--secondary-bg-color);
                border: 1px solid var(--third-color);
                padding: 15px;
                margin: 25 0;
                width: auto;
               }

               




        

/* Body Blocks */

.full-width {
    width: 100%; 
}

.wide {
    width: 98%;
    margin: auto;
}

.reg {
    width: 85%;
    margin: auto;
}

.tight {
    width: 60%;
    margin: auto;
}

.tiny-text {
    max-width: 450px;
}

.tight-text {
    max-width: 500px;
}

.reg-text {
    max-width: 600px;
}

.wide-text {
    max-width: 780px;
}

.tight-marg {
    margin: 50px auto 50px auto;
}

.head-marg {
    margin: 0px auto 100px auto;
}

.reg-marg {
    margin: 100px auto;
}

.large-marg {
    margin: 200px auto;
}

.little-pad-pad {
 padding: 50px 0px;
}

.variable-flex-row {
    display: flex;
    flex-direction: row;
}


    /* Top block */

    .top-wrapper {
        height:700px; 
        padding-top: 50px; 
        padding-bottom: 100px; 
        margin: auto; 
        display: flex;
    }

    .top-card {
        width: 50%; 
        height: 100%; 
        display: flex;
    }
    .top-card-pages {
        background-color: var(--secondary-color);
    }
    .top-textbox {
        max-width: 600px; 
        margin: auto;
        padding: 20px;
    }
    .top-alt-side {
        width: 50%; 
        height: 100%; 
        display: flex; 
        flex-direction: column;
    }

    .top-image {
        overflow: hidden;
        
    }


    /* The why */

    .why-wrapper {
        height: 800px;
        display: flex; 
        justify-content: space-between;
    }
    .why-main-and-child {
        display: flex;
        flex-direction: row;
        width: 70%;
    }
    .why-main-textbox {
        width: 40%; 
        padding: 20 20 20 0; 
        display: flex;
        flex-direction: column;
        justify-content: center;
     }
    .why-child-wrapper {
        width: 60%; 
        height: 100%; 
        display: flex; 
        flex-direction: column; 
        justify-content: center;
    }
    .why-child {
        display: flex; 
        flex-direction:column; 
        padding: 10 80;
    }

    .why-image-wrapper {
        width: 30%;
        overflow: hidden;
    }
    .why-image {
        overflow: hidden; 
        width: 100%; 
    }

     /* Service cards */

     .service-card-wrapper {
        width: 100%; 
        background-color: var(--fourth-color); 
        height: auto; 
        padding: 50 0 100 0;
     }
     .service-card-all {
        width:95%; 
        margin: auto;
     }
     .service-card-header-textbox {
        padding-top: 20px;
     }
     .service-card-card-wrap {
        margin: 100 0 0 0; 
        display: flex; 
        flex-direction: row; 
        justify-content: space-between;
     }
     .service-card {
        background-color: var(--secondary-color); 
        max-width: 23%; 
        padding: 200 40 10 40;
     }

    /* Breakdown */

    .breakdown-wrapper {
        display: flex; 
        width: 95%; 
        margin: 150 auto;
    }
    .breakdown-main-textbox {
        display: flex; 
        align-items: end; 
        padding: 50 0; 
        width: 45%;
    }

     /* Feature A block*/

     .feature-a-wrapper {
        height: 600px; 
        display: flex; 
        border: 5px solid #028C6A;
        align-items: center;
        padding: 35px;
        display: flex;
        justify-content: ;
        flex-wrap: wrap;
     }
     .feature-a-image {
        overflow: hidden; 
        width: 30%; 
        height: 100%;
     }
     .feature-a-textbox{
        width: 60%;
        margin: 0 20;
     }
     .feature-a-body-wrapper {
        display: flex; 
        flex-direction: row; 
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
        margin: 30 0;
     }
     .feature-a-body-text-1 {
        width:600px;
     }

          .feature-a-body-text-2 {
        width:200px;
        display: flex;
        flex-direction: column;
     }

     /* Portfolio block*/

        .tidygrid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
          }
        .grid-boxes {
            width: 240;
            height: 300;
            padding: 20 10;
            margin: 10 10;
            background-color: var(--fifth-color);
            border-radius: 10px;;
            text-align: center;
        }
        .grid-pic-box {
            height: 200px;
            aspect-ratio: 1/1;
            margin: auto;
            overflow: hidden;  
            display: flex;
            justify-content: center; 
            align-items: center; 
        }
        .grid-img {
            max-width: 600px;
        }
        .grid-head {
                font-size: 18px;
                font-weight: 600;
                text-decoration: none;
                color: var(--primary-text-color);
                margin: 0;
                z-index: 2;
            }

    /* Testimonials*/

        .testimonial-content {
            margin: 50 0;
            display: flex;
            flex-direction: column;
        }
        .testimonial-content > p {
            font-size: 22px;
        }

    /* VO Features*/

    .features {
        display: flex; 
        flex-direction: row; 
        align-items: center;
        margin: 100 0;
    }

/* About */

.about-texts {
    display: flex; 
    align-items: flex-end; 
    justify-content: center;
}

.about-texts-center {
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.about-texts-experience {
    margin: 50;
}

.abt > h3 {
    font-size: 20px;
}



    /* STYLE - Color Box */

    .color-box-1 {
        display: flex; 
        align-items: center; 
        padding: 100;
    }

    .color-box-spacer {
        width: 10%;
    }

    .color-box-2-int {
        display: flex; 
        flex-direction: column; 
        padding: 100 50 100 0;
    }

    .color-box-listing-style {
        margin: auto; 
        gap: 50px; 
    }

    /* STYLE - Portfolio Images */

    .port-image-cover {
        height: 240px;
        width: 240px;
    }

    .port-image-cover > a {
    height: 240px;
        width: 240px;
    }

    .port-image-cover > a > img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

    /* STYLE - Port See More Images */

    .cmore-image-cover {
        height: 360;
        width: 240px;
    }

    .cmore-image-cover > a {
    height: 360;
        width: 240px;
    }

    .cmore-image-cover > a > img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

      /* STYLE - Left Head cover image */

    .lhead-image-cover {
        height: 600px;
        width: 85%;
    }

    .lhead-image-cover > a {
    height: 600px;
    width: 360px;
    }

    .lhead-image-cover > a > img {
        object-fit: cover;
        height: 100%;
        width: 100%;
     }



    /* STYLE - Contact Form */

    form > label > p {
        margin: 10 0;
        font-size: 20px;
    }

    form > label > input, textarea {
        margin: 0 0 30 0;
    }

    form > label > textarea {
        resize: vertical;
    }

    .cf-input {
        width: 500px;
        min-height: 50px;

        font-size: 18px;
        border: 3px solid var(--secondary-color);
        border-radius: 50px;
        padding: 20px;

        font-family: var(--base-font);        
    }

    .cf-input:focus {
        border: 3px solid var(--secondary-color);
        background-color: var(--third-bg-color);
        outline: none;
        padding: 20 40;

        transition-duration: 0.5s;
    }

    .formbutton {
                text-decoration: none;
                color: var(--primary-text-color);
                border: none;
                background-color: var(--third-color);

                padding: 20px;
                margin: 25 0;
                width: auto;

                transition-duration: 0.5s;
    }

    .formbutton:hover {
                background-color: var(--secondary-color);
                cursor:pointer;
    }
    
/* Images */

.center-image {
    overflow: hidden;
    display: flex; 
    align-items: ;
    justify-content: center;
}

.head-image {
    overflow: hidden;
    display: flex; 
    justify-content: center;
}


/* Accessories */

.sun-feature {
    border: 3px dotted var(--secondary-color); 
    padding: 20px; 
    margin: 0 20; 
    border-radius: 50%; 
    height: 107px; 
    width: 107px; 
    position: relative; 
    top: 80px; 
    justify-content: center; 
    align-items: center;
}

.sun-feature > div {
    border: 3px solid var(--secondary-color); 
    background-color: var(--secondary-color); 
    border-radius: 50%; 
    height: 100px; 
    width: 100px; 
    font-weight: 700; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
    top: 0px;
    text-align: center;
}

.project-short-details {
    padding-bottom: 5px;
    padding-right: 40px;
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    margin: 20px;
}

.project-short-details-container {
    display: flex; 
    flex-direction: row; 
    justify-content: space-around; 
    align-items: flex-start;
}

.project-divider {
    border-bottom: 5px double var(--fifth-color);
    margin: 50 auto;
}









        .listpage-text {
            text-align: center;
            padding: 50px;
        }

        .contentpage-text {
            padding: 20 50 50 50;
            max-width: 1000px;
            margin: auto;
        }

        .credits-text {
            color: var(--contrast-text-color);
            font-weight:300;
            padding: 50 50 0 50;
            max-width: 1000px;
            margin: auto;
        }

        .project-short-text {
            text-align: center;
        }

        .project-short-details-text {
            font-size: 24px;
            margin: 10 0 0 0;
        }

        .project-short-details-header {
            padding: 10 0 0 0;
            font-weight: 600;
        }


        .project-flavour-text {

        }

        .project-flavour-text > p {
            font-size: 50px;
            font-weight: 600;
            padding: 30 0;
            margin: 0;
        }

        .singlepage-img {
            max-width: 800px;
            height: auto;           
        }

        .singlepic-box {
            display: flex;
            justify-content: center; 
            align-items: center; 
            height: 500px;
            overflow: hidden;            
        }






        

        

        .footerbase {
            width:100%;
            bottom: 0px;
            margin: 0;
            position: relative;
            z-index: 3;
        }


    /*Style*/


     /*Buttons*/
            /* Main Nav Buttons */
            .navigate button {
                background-color: inherit;
                border: inherit;
                margin: none;
                padding: 10px;
                cursor: pointer;
                height: 100%;
                font-size: 15px;
                font-weight:200;
                font-family: "Karla", sans-serif;
            }

/*Tab Menu*/

 /* Style the tab */
.tab {
  overflow: hidden;
  background-color: inherit;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;

  font-weight: 600;
  width: 100%;
  text-align: left;
}

/* Change background color of buttons on hover */
.tab button:hover {
  color: #dd5f0b;
  padding-left: 10px;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: inherit;
}

/* Style the tab content */
.tabcontent {
  display: none;
} 



/* Responsive */

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

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

.feature-a-body-text-2 {
    flex-direction: row;
    width: 100%;
}

}

@media only screen and (max-width: 992px) {
    .why-main-and-child{
        flex-direction: column;
    }

    .why-main-textbox {
        width: 100%;
    }

    .why-child-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .why-child {
        padding: 10 0;
    }
}





/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}