:root{
    --color-red: #DC143C;
    --color-pink: hsla(349, 91%, 65%, 0.591);
    --color-peach: hsla(1, 74%, 88%, 0.532);
    --color-beige: #FDEBD0;
    --color-sky: #008ff4;
    --main-font-family: "Amatic SC" , sans-serif;
    --secondary-font-family: "Oswald" , sans-serif;
    --wid-fit-content: fit-content;
    --transition-second: all 1s 1s ease;
    --transition-half: all 0.5s 0.5s ease;
}
.text-red{
    color: var(--color-red);
}
.bg-red{
    background-color: var(--color-red);
}
.text-pink{
    color: var(--color-pink);
}
.bg-pink{
    background-color: var(--color-pink);
}
.text-peach{
    color: var(--color-peach);
}
.bg-peach{
    background-color: var(--color-peach);
}
.text-beige{
    color: var(--color-beige);
}
.bg-beige{
    background-color: var(--color-beige);
}
.text-sky{
    color: var(--color-sky);
}
.bg-sky{
    background-color: var(--color-sky);
}
.main-family{
    font-family: var(--main-font-family);
}
.sec-family{
    font-family: var(--secondary-font-family);
}
.w-fit{
    width: var(--wid-fit-content);
}
.trans-sec{
    transition: var(--transition-second);
}
.trans-half{
    transition: var(--transition-half);
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container{
    height: 100vh;
    width: 100%;
    background-image: url(../../ResponsiveAdvancedSliderImages/sunSeaBackgroundImage.jpg);
    background-size: 100% 100vh;
    background-position: center center;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-slider-heading{
    font-size: 32px;
    font-weight: 900;
    box-shadow: 0px 0px 5px 3px #005;
    cursor: pointer;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-slider-heading:hover{
    background-color: var(--color-pink);
    color: var(--color-beige);
    box-shadow: 0px 0px 5px 3px var(--color-peach);
    transform: scale(1.1) rotatex(360deg) skew(1deg , 1deg);
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-slider-heading::after{
    content: "";
    position: absolute;
    top: 63%;
    right: 50%;
    transform: translate(50% , 50%);
    height: 12px;
    width: 0%;
    border: solid var(--color-sky) 4px;
    border-right-width: 0px;
    border-left-width: 0px;
    transition: width 2s 2s ease;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-slider-heading:hover::after{
    width: 90%;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-slider-heading::before{
    content: "";
    position: absolute;
    top: 20%;
    right: 99%;
    bottom: 20%;
    left: 1%;
    border: 4px var(--color-sky) solid;
    border-radius: 9px;
    transition: top 2s 2s ease , right 2s 2s ease , bottom 2s 2s ease , left 2s 2s ease;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-slider-heading:hover::before{
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-slider-description{
    font-size: 20px;
    font-weight: 600;
    width: 90%;
    box-shadow: 0px 0px 3px 3px #005;
    text-align: justify;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-slider-description:hover{
    background-color: var(--color-pink);
    color: var(--color-beige);
    box-shadow: 0px 0px 3px 3px var(--color-beige);
    transform: scale(1.08) skew(0.5deg , 0.5deg);
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-slider-description::after{
    content: "";
    position: absolute;
    top: 90%;
    right: 20%;
    bottom: 10%;
    left: 40%;
    border: solid 4px var(--color-sky);
    border-radius: 10px;
    transition: top 2s 2s ease , right 2s 2s ease , bottom 2s 2s ease , left 2s 2s ease;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-slider-description:hover::after{
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-responsive-slider-buttons-container{
    box-shadow: 0px 0px 5px 3px #005;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-responsive-slider-buttons-container:hover{
    background-color: var(--color-pink);
    box-shadow: 0px 0px 5px 3px var(--color-beige);
    transform: scale(1.05) skew(0.75deg , 0.75deg);
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-responsive-slider-buttons-container::before{
    content: "";
    position: absolute;
    top: 100%;
    right: 100%;
    bottom: 100%;
    left: 100%;
    border: solid 4px var(--color-sky);
    border-radius: 10px;
    transition: top 2s 2s ease , right 2s 2s ease , bottom 2s 2s ease , left 2s 2s ease;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-responsive-slider-buttons-container:hover::before{
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-responsive-slider-buttons-container .button{
    font-size: 26px;
    font-weight: 900;
    width: 48%;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container  div .main-responsive-slider-buttons-container .button:hover{
    transform: scale(1.04) skew(1deg , 1deg) rotatex(360deg);
    box-shadow: 0px 0px 4px 3px var(--color-beige);
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-responsive-slider-buttons-container .button::after{
    content: "";
    position: absolute;
    top: 60%;
    right: 50%;
    bottom: 50%;
    transform: translate(50% , 50%);
    height: 15px;
    border: solid 3px var(--color-red);
    border-right-width: 0px;
    border-left-width: 0px;
    width: 0%;
    transition: width 2s 2s ease;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-responsive-slider-buttons-container .button:hover::after{
    width: 80%;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-responsive-slider-buttons-container .button::before{
    content: "";
    position: absolute;
    top: 75%;
    right: 50%;
    bottom: 25%;
    transform: translate(50% , 50%);
    height: 4px;
    width: 0%;
    background-color: var(--color-beige);
    transition: width 2s 2s ease;
}
.main-responsive-natural-slider-container .main-responsive-slider-heading-container div .main-responsive-slider-buttons-container .button:hover::before{
    width: 60%;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container{
    box-shadow: 0px 0px 8px 5px #005;
    background-image: linear-gradient(to left , #06f8fc , #0063cc);
    transition: all 1s 1s ease;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container:hover{
    box-shadow: 0px 0px 8px 5px #0055cc;
    background-image: linear-gradient(to left , rgba(8, 249, 253, 0.401) , rgba(0, 99, 204, 0.579));
    transform: scale(1.02) skew(0.5deg , 0.5deg);
    border-color: #005 !important;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container{
    box-shadow: 0px 0px 6px 4px #005;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container:hover{
    box-shadow: 0px 0px 6px 4px #DC143C;
    border-color: #fefefe !important;
    transform: scale(1.035) skew(0.25deg , 0.25deg);
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container{
    right: 105%;
    bottom: 10px;
    left: 105%;
    box-shadow: 0px 0px 6px 4px var(--color-sky);
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container:hover{
    border-color: var(--color-sky) !important;
    box-shadow: 0px 0px 6px 4px #005;
    background-color: rgba(6, 248, 252, 0.267)
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container:hover .main-responsive-natural-slide-content-container{
    transform: rotate(360deg);
    right: 15%;
    left: 15%;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container .secondary-slide-heading{
    font-size: 28px;
    font-weight: 900;
    box-shadow: 0px 0px 4px 3px #005;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container .secondary-slide-heading:hover{
    box-shadow: 0px 0px 4px 3px #DC143C;
    transform: scale(1.1) skew(1deg , 1deg) rotatex(360deg);
    background-color: var(--color-beige);
    color: var(--color-pink);
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container .secondary-slide-heading::after{
    content: "";
    position: absolute;
    top: 70%;
    left: 20%;
    height: 4px;
    background-color: var(--color-sky);
    width: 0%;
    border-radius: 10px;
    transition: width 2s 2s ease;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container .secondary-slide-heading:hover::after{
    width: 75%;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container .secondary-slide-heading::before{
    content: "";
    position: absolute;
    top: 80%;
    right: 20%;
    height: 4px;
    width: 0%;
    border-radius: 10px;
    background-color: var(--color-sky);
    transition: width 2s 2s ease;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container .secondary-slide-heading:hover::before{
    width: 75%;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container .secondary-slide-description{
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0px 0px 6px 4px #005;
    text-align: justify;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container .secondary-slide-description:hover{
    color: var(--color-pink);
    background-color: var(--color-beige);
    box-shadow: 0px 0px 6px 4px #DC143C;
    transform: scale(1.08) rotatex(360deg) skew(1deg , 1deg);
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container .secondary-slide-description::after{
    content: "";
    position: absolute;
    top: 50%;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    background-color: var(--color-sky);
    z-index: -999;
    transition: width 2s 2s ease , height 2s 2s ease;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container .secondary-slide-description:hover::after{
    height: 75px;
    width: 75px;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container .read-more-button{
    font-size: 24px;
    font-weight: 900;
    box-shadow: 0px 0px 5px 3px #005;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container .read-more-button:hover{
    box-shadow: 0px 0px 5px 3px #DC143C;
    transform: scale(1.1) rotatex(360deg) skew(2deg , 2deg);
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container .read-more-button::before{
    content: "";
    position: absolute;
    top: 0%;
    right: 100%;
    bottom: 0%;
    left: 0%;
    background-color: rgba(220, 20, 60, 0.373);
    z-index: -999;
    transition: right 2s 2s ease;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-content-container .read-more-button:hover::before{
    right: 0%;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container:hover .main-responsive-natural-slide-layer-icons-container{
    top: 0% !important;
    right: 0% !important;
    bottom: 0% !important;
    left: 0% !important;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-img-container .main-responsive-natural-slide-layer-icons-container div .icon-circle a{
    height: 50px;
    width: 50px;
    box-shadow: 0px 0px 3px 3px #DC143C;
    font-size: 24px;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-images-container section section .main-responsive-natural-slide-image-container .main-responsive-natural-slide-img-container .main-responsive-natural-slide-layer-icons-container div .icon-circle a:hover{
    box-shadow: 0px 0px 3px 3px #f5f5f5;
    color: #DC143C;
    background-color: var(--color-beige) !important;
    transform: scale(1.2) skew(3deg , 3deg) rotatex(360deg);
    border-color: #DC143C !important;
}
.no-padding{
    padding: 0px !important; 
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-light-box-container .main-responsive-natural-slider-light-box-image-container{
    width: 60%;
    height: 70vh;
    box-shadow: 0px 0px 6px 4px var(--color-sky);
    /* background-image: url(../../ResponsiveAdvancedSliderImages/SunImage.jpg); */
    background-size: 100% 100vh;
    background-position: center center;
    cursor: pointer;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-light-box-container .main-responsive-natural-slider-light-box-image-container:hover{
    border-color: var(--color-sky) !important;
    box-shadow: 0px 0px 6px 4px var(--color-red);
    transform: scale(1.03) skew(1deg , 1deg);
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-light-box-container .main-responsive-natural-slider-light-box-image-container .icon-circle{
    height: 50px;
    width: 50px;
    box-shadow: 0px 0px 3px 3px #f5f5f5;
    cursor: pointer;
}
.main-responsive-natural-slider-container .main-responsive-natural-slider-light-box-container .main-responsive-natural-slider-light-box-image-container .icon-circle:hover{
    box-shadow: 0px 0px 3x 3px #005;
    background-color: #0055cc !important;
    color: var(--color-beige) !important;
    border-color: #DC143C !important;
    transform: scale(1.25) skew(3deg , 3deg) rotate(360deg);
}