/** Shopify CDN: Minification failed

Line 16:1 Unexpected "<"
Line 39:12 Comments in CSS use "/* ... */" instead of "//"
Line 101:12 Comments in CSS use "/* ... */" instead of "//"
Line 357:12 Comments in CSS use "/* ... */" instead of "//"
Line 1195:4 Comments in CSS use "/* ... */" instead of "//"
Line 1196:5 Comments in CSS use "/* ... */" instead of "//"
Line 1222:5 Comments in CSS use "/* ... */" instead of "//"
Line 1234:4 Comments in CSS use "/* ... */" instead of "//"
Line 1278:4 Comments in CSS use "/* ... */" instead of "//"
Line 1409:5 Comments in CSS use "/* ... */" instead of "//"
... and 6 more hidden warnings

**/
 <style>


      * {
        box-sizing: border-box;
        font-size: calc(var(--font-body-scale) * 62.5%);
        height: 100%;
      }  
  
      .mobile_services_grid-container{
        border:solid red;
      }

   #about_us_paragraph {
      font-size: 2vw;
     color:red;
    }
  
 
        #header{
            display: flex;
            justify-content: space-between;
            position: fixed;
            //background-color: #A39A92;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 100;
            padding-top: 1%;
            
        }

        #header_section{
            
        }

        .square {
            height: 60px;
            width: 60px;
            background-color: #058ed9;
            border: solid 7px;
          }

        .mobile_square{
          height: 60px;
            width: 60px;
            background-color: #058ed9;
            border: solid 7px;
            margin-top: 2%;
        }

        .square2 {
            height: 100px;
            width: 100px;
            background-color: #A39A92;
            border: solid 15px;
            transform: rotate(50deg);
        }

        .square3 {
         
          background-color: #A39A92;
          border: solid 7px;
          transform: rotate(50deg);
      }

      .square4 {
         
        background-color: #053C5E;
        
        border: solid 7px;
        transform: rotate(50deg);
    }

    .square5 {
         
        background-color: #058ed9;
        
        border: solid 7px;
        transform: rotate(50deg);
    }

        #hero_section{
            height:100vh;
            background-color: #EDF8FF;
            //background-image: url("background_video_test_8.gif");
      
            /* Set a specific height */
            min-height: 500px; 
          
            /* Create the parallax scrolling effect */
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            
        }

        .hero_section video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

        #hero_container{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            z-index: -1;
            
        }
        #about_us_section{
          height:150vh; 
        }

        #about_us_container{
          z-index: 1;
        }

        #about_us_paragraph{
          font-size: 2vw;
        }
        #about_us_section2{
            display: flex; 
        }
        #about_us_section3{
            display: flex; 
        }

        #service_section_1{
            display: flex;
          height:80vh; 
          min-height:500px;
        }
        #service_section_2{
            display: flex; 
        }
        #service_section_3{
            display: flex; 
        }
        

          .grid-container {
            display: grid;
            height:80%;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            grid-gap: 10px;
          }
          
          .grid-item {
            background-color: #ccc;
            border: 1px solid #999;
            padding: 20px;
            text-align: center;
            border-radius: 20px;
          }
          
          

          #services_section{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          #portfolio_section{
            height: 260vh;
          }

          .new_grid-container {
            display: grid;
            height: 70%;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 10px;
          }
          
          .new_item {
            background-color: #ddd;
            padding: 20px;
            font-size: 30px;
            text-align: center;
            border-radius: 20px;
          }
          
          .new_item1 {
            grid-column: 1 / span 2;
            grid-row: 1 / span 2;
            border-radius: 20px;
          }
          
          .new_item2 {
            grid-column: 3 / span 2;
            grid-row: 1 / span 1;
            border-radius: 20px;
          }
          
          .new_item3 {
            grid-column: 1 / span 1;
            grid-row: 2 / span 1;
            border-radius: 20px;
          }
          
          .new_item4 {
            grid-column: 2 / span 1;
            grid-row: 2 / span 1;
            border-radius: 20px;
          }
          
          .new_item5 {
            grid-column: 3 / span 1;
            grid-row: 2 / span 1;
            border-radius: 20px;
          }
          
          .new_item6 {
            grid-column: 4 / span 1;
            grid-row: 2 / span 1;
            border-radius: 20px;
          }
          
          .new_item7 {
            grid-column: 5 / span 1;
            grid-row: 2 / span 1;
            border-radius: 20px;
          }
          
          .new_item8 {
            grid-column: 1 / span 1;
            grid-row: 1 / span 1;
            border-radius: 20px;
          }
          
          .new_item9 {
            grid-column: 2 / span 1;
            grid-row: 1 / span 1;
            border-radius: 20px;
          }
          
          .new_item10 {
            grid-column: 5 / span 1;
            grid-row: 1 / span 1;
            border-radius: 20px;
          }

          #testimonials_section{
            height:120vh;
          }

          #blog_section{
            height:100vh;
            
            display: flex;
            align-items: center;
            justify-content: center;
          }

           #blog_section_2{
       
            border: solid;
            display: flex;
            
          }

          .blog-grid {
            display: grid;
            height: 85%;
            width:100%;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(1fr);
            gap: 10px;
          }
          
          .blog-item {
            display: flex;
            align-items: center;
            justify-content: center;
            justify-content: flex-start;
            background-color: #ddd;
            border: 1px solid #999;
            padding: 20px;
            font-size: 30px;
            text-align: center;
          }
          
          .blog1 {
            grid-row: 1 / span 1;
          }
          
          .blog2 {
            grid-row: 2 / span 1;
          }
          
          .blog3 {
            grid-row: 3 / span 1;
          }
          
          
          :root{
            --white:#FFF;
            --black:#000;
            --dark:#1E1E1E;
            --gray:rgba(1,1,1,0.6);
            --lite:rgba(255,255,255,0.6);
            --primary:#002347;
            --secondary:#fdc632;
        }
        
        
        /***************************
                    DEFAULT
        ****************************/
        body{
            margin:0;
            overflow-x:hidden !important;
            font-family: 'Poppins', sans-serif;   
        }
        
        a{
            text-decoration:none !important;
            min-width: fit-content;
            width: fit-content;
            width: -webkit-fit-content;
            width: -moz-fit-content;
        }
        
        a, button{
            transition:0.5s;
        }
        
        a, p{
            font-size:14px;
        }
        
        h1, h2, h3, h4, h5, h6{
            //color:var(--primary);
            font-weight:600;
        }
        
        a, button, input, textarea, select{
            outline:none !important;
        }
        
        fieldset{
            border:0;
        }
        
        .title{
            color:var(--primary);
        }
        
        .flex, .fixed_flex{
            display:flex;
        }
        
        .flex-content{
            width:100%;
            position:relative;
        }
        
        .padding_1x{
            padding:1rem;
        }
        
        .padding_2x{
            padding:2rem;
        }
        
        .padding_3x{
            padding:3rem;
        }
        
        .padding_4x{
            padding:4rem;
        }
        
        .btn{
            padding:0.8rem 2rem;
            border-radius:5px;
            text-align:center;
            font-weight:500;
            text-transform:uppercase;
        }
        
        .btn_1{
            border:1px solid var(--primary);
            background-color:var(--primary);
            color:var(--secondary);
        }
        
        .btn_1:hover{
            background-color:transparent;
            color:var(--primary);
        }
        
        .btn_2{
            border:1px solid var(--secondary);
            background-color:var(--secondary);
            color:var(--primary);
        }
        
        .btn_2:hover{
            border:1px solid var(--primary);
            background-color:var(--primary);
            color:var(--secondary);
        }
        
        @media (max-width:920px){
            .flex{
                flex-wrap:wrap;
            }
            
            .padding_1x, .padding_2x, .padding_3x, .padding_4x{
                padding:1rem;
            }
          
            .btn{
                padding:0.5rem 1rem;
            }
            
            a, p{
                font-size:12px;
            }
        }
        
        
        
        /***************************
                       FOOTER
        ****************************/
        footer{
            background-color:#053C5E;
            color:var(--lite);
        }
        
        footer h3{
            color:var(--white);
            margin-bottom:1.5rem;
        }
        
        footer a{
            color:var(--lite);
            display:block;
            margin:15px 0;
        }
        
        footer a:hover{
            color:var(--white);
        }
        
        footer fieldset{
            padding:0;
        }
        
        footer fieldset input{
            background-color:#334f6c;
            border:0;
            color:var(--lite);
            padding:1rem;
        }
        
        footer fieldset .btn{
            border-radius:0;
            border:0;
        }
        
        footer fieldset .btn_2:hover{
            background-color:var(--secondary);
            border:0;
            color:var(--primary);
        }
        
        footer .flex:last-child{
            align-items:center;
        }
        
        footer .flex:last-child .flex-content:last-child{
            text-align:right;
        }
        
        footer .flex:last-child p{
            color:var(--white);
        }
        
        footer .flex:last-child a{
            width:40px;
            display:inline-block;
            background-color:#334f6c;
            color:var(--white);
            padding:0.5rem;
            margin-right:3px;
            text-align:center;
        }
        
        footer .flex:last-child a:hover{
            background-color:var(--secondary);
            color:var(--gray);
        }
        
        @media (max-width:1100px){
            footer .flex:first-child{
                flex-wrap:wrap;
            }
            
            footer .flex:first-child .flex-content{
                flex: 1 1 40%;
            }
        }
        
        @media (max-width:920px){
            footer .flex:last-child .flex-content:last-child{
                text-align:left;
            }
        }
        
        @media (max-width:320px){
            footer .flex:first-child .flex-content{
                flex:1 1 100%;
            }
        }


        /***************************
                       END FOOTER
        ****************************/


        #contact_us_section{
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
          
        }

        .feedback-input {
            color:white;
            font-family: Helvetica, Arial, sans-serif;
            font-weight:500;
            font-size: 18px;
            border-radius: 5px;
            line-height: 22px;
            background-color: transparent;
            border:2px solid #CC6666;
            transition: all 0.3s;
            padding: 13px;
            margin-bottom: 15px;
            width:100%;
            box-sizing: border-box;
            outline:0;
          }
          
          .feedback-input:focus { border:2px solid #CC4949; }
          
          textarea {
            height: 150px;
            line-height: 150%;
            resize:vertical;
          }
          
          [type="submit"] {
            font-family: 'Montserrat', Arial, Helvetica, sans-serif;
            width: 100%;
            background:#CC6666;
            border-radius:5px;
            border:0;
            cursor:pointer;
            color:white;
            font-size:24px;
            padding-top:10px;
            padding-bottom:10px;
            transition: all 0.3s;
            margin-top:-4px;
            font-weight:700;
          }
          [type="submit"]:hover { background:#CC4949; }
        
   
        
      .mystyle{
        transform: translateZ(0);-webkit-transform: translateZ(0);
        width: 100%;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
      }

      #word_1{
        background-color: #058ed9;
        transform-origin: center;    
      }

      #word_2{
        background-color: #058ed9;
        transform-origin: center; 
      }

      .hero {
        position: relative;
        height: 100vh;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      
      .hero video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .hero-text {
        position: relative;
        z-index: 1;
      }

      #testimonials_section_2{
        display: grid;
        border:solid green;
        place-items: center;
        font-family:  'Google Sans', sans-serif, system-ui;
        overflow-x: hidden;
        justify-content: center;
        min-height: 120vh;
      }
      
      :root {
        --gap: 1rem;
        --card-width: clamp(280px, 20vw, 100vw);
        --card-aspect-ratio: 5 / 7;
        --card-height: calc(var(--card-width) * (7 / 5));
    }

    .t_grid {
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(5, var(--card-width));
        gap: 1rem;
        overflow: hidden;
    }
    
    .t_grid-wrapper {
        /* overflow: hidden; */
    }
    
    .t_column {
        display: grid;
        gap: 1rem;
      align-content: start;
    }
    
    .t_column:not(:nth-of-type(3)) {
        animation: scale 1s linear both;
        animation-timeline: scroll(root);
    }
    
    /* The distance is the number of cards minus 100vh */
    .t_column:is(:nth-of-type(2), :nth-of-type(4)) {
        --origin: calc(var(--gap) * -1);
        --destination: calc(var(--card-height) * 1.5 + var(--gap));
    }
    .t_column:is(:nth-of-type(1), :nth-of-type(5)) {
        --origin: calc(var(--gap) * -2);
        --destination: calc(var(--card-height) * 3.4 + var(--gap));
    }
    
    @keyframes scale {
        0% {
            transform: translateY(var(--origin, 0%));
        }
        100% {
            transform: translateY(var(--destination, -50%));
        }
    }
    
    .t_img {
        max-width: 100%;
        border: 0;
        padding: 0;
        max-height: 100%;
        width: 100%;
        aspect-ratio: 5 / 7;
        background: hsl(0 0% 80%);
    }
    
    #transform{
      transform:perspective(5000px) rotateY(var(--rotateY)) rotateX(var(--rotateX)); transform-style:preserve-3d;
      transition-duration: 1s;
      transition-timing-function: ease-out;
  }

  #transform2{
      transform:perspective(5000px) rotateY(var(--rotateY)) rotateX(var(--rotateX)); transform-style:preserve-3d;
      transition-duration: 1s;
      transition-timing-function: ease-out;

  }

  #hero_media_1{
      transform:perspective(5000px) rotateY(var(--rotateY)) rotateX(var(--rotateX)); transform-style:preserve-3d;
      transition-duration: 0.1s;
      background-image: url("hero_media_3.jpg");
      transition-timing-function: ease-out;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;  
  }

  #hero_media_1 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #hero_media_2{
      transform:perspective(5000px) rotateY(var(--rotateY)) rotateX(var(--rotateX)); transform-style:preserve-3d;
      transition-duration: 0.1s;
      background-image: url("hero_media_20.png");
      transition-timing-function: ease-out;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }
  #hero_media_3{
      transform:perspective(5000px) rotateY(var(--rotateY)) rotateX(var(--rotateX)); transform-style:preserve-3d;
      transition-duration: 0.1s;
      background-image: url("hero_media_12.png");
      transition-timing-function: ease-out;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }
  #hero_media_4{
      transform:perspective(5000px) rotateY(var(--rotateY)) rotateX(var(--rotateX)); transform-style:preserve-3d;
      transition-duration: 0.1s;
      background-image: url("hero_media_10.png");
      transition-timing-function: ease-out;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }

  #hero_media_4 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #hero_media_5{
      transform:perspective(5000px) rotateY(var(--rotateY)) rotateX(var(--rotateX)); transform-style:preserve-3d;
      transition-duration: 0.1s;
      background-image: url("hero_media_18.png");
      transition-timing-function: ease-out;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }
  #hero_media_6{
      transform:perspective(5000px) rotateY(var(--rotateY)) rotateX(var(--rotateX)); transform-style:preserve-3d;
      transition-duration: 0.1s;
      background-image: url("hero_media_4.jpg");
      transition-timing-function: ease-out;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }

    #services_img_container_1{
      background-image: url('theme_team_service_step_1.png');
        transition-timing-function: ease-out;
        position: relative;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #services_img_container_1 video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

  #services_img_container_2{
    background-image: url('theme_team_service_step_2.png');
      transition-timing-function: ease-out;
      position: relative;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
  }

  #services_img_container_2 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #services_img_container_3{
      background-image: url('theme_team_service_step_3.png');
      transition-timing-function: ease-out;
      position: relative;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
  }

  #services_img_container_3 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

 #services_img_container_4{
      background-image: url('Theme_Team_Service_Image_4.png');
      transition-timing-function: ease-out;
      position: relative;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
  }

 #services_img_container_5{
      background-image: url('Theme_Team_Service_Image_5.2.png');
      transition-timing-function: ease-out;
      position: relative;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
  }

 #services_img_container_6{
      background-image: url('Theme_Team_Service_Image_6.png');
      transition-timing-function: ease-out;
      position: relative;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
  }

  .circle-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 300px;
    border-radius:51%;
    width:601px;
    height:30vh;
 
  }

