@charset "UTF-8";

/* =================================================================== 
 *
 *  SG Tech v2 Main Stylesheet
 *  15-05-2023 
 *  ------------------------------------------------------------------
 *
 *  TOC:
 *  # base style overrides
 *    ## links
 *  # typography & general theme styles
 *    ## Lists
 *    ## responsive video container
 *    ## floated image
 *    ## tables
 *    ## Spacing 
 *  # preloader
 *  # forms
 *    ## Style Placeholder Text
 *    ## Change Autocomplete styles
 *  # buttons
 *  # additional components
 *    ## alert box
 *    ## additional typo styles
 *    ## skillbars
 *  # reusable and common theme styles
 *    ## display headings
 *    ## section header
 *    ## grid overlay
 *  # header styles
 *    ## header logo
 *    ## main navigation
 *    ## mobile menu toggle 
 *  # home
 *    ## home content
 *    ## home video link
 *    ## home buttons
 *    ## home scroll
 *    ## home social
 *    ## home animations
 *    ## home work gallery
 *  # about
 *    ## about process
 *  # services  
 *    ## services list
 *  # works
 *    ## bricks/masonry
 *  # clients
 *  # testimonials
 *  # contact
 *    ## contact social
 *  # footer
 *  # light
 *    ## copyright
 *    ## go top
 *
 * =================================================================== */



body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Montserrat", sans-serif;
}

body,
html {
    height: 100%;
    /*color: #777;*/
    line-height: 1.8;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
}

::selection {
    background: #0d6efd ;
}

.sg-bg-dark {
    background-color: #181818 !important;
}

.sg-bg-blue {
    background-color: #0d6efd !important;
}

.content-sg {
    padding-top: 60px;
}


/* ===================================================================
 * # links
 * =================================================================== */

/* nav bar*/
.nav-link{
    font-size: 14px;
    color: #0d6efd !important;
}

.nav-link:focus, 
.nav-link:active,
.nav-link:hover{
    color: #93baf4 !important;
}

.nav-link.active {
    color: #93baf4 !important;
}

.navbar{
    box-shadow: 0 0.045rem black; 
}



/* butom text*/
.sg-btn{
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .sg-btn-hidden{
        display: none;
}
}

@media (min-width: 768px) {
    .sg-btn-hidden-offcanvas{
        display: none;
}
}

.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
    --bs-offcanvas-width: 240px !important;
}
        
.btn {
    color: #0d6efd !important;
}
.btn:hover {
    color: #93baf4 !important;
}

.btn-link {
    color: #0d6efd !important;
}
.btn-link:hover {
    color: #93baf4 !important;
}

.btn-outline-primary {
    color: #fff !important;
    border-color: #0d6efd !important;
    background-color: #0d6efd !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: #93baf4 !important;
    border-color: #93baf4 !important;
}

.btn-outline-success {
    color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/*.btn-outline-success:active:focus {
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 50%) !important;
}*/

.btn-outline-success:active {
    color: #fff;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.btn-outline-success:hover {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/* ===================================================================
 * # typography & general theme styles
 * =================================================================== */

.sg-text-white {
    color: #fff
}

.sg-text-blue {
    color: #0d6efd;
}

i.sg-text-blue:hover {
    color: #fff;
}
.sg-text-blue-grey, .sg-hover-text-blue-grey:hover, .sg-text-blue-gray, .sg-hover-text-blue-gray:hover {
    color: #607d8b !important;
}

.sg-tiny {
    font-size: 10px !important
}

.sg-small {
    font-size: 12px !important
}

.sg-medium {
    font-size: 15px !important
}

.sg-large {
    font-size: 18px !important
}

.sg-xlarge {
    font-size: 24px !important
}

.sg-xxlarge {
    font-size: 36px !important
}

.sg-xxxlarge {
    font-size: 48px !important
}

.sg-jumbo {
    font-size: 64px !important
}

.sg-top,
.sg-bottom {
    position: fixed;
    width: 100%;
    z-index: 1
}

.sg-top {
    top: 0
}

.sg-bottom {
    bottom: 0
}

.sg-overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2
}

.sg-display-topleft {
    position: absolute;
    left: 0;
    top: 0
}

.sg-display-topright {
    position: absolute;
    right: 0;
    top: 0
}

.sg-display-bottomleft {
    position: absolute;
    left: 0;
    bottom: 0
}

.sg-display-bottomright {
    position: absolute;
    right: 0;
    bottom: 0
}

.sg-display-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

.sg-display-left {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%)
}

