/*
 Theme Name:   Divi Child
 Theme URI:    https://devgirl.co.za
 Description:  A child theme for Divi
 Author:       devgirl
 Author URI:   https://devgirl.co.za
 Template:     Divi
 Version:      1.0.0

*/

@media screen {

  @font-face {
    font-family: "Poppins";
    src: url(fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
    font-display: swap;
  }	


  @font-face {
    font-family: "OpenSans";
    src: url(fonts/OpenSans/OpenSans-VariableFont_wdth,wght.ttf) format('truetype');
    font-display: swap;
  }	
 

  body{
    font-size:clamp(var(--wp--preset--font-size--m), 3vw, var(--wp--custom--mobile-font--m) ) !important;
  
  }


  .noshow{
    line-height:0;
    height:0;
    color:white;
    padding:0;
    margin:0;
    position:relative;
    z-index:-101;
  }

  .noshow h2, 
  .noshow h3,
  .noshow h4,
  .noshow h5,
  .noshow h6,
  .noshow p, 
  .noshow img, 
  .noshow a, 
  .noshow span{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  .center{
    text-align:center;
  }

  .no-wrapper{
    width:100%;
  }

  .full-wrapper{
    width:94%;
    margin: 0 3%;
  }

  .large-wrapper{
    max-width:1200px; 
    margin:0 auto; 	
  }

  .wrapper{
    max-width:1024px; 
    margin:0 auto; 
  }
  
  .small-wrapper{
    max-width:960px; 
    margin:0 auto; 
  }

  .text-wrapper{
    max-width:750px;
    margin:0 auto;
  }

  .tiny-wrapper{
    max-width:500px;
    margin:0 auto;
  }  



  .clear{
    clear:both;
  }


  .mega-content-padding{
    padding:100px 0 !important;
  }

  .content-padding{
    padding:50px 0 !important;;
  }

  .small-content-padding{
    padding:20px 0 !important;;
  }

  .gap{
    gap:20px;
  }

  .flex-main-blocks .wp-block-cover{
    flex: 1 1 250px;
  }

  .no-margins{
    margin:0;
  }

  .no-padding{
    padding:0;
  }


  .devgirl-button-link{
    font-weight:600;
  }


  /* whatsapp chat */
  #whatsapp-chat{
    position:fixed;
    z-index:10;
    bottom:10px;
    right:10px;
    max-width: 155px;
  }

  #whatsapp-chat:hover{
    opacity:0.8;
  }
  /* END whatsapp chat */



  #logo {
    max-width: 180px;
  }

  #top-menu li a {
    font-size:clamp(var(--wp--preset--font-size--s), 3vw, var(--wp--custom--mobile-font--s) ) !important;
  
  }



  .nav li ul{
    width:320px;
    background-color:var(--wp--preset--color--dark);
  }

  #top-menu li a{
    color:var(--wp--preset--color--offset-light);

  }

  #top-menu li li a{
    padding:5px 10px;
    width:300px;
  }

  #page-container{
    padding:0 !important;
    margin:0 !important;
    
  }

  .grey-bg{
    background-color:var(--wp--preset--color--offset-light) !important;
  }

  .grey-bg #main-content{
    background-color:transparent;
  }

  .et-animated-content#page-container {
    -webkit-transition: none;
    transition: none; 
  }

  .et_fixed_nav #main-header{
    position:unset;
  }

  #main-header{
    background-color:var(--wp--preset--color--dark);
  }

  


  h1.custom-title{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }


  #affiliate-logos{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    gap:25px;
    
  }

  #affiliate-logos img{
    flex:0 1 111px;
    width:111px;
  }


  #copyright{
    background-color:#54a3da;
    padding:5px 0;
    font-size:clamp(13px, 4vw, 14px);
    color:white;
    text-transform:uppercase;
  }

  #copyright-container{
    display:flex;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items:center;
  }

  p#copyright-text{
    flex:1;
  }

  #trustworthiness-badges{
    flex:none;
  }

  #trustworthiness-badges img{
    width: 100px;
  }



  /* blog */
	#article-container{
		display:flex;
		flex-wrap:wrap;
		align-items: stretch;
		justify-content:flex-start;	
		gap:20px;
	}

	#article-container .article{
		flex: 1 1 300px;
		background-color: var(--wp--preset--color--light);
    padding: 15px;
    border-radius: 20px;

 
	}

  #article-container .article img{
    border-radius: 20px;
  }



	#article-container .article-text{
		margin-top:5px;
    line-height: var(--wp--custom--line-height--main-font); 
	}

	.article h3{
		margin:0;
    padding:0;

    font-size:26px;
    line-height:30px;	
    font-size: clamp(var(--wp--custom--mobile-font--m), 3vw, var(--wp--preset--font-size--m));
    line-height: clamp(var(--wp--custom--mobile-font--l), 3vw, var(--wp--preset--font-size--l));
    font-weight:bold;
	}

	.article-meta{

	}

	.article p{

	}

	.article h3, 
	.article p, 
	.article a{
		color:black;
	}


