/*
Theme Name: Raspc
Theme URI: https://harrislarry.com
Author: Harris Larry
Author URI: https://www.harrislary.com
Description: Theme developed for The Bulls Trading
Version: 1.4
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: raspc
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/






html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    font-family: "Sora", sans-serif;
}



a {
    text-decoration: none !important;
    cursor: pointer !important;
}


button {
    border: none;
    cursor: pointer;
}



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

.centVH {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.centH {position: absolute; left: 50%; transform: translateX(-50%);}
.centV {position: absolute; top: 50%; transform: translateY(-50%);}










/* Slick Slider Properties */

.slick-prev, .slick-next {
  border-radius: 50px;
  border: none; color: #FFF;
  
  
  
  backdrop-filter: blur(11px) saturate(176%);
    -webkit-backdrop-filter: blur(11px) saturate(176%);
    background-color: rgba(255, 255, 255, 0.22);
  
  
  
  z-index: +90;
  position: absolute;
}



.slick-prev > svg, .slick-next > svg {width: 25px; height: 25px; margin: 8px;}


.slick-prev {
    left: 1%;
    top: 50%;
}

.slick-next {
    right: 1%;
    top: 50%;
}


.slick-hold {
    justify-content: center; gap: 2vw; display: flex;
}


/* Slick Slider Properties */






#social {
    height: 45px;
}


#social > a > span {width: 41px; height: 41px; background-size: cover; display: block; float: left; margin-right: 20px;}
.whatsapp-special-button {background-image: url(assets/whatsapp.png); background-size: cover; z-index: +200;}


/* */



nav {
    width: 100%;
    height: 100px;
    position: relative;
    z-index: +7;
	border-top: 4px solid #E3B505;
}


#st-login {
    width: 100%;
    height: 30px;
    background: #E3B505;
    position: relative;
}



#st-login > div {
    width: 90%;
}

#st-login > div > a {
    font-size: 14px;
    font-family: "Sora", sans-serif;
    color: #FFFFFF;
    float: right;
}


#st-login > div > svg {
    color: #FFFFFF;
    margin-right: 10px;
    float: right;
}






.btnOne {
    border: 2px solid #FFFFFF !important;
    border-radius: 10px;
}

#ebc-cover {
width: 100%;
height: 100vh;
min-height: 1100px;
background-image: url(https://thebullstrading.com/wp-content/uploads/2023/03/banner_bg-scaled.webp);
background-size: cover;
position: relative;
}


header {
    width: 90%;
    max-width: 1200px;
    height: auto;
}


header > h1 {font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #FFFFFF; margin-bottom: 20px; margin-top: 10px;}
header > span {font-family: 'Sora', sans-serif; color: #FFFFFF; height: auto; margin-bottom: 30px;}






.black-btn {
    font-family: var(--sfn);
    font-size: 16px;
    padding: 16px 32px 16px 32px;
    border-radius: 10px;
    background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 2%, rgba(119,94,20,1) 100%, rgba(227,181,5,1) 100%);
    color: #FFF;
}


.updated-cta-btn {
    font-family: var(--sfn);
    font-size: 16px;
    padding: 16px 32px 16px 32px;
    border-radius: 10px;
    background: transparent;
    border: 2px solid #FFFFFF;
    color: #FFF;
	transition: 0.6s all;
}

.updated-cta-btn:hover {background: #E3B505; border: 2px solid #E3B505;}


.black-btn:after, .updated-cta-btn:after {
    content: '';
    background-image: url(assets/arrow-right.svg); 
    background-size: cover;
    display: inline-block;
    width: 22px;
    height: 16px;
    margin-left: 10px;}


.black-btn:hover {
    background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 2%, rgba(119,94,20,1) 52%, rgba(227,181,5,1) 100%);
transition: 0.7s ease-in-out all;
}


#bar-logos {
    width: 100%;
    height: 210px;
}

.minLgSc {
	height: 80px;
	margin-right: 30px;
	filter: grayscale(1);
}

.logoScroll {}


#white-container {
    background: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 90%;
    height: 600px;
    max-width: 1200px;
}