.sg-display-right {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%)
}

.sg-display-topmiddle {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%)
}

.sg-display-bottommiddle {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%)
}


/* ===================================================================
 * # home
 * =================================================================== */

/* Create a Parallax Effect */
.bgimg-1,
.bgimg-2,
.bgimg-3 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
    background-image: url('/images/sg_main_5.jpg');
    min-height: 500px;
}

/* Second image (Portfolio) */
.bgimg-2 {
    background-image: url("/images/parallax2.jpg");
    min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
    background-image: url("/images/sg_main_5.jpg");
    min-height: 250px;
}

/* Turn off parallax scrolling for tablets and phones */
/*@media only screen and (max-device-width: 1600px) {
    .bgimg-1 {
        background-attachment: scroll;
        min-height: 700px;
    }

    .bgimg-2,
    .bgimg-3 {
        background-attachment: scroll;
        min-height: 1250px;
    }
}*/

.text-wide {
    letter-spacing: 5px;
}

.text1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600 !important;
    font-size: 3.47rem !important;
    line-height: 1 !important;
    padding-top: 100px;
}

.text2 {
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 400;
}

.text3 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600 !important;
    font-size: 4rem !important;
    line-height: 1 !important;
}

.text4 {
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 400;
}

#home .title {
    font-weight: 600 !important;
    font-size: 2.6rem !important;
    line-height: 1.2 !important;
    padding-top: 100px;
}
#projetos .title {
    font-weight: 600 !important;
    font-size: 2.4rem !important;
    line-height: 1 !important;
}
 
/*sm*/    
@media only screen and (min-width: 576px) {    
    #home .title {
        font-size: 3.8rem !important;
        line-height: 1 !important;
    }
    
    .bgimg-1 {
        min-height: 600px;
    }
}
/*md*/ 
@media only screen and (min-width: 769px) {
    #home .title {
        font-size: 4.5rem !important;
        letter-spacing: 5px;
        padding-top: 180px;
    }

    .text1 {
        font-size: 5.7rem !important;
        line-height: 1 !important;
    }

    .text2 {
        font-size: 2rem;
    }

    .text3 {
        font-size: 5.8rem !important;
        line-height: 1 !important;
    }

    .text4 {
        font-size: 1.2rem;
        line-height: 1.3;
    }
}
/*lg*/     
@media only screen and (min-width: 992px) {
    .text-wide {
        letter-spacing: 10px;
    }     
    
    #home .title {
        font-size: 4.5rem !important;
        letter-spacing: 5px;
        padding-top: 180px;
    }    
}   
/*xl*/     
@media only screen and (min-width: 1200px) {
   
} 
/*xxl*/     
@media only screen and (min-width: 1400px) {
    #home .title {
        font-size: 5rem !important;
        letter-spacing: 10px;
    }
} 



.sg-mobile {
    line-height: 2 !important;
}

#read-more-container {
    width: 120px;
    margin: auto;

}

#read-more-container:hover{
    padding-top: 20px;
    transition: all .6s ease-in-out;
}

.contact-email a {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 2.2;
    text-decoration: none;
    border-bottom: 3px solid rgba(96, 125, 139, 1);
}

.contact-email a:hover,
.contact-email a:focus {
    border-bottom: 3px solid rgba(96, 125, 139, 0.4);
}

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

@media only screen and (min-width: 767px) {
    .bgimg-1 {
        min-height: 800px;
    }
    
    .text1 {
        padding-top: 180px;
    }
    #projetos.text1 {
        padding-top: 0px;
    }    
}

@media only screen and (max-width: 800px) {
    .text1 {
        font-size: 3.5rem !important;
        line-height: 1 !important;
    }

    .text2 {
        font-size: 1.5rem;
        line-height: 1.5;
    }

    .sg-mobile {
        font-size: 2rem !important;
        line-height: 2 !important;
    }

    .contact-email a {
        font-size: 1.4rem;
        line-height: 2.2;
        border-bottom: 2px solid rgba(96, 125, 139, 1);
    }

    .contact-email a:hover,
    .contact-email a:focus {
        border-bottom: 2px solid rgba(96, 125, 139, 0.4);
    }

/*    .bgimg-1 {
        min-height: 250px;
    }*/

   /* .bgimg-2,
    .bgimg-3 {
        background-attachment: scroll;
        min-height: 250px;
    }*/
}