.circle{
  display: flex; 
  align-items:center; 
  justify-content:center;  
  height:7vw; 
  width:7vw;  
}

.services_header{
  font-size: 2vw; 
  color:white;
}

.services_header_2{
  font-size: 2vw; 
  color:#053C5E;
}

.services_header_3{
  font-size: 2vw; 
  color:#058ed9;
}

.services_text{
  color:white; 
  font-size:1.1vw;
}

.services_text_2{
  font-size:1.1vw;
  color:"#053C5E";
}

.services_text_3{
  font-size:1.1vw;
  color:"#053C5E";
}

  .hero2 {
    position: relative;
    height: 100vh;
   
  }
  
  .hero2 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
  }
  
  .hero-text2 {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 50px;
    z-index: 1;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  
  }
  
  .hero-text2 p {
    font-size: 2rem;
    font-weight: 400;
  }
  
  .fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
  }

  .fade-in {
    opacity: 1;
    transition: opacity 0.5s ease-out;
  }

  .review_item{
    font-size:0.8vw;
    color:white;
  }
  #testimonial_parallax_item1{
    background-image: url(reviews_img_1.png);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #testimonial_parallax_item2{
    background-image: url(reviews_img_2.png);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  #testimonial_parallax_item3{
    background-image: url(reviews_img_3.png);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  #testimonial_parallax_item4{
    background-image: url(reviews_img_4.png);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  #testimonial_parallax_item5{
    background-image: url(reviews_img_5.png);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  #testimonial_parallax_item6{
    background-image: url(reviews_img_6.png);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  #testimonial_parallax_item7{
    background-image: url(reviews_img_7.png);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  #testimonial_parallax_item8{
    background-image: url(reviews_img_8.png);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  #testimonial_parallax_item9{
    background-image: url(reviews_img_9.png);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  #testimonial_parallax_item10{
    background-image: url(reviews_img_10.png);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }


  .wordCarousel {
    transform: translateY(100px);
    font-size: 80px;
    font-weight: 400;
    color: #eee;
    
  }

  .wordCarousel div {
    overflow: hidden;
    position: relative;
    transform: translateX(-10px) !important;
    float: right;
    height: 110px;
    align-items: center;
    justify-content: center;
  }

  .wordCarousel div li {
    font-family: Serif;
    color: #eee;
    font-weight: 700;
    padding: 0 10px;
    height: 55px;
    margin-bottom: 45px;
    display: block; 
  }
  
  
  
  .flip3 {
    
    -webkit-animation: flip3 8s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
            animation: flip3 8s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
  }
  
 
  

  

  @-webkit-keyframes flip3 {
    0% {
      margin-top: 0px;
     /* border: solid blue; */
    }
    5% {
      margin-top: 0px;
     /* border: solid purple;*/
    }
    33% {
      margin-top: -0px;
      /*border: solid yellow;*/
    }
    38% {
      margin-top: 0px;
     /* border: solid orange;*/
    }
    66% {
      margin-top: -90px;
     /* border: solid brown;*/
    }
    71% {
      margin-top: 0px;
     /* border: solid silver;*/
    }
    99.99% {
      margin-top: 0px;
     /* border: solid black;*/
    }
    100% {
      margin-top: 0px;
    /*  border: solid #058ed9;*/
    }
  }
  @keyframes flip3 {
      0% {
      margin-top: -10px;
     /* border: solid blue; */
    }
    
    33% {
      margin-top: -100px;
      /*border: solid yellow;*/
    }
    
    66% {
      margin-top: -200px;
     /* border: solid brown;*/
    }
 
    100% {
      margin-top: -10px
    /*  border: solid #058ed9;*/
    }
  }






  #port_1{
    //background-image: url("Theme_Store_5.png"); 
     //background-image: url("prestige_theme_screenshot.png"); 
     background-image: url("task_lad_blog_cover_1.png"); 
    
    transition-timing-function: ease-out;
  
    /* Create the parallax scrolling effect */
   
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #port_2{
    background-image: url("Theme_Store_2.png"); 
    
    transition-timing-function: ease-out;
  
    /* Create the parallax scrolling effect */
    /*background-attachment: fixed;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #port_3{
   
    
     //background-image: url("spicy_baby_screenshot.png"); 
     background-image: url("task_lad_blog_cover_2.png"); 
     transition-timing-function: ease-out;
   
     /* Create the parallax scrolling effect */
     /*background-attachment: fixed;*/
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
  }

  #port_4{
    //background-image: url("say_cheese_screenshot.png"); 
     background-image: url("task_lad_blog_cover_test.png"); 
     transition-timing-function: ease-out;
   
     /* Create the parallax scrolling effect */
     /*background-attachment: fixed;*/
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
  }

  #port_5{
    background-image: url("Theme_Store_2.png"); 
    
     transition-timing-function: ease-out;
   
     /* Create the parallax scrolling effect */
     /*background-attachment: fixed;*/
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
  }