#wc-lft {
    align-content: center;
    display: grid;
}

#wc-lft > h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--bfn);
    color: #000000;
    margin-bottom: 10px;
}


#wc-lft > p {
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--sfn);
    color: #000000;
    margin-bottom: 50px;
}


.wc-rgt-imgx {
width: 350px;
    height: 434px;
    background-image: url(https://thebullstrading.com/wp-content/uploads/2023/01/s4.png);
	    filter: grayscale(1);
    background-size: cover;
    background-position: -123px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    border-top-right-radius: 150px;
    border-top-left-radius: 150px;
	border-bottom-right-radius: 150px;
	border: 2px solid #E3B505;
	border-bottom: none;
}


.wc-rgt-imgx:hover {filter: none; transition: 0.8s ease-in-out;}



#grey-white-container {
    width: 100%;
    height: 600px;
    background: #FFFFFF;
    border-top: 1px solid #E1E1E1;
    border-bottom: 4px solid #E3B505;
    position: relative;
}


#cent-gwc > h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 35px;
}


#cent-gwc > p {
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--sfn);
}


.gwc-abs-img {    bottom: -56px;
    position: absolute;
    left: 50px;}

.border-btn {
    border: 1px solid #000000;
    border-radius: 20px;
    width: 160px;
    height: 50px;
    background: #FFFFFF;
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}



#white-simple-container {width: 100%; height: 1000px; position: relative;}


#wsc-hold {width: 90%;max-width: 1024px;}

#wsc-hold > h2 {font-family: 'Space Grotesk', sans-serif;
    font-size: 30px;
    text-align: left;}


#wsc-hold > p {font-family: 'Space Grotesk', sans-serif;
    font-size: var(--sfn);
    text-align: left;
    margin-top: 50px;
   }

.video-block {
    width: 100%;
    height: 600px;
    border: 1px solid #E3B505;
}


#black-testimonials-container {
    width: 100%;
    height: 706px;
    background: #1D1E21;
    position: relative;
	border-bottom: 6px solid #E3B505;
}




#black-testimonials-container > img {
    top: -100px;
}




#black-testimonials-container > h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 50px;
    color: #fff;
    width: 90%;
    max-width: 600px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    text-align: center;
}



.testimonials-e410 {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}


.e410 > p {
    font-family: "Space Grotesk", sans-serif;
    font-size: 20px;
    color: #f2f2f2;
    text-align: center;
}


.e410-persona {
    width: 250px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.e410-persona-img {
    width: 70px;
    height: 70px;
    border-radius: 70px;
    background: red;
    display: inline-block;
    float: left;
}

.e410-persona-img-alt {
    font-family: "Space Grotesk", sans-serif;
    color: #FFFFFF;
    font-size: var(--sfn);
    display: inline-block;
    margin-left: 15px;
    margin-top: 25px;
}







/* CONTACT PAGE */



form {
    min-width: 300px;
    width: 90%;
    max-width: 500px;
    height: auto;
}


form > input {
    width: 100%;
    height: 50px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 22px;
    background: transparent;
    border-width: 0px 0px 2px 0px;
    border-color: #FFFFFF;
    color: #FFFFFF;
    border-style: solid;
    margin-bottom: 20px;
}



/*  PRICING & FAQS*/

#imported-from-bc-child {
    min-width: 300px;
    width: 400px;
    height: 330px !important;
    background-image: url(https://thebullstrading.com/wp-content/uploads/2023/03/banner_bg-scaled.webp);
	background-size: cover;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    margin-top: 70px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* #imported-from-bc-child > span {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    text-align: center;
    color: #e3b505;
    display: inline-block;
    margin-top: 14px;
    } */


#imported-from-bc-child > h3 {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    font-family: "Space Grotesk", sans-serif;
    font-size: 50px;
    text-align: center;
    color: #fff;
}


#imported-from-bc-child > p {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    font-family: "Sora", sans-serif;
    font-size: 15px;
    color: #fff;
    text-align: center;
}