.border {
  border: 1px solid #fff !important;
}
/* ===================================================================
 * ## home work gallery
 * =================================================================== */

/* work gallery */
.hover {
  overflow: hidden;
  position: relative;
  padding-bottom: 60%;
}

.hover-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  transition: all 0.4s;
}

.hover img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s;
}

.hover-content {
  position: relative;
  z-index: 99;
}

.hover-1 img {
  width: 105%;
  position: absolute;
  top: 0;
  left: -5%;
  transition: all 0.3s;
}

.hover-1-content {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 99;
  transition: all 0.4s;
}

/*.hover-1 .hover-overlay {
  background: rgba(0, 0, 0, 0.0);
}*/

.hover-1-description {
  transform: translateY(0.5rem);
  transition: all 0.4s;
  opacity: 0;
}

.hover-1:hover .hover-1-content {
  bottom: 2rem;
}

.hover-1:hover .hover-1-description {
  opacity: 1;
  transform: none;
}

.hover-1:hover img {
  left: 0;
}

.hover-1:hover .hover-overlay {
  background: rgba(0, 0, 0, 0.6);
}

/* Filter work gallery */
#filter-galery {
    text-align: center;
}

#filter-galery button {
    border: 0;
    background-color: transparent;
    border-bottom: solid 2px transparent;
    margin: 0 5px;
    
}

#filter-galery .filter-button {
    display: inline-block;
    padding: 4px 10px;
    text-decoration: none;
    color: #777777;
    cursor: pointer;
    font-size: 16px;
}

#filter-galery .active {
    color: #0d6efd;
     border-bottom: solid 2px #0d6efd;
}

#filter-galery .filter-button:hover{
    color: #0d6efd;
     border-bottom: solid 2px transparent;
}

#filter-galery .filter-button:focus,
#filter-galery .filter-button:active {
    color: #0d6efd;
     border-bottom: solid 2px #0d6efd;
}

/* ===================================================================
 *  *  # services  
 * =================================================================== */

/* ===================================================================
 *    ## services list
 * =================================================================== */

.box {
    position: relative;
    width: 100%;
    padding: 15px;
    border: 1px solid white;
}

.our-services {
    /*margin-top: 25px;
    margin-bottom: 20px;*/
    /*padding-bottom: 30px;*/
    padding: 25px 20px 10px;
    text-align: left;
    /*border-radius: 10px;*/
    /*background-color: #fff;*/
    transition: all .4s ease-in-out;
    /*box-shadow: 0 0 25px 0 rgba(20, 27, 202, .17)*/
}

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
    .our-services{
    min-height: 180px;
    /*background-color: darkgrey*/
    }
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
    .our-services{
    min-height: 280px;
    /*background-color: pink*/
    }
}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
.our-services{
    min-height: 250px;
    /*background-color: red*/
    }
}

/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
.our-services{
    min-height: 230px;
    /*background-color: blue*/
    }
}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {  }


.our-services h4 {
    font-size: 1.2rem;
    color: #fff;
    font-weight: 500;
}

.our-services p {
    font-size: 0.85rem;
     color: #fff;
}

.our-services .icon {
   /* margin-bottom: -22px;
    transform: translateY(-50%);
    text-align: center;*/
    width: 100%;
    max-width: 45px;
    margin-bottom: 15px;
}

/*.our-services:hover h4,
.our-services:hover p {
    color: #fff
}

.speedup:hover {
    box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #fb0054 0%, #f55b2a 100%)
}

.settings:hover {
    box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #34b5bf 0%, #210c59 100%)
}

.privacy:hover {
    box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #3615e7 0%, #44a2f6 100%)
}

.backups:hover {
    box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #fc6a0e 0%, #fdb642 100%)
}

.ssl:hover {
    box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #8d40fb 0%, #5a57fb 100%)
}

.database:hover {
    box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #27b88d 0%, #22dd73 100%)
}*/


/* ===================================================================
 *    ## projetos 
 * =================================================================== */

.bg-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* ===================================================================
 *    ## clients 
 * =================================================================== */

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