#port_6{
   
  background-image: url("Theme_Store_7.png"); 
   background-image: url("task_lad_blog_cover_test_2.png"); 
     transition-timing-function: ease-out;
   
     /* Create the parallax scrolling effect */
     /*background-attachment: fixed;*/
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
  }
  #mobile_header_section{
    display: none;
  }

  #mobile_hero_text{
    display: none;
  }

  .wrapper{
    //display: none;
  }

  .mobile_contact_us_grid-container {
    display: none;
  }

  .shopify_partner_logo{
    display: none;
    
  }

  .mobile_services_grid-container{
    display: none;
  }



  @media (max-width: 1310px) {

    #about_us_animation_1{
      display:none;
    }
     #about_us_animation_2{
      display:none;
    }
     #about_us_animation_3{
      display:none;
    }
     #about_us_animation_4{
      display:none;
    }

    .mobile_services_grid-container{
       
        display: grid;
        border:solid green 10px;
        grid-template-rows: auto auto auto auto;
  }
    .snip1574 {
      font-family: 'Lato', Arial, sans-serif;
      position: relative;
      display: inline-block;
      overflow: hidden;
      margin: 10px;
      min-width: 250px;
      max-width: 310px;
      width: 100%;
      background-color: #000000;
      color: #ffffff;
      text-align: center;
      font-size: 16px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    }
    
    .snip1574 * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    .snip1574 img {
      max-width: 100%;
      vertical-align: top;
      opacity: 0.7;
    }
    
    .snip1574 figcaption {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 80px 10% 15%;
    }
    
    .snip1574 figcaption:before {
      font-family: 'FontAwesome';
      content: "\201C";
      position: absolute;
      font-size: 170px;
      opacity: 0.35;
      font-style: normal;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      top: 0px;
      left: 50%;
    }
    
    .snip1574 blockquote {
      padding: 0;
      margin: 0;
      font-style: italic;
      font-size: 1.2em;
    }
    
    .snip1574 h3 {
      font-family: 'Oswald';
      text-transform: uppercase;
      font-size: 20px;
      font-weight: 400;
      line-height: 24px;
      margin: 3px 0;
    }
    
    .snip1574 h5 {
      font-weight: 400;
      margin: 0;
      text-transform: uppercase;
      color: #bbb;
      letter-spacing: 1px;
    }
    


    .mobile_contact_us_grid-container {
      display: grid;
      grid-template-rows: auto auto auto;
      background-color:#4B5267;
     
    }
    .mobile_contact_us_grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      padding: 20px;
      font-size: 15px;
      text-align: left;
    }
    input[type=text] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      box-sizing: border-box;
     // border: none;
      border-bottom: 2px solid black;
    }

    .wrapper {
      max-width: 1100px;
      width: 100%;
      position: relative;
      display:block;
    }
    .wrapper i {
      top: 50%;
      height: 50px;
      width: 50px;
      cursor: pointer;
      font-size: 1.25rem;
      position: absolute;
      text-align: center;
      line-height: 50px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 3px 6px rgba(0,0,0,0.23);
      transform: translateY(-50%);
      transition: transform 0.1s linear;
    }
    .wrapper i:active{
      transform: translateY(-50%) scale(0.85);
    }
    .wrapper i:first-child{
      left: -22px;
    }
    .wrapper i:last-child{
      right: -22px;
    }
    .wrapper .carousel{
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: calc((100% / 3) - 12px);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 16px;
      border-radius: 8px;
      scroll-behavior: smooth;
      scrollbar-width: none;
    }
    .carousel::-webkit-scrollbar {
      display: none;
    }
    .carousel.no-transition {
      scroll-behavior: auto;
    }
    .carousel.dragging {
      scroll-snap-type: none;
      scroll-behavior: auto;
    }
    .carousel.dragging .card {
      cursor: grab;
      user-select: none;
    }
    .carousel :where(.card, .img) {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .carousel .card {
      scroll-snap-align: start;
      height: 342px;
      list-style: none;
      background: #fff;
      cursor: pointer;
      padding-bottom: 15px;
      flex-direction: column;
      border-radius: 8px;
      width:100%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      
      


       
     
    }
    #theme_store_1{
      background-image: url("Theme_Store_1.png"); 
      transition-timing-function: ease-out;
    
      /* Create the parallax scrolling effect */
     
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }


    #theme_store_2{
      background-image: url("Theme_Store_2.png"); 
       transition-timing-function: ease-out;
     
       /* Create the parallax scrolling effect */
       /*background-attachment: fixed;*/
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
    }

   
    #theme_store_3{
      background-image: url("Theme_Store_3.png"); 
       transition-timing-function: ease-out;
     
       /* Create the parallax scrolling effect */
       /*background-attachment: fixed;*/
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
    }


    .carousel .card .img {
      background: #8B53FF;
      height: 148px;
      width: 148px;
      border-radius: 50%;
    }
    .card .img img {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid #fff;
    }
    .carousel .card h2 {
      font-weight: 500;
      font-size: 1.56rem;
      margin: 30px 0 5px;
    }
    .carousel .card span {
      color: #6A6D78;
      font-size: 1.31rem;
    }
    @media screen and (max-width: 900px) {
      .wrapper .carousel {
        grid-auto-columns: calc((100% / 2) - 9px);
      }
    }
    @media screen and (max-width: 600px) {
      .wrapper .carousel {
        grid-auto-columns: 100%;
      }
    }


    #mobile_header_section{
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        display:flex; 
        justify-content:space-between;
      }

      #mobile_hero_text{
        display:block; 
        z-index: 1;
      }

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

    .hero-text2 {
        display:none;
        grid-template-rows: auto auto auto;
        bottom: auto;
        left: initial;
        border: solid blue;
        z-index: 1;
        color: #fff;
        padding:5%;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        text-align: center;
      
    }
    
      .hero-text2 p {
        font-size: 100%;
        font-weight: 400;
        border: solid purple;
        
      } 

      #hero_header_text_1{
        font-size: 50%;
        text-align: center;
        
      }

      #shop_img{
        display: none;
      }

      .wordCarousel {
        position: relative;
        display:block;
        justify-content: center;
        align-items: center;
        font-size: 500%;
        font-weight: 400;
        color: #eee;
        border: solid yellow;
        top:0;
        margin:5%; 
      }

      .wordCarousel div {
        overflow: hidden;
        height: 110px;
        align-items: center;
        justify-content: center;
        border: solid blue;
      }

      .wordCarousel div li {
        font-family: Serif;
        color: #eee;
        font-weight: 700;
        padding: 0 10px;
        height: 55px;
        margin-bottom: 45px;
        display: block; 
      }

      .flip3{
        margin:5%;
        font-size: 50%;
        
    }

    #header_section{
        display: none;
        background-color: red;
    }

    #final_hero_section{
      /*   display: none; */
      height:100vh;
        min-height:800px;
    }

    #about_us_section{
         /*   display: none; */
        height: 80vh;;
    }

    #about_us_container{
      /*   display: none; */
    }

    #about_us_paragraph{
      font-size: 22px;
      
    }
    #about_us_section2{
         display: none;
    }
    #about_us_section3{
       display: none;
    }
    #service_section_1{
      //display: none;
      height:60vh; 
      min-height:500px;
    }
    #service_section_2{
      display: none;
    }
    #service_section_3{
      display: none;
    }
    #hero_section{
         //display: none;
    }
    #portfolio_section{
        display: none; 
    }
    #testimonials_section{
        display: none;
    }
    #blog_section{
        display: none;
    }

    #contact_us_section{
      display: none;
    }
    #footer{
     /*    display: none;  */
    }


    #spin {
        //color:red;
    }

    #spin:after {
        content:"";
        animation: spin 6s linear infinite;
    }
      
    .red {
      color:#058ed9
    }
    
    .blue {
     color: goldenrod ;
    }
    
    .green {
      color:green;
    }

      @keyframes spin {
     
          0% {
            content: "Brand!";
            
          }
          33.33% {
            content: "Ecommerce Store!";
           
          }
          66.67% {
            content: "Sales!";
      
          }
          100% {
            content: "Brand!";
            
          }

      .spin_animation {
        animation: spin 4s steps(4) infinite;
      }

      .mobile_services_grid-container {
        display: grid;
        grid-template-rows: auto auto auto auto;
        
        
        
      }
      .mobile_services_grid-item {
        background-color: rgba(255, 255, 255, 0.8);
      
        font-size: 30px;
        text-align: center;
        border:solid red;
      }



      #mobile_services_grid-item_1{
        /*background-image: url("services_img_5.png"); */
        transition-timing-function: ease-out;
        position: relative;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: left;
      }

      #mobile_services_grid-item_1 video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      #mobile_services_grid-item_2{
        /*background-image: url("services_img_5.png"); */
        transition-timing-function: ease-out;
        position: relative;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 1;
      }

      #mobile_services_grid-item_2 video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        
      }
    
      #mobile_services_grid-item_3{
        /*background-image: url("services_img_5.png"); */
        transition-timing-function: ease-out;
        position: relative;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      #mobile_services_grid-item_3 video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      #mobile_services_grid-item_4{
        /*background-image: url("services_img_5.png"); */
        transition-timing-function: ease-out;
        position: relative;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      #mobile_services_grid-item_4 video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
  }

  .shopify_partner_logo{
    display: block;
     background-image: url("shopify_partner_logo.jpg"); 
     transition-timing-function: ease-out;
 
     /* Create the parallax scrolling effect */
    height: 150px;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     
  }
  
  

  @media (max-width: 450px) {
    .mobile_square{
      margin-top:5%;
      
    }
  }


@media screen and (max-width: 900px) {
    #service_section_1{
      display: none;
     
    }
}

  
  
    </style>