/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    font-family: "Sora", sans-serif;
  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .accordion:hover {
    background-color: #ccc;
  }
  
  /* Style the accordion panel. Note: hidden by default */
  .panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
    font-family: "Sora", sans-serif;
    font-size: 14px;
    height: 170px;
  }






/*
------
*/


#nav-rgt-mb {display: none; background: rgba(0, 0, 0, 0.5); padding: 25px;}


@media screen and (max-width: 600px) {
    
    .es {display: none !important; visibility: hidden !important;}
	
	.gwc-abs-img {display: none;}
	.wc-rgt-imgx {display: none;}

    :root {
        --sfn: 16px;
        --bfn: 32px;
    }
    
    
    
    .whatsapp-special-button {
        width: 40px;
        height: 40px;
        border-radius: 40px;
        position: fixed;
        right: 20px;
        bottom: 35px;
    }

    header > h1 {width: 90%; font-size: 60px;}
    header > span {width: 90%; display: inline-block; font-size: 18px;}


    #nav-lft {display: none;}
    #nav-rgt {width: 90%; height: 70px; margin-left: auto; margin-right: auto; display: block;}


    #nav-rgt-mb > a > button {
        width: 100%;
        height: 50px;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 16px;
        text-transform: uppercase;
        color: #FFFFFF;
        border: none;
        background: transparent;
    }


    .mb {
    width: 32px;
    height: 32px;
    display: inline-block !important;
    margin-top: 22px;
    background: transparent;
    }



    #nav-rgt-ds {display: none;}

    #wc-lft {
        width: 100%; height: 60%;
    }


    #wc-rgt {
        width: 100%; height: 40%;
    }


    #wsc-hold > h2 {
        width: 100%;
    }

    #wsc-hold > p {
        width: 100%;
    }



    #cent-gwc {
        width: 90%;
    }



    #cent-gwc > h2 {
        width: 100%;
    }

    #cent-gwc > p {
        width: 100%;
    }

}

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

	.gwc-abs-img {display: none;}
	.wc-rgt-imgx {display: none;}

    :root {
        --sfn: 18px;
        --bfn: 45px;
    }


    #nav-lft {width: 30%; height: 70px; display: inline-block; float: left; margin-top: 5px;}
    #nav-rgt {width: 70%; float: right;}


    
    #nav-rgt-ds > a > button {
        width: 100%;
        height: 50px;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 16px;
        text-transform: uppercase;
        color: #FFFFFF;
        border: none;
        background: transparent;
    }




    header > h1 {width: 90%;  font-size: 80px;}
    header > span {width: 90%; display: inline-block; font-size: 18px;}


    #wc-lft {
        width: 48%; height: 100%; float: left;
    }


    #wc-rgt {
        width: 48%; height: 100%; float: right;
    }



    #wsc-hold > h2 {
        width: 600px;
    }

    #wsc-hold > p {
        width: 600px;
    }



    #cent-gwc > h2 {
        width: 530px;
    }

    #cent-gwc > p {
        width: 530px;
    }

}

@media screen and (min-width: 1201px) {


    :root {
        --sfn: 18px;
        --bfn: 45px;
    }
    
    
    .whatsapp-special-button {
        width: 60px;
        height: 60px;
        border-radius: 60px;
        position: fixed;
        right: 20px;
        bottom: 15px;
    }



    #nav-lft {width: 200px; height: 70px; display: inline-block; float: left; margin-top: 5px;}
    #nav-rgt {width: 900px; float: right; margin-top: 25px;}

    #nav-rgt-ds > a > button {
        width: 170px;
        height: 50px;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 16px;
        text-transform: uppercase;
        color: #FFFFFF;
        border: none;
        background: transparent;
    }



    header > h1 {width: 800px; font-size: 120px;}
    header > span {width: 600px; display: inline-block; font-size: 20px;}


    
    #wc-lft {
        width: 48%; height: 100%; float: left;
    }


    #wc-rgt {
        width: 48%; height: 100%; float: right;
    }


    #wsc-hold > h2 {
        width: 600px;
    }

    #wsc-hold > p {
        width: 600px;
    }


    #cent-gwc > h2 {
        width: 530px;
    }

    #cent-gwc > p {
        width: 530px;
    }



}