/* END blog */




  /* pagination */
  .pagination{
    text-align:center;
    border-top: 1px solid #ccc;
    padding: 30px 0;
  }

  .nav-links a, 
  .nav-links span{
    padding:7px 12px;
    border-radius:10px;
  }

  .nav-links a{
    background-color:var(--wp--preset--color--primary);
    color:var(--wp--preset--color--dark);
  }

  .nav-links span{
    background-color:var(--wp--preset--color--offset-light);
    color:var(--wp--preset--color--dark);
  }

  .nav-links a:hover{
    opacity:0.7;
  }

  /* END pagination */








  /* Woocommerce */
  .woocommerce ul.products li.product a {
    background-color: var(--wp--preset--color--light);
    padding: 15px;
    border-radius: 20px;
    transition-duration: 300ms;
  }



  .woocommerce ul.products li.product .onsale, .woocommerce-page ul.products li.product .onsale, 
  .woocommerce span.onsale, .woocommerce-page span.onsale{
    border-radius: 7px !important;
    padding: 3px 10px !important;
   font-size: clamp(var(--wp--custom--mobile-font--s), 3vw, var(--wp--preset--font-size--s));
    font-weight: bold !important;
    text-transform: uppercase;
  }

  .orderby, .woocommerce div.product form.cart .variations td select, 
  p.woocommerce-result-count, 
  .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price, .woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price del, 
  .et_pb_blurb_0.et_pb_blurb .et_pb_module_header, .et_pb_blurb_0.et_pb_blurb .et_pb_module_header a, .et_pb_blurb_1.et_pb_blurb .et_pb_module_header, .et_pb_blurb_1.et_pb_blurb .et_pb_module_header a, .et_pb_blurb_2.et_pb_blurb .et_pb_module_header, .et_pb_blurb_2.et_pb_blurb .et_pb_module_header a {
    font-size: clamp(var(--wp--custom--mobile-font--m), 3vw, var(--wp--preset--font-size--m)) !important;
  }

  .woocommerce ul.products li.product a img {
    border-radius:10px;
  }

  .woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {
    font-size: clamp(var(--wp--custom--mobile-font--m), 3vw, var(--wp--preset--font-size--m));

    line-height: clamp(var(--wp--custom--mobile-font--l), 3vw, var(--wp--preset--font-size--l));
  }

  .related.products{
    background-color: var(--wp--preset--color--offset-light);
    padding: 20px;
  }

  /* END Woocommerce */



  #article-container .article, 
  .woocommerce ul.products li.product a{
    transition-duration: 400ms;
    -webkit-transition-duration: 400ms;
    -moz-transition-duration: 400ms;
    -o-transition-duration: 400ms;
    -ms-transition-duration: 400ms;
  }

  #article-container .article:hover,
  .woocommerce ul.products li.product a:hover{
    box-shadow:0 0 10px rgba(0, 0, 0, 0.3)
  }





} /* END media screen */










@media only screen 
and (max-width : 1224px) {
  .large-wrapper{
    width:94%;
    margin:0 3%;
  }

}



@media only screen  
and (max-width : 1260px) {
  .wp-block-group.alignwide {
    max-width: auto;
    margin:0 3%;
    width:96%;
  }
}


@media only screen 
and (max-width : 1224px) {
  .large-wrapper{
    width:94%;
    margin:0 3%;
  }

}



@media only screen 
and (max-width : 1044px) {

  .wp-block-group.is-layout-constrained{
    max-width: auto;
    margin:0 3%;
    width:96%;
  }


  .wrapper{
    width:94%;
    margin:0 3%;
  }

}





@media only screen  
and (max-width : 1024px) {


} 






@media only screen  
and (max-width : 1000px) {
  .small-wrapper{
    width:94%;
    margin:0 3%;
  }
}





@media only screen  
and (max-width : 768px) {
  .text-wrapper{
    width:94%;
    margin:0 3%;
  }

}




@media only screen 
and (max-width : 540px) {
  .tiny-wrapper{
    width:94%;
    margin:0 3%;
  }

  
}



@media only screen 
and (max-width : 480px) {

}