/*
 Theme Name:   GP Starter
 Theme URI:    https://generatepress.com
 Description:  GeneratePress child theme by DK John Digital
 Author:       DK John
 Author URI:   https://dkjohn.com
 Template:     generatepress
 Version:      0.1
*/


/* Root values */
:root {
	--px-40: 40px;
	--px-24: 24px;
}



.site-wrapper {
	max-width: 1920px;
	margin: auto;
}



/* Set the main content area to a minimum of 65vh */
#main {
  min-height: 75vh;
} 



/* Header container padding */
 header#masthead {
    padding-left: var(--px-40);
    padding-right: var(--px-40);
}

@media screen and (max-width: 768px) {
    header#masthead, .con-px {
        padding-left: var(--px-24);
        padding-right: var(--px-24);
    }
}
/* End Header container padding */



/* HELPER CLASSES */

/* __container X padding class */
.con-px {
	padding-left: var(--px-40);
    padding-right: var(--px-40);
}

@media screen and (max-width: 768px) {
    .con-px {
        padding-left: var(--px-24);
        padding-right: var(--px-24);
    }
}

/* END HELPER CLASSES */



/* Fluid Typography Scale */

h1, .fs-h1 {
	font-size: clamp(3rem, 2.7273rem + 1.0909vw, 3.6rem);
}

h2, .fs-h2 {
	font-size: clamp(2.25rem, 2.0455rem + 0.8182vw, 2.7rem);
}

h3, .fs-h3 {
	font-size: clamp(1.875rem, 1.7045rem + 0.6818vw, 2.25rem);
}

h4, .fs-h4 {
	font-size: clamp(1.5rem, 1.3636rem + 0.5455vw, 1.8rem);
}

h5, .fs-h5 {
	font-size: clamp(1.25rem, 1.1364rem + 0.4545vw, 1.5rem);
}

h6, .fs-h6 {
	font-size: clamp(1.125rem, 1.0227rem + 0.4091vw, 1.35rem);
}

/* End Fluid Typography Scale */


/* Slider animation */
/* Classes:  slide-animation, slider-wrapper (for softer)*/
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100%));
  }
}


.slide-animation {
  animation: 22s slide infinite linear;
}


/* __Slider both side softer */

.slider-wrapper::before, .slider-wrapper::after {
    content: "";
    display: block;
    position: absolute;
    width: 120px;
    height: 100%;
    top: -3px;
    z-index: 99;
    filter: blur(5px);
}

.slider-wrapper::before {
    left: -15px;
    background: linear-gradient(to right, #429afb00,  #3f97fb 10%, #5babf800);
}

.slider-wrapper::after {
    right: -12px;
    background: linear-gradient(to left,  #429afb00,  #3f97fb 1%, #5babf800);
}

@media screen and (max-width: 768px) {
   .slider-wrapper::before, .slider-wrapper::after {
       width: 60px;
   }
}

/* End Slider animation */